Blitz - WPT: inline-table-inline-block-baseline-vert-rl-synthesis.tentative.html

wpt / css / css-align / baseline-rules / inline-table-inline-block-baseline-vert-rl-synthesis.tentative.html

/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-synthesis.tentative.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<title>CSS Box Alignment Test: inline-block and inline-table baseline synthesis</title>
<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export">
<link rel="match" href="inline-table-inline-block-baseline-vert-rl-synthesis-ref.tentative.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
body {
    font: 20px/1 Ahem;
}
.container {
    display: flex;
    outline: solid 1px black;
    writing-mode: vertical-rl;
}
.baseline-first {
    align-items: first baseline;
}
.baseline-last {
    align-items: last baseline;
}
.block {
    display: inline-block;
    color: black;
}
.table {
    display: inline-table;
    font-size: 40px;
    margin-block: 40px;
}

/**
 * Table cells with a vertical-align/alignment-baseline other than `baseline`
 * removes the cell from baseline content-alignment participation. The row's
 * baseline is then synthesized from the content boxes of its cells. See:
 *  - https://www.w3.org/TR/css-align-3/#baseline-align-content
 *  - https://www.w3.org/TR/CSS2/tables.html#height-layout (CSS2)
 */
.first td {
    vertical-align: top;
    width: 80px;
    background: deepskyblue;
    color: yellowgreen;
}
.last td {
    vertical-align: bottom;
    width: 80px;
    background: deeppink;
    color: darkviolet;
}
</style>
<body>
<div class="container baseline-first">
    <div class="block">A</div><table class="table" cellspacing="0" cellpadding="0"><tr class="first"><td>B<tr class="last"><td>C</table>
</div>
<div class="container baseline-last">
    <table class="table" cellspacing="0" cellpadding="0"><tr class="first"><td>B<tr class="last"><td>C</table><div class="block">A</div>
</div>
</body>
</html>

/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-synthesis-ref.tentative.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<title>CSS Box Alignment Test: inline-block and inline-table baseline synthesis</title>
<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export">
<link rel="stylesheet" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
.container {
    outline: solid 1px black;
    width: 240px;
    height: 60px;
}
.block {
    background: black;
    width: 20px;
    height: 20px;
}
.baseline-first .block {
    margin-left: 150px;
}
.baseline-last .block {
    margin-left: 70px;
}
.table {
    background: linear-gradient(to left,
        yellowgreen 0% 25%,
        deepskyblue 25% 50%,
        deeppink 50% 75%,
        darkviolet 75% 100%);
    width: 160px;
    height: 40px;
    margin-left: 40px;
}
</style>
<body>
<div class="container baseline-first">
    <div class="block"></div>
    <div class="table"></div>
</div>
<div class="container baseline-last">
    <div class="table"></div>
    <div class="block"></div>
</div>
</body>
</html>