tor-browser

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

scrollable-containing-block-validity.html (2010B)

      1 <!DOCTYPE html>
      2 <title>Tests that finding a default anchor triggers the new scrollable containing-block.</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
      4 <link rel="help" href="https://drafts.csswg.org/css-position-4/#scrollable-containing-block">
      5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12552">
      6 <style>
      7 .scroller {
      8  /* Use overflow hidden instead of scroll to mitigate scrollbar differences. */
      9  overflow: hidden;
     10  position: relative;
     11  width: 80px;
     12  height: 80px;
     13  margin: 10px;
     14  border: solid 3px;
     15  padding: 10px;
     16 }
     17 
     18 .filler {
     19  min-width: 180px;
     20  min-height: 180px;
     21 }
     22 
     23 .anchor {
     24  anchor-name: --a;
     25 }
     26 
     27 .target {
     28  position: absolute;
     29  inset: 0;
     30  place-self: stretch;
     31 }
     32 </style>
     33 <script src="/resources/testharness.js"></script>
     34 <script src="/resources/testharnessreport.js"></script>
     35 <script src="/resources/check-layout-th.js"></script>
     36 <body onload="checkLayout('.target')">
     37 
     38 <!-- No default anchor should use the regular containing-block. -->
     39 <div class="scroller">
     40  <div class="filler"><div class="anchor"></div></div>
     41  <div class="target" data-expected-width="100" data-expected-height="100"></div>
     42 </div>
     43 
     44 <!-- A default anchor - should use the scrollable containing-block. -->
     45 <div class="scroller">
     46  <div class="filler"><div class="anchor"></div></div>
     47  <div class="target" style="position-anchor: --a;" data-expected-width="200" data-expected-height="200"></div>
     48 </div>
     49 
     50 <!-- A non-valid default anchor - should use the regular containing-block. -->
     51 <div class="scroller">
     52  <div class="filler"><div class="anchor"></div></div>
     53  <div class="target" style="position-anchor: --b;" data-expected-width="100" data-expected-height="100"></div>
     54 </div>
     55 
     56 <!-- Only specifying position-area - should use the regular containing-block. -->
     57 <div class="scroller">
     58  <div class="filler"><div class="anchor"></div></div>
     59  <div class="target" style="position-area: top;" data-expected-width="100" data-expected-height="100"></div>
     60 </div>