1 files changed, 164 insertions, 0 deletions
diff --git a/browser/components/search/test/browser/serp.css b/browser/components/search/test/browser/serp.css
new file mode 100644
index 0000000000..5b3865da44
--- /dev/null
+++ b/browser/components/search/test/browser/serp.css
@@ -0,0 +1,164 @@
+:root {
+  --margin-left: 80px;
+  --subtle: whitesmoke;
+  --carousel-card-width: 180px;
+}
+
+body {
+  margin: 0;
+  padding: 0 0 80px 0;
+}
+
+a:link {
+  text-decoration: none;
+}
+
+a:visited {
+  color: blue;
+}
+
+h5[test-label] {
+  margin-top: 30px;
+  margin-bottom: 4px;
+}
+
+nav {
+  border-bottom: 1px solid #ececec;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+#searchform {
+  padding-top: 20px;
+  margin-bottom: 20px;
+}
+
+nav>div,
+#searchform,
+.moz-carousel,
+.factrow {
+  display: flex;
+  align-items: center;
+}
+
+nav>div,
+#searchform {
+  gap: 40px;
+}
+
+nav>div,
+#searchform,
+#searchresults,
+#top {
+  margin-left: var(--margin-left);
+}
+
+#searchbox {
+  font-size: 14px;
+  padding: 10px 20px;
+  width: 300px;
+  border-radius: 20px;
+  border: 2px solid var(--subtle);
+  height: 20px;
+}
+
+.card-container {
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.card-container>.card {
+  height: 160px;
+  border-radius: 3px;
+  border: 1px solid var(--subtle);
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 10px;
+}
+
+.card-container>.card:not(:last-child) {
+  margin-right: 10px;
+}
+
+.card-container>.card>a {
+  display: block;
+  margin-bottom: 2px;
+}
+
+#searchresults {
+  width: 900px;
+  display: grid;
+  grid-template-columns: 600px 300px;
+}
+
+.moz-carousel,
+.factrow {
+  gap: 10px;
+}
+
+.moz-carousel {
+  overflow: hidden;
+}
+
+.moz-carousel[narrow],
+.moz-carousel-container {
+  width: calc(var(--carousel-card-width) * 3 + (3 * 10px));
+  overflow-x: auto;
+}
+
+.moz-carousel[extra] {
+  width: calc(var(--carousel-card-width) * 4 + (3 * 10px));
+}
+
+.moz-carousel>.moz-inner {
+  border: 1px solid var(--subtle);
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.moz-carousel>.moz-carousel-card {
+  flex: 1 0 var(--carousel-card-width);
+  border: 1px solid var(--subtle);
+  font-size: 14px;
+}
+
+.moz-carousel-card .moz-carousel-image {
+  width: 100%;
+  height: 120px;
+  background-color: var(--subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.moz-carousel-card-inner-content {
+  padding: 10px 20px 20px 20px;
+}
+
+.multi-col {
+  display: grid;
+  padding: 10px 20px 20px 20px;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.mock-image {
+  height: 100px;
+  background-color: var(--subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Some SERPs hide anchors using CSS */
+.hidden {
+  display: none;
+}
+
+/* Typography */
+h2 {
+  line-height: 100%;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}