Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-2d-offsets-computed-independently.html
1 <!DOCTYPE HTML>
2 <html>
3     <head>
4         <style>
5             #container {
6                 width: 400px;
7                 height: 400px;
8                 overflow: auto;
9                 scroll-snap-type: both mandatory;
10                 position: absolute;
11                 left: 0px;
12                 top: 0px;
13                 margin: 0;
14                 padding: 0;
15             }
16
17             ::-webkit-scrollbar {
18                 display: none;
19             }
20
21             .cell {
22                 width: 400px;
23                 height: 400px;
24                 margin: 0px;
25                 padding: 0px;
26                 position: absolute;
27             }
28
29             #top-left {
30                 scroll-snap-align: end;
31             }
32
33             #middle {
34                 scroll-snap-align: center;
35             }
36
37             #bottom-right {
38                 scroll-snap-align: start;
39             }
40
41             .green {
42                 background-color: green;
43             }
44
45             .red {
46                 background-color: red;
47             }
48         </style>
49         <script src="../../../resources/js-test.js"></script>
50         <script>
51         let write = s => output.innerHTML += s + "<br>";
52         if (window.testRunner) {
53             testRunner.dumpAsText();
54             testRunner.waitUntilDone();
55         }
56
57         function run() {
58             if (!window.testRunner || !window.internals) {
59                 write(`To manually test, verify that scrolling in the container snaps so that each colored box can fill
60                     the scroll container.`);
61                 return;
62             }
63
64             setTimeout(() => {
65                 write(`The scroll offsets are: ${internals.scrollSnapOffsets(container)}`);
66                 testRunner.notifyDone();
67             }, 1000);
68         }
69         </script>
70     </head>
71     <body onload=run()>
72         <div id="container">
73             <div style="top: 0px; left: 0px;" class="cell green" id="top-left"></div>
74             <div style="top: 0px; left: 400px;" class="cell red"></div>
75             <div style="top: 0px; left: 800px;" class="cell green"></div><br/>
76             <div style="top: 400px; left: 0px;" class="cell red"></div>
77             <div style="top: 400px; left: 400px;" class="cell green" id="middle"></div>
78             <div style="top: 400px; left: 800px;" class="cell red"></div><br/>
79             <div style="top: 800px; left: 0px;" class="cell green"></div>
80             <div style="top: 800px; left: 400px;" class="cell red"></div>
81             <div style="top: 800px; left: 800px;" class="cell green" id="bottom-right"></div>
82         </div>
83         <div id="output"></div>
84     </body>
85 </html>