commit 47014eccd519b247a4f45418ba66d44f5a26bc0c parent 5406e9698cf2cd3861ff356412e36d91776a6744 Author: Daniel Holbert <dholbert@cs.stanford.edu> Date: Wed, 3 Dec 2025 16:52:22 +0000 Bug 2003604: Use a monospace font in some css-highlight-api WPTs, to avoid spurious failures from one glyph overlapping the background of the next glyph. r=layout-reviewers,dshin,jfkthame The paint ordering in these tests (of the highlight-background vs. ink of adjacent glyphs) is different in the testcase and reference case, at least in Gecko and WebKit (though not in Chromium[1]). This creates the potential for spurious failures in Gecko and WebKit, if the chosen font happens to have glyphs that draw close together (such that one glyph might have a piece that protrudes to overlap the bounding-box of the next glyph). This patch avoids these spurious failures by explicitly using a monospace font; this reduces the likelihood of glyphs drawing close together and experiencing the sort of overlap that would reveal the paint-order differences between the testcase & reference case. This patch also adds some letter-spacing to one of the testscases; this is needed to fully avoid overlap in the case of an "O" glyph that's adjacent to a highlight and is wide enough in the Windows monospace font to still trigger this problematic overlap (if it weren't for this added letter-spacing). [1] https://issues.chromium.org/issues/465531995 Differential Revision: https://phabricator.services.mozilla.com/D274954 Diffstat:
9 files changed, 32 insertions(+), 12 deletions(-)
diff --git a/testing/web-platform/meta/css/css-highlight-api/highlight-text-across-elements.html.ini b/testing/web-platform/meta/css/css-highlight-api/highlight-text-across-elements.html.ini @@ -1,4 +0,0 @@ -[highlight-text-across-elements.html] - expected: - if os == "win": FAIL - if os == "android": FAIL diff --git a/testing/web-platform/meta/css/css-highlight-api/highlight-text-replace.html.ini b/testing/web-platform/meta/css/css-highlight-api/highlight-text-replace.html.ini @@ -1,4 +0,0 @@ -[highlight-text-replace.html] - expected: - if os == "win": FAIL - if os == "mac": FAIL diff --git a/testing/web-platform/meta/css/css-highlight-api/highlight-text.html.ini b/testing/web-platform/meta/css/css-highlight-api/highlight-text.html.ini @@ -1,4 +0,0 @@ -[highlight-text.html] - expected: - if os == "win": FAIL - if os == "mac": FAIL diff --git a/testing/web-platform/tests/css/css-highlight-api/highlight-text-across-elements-ref.html b/testing/web-platform/tests/css/css-highlight-api/highlight-text-across-elements-ref.html @@ -2,6 +2,9 @@ <html> <head> <style> + :root { + font-family: monospace; + } #style1 { background-color: yellow; color:green; diff --git a/testing/web-platform/tests/css/css-highlight-api/highlight-text-across-elements.html b/testing/web-platform/tests/css/css-highlight-api/highlight-text-across-elements.html @@ -7,6 +7,13 @@ <link rel="match" href="highlight-text-across-elements-ref.html"> <meta name="assert" content="Highlights should be able to be specified across elements."> <style> + :root { + /* This reduces the likelihood that a highlight background-area + will overlap with the previous glyph. That overlap is worth + avoiding, because the previous glyph's overlapping part will get + clipped in the reference case, but might not in the testcase. */ + font-family: monospace; + } ::highlight(example-highlight1) { background-color: yellow; color:green; diff --git a/testing/web-platform/tests/css/css-highlight-api/highlight-text-ref.html b/testing/web-platform/tests/css/css-highlight-api/highlight-text-ref.html @@ -2,6 +2,10 @@ <html> <head> <style> + :root { + font-family: monospace; + letter-spacing: 2px; + } #style1 { background-color: yellow; color:green; diff --git a/testing/web-platform/tests/css/css-highlight-api/highlight-text-replace-ref.html b/testing/web-platform/tests/css/css-highlight-api/highlight-text-replace-ref.html @@ -2,6 +2,9 @@ <html> <head> <style> + :root { + font-family: monospace; + } #highlight { background-color: yellow; color:green; diff --git a/testing/web-platform/tests/css/css-highlight-api/highlight-text-replace.html b/testing/web-platform/tests/css/css-highlight-api/highlight-text-replace.html @@ -7,6 +7,13 @@ <link rel="match" href="highlight-text-replace-ref.html"> <meta name="assert" content="Multiple highlights should be able to be specified."> <style> + :root { + /* This reduces the likelihood that a highlight background-area + will overlap with the previous glyph. That overlap is worth + avoiding, because the previous glyph's overlapping part will get + clipped in the reference case, but might not in the testcase. */ + font-family: monospace; + } ::highlight(example-highlight) { background-color: yellow; color:green; diff --git a/testing/web-platform/tests/css/css-highlight-api/highlight-text.html b/testing/web-platform/tests/css/css-highlight-api/highlight-text.html @@ -7,6 +7,14 @@ <link rel="match" href="highlight-text-ref.html"> <meta name="assert" content="Multiple highlights should be able to be specified."> <style> + :root { + /* These reduce the likelihood that a highlight background-area + will overlap with the previous glyph. That overlap is worth + avoiding, because the previous glyph's overlapping part will get + clipped in the reference case, but might not in the testcase. */ + font-family: monospace; + letter-spacing: 2px; + } ::highlight(example-highlight1) { background-color: yellow; color:green;