tor-browser

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

position-anchor-004.html (1711B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>Tests 'position-anchor' property when target visibility changes</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor">
      5 <link rel="author" href="mailto:plampe@igalia.com">
      6 <link rel="match" href="position-anchor-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <script src="/common/rendering-utils.js"></script>
      9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     10 <style>
     11 .anchor {
     12  width: 100px;
     13  height: 100px;
     14  background: orange;
     15  font: 20px/1 Ahem;
     16 }
     17 
     18 .target {
     19  position: fixed;
     20  width: 100px;
     21  height: 100px;
     22  background: lime;
     23  top: anchor(bottom);
     24  left: anchor(left);
     25  font: 20px/1 Ahem;
     26 }
     27 
     28 body {
     29  margin: 0;
     30 }
     31 
     32 #anchor1 {
     33  anchor-name: --a1;
     34  margin-left: 100px;
     35 }
     36 
     37 #target1 {
     38  position-anchor: --a1;
     39 }
     40 
     41 #anchor2 {
     42  anchor-name: --a2;
     43  margin-left: 300px;
     44  margin-top: 100px;
     45 }
     46 
     47 #target2 {
     48  position-anchor: --a2;
     49 }
     50 </style>
     51 
     52 <div id="anchor1" class="anchor">anchor1</div>
     53 <div id="anchor2" class="anchor">anchor2</div>
     54 
     55 <div id="target1" class="target">target1</div>
     56 <div id="target2" class="target">target2</div>
     57 
     58 <script>
     59  // #target2 should be initially visible.
     60  waitForAtLeastOneFrame().then(() => {
     61    // Change #target2 to be invisible.
     62    document.getElementById('target2').style.display = 'none';
     63    waitForAtLeastOneFrame().then(() => {
     64      // #target2 should be invisible now.
     65      // Change #target2 to be visible.
     66      document.getElementById('target2').style.display = 'flow';
     67      waitForAtLeastOneFrame().then(() => {
     68        // #target2 should be visible and anchor-positioned again now.
     69        takeScreenshot();
     70      });
     71    });
     72  });
     73 </script>