Bug 2012579 [wpt PR 57340] - Use Ahem font in WPT old-content-is-inline.html, a=testonly

Automatic update from web-platform-tests
Use Ahem font in WPT old-content-is-inline.html (#57340)

This testcase is only valid (i.e. it only actually matches its reference case)
if the text doesn't linewrap.  So it needs to specify a specific font in order
to have some guarantees that linewrapping won't happen.

Hence, this patch switches to the Ahem font, and reduces the length of the
strings so that they're short enough to fit on a single line in that font.

This patch also removes the styling that was making the text transparent, and
makes the text blue instead; with the Ahem font, we're not at as much risk of
fuzzy failures from subtle antialiasing differences.

Fixes web-platform-tests/interop#1250
--

wpt-commits: fadfaa1a530fbbc35dddef0d2651f89a8a24a23d
wpt-pr: 57340

Author: dholbert

testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html

@@ -2,9 +2,14 @@
 <title>View transitions: Old content is an inline element (ref)</title>
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
+<link rel="stylesheet" href="/fonts/ahem.css">
 
 <style>
-:root { background-color: rebeccapurple; }
+:root {
+  background-color: rebeccapurple;
+  font: 20px/1 Ahem;
+}
+
 body { margin: 0; }
 
 .container {
@@ -31,7 +36,7 @@
 
 .inline {
   background-color: limegreen;
-  color: rgba(0, 0, 0, 0);
+  color: blue;
 }
 
 .transitioned .inline {
@@ -49,20 +54,20 @@
 </style>
 
 <div class="container start">
-  <span>FILLER FILLER</span>
-  <span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
+  <span>FILL FILL</span>
+  <span id="start" class="inline">INL INL</span>
   <p>START STATE</p>
 </div>
 
 <div class="container end transitioned">
-  <span>FILLER FILLER</span>
-  <span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
+  <span>FILL FILL</span>
+  <span id="end" class="inline">INL INL</span>
   <p>END STATE</p>
 </div>
 
 <div id="dummyEndInline">
-  <span style="opacity:0">FILLER FILLER</span>
-  <span class="inline">INLINE INLINE INLINE INLINE</span>
+  <span style="opacity:0">FILL FILL</span>
+  <span class="inline">INL INL</span>
 </div>
 <script>
   let endWidth = document.getElementById('end').getBoundingClientRect().width;

testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html

@@ -4,11 +4,15 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="old-content-is-inline-ref.html">
-<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-500">
+<link rel="stylesheet" href="/fonts/ahem.css">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
-body { margin : 0; }
+body {
+  margin : 0;
+  font: 20px/1 Ahem;
+}
+
 .container {
   position: absolute;
   left: 100px;
@@ -35,8 +39,7 @@
 
 .inline {
   background-color: limegreen;
-  /* allow small pixel diff in text */
-  color: rgba(0, 0, 0, 0);
+  color: blue;
 }
 
 .start .inline {
@@ -105,8 +108,8 @@
 starting position.
 -->
 <div class="container start">
-  <span>FILLER FILLER</span>
-  <span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
+  <span>FILL FILL</span>
+  <span id="start" class="inline">INL INL</span>
   <p>START STATE</p>
 </div>
 
@@ -115,8 +118,8 @@
 ending position.
 -->
 <div class="container end">
-  <span>FILLER FILLER</span>
-  <span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
+  <span>FILL FILL</span>
+  <span id="end" class="inline">INL INL</span>
   <p>END STATE</p>
 </div>