Update web-platform-tests to revision 9c2bea6dac36e36ba1f489d10c2be42160d8f34f

This commit is contained in:
WPT Sync Bot 2018-11-27 21:07:27 -05:00
parent 482923cec2
commit 5c371dd958
459 changed files with 10717 additions and 834 deletions

View file

@ -22,7 +22,7 @@
<div id="test"></div>
<script type="text/javascript">
var div = document.querySelector("#test");
var t = async_test(document.title);
var t = async_test();
t.step(function () {
div.style[headProp("border-image-repeat")] = "repeat-x";
div.style[headProp("height")] = "200px";

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().boxDecorationBreak</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-box-decoration-break">
<meta name="assert" content="box-decoration-break computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("box-decoration-break", "slice");
test_computed_value("box-decoration-break", "clone");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing box-decoration-break with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-box-decoration-break">
<meta name="assert" content="box-decoration-break supports only the grammar 'slice | clone'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("box-decoration-break", "auto");
test_invalid_value("box-decoration-break", "slice clone");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing box-decoration-break with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-box-decoration-break">
<meta name="assert" content="box-decoration-break supports the full grammar 'slice | clone'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("box-decoration-break", "slice");
test_valid_value("box-decoration-break", "clone");
</script>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().breakAfter</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-after">
<meta name="assert" content="break-after computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("break-after", "auto");
test_computed_value("break-after", "avoid");
test_computed_value("break-after", "avoid-page");
test_computed_value("break-after", "page");
test_computed_value("break-after", "left");
test_computed_value("break-after", "right");
test_computed_value("break-after", "recto");
test_computed_value("break-after", "verso");
test_computed_value("break-after", "avoid-column");
test_computed_value("break-after", "column");
test_computed_value("break-after", "avoid-region");
test_computed_value("break-after", "region");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-after with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-after">
<meta name="assert" content="break-after supports only the grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("break-after", "none");
test_invalid_value("break-after", "avoid region");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-after with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-after">
<meta name="assert" content="break-after supports the full grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("break-after", "auto");
test_valid_value("break-after", "avoid");
test_valid_value("break-after", "avoid-page");
test_valid_value("break-after", "page");
test_valid_value("break-after", "left");
test_valid_value("break-after", "right");
test_valid_value("break-after", "recto");
test_valid_value("break-after", "verso");
test_valid_value("break-after", "avoid-column");
test_valid_value("break-after", "column");
test_valid_value("break-after", "avoid-region");
test_valid_value("break-after", "region");
</script>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().breakBefore</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-before">
<meta name="assert" content="break-before computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("break-before", "auto");
test_computed_value("break-before", "avoid");
test_computed_value("break-before", "avoid-page");
test_computed_value("break-before", "page");
test_computed_value("break-before", "left");
test_computed_value("break-before", "right");
test_computed_value("break-before", "recto");
test_computed_value("break-before", "verso");
test_computed_value("break-before", "avoid-column");
test_computed_value("break-before", "column");
test_computed_value("break-before", "avoid-region");
test_computed_value("break-before", "region");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-before with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-before">
<meta name="assert" content="break-before supports only the grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("break-before", "none");
test_invalid_value("break-before", "avoid region");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-before with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-before">
<meta name="assert" content="break-before supports the full grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("break-before", "auto");
test_valid_value("break-before", "avoid");
test_valid_value("break-before", "avoid-page");
test_valid_value("break-before", "page");
test_valid_value("break-before", "left");
test_valid_value("break-before", "right");
test_valid_value("break-before", "recto");
test_valid_value("break-before", "verso");
test_valid_value("break-before", "avoid-column");
test_valid_value("break-before", "column");
test_valid_value("break-before", "avoid-region");
test_valid_value("break-before", "region");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().breakAfter</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-inside">
<meta name="assert" content="break-inside computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("break-inside", "auto");
test_computed_value("break-inside", "avoid");
test_computed_value("break-inside", "avoid-page");
test_computed_value("break-inside", "avoid-column");
test_computed_value("break-inside", "avoid-region");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-inside with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-inside">
<meta name="assert" content="break-inside supports only the grammar 'auto | avoid | avoid-page | avoid-column | avoid-region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("break-inside", "region");
test_invalid_value("break-inside", "auto avoid");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-inside with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-inside">
<meta name="assert" content="break-inside supports the full grammar 'auto | avoid | avoid-page | avoid-column | avoid-region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("break-inside", "auto");
test_valid_value("break-inside", "avoid");
test_valid_value("break-inside", "avoid-page");
test_valid_value("break-inside", "avoid-column");
test_valid_value("break-inside", "avoid-region");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().orphans</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans">
<meta name="assert" content="orphans computed value is specified integer.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("orphans", "1");
test_computed_value("orphans", "234");
test_computed_value("orphans", "calc(1 + 234)", "235");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing orphans with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans">
<meta name="assert" content="orphans supports only the grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("orphans", "auto");
test_invalid_value("orphans", "1 234");
test_invalid_value("orphans", "-234");
test_invalid_value("orphans", "-1");
test_invalid_value("orphans", "0");
</script>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing orphans with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans">
<meta name="assert" content="orphans supports the full grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("orphans", "1");
test_valid_value("orphans", "234");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().widows</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows">
<meta name="assert" content="widows computed value is specified integer.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("widows", "1");
test_computed_value("widows", "234");
test_computed_value("widows", "calc(1 + 234)", "235");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing widows with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows">
<meta name="assert" content="widows supports only the grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("widows", "auto");
test_invalid_value("widows", "1 234");
test_invalid_value("widows", "-234");
test_invalid_value("widows", "-1");
test_invalid_value("widows", "0");
</script>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing widows with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows">
<meta name="assert" content="widows supports the full grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("widows", "1");
test_valid_value("widows", "234");
</script>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Layout containment supress baseline in flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name=assert content="Flex items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the flex item's border box when they're baseline aligned.">
<style>
#flex {
display: inline-flex;
align-items: baseline;
background: red;
}
canvas {
background: green;
width: 50px;
height: 100px;
}
#item {
contain: layout;
color: transparent;
background: green;
width: 50px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="flex">
<canvas></canvas>
<div id="item">item</div>
</div>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Layout containment supress baseline in grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name=assert content="Grid items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the grid item's border box when they're baseline aligned.">
<style>
#grid {
display: inline-grid;
align-items: baseline;
background: red;
grid-auto-flow: column;
}
canvas {
background: green;
width: 50px;
height: 100px;
}
#item {
contain: layout;
color: transparent;
background: green;
width: 50px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<canvas></canvas>
<div id="item">item</div>
</div>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Layout containment supress baseline in table cells</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="match" href="reference/contain-layout-baseline-004-ref.html">
<meta name=assert content="Table cells with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the cell's border box when they're baseline aligned.">
<style>
#table {
display: table;
font: 100px/1 Ahem;
}
#table > * {
display: table-cell;
}
#first {
color: blue;
}
#second {
color: green;
contain: layout;
}
</style>
<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>
<div id="table">
<div id="first">X</div>
<div id="second">X</div>
</div>

