tor-browser

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

anchor-size-minmax-001.html (1202B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name">
      3 <link rel="author" href="mailto:kojii@chromium.org">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/resources/check-layout-th.js"></script>
      7 <script src="support/test-common.js"></script>
      8 <style>
      9 .container {
     10  position: relative;
     11  height: 10px;
     12 }
     13 .anchor1 {
     14  anchor-name: --a1;
     15  width: 5px;
     16  height: 7px;
     17  background: orange;
     18 }
     19 .target {
     20  position: absolute;
     21 }
     22 </style>
     23 <body onload="checkLayoutForAnchorPos('.target')">
     24  <div class="container">
     25    <div class="anchor1"></div>
     26 
     27    <div class="target"
     28      style="min-width: anchor-size(--a1 width)"
     29      data-expected-width=5></div>
     30    <div class="target"
     31      style="min-height: anchor-size(--a1 width)"
     32      data-expected-height=5></div>
     33 
     34    <div class="target"
     35      style="max-width: anchor-size(--a1 width)"
     36      data-expected-width=5>
     37      <div style="width: 100px"></div>
     38    </div>
     39    <div class="target"
     40      style="max-height: anchor-size(--a1 width)"
     41      data-expected-height=5>
     42      <div style="height: 100px"></div>
     43    </div>
     44  </div>
     45 </body>