about summary refs log tree commit diff stats
path: root/test/layout/table-caption-intrinsic-size-affects-inner-table-and-vice-versa.html
diff options
context:
space:
mode:
Diffstat (limited to 'test/layout/table-caption-intrinsic-size-affects-inner-table-and-vice-versa.html')
-rw-r--r--test/layout/table-caption-intrinsic-size-affects-inner-table-and-vice-versa.html51
1 files changed, 51 insertions, 0 deletions
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>