tor-browser

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

position-area-visibility-change.html (2482B)

      1 <!DOCTYPE html>
      2 
      3 <html class="reftest-wait">
      4 
      5 <head>
      6  <title>Tests that an element positioned using position-area renders when it's initially hidden, then shown</title>
      7 
      8  <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area">
      9  <link rel="author" href="mailto:kiet.ho@apple.com">
     10  <link rel="match" href="reference/position-area-visibility-change-ref.html">
     11 
     12  <script src="/common/reftest-wait.js"></script>
     13  <script src="/common/rendering-utils.js"></script>
     14 
     15  <style>
     16    .containing-block {
     17      position: relative;
     18      width: 150px;
     19      height: 150px;
     20      outline: 2px black solid;
     21    }
     22 
     23    .cell {
     24      width: 50px;
     25      height: 50px;
     26    }
     27 
     28    #anchor-cell {
     29      position: absolute;
     30      top: 50px;
     31      left: 50px;
     32 
     33      anchor-name: --anchor;
     34 
     35      background: green;
     36    }
     37 
     38    .anchor-positioned-cell {
     39      position: absolute;
     40      position-anchor: --anchor;
     41    }
     42 
     43    #target-1 {
     44      position-area: top right;
     45 
     46      /* Will be changed to 'block' */
     47      display: none;
     48    }
     49 
     50    #target-2 {
     51      position-area: bottom left;
     52 
     53      /* Will be changed to 'visible' */
     54      visibility: hidden;
     55    }
     56 
     57    #target-3 {
     58      position-area: bottom right;
     59 
     60      /* Override default popover style */
     61      margin: 0;
     62      padding: 0;
     63      border: none;
     64    }
     65 
     66    .blue-background {
     67      background: blue;
     68    }
     69 
     70    .magenta-background {
     71      background: magenta;
     72    }
     73 
     74    .cyan-background {
     75      background: cyan;
     76    }
     77  </style>
     78 </head>
     79 
     80 <body>
     81  <div class="containing-block">
     82    <div class="cell" id="anchor-cell"></div>
     83 
     84    <div class="cell anchor-positioned-cell" id="target-1">
     85      <div class="cell blue-background"></div>
     86    </div>
     87 
     88    <div class="cell anchor-positioned-cell" id="target-2">
     89      <div class="cell magenta-background"></div>
     90    </div>
     91 
     92    <div class="cell anchor-positioned-cell" id="target-3" popover>
     93      <div class="cell cyan-background"></div>
     94    </div>
     95  </div>
     96 
     97  <script>
     98    // All targets should initially be hidden.
     99    waitForAtLeastOneFrame().then(() => {
    100      // Change targets to be visible.
    101      document.getElementById('target-1').style.display = 'block';
    102      document.getElementById('target-2').style.visibility = 'visible';
    103      document.getElementById('target-3').showPopover();
    104 
    105      waitForAtLeastOneFrame().then(() => {
    106        // All targets should be visible now.
    107        takeScreenshot();
    108      });
    109    });
    110  </script>
    111 </body>
    112 
    113 </html>