tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

transition-in-iframe-001.html (1540B)

      1 <!DOCTYPE html>
      2 
      3 <html>
      4 
      5 <title>Transitions: Transition in &lt;iframe&gt; on page with empty rAF finishes</title>
      6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      7 <link rel="author" href="mailto:mrobinson@igalia.com">
      8 <link rel="author" href="mailto:obrufau@igalia.com">
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 <script src="/common/rendering-utils.js"></script>
     12 
     13 <style>
     14    #iframe {
     15        width: 100px;
     16        height: 100px;
     17        border: none;
     18    }
     19 </style>
     20 
     21 <script>
     22    let rAFId = null;
     23    function triggerNeverEndingUselessRAF() {
     24        rAFId = requestAnimationFrame(triggerNeverEndingUselessRAF);
     25    }
     26 
     27    promise_test(async t => {
     28        await waitForAtLeastOneFrame();
     29        await waitForAtLeastOneFrame();
     30 
     31        let iframe = document.createElement("iframe");
     32        iframe.id = "iframe";
     33        iframe.src = "support/transition-in-iframe-001-iframe.html"
     34        iframe.sandbox = "allow-scripts";
     35 
     36        iframe.addEventListener("load", async () => {
     37            await waitForAtLeastOneFrame();
     38            await waitForAtLeastOneFrame();
     39            iframe.contentWindow.postMessage("loaded", "*");
     40        });
     41 
     42        triggerNeverEndingUselessRAF();
     43        document.body.appendChild(iframe);
     44 
     45        await new Promise(resolve => {
     46            window.addEventListener("message", () => {
     47                cancelAnimationFrame(rAFId);
     48                resolve();
     49            });
     50        });
     51    });
     52 </script>
     53 
     54 </html>