background-clip-text-descendants.html

<!DOCTYPE html>
<style>
body {
  font-size: 40px;
}
.transformed {
  transform: translateX(0);
}
.clip-text {
  background: blue;
  -webkit-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>

chromium/third_party/blink/web_tests/paint/background/background-clip-text-descendants.html