commit db305ee0a455d454d7406926e4b0f6735a9e63a3
parent 16cadbc98e9a1eafc0d7e88e4abafb91ae3d1d9a
Author: Jan-Niklas Jaeschke <jjaschke@mozilla.com>
Date: Thu, 9 Oct 2025 13:40:55 +0000
Bug 1974121, part 2 - Text Fragments: Add adaptive default colors for ::target-text based on the background. r=layout-reviewers,emilio
Differential Revision: https://phabricator.services.mozilla.com/D259690
Diffstat:
12 files changed, 117 insertions(+), 5 deletions(-)
diff --git a/layout/generic/nsTextPaintStyle.cpp b/layout/generic/nsTextPaintStyle.cpp
@@ -7,6 +7,7 @@
#include "nsTextPaintStyle.h"
#include "mozilla/LookAndFeel.h"
+#include "mozilla/RelativeLuminanceUtils.h"
#include "nsCSSColorUtils.h"
#include "nsCSSRendering.h"
#include "nsFrameSelection.h"
@@ -217,6 +218,7 @@ void nsTextPaintStyle::GetTargetTextColors(nscolor* aForeColor,
nscolor* aBackColor) {
NS_ASSERTION(aForeColor, "aForeColor is null");
NS_ASSERTION(aBackColor, "aBackColor is null");
+ InitCommonColors();
const RefPtr<const ComputedStyle> targetTextStyle =
mFrame->ComputeTargetTextStyle();
if (targetTextStyle) {
@@ -227,10 +229,27 @@ void nsTextPaintStyle::GetTargetTextColors(nscolor* aForeColor,
return;
}
- *aBackColor =
- LookAndFeel::Color(LookAndFeel::ColorID::TargetTextBackground, mFrame);
- *aForeColor =
- LookAndFeel::Color(LookAndFeel::ColorID::TargetTextForeground, mFrame);
+ const auto darkSchemeBackground = LookAndFeel::Color(
+ LookAndFeel::ColorID::TargetTextBackground,
+ LookAndFeel::ColorScheme::Dark, LookAndFeel::UseStandins::No);
+ const auto lightSchemeBackground = LookAndFeel::Color(
+ LookAndFeel::ColorID::TargetTextBackground,
+ LookAndFeel::ColorScheme::Light, LookAndFeel::UseStandins::No);
+ const auto lightSchemeForeground = LookAndFeel::Color(
+ LookAndFeel::ColorID::TargetTextForeground,
+ LookAndFeel::ColorScheme::Light, LookAndFeel::UseStandins::No);
+ const auto darkSchemeForeground = LookAndFeel::Color(
+ LookAndFeel::ColorID::TargetTextForeground,
+ LookAndFeel::ColorScheme::Dark, LookAndFeel::UseStandins::No);
+ const float ratioLightScheme = RelativeLuminanceUtils::ContrastRatio(
+ lightSchemeBackground, mFrameBackgroundColor);
+ const float ratioDarkScheme = RelativeLuminanceUtils::ContrastRatio(
+ darkSchemeBackground, mFrameBackgroundColor);
+
+ *aBackColor = ratioLightScheme > ratioDarkScheme ? lightSchemeBackground
+ : darkSchemeBackground;
+ *aForeColor = ratioLightScheme > ratioDarkScheme ? lightSchemeForeground
+ : darkSchemeForeground;
}
bool nsTextPaintStyle::GetCustomHighlightTextColor(nsAtom* aHighlightName,
diff --git a/layout/reftests/reftest.list b/layout/reftests/reftest.list
@@ -340,6 +340,9 @@ include table-width/reftest.list
include ../tables/reftests/reftest.list
+# target-text/
+include target-text/reftest.list
+
# text/
include text/reftest.list
diff --git a/layout/reftests/target-text/reftest.list b/layout/reftests/target-text/reftest.list
@@ -0,0 +1,6 @@
+== target-text-light.html target-text-light-ref.html
+== target-text-bg-is-same-as-light.html target-text-bg-is-same-as-light-ref.html
+# Tests are deactivated on Linux, because dark mode detection does not work properly on CI.
+# https://bugzil.la/1993479
+skip-if(gtkWidget) == target-text-black.html target-text-black-ref.html
+skip-if(gtkWidget) == target-text-bg-is-same-as-dark.html target-text-bg-is-same-as-dark-ref.html
diff --git a/layout/reftests/target-text/target-text-bg-is-same-as-dark-ref.html b/layout/reftests/target-text/target-text-bg-is-same-as-dark-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: Background color is yellow-20, therefore the highlight must be yellow-00</title>
+<style>
+ body { background:#f5cc58; }
+
+ .hl { background:#fff4d0; color:#000; }
+</style>
+
+<p><span class="hl">HighlightThis</span> is a keyword to test ::target-text highlight colour.</p>
diff --git a/layout/reftests/target-text/target-text-bg-is-same-as-dark.html b/layout/reftests/target-text/target-text-bg-is-same-as-dark.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Background color is yellow-20, therefore the highlight must be yellow-00</title>
+<script>
+ location.hash = '#:~:text=HighlightThis';
+</script>
+<style>
+ body { background:#f5cc58; }
+</style>
+
+<p>HighlightThis is a keyword to test ::target-text highlight colour.</p>
diff --git a/layout/reftests/target-text/target-text-bg-is-same-as-light-ref.html b/layout/reftests/target-text/target-text-bg-is-same-as-light-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: Background color is yellow-00, therefore the highlight must be yellow-20</title>
+<style>
+ body { background:#fff4d0; }
+
+ .hl { background:#f5cc58; color:#000; }
+</style>
+
+<p><span class="hl">HighlightThis</span> is a keyword to test ::target-text highlight colour.</p>
diff --git a/layout/reftests/target-text/target-text-bg-is-same-as-light.html b/layout/reftests/target-text/target-text-bg-is-same-as-light.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Background color is yellow-05, therefore the highlight must be yellow-20</title>
+<script>
+ location.hash = '#:~:text=HighlightThis';
+</script>
+<style>
+ body { background:#fff4d0; }
+</style>
+
+<p>HighlightThis is a keyword to test ::target-text highlight colour.</p>
diff --git a/layout/reftests/target-text/target-text-black-ref.html b/layout/reftests/target-text/target-text-black-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: Dark background should use yellow-00 for highlight</title>
+<style>
+ body { background:#000; color:#fff; }
+ .hl { background:#fff4d0; color:#000; }
+</style>
+
+<p><span class="hl">HighlightThis</span> is a keyword to test ::target-text highlight colour.</p>
diff --git a/layout/reftests/target-text/target-text-black.html b/layout/reftests/target-text/target-text-black.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Dark background should use yellow-05 for highlight</title>
+<script>
+ location.hash = '#:~:text=HighlightThis';
+</script>
+<style>
+ body { background:#000; color: #fff; }
+</style>
+
+<p>HighlightThis is a keyword to test ::target-text highlight colour.</p>
diff --git a/layout/reftests/target-text/target-text-light-ref.html b/layout/reftests/target-text/target-text-light-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: Light background should use yellow-20 for highlight</title>
+<style>
+ .hl { background:#f5cc58; color:#000; }
+</style>
+
+<p><span class="hl">HighlightThis</span> is a keyword to test ::target-text highlight colour.</p>
diff --git a/layout/reftests/target-text/target-text-light.html b/layout/reftests/target-text/target-text-light.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Light background should use yellow-20 for highlight</title>
+<script>
+ location.hash = '#:~:text=HighlightThis';
+</script>
+
+<p>HighlightThis is a keyword to test ::target-text highlight colour.</p>
diff --git a/widget/nsXPLookAndFeel.cpp b/widget/nsXPLookAndFeel.cpp
@@ -713,7 +713,7 @@ nscolor nsXPLookAndFeel::GetStandinForNativeColor(ColorID aID,
COLOR(Activetext, 0xee, 0x00, 0x00)
COLOR(Visitedtext, 0x55, 0x1A, 0x8B)
COLOR(MozAutofillBackground, 0xff, 0xfc, 0xc8)
- COLOR(TargetTextBackground, 0xff, 0xeb, 0xcd)
+ COLOR(TargetTextBackground, 0xf5, 0xcc, 0x58) // --yellow-20
COLOR(TargetTextForeground, 0x00, 0x00, 0x00)
default:
break;
@@ -872,6 +872,12 @@ Maybe<nscolor> nsXPLookAndFeel::GenericDarkColor(ColorID aID) {
// contrast with our white-ish FieldText.
color = NS_RGB(0x72, 0x6c, 0x00);
break;
+ case ColorID::TargetTextBackground:
+ color = NS_RGB(0xff, 0xf4, 0xd0); // --yellow-0
+ break;
+ case ColorID::TargetTextForeground:
+ color = NS_RGB(0x00, 0x00, 0x00);
+ break;
default:
return Nothing();
}
