Tests: Import text-decoration WPT tests

This commit is contained in:
Sam Atkins
2024-11-29 14:45:21 +00:00
committed by Andreas Kling
parent 9453c25925
commit fa1e102f3c
Notes: github-actions[bot] 2024-11-30 10:02:42 +00:00
26 changed files with 650 additions and 0 deletions

View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: getComputedStyle().textDecorationColor</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-decoration-color-property">
<meta name="assert" content="Computed text-decoration-color is the computed color.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<style>
#container {
color: rgb(255, 0, 0);
text-decoration-color: currentcolor;
}
#target {
color: rgb(0, 255, 0);
}
</style>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
test_computed_value("text-decoration-color", "rgb(0, 0, 255)");
test_computed_value("text-decoration-color", "currentcolor", "rgb(0, 255, 0)");
test_computed_value("text-decoration-color", "inherit", "rgb(0, 255, 0)"); // currentcolor
</script>
</body>
</html>

View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Decoration Test: Parsing text-decoration-color with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-decoration-color-property">
<meta name="assert" content="text-decoration-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>
<script>
test_invalid_value("text-decoration-color", "auto");
test_invalid_value("text-decoration-color", "invert");
test_invalid_value("text-decoration-color", "50%");
test_invalid_value("text-decoration-color", "red green");
</script>

View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Decoration Test: Parsing text-decoration-color with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-decoration-color-property">
<meta name="assert" content="text-decoration-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>
<script>
test_valid_value("text-decoration-color", "currentcolor");
test_valid_value("text-decoration-color", "red");
test_valid_value("text-decoration-color", "rgba(10, 20, 30, 0.4)");
</script>

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: getComputedStyle().textDecoration</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-decoration-property">
<meta name="assert" content="text-decoration 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>
<style>
#target {
color: blue;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
'use strict';
const currentColor = "rgb(0, 0, 255)";
test_computed_value("text-decoration", "none", currentColor);
test_computed_value("text-decoration", "line-through", "line-through " + currentColor);
test_computed_value("text-decoration", "solid", currentColor);
test_computed_value("text-decoration", "currentcolor", currentColor);
test_computed_value("text-decoration", "double overline underline", "underline overline double " + currentColor);
test_computed_value("text-decoration", "underline overline line-through red", "underline overline line-through rgb(255, 0, 0)");
test_computed_value("text-decoration", "rgba(10, 20, 30, 0.4) dotted", "dotted rgba(10, 20, 30, 0.4)");
test_computed_value("text-decoration", "underline dashed rgb(0, 255, 0)");
// Add text-decoration-thickness in [css-text-decor-4].
test_computed_value("text-decoration", "auto", currentColor);
test_computed_value("text-decoration", "from-font", "from-font " + currentColor);
test_computed_value("text-decoration", "10px", "10px " + currentColor);
test_computed_value("text-decoration", "underline red from-font", "underline from-font rgb(255, 0, 0)");
</script>

View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Decoration Test: Parsing text-decoration with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration">
<meta name="assert" content="text-decoration supports only the grammar '<text-decoration-line> || <text-decoration-style> || <text-decoration-color>'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
<script>
test_invalid_value("text-decoration", "double overline underline dotted");
test_invalid_value("text-decoration", "red line-through green");
test_invalid_value("text-decoration", "overline blue underline");
</script>

View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: getComputedStyle().textDecorationLine</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-line-property">
<meta name="assert" content="text-decoration-line computed value is specified keyword(s).">
<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>
// none
test_computed_value("text-decoration-line", "none");
// underline || overline || line-through || blink
test_computed_value("text-decoration-line", "underline");
test_computed_value("text-decoration-line", "overline");
test_computed_value("text-decoration-line", "line-through");
test_computed_value("text-decoration-line", "blink");
test_computed_value("text-decoration-line", "underline overline");
test_computed_value("text-decoration-line", "underline line-through");
test_computed_value("text-decoration-line", "underline blink");
test_computed_value("text-decoration-line", "overline line-through");
test_computed_value("text-decoration-line", "overline blink");
test_computed_value("text-decoration-line", "line-through blink");
test_computed_value("text-decoration-line", "underline overline line-through");
test_computed_value("text-decoration-line", "underline overline blink");
test_computed_value("text-decoration-line", "underline line-through blink");
test_computed_value("text-decoration-line", "overline line-through blink");
test_computed_value("text-decoration-line", "underline overline line-through blink");
// spelling-error
test_computed_value("text-decoration-line", "spelling-error");
// grammar-error
test_computed_value("text-decoration-line", "grammar-error");
</script>

