Commit 0b8951e9 authored by David Grogan's avatar David Grogan Committed by Commit Bot

[FlexNG] Flex items can't be relayout roots, even with `contain`

When a flex item is a relayout root, it gets neither the flexed nor
stretched dimensions from the parent flexbox. Though this problem seems
to manifest only when the flex item is a legacy layout node.

This change causes a 5% regression in the change-text-css-contain perf
test, even though it doesn't use flex, probably just because we test for
flex-item before deciding that a node with `contain: layout size` can be
a layout root.

Bug: 1108675
Change-Id: Iec0d35557ebfbf3136bd66fe986ba2456e0d92ab
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2322074Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#792833}
parent 73ea864d
......@@ -955,18 +955,6 @@ static inline bool ObjectIsRelayoutBoundary(const LayoutObject* object) {
return false;
}
if (object->ShouldApplyLayoutContainment() &&
object->ShouldApplySizeContainment())
return true;
// If either dimension is percent-based, intrinsic, or anything but fixed,
// this object cannot form a re-layout boundary. A non-fixed computed logical
// height will allow the object to grow and shrink based on the content
// inside. The same goes for for logical width, if this objects is inside a
// shrink-to-fit container, for instance.
if (!style->Width().IsFixed() || !style->Height().IsFixed())
return false;
if (const LayoutBox* layout_box = ToLayoutBoxOrNull(object)) {
// In general we can't relayout a flex item independently of its container;
// not only is the result incorrect due to the override size that's set, it
......@@ -984,6 +972,19 @@ static inline bool ObjectIsRelayoutBoundary(const LayoutObject* object) {
}
}
if (object->ShouldApplyLayoutContainment() &&
object->ShouldApplySizeContainment()) {
return true;
}
// If either dimension is percent-based, intrinsic, or anything but fixed,
// this object cannot form a re-layout boundary. A non-fixed computed logical
// height will allow the object to grow and shrink based on the content
// inside. The same goes for for logical width, if this objects is inside a
// shrink-to-fit container, for instance.
if (!style->Width().IsFixed() || !style->Height().IsFixed())
return false;
if (object->IsTextControl())
return true;
......
<!doctype html>
<html class=reftest-wait>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="">
<meta name="assert" content="Flex items with contain: layout size are sized properly.">
<link rel="bookmark" href="https://crbug.com/1108675">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
#flex {
display: flex;
width: 100px;
height: 100px;
}
#grid {
background-color: green;
display: grid;
flex: 1;
contain: layout size;
}
.item {
height: 50px;
width: 50px;
}
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="flex">
<div id="grid" data-expected-height=100 data-expected-width=100>
<div class="item"></div>
</div>
</div>
<script>
document.body.offsetTop;
let item = document.querySelector(".item");
let cloned = item.cloneNode(true);
let parent = item.parentElement;
parent.appendChild(cloned);
document.documentElement.classList.remove("reftest-wait");
</script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment