| <!DOCTYPE html> |
| <body> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| #container { |
| container-type: inline-size; |
| width: 100px; |
| } |
| </style> |
| <div id="container"> |
| <div id="testDiv"></div> |
| </div> |
| <script> |
| description("Tests assigning a calculated value to -webkit-line-clamp CSS property."); |
| |
| var testDiv = document.getElementById("testDiv"); |
| |
| shouldBeEmptyString("testDiv.style['-webkit-line-clamp']"); |
| |
| evalAndLog("testDiv.style['-webkit-line-clamp'] = 'calc(10% * 2)'"); |
| shouldBeEqualToString("testDiv.style['-webkit-line-clamp']", "calc(20%)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-line-clamp')", "20%"); |
| |
| evalAndLog("testDiv.style['-webkit-line-clamp'] = 'calc(2 * 3)'"); |
| shouldBeEqualToString("testDiv.style['-webkit-line-clamp']", "calc(6)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-line-clamp')", "6"); |
| |
| evalAndLog("testDiv.style['-webkit-line-clamp'] = 'calc(-2%)'"); |
| shouldBeEqualToString("testDiv.style['-webkit-line-clamp']", "calc(-2%)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-line-clamp')", "0%"); |
| |
| evalAndLog("testDiv.style['-webkit-line-clamp'] = 'calc(-2)'"); |
| shouldBeEqualToString("testDiv.style['-webkit-line-clamp']", "calc(-2)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-line-clamp')", "1"); |
| |
| evalAndLog("testDiv.style['-webkit-line-clamp'] = 'calc(10 + (sign(2cqw - 10px) * 5))'"); |
| shouldBeEqualToString("testDiv.style['-webkit-line-clamp']", "calc(10 + (5 * sign(2cqw - 10px)))"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-line-clamp')", "5"); |
| |
| evalAndLog("testDiv.style['-webkit-line-clamp'] = 'calc(10% + (sign(2cqw - 10px) * 5%))'"); |
| shouldBeEqualToString("testDiv.style['-webkit-line-clamp']", "calc(10% + (5% * sign(2cqw - 10px)))"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-line-clamp')", "5%"); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