View file

@ -31,6 +31,7 @@
{
background-color: white;
display: table-cell;
vertical-align: top;
}
div#contain

View file

@ -25,7 +25,7 @@
{
background-color: white;
padding: 0px;
vertical-align: baseline;
vertical-align: top;
}
td#contain

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Containment Module Level 1: getComputedValue().contain</title>
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
<meta name="assert" content="contain computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("contain", "none");
test_computed_value("contain", "strict");
test_computed_value("contain", "content");
test_computed_value("contain", "size");
test_computed_value("contain", "layout");
test_computed_value("contain", "style");
test_computed_value("contain", "paint");
test_computed_value("contain", "size layout");
test_computed_value("contain", "style paint");
test_computed_value("contain", "layout style paint");
test_computed_value("contain", "size layout style paint");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Containment Module Level 1: parsing contain with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
<meta name="assert" content="contain supports only the grammar 'none | strict | content | [ size || layout || style || paint ]'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("contain", "auto");
test_invalid_value("contain", "strict content");
test_invalid_value("contain", "size layout size");
test_invalid_value("contain", "paint content");
</script>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Containment Module Level 1: parsing contain with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
<meta name="assert" content="contain supports the full grammar 'none | strict | content | [ size || layout || style || paint ]'.">
<meta name="assert" content="contain serializes in canonical order.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("contain", "none");
test_valid_value("contain", "strict");
test_valid_value("contain", "content");
// [ size || layout || style || paint ]
test_valid_value("contain", "size");
test_valid_value("contain", "layout");
test_valid_value("contain", "style");
test_valid_value("contain", "paint");
test_valid_value("contain", "layout size", "size layout");
test_valid_value("contain", "paint style", "style paint");
test_valid_value("contain", "layout style paint");
test_valid_value("contain", "layout paint style size", "size layout style paint");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<style>
div {
display: inline-block;
font: 100px/1 Ahem;
width: 100px;
height: 100px;
}
#first {
color: blue;
position: relative;
top: 20px;
}
#second {
color: green;
}
</style>
<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>
<div id="first">X</div><div id="second">X</div>

View file

