Fernando Fiori
9d8cedec22
Automatic update from web-platform-tests [highlights] Paint custom highlight backgrounds over replaced elements Build on the replaced-element tracking added by the parent CL to actually paint custom ::highlight() background tints over replaced elements such as <img>. - ReplacedPainter::PaintCustomHighlights() fills the area the replaced content occupies (the content box, or the replaced object's rect when it overflows the content box) with the active custom-highlight backgrounds, in the foreground phase, after the replaced content and below the existing ::selection tint in the highlight overlay order. - Stacked highlights resolve background-color: currentColor against the previous highlight layer, mirroring HighlightOverlay:: ComputeParts() for text, so a higher-priority layer's currentColor reflects the lower layer's resolved color rather than the host element's color. - The cached drawing is consulted before resolving any colors, so cache hits skip the stacking sort and per-layer color resolution. Bug: 357946492 Change-Id: I5b9b4e9a4189c90c45c81690d2d734b5dbea2683 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7830521 Commit-Queue: Fernando Fiori <ffiori@microsoft.com> Reviewed-by: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/main@{#1656173} -- wpt-commits: 1d2752ae73c88ec922c0112843ef4f5732a2a4d6 wpt-pr: 61044
28 lines
1.1 KiB
HTML
28 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>Custom highlight: stacked highlights over a replaced element</title>
|
|
<link rel="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-bounds">
|
|
<link rel="match" href="highlight-image-stacked-ref.html">
|
|
<meta name="assert" content="Two custom highlights covering a replaced element stack by priority; the higher-priority opaque background paints on top of the lower one.">
|
|
<style>
|
|
::highlight(under) { background-color: blue; }
|
|
::highlight(over) { background-color: green; }
|
|
</style>
|
|
<body>
|
|
<div id="d"><img src="../../images/blank-highlight.png"></div>
|
|
<script>
|
|
const d = document.getElementById('d');
|
|
const makeHighlight = () => new Highlight(new StaticRange({
|
|
startContainer: d, startOffset: 0, endContainer: d, endOffset: 1,
|
|
}));
|
|
const under = makeHighlight();
|
|
const over = makeHighlight();
|
|
under.priority = 0;
|
|
over.priority = 1;
|
|
CSS.highlights.set("under", under);
|
|
CSS.highlights.set("over", over);
|
|
</script>
|
|
</body>
|