grid-place-content-001.html (3890B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid containers support 'place-content'</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the 'justify-content' and 'align-content' properties"> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-justify-content" title="5.1. The 'justify-content' and 'align-content' Properties"> 7 <meta name="assert" content="This test checks that the 'justify-content' and 'align-content' properties, set using their 'place-content' shorthand, work well in grid containers."> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .grid { 11 display: inline-grid; 12 position: relative; 13 vertical-align: top; 14 border: 10px solid black; 15 margin: 5px; 16 font: 40px/1 Ahem; 17 color: cyan; 18 } 19 .small { 20 padding: 40px; 21 } 22 .big { 23 padding: 0px; 24 } 25 .content-box.small { 26 width: 0px; 27 height: 0px; 28 } 29 .content-box.big { 30 width: 80px; 31 height: 80px; 32 } 33 .border-box { 34 box-sizing: border-box; 35 width: 100px; 36 height: 100px; 37 } 38 .start { 39 place-content: start; 40 } 41 .center { 42 place-content: center; 43 } 44 .end { 45 place-content: end; 46 } 47 .space-between { 48 place-content: space-between; 49 } 50 .space-around { 51 place-content: space-around; 52 } 53 </style> 54 <script src="/resources/testharness.js"></script> 55 <script src="/resources/testharnessreport.js"></script> 56 <script src="/resources/check-layout-th.js"></script> 57 <div id="log"></div> 58 59 <h3>Small content area</h3> 60 61 <pre>box-sizing: content-box</pre> 62 63 <div class="grid small content-box start"> 64 <div data-offset-x="40" data-offset-y="40">X</div> 65 </div> 66 <div class="grid small content-box center"> 67 <div data-offset-x="20" data-offset-y="20">X</div> 68 </div> 69 <div class="grid small content-box end"> 70 <div data-offset-x="0" data-offset-y="0">X</div> 71 </div> 72 <div class="grid small content-box space-between"> 73 <div data-offset-x="40" data-offset-y="40">X</div> 74 </div> 75 <div class="grid small content-box space-around"> 76 <div data-offset-x="40" data-offset-y="40">X</div> 77 </div> 78 79 <pre>box-sizing: border-box</pre> 80 81 <div class="grid small border-box start"> 82 <div data-offset-x="40" data-offset-y="40">X</div> 83 </div> 84 <div class="grid small border-box center"> 85 <div data-offset-x="20" data-offset-y="20">X</div> 86 </div> 87 <div class="grid small border-box end"> 88 <div data-offset-x="0" data-offset-y="0">X</div> 89 </div> 90 <div class="grid small border-box space-between"> 91 <div data-offset-x="40" data-offset-y="40">X</div> 92 </div> 93 <div class="grid small border-box space-around"> 94 <div data-offset-x="40" data-offset-y="40">X</div> 95 </div> 96 97 <h3>Big content area</h3> 98 99 <pre>box-sizing: content-box</pre> 100 101 <div class="grid big content-box start"> 102 <div data-offset-x="0" data-offset-y="0">X</div> 103 </div> 104 <div class="grid big content-box center"> 105 <div data-offset-x="20" data-offset-y="20">X</div> 106 </div> 107 <div class="grid big content-box end"> 108 <div data-offset-x="40" data-offset-y="40">X</div> 109 </div> 110 <div class="grid big content-box space-between"> 111 <div data-offset-x="0" data-offset-y="0">X</div> 112 </div> 113 <div class="grid big content-box space-around"> 114 <div data-offset-x="20" data-offset-y="20">X</div> 115 </div> 116 117 <pre>box-sizing: border-box</pre> 118 119 <div class="grid border-box start"> 120 <div data-offset-x="0" data-offset-y="0">X</div> 121 </div> 122 <div class="grid big border-box center"> 123 <div data-offset-x="20" data-offset-y="20">X</div> 124 </div> 125 <div class="grid big border-box end"> 126 <div data-offset-x="40" data-offset-y="40">X</div> 127 </div> 128 <div class="grid big border-box space-between"> 129 <div data-offset-x="0" data-offset-y="0">X</div> 130 </div> 131 <div class="grid big border-box space-around"> 132 <div data-offset-x="20" data-offset-y="20">X</div> 133 </div> 134 135 <script> 136 document.fonts.ready.then(() => { 137 checkLayout('.grid'); 138 }); 139 </script>