@ -18,7 +18,7 @@
<div id=log></div>
<div id=test></div>
<script type="text/javascript">
var t = async_test(document.title);
var t = async_test();
t.step(function () {
assert_equals(window.getComputedStyle(document.querySelector('div#test')).display, "flex", "Display value is");
});

View file

@ -18,7 +18,7 @@
<div id=log></div>
<div id=test></div>
<script type="text/javascript">
var t = async_test(document.title);
var t = async_test();
t.step(function () {
assert_equals(window.getComputedStyle(document.querySelector('div#test')).display, "inline-flex", "Display value is");
});

View file

@ -24,7 +24,7 @@
<div id=log></div>
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
<script type="text/javascript">
var t = async_test(document.title);
var t = async_test();
t.step(function () {
assert_equals(document.getElementById("test01").offsetTop, document.getElementById("test02").offsetTop, "Rectangle 1 and 2 have the same offsetTop value");
assert_equals((document.getElementById("test02").offsetLeft >= document.getElementById("test01").offsetLeft), false, "Rectangle 2 have a smaller offsetLeft value than 1.");

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: getComputedValue().columnCount</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-count">
<meta name="assert" content="column-count computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("column-count", "auto");
test_computed_value("column-count", "1");
test_computed_value("column-count", "234");
test_computed_value("column-count", "calc(1 + 234)", "235");
</script>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-count with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-count">
<meta name="assert" content="column-count supports only the grammar 'auto | <integer>'.">
<meta name="assert" content="column-count rejects non-positive integers.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("column-count", "none");
test_invalid_value("column-count", "2.5");
test_invalid_value("column-count", "-1");
test_invalid_value("column-count", "0");
test_invalid_value("column-count", "auto 1");
test_invalid_value("column-count", "1 234");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-count with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-count">
<meta name="assert" content="column-count supports the full grammar 'auto | <integer>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("column-count", "auto");
test_valid_value("column-count", "1");
test_valid_value("column-count", "234");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: getComputedValue().columnFill</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-fill">
<meta name="assert" content="column-fill computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("column-fill", "auto");
test_computed_value("column-fill", "balance");
test_computed_value("column-fill", "balance-all");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-fill with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-fill">
<meta name="assert" content="column-fill supports only the grammar 'auto | balance | balance-all'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("column-fill", "none");
test_invalid_value("column-fill", "auto balance");
</script>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-fill with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-fill">
<meta name="assert" content="column-fill supports the full grammar 'auto | balance | balance-all'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("column-fill", "auto");
test_valid_value("column-fill", "balance");
test_valid_value("column-fill", "balance-all");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: getComputedValue().columnGap</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-gap">
<meta name="assert" content="column-gap computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("column-gap", "normal");
test_computed_value("column-gap", "calc(10px + 0.5em)", "30px");
test_computed_value("column-gap", "calc(10px - 0.5em)", "0px");
test_computed_value("column-gap", "40%");
test_computed_value("column-gap", "calc(50% + 60px)");
</script>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-gap with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-gap">
<meta name="assert" content="column-gap supports only the grammar '<length-percentage> | normal'.">
<meta name="assert" content="column-gap rejects negative <length-percentage>.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("column-gap", "auto");
test_invalid_value("column-gap", "10");
test_invalid_value("column-gap", "10px 20px");
test_invalid_value("column-gap", "-1px");
test_invalid_value("column-gap", "-10%");
</script>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-gap with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-gap">
<meta name="assert" content="column-gap supports the full grammar '<length-percentage> | normal'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("column-gap", "normal");
test_valid_value("column-gap", "0", "0px");
test_valid_value("column-gap", "1px");
test_valid_value("column-gap", "calc(2em + 3ex)");
test_valid_value("column-gap", "4%");
test_valid_value("column-gap", "5vmin");
</script>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: getComputedValue().columnRuleColor</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color">
<meta name="assert" content="column-rule-color computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
color: lime;
}
</style>
<script>
test_computed_value("column-rule-color", "currentcolor", "rgb(0, 255, 0)");
test_computed_value("column-rule-color", "red", "rgb(255, 0, 0)");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-rule-color with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color">
<meta name="assert" content="column-rule-color supports only the grammar '<color>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("column-rule-color", "auto");
test_invalid_value("column-rule-color", "green blue");
test_invalid_value("column-rule-color", "green, blue");
</script>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-rule-color with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color">
<meta name="assert" content="column-rule-color supports the full grammar '<color>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("column-rule-color", "currentcolor");
test_valid_value("column-rule-color", "red");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-rule with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
<meta name="assert" content="column-rule supports only the grammar '<column-rule-width> || <column-rule-style> || <column-rule-color>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("column-rule", "reverse");
test_invalid_value("column-rule", "10");
test_invalid_value("column-rule", "red medium green");
</script>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: getComputedValue().columnRuleStyle</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style">
<meta name="assert" content="column-rule-style computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("column-rule-style", "none");
test_computed_value("column-rule-style", "hidden");
test_computed_value("column-rule-style", "dotted");
test_computed_value("column-rule-style", "dashed");
test_computed_value("column-rule-style", "solid");
test_computed_value("column-rule-style", "double");
test_computed_value("column-rule-style", "groove");
test_computed_value("column-rule-style", "ridge");
test_computed_value("column-rule-style", "inset");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-rule-style with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style">
<meta name="assert" content="column-rule-style supports only the <line-style> grammar 'none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("column-rule-style", "auto");
test_invalid_value("column-rule-style", "double dashed");
</script>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-rule-style with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style">
<meta name="assert" content="column-rule-style supports the full <line-style> grammar 'none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("column-rule-style", "none");
test_valid_value("column-rule-style", "hidden");
test_valid_value("column-rule-style", "dotted");
test_valid_value("column-rule-style", "dashed");
test_valid_value("column-rule-style", "solid");
test_valid_value("column-rule-style", "double");
test_valid_value("column-rule-style", "groove");
test_valid_value("column-rule-style", "ridge");
test_valid_value("column-rule-style", "inset");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-rule with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
<meta name="assert" content="column-rule supports the full grammar '<column-rule-width> || <column-rule-style> || <column-rule-color>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("column-rule", "10px");
test_valid_value("column-rule", "dotted");
test_valid_value("column-rule", "red");
test_valid_value("column-rule", "currentcolor hidden medium", "medium hidden currentcolor");
</script>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: getComputedValue().columnRuleWidth</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width">
<meta name="assert" content="column-rule-width computed value is absolute length.">
<meta name="assert" content="column-rule-width computed value is 0 if the column rule style is none or hidden.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
column-rule-style: dotted;
}
</style>
<script>
test_computed_value("column-rule-width", "calc(10px + 0.5em)", "30px");
test_computed_value("column-rule-width", "calc(10px - 0.5em)", "0px");
// thin, medium, thick computed values not yet tested
test(() => {
target.style.columnRuleWidth = '10px';
assert_equals(getComputedStyle(target).columnRuleWidth, '10px');
target.style.columnRuleStyle = 'none';
assert_equals(getComputedStyle(target).columnRuleWidth, '0px');
target.style.columnRuleStyle = 'outset';
assert_equals(getComputedStyle(target).columnRuleWidth, '10px');
target.style.columnRuleStyle = 'hidden';
assert_equals(getComputedStyle(target).columnRuleWidth, '0px');
target.style.columnRuleStyle = '';
}, 'column-rule-width is 0 when column-rule-style is none or hidden');
</script>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-rule-width with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width">
<meta name="assert" content="column-rule-width supports only the <line-width> grammar '<length> | thin | medium | thick'.">
<meta name="assert" content="column-rule-width rejects negative lengths.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("column-rule-width", "auto");
test_invalid_value("column-rule-width", "10");
test_invalid_value("column-rule-width", "-20px");
test_invalid_value("column-rule-width", "30%");
test_invalid_value("column-rule-width", "medium 40px");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-rule-width with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width">
<meta name="assert" content="column-rule-width supports the full <line-width> grammar '<length> | thin | medium | thick'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("column-rule-width", "thin");
test_valid_value("column-rule-width", "medium");
test_valid_value("column-rule-width", "thick");
test_valid_value("column-rule-width", "0", "0px");
test_valid_value("column-rule-width", "10px");
</script>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: getComputedValue().columnSpan</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-span">
<meta name="assert" content="column-span computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("column-span", "none");
test_computed_value("column-span", "all");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-span with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-span">
<meta name="assert" content="column-span supports only the grammar 'none | all'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("column-span", "auto");
test_invalid_value("column-span", "none all");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-span with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-span">
<meta name="assert" content="column-span supports the full grammar 'none | all'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("column-span", "none");
test_valid_value("column-span", "all");
</script>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: getComputedValue().columnWidth</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-width">
<meta name="assert" content="column-width computed value is the keyword auto or an absolute length.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("column-width", "auto");
test_computed_value("column-width", "calc(10px + 0.5em)", "30px");
test_computed_value("column-width", "calc(10px - 0.5em)", "0px");
</script>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-width with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-width">
<meta name="assert" content="column-width supports only the grammar 'auto | <length>'.">
<meta name="assert" content="column-width rejects negative lengths.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("column-width", "none");
test_invalid_value("column-width", "10");
test_invalid_value("column-width", "-20px");
test_invalid_value("column-width", "30%");
test_invalid_value("column-width", "auto 40px");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing column-width with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-width">
<meta name="assert" content="column-width supports the full grammar 'auto | <length>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("column-width", "auto");
test_valid_value("column-width", "0", "0px");
test_valid_value("column-width", "10px");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing columns with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns">
<meta name="assert" content="columns supports only the grammar '<column-width> || <column-count>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("columns", "none");
test_invalid_value("columns", "10px 20px");
test_invalid_value("columns", "10 20");
</script>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing columns with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns">
<meta name="assert" content="columns supports the full grammar '<column-width> || <column-count>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("columns", "2 10px", "10px 2");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().bottom</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-bottom">
<meta name="assert" content="bottom lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("bottom", "auto");
test_computed_value("bottom", "calc(10px + 0.5em)", "30px");
test_computed_value("bottom", "calc(10px - 0.5em)", "-10px");
test_computed_value("bottom", "-40%");
test_computed_value("bottom", "calc(50% + 60px)");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing bottom with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-bottom">
<meta name="assert" content="bottom supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("bottom", "min-content");
test_invalid_value("bottom", "60");
test_invalid_value("bottom", "10px 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing bottom with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-bottom">
<meta name="assert" content="bottom supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("bottom", "auto");
test_valid_value("bottom", "-10px");
test_valid_value("bottom", "-20%");
test_valid_value("bottom", "calc(2em + 3ex)");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().insetAfter</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-after">
<meta name="assert" content="inset-after lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("inset-after", "auto");
test_computed_value("inset-after", "calc(10px + 0.5em)", "30px");
test_computed_value("inset-after", "calc(10px - 0.5em)", "-10px");
test_computed_value("inset-after", "-40%");
test_computed_value("inset-after", "calc(50% + 60px)");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-after with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-after">
<meta name="assert" content="inset-after supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("inset-after", "min-content");
test_invalid_value("inset-after", "60");
test_invalid_value("inset-after", "10px 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-after with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-after">
<meta name="assert" content="inset-after supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("inset-after", "auto");
test_valid_value("inset-after", "-10px");
test_valid_value("inset-after", "-20%");
test_valid_value("inset-after", "calc(2em + 3ex)");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().insetBefore</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-before">
<meta name="assert" content="inset-before lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("inset-before", "auto");
test_computed_value("inset-before", "calc(10px + 0.5em)", "30px");
test_computed_value("inset-before", "calc(10px - 0.5em)", "-10px");
test_computed_value("inset-before", "-40%");
test_computed_value("inset-before", "calc(50% + 60px)");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-before with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-before">
<meta name="assert" content="inset-before supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("inset-before", "min-content");
test_invalid_value("inset-before", "60");
test_invalid_value("inset-before", "10px 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-before with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-before">
<meta name="assert" content="inset-before supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("inset-before", "auto");
test_valid_value("inset-before", "-10px");
test_valid_value("inset-before", "-20%");
test_valid_value("inset-before", "calc(2em + 3ex)");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().insetEnd</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-end">
<meta name="assert" content="inset-end lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("inset-end", "auto");
test_computed_value("inset-end", "calc(10px + 0.5em)", "30px");
test_computed_value("inset-end", "calc(10px - 0.5em)", "-10px");
test_computed_value("inset-end", "-40%");
test_computed_value("inset-end", "calc(50% + 60px)");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-end with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-end">
<meta name="assert" content="inset-end supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("inset-end", "min-content");
test_invalid_value("inset-end", "60");
test_invalid_value("inset-end", "10px 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-end with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-end">
<meta name="assert" content="inset-end supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("inset-end", "auto");
test_valid_value("inset-end", "-10px");
test_valid_value("inset-end", "-20%");
test_valid_value("inset-end", "calc(2em + 3ex)");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().insetStart</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-start">
<meta name="assert" content="inset-start lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("inset-start", "auto");
test_computed_value("inset-start", "calc(10px + 0.5em)", "30px");
test_computed_value("inset-start", "calc(10px - 0.5em)", "-10px");
test_computed_value("inset-start", "-40%");
test_computed_value("inset-start", "calc(50% + 60px)");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-start with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-start">
<meta name="assert" content="inset-start supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("inset-start", "min-content");
test_invalid_value("inset-start", "60");
test_invalid_value("inset-start", "10px 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing inset-start with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-start">
<meta name="assert" content="inset-start supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("inset-start", "auto");
test_valid_value("inset-start", "-10px");
test_valid_value("inset-start", "-20%");
test_valid_value("inset-start", "calc(2em + 3ex)");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().left</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-left">
<meta name="assert" content="left lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("left", "auto");
test_computed_value("left", "calc(10px + 0.5em)", "30px");
test_computed_value("left", "calc(10px - 0.5em)", "-10px");
test_computed_value("left", "-40%");
test_computed_value("left", "calc(50% + 60px)");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing left with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-left">
<meta name="assert" content="left supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("left", "min-content");
test_invalid_value("left", "60");
test_invalid_value("left", "10px 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing left with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-left">
<meta name="assert" content="left supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("left", "auto");
test_valid_value("left", "-10px");
test_valid_value("left", "-20%");
test_valid_value("left", "calc(2em + 3ex)");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().position</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-position">
<meta name="assert" content="position computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("position", "static");
test_computed_value("position", "relative");
test_computed_value("position", "absolute");
test_computed_value("position", "sticky");
test_computed_value("position", "fixed");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing position with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-position">
<meta name="assert" content="position supports only the grammar 'static | relative | absolute | sticky | fixed'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("position", "auto");
test_invalid_value("position", "static relative");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing position with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-position">
<meta name="assert" content="position supports the full grammar 'static | relative | absolute | sticky | fixed'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("position", "static");
test_valid_value("position", "relative");
test_valid_value("position", "absolute");
test_valid_value("position", "sticky");
test_valid_value("position", "fixed");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().right</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-right">
<meta name="assert" content="right lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("right", "auto");
test_computed_value("right", "calc(10px + 0.5em)", "30px");
test_computed_value("right", "calc(10px - 0.5em)", "-10px");
test_computed_value("right", "-40%");
test_computed_value("right", "calc(50% + 60px)");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing right with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-right">
<meta name="assert" content="right supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("right", "min-content");
test_invalid_value("right", "60");
test_invalid_value("right", "10px 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing right with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-right">
<meta name="assert" content="right supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("right", "auto");
test_valid_value("right", "-10px");
test_valid_value("right", "-20%");
test_valid_value("right", "calc(2em + 3ex)");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().top</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-top">
<meta name="assert" content="top lengths are made absolute.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("top", "auto");
test_computed_value("top", "calc(10px + 0.5em)", "30px");
test_computed_value("top", "calc(10px - 0.5em)", "-10px");
test_computed_value("top", "-40%");
test_computed_value("top", "calc(50% + 60px)");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing top with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-top">
<meta name="assert" content="top supports only the grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("top", "min-content");
test_invalid_value("top", "60");
test_invalid_value("top", "10px 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing top with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-top">
<meta name="assert" content="top supports the full grammar 'auto | <length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("top", "auto");
test_valid_value("top", "-10px");
test_valid_value("top", "-20%");
test_valid_value("top", "calc(2em + 3ex)");
</script>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: getComputedValue().zIndex</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-z-index">
<meta name="assert" content="z-index computed value is the keyword auto or an integer.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
position: absolute;
}
</style>
<script>
test_computed_value("z-index", "auto");
test_computed_value("z-index", "-1");
test_computed_value("z-index", "calc(3 - 2)", "1");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing z-index with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-z-index">
<meta name="assert" content="z-index supports only the grammar 'auto | <integer>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("z-index", "none");
test_invalid_value("z-index", "10px");
test_invalid_value("z-index", "0.5");
test_invalid_value("z-index", "calc(0.5)");
test_invalid_value("z-index", "auto 123");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioned Layout Module Level 3: parsing z-index with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-z-index">
<meta name="assert" content="z-index supports the full grammar 'auto | <integer>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("z-index", "auto");
test_valid_value("z-index", "-789");
test_valid_value("z-index", "0");
test_valid_value("z-index", "123");
</script>
</body>
</html>

View file

@ -0,0 +1,8 @@
<!doctype html>
<title>CSS Test Reference</title>
<p>
Should read "Pass" below
</p>
<p>
Pass
</p>

View file

@ -0,0 +1,14 @@
<!doctype html>
<title>CSS Test: text-transform ignores out of flow</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-text-transform">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=906369">
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=191807">
<link rel="match" href="text-transform-capitalize-033-ref.html">
<p>
Should read "Pass" below
</p>
<p style="text-transform: capitalize">
p<span style="position: absolute"></span>ass
</p>

View file

@ -101,9 +101,9 @@
// create all the tests we need
for (var i = 0; i < kANIMATABLE_CSS_PROPERTIES.length; i++) {
testsIntermediate.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " intermediate",
{ timeout: 2000, assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " is animatable" }));
{ assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " is animatable" }));
testsEnd.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " end",
{ timeout: 2000, assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " has correct value after transition's end" }));
{ assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " has correct value after transition's end" }));
}
// getComputedStyle helper

