diff options
| author | bptato <nincsnevem662@gmail.com> | 2025-04-03 18:37:29 +0200 |
|---|---|---|
| committer | bptato <nincsnevem662@gmail.com> | 2025-04-03 18:37:29 +0200 |
| commit | 19c573e794fc74cb57833f4d2cbe53e002958685 (patch) | |
| tree | 4c1787f9467df009991aa41e05c6681999375971 /test | |
| parent | 4703192bcd6bd444964116fc64a9d0cb2aef2a1f (diff) | |
| download | chawan-19c573e794fc74cb57833f4d2cbe53e002958685.tar.gz | |
layout: correct table-caption width calculation
It's surprisingly tricky.
Diffstat (limited to 'test')
5 files changed, 67 insertions, 3 deletions
diff --git a/test/layout/float-next-to-caption.expected b/test/layout/float-next-to-caption.expected index 3021c733..31bd0d05 100644 --- a/test/layout/float-next-to-caption.expected +++ b/test/layout/float-next-to-caption.expected @@ -1,2 +1,2 @@ test test 1 -2 + 2 diff --git a/test/layout/table-caption-intrinsic-size-affects-inner-table-and-vice-versa.color.expected b/test/layout/table-caption-intrinsic-size-affects-inner-table-and-vice-versa.color.expected new file mode 100644 index 00000000..e9f490c1 --- /dev/null +++ b/test/layout/table-caption-intrinsic-size-affects-inner-table-and-vice-versa.color.expected @@ -0,0 +1,13 @@ +[48;2;0;0;255m [38;2;95;95;95m[48;2;255;192;203m [39m[49m +[38;2;95;95;95m[48;2;255;192;203mtesttesttesttest[39m[49m +[48;2;255;0;0mtest[49m +[38;2;95;95;95m[48;2;255;192;203mtesttesttesttest[39m[49m +[48;2;255;0;0mtest test[49m +[38;2;95;95;95m[48;2;255;192;203mtest [39m[49m +[38;2;95;95;95m[48;2;255;192;203mtest [39m[49m +[48;2;255;0;0mtest [49m +[48;2;255;0;0mtest [49m +[38;2;95;95;95m[48;2;255;192;203mtesttesttesttest[39m[49m +[48;2;255;0;0mtest test[49m +[48;2;0;0;255m [38;2;95;95;95m[48;2;255;192;203m [39m[49m +[48;2;255;0;0matest test[49m diff --git a/test/layout/table-caption-intrinsic-size-affects-inner-table-and-vice-versa.html b/test/layout/table-caption-intrinsic-size-affects-inner-table-and-vice-versa.html new file mode 100644 index 00000000..a1862ec9 --- /dev/null +++ b/test/layout/table-caption-intrinsic-size-affects-inner-table-and-vice-versa.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<style> +xtable { display: table; background: green } +xcaption { display: table-caption; background: pink } +xtr { display: table-row; background: blue } +xtd { display: table-cell; background: red } +</style> + +<!-- caption grows to its intrinsic min width --> +<div style="width: 1ch"> +<xtable> +<xcaption><div style="width: 20%; background: blue; height: 1em"></div>testtesttesttest</xcaption> +<xtr><xtd>test</xtd></xtr> +</xtable> +</div> + +<!-- available space constrains table, caption is larger than space + -> table grows to caption's intrinsic min width --> +<div style="width: 5ch"> +<xtable> +<xcaption>testtesttesttest</xcaption> +<xtr><xtd>test test</xtd></xtr> +</xtable> +</div> + +<!-- caption & table both fit in available space + -> break lines --> +<div style="width: 5ch"> +<xtable> +<xcaption>test test</xcaption> +<xtr><xtd>test test</xtd></xtr> +</xtable> +</div> + +<!-- caption & table are not constrained in size, table is smaller + -> table remains smaller --> +<xtable> +<xcaption>testtesttesttest</xcaption> +<xtr><xtd>test test</xtd></xtr> +</xtable> + +<!-- caption & table are not constrained in size, table is larger + -> caption stretched to table size --> +<xtable> +<xcaption><div style="width: 50%; height: 1em; background: blue"></div></xcaption> +<xtr> +<xtd> +atest test +</xtd> +</xtr> +</xtable> diff --git a/test/layout/table-caption-margins.expected b/test/layout/table-caption-margins.expected index 7fe2215d..330acfa6 100644 --- a/test/layout/table-caption-margins.expected +++ b/test/layout/table-caption-margins.expected @@ -4,4 +4,4 @@ - testing + testing diff --git a/test/layout/table-caption-margins.html b/test/layout/table-caption-margins.html index a3e3759e..aaf89d8a 100644 --- a/test/layout/table-caption-margins.html +++ b/test/layout/table-caption-margins.html @@ -6,7 +6,7 @@ something something <td> row 2 <caption style="caption-side: bottom; margin-top: 2em; margin-left: 1ch"> -<div style="margin-top: 2em"> +<div style="margin-top: 2em; text-align: left"> testing </div> </caption> |