83b48f41e0da8466e11aea2d89a46f2c1f5839d4
[WebKit-https.git] / LayoutTests / fast / events / touch / ios / content-observation / visibility-change-happens-on-timer-hops.html
1 <html>
2 <head>
3 <title>This tests the case when nested timers trigger visible content change</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     visibility: hidden;
14     width: 100px;
15     height: 100px;
16     background-color: green;
17 }
18 </style>
19 <script>
20 async function test() {
21     if (!window.testRunner || !testRunner.runUIScript)
22         return;
23     if (window.internals)
24         internals.settings.setContentChangeObserverEnabled(true);
25
26     testRunner.waitUntilDone();
27     testRunner.dumpAsText();
28
29     let rect = tapthis.getBoundingClientRect();
30     let x = rect.left + rect.width / 2;
31     let y = rect.top + rect.height / 2;
32
33     await tapAtPoint(x, y);
34 }
35 </script>
36 </head>
37 <body onload="test()">
38 <div id=tapthis>PASS if 'clicked' text is not shown below.</div>
39 <div id=becomesVisible></div>
40 <pre id=result></pre>
41 <script>
42 tapthis.addEventListener("mouseover", function( event ) {
43     // 1. Install a short timer on hover
44     setTimeout(function() {
45         // 2. Trigger some non-visibility style change with forcing offsetHeight.
46         becomesVisible.style.marginLeft = "5px";
47         document.body.offsetHeight;
48
49         // 3. Install a nested timer with visibility change.
50         setTimeout(function() {
51             becomesVisible.style.visibility = "visible";
52             document.body.offsetHeight;
53             setTimeout("testRunner.notifyDone()", 0);
54         }, 10);
55     }, 0);
56 }, false);
57
58 becomesVisible.addEventListener("click", function( event ) {   
59     result.innerHTML = "clicked hidden";
60 }, false);
61
62 tapthis.addEventListener("click", function( event ) {   
63     result.innerHTML = "clicked";
64 }, false);
65 </script>
66 </body>
67 </html>