| <!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:obrufau@igalia.com"> |
| <link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com"> |
| <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> |
