| <!DOCTYPE html> |
| <body> |
| <script src="../../resources/js-test-pre.js"></script> |
| <div style="container-type: inline-size; width: 10px;"> |
| <div id="testDiv" style="width: 400px; height: 400px"></div> |
| </div> |
| <script> |
| description("Tests using calculated value in function() for 'grid-template-rows' CSS property works."); |
| |
| var testDiv = document.getElementById("testDiv"); |
| |
| shouldBeEmptyString("testDiv.style['grid-template-rows']"); |
| |
| evalAndLog("testDiv.style['grid-template-rows'] = 'repeat(calc(1 + 1), 18px)'"); |
| shouldBeEqualToString("testDiv.style['grid-template-rows']", "repeat(calc(2), 18px)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('grid-template-rows')", "repeat(2, 18px)"); |
| |
| evalAndLog("testDiv.style['grid-template-rows'] = 'repeat(calc(-1), 18px)'"); |
| shouldBeEqualToString("testDiv.style['grid-template-rows']", "repeat(calc(-1), 18px)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('grid-template-rows')", "repeat(1, 18px)"); |
| |
| evalAndLog("testDiv.style['grid-template-rows'] = 'repeat(calc(2.2), 18px)'"); |
| shouldBeEqualToString("testDiv.style['grid-template-rows']", "repeat(calc(2.2), 18px)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('grid-template-rows')", "repeat(2, 18px)"); |
| |
| evalAndLog("testDiv.style['grid-template-rows'] = 'repeat(calc(10 + (sign(20cqw - 10px)) * 5), 18px)'"); |
| shouldBeEqualToString("testDiv.style['grid-template-rows']", "repeat(calc(10 + (5 * sign(20cqw - 10px))), 18px)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('grid-template-rows')", "repeat(5, 18px)"); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
