Update web-platform-tests to revision 6fa9de7201cd41564d02c3edd62365aeb40e171b

This commit is contained in:
WPT Sync Bot 2019-07-20 10:25:14 +00:00
parent 60f1ffc5a7
commit dc1f7ba3ec
124 changed files with 2052 additions and 849 deletions

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: getComputedStyle().alignContent</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
<meta name="assert" content="align-content 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("align-content", "normal");
test_computed_value("align-content", "baseline");
test_computed_value("align-content", "last baseline");
test_computed_value("align-content", "space-between");
test_computed_value("align-content", "space-around");
test_computed_value("align-content", "space-evenly");
test_computed_value("align-content", "stretch");
test_computed_value("align-content", "center");
test_computed_value("align-content", "start");
test_computed_value("align-content", "end");
test_computed_value("align-content", "flex-start");
test_computed_value("align-content", "flex-end");
test_computed_value("align-content", "unsafe end");
test_computed_value("align-content", "safe flex-start");
</script>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: getComputedStyle().alignItems</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
<meta name="assert" content="align-items 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("align-items", "normal");
test_computed_value("align-items", "stretch");
test_computed_value("align-items", "baseline");
test_computed_value("align-items", "last baseline");
test_computed_value("align-items", "center");
test_computed_value("align-items", "start");
test_computed_value("align-items", "end");
test_computed_value("align-items", "self-start");
test_computed_value("align-items", "self-end");
test_computed_value("align-items", "flex-start");
test_computed_value("align-items", "flex-end");
test_computed_value("align-items", "unsafe center");
test_computed_value("align-items", "safe self-end");
</script>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: getComputedStyle().alignSelf</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
<meta name="assert" content="align-self 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("align-self", "auto");
test_computed_value("align-self", "normal");
test_computed_value("align-self", "stretch");
test_computed_value("align-self", "baseline");
test_computed_value("align-self", "last baseline");
test_computed_value("align-self", "center");
test_computed_value("align-self", "start");
test_computed_value("align-self", "end");
test_computed_value("align-self", "self-start");
test_computed_value("align-self", "self-end");
test_computed_value("align-self", "flex-start");
test_computed_value("align-self", "flex-end");
test_computed_value("align-self", "unsafe center");
test_computed_value("align-self", "safe self-end");
</script>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: getComputedStyle().justifyContent</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
<meta name="assert" content="justify-content 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("justify-content", "normal");
test_computed_value("justify-content", "space-between");
test_computed_value("justify-content", "space-around");
test_computed_value("justify-content", "space-evenly");
test_computed_value("justify-content", "stretch");
test_computed_value("justify-content", "center");
test_computed_value("justify-content", "start");
test_computed_value("justify-content", "end");
test_computed_value("justify-content", "flex-start");
test_computed_value("justify-content", "flex-end");
test_computed_value("justify-content", "unsafe end");
test_computed_value("justify-content", "safe flex-start");
test_computed_value("justify-content", "left");
test_computed_value("justify-content", "unsafe right");
</script>
</body>
</html>

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: parsing justify-content with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-justify-3/#propdef-justify-content">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
<meta name="assert" content="justify-content supports only the grammar 'normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: parsing justify-content with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-justify-3/#propdef-justify-content">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
<meta name="assert" content="justify-content supports the full grammar 'normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: getComputedStyle().justifyItems</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<meta name="assert" content="justify-items computed value is as specified.">
<meta name="assert" content="justify-items legacy depends on inherited value.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
test_computed_value("justify-items", "normal");
test_computed_value("justify-items", "stretch");
test_computed_value("justify-items", "baseline");
test_computed_value("justify-items", "last baseline");
test_computed_value("justify-items", "center");
test_computed_value("justify-items", "start");
test_computed_value("justify-items", "end");
test_computed_value("justify-items", "self-start");
test_computed_value("justify-items", "self-end");
test_computed_value("justify-items", "flex-start");
test_computed_value("justify-items", "flex-end");
test_computed_value("justify-items", "unsafe center");
test_computed_value("justify-items", "safe self-end");
test_computed_value("justify-items", "right");
test_computed_value("justify-items", "safe left");
test_computed_value("justify-items", "legacy", "normal");
test_computed_value("justify-items", "legacy left");
test_computed_value("justify-items", "legacy right");
test_computed_value("justify-items", "legacy center");
test(() => {
const container = document.getElementById('container');
const target = document.getElementById('target');
target.style.justifyItems = 'legacy';
container.style.justifyItems = 'legacy left';
assert_equals(getComputedStyle(target).justifyItems, 'legacy left');
container.style.justifyItems = 'legacy right';
assert_equals(getComputedStyle(target).justifyItems, 'legacy right');
container.style.justifyItems = 'legacy center';
assert_equals(getComputedStyle(target).justifyItems, 'legacy center');
container.style.justifyItems = 'flex-end';
assert_equals(getComputedStyle(target).justifyItems, 'normal');
}, 'justify-items legacy depends on inherited value');
</script>
</body>
</html>

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: parsing justify-items with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-justify-3/#propdef-justify-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<meta name="assert" content="justify-items supports only the grammar 'normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: parsing justify-items with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-justify-3/#propdef-justify-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<meta name="assert" content="justify-items supports the full grammar 'normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: getComputedStyle().justifySelf</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
<meta name="assert" content="justify-self 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("justify-self", "auto");
test_computed_value("justify-self", "normal");
test_computed_value("justify-self", "stretch");
test_computed_value("justify-self", "baseline");
test_computed_value("justify-self", "last baseline");
test_computed_value("justify-self", "center");
test_computed_value("justify-self", "start");
test_computed_value("justify-self", "end");
test_computed_value("justify-self", "self-start");
test_computed_value("justify-self", "self-end");
test_computed_value("justify-self", "flex-start");
test_computed_value("justify-self", "flex-end");
test_computed_value("justify-self", "unsafe center");
test_computed_value("justify-self", "safe self-end");
test_computed_value("justify-self", "left");
test_computed_value("justify-self", "unsafe right");
</script>
</body>
</html>

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: parsing justify-self with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-justify-3/#propdef-justify-self">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
<meta name="assert" content="justify-self supports only the grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>CSS Box Alignment Level 3: parsing justify-self with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-justify-3/#propdef-justify-self">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
<meta name="assert" content="justify-self supports the full grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

