| <!DOCTYPE html> |
| <style> |
| #container { |
| width: 50vw; |
| height: 50vh; |
| } |
| #percent { |
| width: 50%; |
| height: 50%; |
| } |
| </style> |
| <body> |
| <div id="container"> |
| <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 percentage dimensions work in a child with a parent with viewport unit dimensions."); |
| standardResizeTest(function () { |
| shouldBeEqualToString("getComputedStyle(container).width", innerWidth / 2 + "px"); |
| shouldBeEqualToString("getComputedStyle(container).height", innerHeight / 2 + "px"); |
| shouldBeEqualToString("getComputedStyle(percent).width", innerWidth / 4 + "px"); |
| shouldBeEqualToString("getComputedStyle(percent).height", innerHeight / 4 + "px"); |
| }); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
