Blitz - WPT: grid-item-block-axis-content-contribution-003.html

wpt / css / css-grid / grid-items / grid-item-block-axis-content-contribution-003.html

/css/css-grid/grid-items/grid-item-block-axis-content-contribution-003.html

<!DOCTYPE html>
<html>
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-grid-sizing">
<meta name="assert" content="A max-content row uses the grid item's max-content block-size contribution, measured against the item's own inline size.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="grid-item-block-axis-content-contribution-001-ref.html">
<p>Test passes if there is a filled blue rectangle below and it is NOT taller than one line of text.</p>
<style>
.grid {
    display: grid;
    grid-template-columns: 10px;
    grid-template-rows: max-content;
}
.item {
    font: 10px/1 Ahem;
    color: blue;
    background: blue;
    width: 150px;
    word-break: break-all;
    grid-row: 1 / 2;
}
</style>
<div class="grid">
    <div class="item">XXXXXXXXXXXXXXX</div>
</div>
</html>

/css/css-grid/grid-items/grid-item-block-axis-content-contribution-001-ref.html

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<p>Test passes if there is a filled blue rectangle below and it is NOT taller than one line of text.</p>
<style>
.item {
    font: 10px/1 Ahem;
    color: blue;
    background: blue;
    width: 150px;
    height: 10px;
}
</style>
<div class="item">XXXXXXXXXXXXXXX</div>
</html>