| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <title>Canvas size dynamic change in flexbox layout</title> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> |
| <meta name="assert" content="This test ensures proper layouting of canvas element as flex-items"/> |
| <link href="support/flexbox.css" rel="stylesheet"> |
| <style> |
| .red { |
| width: 600px; |
| height: 400px; |
| background: red; |
| } |
| canvas { |
| background: green; |
| } |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <div id=log></div> |
| |
| <div class="red"> |
| <div class="flexbox column"> |
| <!-- The height=400 attribute makes the aspect ratio be 300x400. 300 from |
| the fallback width of replaced elements. 400 from the attribute. |
| After stretching to 600px wide, the height should be 800px. --> |
| <canvas id="canvas" data-expected-height="800"></canvas> |
| </div> |
| </div> |
| |
| <script> |
| var canvas = document.getElementById('canvas'); |
| |
| requestAnimationFrame(function() { |
| canvas.height = 400; |
| checkLayout('.flexbox'); |
| }); |
| |
| </script> |
