Bug 1626861 [wpt PR 22638] - [css-flexbox] Move stretch-table-child.h…

…tml test to WPT, a=testonly Automatic update from web-platform-tests [css-flexbox] Move stretch-table-child.html test to WPT This CL moves stretch-table-child.html test from css3/css-flexbox to external/wpt/css/css-flexbox with WPT styles, adding links to the relevant specs, and test description. Additionally, this CL sets a background color to 'first' selector for the manual test. Bug: 1063749 Change-Id: I20655a51cc6fc6462bf4f0aba361e8f9a05d095b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132899 Reviewed-by: Christian Biesinger <[email protected]> Reviewed-by: David Grogan <[email protected]> Reviewed-by: Robert Ma <[email protected]> Commit-Queue: Gyuyoung Kim <[email protected]> Cr-Commit-Position: refs/heads/master@{#758678} -- wpt-commits: 80e8bc59a70ec36062aa84923518fb4de1c1b5e4 wpt-pr: 22638
dothq · Apr 21, 2020 · cf089e6 · cf089e6
1 parent c5efb37
commit cf089e6
Showing 1 changed file with 47 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-cross-size.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-cross-size.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: Correct cross size of Table with 'align-self: stretch'</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<meta name="assert" content="This test ensures that flexbox computes a correct cross size of a <table> flex item with align-self: stretch.">
+<style>
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100px;
+    width: 50px;
+}
+.first {
+    flex: 1 1 auto;
+    background-color: blue;
+}
+.test {
+    flex: 0 0 auto;
+    background-color: green;
+    display: flex;
+}
+td {
+    padding: 23px;
+}
+</style>
+</head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.test')">
+<div id=log></div>
+<div class="container">
+    <div class="first">
+    </div>
+    <!-- This wrapper div is a row flexbox. It should get a height of 50px, matching the height
+     of the inner table. In particular, it should not be 0 on the basis that tables don't
+     have an intrinsic block-size. -->
+    <div class="test" data-expected-height=50>
+        <table>
+            <tr><td></td></tr>
+        </table>
+    </div>
+</div>
+</body>
+</html>