Daniil Sakhapov
f4aec35785
Automatic update from web-platform-tests [carousel] Fix hover and active states for ::scroll-marker-group When a ::scroll-marker is hovered or active, its associated ::scroll-marker-group should also match the :hover and :active pseudo-classes respectively. Since the group is not in the normal flat-tree ancestor chain of the marker, this patch overrides SetHovered and SetActive on ScrollMarkerPseudoElement to propagate these states to the ScrollMarkerGroupPseudoElement. Bug: 485920675 Change-Id: I26a47fe42363f19c7d0d39647fe10d2e7f953ecb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7656807 Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1599832} -- wpt-commits: 3d39e2d51fac355dd516ff88388d7be7a04417a2 wpt-pr: 58490
65 lines
2.0 KiB
HTML
65 lines
2.0 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Overflow Test: ::scroll-marker-group matches hover when inner ::scroll-marker is hovered</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-pseudo">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-actions.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#scroller {
|
|
overflow: auto;
|
|
scroll-marker-group: before;
|
|
}
|
|
|
|
#scroller::scroll-marker-group {
|
|
height: 100px;
|
|
width: 100px;
|
|
background: red;
|
|
}
|
|
|
|
#scroller::scroll-marker-group:hover {
|
|
background: green;
|
|
}
|
|
|
|
#scroller>div {
|
|
height: 100px;
|
|
}
|
|
|
|
#scroller>div::scroll-marker {
|
|
content: "A";
|
|
display: block;
|
|
width: 50px;
|
|
height: 50px;
|
|
color: red;
|
|
}
|
|
|
|
#scroller>div::scroll-marker:hover {
|
|
color: green;
|
|
}
|
|
</style>
|
|
<div id="scroller">
|
|
<div></div>
|
|
</div>
|
|
<script>
|
|
promise_test(async t => {
|
|
assert_equals(getComputedStyle(scroller, "::scroll-marker-group").backgroundColor, "rgb(255, 0, 0)", "::scroll-marker-group is unhovered initially");
|
|
assert_equals(getComputedStyle(scroller.querySelector("div"), "::scroll-marker").color, "rgb(255, 0, 0)", "::scroll-marker is unhovered initially");
|
|
|
|
// The ::scroll-marker is within the ::scroll-marker-group, so we hover over its coordinates
|
|
const watcher = new EventWatcher(t, scroller, "mouseover");
|
|
const waitMouseover = watcher.wait_for("mouseover");
|
|
await new test_driver.Actions()
|
|
.pointerMove(15, 15)
|
|
.send();
|
|
await waitMouseover;
|
|
assert_equals(getComputedStyle(scroller, "::scroll-marker-group").backgroundColor, "rgb(0, 128, 0)", "::scroll-marker-group matches hover when inner ::scroll-marker is hovered");
|
|
assert_equals(getComputedStyle(scroller.querySelector("div"), "::scroll-marker").color, "rgb(0, 128, 0)", "::scroll-marker is hovered");
|
|
});
|
|
</script>
|