Skip to content

GitLab

T
tangled
Commit 1b060d98 authored by Antonio Gomes's avatar Antonio Gomes Committed by Commit Bot
Browse files
Options

Make grid-container-margin-border-padding-scrollbar-001.htm scrollbar-size agnostic 

This is a follow up of [1], where test expectation were using
chrome-specific scrollbar dimensions. The issue has been identified
and logged on WPT dashboard [2].

[1] https://crrev.com/c/2130046
[2] https://wpt.fyi/results/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html?diff&filter=ADC&run_id=498640001&run_id=496590001

R=rego@chromium.org
BUG=767015, 1063749

Change-Id: I470118aea6bc2108022a831b392ccf1345210717
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2154917Reviewed-by: default avatarOriol Brufau <obrufau@igalia.com>
Commit-Queue: Antonio Gomes <tonikitoo@igalia.com>
Cr-Commit-Position: refs/heads/master@{#760575}
parent ea0168f8
Hide whitespace changes
Inline Side-by-side
Showing with 43 additions and 9 deletions
third_party/blink/web_tests/external/wpt/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html
View file @ 1b060d98
......@@ -37,7 +37,7 @@
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.grid');">
<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>
......@@ -54,7 +54,7 @@
<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="grid min-content scroll" data-width-without-scrollbar="100" data-height-without-scrollbar="100">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
......@@ -66,7 +66,7 @@
<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="grid min-content margin scroll" data-width-without-scrollbar="100" data-height-without-scrollbar="100">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
......@@ -74,11 +74,11 @@
<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="grid min-content border scroll" data-width-without-scrollbar="110" data-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-expected-width="155" data-expected-height="155">
<div class="grid min-content padding scroll" data-width-without-scrollbar="140" data-height-without-scrollbar="140">
<div class="item" data-expected-width="100" data-expected-height="100"></div>
</div>
......@@ -86,20 +86,54 @@
<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="grid min-content margin border scroll" data-width-without-scrollbar="110" data-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-expected-width="155" data-expected-height="155">
<div class="grid min-content margin padding scroll" data-width-without-scrollbar="140" data-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-expected-width="165" data-expected-height="165">
<div class="grid min-content border padding scroll" data-width-without-scrollbar="150" data-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-expected-width="165" data-expected-height="165">
<div class="grid min-content margin border padding scroll" data-width-without-scrollbar="150" data-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-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-width-without-scrollbar"));
const expectedHeight = parseInt(elements[i].getAttribute("data-height-without-scrollbar"));
elements[i].setAttribute("data-expected-width", expectedWidth + scrollbarWidth);
elements[i].setAttribute("data-expected-height", expectedHeight + scrollbarHeight);
}
checkLayout('.grid');
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment