computed-grid-column.html (904B)
1 <!DOCTYPE html> 2 <title>CSS Grid Layout Test: row/column is complex calc()</title> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-1/"> 4 <style> 5 .grid { 6 position: relative; 7 display: inline-grid; 8 grid-template-columns: 100px 150px; 9 grid-template-rows: 150px 100px; 10 } 11 .firstRowSecondColumn { 12 grid-row: calc(2 * sign(100em - 1px) - 1); 13 grid-column: calc(3 - sign(100em - 1px)); 14 } 15 .someHugeValue { 16 /* Just check that we don't crash. */ 17 grid-row: calc(1e100); 18 grid-column: calc(-1e100); 19 } 20 </style> 21 <script src="/resources/testharness.js"></script> 22 <script src="/resources/testharnessreport.js"></script> 23 <div class="grid"> 24 <div class="firstRowSecondColumn" id="target">X XX X</div> 25 <div class="someHugeValue">X XX X</div> 26 </div> 27 <script> 28 test(() => { 29 assert_equals(getComputedStyle(target).gridRow, '1'); 30 assert_equals(getComputedStyle(target).gridColumn, '2'); 31 }); 32 </script>