[csswg-drafts] [css-highlight-api] How should inline highlight range group styles with 'inherit' values be treated? (#4602)

sanketj has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-highlight-api] How should inline highlight range group styles with 'inherit' values be treated? ==
Moving this issue over from: https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/110

This is predicated on the assumption that highlight styles coming from the style attribute should apply on top of styles coming from ::highlight, which is being discussed here: https://github.com/w3c/csswg-drafts/issues/4588. We should probably resolve on that issue before tackling this one.

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).




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4602 using your GitHub account

Received on Saturday, 14 December 2019 01:37:50 UTC