presentation-attributes-special-cases.html (5323B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>SVG presentation attributes - special cases</title> 4 <link rel="help" href="https://svgwg.org/svg2-draft/styling.html#PresentationAttributes"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="presentation-attributes.js"></script> 8 <svg id="svg"></svg> 9 <script> 10 // 1. Test the special cases where presentation attributes are only allowed on 11 // a specific set of elements. 12 13 if (propertiesAreSupported(["cx", "cy"])) { 14 for (let e of ["circle", "ellipse"]) { 15 test(function() { 16 for (let p of ["cx", "cy"]) { 17 assertPresentationAttributeIsSupported(e, p, "1", p); 18 } 19 }, `cx and cy presentation attributes supported on ${e} element`); 20 } 21 } 22 23 if (propertiesAreSupported(["x", "y", "width", "height"])) { 24 for (let e of ["foreignObject", "image", "rect", "svg", "symbol", "use"]) { 25 test(function() { 26 for (let p of ["x", "y", "width", "height"]) { 27 assertPresentationAttributeIsSupported(e, p, "1", p); 28 } 29 }, `x, y, width, and height presentation attributes supported on ${e} element`); 30 } 31 } 32 33 if (CSS.supports("r", "initial")) { 34 test(function() { 35 assertPresentationAttributeIsSupported("circle", "r", "1", "r"); 36 }, `r presentation attribute supported on circle element`); 37 } 38 39 if (propertiesAreSupported(["rx", "ry"])) { 40 for (let e of ["ellipse", "rect"]) { 41 test(function() { 42 for (let p of ["rx", "ry"]) { 43 assertPresentationAttributeIsSupported(e, p, "1", p); 44 } 45 }, `rx and ry presentation attributes supported on ${e} element`); 46 } 47 } 48 49 if (CSS.supports("d", "initial")) { 50 test(function() { 51 assertPresentationAttributeIsSupported("path", "d", "M0,0 L1,1", "d"); 52 }, `d presentation attribute supported on path element`); 53 } 54 55 56 // 2. Test that for those presentation attributes only allowed on a specific 57 // set of elements, that they are not supported on some other SVG element. 58 // (We use 'g' as that element for testing.) 59 60 if (propertiesAreSupported(["cx", "cy"])) { 61 test(function() { 62 for (let p of ["cx", "cy"]) { 63 assertPresentationAttributeIsNotSupported("g", p, "1", p); 64 } 65 }, `cx and cy presentation attributes not supported on other elements`); 66 } 67 68 if (propertiesAreSupported(["x", "y", "width", "height"])) { 69 test(function() { 70 for (let p of ["x", "y", "width", "height"]) { 71 assertPresentationAttributeIsNotSupported("g", p, "1", p); 72 } 73 }, `x, y, width, and height presentation attributes not supported on other elements`); 74 } 75 76 if (CSS.supports("r", "initial")) { 77 test(function() { 78 assertPresentationAttributeIsNotSupported("g", "r", "1", "r"); 79 }, `r presentation attribute not supported on other elements`); 80 } 81 82 if (propertiesAreSupported(["rx", "ry"])) { 83 test(function() { 84 for (let p of ["rx", "ry"]) { 85 assertPresentationAttributeIsNotSupported("g", p, "1", p); 86 } 87 }, `rx and ry presentation attributes not supported on other elements`); 88 } 89 90 if (CSS.supports("d", "initial")) { 91 test(function() { 92 assertPresentationAttributeIsNotSupported("g", "d", "M0,0 L1,1", "d"); 93 }, `d presentation attribute not supported on other elements`); 94 } 95 96 97 // 3. Test that the fill presentation attribute is not supported on any 98 // animation elements. 99 100 if (CSS.supports("fill", "initial")) { 101 for (let e of ["animate", "animateMotion", "animateTransform", "set"]) { 102 test(function() { 103 assertPresentationAttributeIsNotSupported(e, "fill", "blue", "fill"); 104 }, `fill presentation attribute not supported on ${e}`); 105 } 106 } 107 108 109 if (CSS.supports("transform", "initial")) { 110 // 4. Test support for the presentation attributes of the transform property, 111 // which have a different spelling depending on which element they're on. 112 113 test(function() { 114 assertPresentationAttributeIsSupported("g", "transform", "scale(2)", "transform"); 115 }, `transform presentation attribute supported on g`); 116 117 test(function() { 118 assertPresentationAttributeIsSupported("pattern", "patternTransform", "scale(2)", "transform"); 119 }, `patternTransform presentation attribute supported on pattern`); 120 121 for (let e of ["linearGradient", "radialGradient"]) { 122 test(function() { 123 assertPresentationAttributeIsSupported(e, "gradientTransform", "scale(2)", "transform"); 124 }, `gradientTransform presentation attribute supported on ${e}`); 125 } 126 127 128 // 5. Test that the wrong spellings of the presentation attributes of the 129 // transform property are not supported. 130 131 test(function() { 132 for (let e of ["pattern", "linearGradient", "radialGradient"]) { 133 assertPresentationAttributeIsNotSupported(e, "transform", "scale(2)", "transform"); 134 } 135 }, `transform presentation attribute not supported on pattern or gradient elements`); 136 137 test(function() { 138 for (let e of ["g", "linearGradient", "radialGradient"]) { 139 assertPresentationAttributeIsNotSupported(e, "patternTransform", "scale(2)", "transform"); 140 } 141 }, `patternTransform presentation attribute not supported on g or gradient elements`); 142 143 test(function() { 144 for (let e of ["g", "pattern"]) { 145 assertPresentationAttributeIsNotSupported(e, "gradientTransform", "scale(2)", "transform"); 146 } 147 }, `gradientTransform presentation attribute not supported on g or pattern elements`); 148 } 149 </script>