Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-style-changed-align.html
1 <html>
2
3     <head>
4         <style>
5             #gallery {
6                 width: 315px;
7                 height: 600px;
8                 scroll-snap-type: y mandatory;
9                 -webkit-overflow-scrolling: touch;
10                 overflow-y: scroll;
11                 position: absolute;
12             }
13
14             .vertical {
15                 width: 300px;
16                 height: 300px;
17                 scroll-snap-align: start;
18                 position: absolute;
19             }
20
21             #child00 { background-color: #DD0000; left: 0; top: 0px; }
22             #child01 { background-color: #FF6666; left: 0; top: 300px; }
23             #child02 { background-color: #00DD00; left: 0; top: 600px; }
24             #child03 { background-color: #66FF66; left: 0; top: 900px; }
25             #child04 { background-color: #0000DD; left: 0; top: 1200px; }
26             #child05 { background-color: #6666FF; left: 0; top: 1500px; }
27         </style>
28         <script src="../../resources/js-test-pre.js"></script>
29         <script>
30         function setup() {
31             var gallery = document.getElementById("gallery");
32             var coordinateChildElements = document.getElementsByClassName("vertical");
33
34             function snapOffsets() {
35                 return window.internals.scrollSnapOffsets(gallery);
36             }
37
38             function dumpGalleryAndUpdateCoordinates() {
39                 debug("Original snap offsets with `start` alignment: " + snapOffsets());
40                 for (var index = 0; index < coordinateChildElements.length; ++index)
41                     coordinateChildElements[index].style.scrollSnapAlign = "center";
42
43                 setTimeout(dumpGalleryAndFinishTest, 0);
44             }
45
46             function dumpGalleryAndFinishTest() {
47                 debug("Updated alignment to `center`: " + snapOffsets());
48                 finishJSTest();
49                 testRunner.notifyDone();
50             }
51
52             if (window.testRunner) {
53                 window.jsTestIsAsync = true;
54                 testRunner.dumpAsText();
55                 testRunner.waitUntilDone();
56                 setTimeout(dumpGalleryAndUpdateCoordinates, 0);
57             }
58         }
59         </script>
60     </head>
61
62     <body onload="setup()">
63         <div id="gallery">
64             <div class="vertical" id="child00"></div>
65             <div class="vertical" id="child01"></div>
66             <div class="vertical" id="child02"></div>
67             <div class="vertical" id="child03"></div>
68             <div class="vertical" id="child04"></div>
69             <div class="vertical" id="child05"></div>
70         </div>
71         <script src="../../resources/js-test-post.js"></script>
72     </body>
73
74 </html>