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

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: Applied suggested changes. Created 4 years, 1 month 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..4f93c1c37b4ab7533ee2c831c280a26f452a7ad5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html
@@ -0,0 +1,116 @@
+<!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 { 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>
dgrogan 2016/11/30 01:03:22 s/propery/property/ and 2 other places
+<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>

Powered by Google App Engine
This is Rietveld 408576698