Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-07 18:04:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1656363 - Implement prefers-contrast: custom and let prefers-contrast ride the trains. r=morgan

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D143198
This commit is contained in:
Emilio Cobos Álvarez 2022-04-12 09:07:18 +00:00
parent b9a8518c6b
commit 39d7652297
8 changed files with 80 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
gfx/src/RelativeLuminanceUtils.h
View File

@ -39,6 +39,16 @@ class RelativeLuminanceUtils {
return NS_RGBA(r1, g1, b1, NS_GET_A(aColor));
}
// https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
static float ContrastRatio(nscolor aColor1, nscolor aColor2) {
float l1 = Compute(aColor1);
float l2 = Compute(aColor2);
if (l1 < l2) {
std::swap(l1, l2);
}
return (l1 + 0.05f) / (l2 + 0.05f);
}
private:
static float ComputeComponent(uint8_t aComponent) {
float v = float(aComponent) / 255.0f;

5
layout/style/PreferenceSheet.cpp
View File

@ -181,11 +181,10 @@ void PreferenceSheet::Prefs::Load(bool aIsChrome) {
*this = {};
mIsChrome = aIsChrome;
mUseAccessibilityTheme =
LookAndFeel::GetInt(LookAndFeel::IntID::UseAccessibilityTheme);
// Chrome documents always use system colors, not stand-ins, not forced, etc.
if (!aIsChrome) {
mUseAccessibilityTheme =
LookAndFeel::GetInt(LookAndFeel::IntID::UseAccessibilityTheme);
mUseDocumentColors = UseDocumentColors(mUseAccessibilityTheme);
mUsePrefColors = !StaticPrefs::browser_display_use_system_colors();
mUseStandins = UseStandinsForNativeColors();

19
layout/style/nsMediaFeatures.cpp
View File

@ -282,13 +282,22 @@ StylePrefersContrast Gecko_MediaFeatures_PrefersContrast(
if (nsContentUtils::ShouldResistFingerprinting(aDocument)) {
return StylePrefersContrast::NoPreference;
}
if (!!LookAndFeel::GetInt(LookAndFeel::IntID::UseAccessibilityTheme, 0)) {
const auto& prefs = PreferenceSheet::PrefsFor(*aDocument);
if (!prefs.mUseAccessibilityTheme && prefs.mUseDocumentColors) {
return StylePrefersContrast::NoPreference;
}
const auto& colors = prefs.ColorsFor(ColorScheme::Light);
float ratio = RelativeLuminanceUtils::ContrastRatio(colors.mDefaultBackground,
colors.mDefault);
// https://www.w3.org/TR/WCAG21/#contrast-minimum
if (ratio < 4.5f) {
return StylePrefersContrast::Less;
}
// https://www.w3.org/TR/WCAG21/#contrast-enhanced
if (ratio >= 7.0f) {
return StylePrefersContrast::More;
}
if (!PreferenceSheet::PrefsFor(*aDocument).mUseDocumentColors) {
return StylePrefersContrast::More;
}
return StylePrefersContrast::NoPreference;
return StylePrefersContrast::Custom;
}
StyleDynamicRange Gecko_MediaFeatures_DynamicRange(const Document* aDocument) {

1
layout/style/test/mochitest.ini
View File

@ -318,6 +318,7 @@ run-if = !headless && (os == 'mac' || toolkit == 'android' || toolkit == 'gtk')
[test_pointer-events.html]
[test_position_float_display.html]
[test_position_sticky.html]
[test_prefers_contrast_color_pairs.html]
[test_priority_preservation.html]
[test_property_database.html]
[test_property_syntax_errors.html]

49
layout/style/test/test_prefers_contrast_color_pairs.html Normal file
View File

@ -0,0 +1,49 @@
<!doctype html>
<title>Test for Bug 922669</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<script>
function assertMatches(query) {
ok(matchMedia(query).matches, `${query} should match`);
}
function assertPrefersContrastIs(value) {
assertMatches(`(prefers-contrast: ${value})`);
}
add_task(async function setupPrefs() {
assertPrefersContrastIs("no-preference");
await SpecialPowers.pushPrefEnv({
set: [
["browser.display.document_color_use", 2],
["browser.display.use_system_colors", false],
]
});
assertMatches("(prefers-contrast)");
});
async function testColors(foreground, background, expected) {
await SpecialPowers.pushPrefEnv({
set: [
["browser.display.foreground_color", foreground],
["browser.display.background_color", background],
]
});
assertPrefersContrastIs(expected);
// Test the inversed order too.
await SpecialPowers.pushPrefEnv({
set: [
["browser.display.foreground_color", background],
["browser.display.background_color", foreground],
]
});
assertPrefersContrastIs(expected);
}
add_task(async function test_prefers_contrast_colors() {
await testColors("black", "black", "less");
await testColors("black", "white", "more");
await testColors("red", "black", "custom");
});
</script>

2
modules/libpref/init/StaticPrefList.yaml
View File

@ -7747,7 +7747,7 @@
# chrome and ua.
- name: layout.css.prefers-contrast.enabled
type: RelaxedAtomicBool
value: false
value: true
mirror: always
rust: true

5
servo/components/style/gecko/media_features.rs
View File

@ -315,11 +315,12 @@ fn eval_prefers_reduced_motion(device: &Device, query_value: Option<PrefersReduc
#[derive(Clone, Copy, Debug, FromPrimitive, Parse, PartialEq, ToCss)]
#[repr(u8)]
pub enum PrefersContrast {
/// More contrast is preferred. Corresponds to an accessibility theme
/// being enabled or Firefox forcing high contrast colors.
/// More contrast is preferred.
More,
/// Low contrast is preferred.
Less,
/// Custom (not more, not less).
Custom,
/// The default value if neither high or low contrast is enabled.
NoPreference,
}

5
testing/web-platform/meta/css/mediaqueries/prefers-contrast.html.ini
View File

@ -1,7 +1,2 @@
[prefers-contrast.html]
prefs: [layout.css.prefers-contrast.enabled:true]
[Should be parseable in a CSS stylesheet: '(prefers-contrast: custom)']
expected: FAIL
[Should be parseable in JS: '(prefers-contrast: custom)']
expected: FAIL