Commit 13691f1b authored by Ian Kilpatrick's avatar Ian Kilpatrick Committed by moz-wptsync-bot
Browse files

Bug 1791612 [wpt PR 35976] - [last-baseline] Propagate last-baseline from tables., a=testonly 

Automatic update from web-platform-tests
[last-baseline] Propagate last-baseline from tables.

For more details see:
https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627

Effectively we should propagate the last-baseline from the last
table-row (we ignore caption baselines for example).

If the row is baseline aligned (using vertical-align: baseline) this
becomes the first & last baseline (until we support
"align-content: last baseline"), otherwise we use the lowest
content-edge.

Bug: 885175
Change-Id: Id9de2f8baff5511fd4da2cef3f056c1bac0fc112
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3907838


Reviewed-by: default avatarDavid Grogan <dgrogan@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1049240}

--

wpt-commits: 55e1c625687971d6e9ad0836127bb2f679f33123
wpt-pr: 35976
parent 47e427a3

testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-001.html

0 → 100644
+95 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">

<style>

.target {

  display: flex;

  position: relative;

}

.target > div, td {

  background: hotpink;

  font-size: 20px;

  line-height: 0;

}

table { border-spacing: 0; }

td { padding: 5px; min-width: 5px; min-height: 5px; }

caption {

  margin: 10px;

  background: lime;

  block-size: 20px;

}

span {

  display: inline-block;

  width: 1em;

  height: 1em;

  outline: solid cyan 3px;

  outline-offset: -3px;

}

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.target > *')">



<div class="target" style="align-items: first baseline;">

  <div data-offset-y="45"><span></span></div>

  <table data-offset-y="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>



<div class="target" style="align-items: last baseline;">

  <div data-offset-y="95"><span></span></div>

  <table data-offset-y="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>



<div class="target" style="align-items: first baseline;">

  <div data-offset-y="20"><span></span></div>

  <table data-offset-y="0">

    <tr>

      <td style="border: solid 10px;"></td>

      <td style="border: solid 5px;"></td>

      <td style="border: solid 20px;"></td>

    </tr>

    <tr>

      <td style="border: solid 10px;"></td>

      <td style="border: solid 5px;"></td>

      <td style="border: solid 20px;"></td>

    </tr>

  </table>

</div>



<div class="target" style="align-items: last baseline;">

  <div data-offset-y="70"><span></span></div>

  <table data-offset-y="0">

    <tr>

      <td style="border: solid 10px;"></td>

      <td style="border: solid 5px;"></td>

      <td style="border: solid 20px;"></td>

    </tr>

    <tr>

      <td style="border: solid 10px;"></td>

      <td style="border: solid 5px;"></td>

      <td style="border: solid 20px;"></td>

    </tr>

  </table>

</div>

testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-002.html

0 → 100644
+64 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">

<style>

.target {

  display: flex;

  position: relative;

  writing-mode: vertical-rl;

}

.target > div, td {

  background: hotpink;

  font-size: 20px;

  line-height: 0;

}

table { border-spacing: 0; }

td { padding: 5px; min-width: 5px; min-height: 5px; }

caption {

  margin: 10px;

  background: lime;

  block-size: 20px;

}

span {

  display: inline-block;

  width: 1em;

  height: 1em;

  outline: solid cyan 3px;

  outline-offset: -3px;

}

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.target > *')">



<div class="target" style="align-items: first baseline;">

  <div data-offset-x="115"><span></span></div>

  <table data-offset-x="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>



<div class="target" style="align-items: last baseline;">

  <div data-offset-x="65"><span></span></div>

  <table data-offset-x="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>

testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-003.html

0 → 100644
+64 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">

<style>

.target {

  display: flex;

  position: relative;

  writing-mode: vertical-lr;

}

.target > div, td {

  background: hotpink;

  font-size: 20px;

  line-height: 0;

}

table { border-spacing: 0; }

td { padding: 5px; min-width: 5px; min-height: 5px; }

caption {

  margin: 10px;

  background: lime;

  block-size: 20px;

}

span {

  display: inline-block;

  width: 1em;

  height: 1em;

  outline: solid cyan 3px;

  outline-offset: -3px;

}

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.target > *')">



<div class="target" style="align-items: first baseline;">

  <div data-offset-x="45"><span></span></div>

  <table data-offset-x="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>



<div class="target" style="align-items: last baseline;">

  <div data-offset-x="95"><span></span></div>

  <table data-offset-x="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>

testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html

0 → 100644
+97 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">

<style>

.target {

  display: grid;

  grid-auto-flow: column;

  justify-items: start;

  position: relative;

}

.target > div, td {

  background: hotpink;

  font-size: 20px;

  line-height: 0;

}

table { border-spacing: 0; }

td { padding: 5px; min-width: 5px; min-height: 5px; }

caption {

  margin: 10px;

  background: lime;

  block-size: 20px;

}

span {

  display: inline-block;

  width: 1em;

  height: 1em;

  outline: solid cyan 3px;

  outline-offset: -3px;

}

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.target > *')">



<div class="target" style="align-items: first baseline;">

  <div data-offset-y="45"><span></span></div>

  <table data-offset-y="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>



<div class="target" style="align-items: last baseline;">

  <div data-offset-y="95"><span></span></div>

  <table data-offset-y="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>



<div class="target" style="align-items: first baseline;">

  <div data-offset-y="20"><span></span></div>

  <table data-offset-y="0">

    <tr>

      <td style="border: solid 10px;"></td>

      <td style="border: solid 5px;"></td>

      <td style="border: solid 20px;"></td>

    </tr>

    <tr>

      <td style="border: solid 10px;"></td>

      <td style="border: solid 5px;"></td>

      <td style="border: solid 20px;"></td>

    </tr>

  </table>

</div>



<div class="target" style="align-items: last baseline;">

  <div data-offset-y="70"><span></span></div>

  <table data-offset-y="0">

    <tr>

      <td style="border: solid 10px;"></td>

      <td style="border: solid 5px;"></td>

      <td style="border: solid 20px;"></td>

    </tr>

    <tr>

      <td style="border: solid 10px;"></td>

      <td style="border: solid 5px;"></td>

      <td style="border: solid 20px;"></td>

    </tr>

  </table>

</div>

testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html

0 → 100644
+66 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">

<style>

.target {

  display: grid;

  grid-auto-flow: column;

  justify-items: start;

  position: relative;

  writing-mode: vertical-rl;

}

.target > div, td {

  background: hotpink;

  font-size: 20px;

  line-height: 0;

}

table { border-spacing: 0; }

td { padding: 5px; min-width: 5px; min-height: 5px; }

caption {

  margin: 10px;

  background: lime;

  block-size: 20px;

}

span {

  display: inline-block;

  width: 1em;

  height: 1em;

  outline: solid cyan 3px;

  outline-offset: -3px;

}

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.target > *')">



<div class="target" style="align-items: first baseline;">

  <div data-offset-x="115"><span></span></div>

  <table data-offset-x="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>



<div class="target" style="align-items: last baseline;">

  <div data-offset-x="65"><span></span></div>

  <table data-offset-x="0">

    <caption>top</caption>

    <tr style="vertical-align: baseline;">

      <td style="font-size: 10px;"><span></span><br><span></span></td>

      <td><span></span><br><span></span></td>

    </tr>

    <tr style="vertical-align: baseline;">

      <td><span></span><br><span></span></td>

      <td style="font-size: 10px;"><span></span><br><span></span></td>

    </tr>

    <caption style="caption-side: bottom;">bottom</caption>

  </table>

</div>