wpt / css / css-text / text-justify / text-justify-word-separators.html

Status: FAIL | Duration: 12ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-text/text-justify/text-justify-word-separators.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Text 6.4. Justification Method: text-justify: inter-word</title>
    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
    <link rel="help" href="https://drafts.csswg.org/css-text/#word-separator">
    <link rel='match' href='text-justify-word-separators-ref.html'>
    <meta name="assert" content="text-justify:inter-word should adjust spacing at all word separators.">
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <style>
        .justified {
            font: 10px/1 Ahem;
            text-align: justify;
            text-justify: inter-word;
            width: 120px;
            border: solid 1px black;
        }
        /* Hide the word separators, in case the system doesn't
           have an appropriate font installed and shows tofu.
           Justification should still work in this case. */
        .hidden {
            color: transparent;
        }
    </style>
</head>
<body>
    <!-- A normal space -->
    <div class="justified">XXXX XXXX XXXX</div>

    <!-- Non-breaking space -->
    <div class="justified">XXXX<span class="hidden">&nbsp;</span>XXXX XXXX</div>

    <!-- Ethiopic word space -->
    <div class="justified">XXXX<span class="hidden">&#x1361;</span>XXXX XXXX</div>

    <!-- Aegean word separators -->
    <div class="justified">XXXX<span class="hidden">&#x10100;</span>XXXX XXXX</div>
    <div class="justified">XXXX<span class="hidden">&#x10101;</span>XXXX XXXX</div>

    <!-- Ugaritic word divider -->
    <div class="justified">XXXX<span class="hidden">&#x1039F;</span>XXXX XXXX</div>

    <!-- Phoenician word separator -->
    <div class="justified">XXXX<span class="hidden">&#x1091F;</span>XXXX XXXX</div>
</body>
</html>

/css/css-text/text-justify/text-justify-word-separators-ref.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
    <link rel="help" href="https://drafts.csswg.org/css-text/#word-separator">
    <meta name="assert" content="text-justify:inter-word should adjust spacing at all word separators.">
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <style>
        .justified {
            font: 10px/1 Ahem;
            text-align: justify;
            text-justify: inter-word;
            width: 120px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="justified">XXXX XXXX XXXX</div>
    <div class="justified">XXXX XXXX XXXX</div>
    <div class="justified">XXXX XXXX XXXX</div>
    <div class="justified">XXXX XXXX XXXX</div>
    <div class="justified">XXXX XXXX XXXX</div>
    <div class="justified">XXXX XXXX XXXX</div>
    <div class="justified">XXXX XXXX XXXX</div>
</body>
</html>