Skip to content

Commit d02fc27

Browse files
ShyamGaddeShyamGadde
committed
Add test cases for lazy loading background images
1 parent e466d58 commit d02fc27

8 files changed

+252
-4
lines changed

‎plugins/image-prioritizer/tests/test-cases/background-image-outside-viewport-on-all-breakpoints-but-not-desktop-with-fully-populated-sample-data.php

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<?php
2+
return array(
3+
'set_up' => static function ( Test_Image_Prioritizer_Helper $test_case ): void {
4+
$breakpoint_max_widths = array( 480, 600, 782 );
5+
$sample_size = od_get_url_metrics_breakpoint_sample_size();
6+
7+
add_filter(
8+
'od_breakpoint_max_widths',
9+
static function () use ( $breakpoint_max_widths ) {
10+
return $breakpoint_max_widths;
11+
}
12+
);
13+
14+
$outside_viewport_rect = array_merge(
15+
$test_case->get_sample_dom_rect(),
16+
array(
17+
'top' => 100000,
18+
)
19+
);
20+
21+
foreach ( $breakpoint_max_widths as $non_desktop_viewport_width ) {
22+
for ( $i = 0; $i < $sample_size; $i++ ) {
23+
OD_URL_Metrics_Post_Type::store_url_metric(
24+
od_get_url_metrics_slug( od_get_normalized_query_vars() ),
25+
$test_case->get_sample_url_metric(
26+
array(
27+
'viewport_width' => $non_desktop_viewport_width,
28+
'elements' => array(
29+
array(
30+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]',
31+
'isLCP' => false,
32+
'intersectionRatio' => 0.0,
33+
'intersectionRect' => $outside_viewport_rect,
34+
'boundingClientRect' => $outside_viewport_rect,
35+
),
36+
),
37+
)
38+
)
39+
);
40+
}
41+
}
42+
43+
for ( $i = 0; $i < $sample_size; $i++ ) {
44+
OD_URL_Metrics_Post_Type::store_url_metric(
45+
od_get_url_metrics_slug( od_get_normalized_query_vars() ),
46+
$test_case->get_sample_url_metric(
47+
array(
48+
'viewport_width' => 1000,
49+
'elements' => array(
50+
array(
51+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]',
52+
'isLCP' => false,
53+
'intersectionRatio' => 0.3,
54+
),
55+
),
56+
)
57+
)
58+
);
59+
}
60+
},
61+
'buffer' => '
62+
<html lang="en">
63+
<head>
64+
<meta charset="utf-8">
65+
<title>...</title>
66+
</head>
67+
<body>
68+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport except on desktop.</p>
69+
<div style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
70+
</body>
71+
</html>
72+
',
73+
'expected' => '
74+
<html lang="en">
75+
<head>
76+
<meta charset="utf-8">
77+
<title>...</title>
78+
</head>
79+
<body>
80+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport except on desktop.</p>
81+
<div style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
82+
</body>
83+
</html>
84+
',
85+
);

‎plugins/image-prioritizer/tests/test-cases/background-image-outside-viewport-with-desktop-metrics-missing.php

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<?php
2+
return array(
3+
'set_up' => static function ( Test_Image_Prioritizer_Helper $test_case ): void {
4+
$breakpoint_max_widths = array( 480, 600, 782 );
5+
6+
add_filter(
7+
'od_breakpoint_max_widths',
8+
static function () use ( $breakpoint_max_widths ) {
9+
return $breakpoint_max_widths;
10+
}
11+
);
12+
13+
$outside_viewport_rect = array_merge(
14+
$test_case->get_sample_dom_rect(),
15+
array(
16+
'top' => 100000,
17+
)
18+
);
19+
20+
foreach ( $breakpoint_max_widths as $non_desktop_viewport_width ) {
21+
OD_URL_Metrics_Post_Type::store_url_metric(
22+
od_get_url_metrics_slug( od_get_normalized_query_vars() ),
23+
$test_case->get_sample_url_metric(
24+
array(
25+
'viewport_width' => $non_desktop_viewport_width,
26+
'elements' => array(
27+
array(
28+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]',
29+
'isLCP' => false,
30+
'intersectionRatio' => 0.0,
31+
'intersectionRect' => $outside_viewport_rect,
32+
'boundingClientRect' => $outside_viewport_rect,
33+
),
34+
),
35+
)
36+
)
37+
);
38+
}
39+
},
40+
'buffer' => '
41+
<html lang="en">
42+
<head>
43+
<meta charset="utf-8">
44+
<title>...</title>
45+
</head>
46+
<body>
47+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport.</p>
48+
<div style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
49+
</body>
50+
</html>
51+
',
52+
'expected' => '
53+
<html lang="en">
54+
<head>
55+
<meta charset="utf-8">
56+
<title>...</title>
57+
</head>
58+
<body>
59+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport.</p>
60+
<div data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]" style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
61+
<script type="module">/* import detect ... */</script>
62+
</body>
63+
</html>
64+
',
65+
);

