Fix flaky backplate wpt tests
Similar to CL:2916998, preload and wait for background-image resources
to load before taking the reftest screenshots in the various forced
colors backplate wpt tests.
Bug: 1213718
Change-Id: I0aa54bfaffd280cc51155c2745f0266c1795ca46
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2929455
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#888104}
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-01-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-01-ref.html
index 1393046..9365ff2 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-01-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-01-ref.html
@@ -1,9 +1,12 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -39,3 +42,4 @@
(forced-color-adjust is set to none.)
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-01.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-01.html
index 05d3623..7aeb12a 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-01.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-01.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -6,6 +7,8 @@
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-01-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -39,3 +42,4 @@
(forced-color-adjust is set to none.)
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-02-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-02-ref.html
index c193353..992ced6 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-02-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-02-ref.html
@@ -1,10 +1,13 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests that the backplate feature with a varying number of line breaks.
</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -46,3 +49,4 @@
four br tags indicates a new paragraph.
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-02.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-02.html
index cf52153..1643a6e 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-02.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-02.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -7,6 +8,8 @@
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-02-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -44,3 +47,4 @@
four br tags indicates a new paragraph.
</span>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-03-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-03-ref.html
index b2ed549..9a4ccff 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-03-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-03-ref.html
@@ -1,10 +1,13 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests the backplate feature behind lists.
</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -55,3 +58,4 @@
in forced colors mode.
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-03.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-03.html
index 936332a..f8c8f34 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-03.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-03.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -7,6 +8,8 @@
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-03-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -58,3 +61,4 @@
in forced colors mode.
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-04-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-04-ref.html
index 52a230a..ddf54c6 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-04-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-04-ref.html
@@ -1,10 +1,13 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests the backplate feature behind links.
</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -44,3 +47,4 @@
<a href="https://www.wikipedia.org/">LINK</a>
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-04.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-04.html
index c9b8136..be3ab4b 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-04.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-04.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -7,6 +8,8 @@
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-04-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -44,3 +47,4 @@
<a href="https://www.wikipedia.org/">LINK</a>
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-05-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-05-ref.html
index d1ea443..28b6f18 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-05-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-05-ref.html
@@ -1,10 +1,13 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests the backplate feature for display inline/relative position.
</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -46,3 +49,4 @@
<li>separately.</li>
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-05.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-05.html
index 69ab33b..7d8f805 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-05.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-05.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -7,6 +8,8 @@
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-05-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -42,3 +45,4 @@
<li>separately.</li>
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-06-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-06-ref.html
index 8d5c988..642bd72 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-06-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-06-ref.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
@@ -7,6 +8,8 @@
mode.
</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -38,3 +41,4 @@
This text should have a backplate in forced colors mode.
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-06.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-06.html
index c45a25a..49a8429 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-06.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-06.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -9,6 +10,8 @@
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-06-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -39,3 +42,4 @@
</span>
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html
index 18df12e..6cefe66 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html
@@ -1,10 +1,13 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests backplate is drawn when text is located outside the cull rect.
</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -52,3 +55,4 @@
}
onload = scroll;
</script>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-08.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-08.html
index 829d739..2049e3e 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-08.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-08.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -7,6 +8,8 @@
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-08-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -44,3 +47,4 @@
}
onload = scroll;
</script>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-09-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-09-ref.html
index 51aca00..2bbe08a 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-09-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-09-ref.html
@@ -1,10 +1,13 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests that backplate is not drawn above floats.
</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -32,3 +35,4 @@
the floating image.
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-09.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-09.html
index 4e9f517..467a23c 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-09.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-09.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -7,6 +8,8 @@
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-09-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -27,3 +30,4 @@
the floating image.
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-10-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-10-ref.html
index b5b58bd..35eb521 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-10-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-10-ref.html
@@ -1,10 +1,13 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests that backplates of overlapping inline boxes do not overlap.
</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -33,3 +36,4 @@
</div>
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-10.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-10.html
index cc7f977..db6c5ad 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-10.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-10.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -7,6 +8,8 @@
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-10-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -28,3 +31,4 @@
</div>
</div>
</body>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-11-ref.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-11-ref.html
index 29486d5..727afad 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-11-ref.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-11-ref.html
@@ -1,11 +1,15 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
Tests that backplates are not painted behind hidden elements.
</title>
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
}
</style>
+</html>
diff --git a/forced-colors-mode/backplate/forced-colors-mode-backplate-11.html b/forced-colors-mode/backplate/forced-colors-mode-backplate-11.html
index b81b522..a43f79d 100644
--- a/forced-colors-mode/backplate/forced-colors-mode-backplate-11.html
+++ b/forced-colors-mode/backplate/forced-colors-mode-backplate-11.html
@@ -1,4 +1,5 @@
<!DOCTYPE html>
+<html class="reftest-wait">
<meta charset="utf-8">
<title>
Forced colors mode - backplate.
@@ -6,6 +7,8 @@
</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-11-ref.html">
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
<style>
body {
background-image: url("../resources/test-image.jpg");
@@ -18,3 +21,4 @@
<div style="visibility: collapse;">
No blackplate should be painted in forced colors mode.
</div>
+</html>
