Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 9c43b4a10979deb1385bbf167da5f75113e1ce48
https://github.com/WebKit/WebKit/commit/9c43b4a10979deb1385bbf167da5f75113e1ce48
Author: Razvan Caliman <[email protected]>
Date: 2026-09-17 (Thu, 17 Sep 2026)
Changed paths:
M LayoutTests/TestExpectations
A
LayoutTests/inspector/css/getMatchedStylesForNodeNestedAtRuleDeclarations-expected.txt
A
LayoutTests/inspector/css/getMatchedStylesForNodeNestedAtRuleDeclarations.html
M
LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping-expected.txt
M LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping.html
M LayoutTests/inspector/css/modify-css-property-expected.txt
M LayoutTests/inspector/css/modify-css-property.html
M LayoutTests/inspector/css/resources/modify-css-property.css
M LayoutTests/inspector/css/setStyleText-expected.txt
A
LayoutTests/inspector/css/setStyleText-interleaved-expected.txt
A LayoutTests/inspector/css/setStyleText-interleaved.html
A LayoutTests/inspector/css/setStyleText-no-declarations-expected.txt
A LayoutTests/inspector/css/setStyleText-no-declarations.html
M LayoutTests/inspector/css/setStyleText.html
M Source/JavaScriptCore/inspector/protocol/CSS.json
M Source/WebCore/css/CSSNestedDeclarations.h
M Source/WebCore/css/parser/CSSParser.cpp
M Source/WebCore/inspector/InspectorStyleSheet.cpp
M Source/WebCore/inspector/InspectorStyleSheet.h
M Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
M Source/WebCore/inspector/agents/InspectorCSSAgent.h
M Source/WebCore/inspector/agents/frame/FrameCSSAgent.cpp
M Source/WebCore/inspector/agents/frame/FrameCSSAgent.h
M Source/WebCore/style/InspectorCSSOMWrappers.cpp
M Source/WebCore/style/InspectorCSSOMWrappers.h
M Source/WebCore/style/StyleResolver.cpp
M
Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
M
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
M
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
Log Message:
-----------
Web Inspector: CSS nesting + @media display incorrect within Styles inspector.
https://bugs.webkit.org/show_bug.cgi?id=304635
rdar://167326791
Reviewed by Qianlang Chen.
https://flagged.apple.com:443/proxy?t2=Ds7p9K5IN2&o=aHR0cHM6Ly9jb21taXRzLndlYmtpdC5vcmcvMjgzMTg4QG1haW4=&emid=f8b313f1-7f13-43b3-bf20-b75d475eeae7&c=11
implemented the CSS Nesting spec's
interleaved declarations model via
`StyleRuleNestedDeclarations`/`CSSNestedDeclarations`.
This changed the previous behavior where interleaved CSS properties would get
moved
to the beginning of the parent CSS style rule, ahead of any nested CSS rules,
which caused confusing cascade issues.
Web Inspector did support that previous behavior
with the changes
in
https://flagged.apple.com:443/proxy?t2=Dm0c5O7UT4&o=aHR0cHM6Ly9jb21taXRzLndlYmtpdC5vcmcvMjYxMzI5QG1haW4=&emid=f8b313f1-7f13-43b3-bf20-b75d475eeae7&c=11,
but it was not updated to support
`CSSNestedDeclarations`.
CSS properties nested directly under an at-rule now go into a
`CSSNestedDeclarations` which,
until this patch, were explicitly skipped when collecting style information to
show in Web Inspector.
This patch also replaces the changes for the now obsolete beahvior of moving
CSS properties
to the beginning of the parent style rule. Instead, it supports showing and
editing properties
interleaved with CSS rules at their original position within the parent rule.
Tests: inspector/css/getMatchedStylesForNodeNestedAtRuleDeclarations.html
inspector/css/setStyleText-interleaved.html
*
LayoutTests/inspector/css/getMatchedStylesForNodeNestedAtRuleDeclarations-expected.txt:
Added.
*
LayoutTests/inspector/css/getMatchedStylesForNodeNestedAtRuleDeclarations.html:
Added.
New test to verify the visibility of nested declarations across at-rules with
deep nesting
and mixed explicit/implicit rules.
*
LayoutTests/inspector/css/modify-css-property-expected.txt:
Update test expectation to change the now obsolete behavior of reordering CSS
properties.
* LayoutTests/inspector/css/modify-css-property.html:
* LayoutTests/inspector/css/resources/modify-css-property.css:
(.rule-deep-nested-interleaved):
(@supports (display: grid)):
(background-color: lime;):
(background-color: green;):
Add a test case to check editing interleaved CSS properties within deeply
nested CSS at-rules.
* LayoutTests/inspector/css/setStyleText-expected.txt:
* LayoutTests/inspector/css/setStyleText-interleaved-expected.txt: Added.
* LayoutTests/inspector/css/setStyleText-interleaved.html: Added.
* LayoutTests/inspector/css/setStyleText-no-declarations-expected.txt: Added.
*
LayoutTests/inspector/css/setStyleText-no-declarations.html: Added.
New
protocol-level test to verify that changes to CSS properties within nested
at-rules
do not trample css text for sibling or parent rules.
*
LayoutTests/inspector/css/setStyleText.html:
* Source/WebCore/css/CSSNestedDeclarations.h:
* Source/WebCore/css/parser/CSSParser.cpp:
(WebCore::CSSParser::supportsDeclaration):
Suppress CSS parser observer during `CSSParser::supportsDeclaration` to
prevent @supports conditions from leaking as observed properties into a
`CSSNestedDeclarations` when the @supports rule has CSS properties as direct
children.
* Source/WebCore/inspector/InspectorStyleSheet.cpp:
(WebCore::flatteningStrategyForStyleRuleType):
Introduce a CommitSelfOnly flattening strategy for `CSSNestedDeclarations`
because they have no children to recurse into.
(WebCore::flattenSourceData):
(WebCore::StyleSheetHandler::endRuleBody):
The CSS parser observer reports all properties on the
parent rule's source data, but the CSSOM
creates separate
`CSSNestedDeclarations` at interleaved positions. The source data flat list must
match the CSSOM flat list entry-by-entry. To achieve this, this patch assigns
properties to "gaps"
between child rules:
- For style rules: properties in gap 0 (before first child rule) stay with the
parent (matches CSSStyleRule.style);
subsequent gaps become inferred entries interleaved after each child rule.
- For at-rules: gaps become inferred entries (at-rules have no .style property
in the CSSOM).
(WebCore::InspectorStyleSheet::buildObjectForRule):
(WebCore::InspectorStyleSheet::setRuleStyleText):
The previous computeCanonicalRuleText approach replaced the entire rule body
and reconstructed
it as properties first, then child rules. This reordered interleaved
properties, changing
cascade semantics.
New strategy uses two paths:
1. Basic rules (no child rules, not implicitly nested): full rule body
replacement.
2. Rules with
interleaved content: targeted property-range replacement for
the
exact character range of the properties being edited. The frontend sends
formatted text with
indentation, so targeted replacements trim surrounding
whitespace to avoid duplication.
(WebCore::InspectorStyleSheet::styleForId const):
(WebCore::InspectorStyleSheet::ruleIndexByStyle const):
(WebCore::InspectorStyleSheet::buildArrayForRuleList):
(WebCore::InspectorStyleSheet::collectFlatRules):
(WebCore::isNotSpaceOrTab): Deleted.
(WebCore::computeCanonicalRuleText): Deleted.
* Source/WebCore/inspector/InspectorStyleSheet.h:
* Source/WebCore/inspector/agents/InspectorCSSAgent.cpp:
(WebCore::InspectorCSSAgent::setRuleSelector):
(WebCore::InspectorCSSAgent::addRule):
(WebCore::InspectorCSSAgent::buildObjectForRule):
* Source/WebCore/inspector/agents/InspectorCSSAgent.h:
*
Source/WebCore/inspector/agents/frame/FrameCSSAgent.cpp:
(WebCore::FrameCSSAgent::setRuleSelector):
(WebCore::FrameCSSAgent::addRule):
(WebCore::FrameCSSAgent::buildObjectForRule):
*
Source/WebCore/inspector/agents/frame/FrameCSSAgent.h:
* Source/WebCore/style/InspectorCSSOMWrappers.cpp:
*
Source/WebCore/style/InspectorCSSOMWrappers.cpp:
(WebCore::Style::InspectorCSSOMWrappers::collect):
(WebCore::Style::InspectorCSSOMWrappers::getWrapperForNestedDeclarationsRuleInSheets):
* Source/WebCore/style/InspectorCSSOMWrappers.h:
* Source/WebCore/style/StyleResolver.cpp:
* Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.generateFormattedText):
*
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(.spreadsheet-css-declaration):
(.spreadsheet-css-declaration .header-groupings > .grouping,):
(.spreadsheet-css-declaration > .grouping-close-braces >
.grouping-close-brace):
(.spreadsheet-css-declaration .header-groupings > .grouping > .open-brace,):
(.spreadsheet-css-declaration :is(.selector, .grouping) > .icon):
(.spreadsheet-css-declaration .header-groupings > .grouping >
.icon):
(.spreadsheet-css-declaration .selector > .icon): Deleted.
*
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderGroupings):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.get _renderedGroupings):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._ensureIconElement):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderSelector):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._populateIconElementContextMenu):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._highlightNodesWithSelector):
Render nested declarations rules and groupings with surrounding brackets
and indented, mirroring how they'd be authored in a stylesheet
text.
Canonical link:
https://flagged.apple.com:443/proxy?t2=Dv2V0M5HS7&o=aHR0cHM6Ly9jb21taXRzLndlYmtpdC5vcmcvMzIxMzI5QG1haW4=&emid=f8b313f1-7f13-43b3-bf20-b75d475eeae7&c=11
To unsubscribe from these emails, change your
notification settings at
https://github.com/WebKit/WebKit/settings/notifications