View file

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:h="http://www.w3.org/1999/xhtml"
width="800px" height="800px">
<title>Filter Effects Module Level 1: getComputedValue().floodOpacity</title>
<metadata>
<h:link rel="help" href="https://drafts.fxtf.org/filter-effects/#propdef-flood-opacity"/>
<h:meta name="assert" content="flood-opacity computed value is clamped to the range [0,1]."/>
</metadata>
<g id="target"></g>
<h:script src="/resources/testharness.js"/>
<h:script src="/resources/testharnessreport.js"/>
<h:script src="/css/support/computed-testcommon.js"/>
<script><![CDATA[
test_computed_value("flood-opacity", "-1", "0");
test_computed_value("flood-opacity", "0.5");
test_computed_value("flood-opacity", "3", "1");
]]></script>
</svg>

After

Width:  |  Height:  |  Size: 819 B

View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:h="http://www.w3.org/1999/xhtml"
width="800px" height="800px">
<title>Filter Effects Module Level 1: parsing flood-opacity with invalid values</title>
<metadata>
<h:link rel="help" href="https://drafts.fxtf.org/filter-effects/#propdef-flood-opacity"/>
<h:meta name="assert" content="flood-opacity supports only the grammar 'alpha-value'."/>
</metadata>
<g id="target"></g>
<h:script src="/resources/testharness.js"/>
<h:script src="/resources/testharnessreport.js"/>
<h:script src="/css/support/parsing-testcommon.js"/>
<script><![CDATA[
test_invalid_value("flood-opacity", "1.");
test_invalid_value("flood-opacity", "2 3");
]]></script>
</svg>

