Bug 1531069 [wpt PR 15552] - [css-flexbox] Shrink-to-fit sizing needs to take margins into account, a=testonly
authorChristian Biesinger <cbiesinger@chromium.org>
Wed, 06 Mar 2019 16:52:38 +0000
changeset 525578 68f70e376346e070ab27bcf97ad8db71c02fa087
parent 525577 cd09ee2b74176e6062ad6390483a4d0fe097eefa
child 525579 272d41054b82400e7fc7109f087da3374f767001
push id2032
push userffxbld-merge
push dateMon, 13 May 2019 09:36:57 +0000
treeherdermozilla-release@455c1065dcbe [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>