| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>SVG presentation attributes - special cases</title> |
| <link rel="help" href="https://svgwg.org/svg2-draft/styling.html#PresentationAttributes"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="presentation-attributes.js"></script> |
| <svg id="svg"></svg> |
| <script> |
| // 1. Test the special cases where presentation attributes are only allowed on |
| // a specific set of elements. |
| |
| if (propertiesAreSupported(["cx", "cy"])) { |
| for (let e of ["circle", "ellipse"]) { |
| test(function() { |
| for (let p of ["cx", "cy"]) { |
| assertPresentationAttributeIsSupported(e, p, "1", p); |
| } |
| }, `cx and cy presentation attributes supported on ${e} element`); |
| } |
| } |
| |
| if (propertiesAreSupported(["x", "y", "width", "height"])) { |
| for (let e of ["foreignObject", "image", "rect", "svg", "symbol", "use"]) { |
| test(function() { |
| for (let p of ["x", "y", "width", "height"]) { |
| assertPresentationAttributeIsSupported(e, p, "1", p); |
| } |
| }, `x, y, width, and height presentation attributes supported on ${e} element`); |
| } |
| } |
| |
| if (CSS.supports("r", "initial")) { |
| test(function() { |
| assertPresentationAttributeIsSupported("circle", "r", "1", "r"); |
| }, `r presentation attribute supported on circle element`); |
| } |
| |
| if (propertiesAreSupported(["rx", "ry"])) { |
| for (let e of ["ellipse", "rect"]) { |
| test(function() { |
| for (let p of ["rx", "ry"]) { |
| assertPresentationAttributeIsSupported(e, p, "1", p); |
| } |
| }, `rx and ry presentation attributes supported on ${e} element`); |
| } |
| } |
| |
| if (CSS.supports("d", "initial")) { |
| test(function() { |
| assertPresentationAttributeIsSupported("path", "d", "M0,0 L1,1", "d"); |
| }, `d presentation attribute supported on path element`); |
| } |
| |
| |
| // 2. Test that for those presentation attributes only allowed on a specific |
| // set of elements, that they are not supported on some other SVG element. |
| // (We use 'g' as that element for testing.) |
| |
| if (propertiesAreSupported(["cx", "cy"])) { |
| test(function() { |
| for (let p of ["cx", "cy"]) { |
| assertPresentationAttributeIsNotSupported("g", p, "1", p); |
| } |
| }, `cx and cy presentation attributes not supported on other elements`); |
| } |
| |
| if (propertiesAreSupported(["x", "y", "width", "height"])) { |
| test(function() { |
| for (let p of ["x", "y", "width", "height"]) { |
| assertPresentationAttributeIsNotSupported("g", p, "1", p); |
| } |
| }, `x, y, width, and height presentation attributes not supported on other elements`); |
| } |
| |
| if (CSS.supports("r", "initial")) { |
| test(function() { |
| assertPresentationAttributeIsNotSupported("g", "r", "1", "r"); |
| }, `r presentation attribute not supported on other elements`); |
| } |
| |
| if (propertiesAreSupported(["rx", "ry"])) { |
| test(function() { |
| for (let p of ["rx", "ry"]) { |
| assertPresentationAttributeIsNotSupported("g", p, "1", p); |
| } |
| }, `rx and ry presentation attributes not supported on other elements`); |
| } |
| |
| if (CSS.supports("d", "initial")) { |
| test(function() { |
| assertPresentationAttributeIsNotSupported("g", "d", "M0,0 L1,1", "d"); |
| }, `d presentation attribute not supported on other elements`); |
| } |
| |
| |
| // 3. Test that the fill presentation attribute is not supported on any |
| // animation elements. |
| |
| if (CSS.supports("fill", "initial")) { |
| for (let e of ["animate", "animateMotion", "animateTransform", "discard", "set"]) { |
| test(function() { |
| assertPresentationAttributeIsNotSupported(e, "fill", "blue", "fill"); |
| }, `fill presentation attribute not supported on ${e}`); |
| } |
| } |
| |
| |
| if (CSS.supports("transform", "initial")) { |
| // 4. Test support for the presentation attributes of the transform property, |
| // which have a different spelling depending on which element they're on. |
| |
| test(function() { |
| assertPresentationAttributeIsSupported("g", "transform", "scale(2)", "transform"); |
| }, `transform presentation attribute supported on g`); |
| |
| test(function() { |
| assertPresentationAttributeIsSupported("pattern", "patternTransform", "scale(2)", "transform"); |
| }, `patternTransform presentation attribute supported on pattern`); |
| |
| for (let e of ["linearGradient", "radialGradient"]) { |
| test(function() { |
| assertPresentationAttributeIsSupported(e, "gradientTransform", "scale(2)", "transform"); |
| }, `patternTransform presentation attribute supported on ${e}`); |
| } |
| |
| |
| // 5. Test that the wrong spellings of the presentation attributes of the |
| // transform property are not supported. |
| |
| test(function() { |
| for (let e of ["pattern", "linearGradient", "radialGradient"]) { |
| assertPresentationAttributeIsNotSupported(e, "transform", "scale(2)", "transform"); |
| } |
| }, `transform presentation attribute not supported on pattern or gradient elements`); |
| |
| test(function() { |
| for (let e of ["g", "linearGradient", "radialGradient"]) { |
| assertPresentationAttributeIsNotSupported(e, "patternTransform", "scale(2)", "transform"); |
| } |
| }, `patternTransform presentation attribute not supported on g or gradient elements`); |
| |
| test(function() { |
| for (let e of ["g", "pattern"]) { |
| assertPresentationAttributeIsNotSupported(e, "gradientTransform", "scale(2)", "transform"); |
| } |
| }, `gradientTransform presentation attribute not supported on g or pattern elements`); |
| } |
| </script> |