View file

@ -19,13 +19,13 @@ test_valid_value("background-position-x", "x-end");
test_valid_value("background-position-x", "-20%");
test_valid_value("background-position-x", "10px");
test_valid_value("background-position-x", "0.5em");
test_valid_value("background-position-x", "calc(10px - 0.5em)");
test_valid_value("background-position-x", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
test_valid_value("background-position-x", "left -20%");
test_valid_value("background-position-x", "right 10px");
test_valid_value("background-position-x", "-20%, 10px");
test_valid_value("background-position-x", "center, left, right");
test_valid_value("background-position-x", "0.5em, x-start, x-end");
test_valid_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px");
test_valid_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px", "calc(-0.5em + 10px), left -20%, right 10px");
</script>
</body>
</html>

View file

@ -19,13 +19,13 @@ test_valid_value("background-position-y", "y-end");
test_valid_value("background-position-y", "-20%");
test_valid_value("background-position-y", "10px");
test_valid_value("background-position-y", "0.5em");
test_valid_value("background-position-y", "calc(10px - 0.5em)");
test_valid_value("background-position-y", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
test_valid_value("background-position-y", "top -20%");
test_valid_value("background-position-y", "bottom 10px");
test_valid_value("background-position-y", "-20%, 10px");
test_valid_value("background-position-y", "center, top, bottom");
test_valid_value("background-position-y", "0.5em, y-start, y-end");
test_valid_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px");
test_valid_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px", "calc(-0.5em + 10px), top -20%, top 10px");
</script>
</body>
</html>

View file

@ -2,6 +2,7 @@
<meta charset="utf-8">
<title>CSS container Layout Test Reference</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.container {
font: 10px/1 Ahem;

View file

@ -6,6 +6,7 @@
<link rel="match" href="grid-container-scrollbar-vertical-lr-001-ref.html">
<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
<link href="support/grid.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.grid {
font: 10px/1 Ahem;

View file

@ -2,6 +2,7 @@
<meta charset="utf-8">
<title>CSS container Layout Test Reference</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.container {
font: 10px/1 Ahem;

View file

@ -6,6 +6,7 @@
<link rel="match" href="grid-container-scrollbar-vertical-rl-001-ref.html">
<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
<link href="support/grid.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.grid {
font: 10px/1 Ahem;

View file

@ -19,7 +19,7 @@ test_valid_value("border-block", "double", ["double", "medium double"]);
test_valid_value("border-block-start", "green double thin", "thin double green");
test_valid_value("border-block-start", "green", ["green", "medium none green"]);
test_valid_value("border-block-end", "thin", ["thin", "thin none"]);
test_valid_value("border-block-end", "calc(10px - 0.5em) dotted red");
test_valid_value("border-block-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red");
</script>
</body>
</html>

View file

@ -13,14 +13,14 @@
<script>
// <length> | thin | medium | thick
test_valid_value("border-block-start-width", "10px");
test_valid_value("border-block-start-width", "calc(10px + 0.5em)");
test_valid_value("border-block-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)");
test_valid_value("border-block-start-width", "thick");
test_valid_value("border-block-start-width", "thin");
test_valid_value("border-block-end-width", "0", "0px");
test_valid_value("border-block-end-width", "calc(10px - 0.5em)");
test_valid_value("border-block-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
test_valid_value("border-block-end-width", "medium");
test_valid_value("border-block-width", "10px");
test_valid_value("border-block-width", "medium calc(10px + 0.5em)");
test_valid_value("border-block-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)");
test_valid_value("border-block-width", "10px 10px", "10px");
</script>
</body>

View file

@ -19,7 +19,7 @@ test_valid_value("border-inline", "double", ["double", "medium double"]);
test_valid_value("border-inline-start", "green double thin", "thin double green");
test_valid_value("border-inline-start", "green", ["green", "medium none green"]);
test_valid_value("border-inline-end", "thin", ["thin", "thin none"]);
test_valid_value("border-inline-end", "calc(10px - 0.5em) dotted red");
test_valid_value("border-inline-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red");
</script>
</body>
</html>

View file

@ -13,14 +13,14 @@
<script>
// <length> | thin | medium | thick
test_valid_value("border-inline-start-width", "10px");
test_valid_value("border-inline-start-width", "calc(10px + 0.5em)");
test_valid_value("border-inline-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)");
test_valid_value("border-inline-start-width", "thick");
test_valid_value("border-inline-start-width", "thin");
test_valid_value("border-inline-end-width", "0", "0px");
test_valid_value("border-inline-end-width", "calc(10px - 0.5em)");
test_valid_value("border-inline-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
test_valid_value("border-inline-end-width", "medium");
test_valid_value("border-inline-width", "10px");
test_valid_value("border-inline-width", "medium calc(10px + 0.5em)");
test_valid_value("border-inline-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)");
test_valid_value("border-inline-width", "10px 10px", "10px");
</script>
</body>

View file

@ -15,16 +15,16 @@
test_valid_value("inset-block-start", "auto");
test_valid_value("inset-block-end", "-10px");
test_valid_value("inset-inline-start", "-20%");
test_valid_value("inset-inline-end", "calc(10px - 0.5em)");
test_valid_value("inset-inline-end", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
test_valid_value("inset-block", "auto");
test_valid_value("inset-block", "-10px");
test_valid_value("inset-block", "calc(10px - 0.5em) -20%");
test_valid_value("inset-block", "calc(10px - 0.5em) -20%", "calc(-0.5em + 10px) -20%");
test_valid_value("inset-block", "auto auto", "auto");
test_valid_value("inset-inline", "-20%");
test_valid_value("inset-inline", "calc(10px - 0.5em)");
test_valid_value("inset-inline", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
test_valid_value("inset-inline", "-10px auto");
test_valid_value("inset-inline", "auto calc(10px + 0.5em)");
test_valid_value("inset-inline", "auto calc(10px + 0.5em)", "auto calc(0.5em + 10px)");
</script>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Append a block to an empty inline element</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
div {
height: 300px;
background-color: yellow;
}
</style>
<body>
<article id="column">
<span id="span"><div>block</div></span>
</article>
</body>
</html>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Append a block to an empty inline element</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cf">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
<link rel="match" href="multicol-dynamic-add-001-ref.html">
<meta name="assert" content="This test checks that the block appended into an inline element should perform correct block-in-inline splitting, and balance the block's height into three columns.">
<script>
function runTest() {
document.body.offsetHeight;
/* Append a block to the inline element. */
var block = document.createElement("div");
var text = document.createTextNode("block");
block.appendChild(text);
var span = document.getElementById("span");
span.appendChild(block);
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
div {
height: 300px;
background-color: yellow;
}
</style>
<body onload="runTest();">
<article id="column">
<span id="span"><!-- block will be added here. --></span>
</article>
</body>
</html>

View file

@ -54,6 +54,8 @@ assert_valid("<percentage>", "-9.3e3%");
assert_valid("<length-percentage>", "-54%");
assert_valid("<length-percentage>", "0");
assert_valid("<length-percentage>", "calc(-11px + 10.4%)");
assert_valid("<length>", "10vmin");
assert_valid("<percentage> | <length>+", "calc(100vh - 10px) 30px");
assert_valid("<number>", "-109");
assert_valid("<number>", "2.3e4");
@ -183,14 +185,12 @@ assert_invalid("<length>", "10%");
assert_invalid("<length>", "calc(5px + 10%)");
assert_invalid("<length>", "calc(5px * 3px / 6px)");
assert_invalid("<length>", "10em");
assert_invalid("<length>", "10vmin");
assert_invalid("<length>", "calc(4px + 3em)");
assert_invalid("<length>", "calc(4px + calc(8 * 2em))");
assert_invalid("<length>+", "calc(2ex + 16px)");
assert_invalid("<length>+", "10px calc(20px + 4rem)");
assert_invalid("<length>+", "");
assert_invalid("<length>#", "");
assert_invalid("<percentage> | <length>+", "calc(100vh - 10px) 30px");
assert_invalid("<length>", "10px;");
assert_invalid("<length-percentage>", "calc(2px + 10% + 7ex)");
assert_invalid("<percentage>", "0");

View file

@ -1,42 +1,73 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#principal-flow"/>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#principal-flow" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
html {
height: 3000px;
scroll-snap-type: inline mandatory;
width: 3000px;
}
#target {
position: absolute;
background-color: blue;
top: 1000px;
width: 100%;
left: 100px;
width: 100vw;
height: 100px;
}
</style>
<div id="target"></div>
<script>
const documentHeight = document.documentElement.clientHeight;
test(() => {
target.style.scrollSnapAlign = "end start";
window.scrollTo(0, 1000);
function cleanup() {
document.documentElement.style.scrollSnapType = "none";
target.style.scrollSnapAlign = "";
document.body.style.writingMode = "";
window.scrollTo(0, 0);
}
test(t => {
t.add_cleanup(cleanup);
document.documentElement.style.scrollSnapType = "y mandatory";
target.style.scrollSnapAlign = "end none";
window.scrollTo(0, 800);
// `target y (1000px)` + `target height (100px)` - document height.
assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight);
target.style.scrollSnapAlign = "";
window.scrollTo(0, 0);
assert_equals(document.scrollingElement.scrollLeft, 0, "x should not snap");
}, "The scroll-snap-type on the root element is applied");
test(() => {
document.body.style.writingMode = "vertical-rl";
target.style.scrollSnapAlign = "start end";
test(t => {
t.add_cleanup(cleanup);
window.scrollTo(0, 1000);
// `target y (1000px)` + `target height (100px)` - document height.
assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight);
}, "The writing-mode on the body is used");
</script>
document.documentElement.style.scrollSnapType = "inline mandatory";
document.body.style.writingMode = "vertical-lr";
target.style.scrollSnapAlign = "none end";
window.scrollTo(200, 800);
// Since inline axis is vertical, scrolling viewport vertically on block
// axis should snap.
assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight, "inline should snap");
// `target x (100px)`.
assert_equals(document.scrollingElement.scrollLeft, 200, "block should not snap");
}, "The writing-mode (vertical-lr) on the body is used");
test(t => {
t.add_cleanup(cleanup);
document.documentElement.style.scrollSnapType = "inline mandatory";
document.body.style.writingMode = "horizontal-tb"; // inline is horizontal
target.style.scrollSnapAlign = "none start";
window.scrollTo(200, 800);
assert_equals(document.scrollingElement.scrollLeft, 100, "inline should snap");
assert_equals(document.scrollingElement.scrollTop, 800, "block should not snap");
}, "The writing-mode (horizontal-tb) on the body is used ");
</script>

View file

@ -13,7 +13,7 @@
<script>
test_valid_value("border-spacing", "0px");
test_valid_value("border-spacing", "10px 20px");
test_valid_value("border-spacing", "calc(10px + 0.5em) calc(10px - 0.5em)");
test_valid_value("border-spacing", "calc(10px + 0.5em) calc(10px - 0.5em)", "calc(0.5em + 10px) calc(-0.5em + 10px)");
</script>
</body>
</html>

View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Non-reference case for text-decoration-width</title>
<title>Non-reference case for text-decoration-thickness</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#main {

View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Reference case for text-decoration-width</title>
<title>Reference case for text-decoration-thickness</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
div{

View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Reference case for text-decoration-width</title>
<title>Reference case for text-decoration-thickness</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#box{

View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Reference case for text-decoration-width</title>
<title>Reference case for text-decoration-thickness</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#box{

View file

@ -2,12 +2,12 @@
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration-width</title>
<meta name="assert" content="text-decoration-width: should affect the underline thickness">
<title>Test case for text-decoration-thickness</title>
<meta name="assert" content="text-decoration-thickness: should affect the underline thickness">
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<link rel="mismatch" href="reference/text-decoration-width-001-notref.html">
<link rel="mismatch" href="reference/text-decoration-thickness-001-notref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#main {
@ -21,7 +21,7 @@
padding-right: 1em;
}
#rightbox {
text-decoration-width: 2em;
text-decoration-thickness: 2em;
}
</style>
</head>

View file

@ -2,9 +2,9 @@
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-decoration-width computed values</title>
<title>CSS Text Decoration Test: parsing text-decoration-thickness computed values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<meta name="assert" content="text-decoration-width computed value is as specified.">
<meta name="assert" content="text-decoration-thickness 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>
@ -12,9 +12,9 @@
<body>
<div id="target"></div>
<script>
test_computed_value("text-decoration-width", "auto");
test_computed_value("text-decoration-width", "from-font");
test_computed_value("text-decoration-width", "calc(10px - 8px)", "2px");
test_computed_value("text-decoration-thickness", "auto");
test_computed_value("text-decoration-thickness", "from-font");
test_computed_value("text-decoration-thickness", "calc(10px - 8px)", "2px");
</script>
</body>
</html>

View file

@ -4,14 +4,14 @@
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" title="2.4 Text Decoration Width: the 'text-decoration-width' property"
<link rel="help" title="2.4 Text Decoration Width: the 'text-decoration-thickness' property"
href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property" />
</head>
<body>
<script>
test(function() {
assert_equals(getComputedStyle(document.body)["text-decoration-width"], "auto", "Must be set to value auto as initial value.");
}, "Initial value of text-decoration-width should be auto");
assert_equals(getComputedStyle(document.body)["text-decoration-thickness"], "auto", "Must be set to value auto as initial value.");
}, "Initial value of text-decoration-thickness should be auto");
</script>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-decoration-thickness with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<meta name="assert" content="text-decoration-thickness supports the following values: auto | from-font | <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_invalid_value("text-decoration-thickness", "otto");
test_invalid_value("text-decoration-thickness", "asdlflj");
test_invalid_value("text-decoration-thickness", "-10");
test_invalid_value("text-decoration-thickness", "60002020");
test_invalid_value("text-decoration-thickness", "!@#$%^&");
test_invalid_value("text-decoration-thickness", "10e2");
test_invalid_value("text-decoration-thickness", "from font");
test_invalid_value("text-decoration-thickness", "10%");
test_invalid_value("text-decoration-thickness", "-27%");
test_invalid_value("text-decoration-thickness", "calc(40% - 20px)");
test_invalid_value("text-decoration-thickness", "calc(100% - 40em)");
</script>
</body>
</html>

View file

@ -2,12 +2,12 @@
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration-width</title>
<meta name="assert" content="text-decoration-width; the width of the decoration line is increased">
<title>Test case for text-decoration-thickness</title>
<meta name="assert" content="text-decoration-thickness; the width of the decoration line is increased">
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<link rel="match" href="reference/text-decoration-width-green-rect-ref.html">
<link rel="match" href="reference/text-decoration-thickness-green-rect-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
div{
@ -22,7 +22,7 @@
* it will entirely cover the div's content-box (making it fully green) as long
* as the line-through is approximately centered, vertically.
*/
text-decoration-width: 1.1em;
text-decoration-thickness: 1.1em;
}
</style>
</head>

View file

@ -2,12 +2,12 @@
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration-width</title>
<meta name="assert" content="text-decoration-width: the width of the decoration line is increased">
<title>Test case for text-decoration-thickness</title>
<meta name="assert" content="text-decoration-thickness: the width of the decoration line is increased">
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<link rel="match" href="reference/text-decoration-width-green-rect-ref.html">
<link rel="match" href="reference/text-decoration-thickness-green-rect-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#box{
@ -27,7 +27,7 @@
top: 3em;
text-decoration: green overline;
text-decoration-skip-ink: none;
text-decoration-width: 4em;
text-decoration-thickness: 4em;
}
</style>
</head>

View file

@ -2,12 +2,12 @@
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration-width</title>
<meta name="assert" content="text-decoration-width: increased width text decorations don't create scrollable overflow">
<title>Test case for text-decoration-thickness</title>
<meta name="assert" content="text-decoration-thickness: increased width text decorations don't create scrollable overflow">
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<link rel="match" href="reference/text-decoration-width-scroll-001-ref.html">
<link rel="match" href="reference/text-decoration-thickness-scroll-001-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#box{
@ -29,7 +29,7 @@
color: transparent;
text-decoration: green underline;
text-decoration-skip-ink: none;
text-decoration-width: 8em;
text-decoration-thickness: 8em;
}
</style>
</head>

View file

@ -2,12 +2,12 @@
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration-width</title>
<meta name="assert" content="text-decoration-width: the width of the decoration line is increased">
<title>Test case for text-decoration-thickness</title>
<meta name="assert" content="text-decoration-thickness: the width of the decoration line is increased">
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<link rel="match" href="reference/text-decoration-width-green-rect-ref.html">
<link rel="match" href="reference/text-decoration-thickness-green-rect-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#box{
@ -27,7 +27,7 @@
bottom: 3em;
text-decoration: green underline;
text-decoration-skip-ink: none;
text-decoration-width: 4em;
text-decoration-thickness: 4em;
}
</style>
</head>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-decoration-thickness longhands with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<meta name="assert" content="text-decoration-thickness supports the following values: auto | from-font | <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("text-decoration-thickness", "auto");
test_valid_value("text-decoration-thickness", "from-font");
test_valid_value("text-decoration-thickness", "-10px");
test_valid_value("text-decoration-thickness", "2001em");
test_valid_value("text-decoration-thickness", "-49em");
test_valid_value("text-decoration-thickness", "53px");
test_valid_value("text-decoration-thickness", "calc(40em - 10px)");
test_valid_value("text-decoration-thickness", "calc(-50em + 13px)");
</script>
</body>
</html>

View file

@ -2,12 +2,12 @@
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration-width</title>
<meta name="assert" content="text-decoration-width: the width of the decoration line is increased">
<title>Test case for text-decoration-thickness</title>
<meta name="assert" content="text-decoration-thickness: the width of the decoration line is increased">
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<link rel="match" href="reference/text-decoration-width-vertical-green-rect-ref.html">
<link rel="match" href="reference/text-decoration-thickness-vertical-green-rect-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#box{
@ -34,7 +34,7 @@
left: 1.3em;
text-decoration: green underline;
text-decoration-skip-ink: none;
text-decoration-width: 1.5em;
text-decoration-thickness: 1.5em;
}
</style>
</head>

