tor-browser

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

input-targets-root-while-render-blocked.html (3010B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>View transitions: ensure input targets document root while rendering is suppressed</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7797">
      6 <link rel="author" href="mailto:bokan@chromium.org">
      7 
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 <script src="/resources/testdriver.js"></script>
     11 <script src="/resources/testdriver-actions.js"></script>
     12 <script src="/resources/testdriver-vendor.js"></script>
     13 
     14 <style>
     15 :root {
     16  /* Ensure clicks during the transition fall through the pseudo tree root to
     17   * real DOM */
     18  view-transition-name: none;
     19 }
     20 
     21 ::view-transition {
     22  /* Ensure clicks during the transition fall through the pseudo tree root to
     23   * real DOM */
     24  pointer-events: none;
     25  width: 0;
     26  height: 0;
     27 }
     28 
     29 ::view-transition-group(*) {
     30  animation-duration: 30s;
     31 }
     32 
     33 #clicktarget {
     34  width: 100px;
     35  height: 100px;
     36  background: red;
     37 }
     38 
     39 #transition {
     40  width: 100px;
     41  height: 100px;
     42  background: blue;
     43  contain: paint;
     44  view-transition-name: transitionElement;
     45 }
     46 </style>
     47 
     48 <div id="clicktarget"></div>
     49 <div id="transition"></div>
     50 
     51 <script>
     52 const target = document.getElementById("clicktarget");
     53 
     54 async function sendAndWaitForClick() {
     55  return new Promise(async (resolve) => {
     56 
     57    function eventHandler(ev) {
     58      resolve(ev);
     59    }
     60 
     61    document.documentElement.addEventListener("click", eventHandler);
     62 
     63    await new test_driver.Actions()
     64             .setContext(window)
     65             .addPointer("mousePointer1", "mouse")
     66             .pointerMove(10, 10, {origin: 'viewport', sourceName: "mousePointer1"})
     67             .pointerDown({sourceName: "mousePointer1"})
     68             .pointerUp({sourceName: "mousePointer1"})
     69             .send();
     70 
     71    document.documentElement.removeEventListener("click", eventHandler);
     72  });
     73 }
     74 
     75 promise_test(async t => {
     76  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
     77  assert_not_equals(target, null, "PRECONDITION: target element is valid");
     78 
     79  // Ensure input is initialized before blocking rendering.
     80  await new test_driver.Actions()
     81               .setContext(window)
     82               .addPointer("mousePointer1", "mouse")
     83               .pointerMove(0, 0, {origin: "viewport", sourceName: "mousePointer1"})
     84               .send();
     85 
     86  let clickEvent = null;
     87 
     88  let transition = document.startViewTransition(async () => {
     89    clickEvent = await sendAndWaitForClick();
     90  });
     91 
     92  await transition.ready;
     93 
     94  assert_equals(clickEvent.target, document.documentElement,
     95      "Events must target the transition root while render blocked");
     96  clickEvent = null;
     97 
     98  clickEvent = await sendAndWaitForClick();
     99 
    100  // This just ensures we're not passing the above check by accident.
    101  assert_equals(clickEvent.target, target,
    102      "During transition, event should hit real DOM");
    103 
    104 }, "Input when rendering suppressed targets root");
    105 </script>