mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 04:26:32 +08:00
Johan Bay
8443d2894b
The auto dark mode is intended to always be used together with `prefers-color-scheme: dark`. This change makes the setting in the Renderer tab both enable auto dark and sets the prefered color scheme to dark. To make it clear that these two settings are intertwined, we disable the select box for prefers-color-scheme when auto dark mode is enabled. This change also makes the auto dark setting to a checkbox to simplify the UX. https: //imgur.com/a/79wNwc0 Change-Id: I3917356865203b89196402a8a7d4dbfa6cbeab18 Bug: none Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3358535 Reviewed-by: Changhao Han <changhaohan@chromium.org> Commit-Queue: Johan Bay <jobay@chromium.org>
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
// Copyright 2020 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 {assert} from 'chai';
|
|
|
|
import {getBrowserAndPages, waitFor, waitForAria} from '../../shared/helper.js';
|
|
import {describe, it} from '../../shared/mocha-extensions.js';
|
|
import {openPanelViaMoreTools} from '../helpers/settings-helpers.js';
|
|
|
|
describe('Rendering pane', () => {
|
|
it('includes UI for simulating vision deficiencies', async () => {
|
|
await openPanelViaMoreTools('Rendering');
|
|
|
|
const option = await waitFor('option[value="achromatopsia"]');
|
|
const actual = await option.evaluate(node => {
|
|
const select = node.closest('select');
|
|
return select ? select.textContent : '';
|
|
});
|
|
const expected = [
|
|
'No emulation',
|
|
'Blurred vision',
|
|
'Protanopia',
|
|
'Deuteranopia',
|
|
'Tritanopia',
|
|
'Achromatopsia',
|
|
].join('');
|
|
assert.deepEqual(actual, expected);
|
|
});
|
|
|
|
it('includes UI for emulating color-gamut media feature', async () => {
|
|
await openPanelViaMoreTools('Rendering');
|
|
|
|
const option = await waitFor('option[value="rec2020"]');
|
|
const actual = await option.evaluate(node => {
|
|
const select = node.closest('select');
|
|
return select ? select.textContent : '';
|
|
});
|
|
const expected = [
|
|
'No emulation',
|
|
'color-gamut: srgb',
|
|
'color-gamut: p3',
|
|
'color-gamut: rec2020',
|
|
].join('');
|
|
assert.deepEqual(actual, expected);
|
|
});
|
|
|
|
it('includes UI for emulating prefers-contrast media feature', async function() {
|
|
await openPanelViaMoreTools('Rendering');
|
|
|
|
// TODO(sartang@microsoft.com): Remove this condition once feature is fully enabled
|
|
const {frontend} = getBrowserAndPages();
|
|
const hasSupport = await frontend.evaluate(() => {
|
|
return window.matchMedia('(prefers-contrast)').media === '(prefers-contrast)';
|
|
});
|
|
|
|
if (!hasSupport) {
|
|
// @ts-ignore
|
|
this.skip();
|
|
}
|
|
|
|
const option = await waitFor('option[value="custom"]');
|
|
const actual = await option.evaluate(node => {
|
|
const select = node.closest('select');
|
|
return select ? select.textContent : '';
|
|
});
|
|
const expected = [
|
|
'No emulation',
|
|
'prefers-contrast: more',
|
|
'prefers-contrast: less',
|
|
'prefers-contrast: custom',
|
|
].join('');
|
|
assert.deepEqual(actual, expected);
|
|
});
|
|
|
|
it('includes UI for emulating auto dark mode', async () => {
|
|
await openPanelViaMoreTools('Rendering');
|
|
await waitForAria('Enable automatic dark mode[role="checkbox"]');
|
|
});
|
|
});
|