Attachment #479639 for bug #265243

View Details Raw Unified Return to Bug 265243

| Differences between



    return shouldFlip;
}

bool RenderBox::shouldCacheIntrinsicContentLogicalHeightForFlexItem() const
{
    // The flex stretch algorithm needs to know the item's intrinsic content height
    // before stretch was applied. We cache it so the stretch phase can read back
    // the pre-stretch value after relayout. Items with aspect-ratio don't need
    // caching because their content height is always derivable from the current width.
    return isFlexItem() && !isFloatingOrOutOfFlowPositioned() && !shouldComputeLogicalHeightFromAspectRatio();
}

void RenderBox::cacheIntrinsicContentLogicalHeightForFlexItem(LayoutUnit height) const
{
    // FIXME: it should be enough with checking hasOverridingLogicalHeight() as this logic could be shared
    // by any layout system using overrides like grid or flex. However this causes a never ending sequence of calls
    // between layoutBlock() <-> relayoutToAvoidWidows().
    if (!shouldCacheIntrinsicContentLogicalHeightForFlexItem())
        return;
    CheckedPtr flexibleBox = dynamicDowncast<RenderFlexibleBox>(parent());
    if (!flexibleBox)
        return;
    ASSERT(is<RenderFlexibleBox>(parent());
    if (overridingBorderBoxLogicalHeight())
        return;
    if (CheckedPtr flexibleBox = dynamicDowncast<RenderFlexibleBox>(parent());
        flexibleBox->setCachedFlexItemIntrinsicContentLogicalHeight(*this, height);
}

void RenderBox::overrideLogicalHeightForSizeContainment()

Lines 375-380 public: a/Source/WebCore/rendering/RenderBox.h_sec1
- a/Source/WebCore/rendering/RenderBox.h +1 lines
375		375
376	void overrideLogicalHeightForSizeContainment();	376	void overrideLogicalHeightForSizeContainment();
377		377
		378	bool shouldCacheIntrinsicContentLogicalHeightForFlexItem() const;
378	void cacheIntrinsicContentLogicalHeightForFlexItem(LayoutUnit) const;	379	void cacheIntrinsicContentLogicalHeightForFlexItem(LayoutUnit) const;
379		380
380	// This function will compute the logical border-box height, without laying	381	// This function will compute the logical border-box height, without laying



            // Don't use layoutChildIfNeeded to avoid setting cross axis cached size twice.
            flexItem.layoutIfNeeded();

            if (flexItem.shouldCacheIntrinsicContentLogicalHeightForFlexItem())
                setCachedFlexItemIntrinsicContentLogicalHeight(flexItem, flexItemIntrinsicContentLogicalHeight);
        }
        return;
    }



<!DOCTYPE html>
<title>Reference</title>
<style>
.ref {
  width: 200px;
  height: 200px;
  background: green;
}
</style>
<p>Test passes if there is a 200x200 green square with no red.</p>
<div class="ref"></div>



<!DOCTYPE html>
<title>Reference</title>
<style>
.ref {
  width: 200px;
  height: 200px;
  background: green;
}
</style>
<p>Test passes if there is a 200x200 green square with no red.</p>
<div class="ref"></div>



<!DOCTYPE html>
<title>Flex item with aspect-ratio updates height correctly on container resize</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-stretch">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="flex-aspect-ratio-resize-001-ref.html">
<style>
.container {
  display: flex;
  width: 500px;
}

.wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: green;
}

.image {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
<p>Test passes if there is a 200x200 green square with no red.</p>
<div id="container" class="container" style="background: red;">
  <div class="wrapper">
    <img src="../support/1x1-green.png" class="image">
  </div>
</div>
<script>
document.body.offsetHeight;
document.getElementById("container").style.width = "200px";
</script>

Return to Bug 265243

Lines 3345-3363 static bool NODELETE shouldFlipBeforeAfterMargins(WritingMode containingBlockWri a/Source/WebCore/rendering/RenderBox.cpp_sec1
- a/Source/WebCore/rendering/RenderBox.cpp -6 / +14 lines
3345	return shouldFlip;	3345	return shouldFlip;
3346	}	3346	}
3347		3347
		3348	bool RenderBox::shouldCacheIntrinsicContentLogicalHeightForFlexItem() const
		3349	{
		3350	// The flex stretch algorithm needs to know the item's intrinsic content height
		3351	// before stretch was applied. We cache it so the stretch phase can read back
		3352	// the pre-stretch value after relayout. Items with aspect-ratio don't need
		3353	// caching because their content height is always derivable from the current width.
		3354	return isFlexItem() && !isFloatingOrOutOfFlowPositioned() && !shouldComputeLogicalHeightFromAspectRatio();
		3355	}
		3356
