blob: 624b9f312cc9b64d86de2a5e7cbc9c02c7f93fd9 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function switchToDarkAppearance() {
if (window.internals)
internals.settings.setUseDarkAppearance(true);
}
function test() {
let nodeStyles = null;
let suite = InspectorTest.createAsyncSuite("ForcePageAppearance");
let getProperty = (propertyName) => {
let styleDeclaration = nodeStyles.computedStyle;
for (let property of styleDeclaration.enabledProperties) {
if (property.name === propertyName)
return property;
}
};
suite.addTestCase({
name: "Default appearance should be light",
test(resolve, reject) {
InspectorTest.expectEqual(WI.cssManager.defaultAppearance, WI.CSSManager.Appearance.Light, `WI.cssManager.defaultAppearance should be Light.`);
InspectorTest.expectNull(WI.cssManager.forcedAppearance, `WI.cssManager.forcedAppearance should be null.`);
InspectorTest.expectEqual(getProperty("width").rawValue, "150px");
InspectorTest.expectEqual(getProperty("color").rawValue, "rgb(0, 0, 0)");
resolve();
}
});
suite.addTestCase({
name: "Force appearance to Dark",
test(resolve, reject) {
// Styles should refresh when dark appearance is forced.
WI.cssManager.awaitEvent(WI.CSSManager.Event.ForcedAppearanceDidChange).then((event) => {
InspectorTest.expectEqual(nodeStyles.needsRefresh, true, `DOMNodeStyles should need refresh.`);
nodeStyles.refresh();
return nodeStyles.computedStyle.awaitEvent(WI.CSSStyleDeclaration.Event.PropertiesChanged).then((event) => {
InspectorTest.expectEqual(getProperty("width").rawValue, "200px");
InspectorTest.expectEqual(getProperty("color").rawValue, "rgb(255, 255, 255)");
});
}).then(resolve, reject);
WI.cssManager.forcedAppearance = WI.CSSManager.Appearance.Dark;
InspectorTest.expectEqual(WI.cssManager.defaultAppearance, WI.CSSManager.Appearance.Light, `WI.cssManager.defaultAppearance should be Light.`);
InspectorTest.expectEqual(WI.cssManager.forcedAppearance, WI.CSSManager.Appearance.Dark, `WI.cssManager.forcedAppearance should be Dark.`);
}
});
suite.addTestCase({
name: "Switch to Dark appearance by default",
test(resolve, reject) {
InspectorTest.evaluateInPage(`switchToDarkAppearance()`);
WI.cssManager.awaitEvent(WI.CSSManager.Event.DefaultAppearanceDidChange).then((event) => {
InspectorTest.expectEqual(WI.cssManager.defaultAppearance, WI.CSSManager.Appearance.Dark, `WI.cssManager.defaultAppearance should be Dark.`);
InspectorTest.expectEqual(WI.cssManager.forcedAppearance, WI.CSSManager.Appearance.Dark, `WI.cssManager.forcedAppearance should be Dark.`);
InspectorTest.expectEqual(nodeStyles.needsRefresh, true, `DOMNodeStyles should need refresh.`);
nodeStyles.refresh();
return nodeStyles.computedStyle.awaitEvent(WI.CSSStyleDeclaration.Event.PropertiesChanged).then((event) => {
InspectorTest.expectEqual(getProperty("width").rawValue, "200px");
InspectorTest.expectEqual(getProperty("color").rawValue, "rgb(255, 255, 255)");
});
}).then(resolve, reject);
}
});
suite.addTestCase({
name: "Force appearance to Light",
test(resolve, reject) {
// Styles should refresh when dark appearance is forced.
WI.cssManager.awaitEvent(WI.CSSManager.Event.ForcedAppearanceDidChange).then((event) => {
InspectorTest.expectEqual(nodeStyles.needsRefresh, true, `DOMNodeStyles should need refresh.`);
nodeStyles.refresh();
return nodeStyles.computedStyle.awaitEvent(WI.CSSStyleDeclaration.Event.PropertiesChanged).then((event) => {
InspectorTest.expectEqual(getProperty("width").rawValue, "150px");
InspectorTest.expectEqual(getProperty("color").rawValue, "rgb(0, 0, 0)");
});
}).then(resolve, reject);
WI.cssManager.forcedAppearance = WI.CSSManager.Appearance.Light;
InspectorTest.expectEqual(WI.cssManager.defaultAppearance, WI.CSSManager.Appearance.Dark, `WI.cssManager.defaultAppearance should be Dark.`);
InspectorTest.expectEqual(WI.cssManager.forcedAppearance, WI.CSSManager.Appearance.Light, `WI.cssManager.forcedAppearance should be Light.`);
}
});
suite.addTestCase({
name: "Disable forced appearance",
test(resolve, reject) {
// Styles should refresh when forced appearance is disabled.
WI.cssManager.awaitEvent(WI.CSSManager.Event.ForcedAppearanceDidChange).then((event) => {
InspectorTest.expectEqual(nodeStyles.needsRefresh, true, `DOMNodeStyles should need refresh.`);
nodeStyles.refresh();
return nodeStyles.computedStyle.awaitEvent(WI.CSSStyleDeclaration.Event.PropertiesChanged).then((event) => {
InspectorTest.expectEqual(getProperty("width").rawValue, "200px");
InspectorTest.expectEqual(getProperty("color").rawValue, "rgb(255, 255, 255)");
});
}).then(resolve, reject);
WI.cssManager.forcedAppearance = null;
InspectorTest.expectEqual(WI.cssManager.defaultAppearance, WI.CSSManager.Appearance.Dark, `WI.cssManager.defaultAppearance should be Dark.`);
InspectorTest.expectNull(WI.cssManager.forcedAppearance, `WI.cssManager.forcedAppearance should be null.`);
}
});
WI.domManager.requestDocument((documentNode) => {
WI.domManager.querySelector(documentNode.id, "#x", (contentNodeId) => {
if (contentNodeId) {
let domNode = WI.domManager.nodeForId(contentNodeId);
nodeStyles = WI.cssManager.stylesForNode(domNode);
if (nodeStyles.needsRefresh) {
nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
suite.runTestCasesAndFinish()
});
} else
suite.runTestCasesAndFinish();
} else {
InspectorTest.fail("DOM node not found.");
InspectorTest.completeTest();
}
});
});
}
</script>
</head>
<body onload="runTest()">
<p>Testing the default appearance and forced appearance features.</p>
<style>
:root {
supported-color-schemes: light dark;
}
.test-node {
width: 100px;
}
@media (prefers-color-scheme: light) {
.test-node {
width: 150px;
}
}
@media (prefers-color-scheme: dark) {
.test-node {
width: 200px;
}
}
</style>
<div id="x" class="test-node"></div>
</body>
</html>