"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");
const TARGET_SHOWN_ON_HOVER_SELECTOR = '.show-on-hover';
const TARGET_SHOWN_ON_FOCUS_SELECTOR = '.show-on-focus';
const TARGET_SHOWN_ON_TARGET_SELECTOR = '#show-on-target';
describe('The Elements tab', function () {
    setup({});
    if (this.timeout()) {
        this.timeout(20000);
    }
    it('can force :hover state for selected DOM node', async ({ devToolsPage, inspectedPage }) => {
        await inspectedPage.goToResource('elements/hover.html');
        await (0, elements_helpers_js_1.waitForElementsStyleSection)('<body', devToolsPage);
        await devToolsPage.pressKey('ArrowRight');
        await (0, elements_helpers_js_1.waitForContentOfSelectedElementsNode)('<div id=\u200B"hover">\u200B…\u200B</div>\u200B', devToolsPage);
        await (0, elements_helpers_js_1.forcePseudoState)(':hover', undefined, devToolsPage);
        await (0, elements_helpers_js_1.assertGutterDecorationForDomNodeExists)(devToolsPage);
        await (0, elements_helpers_js_1.waitForDomNodeToBeVisible)(TARGET_SHOWN_ON_HOVER_SELECTOR, inspectedPage);
        const displayComputedStyle = await (0, elements_helpers_js_1.getComputedStylesForDomNode)(TARGET_SHOWN_ON_HOVER_SELECTOR, 'display', inspectedPage);
        chai_1.assert.strictEqual(displayComputedStyle, 'inline');
    });
    it('can force :target state for selected DOM node', async ({ devToolsPage, inspectedPage }) => {
        await inspectedPage.goToResource('elements/target.html');
        await (0, elements_helpers_js_1.waitForElementsStyleSection)('<body', devToolsPage);
        await devToolsPage.pressKey('ArrowRight');
        await (0, elements_helpers_js_1.waitForContentOfSelectedElementsNode)('<span id=\u200B"show-on-target">\u200BSome text here, only shown on :target\u200B</span>\u200B', devToolsPage);
        await (0, elements_helpers_js_1.forcePseudoState)(':target', undefined, devToolsPage);
        await (0, elements_helpers_js_1.assertGutterDecorationForDomNodeExists)(devToolsPage);
        await (0, elements_helpers_js_1.waitForDomNodeToBeVisible)(TARGET_SHOWN_ON_TARGET_SELECTOR, inspectedPage);
        const displayComputedStyle = await (0, elements_helpers_js_1.getComputedStylesForDomNode)(TARGET_SHOWN_ON_TARGET_SELECTOR, 'display', inspectedPage);
        chai_1.assert.strictEqual(displayComputedStyle, 'inline');
    });
    it('can force :focus state for selected DOM node', async ({ devToolsPage, inspectedPage }) => {
        await inspectedPage.goToResource('elements/focus.html');
        await (0, elements_helpers_js_1.waitForElementsStyleSection)('<body', devToolsPage);
        await devToolsPage.pressKey('ArrowRight');
        await (0, elements_helpers_js_1.waitForContentOfSelectedElementsNode)('<div id=\u200B"focus" tabindex=\u200B"0">\u200B…\u200B</div>\u200B', devToolsPage);
        await (0, elements_helpers_js_1.forcePseudoState)(':focus', undefined, devToolsPage);
        await (0, elements_helpers_js_1.assertGutterDecorationForDomNodeExists)(devToolsPage);
        await (0, elements_helpers_js_1.waitForDomNodeToBeVisible)(TARGET_SHOWN_ON_FOCUS_SELECTOR, inspectedPage);
        const displayComputedStyle = await (0, elements_helpers_js_1.getComputedStylesForDomNode)(TARGET_SHOWN_ON_FOCUS_SELECTOR, 'display', inspectedPage);
        chai_1.assert.strictEqual(displayComputedStyle, 'inline');
        const backgroundColorComputedStyle = await (0, elements_helpers_js_1.getComputedStylesForDomNode)('#focus', 'backgroundColor', inspectedPage);
        chai_1.assert.strictEqual(backgroundColorComputedStyle, 'rgb(0, 128, 0)');
    });
    it('can remove :focus state', async ({ devToolsPage, inspectedPage }) => {
        await inspectedPage.goToResource('elements/focus.html');
        await (0, elements_helpers_js_1.waitForElementsStyleSection)('<body', devToolsPage);
        await devToolsPage.pressKey('ArrowRight');
        await (0, elements_helpers_js_1.waitForContentOfSelectedElementsNode)('<div id=\u200B"focus" tabindex=\u200B"0">\u200B…\u200B</div>\u200B', devToolsPage);
        await (0, elements_helpers_js_1.forcePseudoState)(':focus', undefined, devToolsPage);
        await (0, elements_helpers_js_1.assertGutterDecorationForDomNodeExists)(devToolsPage);
        await (0, elements_helpers_js_1.waitForDomNodeToBeVisible)(TARGET_SHOWN_ON_FOCUS_SELECTOR, inspectedPage);
        const displayComputedStyle = await (0, elements_helpers_js_1.getComputedStylesForDomNode)(TARGET_SHOWN_ON_FOCUS_SELECTOR, 'display', inspectedPage);
        chai_1.assert.strictEqual(displayComputedStyle, 'inline');
        const backgroundColorComputedStyle = await (0, elements_helpers_js_1.getComputedStylesForDomNode)('#focus', 'backgroundColor', inspectedPage);
        chai_1.assert.strictEqual(backgroundColorComputedStyle, 'rgb(0, 128, 0)');
        await (0, elements_helpers_js_1.removePseudoState)(':focus', devToolsPage);
        await (0, elements_helpers_js_1.waitForDomNodeToBeHidden)(TARGET_SHOWN_ON_FOCUS_SELECTOR, inspectedPage);
        const hiddenDisplayStyle = await (0, elements_helpers_js_1.getComputedStylesForDomNode)(TARGET_SHOWN_ON_FOCUS_SELECTOR, 'display', inspectedPage);
        chai_1.assert.strictEqual(hiddenDisplayStyle, 'none');
    });
    it('can toggle emulate a focused page', async ({ devToolsPage, inspectedPage }) => {
        await inspectedPage.goToResource('elements/dissapearing-popup.html');
        await (0, elements_helpers_js_1.waitForElementsStyleSection)('<body', devToolsPage);
        // Navigate to #query input
        await devToolsPage.pressKey('ArrowRight');
        await (0, elements_helpers_js_1.waitForContentOfSelectedElementsNode)('<input id=\u200B"query" type=\u200B"text">\u200B', devToolsPage);
        // Verify #result is hidden
        await devToolsPage.pressKey('ArrowDown');
        await (0, elements_helpers_js_1.waitForPartialContentOfSelectedElementsNode)('<p id=\u200B"result" class=\u200B"hide">\u200B', devToolsPage);
        // Verify #result is visible
        await (0, elements_helpers_js_1.forcePseudoState)(elements_helpers_js_1.EMULATE_FOCUSED_PAGE, undefined, devToolsPage);
        await inspectedPage.pressKey('Tab');
        await (0, elements_helpers_js_1.waitForPartialContentOfSelectedElementsNode)('<p id=\u200B"result" class>\u200B', devToolsPage);
        // Verify #result is hidden
        await (0, elements_helpers_js_1.removePseudoState)(elements_helpers_js_1.EMULATE_FOCUSED_PAGE, devToolsPage);
        await inspectedPage.pressKey('Tab');
        await (0, elements_helpers_js_1.waitForPartialContentOfSelectedElementsNode)('<p id=\u200B"result" class=\u200B"hide">\u200B', devToolsPage);
    });
    const dualCasesOneCheckbox = [
        { start: 'enabled', dual: 'disabled', elementCount: 9 },
        { start: 'disabled', dual: 'enabled', elementCount: 6 },
        { start: 'read-only', dual: 'read-write', elementCount: 12 },
        { start: 'read-write', dual: 'read-only', elementCount: 6 },
        { start: 'required', dual: 'optional', elementCount: 2 },
        { start: 'optional', dual: 'required', elementCount: 13 },
    ];
    for (const { start, dual, elementCount } of dualCasesOneCheckbox) {
        it(`can force ${start} elements to be :${dual}`, async ({ devToolsPage, inspectedPage }) => {
            await inspectedPage.goToResource('elements/specific-pseudo-states.html');
            await (0, elements_helpers_js_1.waitForElementsStyleSection)('<body', devToolsPage);
            // Verify assumptions behind our test file.
            // These combinations should not exist.
            chai_1.assert.deepEqual(await inspectedPage.page.$$(`.start-${start}:${dual}`), []);
            chai_1.assert.deepEqual(await inspectedPage.page.$$(`.test-case:not(.start-${start}):${start}`), []);
            // Before we do anything, pseudoClasses should be as expected.
            const cls = `.start-${start}`;
            const ids = await Promise.all((await inspectedPage.page.$$(cls)).map(el => el.evaluate(node => node.id)));
            const byPseudoClass = await inspectedPage.page.$$(`${cls}:${start}`);
            chai_1.assert.strictEqual(ids.length, byPseudoClass.length);
            chai_1.assert.strictEqual(ids.length, elementCount);
            const id = ids[0];
            await (0, elements_helpers_js_1.findElementById)(id, devToolsPage);
            const unforcedSelector = `#${id}:${start}`;
            const forcedSelector = `#${id}:${dual}`;
            chai_1.assert.deepEqual(await inspectedPage.page.$$(forcedSelector), []);
            chai_1.assert.lengthOf(await inspectedPage.page.$$(unforcedSelector), 1);
            await (0, elements_helpers_js_1.forcePseudoState)(':' + dual, true, devToolsPage);
            chai_1.assert.deepEqual(await inspectedPage.page.$$(unforcedSelector), []);
            chai_1.assert.lengthOf(await inspectedPage.page.$$(forcedSelector), 1);
            await (0, elements_helpers_js_1.removePseudoState)(':' + dual, devToolsPage);
            chai_1.assert.deepEqual(await inspectedPage.page.$$(forcedSelector), []);
            chai_1.assert.lengthOf(await inspectedPage.page.$$(unforcedSelector), 1);
        });
    }
    const dualCasesTwoCheckboxes = [
        { start: 'valid', dual: 'invalid', elementCount: 6 },
        { start: 'invalid', dual: 'valid', elementCount: 1 },
        { start: 'in-range', dual: 'out-of-range', elementCount: 1 },
        { start: 'out-of-range', dual: 'in-range', elementCount: 1 },
    ];
    for (const { start, dual, elementCount } of dualCasesTwoCheckboxes) {
        it(`can force ${start} elements to be :${dual} but not both`, async ({ devToolsPage, inspectedPage }) => {
            await inspectedPage.goToResource('elements/specific-pseudo-states.html');
            await (0, elements_helpers_js_1.waitForElementsStyleSection)('<body', devToolsPage);
            // Verify assumptions behind our test file.
            // These combinations should not exist.
            chai_1.assert.deepEqual(await inspectedPage.page.$$(`.start-${start}:${dual}`), []);
            chai_1.assert.deepEqual(await inspectedPage.page.$$(`.test-case:not(.start-${start}):${start}`), []);
            // Before we do anything, pseudoClasses should be as expected.
            const cls = `.start-${start}`;
            const ids = await Promise.all((await inspectedPage.page.$$(cls)).map(el => el.evaluate(node => node.id)));
            const byPseudoClass = await inspectedPage.page.$$(`${cls}:${start}`);
            chai_1.assert.strictEqual(ids.length, byPseudoClass.length);
            chai_1.assert.strictEqual(ids.length, elementCount);
            const id = ids[0];
            await (0, elements_helpers_js_1.findElementById)(id, devToolsPage);
            const unforcedSelector = `#${id}:${start}`;
            const forcedSelector = `#${id}:${dual}`;
            chai_1.assert.deepEqual(await inspectedPage.page.$$(forcedSelector), []);
            chai_1.assert.lengthOf(await inspectedPage.page.$$(unforcedSelector), 1);
            await (0, elements_helpers_js_1.forcePseudoState)(':' + dual, true, devToolsPage);
            await devToolsPage.waitFor(`input[type="checkbox"][title=":${dual}"]:checked`);
            chai_1.assert.deepEqual(await inspectedPage.page.$$(unforcedSelector), []);
            chai_1.assert.lengthOf(await inspectedPage.page.$$(forcedSelector), 1);
            await (0, elements_helpers_js_1.forcePseudoState)(':' + start, true, devToolsPage);
            await devToolsPage.waitFor(`input[type="checkbox"][title=":${start}"]:checked`);
            await devToolsPage.waitFor(`input[type="checkbox"][title=":${dual}"]:not(:checked)`);
            chai_1.assert.deepEqual(await inspectedPage.page.$$(forcedSelector), []);
            chai_1.assert.lengthOf(await inspectedPage.page.$$(unforcedSelector), 1);
        });
    }
});
//# sourceMappingURL=pseudo-states.test.js.map