tor-browser

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

grid-automatic-minimum-intrinsic-aspect-ratio-001.html (4037B)

      1 <!DOCTYPE html>
      2 <title>CSS Grid: automatic minimum for items with instrinsic aspect ratios</title>
      3 <link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
      4 <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
      5 <meta name="assert" content="Check how min-width|height:auto is computed for items with intrinsic aspect ratios.">
      6 <link rel="stylesheet" href="/css/support/grid.css">
      7 <link rel="stylesheet" href="/css/support/width-keyword-classes.css">
      8 
      9 <style>
     10 .container {
     11    border: 5px solid orange;
     12    display: grid;
     13 }
     14 </style>
     15 
     16 <script src="/resources/testharness.js"></script>
     17 <script src="/resources/testharnessreport.js"></script>
     18 <script src="/resources/check-layout-th.js"></script>
     19 
     20 <body onload="checkLayout('.container')">
     21 <div id="log"></div>
     22 
     23 <div class="container min-content" data-expected-width="60"
     24    data-expected-height="35">
     25  <img src="/images/green-100x50.png" style="height: 25px;"
     26      data-expected-width="50" data-expected-height="25"/>
     27 </div>
     28 
     29 <div class="container min-content" data-expected-width="150"
     30    data-expected-height="80">
     31  <img src="/images/green-100x50.png" style="min-height: 70px;"
     32      data-expected-width="140" data-expected-height="70"/>
     33 </div>
     34 
     35 <div class="container min-content" data-expected-width="90"
     36    data-expected-height="50">
     37  <img src="/images/green-100x50.png" style="max-height: 40px;"
     38      data-expected-width="80" data-expected-height="40"/>
     39 </div>
     40 
     41 <div class="container min-content" data-expected-width="70"
     42    data-expected-height="40">
     43  <img src="/images/green-100x50.png" style="height: 25px; min-height: 30px;"
     44      data-expected-width="60" data-expected-height="30"/>
     45 </div>
     46 
     47 <div class="container min-content" data-expected-width="30"
     48    data-expected-height="20">
     49  <img src="/images/green-100x50.png" style="height: 25px; max-height: 10px;"
     50      data-expected-width="20" data-expected-height="10"/>
     51 </div>
     52 
     53 <div class="container min-content" data-expected-width="50"
     54    data-expected-height="35">
     55  <img src="/images/green-100x50.png" style="height: 25px; max-width: 40px;"
     56      data-expected-width="40" data-expected-height="25"/>
     57 </div>
     58 
     59 <div class="container min-content" data-expected-width="60"
     60    data-expected-height="40">
     61  <img src="/images/green-100x50.png"
     62      style="height: 25px; min-height: 30px; max-width: 50px;"
     63      data-expected-width="50" data-expected-height="30"/>
     64 </div>
     65 
     66 <div class="container min-content" data-expected-width="60"
     67    data-expected-height="35">
     68  <img src="/images/green-100x50.png" style="width: 50px;"
     69      data-expected-width="50" data-expected-height="25"/>
     70 </div>
     71 
     72 <div class="container min-content" data-expected-width="70"
     73    data-expected-height="40">
     74  <img src="/images/green-100x50.png" style="max-width: 60px;"
     75      data-expected-width="60" data-expected-height="30"/>
     76 </div>
     77 
     78 <div class="container min-content" data-expected-width="130"
     79    data-expected-height="70">
     80  <img src="/images/green-100x50.png" style="min-width: 120px;"
     81      data-expected-width="120" data-expected-height="60"/>
     82 </div>
     83 
     84 <div class="container min-content" data-expected-width="90"
     85    data-expected-height="50">
     86  <img src="/images/green-100x50.png" style="width: 60px; min-width: 80px;"
     87      data-expected-width="80" data-expected-height="40"/>
     88 </div>
     89 
     90 <div class="container min-content" data-expected-width="34"
     91    data-expected-height="22">
     92  <img src="/images/green-100x50.png" style="width: 24px; max-width: 40px;"
     93      data-expected-width="24" data-expected-height="12"/>
     94 </div>
     95 
     96 <div class="container min-content" data-expected-width="130"
     97    data-expected-height="35">
     98  <img src="/images/green-100x50.png" style="width: 120px; max-height: 25px;"
     99      data-expected-width="120" data-expected-height="25"/>
    100 </div>
    101 
    102 <div class="container min-content" data-expected-width="35"
    103    data-expected-height="110">
    104  <img src="/images/green-100x50.png" style="width: 25px; min-height: 100px;"
    105      data-expected-width="25" data-expected-height="100"/>
    106 </div>
    107 </body>