| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Grid Layout Test: Intrinsic contributions of 2 items with flex tracks</title> |
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.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 contributions of 2 items are distributed in the right order when flexible tracks are involved."> |
| <style> |
| #grid { |
| display: grid; |
| grid-template-areas: ". . . ." |
| ". a . ." |
| ". . . ." |
| ". . . b"; |
| width: 50px; |
| height: 50px; |
| border: solid; |
| } |
| #item1 { |
| grid-column: 1 / a; |
| grid-row: 1 / a; |
| width: 60px; |
| height: 60px; |
| background: blue; |
| } |
| #item2 { |
| grid-column: a / b; |
| grid-row: a / b; |
| width: 150px; |
| height: 150px; |
| background: yellow; |
| } |
| </style> |
| |
| <div id="log"></div> |
| |
| <div id="grid"> |
| <div id="item1"></div> |
| <div id="item2"></div> |
| </div> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../grid-definition/support/testing-utils.js"></script> |
| <script> |
| function checkTrackSizes(trackList, expected) { |
| TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected); |
| } |
| |
| // We have a symmetric grid with 2 items and 4 tracks, as follows: |
| // ╔═╤═╗─┬─┐ |
| // ╟─╔═╬═╪═╗ |
| // ╚═╬═╝─┼─╢ |
| // ├─╫─┼─┼─╢ |
| // └─╚═╧═╧═╝ |
| |
| // The 1st item has spans less tracks (2) than the 2nd item (3), |
| // therefore its contribution (60px) is distributed first. |
| // All the 60px go to the 2nd track, since the 1st track is not intrinsic. |
| // Then the 2nd item only needs to distribute 150px-60px=90px |
| // among the 3rd and 4th tracks. |
| checkTrackSizes("minmax(0, 1fr) auto auto auto", "0px 60px 45px 45px"); |
| |
| // The 1st item now spans a flexible track with an intrinsic minimum, |
| // therefore its contribution (60px) is distributed last. |
| // The 2nd item distributes its contribution (150px) among the 2nd, 3rd and 4th tracks. |
| // Then the 1st item only needs to distribute 60px-50px=10px to the 1st track. |
| checkTrackSizes("1fr auto auto auto", "10px 50px 50px 50px"); |
| |
| // Now both items span a flexible track with an intrinsic minimum, |
| // so their contributions are handled simultaneously, |
| // even if the 1st item still spans less tracks than the 2nd one. |
| // Therefore the distribution is as follows: |
| // - 1st track: 60px/2 = 30px |
| // - 2nd track: max(60px/2, 150px/3) = 50px |
| // - 3rd track: 150px/3 = 50px |
| // - 4th track: 150px/3 = 50px |
| checkTrackSizes("1fr 1fr 1fr 1fr", "30px 50px 50px 50px"); |
| |
| // Like the previous case, but with different flex ratios: |
| // - 1st track: 60px/2 = 30px |
| // - 2nd track: max(60px/2, 150px/6) = 30px |
| // - 3rd track: 150px/6 = 25px |
| // - 4th track: 150px*4/6 = 100px |
| checkTrackSizes("1fr 1fr 1fr 4fr", "30px 30px 25px 100px"); |
| |
| // Change the grid as follows: |
| // ╔═╦═╤═╗ |
| // ╠═╝─┼─╢ |
| // ╟─┼─┼─╢ |
| // ╚═╧═╧═╝ |
| document.getElementById("grid").style.gridTemplateAreas = ` |
| "a . ." |
| ". . ." |
| ". . b"`; |
| |
| // Now the 1st item has a span of 1, so usually we would handle its contribution |
| // at the very beginning, before items that span multiple tracks. |
| // But not if its track is flexible, then it's still handled at the end, |
| // simultaneously with other items that span some intrinsic flexible track. |
| // - 1nd track: max(60px, 150px/3) = 60px |
| // - 2nd track: 150px/3 = 50px |
| // - 3rd track: 150px/3 = 50px |
| checkTrackSizes("1fr 1fr 1fr", "60px 50px 50px"); |
| </script> |
