1 files changed, 139 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html
new file mode 100644
index 0000000000..bad3f89b53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html
@@ -0,0 +1,139 @@
+<!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>
+    <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-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100">
+        <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-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100">
+        <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-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140">
+        <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-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <!-- This div is only for measuring scrollbar size -->
+    <div id="measure" style="overflow: scroll;">
+        <div style="min-height: 300px;"></div>
+    </div>
+
+<script>
+    var measure = document.getElementById('measure');
+    var scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+    var scrollbarHeight = measure.offsetHeight - measure.clientHeight;
+
+    // Here are the data-test-width-without-scrollbar (and height) attributes of all
+    // elements that have the "scroll" class. Things that contribute to the expected
+    // sizes are:
+    //
+    // - width:
+    //  padding{Left,Right}, border{Left,Right}, element width and its scrollbarWidth.
+    //
+    // - height:
+    //  padding{Top,Bottom}, border{Top, Bottom}, element width and its scrollbarHeight.
+    //
+    // The data-expected-width (and height) attributes are dynamically set to the elements
+    // so that we can ensure the scrollbar sizes are calculated in an engine-agnostic way.
+    var elements = document.getElementsByClassName("scroll");
+    for (var i = 0; i < elements.length; i++) {
+      const expectedWidth = parseInt(elements[i].getAttribute("data-test-width-without-scrollbar"));
+      const expectedHeight = parseInt(elements[i].getAttribute("data-test-height-without-scrollbar"));
+      elements[i].setAttribute("data-expected-width", expectedWidth + scrollbarWidth);
+      elements[i].setAttribute("data-expected-height", expectedHeight + scrollbarHeight);
+    }
+
+    checkLayout('.grid');
+</script>
+
+</body>
+</html>