Google Git
Sign in
webkit / WebKit / cfec59e6d8734a9c10348dcb914802f8e77bad2b / . / LayoutTests / fast / css-grid-layout / grid-item-with-border-in-intrinsic.html
blob: 09c261894bbdebe359e202739197c8f6bb4a1811 [file] [log] [blame]
<!DOCTYPE html>
<style>
.grid {
display: grid;
font: 50px/1 Ahem;
border: 5px dashed magenta;
width: 150px;
height: 150px;
}
.item {
border: 50px solid rgba(0, 255, 250, 0.5);
}
.gridFR {
grid: 1fr / 1fr;
}
.gridMaxContent {
grid: max-content / max-content;
}
.gridMinContent {
grid: min-content / min-content;
}
.gridAuto {
grid: auto / auto;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid')">
<div class="grid gridFR" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150">
<div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div>
</div>
<div class="grid gridMinContent" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150">
<div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div>
</div>
<div class="grid gridMaxContent" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150">
<div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div>
</div>
<div class="grid gridAuto" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150">
<div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div>
</div>
</body>