After

Width:  |  Height:  |  Size: 768 B

View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:h="http://www.w3.org/1999/xhtml"
width="800px" height="800px">
<title>Filter Effects Module Level 1: parsing flood-opacity with valid values</title>
<metadata>
<h:link rel="help" href="https://drafts.fxtf.org/filter-effects/#propdef-flood-opacity"/>
<h:meta name="assert" content="flood-opacity supports the full grammar 'alpha-value'."/>
</metadata>
<g id="target"></g>
<h:script src="/resources/testharness.js"/>
<h:script src="/resources/testharnessreport.js"/>
<h:script src="/css/support/parsing-testcommon.js"/>
<script><![CDATA[
test_valid_value("flood-opacity", "-1");
test_valid_value("flood-opacity", "0.5");
test_valid_value("flood-opacity", "3");
test_valid_value("flood-opacity", "-100%");
test_valid_value("flood-opacity", "50%");
test_valid_value("flood-opacity", "300%");
]]></script>
</svg>

After

Width:  |  Height:  |  Size: 931 B

View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Invalidation: :defined</title>
<link rel="help" href="https://drafts.csswg.org/selectors-4/">
<meta name="assert" content="This tests that the :defined selector is effective">
<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-defined">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container {
color: gray;
}
#a1:defined {
color: blue;
}
:defined + #b1 {
color: green;
}
:defined > #c1 {
color: red;
}
div + :defined + * #d1 {
color: yellow;
}
</style>
</head>
<body>
<section id="container">
<elucidate-late id="a1"></elucidate-late>
<div id="b1"></div>
<elucidate-late>
<div id="c1"></div>
</elucidate-late>
<div>
<div id="d1"></div>
</div>
</section>
<script>
const gray = "rgb(128, 128, 128)";
const blue = "rgb(0, 0, 255)";
const green = "rgb(0, 128, 0)";
const red = "rgb(255, 0, 0)";
const yellow = "rgb(255, 255, 0)";
function assertGray(a, b, c, d) {
assert_equals(getComputedStyle(a).color, gray);
assert_equals(getComputedStyle(b).color, gray);
assert_equals(getComputedStyle(c).color, gray);
assert_equals(getComputedStyle(d).color, gray);
}
function assertColorful(a, b, c, d) {
assert_equals(getComputedStyle(a).color, blue);
assert_equals(getComputedStyle(b).color, green);
assert_equals(getComputedStyle(c).color, red);
assert_equals(getComputedStyle(d).color, yellow);
}
class ElucidateLate extends HTMLElement {
constructor() {
super();
}
}
test(() => {
assertGray(a1, b1, c1, d1);
customElements.define('elucidate-late', ElucidateLate);
assertColorful(a1, b1, c1, d1);
}, ":defined selector is effective");
</script>
</body>
</html>

