| <!DOCTYPE html> |
| <style> |
| #container { |
| font-size: 5vw; |
| } |
| #ems { |
| font-size: 4em; |
| } |
| #percent { |
| font-size: 50%; |
| } |
| </style> |
| <body> |
| <div id="container"> |
| <div id="ems"></div> |
| <div id="percent"></div> |
| </div> |
| </body> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="resources/resize-test.js"></script> |
| <script> |
| description("Test that relative font sizes work when the parent is in viewport units."); |
| standardResizeTest(function () { |
| shouldBeEqualToString("getComputedStyle(container).fontSize", (innerWidth / 20) + "px"); |
| shouldBeEqualToString("getComputedStyle(ems).fontSize", (innerWidth / 5) + "px"); |
| shouldBeEqualToString("getComputedStyle(percent).fontSize", (innerWidth / 40) + "px"); |
| }); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
