1655328 - [wpt-sync] Sync PR 24756 - Initial scrollbar-gutter implementation

Status: RESOLVED FIXED

(Core :: Layout: Scrolling and Overflow, task, P4)

Description

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Sync web-platform-tests PR 24756 into mozilla-central (this bug is closed when the sync is complete).

PR: https://github.com/web-platform-tests/wpt/pull/24756
Details from upstream follow.

Felipe Erias <[e-mail]> wrote:

Initial scrollbar-gutter implementation

Implementation of the keywords "stable", "always" and "both" of the
scrollbar-gutter CSS property, which provides Web authors with more
control over how their layouts respond to the presence of scrollbars.

ng_length_utils:
ComputeScrollbarGutters() calculates the additional gutters that
should be allocated following the value of scrollbar-gutter.
ComputeScrollbarsAndGutters() adds together the space used by the
scrollbars themselves and by those additional gutters.

ng_block_node:
Uses ComputeScrollbarGutters() and ComputeScrollbarsAndGutters()
so layout calculations take scrollbar-gutter into account.

paint_layer_scrollable_area:
HypotheticalScrollbarThickness takes an additional parameter to return
the thickness of overlay scrollbars (default: false).

layout_box:
UsesOverlayScrollbars() is a convenience function that returns true
if the theme uses overlay scrollbars and the style doesn't define
a custom scrollbar.

Note that the tests in wpt/css/css-overflow/scrollbar-gutter-* are
failing at the moment because clientWidth and clientHeight do not
take the scrollbar gutters into account (yet).

Spec:
http://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property

Bug: 710214
Change-Id: Icd918badd3a8f5b705da744e446978223b64dc64

Reviewed-on: https://chromium-review.googlesource.com/2306498
WPT-Export-Revision: 8679dbb519e7c589a96902fef60e939b5ad9ca6c

Comment 1

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Pushed to try (stability) https://treeherder.mozilla.org/#/jobs?repo=try&revision=945d10559ad2b13749a2de8abe26889efc59a692

Comment 2

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

CI Results

Ran 12 Firefox configurations based on mozilla-central, and Firefox, Chrome, and Safari on GitHub CI

Total 5 tests and 8 subtests

Status Summary

Firefox

OK : 5
PASS: 22
FAIL: 18

Chrome

OK : 5
PASS: 28
FAIL: 12

Safari

OK : 5
PASS: 28
FAIL: 12

Links

Gecko CI (Treeherder)
GitHub PR Head
GitHub PR Base

Details

Firefox-only Failures

/css/css-overflow/scrollbar-gutter-001.html
Unexpected layout: overflow scroll, scrollbar-gutter auto, horizontal-tb: FAIL
Unexpected layout: overflow scroll, scrollbar-gutter auto, vertical-rl: FAIL
/css/css-overflow/scrollbar-gutter-002.html
Unexpected layout: overflow scroll, scrollbar-gutter stable, horizontal-tb: FAIL
Unexpected layout: overflow scroll, scrollbar-gutter stable, vertical-rl: FAIL
/css/css-overflow/scrollbar-gutter-003.html
Unexpected layout: overflow scroll, scrollbar-gutter always, horizontal-tb: FAIL
Unexpected layout: overflow scroll, scrollbar-gutter always, vertical-rl: FAIL

New Tests That Don't Pass

/css/css-overflow/scrollbar-gutter-001.html
Unexpected layout: overflow scroll, scrollbar-gutter auto, horizontal-tb: FAIL (Chrome: PASS, Safari: PASS)
Unexpected layout: overflow scroll, scrollbar-gutter auto, vertical-rl: FAIL (Chrome: PASS, Safari: PASS)
/css/css-overflow/scrollbar-gutter-002.html
Unexpected layout: overflow auto, scrollbar-gutter stable, horizontal-tb: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow scroll, scrollbar-gutter stable, horizontal-tb: FAIL (Chrome: PASS, Safari: PASS)
Unexpected layout: overflow auto, scrollbar-gutter stable, vertical-rl: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow scroll, scrollbar-gutter stable, vertical-rl: FAIL (Chrome: PASS, Safari: PASS)
/css/css-overflow/scrollbar-gutter-003.html
Unexpected layout: overflow auto, scrollbar-gutter always, horizontal-tb: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow scroll, scrollbar-gutter always, horizontal-tb: FAIL (Chrome: PASS, Safari: PASS)
Unexpected layout: overflow auto, scrollbar-gutter always, vertical-rl: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow scroll, scrollbar-gutter always, vertical-rl: FAIL (Chrome: PASS, Safari: PASS)
/css/css-overflow/scrollbar-gutter-004.html
Unexpected layout: overflow auto, scrollbar-gutter stable both, horizontal-tb: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow scroll, scrollbar-gutter stable both, horizontal-tb: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow auto, scrollbar-gutter stable both, vertical-rl: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow scroll, scrollbar-gutter stable both, vertical-rl: FAIL (Chrome: FAIL, Safari: FAIL)
/css/css-overflow/scrollbar-gutter-005.html
Unexpected layout: overflow auto, scrollbar-gutter always both, horizontal-tb: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow scroll, scrollbar-gutter always both, horizontal-tb: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow auto, scrollbar-gutter always both, vertical-rl: FAIL (Chrome: FAIL, Safari: FAIL)
Unexpected layout: overflow scroll, scrollbar-gutter always both, vertical-rl: FAIL (Chrome: FAIL, Safari: FAIL)