1 files changed, 87 insertions, 0 deletions
diff --git a/browser/components/search/test/browser/searchTelemetryAd_components_carousel_hidden.html b/browser/components/search/test/browser/searchTelemetryAd_components_carousel_hidden.html
new file mode 100644
index 0000000000..cccd714326
--- /dev/null
+++ b/browser/components/search/test/browser/searchTelemetryAd_components_carousel_hidden.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css"
+        href="./serp.css" />
+</head>
+<body>
+  <section id="top">
+    <h5 test-label="true">ad_carousel with display: none;</h5>
+    <div class="moz-carousel" narrow="true" style="display: none;">
+      <div class="moz-carousel-card">
+        <a class="hidden" href="https://example.com/ad"></a>
+        <a href="https://example.com/some-normal-path">
+          <div class="moz-carousel-image">Image</div>
+        </a>
+        <div class="moz-carousel-card-inner">
+          <div class="moz-carousel-card-inner-content">
+            <a class="hidden" href="https://example.com/ad"></a>
+            <a href="https://example.com/normal-path">
+              <h3>Name of Product</h3>
+            </a>
+            <h3>$199.99</h3>
+            <h3>Example.com</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <h5 test-label="true">ad_carousel with no width;</h5>
+    <div class="moz-carousel" narrow="true" style="width: 0;">
+      <div class="moz-carousel-card">
+        <a class="hidden" href="https://example.com/ad"></a>
+        <a href="https://example.com/some-normal-path">
+          <div class="moz-carousel-image">Image</div>
+        </a>
+        <div class="moz-carousel-card-inner">
+          <div class="moz-carousel-card-inner-content">
+            <a class="hidden" href="https://example.com/ad"></a>
+            <a href="https://example.com/normal-path">
+              <h3>Name of Product</h3>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <h5 test-label="true">ad_carousel with no height;</h5>
+    <div class="moz-carousel" narrow="true" style="height: 0;">
+      <div class="moz-carousel-card">
+        <a class="hidden" href="https://example.com/ad"></a>
+        <a href="https://example.com/some-normal-path">
+          <div class="moz-carousel-image">Image</div>
+        </a>
+        <div class="moz-carousel-card-inner">
+          <div class="moz-carousel-card-inner-content">
+            <a class="hidden" href="https://example.com/ad"></a>
+            <a href="https://example.com/normal-path">
+              <h3>Name of Product</h3>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <h5 test-label="true">ad_carousel that is far above the page</h5>
+    <div class="moz-carousel" narrow="true" style="position: absolute; top: -9999px;">
+      <div class="moz-carousel-card">
+        <a class="hidden" href="https://example.com/ad"></a>
+        <a href="https://example.com/some-normal-path">
+          <div class="moz-carousel-image">Image</div>
+        </a>
+        <div class="moz-carousel-card-inner">
+          <div class="moz-carousel-card-inner-content">
+            <a class="hidden" href="https://example.com/ad"></a>
+            <a href="https://example.com/normal-path">
+              <h3>Name of Product</h3>
+            </a>
+            <h3>$199.99</h3>
+            <h3>Example.com</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</body>
+</html>