Bug 1531069 [wpt PR 15552] - [css-flexbox] Shrink-to-fit sizing needs to take margins into account, a=testonly
☠☠ backed out by 66b1aba3fb43 ☠ ☠
authorChristian Biesinger <cbiesinger@chromium.org>
Wed, 06 Mar 2019 16:52:38 +0000
changeset 522301 ca9d694280701bca887c1f3d40adf2ab9fc9fa9e
parent 522300 4c96cc5997e6f86455a79935696706170c26e554
child 522302 3f555f93c0707e11a7988fb499f7d77461f3c698
push id10871
push usercbrindusan@mozilla.com
push dateMon, 18 Mar 2019 15:49:32 +0000
treeherdermozilla-beta@018abdd16060 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1531069, 15552, 1327746, 934936, 1483946, 635176
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1531069 [wpt PR 15552] - [css-flexbox] Shrink-to-fit sizing needs to take margins into account, a=testonly Automatic update from web-platform-tests [css-flexbox] Shrink-to-fit sizing needs to take margins into account Originally added in https://crrev.com/c/1327746 Also fixes a typo in one of the tests from that patch. R=mstensho@chromium.org Bug: 934936 Change-Id: Ib079171549853a21d5bcdd05dabb461c4a1e492c Reviewed-on: https://chromium-review.googlesource.com/c/1483946 Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#635176} -- wpt-commits: 8d457c05eb33ab4b6a7549696fe1b94b5e4b7054 wpt-pr: 15552
testing/web-platform/tests/css/css-flexbox/flex-wrap-003.html
testing/web-platform/tests/css/css-flexbox/flex-wrap-004.html
--- a/testing/web-platform/tests/css/css-flexbox/flex-wrap-003.html
+++ b/testing/web-platform/tests/css/css-flexbox/flex-wrap-003.html
@@ -5,17 +5,17 @@
 <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 <meta name="assert" content="The flexbox here should have one flex line, 100px by 100px. The flex items overflow but are transparent." />
 
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 
 <!-- This makes sure that we only see green if the flex items are sized correctly -->
 <div style="position: absolute; width: 100px; height: 100px; background: green;"></div>
 
-<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 100px; height: 100px; line-height: 20x;">
+<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 100px; height: 100px; line-height: 20px;">
   <div style="background-color: red; height: 100px;">
     <!-- These zero-height divs give the flex item has a min-content width of
          50px and a max-content width of 250px -->
     <div style="width: 50px; display: inline-block;"></div>
     <div style="width: 50px; display: inline-block;"></div>
     <div style="width: 50px; display: inline-block;"></div>
     <div style="width: 50px; display: inline-block;"></div>
     <div style="width: 50px; display: inline-block;"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/flex-wrap-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="author" title="Google LLC" href="http://www.google.com" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" />
+<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title>
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<meta name="assert" content="The flexbox here should have one flex line, 100px by 100px. The flex items overflow but are transparent." />
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<!-- This makes sure that we only see green if the flex items are sized correctly -->
+<div style="position: absolute; width: 100px; height: 100px; background: green;"></div>
+
+<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 125px; height: 100px; line-height: 20px;">
+  <!-- The margin-right means that the flex item should be only 100px wide,
+       because it will use the available width of 125px minus the 25px margin. -->
+  <div style="background-color: red; height: 100px; margin-right: 25px;">
+    <!-- These zero-height divs give the flex item has a min-content width of
+         50px and a max-content width of 250px -->
+    <div style="width: 50px; display: inline-block;"></div>
+    <div style="width: 50px; display: inline-block;"></div>
+    <div style="width: 50px; display: inline-block;"></div>
+    <div style="width: 50px; display: inline-block;"></div>
+    <div style="width: 50px; display: inline-block;"></div>
+  </div>
+</div>