tor-browser

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

logicalprops-inline-size-vlr.html (3610B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS Logical Properties: {max-,min-}inline-size vertical-lr</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  writing-mode: vertical-lr;
     15 }
     16 #block1 {
     17  inline-size: 40px;
     18  min-inline-size: 50px;
     19  max-inline-size: 100px;
     20 }
     21 #block2 {
     22  inline-size: 100px;
     23  min-inline-size: 50px;
     24  max-inline-size: 100px;
     25 }
     26 #block3 {
     27  inline-size: 120px;
     28  min-inline-size: 50px;
     29  max-inline-size: 100px;
     30 }
     31 
     32 .override {
     33  border: 1px solid #000;
     34  writing-mode: vertical-lr;
     35 }
     36 #override1 {
     37  inline-size: 100px;
     38  height: 50px;
     39 }
     40 #override2 {
     41  height: 50px;
     42  inline-size: 100px;
     43 }
     44 
     45 .table {
     46  border: 1px solid #000;
     47  display: table;
     48  writing-mode: vertical-lr;
     49 }
     50 .tablecell {
     51  display: table-cell;
     52 }
     53 #table1_cell {
     54  inline-size: 40px;
     55  min-inline-size: 50px;
     56  max-inline-size: 100px;
     57  block-size: 100px;
     58  background-color: red;
     59 }
     60 #table2_cell {
     61  inline-size: 100px;
     62  min-inline-size: 50px;
     63  max-inline-size: 100px;
     64  block-size: 100px;
     65  background-color: blue;
     66 }
     67 #table3_cell {
     68  inline-size: 120px;
     69  min-inline-size: 50px;
     70  max-inline-size: 100px;
     71  block-size: 100px;
     72  background-color: green;
     73 }
     74 </style>
     75 
     76 <div id="log"></div>
     77 
     78 <h3>Maximum and minimim inline sizes in blocks with vertical-lr</h3>
     79 <div>
     80  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
     81  <div class="block" id="block1" data-expected-client-width="0" data-expected-client-height="50"></div>
     82 
     83  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
     84  <div class="block" id="block2" data-expected-client-width="0" data-expected-client-height="100"></div>
     85 
     86  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
     87  <div class="block" id="block3" data-expected-client-width="0" data-expected-client-height="100"></div>
     88 </div>
     89 
     90 <h3>Overridance of <code>height</code> and <code>inline-size</code> in vertical-lr</h3>
     91 <div>
     92  <p>Check that <code>height</code> overrides <code>inline-size</code></p>
     93  <div class="override" id="override1" data-expected-client-width="0" data-expected-client-height="50"></div>
     94 
     95  <p>Check that <code>inline-size</code> overrides <code>height</code></p>
     96  <div class="override" id="override2" data-expected-client-width="0" data-expected-client-height="100"></div>
     97 </div>
     98 
     99 <h3>Maximum and minimim inline sizes in table cells with vertical-lr</h3>
    100 <div>
    101  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
    102  <div class="table">
    103    <div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="50"></div>
    104  </div>
    105 
    106  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
    107  <div class="table">
    108    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
    109  </div>
    110 
    111  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
    112  <div class="table">
    113    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
    114  </div>
    115 </div>
    116 
    117 <script>
    118 checkLayout(".block", false);
    119 checkLayout(".override", false);
    120 checkLayout(".tablecell", false);
    121 done();
    122 </script>