mirror of
https://github.com/servo/servo
synced 2026-05-13 02:17:06 +02:00
120 lines
3.4 KiB
HTML
120 lines
3.4 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Logical Properties: {max-,min-}inline-size</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;
|
|
}
|
|
#block1 {
|
|
inline-size: 40px;
|
|
min-inline-size: 50px;
|
|
max-inline-size: 100px;
|
|
}
|
|
#block2 {
|
|
inline-size: 100px;
|
|
min-inline-size: 50px;
|
|
max-inline-size: 100px;
|
|
}
|
|
#block3 {
|
|
inline-size: 120px;
|
|
min-inline-size: 50px;
|
|
max-inline-size: 100px;
|
|
}
|
|
|
|
.override {
|
|
border: 1px solid #000;
|
|
}
|
|
#override1 {
|
|
inline-size: 100px;
|
|
width: 50px;
|
|
}
|
|
#override2 {
|
|
width: 50px;
|
|
inline-size: 100px;
|
|
}
|
|
|
|
.table {
|
|
border: 1px solid #000;
|
|
display: table;
|
|
}
|
|
.tablecell {
|
|
display: table-cell;
|
|
}
|
|
#table1_cell {
|
|
inline-size: 40px;
|
|
min-inline-size: 50px;
|
|
max-inline-size: 100px;
|
|
block-size: 100px;
|
|
background-color: red;
|
|
}
|
|
#table2_cell {
|
|
inline-size: 100px;
|
|
min-inline-size: 50px;
|
|
max-inline-size: 100px;
|
|
block-size: 100px;
|
|
background-color: blue;
|
|
}
|
|
#table3_cell {
|
|
inline-size: 120px;
|
|
min-inline-size: 50px;
|
|
max-inline-size: 100px;
|
|
block-size: 100px;
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
|
|
<div id="log"></div>
|
|
|
|
<h3>Maximum and minimim inline sizes in blocks</h3>
|
|
<div>
|
|
<p><code>inline-size</code> < <code>min-inline-size</code></p>
|
|
<div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div>
|
|
|
|
<p><code>min-inline-size</code> < <code>inline-size</code> ≤ <code>max-inline-size</code></p>
|
|
<div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div>
|
|
|
|
<p><code>inline-size</code> > <code>max-inline-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>inline-size</code></h3>
|
|
<div>
|
|
<p>Check that <code>width</code> overrides <code>inline-size</code></p>
|
|
<div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div>
|
|
|
|
<p>Check that <code>inline-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 inline sizes in table cells</h3>
|
|
<div>
|
|
<p><code>inline-size</code> < <code>min-inline-size</code></p>
|
|
<div class="table">
|
|
<div class="tablecell" id="table1_cell" data-expected-client-width="50" data-expected-client-height="100"></div>
|
|
</div>
|
|
|
|
<p><code>min-inline-size</code> < <code>inline-size</code> ≤ <code>max-inline-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>inline-size</code> > <code>max-inline-size</code></p>
|
|
<div class="table">
|
|
<div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
checkLayout(".block", false);
|
|
checkLayout(".override", false);
|
|
checkLayout(".tablecell", false);
|
|
done();
|
|
</script>
|