diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html')
-rw-r--r-- | testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html b/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html new file mode 100644 index 0000000000..da02e759d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html @@ -0,0 +1,122 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Logical Properties: {max-,min-}block-size vertical-lr</title> +<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.block { + border: 1px solid #000; + writing-mode: vertical-lr; +} +#block1 { + block-size: 40px; + min-block-size: 50px; + max-block-size: 100px; +} +#block2 { + block-size: 100px; + min-block-size: 50px; + max-block-size: 100px; +} +#block3 { + block-size: 120px; + min-block-size: 50px; + max-block-size: 100px; +} + +.override { + border: 1px solid #000; + writing-mode: vertical-lr; +} +#override1 { + block-size: 100px; + width: 50px; +} +#override2 { + width: 50px; + block-size: 100px; +} + +.table { + border: 1px solid #000; + display: table; + writing-mode: vertical-lr; +} +.tablecell { + display: table-cell; +} +#table1_cell { + block-size: 40px; + min-block-size: 50px; + max-block-size: 100px; + inline-size: 100px; + background-color: red; +} +#table2_cell { + block-size: 100px; + min-block-size: 50px; + max-block-size: 100px; + inline-size: 100px; + background-color: blue; +} +#table3_cell { + block-size: 120px; + min-block-size: 50px; + max-block-size: 100px; + inline-size: 100px; + background-color: green; +} +</style> + +<div id="log"></div> + +<h3>Maximum and minimim block sizes in blocks with vertical-lr</h3> +<div> + <p><code>block-size</code> < <code>min-block-size</code></p> + <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div> + + <p><code>min-block-size</code> < <code>block-size</code> ≤ <code>max-block-size</code></p> + <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div> + + <p><code>block-size</code> > <code>max-block-size</code></p> + <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div> +</div> + +<h3>Overridance of <code>width</code> and <code>block-size</code> in vertical-lr</h3> +<div> + <p>Check that <code>width</code> overrides <code>block-size</code></p> + <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div> + + <p>Check that <code>block-size</code> overrides <code>width</code></p> + <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div> +</div> + +<h3>Maximum and minimim block sizes in table cells with vertical-lr</h3> +<div> + <p><code>block-size</code> < <code>min-block-size</code></p> + <div class="table"> + <div class="tablecell" id="table1_cell" data-expected-client-width="40" data-expected-client-height="100"></div> + </div> + + <p><code>min-block-size</code> < <code>block-size</code> ≤ <code>max-block-size</code></p> + <div class="table"> + <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div> + </div> + + <p><code>block-size</code> > <code>max-block-size</code></p> + <div class="table"> + <div class="tablecell" id="table3_cell" data-expected-client-width="120" data-expected-client-height="100"></div> + </div> +</div> + +<script> +checkLayout(".block", false); +checkLayout(".override", false); +checkLayout(".tablecell", false); +done(); +</script> |