Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 21:01:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1779457 - Make prefers-color-scheme of SVG images match embedder on content too. r=aosmond

Browse Source 
As per discussion in https://github.com/w3c/csswg-drafts/issues/7213.

Differential Revision: https://phabricator.services.mozilla.com/D151751
This commit is contained in:
Emilio Cobos Álvarez 2022-07-14 10:04:38 +00:00
parent 35579eaf4c
commit 64e4056cb8
7 changed files with 71 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
layout/svg/SVGImageContext.cpp
View File

@ -9,8 +9,8 @@
// Keep others in (case-insensitive) order:
#include "gfxUtils.h"
#include "mozilla/Preferences.h"
#include "mozilla/LookAndFeel.h"
#include "mozilla/StaticPrefs_svg.h"
#include "mozilla/dom/Document.h"
#include "nsIFrame.h"
#include "nsPresContext.h"
@ -36,7 +36,8 @@ void SVGImageContext::MaybeStoreContextPaint(Maybe<SVGImageContext>& aContext,
return;
}
if (aPresContext.Document()->IsDocumentURISchemeChrome()) {
if (StaticPrefs::svg_embedder_prefers_color_scheme_content_enabled() ||
aPresContext.Document()->IsDocumentURISchemeChrome()) {
if (!aContext) {
aContext.emplace();
}

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

@ -12754,6 +12754,13 @@
value: false
mirror: always
# This pref controls whether the `prefers-color-scheme` value of SVG images
# reacts to the embedder `color-scheme` in content.
- name: svg.embedder-prefers-color-scheme.content.enabled
type: RelaxedAtomicBool
value: true
mirror: always
# Enables the 'context-fill' and 'context-stroke' keywords for particular
# domains. We expect this list to be Mozilla-controlled properties, since the
# 'context-*' keywords are not part of any spec. We expect to remove this

17
testing/web-platform/tests/css/mediaqueries/prefers-color-scheme-svg-image-ref.html Normal file
View File

@ -0,0 +1,17 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test Reference</title>
<style>
.background {
width: 32px;
height: 32px;
}
</style>
<div style="color-scheme: light">
<img src="resources/prefers-color-scheme-light.svg">
<div class="background" style="background-image: url(resources/prefers-color-scheme-light.svg)"></div>
</div>
<div style="color-scheme: dark">
<img src="resources/prefers-color-scheme-dark.svg">
<div class="background" style="background-image: url(resources/prefers-color-scheme-dark.svg)"></div>
</div>

23
testing/web-platform/tests/css/mediaqueries/prefers-color-scheme-svg-image.html Normal file
View File

@ -0,0 +1,23 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS prefers-color-scheme affects SVG images</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7213">
<link rel="match" href="prefers-color-scheme-svg-image-ref.html">
<style>
.background {
width: 32px;
height: 32px;
background-image: url(resources/prefers-color-scheme.svg);
}
</style>
<div style="color-scheme: light">
<img src="resources/prefers-color-scheme.svg">
<div class="background"></div>
</div>
<div style="color-scheme: dark">
<img src="resources/prefers-color-scheme.svg">
<div class="background"></div>
</div>

6
testing/web-platform/tests/css/mediaqueries/resources/prefers-color-scheme-dark.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
:root { color: purple }
</style>
<rect fill="currentColor" width="32" height="32"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 193 B

6
testing/web-platform/tests/css/mediaqueries/resources/prefers-color-scheme-light.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
:root { color: blue }
</style>
<rect fill="currentColor" width="32" height="32"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 191 B

9
testing/web-platform/tests/css/mediaqueries/resources/prefers-color-scheme.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
:root { color: blue }
@media (prefers-color-scheme: dark) {
:root { color: purple }
}
</style>
<rect fill="currentColor" width="32" height="32"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 269 B