зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1614921 - Ignore background-image on canvas in high-contrast mode. r=morgan
Let's give this a shot. Differential Revision: https://phabricator.services.mozilla.com/D63007 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Emilio Cobos Álvarez
Родитель
b06d1c3205
Коммит
0bc209c210
|
|
@ -24,6 +24,7 @@
|
|||
#include "nsPrintfCString.h"
|
||||
#include "mozilla/AccessibleCaretEventHub.h"
|
||||
#include "mozilla/ComputedStyle.h"
|
||||
#include "mozilla/StaticPrefs_browser.h"
|
||||
#include "mozilla/dom/AnonymousContent.h"
|
||||
#include "mozilla/layers/StackingContextHelper.h"
|
||||
#include "mozilla/layers/RenderRootStateManager.h"
|
||||
|
|
@ -516,10 +517,19 @@ void nsCanvasFrame::BuildDisplayList(nsDisplayListBuilder* aBuilder,
|
|||
bool needBlendContainer = false;
|
||||
nsDisplayListBuilder::AutoContainerASRTracker contASRTracker(aBuilder);
|
||||
|
||||
// In high-contrast-mode, we suppress background-image on the canvas frame
|
||||
// (even when backplating), because users expect site backgrounds to conform
|
||||
// to their HCM background color when a solid color is rendered, and some
|
||||
// websites use solid-color images instead of an overwritable background
|
||||
// color.
|
||||
const bool suppressBackgroundImage =
|
||||
!PresContext()->PrefSheetPrefs().mUseDocumentColors &&
|
||||
StaticPrefs::browser_display_suppress_canvas_background_image_on_forced_colors();
|
||||
|
||||
// Create separate items for each background layer.
|
||||
const nsStyleImageLayers& layers = bg->StyleBackground()->mImage;
|
||||
NS_FOR_VISIBLE_IMAGE_LAYERS_BACK_TO_FRONT(i, layers) {
|
||||
if (layers.mLayers[i].mImage.IsNone()) {
|
||||
if (layers.mLayers[i].mImage.IsNone() || suppressBackgroundImage) {
|
||||
continue;
|
||||
}
|
||||
if (layers.mLayers[i].mBlendMode != NS_STYLE_BLEND_NORMAL) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="ahem.css" />
|
||||
<title>Reference: Text that overlaps a background image should be backplated.</title>
|
||||
<style>
|
||||
body {
|
||||
div {
|
||||
font: 20px Ahem;
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
|
|
@ -21,5 +21,5 @@
|
|||
* discussion on bug 1577028.) */
|
||||
</style>
|
||||
</head>
|
||||
<body><span class="fake-backplate">ppppp ppppp </span></body>
|
||||
<div><span class="fake-backplate">ppppp ppppp </span></div>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,13 @@
|
|||
<link rel="stylesheet" type="text/css" href="ahem.css" />
|
||||
<title>Text that overlaps a background image should be backplated.</title>
|
||||
<style>
|
||||
body {
|
||||
div {
|
||||
font: 20px Ahem;
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>ppppp ppppp</body>
|
||||
<div>
|
||||
ppppp ppppp
|
||||
</div>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: Only lines containing visible content (visibility: visible) should receive backplates.</title>
|
||||
<style>
|
||||
body {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.fake-backplate {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<title>Reference: Only lines containing visible content (visibility: visible) should receive backplates.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.fake-backplate {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<div class="outer">
|
||||
<div>
|
||||
<span class="fake-backplate">AAAA</span>
|
||||
<div class="hidden">BBBB</div>
|
||||
|
|
@ -51,5 +48,4 @@
|
|||
4
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Only lines containing visible content (visibility: visible) should receive backplates.</title>
|
||||
<style>
|
||||
body {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<title>Only lines containing visible content (visibility: visible) should receive backplates.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
<div class="outer">
|
||||
<div>
|
||||
AAAA<!-- no whitespace between elements
|
||||
--><div class="hidden">BBBB</div><!-- no whitespace between elements
|
||||
|
|
@ -46,5 +43,4 @@
|
|||
</span>
|
||||
4<!-- no whitespace between elements
|
||||
--></span>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
|
||||
<style>
|
||||
body {
|
||||
background:linear-gradient(blue,blue);
|
||||
}
|
||||
div {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.fake-backplate {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<title>Reference: Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background: linear-gradient(blue,blue);
|
||||
}
|
||||
div {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.fake-backplate {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<div class="outer">
|
||||
<div><span class="fake-backplate">div</span></div>
|
||||
<div style="margin-left: 30px"><span class="fake-backplate">div w/ margin-left</span></div>
|
||||
<div><span style="margin-left: 100px" class="fake-backplate">span w/ margin-left</span></div>
|
||||
|
|
@ -25,5 +22,4 @@
|
|||
<div style="text-align: right"><span class="fake-backplate">div w/ text-align:right</span></div>
|
||||
<div style="direction: rtl; text-align: center"><span class="fake-backplate">div w/ RTL & text-align:center</span></div>
|
||||
<div style="text-indent: 200px"><span class="fake-backplate">div w/ text-indent</span></div>
|
||||
|
||||
</body></html>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
|
||||
<style>
|
||||
body {
|
||||
background:linear-gradient(blue,blue);
|
||||
}
|
||||
div {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<title>Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background:linear-gradient(blue,blue);
|
||||
}
|
||||
div {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="outer">
|
||||
<div>div</div>
|
||||
<div style="margin-left: 30px">div w/ margin-left</div>
|
||||
<div><span style="margin-left: 100px">span w/ margin-left</span></div>
|
||||
|
|
@ -22,5 +19,4 @@
|
|||
<div style="text-align: right">div w/ text-align:right</div>
|
||||
<div style="direction: rtl; text-align: center">div w/ RTL & text-align:center</div>
|
||||
<div style="text-indent: 200px">div w/ text-indent</div>
|
||||
|
||||
</body></html>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: Empty canvas objects and images that do not share lines with text should not receive backplates.</title>
|
||||
<style>
|
||||
body {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
canvas {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.fake-backplate {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<title>Reference: Empty canvas objects and images that do not share lines with text should not receive backplates.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
canvas {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.fake-backplate {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<div class="outer">
|
||||
<canvas></canvas>
|
||||
<br>
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style="border:1px solid black; height:100px; width:100px;">
|
||||
<br>
|
||||
<span class="fake-backplate">Here is some alt text</span>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Empty canvas objects and images that do not share lines with text should not receive backplates.</title>
|
||||
<style>
|
||||
body {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
canvas {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<title>Empty canvas objects and images that do not share lines with text should not receive backplates.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
}
|
||||
canvas {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="outer">
|
||||
<canvas></canvas>
|
||||
<br>
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style="border:1px solid black; height:100px; width:100px;">
|
||||
<br>
|
||||
<img src="data:image/png," alt="Here is some alt text">
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<!doctype html>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!doctype html>
|
||||
<title>background-image on canvas is ignored if in high-contrast</title>
|
||||
<style>
|
||||
body {
|
||||
background-image: linear-gradient(red, red);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,7 +7,7 @@ default-preferences test-pref(browser.display.document_color_use,2) test-pref(br
|
|||
# https://bugzilla.mozilla.org/show_bug.cgi?id=1539212#c25
|
||||
|
||||
== backplate-select-001.html backplate-select-001-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,40-40) == backplate-bg-image-001.html backplate-bg-image-001-ref.html # bug 1577028
|
||||
fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-001.html backplate-bg-image-001-ref.html # bug 1577028
|
||||
fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-002.html backplate-bg-image-002-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,4-4) == backplate-bg-image-003.html backplate-bg-image-003-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-004.html backplate-bg-image-004-ref.html
|
||||
|
|
@ -16,9 +16,12 @@ fuzzy-if(cocoaWidget,255-255,2912-2912) fuzzy-if(gtkWidget,13-13,3200-3200) fuzz
|
|||
fuzzy-if(cocoaWidget,255-255,40-40) == backplate-bg-image-007.html backplate-bg-image-007-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-008.html backplate-bg-image-008-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-009.html backplate-bg-image-009-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,1578-1578) fuzzy-if(winWidget,255-255,353-353) fuzzy-if(Android,255-255,700-700) == backplate-bg-image-010.html backplate-bg-image-010-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,316-320) == backplate-bg-image-011.html backplate-bg-image-011-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,32-32) == backplate-bg-image-012.html backplate-bg-image-012-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,1495-1495) fuzzy-if(winWidget,255-255,353-353) fuzzy-if(Android,255-255,700-700) == backplate-bg-image-010.html backplate-bg-image-010-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,284-320) == backplate-bg-image-011.html backplate-bg-image-011-ref.html
|
||||
fuzzy-if(cocoaWidget,255-255,16-16) == backplate-bg-image-012.html backplate-bg-image-012-ref.html
|
||||
|
||||
test-pref(browser.display.suppress_canvas_background_image_on_forced_colors,true) == bg-image-root-001.html bg-image-root-001-ref.html
|
||||
test-pref(browser.display.suppress_canvas_background_image_on_forced_colors,false) != bg-image-root-001.html bg-image-root-001-ref.html
|
||||
|
||||
fails-if(Android) needs-focus == selection-001.html selection-001-ref.html # bug 1602509
|
||||
pref(browser.display.document_color_use,0) needs-focus != selection-001.html selection-001-ref.html
|
||||
|
|
|
|||
|
|
@ -816,6 +816,18 @@
|
|||
mirror: always
|
||||
rust: true
|
||||
|
||||
# Whether we should suppress the background-image of the canvas (the root
|
||||
# frame) if we're in forced colors mode.
|
||||
#
|
||||
# This is important because some sites use background-image with a plain color
|
||||
# and it causes undesirable results in high-contrast mode.
|
||||
#
|
||||
# See bug 1614921 for example.
|
||||
- name: browser.display.suppress_canvas_background_image_on_forced_colors
|
||||
type: bool
|
||||
value: true
|
||||
mirror: always
|
||||
|
||||
- name: browser.display.focus_ring_on_anything
|
||||
type: bool
|
||||
value: false
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче