tor-browser

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

logicalprops-block-size.html (3470B)

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