highlight-pseudo-elements.mjs (5512B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 // InactivePropertyHelper `highlight-pseudo-elements` test cases. 6 7 // "background", 8 // "background-color", 9 // "color", 10 // "fill-color", 11 // "stroke-color", 12 // "stroke-width", 13 // "text-decoration", 14 // "text-shadow", 15 // "text-underline-offset", 16 // "text-underline-position", 17 18 export default [ 19 { 20 info: "width is inactive on ::selection", 21 property: "width", 22 tagName: "span", 23 rules: ["span::selection { width: 10px; }"], 24 isActive: false, 25 // `width` is also inactive on inline element, so make sure we get the warning 26 // because we're using it in a highlight pseudo. 27 expectedMsgId: "inactive-css-highlight-pseudo-elements-not-supported", 28 }, 29 { 30 info: "display is inactive on ::highlight", 31 property: "display", 32 tagName: "span", 33 rules: ["span::highlight(result) { display: grid; }"], 34 isActive: false, 35 expectedMsgId: "inactive-css-highlight-pseudo-elements-not-supported", 36 }, 37 { 38 // accept background shorthand, even if it might hold inactive values 39 info: "background is active on ::selection", 40 property: "background", 41 tagName: "span", 42 rules: ["span::selection { background: red; }"], 43 isActive: true, 44 }, 45 { 46 info: "border-color is inactive on ::selection", 47 property: "border-color", 48 tagName: "span", 49 rules: ["span::selection { border-color: red; }"], 50 isActive: false, 51 // `width` is also inactive on inline element, so make sure we get the warning 52 // because we're using it in a highlight pseudo. 53 expectedMsgId: "inactive-css-highlight-pseudo-elements-not-supported", 54 }, 55 { 56 info: "background-color is active on ::selection", 57 property: "background-color", 58 tagName: "span", 59 rules: ["span::selection { background-color: red; }"], 60 isActive: true, 61 }, 62 { 63 info: "color is active on ::selection", 64 property: "color", 65 tagName: "span", 66 rules: ["span::selection { color: red; }"], 67 isActive: true, 68 }, 69 { 70 info: "text-decoration is active on ::selection", 71 property: "text-decoration", 72 tagName: "span", 73 rules: [ 74 "span::selection { text-decoration: double overline #FF3028 4px; }", 75 ], 76 isActive: true, 77 }, 78 { 79 info: "text-decoration-color is active on ::selection", 80 property: "text-decoration-color", 81 tagName: "span", 82 rules: ["span::selection { text-decoration-color: #FF3028; }"], 83 isActive: true, 84 }, 85 { 86 info: "text-decoration-line is active on ::selection", 87 property: "text-decoration-line", 88 tagName: "span", 89 rules: ["span::selection { text-decoration-line: overline; }"], 90 isActive: true, 91 }, 92 { 93 info: "text-decoration-style is active on ::selection", 94 property: "text-decoration-style", 95 tagName: "span", 96 rules: ["span::selection { text-decoration-style: double; }"], 97 isActive: true, 98 }, 99 { 100 info: "text-decoration-thickness is active on ::selection", 101 property: "text-decoration-thickness", 102 tagName: "span", 103 rules: ["span::selection { text-decoration-thickness: 4px; }"], 104 isActive: true, 105 }, 106 { 107 info: "text-shadow is active on ::selection", 108 property: "text-shadow", 109 tagName: "span", 110 rules: ["span::selection { text-shadow: text-shadow: #FC0 1px 0 10px; }"], 111 isActive: true, 112 }, 113 { 114 info: "text-underline-offset is active on ::selection", 115 property: "text-underline-offset", 116 tagName: "span", 117 rules: ["span::selection { text-underline-offset: 10px; }"], 118 isActive: true, 119 }, 120 { 121 info: "text-underline-position is active on ::selection", 122 property: "text-underline-position", 123 tagName: "span", 124 rules: ["span::selection { text-underline-position: under; }"], 125 isActive: true, 126 }, 127 { 128 info: "-webkit-text-fill-color is active on ::selection", 129 property: "-webkit-text-fill-color", 130 tagName: "span", 131 rules: ["span::selection { -webkit-text-fill-color: red; }"], 132 isActive: true, 133 }, 134 { 135 info: "-webkit-text-stroke-color is active on ::selection", 136 property: "-webkit-text-stroke-color", 137 tagName: "span", 138 rules: ["span::selection { -webkit-text-stroke-color: red; }"], 139 isActive: true, 140 }, 141 { 142 info: "-webkit-text-stroke-width is active on ::selection", 143 property: "-webkit-text-stroke-width", 144 tagName: "span", 145 rules: ["span::selection { -webkit-text-stroke-width: 4px; }"], 146 isActive: true, 147 }, 148 { 149 info: "-webkit-text-stroke is active on ::selection", 150 property: "-webkit-text-stroke", 151 tagName: "span", 152 rules: ["span::selection { -webkit-text-stroke: 4px navy; }"], 153 isActive: true, 154 }, 155 { 156 info: "display is inactive on ::target-text", 157 property: "display", 158 tagName: "span", 159 rules: ["span::target-text { display: grid; }"], 160 isActive: false, 161 expectedMsgId: "inactive-css-highlight-pseudo-elements-not-supported", 162 }, 163 { 164 // accept background shorthand, even if it might hold inactive values 165 info: "background is active on ::target-text", 166 property: "background", 167 tagName: "span", 168 rules: ["span::target-text { background: red; }"], 169 isActive: true, 170 }, 171 { 172 // accept custom properties 173 info: "custom property is active on ::target-text", 174 property: "--my-var", 175 tagName: "span", 176 rules: ["span::target-text { --my-var: red; }"], 177 isActive: true, 178 }, 179 ];