Bug 1445931 [wpt PR 10050] - [css-flexbox] Resolve min-width:auto on table item to min preferred size., a=testonly
authorMorten Stenshorne <mstensho@chromium.org>
Mon, 09 Apr 2018 18:11:11 +0000
changeset 467181 6a0124ceb8963b3ee42b443f30e155239f44ae84
parent 467180 c314a1640514d9853a7832d9ba11134c606e0570
child 467182 739a2ad639eb6b8910970d236031b6cf0f5d6dd4
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1445931, 10050, 821832, 964203, 545777
milestone61.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 1445931 [wpt PR 10050] - [css-flexbox] Resolve min-width:auto on table item to min preferred size., a=testonly Automatic update from web-platform-tests[css-flexbox] Resolve min-width:auto on table item to min preferred size. Edge and Firefox seem to let table flex items use the sizing algorithm of the table extensively, and are therefore generally broken when it comes to flexing tables. We, on the other hand, let the flex sizing algorithm be in charge of sizing tables, so that flexing actually works. However, this causes tables with a specified main size of less than the minimum intrinsic logical width of the table to shrink below their minimum intrinsic logical width, a situation that's generally unwanted for tables. Amend by ignoring the specified main size when resolving min-width:auto on table items. Also ignore max-width/max-height. Just use the preferred minimum logical width. Bug: 821832 Change-Id: I78ca0c8e0041ea69bb606ff72d340bb3f5f9bb96 Reviewed-on: https://chromium-review.googlesource.com/964203 Reviewed-by: David Grogan <dgrogan@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#545777} wpt-commits: f4388a3ab1931b8f270378e3b0598c5d8538f3cb wpt-pr: 10050 wpt-commits: f4388a3ab1931b8f270378e3b0598c5d8538f3cb wpt-pr: 10050
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-flexbox/table-as-item-auto-min-width.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -112948,16 +112948,28 @@
       [
        "/css/css-flexbox/position-absolute-005-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-flexbox/table-as-item-auto-min-width.html": [
+    [
+     "/css/css-flexbox/table-as-item-auto-min-width.html",
+     [
+      [
+       "/css/reference/ref-filled-green-100px-square.xht",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-flexbox/table-as-item-narrow-content.html": [
     [
      "/css/css-flexbox/table-as-item-narrow-content.html",
      [
       [
        "/css/reference/ref-filled-green-100px-square-only.html",
        "=="
       ]
@@ -492953,16 +492965,20 @@
   "css/css-flexbox/support/test-tl.png": [
    "956e5156fd8c0e75b1c0f3b8b3b900b653663f74",
    "support"
   ],
   "css/css-flexbox/support/test-tr.png": [
    "078e1dd6dd61d36cec239ed75d02051f61fe60a5",
    "support"
   ],
+  "css/css-flexbox/table-as-item-auto-min-width.html": [
+   "d70cb1447c942c9f66f6503b6c769b2db188b5dc",
+   "reftest"
+  ],
   "css/css-flexbox/table-as-item-narrow-content.html": [
    "ccee1a24278c3177809a09009c2f15973908fa83",
    "reftest"
   ],
   "css/css-flexbox/table-as-item-wide-content.html": [
    "b25764f22999464e3e65780f01f4adb784ce56d2",
    "reftest"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-auto-min-width.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>CSS Flexbox Test: Flex item as table, specified width less than minimum intrinsic width</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display:flex; width:100px; background:red;">
+  <div style="display:table; width:10px; max-width:10px; height:100px; background:green;">
+    <div style="width:100px; height:10px; background:green;"></div>
+  </div>
+</div>