15818bcd45e71d1fcfad839c566b6fbfd8bae99a
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-style-changed-coordinates.html
1 <html>
2
3     <head>
4         <style>
5             #gallery {
6                 width: 515px;
7                 height: 500px;
8                 -webkit-scroll-snap-type: mandatory;
9                 -webkit-overflow-scrolling: touch;
10                 overflow-y: scroll;
11                 position: absolute;
12             }
13
14             .vertical {
15                 width: 500px;
16                 height: 500px;
17                 -webkit-scroll-snap-coordinate: 0% 0%;
18                 position: absolute;
19             }
20
21             #child00 { background-color: #DD0000; left: 0; top: 0px; }
22             #child01 { background-color: #FF6666; left: 0; top: 500px; }
23             #child02 { background-color: #00DD00; left: 0; top: 1000px; }
24             #child03 { background-color: #66FF66; left: 0; top: 1500px; }
25             #child04 { background-color: #0000DD; left: 0; top: 2000px; }
26             #child05 { background-color: #6666FF; left: 0; top: 2500px; }
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: " + snapOffsets());
40                 for (var index = 0; index < coordinateChildElements.length; ++index)
41                     coordinateChildElements[index].style.webkitScrollSnapCoordinate = "0px 250px";
42
43                 setTimeout(dumpGalleryAndFinishTest, 0);
44             }
45
46             function dumpGalleryAndFinishTest() {
47                 debug("Updated child coordinates to 0px 250px: " + 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>