‎plugins/image-prioritizer/tests/test-cases/common-lcp-background-image-and-lazy-loaded-background-image-outside-viewport-with-fully-populated-sample-data.php

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<?php
2+
return array(
3+
'set_up' => static function ( Test_Image_Prioritizer_Helper $test_case ): void {
4+
$outside_viewport_rect = array_merge(
5+
$test_case->get_sample_dom_rect(),
6+
array(
7+
'top' => 100000,
8+
)
9+
);
10+
11+
$test_case->populate_url_metrics(
12+
array(
13+
array(
14+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::DIV]',
15+
'isLCP' => true,
16+
),
17+
array(
18+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]',
19+
'isLCP' => false,
20+
'intersectionRatio' => 0.0,
21+
'intersectionRect' => $outside_viewport_rect,
22+
'boundingClientRect' => $outside_viewport_rect,
23+
),
24+
array(
25+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[4][self::DIV]',
26+
'isLCP' => false,
27+
'intersectionRatio' => 0.0,
28+
'intersectionRect' => $outside_viewport_rect,
29+
'boundingClientRect' => $outside_viewport_rect,
30+
),
31+
)
32+
);
33+
},
34+
'buffer' => '
35+
<html lang="en">
36+
<head>
37+
<meta charset="utf-8">
38+
<title>...</title>
39+
</head>
40+
<body>
41+
<div style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
42+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport.</p>
43+
<div style="background-image:url(https://example.com/bar-bg.jpg); width:100%; height: 200px;">This is so background!</div>
44+
<div style="background-image:url(https://example.com/baz-bg.jpg); width:100%; height: 200px;">This is so background!</div>
45+
</body>
46+
</html>
47+
',
48+
'expected' => '
49+
<html lang="en">
50+
<head>
51+
<meta charset="utf-8">
52+
<title>...</title>
53+
<style>
54+
@media (scripting:enabled){.od-lazy-bg-image{background-image:none!important}}
55+
</style>
56+
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/foo-bg.jpg" media="screen">
57+
</head>
58+
<body>
59+
<div style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
60+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport.</p>
61+
<div class="od-lazy-bg-image" data-od-added-class style="background-image:url(https://example.com/bar-bg.jpg); width:100%; height: 200px;">This is so background!</div>
62+
<div class="od-lazy-bg-image" data-od-added-class style="background-image:url(https://example.com/baz-bg.jpg); width:100%; height: 200px;">This is so background!</div>
63+
<script type="module">/* const lazyBgImageObserver ... */</script>
64+
</body>
65+
</html>
66+
',
67+
);

‎plugins/image-prioritizer/tests/test-cases/common-lcp-background-image-with-fully-populated-sample-data.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
</body>
2222
</html>
2323
',
24+
// Note: There should be no lazy-loading script or styles added here as the only background image is in the initial viewport.
2425
'expected' => '
2526
<html lang="en">
2627
<head>

‎plugins/image-prioritizer/tests/test-cases/no-lcp-image-with-populated-url-metrics.php renamed to ‎plugins/image-prioritizer/tests/test-cases/no-lcp-image-or-background-image-outside-viewport-with-populated-url-metrics.php

File renamed without changes.

‎plugins/image-prioritizer/tests/test-cases/no-url-metrics.php

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
</head>
1010
<body>
1111
<img src="https://example.com/foo.jpg" alt="Foo" width="1200" height="800" loading="lazy">
12+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport.</p>
13+
<div style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
1214
</body>
1315
</html>
1416
',
@@ -20,6 +22,8 @@
2022
</head>
2123
<body>
2224
<img data-od-unknown-tag data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]" src="https://example.com/foo.jpg" alt="Foo" width="1200" height="800" loading="lazy">
25+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport.</p>
26+
<div data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]" style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
2327
<script type="module">/* import detect ... */</script>
2428
</body>
2529
</html>

