| <!DOCTYPE html> |
| <body> |
| <script src="../../resources/js-test-pre.js"></script> |
| <div id="testDiv" style="position: absolute;"></div> |
| <pre id="testPre"><pre> |
| <script> |
| description("Tests that negative calc() values are properly clamped when needed."); |
| |
| var testDiv = document.getElementById("testDiv"); |
| var testPre = document.getElementById("testPre"); |
| |
| shouldBeEmptyString("testDiv.style['width']"); |
| |
| evalAndLog("testDiv.style['width'] = '100px'"); |
| evalAndLog("testDiv.style['width'] = 'calc(5px - 10px)'"); |
| shouldBeEqualToString("testDiv.style['width']", "calc(-5px)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('width')", "0px"); |
| |
| evalAndLog("testDiv.style['width'] = '100px'"); |
| evalAndLog("testDiv.style['width'] = 'calc(10% - 100px)'"); |
| shouldBeEqualToString("testDiv.style['width']", "calc(10% - 100px)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('width')", "0px"); |
| |
| evalAndLog("testDiv.style['line-height'] = '10%'"); |
| evalAndLog("testDiv.style['line-height'] = 'calc(10% - 20%)'"); |
| shouldBeEqualToString("testDiv.style['line-height']", "calc(-10%)"); |
| shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('line-height')", "0px"); |
| |
| evalAndLog("testPre.style['tab-size'] = '8'"); |
| evalAndLog("testPre.style['tab-size'] = 'calc(2 - 4)'"); |
| shouldBeEqualToString("testPre.style['tab-size']", "8"); |
| shouldBeEqualToString("window.getComputedStyle(testPre).getPropertyValue('tab-size')", "8"); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
