summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-tables/tentative/baseline-table.html')
-rw-r--r--testing/web-platform/tests/css/css-tables/tentative/baseline-table.html179
1 files changed, 179 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html b/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html
new file mode 100644
index 0000000000..1507bf656f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html
@@ -0,0 +1,179 @@
+<!doctype html>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<script src="/resources/check-layout-th.js"></script>
+<meta name="flags" content="ahem">
+<title>TABLE baseline</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/" />
+<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" />
+<style>
+ main table {
+ display: inline-table;
+ border: 15px solid green;
+ background: gray;
+ width: 0px;
+ height: 0px;
+ vertical-align:baseline;
+ border-spacing: 0;
+ }
+ main td {
+ background: #BFB;
+ padding: 4px;
+ }
+ main td > div {
+ display: inline-block;
+ background: rgba(56,162,56,0.3);
+ }
+ .container {
+ position: relative;
+ outline: black dotted 1px;
+ height: 100px;
+ width: 400px;
+ font: 50px/1 Ahem; /* baseline is 40px */
+ }
+</style>
+<main>
+<h2>&lt;TABLE&gt; baseline tests</h2>
+
+<p>Empty table's baseline is bottom of table's border box.</p>
+<div class="container">
+ Xp<table data-offset-y="10">
+ </table>
+</div>
+
+<p>Empty body's baseline is bottom of table's border box.</p>
+<div class="container">
+ Xp<table data-offset-y="10">
+ <tbody>
+ </tbody>
+ </table>
+</div>
+
+<p>Empty row's baseline is center of the row.</p>
+<div class="container">
+ Xp<table data-offset-y="25">
+ <tbody>
+ <tr></tr>
+ </tbody>
+ </table>
+</div>
+
+<p>First row defines baseline even if empty.</p>
+<div class="container">
+ Xp<table style="font: 12px fixed" data-offset-y="25">
+ <tbody>
+ <tr></tr>
+ <tr><td>1,0</td></tr>
+ </tbody>
+ </table>
+</div>
+
+<p>Cell's baseline defined row's baseline only if cell is vertical-align:baseline.</p>
+<div class="container">
+ Xp<table style="font-size: 24px" data-offset-y="2">
+ <tbody>
+ <tr><td style="vertical-align:baseline">Xp</td></tr>
+ </tbody>
+ </table></div>
+</div>
+<div class="container">
+ Xp<table style="font-size:24px" data-offset-y="0">
+ <tbody>
+ <tr><td style="vertical-align:middle">Xp</td></tr>
+ </tbody>
+ </table>
+</div>
+
+
+<p>Table's vertical-align: top.</p>
+<div class="container">
+ Xp<table style="vertical-align:top" data-offset-y="0"></table>
+</div>
+
+<p>Table's vertical-align: middle. </p>
+<div class="container">
+ Xp<table style="vertical-align:middle" data-offset-y="5"></table>
+</div>
+
+<p>Table's vertical-align: bottom. </p>
+<div class="container">
+ Xp<table style="vertical-align:bottom" data-offset-y="20"></table>
+</div>
+
+<p>Table's top/middle/bottom combined. </p>
+<div class="container">
+ Xp<table style="vertical-align:top" data-offset-y="0"></table>
+ <table style="vertical-align:middle" data-offset-y="5"></table>
+ <table style="vertical-align:bottom" data-offset-y="20"></table>
+</div>
+
+<p>Two rows empty, 1st row has css height.</p>
+<div class="container">
+ Xp<table data-offset-y=25 data-expected-height=50>
+ <tr style="height:20px"></tr>
+ <tr></tr>
+ </table>
+</div>
+
+<p>First row empty with css height, 2 row has content, </p>
+<div class="container">
+ Xp<table data-offset-y=25 data-expected-height=68>
+ <tr style="height:20px"></tr>
+ <tr><td style="font-size:10px">X</td></tr>
+ </table>
+</div>
+
+<p>Empty rowspanned cells should not set baseline. This test might not be per-spec, distribution of empty cells over empty rows differs between browsers.</p>
+<div class="container">
+ Xp<table>
+ <tr>
+ <td rowspan=2 style="height:80px"></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td></td>
+ </tr>
+ </table><div style="display:inline-block" data-offset-y=15>pX</div>
+</div>
+
+<p>Block level table inside inline block does not produce a baseline.</p>
+<div class="container" style="font: 10px/1 Ahem;width:500px">
+ Xp<br>Xp<table
+ title="inline table produces a baseline"
+ data-offset-y=33><td style="vertical-align:baseline">Xp</td></table>
+ <div style="display:inline-block;height:50px;background:yellow;width:50px;"
+ title="empty inline block baseline is bottom of the block"
+ data-offset-y=10
+ ></div>
+ <div style="display:inline-block;height:50px;background:yellow;width:50px;"
+ title="inline block's content defines its baseline"
+ data-offset-y=52
+ >X</div>
+ <div style="display:inline-block;height:50px;background:yellow"
+ title="table inside inline block does not produce a baseline"
+ data-offset-y=10
+ ><table style="display:table"><td style="vertical-align:baseline">X</td></table></div>
+ <div style="display:inline-block;height:50px;background:yellow"
+ title="but inline table inside inline block does produce a baseline"
+ data-offset-y=33
+ ><table style="display:inline-table"><td style="vertical-align:baseline">X</td></table></div>
+</div>
+
+<!-- anonymous-table-no-baseline-align replica -->
+<p>Anonymous tables should not generate baselines</p>
+<div class="container">Xp
+ <div style="height:60px;width:100px;display:inline-block;background:green"
+ data-offset-y=0>
+ <div style="display:table-cell;vertical-align:middle;color:yellow">&nbsp;</div>
+ </div>
+ <div style="height:60px;width:100px;display:inline-block;background:green"
+ data-offset-y=0>
+ <div style="display:table-cell;vertical-align:middle;color:yellow">>&nbsp;<br>&nbsp;<br></div>
+ </div>
+</div>
+</main>
+<script>
+ checkLayout(".container");
+</script>