‎plugins/image-prioritizer/tests/test-cases/only-mobile-and-desktop-groups-are-populated.php

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@ static function () {
1111
$slug = od_get_url_metrics_slug( od_get_normalized_query_vars() );
1212
$sample_size = od_get_url_metrics_breakpoint_sample_size();
1313

14+
$outside_viewport_rect = array_merge(
15+
$test_case->get_sample_dom_rect(),
16+
array(
17+
'top' => 100000,
18+
)
19+
);
20+
1421
// Populate the mobile and desktop viewport groups only.
1522
foreach ( array( 400, 800 ) as $viewport_width ) {
1623
for ( $i = 0; $i < $sample_size; $i++ ) {
@@ -19,10 +26,19 @@ static function () {
1926
$test_case->get_sample_url_metric(
2027
array(
2128
'viewport_width' => $viewport_width,
22-
'element' => array(
23-
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[2][self::MAIN]/*[2][self::ARTICLE]/*[2][self::FIGURE]/*[1][self::IMG]',
24-
'isLCP' => $viewport_width > 600,
25-
'intersectionRatio' => $viewport_width > 600 ? 1.0 : 0.1,
29+
'elements' => array(
30+
array(
31+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[2][self::MAIN]/*[2][self::ARTICLE]/*[2][self::FIGURE]/*[1][self::IMG]',
32+
'isLCP' => $viewport_width > 600,
33+
'intersectionRatio' => $viewport_width > 600 ? 1.0 : 0.1,
34+
),
35+
array(
36+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[2][self::MAIN]/*[4][self::DIV]',
37+
'isLCP' => false,
38+
'intersectionRatio' => 0.0,
39+
'intersectionRect' => $outside_viewport_rect,
40+
'boundingClientRect' => $outside_viewport_rect,
41+
),
2642
),
2743
)
2844
)
@@ -57,6 +73,8 @@ static function () {
5773
<p>This post does have a featured image, and the server-side heuristics in WordPress cause it to get fetchpriority=high, but it should not have this since it is out of the viewport on mobile.</p>
5874
</div>
5975
</article>
76+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport.</p>
77+
<div style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
6078
</main>
6179
</body>
6280
</html>
@@ -66,6 +84,9 @@ static function () {
6684
<head>
6785
<meta charset="utf-8">
6886
<title>...</title>
87+
<style>
88+
@media (scripting:enabled){.od-lazy-bg-image{background-image:none!important}}
89+
</style>
6990
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/featured-image.jpg" imagesrcset="https://example.com/featured-image-1200.jpg 1200w, https://example.com/featured-image-600.jpg 600w, https://example.com/featured-image-300.jpg 300w" imagesizes="(max-width: 1200px) 100vw, 1200px" media="screen and (min-width: 783px)">
7091
</head>
7192
<body>
@@ -89,7 +110,10 @@ static function () {
89110
<p>This post does have a featured image, and the server-side heuristics in WordPress cause it to get fetchpriority=high, but it should not have this since it is out of the viewport on mobile.</p>
90111
</div>
91112
</article>
113+
<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport.</p>
114+
<div class="od-lazy-bg-image" data-od-added-class data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[2][self::MAIN]/*[4][self::DIV]" style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
92115
</main>
116+
<script type="module">/* const lazyBgImageObserver ... */</script>
93117
<script type="module">/* import detect ... */</script>
94118
</body>
95119
</html>

‎plugins/image-prioritizer/tests/test-helper.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,8 @@ static function ( $matches ) {
9797
$matches[1] = '/* import detect ... */';
9898
} elseif ( false !== strpos( $matches[1], 'const lazyVideoObserver' ) ) {
9999
$matches[1] = '/* const lazyVideoObserver ... */';
100+
} elseif ( false !== strpos( $matches[1], 'const lazyBgImageObserver' ) ) {
101+
$matches[1] = '/* const lazyBgImageObserver ... */';
100102
}
101103
return implode( '', $matches );
102104
},

0 commit comments

Comments
 (0)