Google Git
Sign in
chromium / devtools / devtools-frontend / 01e70f16edd44da3be8b9cf6c845287cb6c5bca3 / . / test / e2e / elements / pseudo-states.ts
blob: 8fcaff407716795c760957fab3bf3e3071c71024 [file] [log] [blame]
Tim van der Lippe81aeee72020-03-09 16:14:28[diff] [blame]1// Copyright 2020 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {assert} from 'chai';
6import {describe, it} from 'mocha';
7
Tim van der Lippe01e70f12020-03-10 18:34:50[diff] [blame^]8import {debuggerStatement, getBrowserAndPages, resetPages, resourcesPath} from '../../shared/helper.js';
9import {assertContentOfSelectedElementsNode, ensureGutterDecorationForDOMNodeExists, forcePseudoState, obtainComputedStylesForDOMNode, removePseudoState, waitForDOMNodeToBeHidden, waitForDOMNodeToBeShown, waitForElementsStyleSection} from '../helpers/elements-helpers.js';
10
11const TARGET_SHOWN_ON_HOVER_SELECTOR = '.show-on-hover';
12const TARGET_SHOWN_ON_FOCUS_SELECTOR = '.show-on-focus';
Tim van der Lippe81aeee72020-03-09 16:14:28[diff] [blame]13
14describe('The Elements Tab', async () => {
15 beforeEach(async () => {
16 await resetPages();
17 });
18
19 it('can force :hover state for selected DOM node', async () => {
20 const {target, frontend} = getBrowserAndPages();
21
22 await target.goto(`${resourcesPath}/elements/hover.html`);
23
24 await waitForElementsStyleSection();
25
26 // Sanity check to make sure we have the correct node selected after opening a file
27 await assertContentOfSelectedElementsNode('<body>\u200B');
28
29 // Select div that we can hover on
30 await frontend.keyboard.press('ArrowRight');
31 await assertContentOfSelectedElementsNode('<div id=\u200B"hover">\u200B…\u200B</div>\u200B');
32
33 await forcePseudoState(':hover');
34 await ensureGutterDecorationForDOMNodeExists();
Tim van der Lippe01e70f12020-03-10 18:34:50[diff] [blame^]35 await waitForDOMNodeToBeShown(TARGET_SHOWN_ON_HOVER_SELECTOR);
Tim van der Lippe81aeee72020-03-09 16:14:28[diff] [blame]36
Tim van der Lippe01e70f12020-03-10 18:34:50[diff] [blame^]37 const displayComputedStyle = await obtainComputedStylesForDOMNode(TARGET_SHOWN_ON_HOVER_SELECTOR, 'display');
Tim van der Lippe81aeee72020-03-09 16:14:28[diff] [blame]38 assert.equal(displayComputedStyle, 'inline');
39 });
40
41 it('can force :focus state for selected DOM node', async () => {
42 const {target, frontend} = getBrowserAndPages();
43
44 await target.goto(`${resourcesPath}/elements/focus.html`);
45
46 await waitForElementsStyleSection();
47
48 // Sanity check to make sure we have the correct node selected after opening a file
49 await assertContentOfSelectedElementsNode('<body>\u200B');
50
51 // Select div that we can focus
52 await frontend.keyboard.press('ArrowRight');
53 await assertContentOfSelectedElementsNode('<div id=\u200B"focus" tabindex=\u200B"0">\u200B…\u200B</div>\u200B');
54
55 await forcePseudoState(':focus');
56 await ensureGutterDecorationForDOMNodeExists();
Tim van der Lippe01e70f12020-03-10 18:34:50[diff] [blame^]57 await waitForDOMNodeToBeShown(TARGET_SHOWN_ON_FOCUS_SELECTOR);
Tim van der Lippe81aeee72020-03-09 16:14:28[diff] [blame]58
Tim van der Lippe01e70f12020-03-10 18:34:50[diff] [blame^]59 const displayComputedStyle = await obtainComputedStylesForDOMNode(TARGET_SHOWN_ON_FOCUS_SELECTOR, 'display');
Tim van der Lippe81aeee72020-03-09 16:14:28[diff] [blame]60 assert.equal(displayComputedStyle, 'inline');
61
Tim van der Lippe01e70f12020-03-10 18:34:50[diff] [blame^]62 const backgroundColorComputedStyle = await obtainComputedStylesForDOMNode('#focus', 'backgroundColor');
Tim van der Lippe81aeee72020-03-09 16:14:28[diff] [blame]63 assert.equal(backgroundColorComputedStyle, 'rgb(0, 128, 0)');
64 });
Tim van der Lippe01e70f12020-03-10 18:34:50[diff] [blame^]65
66 it('can remove :focus state', async () => {
67 const {target, frontend} = getBrowserAndPages();
68
69 await target.goto(`${resourcesPath}/elements/focus.html`);
70
71 await waitForElementsStyleSection();
72
73 // Sanity check to make sure we have the correct node selected after opening a file
74 await assertContentOfSelectedElementsNode('<body>\u200B');
75
76 // Select div that we can focus
77 await frontend.keyboard.press('ArrowRight');
78 await assertContentOfSelectedElementsNode('<div id=\u200B"focus" tabindex=\u200B"0">\u200B…\u200B</div>\u200B');
79
80 await forcePseudoState(':focus');
81 await ensureGutterDecorationForDOMNodeExists();
82 await waitForDOMNodeToBeShown(TARGET_SHOWN_ON_FOCUS_SELECTOR);
83
84 const displayComputedStyle = await obtainComputedStylesForDOMNode(TARGET_SHOWN_ON_FOCUS_SELECTOR, 'display');
85 assert.equal(displayComputedStyle, 'inline');
86
87 const backgroundColorComputedStyle = await obtainComputedStylesForDOMNode('#focus', 'backgroundColor');
88 assert.equal(backgroundColorComputedStyle, 'rgb(0, 128, 0)');
89
90 await removePseudoState(':focus');
91 await waitForDOMNodeToBeHidden(TARGET_SHOWN_ON_FOCUS_SELECTOR);
92
93 await debuggerStatement(frontend);
94
95 const hiddenDisplayStyle = await obtainComputedStylesForDOMNode(TARGET_SHOWN_ON_FOCUS_SELECTOR, 'display');
96 assert.equal(hiddenDisplayStyle, 'none');
97 });
Tim van der Lippe81aeee72020-03-09 16:14:28[diff] [blame]98});