mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 13:18:45 +02:00
e13b31769f
Automatic update from web-platform-tests[css-grid] Performance optimizations in the Baseline alignment code Since we integrated the baseline alignment logic in the grid tracks sizing algorithm, its impact on performance has grown considerably. The analysis of the new logic added and its overhead, due to different operations, shows that evaluating the item's participation in the baseline alignment context is the most expensive one. It's specially demanding the evaluation of the grid item's alignment properties. Considering that currently we are doing this for every grid item, this CL propose to reuse the loop we already have to clear the grid item's override size to cache the items with a baseline value in their alignment CSS properties. Thanks to this cache we can determine the item's participation in a baseline alignment context in the different phases of the track sizing algorithm, with almost no cost (compared to the current logic). It may be possible to share the cache with the algorithm run for computing the grid's intrinsic size; however, if the intrinsic size logic is run before the grid's layout, we'll end up duplicating the cache. Additionally, this cache is also used in the alignment phase of the grid layout logic; this change helps to avoid the various issues we have been suffering related to the different evaluations of the item's participation in baseline during the different phases of the grid layout algorithm. BUG = 873452 Change-Id: Ida27be11ae0f5c455e6077367a277981ab35cec1 Reviewed-on: https://chromium-review.googlesource.com/1179897 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#593552} -- wpt-commits: f6de5f7d5d50b1ad30a1e17922e183868fd3e935 wpt-pr: 12816
63 lines
2.2 KiB
HTML
63 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
|
|
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
|
|
<meta name="assert" content="Changing the justify-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
|
|
<style>
|
|
#container {
|
|
position: relative;
|
|
display: inline-grid;
|
|
grid: 50px 50px 50px / 100px;
|
|
background: grey;
|
|
justify-items: baseline;
|
|
}
|
|
#container > div { writing-mode: vertical-rl; }
|
|
#item1 {
|
|
width: 20px;
|
|
background: blue;
|
|
}
|
|
#item2 {
|
|
width: 50px;
|
|
background: green;
|
|
}
|
|
#item3 {
|
|
width: 30px;
|
|
background: red;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<script src="support/style-change.js"></script>
|
|
<script>
|
|
function runTest() {
|
|
let before = {
|
|
item1: {"data-offset-x": 30 },
|
|
item2: {"data-offset-x": 0 },
|
|
item3: {"data-offset-x": 20 }
|
|
};
|
|
|
|
let after = {
|
|
item1: {"data-offset-x": 10 },
|
|
item2: {"data-offset-x": 50 },
|
|
item3: {"data-offset-x": 0 }
|
|
};
|
|
|
|
evaluateStyleChangeMultiple("before", before);
|
|
item2.style.justifySelf = "end";
|
|
evaluateStyleChangeMultiple("after", after);
|
|
done();
|
|
}
|
|
</script>
|
|
<body onload="runTest()">
|
|
<div id="container">
|
|
<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
|
|
<div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
|
|
<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
|
|
</div>
|
|
<div id="log"></div>
|
|
</body>
|