Index: third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html |
diff --git a/third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html b/third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..58b3e3aaa6122d86dc8392aff14a834b0a3dcd86 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html |
@@ -0,0 +1,142 @@ |
+<!DOCTYPE HTML> |
+<script src="../../resources/testharness.js"></script> |
+<script src="../../resources/testharnessreport.js"></script> |
+<script src="../../resources/check-layout-th.js"></script> |
+<style> |
+.block { |
+ width: 200px; |
+ height: 200px; |
+ background: lightgrey; |
+} |
+ |
+.flex { display: flex; } |
+.grid { |
+ display: grid; |
+ grid: 100px / 150px; |
+} |
+ |
+.itemsStart { |
+ align-items: start; |
+ justify-items: start; |
+} |
+.itemsFlexStart { |
+ align-items: flex-start; |
+ justify-items: flex-start; |
+} |
+ |
+.item { |
+ display: table; |
+ background: lime; |
+ border-spacing: 0px; |
+ font: 10px/1 Ahem; |
+} |
+ |
+td { padding: 0px; } |
+caption { background: grey; } |
+ |
+</style> |
+ |
+<p>This test verifies that table sizing logic considers stretch alignment when computing its width and height.</p> |
+ |
+<p>Regular block container of a table element and 1 implicit row and column.<br>The align-self property doesn't apply to block-level boxes.</br>The justify-self property has its initial/default value 'normal', which behaves like 'start'.</p> |
+<div class="block"> |
+ <div class="item" data-expected-width="100" data-expected-height="10">table cell</div> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Regular block container of an empty table.<br>The align-self property doesn't apply to block-level boxes.</br>The justify-self property has its initial/default value 'normal', which behaves like 'start'.</p> |
+<div class="block"> |
+ <table class="item" data-expected-width="70" data-expected-height="10"> |
+ <caption>caption</caption> |
+ </table> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Regular block container of a table element and 1 explicit row and column.<br>The align-self property doesn't apply to block-level boxes.</br>The justify-self property has its initial/default value 'normal', which behaves like 'start'.</p> |
+<div class="block"> |
+ <table class="item" data-expected-width="100" data-expected-height="20"> |
+ <tr data-expected-width="100" data-expected-height="10"> |
+ <td>table cell</td> |
+ </tr> |
+ <caption>caption</caption> |
+ </table> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Grid container of table element and 1 implicit row and column.<br>Both the align-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p> |
+<div class="block grid"> |
+ <div class="item" data-expected-width="150" data-expected-height="100">table cell</div> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Grid container of an empty table element.<br>Both the align-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p> |
+<div class="block grid"> |
+ <table class="item" data-expected-width="150" data-expected-height="110"> |
+ <caption>caption</caption> |
+ </table> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Grid container of an empty table element.<br>Both the align-self and justify-self properties have a value 'start', which should prevent the item to be stretched.</p> |
+<div class="block grid itemsStart"> |
+ <table class="item" data-expected-width="70" data-expected-height="10"> |
+ <caption>caption</caption> |
+ </table> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Grid container of table element and 1 explicit row and column.<br>Both the align-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p> |
+<div class="block grid"> |
+ <table class="item" data-expected-width="150" data-expected-height="110"> |
+ <tr data-expected-width="150" data-expected-height="100"> |
+ <td>table cell</td> |
+ </tr> |
+ <caption>caption</caption> |
+ </table> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Flex container of table element and 1 implicit row and column.<br>Both the align-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p> |
+<div class="block flex"> |
+ <div class="item" class="item" data-expected-width="200" data-expected-height="200">table cell</div> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Flex container of an empty table element.<br>Both the align-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p> |
+<div class="block flex"> |
+ <table class="item" data-expected-width="200" data-expected-height="210"> |
+ <caption>caption</caption> |
+ </table> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Flex container of an empty table element.<br>Both the align-self and justify-self properties have a value 'start', which should prevent the item to be stretched.</p> |
+<div class="block flex itemsFlexStart"> |
+ <table class="item" data-expected-width="70" data-expected-height="10"> |
+ <caption>caption</caption> |
+ </table> |
+</div> |
+ |
+<br><br> |
+ |
+<p>Flex container of table element and 1 explicit row and column.<br>Both the align-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p> |
+<div class="block flex"> |
+ <table class="item" class="item" data-expected-width="200" data-expected-height="210"> |
+ <tr data-expected-width="200" data-expected-height="200"> |
+ <td>table cell</td> |
+ </tr> |
+ <caption>caption</caption> |
+ </table> |
+</div> |
+<script> |
+ checkLayout('.block'); |
+</script> |