Blitz - WPT: clip-text-blend-mode.html

wpt / css / css-backgrounds / background-clip / clip-text-blend-mode.html

/css/css-backgrounds/background-clip/clip-text-blend-mode.html

<!DOCTYPE html>
<title>A 'background-clip: text' background layer should blend with the underlying layer</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text">
<link rel="match" href="clip-text-blend-mode-ref.html">

<style>
#target {
  font-size: 100px;
  background-image: linear-gradient(#f00, #f00), linear-gradient(#ff0, #ff0);
  background-color: red;
  background-blend-mode: difference, normal;
  background-clip: text;
  color: transparent;
}
</style>
<div id="target">X</div>

/css/css-backgrounds/background-clip/clip-text-blend-mode-ref.html

<!DOCTYPE html>
<title>A 'background-clip: text' background layer should blend with the underlying layer (reference)</title>
<div style="font-size: 100px; color: lime">X</div>