Title: [210072] trunk/LayoutTests
- Revision
- 210072
- Author
- [email protected]
- Date
- 2016-12-21 12:27:46 -0800 (Wed, 21 Dec 2016)
Log Message
Add a layout test for scroll snapping with padding in the container
https://bugs.webkit.org/show_bug.cgi?id=144927
<rdar://problem/20923772>
Reviewed by Brent Fulgham.
The issue was actually addressed by changes to snap offset computation in AxisScrollSnapOffsets.cpp with
<https://trac.webkit.org/changeset/210024>, but there was no test for this. This patch adds a new layout test
verifying that the padding on child elements is accounted for when computing the scroll snap offsets of a scroll
snapping container.
* css3/scroll-snap/scroll-snap-children-with-padding-expected.txt: Added.
* css3/scroll-snap/scroll-snap-children-with-padding.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (210071 => 210072)
--- trunk/LayoutTests/ChangeLog 2016-12-21 20:19:02 UTC (rev 210071)
+++ trunk/LayoutTests/ChangeLog 2016-12-21 20:27:46 UTC (rev 210072)
@@ -1,3 +1,19 @@
+2016-12-21 Wenson Hsieh <[email protected]>
+
+ Add a layout test for scroll snapping with padding in the container
+ https://bugs.webkit.org/show_bug.cgi?id=144927
+ <rdar://problem/20923772>
+
+ Reviewed by Brent Fulgham.
+
+ The issue was actually addressed by changes to snap offset computation in AxisScrollSnapOffsets.cpp with
+ <https://trac.webkit.org/changeset/210024>, but there was no test for this. This patch adds a new layout test
+ verifying that the padding on child elements is accounted for when computing the scroll snap offsets of a scroll
+ snapping container.
+
+ * css3/scroll-snap/scroll-snap-children-with-padding-expected.txt: Added.
+ * css3/scroll-snap/scroll-snap-children-with-padding.html: Added.
+
2016-12-21 Daniel Bates <[email protected]>
WebKitTestRunner: Add comment to TestRunner::setCanOpenWindows()
Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-padding-expected.txt (0 => 210072)
--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-padding-expected.txt 2016-12-21 20:27:46 UTC (rev 210072)
@@ -0,0 +1,2 @@
+Scroll-snap offsets are: vertical = { 0, 10, 625, 1240, 1660, 2275, 2890, 2920 }
+
Added: trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-padding.html (0 => 210072)
--- trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-padding.html (rev 0)
+++ trunk/LayoutTests/css3/scroll-snap/scroll-snap-children-with-padding.html 2016-12-21 20:27:46 UTC (rev 210072)
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ #container {
+ position: absolute;
+ width: 400px;
+ height: 400px;
+ top: 0;
+ left: 0;
+ scroll-snap-type: y mandatory;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ opacity: 0.75;
+ background-color: #EEE;
+ padding: 10px;
+ }
+
+ .child {
+ width: 400px;
+ height: 400px;
+ padding-top: 100px;
+ padding-bottom: 50px;
+ left: 0;
+ }
+ </style>
+ <script>
+ let write = s => output.innerHTML += s + "<br>";
+ if (window.testRunner) {
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ }
+
+ function run()
+ {
+ if (!window.testRunner || !window.internals) {
+ write(`To manually test, verify that scrolling in the container snaps such that:`);
+ write(`- The first and fourth boxes align their top edge to the top edge of the scrolling container`);
+ write(`- The second and fifth boxes align their center to the center of the scrolling container`);
+ write(`- The third and sixth boxes align their bottom edge to the bottom edge of the scrolling container`);
+ return;
+ }
+
+ setTimeout(() => {
+ write("Scroll-snap offsets are: " + internals.scrollSnapOffsets(container));
+ testRunner.notifyDone();
+ }, 0);
+ }
+ </script>
+</head>
+<body _onload_=run()>
+ <div id="container">
+ <div class="child" style="background-color: red; scroll-snap-align: start;"></div>
+ <div class="child" style="background-color: green; scroll-snap-align: center;"></div>
+ <div class="child" style="background-color: blue; scroll-snap-align: end;"></div>
+ <div class="child" style="background-color: aqua; scroll-snap-align: start;"></div>
+ <div class="child" style="background-color: yellow; scroll-snap-align: center;"></div>
+ <div class="child" style="background-color: fuchsia; scroll-snap-align: end;"></div>
+ </div>
+ <div id="output"></div>
+</body>
+</html>
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
