| <!DOCTYPE html> |
| <style> |
| #test { |
| width: 50vw; |
| } |
| #testfontsize { |
| font-size: 5vh; |
| } |
| #testcalc { |
| width: calc(50vw * 2); |
| } |
| #testfontsizecalc { |
| font-size: calc(5vh * 2); |
| } |
| #testpseudo:after { |
| margin-left: 20vmin; |
| padding-right: 25vmax; |
| content: ''; |
| } |
| #testpseudocalc:after { |
| margin-left: calc(20vmin * 2); |
| padding-right: calc(25vmax * 2); |
| content: ''; |
| } |
| </style> |
| <body> |
| <div id="test"></div> |
| <div id="testfontsize"></div> |
| <div id="testcalc"></div> |
| <div id="testfontsizecalc"></div> |
| <div id="testpseudo"></div> |
| <div id="testpseudocalc"></div> |
| </body> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="resources/resize-test.js"></script> |
| <script> |
| description("Test that viewport lengths and font sizes properly resize with the viewport."); |
| standardResizeTest(function () { |
| var min = Math.min(innerWidth, innerHeight); |
| var max = Math.max(innerWidth, innerHeight); |
| shouldBeEqualToString("getComputedStyle(test).width", innerWidth / 2 + "px"); |
| shouldBeEqualToString("getComputedStyle(testfontsize).fontSize", innerHeight / 20 + "px"); |
| shouldBeEqualToString("getComputedStyle(testcalc).width", innerWidth + "px"); |
| shouldBeEqualToString("getComputedStyle(testfontsizecalc).fontSize", innerHeight / 10 + "px"); |
| shouldBeEqualToString("getComputedStyle(testpseudo, ':after').marginLeft", min / 5 + "px"); |
| shouldBeEqualToString("getComputedStyle(testpseudo, ':after').paddingRight", max / 4 + "px"); |
| shouldBeEqualToString("getComputedStyle(testpseudocalc, ':after').marginLeft", (min * 2) / 5 + "px"); |
| shouldBeEqualToString("getComputedStyle(testpseudocalc, ':after').paddingRight", max / 2 + "px"); |
| }); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
