"use strict";
// Copyright 2020 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
Object.defineProperty(exports, "__esModule", { value: true });
const chai_1 = require("chai");
const elements_helpers_js_1 = require("../helpers/elements-helpers.js");
describe('The Computed pane', function () {
    async function openComputedPane(devToolsPage, inspectedPage) {
        await inspectedPage.goToResource('elements/simple-styled-page.html');
        await (0, elements_helpers_js_1.navigateToSidePane)('Computed', devToolsPage);
        await (0, elements_helpers_js_1.waitForElementsComputedSection)(devToolsPage);
        // Note that navigating to the computed pane moved focus away from the
        // elements pane. Restore it.
        await (0, elements_helpers_js_1.focusElementsTree)(devToolsPage);
    }
    it('can display the CSS properties of the selected element', async ({ devToolsPage, inspectedPage }) => {
        await openComputedPane(devToolsPage, inspectedPage);
        // Select the H1 element and wait for the computed pane to change.
        let content = await (0, elements_helpers_js_1.getContentOfComputedPane)(devToolsPage);
        await devToolsPage.pressKey('ArrowDown');
        await (0, elements_helpers_js_1.waitForComputedPaneChange)(content, devToolsPage);
        await (0, elements_helpers_js_1.waitForElementsComputedSection)(devToolsPage);
        const h1Properties = await (0, elements_helpers_js_1.getAllPropertiesFromComputedPane)(devToolsPage);
        chai_1.assert.lengthOf(h1Properties, 11, 'There should be 11 computed properties on the H1 element');
        const colorProperty = h1Properties.find(property => property?.name === 'color');
        chai_1.assert.exists(colorProperty, 'H1 element should have a color computed property');
        chai_1.assert.deepEqual(colorProperty, {
            name: 'color',
            value: 'rgb(255, 0, 102)',
        });
        // Select the H2 element by pressing down again.
        content = await (0, elements_helpers_js_1.getContentOfComputedPane)(devToolsPage);
        await devToolsPage.pressKey('ArrowDown');
        await (0, elements_helpers_js_1.waitForComputedPaneChange)(content, devToolsPage);
        await (0, elements_helpers_js_1.waitForElementsComputedSection)(devToolsPage);
        const h2Properties = await (0, elements_helpers_js_1.getAllPropertiesFromComputedPane)(devToolsPage);
        chai_1.assert.lengthOf(h2Properties, 12, 'There should be 12 computed properties on the H2 element');
        const backgroundProperty = h2Properties.find(property => property?.name === 'background-color');
        chai_1.assert.exists(backgroundProperty, 'H2 element should have a background-color computed property');
        chai_1.assert.deepEqual(backgroundProperty, {
            name: 'background-color',
            value: 'rgb(255, 215, 0)',
        });
    });
    it('can display inherited CSS properties of the selected element', async ({ devToolsPage, inspectedPage }) => {
        await openComputedPane(devToolsPage, inspectedPage);
        // Select the H1 element and wait for the computed pane to change.
        const content = await (0, elements_helpers_js_1.getContentOfComputedPane)(devToolsPage);
        await devToolsPage.pressKey('ArrowDown');
        await (0, elements_helpers_js_1.waitForComputedPaneChange)(content, devToolsPage);
        await (0, elements_helpers_js_1.toggleShowAllComputedProperties)(devToolsPage);
        await (0, elements_helpers_js_1.waitForElementsComputedSection)(devToolsPage);
        const getAlignContentProperty = async () => {
            const allH1Properties = await (0, elements_helpers_js_1.getAllPropertiesFromComputedPane)(devToolsPage);
            const prop = allH1Properties.find(property => property?.name === 'align-content');
            return prop;
        };
        const alignContentProperty = await devToolsPage.waitForFunction(getAlignContentProperty);
        chai_1.assert.exists(alignContentProperty, 'H1 element should display the inherited align-content computed property');
        chai_1.assert.deepEqual(alignContentProperty, {
            name: 'align-content',
            value: 'normal',
        });
    });
    it('remembers which properties that are expanded when re-rendering', async ({ devToolsPage, inspectedPage }) => {
        await openComputedPane(devToolsPage, inspectedPage);
        await devToolsPage.pressKey('ArrowDown');
        const colorProperty = await devToolsPage.waitFor('CSS property name: color CSS property value: rgb(255, 0, 102)', undefined, undefined, 'aria');
        await devToolsPage.click('.arrow-icon', {
            root: colorProperty,
        });
        const isExpandedBefore = await colorProperty.evaluate(element => element.ariaExpanded);
        (0, chai_1.assert)(isExpandedBefore);
        await (0, elements_helpers_js_1.focusElementsTree)(devToolsPage);
        await devToolsPage.pressKey('ArrowDown');
        const colorPropertyAfter = await devToolsPage.waitFor('CSS property name: color CSS property value: rgb(0, 0, 0)', undefined, undefined, 'aria');
        const isExpandedAfter = await colorPropertyAfter.evaluate(element => element.ariaExpanded);
        (0, chai_1.assert)(isExpandedAfter);
    });
    it('allows tracing to style rules (ported layout test)', async ({ devToolsPage, inspectedPage }) => {
        await openComputedPane(devToolsPage, inspectedPage);
        await inspectedPage.goToResource('elements/css-styles-variables.html');
        await (0, elements_helpers_js_1.waitForNumberOfComputedProperties)(7, devToolsPage);
        await (0, elements_helpers_js_1.toggleShowAllComputedProperties)(devToolsPage);
        await (0, elements_helpers_js_1.filterComputedProperties)('--', devToolsPage);
        await (0, elements_helpers_js_1.waitForNumberOfComputedProperties)(1, devToolsPage);
        await (0, elements_helpers_js_1.focusElementsTree)(devToolsPage);
        await devToolsPage.pressKey('ArrowRight');
        await devToolsPage.pressKey('ArrowRight');
        await (0, elements_helpers_js_1.waitForPartialContentOfSelectedElementsNode)('"id1"', devToolsPage);
        await (0, elements_helpers_js_1.waitForNumberOfComputedProperties)(2, devToolsPage);
        const computedPane = await (0, elements_helpers_js_1.getComputedPanel)(devToolsPage);
        await computedPane.$$eval('pierce/.arrow-icon', elements => elements.map(element => element.click()));
        const expectedPropId1 = [
            {
                name: '--a',
                value: 'red',
                trace: [{
                        value: 'red',
                        selector: 'body',
                        link: 'css-styles-variables.html:8',
                    }],
            },
            {
                name: '--b',
                value: '44px',
                trace: [{
                        value: '44px',
                        selector: '#id1',
                        link: 'css-styles-variables.html:12',
                    }],
            },
        ];
        await devToolsPage.waitForFunction(async () => JSON.stringify(await (0, elements_helpers_js_1.getComputedStyleProperties)(devToolsPage)) === JSON.stringify(expectedPropId1));
        await devToolsPage.pressKey('ArrowRight');
        await devToolsPage.pressKey('ArrowRight');
        await (0, elements_helpers_js_1.waitForPartialContentOfSelectedElementsNode)('"id2"', devToolsPage);
        const expectedPropId2 = [
            {
                name: '--a',
                value: 'green',
                trace: [
                    {
                        value: 'green',
                        selector: '#id2',
                        link: 'css-styles-variables.html:16',
                    },
                    {
                        value: 'red',
                        selector: 'body',
                        link: 'css-styles-variables.html:8',
                    },
                ],
            },
            {
                name: '--b',
                value: '44px',
                trace: [{
                        value: '44px',
                        selector: '#id1',
                        link: 'css-styles-variables.html:12',
                    }],
            },
        ];
        await devToolsPage.waitForFunction(async () => JSON.stringify(await (0, elements_helpers_js_1.getComputedStyleProperties)(devToolsPage)) === JSON.stringify(expectedPropId2));
        await devToolsPage.pressKey('ArrowRight');
        await devToolsPage.pressKey('ArrowRight');
        await (0, elements_helpers_js_1.waitForPartialContentOfSelectedElementsNode)('"id3"', devToolsPage);
        const expectedPropId3 = [
            {
                name: '--a',
                value: 'green',
                trace: [
                    {
                        value: 'inherit',
                        selector: '#id3',
                        link: 'css-styles-variables.html:20',
                    },
                    {
                        value: 'green',
                        selector: '#id2',
                        link: 'css-styles-variables.html:16',
                    },
                    {
                        value: 'red',
                        selector: 'body',
                        link: 'css-styles-variables.html:8',
                    },
                ],
            },
            {
                name: '--b',
                value: '44px',
                trace: [{
                        value: '44px',
                        selector: '#id1',
                        link: 'css-styles-variables.html:12',
                    }],
            },
        ];
        await devToolsPage.waitForFunction(async () => JSON.stringify(await (0, elements_helpers_js_1.getComputedStyleProperties)(devToolsPage)) === JSON.stringify(expectedPropId3));
    });
});
//# sourceMappingURL=computed-pane-properties.test.js.map