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