grid-inline-end-items-in-last-column-trimmed.html (1411B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <link rel="author" href="mailto:sammy.gill@apple.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> 7 <meta name="assert" content="trimmed inline-end margins for grid items should be reflected in computed style"> 8 <style> 9 grid { 10 display: grid; 11 grid-template-columns: repeat(2, auto); 12 outline: 1px solid black; 13 margin-trim: inline-end; 14 } 15 item { 16 display: block; 17 height: 50px; 18 } 19 .locked-position { 20 grid-row: 2; 21 grid-column: 2; 22 } 23 item:nth-child(1) { 24 background-color: aqua; 25 margin-inline-end: 10px; 26 } 27 item:nth-child(2) { 28 background-color: blueviolet; 29 margin-inline-end: 30%; 30 } 31 item:nth-child(3) { 32 background-color: blue; 33 margin-inline-end: -30px; 34 } 35 item:nth-child(4) { 36 background-color: coral; 37 margin-inline-end: 10px; 38 } 39 </style> 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script src="/resources/check-layout-th.js"></script> 43 </head> 44 <body onload="checkLayout('grid > item')"> 45 <div id="target"> 46 <grid> 47 <item data-expected-margin-right="10"></item> 48 <item data-expected-margin-right="0"></item> 49 <item class="locked-position" data-expected-margin-right="0"></item> 50 <item data-expected-margin-right="10"></item> 51 </grid> 52 </div> 53 </body> 54 </html>