Commit 4fcdb087 authored by Alison Maher's avatar Alison Maher Committed by Commit Bot

Respect author/user system colors in Forced Colors Mode

As resolved by the CSSWG [1], we should respect system color rules
set by the author/user in Forced Colors Mode. This CL adds the logic
to accomplish this.

[1] https://github.com/w3c/csswg-drafts/issues/4178

Bug: 970285
Change-Id: I9eb4a33f8767f48d0c0a6fd65faec15f11edc140
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2390865
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: default avatarAnders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805469}
parent c298a0e0
...@@ -550,32 +550,49 @@ void StyleCascade::ForceColors() { ...@@ -550,32 +550,49 @@ void StyleCascade::ForceColors() {
int bg_color_alpha = int bg_color_alpha =
style->VisitedDependentColor(GetCSSPropertyBackgroundColor()).Alpha(); style->VisitedDependentColor(GetCSSPropertyBackgroundColor()).Alpha();
const SVGComputedStyle& svg_style = style->SvgStyle();
MaybeForceColor(GetCSSPropertyColor());
MaybeForceColor(GetCSSPropertyBackgroundColor()); MaybeForceColor(GetCSSPropertyColor(), style->GetColor());
MaybeForceColor(GetCSSPropertyBorderBottomColor()); MaybeForceColor(GetCSSPropertyBackgroundColor(), style->BackgroundColor());
MaybeForceColor(GetCSSPropertyBorderLeftColor()); MaybeForceColor(GetCSSPropertyBorderBottomColor(),
MaybeForceColor(GetCSSPropertyBorderRightColor()); style->BorderBottomColor());
MaybeForceColor(GetCSSPropertyBorderTopColor()); MaybeForceColor(GetCSSPropertyBorderLeftColor(), style->BorderLeftColor());
MaybeForceColor(GetCSSPropertyFill()); MaybeForceColor(GetCSSPropertyBorderRightColor(), style->BorderRightColor());
MaybeForceColor(GetCSSPropertyOutlineColor()); MaybeForceColor(GetCSSPropertyBorderTopColor(), style->BorderTopColor());
MaybeForceColor(GetCSSPropertyStroke()); MaybeForceColor(GetCSSPropertyFill(), svg_style.FillPaint().GetColor());
MaybeForceColor(GetCSSPropertyTextDecorationColor()); MaybeForceColor(GetCSSPropertyOutlineColor(), style->OutlineColor());
MaybeForceColor(GetCSSPropertyColumnRuleColor()); MaybeForceColor(GetCSSPropertyStroke(), svg_style.StrokePaint().GetColor());
MaybeForceColor(GetCSSPropertyWebkitTapHighlightColor()); MaybeForceColor(GetCSSPropertyTextDecorationColor(),
MaybeForceColor(GetCSSPropertyWebkitTextEmphasisColor()); style->TextDecorationColor());
MaybeForceColor(GetCSSPropertyInternalVisitedColor()); MaybeForceColor(GetCSSPropertyColumnRuleColor(), style->ColumnRuleColor());
MaybeForceColor(GetCSSPropertyInternalVisitedBackgroundColor()); MaybeForceColor(GetCSSPropertyWebkitTapHighlightColor(),
MaybeForceColor(GetCSSPropertyInternalVisitedBorderBottomColor()); style->TapHighlightColor());
MaybeForceColor(GetCSSPropertyInternalVisitedBorderLeftColor()); MaybeForceColor(GetCSSPropertyWebkitTextEmphasisColor(),
MaybeForceColor(GetCSSPropertyInternalVisitedBorderRightColor()); style->TextEmphasisColor());
MaybeForceColor(GetCSSPropertyInternalVisitedBorderTopColor()); MaybeForceColor(GetCSSPropertyInternalVisitedColor(),
MaybeForceColor(GetCSSPropertyInternalVisitedFill()); style->InternalVisitedColor());
MaybeForceColor(GetCSSPropertyInternalVisitedOutlineColor()); MaybeForceColor(GetCSSPropertyInternalVisitedBackgroundColor(),
MaybeForceColor(GetCSSPropertyInternalVisitedStroke()); style->InternalVisitedBackgroundColor());
MaybeForceColor(GetCSSPropertyInternalVisitedTextDecorationColor()); MaybeForceColor(GetCSSPropertyInternalVisitedBorderBottomColor(),
MaybeForceColor(GetCSSPropertyInternalVisitedColumnRuleColor()); style->InternalVisitedBorderBottomColor());
MaybeForceColor(GetCSSPropertyInternalVisitedTextEmphasisColor()); MaybeForceColor(GetCSSPropertyInternalVisitedBorderLeftColor(),
style->InternalVisitedBorderLeftColor());
MaybeForceColor(GetCSSPropertyInternalVisitedBorderRightColor(),
style->InternalVisitedBorderRightColor());
MaybeForceColor(GetCSSPropertyInternalVisitedBorderTopColor(),
style->InternalVisitedBorderTopColor());
MaybeForceColor(GetCSSPropertyInternalVisitedFill(),
svg_style.InternalVisitedFillPaint().GetColor());
MaybeForceColor(GetCSSPropertyInternalVisitedOutlineColor(),
style->InternalVisitedOutlineColor());
MaybeForceColor(GetCSSPropertyInternalVisitedStroke(),
svg_style.InternalVisitedStrokePaint().GetColor());
MaybeForceColor(GetCSSPropertyInternalVisitedTextDecorationColor(),
style->InternalVisitedTextDecorationColor());
MaybeForceColor(GetCSSPropertyInternalVisitedColumnRuleColor(),
style->InternalVisitedColumnRuleColor());
MaybeForceColor(GetCSSPropertyInternalVisitedTextEmphasisColor(),
style->InternalVisitedTextEmphasisColor());
auto* none = CSSIdentifierValue::Create(CSSValueID::kNone); auto* none = CSSIdentifierValue::Create(CSSValueID::kNone);
StyleBuilder::ApplyProperty(GetCSSPropertyTextShadow(), state_, *none); StyleBuilder::ApplyProperty(GetCSSPropertyTextShadow(), state_, *none);
...@@ -589,12 +606,15 @@ void StyleCascade::ForceColors() { ...@@ -589,12 +606,15 @@ void StyleCascade::ForceColors() {
style->GetCurrentColor(), WebColorScheme::kLight, bg_color_alpha))); style->GetCurrentColor(), WebColorScheme::kLight, bg_color_alpha)));
} }
void StyleCascade::MaybeForceColor(const CSSProperty& property) { void StyleCascade::MaybeForceColor(const CSSProperty& property,
const StyleColor& color) {
DCHECK(GetDocument().InForcedColorsMode() && DCHECK(GetDocument().InForcedColorsMode() &&
state_.Style()->ForcedColorAdjust() != EForcedColorAdjust::kNone); state_.Style()->ForcedColorAdjust() != EForcedColorAdjust::kNone);
// TODO(almaher): Return early if the current computed color is already a // Preserve the author/user color if it computes to a system color.
// system color. if (color.IsSystemColor())
return;
StyleBuilder::ApplyProperty( StyleBuilder::ApplyProperty(
property, state_, *GetForcedColorValue(property.GetCSSPropertyName())); property, state_, *GetForcedColorValue(property.GetCSSPropertyName()));
} }
......
...@@ -36,6 +36,7 @@ class CSSVariableData; ...@@ -36,6 +36,7 @@ class CSSVariableData;
class CSSVariableReferenceValue; class CSSVariableReferenceValue;
class CustomProperty; class CustomProperty;
class MatchResult; class MatchResult;
class StyleColor;
class StyleResolverState; class StyleResolverState;
namespace cssvalue { namespace cssvalue {
...@@ -209,7 +210,7 @@ class CORE_EXPORT StyleCascade { ...@@ -209,7 +210,7 @@ class CORE_EXPORT StyleCascade {
// Update the ComputedStyle to use the colors specified in Forced Colors Mode. // Update the ComputedStyle to use the colors specified in Forced Colors Mode.
// https://www.w3.org/TR/css-color-adjust-1/#forced // https://www.w3.org/TR/css-color-adjust-1/#forced
void ForceColors(); void ForceColors();
void MaybeForceColor(const CSSProperty& property); void MaybeForceColor(const CSSProperty& property, const StyleColor& color);
const CSSValue* GetForcedColorValue(CSSPropertyName name); const CSSValue* GetForcedColorValue(CSSPropertyName name);
// Whether or not we are calculating the style for the root element. // Whether or not we are calculating the style for the root element.
......
...@@ -61,6 +61,7 @@ class CORE_EXPORT StyleColor { ...@@ -61,6 +61,7 @@ class CORE_EXPORT StyleColor {
bool IsCurrentColor() const { bool IsCurrentColor() const {
return color_keyword_ == CSSValueID::kCurrentcolor; return color_keyword_ == CSSValueID::kCurrentcolor;
} }
bool IsSystemColor() const { return IsSystemColor(color_keyword_); }
Color GetColor() const { Color GetColor() const {
DCHECK(IsNumeric()); DCHECK(IsNumeric());
return color_; return color_;
......
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
forced-color-adjust: none; forced-color-adjust: none;
outline-color: CanvasText; outline-color: CanvasText;
outline-style: solid; outline-style: solid;
-webkit-column-count: 3; column-count: 3;
-webkit-column-gap: 40px; column-gap: 40px;
-webkit-column-rule-color: CanvasText; column-rule-color: CanvasText;
-webkit-column-rule-style: solid; column-rule-style: solid;
} }
</style> </style>
<body> <body>
......
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
h1 { h1 {
outline-color: rgb(0, 0, 255); outline-color: rgb(0, 0, 255);
outline-style: solid; outline-style: solid;
-webkit-column-count: 3; column-count: 3;
-webkit-column-gap: 40px; column-gap: 40px;
-webkit-column-rule-color: rgb(0, 0, 255); column-rule-color: rgb(0, 0, 255);
-webkit-column-rule-style: solid; column-rule-style: solid;
} }
</style> </style>
<body> <body>
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
forced-color-adjust: none; forced-color-adjust: none;
text-decoration: underline; text-decoration: underline;
text-decoration-color: CanvasText; text-decoration-color: CanvasText;
text-emphasis: '*' CanvasText;
-webkit-text-emphasis: '*' CanvasText; -webkit-text-emphasis: '*' CanvasText;
} }
</style> </style>
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
p { p {
text-decoration: underline; text-decoration: underline;
text-decoration-color: red; text-decoration-color: red;
text-emphasis: '*' blue;
-webkit-text-emphasis: '*' blue; -webkit-text-emphasis: '*' blue;
} }
</style> </style>
......
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test forced colors mode on table styles with sys colors</title>
<style>
table {
border-collapse: collapse;
forced-color-adjust: none;
}
td, th {
border: 1px solid LinkText;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: CanvasText;
}
tr:nth-child(odd) {
color: Canvas;
text-decoration: underline;
text-decoration-color: LinkText;
text-emphasis: '*' LinkText;
-webkit-text-emphasis: '*' LinkText;
}
</style>
<table>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
</table>
\ No newline at end of file
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test forced colors mode on table styles with sys colors</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-29-ref.html">
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid LinkText;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: CanvasText;
}
tr:nth-child(odd) {
color: Canvas;
text-decoration: underline;
text-decoration-color: LinkText;
text-emphasis: '*' LinkText;
-webkit-text-emphasis: '*' LinkText;
}
</style>
<table>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
</table>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - fill/stroke with sys colors.
</title>
<style>
div {
fill: LinkText;
forced-color-adjust: none;
stroke: Link;
}
</style>
<div>
The triangle below should preserve the LinkText and Link fill/stroke colors
in forced colors mode.
<svg height="600" width="600">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - fill/stroke with sys colors.
</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-30-ref.html">
<style>
div {
fill: LinkText;
stroke: Link;
}
</style>
<div>
The triangle below should preserve the LinkText and Link fill/stroke colors
in forced colors mode.
<svg height="600" width="600">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - outline and column color with sys colors.</title>
<style>
h1 {
forced-color-adjust: none;
outline-color: LinkText;
outline-style: solid;
column-count: 3;
column-gap: 40px;
column-rule-color: LinkText;
column-rule-style: solid;
}
</style>
<h1>
The outline-color and column-rule-color should be LinkText when forced colors
mode is enabled.
</h1>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - outline and column color with sys colors.</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-31-ref.html">
<style>
:root {
--hc-color: LinkText;
}
h1 {
outline-color: var(--hc-color);
outline-style: solid;
column-count: 3;
column-gap: 40px;
column-rule-color: var(--hc-color);
column-rule-style: solid;
}
</style>
<h1>
The outline-color and column-rule-color should be LinkText when forced colors
mode is enabled.
</h1>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - webkit-tap-highlight-color with sys color.</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
a {
-webkit-tap-highlight-color: GrayText;
}
</style>
<a href="https://www.wikipedia.org" id="link">
This link color should not be overridden when forced colors mode is enabled.
</a>
<a href="" id="ref" style="forced-color-adjust:none"></a>
<script>
var gray_text = getComputedStyle(ref).webkitTapHighlightColor;
test(function(){
assert_equals(getComputedStyle(link).webkitTapHighlightColor, gray_text);
}, "Checks hyperlinks are not overridden if a sys color is used.");
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test forced colors mode :visited colors</title>
<style>
a {
background-color: Canvas;
border: 1px solid VisitedText;
color: VisitedText;
forced-color-adjust: none;
text-decoration: line-through;
text-decoration-color: VisitedText;
text-emphasis: '*' VisitedText;
-webkit-text-emphasis: '*' VisitedText;
}
</style>
<a href="">Visited link.</a>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test forced colors mode :visited colors</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-33-ref.html">
<style>
a {
background-color: white;
border: 1px solid;
text-decoration: line-through;
text-emphasis: '*';
-webkit-text-emphasis: '*';
}
a:visited {
background-color: orange;
border: yellow;
color: red;
text-decoration-color: purple;
text-emphasis: blue;
-webkit-text-emphasis: blue;
}
</style>
<a href="">Visited link.</a>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test forced colors mode :visited colors with sys colors</title>
<style>
a {
background-color: CanvasText;
border: 1px solid GrayText;
color: GrayText;
forced-color-adjust: none;
text-decoration: line-through;
text-decoration-color: GrayText;
text-emphasis: '*' GrayText;
-webkit-text-emphasis: '*' GrayText;
}
</style>
<a href="">Visited link.</a>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test forced colors mode :visited colors with sys colors</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-34-ref.html">
<style>
a {
background-color: white;
border: 1px solid;
text-decoration: line-through;
text-emphasis: '*';
-webkit-text-emphasis: '*';
}
a:visited {
background-color: CanvasText;
border: GrayText;
color: GrayText;
text-decoration-color: GrayText;
text-emphasis: GrayText;
-webkit-text-emphasis: GrayText;
}
</style>
<a href="">Visited link.</a>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - :visited fill/stroke.
</title>
<style>
a {
fill: VisitedText;
forced-color-adjust: none;
}
</style>
<a href="">
The triangle below should not preserve the blue/green fill/stroke colors
in forced colors mode.
<svg height="600" width="600">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
</a>
\ No newline at end of file
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - :visited fill/stroke.
</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-35-ref.html">
<style>
a {
fill: CurrentColor;
stroke: CurrentColor;
}
a:visited {
fill: blue;
stroke: green;
}
</style>
<a href="">
The triangle below should not preserve the blue/green fill/stroke colors
in forced colors mode.
<svg height="600" width="600">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
</a>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - :visited fill/stroke with sys colors.
</title>
<style>
a {
fill: CanvasText;
forced-color-adjust: none;
stroke: LinkText;
}
</style>
<a href="">
The triangle below should preserve the CanvasText/LinkText fill/stroke colors
in forced colors mode.
<svg height="600" width="600">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
</a>
\ No newline at end of file
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - :visited fill/stroke with sys colors.
</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-36-ref.html">
<style>
a {
fill: Canvas;
stroke: Canvas;
}
a:visited {
fill: CanvasText;
stroke: LinkText;
}
</style>
<a href="">
The triangle below should preserve the CanvasText/LinkText fill/stroke colors
in forced colors mode.
<svg height="600" width="600">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
</a>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - :visited outline and column color.</title>
<style>
a {
forced-color-adjust: none;
outline-color: VisitedText;
outline-style: solid;
column-count: 3;
column-gap: 40px;
column-rule-color: VisitedText;
column-rule-style: solid;
}
</style>
<a href="">
The outline-color and column-rule-color should be overridden when forced colors
mode is enabled.
</a>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - :visited outline and column color.</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-37-ref.html">
<style>
:root {
--hc-color: red;
}
a {
outline-style: solid;
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
}
a:visited {
outline-color: var(--hc-color);
column-rule-color: var(--hc-color);
}
</style>
<a href="">
The outline-color and column-rule-color should be overridden when forced colors
mode is enabled.
</a>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - :visited outline and column color with sys colors.</title>
<style>
a {
forced-color-adjust: none;
outline-color: GrayText;
outline-style: solid;
column-count: 3;
column-gap: 40px;
column-rule-color: GrayText;
column-rule-style: solid;
}
</style>
<a href="">
The outline-color and column-rule-color should be GrayText when forced colors
mode is enabled.
</a>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - :visited outline and column color with sys colors.</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-38-ref.html">
<style>
:root {
--hc-color: GrayText;
}
a {
outline-style: solid;
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
}
a:visited {
outline-color: var(--hc-color);
column-rule-color: var(--hc-color);
}
</style>
<a href="">
The outline-color and column-rule-color should be GrayText when forced colors
mode is enabled.
</a>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment