Diff
Modified: trunk/LayoutTests/ChangeLog (292180 => 292181)
--- trunk/LayoutTests/ChangeLog 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/LayoutTests/ChangeLog 2022-03-31 21:50:47 UTC (rev 292181)
@@ -1,3 +1,13 @@
+2022-03-31 Patrick Angle <pan...@apple.com>
+
+ Web Inspector: Support Container Queries in the Styles sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=238346
+
+ Reviewed by Devin Rousso.
+
+ * inspector/css/getMatchedStylesForNodeContainerGrouping-expected.txt: Added.
+ * inspector/css/getMatchedStylesForNodeContainerGrouping.html: Added.
+
2022-03-31 Robert Jenner <jen...@apple.com>
REGRESSION(r292051-r292022): [ iOS ] media/video-object-fit.html is a constant image failure
Added: trunk/LayoutTests/inspector/css/getMatchedStylesForNodeContainerGrouping-expected.txt (0 => 292181)
--- trunk/LayoutTests/inspector/css/getMatchedStylesForNodeContainerGrouping-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/css/getMatchedStylesForNodeContainerGrouping-expected.txt 2022-03-31 21:50:47 UTC (rev 292181)
@@ -0,0 +1,53 @@
+Tests for the CSS.getMatchedStyleForNode command and container rule groups.
+
+
+== Running test suite: CSS.getMatchedStyleForNode.ContainerGrouping
+-- Running test case: CSS.getMatchedStyleForNode.ContainerGrouping.Narrow
+PASS: Should have 1 authored rules.
+- Testing rule #0
+PASS: Selector text should be "#item".
+PASS: "color" property value should be "peachpuff".
+PASS: Source code for rule should be in file named "getMatchedStylesForNodeContainerGrouping.html".
+PASS: Rule should have no groupings.
+
+-- Running test case: CSS.getMatchedStyleForNode.ContainerGrouping.Medium
+PASS: Should have 2 authored rules.
+- Testing rule #0
+PASS: Selector text should be "#item".
+PASS: "color" property value should be "lemonchiffon".
+PASS: Source code for rule should be in file named "getMatchedStylesForNodeContainerGrouping.html".
+PASS: Rule should have 2 grouping(s).
+PASS: Grouping 0 should have a type of "container-rule".
+PASS: Grouping 0 should have a text of "usedName (width >= 200px)".
+PASS: Grouping 1 should have a type of "supports-rule".
+PASS: Grouping 1 should have a text of "(color: red)".
+- Testing rule #1
+PASS: Selector text should be "#item".
+PASS: "color" property value should be "peachpuff".
+PASS: Source code for rule should be in file named "getMatchedStylesForNodeContainerGrouping.html".
+PASS: Rule should have no groupings.
+
+-- Running test case: CSS.getMatchedStyleForNode.ContainerGrouping.Wide
+PASS: Should have 3 authored rules.
+- Testing rule #0
+PASS: Selector text should be "#item".
+PASS: "color" property value should be "thistle".
+PASS: Source code for rule should be in file named "getMatchedStylesForNodeContainerGrouping.html".
+PASS: Rule should have 1 grouping(s).
+PASS: Grouping 0 should have a type of "container-rule".
+PASS: Grouping 0 should have a text of "(width >= 300px)".
+- Testing rule #1
+PASS: Selector text should be "#item".
+PASS: "color" property value should be "lemonchiffon".
+PASS: Source code for rule should be in file named "getMatchedStylesForNodeContainerGrouping.html".
+PASS: Rule should have 2 grouping(s).
+PASS: Grouping 0 should have a type of "container-rule".
+PASS: Grouping 0 should have a text of "usedName (width >= 200px)".
+PASS: Grouping 1 should have a type of "supports-rule".
+PASS: Grouping 1 should have a text of "(color: red)".
+- Testing rule #2
+PASS: Selector text should be "#item".
+PASS: "color" property value should be "peachpuff".
+PASS: Source code for rule should be in file named "getMatchedStylesForNodeContainerGrouping.html".
+PASS: Rule should have no groupings.
+
Added: trunk/LayoutTests/inspector/css/getMatchedStylesForNodeContainerGrouping.html (0 => 292181)
--- trunk/LayoutTests/inspector/css/getMatchedStylesForNodeContainerGrouping.html (rev 0)
+++ trunk/LayoutTests/inspector/css/getMatchedStylesForNodeContainerGrouping.html 2022-03-31 21:50:47 UTC (rev 292181)
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script>
+function setContainerWidth(width)
+{
+ document.getElementById("container").style.width = `${width}px`;
+}
+
+function test()
+{
+ let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStyleForNode.ContainerGrouping");
+
+ function expectRuleAtIndex(rules, index, {selectorText, colorPropertyValue, file, lineNumber, groupings})
+ {
+ InspectorTest.log(`- Testing rule #${index}`);
+
+ let rule = rules[index];
+ InspectorTest.expectEqual(rule.selectorText, selectorText, `Selector text should be "${selectorText}".`);
+ InspectorTest.expectEqual(rule.style.propertyForName("color").value, colorPropertyValue, `"color" property value should be "${colorPropertyValue}".`);
+ InspectorTest.expectEqual(rule.sourceCodeLocation?.sourceCode.urlComponents.lastPathComponent, file, `Source code for rule should be in file named "${file}".`);
+
+ if (!groupings) {
+ InspectorTest.expectEmpty(rule.groupings, "Rule should have no groupings.");
+ return;
+ }
+
+ InspectorTest.expectEqual(rule.groupings.length, groupings.length, `Rule should have ${groupings.length} grouping(s).`);
+
+ for (let i = 0; i < groupings.length; ++i) {
+ InspectorTest.expectEqual(rule.groupings[i].type, groupings[i].type, `Grouping ${i} should have a type of "${groupings[i].type}".`);
+
+ if (groupings[i].text)
+ InspectorTest.expectEqual(rule.groupings[i].text, groupings[i].text, `Grouping ${i} should have a text of "${groupings[i].text}".`);
+ else
+ InspectorTest.expectNull(rule.groupings[i].text, `Grouping ${i} should not have any text.`);
+ }
+ }
+
+ function addTestCase({name, description, containerWidth, expectedAuthoredRuleCount, authoredRulesHandler})
+ {
+ suite.addTestCase({
+ name,
+ description,
+ async test() {
+
+ await InspectorTest.evaluateInPage(`setContainerWidth(${containerWidth})`);
+
+ let documentNode = await WI.domManager.requestDocument();
+ let nodeId = await documentNode.querySelector("#item");
+ let domNode = WI.domManager.nodeForId(nodeId);
+ InspectorTest.assert(domNode, `Should find DOM Node for selector '#item'.`);
+
+ let domNodeStyles = WI.cssManager.stylesForNode(domNode);
+ InspectorTest.assert(domNodeStyles, `Should find CSS Styles for DOM Node.`);
+ await domNodeStyles.refresh();
+
+ let authoredRules = domNodeStyles.matchedRules.filter((rule) => rule.type === WI.CSSStyleSheet.Type.Author);
+ InspectorTest.expectEqual(authoredRules.length, expectedAuthoredRuleCount, `Should have ${expectedAuthoredRuleCount} authored rules.`);
+ authoredRulesHandler(authoredRules);
+ },
+ });
+ }
+
+ addTestCase({
+ name: "CSS.getMatchedStyleForNode.ContainerGrouping.Narrow",
+ description: "No `@container` queries should apply to the item in a 100px wide container.",
+ containerWidth: 100,
+ expectedAuthoredRuleCount: 1,
+ authoredRulesHandler(rules) {
+ expectRuleAtIndex(rules, 0, {
+ selectorText: "#item",
+ colorPropertyValue: "peachpuff",
+ file: "getMatchedStylesForNodeContainerGrouping.html",
+ });
+ }
+ });
+
+ addTestCase({
+ name: "CSS.getMatchedStyleForNode.ContainerGrouping.Medium",
+ description: "Only one `@container` query should apply to the item in a 200px wide container.",
+ containerWidth: 200,
+ expectedAuthoredRuleCount: 2,
+ authoredRulesHandler(rules) {
+ expectRuleAtIndex(rules, 0, {
+ selectorText: "#item",
+ colorPropertyValue: "lemonchiffon",
+ file: "getMatchedStylesForNodeContainerGrouping.html",
+ groupings: [
+ {type: WI.CSSGrouping.Type.ContainerRule, text: "usedName (width >= 200px)"},
+ {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"},
+ ],
+ });
+ expectRuleAtIndex(rules, 1, {
+ selectorText: "#item",
+ colorPropertyValue: "peachpuff",
+ file: "getMatchedStylesForNodeContainerGrouping.html",
+ });
+ }
+ });
+
+ addTestCase({
+ name: "CSS.getMatchedStyleForNode.ContainerGrouping.Wide",
+ description: "Two `@container` queries should apply to the item in a 300px wide container.",
+ containerWidth: 300,
+ expectedAuthoredRuleCount: 3,
+ authoredRulesHandler(rules) {
+ expectRuleAtIndex(rules, 0, {
+ selectorText: "#item",
+ colorPropertyValue: "thistle",
+ file: "getMatchedStylesForNodeContainerGrouping.html",
+ groupings: [
+ {type: WI.CSSGrouping.Type.ContainerRule, text: "(width >= 300px)"},
+ ],
+ });
+ expectRuleAtIndex(rules, 1, {
+ selectorText: "#item",
+ colorPropertyValue: "lemonchiffon",
+ file: "getMatchedStylesForNodeContainerGrouping.html",
+ groupings: [
+ {type: WI.CSSGrouping.Type.ContainerRule, text: "usedName (width >= 200px)"},
+ {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"},
+ ],
+ });
+ expectRuleAtIndex(rules, 2, {
+ selectorText: "#item",
+ colorPropertyValue: "peachpuff",
+ file: "getMatchedStylesForNodeContainerGrouping.html",
+ });
+ }
+ });
+
+ suite.runTestCasesAndFinish();
+}
+</script>
+<style>
+ #container {
+ container-type: size;
+ container-name: usedName;
+ }
+
+ #item {
+ color: peachpuff;
+ }
+
+ @supports(color: red) {
+ @container usedName (width >= 200px) {
+ #item {
+ color: lemonchiffon;
+ }
+ }
+ }
+
+ @container notUsedName (width >= 200px) {
+ #item {
+ color: PaleVioletRed;
+ }
+ }
+
+ @container (width >= 300px) {
+ #item {
+ color: thistle;
+ }
+ }
+</style>
+</head>
+<body _onload_="runTest()">
+ <p>Tests for the CSS.getMatchedStyleForNode command and container rule groups.</p>
+ <div id="container">
+ <div id="item"></div>
+ </div>
+</body>
+</html>
Modified: trunk/Source/_javascript_Core/ChangeLog (292180 => 292181)
--- trunk/Source/_javascript_Core/ChangeLog 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/Source/_javascript_Core/ChangeLog 2022-03-31 21:50:47 UTC (rev 292181)
@@ -1,3 +1,14 @@
+2022-03-31 Patrick Angle <pan...@apple.com>
+
+ Web Inspector: Support Container Queries in the Styles sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=238346
+
+ Reviewed by Devin Rousso.
+
+ Add new `container-rule` type for `CSS::Grouping::Type`.
+
+ * inspector/protocol/CSS.json:
+
2022-03-30 Chris Dumez <cdu...@apple.com>
Optimize the construction of a JSC::Identifier from an ASCIILiteral
Modified: trunk/Source/_javascript_Core/inspector/protocol/CSS.json (292180 => 292181)
--- trunk/Source/_javascript_Core/inspector/protocol/CSS.json 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/Source/_javascript_Core/inspector/protocol/CSS.json 2022-03-31 21:50:47 UTC (rev 292181)
@@ -228,8 +228,8 @@
"type": "object",
"description": "CSS @media (as well as other users of media queries, like @import, <style>, <link>, etc.), @supports, and @layer descriptor.",
"properties": [
- { "name": "type", "type": "string", "enum": ["media-rule", "media-import-rule", "media-link-node", "media-style-node", "supports-rule", "layer-rule", "layer-import-rule"], "description": "Source of the media query: \"media-rule\" if specified by a @media rule, \"media-import-rule\" if specified by an @import rule, \"media-link-node\" if specified by a \"media\" attribute in a linked style sheet's LINK tag, \"media-style-node\" if specified by a \"media\" attribute in an inline style sheet's STYLE tag, \"supports-rule\" if specified by an @supports rule, \"layer-rule\" if specified by an @layer rule." },
- { "name": "text", "type": "string", "optional": true, "description": "Query text if specified by a @media or @supports rule. Layer name (or not present for anonymous layers) for @layer rules." },
+ { "name": "type", "type": "string", "enum": ["media-rule", "media-import-rule", "media-link-node", "media-style-node", "supports-rule", "layer-rule", "layer-import-rule", "container-rule"], "description": "Source of the media query: \"media-rule\" if specified by a @media rule, \"media-import-rule\" if specified by an @import rule, \"media-link-node\" if specified by a \"media\" attribute in a linked style sheet's LINK tag, \"media-style-node\" if specified by a \"media\" attribute in an inline style sheet's STYLE tag, \"supports-rule\" if specified by an @supports rule, \"layer-rule\" if specified by an @layer rule, \"container-rule\" if specified by an @container rule." },
+ { "name": "text", "type": "string", "optional": true, "description": "Query text if specified by a @media, @supports, or @container rule. Layer name (or not present for anonymous layers) for @layer rules." },
{ "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the CSS grouping." }
]
},
Modified: trunk/Source/WebCore/ChangeLog (292180 => 292181)
--- trunk/Source/WebCore/ChangeLog 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/Source/WebCore/ChangeLog 2022-03-31 21:50:47 UTC (rev 292181)
@@ -1,3 +1,31 @@
+2022-03-31 Patrick Angle <pan...@apple.com>
+
+ Web Inspector: Support Container Queries in the Styles sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=238346
+
+ Reviewed by Devin Rousso.
+
+ Test: inspector/css/getMatchedStylesForNodeContainerGrouping.html
+
+ Add basic support to Web Inspector for viewing styles in `@container` rules.
+
+ * css/CSSContainerRule.cpp:
+ (WebCore::CSSContainerRule::nameFilterText const):
+ * css/CSSContainerRule.h:
+ - Provide a way to get the name that is used to filter the rule to specific containers.
+
+ * inspector/InspectorStyleSheet.cpp:
+ (flattenSourceData):
+ - In order to prevent future rule types from being added without some consideration for how they are inspected,
+ use an exhaustive switch-case statement here. This will at minimum allow us to make sure we have opened a bug
+ and put a FIXME here for new values in the future.
+
+ (WebCore::asCSSRuleList):
+ (WebCore::buildArrayForGroupings):
+
+ * style/InspectorCSSOMWrappers.cpp:
+ (WebCore::Style::InspectorCSSOMWrappers::collect):
+
2022-03-31 Diego Pino Garcia <dp...@igalia.com>
[WPE] Unreviewed, fix non-unified build after r292150
Modified: trunk/Source/WebCore/css/CSSContainerRule.cpp (292180 => 292181)
--- trunk/Source/WebCore/css/CSSContainerRule.cpp 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/Source/WebCore/css/CSSContainerRule.cpp 2022-03-31 21:50:47 UTC (rev 292181)
@@ -76,5 +76,16 @@
return builder.toString();
}
+String CSSContainerRule::nameFilterText() const
+{
+ StringBuilder builder;
+
+ auto name = styleRuleContainer().filteredQuery().nameFilter;
+ if (!name.isEmpty())
+ serializeIdentifier(name, builder);
+
+ return builder.toString();
+}
+
} // namespace WebCore
Modified: trunk/Source/WebCore/css/CSSContainerRule.h (292180 => 292181)
--- trunk/Source/WebCore/css/CSSContainerRule.h 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/Source/WebCore/css/CSSContainerRule.h 2022-03-31 21:50:47 UTC (rev 292181)
@@ -37,6 +37,7 @@
String cssText() const final;
String conditionText() const final;
+ String nameFilterText() const;
private:
const StyleRuleContainer& styleRuleContainer() const;
Modified: trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp (292180 => 292181)
--- trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp 2022-03-31 21:50:47 UTC (rev 292181)
@@ -26,6 +26,7 @@
#include "config.h"
#include "InspectorStyleSheet.h"
+#include "CSSContainerRule.h"
#include "CSSImportRule.h"
#include "CSSKeyframesRule.h"
#include "CSSLayerBlockRule.h"
@@ -106,10 +107,34 @@
static void flattenSourceData(RuleSourceDataList& dataList, RuleSourceDataList& target)
{
for (auto& data : dataList) {
- if (data->type == WebCore::StyleRuleType::Style)
+ switch (data->type) {
+ case WebCore::StyleRuleType::Style:
target.append(data.copyRef());
- else if (data->type == WebCore::StyleRuleType::Media || data->type == WebCore::StyleRuleType::Supports || data->type == WebCore::StyleRuleType::LayerBlock)
+ break;
+
+ case WebCore::StyleRuleType::Media:
+ case WebCore::StyleRuleType::Supports:
+ case WebCore::StyleRuleType::LayerBlock:
+ case WebCore::StyleRuleType::Container:
flattenSourceData(data->childRules, target);
+ break;
+
+ case WebCore::StyleRuleType::Unknown:
+ case WebCore::StyleRuleType::Charset:
+ case WebCore::StyleRuleType::Import:
+ case WebCore::StyleRuleType::FontFace:
+ case WebCore::StyleRuleType::Page:
+ case WebCore::StyleRuleType::Keyframes:
+ case WebCore::StyleRuleType::Keyframe:
+ case WebCore::StyleRuleType::Margin:
+ case WebCore::StyleRuleType::Namespace:
+ case WebCore::StyleRuleType::CounterStyle:
+ case WebCore::StyleRuleType::LayerStatement:
+ case WebCore::StyleRuleType::FontPaletteValues:
+ // These rule types do not contain child rules, and therefore have nothing to display in the Styles panel in
+ // the details sidebar of the Elements Tab in Web Inspector.
+ break;
+ }
}
}
@@ -430,6 +455,9 @@
if (is<CSSLayerBlockRule>(*rule))
return &downcast<CSSLayerBlockRule>(*rule).cssRules();
+ if (auto* containerRule = dynamicDowncast<CSSContainerRule>(rule))
+ return &containerRule->cssRules();
+
return nullptr;
}
@@ -482,6 +510,19 @@
if (!layerName.isEmpty())
layerRulePayload->setText(layerName);
ruleGroupingPayloads.append(WTFMove(layerRulePayload));
+ } else if (auto* containerRule = dynamicDowncast<CSSContainerRule>(parentRule)) {
+ auto containerRulePayload = Protocol::CSS::Grouping::create()
+ .setType(Protocol::CSS::Grouping::Type::ContainerRule)
+ .release();
+
+ StringBuilder builder;
+ auto nameFilter = containerRule->nameFilterText();
+ if (!nameFilter.isEmpty())
+ builder.append(nameFilter, ' ');
+ builder.append(containerRule->conditionText());
+ containerRulePayload->setText(builder.toString());
+
+ ruleGroupingPayloads.append(WTFMove(containerRulePayload));
}
for (auto&& ruleGroupingPayload : WTFMove(ruleGroupingPayloads)) {
Modified: trunk/Source/WebCore/style/InspectorCSSOMWrappers.cpp (292180 => 292181)
--- trunk/Source/WebCore/style/InspectorCSSOMWrappers.cpp 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/Source/WebCore/style/InspectorCSSOMWrappers.cpp 2022-03-31 21:50:47 UTC (rev 292181)
@@ -29,6 +29,7 @@
#include "config.h"
#include "InspectorCSSOMWrappers.h"
+#include "CSSContainerRule.h"
#include "CSSImportRule.h"
#include "CSSLayerBlockRule.h"
#include "CSSLayerStatementRule.h"
@@ -63,6 +64,9 @@
continue;
switch (cssRule->styleRuleType()) {
+ case StyleRuleType::Container:
+ collect(downcast<CSSContainerRule>(cssRule));
+ break;
case StyleRuleType::Import:
collect(downcast<CSSImportRule>(*cssRule).styleSheet());
break;
Modified: trunk/Source/WebInspectorUI/ChangeLog (292180 => 292181)
--- trunk/Source/WebInspectorUI/ChangeLog 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/Source/WebInspectorUI/ChangeLog 2022-03-31 21:50:47 UTC (rev 292181)
@@ -1,3 +1,15 @@
+2022-03-31 Patrick Angle <pan...@apple.com>
+
+ Web Inspector: Support Container Queries in the Styles sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=238346
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Models/CSSGrouping.js:
+ (WI.CSSGrouping.prototype.get isContainer):
+ (WI.CSSGrouping.prototype.get prefix):
+ (WI.CSSGrouping):
+
2022-03-31 Devin Rousso <drou...@apple.com>
Web Inspector: Sources: the mapped file URL of a Respone Local Override should wrap
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js (292180 => 292181)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js 2022-03-31 21:35:11 UTC (rev 292180)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js 2022-03-31 21:50:47 UTC (rev 292181)
@@ -61,6 +61,11 @@
|| this._type === WI.CSSGrouping.Type.LayerImportRule;
}
+ get isContainer()
+ {
+ return this._type === WI.CSSGrouping.Type.ContainerRule;
+ }
+
get prefix()
{
if (this.isSupports)
@@ -69,6 +74,9 @@
if (this.isLayer)
return "@layer";
+ if (this.isContainer)
+ return "@container";
+
console.assert(this.isMedia);
return "@media";
}
@@ -82,4 +90,5 @@
SupportsRule: "supports-rule",
LayerRule: "layer-rule",
LayerImportRule: "layer-import-rule",
+ ContainerRule: "container-rule",
};
