1 files changed, 61 insertions, 0 deletions
diff --git a/comm/mail/base/test/browser/files/tree-element-test-header.xhtml b/comm/mail/base/test/browser/files/tree-element-test-header.xhtml
new file mode 100644
index 0000000000..522e3e5c60
--- /dev/null
+++ b/comm/mail/base/test/browser/files/tree-element-test-header.xhtml
@@ -0,0 +1,61 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, you can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test for the tree-view custom element</title>
+  <link rel="stylesheet" href="chrome://messenger/skin/shared/tree-listbox.css" />
+  <!-- Localization is necessary for the table header to display text. -->
+  <link rel="localization" href="messenger/about3Pane.ftl" />
+  <style>
+    :root {
+      --color-gray-20: gray;
+      --selected-item-color: rebeccapurple;
+      --selected-item-text-color: white;
+    }
+
+    /* We want a total visible row area of 630px, but we need to account for the
+     * height of the header as well. */
+    #testTree {
+      height: calc(var(--tree-header-table-height) + 630px);
+    }
+
+    .tree-view-scrollable-container {
+      scroll-behavior: unset;
+    }
+
+    tr[is="test-row"] td > div {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+    }
+
+    tr[is="test-row"] td div.d1 {
+      flex: 1;
+    }
+
+    tr[is="test-row"] td div.d1 > div.d2 {
+      line-height: 1.2;
+    }
+
+    tr[is="test-row"] td div.d1 > div.d3 {
+      line-height: 1.2;
+      font-size: 13px;
+    }
+  </style>
+  <script type="module" src="chrome://messenger/content/tree-view.mjs"></script>
+  <script src="tree-element-test-header.js"></script>
+  <script src="tree-element-test-common.js"></script>
+</head>
+<!-- We force layout-table in order to ensure that table header rows are
+     displayed.-->
+<body class="layout-table">
+  <input id="before" placeholder="something to focus on" />
+  <tree-view id="testTree" data-select-delay="250"/>
+  <input id="after" placeholder="something to focus on" />
+</body>
+</html>