Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-with-scroll-padding.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <style>
5         body {
6             overflow: hidden;
7         }
8         #container {
9             position: absolute;
10             width: 400px;
11             height: 400px;
12             top: 0;
13             left: 0;
14             scroll-snap-type: y mandatory;
15             scroll-padding: 50px;
16             overflow-x: hidden;
17             overflow-y: scroll;
18             border: 1px black dashed;
19             opacity: 0.75;
20             background-color: #EEE;
21         }
22
23         .child {
24             width: 400px;
25             height: 400px;
26             scroll-snap-align: start;
27             position: absolute;
28             left: 0;
29         }
30     </style>
31     <script>
32     let write = s => output.innerHTML += s + "<br>";
33     if (window.testRunner) {
34         testRunner.dumpAsText();
35         testRunner.waitUntilDone();
36     }
37
38     function zeroDelayTimeout(action) {
39         return new Promise((resolve) => {
40             setTimeout(() => {
41                 action();
42                 resolve();
43             });
44         });
45     }
46
47     function run()
48     {
49         if (!window.testRunner || !window.internals) {
50             write(`To manually test, verify that scrolling snaps 50px above each colored box.`);
51             return;
52         }
53
54         zeroDelayTimeout(() => {
55             write("Scroll-snap offsets are: " + internals.scrollSnapOffsets(container));
56             container.scrollTop += 100;
57             container.style.width = "500px";
58         })
59         .then(() => {
60             zeroDelayTimeout(() => {
61                 write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
62                 container.scrollTop += 100;
63                 container.style.scrollPadding = "0px";
64             });
65         })
66         .then(() => {
67             zeroDelayTimeout(() => {
68                 write("After removing scroll-padding, the offsets are: " + internals.scrollSnapOffsets(container));
69                 container.scrollTop += 100;
70                 container.style.width = "400px";
71             });
72         })
73         .then(() => {
74             zeroDelayTimeout(() => {
75                 write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
76                 testRunner.notifyDone();
77             });
78         });
79     }
80     </script>
81 </head>
82 <body onload=run()>
83     <div id="container">
84         <div class="child" style="background-color: red;     top: 0px;"></div>
85         <div class="child" style="background-color: green;   top: 720px;"></div>
86         <div class="child" style="background-color: blue;    top: 1440px;"></div>
87         <div class="child" style="background-color: aqua;    top: 2160px;"></div>
88         <div class="child" style="background-color: yellow;  top: 2880px;"></div>
89         <div class="child" style="background-color: fuchsia; top: 3600px;"></div>
90     </div>
91     <div id="output"></div>
92 </body>
93 </html>