Bug 1506008 [wpt PR 13991] - [css-flexbox] ChildIntrinsicLogicalWidth should use fit-content, not max-content, a=testonly
authorChristian Biesinger <cbiesinger@chromium.org>
Thu, 15 Nov 2018 10:14:23 +0000
changeset 503402 b4925f72b3f8259696506c5857d876c237008793
parent 503401 8d6cf0f73cd0aa63996c632140ee436d249528b0
child 503403 2ac6661b912e72e9b931d87f23d35fc33cff0d0e
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1506008, 13991, 599828, 876749, 1327746, 607342
milestone65.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 1506008 [wpt PR 13991] - [css-flexbox] ChildIntrinsicLogicalWidth should use fit-content, not max-content, a=testonly Automatic update from web-platform-tests[css-flexbox] ChildIntrinsicLogicalWidth should use fit-content, not max-content This function needs to match the actual sizing we use. But, since this is the cross-axis size, we use fit-content: https://drafts.csswg.org/css-flexbox/#algo-cross-item See LayoutBox::SizesLogicalWidthToFitContent and LayoutBox::ComputeLogicalWidthUsing for where we do that fit-content sizing; this code makes us match the ComputeLogicalWidthUsing calculation. This bug is currently somewhat hard to trigger because it requires a combination of all of: - flex-wrap: wrap - flex-direction: column - More than one flex line - Not using align-items: flex-start or align-content: flex-start - No explicit width on the flex item - The max-content width needs to be larger than the width of flexbox The reason this does not matter in other cases is because we only use this function to set FlexLine::cross_axis_extent, which we overwrite in AlignFlexLines if we only have one line. And if we do have more than one line, we only use this value for aligning items and lines, so it only matters if we don't use flex-start alignment. This bug will be much easier to trigger once bug 599828 is fixed (there are at least two real-world sites that are affected by this once that bug is fixed) Bug: 876749 Change-Id: I673026bedfaf0e4c4a25830ef686b200ec8f54a1 Reviewed-on: https://chromium-review.googlesource.com/c/1327746 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#607342} -- wpt-commits: 2281bfa056ad0ca78b9ef60ca2deb0d7f845890f wpt-pr: 13991
testing/web-platform/tests/css/css-flexbox/flex-wrap-002.html
testing/web-platform/tests/css/css-flexbox/flex-wrap-003.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/flex-wrap-002.html
@@ -0,0 +1,30 @@
+<!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 two flex lines, each 50px wide and 100px tall. 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: 50px; 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
+         25px and a max-content width of 125px -->
+    <div style="width: 25px; display: inline-block;"></div>
+    <div style="width: 25px; display: inline-block;"></div>
+    <div style="width: 25px; display: inline-block;"></div>
+    <div style="width: 25px; display: inline-block;"></div>
+    <div style="width: 25px; display: inline-block;"></div>
+  </div>
+  <div style="background-color: red; height: 100px;">
+    <div style="width: 25px; display: inline-block;"></div>
+    <div style="width: 25px; display: inline-block;"></div>
+    <div style="width: 25px; display: inline-block;"></div>
+    <div style="width: 25px; display: inline-block;"></div>
+    <div style="width: 25px; display: inline-block;"></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/flex-wrap-003.html
@@ -0,0 +1,23 @@
+<!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: 100px; height: 100px; line-height: 20x;">
+  <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>
+  </div>
+</div>