167 lines
7.0 KiB
HTML
167 lines
7.0 KiB
HTML
<!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) => {
|
|
documentNode.querySelector("#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>
|