diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-tables/tentative/paint')
12 files changed, 575 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html new file mode 100644 index 0000000000..b3b1ce9ff3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(90deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 170px, blue 170px); + background-repeat: no-repeat; + background-size: 50px 200px; + } + main * { + box-sizing: border-box; + } + .td { + width: 50px; + height: 50px; + position:absolute; + } +</style> + +<main> +<div style="position: relative;border: 10px solid transparent; width:210px; height: 210px"> + <div class="td bg" style="top:-5px;left:-5px;height:200px"></div> + <div class="td bg" style="top:-5px;left:45px;height:200px"></div> + <div class="td" style="background:var(--peek); height:100px; left:95px;top:45px"></div> + <div class="td bg" style="top:-5px;left:145px;height:200px;width:100px;background-size: 100px 200px"></div> +</div> + +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html new file mode 100644 index 0000000000..6e6ae7a82c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>Table collapsed column background image geometry</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="background-image-column-collapsed-ref.html" /> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(90deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 170px, blue 170px); + background-repeat: no-repeat; + } + main * { + box-sizing: border-box; + } + main table { + border-spacing: 10px; + border: 10px solid transparent; + padding: 10px; + border-collapse: collapse; + } + main table:hover { + border: 10px solid yellow; + } + main td { + width: 50px; + height: 50px; + padding: 0px; + } +</style> +<body> +<main> + <table> + <col class="bg"> + <col class="bg"> + <col> + <colgroup class="bg" span="2"> + <tr> + <td rowspan=4></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td rowspan=2 colspan=2></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> +</main> +</body> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html new file mode 100644 index 0000000000..5b04f0074c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html @@ -0,0 +1,44 @@ +<!doctype html> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 220px, blue 220px); + background-repeat: no-repeat; + background-size: 50px 230px; + } + main * { + box-sizing: border-box; + } + .td { + width: 50px; + height: 50px; + position:absolute; + border: 4px solid black; + } +</style> + +<main> +<div style="position: relative;border: 10px solid yellow; width:290px; height: 290px"> + <!-- row 1 --> + <div class="td bg" style="top:20px;left:20px;height:230px"></div> + <div class="td bg" style="top:20px;left:80px;"></div> + <div class="td" style="top:20px; left: 140px;"></div> + <div class="td" style="top:20px; left: 200px;"></div> + <!-- row 2 + additional -4 offsets on background-position are for borders. + columns do not have borders. + --> + <div class="td bg" style="top:80px;left:80px;width:110px;height:110px;background-position-y:-64px;background-position-x:-4px"></div> + <div class="td" style="top:80px; left: 200px;"></div> + <!-- row 3 --> + <div class="td" style="top:140px; left: 200px;"></div> + <!-- row 4 --> + <div class="td bg" style="top:200px;left:80px;background-position-y:-180px"></div> + <div class="td" style="top:200px; left: 140px;"></div> + <div class="td" style="top:200px; left: 200px;"></div> +</div> + +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html new file mode 100644 index 0000000000..c795aac5ea --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>Table column background image geometry</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="background-image-column-ref.html" /> +<meta name="assert" content="Column backgrounds get painted into cells with correct geometry."> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 220px, blue 220px); + background-repeat: no-repeat; + } + main * { + box-sizing: border-box; + } + main table { + border-spacing: 10px; + border: 10px solid yellow; + padding: 10px; + } + main td { + width: 50px; + height: 50px; + padding: 0px; + border: 4px solid black; + } +</style> +<body> +<main> + <table> + <col class="bg"> + <col class="bg"> + <tr> + <td rowspan=4></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td rowspan=2 colspan=2></td> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + </table> +</main> +</body> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html new file mode 100644 index 0000000000..8ab0992e08 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html @@ -0,0 +1,60 @@ +<!doctype html> +<style> + body { + --peek: LightGreen; + --border: transparent; + margin:0; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%); + background-size: 200px 50px; + background-repeat: no-repeat; /* FF defaults to no-repeat, Chrome to repeat */ + } + main > * { + box-sizing: border-box; + } + .table { + width: 200px; + position: relative; + margin-top: 5px; + margin-left:5px; + } + .row { + width: 200px; + height: 50px; + } + .cell { + width: 50px; + height: 50px; + display: inline-block; + vertical-align: top; + } + .bigsquarecell { + width: 100px; + height: 100px; + display: inline-block; + vertical-align: top; + background-position-x: -50px; + } + .c2 { + background-position-x: -50px + } + .c3 { + background-position-x: -100px; + } + .c4 { + background-position-x: -150px; + } + .bottomrow > .cell { + margin-top: 5px; + } +</style> +<main> +<div class="table"> +<div class="row bg"></div> +<div><div class="cell firstcell bg"></div><div class="bigsquarecell bg"></div><div class="cell c4 bg"></div></div> +<div class="row bg"></div> +<div style="position:absolute;top:-5px;left:-5px;bottom:-5px;right:-5px;border: 10px solid var(--border)"></div> +</div> +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html new file mode 100644 index 0000000000..c70c6abd92 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>Collapsed table row background image geometry</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="background-image-row-collapsed-ref.html" /> +<style> + body { + --peek: LightGreen; + --border: transparent; + margin:0; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%); + background-repeat: no-repeat; + } + main * { + box-sizing: border-box; + } + main table { + border: 10px solid var(--border); + border-collapse: collapse; + } + main td { + width: 50px; + height: 50px; + padding: 0px; + } +</style> +<body> +<main> + <table> + <tr class="bg"> + <td colspan=4></td> + </tr> + <tr class="bg"> + <td></td> + <td rowspan=2 colspan=2></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + <tr class="bg"> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> +</main> +</body> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html new file mode 100644 index 0000000000..1150a63e17 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html @@ -0,0 +1,68 @@ +<!doctype html> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%); + background-size: 230px 50px; + background-repeat: no-repeat; /* FF defaults to no-repeat, Chrome to repeat */ + } + main > * { + box-sizing: border-box; + } + .table { + border: 10px solid yellow; + padding: 10px; + width: 290px; + } + .row { + margin-left: 10px; + margin-top: 10px; + width: 230px; + height: 50px; + } + .cell { + margin: 10px; + margin-right: 5px; + margin-left: 5px; + width: 50px; + height: 50px; + display: inline-block; + vertical-align: top; + } + .firstcell { + margin-left: 10px; + } + .bigsquarecell { + margin:10px; + margin-left: 5px; + margin-right: 5px; + margin-bottom: 5px; + width: 110px; + height: 110px; + display: inline-block; + vertical-align: top; + background-position-x: -60px; + } + .c2 { + background-position-x: -60px + } + .c3 { + background-position-x: -120px; + } + .c4 { + background-position-x: -180px; + } + .bottomrow > .cell { + margin-top: 5px; + } +</style> +<main> +<div class="table"> +<div class="row bg"></div> +<div><div class="cell firstcell bg"></div><div class="bigsquarecell bg"></div><div class="cell c4 bg"></div></div> +<div class="bottomrow"><div class="cell firstcell bg"></div><div class="cell c2 bg"></div><div class="cell c3 bg"></div><div class="cell c4 bg"></div> +</div> +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html new file mode 100644 index 0000000000..69105e6937 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>Table row background image geometry</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="background-image-row-ref.html" /> +<meta name="assert" content="Row backgrounds get painted into cells with correct geometry."> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%); + background-size: 230px 50px; + background-repeat: no-repeat; + /* FF sometimes defaults to no-repeat for background images */ + } + main > * { + box-sizing: border-box; + } + main table { + border-spacing: 10px; + border: 10px solid yellow; + padding: 10px; + } + main td { + width: 50px; + height: 50px; + padding: 0px; + } +</style> +<body> +<main> + <table> + <tr class="bg"> + <td colspan=4></td> + </tr> + <tr class="bg"> + <td></td> + <td rowspan=2 colspan=2></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + <tr class="bg"> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> +</main> +</body> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html new file mode 100644 index 0000000000..40d80cac48 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<style> +body { + --bluetrans: rgba(0,0,255,0.5); + --yellowtrans: rgba(255,255, 0, 0.5); + --orangetrans: rgba(255,165,0,0.5); + --greentrans: rgba(0,255,0, 0.5); +} +body * { + box-sizing: border-box; +} +#container > * { + position:absolute; +} +</style> +<div id="container" style="position:relative;width:200px;height:200px"> + <!-- blues --> + <div style="width:56px;height:150px;background:var(--bluetrans);border: 6px solid blue;border-bottom:none;"></div> + <div style="width:56px;height:56px;top:150px;background:var(--bluetrans);border-left: 6px solid blue;border-bottom:6px solid blue;"></div> + <!-- green --> + <div style="width:94px;height:55px;top:51px;left:56px;background:var(--greentrans);border-top:4px solid green;"></div> + <div style="width:99px;height:44px;top:106px;left:56px; + background:var(--greentrans);border-right:4px solid green;"></div> + <!-- yellow --> + <div style="width:56px;height:56px;top:50px;left:150px;background:var(--yellowtrans);border:6px solid yellow"></div> + <!-- orange --> + <div style="width:156px;height:56px;top:150px;left:50px;background:var(--orangetrans);border: 6px solid orange"></div> + <!-- transparent --> + <div style="width:48px;height:49px;top:2px;left:56px;border-top: 2px solid black;border-right:2px solid black"></div> + <div style="width:50px;height:48px;top:2px;left:104px;border-top: 2px solid black;border-right:2px solid black"></div> + <div style="width:50px;height:48px;top:2px;left:154px;border-top: 2px solid black;border-right:2px solid black"></div> + <div style="width:50px;height:44px;top:106px;left:154px;border-right:2px solid black"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html new file mode 100644 index 0000000000..60e1390b7b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>Collapsed borders of large cells</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="collapsed-border-large-cell-ref.html" /> +<meta name="assert" content="Collapsed borders of large cells can collapse a single edge."> +<style> +main * { + box-sizing: border-box; +} +main table { + border-collapse: collapse; +} +main td { + padding:0px; + width: 50px; + height:50px; + border: 2px solid black; +} +</style> +<main> + <table> + <colgroup style="border:6px solid blue;background:rgba(0,0,255,0.5);"></colgroup> + <tr> + <td rowspan=4></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td rowspan=2 colspan=2 style="border:4px solid green; background: rgba(0,255,0, 0.5);"></td> + <td style="border: 6px solid yellow;background:rgba(255,255, 0, 0.5)"></td> + </tr> + <td></td> + <tr> + <td colspan=3 style="border:6px solid orange;background:rgba(255,165,0,0.5)"></td> + </tr> + </table> +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html new file mode 100644 index 0000000000..fca7b4196c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<style> +main * { + box-sizing: border-box; +} +main .table { + overflow: hidden; + border: 20px solid green; + width:90px; +} +main .caption { + height: 30px; + background: lightblue; + width:90px; + text-align: center; +} +main .cell { + padding:0px; + width: 50px; + height:50px; +} +</style> +<main> + <div class="table"> + <div class="cell"> + <div style="width:50px;height:50px"> + <div style="width:500px;height:500px;background:pink"></div> + </div> + </div> + </div> +<div class="caption" style="caption-side:bottom">caption</caption> +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html new file mode 100644 index 0000000000..dc252b1652 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>Overflow hidden and captions</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#global-style-overrides" /> +<link rel="match" href="overflow-hidden-table-ref.html" /> +<meta name="assert" content="Overflow hidden clips table grid, but not captions."> +<style> +main * { + box-sizing: border-box; +} +main table { + overflow: hidden; + border: 20px solid green; + border-spacing: 0px; +} +main caption { + height: 30px; + background: lightblue; +} +main td { + padding:0px; + width: 50px; + height:50px; +} +</style> +<main> + <table> + <tr> + <td> + <div style="width:50px;height:50px"> + <div style="width:500px;height:500px;background:pink"></div> + </div> + </td> + </tr> + <caption style="caption-side:bottom">caption</caption> + </table> +</main> |