test_mdn-compatibility.js (5553B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 "use strict"; 4 5 // Test for the MDN compatibility diagnosis module. 6 7 const { 8 COMPATIBILITY_ISSUE_TYPE, 9 } = require("resource://devtools/shared/constants.js"); 10 const MDNCompatibility = require("resource://devtools/server/actors/compatibility/lib/MDNCompatibility.js"); 11 const cssPropertiesCompatData = require("resource://devtools/shared/compatibility/dataset/css-properties.json"); 12 13 const mdnCompatibility = new MDNCompatibility(cssPropertiesCompatData); 14 15 const FIREFOX_1 = { 16 id: "firefox", 17 version: "1", 18 }; 19 20 const FIREFOX_60 = { 21 id: "firefox", 22 version: "60", 23 }; 24 25 const FIREFOX_69 = { 26 id: "firefox", 27 version: "69", 28 }; 29 30 const FIREFOX_ANDROID_1 = { 31 id: "firefox_android", 32 version: "1", 33 }; 34 35 const SAFARI_13 = { 36 id: "safari", 37 version: "13", 38 }; 39 40 const TEST_DATA = [ 41 { 42 description: "Test for a supported property", 43 declarations: [{ name: "background-color" }], 44 browsers: [FIREFOX_69], 45 expectedIssues: [], 46 }, 47 { 48 description: "Test for some supported properties", 49 declarations: [{ name: "background-color" }, { name: "color" }], 50 browsers: [FIREFOX_69], 51 expectedIssues: [], 52 }, 53 { 54 description: "Test for an unsupported property", 55 declarations: [{ name: "grid-column" }], 56 browsers: [FIREFOX_1], 57 expectedIssues: [ 58 { 59 type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, 60 property: "grid-column", 61 url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-column", 62 specUrl: "https://drafts.csswg.org/css-grid/#placement-shorthands", 63 deprecated: false, 64 experimental: false, 65 unsupportedBrowsers: [FIREFOX_1], 66 }, 67 ], 68 }, 69 { 70 description: "Test for an unknown property", 71 declarations: [{ name: "unknown-property" }], 72 browsers: [FIREFOX_69], 73 expectedIssues: [], 74 }, 75 { 76 description: "Test for a deprecated property", 77 declarations: [{ name: "clip" }], 78 browsers: [FIREFOX_69], 79 expectedIssues: [ 80 { 81 type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, 82 property: "clip", 83 url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/clip", 84 specUrl: "https://drafts.fxtf.org/css-masking/#clip-property", 85 deprecated: true, 86 experimental: false, 87 unsupportedBrowsers: [], 88 }, 89 ], 90 }, 91 { 92 description: "Test for a property having some issues", 93 declarations: [{ name: "ruby-align" }], 94 browsers: [FIREFOX_1], 95 expectedIssues: [ 96 { 97 type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, 98 property: "ruby-align", 99 url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/ruby-align", 100 specUrl: "https://drafts.csswg.org/css-ruby/#ruby-align-property", 101 deprecated: false, 102 experimental: false, 103 unsupportedBrowsers: [FIREFOX_1], 104 }, 105 ], 106 }, 107 { 108 description: 109 "Test for an aliased property not supported in all browsers with prefix needed", 110 declarations: [{ name: "-moz-user-select" }], 111 browsers: [FIREFOX_69, SAFARI_13], 112 expectedIssues: [ 113 { 114 type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES, 115 property: "user-select", 116 aliases: ["-moz-user-select"], 117 url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/user-select", 118 specUrl: "https://drafts.csswg.org/css-ui/#content-selection", 119 deprecated: false, 120 experimental: false, 121 prefixNeeded: true, 122 unsupportedBrowsers: [SAFARI_13], 123 }, 124 ], 125 }, 126 { 127 description: 128 "Test for an aliased property not supported in all browsers without prefix needed", 129 declarations: [ 130 { name: "-moz-user-select" }, 131 { name: "-webkit-user-select" }, 132 ], 133 browsers: [FIREFOX_ANDROID_1, FIREFOX_69, SAFARI_13], 134 expectedIssues: [ 135 { 136 type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES, 137 property: "user-select", 138 aliases: ["-moz-user-select", "-webkit-user-select"], 139 url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/user-select", 140 specUrl: "https://drafts.csswg.org/css-ui/#content-selection", 141 deprecated: false, 142 experimental: false, 143 prefixNeeded: false, 144 unsupportedBrowsers: [FIREFOX_ANDROID_1], 145 }, 146 ], 147 }, 148 { 149 description: "Test for aliased properties supported in all browsers", 150 declarations: [ 151 { name: "-moz-user-select" }, 152 { name: "-webkit-user-select" }, 153 ], 154 browsers: [FIREFOX_69, SAFARI_13], 155 expectedIssues: [], 156 }, 157 { 158 description: "Test for a property defined with prefix", 159 declarations: [{ name: "-moz-user-focus" }], 160 browsers: [FIREFOX_1, FIREFOX_60, FIREFOX_69], 161 expectedIssues: [ 162 { 163 type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, 164 property: "-moz-user-focus", 165 url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/-moz-user-focus", 166 specUrl: undefined, 167 deprecated: true, 168 experimental: false, 169 unsupportedBrowsers: [], 170 }, 171 ], 172 }, 173 ]; 174 175 add_task(() => { 176 for (const { 177 description, 178 declarations, 179 browsers, 180 expectedIssues, 181 } of TEST_DATA) { 182 info(description); 183 const issues = mdnCompatibility.getCSSDeclarationBlockIssues( 184 declarations, 185 browsers 186 ); 187 deepEqual( 188 issues, 189 expectedIssues, 190 "CSS declaration compatibility data matches expectations" 191 ); 192 } 193 });