tor-browser

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

position-anchor-target-with-children.html (1821B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>Tests 'position-anchor' property impact on target's children 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-target-with-children-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 }
     16 
     17 .target {
     18  position: fixed;
     19  width: 100px;
     20  height: 100px;
     21  background: lime;
     22  top: anchor(bottom);
     23  left: anchor(left);
     24 }
     25 
     26 body {
     27  margin: 0;
     28  font: 20px/1 Ahem;
     29 }
     30 
     31 #anchor1 {
     32  anchor-name: --a1;
     33  margin-left: 100px;
     34 }
     35 
     36 #target1 {
     37  position-anchor: --a1;
     38 }
     39 
     40 #anchor2 {
     41  anchor-name: --a2;
     42  margin-left: 300px;
     43  margin-top: 100px;
     44 }
     45 
     46 #target2 {
     47  position-anchor: --a2;
     48 }
     49 </style>
     50 
     51 <div id="anchor1" class="anchor">anchor1</div>
     52 <div id="anchor2" class="anchor">anchor2</div>
     53 
     54 <div id="target1" class="target">target1<ul><li>child 1</li><li>child 2</li></ul></div>
     55 <div id="target2" class="target">target2<ul><li>child 1</li><li>child 2</li></ul></div>
     56 
     57 <script>
     58  // #target2 should be initially visible.
     59  waitForAtLeastOneFrame().then(() => {
     60    // Change #target2 to be invisible.
     61    document.getElementById('target2').style.display = 'none';
     62    waitForAtLeastOneFrame().then(() => {
     63      // #target2 should be invisible now.
     64      // Change #target2 to be visible.
     65      document.getElementById('target2').style.display = 'flow';
     66      waitForAtLeastOneFrame().then(() => {
     67        // #target2 should be visible and anchor-positioned again now.
     68        takeScreenshot();
     69      });
     70    });
     71  });
     72 </script>