testing/web-platform/tests/css/css-logical/logicalprops-block-size.html

   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>