grid-inline-start-item-negative-span.html (1092B)
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 inline-start margins in grid should be reflected in computed style"> 7 </head> 8 <style> 9 grid { 10 display: grid; 11 width: min-content; 12 outline: 1px solid black; 13 grid-template-columns: repeat(2, auto); 14 margin-trim: inline-start; 15 } 16 item { 17 display: block; 18 width: 50px; 19 height: 50px; 20 margin-inline-start: 10px; 21 background-color: green; 22 } 23 .negative-line-number { 24 width: 50px; 25 grid-row: 2; 26 grid-column: -3; 27 background-color: blue; 28 } 29 </style> 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <script src="/resources/check-layout-th.js"></script> 33 <body onload="checkLayout('grid > item')"> 34 <div id="target"> 35 <grid> 36 <item data-expected-margin-left="0" class="negative-line-number"></item> 37 <item data-expected-margin-left="0"></item> 38 </grid> 39 </div> 40 </body> 41 </html>