mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 00:05:36 +00:00
Bug 1617678: Modify background image styling to only apply URL-sourced images when backplate is enabled. r=emilio
Differential Revision: https://phabricator.services.mozilla.com/D64200 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Morgan Reschenberg
parent
f012a158bd
commit
c1431063a6
@ -6,7 +6,7 @@
|
||||
<style>
|
||||
div {
|
||||
font: 20px Ahem;
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
}
|
||||
.fake-backplate {
|
||||
background-color: white;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<style>
|
||||
div {
|
||||
font: 20px Ahem;
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
width: max-content;
|
||||
}
|
||||
.sample {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.sample {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
width: max-content;
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
padding: 15px;
|
||||
}
|
||||
.relpos {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
padding: 15px;
|
||||
}
|
||||
.relpos {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.sample {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
white-space: pre;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.sample {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
white-space: pre;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
.fake-backplate {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
button {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
/* This forces non-native styling */
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
.fake-backplate {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
/* This forces non-native styling */
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
.fake-backplate {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
/* This forces non-native styling */
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
.fake-backplate {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
/* This forces non-native styling */
|
||||
}
|
||||
.std {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<title>Reference: Only lines containing visible content (visibility: visible) should receive backplates.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<title>Only lines containing visible content (visibility: visible) should receive backplates.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background-image: linear-gradient(blue, blue);
|
||||
background-image: url("blue.png");
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<title>Reference: Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background: linear-gradient(blue,blue);
|
||||
background: url("blue.png");
|
||||
}
|
||||
div {
|
||||
margin-bottom: 30px;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<title>Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background:linear-gradient(blue,blue);
|
||||
background: url("blue.png");
|
||||
}
|
||||
div {
|
||||
margin-bottom: 30px;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<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);
|
||||
background-image: url("blue.png");
|
||||
}
|
||||
canvas {
|
||||
height: 100px;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<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);
|
||||
background-image: url("blue.png");
|
||||
}
|
||||
canvas {
|
||||
height: 100px;
|
||||
|
||||
28
layout/reftests/high-contrast/bg-image-div-001-ref.html
Normal file
28
layout/reftests/high-contrast/bg-image-div-001-ref.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: Non-URL background images should be ignored high-contrast.</title>
|
||||
<style>
|
||||
.outer {
|
||||
background-image: url("blue.png");
|
||||
}
|
||||
.size {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.url {
|
||||
background-image: url("green.png");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="size url"></div><br>
|
||||
<div class="size"></div></br>
|
||||
<div class="size"></div><br>
|
||||
<div class="size"></div><br>
|
||||
<div class="size url"></div><br>
|
||||
<div class="size"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
layout/reftests/high-contrast/bg-image-div-001.html
Normal file
41
layout/reftests/high-contrast/bg-image-div-001.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>When HCM is enabled, only background images sourced from URL's should be rendered. </title>
|
||||
<style>
|
||||
.outer {
|
||||
background-image: url("blue.png");
|
||||
}
|
||||
.size {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.url {
|
||||
background-image: url("green.png");
|
||||
}
|
||||
.gradient {
|
||||
background-image: linear-gradient(red, red);
|
||||
}
|
||||
.urlGradient {
|
||||
background-image: url("red.png"), linear-gradient(red, red);
|
||||
}
|
||||
.gradientUrl {
|
||||
background-image: linear-gradient(red, red), url("red.png");
|
||||
}
|
||||
.urlNone {
|
||||
background-image: url("red.png");
|
||||
background-image: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="size url"></div><br>
|
||||
<div class="size gradient"></div></br>
|
||||
<div class="size urlGradient"></div><br>
|
||||
<div class="size gradientUrl"></div><br>
|
||||
<div class="size url gradient"></div><br>
|
||||
<div class="size urlNone"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,6 +2,6 @@
|
||||
<title>background-image on canvas is ignored if in high-contrast</title>
|
||||
<style>
|
||||
body {
|
||||
background-image: linear-gradient(red, red);
|
||||
background-image: url("red.png");
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
layout/reftests/high-contrast/blue.png
Normal file
BIN
layout/reftests/high-contrast/blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
BIN
layout/reftests/high-contrast/green.png
Normal file
BIN
layout/reftests/high-contrast/green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
BIN
layout/reftests/high-contrast/red.png
Normal file
BIN
layout/reftests/high-contrast/red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 B |
@ -23,6 +23,8 @@ fuzzy-if(cocoaWidget,255-255,16-16) == backplate-bg-image-012.html backplate-bg-
|
||||
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
|
||||
|
||||
== bg-image-div-001.html bg-image-div-001-ref.html
|
||||
|
||||
needs-focus == selection-001.html selection-001-ref.html
|
||||
pref(browser.display.document_color_use,0) needs-focus != selection-001.html selection-001-ref.html
|
||||
|
||||
|
||||
@ -380,6 +380,9 @@ fn application_when_ignoring_colors(
|
||||
// Here we check backplate status to decide if ignoring background-image
|
||||
// is the right decision.
|
||||
match *declaration {
|
||||
// If we've got multiple declarations in the same block, they'll
|
||||
// get overridden at parse time. We should probably adjust this
|
||||
// to turn Ignored decls into `none`. See 1619701
|
||||
PropertyDeclaration::BackgroundColor(ref color) => {
|
||||
if color.is_transparent() {
|
||||
return DeclarationApplication::Apply;
|
||||
@ -405,11 +408,19 @@ fn application_when_ignoring_colors(
|
||||
// special case along with the 'ignored_when_colors_disabled=True' mako line
|
||||
// for the "background-image" property.
|
||||
#[cfg(feature = "gecko")]
|
||||
PropertyDeclaration::BackgroundImage(..) => {
|
||||
PropertyDeclaration::BackgroundImage(ref bkg) => {
|
||||
use crate::values::generics::image::Image;
|
||||
// We should only allow images to be rendered in HCM if the backplate pref
|
||||
// is enabled, and if all the images applied to the background are from URLs.
|
||||
// If one or more background images aren't from URL's (ie. gradients)
|
||||
// we should ignore all background-image styling.
|
||||
if static_prefs::pref!("browser.display.permit_backplate") {
|
||||
DeclarationApplication::Apply
|
||||
if bkg.0.iter().all(|image| matches!(*image, Image::Url(..))) {
|
||||
return DeclarationApplication::Apply;
|
||||
}
|
||||
return DeclarationApplication::Ignore;
|
||||
} else {
|
||||
DeclarationApplication::Ignore
|
||||
return DeclarationApplication::Ignore;
|
||||
}
|
||||
},
|
||||
_ => DeclarationApplication::Ignore,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user