commit 4d6619cad13e6e16bf198c91bee879f13568677c parent 20ec807eff8b036bcb955840170697b1bde96b02 Author: Jonathan Kew <jkew@mozilla.com> Date: Thu, 30 Oct 2025 10:27:14 +0000 Bug 1997157 - Rename text-decoration-trim to -inset in WPT tests. r=layout-jp-market-reviewers,AlaskanEmily Differential Revision: https://phabricator.services.mozilla.com/D270567 Diffstat:
102 files changed, 2612 insertions(+), 2612 deletions(-)
diff --git a/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-inset-computed.html b/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-inset-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Decoration Test: Computed value of text-decoration-inset</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<meta name="assert" content="text-decoration-inset supports the full grammar '<length>{1,2} | auto'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#target { font: 20px Ahem; } +</style> +<body> +<div id="target"></div> +<script> +// Ensure Ahem is loaded so that the 'ch' unit resolves as expected; +// without this the load may be asynchronous, and the value will initially +// resolve against the default font instead. +document.fonts.load("20px Ahem").then(() => { + test_computed_value("text-decoration-inset", "0px"); + test_computed_value("text-decoration-inset", "0", "0px"); + test_computed_value("text-decoration-inset", "0px 0px", "0px"); + test_computed_value("text-decoration-inset", "0.5em", "10px"); + test_computed_value("text-decoration-inset", "-1em", "-20px"); + test_computed_value("text-decoration-inset", "-1ch -1ch", "-20px"); + test_computed_value("text-decoration-inset", "1px 2px"); + test_computed_value("text-decoration-inset", "1ch -1ch", "20px -20px"); + test_computed_value("text-decoration-inset", "calc(1em / 4) calc(-1ch)", "5px -20px"); + test_computed_value("text-decoration-inset", "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-inset-invalid.html b/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-inset-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Decoration Test: Parsing text-decoration-inset with invalid values</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<meta name="assert" content="text-decoration-inset supports the full grammar '<length>{1,2} | auto'."> +<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-inset", "none"); +test_invalid_value("text-decoration-inset", "normal"); +test_invalid_value("text-decoration-inset", "auto auto"); +test_invalid_value("text-decoration-inset", "0 auto"); +test_invalid_value("text-decoration-inset", "auto none"); +test_invalid_value("text-decoration-inset", "1px auto"); +test_invalid_value("text-decoration-inset", "auto -1px"); +test_invalid_value("text-decoration-inset", "10%"); +test_invalid_value("text-decoration-inset", "45deg"); +</script> diff --git a/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-inset-valid.html b/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-inset-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Decoration Test: Parsing text-decoration-inset with valid values</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<meta name="assert" content="text-decoration-inset supports the full grammar '<length>{1,2} | auto'."> +<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-inset", "0px"); +test_valid_value("text-decoration-inset", "0", "0px"); +test_valid_value("text-decoration-inset", "0px 0px", "0px"); +test_valid_value("text-decoration-inset", "0.5em"); +test_valid_value("text-decoration-inset", "-1em"); +test_valid_value("text-decoration-inset", "-1ch -1ch", "-1ch"); +test_valid_value("text-decoration-inset", "1px 2px"); +test_valid_value("text-decoration-inset", "1ch -1ch"); +test_valid_value("text-decoration-inset", "calc(1em / 4) calc(-1ch)", "calc(0.25em) calc(-1ch)"); +test_valid_value("text-decoration-inset", "auto"); +</script> diff --git a/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-trim-computed.html b/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-trim-computed.html @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Text Decoration Test: Computed value of text-decoration-trim</title> -<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> -<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> -<meta name="assert" content="text-decoration-trim supports the full grammar '<length>{1,2} | auto'."> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/computed-testcommon.js"></script> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> -<style> -#target { font: 20px Ahem; } -</style> -<body> -<div id="target"></div> -<script> -// Ensure Ahem is loaded so that the 'ch' unit resolves as expected; -// without this the load may be asynchronous, and the value will initially -// resolve against the default font instead. -document.fonts.load("20px Ahem").then(() => { - test_computed_value("text-decoration-trim", "0px"); - test_computed_value("text-decoration-trim", "0", "0px"); - test_computed_value("text-decoration-trim", "0px 0px", "0px"); - test_computed_value("text-decoration-trim", "0.5em", "10px"); - test_computed_value("text-decoration-trim", "-1em", "-20px"); - test_computed_value("text-decoration-trim", "-1ch -1ch", "-20px"); - test_computed_value("text-decoration-trim", "1px 2px"); - test_computed_value("text-decoration-trim", "1ch -1ch", "20px -20px"); - test_computed_value("text-decoration-trim", "calc(1em / 4) calc(-1ch)", "5px -20px"); - test_computed_value("text-decoration-trim", "auto"); -}); -</script> diff --git a/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-trim-invalid.html b/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-trim-invalid.html @@ -1,20 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Text Decoration Test: Parsing text-decoration-trim with invalid values</title> -<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> -<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> -<meta name="assert" content="text-decoration-trim supports the full grammar '<length>{1,2} | auto'."> -<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-trim", "none"); -test_invalid_value("text-decoration-trim", "normal"); -test_invalid_value("text-decoration-trim", "auto auto"); -test_invalid_value("text-decoration-trim", "0 auto"); -test_invalid_value("text-decoration-trim", "auto none"); -test_invalid_value("text-decoration-trim", "1px auto"); -test_invalid_value("text-decoration-trim", "auto -1px"); -test_invalid_value("text-decoration-trim", "10%"); -test_invalid_value("text-decoration-trim", "45deg"); -</script> diff --git a/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-trim-valid.html b/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-trim-valid.html @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Text Decoration Test: Parsing text-decoration-trim with valid values</title> -<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> -<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-trim"> -<meta name="assert" content="text-decoration-trim supports the full grammar '<length>{1,2} | auto'."> -<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-trim", "0px"); -test_valid_value("text-decoration-trim", "0", "0px"); -test_valid_value("text-decoration-trim", "0px 0px", "0px"); -test_valid_value("text-decoration-trim", "0.5em"); -test_valid_value("text-decoration-trim", "-1em"); -test_valid_value("text-decoration-trim", "-1ch -1ch", "-1ch"); -test_valid_value("text-decoration-trim", "1px 2px"); -test_valid_value("text-decoration-trim", "1ch -1ch"); -test_valid_value("text-decoration-trim", "calc(1em / 4) calc(-1ch)", "calc(0.25em) calc(-1ch)"); -test_valid_value("text-decoration-trim", "auto"); -</script> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-001-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-001-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; +} +</style> + +<p>The underline for "brown" should be offset by 10px to the right:</p> + +<div> + <h1> + the quick brown fox + </h1> + <h1 style="left: 10px; color: transparent"> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-002-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-002-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; +} +</style> + +<p>The underline for "brown" should be extended by 0.5em at each end:</p> + +<div> + <h1> + the quick brown fox + </h1> + <h1 style="left: .5em; color: transparent"> + the quick <u>brown</u> fox + </h1> + <h1 style="left: -.5em; color: transparent"> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-003-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-003-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +span { + display: inline-block; + position: relative; +} +u { + display: inline-block; + position: absolute; + text-decoration-color: black; + width: calc(100% - 0.5em); + overflow: clip; +} +</style> + +<p>The underline for "brown" should be trimmed by 0.25em at each end:</p> + +<div> + <h1> + the quick brown fox + </h1> + <h1 style="left: .25em; color: transparent"> + the quick <span><u>brown</u>brown</span> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-004-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-004-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; +} +h1 { + width: 15ch; +} +</style> + +<p>The underline for "ultra-quick brown" should be extended by .25em at each end, but not at the line-break:</p> + +<div> + <h1> + the <u>ultra-quick brown</u> fox + </h1> + <h1 style="left: -.25em; color: transparent"> + the <u>ultra</u>-quick brown fox + </h1> + <h1 style="left: .25em; color: transparent"> + the ultra-quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-005-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-005-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; +} +</style> + +<p>The underline for "ultra-quick brown" should be extended by .25em at each end; +super- and sub-scripts should be unaffected:</p> + +<div> + <h1> + the <u>ultra-<sup>quick</sup> b<sub>row</sub>n</u> fox + </h1> + <h1 style="left: -.25em; color: transparent"> + the <u>ultra</u>-<sup>quick</sup> b<sub>row</sub>n fox + </h1> + <h1 style="left: .25em; color: transparent"> + the ultra-<sup>quick</sup> b<sub>row</sub><u>n</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-006-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-006-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; +} +</style> + +<p>The underline for "ultra-quick brown" should be trimmed by .25em at each end; +super- and sub-scripts should be unaffected:</p> + +<div> + <h1> + the u<u>ltra-<sup>quick</sup> b<sub>ro</sub>w</u>n fox + </h1> + <h1 style="left: .25em; color: transparent"> + the <u>ultra</u>-<sup>quick</sup> b<sub>ro</sub>wn fox + </h1> + <h1 style="left: -.25em; color: transparent"> + the ultra-<sup>quick</sup> b<sub>ro</sub>w<u>n</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-007-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-007-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; + font-family: times new roman, serif; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-skip-ink: none; + text-decoration-color: black; +} +</style> + +<p>The underline for "جلدي brown" should be offset by 10px to the right, and not interrupted at the direction boundary:</p> + +<div> + <h1 style="text-underline-offset: 10px;"> + the جلدي brown fox + </h1> + <h1 style="left: 10px; color: transparent; text-underline-offset: 10px;"> + the <u>جلدي brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-008-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-008-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; + font-family: times new roman, serif; +} +div { + position: relative; +} +h1 { + position: absolute; +} +span { + display: inline-block; + position: relative; +} +u { + display: inline-block; + position: absolute; + text-decoration-skip-ink: none; + text-decoration-color: black; + width: calc(100% - 20px); + text-wrap-mode: nowrap; + overflow-x: clip; +} +</style> + +<p>The underline for "quick براؤن" should be trimmed by 10px at each end, and not interrupted at the direction boundary:</p> + +<div> + <h1> + the quick براؤن fox + </h1> + <h1 style="left: 10px; color: transparent"> + the <span><u>quick براؤن</u>quick براؤن</span> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-009-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-009-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; +} +u.green { + text-decoration-color: green; + text-underline-offset: 10px; +} +</style> + +<p>The underline for "ultra-quick brown" should be trimmed by .25em at each end; +the additional green underline for "quick" should be extended by .5em at each end:</p> + +<div> + <h1> + the ultra<u>-quick</u> brown fox + </h1> + <h1 style="left: .25em; color: transparent"> + the <u>ultra</u>-quick brown fox + </h1> + <h1 style="left: -.25em; color: transparent"> + the ultra-quick<u> brown</u> fox + </h1> + <h1 style="color: transparent"> + the ultra-<u class="green">quick</u> brown fox + </h1> + <h1 style="left: -.5em; color: transparent"> + the ultra-<u class="green">quick</u> brown fox + </h1> + <h1 style="left: .5em; color: transparent"> + the ultra-<u class="green">quick</u> brown fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-010-notref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-010-notref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: blue; + text-decoration-inset: auto; + text-underline-position: under; +} +</style> + +<p>The underlines for "石井" and for "艾俐俐" should be visibly separate:</p> + +<div> + <h1 lang="zh"> + <u>石井艾俐俐</u> + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-011-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-011-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; + font-family: times new roman, serif; +} +div { + position: relative; + margin-left: 10px; +} +h1 { + position: absolute; + line-height: 2; + width: 10em; +} +u.a { + text-decoration-color: blue; + text-underline-offset: 20px; +} +u.b { + text-decoration-color: green; + text-underline-offset: 20px; +} +span { + display: inline-block; + position: relative; +} +span u.a, span u.b { + display: inline-block; + width: calc(100% - 10px); + overflow-x: clip; + position: absolute; + left: 0; +} +span u.a2 { + left: auto; + right: 0; +} +span u.b2 { + width: 100%; +} +span u.b3 { + width: 100%; + left: -10px; +} +</style> + +<p>The underline of the first phrase should be trimmed by 10px at both ends; +the underline of the second should be offset by 10px to the left at both start and end:</p> + +<div lang="ar"> + <h1 dir="rtl">صِف<u class="a"> خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ </u>بَزَغَت —<br> يَحظى<u class="b"> الضَجيعُ بِها نَجلاءَ </u>مِعطارِ</h1> + <h1 dir="rtl" style="color: transparent"><span><u class="a">صِف</u>صِف</span> خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ <span><u class="a a2">بَزَغَت</u>بَزَغَت</span></h1> + <h1 dir="rtl" style="color: transparent">صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت —<br> + <span><u class="b">يَحظى</u>يَحظى</span> الضَجيعُ بِها نَجلاءَ <span><u class="b b2">مِعطارِ</u><u class="b b3">مِعطارِ</u>مِعطارِ</span></h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-012-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-012-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; + width: 10em; + height: 20em; + writing-mode: vertical-rl; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; +} +</style> + +<p>The underline for "brown" should be offset by 10px downwards:</p> + +<div> + <h1> + the quick brown fox + </h1> + <h1 style="top: 10px; color: transparent"> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-013-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-013-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; + width: 10em; + height: 20em; + writing-mode: sideways-lr; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; +} +</style> + +<p>The underline for "brown" should be offset by 10px upwards:</p> + +<div> + <h1> + the quick brown fox + </h1> + <h1 style="bottom: 10px; color: transparent"> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-014-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-014-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; + font-family: monospace; + width: 16ch; +} +u { + text-decoration-color: black; +} +</style> + +<p>The underline for "ultra-quick brown" should be extended by 0.5ch at each end of each fragment:</p> + +<div> + <h1> + the <u>ultra-quick brown</u> fox + </h1> + <h1 style="left: -.5ch; color: transparent"> + the <u>ul</u>tra-quick brown fox + </h1> + <h1 style="left: .5ch; color: transparent"> + the ultra-qui<u>ck</u> brown fox + </h1> + <h1 style="left: -.5ch; color: transparent"> + the ultra-quick <u>brown</u> fox + </h1> + <h1 style="left: .5ch; color: transparent"> + the ultra-quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-015-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-015-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +</style> + +<p>The underline for "brown" should be entirely trimmed away:</p> + +<div> + <h1> + the quick brown fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-016-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-016-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; +} +</style> + +<p>The underline for "brown" should be offset by 10em to the right, and lengthened by 2em:</p> + +<div> + <h1> + the quick brown fox + </h1> + <h1 style="left: 10em; color: transparent"> + the quick <u>brown</u> fox + </h1> + <h1 style="left: 12em; color: transparent"> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-017-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-017-ref.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-018-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-018-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-019-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-019-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-020-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-020-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-021-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-021-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-022-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-022-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-023-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-023-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-024-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-inset-024-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4 reference: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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/reference/text-decoration-trim-001-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-001-ref.html @@ -1,34 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; -} -</style> - -<p>The underline for "brown" should be offset by 10px to the right:</p> - -<div> - <h1> - the quick brown fox - </h1> - <h1 style="left: 10px; color: transparent"> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-002-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-002-ref.html @@ -1,37 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; -} -</style> - -<p>The underline for "brown" should be extended by 0.5em at each end:</p> - -<div> - <h1> - the quick brown fox - </h1> - <h1 style="left: .5em; color: transparent"> - the quick <u>brown</u> fox - </h1> - <h1 style="left: -.5em; color: transparent"> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-003-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-003-ref.html @@ -1,42 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -span { - display: inline-block; - position: relative; -} -u { - display: inline-block; - position: absolute; - text-decoration-color: black; - width: calc(100% - 0.5em); - overflow: clip; -} -</style> - -<p>The underline for "brown" should be trimmed by 0.25em at each end:</p> - -<div> - <h1> - the quick brown fox - </h1> - <h1 style="left: .25em; color: transparent"> - the quick <span><u>brown</u>brown</span> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-004-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-004-ref.html @@ -1,40 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; -} -h1 { - width: 15ch; -} -</style> - -<p>The underline for "ultra-quick brown" should be extended by .25em at each end, but not at the line-break:</p> - -<div> - <h1> - the <u>ultra-quick brown</u> fox - </h1> - <h1 style="left: -.25em; color: transparent"> - the <u>ultra</u>-quick brown fox - </h1> - <h1 style="left: .25em; color: transparent"> - the ultra-quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-005-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-005-ref.html @@ -1,38 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; -} -</style> - -<p>The underline for "ultra-quick brown" should be extended by .25em at each end; -super- and sub-scripts should be unaffected:</p> - -<div> - <h1> - the <u>ultra-<sup>quick</sup> b<sub>row</sub>n</u> fox - </h1> - <h1 style="left: -.25em; color: transparent"> - the <u>ultra</u>-<sup>quick</sup> b<sub>row</sub>n fox - </h1> - <h1 style="left: .25em; color: transparent"> - the ultra-<sup>quick</sup> b<sub>row</sub><u>n</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-006-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-006-ref.html @@ -1,38 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; -} -</style> - -<p>The underline for "ultra-quick brown" should be trimmed by .25em at each end; -super- and sub-scripts should be unaffected:</p> - -<div> - <h1> - the u<u>ltra-<sup>quick</sup> b<sub>ro</sub>w</u>n fox - </h1> - <h1 style="left: .25em; color: transparent"> - the <u>ultra</u>-<sup>quick</sup> b<sub>ro</sub>wn fox - </h1> - <h1 style="left: -.25em; color: transparent"> - the ultra-<sup>quick</sup> b<sub>ro</sub>w<u>n</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-007-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-007-ref.html @@ -1,36 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; - font-family: times new roman, serif; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-skip-ink: none; - text-decoration-color: black; -} -</style> - -<p>The underline for "جلدي brown" should be offset by 10px to the right, and not interrupted at the direction boundary:</p> - -<div> - <h1 style="text-underline-offset: 10px;"> - the جلدي brown fox - </h1> - <h1 style="left: 10px; color: transparent; text-underline-offset: 10px;"> - the <u>جلدي brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-008-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-008-ref.html @@ -1,45 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; - font-family: times new roman, serif; -} -div { - position: relative; -} -h1 { - position: absolute; -} -span { - display: inline-block; - position: relative; -} -u { - display: inline-block; - position: absolute; - text-decoration-skip-ink: none; - text-decoration-color: black; - width: calc(100% - 20px); - text-wrap-mode: nowrap; - overflow-x: clip; -} -</style> - -<p>The underline for "quick براؤن" should be trimmed by 10px at each end, and not interrupted at the direction boundary:</p> - -<div> - <h1> - the quick براؤن fox - </h1> - <h1 style="left: 10px; color: transparent"> - the <span><u>quick براؤن</u>quick براؤن</span> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-009-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-009-ref.html @@ -1,51 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; -} -u.green { - text-decoration-color: green; - text-underline-offset: 10px; -} -</style> - -<p>The underline for "ultra-quick brown" should be trimmed by .25em at each end; -the additional green underline for "quick" should be extended by .5em at each end:</p> - -<div> - <h1> - the ultra<u>-quick</u> brown fox - </h1> - <h1 style="left: .25em; color: transparent"> - the <u>ultra</u>-quick brown fox - </h1> - <h1 style="left: -.25em; color: transparent"> - the ultra-quick<u> brown</u> fox - </h1> - <h1 style="color: transparent"> - the ultra-<u class="green">quick</u> brown fox - </h1> - <h1 style="left: -.5em; color: transparent"> - the ultra-<u class="green">quick</u> brown fox - </h1> - <h1 style="left: .5em; color: transparent"> - the ultra-<u class="green">quick</u> brown fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-010-notref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-010-notref.html @@ -1,33 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: blue; - text-decoration-trim: auto; - text-underline-position: under; -} -</style> - -<p>The underlines for "石井" and for "艾俐俐" should be visibly separate:</p> - -<div> - <h1 lang="zh"> - <u>石井艾俐俐</u> - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-011-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-011-ref.html @@ -1,64 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; - font-family: times new roman, serif; -} -div { - position: relative; - margin-left: 10px; -} -h1 { - position: absolute; - line-height: 2; - width: 10em; -} -u.a { - text-decoration-color: blue; - text-underline-offset: 20px; -} -u.b { - text-decoration-color: green; - text-underline-offset: 20px; -} -span { - display: inline-block; - position: relative; -} -span u.a, span u.b { - display: inline-block; - width: calc(100% - 10px); - overflow-x: clip; - position: absolute; - left: 0; -} -span u.a2 { - left: auto; - right: 0; -} -span u.b2 { - width: 100%; -} -span u.b3 { - width: 100%; - left: -10px; -} -</style> - -<p>The underline of the first phrase should be trimmed by 10px at both ends; -the underline of the second should be offset by 10px to the left at both start and end:</p> - -<div lang="ar"> - <h1 dir="rtl">صِف<u class="a"> خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ </u>بَزَغَت —<br> يَحظى<u class="b"> الضَجيعُ بِها نَجلاءَ </u>مِعطارِ</h1> - <h1 dir="rtl" style="color: transparent"><span><u class="a">صِف</u>صِف</span> خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ <span><u class="a a2">بَزَغَت</u>بَزَغَت</span></h1> - <h1 dir="rtl" style="color: transparent">صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت —<br> - <span><u class="b">يَحظى</u>يَحظى</span> الضَجيعُ بِها نَجلاءَ <span><u class="b b2">مِعطارِ</u><u class="b b3">مِعطارِ</u>مِعطارِ</span></h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-012-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-012-ref.html @@ -1,37 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; - width: 10em; - height: 20em; - writing-mode: vertical-rl; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; -} -</style> - -<p>The underline for "brown" should be offset by 10px downwards:</p> - -<div> - <h1> - the quick brown fox - </h1> - <h1 style="top: 10px; color: transparent"> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-013-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-013-ref.html @@ -1,37 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; - width: 10em; - height: 20em; - writing-mode: sideways-lr; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; -} -</style> - -<p>The underline for "brown" should be offset by 10px upwards:</p> - -<div> - <h1> - the quick brown fox - </h1> - <h1 style="bottom: 10px; color: transparent"> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-014-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-014-ref.html @@ -1,45 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; - font-family: monospace; - width: 16ch; -} -u { - text-decoration-color: black; -} -</style> - -<p>The underline for "ultra-quick brown" should be extended by 0.5ch at each end of each fragment:</p> - -<div> - <h1> - the <u>ultra-quick brown</u> fox - </h1> - <h1 style="left: -.5ch; color: transparent"> - the <u>ul</u>tra-quick brown fox - </h1> - <h1 style="left: .5ch; color: transparent"> - the ultra-qui<u>ck</u> brown fox - </h1> - <h1 style="left: -.5ch; color: transparent"> - the ultra-quick <u>brown</u> fox - </h1> - <h1 style="left: .5ch; color: transparent"> - the ultra-quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-015-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-015-ref.html @@ -1,28 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -</style> - -<p>The underline for "brown" should be entirely trimmed away:</p> - -<div> - <h1> - the quick brown fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-016-ref.html b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-trim-016-ref.html @@ -1,37 +0,0 @@ -<!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"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; -} -</style> - -<p>The underline for "brown" should be offset by 10em to the right, and lengthened by 2em:</p> - -<div> - <h1> - the quick brown fox - </h1> - <h1 style="left: 10em; color: transparent"> - the quick <u>brown</u> fox - </h1> - <h1 style="left: 12em; color: transparent"> - the quick <u>brown</u> fox - </h1> -</div> 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 @@ -1,91 +0,0 @@ -<!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 @@ -1,92 +0,0 @@ -<!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 @@ -1,92 +0,0 @@ -<!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 @@ -1,94 +0,0 @@ -<!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 @@ -1,96 +0,0 @@ -<!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 @@ -1,94 +0,0 @@ -<!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 @@ -1,96 +0,0 @@ -<!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 @@ -1,35 +0,0 @@ -<!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-inset-001.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-001-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: 10px -10px; +} +</style> + +<p>The underline for "brown" should be offset by 10px to the right:</p> + +<div> + <h1> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-002.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-002-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: -0.5em; +} +</style> + +<p>The underline for "brown" should be extended by 0.5em at each end:</p> + +<div> + <h1> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-003.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-003-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: 0.25em; +} +</style> + +<p>The underline for "brown" should be trimmed by 0.25em at each end:</p> + +<div> + <h1> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-004.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-004.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-004-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; + width: 15ch; +} +u { + text-decoration-color: black; + text-decoration-inset: -0.25em; +} +</style> + +<p>The underline for "ultra-quick brown" should be extended by .25em at each end, but not at the line-break:</p> + +<div> + <h1> + the <u>ultra-quick brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-005.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-005.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-005-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: -0.25em; +} +</style> + +<p>The underline for "ultra-quick brown" should be extended by .25em at each end; +super- and sub-scripts should be unaffected:</p> + +<div> + <h1> + the <u>ultra-<sup>quick</sup> b<sub>row</sub>n</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-006.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-006.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-006-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: 0.25em; +} +</style> + +<p>The underline for "ultra-quick brown" should be trimmed by .25em at each end; +super- and sub-scripts should be unaffected:</p> + +<div> + <h1> + the <u>ultra-<sup>quick</sup> b<sub>ro</sub>wn</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-007.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-007.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-007-ref.html"> + +<style> +body { + background: white; + color: black; + font-family: times new roman, serif; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-skip-ink: none; + text-decoration-color: black; + text-decoration-inset: 10px -10px; + text-underline-offset: 10px; +} +</style> + +<p>The underline for "جلدي brown" should be offset by 10px to the right, and not interrupted at the direction boundary:</p> + +<div> + <h1> + the <u>جلدي brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-008.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-008.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-008-ref.html"> + +<style> +body { + background: white; + color: black; + font-family: times new roman, serif; +} +div { + position: relative; +} +h1 { + position: absolute; +} +span { + display: inline-block; + position: relative; +} +u { + text-decoration-skip-ink: none; + text-decoration-color: black; + text-decoration-inset: 10px; +} +</style> + +<p>The underline for "quick براؤن" should be trimmed by 10px at each end, and not interrupted at the direction boundary:</p> + +<div> + <h1> + the <u>quick براؤن</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-009.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-009.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-009-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: 0.25em; +} +u.green { + text-decoration-color: green; + text-underline-offset: 10px; + text-decoration-inset: -0.5em; +} +</style> + +<p>The underline for "ultra-quick brown" should be trimmed by .25em at each end; +the additional green underline for "quick" should be extended by .5em at each end:</p> + +<div> + <h1> + the <u>ultra-<u class="green">quick</u> brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-010.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-010.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="mismatch" href="reference/text-decoration-inset-010-notref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: blue; + text-decoration-inset: auto; + text-underline-position: under; +} +</style> + +<p>The underlines for "石井" and for "艾俐俐" should be visibly separate:</p> + +<div> + <h1 lang="zh"> + <u>石井</u><u>艾俐俐</u> + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-011.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-011.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-011-ref.html"> + +<style> +body { + background: white; + color: black; + font-family: times new roman, serif; +} +div { + position: relative; + margin-left: 10px; +} +h1 { + position: absolute; + line-height: 2; + width: 10em; +} +u.a { + text-decoration-color: blue; + text-underline-offset: 20px; + text-decoration-inset: 10px; +} +u.b { + text-decoration-color: green; + text-underline-offset: 20px; + text-decoration-inset: 10px -10px; +} +</style> + +<p>The underline of the first phrase should be trimmed by 10px at both ends; +the underline of the second should be offset by 10px to the left at both start and end:</p> + +<div lang="ar"> + <h1 dir="rtl"> + <u class="a">صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت</u> —<br> <u class="b">يَحظى الضَجيعُ بِها نَجلاءَ مِعطارِ</u> + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-012.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-012.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-012-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; + width: 10em; + height: 20em; + writing-mode: vertical-rl; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: 10px -10px; +} +</style> + +<p>The underline for "brown" should be offset by 10px downwards:</p> + +<div> + <h1> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-013.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-013.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-013-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; + width: 10em; + height: 20em; + writing-mode: sideways-lr; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: 10px -10px; +} +</style> + +<p>The underline for "brown" should be offset by 10px upwards:</p> + +<div> + <h1> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-014.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-014.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-014-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; + font-family: monospace; + width: 16ch; +} +u { + text-decoration-color: black; + text-decoration-inset: -0.5ch; + box-decoration-break: clone; +} +</style> + +<p>The underline for "ultra-quick brown" should be extended by 0.5ch at each end of each fragment:</p> + +<div> + <h1> + the <u>ultra-quick brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-015.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-015.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-015-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: 3em; +} +</style> + +<p>The underline for "brown" should be entirely trimmed away:</p> + +<div> + <h1> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-016.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-016.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-016-ref.html"> + +<style> +body { + background: white; + color: black; +} +div { + position: relative; +} +h1 { + position: absolute; +} +u { + text-decoration-color: black; + text-decoration-inset: 10em -12em; +} +</style> + +<p>The underline for "brown" should be offset by 10em to the right, and lengthened by 2em:</p> + +<div> + <h1> + the quick <u>brown</u> fox + </h1> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-017.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-017.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-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-inset: 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-inset-018.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-018.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-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-inset: 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-inset-019.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-019.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-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-inset: 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-inset-020.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-020.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-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-inset: 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-inset-021.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-021.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-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-inset: 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-inset-022.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-022.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-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-inset: 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-inset-023.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-023.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<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-inset-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-inset: 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-inset-024.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-inset-024.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Text Decoration 4: text-decoration-inset</title> + +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<link rel="match" href="reference/text-decoration-inset-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-inset: 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> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-001.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-001.html @@ -1,34 +0,0 @@ -<!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-001-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: 10px -10px; -} -</style> - -<p>The underline for "brown" should be offset by 10px to the right:</p> - -<div> - <h1> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-002.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-002.html @@ -1,34 +0,0 @@ -<!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-002-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: -0.5em; -} -</style> - -<p>The underline for "brown" should be extended by 0.5em at each end:</p> - -<div> - <h1> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-003.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-003.html @@ -1,34 +0,0 @@ -<!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-003-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: 0.25em; -} -</style> - -<p>The underline for "brown" should be trimmed by 0.25em at each end:</p> - -<div> - <h1> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-004.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-004.html @@ -1,35 +0,0 @@ -<!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-004-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; - width: 15ch; -} -u { - text-decoration-color: black; - text-decoration-trim: -0.25em; -} -</style> - -<p>The underline for "ultra-quick brown" should be extended by .25em at each end, but not at the line-break:</p> - -<div> - <h1> - the <u>ultra-quick brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-005.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-005.html @@ -1,35 +0,0 @@ -<!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-005-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: -0.25em; -} -</style> - -<p>The underline for "ultra-quick brown" should be extended by .25em at each end; -super- and sub-scripts should be unaffected:</p> - -<div> - <h1> - the <u>ultra-<sup>quick</sup> b<sub>row</sub>n</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-006.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-006.html @@ -1,35 +0,0 @@ -<!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-006-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: 0.25em; -} -</style> - -<p>The underline for "ultra-quick brown" should be trimmed by .25em at each end; -super- and sub-scripts should be unaffected:</p> - -<div> - <h1> - the <u>ultra-<sup>quick</sup> b<sub>ro</sub>wn</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-007.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-007.html @@ -1,37 +0,0 @@ -<!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-007-ref.html"> - -<style> -body { - background: white; - color: black; - font-family: times new roman, serif; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-skip-ink: none; - text-decoration-color: black; - text-decoration-trim: 10px -10px; - text-underline-offset: 10px; -} -</style> - -<p>The underline for "جلدي brown" should be offset by 10px to the right, and not interrupted at the direction boundary:</p> - -<div> - <h1> - the <u>جلدي brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-008.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-008.html @@ -1,40 +0,0 @@ -<!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-008-ref.html"> - -<style> -body { - background: white; - color: black; - font-family: times new roman, serif; -} -div { - position: relative; -} -h1 { - position: absolute; -} -span { - display: inline-block; - position: relative; -} -u { - text-decoration-skip-ink: none; - text-decoration-color: black; - text-decoration-trim: 10px; -} -</style> - -<p>The underline for "quick براؤن" should be trimmed by 10px at each end, and not interrupted at the direction boundary:</p> - -<div> - <h1> - the <u>quick براؤن</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-009.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-009.html @@ -1,40 +0,0 @@ -<!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-009-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: 0.25em; -} -u.green { - text-decoration-color: green; - text-underline-offset: 10px; - text-decoration-trim: -0.5em; -} -</style> - -<p>The underline for "ultra-quick brown" should be trimmed by .25em at each end; -the additional green underline for "quick" should be extended by .5em at each end:</p> - -<div> - <h1> - the <u>ultra-<u class="green">quick</u> brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-010.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-010.html @@ -1,35 +0,0 @@ -<!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="mismatch" href="reference/text-decoration-trim-010-notref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: blue; - text-decoration-trim: auto; - text-underline-position: under; -} -</style> - -<p>The underlines for "石井" and for "艾俐俐" should be visibly separate:</p> - -<div> - <h1 lang="zh"> - <u>石井</u><u>艾俐俐</u> - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-011.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-011.html @@ -1,45 +0,0 @@ -<!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-011-ref.html"> - -<style> -body { - background: white; - color: black; - font-family: times new roman, serif; -} -div { - position: relative; - margin-left: 10px; -} -h1 { - position: absolute; - line-height: 2; - width: 10em; -} -u.a { - text-decoration-color: blue; - text-underline-offset: 20px; - text-decoration-trim: 10px; -} -u.b { - text-decoration-color: green; - text-underline-offset: 20px; - text-decoration-trim: 10px -10px; -} -</style> - -<p>The underline of the first phrase should be trimmed by 10px at both ends; -the underline of the second should be offset by 10px to the left at both start and end:</p> - -<div lang="ar"> - <h1 dir="rtl"> - <u class="a">صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت</u> —<br> <u class="b">يَحظى الضَجيعُ بِها نَجلاءَ مِعطارِ</u> - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-012.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-012.html @@ -1,37 +0,0 @@ -<!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-012-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; - width: 10em; - height: 20em; - writing-mode: vertical-rl; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: 10px -10px; -} -</style> - -<p>The underline for "brown" should be offset by 10px downwards:</p> - -<div> - <h1> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-013.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-013.html @@ -1,37 +0,0 @@ -<!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-013-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; - width: 10em; - height: 20em; - writing-mode: sideways-lr; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: 10px -10px; -} -</style> - -<p>The underline for "brown" should be offset by 10px upwards:</p> - -<div> - <h1> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-014.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-014.html @@ -1,37 +0,0 @@ -<!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-014-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; - font-family: monospace; - width: 16ch; -} -u { - text-decoration-color: black; - text-decoration-trim: -0.5ch; - box-decoration-break: clone; -} -</style> - -<p>The underline for "ultra-quick brown" should be extended by 0.5ch at each end of each fragment:</p> - -<div> - <h1> - the <u>ultra-quick brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-015.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-015.html @@ -1,34 +0,0 @@ -<!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-015-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: 3em; -} -</style> - -<p>The underline for "brown" should be entirely trimmed away:</p> - -<div> - <h1> - the quick <u>brown</u> fox - </h1> -</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-016.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-trim-016.html @@ -1,34 +0,0 @@ -<!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-016-ref.html"> - -<style> -body { - background: white; - color: black; -} -div { - position: relative; -} -h1 { - position: absolute; -} -u { - text-decoration-color: black; - text-decoration-trim: 10em -12em; -} -</style> - -<p>The underline for "brown" should be offset by 10em to the right, and lengthened by 2em:</p> - -<div> - <h1> - 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 @@ -1,82 +0,0 @@ -<!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 @@ -1,84 +0,0 @@ -<!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 @@ -1,83 +0,0 @@ -<!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 @@ -1,84 +0,0 @@ -<!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 @@ -1,86 +0,0 @@ -<!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 @@ -1,84 +0,0 @@ -<!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 @@ -1,86 +0,0 @@ -<!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 @@ -1,35 +0,0 @@ -<!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>