mirror of
https://github.com/servo/servo.git
synced 2025-08-10 16:05:43 +01:00
Update web-platform-tests to revision cf261625e2d230ab219eec966f4abe26e3401b64
This commit is contained in:
WPT Sync Bot
parent
11a89bcc47
commit
8f98acd0e7
297 changed files with 3396 additions and 1555 deletions
|
|
@ -6,62 +6,41 @@
|
|||
<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/style-check.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
.block {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#div1 {
|
||||
#block1 {
|
||||
block-size: 40px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
#block2 {
|
||||
block-size: 100px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
#block3 {
|
||||
block-size: 120px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#ref_div1 {
|
||||
width: 40px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
#ref_div2 {
|
||||
width: 100px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
#ref_div3 {
|
||||
width: 120px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
.override {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#p1 {
|
||||
#override1 {
|
||||
block-size: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
#p2 {
|
||||
#override2 {
|
||||
width: 50px;
|
||||
block-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
width: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
|
|
@ -70,7 +49,6 @@ p {
|
|||
}
|
||||
.tablecell {
|
||||
display: table-cell;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#table1_cell {
|
||||
block-size: 40px;
|
||||
|
|
@ -93,75 +71,52 @@ p {
|
|||
inline-size: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#ref_table1_cell {
|
||||
width: 40px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#ref_table2_cell {
|
||||
width: 100px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#ref_table3_cell {
|
||||
width: 120px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
<div id="div3"></div>
|
||||
<div id="ref_div1"></div>
|
||||
<div id="ref_div2"></div>
|
||||
<div id="ref_div3"></div>
|
||||
<div id="log"></div>
|
||||
|
||||
<p id="p1"></div>
|
||||
<p id="p2"></div>
|
||||
<p id="ref_p1"></div>
|
||||
<p id="ref_p2"></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>
|
||||
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table1_cell"></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>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table2_cell"></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>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table3_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table1_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table2_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table3_cell"></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>
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("div1", "ref_div1"));
|
||||
assert_true(compareWidthHeight("div2", "ref_div2"));
|
||||
assert_true(compareWidthHeight("div3", "ref_div3"));
|
||||
}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in vertical-lr");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("p1", "ref_p1"));
|
||||
assert_true(compareWidthHeight("p2", "ref_p2"));
|
||||
}, "Check that width override block-size and vice versa in vertical-lr");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
|
||||
assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
|
||||
assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
|
||||
}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in table vertical-lr");
|
||||
checkLayout(".block", false);
|
||||
checkLayout(".override", false);
|
||||
checkLayout(".tablecell", false);
|
||||
done();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,60 +6,43 @@
|
|||
<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/style-check.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
.tests {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.block {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#div1 {
|
||||
#block1 {
|
||||
block-size: 40px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
#block2 {
|
||||
block-size: 100px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
#block3 {
|
||||
block-size: 120px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#ref_div1 {
|
||||
height: 40px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
#ref_div2 {
|
||||
height: 100px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
#ref_div3 {
|
||||
height: 120px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
.override {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#p1 {
|
||||
#override1 {
|
||||
block-size: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
#p2 {
|
||||
#override2 {
|
||||
height: 50px;
|
||||
block-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
height: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
|
|
@ -89,75 +72,52 @@ p {
|
|||
inline-size: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#ref_table1_cell {
|
||||
height: 40px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#ref_table2_cell {
|
||||
height: 100px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#ref_table3_cell {
|
||||
height: 120px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
<div id="div3"></div>
|
||||
<div id="ref_div1"></div>
|
||||
<div id="ref_div2"></div>
|
||||
<div id="ref_div3"></div>
|
||||
<div id="log"></div>
|
||||
|
||||
<p id="p1"></div>
|
||||
<p id="p2"></div>
|
||||
<p id="ref_p1"></div>
|
||||
<p id="ref_p2"></div>
|
||||
<h3>Maximum and minimim block sizes in blocks</h3>
|
||||
<div class="tests">
|
||||
<p><code>block-size</code> < <code>min-block-size</code></p>
|
||||
<div class="block" id="block1" data-expected-width="600" data-expected-client-height="50"></div>
|
||||
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table1_cell"></div>
|
||||
<p><code>min-block-size</code> < <code>block-size</code> ≤ <code>max-block-size</code></p>
|
||||
<div class="block" id="block2" data-expected-width="600" data-expected-client-height="100"></div>
|
||||
|
||||
<p><code>block-size</code> > <code>max-block-size</code></p>
|
||||
<div class="block" id="block3" data-expected-width="600" data-expected-client-height="100"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table2_cell"></div>
|
||||
|
||||
<h3>Overridance of <code>height</code> and <code>block-size</code></h3>
|
||||
<div class="tests">
|
||||
<p>Check that <code>height</code> overrides <code>block-size</code></p>
|
||||
<div class="override" id="override1" data-expected-width="600" data-expected-client-height="50"></div>
|
||||
|
||||
<p>Check that <code>block-size</code> overrides <code>height</code></p>
|
||||
<div class="override" id="override2" data-expected-width="600" data-expected-client-height="100"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table3_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table1_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table2_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table3_cell"></div>
|
||||
|
||||
<h3>Maximum and minimim block sizes in table cells</h3>
|
||||
<div class="tests">
|
||||
<p><code>block-size</code> < <code>min-block-size</code></p>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="40"></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="100" data-expected-client-height="120"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("div1", "ref_div1"));
|
||||
assert_true(compareWidthHeight("div2", "ref_div2"));
|
||||
assert_true(compareWidthHeight("div3", "ref_div3"));
|
||||
}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("p1", "ref_p1"));
|
||||
assert_true(compareWidthHeight("p2", "ref_p2"));
|
||||
}, "Check that height override block-size and vice versa");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
|
||||
assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
|
||||
assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
|
||||
}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in table");
|
||||
checkLayout(".block", false);
|
||||
checkLayout(".override", false);
|
||||
checkLayout(".tablecell", false);
|
||||
done();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,62 +6,41 @@
|
|||
<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/style-check.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
.block {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#div1 {
|
||||
#block1 {
|
||||
inline-size: 40px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
#block2 {
|
||||
inline-size: 100px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
#block3 {
|
||||
inline-size: 120px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#ref_div1 {
|
||||
height: 40px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
#ref_div2 {
|
||||
height: 100px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
#ref_div3 {
|
||||
height: 120px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
.override {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#p1 {
|
||||
#override1 {
|
||||
inline-size: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
#p2 {
|
||||
#override2 {
|
||||
height: 50px;
|
||||
inline-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
height: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
|
|
@ -70,7 +49,6 @@ p {
|
|||
}
|
||||
.tablecell {
|
||||
display: table-cell;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#table1_cell {
|
||||
inline-size: 40px;
|
||||
|
|
@ -93,75 +71,52 @@ p {
|
|||
block-size: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#ref_table1_cell {
|
||||
height: 40px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#ref_table2_cell {
|
||||
height: 100px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#ref_table3_cell {
|
||||
height: 120px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
<div id="div3"></div>
|
||||
<div id="ref_div1"></div>
|
||||
<div id="ref_div2"></div>
|
||||
<div id="ref_div3"></div>
|
||||
<div id="log"></div>
|
||||
|
||||
<p id="p1"></div>
|
||||
<p id="p2"></div>
|
||||
<p id="ref_p1"></div>
|
||||
<p id="ref_p2"></div>
|
||||
<h3>Maximum and minimim inline sizes in blocks with vertical-lr</h3>
|
||||
<div>
|
||||
<p><code>inline-size</code> < <code>min-inline-size</code></p>
|
||||
<div class="block" id="block1" data-expected-client-width="0" data-expected-client-height="50"></div>
|
||||
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table1_cell"></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="0" data-expected-client-height="100"></div>
|
||||
|
||||
<p><code>inline-size</code> > <code>max-inline-size</code></p>
|
||||
<div class="block" id="block3" data-expected-client-width="0" data-expected-client-height="100"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table2_cell"></div>
|
||||
|
||||
<h3>Overridance of <code>height</code> and <code>inline-size</code> in vertical-lr</h3>
|
||||
<div>
|
||||
<p>Check that <code>height</code> overrides <code>inline-size</code></p>
|
||||
<div class="override" id="override1" data-expected-client-width="0" data-expected-client-height="50"></div>
|
||||
|
||||
<p>Check that <code>inline-size</code> overrides <code>height</code></p>
|
||||
<div class="override" id="override2" data-expected-client-width="0" data-expected-client-height="100"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table3_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table1_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table2_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table3_cell"></div>
|
||||
|
||||
<h3>Maximum and minimim inline sizes in table cells with vertical-lr</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="100" data-expected-client-height="50"></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>
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("div1", "ref_div1"));
|
||||
assert_true(compareWidthHeight("div2", "ref_div2"));
|
||||
assert_true(compareWidthHeight("div3", "ref_div3"));
|
||||
}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in vertical-lr");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("p1", "ref_p1"));
|
||||
assert_true(compareWidthHeight("p2", "ref_p2"));
|
||||
}, "Check that height override inline-size and vice versa in vertical-lr");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
|
||||
assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
|
||||
assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
|
||||
}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in table vertical-lr");
|
||||
checkLayout(".block", false);
|
||||
checkLayout(".override", false);
|
||||
checkLayout(".tablecell", false);
|
||||
done();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,60 +6,39 @@
|
|||
<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/style-check.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
.block {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#div1 {
|
||||
#block1 {
|
||||
inline-size: 40px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
#block2 {
|
||||
inline-size: 100px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
#block3 {
|
||||
inline-size: 120px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#ref_div1 {
|
||||
width: 40px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
#ref_div2 {
|
||||
width: 100px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
#ref_div3 {
|
||||
width: 120px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
.override {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#p1 {
|
||||
#override1 {
|
||||
inline-size: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
#p2 {
|
||||
#override2 {
|
||||
width: 50px;
|
||||
inline-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
width: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
|
|
@ -89,75 +68,52 @@ p {
|
|||
block-size: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#ref_table1_cell {
|
||||
width: 40px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#ref_table2_cell {
|
||||
width: 100px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#ref_table3_cell {
|
||||
width: 120px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
<div id="div3"></div>
|
||||
<div id="ref_div1"></div>
|
||||
<div id="ref_div2"></div>
|
||||
<div id="ref_div3"></div>
|
||||
<div id="log"></div>
|
||||
|
||||
<p id="p1"></div>
|
||||
<p id="p2"></div>
|
||||
<p id="ref_p1"></div>
|
||||
<p id="ref_p2"></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>
|
||||
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table1_cell"></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>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table2_cell"></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>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table3_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table1_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table2_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="ref_table3_cell"></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>
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("div1", "ref_div1"));
|
||||
assert_true(compareWidthHeight("div2", "ref_div2"));
|
||||
assert_true(compareWidthHeight("div3", "ref_div3"));
|
||||
}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("p1", "ref_p1"));
|
||||
assert_true(compareWidthHeight("p2", "ref_p2"));
|
||||
}, "Check that width override inline-size and vice versa");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
|
||||
assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
|
||||
assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
|
||||
}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in table");
|
||||
checkLayout(".block", false);
|
||||
checkLayout(".override", false);
|
||||
checkLayout(".tablecell", false);
|
||||
done();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
"use strict";
|
||||
function compareWidthHeight(id1, id2) {
|
||||
var element1 = document.getElementById(id1);
|
||||
var style1 = getComputedStyle(element1);
|
||||
var element2 = document.getElementById(id2);
|
||||
var style2 = getComputedStyle(element2);
|
||||
return (style1.width == style2.width) &&
|
||||
(style1.height == style2.height)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue