tor-browser

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

anchor-center-visibility-change.html (2045B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>Tests 'anchor-center' value when target visibility changes (by changing 'display', 'visibility', or popover trigger)</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#valdef-justifself-y-anchor-center">
      5 <link rel="author" href="mailto:plampe@igalia.com">
      6 <link rel="author" href="mailto:kiet.ho@apple.com">
      7 <link rel="match" href="anchor-center-visibility-change-ref.html">
      8 <script src="/common/reftest-wait.js"></script>
      9 <script src="/common/rendering-utils.js"></script>
     10 <style>
     11 .container {
     12  width: 100px;
     13  height: 100px;
     14  border: solid 3px;
     15  position: relative;
     16  margin: 50px;
     17 }
     18 
     19 .anchor {
     20  anchor-name: --anchor;
     21  position: relative;
     22  width: 50px;
     23  height: 50px;
     24  left: 40px;
     25  top: 5px;
     26  background: lime;
     27 }
     28 
     29 .target {
     30  position-anchor: --anchor;
     31  position: absolute;
     32 }
     33 
     34 .target-inner {
     35  width: 30px;
     36  height: 20px;
     37 }
     38 
     39 #target-1 {
     40  justify-self: anchor-center;
     41  background: cyan;
     42  display: none;
     43 }
     44 
     45 #target-2 {
     46  align-self: anchor-center;
     47  background: blue;
     48  visibility: hidden;
     49 }
     50 
     51 #target-3 {
     52  align-self: anchor-center;
     53  justify-self: anchor-center;
     54  background: magenta;
     55 
     56  /* Override default popover style */
     57  margin: 0;
     58  padding: 0;
     59  border: none;
     60 }
     61 </style>
     62 
     63 <div class="container">
     64  <div class="anchor"></div>
     65  <div id="target-1" class="target">
     66    <div class="target-inner"></div>
     67  </div>
     68  <div id="target-2" class="target">
     69    <div class="target-inner"></div>
     70  </div>
     71  <div id="target-3" class="target" popover>
     72    <div class="target-inner"></div>
     73  </div>
     74 </div>
     75 
     76 <script>
     77  // Targets should be invisible initially.
     78  waitForAtLeastOneFrame().then(() => {
     79    // Change targets to be visible.
     80    document.getElementById('target-1').style.display = 'flow';
     81    document.getElementById('target-2').style.visibility = 'visible';
     82    document.getElementById('target-3').showPopover();
     83 
     84    waitForAtLeastOneFrame().then(() => {
     85      // Targets should be visible now.
     86      takeScreenshot();
     87    });
     88  });
     89 </script>