| <!DOCTYPE html> |
| <title>CSS aspect-ratio: img</title> |
| <link rel="author" title="Jake Archibald" href="[email protected]" /> |
| <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| img { |
| width: 100px; |
| aspect-ratio: 1/2; |
| background: green; |
| } |
| </style> |
| <div id="log"></div> |
| |
| <img |
| src="error.png" |
| style="display: block" |
| alt="display:block img should be 200px high" |
| /> |
| |
| <img |
| src="error.png" |
| style="display: inline-block" |
| alt="display:inline-block img should be 200px high" |
| /> |
| |
| <script> |
| setup({ explicit_done: true }); |
| |
| onload = () => { |
| for (const img of document.images) { |
| test(() => { |
| assert_equals(img.offsetHeight, 200); |
| }, img.alt); |
| } |
| |
| done(); |
| }; |
| </script> |
