Added web-platform reftests for text-decoration-width
Differential Revision: https://phabricator.services.mozilla.com/D36270
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1558899
gecko-commit: 1c18f35d0163f1ac2b63ecc5c4bd4d7a63dedb02
gecko-integration-branch: central
gecko-reviewers: dholbert
diff --git a/css/css-text-decor/reference/text-decoration-width-001-notref.html b/css/css-text-decor/reference/text-decoration-width-001-notref.html
index 917930f..53a87c0 100644
--- a/css/css-text-decor/reference/text-decoration-width-001-notref.html
+++ b/css/css-text-decor/reference/text-decoration-width-001-notref.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<title>Non-reference case for text-decoration-width</title>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#main {
display: flex;
diff --git a/css/css-text-decor/reference/text-decoration-width-linethrough-001-ref.html b/css/css-text-decor/reference/text-decoration-width-green-rect-ref.html
similarity index 87%
rename from css/css-text-decor/reference/text-decoration-width-linethrough-001-ref.html
rename to css/css-text-decor/reference/text-decoration-width-green-rect-ref.html
index ae22b31..7bc3865 100644
--- a/css/css-text-decor/reference/text-decoration-width-linethrough-001-ref.html
+++ b/css/css-text-decor/reference/text-decoration-width-green-rect-ref.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<title>Reference case for text-decoration-width</title>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
div{
height: 1em;
diff --git a/css/css-text-decor/reference/text-decoration-width-scroll-001-ref.html b/css/css-text-decor/reference/text-decoration-width-scroll-001-ref.html
new file mode 100644
index 0000000..dd48684
--- /dev/null
+++ b/css/css-text-decor/reference/text-decoration-width-scroll-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Reference case for text-decoration-width</title>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+ <style>
+ #box{
+ font: 20px/1 Ahem;
+ border: black solid;
+ height: 5em;
+ width: 7em;
+ background-color: green;
+ }
+ </style>
+</head>
+<body>
+ <div>Test fails if there is a red line or scrollbar in the box</div>
+ <div id="box">
+ </div>
+</body>
+</html>
diff --git a/css/css-text-decor/reference/text-decoration-width-vertical-green-rect-ref.html b/css/css-text-decor/reference/text-decoration-width-vertical-green-rect-ref.html
new file mode 100644
index 0000000..ec7db18
--- /dev/null
+++ b/css/css-text-decor/reference/text-decoration-width-vertical-green-rect-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Reference case for text-decoration-width</title>
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+ <style>
+ #box{
+ font: 20px/1 Ahem;
+ background-color: green;
+ height: 4em;
+ width: 1em;
+ }
+ </style>
+</head>
+<body>
+ <p>Test fails if there is any red visible</p>
+ <div id="box"></div>
+</body>
+</html>
diff --git a/css/css-text-decor/text-decoration-width-001.html b/css/css-text-decor/text-decoration-width-001.html
index d331501..ab6dfca 100644
--- a/css/css-text-decor/text-decoration-width-001.html
+++ b/css/css-text-decor/text-decoration-width-001.html
@@ -8,12 +8,14 @@
<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="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#main {
display: flex;
}
div span {
text-decoration: green underline;
+ text-decoration-skip-ink: none;
font: 20px/1 Ahem;
color: transparent;
padding-right: 1em;
diff --git a/css/css-text-decor/text-decoration-width-linethrough-001.html b/css/css-text-decor/text-decoration-width-linethrough-001.html
index 6d96556..cc48da1 100644
--- a/css/css-text-decor/text-decoration-width-linethrough-001.html
+++ b/css/css-text-decor/text-decoration-width-linethrough-001.html
@@ -7,7 +7,8 @@
<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-linethrough-001-ref.html">
+ <link rel="match" href="reference/text-decoration-width-green-rect-ref.html">
+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
div{
overflow: hidden;
diff --git a/css/css-text-decor/text-decoration-width-overline-001.html b/css/css-text-decor/text-decoration-width-overline-001.html
new file mode 100644
index 0000000..21eb18b
--- /dev/null
+++ b/css/css-text-decor/text-decoration-width-overline-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<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">
+ <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="stylesheet" type="text/css" href="/fonts/ahem.css">
+ <style>
+ #box{
+ font: 20px/1 Ahem;
+ overflow: hidden;
+ height: 1em;
+ width: 4em;
+ background-color: red;
+ }
+ /*
+ * This is testing to ensure that the overline
+ * "grows up" and covers the red in the box
+ */
+ #text{
+ color: transparent;
+ position: relative;
+ top: 3em;
+ text-decoration: green overline;
+ text-decoration-skip-ink: none;
+ text-decoration-width: 4em;
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a wide green block, fails if there is any red visible</p>
+ <div id="box">
+ <div id="text">XXXXXXXXXXXXXXXXXXXX</div>
+ </div>
+</body>
+</html>
diff --git a/css/css-text-decor/text-decoration-width-scroll-001.html b/css/css-text-decor/text-decoration-width-scroll-001.html
new file mode 100644
index 0000000..f203bf1
--- /dev/null
+++ b/css/css-text-decor/text-decoration-width-scroll-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<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">
+ <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="stylesheet" type="text/css" href="/fonts/ahem.css">
+ <style>
+ #box{
+ font: 20px/1 Ahem;
+ border: black solid;
+ overflow-y: auto;
+ height: 5em;
+ width: 7em;
+ background-color: red;
+ }
+ /*
+ * Testing to make sure that increasing the width of
+ * of the text decoration does not create scrollable
+ * overflow
+ */
+ #text{
+ position: relative;
+ bottom: 1em;
+ color: transparent;
+ text-decoration: green underline;
+ text-decoration-skip-ink: none;
+ text-decoration-width: 8em;
+ }
+ </style>
+</head>
+<body>
+ <div>Test fails if there is a red line or scrollbar in the box</div>
+ <div id="box">
+ <div id="text">XXXXXXX</div>
+ </div>
+</body>
+</html>
diff --git a/css/css-text-decor/text-decoration-width-underline-001.html b/css/css-text-decor/text-decoration-width-underline-001.html
new file mode 100644
index 0000000..97ecc73
--- /dev/null
+++ b/css/css-text-decor/text-decoration-width-underline-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<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">
+ <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="stylesheet" type="text/css" href="/fonts/ahem.css">
+ <style>
+ #box{
+ font: 20px/1 Ahem;
+ overflow: hidden;
+ height: 1em;
+ width: 4em;
+ background-color: red;
+ }
+ /*
+ * This is testing to ensure that the underline
+ * "grows down" and covers the red in the box
+ */
+ #text{
+ color: transparent;
+ position: relative;
+ bottom: 3em;
+ text-decoration: green underline;
+ text-decoration-skip-ink: none;
+ text-decoration-width: 4em;
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a wide green block, fails if there is any red visible</p>
+ <div id="box">
+ <div id="text">XXXXXXXXXXXXXXXXXXXX</div>
+ </div>
+</body>
+</html>
diff --git a/css/css-text-decor/text-decoration-width-vertical-001.html b/css/css-text-decor/text-decoration-width-vertical-001.html
new file mode 100644
index 0000000..5b4ab5e
--- /dev/null
+++ b/css/css-text-decor/text-decoration-width-vertical-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<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">
+ <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="stylesheet" type="text/css" href="/fonts/ahem.css">
+ <style>
+ #box{
+ font: 20px/1 Ahem;
+ background-color: red;
+ height: 4em;
+ width: 1em;
+ overflow: hidden;
+ }
+ /*
+ * The underline is placed to the left of the text
+ * at the right edge of the #box scrollpart. It is
+ * 1.3 em away so that the entire text-decoration covers
+ * the vertical box. Its text-decoration should grow "out"
+ * away from the text, covering up the scrollport. We
+ * will use 1.5 em-wide decoration line to be sure the
+ * scrollport is still fully covered if there are small
+ * differences in the placement of the line.
+ */
+ #text{
+ color: transparent;
+ writing-mode: vertical-rl;
+ position: relative;
+ left: 1.3em;
+ text-decoration: green underline;
+ text-decoration-skip-ink: none;
+ text-decoration-width: 1.5em;
+ }
+ </style>
+</head>
+<body>
+ <p>Test fails if there is any red visible</p>
+ <div id="box"><div id="text">XXXX</div></div>
+</body>
+</html>
diff --git a/css/css-text-decor/text-decoration-width-vertical-002.html b/css/css-text-decor/text-decoration-width-vertical-002.html
new file mode 100644
index 0000000..cbe4b1f
--- /dev/null
+++ b/css/css-text-decor/text-decoration-width-vertical-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<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">
+ <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="stylesheet" type="text/css" href="/fonts/ahem.css">
+ <style>
+ #box{
+ font: 20px/1 Ahem;
+ background-color: red;
+ height: 4em;
+ width: 1em;
+ overflow: hidden;
+ }
+ /*
+ * The underline is placed to the right of the text
+ * at the left edge of the #box scrollpart. Its
+ * text-decoration should grow "out" away from the
+ * text, covering up the scrollport. We will use a
+ * 1.2 em-wide decoration line to be sure the
+ * scrollport is still fully covered if there are
+ * small differences in the placement of the line.
+ */
+ #text{
+ color: transparent;
+ writing-mode: sideways-lr;
+ position: relative;
+ right: 1em;
+ text-decoration: green underline;
+ text-decoration-skip-ink: none;
+ text-decoration-width: 1.2em;
+ }
+ </style>
+</head>
+<body>
+ <p>Test fails if there is any red visible</p>
+ <div id="box"><div id="text">XXXX</div></div>
+</body>
+</html>
