diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-text/letter-spacing | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-text/letter-spacing')
49 files changed, 1924 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-200.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-200.html new file mode 100644 index 0000000000..2a8c7ede9a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-200.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at line endings (letters)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> +<link rel='match' href='reference/letter-spacing-200-ref.html'> +<meta name="assert" content="Letter spacing is not applied at the start/end of a line."> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + width: 5em; + border: solid blue; + margin: 1em; + float: left; } + span, .test { + letter-spacing: 1em; + } + .pre, .control p { + white-space: pre-wrap; + } + p { margin: 0; } +</style> + +<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div> + +<!-- Letter-spacing on Containing Block --> +<div class="contain"> + <!-- single line block test --> + <p class="test">1 2</p> + <!-- start/end line wrap test --> + <p class="test">12三456七89</p> + <!-- start/end forced line breaks test --> + <p class="test">123<br>4 5<br>678</p> + <p class="test pre">123
4 5
678</p> +</div> + +<!-- Line Endings Coinciding with Inline Element Boundary (Internal Break) --> +<div class="contain"> + <!-- single line block test --> + <p><span>1 2</span></p> + <!-- start/end line wrap test --> + <p>1 2 三<span>456</span>七 8 9</p> + <!-- start/end forced line breaks test --> + <p>1 2 3<span><br>4 5<br></span>6 7 8</p> + <p class="pre">1 2 3<span>
4 5
</span>6 7 8</p> +</div> + +<!-- Line Endings Coinciding with Inline Element Boundary (External Break) --> +<div class="contain"> + <!-- duplicate single line block test --> + <p><span>1 2</span></p> + <!-- start/end line wrap test --> + <p>1 2 三<span>456</span>七 8 9</p> + <!-- start/end forced line breaks test --> + <p>1 2 3<br><span>4 5</span><br>6 7 8</p> + <p class="pre">1 2 3
<span>4 5</span>
6 7 8</p> +</div> + +<!-- Control --> +<div class="contain control"> + <p>1 2</p> + <p>1 2 三<br>4 5 6<br>七 8 9</p> + <p>1 2 3<br>4 5<br>6 7 8</p> + <p>1 2 3<br>4 5<br>6 7 8</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-201.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-201.html new file mode 100644 index 0000000000..e9fdc2c896 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-201.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at line endings (spaces)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> +<link rel='match' href='reference/letter-spacing-201-ref.html'> +<meta name="assert" content="Letter spacing is not applied at the start/end of a line even on spaces."> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + /* Setup Boxes */ + font: 20px/1 Ahem; + width: 5em; + border: solid blue; + margin: 1em; + float: left; + } + span, .test { + letter-spacing: 1em; + } + p { + white-space: pre-wrap; + margin: 0; + } +</style> + +<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div> + +<!-- Letter-spacing on Containing Block --> +<div class="contain"> + <!-- single line block test --> + <p class="test"> x </p> + <!-- start/end line wrap test --> + <p class="test">xx ​ x ​ xx</p> + <!-- start/end forced line breaks test --> + <p class="test">xx <br> x <br> xx</p> + <p class="test">xx 
 x 
 xx</p> +</div> + +<!-- Line Endings Coinciding with Inline Element Boundary (Internal Break) --> +<div class="contain"> + <!-- single line block test --> + <p><span> x </span></p> + <!-- start/end line wrap test --> + <p>x x ​<span> x </span>​ x x</p> + <!-- start/end forced line breaks test --> + <p>x x <span><br> x <br></span> x x</p> + <p>x x <span>
 x 
