fune/testing/web-platform/tests/css/css-grid/dynamic-grid-within-flexbox.html
Ian Kilpatrick b1fcee1c5b Bug 1711276 [wpt PR 29004] - [GridNG] Fix various grid caching bugs., a=testonly
Automatic update from web-platform-tests
[GridNG] Fix various grid caching bugs.

This patch adjusts layouts caching logic for grid.
There are a few classes of fixes:

1) Clearing |intrinsic_block_size| when we previously had an "extrinsic"
   constraint (fixed, or stretching size).

   Here we can't trust the |intrinsic_block_size| as it is dependent
   on the extrinsic constraint.
   This also caught a bug in flexbox that it was possible to use a bad
   intrinsic block-size when stretching in the block-axis.

2) Clearing |intrinsic_block_size| when we have %-based block-sizes.

   Here there are cases (with min-width/max-width) where a repeater
   might be different causing an incorrect block-size.
   See: dynamic-grid-with-auto-fill.html

3) Miss the cache if our initial block-size changes. This is different
   to other layout modes, but basically due to 'auto' tracks stretching
   to the available block-size, we need this check.
   This is super common within a column flexbox.

Bug: 1045599
Change-Id: Ic9a16b598a4957bea7fc2bf2550fbf3335b84aff
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2898150
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: David Grogan <dgrogan@chromium.org>
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#883618}

--

wpt-commits: 526c230dd4309f70400332d67dd7ebd3ed31c1f4
wpt-pr: 29004
2021-05-20 03:45:30 +00:00

14 lines
575 B
HTML

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="display: flex; width: 100px; height: 200px;">
<div style="flex-grow: 1; min-height: 100px; display: grid;">
<div style="background: green;"></div>
</div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.alignItems = 'start';
</script>