As described in the Highlight API explainer (https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/highlight/explainer.md#application-of-css-properties), inline styles for HighlightRangeGroups are applied on top of the cascaded styles. This means that if a style sheet is styling a highlight group with color: green, but an inline style on the same highlight group specifies color: red, the highlighted text will appear red (assuming no other styles are in play). However, what should the behavior be if the inline style specifies color: inherit? My thinking below...
Specifying an inherit value has no effect - it is equivalent to not specifying any value for the property. The spec (https://drafts.csswg.org/css-pseudo-4/#highlight-cascade) says that a highlight pseudo element should inherit values "from the corresponding highlight pseudo-element of its originating element’s parent element". For ranges, there is no single parent element, but rather there can be multiple containing elements that cover parts of the range. So we can say that each part of the highlight inherits values from the highlight pseudo element of that part's containing element. These are actually the same values that would be applied if the highlight range group's inline 'inherit' style is left off.
Consider the following scenario as an example.
<head>
<style>
:root::highlight(example-highlight) {
color: blue;
}
div::highlight(example-highlight) {
color: red;
}
</style>
</head>
<body><div>a</div>b<script>
let div = document.querySelector('div');
let highlightRange = new Range();
highlightRange.setStart(div, 0);
highlightRange.setEnd(document.body, 2);
let highlightRangeGroup = new HighlightRangeGroup(highlightRange);
CSS.highlights.set('example-highlight', highlightRangeGroup);
</script>
</body>
</html>
The above markup should render with a red 'a' and blue 'b'.
Now, imagine if we added an inline inherit style to the highlightRangeGroup, like highlightRangeGroup.style.color = 'inherit'. In terms of "parts", there are two parts to the range - one part's containing element is the div and it has text 'a', while the second part's containing element is the body and it has text 'b'. Per our definition above, each part should inherit from the highlight pseudo element of that part's containing element. So the first part would inherit the red color from "div::highlight", while the second part would inherit the blue color from ":root::highlight" (since there is no rule for the body).
As described in the Highlight API explainer (https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/highlight/explainer.md#application-of-css-properties), inline styles for HighlightRangeGroups are applied on top of the cascaded styles. This means that if a style sheet is styling a highlight group with
color: green, but an inline style on the same highlight group specifiescolor: red, the highlighted text will appear red (assuming no other styles are in play). However, what should the behavior be if the inline style specifiescolor: inherit? My thinking below...Specifying an inherit value has no effect - it is equivalent to not specifying any value for the property. The spec (https://drafts.csswg.org/css-pseudo-4/#highlight-cascade) says that a highlight pseudo element should inherit values "from the corresponding highlight pseudo-element of its originating element’s parent element". For ranges, there is no single parent element, but rather there can be multiple containing elements that cover parts of the range. So we can say that each part of the highlight inherits values from the highlight pseudo element of that part's containing element. These are actually the same values that would be applied if the highlight range group's inline 'inherit' style is left off.
Consider the following scenario as an example.
The above markup should render with a red 'a' and blue 'b'.
Now, imagine if we added an inline inherit style to the highlightRangeGroup, like
highlightRangeGroup.style.color = 'inherit'. In terms of "parts", there are two parts to the range - one part's containing element is the div and it has text 'a', while the second part's containing element is the body and it has text 'b'. Per our definition above, each part should inherit from the highlight pseudo element of that part's containing element. So the first part would inherit the red color from "div::highlight", while the second part would inherit the blue color from ":root::highlight" (since there is no rule for the body).