firefox/testing/web-platform/tests/svg/styling/presentation-attributes.js

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);
  // Also set another attribute that is likely to be a presentation attribute,
  // in order to provoke bugs.
  const otherAttribute = attribute === 'stroke' ? 'fill' : 'stroke';
  e.setAttribute(otherAttribute, 'red');
  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;
}