summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/CSS2/text/word-spacing-characters-001.xht
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/text/word-spacing-characters-001.xht')
-rw-r--r--testing/web-platform/tests/css/CSS2/text/word-spacing-characters-001.xht88
1 files changed, 88 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/text/word-spacing-characters-001.xht b/testing/web-platform/tests/css/CSS2/text/word-spacing-characters-001.xht
new file mode 100644
index 0000000000..8fc41a9a0a
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/text/word-spacing-characters-001.xht
@@ -0,0 +1,88 @@
+<!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 Flexible 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-001-ref.xht"/>
+ <meta name="assert" content="Word-spacing affects each space (U+0020)
+ and non-breaking space (U+00A0)."/>
+ <style type="text/css">
+ div {
+ margin: 1em;
+ font-family: monospace;
+ page-break-inside: avoid;
+ }
+ div p {
+ margin: 0;
+ }
+ .controlcontrol {
+ background: orange;
+ width: 4em;
+ }
+
+ .control span {
+ background: blue;
+ color: blue;
+ }
+ .spacer {
+ padding-left: 4em;
+ }
+ .test span {
+ word-spacing: 4em;
+ background: orange;
+ color: orange;
+ }
+ .ws-pre p {
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p>
+
+ <div>
+ <p class="control"><span class="spacer"></span>&nbsp;</p>
+ <p class="controlcontrol">&nbsp;</p>
+ </div>
+
+ <div class="ws-normal">
+ <p class="control"><span>A <span class="spacer"></span>B</span></p>
+ <p class="test"><span>A B</span></p>
+ </div>
+ <div class="ws-normal">
+ <p class="control"><span>A <span class="spacer"></span>B</span></p>
+ <p class="test"><span>A B</span></p>
+ </div>
+ <div class="ws-pre">
+ <p class="control"><span>A <span class="spacer"></span> <span class="spacer"></span>B</span></p>
+ <p class="test"><span>A B</span></p>
+ </div>
+
+ <div class="ws-normal">
+ <p class="control"><span>A&nbsp;<span class="spacer"></span>B</span></p>
+ <p class="test"><span>A&nbsp;B</span></p>
+ </div>
+ <div class="ws-normal">
+ <p class="control"><span>A&nbsp;&nbsp;<span class="spacer"></span><span class="spacer"></span>B</span></p>
+ <p class="test"><span>A&nbsp;&nbsp;B</span></p>
+ </div>
+ <div class="ws-pre">
+ <p class="control"><span>A&nbsp;&nbsp;<span class="spacer"></span><span class="spacer"></span>B</span></p>
+ <p class="test"><span>A&nbsp;&nbsp;B</span></p>
+ </div>
+
+ <div class="ws-normal">
+ <p class="control"><span>A&nbsp; &nbsp; <span class="spacer"></span><span class="spacer"></span><span class="spacer"></span><span class="spacer"></span>B</span></p>
+ <p class="test"><span>A&nbsp; &nbsp; &#09;
+ &#09; B</span></p>
+ </div>
+ <div class="ws-pre">
+ <p class="control"><span>A&nbsp; &nbsp; <span class="spacer"></span><span class="spacer"></span><span class="spacer"></span><span class="spacer"></span><span class="spacer"></span><span class="spacer"></span>&#09;B</span></p>
+ <p class="test"><span>A&nbsp; &nbsp; &#09;B</span></p>
+ </div>
+
+ </body>
+</html>