Minor fixing to WPT css/css-fonts/fallback-remote-to-data-url.html

1. The font style is also applied to element non-target so that we can
   verify the effect of unicode-range on data-font

2. Added 'font-display: swap' to remote-font so that we can observe the
   fallback when loading remote-font

Bug: 897539
Change-Id: I9bbe0705bc7d3a9ebbaf92f2c8c26c557adec24a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3069529
Commit-Queue: Xiaocheng Hu <[email protected]>
Auto-Submit: Xiaocheng Hu <[email protected]>
Reviewed-by: Dominik Röttsches <[email protected]>
Cr-Commit-Position: refs/heads/master@{#908594}

css/css-fonts/fallback-remote-to-data-url.html

@@ -21,14 +21,15 @@
   font-family: remote-font;
   /* Set a long delay to make sure it doesn't finish loading */
   src: url('/fonts/Revalia.woff?pipe=trickle(d1)') format('woff');
+  font-display: swap;
 }
 
-#target {
+#target, #not-covered {
   font: 25px/1 remote-font, data-font, monospace;
 }
 </style>
 <span id="target">0123456789</span>
-<span id="non-target">ABCDEFGHIJ</span>
+<span id="not-covered">ABCDEFGHIJ</span>
 <script>
 promise_test(async () => {
   // The loading of data-font may still be asynchronous. Wait to allow it to load.
@@ -40,7 +41,7 @@
     target.offsetWidth, 250,
     'Digits are in the unicode range of data-font and hence shaped with it');
   assert_not_equals(
-    document.getElementById('non-target').offsetWidth, 250,
+    document.getElementById('not-covered').offsetWidth, 250,
     'Letters are out of the unicode range of data-font and hence shaped with fallback');
 }, 'We should use the inline custom font to render the page when the primary remote font is loading');
 </script>