Blitz - WPT: text-decoration-skip-spaces-007.html

wpt / css / css-text-decor / text-decoration-skip-spaces-007.html

/css/css-text-decor/text-decoration-skip-spaces-007.html

<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>Decoration skipping spaces: all value skips interior spaces</title>
<meta name="assert" content="text-decoration-skip-spaces:all skips spaces at all positions including between words, unlike start end which only skips at line edges.">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-spaces-property">
<link rel="author" title="Perry Wang" href="mailto:perryuwang@gmail.com">
<link rel="match" href="reference/text-decoration-skip-spaces-007-ref.html">
<meta name="fuzzy" content="maxDifference=0-255;totalPixels=0-15">
<style>
div {
    text-decoration: underline;
    text-decoration-color: blue;

    text-decoration-skip-spaces: all;
    color: orange;
    font-size: 2em;
    white-space: pre;
}
</style>

<p>Test passes if this page renders the same as the reference page (underline only under AB, CDE, FG — not under the spaces between them).

<div>AB CDE FG</div>

/css/css-text-decor/reference/text-decoration-skip-spaces-007-ref.html

<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>Test reference</title>
<link rel="author" title="Perry Wang" href="mailto:perryuwang@gmail.com">
<style>
/*
 * Reference for text-decoration-skip-spaces-007.html (match test)
 *
 * text-decoration-skip-spaces: all skips interior spaces between words.
 * We reproduce this by wrapping each word in its own underlined <span>,
 * leaving the spaces outside any span. The spaces thus have no underline,
 * matching exactly what "all" produces.
 */
div {
    color: orange;
    font-size: 2em;
    white-space: pre;
}
span {
    text-decoration: underline;
    text-decoration-color: blue;
}
</style>

<p>Test passes if this page renders the same as the reference page (underline only under AB, CDE, FG — not under the spaces between them).

<div><span>AB</span> <span>CDE</span> <span>FG</span></div>