grid-block-end.html (1456B)
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 border: 1px solid black; 13 grid-template-columns: repeat(4, auto); 14 margin-trim: block-end; 15 } 16 item { 17 display: block; 18 width: 50px; 19 height: 50px; 20 margin-bottom: 10px; 21 } 22 .locked-position { 23 grid-row: 2; 24 grid-column: 2; 25 margin-block-end: 50px; 26 background-color: magenta; 27 } 28 .span-three-columns { 29 grid-column: span 3; 30 background-color: purple; 31 } 32 .span-five-columns { 33 grid-column: span 5; 34 } 35 item:nth-child(1) { 36 background-color: green; 37 } 38 item:nth-child(4) { 39 background-color: blue; 40 } 41 </style> 42 <script src="/resources/testharness.js"></script> 43 <script src="/resources/testharnessreport.js"></script> 44 <script src="/resources/check-layout-th.js"></script> 45 <body onload="checkLayout('grid > item')"> 46 <div id="target"> 47 <grid> 48 <item class="span-five-columns" data-expected-margin-bottom="10"></item> 49 <item class="locked-position" data-expected-margin-bottom="50"></item> 50 <item class="span-three-columns" data-expected-margin-bottom="10"></item> 51 <item data-expected-margin-bottom="0"></item> 52 </grid> 53 </div> 54 </body> 55 </html>