Status: PASS | Duration: 15ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/CSS2/text/word-spacing-characters-002.xht
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Test: word-spacing on Fixed-Width Space Characters</title> <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#spacing-props"/> <link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property"/> <link rel="match" href="word-spacing-characters-002-ref.xht"/> <meta name="assert" content="Word-spacing does not affect fixed-width spaces."/> <style type="text/css"> div { margin: 1em; font-family: monospace; page-break-inside: avoid; } div p { margin: 0; } .control span { background: blue; color: blue; } .test span { word-spacing: 4em; background: orange; color: orange; } .ws-pre p { white-space: pre; } body > div { display: inline-block; } /* to avoid overflowing the screen. Non essential to the test. */ </style> </head> <body> <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p> <!-- IDEOGRAPHIC SPACE --> <div class="ws-normal"> <p class="control"><span>A　　　　B</span></p> <p class="test"><span>A　　　　B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A　　　　B</span></p> <p class="test"><span>A　　　　B</span></p> </div> <!-- EN QUAD --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- EM QUAD --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- EN SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- EM SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- THREE-PER-EM SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- FOUR-PER-EM SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- SIX-PER-EM SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- FIGURE SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- PUNCTUATION SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!--THIN SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- HAIR SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- NARROW NO-BREAK SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- MEDIUM MATHEMATICAL SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> </body> </html>
/css/CSS2/text/word-spacing-characters-002-ref.xht
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test reference</title> <style type="text/css"> div { margin: 1em; font-family: monospace; page-break-inside: avoid; } div p { margin: 0; } .control span { background: blue; color: blue; } .test span { background: orange; color: orange; } .ws-pre p { white-space: pre; } body > div { display: inline-block; } /* to avoid overflowing the screen. Non essential to the test. */ </style> </head> <body> <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p> <!-- IDEOGRAPHIC SPACE --> <div class="ws-normal"> <p class="control"><span>A　　　　B</span></p> <p class="test"><span>A　　　　B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A　　　　B</span></p> <p class="test"><span>A　　　　B</span></p> </div> <!-- EN QUAD --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- EM QUAD --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- EN SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- EM SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- THREE-PER-EM SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- FOUR-PER-EM SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- SIX-PER-EM SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- FIGURE SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- PUNCTUATION SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!--THIN SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- HAIR SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- NARROW NO-BREAK SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <!-- MEDIUM MATHEMATICAL SPACE --> <div class="ws-normal"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> <div class="ws-pre"> <p class="control"><span>A    B</span></p> <p class="test"><span>A    B</span></p> </div> </body> </html>