465 lines
28 KiB
HTML
465 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS aspect-ratio: replaced element with various sizing properties</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
|
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6071#issuecomment-2243986313">
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11236">
|
|
<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="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 10px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 20px"
|
|
data-expected-width="20" data-expected-height="10"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="min-height: 5px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="min-height: 10px"
|
|
data-expected-width="20" data-expected-height="10"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 30px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 40px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 50px"
|
|
data-expected-width="15" data-expected-height="8"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-height: 15px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-height: 20px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-height: 25px"
|
|
data-expected-width="15" data-expected-height="8"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 0px; min-height: 5px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 0px; min-height: 10px"
|
|
data-expected-width="20" data-expected-height="10"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 10px; min-height: 5px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 10px; min-height: 10px"
|
|
data-expected-width="20" data-expected-height="10"></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="10"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 20px; min-height: 5px"
|
|
data-expected-width="20" data-expected-height="10"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 20px; min-height: 10px"
|
|
data-expected-width="20" data-expected-height="10"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 0px; max-height: 15px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 0px; max-height: 20px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 0px; max-height: 25px"
|
|
data-expected-width="15" data-expected-height="8"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 10px; max-height: 15px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 10px; max-height: 20px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 10px; max-height: 25px"
|
|
data-expected-width="15" data-expected-height="8"></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="10"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 20px; max-height: 20px"
|
|
data-expected-width="20" data-expected-height="10"></canvas>
|
|
<canvas width="15" height="15" style="min-width: 20px; max-height: 25px"
|
|
data-expected-width="20" data-expected-height="10"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 20px; min-height: 5px"
|
|
data-expected-width="15" data-expected-height="8"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 30px; min-height: 5px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 30px; min-height: 10px"
|
|
data-expected-width="20" data-expected-height="10"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 40px; min-height: 5px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 40px; min-height: 10px"
|
|
data-expected-width="20" data-expected-height="10"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 50px; min-height: 5px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 50px; min-height: 10px"
|
|
data-expected-width="20" data-expected-height="10"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 20px; max-height: 15px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 20px; max-height: 20px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 20px; max-height: 25px"
|
|
data-expected-width="15" data-expected-height="8"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 30px; max-height: 15px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 30px; max-height: 20px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 30px; max-height: 25px"
|
|
data-expected-width="15" data-expected-height="8"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 40px; max-height: 15px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 40px; max-height: 20px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 40px; max-height: 25px"
|
|
data-expected-width="15" data-expected-height="8"></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="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 50px; max-height: 15px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 50px; max-height: 20px"
|
|
data-expected-width="15" data-expected-height="8"></canvas>
|
|
<canvas width="15" height="15" style="max-width: 50px; max-height: 25px"
|
|
data-expected-width="15" data-expected-height="8"></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>
|