diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-text/white-space')
10 files changed, 483 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html new file mode 100644 index 0000000000..17e778165d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Level 3: glyphs can only hang at the edge of a line</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="Glyphs can't hang at the end of the line if there are non-hanging glyphs after them in the line"> + +<style> + div { + font: 25px/1 Ahem; + width: 5ch; + height: 4ch; + margin-left: -1ch; + background: + linear-gradient(red, red) 1ch 0 / 4ch 1ch no-repeat, + linear-gradient(green, green) 1ch 0 / 4ch 4ch no-repeat; + + text-align: right; + white-space: normal; + } + span { + color: transparent; + background: green; + } + .break-spaces { + white-space: break-spaces; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div><span>X　　</span><span class="break-spaces"> </span></div> + +<!-- + With white-space: normal, ideographic spaces (U+3000) are preserved but do + hang. But here they are followed by spaces with white-space: break-spaces, + which are preserved and never hang. Since only glyphs at the edge of a line + can hang, this prevents the ideographic spaces from hanging. +--> diff --git a/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html new file mode 100644 index 0000000000..6c486ac69c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Level 3: pre-wrap conditionality when not at line end</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="Spaces with white-space: pre-wrap always hang unconditionally when followed by other unconditionally hanging glyphs"> + +<style> + div { + font: 25px/1 Ahem; + width: 5ch; + height: 4ch; + margin-left: -1ch; + background: + linear-gradient(red, red) 4ch 0 / 1ch 4ch no-repeat, + linear-gradient(green, green) 1ch 0 / 3ch 4ch no-repeat; + + white-space: normal; + text-align: right; + color: green; + } + .pre-wrap { + white-space: pre-wrap; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div><span class="pre-wrap">X </span>　<br>X<br>X<br>X</div> + +<!-- + With white-space: pre-wrap, spaces hang conditionally when they are followed + by a forced line break. If instead they are followed by a glyph that hangs + unconditionally, such as the ideographic space (U+3000) with + white-space: normal, then they are not followed by a forced line break, even + if that hanging glyph might be, and thus hang unconditionally as well. +--> diff --git a/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html new file mode 100644 index 0000000000..b8f4df5967 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Level 3: unconditional hanging spaces don't hang before non-overflowing conditionals</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="Hanging can only happen at the end of a line, so unconditionally hanging spaces can only hang before conditionally hanging spaces if the latter would fully overflow"> + +<style> + div { + font: 25px/1 Ahem; + width: 4ch; + height: 4ch; + background: + linear-gradient(green, green) 0 1ch / 1ch 1ch no-repeat, + linear-gradient(green, green) 0 2ch / 2ch 1ch no-repeat, + linear-gradient(green, green) 1ch 3ch / 3ch 1ch no-repeat, + red; + + text-align: right; + white-space: normal; + color: green; + } + .pre-wrap { + white-space: pre-wrap; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div>XXXX　　<span class="pre-wrap"> </span><br> + XXX　　<span class="pre-wrap"> </span><br> + XX　　<span class="pre-wrap"> </span><br> + X　　<span class="pre-wrap"> </span></div> + +<!-- + With white-space: normal, an ideographic space (U+3000) hangs unconditionally, + as long as every glyph after it until the end of the line also hangs. + With white-space: pre-wrap, a sequence of spaces that is followed by a forced + line break (where the end of the block counts as a forced line break) hangs + conditionally, meaning that the part of it that doesn't fit in the line's + available width is the only one that hangs. (This is independent to whether it + would overflow the block's content area.) + + Therefore, unconditional hanging glyphs before such a sequence of conditional + hanging glyphs can only hang if the conditional sequence overflows the line's + available width. +--> diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html new file mode 100644 index 0000000000..d3574427b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> + +<style> +section { + width: 50ch; + font-family: monospace; +} +.test { color: blue; } +.ref { color: orange; } +.mis { color: magenta; } + +</style> + +<p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. + +<section class=test> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> + +<section class=ref> +<div> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +</div> +<div> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</div> +</section> + +<section class=mis> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html new file mode 100644 index 0000000000..74d6b392f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> + +<style> +section { + width: 50ch; + font-family: monospace; +} +.test, .ref { + text-wrap: balance; +} +.test { color: blue; } +.ref { color: orange; } +.mis { color: magenta; } + +</style> + +<p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. + +<section class=test> +<div> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +</div> +<div> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</div> +</section> + +<section class=ref> +<div> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +</div> +<div> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</div> +</section> + +<section class=mis> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html new file mode 100644 index 0000000000..6e01737173 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +body { + font: 20px/1 monospace; +} +.float { + float: left; + width: 15ch; + height: 150px; + background: silver; +} +.mask { + width: 15ch; + height: 150px; + background: green; + position: absolute; + left: 15ch; +} +.test { + width: 28ch; + background: red; +} +</style> +</head> + +<body> +<p>There should be no red:</p> +<div class="float"> + <div class="mask"></div> +</div> +<p class="test"> +Lorem ipsum dolor <span>sit</span> amet consectetur adipisicing elit. +</p> +</body> + diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html new file mode 100644 index 0000000000..f5494708ea --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS test: balancing and forced breaks</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> +<link rel='help' href='https://drafts.csswg.org/css-text-4/#text-wrap-style'> +<meta name="assert" content="Groups of lines separated by a forced line break are processed separately."> +<link rel="match" href="reference/text-wrap-balance-004-ref.html"> +<link rel="mismatch" href="reference/text-wrap-balance-004-misref.html"> + +<style> +section { + width: 50ch; + font-family: monospace; +} +.test, .ref { + text-wrap: balance; +} +.test { color: blue; } +.ref { color: orange; } +.mis { color: magenta; } + +</style> + +<p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. + +<section class=test> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> + +<section class=ref> +<div> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +</div> +<div> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</div> +</section> + +<section class=mis> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html new file mode 100644 index 0000000000..5343e84598 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<link rel="match" href="reference/text-wrap-balance-float-006-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1888449"> +<style> +body { + font: 20px/1 monospace; +} +.float { + float: left; + width: 15ch; + height: 150px; + background: silver; +} +.mask { + width: 15ch; + height: 150px; + background: green; + position: absolute; + left: 15ch; +} +.test { + width: 28ch; + text-wrap: balance; + background: red; +} +</style> +</head> + +<body> +<p>There should be no red:</p> +<div class="float"> + <div class="mask"></div> +</div> +<p class="test"> +Lorem ipsum dolor <span>sit</span> amet consectetur adipisicing elit. +</p> +</body> + diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html new file mode 100644 index 0000000000..b9d50684d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap"> +<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#container { + width: 20ch; +} +.balance { + text-wrap: balance; +} +</style> +<div id="container" dir="rtl" lang="AR"></div> +<script> +const container = document.getElementById('container'); +for (const text of [ + 'ينبغي تحقيق التوازن', + 'يجب ألا تؤدي موازنة التفاف النص إلى تغيير عدد الأسطر', + 'يجب ألا تؤدي موازنة التفاف النص إلى تغيير عدد الأسطر لهذه الفقرة النصية', + ]) { + const normal = document.createElement('div'); + const balance = document.createElement('div'); + normal.textContent = text; + balance.textContent = text; + balance.classList.add('balance'); + container.appendChild(normal); + container.appendChild(balance); + test(() => { + assert_equals(normal.offsetHeight, balance.offsetHeight); + }); +} +</script> diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html new file mode 100644 index 0000000000..0c0f6b55ca --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap"> +<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#container { + height: 15ch; + writing-mode: vertical-rl; +} +.balance { + text-wrap: balance; +} +</style> +<div id="container"></div> +<script> +const container = document.getElementById('container'); +for (const text of [ + '平衡应该', + '平衡文本换行不应改变行数', + '平衡文本换行不应改变该文本段落的行数', + ]) { + const normal = document.createElement('div'); + const balance = document.createElement('div'); + normal.textContent = text; + balance.textContent = text; + balance.classList.add('balance'); + container.appendChild(normal); + container.appendChild(balance); + test(() => { + assert_equals(normal.offsetWidth, balance.offsetWidth); + }); +} +</script> |