| 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>
|
|
|