From 6eb4b61b016f28234bd31d90d8e4e7ca2037375a Mon Sep 17 00:00:00 2001
From: Rune Lillesveen <futhark@chromium.org>
Date: Mon, 15 Apr 2024 01:09:42 -0700
Subject: [PATCH] Await web font loading in css-scoping tests

Some tests did not pass because the web font did not finish loading
before the rendered widths were checked. Await document.fonts.ready to
make the tests predictable.

Bug: 333457515
Change-Id: I830cc11b4ba7a4c8a5579777712085cb3f7e5a1e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5447137
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Munira Tursunova <moonira@google.com>
Cr-Commit-Position: refs/heads/main@{#1287178}
---
 css/css-scoping/font-face-001.html | 4 +++-
 css/css-scoping/font-face-002.html | 4 +++-
 css/css-scoping/font-face-003.html | 4 +++-
 css/css-scoping/font-face-004.html | 4 +++-
 css/css-scoping/font-face-005.html | 4 +++-
 css/css-scoping/font-face-006.html | 2 +-
 css/css-scoping/font-face-007.html | 4 +++-
 css/css-scoping/font-face-008.html | 4 +++-
 css/css-scoping/font-face-009.html | 4 +++-
 9 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/css/css-scoping/font-face-001.html b/css/css-scoping/font-face-001.html
index 7e47d18cbaa240..4496786449f7fa 100644
--- a/css/css-scoping/font-face-001.html
+++ b/css/css-scoping/font-face-001.html
@@ -12,7 +12,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -27,6 +27,8 @@
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_not_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face applies in the shadow tree")
diff --git a/css/css-scoping/font-face-002.html b/css/css-scoping/font-face-002.html
index 2e3272c44f7cc2..3a20d0b808892d 100644
--- a/css/css-scoping/font-face-002.html
+++ b/css/css-scoping/font-face-002.html
@@ -13,7 +13,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       #in-shadow {
@@ -24,6 +24,8 @@
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_not_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from the document applies in the shadow tree");
diff --git a/css/css-scoping/font-face-003.html b/css/css-scoping/font-face-003.html
index d3f83e4ec3720a..adf0bba8dfaf27 100644
--- a/css/css-scoping/font-face-003.html
+++ b/css/css-scoping/font-face-003.html
@@ -13,7 +13,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       :host {
@@ -24,6 +24,8 @@
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from document applies to :host");
diff --git a/css/css-scoping/font-face-004.html b/css/css-scoping/font-face-004.html
index 6ac50bd4323339..957f48050e9c8b 100644
--- a/css/css-scoping/font-face-004.html
+++ b/css/css-scoping/font-face-004.html
@@ -14,7 +14,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       ::slotted(#in-document) {
@@ -25,6 +25,8 @@
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_not_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from document applies to a slotted element");
diff --git a/css/css-scoping/font-face-005.html b/css/css-scoping/font-face-005.html
index fdf86fb56e298c..de102f253e60f3 100644
--- a/css/css-scoping/font-face-005.html
+++ b/css/css-scoping/font-face-005.html
@@ -12,7 +12,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -27,6 +27,8 @@
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_not_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face should not leak out of shadow tree.");
diff --git a/css/css-scoping/font-face-006.html b/css/css-scoping/font-face-006.html
index 8c6e341713376e..e72d4ec2aa72a8 100644
--- a/css/css-scoping/font-face-006.html
+++ b/css/css-scoping/font-face-006.html
@@ -16,7 +16,7 @@
 </style>
 <div id="host"></div>
 <script>
-promise_test(async function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       :host::before, :host::after {
diff --git a/css/css-scoping/font-face-007.html b/css/css-scoping/font-face-007.html
index ae669f638fe878..c644a5498673b5 100644
--- a/css/css-scoping/font-face-007.html
+++ b/css/css-scoping/font-face-007.html
@@ -7,7 +7,7 @@
 
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -22,6 +22,8 @@
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from shadow applies to :host");
diff --git a/css/css-scoping/font-face-008.html b/css/css-scoping/font-face-008.html
index a40b0247d134ae..52c7869f9f8d48 100644
--- a/css/css-scoping/font-face-008.html
+++ b/css/css-scoping/font-face-008.html
@@ -8,7 +8,7 @@
 
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -23,6 +23,8 @@
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_not_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from shadow applies to a slotted element");
diff --git a/css/css-scoping/font-face-009.html b/css/css-scoping/font-face-009.html
index 5d770929cad0b6..4e08162dcdbacb 100644
--- a/css/css-scoping/font-face-009.html
+++ b/css/css-scoping/font-face-009.html
@@ -12,7 +12,7 @@
 </style>
 <div id="host"></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -27,6 +27,8 @@
     <slot></slot>
   `;
 
+  await document.fonts.ready;
+
   //shrinkwrapped size for a default font will be a bit more than 80-90
   //if the font is applied, it will be a bit more than 160
   assert_greater_than(document.getElementById('host').offsetWidth, 160);