tor-browser

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

logicalprops-inline-size.html (3457B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS Logical Properties: {max-,min-}inline-size</title>
      4 <link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
      6 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="/resources/check-layout-th.js"></script>
     10 
     11 <style>
     12 .block {
     13  border: 1px solid #000;
     14 }
     15 #block1 {
     16  inline-size: 40px;
     17  min-inline-size: 50px;
     18  max-inline-size: 100px;
     19 }
     20 #block2 {
     21  inline-size: 100px;
     22  min-inline-size: 50px;
     23  max-inline-size: 100px;
     24 }
     25 #block3 {
     26  inline-size: 120px;
     27  min-inline-size: 50px;
     28  max-inline-size: 100px;
     29 }
     30 
     31 .override {
     32  border: 1px solid #000;
     33 }
     34 #override1 {
     35  inline-size: 100px;
     36  width: 50px;
     37 }
     38 #override2 {
     39  width: 50px;
     40  inline-size: 100px;
     41 }
     42 
     43 .table {
     44  border: 1px solid #000;
     45  display: table;
     46 }
     47 .tablecell {
     48  display: table-cell;
     49 }
     50 #table1_cell {
     51  inline-size: 40px;
     52  min-inline-size: 50px;
     53  max-inline-size: 100px;
     54  block-size: 100px;
     55  background-color: red;
     56 }
     57 #table2_cell {
     58  inline-size: 100px;
     59  min-inline-size: 50px;
     60  max-inline-size: 100px;
     61  block-size: 100px;
     62  background-color: blue;
     63 }
     64 #table3_cell {
     65  inline-size: 120px;
     66  min-inline-size: 50px;
     67  max-inline-size: 100px;
     68  block-size: 100px;
     69  background-color: green;
     70 }
     71 </style>
     72 
     73 <div id="log"></div>
     74 
     75 <h3>Maximum and minimim inline sizes in blocks</h3>
     76 <div>
     77  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
     78  <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div>
     79 
     80  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
     81  <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div>
     82 
     83  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
     84  <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div>
     85 </div>
     86 
     87 <h3>Overridance of <code>width</code> and <code>inline-size</code></h3>
     88 <div>
     89  <p>Check that <code>width</code> overrides <code>inline-size</code></p>
     90  <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div>
     91 
     92  <p>Check that <code>inline-size</code> overrides <code>width</code></p>
     93  <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div>
     94 </div>
     95 
     96 <h3>Maximum and minimim inline sizes in table cells</h3>
     97 <div>
     98  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
     99  <div class="table">
    100    <div class="tablecell" id="table1_cell" data-expected-client-width="50" data-expected-client-height="100"></div>
    101  </div>
    102 
    103  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
    104  <div class="table">
    105    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
    106  </div>
    107 
    108  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
    109  <div class="table">
    110    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
    111  </div>
    112 </div>
    113 
    114 <script>
    115 checkLayout(".block", false);
    116 checkLayout(".override", false);
    117 checkLayout(".tablecell", false);
    118 done();
    119 </script>