grid-inline-start.html (1587B)
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 } 21 .locked-position { 22 grid-row: 3; 23 grid-column: 1; 24 margin-inline-start: -30px; 25 } 26 item:nth-child(1) { 27 background-color: green; 28 margin-inline-start: 30px; 29 } 30 item:nth-child(2) { 31 background-color: blue; 32 margin-inline-start: 10px; 33 } 34 item:nth-child(3) { 35 background-color: orchid; 36 margin-inline-start: 10%; 37 } 38 item:nth-child(4) { 39 background-color: maroon; 40 } 41 item:nth-child(5) { 42 background-color: salmon; 43 width: auto; 44 grid-column: span 2; 45 margin-inline-start: 10px; 46 } 47 </style> 48 <script src="/resources/testharness.js"></script> 49 <script src="/resources/testharnessreport.js"></script> 50 <script src="/resources/check-layout-th.js"></script> 51 <body onload="checkLayout('grid > item')"> 52 <div id="target"> 53 <grid> 54 <item data-expected-margin-left="0"></item> 55 <item data-expected-margin-left="10"></item> 56 <item data-expected-margin-left="0"></item> 57 <item class="locked-position" data-expected-margin-left="0"></item> 58 <item data-expected-margin-left="0"></item> 59 </grid> 60 </div> 61 </body> 62 </html>