tor-browser

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

hit-test-pseudo-element-element-from-point.html (2180B)

      1 <!DOCTYPE html>
      2 <title>View transitions: hit testing the pseudo-elements should always return the document element</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
      5 
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 
      9 <style>
     10 html { view-transition-name: none; }
     11 
     12 body { margin: 0; }
     13 
     14 #target {
     15  width: 100px;
     16  height: 100vh;
     17  view-transition-name: target;
     18 }
     19 
     20 ::view-transition {
     21  background-color: green;
     22 }
     23 
     24 ::view-transition,
     25 ::view-transition-group(target),
     26 ::view-transition-image-pair(target) {
     27  height: 100%;
     28  padding-left: 100px;
     29 }
     30 
     31 ::view-transition-group(target) {
     32  animation-duration: 30s;
     33  background-color: lightgreen;
     34 }
     35 
     36 ::view-transition-image-pair(target) {
     37  height: 100%;
     38  background-color: skyblue;
     39  animation: none;
     40  margin-left: 100px;
     41 }
     42 
     43 ::view-transition-old(target) {
     44  height: 100%;
     45  width: 100px;
     46  animation: none;
     47  background-color: navy;
     48 }
     49 ::view-transition-new(target) {
     50  height: 100%;
     51  width: 100px;
     52  margin-left: 100px;
     53  animation: none;
     54  background-color: purple;
     55 }
     56 </style>
     57 
     58 <div id=target></div>
     59 
     60 <script>
     61 async_test(t => {
     62  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
     63  document.startViewTransition(() => {
     64    requestAnimationFrame(async () => {
     65      // ::view-transition-group
     66      t.step(() => assert_equals(document.elementFromPoint(20, 20), document.documentElement));
     67      // ::view-transition-image-pair
     68      t.step(() => assert_equals(document.elementFromPoint(120, 20), document.documentElement));
     69      // ::view-transition-old
     70      t.step(() => assert_equals(document.elementFromPoint(220, 20), document.documentElement));
     71      // ::view-transition-new
     72      t.step(() => assert_equals(document.elementFromPoint(320, 20), document.documentElement));
     73      // ::view-transition
     74      t.step(() => assert_equals(document.elementFromPoint(420, 20), document.documentElement));
     75      t.done();
     76    });
     77  });
     78 }, "Hit-testing view transition pseudo-elements should always return the document element");
     79 </script>