dynamic-grid-track-direction.html (1011B)
1 <!DOCTYPE html> 2 <html> 3 <title>Computed style honors the grid track direction when it changes</title> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 5 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .grid-lanes { 10 display: grid-lanes; 11 grid-template-columns: 100px 100px; 12 grid-template-rows: 100px 100px 100px; 13 } 14 </style> 15 <div class="grid-lanes"></div> 16 <script> 17 test(function() { 18 const container = document.querySelector('.grid-lanes'); 19 const computedStyle = window.getComputedStyle(container); 20 assert_equals(computedStyle.getPropertyValue('grid-template-columns'), 21 "100px 100px"); 22 23 container.style.gridLanesDirection = 'row'; 24 const computedStyleAfter = window.getComputedStyle(container); 25 assert_equals(computedStyleAfter.getPropertyValue('grid-template-rows'), 26 "100px 100px 100px"); 27 }); 28 </script> 29 </html>