Blitz - WPT: clip-text-descendants.html

wpt / css / css-backgrounds / background-clip / clip-text-descendants.html

/css/css-backgrounds/background-clip/clip-text-descendants.html

<!DOCTYPE html>
<title>background-clip:text with various descendant types</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text">
<link rel="match" href="clip-text-descendants-ref.html">
<style>
body {
  font-size: 40px;
}
.transformed {
  transform: translateX(0);
}
.clip-text {
  background: blue;
  background-clip: text;
  color: rgba(255,0,0,0.5);
}
</style>
<!-- Passes if all texts are purple. -->
<div class="clip-text"><div>Block</div></div>
<div class="clip-text transformed"><div>Block transformed</div></div>
<div class="clip-text"><div style="float:left">Float</div><br></div>
<div class="clip-text transformed"><div style="float:left">Float transformed</div><br></div>
<table class="clip-text"><tr><td>Table</td></tr></table>
<table class="clip-text transformed"><tr><td>Table transformed</td></tr></table>
<div class="clip-text"><div style="display: inline-block">Inline block</div></div>
<div class="clip-text transformed"><div style="display: inline-block">Inline block transformed</div></div>

/css/css-backgrounds/background-clip/clip-text-descendants-ref.html

<!DOCTYPE html>
<title>background-clip:text with various descendant types (reference)</title>
<style>
body {
  font-size: 40px;
}
.clip-text {
  background: blue;
  background-clip: text;
  color: rgba(255,0,0,0.5);
}
</style>
<!-- Passes if all texts are purple. -->
<div class="clip-text">Block</div>
<div class="clip-text">Block transformed</div>
<div class="clip-text">Float</div>
<div class="clip-text">Float transformed</div>
<table><tr><td class="clip-text">Table</td></tr></table>
<table><tr><td class="clip-text">Table transformed</td></tr></table>
<div class="clip-text">Inline block</div>
<div class="clip-text">Inline block transformed</div>