a9c4defdde62c3d1431643d743f8d7d0d47d6805
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-elements-container-larger-than-children.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             #outer-container {
6                 width: 300px;
7                 height: 300px;
8                 overflow-y: hidden;
9                 overflow-x: auto;
10                 -webkit-scroll-snap-points-x: elements;
11                 -webkit-scroll-snap-type: mandatory;
12             }
13             #inner-container {
14                 width: 1800px;
15                 height: 300px;
16             }
17             .snap-child {
18                 height: 300px;
19                 float: left;
20                 min-width: 200px;
21                 -webkit-scroll-snap-coordinate: 0 0;
22             }
23         </style>
24         <script src="../../resources/js-test-pre.js"></script>
25         <script>
26             function runTest()
27             {
28                 var container = document.getElementById("outer-container");
29                 debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(container));
30
31                 finishJSTest();
32                 testRunner.notifyDone();
33             }
34
35             function onLoad()
36             {
37                 if (window.testRunner) {
38                     window.jsTestIsAsync = true;
39                     testRunner.dumpAsText();
40                     testRunner.waitUntilDone();
41                     setTimeout(runTest, 0);
42                 }
43             }
44         </script>
45     </head>
46     <body onload=onLoad()>
47         <div style="position: relative; height: 500px; width: 500px">
48             <div id="outer-container">
49                 <div id="inner-container">
50                     <div id="item0" class="snap-child"></div>
51                     <div id="item1" class="snap-child"></div>
52                     <div id="item2" class="snap-child"></div>
53                     <div id="item3" class="snap-child"></div>
54                     <div id="item4" class="snap-child"></div>
55                     <div id="item5" class="snap-child"></div>
56                 </div>
57             </div>
58         </div>
59         <script src="../../resources/js-test-post.js"></script>
60     </body>
61 </html>