-
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.
Duplicate -001, but with the item getting its size from a child rathe…
…r than explicitly. (#24463) * Duplicate -001, but with the item getting its size from a child rather than explicitly. * Whoops, remove the <base> I was using for testing.
- Loading branch information
Showing
1 changed file
with
86 additions
and
0 deletions.
There are no files selected for viewing
86 changes: 86 additions & 0 deletions
86
css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-003.html
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,86 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Layout Test: Intrinsic contribution of an item with flex tracks</title> | ||
| <link rel="author" title="Oriol Brufau" href="mailto:[email protected]"> | ||
| <link rel="author" title="Tab Atkins-Bittner" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-items" title="11.5.3 Increase sizes to accommodate spanning items crossing content-sized tracks"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-flex-items" title="11.5.4 Increase sizes to accommodate spanning items crossing flexible tracks"> | ||
| <meta name="assert" content="This test checks that the intrinsic contribution of a single grid item is distributed correctly among the tracks it spans when flexible tracks are involved, and the item's size is determined by its children rather than explicitly."> | ||
| <style> | ||
| #grid { | ||
| display: grid; | ||
| width: 50px; | ||
| height: 50px; | ||
| border: solid; | ||
| } | ||
| #item { | ||
| background: blue; | ||
| } | ||
| #item::before { | ||
| content: ""; | ||
| display: block; | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="log"></div> | ||
|
|
||
| <div id="grid"> | ||
| <div id="item"></div> | ||
| </div> | ||
|
|
||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="../grid-definition/support/testing-utils.js"></script> | ||
| <script> | ||
| const item = document.getElementById("item"); | ||
| function checkTrackSizes(span, trackList, expected) { | ||
| item.style.gridColumn = item.style.gridRow = `span ${span}`; | ||
| TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected); | ||
| } | ||
|
|
||
| // Item spanning an intrinsic flexible track | ||
| checkTrackSizes(1, "0fr", "100px"); | ||
| checkTrackSizes(1, "1fr", "100px"); | ||
| checkTrackSizes(1, "2fr", "100px"); | ||
|
|
||
| // Item spanning a fixed flexible track | ||
| checkTrackSizes(1, "minmax(0, 0fr)", "0px"); | ||
| checkTrackSizes(1, "minmax(0, .5fr)", "25px"); | ||
| checkTrackSizes(1, "minmax(0, 1fr)", "50px"); | ||
| checkTrackSizes(1, "minmax(0, 2fr)", "50px"); | ||
| checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); | ||
|
|
||
| // Item spanning 2 intrinsic flexible tracks | ||
| checkTrackSizes(2, "0fr 0fr", "50px 50px"); | ||
| checkTrackSizes(2, "0fr 1fr", "0px 100px"); | ||
| checkTrackSizes(2, "1fr 0fr", "100px 0px"); | ||
| checkTrackSizes(2, "1fr 1fr", "50px 50px"); | ||
| checkTrackSizes(2, "1fr 3fr", "25px 75px"); | ||
| checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 0px"); | ||
|
|
||
| // Item spanning 2 fixed flexible tracks | ||
| checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); | ||
| checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 50px"); | ||
| checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 35px"); | ||
| checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "25px 25px"); | ||
| checkTrackSizes(2, "minmax(30px, 1fr) minmax(0, 1fr)", "30px 20px"); | ||
|
|
||
| // Item spanning an intrinsic flexible track and a fixed flexible track | ||
| checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px"); | ||
| checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px"); | ||
| checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px"); | ||
| checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px"); | ||
|
|
||
| // Item spanning an intrinsic flexible track and an intrinsic non-flexible track | ||
| checkTrackSizes(2, "0fr auto", "100px 0px"); | ||
| checkTrackSizes(2, "1fr auto", "100px 0px"); | ||
| checkTrackSizes(2, "1fr max-content", "100px 0px"); | ||
|
|
||
| // Item spanning a fixed flexible track and an intrinsic non-flexible track | ||
| checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 100px"); | ||
| checkTrackSizes(2, "minmax(0, 1fr) auto", "0px 100px"); | ||
| checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 75px"); | ||
| checkTrackSizes(2, "minmax(25px, 1fr) auto", "25px 75px"); | ||
| </script> |