Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / tiled-drawing / scrolling / latched-div-with-scroll-snap.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             body {
6                 margin: 0;
7             }
8
9             #topTarget {
10                 position: absolute;
11                 top: 0;
12                 left: 0;
13                 border: 1px black solid;
14             }
15
16             #bottomTarget {
17                 position: absolute;
18                 top: 400px;
19                 left: 0;
20                 border: 1px black solid;
21             }
22
23             .gallery {
24                 width: 400px;
25                 height: 400px;
26                 overflow-y: hidden;
27                 overflow-x: auto;
28                 margin-bottom: 2px;
29                 scroll-snap-type: x mandatory;
30                 opacity: 0.5;
31             }
32
33             .galleryDrawer {
34                 width: 2400px;
35                 height: 400px;
36             }
37
38             .colorBox {
39                 height: 400px;
40                 width: 400px;
41                 float: left;
42                 scroll-snap-align: start;
43             }
44             #itemH0, #itemV0 { background-color: red; }
45             #itemH1, #itemV1 { background-color: green; }
46             #itemH2, #itemV2 { background-color: blue; }
47             #itemH3, #itemV3 { background-color: aqua; }
48             #itemH4, #itemV4 { background-color: yellow; }
49             #itemH5, #itemV5 { background-color: fuchsia; }
50         </style>
51         <script>
52         function locationInWindowCoordinates(element)
53         {
54             var position = {};
55             position.x = element.offsetLeft;
56             position.y = element.offsetTop;
57
58             while (element.offsetParent) {
59                 position.x = position.x + element.offsetParent.offsetLeft;
60                 position.y = position.y + element.offsetParent.offsetTop;
61                 if (element == document.getElementsByTagName("body")[0])
62                     break;
63
64                 element = element.offsetParent;
65             }
66
67             return position;
68         }
69
70         let swipeWithMomentum = (element) => swipeInElement(element, true);
71         let swipeWithoutMomentum = (element) => swipeInElement(element, false);
72         function swipeInElement(element, momentum)
73         {
74             return new Promise(resolve => {
75                 write(`* Swiping ${momentum ? "with" : "without"} momentum in ${element.id} with scroll offset ${element.scrollLeft}`);
76                 let location = locationInWindowCoordinates(element);
77                 eventSender.monitorWheelEvents();
78                 eventSender.mouseMoveTo(location.x, location.y);
79                 eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "began", "none");
80                 eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
81                 eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
82                 eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
83                 if (momentum) {
84                     eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "none", "begin");
85                     eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "none", "continue");
86                     eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
87                 }
88                 eventSender.callAfterScrollingCompletes(() => {
89                     write(`  topTarget now has scroll offset ${topTarget.scrollLeft}`);
90                     write(`  bottomTarget now has scroll offset ${bottomTarget.scrollLeft}`);
91                     write("");
92                     resolve();
93                 });
94             });
95         }
96
97         function run()
98         {
99             if (!window.eventSender)
100                 return;
101
102             swipeWithMomentum(topTarget)
103                 .then(() => swipeWithoutMomentum(topTarget))
104                 .then(() => swipeWithMomentum(bottomTarget))
105                 .then(() => swipeWithoutMomentum(bottomTarget))
106                 .then(() => testRunner.notifyDone());
107         }
108         </script>
109     </head>
110     <body onload=run()>
111         <div style="position: relative; width: 400px">
112             <p>Manually test with the following steps:</p>
113             <p>1. Scroll with momentum to the green box in the first div.</p>
114             <p>2. In the first div, drag so the blue box is partially visible, then let go so the div snaps back to show green.</p>
115             <p>3. Scroll with momentum to the green box in the second div.</p>
116             <p>4. In the second div, drag so the blue box is partially visible, then let go so the div snaps back to show green.</p>
117             <div class="gallery" id="topTarget">
118                 <div class="galleryDrawer">
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="gallery" id="bottomTarget">
128                 <div class="galleryDrawer">
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 id="output"></div>
138             <script>
139                 let write = s => output.innerHTML += s + "<br>";
140                 testRunner.dumpAsText();
141                 testRunner.waitUntilDone();
142             </script>
143         </div>
144     </body>
145 </html>