diff options
| author | WPT Sync Bot <josh+wptsync@joshmatthews.net> | 2020-07-11 08:20:37 +0000 |
|---|---|---|
| committer | WPT Sync Bot <josh+wptsync@joshmatthews.net> | 2020-07-11 10:36:48 +0000 |
| commit | 1a3fdf7a133379b813a6494fcebded9e22b9fec4 (patch) | |
| tree | 5574090dde1646b01911be08f6804fdab46c6ce9 /tests/wpt/web-platform-tests/css/css-text | |
| parent | 242e7e26301e1ee1818023d176ecb3705fa01c62 (diff) | |
| download | servo-1a3fdf7a133379b813a6494fcebded9e22b9fec4.tar.gz servo-1a3fdf7a133379b813a6494fcebded9e22b9fec4.zip | |
Update web-platform-tests to revision e91d7d8c9a1f14438e44000dcd05ce6e658e4ae5
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-text')
20 files changed, 974 insertions, 1 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-100.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-100.html new file mode 100644 index 00000000000..57fad60d7f3 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-100.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-100-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-101.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-101.html new file mode 100644 index 00000000000..dcf5e96cd80 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-101.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-101-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-102.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-102.html new file mode 100644 index 00000000000..6e045c6c430 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-102.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-102-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-103.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-103.html new file mode 100644 index 00000000000..42e78822d71 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-103.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-103-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-104.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-104.html new file mode 100644 index 00000000000..763c6666e23 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-104.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-104-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-105.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-105.html new file mode 100644 index 00000000000..a94daa0aff2 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-105.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-105-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-106.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-106.html new file mode 100644 index 00000000000..4ebf9a3d465 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-106.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-106-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-111.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-111.html new file mode 100644 index 00000000000..d143cf0713a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-111.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-111-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-112.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-112.html new file mode 100644 index 00000000000..a998c4ffdec --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/letter-spacing-112.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-112-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-100-ref.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-100-ref.html new file mode 100644 index 00000000000..d6e87a56d92 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-100-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-101-ref.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-101-ref.html new file mode 100644 index 00000000000..6898da609d2 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-101-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-102-ref.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-102-ref.html new file mode 100644 index 00000000000..08ea8e56e3d --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-102-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-103-ref.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-103-ref.html new file mode 100644 index 00000000000..3461347a28e --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-103-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-104-ref.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-104-ref.html new file mode 100644 index 00000000000..078656c4631 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-104-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-105-ref.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-105-ref.html new file mode 100644 index 00000000000..3c6e2aa60e4 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-105-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-106-ref.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-106-ref.html new file mode 100644 index 00000000000..36bad163f0a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-106-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-111-ref.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-111-ref.html new file mode 100644 index 00000000000..9b3499ed7c5 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-111-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-112-ref.html b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-112-ref.html new file mode 100644 index 00000000000..889803699d4 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/reference/letter-spacing-112-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/tests/wpt/web-platform-tests/css/css-text/letter-spacing/support/swatch-orange.png b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/support/swatch-orange.png Binary files differnew file mode 100644 index 00000000000..d3cd498b52b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/letter-spacing/support/swatch-orange.png diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-letter-spacing-001.html b/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-letter-spacing-001.html index 5d65c67c320..8d8ab401e83 100644 --- a/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-letter-spacing-001.html +++ b/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-letter-spacing-001.html @@ -6,7 +6,6 @@ <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/> <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"/> <link rel="match" href="reference/white-space-letter-spacing-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: 16px monospace; |
