placement-invalidation-001.html (1225B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Test: Subgridded item placement invalidation</title> 4 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#track-sizing"> 6 <style> 7 html, body { 8 margin: 0; 9 padding: 0; 10 } 11 #grid { 12 width: 200px; 13 display: grid; 14 background: lightgray; 15 grid-template-columns: [start] auto [end] 1fr; 16 grid-template-rows: 100px; 17 } 18 #subgrid { 19 display: grid; 20 grid-column: 1 / -1; 21 grid-template-columns: subgrid; 22 } 23 #item { 24 width: 50px; 25 background: lightblue; 26 border: 5px solid gray; 27 grid-column: start / end; 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 <div id="grid"> 34 <div id="subgrid"> 35 <div id="item" data-offset-x="140"></div> 36 </div> 37 </div> 38 <script> 39 "use strict"; 40 41 let grid = document.getElementById("grid"); 42 let item = document.getElementById("item"); 43 44 // Computing an offset forces layout. 45 let item_offset = item.offsetLeft; 46 47 grid.style.gridTemplateColumns = "1fr [start] auto [end]"; 48 item_offset = item.offsetLeft; 49 checkLayout("#item"); 50 </script>