View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Selectors Invalidation: :enabled and :disabled</title>
<link rel="help" href="https://drafts.csswg.org/selectors-4/#enableddisabled">
<link rel="help" href="https://html.spec.whatwg.org/#enabling-and-disabling-form-controls:-the-disabled-attribute">
<meta name="assert" content="This tests that the :enabled and :disabled selectors are effective, and that the enabled/disabled status of an element is changed when updating its 'disabled' attribute by script.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
input {
position: absolute;
left: 200px;
top: 300px;
}
:enabled {
left: 100px;
}
:disabled {
top: 400px;
}
</style>
</head>
<body>
<input id="first" type="button" value="First"></input>
<input id="second" type="button" value="Second" disabled></input>
<script>
test(() => {
assert_equals(getComputedStyle(first).left, '100px');
assert_equals(getComputedStyle(first).top, '300px');
first.disabled = true;
assert_equals(getComputedStyle(first).left, '200px');
assert_equals(getComputedStyle(first).top, '400px');
}, "Element updates when disabled");
test(() => {
assert_equals(getComputedStyle(second).left, '200px');
assert_equals(getComputedStyle(second).top, '400px');
second.disabled = false;
assert_equals(getComputedStyle(second).left, '100px');
assert_equals(getComputedStyle(second).top, '300px');
}, "Element updates when enabled");
</script>
</body>
</html>

