// Copyright 2022 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import * as Protocol from '../../generated/protocol.js'; import {createTarget} from '../../testing/EnvironmentHelpers.js'; import {describeWithMockConnection} from '../../testing/MockConnection.js'; import * as SDK from './sdk.js'; function ruleMatch( selector: string, cssProperties: Protocol.CSS.CSSProperty[], range?: Protocol.CSS.SourceRange, styleSheetId = '0' as Protocol.CSS.StyleSheetId): Protocol.CSS.RuleMatch { return { rule: { selectorList: {selectors: [{text: selector}], text: selector}, origin: Protocol.CSS.StyleSheetOrigin.Regular, style: { cssProperties, styleSheetId, range, shorthandEntries: [], }, }, matchingSelectors: [0], }; } function createMatchedStyles( payload: Partial, node?: SDK.DOMModel.DOMNode) { if (!node) { node = sinon.createStubInstance(SDK.DOMModel.DOMNode); node.id = 1 as Protocol.DOM.NodeId; } return SDK.CSSMatchedStyles.CSSMatchedStyles.create({ cssModel: sinon.createStubInstance(SDK.CSSModel.CSSModel), node, inlinePayload: null, attributesPayload: null, matchedPayload: [], pseudoPayload: [], inheritedPayload: [], inheritedPseudoPayload: [], animationsPayload: [], parentLayoutNodeId: undefined, positionTryRules: [], propertyRules: [], cssPropertyRegistrations: [], fontPaletteValuesRule: undefined, activePositionFallbackIndex: -1, animationStylesPayload: [], transitionsStylePayload: null, inheritedAnimatedPayload: [], ...payload, }); } describe('CSSMatchedStyles', () => { describe('computeCSSVariable', () => { const testCssValueEquals = async (text: string, expectedValue: unknown) => { const matchedStyles = await createMatchedStyles({ matchedPayload: [ ruleMatch( 'div', [ {name: '--diamond', value: 'var(--diamond-a) var(--diamond-b)'}, {name: '--diamond-a', value: 'var(--foo)'}, {name: '--diamond-b', value: 'var(--foo)'}, {name: '--foo', value: 'active-foo'}, {name: '--baz', value: 'active-baz !important', important: true}, {name: '--baz', value: 'passive-baz'}, {name: '--dark', value: 'darkgrey'}, {name: '--empty', value: ''}, {name: '--empty2', value: 'var(--empty)'}, {name: '--light', value: 'lightgrey'}, {name: '--theme', value: 'var(--dark)'}, {name: '--shadow', value: '1px var(--theme)'}, {name: '--width', value: '1px'}, {name: '--a', value: 'a'}, {name: '--b', value: 'var(--a)'}, {name: '--valid-fallback', value: 'var(--non-existent, fallback-value)'}, {name: '--var-reference-in-fallback', value: 'var(--non-existent, var(--foo))'}, {name: '--itself', value: 'var(--itself)'}, {name: '--itself-complex', value: '10px var(--itself-complex)'}, {name: '--cycle-1', value: 'var(--cycle-2)'}, {name: '--cycle-2', value: 'var(--cycle-1)'}, {name: '--cycle-a', value: 'var(--cycle-b, 50px)'}, {name: '--cycle-b', value: 'var(--cycle-a)'}, {name: '--cycle-in-fallback', value: 'var(--non-existent, var(--cycle-a))'}, {name: '--non-existent-fallback', value: 'var(--non-existent, var(--another-non-existent))'}, {name: '--out-of-cycle', value: 'var(--cycle-2, 20px)'}, {name: '--non-inherited', value: 'var(--inherited)'}, {name: '--also-inherited-overloaded', value: 'this is overloaded here'}, ]), ruleMatch( 'html', [ {name: '--inherited', value: 'var(--also-inherited-overloaded)'}, {name: '--also-inherited-overloaded', value: 'inherited and overloaded'}, ]), ], }); const actualValue = matchedStyles.computeCSSVariable(matchedStyles.nodeStyles()[0], text)?.value ?? null; assert.strictEqual(actualValue, expectedValue); }; it('should correctly compute the value of an expression that uses a variable', async () => { await testCssValueEquals('--foo', 'active-foo'); await testCssValueEquals('--baz', 'active-baz !important'); await testCssValueEquals('--does-not-exist', null); await testCssValueEquals('--dark', 'darkgrey'); await testCssValueEquals('--light', 'lightgrey'); await testCssValueEquals('--theme', 'darkgrey'); await testCssValueEquals('--shadow', '1px darkgrey'); await testCssValueEquals('--width', '1px'); await testCssValueEquals('--diamond', 'active-foo active-foo'); await testCssValueEquals('--empty', ''); await testCssValueEquals('--empty2', ''); }); it('correctly resolves the declaration', async () => { const node = sinon.createStubInstance(SDK.DOMModel.DOMNode); node.id = 1 as Protocol.DOM.NodeId; node.parentNode = sinon.createStubInstance(SDK.DOMModel.DOMNode); node.parentNode.id = 2 as Protocol.DOM.NodeId; node.parentNode.parentNode = sinon.createStubInstance(SDK.DOMModel.DOMNode); node.parentNode.parentNode.id = 3 as Protocol.DOM.NodeId; node.parentNode.parentNode.parentNode = sinon.createStubInstance(SDK.DOMModel.DOMNode); node.parentNode.parentNode.parentNode.id = 4 as Protocol.DOM.NodeId; const matchedStyles = await createMatchedStyles({ node, matchedPayload: [ruleMatch('div', [{name: '--foo', value: 'foo1'}])], // styleFoo1 inheritedPayload: [ { matchedCSSRules: [ruleMatch('div', [{name: '--bar', value: 'bar'}, {name: '--foo', value: 'foo2'}])], }, // styleFoo2 {matchedCSSRules: [ruleMatch('div', [{name: '--baz', value: 'baz'}])]}, // styleBaz {matchedCSSRules: [ruleMatch('div', [{name: '--foo', value: 'foo3'}])]}, // styleFoo3 ], propertyRules: [{ origin: Protocol.CSS.StyleSheetOrigin.Regular, style: { cssProperties: [ {name: 'syntax', value: '*'}, {name: 'inherits', value: 'true'}, {name: 'initial-value', value: 'bar0'}, ], shorthandEntries: [], }, propertyName: {text: '--bar'}, }], }); // Compute the variable value as it is visible to `startingCascade` and compare with the expectation const testComputedVariableValueEquals = (name: string, startingCascade: SDK.CSSStyleDeclaration.CSSStyleDeclaration, expectedValue: string, expectedDeclaration: SDK.CSSProperty.CSSProperty|SDK.CSSMatchedStyles.CSSRegisteredProperty) => { const {value, declaration} = matchedStyles.computeCSSVariable(startingCascade, name)!; assert.strictEqual(value, expectedValue); assert.strictEqual(declaration.declaration, expectedDeclaration); }; const styles = matchedStyles.nodeStyles(); const styleFoo1 = styles.find(style => style.allProperties().find(p => p.value === 'foo1')); const styleFoo2 = styles.find(style => style.allProperties().find(p => p.value === 'foo2')); const styleFoo3 = styles.find(style => style.allProperties().find(p => p.value === 'foo3')); const styleBaz = styles.find(style => style.allProperties().find(p => p.value === 'baz')); assert.exists(styleFoo1); assert.exists(styleFoo2); assert.exists(styleFoo3); assert.exists(styleBaz); testComputedVariableValueEquals('--foo', styleFoo1, 'foo1', styleFoo1.leadingProperties()[0]); testComputedVariableValueEquals('--bar', styleFoo1, 'bar', styleFoo2.leadingProperties()[0]); testComputedVariableValueEquals('--foo', styleFoo2, 'foo2', styleFoo2.leadingProperties()[1]); testComputedVariableValueEquals('--bar', styleFoo3, 'bar0', matchedStyles.registeredProperties()[0]); testComputedVariableValueEquals('--foo', styleBaz, 'foo3', styleFoo3.leadingProperties()[0]); }); describe('cyclic references', () => { it('should return `null` when the variable references itself', async () => { await testCssValueEquals('--itself', null); await testCssValueEquals('--itself-complex', null); }); it('should return `null` when there is a simple cycle (1->2->1)', async () => { await testCssValueEquals('--cycle-1', null); }); it('should return `null` if the var reference is inside the cycle', async () => { await testCssValueEquals('--cycle-a', null); }); it('should return fallback value if the expression is not inside the cycle', async () => { await testCssValueEquals('--out-of-cycle', '20px'); }); }); describe('var references inside fallback', () => { it('should resolve a `var()` reference inside fallback value too', async () => { await testCssValueEquals('--var-reference-in-fallback', 'active-foo'); }); it('should return null when the fallback value contains a cyclic reference', async () => { await testCssValueEquals('--cycle-in-fallback', null); }); it('should return null when the fallback value is non existent too', async () => { await testCssValueEquals('--non-existent-fallback', null); }); }); it('should resolve a `var()` reference with nothing else', async () => { await testCssValueEquals('--a', 'a'); }); it('should resolve a `var()` reference until no `var()` references left', async () => { await testCssValueEquals('--b', 'a'); }); it('should resolve to fallback if the referenced variable does not exist', async () => { await testCssValueEquals('--valid-fallback', 'fallback-value'); }); it('should correctly resolve the `var()` reference for complex inheritance case', async () => { await testCssValueEquals('--non-inherited', 'inherited and overloaded'); }); it('resolves vars with css keywords', async () => { const node = sinon.createStubInstance(SDK.DOMModel.DOMNode); node.id = 1 as Protocol.DOM.NodeId; const parent = sinon.createStubInstance(SDK.DOMModel.DOMNode); parent.id = 2 as Protocol.DOM.NodeId; node.parentNode = parent; const matchedStyles = await createMatchedStyles( { matchedPayload: [ruleMatch('div', [{name: '--color', value: 'inherit'}])], inheritedPayload: [{matchedCSSRules: [ruleMatch('div', [{name: '--color', value: 'inherited-color'}])]}], }, node); assert.strictEqual( matchedStyles.computeCSSVariable(matchedStyles.nodeStyles()[0], '--color')?.value, 'inherited-color'); }); it('correcty handles cycles', async () => { async function compute(name: string, styleRules: string[], inheritedRules: string[][]) { const ruleToRuleMatch = (rule: string, index: number) => ruleMatch( `.${index}`, rule.split(';') .filter(decl => decl.trim()) .map(decl => decl.split(':')) .map(decl => ({name: decl[0].trim(), value: decl.slice(1).join(':').trim()}))); const matchedPayload = styleRules.map(ruleToRuleMatch); const inheritedPayload = inheritedRules.map( ruleTexts => ({matchedCSSRules: ruleTexts.map((rule, i) => ruleToRuleMatch(rule, i + styleRules.length))})); const matchedStyles = await createMatchedStyles({matchedPayload, inheritedPayload}); return matchedStyles.computeCSSVariable(matchedStyles.nodeStyles()[0], name)?.value ?? null; } const simpleCycle = ` --a: var(--b); --b: var(--a); `; assert.isNull(await compute('--a', [simpleCycle], [])); assert.isNull(await compute('--b', [simpleCycle], [])); const cycleOnUnusedFallback = ` --a: 2; --b: var(--a, var(--c)); --c: var(--b); `; assert.strictEqual(await compute('--a', [cycleOnUnusedFallback], []), '2'); assert.strictEqual(await compute('--b', [cycleOnUnusedFallback], []), '2'); assert.strictEqual(await compute('--c', [cycleOnUnusedFallback], []), '2'); const simpleCycleWithFallbacks = ` --a: var(--b, 1); --b: var(--a, 2); `; assert.isNull(await compute('--a', [simpleCycleWithFallbacks], [])); assert.isNull(await compute('--b', [simpleCycleWithFallbacks], [])); const longerCycle = ` --a: var(--b); --b: var(--c); --c: var(--a); `; assert.isNull(await compute('--a', [longerCycle], [])); assert.isNull(await compute('--b', [longerCycle], [])); assert.isNull(await compute('--c', [longerCycle], [])); const longerCycleWithFallbacks = ` --a: var(--b, 2); --b: var(--c, 3); --c: var(--a, 4); `; assert.isNull(await compute('--a', [longerCycleWithFallbacks], [])); assert.isNull(await compute('--b', [longerCycleWithFallbacks], [])); assert.isNull(await compute('--c', [longerCycleWithFallbacks], [])); const pointingIntoCycle = ` ${longerCycle} --d: var(--a); --e: var(--b); `; assert.isNull(await compute('--a', [pointingIntoCycle], [])); assert.isNull(await compute('--b', [pointingIntoCycle], [])); assert.isNull(await compute('--c', [pointingIntoCycle], [])); assert.isNull(await compute('--d', [pointingIntoCycle], [])); assert.isNull(await compute('--e', [pointingIntoCycle], [])); const pointingIntoCycleWithFallback = ` ${longerCycle} --d: var(--a, 4); --e: var(--b, 5); `; assert.isNull(await compute('--a', [pointingIntoCycleWithFallback], [])); assert.isNull(await compute('--b', [pointingIntoCycleWithFallback], [])); assert.isNull(await compute('--c', [pointingIntoCycleWithFallback], [])); assert.strictEqual(await compute('--d', [pointingIntoCycleWithFallback], []), '4'); assert.strictEqual(await compute('--e', [pointingIntoCycleWithFallback], []), '5'); const multipleEdges = ` --a: var(--b); --b: var(--c) var(--d); --c: var(--a) var(--b); --d: var(--c); `; assert.isNull(await compute('--a', [multipleEdges], [])); assert.isNull(await compute('--b', [multipleEdges], [])); assert.isNull(await compute('--c', [multipleEdges], [])); assert.isNull(await compute('--d', [multipleEdges], [])); const pointingIntoMultipleEdgeCycle = ` ${multipleEdges} --e: var(--c) var(--d); `; assert.isNull(await compute('--a', [pointingIntoMultipleEdgeCycle], [])); assert.isNull(await compute('--b', [pointingIntoMultipleEdgeCycle], [])); assert.isNull(await compute('--c', [pointingIntoMultipleEdgeCycle], [])); assert.isNull(await compute('--d', [pointingIntoMultipleEdgeCycle], [])); assert.isNull(await compute('--e', [pointingIntoMultipleEdgeCycle], [])); const pointingIntoMultipleEdgeCycleWithFallback = ` ${multipleEdges} --e: var(--c, 4) var(--d, 5); `; assert.isNull(await compute('--a', [pointingIntoMultipleEdgeCycleWithFallback], [])); assert.isNull(await compute('--b', [pointingIntoMultipleEdgeCycleWithFallback], [])); assert.isNull(await compute('--c', [pointingIntoMultipleEdgeCycleWithFallback], [])); assert.isNull(await compute('--d', [pointingIntoMultipleEdgeCycleWithFallback], [])); assert.strictEqual(await compute('--e', [pointingIntoMultipleEdgeCycleWithFallback], []), '4 5'); const multipleCyclesWithFallback = ` ${longerCycle} --d: var(--e); --e: var(--f); --f: var(--d); --g: var(--a, var(--d, 5)); `; assert.isNull(await compute('--a', [multipleCyclesWithFallback], [])); assert.isNull(await compute('--b', [multipleCyclesWithFallback], [])); assert.isNull(await compute('--c', [multipleCyclesWithFallback], [])); assert.isNull(await compute('--d', [multipleCyclesWithFallback], [])); assert.isNull(await compute('--e', [multipleCyclesWithFallback], [])); assert.isNull(await compute('--f', [multipleCyclesWithFallback], [])); assert.strictEqual(await compute('--g', [multipleCyclesWithFallback], []), '5'); const notACycle = ` --a: var(--b, 1); `; const inherited = ` --a: var(--b); --b: var(--a); `; assert.strictEqual(await compute('--a', [notACycle], [[inherited]]), '1'); assert.isNull(await compute('--b', [notACycle], [[inherited]])); }); }); it('does not hide inherited rules that also apply directly to the node if it contains custom properties', async () => { const parentNode = sinon.createStubInstance(SDK.DOMModel.DOMNode); parentNode.id = 0 as Protocol.DOM.NodeId; const node = sinon.createStubInstance(SDK.DOMModel.DOMNode); node.parentNode = parentNode; node.id = 1 as Protocol.DOM.NodeId; const startColumn = 0, endColumn = 1; const matchedPayload = [ ruleMatch('body', [{name: '--var', value: 'blue'}], {startLine: 0, startColumn, endLine: 0, endColumn}), ruleMatch('*', [{name: 'color', value: 'var(--var)'}], {startLine: 1, startColumn, endLine: 1, endColumn}), ruleMatch('*', [{name: '--var', value: 'red'}], {startLine: 2, startColumn, endLine: 2, endColumn}), ]; const inheritedPayload = [{matchedCSSRules: matchedPayload.slice(1)}]; const matchedStyles = await createMatchedStyles({ node, matchedPayload, inheritedPayload, }); assert.deepEqual(matchedStyles.nodeStyles().map(style => style.allProperties().map(prop => prop.propertyText)), [ ['--var: red;'], ['color: var(--var);'], ['--var: blue;'], ['--var: red;'], ]); }); describe('resolveGlobalKeyword', () => { const inheritedPayload: Protocol.CSS.InheritedStyleEntry[] = [{ matchedCSSRules: [ruleMatch( '.parent', [ {name: 'color', value: 'color-inherited'}, {name: 'border', value: 'border-inherited'}, {name: '--inherited-is-inherited', value: 'inherited-is-inherited'}, {name: '--non-inherited-is-inherited', value: 'non-inherited-is-inherited'}, {name: '--unregistered-is-inherited', value: 'unregistered-is-inherited'}, ])], }]; const cssPropertyRegistrations: Protocol.CSS.CSSPropertyRegistration[] = [ { propertyName: '--inherited-is-inherited', syntax: '""', initialValue: {text: 'inherited-is-inherited-initial'}, inherits: true, }, { propertyName: '--inherited-is-not-inherited', syntax: '""', initialValue: {text: 'inherited-is-not-inherited-initial'}, inherits: true, }, { propertyName: '--non-inherited-is-inherited', syntax: '""', initialValue: {text: 'non-inherited-is-inherited-initial'}, inherits: false, }, { propertyName: '--non-inherited-is-not-inherited', syntax: '""', initialValue: {text: 'non-inherited-is-not-inherited-initial'}, inherits: false, }, ]; function checkResolution( matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, properties: Array): void { const ownProperties = new Map(matchedStyles.nodeStyles() .find(style => style.type === SDK.CSSStyleDeclaration.Type.Regular) ?.allProperties() .map(property => [property.name, property])); for (const {name: propertyName, expectedValue} of properties) { const property = ownProperties.get(propertyName); assert.isOk(property); let resolvedValue: SDK.CSSMatchedStyles.CSSValueSource|null = new SDK.CSSMatchedStyles.CSSValueSource(property); while (resolvedValue?.value && SDK.CSSMetadata.CSSMetadata.isCSSWideKeyword(resolvedValue?.value)) { const {declaration, value} = resolvedValue; if (!(declaration instanceof SDK.CSSProperty.CSSProperty)) { break; } resolvedValue = matchedStyles.resolveGlobalKeyword(declaration, value); } assert.strictEqual(resolvedValue?.value, expectedValue, propertyName); } } let node: sinon.SinonStubbedInstance; beforeEach(() => { node = sinon.createStubInstance(SDK.DOMModel.DOMNode); node.id = 1 as Protocol.DOM.NodeId; node.nodeType.returns(Node.ELEMENT_NODE); const parent = sinon.createStubInstance(SDK.DOMModel.DOMNode); parent.id = 2 as Protocol.DOM.NodeId; parent.nodeType.returns(Node.ELEMENT_NODE); node.parentNode = parent; }); it('correctly resolves the keyword `unset`', async () => { const properties = [ // Value is undefined {name: 'background-color', value: 'unset', expectedValue: undefined}, // Property inherits, Value is inherited {name: 'color', value: 'unset', expectedValue: 'color-inherited'}, // Property inherits, Value is not inherited {name: 'font-size', value: 'unset', expectedValue: undefined}, // Value is not inherited {name: 'border', value: 'unset', expectedValue: undefined}, // Value is not inherited {name: 'margin', value: 'unset', expectedValue: undefined}, // Property inherits, Value is inherited {name: '--inherited-is-inherited', value: 'unset', expectedValue: 'inherited-is-inherited'}, // Property inherits, Value is not inherited, so fall back to initial {name: '--inherited-is-not-inherited', value: 'unset', expectedValue: 'inherited-is-not-inherited-initial'}, // Value is not inherited, so fall back to initial {name: '--non-inherited-is-inherited', value: 'unset', expectedValue: 'non-inherited-is-inherited-initial'}, // Value is not inherited, so fall back to initial { name: '--non-inherited-is-not-inherited', value: 'unset', expectedValue: 'non-inherited-is-not-inherited-initial', }, // Value is inherited {name: '--unregistered-is-inherited', value: 'unset', expectedValue: 'unregistered-is-inherited'}, // Value is undefined {name: '--unregistered-is-not-inherited', value: 'unset', expectedValue: undefined}, ]; const matchedStyles = await createMatchedStyles( {matchedPayload: [ruleMatch('div', properties)], inheritedPayload, cssPropertyRegistrations}, node); checkResolution(matchedStyles, properties); }); it('correctly resolves the keyword `inherits`', async () => { const properties = [ // Value is undefined {name: 'background-color', value: 'inherit', expectedValue: undefined}, // Property inherits, Value is inherited {name: 'color', value: 'inherit', expectedValue: 'color-inherited'}, // Property inherits, Value is not inherited {name: 'font-size', value: 'inherit', expectedValue: undefined}, // Property doesn't inherit, but Value is inherited {name: 'border', value: 'inherit', expectedValue: 'border-inherited'}, // Value is not inherited {name: 'margin', value: 'inherit', expectedValue: undefined}, // Property inherits, Value is inherited {name: '--inherited-is-inherited', value: 'inherit', expectedValue: 'inherited-is-inherited'}, // Property inherits, Value is not inherited, so fall back to initial {name: '--inherited-is-not-inherited', value: 'inherit', expectedValue: 'inherited-is-not-inherited-initial'}, // Property doesn't inherit, but Value is inherited {name: '--non-inherited-is-inherited', value: 'inherit', expectedValue: 'non-inherited-is-inherited'}, // Value is not inherited, so fall back to initial { name: '--non-inherited-is-not-inherited', value: 'inherit', expectedValue: 'non-inherited-is-not-inherited-initial', }, // Value is inherited {name: '--unregistered-is-inherited', value: 'inherit', expectedValue: 'unregistered-is-inherited'}, // Value is undefined {name: '--unregistered-is-not-inherited', value: 'inherit', expectedValue: undefined}, ]; const matchedStyles = await createMatchedStyles( {matchedPayload: [ruleMatch('div', properties)], inheritedPayload, cssPropertyRegistrations}, node); checkResolution(matchedStyles, properties); }); it('correctly resolves the keyword `initial`', async () => { const properties = [ // Value is undefined {name: 'background-color', value: 'initial', expectedValue: undefined}, // Property inherits, Value is inherited {name: 'color', value: 'initial', expectedValue: undefined}, // Property inherits, Value is not inherited {name: 'font-size', value: 'initial', expectedValue: undefined}, // Property doesn't inherit {name: 'border', value: 'initial', expectedValue: undefined}, // Value is not inherited {name: 'margin', value: 'initial', expectedValue: undefined}, // Property inherits, Value is inherited {name: '--inherited-is-inherited', value: 'initial', expectedValue: 'inherited-is-inherited-initial'}, // Property inherits, Value is not inherited {name: '--inherited-is-not-inherited', value: 'initial', expectedValue: 'inherited-is-not-inherited-initial'}, // Value is not inherited {name: '--non-inherited-is-inherited', value: 'initial', expectedValue: 'non-inherited-is-inherited-initial'}, // Value is not inherited { name: '--non-inherited-is-not-inherited', value: 'initial', expectedValue: 'non-inherited-is-not-inherited-initial', }, // Value is inherited {name: '--unregistered-is-inherited', value: 'initial', expectedValue: undefined}, // Value is undefined {name: '--unregistered-is-not-inherited', value: 'initial', expectedValue: undefined}, ]; const matchedStyles = await createMatchedStyles( {matchedPayload: [ruleMatch('div', properties)], inheritedPayload, cssPropertyRegistrations}, node); checkResolution(matchedStyles, properties); }); it('correctly resolves the keyword `revert`', async () => { const properties = [ // authored -> user {name: 'font-variant', value: 'revert', expectedValue: 'user-font-variant'}, // authored -> user -> ua {name: 'font-size', value: 'revert', expectedValue: 'ua-font-size'}, // authored -> ua {name: 'font-weight', value: 'revert', expectedValue: 'ua-font-weight'}, // authored -> user -> ua -> void {name: 'font-family', value: 'revert', expectedValue: undefined}, // authored -> inherited {name: 'color', value: 'revert', expectedValue: 'color-inherited'}, {name: '--inherited-is-inherited', value: 'revert', expectedValue: 'inherited-is-inherited'}, // authored -> initial {name: '--inherited-is-not-inherited', value: 'revert', expectedValue: 'inherited-is-not-inherited-initial'}, {name: '--non-inherited-is-inherited', value: 'revert', expectedValue: 'non-inherited-is-inherited-initial'}, { name: '--non-inherited-is-not-inherited', value: 'revert', expectedValue: 'non-inherited-is-not-inherited-initial', }, ]; const userRule = ruleMatch('div', [ {name: 'font-variant', value: 'user-font-variant'}, {name: 'font-size', value: 'revert'}, {name: 'font-family', value: 'revert'}, ]); userRule.rule.origin = Protocol.CSS.StyleSheetOrigin.Injected; const uaRule = ruleMatch('div', [ {name: 'font-variant', value: 'ua-font-variant'}, {name: 'font-size', value: 'ua-font-size'}, {name: 'font-weight', value: 'ua-font-weight'}, {name: 'font-family', value: 'revert'}, ]); uaRule.rule.origin = Protocol.CSS.StyleSheetOrigin.UserAgent; const matchedStyles = await createMatchedStyles( { matchedPayload: [uaRule, userRule, ruleMatch('div', properties)], inheritedPayload, cssPropertyRegistrations, }, node); checkResolution(matchedStyles, properties); }); it('correctly resolves the keyword `revert-layer`', async () => { const inlinePayload = ruleMatch('', [{name: '--element-attached', value: 'revert-layer'}]).rule.style; const properties = [ {name: '--element-attached', value: 'author-origin', expectedValue: 'author-origin'}, {name: 'font-family', value: 'revert-layer', expectedValue: 'next-layer'}, {name: 'font-weight', value: 'revert-layer', expectedValue: 'one-more-layer'}, // Value is undefined {name: 'background-color', value: 'revert-layer', expectedValue: undefined}, // Property inherits, Value is inherited {name: 'color', value: 'revert-layer', expectedValue: 'color-inherited'}, // Property inherits, Value is not inherited {name: 'font-size', value: 'revert-layer', expectedValue: undefined}, // Property doesn't inherit {name: 'border', value: 'revert-layer', expectedValue: undefined}, // Value is not inherited {name: 'margin', value: 'revert-layer', expectedValue: undefined}, // Property inherits, Value is inherited {name: '--inherited-is-inherited', value: 'revert-layer', expectedValue: 'inherited-is-inherited'}, // Property inherits, Value is not inherited { name: '--inherited-is-not-inherited', value: 'revert-layer', expectedValue: 'inherited-is-not-inherited-initial', }, // Value is not inherited { name: '--non-inherited-is-inherited', value: 'revert-layer', expectedValue: 'non-inherited-is-inherited-initial', }, // Value is not inherited { name: '--non-inherited-is-not-inherited', value: 'revert-layer', expectedValue: 'non-inherited-is-not-inherited-initial', }, // Value is inherited {name: '--unregistered-is-inherited', value: 'revert-layer', expectedValue: 'unregistered-is-inherited'}, // Value is undefined {name: '--unregistered-is-not-inherited', value: 'revert-layer', expectedValue: undefined}, ]; const mainRule = ruleMatch('div', properties); mainRule.rule.layers = [{text: 'layer1'}]; const sameLayer = ruleMatch('div', [{name: 'font-family', value: 'same-layer'}]); sameLayer.rule.layers = mainRule.rule.layers; const nextLayer = ruleMatch('div', [{name: 'font-family', value: 'next-layer'}]); nextLayer.rule.layers = [{text: 'layer2'}]; const oneMoreLayer = ruleMatch('div', [{name: 'font-weight', value: 'one-more-layer'}]); oneMoreLayer.rule.layers = [{text: 'outer'}, {text: 'layer3'}]; const uaRule = ruleMatch('div', [{name: 'font-variant', value: 'ua-font-variant'}]); uaRule.rule.origin = Protocol.CSS.StyleSheetOrigin.UserAgent; const matchedStyles = await createMatchedStyles( { inlinePayload, matchedPayload: [uaRule, oneMoreLayer, nextLayer, sameLayer, mainRule], inheritedPayload, cssPropertyRegistrations, }, node); checkResolution(matchedStyles, properties); // Check for inline style const inlineProperty = matchedStyles.nodeStyles() .find(style => style.type === SDK.CSSStyleDeclaration.Type.Inline) ?.allProperties() ?.find(property => property.name === '--element-attached'); assert.isOk(inlineProperty); const resolved = matchedStyles.resolveGlobalKeyword(inlineProperty, SDK.CSSMetadata.CSSWideKeyword.REVERT_LAYER); assert.strictEqual(resolved?.value, 'author-origin'); }); }); }); describeWithMockConnection('NodeCascade', () => { it('correctly marks custom properties as Overloaded if they are registered as inherits: false', async () => { const target = createTarget(); const cssModel = new SDK.CSSModel.CSSModel(target); const parentNode = sinon.createStubInstance(SDK.DOMModel.DOMNode); parentNode.id = 0 as Protocol.DOM.NodeId; const node = sinon.createStubInstance(SDK.DOMModel.DOMNode); node.parentNode = parentNode; node.id = 1 as Protocol.DOM.NodeId; const inheritablePropertyPayload: Protocol.CSS.CSSProperty = {name: '--inheritable', value: 'green'}; const nonInheritablePropertyPayload: Protocol.CSS.CSSProperty = {name: '--non-inheritable', value: 'green'}; const matchedCSSRules: Protocol.CSS.RuleMatch[] = [{ matchingSelectors: [0], rule: { selectorList: {selectors: [{text: 'div'}], text: 'div'}, origin: Protocol.CSS.StyleSheetOrigin.Regular, style: { cssProperties: [inheritablePropertyPayload, nonInheritablePropertyPayload], shorthandEntries: [], }, }, }]; const cssPropertyRegistrations = [ { propertyName: inheritablePropertyPayload.name, initialValue: {text: 'blue'}, inherits: true, syntax: '', }, { propertyName: nonInheritablePropertyPayload.name, initialValue: {text: 'red'}, inherits: false, syntax: '', }, ]; const matchedStyles = await createMatchedStyles({ cssModel, node, matchedPayload: [ ruleMatch('div', []), ], inheritedPayload: [{matchedCSSRules}], cssPropertyRegistrations, }); const style = matchedStyles.nodeStyles()[1]; const [inheritableProperty, nonInheritableProperty] = style.allProperties(); assert.strictEqual( matchedStyles.propertyState(nonInheritableProperty), SDK.CSSMatchedStyles.PropertyState.OVERLOADED); assert.strictEqual(matchedStyles.propertyState(inheritableProperty), SDK.CSSMatchedStyles.PropertyState.ACTIVE); }); it('correctly computes active properties for nested at-rules', async () => { const outerRule = ruleMatch('a', [{name: 'color', value: 'var(--inner)'}]); const nestedRule = ruleMatch('&', [{name: '--inner', value: 'red'}]); nestedRule.rule.nestingSelectors = ['a']; nestedRule.rule.selectorList = {selectors: [], text: '&'}; nestedRule.rule.supports = [{ text: '(--var:s)', active: true, styleSheetId: nestedRule.rule.styleSheetId, }]; const matchedStyles = await createMatchedStyles({ matchedPayload: [outerRule, nestedRule], }); assert.deepEqual(matchedStyles.availableCSSVariables(matchedStyles.nodeStyles()[0]), ['--inner']); }); });