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