708c0e2419ed22b979e50719bf21141948c83c65
[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                 -webkit-scroll-snap-points-x: repeat(100%);
25                 -webkit-scroll-snap-type: mandatory;
26                 -webkit-scroll-snap-coordinate: 50% 50%;
27             }
28             .horizontalGalleryDrawer {
29                 width: 180px;
30                 height: 30px;
31             }
32             .verticalGallery {
33                 width: 30px;
34                 height: 30px;
35                 display: inline-block;
36                 overflow-x: hidden;
37                 overflow-y: auto;
38                 margin: 2px;
39                 -webkit-overflow-scrolling: touch;
40                 -webkit-scroll-snap-points-y: repeat(100%);
41                 -webkit-scroll-snap-type: mandatory;
42                 -webkit-scroll-snap-coordinate: 50% 50%;
43             }
44             .verticalGalleryDrawer {
45                 width: 30px;
46                 height: 180px;
47             }
48             .colorBox {
49                 height: 30px;
50                 width: 30px;
51                 float: left;
52             }
53             #itemH0, #itemV0 { background-color: red; }
54             #itemH1, #itemV1 { background-color: green; }
55             #itemH2, #itemV2 { background-color: blue; }
56             #itemH3, #itemV3 { background-color: aqua; }
57             #itemH4, #itemV4 { background-color: yellow; }
58             #itemH5, #itemV5 { background-color: fuchsia; }
59         </style>
60         <script src="../../resources/js-test-pre.js"></script>
61         <script>
62         function reportResult(horizontalTargetID, verticalTargetID)
63         {
64             var horizontalTarget = document.getElementById(horizontalTargetID);
65             var verticalTarget = document.getElementById(verticalTargetID);
66
67             debug("Scroll-snap offsets for " + horizontalTargetID + ": " + window.internals.scrollSnapOffsets(horizontalTarget));
68             debug("Scroll-snap offsets for " + verticalTargetID + ": " + window.internals.scrollSnapOffsets(verticalTarget));
69         }
70
71         function runTest()
72         {
73             reportResult('horizontalTarget', 'verticalTarget');
74             reportResult('horizontalBorderedTarget', 'verticalBorderedTarget');
75             reportResult('horizontalPaddedTarget', 'verticalPaddedTarget');
76             reportResult('horizontalBorderedPaddedTarget', 'verticalBorderedPaddedTarget');
77             reportResult('horizontalRotatedTarget', 'verticalRotatedTarget')
78
79             finishJSTest();
80             testRunner.notifyDone();
81         }
82
83         function onLoad()
84         {
85             if (window.testRunner) {
86                 window.jsTestIsAsync = true;
87                 testRunner.dumpAsText();
88                 testRunner.waitUntilDone();
89                 setTimeout(runTest, 0);
90             }
91         }
92         </script>
93     </head>
94     <body onload="onLoad();">
95         <div style="position: relative; width: 300px">
96             <div>Tests that the scroll-snap feature works properly in overflow regions.</div>
97             <div class="horizontalGallery" id="horizontalTarget">
98                 <div class="horizontalGalleryDrawer">
99                     <div id="itemH0" class="colorBox"></div>
100                     <div id="itemH1" class="colorBox"></div>
101                     <div id="itemH2" class="colorBox"></div>
102                     <div id="itemH3" class="colorBox"></div>
103                     <div id="itemH4" class="colorBox"></div>
104                     <div id="itemH5" class="colorBox"></div>
105                 </div>
106             </div>
107             <div class="verticalGallery" id="verticalTarget">
108                 <div class="verticalGalleryDrawer">
109                     <div id="itemV0" class="colorBox"></div>
110                     <div id="itemV1" class="colorBox"></div>
111                     <div id="itemV2" class="colorBox"></div>
112                     <div id="itemV3" class="colorBox"></div>
113                     <div id="itemV4" class="colorBox"></div>
114                     <div id="itemV5" class="colorBox"></div>
115                 </div>
116             </div>
117             <div class="horizontalGallery bordered" id="horizontalBorderedTarget">
118                 <div class="horizontalGalleryDrawer">
119                     <div id="itemH0" class="colorBox"></div>
120                     <div id="itemH1" class="colorBox"></div>
121                     <div id="itemH2" class="colorBox"></div>
122                     <div id="itemH3" class="colorBox"></div>
123                     <div id="itemH4" class="colorBox"></div>
124                     <div id="itemH5" class="colorBox"></div>
125                 </div>
126             </div>
127             <div class="verticalGallery bordered" id="verticalBorderedTarget">
128                 <div class="verticalGalleryDrawer">
129                     <div id="itemV0" class="colorBox"></div>
130                     <div id="itemV1" class="colorBox"></div>
131                     <div id="itemV2" class="colorBox"></div>
132                     <div id="itemV3" class="colorBox"></div>
133                     <div id="itemV4" class="colorBox"></div>
134                     <div id="itemV5" class="colorBox"></div>
135                 </div>
136             </div>
137             <div class="horizontalGallery padded" id="horizontalPaddedTarget">
138                 <div class="horizontalGalleryDrawer">
139                     <div id="itemH0" class="colorBox"></div>
140                     <div id="itemH1" class="colorBox"></div>
141                     <div id="itemH2" class="colorBox"></div>
142                     <div id="itemH3" class="colorBox"></div>
143                     <div id="itemH4" class="colorBox"></div>
144                     <div id="itemH5" class="colorBox"></div>
145                 </div>
146             </div>
147             <div class="verticalGallery padded" id="verticalPaddedTarget">
148                 <div class="verticalGalleryDrawer">
149                     <div id="itemV0" class="colorBox"></div>
150                     <div id="itemV1" class="colorBox"></div>
151                     <div id="itemV2" class="colorBox"></div>
152                     <div id="itemV3" class="colorBox"></div>
153                     <div id="itemV4" class="colorBox"></div>
154                     <div id="itemV5" class="colorBox"></div>
155                 </div>
156             </div>
157             <div class="horizontalGallery bordered padded" id="horizontalBorderedPaddedTarget">
158                 <div class="horizontalGalleryDrawer">
159                     <div id="itemH0" class="colorBox"></div>
160                     <div id="itemH1" class="colorBox"></div>
161                     <div id="itemH2" class="colorBox"></div>
162                     <div id="itemH3" class="colorBox"></div>
163                     <div id="itemH4" class="colorBox"></div>
164                     <div id="itemH5" class="colorBox"></div>
165                 </div>
166             </div>
167             <div class="verticalGallery bordered padded" id="verticalBorderedPaddedTarget">
168                 <div class="verticalGalleryDrawer">
169                     <div id="itemV0" class="colorBox"></div>
170                     <div id="itemV1" class="colorBox"></div>
171                     <div id="itemV2" class="colorBox"></div>
172                     <div id="itemV3" class="colorBox"></div>
173                     <div id="itemV4" class="colorBox"></div>
174                     <div id="itemV5" class="colorBox"></div>
175                 </div>
176             </div>
177             <div class="horizontalGallery bordered padded" id="horizontalRotatedTarget" style="-webkit-transform: rotate(20deg)">
178                 <div class="horizontalGalleryDrawer">
179                     <div id="itemH0" class="colorBox"></div>
180                     <div id="itemH1" class="colorBox"></div>
181                     <div id="itemH2" class="colorBox"></div>
182                     <div id="itemH3" class="colorBox"></div>
183                     <div id="itemH4" class="colorBox"></div>
184                     <div id="itemH5" class="colorBox"></div>
185                 </div>
186             </div>
187             <div class="verticalGallery bordered padded" id="verticalRotatedTarget" style="-webkit-transform: rotate(-20deg)">
188                 <div class="verticalGalleryDrawer">
189                     <div id="itemV0" class="colorBox"></div>
190                     <div id="itemV1" class="colorBox"></div>
191                     <div id="itemV2" class="colorBox"></div>
192                     <div id="itemV3" class="colorBox"></div>
193                     <div id="itemV4" class="colorBox"></div>
194                     <div id="itemV5" class="colorBox"></div>
195                 </div>
196             </div>
197             <div id="console"></div>
198         </div>
199         <script src="../../resources/js-test-post.js"></script>
200     </body>
201 </html>