Update YT test case to check different media queries

westonruter · westonruter · commit 9169bcaaa88b · 2024-11-19T17:32:50.000-08:00
diff --git a/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-on-mobile.php b/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-on-mobile.php
@@ -10,8 +10,8 @@
 				),
 			);
 
-			// Embed not visible on mobile.
-			if ( 480 === $viewport_width ) {
+			// Embed is ONLY visible on phablet and tablet.
+			if ( ! in_array( $viewport_width, array( 600, 782 ), true ) ) {
 				$elements[0]['intersectionRatio'] = 0;
 				$elements[0]['isLCP']             = false;
 			}
@@ -56,8 +56,8 @@
 				@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
 				@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
 				</style>
-				<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com" media="(min-width: 481px)">
-				<link data-od-added-tag rel="preconnect" href="https://www.youtube.com" media="(min-width: 481px)">
+				<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com" media="(min-width: 481px) and (max-width: 782px)">
+				<link data-od-added-tag rel="preconnect" href="https://www.youtube.com" media="(min-width: 481px) and (max-width: 782px)">
 			</head>
 			<body>
 				<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
