Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(86)

Unified Diff: third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html

Issue 2528253003: [table] Stretching tables when needed due to self-alignment properties (Closed)
Patch Set: Removed another incorrect assert. Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>
« no previous file with comments | « third_party/WebKit/LayoutTests/css3/flexbox/flexitem-expected.txt ('k') | third_party/WebKit/Source/core/layout/LayoutBox.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698