tor-browser

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

document-element-start-view-transition.html (2911B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <meta name="viewport" content="width=device-width, initial-scale=1">
      6  <!-- TODO update link -->
      7  <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/">
      8  <title>startViewTransition on document.documentElement</title>
      9  <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
     10 </head>
     11 
     12 <script src="/resources/testharness.js"></script>
     13 <script src="/resources/testharnessreport.js"></script>
     14 
     15 <style>
     16  :root {
     17    view-transition-name: none;
     18  }
     19  #target {
     20    width: 100px;
     21    height: 100px;
     22    background: blue;
     23    contain: paint;
     24    view-transition-name: target;
     25  }
     26  #target.update-1 {
     27    height: 150px;
     28  }
     29  #target.update-2 {
     30    height: 200px;
     31  }
     32 </style>
     33 
     34 <body>
     35  <div id="target"></div>
     36 </body>
     37 <script>
     38  function run_view_transtiion_test(scope1, scope2, message) {
     39    promise_test(async t => {
     40      let rejected_promise_tally = 0;
     41      const target = document.getElementById("target");
     42      assert_implements(document.startViewTransition,
     43                        "Missing document.startViewTransition");
     44 
     45      const verifyAbortedTransition = (promise) => {
     46        return promise.then(
     47          () => { assert_not_reached('transition aborted') },
     48          (reason) => {
     49            assert_true(reason instanceof DOMException);
     50            assert_equals(reason.code, DOMException.ABORT_ERR);
     51            rejected_promise_tally++;
     52          });
     53      };
     54 
     55      const vt1 = scope1.startViewTransition(() => {
     56        target.className = 'update-1';
     57      });
     58      const vt2 = scope2.startViewTransition(() => {
     59        assert_equals(target.className, 'update-1');
     60        target.className = 'update-2';
     61      });
     62 
     63      assert_equals(vt1.transitionRoot, document.documentElement);
     64      assert_equals(vt2.transitionRoot, document.documentElement);
     65 
     66      await verifyAbortedTransition(vt1.ready);
     67      await vt2.ready;
     68 
     69      assert_equals(rejected_promise_tally, 1,
     70                    'first transition is skipped');
     71      const sizeTransformAnimations = document.getAnimations().filter(a => {
     72        return 'height' in a.effect.getKeyframes()[0];
     73      });
     74      assert_equals(sizeTransformAnimations.length, 1);
     75      const startingHeight =
     76          sizeTransformAnimations[0].effect.getKeyframes()[0].height;
     77 
     78      assert_equals(startingHeight, '150px',
     79                    'Height change applied before capture');
     80    }, message);
     81  }
     82 
     83  run_view_transtiion_test(
     84      document, document.documentElement,
     85      'Synchronously starting a view transition on document.documentElement ' +
     86      'skips the previously active document view transition.');
     87 
     88  run_view_transtiion_test(
     89      document.documentElement, document,
     90      'Synchronously starting a view transition on document skips the ' +
     91      'previously active view transition on document.documentElement.');
     92 
     93 </script>
     94 </html>