Skip to content

GitLab

T
tangled
Commit 8c7161dc authored by Alison Maher's avatar Alison Maher Committed by Commit Bot
Browse files
Options

Don't adjust SVG text in forced colors mode 

As per the following spec resolution, SVG text no longer should be
adjusted in forced colors mode by default.
https://github.com/w3c/csswg-drafts/issues/3855

Bug: 970285
Change-Id: I11a785f64ca6f7e7840b17d6b59d4ce9b9f8b4e1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2055431Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#743163}
parent 634cde89
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 20 deletions
third_party/blink/renderer/core/css/resolver/style_resolver.cc
View file @ 8c7161dc
...@@ -1632,7 +1632,9 @@ void StyleResolver::ApplyForcedColors(StyleResolverState& state, ...@@ -1632,7 +1632,9 @@ void StyleResolver::ApplyForcedColors(StyleResolverState& state,
ApplyProperty(GetCSSPropertyBorderTopColor(), state, *unset, apply_mask); ApplyProperty(GetCSSPropertyBorderTopColor(), state, *unset, apply_mask);
ApplyProperty(GetCSSPropertyBoxShadow(), state, *unset, apply_mask); ApplyProperty(GetCSSPropertyBoxShadow(), state, *unset, apply_mask);
ApplyProperty(GetCSSPropertyColumnRuleColor(), state, *unset, apply_mask); ApplyProperty(GetCSSPropertyColumnRuleColor(), state, *unset, apply_mask);
ApplyProperty(GetCSSPropertyFill(), state, *unset, apply_mask);
ApplyProperty(GetCSSPropertyOutlineColor(), state, *unset, apply_mask); ApplyProperty(GetCSSPropertyOutlineColor(), state, *unset, apply_mask);
ApplyProperty(GetCSSPropertyStroke(), state, *unset, apply_mask);
ApplyProperty(GetCSSPropertyTextDecorationColor(), state, *unset, ApplyProperty(GetCSSPropertyTextDecorationColor(), state, *unset,
apply_mask); apply_mask);
ApplyProperty(GetCSSPropertyTextShadow(), state, *unset, apply_mask); ApplyProperty(GetCSSPropertyTextShadow(), state, *unset, apply_mask);
...@@ -1641,13 +1643,6 @@ void StyleResolver::ApplyForcedColors(StyleResolverState& state, ...@@ -1641,13 +1643,6 @@ void StyleResolver::ApplyForcedColors(StyleResolverState& state,
ApplyProperty(GetCSSPropertyWebkitTextEmphasisColor(), state, *unset, ApplyProperty(GetCSSPropertyWebkitTextEmphasisColor(), state, *unset,
apply_mask); apply_mask);
// Only revert fill and stroke for elements that handle fill and stroke
// forced colors in the UA stylesheet.
if (state.GetElement().IsSVGElement()) {
ApplyProperty(GetCSSPropertyFill(), state, *unset, apply_mask);
ApplyProperty(GetCSSPropertyStroke(), state, *unset, apply_mask);
}
// Background colors compute to the Canvas system color for all values // Background colors compute to the Canvas system color for all values
// except for the alpha channel. // except for the alpha channel.
RGBA32 prev_bg_color = state.Style()->BackgroundColor().GetColor().Rgb(); RGBA32 prev_bg_color = state.Style()->BackgroundColor().GetColor().Rgb();
...@@ -2134,20 +2129,14 @@ void StyleResolver::CascadeAndApplyForcedColors(StyleResolverState& state, ...@@ -2134,20 +2129,14 @@ void StyleResolver::CascadeAndApplyForcedColors(StyleResolverState& state,
set->SetProperty(CSSPropertyID::kBoxShadow, *unset); set->SetProperty(CSSPropertyID::kBoxShadow, *unset);
set->SetProperty(CSSPropertyID::kColor, *unset); set->SetProperty(CSSPropertyID::kColor, *unset);
set->SetProperty(CSSPropertyID::kColumnRuleColor, *unset); set->SetProperty(CSSPropertyID::kColumnRuleColor, *unset);
set->SetProperty(CSSPropertyID::kFill, *unset);
set->SetProperty(CSSPropertyID::kOutlineColor, *unset); set->SetProperty(CSSPropertyID::kOutlineColor, *unset);
set->SetProperty(CSSPropertyID::kOutlineColor, *unset); set->SetProperty(CSSPropertyID::kStroke, *unset);
set->SetProperty(CSSPropertyID::kTextDecorationColor, *unset); set->SetProperty(CSSPropertyID::kTextDecorationColor, *unset);
set->SetProperty(CSSPropertyID::kTextShadow, *unset); set->SetProperty(CSSPropertyID::kTextShadow, *unset);
set->SetProperty(CSSPropertyID::kWebkitTapHighlightColor, *unset); set->SetProperty(CSSPropertyID::kWebkitTapHighlightColor, *unset);
set->SetProperty(CSSPropertyID::kWebkitTextEmphasisColor, *unset); set->SetProperty(CSSPropertyID::kWebkitTextEmphasisColor, *unset);
// Only revert fill and stroke for elements that handle fill and stroke
// forced colors in the UA stylesheet.
if (state.GetElement().IsSVGElement()) {
set->SetProperty(CSSPropertyID::kFill, *unset);
set->SetProperty(CSSPropertyID::kStroke, *unset);
}
amended_result.AddMatchedProperties(set); amended_result.AddMatchedProperties(set);
for (const auto& matched_properties : result.UaRules()) { for (const auto& matched_properties : result.UaRules()) {
......
third_party/blink/renderer/core/css/svg.css
View file @ 8c7161dc
...@@ -95,13 +95,15 @@ foreignObject { ...@@ -95,13 +95,15 @@ foreignObject {
https://drafts.csswg.org/css-color-adjust-1/#forced-colors-properties https://drafts.csswg.org/css-color-adjust-1/#forced-colors-properties
*/ */
@media forced-colors { @media forced-colors {
svg { svg:root {
color: CanvasText; color: CanvasText;
}
svg {
forced-color-adjust: none; forced-color-adjust: none;
} }
text, foreignObject { foreignObject {
fill: CanvasText;
forced-color-adjust: auto; forced-color-adjust: auto;
} }
} }
third_party/blink/renderer/core/html/resources/forced_colors.css
View file @ 8c7161dc
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
body { body {
background-color: Canvas; background-color: Canvas;
color: CanvasText; color: CanvasText;
fill: currentColor;
} }
:focus { :focus {
......
third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-18.tentative-ref.html → third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-18-ref.html
View file @ 8c7161dc
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Forced colors mode - fill and stroke reference. <title>Forced colors mode - svg.
Only text and foreignObject svg elements should have fill and stroke Only foreignObject svg elements should have styles
overridden in forced colors mode. overridden in forced colors mode.
</title> </title>
<style> <style>
...@@ -11,18 +11,26 @@ ...@@ -11,18 +11,26 @@
</style> </style>
<body> <body>
<svg height="600" width="600"> <svg height="600" width="600">
<text x="0" y="15" fill="WindowText"> <text x="0" y="15" fill="red" stroke="blue">
This text should have a WindowText fill and transparent stroke color in This text should have a red fill and blue stroke color in
forced colors mode. forced colors mode.
</text> </text>
<rect x="0" height="60" y="30" width="180" style="fill: red; stroke: blue;"/> <rect x="0" height="60" y="30" width="180" style="fill: red; stroke: blue;"/>
<foreignObject x="20" y="100" width="160" height="160"> <foreignObject x="20" y="100" width="160" height="160">
<div xmlns="http://www.w3.org/1999/xhtml" style="color: WindowText;"> <div xmlns="http://www.w3.org/1999/xhtml" style="color: orange;">
This text should be WindowText color in forced colors mode. This text should be orange in forced colors mode due to inheritance.
</div> </div>
<svg height="20" width="20"> <svg height="20" width="20">
<rect x="0" height="20" y="0" width="20" style="fill: green; stroke: purple;"/> <rect x="0" height="20" y="0" width="20" style="fill: green; stroke: purple;"/>
</svg> </svg>
</foreignObject> </foreignObject>
</svg> </svg>
<svg height="600" width="600">
<foreignObject x="20" y="100" width="160" height="160" style="color: CanvasText;">
<div xmlns="http://www.w3.org/1999/xhtml">
This text should be CanvasText in forced colors mode.
</div>
</foreignObject>
</svg>
</body> </body>
third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-18.tentative.html → third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-18.html
View file @ 8c7161dc
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Forced colors mode - fill and stroke. <title>Forced colors mode - svg.
Only text and foreignObject svg elements should have fill and stroke Only foreignObject svg elements should have styles
overridden in forced colors mode. overridden in forced colors mode.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-18.tentative-ref.html"> <link rel=match href="forced-colors-mode-18-ref.html">
<body> <body>
<!-- Discussions on SVG styles in forced colors mode are ongoing: <svg height="600" width="600" style="color: orange">
https://github.com/w3c/csswg-drafts/issues/3855 -->
<svg height="600" width="600">
<text x="0" y="15" fill="red" stroke="blue"> <text x="0" y="15" fill="red" stroke="blue">
This text should have a WindowText fill and transparent stroke color in This text should have a red fill and blue stroke color in
forced colors mode. forced colors mode.
</text> </text>
<rect x="0" height="60" y="30" width="180" style="fill: red; stroke: blue;"/> <rect x="0" height="60" y="30" width="180" style="fill: red; stroke: blue;"/>
<foreignObject x="20" y="100" width="160" height="160"> <foreignObject x="20" y="100" width="160" height="160" style="color: blue;">
<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue;"> <div xmlns="http://www.w3.org/1999/xhtml">
This text should be WindowText color in forced colors mode. This text should be orange in forced colors mode due to inheritance.
</div> </div>
<svg height="20" width="20"> <svg height="20" width="20">
<rect x="0" height="20" y="0" width="20" style="fill: green; stroke: purple;"/> <rect x="0" height="20" y="0" width="20" style="fill: green; stroke: purple;"/>
</svg> </svg>
</foreignObject> </foreignObject>
</svg> </svg>
<svg height="600" width="600">
<foreignObject x="20" y="100" width="160" height="160" style="color: blue;">
<div xmlns="http://www.w3.org/1999/xhtml">
This text should be CanvasText in forced colors mode.
</div>
</foreignObject>
</svg>
</body> </body>
third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-26.tentative-ref.html → third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-26-ref.html
View file @ 8c7161dc
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Forced colors mode - fill/stroke inheritance. <title>Forced colors mode - fill/stroke.
Tests that fill and stroke colors are properly inherited from parent elements.
</title> </title>
<style> <style>
body { body {
...@@ -9,8 +8,8 @@ ...@@ -9,8 +8,8 @@
} }
</style> </style>
<body> <body>
The triangle below should be red when forced colors mode is enabled and disabled. The triangle below should be currentColor when forced colors mode.
<svg height="600" width="600"> <svg height="600" width="600">
<path fill="red" stroke="blue" d="M150 0 L75 200 L225 200 Z" /> <path fill="currentColor" d="M150 0 L75 200 L225 200 Z" />
</svg> </svg>
</body> </body>
third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-26.tentative.html → third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-26.html
View file @ 8c7161dc
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Forced colors mode - fill/stroke inheritance. <title>Forced colors mode - fill/stroke.
Tests that fill and stroke colors are properly inherited from parent elements.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-26.tentative-ref.html"> <link rel=match href="forced-colors-mode-26-ref.html">
<style> <style>
div { div {
fill: red; fill: red;
...@@ -13,9 +12,7 @@ ...@@ -13,9 +12,7 @@
</style> </style>
<body> <body>
<div> <div>
The triangle below should be red when forced colors mode is enabled and disabled. The triangle below should be currentColor when forced colors mode.
<!-- Discussions on SVG styles in forced colors mode are ongoing:
https://github.com/w3c/csswg-drafts/issues/3855 -->
<svg height="600" width="600"> <svg height="600" width="600">
<path d="M150 0 L75 200 L225 200 Z" /> <path d="M150 0 L75 200 L225 200 Z" />
</svg> </svg>
......
third_party/blink/web_tests/virtual/forced-high-contrast-colors/fast/css/forced-colors-mode/backplate/forced-colors-mode-backplate-11.html
View file @ 8c7161dc
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests backplate is drawn behind SVG text. Tests backplate is NOT drawn behind SVG text.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<style> <style>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div> <div>
<svg> <svg>
<text x="50" y="50" width="226" height="11" font-family="Ahem"> <text x="50" y="50" width="226" height="11" font-family="Ahem">
This text should have a backplate in <tspan>forced colors mode.</tspan> This text should NOT have a backplate in <tspan>forced colors mode.</tspan>
</text> </text>
</svg> </svg>
</div> </div>
......
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