[css-grid] Migrate grid-container-margin-border-padding-scrollbar.html to WPT
BUG=767015, 1063749
Change-Id: I793f33d54ae5b57643fc669664793eb7e848ece9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2153265
Commit-Queue: Antonio Gomes <tonikitoo@igalia.com>
Reviewed-by: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#760031}
diff --git a/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html b/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html
new file mode 100644
index 0000000..6aff589
--- /dev/null
+++ b/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid: grid container's size includes 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-grid/#intrinsic-sizes"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/>
+<meta name="assert" content="This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected."/>
+<link rel="issue" href="https://crbug.com/532032"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+<link href="/css/support/height-keyword-classes.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/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.grid');">
+ <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>
