-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[css-contain][css-grid] Support size containment on grid containers
We were always sizing grid containers with "contain: size" as 0x0. However this is wrong as discussed on the following GitHub issue: w3c/csswg-drafts#2804 To do this we add a new method to GridTrackSizingAlgorithmStrategy called IsComputingSizeContainment() to determine the cases in which we're computing the size containment dimensions. That way we can run only the initialization step instead of the full algorithm to get the expected track sizes for size containment. For widths the change is pretty simple in LayoutGrid::ComputeIntrinsicLogicalWidths(). For heights we don't have a phase to compute the intrinsic size so apart from the changes in LayoutGrid::UpdateBlockLayout() we need some extra checks in LayoutBox too. There is a minor change in test contain-size-grid-002.html, because after this patch it was not passing yet due to some overflow that is unrelated to the purpose of the test. BUG=855261 TEST=external/wpt/css/css-contain/contain-size-grid-002.html TEST=external/wpt/css/css-contain/contain-size-grid-003.html Change-Id: I4d0fd417183068518070721afde84efdbfe1fcb4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1355923 Commit-Queue: Manuel Rego <rego@igalia.com> Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Sergio Villar <svillar@igalia.com> Cr-Commit-Position: refs/heads/master@{#657678}
- Loading branch information
1 parent
b7aa0fb
commit cf59e22
Showing
1 changed file
with
200 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,200 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Containment Test: Size containment on grid containers</title> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> | ||
| <meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents but taking into account the track sizes."> | ||
| <style> | ||
| .grid { | ||
| display: inline-grid; | ||
| contain: size; | ||
| position: relative; | ||
| font: 10px/1 Ahem; | ||
| } | ||
| .wrapper { | ||
| width: 300px; | ||
| height: 150px; | ||
| } | ||
| </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')"> | ||
|
|
||
| <div id="log"></div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px;" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px;" | ||
| data-expected-width="200" data-expected-height="100"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content;" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px; overflow: scroll;" | ||
| data-expected-width="115" data-expected-height="65"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px; overflow: scroll;" | ||
| data-expected-width="200" data-expected-height="100"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content; overflow: scroll;" | ||
| data-expected-width="115" data-expected-height="65"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px; margin: 2px 4px;" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px;" | ||
| data-expected-width="120" data-expected-height="60"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px; padding: 3px 6px;" | ||
| data-expected-width="132" data-expected-height="66"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 60% / 50%;" | ||
| data-expected-width="0" data-expected-height="0"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: auto / auto;" | ||
| data-expected-width="0" data-expected-height="0"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 1fr / 2fr;" | ||
| data-expected-width="0" data-expected-height="0"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: fit-content(50px) / fit-content(100px);" | ||
| data-expected-width="0" data-expected-height="0"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px);" | ||
| data-expected-width="100" data-expected-height="60"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px); width: min-content; height: min-content;" | ||
| data-expected-width="50" data-expected-height="60"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: auto 50px 20% 1fr / 100px auto 10% 2fr;" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: repeat(3, 20px) / repeat(4, 25px);" | ||
| data-expected-width="100" data-expected-height="60"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: repeat(3, 20px 10px) / repeat(2, 25px auto 25px);" | ||
| data-expected-width="100" data-expected-height="90"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: repeat(auto-fill, 25px 25px) / repeat(auto-fill, 50px 50px);" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: repeat(auto-fill, 25px 20% 25px) / repeat(auto-fill, 50px 10% 50px);" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: repeat(auto-fit, 50px) / repeat(auto-fit, 100px);" | ||
| data-expected-width="0" data-expected-height="0"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: repeat(auto-fit, 25px 20% 25px) / repeat(auto-fit, 50px 10% 50px);" | ||
| data-expected-width="0" data-expected-height="0"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 10px repeat(auto-fill, 20px) 10px / 25px repeat(auto-fill, 50px) 25px;" | ||
| data-expected-width="100" data-expected-height="40"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px fit-content(20px) / 100px fit-content(50px);" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px / 100px; grid-gap: 10px 20px;" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 25px 25px / 50px 50px; grid-gap: 10px 20px;" | ||
| data-expected-width="120" data-expected-height="60"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 10px repeat(2, 10px) / 20px repeat(4, 20px); grid-gap: 5px 10px;" | ||
| data-expected-width="140" data-expected-height="40"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: repeat(auto-fill, 10px 20% 10px) / repeat(auto-fill, 20px 10% 20px); grid-gap: 5px 10px;" | ||
| data-expected-width="60" data-expected-height="30"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 50px repeat(auto-fill, 10px 10px) / 100px repeat(auto-fill, 20px 20px); grid-gap: 5px 10px;" | ||
| data-expected-width="160" data-expected-height="80"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: repeat(auto-fill, 10px 10px) 50px / repeat(auto-fill, 20px 20px) 100px; grid-gap: 5px 10px;" | ||
| data-expected-width="160" data-expected-height="80"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 25px repeat(auto-fill, 10px 10px) 25px / 50px repeat(auto-fill, 20px 20px) 50px; grid-gap: 5px 10px;" | ||
| data-expected-width="170" data-expected-height="85"> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: 25px repeat(auto-fit, 10px 10px) 25px / 50px repeat(auto-fit, 20px 20px) 50px; grid-gap: 5px 10px;" | ||
| data-expected-width="110" data-expected-height="55"> | ||
| </div> | ||
|
|
||
| <div class="wrapper"> | ||
| <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);" | ||
| data-expected-width="100" data-expected-height="75"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="wrapper"> | ||
| <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);" | ||
| data-expected-width="0" data-expected-height="0"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="wrapper"> | ||
| <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);" | ||
| data-expected-width="100" data-expected-height="75"> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="wrapper"> | ||
| <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);" | ||
| data-expected-width="0" data-expected-height="0"> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="grid: auto 50px / 100px auto;" | ||
| data-expected-width="100" data-expected-height="50"> | ||
| <div data-expected-width="100" data-expected-height="10" | ||
| data-offset-x="0" data-offset-y="0">X</div> | ||
| <div data-expected-width="40" data-expected-height="10" | ||
| data-offset-x="100" data-offset-y="0">XX</div> | ||
| <div data-expected-width="100" data-expected-height="50" | ||
| data-offset-x="0" data-offset-y="10">XXX</div> | ||
| <div data-expected-width="40" data-expected-height="50" | ||
| data-offset-x="100" data-offset-y="10">XXXX</div> | ||
| </div> | ||
|
|
||
| </body> |