View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Selectors Invalidation: :first-child :last-child</title>
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-first-child-pseudo">
<meta name="assert" content="This tests that the :first-child and :last-child selectors are effective">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
color: black;
}
span:first-child {
color: blue;
}
span:last-child {
color: red;
}
</style>
</head>
<body>
<div id="target"><span>first-initially</span><span>last-initially</span></div>
<script>
'use strict';
const black = 'rgb(0, 0, 0)';
const blue = 'rgb(0, 0, 255)';
const red = 'rgb(255, 0, 0)';
test(() => {
const target = document.querySelector('#target');
const first = target.firstChild;
assert_equals(getComputedStyle(first).color, blue);
target.insertAdjacentHTML('afterbegin', '\n<span>foo</span><span>bar</span>');
assert_equals(getComputedStyle(target.firstElementChild).color, blue);
assert_equals(getComputedStyle(first).color, black);
while (target.firstElementChild !== first)
target.removeChild(target.firstElementChild);
assert_equals(getComputedStyle(first).color, blue);
}, 'Adding multiple nodes at once should invalidate :first-child correctly.');
test(() => {
const target = document.querySelector('#target');
const last = target.lastChild;
assert_equals(getComputedStyle(last).color, red);
target.insertAdjacentHTML('beforeend', '\n<span>foo</span><span>bar</span>');
assert_equals(getComputedStyle(target.lastChild).color, red);
assert_equals(getComputedStyle(last).color, black);
while (target.lastChild !== last)
target.removeChild(target.lastChild);
assert_equals(getComputedStyle(last).color, red);
}, 'Adding multiple nodes at once should invalidate :last-child correctly.');
</script>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<style>
.flexBaselineCheck {
display: flex;
border: 1px solid black;
height: 100px;
}
.flexBaselineCheck > * {
border: 2px solid teal;
/* In the testcase, the (baseline-aligned) items should all have their
bottom borders aligned with the 80px-tall canvas. In other words, their
bottom borders should all be 20px away from the bottom of their flex
container. Here in the reference case, we just use "flex-end" alignment
plus a hardcoded 20px margin-bottom to produce a precise reference
for what that should look like. */
align-self: flex-end;
margin-bottom: 20px;
}
canvas {
background: purple;
width: 20px;
height: 80px;
box-sizing: border-box;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.multicol {
column-count: 2;
}
</style>
</head>
<body>
<div class="flexBaselineCheck">
<canvas></canvas>
<div>block</div>
<fieldset><legend>leg</legend>fieldset</fieldset>
<div class="flex">flex</div>
<div class="grid">grid</div>
<div class="multicol">multi<br>col</div>
<details open><summary>summary</summary>details</details>
</div>
</body>
</html>

View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
<link rel="match" href="contain-layout-suppress-baseline-001-ref.html">
<style>
.flexBaselineCheck {
display: flex;
border: 1px solid black;
height: 100px;
}
.flexBaselineCheck > * {
contain: layout;
border: 2px solid teal;
align-self: baseline;
}
canvas {
background: purple;
width: 20px;
height: 80px;
box-sizing: border-box;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.multicol {
column-count: 2;
}
</style>
</head>
<body>
<div class="flexBaselineCheck">
<!-- This canvas just exists to establish a precise, far-down baseline
alignment position: -->
<canvas></canvas>
<!-- "contain:layout" should force all the elements below to behave as if
they have no baseline. That means they all should *synthesize* a
baseline from their border-box edge, in order to participate in flex
item baseline alignment (to honor the outer flex container's
"align-items:baseline"). So, the expectation here is that all of these
elements' border-bottom edges should be aligned. -->
<div>block</div>
<fieldset><legend>leg</legend>fieldset</fieldset>
<div class="flex">flex</div>
<div class="grid">grid</div>
<div class="multicol">multi<br>col</div>
<details open><summary>summary</summary>details</details>
</div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more