mirror of
https://github.com/servo/servo.git
synced 2025-08-10 16:05:43 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
2
tests/wpt/web-platform-tests/css/css-logical/OWNERS
Normal file
2
tests/wpt/web-platform-tests/css/css-logical/OWNERS
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@atanassov
|
||||
@fantasai
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Logical Properties Cascading Reference</title>
|
||||
<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
|
||||
<style>
|
||||
div {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
background-color: blue;
|
||||
}
|
||||
.horizontal {
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
}
|
||||
#horizontal {
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
}
|
||||
.vertical {
|
||||
width: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
#vertical {
|
||||
width: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are two vertical blue boxes followed by two horizontal blue boxes.</p>
|
||||
|
||||
<div class="horizontal" id="vertical"></div><br>
|
||||
<div class="horizontal" id="vertical"></div><br>
|
||||
<div class="vertical" id="horizontal"></div><br>
|
||||
<div class="vertical" id="horizontal"></div><br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Logical Properties: "A computed value that has logical and physical properties is determined by applying the CSS cascade to declarations of both."</title>
|
||||
<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-box-props">
|
||||
<link rel="match" href="cascading-001-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Physical property declarations with higher specificity should override logical ones and vice versa.">
|
||||
<style>
|
||||
div {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
background-color: blue;
|
||||
}
|
||||
.horizontal-logical {
|
||||
inline-size: 100px;
|
||||
block-size: 10px;
|
||||
}
|
||||
#horizontal-logical {
|
||||
inline-size: 100px;
|
||||
block-size: 10px;
|
||||
}
|
||||
.horizontal-physical {
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
}
|
||||
#horizontal-physical {
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
}
|
||||
.vertical-logical {
|
||||
inline-size: 10px;
|
||||
block-size: 100px;
|
||||
}
|
||||
#vertical-logical {
|
||||
inline-size: 10px;
|
||||
block-size: 100px;
|
||||
}
|
||||
.vertical-physical {
|
||||
width: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
#vertical-physical {
|
||||
width: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are two vertical blue boxes followed by two horizontal blue boxes.</p>
|
||||
<div class="horizontal-logical" id="vertical-physical"></div><br>
|
||||
<div class="horizontal-physical" id="vertical-logical"></div><br>
|
||||
<div class="vertical-logical" id="horizontal-physical"></div><br>
|
||||
<div class="vertical-physical" id="horizontal-logical"></div><br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<!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/style-check.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#div1 {
|
||||
block-size: 40px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
block-size: 100px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
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 {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#p1 {
|
||||
block-size: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
#p2 {
|
||||
width: 50px;
|
||||
block-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
width: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
display: table;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.tablecell {
|
||||
display: table-cell;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
#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>
|
||||
|
||||
<p id="p1"></div>
|
||||
<p id="p2"></div>
|
||||
<p id="ref_p1"></div>
|
||||
<p id="ref_p2"></div>
|
||||
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table1_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table2_cell"></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>
|
||||
</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");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Logical Properties: {max-,min-}block-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/style-check.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#div1 {
|
||||
block-size: 40px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
block-size: 100px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
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 {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#p1 {
|
||||
block-size: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
#p2 {
|
||||
height: 50px;
|
||||
block-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
height: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
display: table;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
#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>
|
||||
|
||||
<p id="p1"></div>
|
||||
<p id="p2"></div>
|
||||
<p id="ref_p1"></div>
|
||||
<p id="ref_p2"></div>
|
||||
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table1_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table2_cell"></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>
|
||||
</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");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Logical Properties: {max-,min-}inline-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/style-check.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#div1 {
|
||||
inline-size: 40px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
inline-size: 100px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
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 {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#p1 {
|
||||
inline-size: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
#p2 {
|
||||
height: 50px;
|
||||
inline-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
height: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
display: table;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.tablecell {
|
||||
display: table-cell;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
#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>
|
||||
|
||||
<p id="p1"></div>
|
||||
<p id="p2"></div>
|
||||
<p id="ref_p1"></div>
|
||||
<p id="ref_p2"></div>
|
||||
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table1_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table2_cell"></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>
|
||||
</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");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
<!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/style-check.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#div1 {
|
||||
inline-size: 40px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
inline-size: 100px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
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 {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#p1 {
|
||||
inline-size: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
#p2 {
|
||||
width: 50px;
|
||||
inline-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
width: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
width: 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;
|
||||
}
|
||||
#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>
|
||||
|
||||
<p id="p1"></div>
|
||||
<p id="p2"></div>
|
||||
<p id="ref_p1"></div>
|
||||
<p id="ref_p2"></div>
|
||||
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table1_cell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tablecell" id="table2_cell"></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>
|
||||
</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");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Logical Properties: {max-,min-}block-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>
|
||||
|
||||
<style> #dummy {} </style>
|
||||
|
||||
<script>
|
||||
function isValidDeclaration(cssText) {
|
||||
var cssRule = document.styleSheets[0].cssRules[0];
|
||||
cssRule.style = cssText;
|
||||
var valid = (cssRule.style.length > 0);
|
||||
cssRule.style = "";
|
||||
return valid;
|
||||
}
|
||||
var tests = [
|
||||
{cssText:"block-size: 1"},
|
||||
{cssText:"min-block-size: 1"},
|
||||
{cssText:"max-block-size: 1"},
|
||||
{cssText:"inline-size: 1"},
|
||||
{cssText:"min-inline-size: 1"},
|
||||
{cssText:"max-inline-size: 1"},
|
||||
];
|
||||
tests.forEach(function(t) {
|
||||
test(() => assert_false(isValidDeclaration(t.cssText)), 'Check that "' + t.cssText + '" is not valid in quirks mode');
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
"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