tor-browser

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

clip-path-animation.html (2415B)

      1 <!DOCTYPE html>
      2 <meta name="viewport" content="width=device-width,initial-scale=1">
      3 <link rel="help" href="https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="./resources/intersection-observer-test-utils.js"></script>
      7 
      8 <style>
      9 @keyframes clippath {
     10  0% {
     11    clip-path: inset(30%);
     12  }
     13  100% {
     14    clip-path: inset(40%);
     15  }
     16 }
     17 body { margin: 0 }
     18 pre, #log {
     19  position: absolute;
     20  top: 0;
     21  left: 200px;
     22 }
     23 #target {
     24  position: absolute;
     25  top: 0px;
     26  background-color: green;
     27  width: 100px;
     28  height: 100px;
     29 }
     30 #container {
     31  margin: 20px;
     32  position: relative;
     33  padding: 8px;
     34  width: 0px;
     35  height: 0px;
     36 }
     37 .animation {
     38  animation: clippath 100s steps(2, jump-end);
     39 }
     40 </style>
     41 
     42 <div id="container">
     43  <div id="target"></div>
     44 </div>
     45 
     46 <script>
     47 var vw = document.documentElement.clientWidth;
     48 var vh = document.documentElement.clientHeight;
     49 
     50 var target = undefined;
     51 var container = undefined;
     52 var observer = undefined;
     53 var entries = [];
     54 
     55 // See crbug.com/40690885. In principle, this test should not need this,
     56 // however browser support of updating intersection obsevers in response
     57 // to animations (and in particular, clip-paths) is spotty. Forcing a
     58 // fresh listener allows the test to guard against regression of
     59 // crbug.com/394244260, and test that resolution of clip rects with
     60 // animations isn't particularly broken in some way.
     61 async function forceReset() {
     62  if(observer) { observer.disconnect(); }
     63  observer = new IntersectionObserver(function(changes) {
     64    entries = entries.concat(changes)
     65  }, {
     66    root: container
     67  });
     68  observer.observe(target);
     69  await waitForNotification();
     70 }
     71 
     72 promise_test(async function(t) {
     73  target = document.getElementById("target");
     74  container = document.getElementById("container");
     75  await forceReset();
     76 
     77  // See intersection-observer-test-utils.js for the meaning of these values.
     78  checkLastEntry(
     79    entries,
     80    0,
     81    [28, 128, 20, 120, 28, 36, 20, 36, 20, 36, 20, 36, true],
     82  );
     83  target.className = "animation";
     84  await forceReset();
     85 
     86  checkLastEntry(
     87    entries,
     88    1,
     89    [28, 128, 20, 120, 0, 0, 0, 0, 20, 36, 20, 36, false],
     90  );
     91  target.className = "";
     92  await forceReset();
     93 
     94  checkLastEntry(
     95    entries,
     96    2,
     97    [28, 128, 20, 120, 28, 36, 20, 36, 20, 36, 20, 36, true],
     98  );
     99 });
    100 </script>