| const PROPERTIES = { |
| "alignment-baseline": { |
| value: "middle", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "baseline-shift": { |
| value: "1", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "clip-path": { |
| value: "url(#e)", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "clip-rule": { |
| value: "evenodd", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "color": { |
| value: "blue", |
| relevantElement: "g", |
| irrelevantElement: "image", |
| }, |
| "color-interpolation-filters": { |
| value: "sRGB", |
| relevantElement: "filter", |
| irrelevantElement: "linearGradient", |
| }, |
| "color-interpolation": { |
| value: "linearRGB", |
| relevantElement: "linearGradient", |
| irrelevantElement: "image", |
| }, |
| "cursor": { |
| value: "pointer", |
| relevantElement: "g", |
| irrelevantElement: "defs", |
| }, |
| "cx": { |
| value: "1", |
| relevantElement: "circle", |
| irrelevantElement: null, |
| }, |
| "cy": { |
| value: "1", |
| relevantElement: "circle", |
| irrelevantElement: null, |
| }, |
| "direction": { |
| value: "rtl", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "display": { |
| value: "block", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "d": { |
| value: "M0,0 L1,1", |
| relevantElement: "path", |
| irrelevantElement: null, |
| }, |
| "dominant-baseline": { |
| value: "middle", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "fill": { |
| value: "blue", |
| relevantElement: "g", |
| irrelevantElement: "image", |
| }, |
| "fill-opacity": { |
| value: "0.5", |
| relevantElement: "g", |
| irrelevantElement: "image", |
| }, |
| "fill-rule": { |
| value: "evenodd", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "filter": { |
| value: "url(#e)", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "flood-color": { |
| value: "blue", |
| relevantElement: "feFlood", |
| irrelevantElement: "rect", |
| }, |
| "flood-opacity": { |
| value: "0.5", |
| relevantElement: "feFlood", |
| irrelevantElement: "rect", |
| }, |
| "font-family": { |
| value: "Test Family", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "font-size": { |
| value: "50", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "font-size-adjust": { |
| value: "0.5", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "font-stretch": { |
| value: "expanded", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "font-style": { |
| value: "italic", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "font-variant": { |
| value: "small-caps", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "font-weight": { |
| value: "900", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "glyph-orientation-vertical": { |
| value: "90", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "height": { |
| value: "1", |
| relevantElement: "rect", |
| irrelevantElement: null, |
| }, |
| "image-rendering": { |
| value: ["optimizeSpeed", "pixelated"], |
| relevantElement: "image", |
| irrelevantElement: "path", |
| }, |
| "letter-spacing": { |
| value: "1px", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "lighting-color": { |
| value: "blue", |
| relevantElement: "feDiffuseLighting", |
| irrelevantElement: "rect", |
| }, |
| "marker-end": { |
| value: "url(#e)", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "marker-mid": { |
| value: "url(#e)", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "marker-start": { |
| value: "url(#e)", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "mask-type": { |
| value: "alpha", |
| relevantElement: "mask", |
| irrelevantElement: "rect", |
| }, |
| "mask": { |
| value: "url(#e)", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "opacity": { |
| value: "0.5", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "overflow": { |
| value: "scroll", |
| relevantElement: "svg", |
| irrelevantElement: "rect", |
| }, |
| "paint-order": { |
| value: "fill stroke", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "pointer-events": { |
| value: "none", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "r": { |
| value: "1", |
| relevantElement: "circle", |
| irrelevantElement: null, |
| }, |
| "rx": { |
| value: "1", |
| relevantElement: "rect", |
| irrelevantElement: null, |
| }, |
| "ry": { |
| value: "1", |
| relevantElement: "rect", |
| irrelevantElement: null, |
| }, |
| "shape-rendering": { |
| value: "geometricPrecision", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "stop-color": { |
| value: "blue", |
| relevantElement: "stop", |
| irrelevantElement: "rect", |
| }, |
| "stop-opacity": { |
| value: "0.5", |
| relevantElement: "stop", |
| irrelevantElement: "rect", |
| }, |
| "stroke": { |
| value: "blue", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "stroke-dasharray": { |
| value: "1 1", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "stroke-dashoffset": { |
| value: "1", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "stroke-linecap": { |
| value: "round", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "stroke-linejoin": { |
| value: "round", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "stroke-miterlimit": { |
| value: "1", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "stroke-opacity": { |
| value: "0.5", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "stroke-width": { |
| value: "2", |
| relevantElement: "path", |
| irrelevantElement: "image", |
| }, |
| "text-anchor": { |
| value: "middle", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "text-decoration": { |
| value: "underline", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "text-overflow": { |
| value: "ellipsis", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "text-rendering": { |
| value: "geometricPrecision", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "transform-origin": { |
| value: "1px 1px", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "transform": { |
| value: "scale(2)", |
| relevantElement: "g", |
| irrelevantElement: null, |
| }, |
| "unicode-bidi": { |
| value: "embed", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "vector-effect": { |
| value: "non-scaling-stroke", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "visibility": { |
| value: "hidden", |
| relevantElement: "g", |
| irrelevantElement: "linearGradient", |
| }, |
| "white-space": { |
| value: "pre", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "width": { |
| value: "1", |
| relevantElement: "rect", |
| irrelevantElement: null, |
| }, |
| "word-spacing": { |
| value: "1", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "writing-mode": { |
| value: "vertical-rl", |
| relevantElement: "text", |
| irrelevantElement: "rect", |
| }, |
| "x": { |
| value: "1", |
| relevantElement: "rect", |
| irrelevantElement: null, |
| }, |
| "y": { |
| value: "1", |
| relevantElement: "rect", |
| irrelevantElement: null, |
| }, |
| }; |
| |
| function presentationAttributeIsSupported(element, attribute, value, property) { |
| let e = document.createElementNS("http://www.w3.org/2000/svg", element); |
| svg.append(e); |
| let propertyValueBefore = getComputedStyle(e).getPropertyValue(property); |
| e.setAttribute(attribute, value); |
| let propertyValueAfter = getComputedStyle(e).getPropertyValue(property); |
| e.remove(); |
| return propertyValueBefore != propertyValueAfter; |
| } |
| |
| function assertPresentationAttributeIsSupported(element, attribute, values, property) { |
| if (typeof values === 'string') |
| values = [values]; |
| let supported = values.some( |
| value => presentationAttributeIsSupported(element, attribute, value, property)); |
| assert_true( |
| supported, |
| `Presentation attribute ${attribute}="${values.join(" | ")}" should be supported on ${element} element` |
| ); |
| } |
| |
| function assertPresentationAttributeIsNotSupported(element, attribute, values, property) { |
| if (typeof values === 'string') |
| values = [values]; |
| let supported = values.some( |
| value => presentationAttributeIsSupported(element, attribute, value, property)); |
| assert_false( |
| supported, |
| `Presentation attribute ${attribute}="${values.join(" | ")}" should not be supported on ${element} element` |
| ); |
| } |
| |
| function propertiesAreSupported(properties) { |
| for (let p of properties) { |
| if (!CSS.supports(p, "initial")) { |
| return false; |
| } |
| } |
| return true; |
| } |