Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 86 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-sizing/aspect-ratio/replaced-element-043.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS aspect-ratio: replaced element with various sizing properties</title>
<meta name="assert" content="
Min, max and preferred sizing constraints are transferred to the other axis via the preferred aspect ratio.
In case of conflict,
- Non-transferred constraints take precedence over transferred ones.
- Min constraints take precedence over max ones from the same axis.
">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<style>
canvas {
aspect-ratio: 2;
width: auto;
height: auto;
outline: 1px solid;
margin: 2px;
vertical-align: middle;
}
</style>
<table border="1" cellspacing="0">
<tr>
<td><code>width</code></td>
<td>
<canvas width="15" height="15" style="width: 0"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="width: 10px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="width: 20px"
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="width: 30px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="width: 40px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="width: 50px"
data-expected-width="50" data-expected-height="25"></canvas>
</td>
</tr>
<tr>
<td><code>height</code></td>
<td>
<canvas width="15" height="15" style="height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="height: 10px"
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
</td>
</tr>
<tr>
<td><code>min-width</code></td>
<td>
<canvas width="15" height="15" style="min-width: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 10px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 20px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 30px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 40px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 50px"
data-expected-width="50" data-expected-height="25"></canvas>
</td>
</tr>
<tr>
<td><code>min-height</code></td>
<td>
<canvas width="15" height="15" style="min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
</td>
</tr>
<tr>
<td><code>max-width</code></td>
<td>
<canvas width="15" height="15" style="max-width: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 10px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 20px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 30px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 40px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 50px"
data-expected-width="15" data-expected-height="15"></canvas>
</td>
</tr>
<tr>
<td><code>max-height</code></td>
<td>
<canvas width="15" height="15" style="max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
</td>
</tr>
<tr>
<td><code>min-width</code>, <code>min-height</code></td>
<td>
<canvas width="15" height="15" style="min-width: 0px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 0px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 0px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 0px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 0px; min-height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 0px; min-height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 10px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 10px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 10px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 10px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 10px; min-height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 10px; min-height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 20px; min-height: 0px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 20px; min-height: 5px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 20px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 20px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 20px; min-height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 20px; min-height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 30px; min-height: 0px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 30px; min-height: 5px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 30px; min-height: 10px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 30px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 30px; min-height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 30px; min-height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 40px; min-height: 0px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 40px; min-height: 5px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 40px; min-height: 10px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 40px; min-height: 15px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 40px; min-height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 40px; min-height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 50px; min-height: 0px"
data-expected-width="50" data-expected-height="25"></canvas>
<canvas width="15" height="15" style="min-width: 50px; min-height: 5px"
data-expected-width="50" data-expected-height="25"></canvas>
<canvas width="15" height="15" style="min-width: 50px; min-height: 10px"
data-expected-width="50" data-expected-height="25"></canvas>
<canvas width="15" height="15" style="min-width: 50px; min-height: 15px"
data-expected-width="50" data-expected-height="25"></canvas>
<canvas width="15" height="15" style="min-width: 50px; min-height: 20px"
data-expected-width="50" data-expected-height="25"></canvas>
<canvas width="15" height="15" style="min-width: 50px; min-height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
</td>
</tr>
<tr>
<td><code>min-width</code>, <code>max-height</code></td>
<td>
<canvas width="15" height="15" style="min-width: 0px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="min-width: 0px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="min-width: 0px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 0px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 0px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 0px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 10px; max-height: 0px"
data-expected-width="10" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 20px; max-height: 0px"
data-expected-width="20" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="min-width: 20px; max-height: 5px"
data-expected-width="20" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="min-width: 20px; max-height: 10px"
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 20px; max-height: 15px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 20px; max-height: 20px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 20px; max-height: 25px"
data-expected-width="20" data-expected-height="15"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 30px; max-height: 0px"
data-expected-width="30" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="min-width: 30px; max-height: 5px"
data-expected-width="30" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="min-width: 30px; max-height: 10px"
data-expected-width="30" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 30px; max-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 30px; max-height: 20px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 30px; max-height: 25px"
data-expected-width="30" data-expected-height="15"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 40px; max-height: 0px"
data-expected-width="40" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="min-width: 40px; max-height: 5px"
data-expected-width="40" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="min-width: 40px; max-height: 10px"
data-expected-width="40" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 40px; max-height: 15px"
data-expected-width="40" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 40px; max-height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 40px; max-height: 25px"
data-expected-width="40" data-expected-height="20"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 50px; max-height: 0px"
data-expected-width="50" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="min-width: 50px; max-height: 5px"
data-expected-width="50" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="min-width: 50px; max-height: 10px"
data-expected-width="50" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 50px; max-height: 15px"
data-expected-width="50" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 50px; max-height: 20px"
data-expected-width="50" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="min-width: 50px; max-height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
</td>
</tr>
<tr>
<td><code>max-width</code>, <code>min-height</code></td>
<td>
<canvas width="15" height="15" style="max-width: 0px; min-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 0px; min-height: 5px"
data-expected-width="0" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 0px; min-height: 10px"
data-expected-width="0" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 0px; min-height: 15px"
data-expected-width="0" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 0px; min-height: 20px"
data-expected-width="0" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="max-width: 0px; min-height: 25px"
data-expected-width="0" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 10px; min-height: 0px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 10px; min-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 10px; min-height: 10px"
data-expected-width="10" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 10px; min-height: 15px"
data-expected-width="10" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 10px; min-height: 20px"
data-expected-width="10" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="max-width: 10px; min-height: 25px"
data-expected-width="10" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 20px; min-height: 0px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 20px; min-height: 5px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 20px; min-height: 10px"
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 20px; min-height: 15px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 20px; min-height: 20px"
data-expected-width="20" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="max-width: 20px; min-height: 25px"
data-expected-width="20" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 30px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 30px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 30px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 30px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 30px; min-height: 20px"
data-expected-width="30" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="max-width: 30px; min-height: 25px"
data-expected-width="30" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 40px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 40px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 40px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 40px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 40px; min-height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="max-width: 40px; min-height: 25px"
data-expected-width="40" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 50px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 50px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 50px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 50px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 50px; min-height: 20px"
data-expected-width="40" data-expected-height="20"></canvas>
<canvas width="15" height="15" style="max-width: 50px; min-height: 25px"
data-expected-width="50" data-expected-height="25"></canvas>
</td>
</tr>
<tr>
<td><code>max-width</code>, <code>max-height</code></td>
<td>
<canvas width="15" height="15" style="max-width: 0px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 0px; max-height: 5px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 0px; max-height: 10px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 0px; max-height: 15px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 0px; max-height: 20px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 0px; max-height: 25px"
data-expected-width="0" data-expected-height="0"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 10px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 10px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 10px; max-height: 10px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 10px; max-height: 15px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 10px; max-height: 20px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 10px; max-height: 25px"
data-expected-width="10" data-expected-height="5"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 20px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 20px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 20px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 20px; max-height: 15px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 20px; max-height: 20px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 20px; max-height: 25px"
data-expected-width="15" data-expected-height="10"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 30px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 40px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 50px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
</td>
</tr>
</table>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("canvas");
</script>