Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-positions.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>Snap points - nested snap coordinates</title>
5     <style>
6         #container {
7             position: absolute;
8             width: 300px;
9             height: 300px;
10             top: 100px;
11             left: 100px;
12         }
13
14         .scrollable {
15             overflow: scroll;
16             -webkit-overflow-scrolling: touch;
17             height: 300px;
18             margin: 0 10px;
19         }
20
21         ::-webkit-scrollbar {
22             display: none;
23         }
24     
25         .center-snap-receiver {
26             scroll-snap-type: y mandatory;
27         }
28     
29         .snap-point-marker {
30             margin-top: 100px;
31             width: 15px;
32             height: 15px;
33         }
34
35         .snap-point-start {
36             scroll-snap-align: start;
37             background-color: red;
38             opacity: 0.5;
39         }
40
41         .snap-point-center {
42             scroll-snap-align: center;
43             background-color: green;
44             opacity: 0.5;
45         }
46
47         .snap-point-end {
48             scroll-snap-align: end;
49             background-color: blue;
50             opacity: 0.5;
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             background-color: black;
65             opacity: 0.1;
66             height: 300px;
67             margin: 0 10px;
68             opacity: 0.5;
69             overflow: hidden;
70         }
71
72         #alignment-marker-box {
73             position: absolute;
74             top: 0;
75             left: 0;
76             width: 300px;
77             height: 300px;
78             top: 100px;
79             left: 100px;
80             z-index: -1;
81             margin: 0 10px;
82         }
83
84         .alignment-marker {
85             position: absolute;
86             width: 100%;
87             height: 1px;
88         }
89     </style>
90         <script src="../../resources/js-test-pre.js"></script>
91         <script>
92         function runTest()
93         {
94             var container = document.getElementById('container');
95             debug("Scroll-snap offsets for 'container': " + window.internals.scrollSnapOffsets(container));
96
97             finishJSTest();
98             testRunner.notifyDone();
99         }
100
101         function onLoad()
102         {
103             if (window.testRunner) {
104                 window.jsTestIsAsync = true;
105                 testRunner.dumpAsText();
106                 testRunner.waitUntilDone();
107                 setTimeout(runTest, 0);
108             }
109         }
110         </script>
111 </head>
112 <body onload="onLoad();">
113     <div id="container" class="center-snap-receiver scrollable">
114         <div id="snap-child-1" class="snap-point-start snap-point-marker"></div>
115         <div class="nested">
116             <div id="snap-child-2" class="snap-point-center snap-point-marker"></div>
117         </div>
118         <div class="nested">
119             <div class="nested">
120                 <div id="snap-child-3" class="snap-point-start snap-point-marker"></div>
121             </div>
122         </div>
123         <div id="snap-child-4" class="snap-point-start snap-point-marker"></div>
124         <div id="snap-child-5" class="snap-point-start snap-point-marker"></div>
125         <div class="nested">
126             <div id="snap-child-6" class="snap-point-start snap-point-marker"></div>
127         </div>
128         <div id="snap-child-7" class="snap-point-start snap-point-marker"></div>
129         <div class="nested">
130             <div id="snap-child-8" class="snap-point-center snap-point-marker"></div>
131         </div>
132         <div id="snap-child-9" class="snap-point-start snap-point-marker"></div>
133         <div id="snap-child-10" class="snap-point-center snap-point-marker"></div>
134         <div class="nested">
135             <div id="snap-child-11" class="snap-point-start snap-point-marker"></div>
136         </div>
137          <div id="snap-child-12" class="snap-point-start snap-point-marker"></div>
138         <div class="nested">
139             <div id="snap-child-13" class="snap-point-start snap-point-marker"></div>
140         </div>
141         <div class="nested">
142             <div class="nested">
143                 <div id="snap-child-14" class="snap-point-end snap-point-marker"></div>
144             </div>
145         </div>
146         <div id="snap-child-15" class="snap-point-end snap-point-marker"></div>
147         <div class="large-content"></div>
148     </div>
149     <div id="alignment-marker-box">
150         <div style="border-bottom: 2px red solid;" class="alignment-marker"></div>
151         <div style="border-bottom: 2px green solid; top: 150px;" class="alignment-marker"></div>
152         <div style="border-bottom: 2px blue solid; top: 300px;" class="alignment-marker"></div>
153     </div>
154     <script src="../../resources/js-test-post.js"></script>
155 </body>
156 </html>