Status: FAIL | Duration: 19ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/css-text/letter-spacing/letter-spacing-206.html
<!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>
/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html
<!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>