chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/panels/elements/CSSRuleValidator.test.ts

@@ -1,482 +0,0 @@
-// 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 SDK from '../../core/sdk/sdk.js';
-import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
-
-import * as Elements from './elements.js';
-
-describeWithEnvironment('CSSRuleValidator', () => {
-  const tests = [
-    {
-      description:
-          'Reports a rule violation when element align-content is set on flex container whose flex-wrap property\'s value is nowrap',
-      computedStyles: new Map<string, string>([
-        ['display', 'inline-flex'],
-        ['flex-wrap', 'nowrap'],
-        ['align-content', 'center'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.AlignContentValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Passes the validation if flex-wrap is set to nowrap, but the element is not a flex container',
-      computedStyles: new Map<string, string>([
-        ['display', 'block'],
-        ['flex-wrap', 'nowrap'],
-        ['align-content', 'center'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.AlignContentValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Test `align-content`, validation passes when the element is a grid container',
-      computedStyles: new Map<string, string>([
-        ['align-content', 'center'],
-        ['display', 'grid'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.AlignContentValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Test `align-content`, validation passes when the element is a block container',
-      computedStyles: new Map<string, string>([
-        ['align-content', 'center'],
-        ['display', 'block'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.AlignContentValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Test `align-content`, validation passes when the element is a masonry container',
-      computedStyles: new Map<string, string>([
-        ['align-content', 'center'],
-        ['display', 'masonry'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.AlignContentValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Test `align-content`, validation does not pass when the element is a math container',
-      computedStyles: new Map<string, string>([
-        ['align-content', 'center'],
-        ['display', 'block math'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.AlignContentValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Test `justify-content`, validation passes when the element is flex containers',
-      computedStyles: new Map<string, string>([
-        ['display', 'flex'],
-        ['justify-content', 'flex-end'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexGridValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Test `justify-content`, validation passes when the element is grid containers',
-      computedStyles: new Map<string, string>([
-        ['display', 'grid'],
-        ['justify-content', 'center'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexGridValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Test `justify-content`, validation passes when the element is masonry containers',
-      computedStyles: new Map<string, string>([
-        ['display', 'masonry'],
-        ['justify-content', 'center'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexGridValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Test `place-content`, validation passes when the element is grid containers',
-      computedStyles: new Map<string, string>([
-        ['display', 'grid'],
-        ['place-content', 'center'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexGridValidator(),
-      hintExpected: false,
-    },
-    {
-      description:
-          'Test `align-items`, validation does not pass when the element is not flex containers or grid containers',
-      computedStyles: new Map<string, string>([
-        ['align-items', 'center'],
-        ['display', 'block'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexGridValidator(),
-      hintExpected: true,
-    },
-    {
-      description:
-          'Test `place-content`, validation does not pass when the element is not flex containers or grid containers',
-      computedStyles: new Map<string, string>([
-        ['display', 'block'],
-        ['place-content', 'center'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexGridValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Reports a rule validation when flex properties are set to non-flex items',
-      computedStyles: new Map<string, string>([
-        ['flex', '1'],
-      ]),
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'table'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexItemValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Passes the validation when flex properties are set to flex items',
-      computedStyles: new Map<string, string>([
-        ['flex', '1'],
-      ]),
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'flex'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexItemValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Passes the validation when flex container properties are set to flex container',
-      computedStyles: new Map<string, string>([
-        ['display', 'flex'],
-        ['flex-direction', 'column'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.FlexContainerValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Reports a rule validation when flex container properties are set to non-flex container',
-      computedStyles: new Map<string, string>([
-        ['display', 'block'],
-        ['flex-direction', 'column'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.FlexContainerValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Passes the validation when grid container properties are set to grid container',
-      computedStyles: new Map<string, string>([
-        ['display', 'grid'],
-        ['grid', '100px / 200px'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.GridContainerValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Passes the validation when grid container properties are set to masonry container',
-      computedStyles: new Map<string, string>([
-        ['display', 'masonry'],
-        ['grid-template-columns', 'repeat(3, 10px 15%)'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.GridContainerValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Reports a rule validation when grid container properties are set to non-grid container',
-      computedStyles: new Map<string, string>([
-        ['display', 'flex'],
-        ['grid', '100px / 200px'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.GridContainerValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Passes the validation when grid item properties are set to grid items',
-      computedStyles: new Map<string, string>([
-        ['grid-area', 'auto / auto / auto / auto'],
-      ]),
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'grid'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.GridItemValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Passes the validation when grid item properties are set to masonry items',
-      computedStyles: new Map<string, string>([
-        ['grid-row', 'span 2'],
-      ]),
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'masonry'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.GridItemValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Reports a rule validation when grid item properties are set to non-grid items',
-      computedStyles: new Map<string, string>([
-        ['grid-area', 'auto / auto / auto / auto'],
-      ]),
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'flex'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.GridItemValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Reports a rule validation when flex or grid item properties are set to non-flex or non-grid items',
-      computedStyles: new Map<string, string>([
-        ['align-self', 'baseline'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.FlexOrGridItemValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Passes the validation when flex or grid item properties are set to flex or grid items',
-      computedStyles: new Map<string, string>([
-        ['align-self', 'baseline'],
-      ]),
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'flex'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexOrGridItemValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Passes the validation when flex or grid item properties are set to grid items',
-      computedStyles: new Map<string, string>([
-        ['align-self', 'baseline'],
-      ]),
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'grid'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexOrGridItemValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Passes the validation when padding is not set to table elements',
-      computedStyles: new Map<string, string>([
-        ['display', 'block'],
-        ['padding', '15px'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.PaddingValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Reports a rule validation when padding is set to table elements',
-      computedStyles: new Map<string, string>([
-        ['display', 'table-row'],
-        ['padding', '15px'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.PaddingValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Passes the validation when top is set to non-static positioned element',
-      computedStyles: new Map<string, string>([
-        ['position', 'absolute'],
-        ['top', '20px'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.PositionValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Reports a rule validation when top is set to static positioned elements',
-      computedStyles: new Map<string, string>([
-        ['position', 'static'],
-        ['top', '20px'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.PositionValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Passes the validation when z-index is set to non-static positioned element',
-      computedStyles: new Map<string, string>([
-        ['position', 'absolute'],
-        ['z-index', '5'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.ZIndexValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Reports a rule validation when z-index is set to static positioned elements',
-      computedStyles: new Map<string, string>([
-        ['position', 'static'],
-        ['z-index', '5'],
-      ]),
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.ZIndexValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Validates width on an inline element',
-      computedStyles: new Map<string, string>([
-        ['display', 'inline'],
-        ['width', '100px'],
-      ]),
-      nodeName: 'span',
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.SizingValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Validates height on an inline element',
-      computedStyles: new Map<string, string>([
-        ['display', 'inline'],
-        ['height', '100px'],
-      ]),
-      nodeName: 'span',
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.SizingValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Does not validate width on an inline element that could be replaced',
-      computedStyles: new Map<string, string>([
-        ['display', 'inline'],
-        ['width', '100px'],
-      ]),
-      nodeName: 'input',
-      parentsComputedStyles: new Map<string, string>(),
-      validator: () => new Elements.CSSRuleValidator.SizingValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Shows a hint the order property on non-flex/grid items',
-      computedStyles: new Map<string, string>([
-        ['order', '1'],
-      ]),
-      nodeName: 'input',
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'block'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexOrGridItemValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Does not show a hint for the order property on a flex item',
-      computedStyles: new Map<string, string>([
-        ['order', '1'],
-      ]),
-      nodeName: 'input',
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'flex'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexOrGridItemValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Does not show a hint for the order property on a grid item',
-      computedStyles: new Map<string, string>([
-        ['order', '1'],
-      ]),
-      nodeName: 'input',
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'grid'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.FlexOrGridItemValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Does not show a hint for a flex item without a parent',
-      computedStyles: new Map<string, string>([
-        ['flex', 'none'],
-      ]),
-      nodeName: 'input',
-      parentsComputedStyles: undefined,
-      validator: () => new Elements.CSSRuleValidator.FlexItemValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Does not show a hint for a grid item with a z-index',
-      computedStyles: new Map<string, string>([
-        ['z-index', '1'],
-      ]),
-      nodeName: 'div',
-      parentsComputedStyles: new Map<string, string>([
-        ['display', 'grid'],
-      ]),
-      validator: () => new Elements.CSSRuleValidator.ZIndexValidator(),
-      hintExpected: false,
-    },
-    {
-      description: 'Reports a hint for invalid font variation settings',
-      computedStyles: new Map<string, string>([
-        ['font-variation-settings', '"wght" 251, "wdth" 59'],
-        ['font-family', 'Family'],
-      ]),
-      fontFaces: [new SDK.CSSFontFace.CSSFontFace({
-        fontFamily: 'Family',
-        fontStyle: 'string',
-        fontVariant: 'string',
-        fontWeight: 'string',
-        fontStretch: 'string',
-        fontDisplay: 'string',
-        unicodeRange: 'string',
-        src: 'string',
-        platformFontFamily: 'Family',
-        fontVariationAxes: [{
-          tag: 'wght',
-          name: 'Weight',
-          minValue: 10,
-          maxValue: 20,
-          defaultValue: 15,
-        }],
-      })],
-      nodeName: 'div',
-      validator: () => new Elements.CSSRuleValidator.FontVariationSettingsValidator(),
-      hintExpected: true,
-    },
-    {
-      description: 'Does not report a hint for valid font variation settings',
-      computedStyles: new Map<string, string>([
-        ['font-variation-settings', '"wght" 15, "wdth" 59'],
-        ['font-family', 'Family'],
-      ]),
-      fontFaces: [new SDK.CSSFontFace.CSSFontFace({
-        fontFamily: 'Family',
-        fontStyle: 'string',
-        fontVariant: 'string',
-        fontWeight: 'string',
-        fontStretch: 'string',
-        fontDisplay: 'string',
-        unicodeRange: 'string',
-        src: 'string',
-        platformFontFamily: 'Family',
-        fontVariationAxes: [{
-          tag: 'wght',
-          name: 'Weight',
-          minValue: 10,
-          maxValue: 20,
-          defaultValue: 15,
-        }],
-      })],
-      nodeName: 'div',
-      validator: () => new Elements.CSSRuleValidator.FontVariationSettingsValidator(),
-      hintExpected: false,
-    },
-  ];
-
-  for (const test of tests) {
-    it(test.description, () => {
-      const actualResult = test.validator().getHint(
-          test.validator().getApplicableProperties()[0], test.computedStyles, test.parentsComputedStyles, test.nodeName,
-          test.fontFaces);
-      if (test.hintExpected) {
-        assert.exists(actualResult);
-      } else {
-        assert.isUndefined(actualResult);
-      }
-    });
-  }
-});

package/front_end/panels/elements/CSSValueTraceView.test.ts

@@ -1,215 +0,0 @@
-// Copyright 2025 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 SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
-import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
-import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
-import {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
-import {getMatchedStylesWithBlankRule} from '../../testing/StyleHelpers.js';
-import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import * as Elements from './elements.js';
-
-async function setUpStyles() {
-  stubNoopSettings();
-  setMockConnectionResponseHandler('CSS.enable', () => ({}));
-  setMockConnectionResponseHandler('CSS.getEnvironmentVariables', () => ({}));
-  const computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
-  const cssModel = new SDK.CSSModel.CSSModel(createTarget());
-  await cssModel.resumeModel();
-  const domModel = cssModel.domModel();
-  const node = new SDK.DOMModel.DOMNode(domModel);
-  node.id = 0 as Protocol.DOM.NodeId;
-  UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
-  const matchedStyles = await getMatchedStylesWithBlankRule({cssModel});
-  const stylesPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
-
-  return {matchedStyles, stylesPane};
-}
-
-async function getTreeElement(
-    matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, stylesPane: Elements.StylesSidebarPane.StylesSidebarPane,
-    name: string, value: string, variables?: Record<string, {value: string, computedValue?: string}>) {
-  const property = new SDK.CSSProperty.CSSProperty(
-      matchedStyles.nodeStyles()[0], matchedStyles.nodeStyles()[0].pastLastSourcePropertyIndex(), name, value, true,
-      false, true, false, '', undefined, []);
-  const treeElement = new Elements.StylePropertyTreeElement.StylePropertyTreeElement({
-    stylesPane,
-    section: sinon.createStubInstance(Elements.StylePropertiesSection.StylePropertiesSection),
-    matchedStyles,
-    property,
-    isShorthand: false,
-    inherited: false,
-    overloaded: false,
-    newProperty: true,
-  });
-
-  if (variables) {
-    const varMap =
-        new Map(Object.getOwnPropertyNames(variables)
-                    .map(
-                        name => new SDK.CSSProperty.CSSProperty(
-                            matchedStyles.nodeStyles()[0], matchedStyles.nodeStyles()[0].pastLastSourcePropertyIndex(),
-                            name, variables[name].value, true, false, true, false, '', undefined, []))
-                    .map(property => [property.name, {
-                           value: variables[property.name].computedValue ?? variables[property.name].value,
-                           declaration: new SDK.CSSMatchedStyles.CSSValueSource(property),
-                         }]));
-    sinon.stub(matchedStyles, 'computeCSSVariable').callsFake((_, name) => varMap.get(name) ?? null);
-  }
-
-  return {matchedStyles, property, treeElement};
-}
-
-async function showTrace(
-    property: SDK.CSSProperty.CSSProperty, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-    treeElement: Elements.StylePropertyTreeElement.StylePropertyTreeElement):
-    Promise<Elements.CSSValueTraceView.ViewInput> {
-  const viewFunction = createViewFunctionStub(Elements.CSSValueTraceView.CSSValueTraceView);
-  const view = new Elements.CSSValueTraceView.CSSValueTraceView(undefined, viewFunction);
-  await viewFunction.nextInput;
-  void view.showTrace(
-      property, null, matchedStyles, new Map(),
-      Elements.StylePropertyTreeElement.getPropertyRenderers(
-          property.name, property.ownerStyle, treeElement.parentPane(), matchedStyles, treeElement,
-          treeElement.getComputedStyles() ?? new Map()),
-      false, 0, false);
-  return await viewFunction.nextInput;
-}
-
-function getLineText(line: Node[][]) {
-  for (const node of line.flat()) {
-    if (node instanceof HTMLElement) {
-      renderElementIntoDOM(node, {allowMultipleChildren: true});
-    }
-  }
-  const text = line.map(
-      nodes => nodes
-                   .map(
-                       node =>
-                           (node instanceof HTMLElement ? node.innerText :
-                                                          (node.nodeType === Node.TEXT_NODE ? node.textContent : '')))
-                   .join());
-  for (const node of line.flat()) {
-    if (node instanceof HTMLElement) {
-      node.remove();
-    }
-  }
-  return text;
-}
-
-describeWithMockConnection('CSSValueTraceView', () => {
-  beforeEach(() => {
-    setMockConnectionResponseHandler('CSS.resolveValues', ({values}) => {
-      const results = values.map((v: string) => {
-        if (v.endsWith('em')) {
-          return `${Number(v.substring(0, v.length - 2)) * 16}px`;
-        }
-        if (v.endsWith('vw')) {
-          return `${Number(v.substring(0, v.length - 2)) * 980 / 100}px`;
-        }
-        switch (v) {
-          case 'calc(clamp(16px, calc(1vw + 1em), 24px) + 3.2px)':
-            return '27.7px';
-          case 'clamp(16px, calc(1vw + 1em), 24px)':
-            return '24px';
-          case 'calc(1vw + 1em)':
-            return '24.53px';
-          case 'calc(1px + 1px)':
-            return '2px';
-        }
-        return v;
-      });
-      return {results};
-    });
-  });
-
-  it('shows simple values', async () => {
-    const {matchedStyles, stylesPane} = await setUpStyles();
-    for (const value of ['40', '40px', 'red']) {
-      const {property, treeElement} = await getTreeElement(matchedStyles, stylesPane, 'property', value);
-
-      const input = await showTrace(property, matchedStyles, treeElement);
-
-      const substitutions = getLineText(input.substitutions);
-      const evaluations = getLineText(input.evaluations);
-      assert.deepEqual(substitutions, []);
-      assert.deepEqual(evaluations, [value]);
-    }
-  });
-
-  it('applies substitutions', async () => {
-    const {matchedStyles, stylesPane} = await setUpStyles();
-    const {property, treeElement} =
-        await getTreeElement(matchedStyles, stylesPane, 'width', 'var(--w)', {'--w': {value: '40px'}});
-    const input = await showTrace(property, matchedStyles, treeElement);
-    const substitutions = getLineText(input.substitutions);
-    const evaluations = getLineText(input.evaluations);
-    assert.deepEqual(substitutions, ['40px']);
-    assert.deepEqual(evaluations, []);
-  });
-
-  it('substitutes the variable declaration if the variable is found (with fallback)', async () => {
-    const {matchedStyles, stylesPane} = await setUpStyles();
-    const {property, treeElement} =
-        await getTreeElement(matchedStyles, stylesPane, 'width', 'var(--w, 10px)', {'--w': {value: '40px'}});
-    const input = await showTrace(property, matchedStyles, treeElement);
-    const substitutions = getLineText(input.substitutions);
-    const evaluations = getLineText(input.evaluations);
-    assert.deepEqual(substitutions, ['40px']);
-    assert.deepEqual(evaluations, []);
-  });
-
-  it('substitutes the fallback if the variable is found', async () => {
-    const {matchedStyles, stylesPane} = await setUpStyles();
-    const {property, treeElement} = await getTreeElement(matchedStyles, stylesPane, 'width', 'var(--w, 10px)');
-    const input = await showTrace(property, matchedStyles, treeElement);
-    const substitutions = getLineText(input.substitutions);
-    const evaluations = getLineText(input.evaluations);
-    assert.deepEqual(substitutions, ['10px']);
-    assert.deepEqual(evaluations, []);
-  });
-
-  it('shows chains of substitutions', async () => {
-    const {matchedStyles, stylesPane} = await setUpStyles();
-    const {property, treeElement} = await getTreeElement(
-        matchedStyles, stylesPane, 'width', 'var(--v)', {'--w': {value: '40px'}, '--v': {value: 'var(--w)'}});
-    const input = await showTrace(property, matchedStyles, treeElement);
-    const substitutions = getLineText(input.substitutions);
-    const evaluations = getLineText(input.evaluations);
-    assert.deepEqual(substitutions, ['var(--w)', '40px']);
-    assert.deepEqual(evaluations, []);
-  });
-
-  it('shows intermediate evaluation steps', async () => {
-    const {matchedStyles, stylesPane} = await setUpStyles();
-    const {property, treeElement} = await getTreeElement(
-        matchedStyles, stylesPane, 'font-size', 'calc(clamp(16px, calc(1vw + 1em), 24px) + 3.2px)');
-    const resolveValuesSpy = sinon.spy(treeElement.parentPane().cssModel()!.resolveValues);
-    const input = await showTrace(property, matchedStyles, treeElement);
-    const substitutions = getLineText(input.substitutions);
-    const evaluations = getLineText(input.evaluations);
-    await Promise.all(resolveValuesSpy.returnValues);
-    assert.deepEqual(substitutions, []);
-    assert.deepEqual(evaluations, [
-      'calc(clamp(16px, calc(9.8px + 16px), 24px) + 3.2px)',
-      'calc(clamp(16px, 24.53px, 24px) + 3.2px)',
-      'calc(24px + 3.2px)',
-      '27.7px',
-    ]);
-  });
-
-  it('hides trace lines that contained no successful evaluations', async () => {
-    const {matchedStyles, stylesPane} = await setUpStyles();
-    const {property, treeElement} =
-        await getTreeElement(matchedStyles, stylesPane, '--a', 'calc(100% - calc(50% + calc(1px + 1px)))');
-    const input = await showTrace(property, matchedStyles, treeElement);
-    const substitutions = getLineText(input.substitutions);
-    const evaluations = getLineText(input.evaluations);
-    assert.deepEqual(substitutions, []);
-    assert.deepEqual(evaluations, ['calc(100% - calc(50% + 2px))']);
-  });
-});