c63cf9d75fab1d492a9549325424b91152cab4ac
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-coordinate.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>Snap points - nested snap coordinates</title>
5     <style>
6         .scrollable {
7             overflow: scroll;
8             -webkit-overflow-scrolling: touch;
9             border: 1px dashed black;
10             height: 300px;
11             margin: 0 10px;
12         }
13     
14         .center-snap-receiver {
15             -webkit-scroll-snap-type: mandatory;
16             -webkit-scroll-snap-destination: 0 0;
17         }
18     
19         .snap-point-marker {
20             margin-top: 100px;
21             width: 15px;
22             height: 15px;
23             border: 1px solid black;
24         }
25
26         .snap-point {
27             -webkit-scroll-snap-coordinate: 0 0px;
28         }
29
30         .multiple-coordinates {
31             -webkit-scroll-snap-coordinate: 0 0px 0 100px 0 220px;
32         }
33
34         .nested {
35             border: 1px dashed blue;
36         }
37     
38         .snap-point-marker::after {
39             font-size: 1em;
40             position: relative;
41             content: '+';
42         }
43     
44         .nested > .snap-point-marker {
45             margin-left: 50px;
46             border: 1px solid red;
47         }
48         .nested > .nested > .snap-point-marker {
49             margin-left: 100px;
50             border: 1px solid blue;
51         }
52     
53         .large-content {
54             height: 3000px;
55             width: 100%;
56         }
57     
58         .small-content {
59             height: 200px;
60             width: 100%;
61         }
62
63         .invalidContainer {
64             border: 1px dashed black;
65             height: 300px;
66             margin: 0 10px;
67             opacity: 0.5;
68             overflow: hidden;
69         }
70     </style>
71         <script src="../../resources/js-test-pre.js"></script>
72         <script>
73         function runTest()
74         {
75             var container = document.getElementById('container');
76             debug("Scroll-snap offsets for 'container': " + window.internals.scrollSnapOffsets(container));
77
78             finishJSTest();
79             testRunner.notifyDone();
80         }
81
82         function onLoad()
83         {
84             if (window.testRunner) {
85                 window.jsTestIsAsync = true;
86                 testRunner.dumpAsText();
87                 testRunner.waitUntilDone();
88                 setTimeout(runTest, 0);
89             }
90         }
91         </script>
92 </head>
93 <body onload="onLoad();">
94     <div id="container" class="center-snap-receiver scrollable">
95         <div class="snap-point snap-point-marker"></div>
96         <div class="nested">
97             <div class="snap-point snap-point-marker"></div>
98         </div>
99         <div class="nested">
100             <div class="nested">
101                 <div class="snap-point snap-point-marker"></div>
102             </div>
103         </div>
104         <div class="snap-point snap-point-marker"></div>
105         <div class="snap-point snap-point-marker"></div>
106         <div class="multiple-coordinates nested">
107             <div class="snap-point-marker"></div>
108             <div class="nested">
109                 <div class="snap-point-marker"></div>
110             </div>
111         </div>
112         <div class="nested">
113             <div class="snap-point snap-point-marker"></div>
114         </div>
115         <div class="snap-point snap-point-marker"></div>
116         <div class="nested">
117             <div class="snap-point snap-point-marker"></div>
118         </div>
119         <div class="snap-point snap-point-marker"></div>
120         <div class="snap-point snap-point-marker"></div>
121         <div class="nested">
122             <div class="snap-point snap-point-marker"></div>
123         </div>
124          <div class="snap-point snap-point-marker"></div>
125         <div class="nested">
126             <div class="snap-point snap-point-marker"></div>
127         </div>
128         <div class="nested">
129             <div class="nested">
130                 <div class="snap-point snap-point-marker"></div>
131             </div>
132         </div>
133         <div class="snap-point snap-point-marker"></div>
134         <div class="nested multiple-coordinates">
135             <div class="snap-point-marker"></div>
136             <div class="nested">
137                 <div class="snap-point-marker"></div>
138             </div>
139         </div>
140         <div class="large-content"></div>
141     </div>
142     <script src="../../resources/js-test-post.js"></script>
143 </body>
144 </html>