tor-browser

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

flex-container-max-content-002.tentative.html (6409B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>Flex Container Max-Content Sizes</title>
      4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes"
      6      title="9.9.1. Flex Container Intrinsic Main Sizes">
      7 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes"
      8      title="9.9.2. Flex Container Intrinsic Cross Sizes">
      9 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12123">
     10 
     11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
     12 <style>
     13 .flex {
     14  display: inline-flex;
     15  vertical-align: top;
     16  border: 5px solid magenta;
     17  width: max-content;
     18  height: max-content;
     19 }
     20 .flex.min {
     21  width: 0;
     22  height: 0;
     23  min-width: max-content;
     24  min-height: max-content;
     25 }
     26 .flex.max {
     27  width: 200px;
     28  height: 200px;
     29  max-width: max-content;
     30  max-height: max-content;
     31 }
     32 .flex > div {
     33  font: 25px/1 Ahem;
     34  border: 5px solid cyan;
     35 }
     36 </style>
     37 
     38 <!-- Single-line row flex container -->
     39 <div class="flex" style="flex-flow: row nowrap"
     40     data-expected-width="45" data-expected-height="45">
     41  <div style="width: 25px; height: 25px">X</div>
     42 </div>
     43 <div class="flex min" style="flex-flow: row nowrap"
     44     data-expected-width="45" data-expected-height="45">
     45  <div style="width: 25px; height: 25px">X</div>
     46 </div>
     47 <div class="flex max" style="flex-flow: row nowrap"
     48     data-expected-width="45" data-expected-height="45">
     49  <div style="width: 25px; height: 25px">X</div>
     50 </div>
     51 
     52 <div class="flex" style="flex-flow: row nowrap"
     53     data-expected-width="180" data-expected-height="45">
     54  <div data-expected-width="85" data-expected-height="35">X X</div>
     55  <div data-expected-width="85" data-expected-height="35">X X</div>
     56 </div>
     57 <div class="flex min" style="flex-flow: row nowrap"
     58     data-expected-width="180" data-expected-height="45">
     59  <div data-expected-width="85" data-expected-height="35">X X</div>
     60  <div data-expected-width="85" data-expected-height="35">X X</div>
     61 </div>
     62 <div class="flex max" style="flex-flow: row nowrap"
     63     data-expected-width="180" data-expected-height="45">
     64  <div data-expected-width="85" data-expected-height="35">X X</div>
     65  <div data-expected-width="85" data-expected-height="35">X X</div>
     66 </div>
     67 
     68 <hr>
     69 
     70 <!-- Single-line column flex container -->
     71 <div class="flex" style="flex-flow: column nowrap"
     72     data-expected-width="45" data-expected-height="45">
     73  <div style="width: 25px; height: 25px">X</div>
     74 </div>
     75 <div class="flex min" style="flex-flow: column nowrap"
     76     data-expected-width="45" data-expected-height="45">
     77  <div style="width: 25px; height: 25px">X</div>
     78 </div>
     79 <div class="flex max" style="flex-flow: column nowrap"
     80     data-expected-width="45" data-expected-height="45">
     81  <div style="width: 25px; height: 25px">X</div>
     82 </div>
     83 
     84 <div class="flex" style="flex-flow: column nowrap"
     85     data-expected-width="95" data-expected-height="80">
     86  <div data-expected-width="85" data-expected-height="35">X X</div>
     87  <div data-expected-width="85" data-expected-height="35">X X</div>
     88 </div>
     89 <div class="flex min" style="flex-flow: column nowrap"
     90     data-expected-width="95" data-expected-height="80">
     91  <div data-expected-width="85" data-expected-height="35">X X</div>
     92  <div data-expected-width="85" data-expected-height="35">X X</div>
     93 </div>
     94 <div class="flex max" style="flex-flow: column nowrap"
     95     data-expected-width="95" data-expected-height="80">
     96  <div data-expected-width="85" data-expected-height="35">X X</div>
     97  <div data-expected-width="85" data-expected-height="35">X X</div>
     98 </div>
     99 
    100 <hr>
    101 
    102 <!-- Multi-line row flex container -->
    103 <div class="flex" style="flex-flow: row wrap"
    104     data-expected-width="45" data-expected-height="45">
    105  <div style="width: 25px; height: 25px">X</div>
    106 </div>
    107 <div class="flex min" style="flex-flow: row wrap"
    108     data-expected-width="45" data-expected-height="45">
    109  <div style="width: 25px; height: 25px">X</div>
    110 </div>
    111 <div class="flex max" style="flex-flow: row wrap"
    112     data-expected-width="45" data-expected-height="45">
    113  <div style="width: 25px; height: 25px">X</div>
    114 </div>
    115 
    116 <div class="flex" style="flex-flow: row wrap"
    117     data-expected-width="180" data-expected-height="45">
    118  <div data-expected-width="85" data-expected-height="35">X X</div>
    119  <div data-expected-width="85" data-expected-height="35">X X</div>
    120 </div>
    121 <div class="flex min" style="flex-flow: row wrap"
    122     data-expected-width="180" data-expected-height="45">
    123  <div data-expected-width="85" data-expected-height="35">X X</div>
    124  <div data-expected-width="85" data-expected-height="35">X X</div>
    125 </div>
    126 <div class="flex max" style="flex-flow: row wrap"
    127     data-expected-width="180" data-expected-height="45">
    128  <div data-expected-width="85" data-expected-height="35">X X</div>
    129  <div data-expected-width="85" data-expected-height="35">X X</div>
    130 </div>
    131 
    132 <hr>
    133 
    134 <!-- Multi-line column flex container -->
    135 <div class="flex" style="flex-flow: column wrap"
    136     data-expected-width="45" data-expected-height="45">
    137  <div style="width: 25px; height: 25px">X</div>
    138 </div>
    139 <div class="flex min" style="flex-flow: column wrap"
    140     data-expected-width="45" data-expected-height="45">
    141  <div style="width: 25px; height: 25px">X</div>
    142 </div>
    143 <div class="flex max" style="flex-flow: column wrap"
    144     data-expected-width="45" data-expected-height="45">
    145  <div style="width: 25px; height: 25px">X</div>
    146 </div>
    147 
    148 <div class="flex" style="flex-flow: column wrap"
    149     data-expected-width="95" data-expected-height="80">
    150  <div data-expected-width="85" data-expected-height="35">X X</div>
    151  <div data-expected-width="85" data-expected-height="35">X X</div>
    152 </div>
    153 <div class="flex min" style="flex-flow: column wrap"
    154     data-expected-width="180" data-expected-height="45">
    155  <div data-expected-width="85" data-expected-height="35">X X</div>
    156  <div data-expected-width="85" data-expected-height="35">X X</div>
    157 </div>
    158 <div class="flex max" style="flex-flow: column wrap"
    159     data-expected-width="95" data-expected-height="80">
    160  <div data-expected-width="85" data-expected-height="35">X X</div>
    161  <div data-expected-width="85" data-expected-height="35">X X</div>
    162 </div>
    163 
    164 <script src="/resources/testharness.js"></script>
    165 <script src="/resources/testharnessreport.js"></script>
    166 <script src="/resources/check-layout-th.js"></script>
    167 <script>
    168 document.fonts.ready.then(() => { checkLayout(".flex") })
    169 </script>