 Chromium Code Reviews
 Chromium Code Reviews Issue 2528253003:
  [table] Stretching tables when needed due to self-alignment properties  (Closed)
    
  
    Issue 2528253003:
  [table] Stretching tables when needed due to self-alignment properties  (Closed) 
  | 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..5df4b84b03eee1a4b4a16154d93d7e7acbf79971 | 
| --- /dev/null | 
| +++ b/third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html | 
| @@ -0,0 +1,119 @@ | 
| +<!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; | 
| +} | 
| + | 
| +.item { | 
| + display: table; | 
| + background: lime; | 
| + border-spacing: 0px; | 
| + font: 10px/1 Ahem; | 
| +} | 
| + | 
| +td { | 
| + border-spacing: 0px; | 
| 
mstensho (USE GERRIT)
2016/11/28 12:54:31
border-spacing doesn't apply to table cells.
 
jfernandez
2016/11/29 16:03:33
Done.
 | 
| + padding: 0px; | 
| +} | 
| +caption { background: grey; } | 
| + | 
| +</style> | 
| +<body onload="checkLayout('.block')"> | 
| + | 
| +<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 propery 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 propery 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 propery 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 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 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> | 
| + | 
| +</body> | 
| +</html> |