Wait for the web-fonts to be load before calling checkLayout script. (#…

…22332)
web-platform-tests · Mar 20, 2020 · 02b166f · 02b166f
1 parent b9888e6
commit 02b166f
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 30 deletions.
diff --git a/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html b/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
@@ -35,13 +35,16 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     grid.style.height = "300px";
 
     item1.setAttribute("data-offset-y", "35");
     item2.setAttribute("data-offset-y", "160");
-    checkLayout('#grid');
+
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html b/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
@@ -35,13 +35,15 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     item1.style.height = "100px";
 
     item1.setAttribute("data-offset-y", "50");
     item2.setAttribute("data-offset-y", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html b/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
@@ -36,13 +36,15 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     item1.style.height = "100px";
 
     item1.setAttribute("data-offset-y", "50");
     item2.setAttribute("data-offset-y", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html b/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
@@ -36,13 +36,15 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     grid.style.height = "300px";
 
     item1.setAttribute("data-offset-y", "35");
     item2.setAttribute("data-offset-y", "160");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html b/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
@@ -34,13 +34,15 @@
     <div id="item2">XXXXX</div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "90");
     item2.setAttribute("data-offset-y", "345");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     item2.style.fontSize = "40px";
 
     item1.setAttribute("data-offset-y", "90");
     item2.setAttribute("data-offset-y", "330");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html b/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
@@ -34,13 +34,15 @@
     <div id="item2">XXXXX</div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "95");
     item2.setAttribute("data-offset-y", "345");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     grid.style.fontSize = "40px";
 
     item1.setAttribute("data-offset-y", "80");
     item2.setAttribute("data-offset-y", "330");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html b/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
@@ -35,13 +35,15 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     grid.style.height = "300px";
 
     item1.setAttribute("data-offset-y", "35");
     item2.setAttribute("data-offset-y", "160");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html b/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
@@ -35,13 +35,17 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     grid.style.width = "300px";
 
     item1.setAttribute("data-offset-x", "35");
     item2.setAttribute("data-offset-x", "160");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+
+    done();
+});
 </script>
diff --git a/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html b/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
@@ -35,13 +35,15 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     item1.style.width = "100px";
 
     item1.setAttribute("data-offset-x", "50");
     item2.setAttribute("data-offset-x", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html b/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
@@ -36,13 +36,15 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     item1.style.width = "100px";
 
     item1.setAttribute("data-offset-x", "50");
     item2.setAttribute("data-offset-x", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html b/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
@@ -36,13 +36,15 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     grid.style.width = "300px";
 
     item1.setAttribute("data-offset-x", "35");
     item2.setAttribute("data-offset-x", "160");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>
diff --git a/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html b/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
@@ -45,8 +45,6 @@
 
     item1.setAttribute("data-offset-x", "50");
     item2.setAttribute("data-offset-x", "275");
-    checkLayout('#grid', false);
-
-    done();
+    checkLayout('#grid', true);
 });
 </script>
diff --git a/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html b/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
@@ -44,8 +44,6 @@
 
     item1.setAttribute("data-offset-x", "50");
     item2.setAttribute("data-offset-x", "325");
-    checkLayout('#grid', false);
-
-    done();
+    checkLayout('#grid', true);
 });
 </script>
diff --git a/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html b/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
@@ -35,13 +35,15 @@
     <div id="item2"></div>
 </div>
 <script>
+document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
-    checkLayout('#grid');
+    checkLayout('#grid', false);
 
     grid.style.width = "300px";
 
     item1.setAttribute("data-offset-x", "35");
     item2.setAttribute("data-offset-x", "160");
-    checkLayout('#grid');
+    checkLayout('#grid', true);
+});
 </script>