| <!DOCTYPE html> |
| <title>Percentage height in flexbox: css-sizing-3</title> |
| <link rel="author" title="mailto:atotic@google.com"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#percentage-sizing"> |
| <link rel="help" href="https://crbug.com/907911"> |
| <meta name="assert" content="Percentage height resolves correctly inside flexbox."> |
| <style> |
| #outer { |
| width: 100px; |
| height: 100px; |
| background: red; |
| } |
| #container { |
| display: inline-flex; |
| height: 50px; |
| background: green; |
| } |
| #target { |
| height:100%; |
| display:block; |
| } |
| </style> |
| <div id="outer"> |
| <div id="container"> |
| <img id="target" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> |
| </div> |
| </div> |
| <script> |
| test(() => { |
| let target = document.querySelector("#target"); |
| assert_equals(target.offsetWidth, target.offsetHeight); |
| assert_equals(target.offsetWidth, target.parentNode.offsetWidth); |
| assert_equals(target.offsetHeight, target.parentNode.offsetHeight); |
| }, '#target offsetSize matches #container offsetSize' ); |
| test(() => { |
| document.querySelector("#container").style.height = "100px"; |
| let target = document.querySelector("#target"); |
| assert_equals(target.offsetWidth, target.offsetHeight); |
| assert_equals(target.offsetWidth, target.parentNode.offsetWidth); |
| assert_equals(target.offsetHeight, target.parentNode.offsetHeight); |
| }, '#target offsetSize matches #container offsetSize after resize' ); |
| |
| </script> |
