Skip to content

GitLab

T
tangled
Commit d9c25cbb authored by Andrew Comminos's avatar Andrew Comminos Committed by Commit Bot
Browse files
Options

Add perf test for CSS flexbox optimization 9.8.1 

Test that propagated definite heights of flexboxes avoid a reflow of wrapping
text. With the definite height optimization, the benchmark runs twice as fast
in my local testing.

Bug: 703512
Change-Id: Ib5fbf14c90735504007883c874e71f7461fe1d11
Reviewed-on: https://chromium-review.googlesource.com/c/1330289Reviewed-by: default avatarChristian Biesinger <cbiesinger@chromium.org>
Reviewed-by: default avatarEmil A Eklund <eae@chromium.org>
Reviewed-by: default avatarNed Nguyen <nednguyen@google.com>
Commit-Queue: Ned Nguyen <nednguyen@google.com>
Cr-Commit-Position: refs/heads/master@{#607069}
parent c05d4651
Show whitespace changes
Inline Side-by-side
Showing with 41 additions and 0 deletions
third_party/blink/perf_tests/layout/flexbox-row-stretch-height-definite.html 0 → 100644
View file @ d9c25cbb
<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
</head>
<body style="overflow-y: scroll">
<div id="flexbox-outer" style="display: flex; width: 512px; height: 256px">
<div id="neighbor" style="width: 256px">
</div>
<div id="flexbox-inner" style="flex-direction: column; overflow: auto">
<div id="contents" style="height: 100%; overflow: hidden">
</div>
</div>
</div>
</body>
<script>
// Add wrapping text to make the relayout from scrollbar positioning more expensive.
const contents = document.querySelector('#contents');
for (let i = 0; i < 1000; i++) {
contents.innerHTML += '<div>this text should wrap so a change in its container width triggers a relayout</div>';
}
const neighbor = document.querySelector("#neighbor");
function runTest()
{
neighbor.innerHTML = "changing this element's contents should not relayout the right flexbox";
PerfTestRunner.forceLayout();
neighbor.innerHTML = "";
PerfTestRunner.forceLayout();
}
PerfTestRunner.measureRunsPerSecond({
description: "Measures performance of definite-height flexbox that stretches its children's height (row).",
run: runTest,
});
</script>
</html>
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