tor-browser

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

scrollable-containing-block-size.html (4659B)

      1 <!DOCTYPE html>
      2 <title>Tests where the "padding edge" should be for various display types.</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  background: orange;
     20  min-width: 180px;
     21  min-height: 180px;
     22 }
     23 
     24 .translate {
     25  translate: 50px;
     26 }
     27 
     28 .relative {
     29  position: relative;
     30  left: 20px;
     31  top: 40px;
     32 }
     33 
     34 .anchor {
     35  anchor-name: --a;
     36 }
     37 
     38 .target {
     39  position-anchor: --a;
     40  position: absolute;
     41  inset: 0;
     42  place-self: stretch;
     43 }
     44 </style>
     45 <script src="/resources/testharness.js"></script>
     46 <script src="/resources/testharnessreport.js"></script>
     47 <script src="/resources/check-layout-th.js"></script>
     48 <body onload="checkLayout('.target')">
     49 
     50 <!-- Base case, block layout no shift. -->
     51 <div class="scroller">
     52  <div class="filler"><div class="anchor"></div></div>
     53  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
     54 </div>
     55 
     56 <!-- Block layout with relative shift. -->
     57 <div class="scroller">
     58  <div class="filler relative"><div class="anchor"></div></div>
     59  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
     60 </div>
     61 
     62 <!-- Block layout with translate shift. -->
     63 <div class="scroller">
     64  <div class="filler translate"><div class="anchor"></div></div>
     65  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
     66 </div>
     67 
     68 <!-- Flex layout with no shift. -->
     69 <div class="scroller" style="display: flex;">
     70  <div class="filler"><div class="anchor"></div></div>
     71  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
     72 </div>
     73 
     74 <!-- Flex layout with relative shift. -->
     75 <div class="scroller" style="display: flex;">
     76  <div class="filler relative"><div class="anchor"></div></div>
     77  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
     78 </div>
     79 
     80 <!-- Flex layout with translate shift. -->
     81 <div class="scroller" style="display: flex;">
     82  <div class="filler translate"><div class="anchor"></div></div>
     83  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
     84 </div>
     85 
     86 <!-- Grid layout with no shift. -->
     87 <div class="scroller" style="display: grid;">
     88  <div class="filler"><div class="anchor"></div></div>
     89  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
     90 </div>
     91 
     92 <!-- Grid layout with relative shift. -->
     93 <div class="scroller" style="display: grid;">
     94  <div class="filler relative"><div class="anchor"></div></div>
     95  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
     96 </div>
     97 
     98 <!-- Grid layout with translate shift. -->
     99 <div class="scroller" style="display: grid;">
    100  <div class="filler translate"><div class="anchor"></div></div>
    101  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
    102 </div>
    103 
    104 <!-- Grid layout with template. -->
    105 <div class="scroller" style="display: grid; grid-template: 180px / 180px">
    106  <div class="anchor"></div>
    107  <div class="target" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
    108 </div>
    109 
    110 <!-- Use flexbox to trigger up scrollable area. -->
    111 <div class="scroller" style="display: flex; flex-direction: column-reverse;">
    112  <div class="filler"><div class="anchor"></div></div>
    113  <div class="target" data-offset-x="0" data-offset-y="-100" data-expected-width="200" data-expected-height="200"></div>
    114 </div>
    115 
    116 <!-- Use flexbox to trigger right scrollable area. -->
    117 <div class="scroller" style="display: flex; flex-direction: row-reverse;">
    118  <div class="filler"><div class="anchor"></div></div>
    119  <div class="target" data-offset-x="-100" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
    120 </div>
    121 
    122 <!-- Use RTL to trigger right scrollable area. -->
    123 <div class="scroller" style="direction: rtl;">
    124  <div class="filler"><div class="anchor"></div></div>
    125  <div class="target" data-offset-x="-100" data-offset-y="0" data-expected-width="200" data-expected-height="200"></div>
    126 </div>