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

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

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

<!DOCTYPE html>
<title>Leave character color overlapping the block caret unchanged when the second value of caret-color is auto</title>
<link rel="help" href="https://drafts.csswg.org/css-ui/#caret-color">
<link rel="match" href="caret-color-block-shape-text-color-002-ref.html">
<meta name="assert" content="When the second value of caret-color is 'auto', the character under a block caret is painted with its normal text color, not overridden.">
<style>
  div {
    font-size: 5em;
    color: red;
  }
  #target {
    caret-color: black auto;
    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-002-ref.html

<!DOCTYPE html>
<style>
  div {
    font-size: 5em;
    color: red;
  }
  span {
    background-color: black;
    /* No color override: span inherits color: red from its container. */
  }
</style>
<div><span>a</span>bc</div>