mirror of
https://github.com/servo/servo.git
synced 2025-09-13 00:18:22 +01:00
Update web-platform-tests to revision 9c2bea6dac36e36ba1f489d10c2be42160d8f34f
This commit is contained in:
parent
482923cec2
commit
5c371dd958
459 changed files with 10717 additions and 834 deletions
|
@ -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";
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -31,6 +31,7 @@
|
|||
{
|
||||
background-color: white;
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div#contain
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
{
|
||||
background-color: white;
|
||||
padding: 0px;
|
||||
vertical-align: baseline;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td#contain
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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");
|
||||
});
|
||||
|
|
|
@ -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");
|
||||
});
|
||||
|
|
|
@ -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.");
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -0,0 +1,8 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<p>
|
||||
Should read "Pass" below
|
||||
</p>
|
||||
<p>
|
||||
Pass
|
||||
</p>
|
|
@ -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>
|
|
@ -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
|
||||
|
|
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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
Loading…
Add table
Add a link
Reference in a new issue