(In reply to Emilio Cobos Álvarez (:emilio) from comment #7) > Sure, that's working as expected. The last case is a bit tricky, but the explanation is this. Test-case is, if I understand correctly: > > * `<div class="top">` is clearly green, from the `theme` layer rule, so far so good. > * `<div class="bottom">` only matches two rules: `.top, .bottom { }` (which doesn't affect color) and `.bottom { color: revert-layer }`. So we `revert-layer` at the `theme` layer, but there's no other layer to revert to (note that `.top { color: red }` doesn't match `<div class="bottom">`). So instead it behaves as initial, which is inheriting the top color, which is green. > > Does that make sense? Thanks, @emilio, for taking the time to answer my query. This makes sense now! Could you clarify the behavior in one more scenario? ```html <!doctype html> <style> @layer base, theme; @layer base { div { color: cyan; } } @layer theme { .bottom { color: revert-layer; } div { color: yellow; } } .top, .bottom { font-size: 30px; margin: 1em; } </style> <div class="top"> This is on the top. <div class="bottom"> This is in the bottom. </div> </div> ``` In this case, `div { }` is in both `theme` and `base`. - With `revert-layer` in `theme` layer, `<div class="bottom">` is cyan (`base`). - However, if no `div { }` is defined in `base`, `<div class="bottom">` becomes yellow (`theme`). **So is the behavior to look for matching rule in previous layer and if none exists, inherit from current layer, if one exists?** The following line from the [spec](https://drafts.csswg.org/css-cascade-5/#revert-layer) led me to expect the opposite, probably because I somehow (mis)read that as 'lower-priority' declarations in the same cascade 'layer', and thats why I was expecting `div { color: yellow; }` to take precedence over `div { color: cyan; }` > > Note: If there are no lower-priority declarations in the same cascade origin as the revert-layer value, the cascaded value will roll back to the previous origin.
Bug 1699220 Comment 8 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
(In reply to Emilio Cobos Álvarez (:emilio) from comment #7) > Sure, that's working as expected. The last case is a bit tricky, but the explanation is this. Test-case is, if I understand correctly: > > * `<div class="top">` is clearly green, from the `theme` layer rule, so far so good. > * `<div class="bottom">` only matches two rules: `.top, .bottom { }` (which doesn't affect color) and `.bottom { color: revert-layer }`. So we `revert-layer` at the `theme` layer, but there's no other layer to revert to (note that `.top { color: red }` doesn't match `<div class="bottom">`). So instead it behaves as initial, which is inheriting the top color, which is green. > > Does that make sense? Thanks, :emilio, for taking the time to answer my query. This makes sense now! Could you clarify the behavior in one more scenario? ```html <!doctype html> <style> @layer base, theme; @layer base { div { color: cyan; } } @layer theme { .bottom { color: revert-layer; } div { color: yellow; } } .top, .bottom { font-size: 30px; margin: 1em; } </style> <div class="top"> This is on the top. <div class="bottom"> This is in the bottom. </div> </div> ``` In this case, `div { }` is in both `theme` and `base`. - With `revert-layer` in `theme` layer, `<div class="bottom">` is cyan (`base`). - However, if no `div { }` is defined in `base`, `<div class="bottom">` becomes yellow (`theme`). **So is the behavior to look for matching rule in previous layer and if none exists, inherit from current layer, if one exists?** The following line from the [spec](https://drafts.csswg.org/css-cascade-5/#revert-layer) led me to expect the opposite, probably because I somehow (mis)read that as 'lower-priority' declarations in the same cascade 'layer', and thats why I was expecting `div { color: yellow; }` to take precedence over `div { color: cyan; }` > > Note: If there are no lower-priority declarations in the same cascade origin as the revert-layer value, the cascaded value will roll back to the previous origin.