1e3f3f67ad27aa9807cc5d833c807cfd91cf9196
[WebKit-https.git] / LayoutTests / fast / events / touch / ios / content-observation / opacity-change-happens-on-mousemove-with-opacity-and-left.html
1 <html>
2 <head>
3 <title>This tests the case when visible content change happens on mousemove with transition.</title>
4 <script src="../../../../../resources/basic-gestures.js"></script>
5 <style>
6 #tapthis {
7     width: 400px;
8     height: 400px;
9     border: 1px solid green;
10 }
11
12 #becomesVisible {
13     position: absolute;
14     opacity: 0;
15     left: -200px;
16     width: 100px;
17     height: 100px;
18     background-color: green;
19         transition-property: opacity, left;
20         transition-duration: 100ms, 200ms;
21 }
22 </style>
23 <script>
24 async function test() {
25     if (!window.testRunner || !testRunner.runUIScript)
26         return;
27     if (window.internals)
28         internals.settings.setContentChangeObserverEnabled(true);
29
30     testRunner.waitUntilDone();
31     testRunner.dumpAsText();
32
33     let rect = tapthis.getBoundingClientRect();
34     let x = rect.left + rect.width / 2;
35     let y = rect.top + rect.height / 2;
36
37     await tapAtPoint(x, y);
38 }
39 </script>
40 </head>
41 <body onload="test()">
42 <div id=tapthis>PASS if 'clicked' text is not shown below.</div>
43 <div id=becomesVisible></div>
44 <pre id=result></pre>
45 <script>
46 tapthis.addEventListener("mousemove", function( event ) {
47     becomesVisible.style.opacity = "1";
48     becomesVisible.style.left = "100px";
49     if (window.testRunner)
50         setTimeout("testRunner.notifyDone()", 250);
51 }, false);
52
53 becomesVisible.addEventListener("click", function( event ) {   
54     result.innerHTML = "clicked hidden";
55 }, false);
56
57 tapthis.addEventListener("click", function( event ) {   
58     result.innerHTML = "clicked";
59 }, false);
60 </script>
61 </body>
62 </html>