mirror of
https://github.com/servo/servo.git
synced 2025-06-27 18:43:40 +01:00
39 lines
1.1 KiB
HTML
39 lines
1.1 KiB
HTML
<!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>
|