wpt / css / css-sizing / aspect-ratio / replaced-element-043.html

Status: FAIL | Duration: 9ms | Subtests: 114/180 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (114/180)

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

SubtestStatusMessage
canvas 1PASS
canvas 2PASS
canvas 3PASS
canvas 4PASS
canvas 5PASS
canvas 6PASS
canvas 7PASS
canvas 8PASS
canvas 9PASS
canvas 10PASS
canvas 11PASS
canvas 12PASS
canvas 13FAILassert_equals: data-expected-height expected 8 got 15
canvas 14FAILassert_equals: data-expected-height expected 8 got 15
canvas 15PASS
canvas 16PASS
canvas 17PASS
canvas 18PASS
canvas 19FAILassert_equals: data-expected-height expected 8 got 15
canvas 20FAILassert_equals: data-expected-height expected 8 got 15
canvas 21FAILassert_equals: data-expected-width expected 20 got 15 assert_equals: data-expected-height expected 10 got 15
canvas 22FAILassert_equals: data-expected-width expected 30 got 15
canvas 23PASS
canvas 24PASS
canvas 25PASS
canvas 26PASS
canvas 27FAILassert_equals: data-expected-height expected 8 got 15
canvas 28FAILassert_equals: data-expected-height expected 8 got 15
canvas 29FAILassert_equals: data-expected-height expected 8 got 15
canvas 30FAILassert_equals: data-expected-height expected 8 got 15
canvas 31PASS
canvas 32PASS
canvas 33FAILassert_equals: data-expected-width expected 15 got 20 assert_equals: data-expected-height expected 8 got 10
canvas 34FAILassert_equals: data-expected-height expected 8 got 15
canvas 35FAILassert_equals: data-expected-height expected 8 got 15
canvas 36FAILassert_equals: data-expected-height expected 8 got 15
canvas 37FAILassert_equals: data-expected-height expected 8 got 15
canvas 38FAILassert_equals: data-expected-height expected 8 got 15
canvas 39FAILassert_equals: data-expected-width expected 20 got 15 assert_equals: data-expected-height expected 10 got 15
canvas 40FAILassert_equals: data-expected-width expected 30 got 15
canvas 41PASS
canvas 42PASS
canvas 43FAILassert_equals: data-expected-height expected 8 got 15
canvas 44FAILassert_equals: data-expected-height expected 8 got 15
canvas 45FAILassert_equals: data-expected-width expected 20 got 15 assert_equals: data-expected-height expected 10 got 15
canvas 46FAILassert_equals: data-expected-width expected 30 got 15
canvas 47PASS
canvas 48PASS
canvas 49PASS
canvas 50PASS
canvas 51PASS
canvas 52FAILassert_equals: data-expected-width expected 30 got 20 assert_equals: data-expected-height expected 15 got 10
canvas 53PASS
canvas 54PASS
canvas 55PASS
canvas 56PASS
canvas 57PASS
canvas 58PASS
canvas 59FAILassert_equals: data-expected-width expected 40 got 30 assert_equals: data-expected-height expected 20 got 15
canvas 60FAILassert_equals: data-expected-width expected 50 got 30 assert_equals: data-expected-height expected 25 got 15
canvas 61PASS
canvas 62PASS
canvas 63PASS
canvas 64PASS
canvas 65PASS
canvas 66FAILassert_equals: data-expected-width expected 50 got 40 assert_equals: data-expected-height expected 25 got 20
canvas 67PASS
canvas 68PASS
canvas 69PASS
canvas 70PASS
canvas 71PASS
canvas 72PASS
canvas 73PASS
canvas 74PASS
canvas 75FAILassert_equals: data-expected-width expected 15 got 20 assert_equals: data-expected-height expected 8 got 10
canvas 76FAILassert_equals: data-expected-height expected 8 got 15
canvas 77FAILassert_equals: data-expected-height expected 8 got 15
canvas 78FAILassert_equals: data-expected-height expected 8 got 15
canvas 79PASS
canvas 80PASS
canvas 81FAILassert_equals: data-expected-width expected 15 got 20 assert_equals: data-expected-height expected 8 got 10
canvas 82FAILassert_equals: data-expected-height expected 8 got 15
canvas 83FAILassert_equals: data-expected-height expected 8 got 15
canvas 84FAILassert_equals: data-expected-height expected 8 got 15
canvas 85PASS
canvas 86PASS
canvas 87PASS
canvas 88PASS
canvas 89PASS
canvas 90PASS
canvas 91PASS
canvas 92PASS
canvas 93PASS
canvas 94PASS
canvas 95PASS
canvas 96PASS
canvas 97PASS
canvas 98PASS
canvas 99PASS
canvas 100PASS
canvas 101PASS
canvas 102PASS
canvas 103PASS
canvas 104PASS
canvas 105PASS
canvas 106PASS
canvas 107PASS
canvas 108PASS
canvas 109PASS
canvas 110PASS
canvas 111PASS
canvas 112PASS
canvas 113PASS
canvas 114PASS
canvas 115PASS
canvas 116PASS
canvas 117PASS
canvas 118PASS
canvas 119PASS
canvas 120PASS
canvas 121FAILassert_equals: data-expected-height expected 8 got 15
canvas 122FAILassert_equals: data-expected-height expected 8 got 15
canvas 123FAILassert_equals: data-expected-width expected 20 got 15 assert_equals: data-expected-height expected 10 got 15
canvas 124FAILassert_equals: data-expected-width expected 20 got 15
canvas 125PASS
canvas 126PASS
canvas 127FAILassert_equals: data-expected-height expected 8 got 15
canvas 128FAILassert_equals: data-expected-height expected 8 got 15
canvas 129FAILassert_equals: data-expected-width expected 20 got 15 assert_equals: data-expected-height expected 10 got 15
canvas 130FAILassert_equals: data-expected-width expected 30 got 15
canvas 131PASS
canvas 132PASS
canvas 133FAILassert_equals: data-expected-height expected 8 got 15
canvas 134FAILassert_equals: data-expected-height expected 8 got 15
canvas 135FAILassert_equals: data-expected-width expected 20 got 15 assert_equals: data-expected-height expected 10 got 15
canvas 136FAILassert_equals: data-expected-width expected 30 got 15
canvas 137PASS
canvas 138PASS
canvas 139FAILassert_equals: data-expected-height expected 8 got 15
canvas 140FAILassert_equals: data-expected-height expected 8 got 15
canvas 141FAILassert_equals: data-expected-width expected 20 got 15 assert_equals: data-expected-height expected 10 got 15
canvas 142FAILassert_equals: data-expected-width expected 30 got 15
canvas 143PASS
canvas 144PASS
canvas 145PASS
canvas 146PASS
canvas 147PASS
canvas 148PASS
canvas 149PASS
canvas 150PASS
canvas 151PASS
canvas 152PASS
canvas 153PASS
canvas 154PASS
canvas 155PASS
canvas 156PASS
canvas 157PASS
canvas 158PASS
canvas 159FAILassert_equals: data-expected-width expected 15 got 20 assert_equals: data-expected-height expected 8 got 10
canvas 160FAILassert_equals: data-expected-height expected 8 got 15
canvas 161FAILassert_equals: data-expected-height expected 8 got 15
canvas 162FAILassert_equals: data-expected-height expected 8 got 15
canvas 163PASS
canvas 164PASS
canvas 165FAILassert_equals: data-expected-width expected 15 got 20 assert_equals: data-expected-height expected 8 got 10
canvas 166FAILassert_equals: data-expected-height expected 8 got 15
canvas 167FAILassert_equals: data-expected-height expected 8 got 15
canvas 168FAILassert_equals: data-expected-height expected 8 got 15
canvas 169PASS
canvas 170PASS
canvas 171FAILassert_equals: data-expected-width expected 15 got 20 assert_equals: data-expected-height expected 8 got 10
canvas 172FAILassert_equals: data-expected-height expected 8 got 15
canvas 173FAILassert_equals: data-expected-height expected 8 got 15
canvas 174FAILassert_equals: data-expected-height expected 8 got 15
canvas 175PASS
canvas 176PASS
canvas 177FAILassert_equals: data-expected-width expected 15 got 20 assert_equals: data-expected-height expected 8 got 10
canvas 178FAILassert_equals: data-expected-height expected 8 got 15
canvas 179FAILassert_equals: data-expected-height expected 8 got 15
canvas 180FAILassert_equals: data-expected-height expected 8 got 15

/css/css-sizing/aspect-ratio/replaced-element-043.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>