Skip to content

Add more Layout Table tests #59094

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AlexsanderDamaceno wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Add more Layout Table tests #59094

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
243e7f1
tests
AlexsanderDamaceno Apr 10, 2026
1fb5c10
Update clip-text-background-table-cell-ref.html
nt1m Apr 10, 2026
ba56b67
Remove unnecessary blank line in HTML file
nt1m Apr 10, 2026
ee1d061
Remove empty line at the beginning of HTML file
nt1m Apr 10, 2026
e10d6bc
Add help and reference links to HTML file
nt1m Apr 10, 2026
ce60aa8
Update background-multiple-layers-table-cell.html
nt1m Apr 10, 2026
87b991f
Add help link and match reference in HTML file
nt1m Apr 10, 2026
e22f40b
Update tests with missing reference
AlexsanderDamaceno Apr 10, 2026
e570f43
Fix reference name in css/css-backgrounds/box-shadow-table-row-displa…
AlexsanderDamaceno Apr 10, 2026
f1c7bf5
Fix link reference in background multiple layers example
nt1m Apr 10, 2026
f01da78
Update link reference for box-shadow example
nt1m Apr 10, 2026
2642daf
Fix link reference in HTML file
nt1m Apr 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions css/css-backgrounds/background-clip/clip-text-background-table-cell-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!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>
36 changes: 36 additions & 0 deletions css/css-backgrounds/background-clip/clip-text-background-table-cell.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!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>
23 changes: 23 additions & 0 deletions css/css-backgrounds/background-multiple-layers-table-cell-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
:root {
font-size: 24pt;
}
.box {
background:
linear-gradient(rgba(0, 128, 0, 0.2), rgba(128, 0, 0, 0.2)) border-box,
linear-gradient(green, yellow) text;
color: transparent;
display: inline-block;
font-weight: bold;
padding: 1px;
}
</style>
</head>
<body>
<div class="box">Text</div>
</body>
</html>
33 changes: 33 additions & 0 deletions css/css-backgrounds/background-multiple-layers-table-cell.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test background layers work fine in table elements</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#background-clip">
<link rel="match" href="background-multiple-layers-table-cell-ref.html">
<meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-370">
<style>
:root {
font-size: 24pt;
}
thead {
background:
linear-gradient(rgba(0, 128, 0, 0.2), rgba(128, 0, 0, 0.2)) border-box,
linear-gradient(green, yellow) text;
color: transparent;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Text</th>
</tr>
</thead>
</table>
</body>
</html>
63 changes: 63 additions & 0 deletions css/css-backgrounds/box-shadow-table-row-display-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Box-shadow on display: table-row</title>
<style>
body {
margin: 50px;
background: white;
}

.block {
width: 200px;
height: 200px;
background: #999;
box-shadow: 0 0 50px #000;
}

.block-red {
width: 200px;
height: 200px;
background: #999;
box-shadow: 0 0 50px red;
}

.block-green {
width: 200px;
height: 200px;
background: #999;
box-shadow: 0 0 50px green;
}

.block-blue {
width: 200px;
height: 200px;
background: #999;
box-shadow: 0 0 50px blue;
}

.group {
margin-bottom: 40px;
}
</style>
</head>
<body>

<div class="group">
<div class="block"></div>
</div>

<div class="group">
<div class="block"></div>
<div class="block"></div>
</div>

<div class="group">
<div class="block-red"></div>
<div class="block-green"></div>
<div class="block-blue"></div>
</div>

</body>
</html>
81 changes: 81 additions & 0 deletions css/css-backgrounds/box-shadow-table-row-display.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Box-shadow on display: table-row</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#background-clip">
<link rel="match" href="box-shadow-table-row-display-ref.html">
<meta name="fuzzy" content="maxDifference=0-15;totalPixels=0-2890">
<style>
body {
margin: 50px;
background: white;
}

.table {
display: table;
margin-bottom: 40px;
}

.row {
display: table-row;
background: #999;
box-shadow: 0 0 50px #000;
}

.row-red {
display: table-row;
background: #999;
box-shadow: 0 0 50px red;
}

.row-green {
display: table-row;
background: #999;
box-shadow: 0 0 50px green;
}

.row-blue {
display: table-row;
background: #999;
box-shadow: 0 0 50px blue;
}

.cell {
display: table-cell;
width: 200px;
height: 200px;
}
</style>
</head>
<body>

<div class="table">
<div class="row">
<div class="cell"></div>
</div>
</div>

<div class="table">
<div class="row">
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
</div>
</div>

<div class="table">
<div class="row-red">
<div class="cell"></div>
</div>
<div class="row-green">
<div class="cell"></div>
</div>
<div class="row-blue">
<div class="cell"></div>
</div>
</div>

</body>
</html>
Loading