From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- .../browser_compatibility_dynamic_js-dom-change.js | 150 +++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js (limited to 'devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js') diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js new file mode 100644 index 0000000000..1d8488a468 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js @@ -0,0 +1,150 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { + COMPATIBILITY_ISSUE_TYPE, +} = require("resource://devtools/shared/constants.js"); + +const { + COMPATIBILITY_APPEND_NODE_COMPLETE, + COMPATIBILITY_CLEAR_DESTROYED_NODES, +} = require("resource://devtools/client/inspector/compatibility/actions/index.js"); + +// Test the behavior rules are dynamically added + +const ISSUE_OUTLINE_RADIUS = { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "-moz-user-input", + url: "https://developer.mozilla.org/docs/Web/CSS/-moz-user-input", + deprecated: true, + experimental: false, +}; + +const ISSUE_HYPHENS = { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES, + aliases: ["hyphens"], + property: "hyphens", + url: "https://developer.mozilla.org/docs/Web/CSS/hyphens", + deprecated: false, + experimental: false, +}; + +const TEST_URI = ` + + +`; + +add_task(async function () { + info("Testing dynamic DOM mutation using JavaScript"); + const tab = await addTab( + "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI) + ); + + const { allElementsPane, inspector, selectedElementPane } = + await openCompatibilityView(); + + info("Check initial issues"); + await assertIssueList(selectedElementPane, []); + await assertIssueList(allElementsPane, []); + + info("Append nodes dynamically using JavaScript"); + await testNodeMutation( + ".child", + COMPATIBILITY_APPEND_NODE_COMPLETE, + tab, + inspector, + selectedElementPane, + allElementsPane, + [ISSUE_OUTLINE_RADIUS], + [ISSUE_HYPHENS, ISSUE_OUTLINE_RADIUS], + async function () { + const doc = content.document; + const parent = doc.querySelector("body"); + + const newElementWithIssue = doc.createElement("div"); + newElementWithIssue.style.hyphens = "none"; + + const parentOfIssueElement = doc.createElement("div"); + parentOfIssueElement.classList.add("parent"); + const child = doc.createElement("div"); + child.classList.add("child"); + parentOfIssueElement.appendChild(child); + + parent.appendChild(newElementWithIssue); + parent.appendChild(parentOfIssueElement); + } + ); + + info("Remove node whose child has compatibility issue"); + await testNodeMutation( + "div", + COMPATIBILITY_CLEAR_DESTROYED_NODES, + tab, + inspector, + selectedElementPane, + allElementsPane, + [ISSUE_HYPHENS], + [ISSUE_HYPHENS], + async function () { + const doc = content.document; + const parent = doc.querySelector(".parent"); + parent.remove(); + } + ); + + info("Remove node which has compatibility issue"); + await testNodeMutation( + "body", + COMPATIBILITY_CLEAR_DESTROYED_NODES, + tab, + inspector, + selectedElementPane, + allElementsPane, + [], + [], + async function () { + const doc = content.document; + const issueElement = doc.querySelector("div"); + issueElement.remove(); + } + ); + + await removeTab(tab); +}); + +async function testNodeMutation( + selector, + action, + tab, + inspector, + selectedElementPane, + allElementsPane, + expectedSelectedElementIssues, + expectedAllElementsIssues, + contentTaskFunction +) { + let onPanelUpdate = Promise.all([ + inspector.once("markupmutation"), + waitForDispatch(inspector.store, action), + ]); + info("Add a new node with issue and another node whose child has the issue"); + await ContentTask.spawn(tab.linkedBrowser, {}, contentTaskFunction); + info("Wait for changes"); + await onPanelUpdate; + + onPanelUpdate = waitForUpdateSelectedNodeAction(inspector.store); + await selectNode(selector, inspector); + await onPanelUpdate; + + info("Check element issues"); + await assertIssueList(selectedElementPane, expectedSelectedElementIssues); + + info("Check all issues"); + await assertIssueList(allElementsPane, expectedAllElementsIssues); +} -- cgit v1.2.3