<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - Highlight pseudos use the originating element's forced colors state</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop">
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
<style>
span.forcedColors {
background-color: Highlight;
color: HighlightText;
text-decoration: underline;
text-decoration-color: HighlightText;
forced-color-adjust: none;
}
span.noForcedColors {
background-color: yellow;
color: blue;
text-decoration: underline;
text-decoration-color: orange;
forced-color-adjust: none;
}
</style>
<body>
<div><span class="forcedColors">This content doesn't have forced-color-adjust set at all</span></div>
<div><span class="noForcedColors">This content has forced-color-adjust:none on the originating element only</span></div>
<div><span class="forcedColors">This content has forced-color-adjust:none on the ::highlight pseudo only</span></div>
<div><span class="noForcedColors">This content has forced-color-adjust:none on the originating element and the ::highlight pseudo</span></div>
</body>