Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-2d-change-axis-type.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: x 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                 scroll-snap-align: center;
28             }
29
30             .green {
31                 background-color: green;
32             }
33
34             .red {
35                 background-color: red;
36             }
37         </style>
38         <script src="../../../resources/js-test.js"></script>
39         <script>
40         let write = s => output.innerHTML += s + "<br>";
41         if (window.testRunner) {
42             testRunner.dumpAsText();
43             testRunner.waitUntilDone();
44         }
45
46         function run() {
47             if (!window.testRunner || !window.internals) {
48                 write(`To manually test, verify that scrolling in the container snaps so that each colored box can fill
49                     the scroll container.`);
50                 return;
51             }
52
53             setTimeout(() => {
54                 write(`The scroll offsets are: ${internals.scrollSnapOffsets(container)}`);
55                 testRunner.notifyDone();
56             }, 1000);
57         }
58         </script>
59     </head>
60     <body onload=run()>
61         <div id="container">
62             <div style="top: 0px; left: 0px;" class="cell green"></div>
63             <div style="top: 0px; left: 400px;" class="cell red"></div>
64             <div style="top: 0px; left: 800px;" class="cell green"></div><br/>
65             <div style="top: 400px; left: 0px;" class="cell red"></div>
66             <div style="top: 400px; left: 400px;" class="cell green"></div>
67             <div style="top: 400px; left: 800px;" class="cell red"></div><br/>
68             <div style="top: 800px; left: 0px;" class="cell green"></div>
69             <div style="top: 800px; left: 400px;" class="cell red"></div>
70             <div style="top: 800px; left: 800px;" class="cell green"></div>
71         </div>
72         <script>
73             container.style.scrollSnapType = "both mandatory";
74         </script>
75         <div id="output"></div>
76     </body>
77 </html>