<!DOCTYPE html>
<html>
<head>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<style>
.margin {
margin: 10px;
}
.border {
border: 5px solid black;
}
.padding {
padding: 20px;
}
.scroll {
overflow: scroll;
}
.item {
width: 100px;
height: 100px;
background: lime;
}
</style>
<script src="../../resources/check-layout.js"></script>
</head>
<body onload="checkLayout('.grid');">
<p>This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected.</p>
<div class="grid min-content" data-expected-width="100" data-expected-height="100">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content margin" data-expected-width="100" data-expected-height="100">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content border" data-expected-width="110" data-expected-height="110">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content padding" data-expected-width="140" data-expected-height="140">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content scroll" data-expected-width="115" data-expected-height="115">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content margin border" data-expected-width="110" data-expected-height="110">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content margin padding" data-expected-width="140" data-expected-height="140">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content margin scroll" data-expected-width="115" data-expected-height="115">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content border padding" data-expected-width="150" data-expected-height="150">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content border scroll" data-expected-width="125" data-expected-height="125">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content padding scroll" data-expected-width="155" data-expected-height="155">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content margin border padding" data-expected-width="150" data-expected-height="150">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content margin border scroll" data-expected-width="125" data-expected-height="125">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content margin padding scroll" data-expected-width="155" data-expected-height="155">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content border padding scroll" data-expected-width="165" data-expected-height="165">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
<div class="grid min-content margin border padding scroll" data-expected-width="165" data-expected-height="165">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
</body>
</html>