Skip to content

GitLab

T
tangled
Commit 5ddde732 authored by Antonio Gomes's avatar Antonio Gomes Committed by Commit Bot
Browse files
Options

Make flexbox-overflow-auto-002.html 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 mozilla's bugzilla [2].

[1] https://crrev.com/c/2120544
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=1625764

Note that, despite fixing the chrome-specific scrollbar issue,
the test won't completely pass on Firefox.
By loading the test on the browsers (eg Firefox and Chrome),
it is possible to observe that the failures actually manifest
as a visual rendering difference between both engines.
This needs to be investigated further.

BUG=1063749
R=cbiesinger@chromium.org, dgrogan@chromium.org

Change-Id: I9e45be0ba836d83483edd8220491a35f22aba00c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2130046Reviewed-by: default avatarDavid Grogan <dgrogan@chromium.org>
Reviewed-by: default avatarChristian Biesinger <cbiesinger@chromium.org>
Reviewed-by: default avatarRobert Ma <robertma@chromium.org>
Commit-Queue: Antonio Gomes <tonikitoo@igalia.com>
Cr-Commit-Position: refs/heads/master@{#755076}
parent 08be3bfc
Hide whitespace changes
Inline Side-by-side
Showing with 51 additions and 16 deletions
third_party/blink/web_tests/external/wpt/css/css-flexbox/overflow-auto-006.html
View file @ 5ddde732
...@@ -34,68 +34,103 @@ ...@@ -34,68 +34,103 @@
<script src="/resources/check-layout-th.js"></script> <script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox, .inline-flexbox')"> <body onload="checkLayout('.flexbox, .inline-flexbox')">
<div id=log></div> <div id=log></div>
<div class="flexbox" data-expected-height="47"> <div class="flexbox to-be-checked" check-height check-accounts-scrollbar>
<div class="overflow"><div style="width: 100px; height: 20px"></div></div> <div class="overflow"><div style="width: 100px; height: 20px"></div></div>
</div> </div>
<div class="flexbox row-reverse" data-expected-height="47"> <div class="flexbox row-reverse to-be-checked" check-height check-accounts-scrollbar>
<div class="overflow"><div style="width: 100px; height: 20px"></div></div> <div class="overflow"><div style="width: 100px; height: 20px"></div></div>
</div> </div>
<div class="flexbox vertical" data-expected-height="47"> <div class="flexbox vertical to-be-checked" check-height check-accounts-scrollbar>
<div class="overflow"><div style="width: 100px; height: 20px"></div></div> <div class="overflow"><div style="width: 100px; height: 20px"></div></div>
</div> </div>
<div class="flexbox row-reverse vertical" data-expected-height="47"> <div class="flexbox row-reverse vertical to-be-checked" check-height check-accounts-scrollbar>
<div class="overflow"><div style="width: 100px; height: 20px"></div></div> <div class="overflow"><div style="width: 100px; height: 20px"></div></div>
</div> </div>
<div class="flexbox" data-expected-height="47"> <div class="flexbox to-be-checked" check-height check-accounts-scrollbar>
<div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
</div> </div>
<div class="flexbox row-reverse" data-expected-height="47"> <div class="flexbox row-reverse to-be-checked" check-height check-accounts-scrollbar>
<div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
</div> </div>
<div class="flexbox vertical" data-expected-height="32"> <div class="flexbox vertical to-be-checked" check-height>
<div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
</div> </div>
<div class="flexbox row-reverse vertical" data-expected-height="32"> <div class="flexbox row-reverse vertical to-be-checked" check-height>
<div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
</div> </div>
<div class="inline-flexbox column" data-expected-width="47"> <div class="inline-flexbox column to-be-checked" check-width check-accounts-scrollbar>
<div class="overflow"><div style="width: 20px; height: 100px"></div></div> <div class="overflow"><div style="width: 20px; height: 100px"></div></div>
</div> </div>
<div class="inline-flexbox column-reverse" data-expected-width="47"> <div class="inline-flexbox column-reverse to-be-checked" check-width check-accounts-scrollbar>
<div class="overflow"><div style="width: 20px; height: 100px"></div></div> <div class="overflow"><div style="width: 20px; height: 100px"></div></div>
</div> </div>
<div class="inline-flexbox column vertical" data-expected-width="47"> <div class="inline-flexbox column vertical to-be-checked" check-width check-accounts-scrollbar>
<div class="overflow"><div style="width: 20px; height: 100px"></div></div> <div class="overflow"><div style="width: 20px; height: 100px"></div></div>
</div> </div>
<div class="inline-flexbox column-reverse vertical" data-expected-width="47"> <div class="inline-flexbox column-reverse vertical to-be-checked" check-width check-accounts-scrollbar>
<div class="overflow"><div style="width: 20px; height: 100px"></div></div> <div class="overflow"><div style="width: 20px; height: 100px"></div></div>
</div> </div>
<div class="inline-flexbox column" data-expected-width="47"> <div class="inline-flexbox column to-be-checked" check-width check-accounts-scrollbar>
<div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div> <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div>
</div> </div>
<div class="inline-flexbox column-reverse" data-expected-width="47"> <div class="inline-flexbox column-reverse to-be-checked" check-width check-accounts-scrollbar>
<div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div> <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div>
</div> </div>
<div class="inline-flexbox column vertical" data-expected-width="32"> <div class="inline-flexbox column vertical to-be-checked" check-width>
<div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div> <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div>
</div> </div>
<div class="inline-flexbox column-reverse vertical" data-expected-width="32"> <div class="inline-flexbox column-reverse vertical to-be-checked" check-width>
<div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div> <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div>
</div> </div>
<!-- This div is only for measuring scrollbar size -->
<div id="measure" style="height: 100px; width: 100px; display: inline-block; overflow: auto;">
<div style="min-height: 300px;"></div>
</div>
<script>
var measure = document.getElementById('measure');
var scrollbarSize = measure.offsetWidth - measure.clientWidth;
var nodes = document.getElementsByClassName("to-be-checked");
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
// Here, the things contributing height are:
//
// (a) each innermost div contributes an explicit height: 20px value.
// (b) the .overflow div contributes 2px of border (1px top + bottom),
// plus the height of its scrollbar from overflow:auto.
// (c) the .flexbox div contributes 10px of border (5px top + bottom).
//
// So, the total height is 20px + 2px + 10px + scrollbarHeight,
// which simplifies to 32px + scrollbarHeight.
//
// Analogously, the same logic applies for nodes where width is tested.
var size = 32;
if (node.hasAttribute("check-height")) {
var height = node.hasAttribute("check-accounts-scrollbar") ? scrollbarSize : 0;
node.setAttribute("data-expected-height", size + height);
} else {
var width = node.hasAttribute("check-accounts-scrollbar") ? scrollbarSize : 0;
node.setAttribute("data-expected-width", size + width);
}
}
</script>
</body> </body>
</html> </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