grid-inline-end-columns-added-to-end.html (1300B)
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="spanning grid item adds columns to implicit grid and should be trimmed"> 7 <style> 8 grid { 9 display: grid; 10 grid-template-columns: repeat(2, auto); 11 outline: 1px solid black; 12 margin-trim: inline-end; 13 } 14 item { 15 display: block; 16 height: 50px; 17 } 18 .span-three { 19 grid-column: span 3; 20 } 21 .locked-position { 22 grid-row: 1; 23 grid-column: 2; 24 } 25 item:nth-child(1) { 26 background-color: aqua; 27 margin-inline-end: 10px; 28 } 29 item:nth-child(2) { 30 background-color: blueviolet; 31 margin-inline-end: 30%; 32 } 33 item:nth-child(3) { 34 background-color: blue; 35 margin-inline-end: -30px; 36 } 37 item:nth-child(4) { 38 background-color: coral; 39 margin-inline-end: 10px; 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 </head> 46 <body onload="checkLayout('grid > item')"> 47 <div id="target"> 48 <grid> 49 <item class="locked-position" data-expected-margin-right="10"></item> 50 <item class="span-three"></item> 51 </grid> 52 </div> 53 </body> 54 </html>