Bug 1705189 [wpt PR 28482] - [TablesNG] Tentative baseline tests, a=testonly
authorAleks Totic <atotic@chromium.org>
Fri, 23 Apr 2021 10:16:59 +0000
changeset 577241 29b3c96abe795202a19abb3f4f52ce48c6885902
parent 577240 93ec388cd51d027b9189d1fbb830f01be59cbf53
child 577242 64f912b7c65ee1551a639fbd706b9e95a80867e1
push id141827
push userwptsync@mozilla.com
push dateSat, 24 Apr 2021 02:11:12 +0000
treeherderautoland@3a7d9d49c316 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1705189, 28482, 2823578, 872548
milestone90.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1705189 [wpt PR 28482] - [TablesNG] Tentative baseline tests, a=testonly Automatic update from web-platform-tests [TablesNG] Tentative baseline tests More upstreaming of master table patch tests. Change-Id: I4bc78ea05a5041f7adf7eb57de5b2f4c9a210098 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2823578 Commit-Queue: Aleks Totic <atotic@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#872548} -- wpt-commits: 7011e122cd3f56a6269668eb0fd3f4c5a2488788 wpt-pr: 28482
testing/web-platform/tests/css/css-tables/tentative/baseline-table.html
testing/web-platform/tests/css/css-tables/tentative/baseline-td.html
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-tables/tentative/baseline-td.html
@@ -0,0 +1,111 @@
+<!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>TD baseline</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" type="text/css" href="./support/tables-ng.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>
+  table {
+    background: #AAA;
+    border-spacing: 8px 0px;
+  }
+  td {
+    padding: 0;
+    background: #BFB;
+  }
+  .ahem {
+    font: 25px/2 Ahem;
+  }
+  .ahem td, .ahem .display-cell {
+    font: 25px/2 Ahem;
+    color: rgba(0,120,0, 0.5);
+  }
+  .vgrad {
+    background: linear-gradient(180deg, #DDD 0%, #DDD 60%, #999 60%, #999 100%) !important;
+  }
+  .m {
+    display:inline-block;
+  }
+  .display-table {
+    display:table;
+    background: #AAA;
+    border-spacing: 8px 0px;
+  }
+  .display-cell {
+    display:table-cell;
+    padding: 0;
+  }
+</style>
+<main>
+<h2>&lt;TD&gt; baseline tests</h2>
+
+<p class="testdesc">All the baseline values.
+Many text values map to plain baseline. </p>
+<table style="height:100px" class="ahem vgrad">
+  <td style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></td>
+  <td style="" title="default"><div class="m" data-offset-y=25>Xp</div></td>
+  <td style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></td>
+  <td style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></td>
+  <td style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></td>
+  <td style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></td>
+  <td style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></td>
+  <td style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></td>
+  <td style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></td>
+  <td style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></td>
+  <td style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></td>
+  <td style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></td>
+</table>
+
+<p class="testdesc">All the baseline values.
+Same as test before, but use display:table/table-cell. Default td alignment is baseline, not middle.</p>
+<div style="height:100px;position:relative" class="ahem vgrad display-table">
+  <div class="display-cell" style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></div>
+  <div class="display-cell" style="" title="default"><div class="m" data-offset-y=28>Xp</div></div>
+  <div class="display-cell" style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></div>
+  <div class="display-cell" style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></div>
+  <div class="display-cell" style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></div>
+  <div class="display-cell" style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></div>
+  <div class="display-cell" style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></div>
+  <div class="display-cell" style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></div>
+  <div class="display-cell" style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></div>
+  <div class="display-cell" style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></div>
+  <div class="display-cell" style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></div>
+  <div class="display-cell" style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></div>
+</div>
+
+
+<p class="testdesc">Baselines with %ge children</p>
+<p class="error">FF/Edge fails here</p>
+<div>
+  inline table
+  <table style="height:100px;position:relative;display:inline-table">
+    <td style="vertical-align:baseline">
+      <div style="width:100px;height:50%;background:rgba(0,120,0, 0.5)" data-offset-y=30></div>
+    </td>
+     <td style="vertical-align:baseline">
+      <div style="width:100px;height:80%;background:rgba(0,120,0, 0.5)" data-offset-y=0></div>
+    </td>
+  </table>
+</div>
+<p class="testdesc">Baseline and td height
+If td is baseline aligned, and has a height, how tall should the td be?
+</p>
+<p class="error">Legacy/FF apply height to below baseline?. With baseline alignment, this makes the cell taller.</p>
+<table style="border: 1px solid black" data-expected-height=202>
+  <tr>
+    <td style="vertical-align:baseline;height:200px">base</td>
+    <td style="vertical-align:baseline">
+      <div style="background:yellow;width:50px;height:100px"></div>
+    </td>
+  </tr>
+</table>
+</main>
+<script>
+  checkLayout("table, .display-table");
+</script>
+