testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
author Javier Fernandez <jfernandez@igalia.com>
Fri, 28 Sep 2018 09:54:07 +0000
changeset 487042 557a989b9ef788d50008720c20e5423086fe3ac9
permissions -rw-r--r--
Bug 1488291 [wpt PR 12816] - [css-grid] Performance optimizations in the Baseline alignment code, a=testonly 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

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</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/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Items not participating in baseline may later participate if there is an extra pass of the track sizing algorithm.">
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
<style>
.grid {
  position: relative;
  display: inline-grid;
  background: grey;
  text-orientation: sideways;
  font-family: Ahem;
}
.row { grid: minmax(0px, 1fr) / 50px 50px 100px }
.column { grid: 50px 50px 100px / minmax(0px, 1fr); }
.item1 {
   font-size: 30px;
   background: blue;
}
.item2 {
  font-size: 20px;
  background: red;
}
.item3 {
  font-size: 80px;
  background: green;
}
.height50 { height: 50px; }
.relativeHeight { height: 50%; }
.relativeWidth  { width: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">

<pre>flex rows - column-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
<div class="grid row alignItemsBaseline">
  <div class="item1 verticalLR" data-offset-x="0"   data-offset-y="34" data-expected-width="50"  data-expected-height="30">É</div>
  <div class="item2"            data-offset-x="50"  data-offset-y="48" data-expected-width="50"  data-expected-height="20">É</div>
  <div class="item3"            data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
</div>

<pre>flex row - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
<div class="grid row alignItemsBaseline ">
  <div class="item1 relativeHeight" data-offset-x="0"   data-offset-y="40" data-expected-width="50"  data-expected-height="40"></div>
  <div class="item2"                data-offset-x="50"  data-offset-y="64" data-expected-width="50"  data-expected-height="20">É</div>
  <div class="item3 verticalLR"     data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
</div>

<pre>flex row - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
<div class="grid row alignItemsBaseline">
  <div class="item1 relativeHeight" data-offset-x="0"   data-offset-y="24" data-expected-width="50"  data-expected-height="40"></div>
  <div class="item2 verticalLR"     data-offset-x="50"  data-offset-y="44" data-expected-width="50"  data-expected-height="20">É</div>
  <div class="item3"                data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
</div>

<pre>flex column - row-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
<div class="grid column justifyItemsBaseline">
  <div class="item1"            data-offset-x="16" data-offset-y="0"   data-expected-width="30" data-expected-height="50">É</div>
  <div class="item2 verticalLR" data-offset-x="12" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
  <div class="item3 verticalLR" data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
</div>

<pre>flex column - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
<div class="grid column justifyItemsBaseline">
  <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0"   data-expected-width="40" data-expected-height="50"></div>
  <div class="item2 verticalLR"             data-offset-x="12" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
  <div class="item3 verticalLR"             data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
</div>

<pre>flex columns - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
<div class="grid column justifyItemsBaseline">
  <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0"   data-expected-width="40" data-expected-height="50"></div>
  <div class="item2"                        data-offset-x="16" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
  <div class="item3 verticalLR"             data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
</div>

</body>