grid-flex-track-intrinsic-sizes-001.html (3355B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Intrinsic contribution of an item 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 contribution of a single grid item is distributed correctly among the tracks it spans when flexible tracks are involved."> 8 <style> 9 #grid { 10 display: grid; 11 width: 50px; 12 height: 50px; 13 border: solid; 14 } 15 #item { 16 width: 100px; 17 height: 100px; 18 background: blue; 19 } 20 </style> 21 22 <div id="log"></div> 23 24 <div id="grid"> 25 <div id="item"></div> 26 </div> 27 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script src="../grid-definition/support/testing-utils.js"></script> 31 <script> 32 const item = document.getElementById("item"); 33 function checkTrackSizes(span, trackList, expected) { 34 item.style.gridColumn = item.style.gridRow = `span ${span}`; 35 TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected); 36 } 37 38 // Item spanning an intrinsic flexible track 39 checkTrackSizes(1, "0fr", "100px"); 40 checkTrackSizes(1, "1fr", "100px"); 41 checkTrackSizes(1, "2fr", "100px"); 42 43 // Item spanning a fixed flexible track 44 checkTrackSizes(1, "minmax(0, 0fr)", "0px"); 45 checkTrackSizes(1, "minmax(0, .5fr)", "25px"); 46 checkTrackSizes(1, "minmax(0, 1fr)", "50px"); 47 checkTrackSizes(1, "minmax(0, 2fr)", "50px"); 48 checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); 49 50 // Item spanning 2 intrinsic flexible tracks 51 checkTrackSizes(2, "0fr 0fr", "50px 50px"); 52 checkTrackSizes(2, "0fr 1fr", "0px 100px"); 53 checkTrackSizes(2, "1fr 0fr", "100px 0px"); 54 checkTrackSizes(2, "1fr 1fr", "50px 50px"); 55 checkTrackSizes(2, "1fr 3fr", "25px 75px"); 56 checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 0px"); 57 58 // Item spanning 2 fixed flexible tracks 59 checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); 60 checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 50px"); 61 checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 35px"); 62 checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "25px 25px"); 63 checkTrackSizes(2, "minmax(30px, 1fr) minmax(0, 1fr)", "30px 20px"); 64 65 // Item spanning an intrinsic flexible track and a fixed flexible track 66 checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px"); 67 checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px"); 68 checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px"); 69 checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px"); 70 71 // Item spanning an intrinsic flexible track and an intrinsic non-flexible track 72 checkTrackSizes(2, "0fr auto", "100px 0px"); 73 checkTrackSizes(2, "1fr auto", "100px 0px"); 74 checkTrackSizes(2, "1fr max-content", "100px 0px"); 75 76 // Item spanning a fixed flexible track and an intrinsic non-flexible track 77 checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 50px"); 78 checkTrackSizes(2, "minmax(0, 1fr) auto", "50px 0px"); 79 checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 25px"); 80 checkTrackSizes(2, "minmax(25px, 1fr) auto", "50px 0px"); 81 </script>