tor-browser

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

scrollable-containing-block-position-area.html (2057B)

      1 <!DOCTYPE html>
      2 <title>Tests the scrollable containing-block usage with position-area.</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  width: 50px;
     26  height: 50px;
     27  position: relative;
     28  left: 60px;
     29  top: 60px;
     30  background: orange;
     31 }
     32 
     33 .target {
     34  position: absolute;
     35  position-anchor: --a;
     36  place-self: stretch;
     37  background: cyan;
     38 }
     39 </style>
     40 <script src="/resources/testharness.js"></script>
     41 <script src="/resources/testharnessreport.js"></script>
     42 <script src="/resources/check-layout-th.js"></script>
     43 <body onload="checkLayout('.target')">
     44 
     45 <!-- top -->
     46 <div class="scroller">
     47  <div class="filler"><div class="anchor"></div></div>
     48  <div class="target" style="position-area: top;" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="70"></div>
     49 </div>
     50 
     51 <!-- right -->
     52 <div class="scroller">
     53  <div class="filler"><div class="anchor"></div></div>
     54  <div class="target" style="position-area: right;" data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="200"></div>
     55 </div>
     56 
     57 <!-- bottom -->
     58 <div class="scroller">
     59  <div class="filler"><div class="anchor"></div></div>
     60  <div class="target" style="position-area: bottom;" data-offset-x="0" data-offset-y="120" data-expected-width="200" data-expected-height="80"></div>
     61 </div>
     62 
     63 <!-- left -->
     64 <div class="scroller">
     65  <div class="filler"><div class="anchor"></div></div>
     66  <div class="target" style="position-area: left;" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="200"></div>
     67 </div>