grid-block-end-column-auto-flow.html (1495B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="author" href="mailto:sammy.gill@apple.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> 6 <meta name="assert" content="Trimmed block-end margins for grid items should be reflected in computed style"> 7 </head> 8 <style> 9 grid { 10 display: grid; 11 width: min-content; 12 grid-auto-flow: column; 13 border: 1px solid black; 14 grid-template-rows: auto auto auto; 15 margin-trim: block-end; 16 } 17 item { 18 display: block; 19 width: 50px; 20 height: 50px; 21 margin-block-end: 10px; 22 } 23 .span-four { 24 grid-row: span 4; 25 } 26 item:nth-child(1) { 27 grid-row: 1; 28 background-color: green; 29 } 30 item:nth-child(2) { 31 grid-row: 2; 32 background-color: blue; 33 } 34 item:nth-child(3) { 35 grid-row: 3; 36 background-color: purple; 37 } 38 item:nth-child(4) { 39 background-color:burlywood; 40 } 41 item:nth-child(5) { 42 background-color: grey; 43 grid-row: 4; 44 } 45 </style> 46 <script src="/resources/testharness.js"></script> 47 <script src="/resources/testharnessreport.js"></script> 48 <script src="/resources/check-layout-th.js"></script> 49 <body onload="checkLayout('grid > item')"> 50 <div id="target"> 51 <grid> 52 <item data-expected-margin-bottom="10"></item> 53 <item data-expected-margin-bottom="10"></item> 54 <item data-expected-margin-bottom="10"></item> 55 <item data-expected-margin-bottom="0" class="span-four"></item> 56 <item data-expected-margin-bottom="0"></item> 57 </grid> 58 </div> 59 </body> 60 </html>