grid-flex-track-intrinsic-sizes-002.html (3662B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Intrinsic contributions of 2 items with flex tracks</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <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"> 6 <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"> 7 <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."> 8 <style> 9 #grid { 10 display: grid; 11 grid-template-areas: ". . . ." 12 ". a . ." 13 ". . . ." 14 ". . . b"; 15 width: 50px; 16 height: 50px; 17 border: solid; 18 } 19 #item1 { 20 grid-column: 1 / a; 21 grid-row: 1 / a; 22 width: 60px; 23 height: 60px; 24 background: blue; 25 } 26 #item2 { 27 grid-column: a / b; 28 grid-row: a / b; 29 width: 150px; 30 height: 150px; 31 background: yellow; 32 } 33 </style> 34 35 <div id="log"></div> 36 37 <div id="grid"> 38 <div id="item1"></div> 39 <div id="item2"></div> 40 </div> 41 42 <script src="/resources/testharness.js"></script> 43 <script src="/resources/testharnessreport.js"></script> 44 <script src="../grid-definition/support/testing-utils.js"></script> 45 <script> 46 function checkTrackSizes(trackList, expected) { 47 TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected); 48 } 49 50 // We have a symmetric grid with 2 items and 4 tracks, as follows: 51 // ╔═╤═╗─┬─┐ 52 // ╟─╔═╬═╪═╗ 53 // ╚═╬═╝─┼─╢ 54 // ├─╫─┼─┼─╢ 55 // └─╚═╧═╧═╝ 56 57 // The 1st item spans a flexible track, therefore its contribution (60px) is distributed last. 58 // The 2nd item distributes its contribution (150px) among the 2nd, 3rd and 4th tracks. 59 // Then the 1st item only needs to distribute 60px-50px=10px to the 1st track. 60 checkTrackSizes("1fr auto auto auto", "10px 50px 50px 50px"); 61 62 // Now the 1st item still spans a flexible track, but it's not intrinsic. 63 // Therefore, no track receives its intrinsic contribution. 64 checkTrackSizes("minmax(0, 1fr) auto auto auto", "0px 50px 50px 50px"); 65 66 // Now both items span a flexible track, so their contributions are handled simultaneously, 67 // even if the 1st item still spans less tracks than the 2nd one. 68 // Therefore the distribution is as follows: 69 // - 1st track: 60px/2 = 30px 70 // - 2nd track: max(60px/2, 150px/3) = 50px 71 // - 3rd track: 150px/3 = 50px 72 // - 4th track: 150px/3 = 50px 73 checkTrackSizes("1fr 1fr 1fr 1fr", "30px 50px 50px 50px"); 74 75 // Like the previous case, but with different flex ratios: 76 // - 1st track: 60px/2 = 30px 77 // - 2nd track: max(60px/2, 150px/6) = 30px 78 // - 3rd track: 150px/6 = 25px 79 // - 4th track: 150px*4/6 = 100px 80 checkTrackSizes("1fr 1fr 1fr 4fr", "30px 30px 25px 100px"); 81 82 // Change the grid as follows: 83 // ╔═╦═╤═╗ 84 // ╠═╝─┼─╢ 85 // ╟─┼─┼─╢ 86 // ╚═╧═╧═╝ 87 document.getElementById("grid").style.gridTemplateAreas = ` 88 "a . ." 89 ". . ." 90 ". . b"`; 91 92 // Now the 1st item has a span of 1, so usually we would handle its contribution 93 // at the very beginning, before items that span multiple tracks. 94 // But not if its track is flexible, then it's still handled at the end, 95 // simultaneously with other items that span some flexible track. 96 // - 1nd track: max(60px, 150px/3) = 60px 97 // - 2nd track: 150px/3 = 50px 98 // - 3rd track: 150px/3 = 50px 99 checkTrackSizes("1fr 1fr 1fr", "60px 50px 50px"); 100 </script>