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