| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Table Test: Percentage sizing of table cell replaced children with margin, border, padding and scrollbar</title> |
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-tables-3/#content-measure"> |
| <link rel="match" href="percentage-sizing-of-table-cell-replaced-children-001-ref.html"> |
| <meta name="assert" content="Checks that table cell replaced children resolve properly their percentage sizes, even when the table cell has margin, border, padding and scrollbar."> |
| <style> |
| .table { |
| display: table; |
| border: solid 5px black; |
| width: 150px; |
| height: 100px; |
| } |
| |
| .td { |
| display: table-cell; |
| background: cyan; |
| overflow: scroll; |
| padding: 5px 15px 10px 20px; |
| border: solid magenta; |
| border-width: 12px 9px 6px 3px; |
| } |
| |
| img { |
| display: block; |
| background: yellow; |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| <link rel="stylesheet" type="text/css" href="support/scrollbars.css"> |
| |
| <p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p> |
| |
| <div class="table"> |
| <div class="td"> |
| <img /> |
| </div> |
| </div> |
