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
27 lines
1.1 KiB
HTML
27 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Custom highlight on an object element rendering fallback does not tint the host.</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="match" href="highlight-fallback-not-tinted-ref.html">
|
|
<meta name="assert" content="A custom highlight whose range covers an object element that is rendering fallback content must not tint the host. The fallback text is highlighted as normal text.">
|
|
<style>
|
|
::highlight(example-highlight) {
|
|
background-color: rgba(200, 0, 0, 1);
|
|
color: green;
|
|
}
|
|
object { display: block; width: 100px; height: 50px; }
|
|
</style>
|
|
</head>
|
|
<body><object><span>fallback</span></object><script>
|
|
const highlight = new Highlight(new StaticRange({
|
|
startContainer: document.body, startOffset: 0,
|
|
endContainer: document.body, endOffset: 1,
|
|
}));
|
|
CSS.highlights.set("example-highlight", highlight);
|
|
</script>
|
|
</body>
|
|
</html>
|