forked from mirrors/gecko-dev
6ed9c6e8d6
Automatic update from web-platform-tests [wpt] enhanceents to check-layout-th.js (#23184) There are 3 enhancements that I've found useful. 1. Warn if there are any unexpected data-* attributes A common error is to have a typo in data-* attribute name. When this happens, test will pass, because attribute is never read. This enhancement prints a warning if unexpected attribute is found. Running this over the entire test suite, I've found several errors: css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html css/css-grid/grid-items/grid-items-relative-offsets-001.html css/css-grid/grid-items/grid-items-relative-offsets-002.html have data-expected-x, data-expected-y Tried replacing some of these with data-offset-x, and tests fail. css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002 has data-offset-top 2. highlight error on failure flag. Defaults to false. If set, this flag will draw an outline around failed Element. Useful when debugging pages with many elements. 3. toggle printing dom on error. Sometimes, it is useful not to print dom on error for clarity. Change-Id: I8424aa2dc002f63fde18d0fc54bdfe77666ce951 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2161379 Reviewed-by: Philip Jägenstedt <foolip@chromium.org> Reviewed-by: Manuel Rego <rego@igalia.com> Commit-Queue: Aleks Totic <atotic@chromium.org> Cr-Commit-Position: refs/heads/master@{#763069} Co-authored-by: Aleks Totic <atotic@chromium.org> -- wpt-commits: a5a3b7353c884ebcca0230818632a42ad2fbd9b2 wpt-pr: 23184
139 lines
6 KiB
HTML
139 lines
6 KiB
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>
|