mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 13:18:45 +02:00
3ae500e635
Automatic update from web-platform-tests [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 <cbiesinger@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Cr-Commit-Position: refs/heads/master@{#637885} -- wpt-commits: 0d35193f1d50bc3b6a83c3f6d78da2f267636983 wpt-pr: 15586
49 lines
958 B
HTML
49 lines
958 B
HTML
<!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>
|