forked from mirrors/gecko-dev
Bug 1899103 - Add InspectorUtils.isUsedColorSchemeDark. r=nchevobbe
Differential Revision: https://phabricator.services.mozilla.com/D211718
This commit is contained in:
parent
e16211a69e
commit
a660c3ba45
5 changed files with 77 additions and 7 deletions
|
|
@ -78,6 +78,8 @@ namespace InspectorUtils {
|
|||
|
||||
boolean isElementThemed(Element element);
|
||||
|
||||
boolean isUsedColorSchemeDark(Element element);
|
||||
|
||||
Element? containingBlockOf(Element element);
|
||||
|
||||
// If the element is styled as display:block, returns an array of numbers giving
|
||||
|
|
|
|||
|
|
@ -826,6 +826,11 @@ bool InspectorUtils::IsElementThemed(GlobalObject&, Element& aElement) {
|
|||
return frame && frame->IsThemed();
|
||||
}
|
||||
|
||||
bool InspectorUtils::IsUsedColorSchemeDark(GlobalObject&, Element& aElement) {
|
||||
nsIFrame* frame = aElement.GetPrimaryFrame(FlushType::Frames);
|
||||
return frame && LookAndFeel::ColorSchemeForFrame(frame) == ColorScheme::Dark;
|
||||
}
|
||||
|
||||
Element* InspectorUtils::ContainingBlockOf(GlobalObject&, Element& aElement) {
|
||||
nsIFrame* frame = aElement.GetPrimaryFrame(FlushType::Frames);
|
||||
if (!frame) {
|
||||
|
|
|
|||
|
|
@ -214,26 +214,28 @@ class InspectorUtils {
|
|||
* Pseudo-elements which are only accepted in UA style sheets are
|
||||
* not included.
|
||||
*/
|
||||
static void GetCSSPseudoElementNames(GlobalObject& aGlobal,
|
||||
static void GetCSSPseudoElementNames(GlobalObject&,
|
||||
nsTArray<nsString>& aResult);
|
||||
|
||||
// pseudo-class style locking methods. aPseudoClass must be a valid
|
||||
// pseudo-class selector string, e.g. ":hover". ":any-link" and
|
||||
// non-event-state pseudo-classes are ignored. aEnabled sets whether the
|
||||
// psuedo-class should be locked to on or off.
|
||||
static void AddPseudoClassLock(GlobalObject& aGlobal, Element& aElement,
|
||||
static void AddPseudoClassLock(GlobalObject&, Element&,
|
||||
const nsAString& aPseudoClass, bool aEnabled);
|
||||
static void RemovePseudoClassLock(GlobalObject& aGlobal, Element& aElement,
|
||||
static void RemovePseudoClassLock(GlobalObject&, Element&,
|
||||
const nsAString& aPseudoClass);
|
||||
static bool HasPseudoClassLock(GlobalObject& aGlobal, Element& aElement,
|
||||
static bool HasPseudoClassLock(GlobalObject&, Element&,
|
||||
const nsAString& aPseudoClass);
|
||||
static void ClearPseudoClassLocks(GlobalObject& aGlobal, Element& aElement);
|
||||
static void ClearPseudoClassLocks(GlobalObject&, Element&);
|
||||
|
||||
static bool IsElementThemed(GlobalObject& aGlobal, Element& aElement);
|
||||
static bool IsElementThemed(GlobalObject&, Element&);
|
||||
|
||||
static bool IsUsedColorSchemeDark(GlobalObject&, Element&);
|
||||
|
||||
static Element* ContainingBlockOf(GlobalObject&, Element&);
|
||||
|
||||
static void GetBlockLineCounts(GlobalObject& aGlobal, Element& aElement,
|
||||
static void GetBlockLineCounts(GlobalObject&, Element&,
|
||||
Nullable<nsTArray<uint32_t>>& aResult);
|
||||
|
||||
MOZ_CAN_RUN_SCRIPT
|
||||
|
|
|
|||
|
|
@ -66,6 +66,8 @@ support-files = [
|
|||
|
||||
["test_get_all_style_sheets.html"]
|
||||
|
||||
["test_isUsedColorSchemeDark.html"]
|
||||
|
||||
["test_is_element_themed.html"]
|
||||
skip-if = ["os == 'android'"]
|
||||
|
||||
|
|
|
|||
59
layout/inspector/tests/test_isUsedColorSchemeDark.html
Normal file
59
layout/inspector/tests/test_isUsedColorSchemeDark.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test InspectorUtils::isUsedColorSchemeDark</title>
|
||||
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
|
||||
<meta name="color-scheme" content="light dark">
|
||||
|
||||
<div id="dark" style="color-scheme: dark"></div>
|
||||
<div id="light" style="color-scheme: light"></div>
|
||||
<div id="preferred" style="color-scheme: light dark"></div>
|
||||
<div id="default"></div>
|
||||
|
||||
<script>
|
||||
const InspectorUtils = SpecialPowers.InspectorUtils;
|
||||
|
||||
function testElement(id, dark) {
|
||||
is(InspectorUtils.isUsedColorSchemeDark(document.getElementById(id)), dark, id + " should " + (dark ? "" : "not ") + "be dark");
|
||||
}
|
||||
|
||||
const meta = document.querySelector('meta[name="color-scheme"]');
|
||||
|
||||
function runTests() {
|
||||
const prefersDark = matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
info(`testing with meta ${meta.content} and preference ${prefersDark ? "dark" : "light"}`);
|
||||
|
||||
testElement("dark", true);
|
||||
testElement("light", false);
|
||||
testElement("preferred", prefersDark);
|
||||
testElement("default", meta.content.includes("dark") && (!meta.content.includes("light") || prefersDark));
|
||||
}
|
||||
|
||||
function waitForColorSchemeToBe(scheme) {
|
||||
return new Promise(resolve => {
|
||||
let mq = matchMedia(`(prefers-color-scheme: ${scheme})`);
|
||||
if (mq.matches) {
|
||||
resolve();
|
||||
} else {
|
||||
mq.addEventListener("change", resolve, { once: true });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function switchColorScheme(dark) {
|
||||
await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-color-scheme.content-override", dark ? 0 : 1]] });
|
||||
await waitForColorSchemeToBe(dark ? "dark" : "light");
|
||||
}
|
||||
|
||||
add_task(async function() {
|
||||
runTests();
|
||||
|
||||
for (let dark of [false, true]) {
|
||||
for (let metaValue of ["light", "dark", "light dark"]) {
|
||||
meta.setAttribute("content", metaValue);
|
||||
await switchColorScheme(dark);
|
||||
runTests();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in a new issue