// Copyright 2023 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import {assert} from 'chai'; import { ELEMENTS_PANEL_SELECTOR, getStyleRule, goToResourceAndWaitForStyleSection, SECTION_SUBTITLE_SELECTOR, STYLE_PROPERTIES_SELECTOR, } from '../helpers/elements-helpers.js'; import type {DevToolsPage} from '../shared/frontend-helper.js'; async function getStyleRuleProperties(selector: string, count: number, devToolsPage: DevToolsPage) { const rule = await getStyleRule(selector, devToolsPage); const propertyElements = await devToolsPage.waitForMany(STYLE_PROPERTIES_SELECTOR, count, rule); const properties = await Promise.all(propertyElements.map(e => e.evaluate(e => e.textContent))); properties.sort(); const subtitle = await (await devToolsPage.waitFor(SECTION_SUBTITLE_SELECTOR, rule)).evaluate(e => e.textContent); return {properties, subtitle}; } describe('The styles pane', () => { it('shows syntax mismatches as invalid properties', async ({devToolsPage, inspectedPage}) => { await goToResourceAndWaitForStyleSection('elements/at-property.html', devToolsPage, inspectedPage); await devToolsPage.waitFor('.invalid-property-value:has(> [aria-label="CSS property name: --my-color"])'); }); it('shows a parser error message popover on syntax mismatches', async ({devToolsPage, inspectedPage}) => { await goToResourceAndWaitForStyleSection('elements/at-property.html', devToolsPage, inspectedPage); await devToolsPage.hover( '.invalid-property-value:has(> [aria-label="CSS property name: --my-color"]) .exclamation-mark'); const popover = await devToolsPage.waitFor(':popover-open devtools-css-variable-parser-error'); const firstSection = await devToolsPage.waitFor('.variable-value-popup-wrapper', popover); const popoverContents = await firstSection.evaluate(e => e.deepInnerText()); assert.deepEqual(popoverContents, 'Invalid property value, expected type ""\nView registered property'); }); it('shows registered properties', async ({devToolsPage, inspectedPage}) => { await goToResourceAndWaitForStyleSection('elements/at-property.html', devToolsPage, inspectedPage); assert.deepEqual(await getStyleRuleProperties('--my-color', 3, devToolsPage), { properties: [' inherits: false;', ' initial-value: red;', ' syntax: "";'], subtitle: '