commit 7a28250b0fb54e67b44de756b226faaf69223494 parent 10e518416841488c41d53273a60dec3cae50e4e8 Author: Jonathan Kew <jkew@mozilla.com> Date: Mon, 27 Oct 2025 08:16:01 +0000 Bug 1995954 - Add some more WPT reftests for text-decoration-trim rendering. r=layout-jp-market-reviewers,AlaskanEmily Differential Revision: https://phabricator.services.mozilla.com/D269732 Diffstat:
16 files changed, 1314 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-017-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-017-ref.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; +} +div.inner > p { + margin: 0; + position: absolute; + inline-size: 12ch; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +p.ul { + color: transparent; +} +u { + text-decoration: 2px black underline; + text-underline-offset: 3px; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-018-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-018-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; +} +div.inner > p { + margin: 0; + position: absolute; + inline-size: 12ch; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +p.ul { + color: transparent; +} +u { + text-decoration: 2px black underline; + text-underline-offset: 3px; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case, +applied separately to each line:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c </u><br>ba<u>r </u></p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c </u><br>ba<u>r </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c </u><br>ba<u>r </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c </u><br>ba<u>r </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c </u><br>ba<u>r </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c </u><br>ba<u>r </u></p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-019-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-019-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + padding: 2ch; +} +div.inner > p { + margin: 0; + position: absolute; + inline-size: 8ch; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +p.ul { + color: transparent; +} +u { + text-decoration: 2px black underline; + text-underline-offset: 3px; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-020-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-020-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + padding: 1ch; +} +div.inner > p { + margin: 0; + position: absolute; + inline-size: 6ch; + margin: 2ch; + text-indent: 3ch; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +p.ul { + color: transparent; +} +u { + text-decoration: 2px black underline; + text-underline-offset: 3px; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-021-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-021-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + padding: 1ch; +} +div.inner > p { + margin: 0; + position: absolute; + inline-size: 6ch; + margin: 2ch; + text-indent: 3ch; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +div.inner > p.ul { + color: transparent; + inline-size: 8ch; +} +u { + text-decoration: 2px black underline; + text-underline-offset: 3px; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case, +applied separately to each line:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o </u><br>a <u>b c </u><br>ba<u>r </u></p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o </u><br>a <u>b c </u><br>ba<u>r </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o </u><br>a <u>b c </u><br>ba<u>r </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o </u><br>a <u>b c </u><br>ba<u>r </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o </u><br>a <u>b c </u><br>ba<u>r </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o </u><br>a <u>b c </u><br>ba<u>r </u></p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-022-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-022-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + padding: 1ch; +} +div.inner > p { + margin: 0; + position: absolute; + inline-size: 6ch; + margin: 2ch; + text-indent: 3ch hanging; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +p.ul { + color: transparent; +} +u { + text-decoration: 2px black underline; + text-underline-offset: 3px; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a b c bar </u></p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-023-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-023-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + padding: 1ch; +} +div.inner > p { + margin: 0; + position: absolute; + inline-size: 6ch; + margin: 2ch; + text-indent: 3ch hanging; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +div.inner > p.ul { + color: transparent; + inline-size: 8ch; +} +u { + text-decoration: 2px black underline; + text-underline-offset: 3px; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case, +applied separately to each line:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a </u><br>b <u>c </u><br>ba<u>r </u></p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a </u><br>b <u>c </u><br>ba<u>r </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a </u><br>b <u>c </u><br>ba<u>r </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a </u><br>b <u>c </u><br>ba<u>r </u></p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a </u><br>b <u>c </u><br>ba<u>r </u></p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + <p class=ul>fo<u>o a </u><br>b <u>c </u><br>ba<u>r </u></p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-024-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-024-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; + text-indent: 40px; +} +u { + text-decoration-color: black; +} +</style> + +<p>The underline for "brown" should be offset by 20px to the right:</p> + +<div> + <h1> + the quick brown fox + </h1> + <h1 style="left: 20px; color: transparent"> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-017.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-017.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<link rel="match" href="reference/text-decoration-trim-017-ref.html"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + text-decoration: underline; + text-decoration-trim: 2ch -2ch; + text-underline-offset: 3px; + text-decoration-thickness: 2px; +} +div.inner > p { + margin: 0; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-018.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-018.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<link rel="match" href="reference/text-decoration-trim-018-ref.html"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + text-decoration: underline; + text-decoration-trim: 2ch -2ch; + text-underline-offset: 3px; + text-decoration-thickness: 2px; + box-decoration-break: clone; +} +div.inner > p { + margin: 0; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case, +applied separately to each line:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-019.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-019.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<link rel="match" href="reference/text-decoration-trim-019-ref.html"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + text-decoration: underline; + text-decoration-trim: 2ch -2ch; + text-underline-offset: 3px; + text-decoration-thickness: 2px; + padding: 2ch; +} +div.inner > p { + margin: 0; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-020.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-020.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<link rel="match" href="reference/text-decoration-trim-020-ref.html"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + text-decoration: underline; + text-decoration-trim: 2ch -2ch; + text-underline-offset: 3px; + text-decoration-thickness: 2px; + padding: 1ch; +} +div.inner > p { + margin: 2ch; + text-indent: 3ch; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-021.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-021.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<link rel="match" href="reference/text-decoration-trim-021-ref.html"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + text-decoration: underline; + text-decoration-trim: 2ch -2ch; + text-underline-offset: 3px; + text-decoration-thickness: 2px; + padding: 1ch; + box-decoration-break: clone; +} +div.inner > p { + margin: 2ch; + text-indent: 3ch; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case, +applied separately to each line:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-022.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-022.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<link rel="match" href="reference/text-decoration-trim-022-ref.html"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + text-decoration: underline; + text-decoration-trim: 2ch -2ch; + text-underline-offset: 3px; + text-decoration-thickness: 2px; + padding: 1ch; +} +div.inner > p { + margin: 2ch; + text-indent: 3ch hanging; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-023.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-023.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + +<link rel="match" href="reference/text-decoration-trim-023-ref.html"> + +<style> +body { + background: white; + color: black; +} +div.outer { + display: inline-block; + vertical-align: top; + font: 10px/2 Ahem; + position: relative; + width: 12ch; + height: 12ch; + border: 1px solid gray; + margin: 1em; +} +div.inner { + position: absolute; + text-decoration: underline; + text-decoration-trim: 2ch -2ch; + text-underline-offset: 3px; + text-decoration-thickness: 2px; + padding: 1ch; + box-decoration-break: clone; +} +div.inner > p { + margin: 2ch; + text-indent: 3ch hanging; +} +p:dir(rtl) { + unicode-bidi: bidi-override; +} +</style> + +<p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case, +applied separately to each line:</p> + +<div class=outer> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-rl"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<br> + +<div class=outer style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> + +<div class=outer dir=rtl style="writing-mode: sideways-lr"> + <div class=inner> + <p>foo a b c bar</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-024.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-024.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-trim</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-trim-024-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; + text-indent: 40px; /* shifts the text and underline together */ +} +u { + text-decoration-color: black; + text-decoration-trim: 20px -20px; +} +</style> + +<p>The underline for "brown" should be offset by 20px to the right:</p> + +<div> + <h1> + the quick <u>brown</u> fox + </h1> +</div>