View file

@ -2,12 +2,12 @@
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration-width</title>
<title>Test case for text-decoration-thickness</title>
<meta name="assert" content="text-decoration:width; the width of the decoration line is increased">
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<link rel="match" href="reference/text-decoration-width-vertical-green-rect-ref.html">
<link rel="match" href="reference/text-decoration-thickness-vertical-green-rect-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#box{
@ -33,7 +33,7 @@
right: 1em;
text-decoration: green underline;
text-decoration-skip-ink: none;
text-decoration-width: 1.2em;
text-decoration-thickness: 1.2em;
}
</style>
</head>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-decoration-width with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<meta name="assert" content="text-decoration-width supports the following values: auto | from-font | <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_invalid_value("text-decoration-width", "otto");
test_invalid_value("text-decoration-width", "asdlflj");
test_invalid_value("text-decoration-width", "-10");
test_invalid_value("text-decoration-width", "60002020");
test_invalid_value("text-decoration-width", "!@#$%^&");
test_invalid_value("text-decoration-width", "10e2");
test_invalid_value("text-decoration-width", "from font");
test_invalid_value("text-decoration-width", "10%");
test_invalid_value("text-decoration-width", "-27%");
test_invalid_value("text-decoration-width", "calc(40% - 20px)");
test_invalid_value("text-decoration-width", "calc(100% - 40em)");
</script>
</body>
</html>

View file

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-decoration-width longhands with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<meta name="assert" content="text-decoration-width supports the following values: auto | from-font | <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("text-decoration-width", "auto");
test_valid_value("text-decoration-width", "from-font");
test_valid_value("text-decoration-width", "-10px");
test_valid_value("text-decoration-width", "2001em");
test_valid_value("text-decoration-width", "-49em");
test_valid_value("text-decoration-width", "53px");
test_valid_value("text-decoration-width", "calc(40em - 10px)");
test_valid_value("text-decoration-width", "calc(-50em + 13px)");
</script>
</body>
</html>

View file

@ -1,6 +1,6 @@
<!doctype html>
<meta charset="utf-8">
<title>'text-decoration-width' property</title>
<title>'text-decoration-thickness' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
@ -13,7 +13,7 @@
<script>
'use strict';
runPropertyTests('text-decoration-width', [
runPropertyTests('text-decoration-thickness', [
{ syntax: 'auto' },
{
syntax: '<length>',