Skip to content

[css-highlight-api] How should inline highlight styles with 'inherit' values be treated? #4602

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
sanketj opened this issue Dec 14, 2019 · 0 comments
Closed

[css-highlight-api] How should inline highlight styles with 'inherit' values be treated? #4602

sanketj opened this issue Dec 14, 2019 · 0 comments
Labels
css-highlight-api-1

Comments

@sanketj
Copy link
Member

sanketj commented Dec 14, 2019 •
edited by frivoal
Loading

Moving this issue over from: MicrosoftEdge/MSEdgeExplainers#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: #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 Highlight 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'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 highlight = new Highlight('example-highlight', highlightRange);
    CSS.highlights.add(highlight);
</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 highlight, like highlight.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).
@frivoal frivoal mentioned this issue Dec 16, 2019
Closed
frivoal added a commit to frivoal/csswg-drafts that referenced this issue Dec 16, 2019
@frivoal
[css-highlight-api][css-pseudo] add style attribute to pseudo-elements
474641a 
Use it in css-highlight-api as a replacement for the style attribute on
HighlightRangeGroup.

Closes w3c#4588
Closes w3c#4602
@frivoal frivoal mentioned this issue Dec 16, 2019
Closed
frivoal added a commit to frivoal/csswg-drafts that referenced this issue Dec 20, 2019
@frivoal
[css-highlight-api][css-pseudo] add style attribute to pseudo-elements
461e829 
Use it in css-highlight-api as a replacement for the style attribute on
HighlightRangeGroup.

Closes w3c#4588
Closes w3c#4602
@frivoal frivoal changed the title [css-highlight-api] How should inline highlight range group styles with 'inherit' values be treated? [css-highlight-api] How should inline highlight styles with 'inherit' values be treated? Dec 20, 2019
frivoal added a commit to frivoal/csswg-drafts that referenced this issue Dec 20, 2019
@frivoal
[css-highlight-api][css-pseudo] add style attribute to pseudo-elements
a40b2bd 
Use it in css-highlight-api as a replacement for the style attribute on
Highlight.

Closes w3c#4588
Closes w3c#4602
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-highlight-api-1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@astearns @sanketj