b99980208923f26188f584b9df34314d11ad4d31
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-mismatch.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             .horizontalGallery {
6                 width: 300px;
7                 height: 300px;
8                 overflow-y: hidden;
9                 overflow-x: auto;
10                 margin-bottom: 2px;
11                 -webkit-scroll-snap-type: mandatory;
12             }
13             .horizontal-good {
14                 -webkit-scroll-snap-points-x: repeat(300px);                
15             }
16             .horizontal-bad {
17                 -webkit-scroll-snap-points-y: repeat(100vh);
18             }
19             .horizontalGalleryDrawer {
20                 width: 1800px;
21                 height: 300px;
22             }
23             .colorBox {
24                 height: 300px;
25                 width: 300px;
26                 float: left;
27             }
28             #itemH0, #itemV0 { background-color: red; }
29             #itemH1, #itemV1 { background-color: green; }
30             #itemH2, #itemV2 { background-color: blue; }
31             #itemH3, #itemV3 { background-color: aqua; }
32             #itemH4, #itemV4 { background-color: yellow; }
33             #itemH5, #itemV5 { background-color: fuchsia; }
34         </style>
35         <script src="../../resources/js-test-pre.js"></script>
36         <script>
37         function runTest()
38         {
39             var badHorizontalTarget = document.getElementById('badHorizontalTarget');
40             debug("Scroll-snap offsets for 'badHorizontalTarget': " + window.internals.scrollSnapOffsets(badHorizontalTarget));
41
42             var horizontalTarget = document.getElementById('horizontalTarget');
43             debug("Scroll-snap offsets for 'horizontalTarget': " + window.internals.scrollSnapOffsets(horizontalTarget));
44
45             finishJSTest();
46             testRunner.notifyDone();
47         }
48
49         function onLoad()
50         {
51             if (window.testRunner) {
52                 window.jsTestIsAsync = true;
53                 testRunner.dumpAsText();
54                 testRunner.waitUntilDone();
55                 setTimeout(runTest, 0);
56             }
57         }
58         </script>
59     </head>
60     <body onload="onLoad();">
61         <div style="position: relative; width: 300px">
62             <div>Tests that the scroll-snap feature works properly with mixed-up snap points.</div>
63             <div class="horizontalGallery horizontal-bad" id="badHorizontalTarget">
64                 <div class="horizontalGalleryDrawer">
65                     <div id="itemH0" class="colorBox"></div>
66                     <div id="itemH1" class="colorBox"></div>
67                     <div id="itemH2" class="colorBox"></div>
68                     <div id="itemH3" class="colorBox"></div>
69                     <div id="itemH4" class="colorBox"></div>
70                     <div id="itemH5" class="colorBox"></div>
71                 </div>
72             </div>
73             <div class="horizontalGallery horizontal-good" id="horizontalTarget">
74                 <div class="horizontalGalleryDrawer">
75                     <div id="itemH0" class="colorBox"></div>
76                     <div id="itemH1" class="colorBox"></div>
77                     <div id="itemH2" class="colorBox"></div>
78                     <div id="itemH3" class="colorBox"></div>
79                     <div id="itemH4" class="colorBox"></div>
80                     <div id="itemH5" class="colorBox"></div>
81                 </div>
82             </div>
83             <div id="console"></div>
84         </div>
85         <script src="../../resources/js-test-post.js"></script>
86     </body>
87 </html>