Blitz - WPT: clip-text-background-table-cell.html

wpt / css / css-backgrounds / background-clip / clip-text-background-table-cell.html

/css/css-backgrounds/background-clip/clip-text-background-table-cell.html

<!DOCTYPE html>
<html>
<head>
<title>Test 'background-clip: text' on Table Cells</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#background-clip">
<link rel="match" href="clip-text-background-table-cell-ref.html">
<meta name="fuzzy" content="maxDifference=0-6;totalPixels=0-728">
<style>
  table {
    position: relative;
    top: 1px;
    margin: 0;
    border-collapse: collapse;
  }
  tr {
    padding: 0;
    font-size: 40px;
    line-height: 40px;
    font-family: sans-serif;
    vertical-align: top;
    background: linear-gradient(red, blue);
    background-clip: text;
    color: transparent;
  }
</style>
</head>
<body>
<table>
  <thead>
  <tr>
    <td>Text</td>
  </tr>
  </thead>
</table>
</body>
</html>

/css/css-backgrounds/background-clip/clip-text-background-table-cell-ref.html

<!DOCTYPE html>
<html>
<head>
<title>Test 'background-clip: text' on Table Cells</title>
<style>
.container {
  position: relative;
  top: 2px;
  margin: 0px;
  height: 80px;
}

.gradient-text {
  display: inline-block;
  font-size: 40px;
  font-family: sans-serif;
  line-height: 40px;
  background: linear-gradient(to bottom, red 0%, blue 100%);
  background-size: 100% 40px;
  background-clip: text;
  color: transparent;
}
</style>
</head>
<body>
<div class="container">
  <div class="gradient-text">Text</div>
</div>
</body>
</html>