tor-browser

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

absolute.https.html (1697B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
      4 <link rel="match" href="auto-block-size-absolute-ref.html">
      5 <meta name="assert" content="This test checks that the absolute positioning respects the auto-block-size." />
      6 
      7 <style>
      8 .test {
      9  position: absolute;
     10  background: red;
     11 }
     12 
     13 @supports (display: layout(block-size-100)) {
     14  .test {
     15    display: layout(block-size-100);
     16    background: green;
     17  }
     18 }
     19 
     20 .container {
     21  position: relative;
     22  margin: 20px 0;
     23  width: 200px;
     24  height: 200px;
     25  border: solid 2px;
     26 }
     27 
     28 .width-100 {
     29  width: 100px;
     30  writing-mode: horizontal-tb;
     31 }
     32 
     33 .height-100 {
     34  height: 100px;
     35  writing-mode: vertical-rl;
     36 }
     37 </style>
     38 <script src="/common/reftest-wait.js"></script>
     39 <script src="/common/worklet-reftest.js"></script>
     40 
     41 <!-- 100px x 100px, bottom-left -->
     42 <div class="container">
     43  <div class="test width-100" style="bottom: 0px"></div>
     44 </div>
     45 
     46 <!-- 100px x 200px, left, auto-size is ignored. -->
     47 <div class="container">
     48  <div class="test width-100" style="top: 0px; bottom: 0px"></div>
     49 </div>
     50 
     51 <!-- 100px x 100px, top-left -->
     52 <div class="container">
     53  <div class="test height-100" style="left: 0px;"></div>
     54 </div>
     55 
     56 <!-- 100px x 100px, top, auto-size is ignored. -->
     57 <div class="container">
     58  <div class="test height-100" style="left: 0px; right: 0px;"></div>
     59 </div>
     60 
     61 <script id="code" type="text/worklet">
     62 registerLayout('block-size-100', class {
     63  async intrinsicSizes() {}
     64  async layout() {
     65    return {autoBlockSize: 100};
     66  }
     67 });
     68 </script>
     69 
     70 <script>
     71 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
     72 </script>
     73 </html>