canvas-dynamic-change-001.html (1116B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>Canvas size dynamic change in flexbox layout</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> 5 <meta name="assert" content="This test ensures proper layouting of canvas element as flex-items"/> 6 <link href="support/flexbox.css" rel="stylesheet"> 7 <style> 8 .red { 9 width: 600px; 10 height: 400px; 11 background: red; 12 } 13 canvas { 14 background: green; 15 } 16 </style> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 <script src="/resources/check-layout-th.js"></script> 20 <div id=log></div> 21 22 <div class="red"> 23 <div class="flexbox column"> 24 <!-- The height=400 attribute makes the aspect ratio be 300x400. 300 from 25 the fallback width of replaced elements. 400 from the attribute. 26 After stretching to 600px wide, the height should be 800px. --> 27 <canvas id="canvas" data-expected-height="800"></canvas> 28 </div> 29 </div> 30 31 <script> 32 var canvas = document.getElementById('canvas'); 33 34 requestAnimationFrame(function() { 35 canvas.height = 400; 36 checkLayout('.flexbox'); 37 }); 38 39 </script>