grid-intrinsic-track-sizes-001.html (3906B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Intrinsic contribution of a small item to intrinsic tracks</title> 4 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 5 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content"> 6 <meta name="assert" content="This test checks that the intrinsic contribution of a single grid item smaller than its container is distributed correctly among the tracks it spans when intrinsic tracks are involved."> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <style> 9 #grid { 10 display: grid; 11 width: 120px; 12 height: 120px; 13 border: solid; 14 font: 10px/1 Ahem; 15 } 16 #item { 17 background: blue; 18 /* make min-content contribution differ from minimum contribution */ 19 min-width: 12px; 20 min-height: 12px; 21 } 22 </style> 23 24 <div id="grid"> 25 <div id="item">XXX XX<br>XX<br>XX</div> 26 </div> 27 28 <div id="log"></div> 29 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <script src="../grid-definition/support/testing-utils.js"></script> 33 <script> 34 const item = document.getElementById("item"); 35 function checkTrackSizes(span, trackList, expectedCols, expectedRows) { 36 item.style.gridColumn = item.style.gridRow = `span ${span}`; 37 if (!expectedRows) { 38 expectedRows = expectedCols; 39 } 40 TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expectedCols, expectedRows); 41 } 42 43 setup({ explicit_done: true }); 44 document.fonts.ready.then(() => { 45 // Item spanning a single track 46 checkTrackSizes(1, "auto", "120px"); 47 checkTrackSizes(1, "min-content", "30px", "40px"); 48 checkTrackSizes(1, "max-content", "60px", "30px"); 49 50 checkTrackSizes(1, "minmax(0, auto)", "120px"); 51 checkTrackSizes(1, "minmax(0, min-content)", "30px", "40px"); 52 checkTrackSizes(1, "minmax(0, max-content)", "60px", "30px"); 53 54 checkTrackSizes(1, "minmax(auto, 10px)", "12px"); 55 checkTrackSizes(1, "minmax(min-content, 10px)", "30px", "40px"); 56 checkTrackSizes(1, "minmax(max-content, 10px)", "60px", "30px"); 57 58 // Item spanning two identical tracks 59 60 checkTrackSizes(2, "auto auto", "60px 60px"); 61 checkTrackSizes(2, "min-content min-content", "15px 15px", "20px 20px"); 62 checkTrackSizes(2, "max-content max-content", "30px 30px", "15px 15px"); 63 64 checkTrackSizes(2, "minmax(0, auto) minmax(0, auto)", "60px 60px"); 65 checkTrackSizes(2, "minmax(0, min-content) minmax(0, min-content)", "15px 15px", "20px 20px"); 66 checkTrackSizes(2, "minmax(0, max-content) minmax(0, max-content)", "30px 30px", "15px 15px"); 67 68 checkTrackSizes(2, "minmax(auto, 4px) minmax(auto, 4px)", "6px 6px"); 69 checkTrackSizes(2, "minmax(auto, 10px) minmax(auto, 10px)", "10px 10px"); 70 checkTrackSizes(2, "minmax(min-content, 10px) minmax(min-content, 10px)", "15px 15px", "20px 20px"); 71 checkTrackSizes(2, "minmax(max-content, 10px) minmax(max-content, 10px)", "30px 30px", "15px 15px"); 72 73 // Item spanning a fixed track also 74 checkTrackSizes(2, "20px auto", "20px 100px"); 75 checkTrackSizes(2, "20px min-content", "20px 10px", "20px 20px"); 76 checkTrackSizes(2, "20px max-content", "20px 40px", "20px 10px"); 77 78 checkTrackSizes(2, "20px minmax(0, auto)", "20px 100px"); 79 checkTrackSizes(2, "20px minmax(0, min-content)", "20px 10px", "20px 20px"); 80 checkTrackSizes(2, "20px minmax(0, max-content)", "20px 40px", "20px 10px"); 81 82 checkTrackSizes(2, "20px minmax(auto, 30px)", "20px 30px"); 83 checkTrackSizes(2, "20px minmax(min-content, 6px)", "20px 10px", "20px 20px"); 84 checkTrackSizes(2, "20px minmax(min-content, 40px)", "20px 40px", "20px 40px"); 85 checkTrackSizes(2, "20px minmax(max-content, 6px)", "20px 40px", "20px 10px"); 86 checkTrackSizes(2, "20px minmax(max-content, 30px)", "20px 40px", "20px 30px"); 87 88 // Item spanning two mismatched intrinsic tracks 89 checkTrackSizes(2, "max-content min-content", "45px 15px", "15px 15px"); 90 91 done(); 92 }); 93 </script>