tor-browser

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

stretch-intrinsic-size-vrl-htb.html (2960B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos">
      3 <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos">
      4 <style>
      5 body {
      6  margin: 0;
      7 }
      8 
      9 .container {
     10  writing-mode: vertical-rl;
     11  display: inline-block;
     12  position: relative;
     13  margin: 20px;
     14  border: solid 4px;
     15  width: 60px;
     16  height: 60px;
     17 }
     18 
     19 .item {
     20  writing-mode: horizontal-tb;
     21  position: absolute;
     22  background: green;
     23  inset: 5px 10px 5px 10px;
     24 }
     25 
     26 .item::before {
     27  aspect-ratio: 1/1;
     28  min-width: 20px;
     29  min-height: 20px;
     30  width: 100%;
     31  height: 100%;
     32  content: '';
     33  display: block;
     34 }
     35 
     36 .ar {
     37  aspect-ratio: 1/1;
     38  min-width: 20px;
     39  min-height: 20px;
     40 }
     41 </style>
     42 <script src="/resources/testharness.js"></script>
     43 <script src="/resources/testharnessreport.js"></script>
     44 <script src="/resources/check-layout-th.js"></script>
     45 
     46 <body onload="checkLayout('.item')">
     47 
     48 <body>
     49 
     50 <div class="container">
     51  <div class="item" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div>
     52 </div>
     53 
     54 <div class="container">
     55  <div class="item" style="justify-self: stretch; align-self: start;" data-expected-width="50" data-expected-height="50"></div>
     56 </div>
     57 
     58 <div class="container">
     59  <div class="item" style="justify-self: start; align-self: stretch;" data-expected-width="40" data-expected-height="40"></div>
     60 </div>
     61 
     62 <div class="container">
     63  <div class="item" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div>
     64 </div>
     65 
     66 <br>
     67 
     68 <div class="container">
     69  <div class="item ar" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div>
     70 </div>
     71 
     72 <div class="container">
     73  <div class="item ar" style="justify-self: stretch; align-self: start;" data-expected-width="50" data-expected-height="50"></div>
     74 </div>
     75 
     76 <div class="container">
     77  <div class="item ar" style="justify-self: start; align-self: stretch;" data-expected-width="40" data-expected-height="40"></div>
     78 </div>
     79 
     80 <div class="container">
     81  <div class="item ar" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div>
     82 </div>
     83 
     84 <br>
     85 
     86 <div class="container">
     87  <canvas width="10" height="10" class="item" style="justify-self: start; align-self: start;" data-expected-width="10" data-expected-height="10"></canvas>
     88 </div>
     89 
     90 <div class="container">
     91  <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: start;" data-expected-width="50" data-expected-height="50"></canvas>
     92 </div>
     93 
     94 <div class="container">
     95  <canvas width="10" height="10" class="item" style="justify-self: start; align-self: stretch;" data-expected-width="40" data-expected-height="40"></canvas>
     96 </div>
     97 
     98 <div class="container">
     99  <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></canvas>
    100 </div>