commit fb4c8b473f379c94f626ab164fc5a8379fed622f
parent 65ea9dbd82de2a873d11b8638c2ce8775dc59672
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Thu, 13 Nov 2025 14:00:27 +0000
Bug 1998626 - [devtools] Add test for markup search for pseudo elements. r=devtools-reviewers,bomsy.
It doesn't seem like we were testing searching for the pseudo element nodes we're
displaying in the markup view (::before, ::after, ::marker), so this adds a few
test cases, searching by pseudo element name and by "content".
We emit a new event from the markup view when the search result highlights are
updated so we can properly wait in the test.
Differential Revision: https://phabricator.services.mozilla.com/D271547
Diffstat:
6 files changed, 68 insertions(+), 1 deletion(-)
diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js
@@ -1174,6 +1174,7 @@ class MarkupView extends EventEmitter {
// If there's no selected container, or if the search is empty, we don't have anything
// to highlight.
if (!this._selectedContainer || !searchQuery) {
+ this.emitForTests("search-results-highlighting-updated");
return;
}
@@ -1244,6 +1245,7 @@ class MarkupView extends EventEmitter {
false
);
}
+ this.emitForTests("search-results-highlighting-updated");
}
/**
diff --git a/devtools/client/inspector/markup/test/browser.toml b/devtools/client/inspector/markup/test/browser.toml
@@ -19,6 +19,7 @@ support-files = [
"doc_markup_pagesize_01.html",
"doc_markup_pagesize_02.html",
"doc_markup_pseudo.html",
+ "doc_markup_search.css",
"doc_markup_search.html",
"doc_markup_subgrid.html",
"doc_markup_svg_attributes.html",
diff --git a/devtools/client/inspector/markup/test/browser_markup_search_01.js b/devtools/client/inspector/markup/test/browser_markup_search_01.js
@@ -214,6 +214,51 @@ add_task(async function () {
markupViewContainer.clientWidth,
"Markup view overflows horizontally"
);
+
+ info("Search for pseudo elements");
+
+ await searchInMarkupView(inspector, "::before");
+ is(
+ inspector.selection.nodeFront.displayName,
+ "::before",
+ "The ::before element is selected"
+ );
+ checkHighlightedSearchResults(inspector, ["::before"]);
+
+ await searchInMarkupView(inspector, "::after");
+ is(
+ inspector.selection.nodeFront.displayName,
+ "::after",
+ "The ::after element is selected"
+ );
+ checkHighlightedSearchResults(inspector, ["::after"]);
+
+ await searchInMarkupView(inspector, "::marker");
+ is(
+ inspector.selection.nodeFront.displayName,
+ "::marker",
+ "The ::marker element is selected"
+ );
+ checkHighlightedSearchResults(inspector, ["::marker"]);
+
+ // Search by the `content` declaration of the ::before and ::after pseudo elements
+ await searchInMarkupView(inspector, "my_before_text");
+ is(
+ inspector.selection.nodeFront.displayName,
+ "::before",
+ "The ::before element is selected"
+ );
+ // no highlighting as the `content` text isn't displayed in the markup view
+ checkHighlightedSearchResults(inspector, []);
+
+ await searchInMarkupView(inspector, "my_after_text");
+ is(
+ inspector.selection.nodeFront.displayName,
+ "::after",
+ "The ::after element is selected"
+ );
+ // no highlighting as the `content` text isn't displayed in the markup view
+ checkHighlightedSearchResults(inspector, []);
});
function checkHighlightedSearchResults(inspector, expectedHighlights) {
diff --git a/devtools/client/inspector/markup/test/doc_markup_search.css b/devtools/client/inspector/markup/test/doc_markup_search.css
@@ -0,0 +1,8 @@
+.pseudos {
+ &::before {
+ content: "my_before_text";
+ }
+ &::after {
+ content: "my_after_text";
+ }
+}
diff --git a/devtools/client/inspector/markup/test/doc_markup_search.html b/devtools/client/inspector/markup/test/doc_markup_search.html
@@ -1,6 +1,10 @@
<!DOCTYPE html>
<html>
-<head></head>
+<head>
+ <style>
+ @import url("doc_markup_search.css");
+ </style>
+</head>
<body>
<ul>
<li>
@@ -17,6 +21,7 @@
thisisaverylongtextnodesowegetthemarkupviewtooverflowhorizontallythisisaverylongtextnodesowegetthemarkupviewtooverflowhorizontallythisisaverylongtextnodesowegetthemarkupviewtooverflowhorizontallyOVERFLOWSMATCH
</section>
<section id="cropped-attribute"></section>
+ <section class="pseudos">|</section>
<script>
"use strict";
diff --git a/devtools/client/inspector/test/shared-head.js b/devtools/client/inspector/test/shared-head.js
@@ -1200,6 +1200,9 @@ async function searchInMarkupView(inspector, search) {
const onNewNodeFront = inspector.selection.once("new-node-front");
const onSearchResult = inspector.search.once("search-result");
+ const onSearchResultHighlightingUpdated = inspector.markup.once(
+ "search-results-highlighting-updated"
+ );
EventUtils.sendKey("return", inspector.panelWin);
info("Wait for search-result");
@@ -1207,4 +1210,7 @@ async function searchInMarkupView(inspector, search) {
info("Wait for new node being selected");
await onNewNodeFront;
+
+ info("Wait for the search results highlighted to be updated");
+ await onSearchResultHighlightingUpdated;
}
