wpt / css / css-grid / grid-model / grid-container-margin-border-padding-scrollbar-001.html

Status: FAIL | Duration: 2ms | Subtests: 8/16 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (8/16)

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

SubtestStatusMessage
.grid 1FAILassert_equals: data-expected-width expected 100 got 784
.grid 2FAILassert_equals: data-expected-width expected 100 got 764
.grid 3FAILassert_equals: data-expected-width expected 110 got 784
.grid 4FAILassert_equals: data-expected-width expected 140 got 784
.grid 5PASS
.grid 6FAILassert_equals: data-expected-width expected 110 got 764
.grid 7FAILassert_equals: data-expected-width expected 140 got 764
.grid 8PASS
.grid 9FAILassert_equals: data-expected-width expected 150 got 784
.grid 10PASS
.grid 11PASS
.grid 12FAILassert_equals: data-expected-width expected 150 got 764
.grid 13PASS
.grid 14PASS
.grid 15PASS
.grid 16PASS

/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html

<!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>