tor-browser

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

last-successful-animation.html (2001B)

      1 <!DOCTYPE html>
      2 <title>CSS Anchor Positioning: last successful position fallback with animation</title>
      3 <link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com">
      4 <meta name="description" content="Tests a bug in WebKit where the last-successful position fallback isn't remembered when the anchor-positioned element is animated">
      5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-fallback">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="support/test-common.js"></script>
      9 <style>
     10  #container {
     11    position: relative;
     12    width: 400px;
     13    height: 400px;
     14    background: teal;
     15  }
     16 
     17  #anchor {
     18    position: relative;
     19    top: 100px;
     20    left: 100px;
     21    width: 100px;
     22    height: 100px;
     23    background: red;
     24    anchor-name: --a;
     25  }
     26 
     27  /* Dummy animation keyframe */
     28  @keyframes anime {
     29    from { background: #000000; }
     30    to { background: #ffffff; }
     31  }
     32 
     33  #anchored {
     34    position-anchor: --a;
     35    position-try-fallbacks: flip-block;
     36    position: absolute;
     37    width: 100px;
     38    height: 200px;
     39    position-area: top center;
     40    background: lime;
     41    animation: anime 1s linear;
     42  }
     43 </style>
     44 <div id="container">
     45  <div id="anchor"></div>
     46  <div id="anchored"></div>
     47 </div>
     48 <script>
     49  promise_test(async () => {
     50    await waitUntilNextAnimationFrame();
     51    await waitUntilNextAnimationFrame();
     52    assert_equals(anchored.offsetTop, 200);
     53  }, "Starts rendering with flip-block");
     54 
     55  promise_test(async () => {
     56    anchor.style.top = "150px";
     57    await waitUntilNextAnimationFrame();
     58    await waitUntilNextAnimationFrame();
     59    assert_equals(anchored.offsetTop, 200);
     60  }, "No successful position, keep flip-block");
     61 
     62  promise_test(async () => {
     63    anchor.style.top = "200px";
     64    await waitUntilNextAnimationFrame();
     65    await waitUntilNextAnimationFrame();
     66    assert_equals(anchored.offsetTop, 0);
     67  }, "Base position without fallback now successful");
     68 </script>