| <!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:[email protected]"> |
| |
| <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> |
