diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-align/baseline-rules | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-align/baseline-rules')
13 files changed, 686 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number-ref.html new file mode 100644 index 0000000000..dc91342cc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset=utf-8> + <title>Reference baseline alignment of inline-grid with an INPUT type=number item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> + +.grid { + display: inline-block; + line-height: 0; + border: 5px solid; + padding: 1px 0 3px 0; + margin: 11px 0; +} + +input { -webkit-appearance:none; inline-size:4ch; } + +.big { + font-size: 4em; +} + +.small { + font-size: 0.2em; +} + +.vlr { writing-mode: vertical-lr; } + </style> +</head> +<body> + +<div> + <span class="big">B</span> + <div class="grid"><input type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div class="vlr"> +<div> + <span class="big">B</span> + <div class="grid"><input type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" type="number" value="9"></div> + <span class="small">B</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number.html b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number.html new file mode 100644 index 0000000000..9b9735c7be --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset=utf-8> + <title>Test baseline alignment of inline-grid with an INPUT type=number item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/"> + <link rel="match" href="grid-item-input-type-number-ref.html"> + <style> + +.grid { + display: inline-grid; + border: 5px solid; + padding: 1px 0 3px 0; + margin: 11px 0; +} + +input { -webkit-appearance:none; inline-size:4ch; } + +.big { + font-size: 4em; +} + +.small { + font-size: 0.2em; +} + +.vlr { writing-mode: vertical-lr; } + </style> +</head> +<body> + +<div> + <span class="big">B</span> + <div class="grid"><input type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div class="vlr"> +<div> + <span class="big">B</span> + <div class="grid"><input type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" type="number" value="9"></div> + <span class="small">B</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text-ref.html new file mode 100644 index 0000000000..e6d2786c5e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset=utf-8> + <title>Reference baseline alignment of inline-grid with an INPUT type=text item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> + +.grid { + display: inline-block; + line-height: 0; + border: 5px solid; + padding: 1px 0 3px 0; + margin: 11px 0; +} + +input { -webkit-appearance:none; inline-size:4ch; } + +.big { + font-size: 4em; +} + +.small { + font-size: 0.2em; +} + +.vlr { writing-mode: vertical-lr; } + </style> +</head> +<body> + +<div> + <span class="big">B</span> + <div class="grid"><input value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" value="9"></div> + <span class="small">B</span> +</div> + +<div class="vlr"> +<div> + <span class="big">B</span> + <div class="grid"><input value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" value="9"></div> + <span class="small">B</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text.html b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text.html new file mode 100644 index 0000000000..526dcbae6a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset=utf-8> + <title>Test baseline alignment of inline-grid with an INPUT type=text item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/"> + <link rel="match" href="grid-item-input-type-text-ref.html"> + <style> + +.grid { + display: inline-grid; + border: 5px solid; + padding: 1px 0 3px 0; + margin: 11px 0; +} + +input { -webkit-appearance:none; inline-size:4ch; } + +.big { + font-size: 4em; +} + +.small { + font-size: 0.2em; +} + +.vlr { writing-mode: vertical-lr; } + </style> +</head> +<body> + +<div> + <span class="big">B</span> + <div class="grid"><input value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" value="9"></div> + <span class="small">B</span> +</div> + +<div class="vlr"> +<div> + <span class="big">B</span> + <div class="grid"><input value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" value="9"></div> + <span class="small">B</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-ref.html new file mode 100644 index 0000000000..a255bee30f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html> +<title>CSS Box Alignment Test: inline-block and inline-table baselines</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"> +<style> +.container { + border: solid 1px black; +} +.block { + display: inline-block; + background: aqua; +} +.table { + display: inline-table; + font-size: 40px; + background: tan; +} +.margin { + margin-block-start: 50px; +} +</style> +<body> +<div class="container"> +<div class="margin"> + <div class="block">aaa</div> + <table class="table" cellspacing="0" cellpadding="0"><td>bbb</table> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-ref.html new file mode 100644 index 0000000000..37abf9d4af --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-ref.html @@ -0,0 +1,33 @@ +<!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"> +<style> +.container { + border: solid 1px black; + writing-mode: vertical-rl; +} +.block { + display: inline-block; + background: aqua; +} +.table { + display: inline-table; + font-size: 40px; + background: tan; +} +.margin { + margin-block-start: 50px; +} +</style> +<body> +<div class="container"> +<div class="margin"> + <div class="block">aaa</div> + <table class="table" cellspacing="0" cellpadding="0"><td>bbb</table> +</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl.html b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl.html new file mode 100644 index 0000000000..c0a6e2f12c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl.html @@ -0,0 +1,30 @@ +<!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-ref.html"> +<style> +.container { + border: solid 1px black; + writing-mode: vertical-rl; +} +.block { + display: inline-block; + background: aqua; +} +.table { + display: inline-table; + font-size: 40px; + background: tan; + margin-block-start: 50px; +} +</style> +<body> +<div class="container"> + <div class="block">aaa</div> + <table class="table" cellspacing="0" cellpadding="0"><td>bbb</table> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline.html b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline.html new file mode 100644 index 0000000000..be9acc58cd --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html> +<title>CSS Box Alignment Test: inline-block and inline-table baselines</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-ref.html"> +<style> +.container { + border: solid 1px black; +} +.block { + display: inline-block; + background: aqua; +} +.table { + display: inline-table; + font-size: 40px; + background: tan; + margin-block-start: 50px; +} +</style> +<body> +<div class="container"> + <div class="block">aaa</div> + <table class="table" cellspacing="0" cellpadding="0"><td>bbb</table> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html new file mode 100644 index 0000000000..af2dac4cc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Synthesized baseline flexbox</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline"> +<meta name="flags" content="ahem"> +<meta name="assert" content="This test check the synthesized of a flexbox container if it has no items (it should use the flex container margin box) or if the items have no baseline (in that case it should use the flex item's border box)."> +<style> +.wrapper { + border: solid thick; + position: relative; + width: 200px; + height: 150px; + margin: 10px; +} +canvas { + width: 100px; + height: 100px; + background: blue; +} +.magenta-dotted-border { + border: 5px dotted magenta; +} +.border-padding-margin { + border: 10px solid cyan; + padding: 15px; + margin: 20px 0px; + background: yellow; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.wrapper')"> + +<div id="log"></div> + +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-flex;" class="border-padding-margin" + data-offset-y="30"></div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="5"> + <div style="display: inline-flex;" class="border-padding-margin" + data-offset-y="30"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="0"> + <div style="display: flex;" class="border-padding-margin" + data-offset-y="25"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-flex;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="25"> + <div style="display: flex;" + data-offset-y="30"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> + </div> +</div> +<div class="wrapper" style="display: flex; align-items: baseline;"> + <canvas></canvas> + <div style="display: inline-flex;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> +<div class="wrapper" style="display: flex; align-items: baseline;"> + <canvas></canvas> + <div style="display: flex;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html new file mode 100644 index 0000000000..48d8725801 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Synthesized baseline grid container</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<meta name="flags" content="ahem"> +<meta name="assert" content="This test check the synthesized of a grid container if it has no items (it should use the grid container margin box) or if the items have no baseline (in that case it should use the grid item's border box)."> +<style> +.wrapper { + border: solid thick; + position: relative; + width: 300px; + height: 150px; + margin: 10px; +} +canvas { + width: 100px; + height: 100px; + background: blue; +} +.magenta-dotted-border { + border: 5px dotted magenta; +} +.border-padding-margin { + border: 10px solid cyan; + padding: 15px; + margin: 20px 0px; + background: yellow; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.wrapper')"> + +<div id="log"></div> + +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-grid;" class="border-padding-margin" + data-offset-y="30"></div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="5"> + <div style="display: inline-grid;" class="border-padding-margin" + data-offset-y="30"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="0"> + <div style="display: grid;" class="border-padding-margin" + data-offset-y="25"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-grid;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="25"> + <div style="display: grid;" + data-offset-y="30"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> + </div> +</div> +<div class="wrapper" style="display: flex; align-items: baseline;"> + <canvas></canvas> + <div style="display: inline-grid;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> +<div class="wrapper" style="display: flex; align-items: baseline;"> + <canvas></canvas> + <div style="display: grid;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html new file mode 100644 index 0000000000..fde0c2c432 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Synthesized baseline inline blocks</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#alignment-baseline-property"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Inline blocks synthesized baseline use the margin box."> +<style> +.wrapper { + border: solid thick; + position: relative; + width: 200px; + height: 150px; + margin: 10px; +} +canvas { + width: 100px; + height: 100px; + background: blue; +} +.magenta-dotted-border { + border: 5px dotted magenta; +} +.border-padding-margin { + border: 10px solid cyan; + padding: 15px; + margin: 20px 0px; + background: yellow; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.wrapper')"> + +<div id="log"></div> + +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="border-padding-margin" + data-offset-y="30"></div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="5"> + <div style="display: inline-block;" class="border-padding-margin" + data-offset-y="30"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="0"> + <div class="border-padding-margin" data-offset-y="25"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001-ref.html new file mode 100644 index 0000000000..a63d2c9d68 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Reference: Synthesized baseline table cell</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +* { vertical-align: baseline; } +table { display: inline-table; border: 3px solid; } +td { width:10px; background-color:pink; background-clip:content-box; } +.p { padding: 0 10px 0 0; height:150px; } +.size { height:80px; } +.w { background: white; } +x { display: block; overflow: hidden; height:50px; background: white; } +.xp { height:80px; background-color:pink; } +.m50 { margin-top: 50px; } +.top { vertical-align:top; } +</style> +</head> +<body> + X + <table border=5><tr><td class="p w"><x></x></td></tr></table> + <table border=5><tr><td class="p w top"></td><td>X</td></tr></table> + <table border=2><tr><td><x style="height:0"></x></td></tr></table> + <table border=5><tr><td class="p w" style="height:230px"><x class="xp m50"></x></td></tr></table> + <table border=5><tr><td class="p w top" style="height:230px"><x class="xp m50"></x></td><td>X</td></tr></table> + <table border=2><tr><td><x class="xp"></x></td></tr></table> + <table border=2><tr><td class="top"><x class="xp" style="height:20px"></x></td><td><x class="xp" style="height:20px"></td></tr></table> + <table border=2><tr><td class="top"><x class="xp" style="height:20px"</td><td rowspan=2></td></tr><tr><td class="top"><x class="xp" style="height:20px"</td></tr></table> + <table border=2><tr><td>X</td><td rowspan=2 class="top"></td></tr><tr><td style="height:20px" class="top"></td></tr></table> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001.html new file mode 100644 index 0000000000..a7119b8dc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Synthesized baseline table cell</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export"> +<link rel="match" href="synthesized-baseline-table-cell-001-ref.html"> +<style> +* { vertical-align: baseline; } +table { display: inline-table; border: 3px solid; } +td { width:10px; background-color:pink; background-clip:content-box; } +.p { padding: 50px 10px 100px 0; } +.size { height:80px; } +</style> +</head> +<body> + X + <table border=5><tr><td class="p"></td></tr></table> + <table border=5><tr><td class="p"></td><td>X</td></tr></table> + <table border=2><tr><td ></td></tr></table> + <table border=5><tr><td class="p size"></td></tr></table> + <table border=5><tr><td class="p size"></td><td>X</td></tr></table> + <table border=2><tr><td class="size" ></td></tr></table> + <table border=2><tr><td style="height:10px"></td><td style="height:20px"></td></tr></table> + <table border=2><tr><td style="height:20px"></td><td rowspan=2></td></tr><tr><td style="height:20px"></td></tr></table> + <table border=2><tr><td>X</td><td rowspan=2></td></tr><tr><td style="height:20px"></td></tr></table> +</body> +</html> |