haikuwebkit/PerformanceTests/Layout/nested-column-flexboxes-rel...

46 lines
1.1 KiB
HTML
Raw Permalink Normal View History

REGRESSION (r266695): twitch.tv: when in fullscreen, WebKit continually does 350ms layouts. Firefox and Chrome do not https://bugs.webkit.org/show_bug.cgi?id=222202 <rdar://problem/74537782> Reviewed by Simon Fraser. PerformanceTests: New performance test for nested column flexboxes with percentage heights. * Layout/nested-column-flexboxes-relative-height.html: Added. Source/WebCore: The problem was that we were doing the initial layout for the children of the flex container twice in those cases where the child inline axis was not the main axis (for example with column flex containers in horizontal writing modes). Refactored the code (specially the way we clear overriding sizes) so that we only do it once. This saves tons of layouts in pages with nested column flexboxes with relative heights. No new tests as there is no change in functionality, we're removing duplicate extra layouts. We're however adding a new performance test for column flexboxes with percentage heights. With this patch we go from 3.5 layout/s to 145 layout/s which is ~4000% better. Inspired by Blink's crrev.com/c/1614058 by <cbiesinger@chromium.org>. * rendering/RenderFlexibleBox.cpp: (WebCore::RenderFlexibleBox::computeInnerFlexBaseSizeForChild): Do not unconditionally clear overriding sizes. Also removed relayoutChildren which is now unused. Do not layout the item, that should have been done in computeInnerFlexBaseSizeForChild() before. Added ASSERTs to verify that child's intrinsic main size was cached as a consequence of the previous layout. (WebCore::RenderFlexibleBox::constructFlexItem): Do not pass relayoutChildren to computeInnerFlexBaseSizeForChild. Also no need to update it after laying out the child. * rendering/RenderFlexibleBox.h: Canonical link: https://commits.webkit.org/234435@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273264 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-22 19:12:03 +00:00
<!DOCTYPE html>
<head>
<style>
.flex {
display: flex;
flex-direction: column;
height: 100%;
}
</style>
<script src="../resources/runner.js"></script>
<script>
function startTest() {
document.body.offsetHeight;
var index = 0;
PerfTestRunner.measureRunsPerSecond({run: function() {
document.body.style.width = ++index % 2 ? "99%" : "98%";
document.body.offsetHeight;
}});
}
</script>
</head>
<body onload="startTest()">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>