</span> x x</p> +</div> + +<!-- Line Endings Coinciding with Inline Element Boundary (External Break) --> +<div class="contain"> + <!-- duplicate single line block test --> + <p><span> x </span></p> + <!-- start/end line wrap test --> + <p>x x <span>​ x ​</span> x x</p> + <!-- start/end forced line breaks test --> + <p>x x <br><span> x </span><br> x x</p> + <p>x x 
<span> x </span>
 x x</p> +</div> + +<!-- Control --> +<div class="contain"> + <p> x </p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-202.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-202.html new file mode 100644 index 0000000000..a163f98121 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-202.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing on zero-width characters</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> +<link rel='match' href='reference/letter-spacing-202-ref.html'> +<meta name="assert" content="Letter spacing ignores zero-width formatting characters."> +<style type='text/css'> + @import "/fonts/ahem.css"; + .test { letter-spacing: 1em; float: left; color: green; background: red; font: 20px/1 Ahem; } + .spacing { position: absolute; width: 1em; height: 2em; margin: 0 1em; background: green; } +</style> + +<div id='instructions'>Test passes if there is a green rectangle below and no red.</div> + +<div class="test"> +<div class="spacing"></div> +<!-- +-->​‌‍<!-- zwsp etc. +-->‎‏⁦⁧⁨‪‫‬‭‮⁩⁩<!-- bidi +--><!-- Arabic/compat +-->⁠⁡⁢⁣⁤<!-- math +-->x<!-- +-->​‌‍<!-- zwsp etc. +-->‎‏⁦⁧⁨‪‫‬‭‮⁩⁩<!-- bidi +--><!-- Arabic/compat +-->⁠⁡⁢⁣⁤<!-- math +-->x<!-- +-->​‌‍<!-- zwsp etc. +-->‎‏⁦⁧⁨‪‫‬‭‮⁩⁩<!-- bidi +--><!-- Arabic/compat +-->⁠⁡⁢⁣⁤<!-- math +--><br> +<!-- +-->​‌‍<!-- zwsp etc. +-->‎‏⁦⁧⁨‪‫‬‭‮⁩⁩<!-- bidi +--><!-- Arabic/compat +-->⁠⁡⁢⁣⁤<!-- math +-->xx<!-- +-->​‌‍<!-- zwsp etc. +-->‎‏⁦⁧⁨‪‫‬‭‮⁩⁩<!-- bidi +--><!-- Arabic/compat +-->⁠⁡⁢⁣⁤<!-- math +--> +</div></div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-203.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-203.html new file mode 100644 index 0000000000..eebb5d07da --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-203.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at element boundaries</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> +<link rel='match' href='reference/letter-spacing-203-ref.html'> +<meta name="assert" content="Letter spacing between two characters is given by their closest mutual ancestor."> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + border: solid blue; + margin: 1em; + float: left; } + .ls0 { + letter-spacing: 0; + } + .ls1 { + letter-spacing: 1em; + } + .ls3 { + letter-spacing: 3em; + } + .control p { + white-space: pre-wrap; + } + p { + letter-spacing: 0; + margin: 0; + word-break: break-all; + } +</style> + +<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div> + +<div class="contain"> + <!-- middle owned by containing block: simple --> + <p class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></p> + <p><span class="ls1">AAA</span><span class="ls1">BBB</span></p> + <!-- middle owned by containing block: double nesting --> + <p><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></p> + <p><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></p> + <!-- middle owned by inline: simple --> + <p><span class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></span></p> + <p><span><span class="ls1">AAA</span><span class="ls1">BBB</span></span></p> + <!-- middle owned by inline: double nesting --> + <p><span><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></span></p> + <p><span class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></span></p> + <!-- middle containing space --> + <p class="ls1"><span class="ls0">AAA</span> <span class="ls0">BBB</span></p> + <p><span class="ls3"><span class="ls1"><span class="ls0">AAA</span> </span><span class="ls1">BBB</span></span></p> +</div> + +<div class="contain control"> + <!-- middle owned by containing block: simple --> + <p>AAA BBB</p> + <p>A A AB B B</p> + <!-- middle owned by containing block: double nesting --> + <p>AAAB B B</p> + <p>A A AB B B</p> + <!-- middle owned by inline: simple --> + <p>AAA BBB</p> + <p>A A AB B B</p> + <!-- middle owned by inline: double nesting --> + <p>AAAB B B</p> + <p>A A A B B B</p> + <!-- middle containing space --> + <p>AAA BBB</p> + <p>AAA B B B</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-204.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-204.html new file mode 100644 index 0000000000..962048420a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-204.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at element boundaries</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> +<link rel='match' href='reference/letter-spacing-204-ref.html'> +<meta name="assert" content="Letter spacing is not applied between atomic inlines, but is applied between a (run of) atomic inline(s) and an adjacent letter."> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + border: solid blue; + margin: 1em; + float: left; } + .ls1 { + letter-spacing: 1em; + } + .block, .table, .flex, .grid { + display: inline-block; + width: 15px; + height: 15px; + background: orange; + } + .table { + display: inline-table; + } + .flex { + display: inline-flex; + } + .grid { + display: inline-grid; + } + .control p { + white-space: pre-wrap; + } + p { + letter-spacing: 0; + margin: 0; + } + span:not([class]) { + padding-top: 1em; + } +</style> + +<div id='instructions'>Test passes if the pattern is identical in all blue boxes.</div> + +<div class="contain"> + <p class="ls1">A<img src="support/swatch-orange.png"><img src="support/swatch-orange.png">D</p> + <p class="ls1">A<img class="block" src="support/swatch-orange.png"><img class="block" src="support/swatch-orange.png">D</p> + <p class="ls1">A<span class="block"></span><span class="block"></span>D</p> + <p class="ls1">A<span class="table"></span><span class="block"></span>D</p> + <p class="ls1">A<span class="flex"></span><span class="block"></span>D</p> + <p class="ls1">A<span class="grid"></span><span class="block"></span>D</p> +</div> + +<div class="contain"> + <p class="ls1">A<span><img src="support/swatch-orange.png"></span><img src="support/swatch-orange.png">D</p> + <p class="ls1">A<span><img class="block" src="support/swatch-orange.png"></span><img class="block" src="support/swatch-orange.png">D</p> + <p class="ls1">A<span><span class="block"></span></span><span class="block"></span>D</p> + <p class="ls1">A<span><span class="table"></span></span><span class="block"></span>D</p> + <p class="ls1">A<span><span class="flex"></span></span><span class="block"></span>D</p> + <p class="ls1">A<span><span class="grid"></span></span><span class="block"></span>D</p> +</div> + +<div class="contain"> + <p class="ls1"><span>A</span><img src="support/swatch-orange.png"><span><img src="support/swatch-orange.png"></span>D</p> + <p class="ls1"><span>A</span><img class="block" src="support/swatch-orange.png"><span><img class="block" src="support/swatch-orange.png"></span>D</p> + <p class="ls1"><span>A</span><span class="block"></span><span><span class="block"></span></span>D</p> + <p class="ls1"><span>A</span><span class="table"></span><span><span class="block"></span></span>D</p> + <p class="ls1"><span>A</span><span class="flex"></span><span><span class="block"></span></span>D</p> + <p class="ls1"><span>A</span><span class="grid"></span><span><span class="block"></span></span>D</p> +</div> + +<div class="contain control"> + <p>A <img src="support/swatch-orange.png"><img src="support/swatch-orange.png"> D</p> + <p>A <img class="block" src="support/swatch-orange.png"><img class="block" src="support/swatch-orange.png"> D</p> + <p>A <span class="block"></span><span class="block"></span> D</p> + <p>A <span class="table"></span><span class="block"></span> D</p> + <p>A <span class="flex"></span><span class="block"></span> D</p> + <p>A <span class="grid"></span><span class="block"></span> D</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-205.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-205.html new file mode 100644 index 0000000000..e846d94c58 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-205.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at element boundaries</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> +<link rel='match' href='reference/letter-spacing-205-ref.html'> +<meta name="assert" content="Letter spacing is applied after any intervening text-empty inlines."> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + border: solid blue; + margin: 1em; + width: max-content; } + .ls1 { + letter-spacing: 1em; + } + span { + border: solid orange; + } + .control p { + white-space: pre-wrap; + } + p { + letter-spacing: 0; + margin: 0; + } +</style> + +<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div> + +<div class="contain"> + <p class="ls1"><span></span>A<span></span><span></span>D<span></span></p> +</div> + +<div class="contain control"> + <p><span></span>A<span></span><span></span> D<span></span> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-206.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-206.html new file mode 100644 index 0000000000..ce2214dea0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-206.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at element boundaries</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> +<link rel='match' href='reference/letter-spacing-206-ref.html'> +<meta name="assert" content="Letter spacing affects unwrapped min-content and max-content sizes."> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + border: solid blue; + margin: 1em; + float: left; } + .ls0 { + letter-spacing: 0; + } + .ls1 { + letter-spacing: 1em; + } + .ls3 { + letter-spacing: 3em; + } + .control p { + white-space: pre; + } + p { + letter-spacing: 0; + margin: 0; + word-break: break-all; + float: left; + clear: left; + border-right: solid orange 1em; + background: yellow; + } + .squash { + width: 0; + } +</style> + +<div id='instructions'>Test passes if the pattern is identical in all three blue boxes.</div> + +<div class="contain"> +<p class="ls1">AAA<span>BBB</span></p> +<!-- middle owned by containing block: simple --> +<p class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></p> +<p><span class="ls1">AAA</span><span class="ls1">BBB</span></p> +<!-- middle owned by containing block: double nesting --> +<p class="ls3"><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></p> +<p class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></p> +<!-- middle owned by inline: simple --> +<p><span class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></span></p> +<p><span><span class="ls1">AAA</span><span class="ls1">BBB</span></span></p> +<!-- middle owned by inline: double nesting --> +<p><span><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></span></p> +<p><span class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></span></p> +<!-- middle containing space --> +<p class="ls1"><span class="ls0">AAA</span> <span class="ls0">BBB</span></p> +<p><span class="ls3"><span class="ls1"><span class="ls0">AAA</span> </span><span class="ls1">BBB</span></span></p> +</div> + +<div class="contain" style="white-space: nowrap; width: 14em;"> +<div class="squash"> +<p class="ls1"><span>AAA</span><span>BBB</span></p> +<!-- middle owned by containing block: simple --> +<p class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></p> +<p><span class="ls1">AAA</span><span class="ls1">BBB</span></p> +<!-- middle owned by containing block: double nesting --> +<p class="ls3"><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></p> +<p class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></p> +<!-- middle owned by inline: simple --> +<p><span class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></span></p> +<p><span><span class="ls1">AAA</span><span class="ls1">BBB</span></span></p> +<!-- middle owned by inline: double nesting --> +<p><span><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></span></p> +<p><span class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></span></p> +<!-- middle containing space --> +<p class="ls1"><span class="ls0">AAA</span> <span class="ls0">BBB</span></p> +<p><span class="ls3"><span class="ls1"><span class="ls0">AAA</span> </span><span class="ls1">BBB</span></span></p> +</div> +</div> + +<div class="contain control"> +<p>A A A B B B</p> +<!-- middle owned by containing block: simple --> +<p>AAA BBB</p> +<p>A A AB B B</p> +<!-- middle owned by containing block: double nesting --> +<p>AAA B B B</p> +<p>A A A B B B</p> +<!-- middle owned by inline: simple --> +<p>AAA BBB</p> +<p>A A AB B B</p> +<!-- middle owned by inline: double nesting --> +<p>AAAB B B</p> +<p>A A A B B B</p> +<!-- middle containing space --> +<p>AAA BBB</p> +<p>AAA B B B</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-211.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-211.html new file mode 100644 index 0000000000..1e6d63fdd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-211.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at element boundaries</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> +<link rel='help' href='https://www.w3.org/TR/css-text-decor-4/#emphasis-marks'> +<link rel='match' href='reference/letter-spacing-211-ref.html'> +<meta name="assert" content="Emphasis marks are centered on characters, not characters + spacing."> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + margin: 1em; + } + .ls1 { + letter-spacing: 1em; + } + .control p { + white-space: pre-wrap; + color: blue; + } + p { + letter-spacing: 0; + margin: 0; + text-emphasis: dot; + } +</style> + +<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div> + +<div class="contain"> + <p class="ls1">ABC</p> +</div> + +<div class="contain control"> + <p>A B C +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-212.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-212.html new file mode 100644 index 0000000000..2f5284ad18 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-212.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at element boundaries</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> +<link rel='help' href='https://www.w3.org/TR/css-ruby-1/'> +<link rel='match' href='reference/letter-spacing-212-ref.html'> +<meta name="assert" content="Ruby annotations are centered on bases, not bases + trailing letter-spacing."> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + margin: 1em; } + .ls1 { + letter-spacing: 1em; + } + .control p { + white-space: pre-wrap; + color: blue; + } + p { + letter-spacing: 0; + margin: 0; + } +</style> + +<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div> + +<div class="contain"> + <p class="ls1"><ruby>A<rt>a</rt>BB<rt>b</rt></ruby></p> +</div> + +<div class="contain control"> + <p><ruby>A<rt>a</rt></ruby> <ruby>B B<rt>b</rt></ruby></p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bengali-yaphala-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bengali-yaphala-001.html new file mode 100644 index 0000000000..47349ea88b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bengali-yaphala-001.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>CSS Text test: letter-spacing and Bengali ya-phala (yo-pholo)</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="match" href="reference/letter-spacing-bengali-yaphala-001-ref.html"> +<meta name="assert" content="Letter-spacing does not separate yaphala from the preceding letter."> +<link rel="help" href="https://drafts.csswg.org/css-text/#letter-spacing-property"> +<link rel="help" href="https://github.com/w3c/line_paragraph_tests/issues/81"> + +<style> +/* We try various "likely" font names, as well as generics; those not available + on the platform will simply fall back to a default. */ +.outer.a { + font-family: sans-serif; +} +.outer.b { + font-family: serif; +} +.outer.c { + font-family: Bangla MN, serif; +} +.outer.d { + font-family: Bangla Sangam MN, sans-serif; +} +.outer.e { + font-family: Nirmala UI, Vrinda, sans-serif; +} +.outer.f { + font-family: Noto Sans Bengali, sans-serif; +} +.inner { + position: relative; + margin: 1em; + height: 2em; +} +.test { + padding: 0.25em; + color: red; + letter-spacing: 1em; + position: absolute; +} +.mask { + padding: 0.25em; + color: green; + background: green; + position: absolute; +} +span { + display: inline-block; +} +</style> + +<p>Test passes if the red Bengali text is entirely hidden by the green blocks.</p> + +<div class="outer a"> + <div class="inner" lang="bn"> + <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer b"> + <div class="inner" lang="bn"> + <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer c"> + <div class="inner" lang="bn"> + <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer d"> + <div class="inner" lang="bn"> + <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer e"> + <div class="inner" lang="bn"> + <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer f"> + <div class="inner" lang="bn"> + <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-001.html new file mode 100644 index 0000000000..4720e1d13c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: letter spacing after bidi</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> +<link rel="match" href="reference/letter-spacing-bidi-001-ref.html"> +<meta name="assert" content="Letter spacing is inserted after RTL reordering, so letter spacing cannot apply to any of the letters in the span below, +since they get split appart."> +<style> +div { + font-family: monospace; + font-size: 3em; +} +span { + letter-spacing: 1ch; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4. +<div>12345</div> +<div>a<span>bא</span>ב</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-002.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-002.html new file mode 100644 index 0000000000..7cd6e80fc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: letter spacing at bidi fragment boudary</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#bidi-fragmentation"> +<link rel="match" href="reference/letter-spacing-bidi-002-ref.html"> +<meta name="assert" content="When bidi would cause to pieces of a single inline box to be appart if there was enough room to fit everything in one line, +the two pieces are separate fragments even if they end up next to eachother due to line breaking. +Letter spacing at the boundary of such separate fragments comes from their common ancestor, +not from the letter-spacing property on the fragmented inline box itself."> +<style> +div { + font-family: monospace; + font-size: 3em; + width: 0; +} +span { + letter-spacing: 1ch; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3. +<div>12345</div> +<div>a<span>aב</span> ב</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-003.xht b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-003.xht new file mode 100644 index 0000000000..cdc9f31a55 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-003.xht @@ -0,0 +1,42 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta charset="utf-8"/> + <title>CSS Text level 3 Test: letter spacing, justified text and bidi</title> + <link rel="author" title="Mike Bremford" href="http://bfo.com" /> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" /> + <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#bidi-fragmentation" /> + <link rel="match" href="reference/letter-spacing-bidi-003-ref.xht" /> + <meta name="assert" content="text-align: justify will stretch the space between words, which should be applied after bidi processing."/> + <style> + .test, .control { + font: 50px/1 monospace; + width: 14ch; + font-kerning: none; + border: 1px solid black; + } + .control { + position: absolute; + color: red; + z-index: -1; + white-space: pre; + } + .justify { + text-align-last: justify; + text-justify: inter-word; + } + .narrow { + letter-spacing: 1ch; + } + </style> + </head> + <body> + <p>Test passes if no red is visible except for anti-aliasing differences.</p> + <!-- bet <ls> alef <ls> <space stretched from justification> A <ls> B --> + <div class="control">א ב<div style="float: right">A B</div></div> + <div class="test narrow justify">אב AB</div> + + <!-- A <ls> B <ls> <space stretched from justification> alef <ls> bet --> + <div class="control">A B<div style="float: right">א ב</div></div> + <div dir="rtl" class="test narrow justify">אב AB</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-004.xht b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-004.xht new file mode 100644 index 0000000000..c8e77d4c31 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-004.xht @@ -0,0 +1,41 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta charset="utf-8"/> + <title>CSS Text level 3 Test: letter spacing is between letters, with bidi</title> + <link rel="author" title="Mike Bremford" href="http://bfo.com" /> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" /> + <link rel="match" href="reference/letter-spacing-bidi-004-ref.xht" /> + <meta name="assert" content="letter spacing should be applied between letters, not after letters. The latter will cause the colored backgrounds of the span elements to expand."/> + <style> + .test, .control { + font: 50px/1 monospace; + font-kerning: none; + } + .control { + position: absolute; + color: red; + z-index: -1; + white-space: pre; + } + .control span { + /* to ensure both background and text must overlay */ + background: linear-gradient(to bottom, red 50%, green 50%, green 100%); + } + .test span { + background: linear-gradient(to bottom, green 50%, transparent 50%, transparent 100%); + } + .wide { + letter-spacing: 2ch; + } + .narrow { + letter-spacing: 1ch; + } + </style> + </head> + <body> + <p>Test passes if no red is visible except for anti-aliasing differences, and the green boxes are the width of a single letter.</p> + <!-- A <ls> B <ls> <bg>C</bg> <ls> gimel <ls> bet <ls> <bg>alef</bg> <gap> --> + <div class="control">A B <span>C</span> ב ג <span style="unicode-bidi:embed">א</span></div> + <div class="test narrow">AB<span class="wide">Cא</span>בג</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-005.xht b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-005.xht new file mode 100644 index 0000000000..4583bcb12a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-005.xht @@ -0,0 +1,41 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta charset="utf-8" /> + <title>CSS Text level 3 Test: letter spacing nested changes, with bidi</title> + <link rel="author" title="Mike Bremford" href="http://bfo.com" /> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" /> + <link rel="match" href="reference/letter-spacing-bidi-005-ref.xht" /> + <meta name="assert" content="Changes in letter spacing affect the spacing between letters within that element only" /> + <style> + .test, .control { + font: 50px/1 monospace; + font-kerning: none; + } + .control { + position: absolute; + color: red; + z-index: -1; + white-space: pre; + } + .control span { + /* to ensure both background and text overlay correctly */ + background: linear-gradient(to bottom, red 50%, green 50%, green 100%); + } + .test span { + background: linear-gradient(to bottom, green 50%, transparent 50%, transparent 100%); + } + .wide { + letter-spacing: 2ch; + } + .narrow { + letter-spacing: 1ch; + } + </style> + </head> + <body> + <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p> + <!-- A <ls> <ls> <bg>B <ls> bet <ls> alef <ls> C</bg> <ls> D <gap> --> + <div class="control">A <span>B א ב C</span> D</div> + <div class="test wide">A<span class="narrow">BאבC</span>D</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-control-chars-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-control-chars-001.html new file mode 100644 index 0000000000..87d071a1ed --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-control-chars-001.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> +<head> +<meta charset=utf-8> +<title>letter-spacing should not be applied to zero-width format controls</title> +<link rel=match href="reference/letter-spacing-control-chars-001.ref.html"> +<link rel=help href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> +<style> +.test { + font: 12px/2 monospace; + letter-spacing: 4px; +} +</style> +</head> +<body> +The two lines below should match:<br> +<div class=test> +​let​ter​spac​ing​ should not be +‌af‌fec‌ted‌ by +‍ze‍ro‍-‍width‍ +⁠for⁠mat⁠ +characters +</div> +<div class=test> +letterspacing should not be +affected by +zero-width +format +characters +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-end-of-line-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-end-of-line-001.html new file mode 100644 index 0000000000..645ef10509 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-end-of-line-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: letter spacing at end of line</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> +<link rel="match" href="reference/letter-spacing-end-of-line-001-ref.html"> +<meta name="assert" content="Letter-spacing must not be applied at the beginning or at the end of a line."> +<style> +div { + font-family: monospace; + font-size: 3em; +} +span { + float:left; + letter-spacing: 1ch; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4. +<div>12345</div> +<div><span>aa</span>a</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-001.html new file mode 100644 index 0000000000..735d9db00d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>text-justify:inter-character and ligatures</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'> +<link rel='match' href='reference/letter-spacing-ligatures-001-ref.html'> +<meta name=flags content="should"> +<meta name="assert" content="When the effective spacing between two characters is not zero (due to either justification […]), user agents should not apply optional ligatures"> +<style> +@font-face { + font-family: 'mplus'; + src: url('/fonts/mplus-1p-regular.woff'); +} +div { + font-size: 2em; + font-family: mplus; + width: 12ch; + text-align: justify; + text-align-last: justify; + text-justify: inter-character; + font-kerning: none; +} +span { + display: inline-block; + text-justify: auto; +} +.ref { color: blue; font-variant-ligatures: none; } +.noref { color: orange; } +</style> +<p>Test passes if the black text looks like the blue one, not the orange one. +<div>office</div> +<div class=ref>office</div> +<div class=noref>o<span>ffi</span>ce</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-002.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-002.html new file mode 100644 index 0000000000..b7a2ac8461 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter spacing and ligatures</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'> +<link rel='match' href='reference/letter-spacing-ligatures-002-ref.html'> +<meta name=flags content="should"> +<meta name="assert" content="When the effective spacing between two characters is not zero (due to […] letter spacing), user agents should not apply optional ligatures"> +<style> +@font-face { + font-family: 'mplus'; + src: url('/fonts/mplus-1p-regular.woff'); +} +div { + font-size: 2em; + font-family: mplus; + width: 12ch; + letter-spacing: 20px; + font-kerning: none; +} +i { + padding-left: 20px; +} +.ref { + color: blue; + letter-spacing: 0; + font-variant-ligatures: none; +} +</style> +<p>Test passes if the black text looks like the blue one. +<div>office</div> +<div class=ref>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-003.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-003.html new file mode 100644 index 0000000000..20214f8fdd --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-003.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>text-justify:inter-character and ligatures</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'> +<link rel='match' href='reference/letter-spacing-ligatures-003-ref.html'> +<meta name=flags content="should"> +<meta name="assert" content="When the effective spacing between two characters is not zero (due to either justification […]), user agents should not apply optional ligatures, but they do need to apply mandatory ones."> +<style> +div { + font-size: 2em; + width: 12ch; +} +.test { + text-align: justify; + text-align-last: justify; + text-justify: inter-character; +} +span { float: right; } +.ref { color: blue; } +</style> +<p>Test passes if the black text looks like the blue one. +<div lang=km class=test>សាហា</div> +<div lang=km class=ref>សា<span>ហា</span></div> + diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-004.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-004.html new file mode 100644 index 0000000000..0f17f05454 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-004.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter spacing and ligatures</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'> +<link rel='match' href='reference/letter-spacing-ligatures-004-ref.html'> +<meta name=flags content="should"> +<meta name="assert" content="When the effective spacing between two characters is not zero (due to […] letter spacing), user agents should not apply optional ligatures, but they must apply ones"> +<style> +div { + font-size: 2em; + width: 12ch; + font-kerning: none; +} +.test { + letter-spacing: 20px; +} +span { + padding-left: 20px; +} +.ref { + color: blue; +} +</style> +<p>Test passes if the black text looks like the blue one. +<div lang=km class=test>សាហា</div> +<div lang=km class=ref>សា<span></span>ហា</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-001.html new file mode 100644 index 0000000000..a7149e30c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: letter on nested element</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> +<link rel="match" href="reference/letter-spacing-nesting-001-ref.html"> +<meta name="assert" content="A given value of letter-spacing only affects the spacing between characters completely contained within the element for which it is specified"> +<style> +div { + font-family: monospace; + font-size: 3em; +} +span { + letter-spacing: 1ch; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 5. +<div>123456</div> +<div>a<span>aa</span>a</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-002.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-002.html new file mode 100644 index 0000000000..67f180affd --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: letter spacing on element with single character</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> +<link rel="match" href="reference/letter-spacing-nesting-002-ref.html"> +<meta name="assert" content="Applying letter-spacing to an element containing only a single character has no effect on the rendered result"> +<style> +div { + font-family: monospace; + font-size: 3em; +} +span { + letter-spacing: 1ch; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3. +<div>12345</div> +<div>a<span>a</span>a</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-003.xht b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-003.xht new file mode 100644 index 0000000000..7d5d846328 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-003.xht @@ -0,0 +1,41 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta charset="utf-8" /> + <title>CSS Text level 3 Test: letter spacing changes within element tree</title> + <link rel="author" title="Mike Bremford" href="http://bfo.com" /> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" /> + <link rel="match" href="reference/letter-spacing-nesting-003-ref.xht" /> + <meta name="assert" content="Changes in letter spacing affect the spacing between letters within that element only" /> + <style> + .test, .control { + font: 50px/1 monospace; + font-kerning: none; + } + .control { + position: absolute; + color: red; + z-index: -1; + white-space: pre; + } + .control span { + /* to ensure both background and text overlay correctly */ + background: linear-gradient(to bottom, red 50%, green 50%, green 100%); + } + .test span { + background: linear-gradient(to bottom, green 50%, transparent 50%, transparent 100%); + } + .wide { + letter-spacing: 2ch; + } + .narrow { + letter-spacing: 1ch; + } + </style> + </head> + <body> + <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p> + <!-- A <ls> <ls> <bg>B <ls> <ls> C</bg> <ls> D --> + <div class="control">A <span>B C</span> D</div> + <div class="test narrow">A<span class="wide">BC</span>D</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html new file mode 100644 index 0000000000..d6e87a56d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + width: 5em; + border: solid blue; + margin: 1em; + float: left; } + .pre, .control p { + white-space: pre; + } + p { margin: 0; } +</style> + +<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div> + +<!-- Control --> +<div class="contain control"> + <p>x x</p> + <p>x x 水<br>x x x<br>水 x x</p> + <p>x x x<br>x x<br>x x x</p> + <p>x x x<br>x x<br>x x x</p> +</div> + +<!-- Control --> +<div class="contain control"> + <p>x x</p> + <p>x x 水<br>x x x<br>水 x x</p> + <p>x x x<br>x x<br>x x x</p> + <p>x x x<br>x x<br>x x x</p> +</div> + +<!-- Control --> +<div class="contain control"> + <p>x x</p> + <p>x x 水<br>x x x<br>水 x x</p> + <p>x x x<br>x x<br>x x x</p> + <p>x x x<br>x x<br>x x x</p> +</div> + +<!-- Control --> +<div class="contain control"> + <p>x x</p> + <p>x x 水<br>x x x<br>水 x x</p> + <p>x x x<br>x x<br>x x x</p> + <p>x x x<br>x x<br>x x x</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html new file mode 100644 index 0000000000..6898da609d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + width: 5em; + border: solid blue; + margin: 1em; + float: left; } + p { margin: 0; + white-space: pre; } +</style> + +<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div> + +<!-- Control --> +<div class="contain"> + <p> x </p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> +</div> + +<!-- Control --> +<div class="contain"> + <p> x </p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> +</div> + +<!-- Control --> +<div class="contain"> + <p> x </p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> +</div> + +<!-- Control --> +<div class="contain"> + <p> x </p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> + <p>x x <br> x <br> x x</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html new file mode 100644 index 0000000000..08ea8e56e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + @import "/fonts/ahem.css"; + .test { float: left; color: green; background: red; font: 20px/1 Ahem; } + .spacing { position: absolute; width: 1em; height: 2em; margin: 0 1em; background: green; } +</style> + +<div id='instructions'>Test passes if there is a green rectangle below and no red.</div> + +<div class="test"><div class="spacing"></div>xx<br>xx</div></div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html new file mode 100644 index 0000000000..3461347a28 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + border: solid blue; + margin: 1em; + float: left; } + .control p { + white-space: pre-wrap; + } + p { + letter-spacing: 0; + margin: 0; + } +</style> + +<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div> + +<div class="contain control"> + <!-- middle owned by containing block: simple --> + <p>AAA BBB</p> + <p>A A AB B B</p> + <!-- middle owned by containing block: double nesting --> + <p>AAAB B B</p> + <p>A A AB B B</p> + <!-- middle owned by inline: simple --> + <p>AAA BBB</p> + <p>A A AB B B</p> + <!-- middle owned by inline: double nesting --> + <p>AAAB B B</p> + <p>A A A B B B</p> + <!-- middle containing space --> + <p>AAA BBB</p> + <p>AAA B B B</p> +</div> + +<div class="contain control"> + <!-- middle owned by containing block: simple --> + <p>AAA BBB</p> + <p>A A AB B B</p> + <!-- middle owned by containing block: double nesting --> + <p>AAAB B B</p> + <p>A A AB B B</p> + <!-- middle owned by inline: simple --> + <p>AAA BBB</p> + <p>A A AB B B</p> + <!-- middle owned by inline: double nesting --> + <p>AAAB B B</p> + <p>A A A B B B</p> + <!-- middle containing space --> + <p>AAA BBB</p> + <p>AAA B B B</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html new file mode 100644 index 0000000000..078656c463 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + border: solid blue; + margin: 1em; + float: left; } + + .block, .table, .flex, .grid { + display: inline-block; + width: 15px; + height: 15px; + background: orange; + } + .table { + display: inline-table; + } + .flex { + display: inline-flex; + } + .grid { + display: inline-grid; + } + .control p { + white-space: pre-wrap; + } + p { + letter-spacing: 0; + margin: 0; + } +</style> + +<div id='instructions'>Test passes if the pattern is identical in all blue boxes.</div> + +<div class="contain control"> + <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p> + <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p> + <p>A <span class="block"></span><span class="block"></span> D</p> + <p>A <span class="table"></span><span class="block"></span> D</p> + <p>A <span class="flex"></span><span class="block"></span> D</p> + <p>A <span class="grid"></span><span class="block"></span> D</p> +</div> + +<div class="contain control"> + <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p> + <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p> + <p>A <span class="block"></span><span class="block"></span> D</p> + <p>A <span class="table"></span><span class="block"></span> D</p> + <p>A <span class="flex"></span><span class="block"></span> D</p> + <p>A <span class="grid"></span><span class="block"></span> D</p> +</div> + +<div class="contain control"> + <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p> + <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p> + <p>A <span class="block"></span><span class="block"></span> D</p> + <p>A <span class="table"></span><span class="block"></span> D</p> + <p>A <span class="flex"></span><span class="block"></span> D</p> + <p>A <span class="grid"></span><span class="block"></span> D</p> +</div> + +<div class="contain control"> + <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p> + <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p> + <p>A <span class="block"></span><span class="block"></span> D</p> + <p>A <span class="table"></span><span class="block"></span> D</p> + <p>A <span class="flex"></span><span class="block"></span> D</p> + <p>A <span class="grid"></span><span class="block"></span> D</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html new file mode 100644 index 0000000000..3c6e2aa60e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at element boundaries</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + border: solid blue; + margin: 1em; + width: max-content; } + .ls1 { + letter-spacing: 1em; + } + span { + border: solid orange; + } + .control p { + white-space: pre-wrap; + } + p { + letter-spacing: 0; + margin: 0; + } +</style> + +<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div> + +<div class="contain control"> + <p><span></span>A<span></span><span></span> D<span></span> +</div> + +<div class="contain control"> + <p><span></span>A<span></span><span></span> D<span></span> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html new file mode 100644 index 0000000000..36bad163f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at element boundaries</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + border: solid blue; + margin: 1em; + float: left; } + .control p { + white-space: pre; + } + p { + letter-spacing: 0; + margin: 0; + word-break: break-all; + float: left; + clear: left; + border-right: solid orange 1em; + background: yellow; + } +</style> + +<div id='instructions'>Test passes if the pattern is identical in all three blue boxes.</div> + +<div class="contain control"> +<p>A A A B B B</p> +<!-- middle owned by containing block: simple --> +<p>AAA BBB</p> +<p>A A AB B B</p> +<!-- middle owned by containing block: double nesting --> +<p>AAA B B B</p> +<p>A A A B B B</p> +<!-- middle owned by inline: simple --> +<p>AAA BBB</p> +<p>A A AB B B</p> +<!-- middle owned by inline: double nesting --> +<p>AAAB B B</p> +<p>A A A B B B</p> +<!-- middle containing space --> +<p>AAA BBB</p> +<p>AAA B B B</p> +</div> + +<div class="contain control"> +<p>A A A B B B</p> +<!-- middle owned by containing block: simple --> +<p>AAA BBB</p> +<p>A A AB B B</p> +<!-- middle owned by containing block: double nesting --> +<p>AAA B B B</p> +<p>A A A B B B</p> +<!-- middle owned by inline: simple --> +<p>AAA BBB</p> +<p>A A AB B B</p> +<!-- middle owned by inline: double nesting --> +<p>AAAB B B</p> +<p>A A A B B B</p> +<!-- middle containing space --> +<p>AAA BBB</p> +<p>AAA B B B</p> +</div> + +<div class="contain control"> +<p>A A A B B B</p> +<!-- middle owned by containing block: simple --> +<p>AAA BBB</p> +<p>A A AB B B</p> +<!-- middle owned by containing block: double nesting --> +<p>AAA B B B</p> +<p>A A A B B B</p> +<!-- middle owned by inline: simple --> +<p>AAA BBB</p> +<p>A A AB B B</p> +<!-- middle owned by inline: double nesting --> +<p>AAAB B B</p> +<p>A A A B B B</p> +<!-- middle containing space --> +<p>AAA BBB</p> +<p>AAA B B B</p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html new file mode 100644 index 0000000000..9b3499ed7c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter-spacing at element boundaries</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + margin: 1em; } + .control p { + white-space: pre-wrap; + } + p { + letter-spacing: 0; + margin: 0; + text-emphasis: dot; + } +</style> + +<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div> + +<div class="contain control"> + <p>A B C +</div> + +<div class="contain control" style="color:blue"> + <p>A B C +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html new file mode 100644 index 0000000000..889803699d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + @import "/fonts/ahem.css"; + .contain { + font: 20px/1 Ahem; + margin: 1em; } + .control p { + white-space: pre-wrap; + } + p { + letter-spacing: 0; + margin: 0; + } +</style> + +<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div> + +<div class="contain control"> + <p><ruby>A<rt>a</rt></ruby> <ruby>B B<rt>b</rt></ruby></p> +</div> + +<div class="contain control" style="color: blue"> + <p><ruby>A<rt>a</rt></ruby> <ruby>B B<rt>b</rt></ruby></p> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html new file mode 100644 index 0000000000..a1ff2e053a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>CSS Text reference: letter-spacing and Bengali ya-phala (yo-pholo)</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> +/* We try various "likely" font names, as well as generics; those not available + on the platform will simply fall back to a default. */ +.outer.a { + font-family: sans-serif; +} +.outer.b { + font-family: serif; +} +.outer.c { + font-family: Bangla MN, serif; +} +.outer.d { + font-family: Bangla Sangam MN, sans-serif; +} +.outer.e { + font-family: Nirmala UI, Vrinda, sans-serif; +} +.outer.f { + font-family: Noto Sans Bengali, sans-serif; +} +.inner { + position: relative; + margin: 1em; + height: 2em; +} +.mask { + padding: 0.25em; + color: green; + background: green; + position: absolute; +} +span { + display: inline-block; +} +</style> + +<p>Test passes if the red Bengali text is entirely hidden by the green blocks.</p> + +<div class="outer a"> + <div class="inner" lang="bn"> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer b"> + <div class="inner" lang="bn"> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer c"> + <div class="inner" lang="bn"> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer d"> + <div class="inner" lang="bn"> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer e"> + <div class="inner" lang="bn"> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> + +<div class="outer f"> + <div class="inner" lang="bn"> + <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> + </div> + <div class="inner" lang="bn"> + <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html new file mode 100644 index 0000000000..e34dbc313f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-family: monospace; + font-size: 3em; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4. +<div>12345</div> +<div>abאב</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html new file mode 100644 index 0000000000..f197769f3a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-family: monospace; + font-size: 3em; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3. +<div>12345</div> +<div>aaב<br>ב</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht new file mode 100644 index 0000000000..d46dd7a361 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht @@ -0,0 +1,30 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Mike Bremford" href="http://bfo.com" /> + <style> + .control { + font: 50px/1 monospace; + width: 14ch; + font-kerning: none; + border: 1px solid black; + white-space: pre; + } + .red { + color: red; + position: absolute; + z-index: -1; + } + </style> + </head> + <body> + <p>Test passes if no red is visible except for anti-aliasing differences.</p> + <!-- bet <ls> alef <ls> <space stretched from justification> A <ls> B --> + <div class="control red">א ב<div style="float: right">A B</div></div> + <div class="control">א ב<div style="float: right">A B</div></div> + + <!-- A <ls> B <ls> <space stretched from justification> alef <ls> bet --> + <div class="control red">A B<div style="float: right">א ב</div></div> + <div class="control">A B<div style="float: right">א ב</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht new file mode 100644 index 0000000000..a0326fcbaf --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht @@ -0,0 +1,27 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Mike Bremford" href="http://bfo.com" /> + <style> + .control { + font: 50px/1 monospace; + font-kerning: none; + white-space: pre; + } + .red { + color: red; + position: absolute; + z-index: -1; + } + .control span { + background: green; + } + </style> + </head> + <body> + <p>Test passes if no red is visible except for anti-aliasing differences, and the green boxes are the width of a single letter.</p> + <!-- A <ls> B <ls> <bg>C</bg> <ls> gimel <ls> bet <ls> <bg>alef</bg> <gap> --> + <div class="control red">A B <span>C</span> ב ג <span style="unicode-bidi:embed">א</span></div> + <div class="control">A B <span>C</span> ב ג <span style="unicode-bidi:embed">א</span></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht new file mode 100644 index 0000000000..d93f98495a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht @@ -0,0 +1,27 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Mike Bremford" href="http://bfo.com" /> + <style> + .control { + font: 50px/1 monospace; + font-kerning: none; + white-space: pre; + } + .red { + color: red; + position: absolute; + z-index: -1; + } + .control span { + background: green; + } + </style> + </head> + <body> + <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p> + <!-- A <ls> <ls> <bg>B <ls> bet <ls> alef <ls> C</bg> <ls> D <gap> --> + <div class="control red">A <span>B א ב C</span> D</div> + <div class="control">A <span>B א ב C</span> D</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html new file mode 100644 index 0000000000..977d821145 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<html> +<head> +<meta charset=utf-8> +<title>letter-spacing should not be applied to zero-width format controls</title> +<style> +.test { + font: 12px/2 monospace; + letter-spacing: 4px; +} +</style> +</head> +<body> +The two lines below should match:<br> +<div class=test> +letterspacing should not be +affected by +zero-width +format +characters +</div> +<div class=test> +letterspacing should not be +affected by +zero-width +format +characters +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html new file mode 100644 index 0000000000..eb474ab8d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-family: monospace; + font-size: 3em; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4. +<div>12345</div> +<div>a aa</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html new file mode 100644 index 0000000000..e4caf6587a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>text-justify:inter-character and ligatures</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<style> +@font-face { + font-family: 'mplus'; + src: url('/fonts/mplus-1p-regular.woff'); +} +div { + font-size: 2em; + font-family: mplus; + width: 12ch; + text-align: justify; + text-align-last: justify; + text-justify: inter-character; + font-variant-ligatures: none; + font-kerning: none; +} +span { + display: inline-block; + text-justify: auto; +} +.ref { color: blue;} +.noref { color: orange; font-variant-ligatures: initial;} +</style> +<p>Test passes if the black text looks like the blue one, not the orange one. +<div>office</div> +<div class=ref>office</div> +<div class=noref>o<span>ffi</span>ce</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html new file mode 100644 index 0000000000..2cbe5b0a0c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter spacing and ligatures</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<style> +@font-face { + font-family: 'mplus'; + src: url('/fonts/mplus-1p-regular.woff'); +} +div { + font-size: 2em; + font-family: mplus; + width: 12ch; + font-variant-ligatures: none; + letter-spacing: 0; + font-kerning: none; +} +i { + padding-left: 20px; +} +.ref { + color: blue; +} +</style> +<p>Test passes if the black text looks like the blue one. +<div>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div> +<div class=ref>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html new file mode 100644 index 0000000000..2d1e7bd038 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>text-justify:inter-character and ligatures</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<style> +div { + font-size: 2em; + width: 12ch; +} +span { float: right; } +.ref { color: blue; } +</style> +<p>Test passes if the black text looks like the blue one. +<div lang=km>សា<span>ហា</span></div> +<div lang=km class=ref>សា<span>ហា</span></div> + diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html new file mode 100644 index 0000000000..bb3881fc5e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>letter spacing and ligatures</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<style> +div { + font-size: 2em; + width: 12ch; + font-kerning: none; +} +span { + padding-left: 20px; +} +.ref { + color: blue; +} +</style> +<p>Test passes if the black text looks like the blue one. +<div lang=km>សា<span></span>ហា</div> +<div lang=km class=ref>សា<span></span>ហា</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html new file mode 100644 index 0000000000..3d003f3621 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-family: monospace; + font-size: 3em; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 5. +<div>123456</div> +<div>aa aa</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html new file mode 100644 index 0000000000..93eb6b0fca --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-family: monospace; + font-size: 3em; +} +</style> + +<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3. +<div>12345</div> +<div>aaa</div> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht new file mode 100644 index 0000000000..996f2a1e30 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht @@ -0,0 +1,26 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Mike Bremford" href="http://bfo.com" /> + <style> + .control { + font: 50px/1 monospace; + font-kerning: none; + white-space: pre; + } + .red { + color: red; + position: absolute; + z-index: -1; + } + .control span { + background: green; + } + </style> + </head> + <body> + <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p> + <!-- A <ls> <ls> <bg>B <ls> <ls> C</bg> <ls> D --> + <div class="control">A <span>B C</span> D</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/support/swatch-orange.png b/testing/web-platform/tests/css/css-text/letter-spacing/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/letter-spacing/support/swatch-orange.png |
