mirror of
https://github.com/servo/servo.git
synced 2025-08-23 06:15:35 +01:00
Update web-platform-tests to revision 6fa9de7201cd41564d02c3edd62365aeb40e171b
This commit is contained in:
parent
60f1ffc5a7
commit
dc1f7ba3ec
124 changed files with 2052 additions and 849 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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");
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
|
@ -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{
|
|
@ -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{
|
|
@ -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{
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>',
|
Loading…
Add table
Add a link
Reference in a new issue