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

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

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

<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>Decoration skipping spaces: all skips interior spaces when selected</title>
<meta name="assert" content="text-decoration-skip-spaces: all skips interior spaces even when selected.">
<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-009-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;
}
::selection {
    background: transparent;
    color: red;
}
</style>

<p>Test passes if the blue underline appears only under AB, CDE, and FG — not under the spaces between them — even when selected.

<div>AB CDE FG</div>
<script>
  const div = document.querySelector('div');
  const range = document.createRange();
  range.selectNodeContents(div);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
</script>

/css/css-text-decor/reference/text-decoration-skip-spaces-009-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>
div {
    color: orange;
    font-size: 2em;
    white-space: pre;
}
span {
    text-decoration: underline;
    text-decoration-color: blue;
}
::selection {
    background: transparent;
    color: red;
}
</style>

<p>Test passes if the blue underline appears only under AB, CDE, and FG — not under the spaces between them — even when selected.

<div><span>AB</span> <span>CDE</span> <span>FG</span></div>
<script>
  const div = document.querySelector('div');
  const range = document.createRange();
  range.selectNodeContents(div);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
</script>