Blitz - WPT: caret-color-block-shape-text-color-001.html

wpt / css / css-ui / caret-color-block-shape-text-color-001.html

/css/css-ui/caret-color-block-shape-text-color-001.html

<!DOCTYPE html>
<title>Paint the character overlapping a block caret with the second value of caret-color when it's non-auto</title>
<link rel="help" href="https://drafts.csswg.org/css-ui/#caret-color">
<link rel="match" href="caret-color-block-shape-text-color-001-ref.html">
<meta name="assert" content="When caret-color has a second <color> value and caret-shape is block, the character overlapping the caret is painted with that second color">
<style>
  div {
    font-size: 5em;
  }
  #target {
    caret-color: black white;
    caret-shape: block;
    caret-animation: manual;
  }
  #target:focus {
    outline: none;
  }
</style>
<div id="target" contenteditable spellcheck="false">abc</div>
<script>
  target.focus();
</script>

/css/css-ui/caret-color-block-shape-text-color-001-ref.html

<!DOCTYPE html>
<style>
  div {
    font-size: 5em;
  }
  span {
    background-color: black;
    color: white;
  }
</style>
<div><span>a</span>bc</div>