[css-flexbox] Don't always add the child as percentage-sized child

ComputePercentageLogicalHeight has the side-effect of calling AddPercentHeightDescendant on the containing block; that is not great when we just want to check if a size is definite, from MainSizeIsDefiniteForPercentageResolution. Add a parameter to make it optional. Also change CrossAxisSizeIsDefinite over to this function. Here, we do not have to worry about AddPercentHeightDescendant because we will later resolve that size through normal mechanisms anyway. Bug: 933931 Change-Id: Id44d15eb546c15bbdece99282550419eb0f8654e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1492294 Commit-Queue: Christian Biesinger <[email protected]> Reviewed-by: Emil A Eklund <[email protected]> Cr-Commit-Position: refs/heads/master@{#637885}
web-platform-tests · Jul 23, 2019 · 15ec309 · 15ec309
1 parent 3a07467
commit 15ec309
Showing 1 changed file with 49 additions and 0 deletions.
diff --git a/css/css-flexbox/flex-minimum-height-flex-items-013.html b/css/css-flexbox/flex-minimum-height-flex-items-013.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: min-height: auto with nested flexboxes</title>
+<link rel="author" title="Google LLC" href="https://www.google.com/" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=933931" />
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+<style>
+.outer {
+  display: flex;
+  flex-direction: column;
+  height: 20px;
+  width: 100px;
+  background: red;
+}
+
+.middle {
+  display: flex;
+  flex-direction: column;
+  background: green;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+}
+
+.tall {
+  width: 50px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="outer">
+  <div class="middle">
+    <div class="inner">
+      <div class="tall"></div>
+    </div>
+  </div>
+</div>
+
+
+</body>
+</html>