View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Decoration Test: Parsing text-decoration-line with invalid values</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-line-property">
<meta name="assert" content="text-decoration-line supports only the grammar 'none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
<script>
test_invalid_value("text-decoration-line", "auto");
test_invalid_value("text-decoration-line", "null");
test_invalid_value("text-decoration-line", "noone");
test_invalid_value("text-decoration-line", "under-line");
test_invalid_value("text-decoration-line", "over-line");
test_invalid_value("text-decoration-line", "linethrough");
test_invalid_value("text-decoration-line", "none underline");
test_invalid_value("text-decoration-line", "none spelling-error");
test_invalid_value("text-decoration-line", "underline underline");
test_invalid_value("text-decoration-line", "underline none overline");
test_invalid_value("text-decoration-line", "blink line-through blink");
test_invalid_value("text-decoration-line", "spelling-error overline");
test_invalid_value("text-decoration-line", "spelling-error grammar-error");
test_invalid_value("text-decoration-line", "blink underline line-through grammar-error");
</script>

View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Decoration Test: Parsing text-decoration-line with valid values</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-line-property">
<meta name="assert" content="text-decoration-line supports the full grammar 'none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
<script>
// none
test_valid_value("text-decoration-line", "none");
// underline || overline || line-through || blink
test_valid_value("text-decoration-line", "underline");
test_valid_value("text-decoration-line", "overline");
test_valid_value("text-decoration-line", "line-through");
test_valid_value("text-decoration-line", "blink");
test_valid_value("text-decoration-line", "underline overline");
test_valid_value("text-decoration-line", "overline underline", "underline overline");
test_valid_value("text-decoration-line", "underline line-through");
test_valid_value("text-decoration-line", "line-through underline", "underline line-through");
test_valid_value("text-decoration-line", "underline blink");
test_valid_value("text-decoration-line", "blink underline", "underline blink");
test_valid_value("text-decoration-line", "overline line-through");
test_valid_value("text-decoration-line", "line-through overline", "overline line-through");
test_valid_value("text-decoration-line", "overline blink");
test_valid_value("text-decoration-line", "blink overline", "overline blink");
test_valid_value("text-decoration-line", "line-through blink");
test_valid_value("text-decoration-line", "blink line-through", "line-through blink");
test_valid_value("text-decoration-line", "underline overline line-through");
test_valid_value("text-decoration-line", "underline line-through overline", "underline overline line-through");
test_valid_value("text-decoration-line", "overline underline line-through", "underline overline line-through");
test_valid_value("text-decoration-line", "overline line-through underline", "underline overline line-through");
test_valid_value("text-decoration-line", "line-through underline overline", "underline overline line-through");
test_valid_value("text-decoration-line", "line-through overline underline", "underline overline line-through");
test_valid_value("text-decoration-line", "underline overline blink");
test_valid_value("text-decoration-line", "underline blink overline", "underline overline blink");
test_valid_value("text-decoration-line", "overline underline blink", "underline overline blink");
test_valid_value("text-decoration-line", "overline blink underline", "underline overline blink");
test_valid_value("text-decoration-line", "blink underline overline", "underline overline blink");
test_valid_value("text-decoration-line", "blink overline underline", "underline overline blink");
test_valid_value("text-decoration-line", "underline line-through blink");
test_valid_value("text-decoration-line", "underline blink line-through", "underline line-through blink");
test_valid_value("text-decoration-line", "line-through underline blink", "underline line-through blink");
test_valid_value("text-decoration-line", "line-through blink underline", "underline line-through blink");
test_valid_value("text-decoration-line", "blink underline line-through", "underline line-through blink");
test_valid_value("text-decoration-line", "blink line-through underline", "underline line-through blink");
test_valid_value("text-decoration-line", "overline line-through blink");
test_valid_value("text-decoration-line", "overline blink line-through", "overline line-through blink");
test_valid_value("text-decoration-line", "line-through overline blink", "overline line-through blink");
test_valid_value("text-decoration-line", "line-through blink overline", "overline line-through blink");
test_valid_value("text-decoration-line", "blink overline line-through", "overline line-through blink");
test_valid_value("text-decoration-line", "blink line-through overline", "overline line-through blink");
test_valid_value("text-decoration-line", "underline overline line-through blink");
test_valid_value("text-decoration-line", "underline overline blink line-through", "underline overline line-through blink");
test_valid_value("text-decoration-line", "underline line-through overline blink", "underline overline line-through blink");
test_valid_value("text-decoration-line", "underline line-through blink overline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "underline blink overline line-through", "underline overline line-through blink");
test_valid_value("text-decoration-line", "underline blink line-through overline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "overline underline line-through blink", "underline overline line-through blink");
test_valid_value("text-decoration-line", "overline underline blink line-through", "underline overline line-through blink");
test_valid_value("text-decoration-line", "overline line-through underline blink", "underline overline line-through blink");
test_valid_value("text-decoration-line", "overline line-through blink underline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "overline blink underline line-through", "underline overline line-through blink");
test_valid_value("text-decoration-line", "overline blink line-through underline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "line-through underline overline blink", "underline overline line-through blink");
test_valid_value("text-decoration-line", "line-through underline blink overline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "line-through overline underline blink", "underline overline line-through blink");
test_valid_value("text-decoration-line", "line-through overline blink underline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "line-through blink underline overline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "line-through blink overline underline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "blink underline overline line-through", "underline overline line-through blink");
test_valid_value("text-decoration-line", "blink underline line-through overline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "blink overline underline line-through", "underline overline line-through blink");
test_valid_value("text-decoration-line", "blink overline line-through underline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "blink line-through underline overline", "underline overline line-through blink");
test_valid_value("text-decoration-line", "blink line-through overline underline", "underline overline line-through blink");
// spelling-error
test_valid_value("text-decoration-line", "spelling-error");
// grammar-error
test_valid_value("text-decoration-line", "grammar-error");
</script>

View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration: text-decoration sets longhands</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration">
<meta name="assert" content="text-decoration supports the full grammar '<text-decoration-line> || <text-decoration-style> || <text-decoration-color>'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/shorthand-testcommon.js"></script>
</head>
<body>
<script>
test_shorthand_value('text-decoration', 'overline from-font dotted green', {
'text-decoration-line': 'overline',
'text-decoration-thickness': 'from-font',
'text-decoration-style': 'dotted',
'text-decoration-color': 'green'
});
</script>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: getComputedStyle().textDecorationStyle</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-decoration-style-property">
<meta name="assert" content="text-decoration-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("text-decoration-style", "solid");
test_computed_value("text-decoration-style", "double");
test_computed_value("text-decoration-style", "dotted");
test_computed_value("text-decoration-style", "dashed");
test_computed_value("text-decoration-style", "wavy");
</script>
</body>
</html>

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Decoration Test: Parsing text-decoration-style with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-decoration-style-property">
<meta name="assert" content="text-decoration-style supports only the grammar 'solid | double | dotted | dashed | wavy'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
<script>
test_invalid_value("text-decoration-style", "groove");
test_invalid_value("text-decoration-style", "solid wavy");
</script>

View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Decoration Test: Parsing text-decoration-style with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-decoration-style-property">
<meta name="assert" content="text-decoration-style supports the full grammar 'solid | double | dotted | dashed | wavy'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
<script>
test_valid_value("text-decoration-style", "solid");
test_valid_value("text-decoration-style", "double");
test_valid_value("text-decoration-style", "dotted");
test_valid_value("text-decoration-style", "dashed");
test_valid_value("text-decoration-style", "wavy");
</script>

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Decoration Test: Parsing text-decoration with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration">
<meta name="assert" content="text-decoration supports the full grammar '<text-decoration-line> ||
<'text-decoration-thickness'> || <text-decoration-style> || <text-decoration-color>'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
<script>
test_valid_value("text-decoration", "none");
test_valid_value("text-decoration", "line-through");
test_valid_value("text-decoration", "solid", "none");
test_valid_value("text-decoration", "currentcolor", "none");
test_valid_value("text-decoration", "auto", "none");
test_valid_value("text-decoration", "from-font");
test_valid_value("text-decoration", "10px");
test_valid_value("text-decoration", "double overline underline", "underline overline double");
test_valid_value("text-decoration", "underline overline line-through red");
test_valid_value("text-decoration", "rgba(10, 20, 30, 0.4) dotted", "dotted rgba(10, 20, 30, 0.4)");
test_valid_value("text-decoration", "overline green from-font", "overline from-font green");
test_valid_value("text-decoration", "underline dashed green");
test_valid_value("text-decoration", "underline auto", "underline");
test_valid_value("text-decoration", "line-through 20px");
test_valid_value("text-decoration", "overline 3em");
</script>