1 files changed, 137 insertions, 0 deletions
diff --git a/devtools/server/tests/browser/browser_compatibility_cssIssues.js b/devtools/server/tests/browser/browser_compatibility_cssIssues.js
new file mode 100644
index 0000000000..4cd244688c
--- /dev/null
+++ b/devtools/server/tests/browser/browser_compatibility_cssIssues.js
@@ -0,0 +1,137 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check the output of getNodeCssIssues
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+const URL = MAIN_DOMAIN + "doc_compatibility.html";
+
+const CHROME_81 = {
+  id: "chrome",
+  version: "81",
+};
+
+const CHROME_ANDROID = {
+  id: "chrome_android",
+  version: "81",
+};
+
+const EDGE_81 = {
+  id: "edge",
+  version: "81",
+};
+
+const FIREFOX_1 = {
+  id: "firefox",
+  version: "1",
+};
+
+const FIREFOX_60 = {
+  id: "firefox",
+  version: "60",
+};
+
+const FIREFOX_69 = {
+  id: "firefox",
+  version: "69",
+};
+
+const FIREFOX_MOBILE = {
+  id: "firefox_android",
+  version: "68",
+};
+
+const SAFARI_13 = {
+  id: "safari",
+  version: "13",
+};
+
+const SAFARI_MOBILE = {
+  id: "safari_ios",
+  version: "13.4",
+};
+
+const TARGET_BROWSERS = [
+  FIREFOX_1,
+  FIREFOX_60,
+  FIREFOX_69,
+  FIREFOX_MOBILE,
+  CHROME_81,
+  CHROME_ANDROID,
+  SAFARI_13,
+  SAFARI_MOBILE,
+  EDGE_81,
+];
+
+const ISSUE_USER_SELECT = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+  property: "user-select",
+  aliases: ["-moz-user-select"],
+  url: "https://developer.mozilla.org/docs/Web/CSS/user-select",
+  specUrl: "https://drafts.csswg.org/css-ui/#content-selection",
+  deprecated: false,
+  experimental: false,
+  prefixNeeded: true,
+  unsupportedBrowsers: [
+    CHROME_81,
+    CHROME_ANDROID,
+    SAFARI_13,
+    SAFARI_MOBILE,
+    EDGE_81,
+  ],
+};
+
+const ISSUE_CLIP = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "clip",
+  url: "https://developer.mozilla.org/docs/Web/CSS/clip",
+  specUrl: "https://drafts.fxtf.org/css-masking/#clip-property",
+  deprecated: true,
+  experimental: false,
+  unsupportedBrowsers: [],
+};
+
+async function testNodeCssIssues(selector, walker, compatibility, expected) {
+  const node = await walker.querySelector(walker.rootNode, selector);
+  const cssCompatibilityIssues = await compatibility.getNodeCssIssues(
+    node,
+    TARGET_BROWSERS
+  );
+  info("Ensure result is correct");
+  Assert.deepEqual(
+    cssCompatibilityIssues,
+    expected,
+    "Expected CSS browser compat data is correct."
+  );
+}
+
+add_task(async function () {
+  const { inspector, walker, target } = await initInspectorFront(URL);
+  const compatibility = await inspector.getCompatibilityFront();
+
+  info('Test CSS properties linked with the "div" tag');
+  await testNodeCssIssues("div", walker, compatibility, []);
+
+  info('Test CSS properties linked with class "class-user-select"');
+  await testNodeCssIssues(".class-user-select", walker, compatibility, [
+    ISSUE_USER_SELECT,
+  ]);
+
+  info("Test CSS properties linked with multiple classes and id");
+  await testNodeCssIssues(
+    "div#id-clip.class-clip.class-user-select",
+    walker,
+    compatibility,
+    [ISSUE_CLIP, ISSUE_USER_SELECT]
+  );
+
+  info("Repeated incompatible CSS rule should be only reported once");
+  await testNodeCssIssues(".duplicate", walker, compatibility, [ISSUE_CLIP]);
+
+  await target.destroy();
+  gBrowser.removeCurrentTab();
+});