path: root/Source/JavaScriptCore/inspector/protocol/CSS.json

{
    "domain": "CSS",
    "description": "This domain exposes CSS read/write operations. All CSS objects, like stylesheets, rules, and styles, have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). Alternatively, a client can discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
    "availability": "web",
    "types": [
        {
            "id": "StyleSheetId",
            "type": "string"
        },
        {
            "id": "CSSStyleId",
            "type": "object",
            "properties": [
                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
                { "name": "ordinal", "type": "integer", "description": "The style ordinal within the stylesheet." }
            ],
            "description": "This object identifies a CSS style in a unique way."
        },
        {
            "id": "StyleSheetOrigin",
            "type": "string",
            "enum": ["user", "user-agent", "inspector", "regular"],
            "description": "Stylesheet type: \"user\" for user stylesheets, \"user-agent\" for user-agent stylesheets, \"inspector\" for stylesheets created by the inspector (i.e. those holding the \"via inspector\" rules), \"regular\" for regular stylesheets."
        },
        {
            "id": "CSSRuleId",
            "type": "object",
            "properties": [
                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
                { "name": "ordinal", "type": "integer", "description": "The rule ordinal within the stylesheet." }
            ],
            "description": "This object identifies a CSS rule in a unique way."
        },
        {
            "id": "PseudoIdMatches",
            "type": "object",
            "properties": [
                { "name": "pseudoId", "type": "integer", "description": "Pseudo style identifier (see <code>enum PseudoId</code> in <code>RenderStyleConstants.h</code>)."},
                { "name": "matches", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules applicable to the pseudo style."}
            ],
            "description": "CSS rule collection for a single pseudo style."
        },
        {
            "id": "InheritedStyleEntry",
            "type": "object",
            "properties": [
                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "The ancestor node's inline style, if any, in the style inheritance chain." },
                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules matching the ancestor node in the style inheritance chain." }
            ],
            "description": "CSS rule collection for a single pseudo style."
        },
        {
            "id": "RuleMatch",
            "type": "object",
            "properties": [
                { "name": "rule", "$ref": "CSSRule", "description": "CSS rule in the match." },
                { "name": "matchingSelectors", "type": "array", "items": { "type": "integer" }, "description": "Matching selector indices in the rule's selectorList selectors (0-based)." }
            ],
            "description": "Match data for a CSS rule."
        },
        {
            "id": "CSSSelector",
            "type": "object",
            "properties": [
                { "name": "text", "type": "string", "description": "Canonicalized selector text." },
                { "name": "specificity", "optional": true, "type": "array", "items": { "type": "integer" }, "description": "Specificity (a, b, c) tuple. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." },
                { "name": "dynamic", "optional": true, "type": "boolean", "description": "Whether or not the specificity can be dynamic. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." }
            ],
            "description": "CSS selector."
        },
        {
            "id": "SelectorList",
            "type": "object",
            "properties": [
                { "name": "selectors", "type": "array", "items": { "$ref": "CSSSelector" }, "description": "Selectors in the list." },
                { "name": "text", "type": "string", "description": "Rule selector text." },
                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Rule selector range in the underlying resource (if available)." }
            ],
            "description": "Selector list data."
        },
        {
            "id": "CSSStyleAttribute",
            "type": "object",
            "properties": [
                { "name": "name", "type": "string", "description": "DOM attribute name (e.g. \"width\")."},
                { "name": "style", "$ref": "CSSStyle", "description": "CSS style generated by the respective DOM attribute."}
            ],
            "description": "CSS style information for a DOM style attribute."
        },
        {
            "id": "CSSStyleSheetHeader",
            "type": "object",
            "properties": [
                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
                { "name": "frameId", "$ref": "Network.FrameId", "description": "Owner frame identifier."},
                { "name": "sourceURL", "type": "string", "description": "Stylesheet resource URL."},
                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Stylesheet origin."},
                { "name": "title", "type": "string", "description": "Stylesheet title."},
                { "name": "disabled", "type": "boolean", "description": "Denotes whether the stylesheet is disabled."},
                { "name": "isInline", "type": "boolean", "description": "Whether this stylesheet is a <style> tag created by the parser. This is not set for document.written <style> tags." },
                { "name": "startLine", "type": "number", "description": "Line offset of the stylesheet within the resource (zero based)." },
                { "name": "startColumn", "type": "number", "description": "Column offset of the stylesheet within the resource (zero based)." }
            ],
            "description": "CSS stylesheet metainformation."
        },
        {
            "id": "CSSStyleSheetBody",
            "type": "object",
            "properties": [
                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
                { "name": "rules", "type": "array", "items": { "$ref": "CSSRule" }, "description": "Stylesheet resource URL."},
                { "name": "text", "type": "string", "optional": true, "description": "Stylesheet resource contents (if available)."}
            ],
            "description": "CSS stylesheet contents."
        },
        {
            "id": "CSSRule",
            "type": "object",
            "properties": [
                { "name": "ruleId", "$ref": "CSSRuleId", "optional": true, "description": "The CSS rule identifier (absent for user agent stylesheet and user-specified stylesheet rules)."},
                { "name": "selectorList", "$ref": "SelectorList", "description": "Rule selector data." },
                { "name": "sourceURL", "type": "string", "optional": true, "description": "Parent stylesheet resource URL (for regular rules)."},
                { "name": "sourceLine", "type": "integer", "description": "Line ordinal of the rule selector start character in the resource."},
                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
                { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." },
                { "name": "media", "type": "array", "items": { "$ref": "CSSMedia" }, "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards." }
            ],
            "description": "CSS rule representation."
        },
        {
            "id": "SourceRange",
            "type": "object",
            "properties": [
                { "name": "startLine", "type": "integer", "description": "Start line of range." },
                { "name": "startColumn", "type": "integer", "description": "Start column of range (inclusive)." },
                { "name": "endLine", "type": "integer", "description": "End line of range" },
                { "name": "endColumn", "type": "integer", "description": "End column of range (exclusive)." }
            ],
            "description": "Text range within a resource."
        },
        {
            "id": "ShorthandEntry",
            "type": "object",
            "properties": [
                { "name": "name", "type": "string", "description": "Shorthand name." },
                { "name": "value", "type": "string", "description": "Shorthand value." }
            ]
        },
        {
            "id": "CSSPropertyInfo",
            "type": "object",
            "properties": [
                { "name": "name", "type": "string", "description": "Property name." },
                { "name": "longhands", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Longhand property names." },
                { "name": "values", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Supported values for this property." }
            ]
        },
        {
            "id": "CSSComputedStyleProperty",
            "type": "object",
            "properties": [
                { "name": "name", "type": "string", "description": "Computed style property name." },
                { "name": "value", "type": "string", "description": "Computed style property value." }
            ]
        },
        {
            "id": "CSSStyle",
            "type": "object",
            "properties": [
                { "name": "styleId", "$ref": "CSSStyleId", "optional": true, "description": "The CSS style identifier (absent for attribute styles)." },
                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSProperty" }, "description": "CSS properties in the style." },
                { "name": "shorthandEntries", "type": "array", "items": { "$ref": "ShorthandEntry" }, "description": "Computed values for all shorthands found in the style." },
                { "name": "cssText", "type": "string", "optional": true, "description": "Style declaration text (if available)." },
                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Style declaration range in the enclosing stylesheet (if available)." },
                { "name": "width", "type": "string", "optional": true, "description": "The effective \"width\" property value from this style." },
                { "name": "height", "type": "string", "optional": true, "description": "The effective \"height\" property value from this style." }
            ],
            "description": "CSS style representation."
        },
        {
            "id": "CSSPropertyStatus",
	    "type": "string",
            "enum": ["active", "inactive", "disabled", "style"],
            "description": "The property status: \"active\" if the property is effective in the style, \"inactive\" if the property is overridden by a same-named property in this style later on, \"disabled\" if the property is disabled by the user, \"style\" (implied if absent) if the property is reported by the browser rather than by the CSS source parser."
        },
        {
            "id": "CSSProperty",
            "type": "object",
            "properties": [
                { "name": "name", "type": "string", "description": "The property name." },
                { "name": "value", "type": "string", "description": "The property value." },
                { "name": "priority", "type": "string", "optional": true, "description": "The property priority (implies \"\" if absent)." },
                { "name": "implicit", "type": "boolean", "optional": true, "description": "Whether the property is implicit (implies <code>false</code> if absent)." },
                { "name": "text", "type": "string", "optional": true, "description": "The full property text as specified in the style." },
                { "name": "parsedOk", "type": "boolean", "optional": true, "description": "Whether the property is understood by the browser (implies <code>true</code> if absent)." },
                { "name": "status", "$ref": "CSSPropertyStatus", "optional": true, "description": "Whether the property is active or disabled." },
                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "The entire property range in the enclosing style declaration (if available)." }
            ],
            "description": "CSS style effective visual dimensions and source offsets."
        },
        {
            "id": "CSSMedia",
            "type": "object",
            "properties": [
                { "name": "text", "type": "string", "description": "Media query text." },
                { "name": "source", "type": "string", "enum": ["mediaRule", "importRule", "linkedSheet", "inlineSheet"], "description": "Source of the media query: \"mediaRule\" if specified by a @media rule, \"importRule\" if specified by an @import rule, \"linkedSheet\" if specified by a \"media\" attribute in a linked stylesheet's LINK tag, \"inlineSheet\" if specified by a \"media\" attribute in an inline stylesheet's STYLE tag." },
                { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." },
                { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." }
            ],
            "description": "CSS media query descriptor."
        },
        {
            "id": "Region",
            "type": "object",
            "properties": [
                { "name": "regionOverset", "type": "string", "enum": ["overset", "fit", "empty"], "description": "The \"overset\" attribute of a Named Flow." },
                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The corresponding DOM node id." }
            ],
            "description": "This object represents a region that flows from a Named Flow."
        },
        {
            "id": "NamedFlow",
            "type": "object",
            "properties": [
                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
                { "name": "name", "type": "string", "description": "Named Flow identifier." },
                { "name": "overset", "type": "boolean", "description": "The \"overset\" attribute of a Named Flow." },
                { "name": "content", "type": "array", "items": { "$ref": "DOM.NodeId" }, "description": "An array of nodes that flow into the Named Flow." },
                { "name": "regions", "type": "array", "items": { "$ref": "Region" }, "description": "An array of regions associated with the Named Flow." }
            ],
            "description": "This object represents a Named Flow."
        }
    ],
    "commands": [
        {
            "name": "enable",
            "description": "Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received."
        },
        {
            "name": "disable",
            "description": "Disables the CSS agent for the given page."
        },
        {
            "name": "getMatchedStylesForNode",
            "parameters": [
                { "name": "nodeId", "$ref": "DOM.NodeId" },
                { "name": "includePseudo", "type": "boolean", "optional": true, "description": "Whether to include pseudo styles (default: true)." },
                { "name": "includeInherited", "type": "boolean", "optional": true, "description": "Whether to include inherited styles (default: true)." }
            ],
            "returns": [
                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "optional": true, "description": "CSS rules matching this node, from all applicable stylesheets." },
                { "name": "pseudoElements", "type": "array", "items": { "$ref": "PseudoIdMatches" }, "optional": true, "description": "Pseudo style matches for this node." },
                { "name": "inherited", "type": "array", "items": { "$ref": "InheritedStyleEntry" }, "optional": true, "description": "A chain of inherited styles (from the immediate node parent up to the DOM tree root)." }
            ],
            "description": "Returns requested styles for a DOM node identified by <code>nodeId</code>."
        },
        {
            "name": "getInlineStylesForNode",
            "parameters": [
                { "name": "nodeId", "$ref": "DOM.NodeId" }
            ],
            "returns": [
                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "Inline style for the specified DOM node." },
                { "name": "attributesStyle", "$ref": "CSSStyle", "optional": true, "description": "Attribute-defined element style (e.g. resulting from \"width=20 height=100%\")."}
            ],
            "description": "Returns the styles defined inline (explicitly in the \"style\" attribute and implicitly, using DOM attributes) for a DOM node identified by <code>nodeId</code>."
        },
        {
            "name": "getComputedStyleForNode",
            "parameters": [
                { "name": "nodeId", "$ref": "DOM.NodeId" }
            ],
            "returns": [
                { "name": "computedStyle", "type": "array", "items": { "$ref": "CSSComputedStyleProperty" }, "description": "Computed style for the specified DOM node." }
            ],
            "description": "Returns the computed style for a DOM node identified by <code>nodeId</code>."
        },
        {
            "name": "getAllStyleSheets",
            "returns": [
                { "name": "headers", "type": "array", "items": { "$ref": "CSSStyleSheetHeader" }, "description": "Descriptor entries for all available stylesheets." }
            ],
            "description": "Returns metainfo entries for all known stylesheets."
        },
        {
            "name": "getStyleSheet",
            "parameters": [
                { "name": "styleSheetId", "$ref": "StyleSheetId" }
            ],
            "returns": [
                { "name": "styleSheet", "$ref": "CSSStyleSheetBody", "description": "Stylesheet contents for the specified <code>styleSheetId</code>." }
            ],
            "description": "Returns stylesheet data for the specified <code>styleSheetId</code>."
        },
        {
            "name": "getStyleSheetText",
            "parameters": [
                { "name": "styleSheetId", "$ref": "StyleSheetId" }
            ],
            "returns": [
                { "name": "text", "type": "string", "description": "The stylesheet text." }
            ],
            "description": "Returns the current textual content and the URL for a stylesheet."
        },
        {
            "name": "setStyleSheetText",
            "parameters": [
                { "name": "styleSheetId", "$ref": "StyleSheetId" },
                { "name": "text", "type": "string" }
            ],
            "description": "Sets the new stylesheet text, thereby invalidating all existing <code>CSSStyleId</code>'s and <code>CSSRuleId</code>'s contained by this stylesheet."
        },
        {
            "name": "setStyleText",
            "parameters": [
                { "name": "styleId", "$ref": "CSSStyleId" },
                { "name": "text", "type": "string" }
            ],
            "returns": [
                { "name": "style", "$ref": "CSSStyle", "description": "The resulting style after the text modification." }
            ],
            "description": "Sets the new <code>text</code> for the respective style."
        },
        {
            "name": "setRuleSelector",
            "parameters": [
                { "name": "ruleId", "$ref": "CSSRuleId" },
                { "name": "selector", "type": "string" }
            ],
            "returns": [
                { "name": "rule", "$ref": "CSSRule", "description": "The resulting rule after the selector modification." }
            ],
            "description": "Modifies the rule selector."
        },
        {
            "name": "createStyleSheet",
            "parameters": [
                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame where the new \"inspector\" stylesheet should be created." }
            ],
            "returns": [
                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the created \"inspector\" stylesheet." }
            ],
            "description": "Creates a new special \"inspector\" stylesheet in the frame with given <code>frameId</code>."
        },
        {
            "name": "addRule",
            "parameters": [
                { "name": "styleSheetId", "$ref": "StyleSheetId" },
                { "name": "selector", "type": "string" }
            ],
            "returns": [
                { "name": "rule", "$ref": "CSSRule", "description": "The newly created rule." }
            ],
            "description": "Creates a new empty rule with the given <code>selector</code> in a stylesheet with given <code>styleSheetId</code>."
        },
        {
            "name": "getSupportedCSSProperties",
            "returns": [
                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSPropertyInfo" }, "description": "Supported property metainfo." }
            ],
            "description": "Returns all supported CSS property names."
        },
        {
            "name": "getSupportedSystemFontFamilyNames",
            "returns": [
                { "name": "fontFamilyNames", "type": "array", "items": { "type": "string" }, "description": "Supported system font families." }
            ],
            "description": "Returns all supported system font family names."
        },
        {
            "name": "forcePseudoState",
            "parameters": [
                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The element id for which to force the pseudo state." },
                { "name": "forcedPseudoClasses", "type": "array", "items": { "type": "string", "enum": ["active", "focus", "hover", "visited"] }, "description": "Element pseudo classes to force when computing the element's style." }
            ],
            "description": "Ensures that the given node will have specified pseudo-classes whenever its style is computed by the browser."
        },
        {
            "name": "getNamedFlowCollection",
            "parameters": [
                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id for which to get the Named Flow Collection." }
            ],
            "returns": [
                { "name": "namedFlows", "type": "array", "items": { "$ref": "NamedFlow" }, "description": "An array containing the Named Flows in the document." }
            ],
            "description": "Returns the Named Flows from the document."
        }
    ],
    "events": [
        {
            "name": "mediaQueryResultChanged",
            "description": "Fires whenever a MediaQuery result changes (for example, after a browser window has been resized.) The current implementation considers only viewport-dependent media features."
        },
        {
            "name": "styleSheetChanged",
            "parameters": [
                { "name": "styleSheetId", "$ref": "StyleSheetId" }
            ],
            "description": "Fired whenever a stylesheet is changed as a result of the client operation."
        },
        {
            "name": "styleSheetAdded",
            "parameters": [
                { "name": "header", "$ref": "CSSStyleSheetHeader", "description": "Added stylesheet metainfo." }
            ],
            "description": "Fired whenever an active document stylesheet is added."
        },
        {
            "name": "styleSheetRemoved",
            "parameters": [
                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the removed stylesheet." }
            ],
            "description": "Fired whenever an active document stylesheet is removed."
        },
        {
            "name": "namedFlowCreated",
            "parameters": [
                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The new Named Flow." }
            ],
            "description": "Fires when a Named Flow is created."
        },
        {
            "name": "namedFlowRemoved",
            "parameters": [
                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
                { "name": "flowName", "type": "string", "description": "Identifier of the removed Named Flow." }
            ],
            "description": "Fires when a Named Flow is removed: has no associated content nodes and regions."
        },
        {
            "name": "regionOversetChanged",
            "parameters": [
                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The Named Flow containing the regions whose regionOverset values changed." }
            ],
            "description": "Fires if any of the regionOverset values changed in a Named Flow's region chain."
        },
        {
            "name": "registeredNamedFlowContentElement",
            "parameters": [
                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was registered." },
                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the registered content node." },
                { "name": "nextContentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the element following the registered content node." }
            ],
            "description": "Fires when a Named Flow's has been registered with a new content node."
        },
        {
            "name": "unregisteredNamedFlowContentElement",
            "parameters": [
                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was unregistered." },
                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the unregistered content node." }
            ],
            "description": "Fires when a Named Flow's has been registered with a new content node."
        }
    ]
}