3348	void RenderBox::cacheIntrinsicContentLogicalHeightForFlexItem(LayoutUnit height) const	3357	void RenderBox::cacheIntrinsicContentLogicalHeightForFlexItem(LayoutUnit height) const
3349	{	3358	{
3350	// FIXME: it should be enough with checking hasOverridingLogicalHeight() as this logic could be shared	3359	// FIXME: it should be enough with checking hasOverridingLogicalHeight() as this logic could be shared
3351	// by any layout system using overrides like grid or flex. However this causes a never ending sequence of calls	3360	// by any layout system using overrides like grid or flex. However this causes a never ending sequence of calls
3352	// between layoutBlock() <-> relayoutToAvoidWidows().	3361	// between layoutBlock() <-> relayoutToAvoidWidows().
3353	if (isFloatingOrOutOfFlowPositioned())	3362	if (!shouldCacheIntrinsicContentLogicalHeightForFlexItem())
3354	return;
3355	CheckedPtr flexibleBox = dynamicDowncast<RenderFlexibleBox>(parent());
3356	if (!flexibleBox)
3357	return;	3363	return;
3358	if (overridingBorderBoxLogicalHeight() \|\| shouldComputeLogicalHeightFromAspectRatio())	3364	ASSERT(is<RenderFlexibleBox>(parent());
		3365	if (overridingBorderBoxLogicalHeight())
3359	return;	3366	return;
3360	flexibleBox->setCachedFlexItemIntrinsicContentLogicalHeight(*this, height);	3367	if (CheckedPtr flexibleBox = dynamicDowncast<RenderFlexibleBox>(parent());
		3368	flexibleBox->setCachedFlexItemIntrinsicContentLogicalHeight(*this, height);
3361	}	3369	}
3362		3370
3363	void RenderBox::overrideLogicalHeightForSizeContainment()	3371	void RenderBox::overrideLogicalHeightForSizeContainment()

Lines 3020-3026 void RenderFlexibleBox::applyStretchAlignmentToFlexItem(RenderBox& flexItem, Lay a/Source/WebCore/rendering/RenderFlexibleBox.cpp_sec1
- a/Source/WebCore/rendering/RenderFlexibleBox.cpp -1 / +2 lines
3020	// Don't use layoutChildIfNeeded to avoid setting cross axis cached size twice.	3020	// Don't use layoutChildIfNeeded to avoid setting cross axis cached size twice.
3021	flexItem.layoutIfNeeded();	3021	flexItem.layoutIfNeeded();
3022		3022
3023	setCachedFlexItemIntrinsicContentLogicalHeight(flexItem, flexItemIntrinsicContentLogicalHeight);	3023	if (flexItem.shouldCacheIntrinsicContentLogicalHeightForFlexItem())
		3024	setCachedFlexItemIntrinsicContentLogicalHeight(flexItem, flexItemIntrinsicContentLogicalHeight);
3024	}	3025	}
3025	return;	3026	return;
3026	}	3027	}

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-resize-001-expected.html_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-resize-001-expected.html +11 lines
	1	<!DOCTYPE html>
	2	<title>Reference</title>
	3	<style>
	4	.ref {
	5	width: 200px;
	6	height: 200px;
	7	background: green;
	8	}
	9	</style>
	10	<p>Test passes if there is a 200x200 green square with no red.</p>
	11	<div class="ref"></div>

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-resize-001.html_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-resize-001.html +33 lines
	1	<!DOCTYPE html>
	2	<title>Flex item with aspect-ratio updates height correctly on container resize</title>
	3	<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-stretch">
	4	<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
	5	<link rel="match" href="flex-aspect-ratio-resize-001-ref.html">
	6	<style>
	7	.container {
	8	display: flex;
	9	width: 500px;
	10	}
	11
	12	.wrapper {
	13	width: 100%;
	14	aspect-ratio: 1 / 1;
	15	background: green;
	16	}
	17
	18	.image {
	19	display: block;
	20	width: 100%;
	21	height: 100%;
	22	}
	23	</style>
	24	<p>Test passes if there is a 200x200 green square with no red.</p>
	25	<div id="container" class="container" style="background: red;">
	26	<div class="wrapper">
	27	<img src="../support/1x1-green.png" class="image">
	28	</div>
	29	</div>
	30	<script>
	31	document.body.offsetHeight;
	32	document.getElementById("container").style.width = "200px";
	33	</script>