Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-offsets.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             .bordered {
6                 border-top: 20px solid black;
7                 border-bottom: 10px solid black;
8                 border-left: 15px solid black;
9                 border-right: 9px solid black;
10             }
11             .padded {
12                 padding-left: 20px;
13                 padding-right: 10px;
14                 padding-top: 15px;
15                 padding-bottom: 9px;
16             }
17             .horizontalGallery {
18                 width: 30px;
19                 height: 30px;
20                 overflow-y: hidden;
21                 overflow-x: auto;
22                 margin: 2px;
23                 -webkit-overflow-scrolling: touch;
24                 scroll-snap-type: x mandatory;
25             }
26             .horizontalGalleryDrawer {
27                 width: 180px;
28                 height: 30px;
29             }
30             .verticalGallery {
31                 width: 30px;
32                 height: 30px;
33                 display: inline-block;
34                 overflow-x: hidden;
35                 overflow-y: auto;
36                 margin: 2px;
37                 -webkit-overflow-scrolling: touch;
38                 scroll-snap-type: y mandatory;
39             }
40             .verticalGalleryDrawer {
41                 width: 30px;
42                 height: 180px;
43             }
44             .colorBox {
45                 height: 30px;
46                 width: 30px;
47                 float: left;
48             }
49             .colorBox {
50                 scroll-snap-align: start;
51             }
52             #itemH0, #itemV0 { background-color: red; }
53             #itemH1, #itemV1 { background-color: green; }
54             #itemH2, #itemV2 { background-color: blue; }
55             #itemH3, #itemV3 { background-color: aqua; }
56             #itemH4, #itemV4 { background-color: yellow; }
57             #itemH5, #itemV5 { background-color: fuchsia; }
58         </style>
59         <script src="../../resources/js-test-pre.js"></script>
60         <script>
61         function reportResult(horizontalTargetID, verticalTargetID)
62         {
63             var horizontalTarget = document.getElementById(horizontalTargetID);
64             var verticalTarget = document.getElementById(verticalTargetID);
65
66             debug("Scroll-snap offsets for " + horizontalTargetID + ": " + window.internals.scrollSnapOffsets(horizontalTarget));
67             debug("Scroll-snap offsets for " + verticalTargetID + ": " + window.internals.scrollSnapOffsets(verticalTarget));
68         }
69
70         function runTest()
71         {
72             reportResult('horizontalTarget', 'verticalTarget');
73             reportResult('horizontalBorderedTarget', 'verticalBorderedTarget');
74             reportResult('horizontalPaddedTarget', 'verticalPaddedTarget');
75             reportResult('horizontalBorderedPaddedTarget', 'verticalBorderedPaddedTarget');
76             reportResult('horizontalRotatedTarget', 'verticalRotatedTarget')
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 style="position: relative; width: 300px">
95             <div>Tests that the scroll-snap feature works properly in overflow regions.</div>
96             <div class="horizontalGallery" id="horizontalTarget">
97                 <div class="horizontalGalleryDrawer">
98                     <div id="itemH0" class="colorBox"></div>
99                     <div id="itemH1" class="colorBox"></div>
100                     <div id="itemH2" class="colorBox"></div>
101                     <div id="itemH3" class="colorBox"></div>
102                     <div id="itemH4" class="colorBox"></div>
103                     <div id="itemH5" class="colorBox"></div>
104                 </div>
105             </div>
106             <div class="verticalGallery" id="verticalTarget">
107                 <div class="verticalGalleryDrawer">
108                     <div id="itemV0" class="colorBox"></div>
109                     <div id="itemV1" class="colorBox"></div>
110                     <div id="itemV2" class="colorBox"></div>
111                     <div id="itemV3" class="colorBox"></div>
112                     <div id="itemV4" class="colorBox"></div>
113                     <div id="itemV5" class="colorBox"></div>
114                 </div>
115             </div>
116             <div class="horizontalGallery bordered" id="horizontalBorderedTarget">
117                 <div class="horizontalGalleryDrawer">
118                     <div id="itemH0" class="colorBox"></div>
119                     <div id="itemH1" class="colorBox"></div>
120                     <div id="itemH2" class="colorBox"></div>
121                     <div id="itemH3" class="colorBox"></div>
122                     <div id="itemH4" class="colorBox"></div>
123                     <div id="itemH5" class="colorBox"></div>
124                 </div>
125             </div>
126             <div class="verticalGallery bordered" id="verticalBorderedTarget">
127                 <div class="verticalGalleryDrawer">
128                     <div id="itemV0" class="colorBox"></div>
129                     <div id="itemV1" class="colorBox"></div>
130                     <div id="itemV2" class="colorBox"></div>
131                     <div id="itemV3" class="colorBox"></div>
132                     <div id="itemV4" class="colorBox"></div>
133                     <div id="itemV5" class="colorBox"></div>
134                 </div>
135             </div>
136             <div class="horizontalGallery padded" id="horizontalPaddedTarget">
137                 <div class="horizontalGalleryDrawer">
138                     <div id="itemH0" class="colorBox"></div>
139                     <div id="itemH1" class="colorBox"></div>
140                     <div id="itemH2" class="colorBox"></div>
141                     <div id="itemH3" class="colorBox"></div>
142                     <div id="itemH4" class="colorBox"></div>
143                     <div id="itemH5" class="colorBox"></div>
144                 </div>
145             </div>
146             <div class="verticalGallery padded" id="verticalPaddedTarget">
147                 <div class="verticalGalleryDrawer">
148                     <div id="itemV0" class="colorBox"></div>
149                     <div id="itemV1" class="colorBox"></div>
150                     <div id="itemV2" class="colorBox"></div>
151                     <div id="itemV3" class="colorBox"></div>
152                     <div id="itemV4" class="colorBox"></div>
153                     <div id="itemV5" class="colorBox"></div>
154                 </div>
155             </div>
156             <div class="horizontalGallery bordered padded" id="horizontalBorderedPaddedTarget">
157                 <div class="horizontalGalleryDrawer">
158                     <div id="itemH0" class="colorBox"></div>
159                     <div id="itemH1" class="colorBox"></div>
160                     <div id="itemH2" class="colorBox"></div>
161                     <div id="itemH3" class="colorBox"></div>
162                     <div id="itemH4" class="colorBox"></div>
163                     <div id="itemH5" class="colorBox"></div>
164                 </div>
165             </div>
166             <div class="verticalGallery bordered padded" id="verticalBorderedPaddedTarget">
167                 <div class="verticalGalleryDrawer">
168                     <div id="itemV0" class="colorBox"></div>
169                     <div id="itemV1" class="colorBox"></div>
170                     <div id="itemV2" class="colorBox"></div>
171                     <div id="itemV3" class="colorBox"></div>
172                     <div id="itemV4" class="colorBox"></div>
173                     <div id="itemV5" class="colorBox"></div>
174                 </div>
175             </div>
176             <div class="horizontalGallery bordered padded" id="horizontalRotatedTarget" style="-webkit-transform: rotate(20deg)">
177                 <div class="horizontalGalleryDrawer">
178                     <div id="itemH0" class="colorBox"></div>
179                     <div id="itemH1" class="colorBox"></div>
180                     <div id="itemH2" class="colorBox"></div>
181                     <div id="itemH3" class="colorBox"></div>
182                     <div id="itemH4" class="colorBox"></div>
183                     <div id="itemH5" class="colorBox"></div>
184                 </div>
185             </div>
186             <div class="verticalGallery bordered padded" id="verticalRotatedTarget" style="-webkit-transform: rotate(-20deg)">
187                 <div class="verticalGalleryDrawer">
188                     <div id="itemV0" class="colorBox"></div>
189                     <div id="itemV1" class="colorBox"></div>
190                     <div id="itemV2" class="colorBox"></div>
191                     <div id="itemV3" class="colorBox"></div>
192                     <div id="itemV4" class="colorBox"></div>
193                     <div id="itemV5" class="colorBox"></div>
194                 </div>
195             </div>
196             <div id="console"></div>
197         </div>
198         <script src="../../resources/js-test-post.js"></script>
199     </body>
200 </html>