tor-browser

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

keyword-sizes-for-intrinsic-contributions.html (6545B)

      1 <!DOCTYPE html>
      2 <title>Keyword sizes for intrinsic contributions</title>
      3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
      4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-values">
      5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values">
      6 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
      7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10721">
      8 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11006">
      9 <meta assert="The various keyword sizes produce the right min/max-content contributions.">
     10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     11 
     12 <style>
     13 .wrapper {
     14  display: inline-block;
     15  vertical-align: top;
     16  margin-right: 200px;
     17 }
     18 
     19 .test {
     20  float: left;
     21  clear: both;
     22  margin: 5px;
     23  border: 3px solid;
     24  padding: 2px;
     25  font: 20px/1 Ahem;
     26 }
     27 
     28 /* Set the preferred size to small amount, to test that the min size works */
     29 .test.min-width  > div { width:  0px }
     30 .test.min-height > div { height: 0px }
     31 
     32 /* Set the preferred size to big amount, to test that the max size works */
     33 .test.max-width > div  { width:  200px }
     34 .test.max-height > div { height: 200px }
     35 
     36 /* stretch isn't widely supported, fall back to vendor-prefixed alternatives */
     37 .width      > .stretch {      width: -moz-available;      width: -webkit-fill-available;      width: stretch }
     38 .min-width  > .stretch {  min-width: -moz-available;  min-width: -webkit-fill-available;  min-width: stretch }
     39 .max-width  > .stretch {  max-width: -moz-available;  max-width: -webkit-fill-available;  max-width: stretch }
     40 .height     > .stretch {     height: -moz-available;     height: -webkit-fill-available;     height: stretch }
     41 .min-height > .stretch { min-height: -moz-available; min-height: -webkit-fill-available; min-height: stretch }
     42 .max-height > .stretch { max-height: -moz-available; max-height: -webkit-fill-available; max-height: stretch }
     43 </style>
     44 <div id="log"></div>
     45 
     46 <!-- Preferred width -->
     47 <div class="wrapper" style="width: 0px">
     48  <div class="test width" data-expected-width="70"><div style="width: min-content">XXX XXX</div></div>
     49  <div class="test width" data-expected-width="70"><div style="width: fit-content">XXX XXX</div></div>
     50  <div class="test width" data-expected-width="150"><div style="width: max-content">XXX XXX</div></div>
     51  <div class="test width" data-expected-width="70"><div class="stretch">XXX XXX</div></div>
     52 </div>
     53 <div class="wrapper" style="width: 100px">
     54  <div class="test width" data-expected-width="70"><div style="width: min-content">XXX XXX</div></div>
     55  <div class="test width" data-expected-width="90"><div style="width: fit-content">XXX XXX</div></div>
     56  <div class="test width" data-expected-width="150"><div style="width: max-content">XXX XXX</div></div>
     57  <div class="test width" data-expected-width="90"><div class="stretch">XXX XXX</div></div>
     58 </div>
     59 <div class="wrapper" style="width: 200px">
     60  <div class="test width" data-expected-width="70"><div style="width: min-content">XXX XXX</div></div>
     61  <div class="test width" data-expected-width="150"><div style="width: fit-content">XXX XXX</div></div>
     62  <div class="test width" data-expected-width="150"><div style="width: max-content">XXX XXX</div></div>
     63  <div class="test width" data-expected-width="150"><div class="stretch">XXX XXX</div></div>
     64 </div>
     65 
     66 <hr>
     67 
     68 <!-- Minimum width -->
     69 <div class="wrapper" style="width: 0px">
     70  <div class="test min-width" data-expected-width="70"><div style="min-width: min-content">XXX XXX</div></div>
     71  <div class="test min-width" data-expected-width="70"><div style="min-width: fit-content">XXX XXX</div></div>
     72  <div class="test min-width" data-expected-width="150"><div style="min-width: max-content">XXX XXX</div></div>
     73  <div class="test min-width" data-expected-width="10"><div class="stretch">XXX XXX</div></div>
     74 </div>
     75 <div class="wrapper" style="width: 100px">
     76  <div class="test min-width" data-expected-width="70"><div style="min-width: min-content">XXX XXX</div></div>
     77  <div class="test min-width" data-expected-width="90"><div style="min-width: fit-content">XXX XXX</div></div>
     78  <div class="test min-width" data-expected-width="150"><div style="min-width: max-content">XXX XXX</div></div>
     79  <div class="test min-width" data-expected-width="10"><div class="stretch">XXX XXX</div></div>
     80 </div>
     81 <div class="wrapper" style="width: 200px">
     82  <div class="test min-width" data-expected-width="70"><div style="min-width: min-content">XXX XXX</div></div>
     83  <div class="test min-width" data-expected-width="150"><div style="min-width: fit-content">XXX XXX</div></div>
     84  <div class="test min-width" data-expected-width="150"><div style="min-width: max-content">XXX XXX</div></div>
     85  <div class="test min-width" data-expected-width="10"><div class="stretch">XXX XXX</div></div>
     86 </div>
     87 
     88 <hr>
     89 
     90 <!-- Maximum width -->
     91 <div class="wrapper" style="width: 0px">
     92  <div class="test max-width" data-expected-width="70"><div style="max-width: min-content">XXX XXX</div></div>
     93  <div class="test max-width" data-expected-width="70"><div style="max-width: fit-content">XXX XXX</div></div>
     94  <div class="test max-width" data-expected-width="150"><div style="max-width: max-content">XXX XXX</div></div>
     95  <div class="test max-width" data-expected-width="210"><div class="stretch">XXX XXX</div></div>
     96 </div>
     97 <div class="wrapper" style="width: 100px">
     98  <div class="test max-width" data-expected-width="70"><div style="max-width: min-content">XXX XXX</div></div>
     99  <div class="test max-width" data-expected-width="90"><div style="max-width: fit-content">XXX XXX</div></div>
    100  <div class="test max-width" data-expected-width="150"><div style="max-width: max-content">XXX XXX</div></div>
    101  <div class="test max-width" data-expected-width="210"><div class="stretch">XXX XXX</div></div>
    102 </div>
    103 <div class="wrapper" style="width: 200px">
    104  <div class="test max-width" data-expected-width="70"><div style="max-width: min-content">XXX XXX</div></div>
    105  <div class="test max-width" data-expected-width="150"><div style="max-width: fit-content">XXX XXX</div></div>
    106  <div class="test max-width" data-expected-width="150"><div style="max-width: max-content">XXX XXX</div></div>
    107  <div class="test max-width" data-expected-width="210"><div class="stretch">XXX XXX</div></div>
    108 </div>
    109 
    110 <script src="/resources/testharness.js"></script>
    111 <script src="/resources/testharnessreport.js"></script>
    112 <script src="/resources/check-layout-th.js"></script>
    113 <script>
    114 document.fonts.ready.then(() => checkLayout(".test"));
    115 </script>