diff options
Diffstat (limited to 'testing/web-platform/tests/svg/styling')
22 files changed, 1081 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/styling/css-selectors-case-sensitivity.html b/testing/web-platform/tests/svg/styling/css-selectors-case-sensitivity.html new file mode 100644 index 0000000000..c1e07a5328 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/css-selectors-case-sensitivity.html @@ -0,0 +1,71 @@ +<!doctype html> +<title>SVG CSS Selectors - Case-sensitivity</title> +<link rel="help" href="https://svgwg.org/svg2-draft/styling.html"> +<link rel="help" href="https://drafts.csswg.org/selectors/#case-sensitive"> +<link rel="help" href="https://drafts.csswg.org/selectors/#attribute-case"> +<link rel="help" href="https://crbug.com/1246296"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + [viewBox] { color: green } + [VIEWBOX] { background-color: green } + foreignObject { color: green } + FOREIGNOBJECT { background-color: green } +</style> +<div viewBox id="t1"></div> +<div viewbox id="t2"></div> +<svg viewBox="0 0 800 10" id="t3"></svg> +<svg VIEWBOX="0 0 800 10" id="t4"></svg> +<foreignObject id="t5"></div> +<foreignobject id="t6"></div> +<svg><foreignObject id="t7"></foreignObject></svg> +<svg><FOREIGNOBJECT id="t8"></FOREIGNOBJECT></svg> +<script> + test(() => { + assert_equals(t1.attributes[0].name, "viewbox"); + assert_equals(t2.attributes[0].name, "viewbox"); + assert_equals(t3.attributes[0].name, "viewBox"); + assert_equals(t4.attributes[0].name, "viewBox"); + }, "Normalization of viewBox on html and svg elements in html documents."); + + test(() => { + assert_equals(t5.localName, "foreignobject"); + assert_equals(t6.localName, "foreignobject"); + assert_equals(t7.localName, "foreignObject"); + assert_equals(t8.localName, "foreignObject"); + }, "Normalization of foreignObject html and svg elements in html documents."); + + test(() => { + assert_equals(getComputedStyle(t1).color, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t2).color, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t2).backgroundColor, "rgb(0, 128, 0)"); + }, "viewBox attribute without namespace on html element matches case-insensitively in html document."); + + test(() => { + assert_equals(getComputedStyle(t3).color, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t3).backgroundColor, "rgba(0, 0, 0, 0)"); + }, "Camel-cased viewBox on svg in html document matches sensitively."); + + test(() => { + assert_equals(getComputedStyle(t4).color, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t4).backgroundColor, "rgba(0, 0, 0, 0)"); + }, "Normalized camel-cased viewBox on svg in html document matches case-sensitively."); + + test(() => { + assert_equals(getComputedStyle(t5).color, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t5).backgroundColor, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t6).color, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t6).backgroundColor, "rgb(0, 128, 0)"); + }, "foreignObject html element matches case-insensitively in html document."); + + test(() => { + assert_equals(getComputedStyle(t7).color, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t7).backgroundColor, "rgba(0, 0, 0, 0)"); + }, "Camel-cased svg foreignObject in html document matches sensitively."); + + test(() => { + assert_equals(getComputedStyle(t8).color, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(t8).backgroundColor, "rgba(0, 0, 0, 0)"); + }, "Normalized camel-cased svg foreignObject in html document matches case-sensitively."); +</script> diff --git a/testing/web-platform/tests/svg/styling/font-size-number-calc-crash.svg b/testing/web-platform/tests/svg/styling/font-size-number-calc-crash.svg new file mode 100644 index 0000000000..6b56d9df2b --- /dev/null +++ b/testing/web-platform/tests/svg/styling/font-size-number-calc-crash.svg @@ -0,0 +1,3 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" font-size="calc(0)"></svg> +<!-- Loading this test should not cause a crash. https://crbug.com/1172750 --> diff --git a/testing/web-platform/tests/svg/styling/padding-on-svg-via-img-ref.tentative.html b/testing/web-platform/tests/svg/styling/padding-on-svg-via-img-ref.tentative.html new file mode 100644 index 0000000000..37608e4b82 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/padding-on-svg-via-img-ref.tentative.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<body> +<img src="support/circle.svg"> +<img src="support/circle.svg"> +<img src="support/circle.svg"> +</body> diff --git a/testing/web-platform/tests/svg/styling/padding-on-svg-via-img.tentative.html b/testing/web-platform/tests/svg/styling/padding-on-svg-via-img.tentative.html new file mode 100644 index 0000000000..bdb0ce0212 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/padding-on-svg-via-img.tentative.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<!-- + Padding behavior in svg-as-image is not specified well, but the major + browsers have identical behaviors. + + This HTML should show multiple full circles, and they are aligned to + 100px grid. Padding-right doesn't contribute to SVG image sizes. +--> +<link rel="match" href="padding-on-svg-via-img-ref.tentative.html"/> +<body> +<img src="support/circle-padding-right.svg"> +<img src="support/circle-padding-right.svg"> +<img src="support/circle-padding-right.svg"> +</body> diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes-irrelevant.html b/testing/web-platform/tests/svg/styling/presentation-attributes-irrelevant.html new file mode 100644 index 0000000000..f96d1d9de6 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/presentation-attributes-irrelevant.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>SVG presentation attributes - on irrelevant elements</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> +// Test that all of the presentation attributes with no special rules are +// also supported on elements that the corresponding property does not +// apply to. + +for (let p in PROPERTIES) { + if (CSS.supports(p, "initial") && PROPERTIES[p].irrelevantElement) { + test(function() { + assertPresentationAttributeIsSupported(PROPERTIES[p].irrelevantElement, p, PROPERTIES[p].value, p); + }, `${p} presentation attribute supported on an irrelevant element`); + } +} +</script> diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes-relevant.html b/testing/web-platform/tests/svg/styling/presentation-attributes-relevant.html new file mode 100644 index 0000000000..b5f9343690 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/presentation-attributes-relevant.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>SVG presentation attributes - on relevant elements</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> +// Test that all of the presentation attributes with no special rules are +// supported on elements that the corresponding properties apply to. + +for (let p in PROPERTIES) { + if (CSS.supports(p, "initial")) { + test(function() { + assertPresentationAttributeIsSupported(PROPERTIES[p].relevantElement, p, PROPERTIES[p].value, p); + }, `${p} presentation attribute supported on a relevant element`); + } +} +</script> diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes-special-cases.html b/testing/web-platform/tests/svg/styling/presentation-attributes-special-cases.html new file mode 100644 index 0000000000..c99ed704cf --- /dev/null +++ b/testing/web-platform/tests/svg/styling/presentation-attributes-special-cases.html @@ -0,0 +1,149 @@ +<!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> diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes-unknown.html b/testing/web-platform/tests/svg/styling/presentation-attributes-unknown.html new file mode 100644 index 0000000000..487175b144 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/presentation-attributes-unknown.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>SVG presentation attributes - on unknown SVG elements</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> +// Test that all of the presentation attributes with no special +// rules are supported on unknown SVG elements. + +for (let p in PROPERTIES) { + if (CSS.supports(p, "initial") && PROPERTIES[p].irrelevantElement) { + test(function() { + assertPresentationAttributeIsSupported("unknown", p, PROPERTIES[p].value, p); + }, `${p} presentation attribute supported on an unknown SVG element`); + } +} +</script> diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes.js b/testing/web-platform/tests/svg/styling/presentation-attributes.js new file mode 100644 index 0000000000..96d9568e3b --- /dev/null +++ b/testing/web-platform/tests/svg/styling/presentation-attributes.js @@ -0,0 +1,397 @@ +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; +} diff --git a/testing/web-platform/tests/svg/styling/render/transform-box-ref.svg b/testing/web-platform/tests/svg/styling/render/transform-box-ref.svg new file mode 100644 index 0000000000..b41f8bb2a7 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/render/transform-box-ref.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300" height="200" viewBox="0 0 300 200"> + <style> + rect { + fill: cyan; + stroke: cyan; + stroke-width: 16px; + } + </style> + <g transform="translate(140, 130)"> + <rect id="r" x="-30" y="-10" width="80" height="20" /> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/styling/render/transform-box.svg b/testing/web-platform/tests/svg/styling/render/transform-box.svg new file mode 100644 index 0000000000..99a273c176 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/render/transform-box.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300" height="200" viewBox="0 0 300 200"> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/styling.html#RequiredProperties"/> + <h:link rel="match" href="transform-box-ref.svg"/> + <h:meta name="assert" content="The transform-box property impacts SVG rendering."/> + </metadata> + + <style> + #r { + fill: cyan; + stroke: cyan; + stroke-width: 8px; + transform-box: fill-box; + transform-origin: 75% 100%; + transform: scale(2, 2); + } + </style> + <g transform="translate(140, 130)"> + <rect id="r" x="0" y="0" width="40" height="10" /> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual-ref.svg b/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual-ref.svg new file mode 100644 index 0000000000..7cb98da727 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual-ref.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300" height="200" viewBox="0 0 300 200"> + <style> + rect { + fill: green; + } + </style> + <g transform="translate(140, 130)"> + <rect x="-30" y="-20" width="80" height="30"/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual.svg b/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual.svg new file mode 100644 index 0000000000..e05c2f01c1 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300" height="200" viewBox="0 0 300 200"> + <metadata> + <h:link rel="help" href="ttps://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"/> + <link rel="match" href="transform-origin-not-explicit-style-ref.svg"/> + <h:meta name="assert" content="The transform-origin attribute impacts SVG rendering."/> + </metadata> + <style> + rect { + fill: green; + } + </style> + <g transform="translate(140, 130)"> + <rect x="0" y="0" width="40" height="10" transform="scale(2, 3)" transform-origin="30 10"/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/styling/render/transform-origin-ref.svg b/testing/web-platform/tests/svg/styling/render/transform-origin-ref.svg new file mode 100644 index 0000000000..b0e3b47e0d --- /dev/null +++ b/testing/web-platform/tests/svg/styling/render/transform-origin-ref.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300" height="200" viewBox="0 0 300 200"> + <style> + rect { + fill: cyan; + } + </style> + <g transform="translate(140, 130)"> + <rect x="-30" y="-20" width="80" height="30" /> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/styling/render/transform-origin.svg b/testing/web-platform/tests/svg/styling/render/transform-origin.svg new file mode 100644 index 0000000000..07e7dd7ee2 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/render/transform-origin.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300" height="200" viewBox="0 0 300 200"> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/styling.html#RequiredProperties"/> + <h:link rel="match" href="transform-origin-ref.svg"/> + <h:meta name="assert" content="The transform-origin property impacts SVG rendering."/> + </metadata> + + <style> + rect { + fill: cyan; + transform-origin: 30px 10px; + transform: scale(2, 3); + } + </style> + <g transform="translate(140, 130)"> + <rect x="0" y="0" width="40" height="10" /> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/styling/render/transform-ref.svg b/testing/web-platform/tests/svg/styling/render/transform-ref.svg new file mode 100644 index 0000000000..02f49c6da3 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/render/transform-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300" height="200" viewBox="0 0 300 200"> + <style> + rect { + fill: cyan; + } + </style> + <rect x="169" y="141" width="40" height="10" /> +</svg> diff --git a/testing/web-platform/tests/svg/styling/render/transform.svg b/testing/web-platform/tests/svg/styling/render/transform.svg new file mode 100644 index 0000000000..1924026f98 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/render/transform.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300" height="200" viewBox="0 0 300 200"> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/styling.html#RequiredProperties"/> + <h:link rel="match" href="transform-ref.svg"/> + <h:meta name="assert" content="The transform property impacts SVG rendering."/> + </metadata> + + <style> + rect { + fill: cyan; + transform: translate(29px, 11px); + } + </style> + <rect x="140" y="130" width="40" height="10" /> +</svg> diff --git a/testing/web-platform/tests/svg/styling/required-properties.svg b/testing/web-platform/tests/svg/styling/required-properties.svg new file mode 100644 index 0000000000..37bf0fdf7e --- /dev/null +++ b/testing/web-platform/tests/svg/styling/required-properties.svg @@ -0,0 +1,146 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/styling.html#RequiredProperties"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/propidx.html"/> + <h:meta name="assert" content="All required properties are supported"/> + <!-- Note: This test does not verify that the properties are actually applied to SVG rendering. --> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + var properties = [ + // Properties listed in https://svgwg.org/svg2-draft/propidx.html + "alignment-baseline", + "baseline-shift", + "clip", + "clip-path", + "clip-rule", + "color", + "color-interpolation", + "cursor", + "direction", + "display", + "dominant-baseline", + "fill", + "fill-opacity", + "fill-rule", + "filter", + "flood-color", + "flood-opacity", + "font", + "font-family", + "font-size", + "font-size-adjust", + "font-stretch", + "font-style", + "font-variant", + "font-weight", + "glyph-orientation-vertical", + "image-rendering", + "letter-spacing", + "lighting-color", + "line-height", + "marker", + "marker-end", + "marker-mid", + "marker-start", + "mask", + "opacity", + "overflow", + "paint-order", + "pointer-events", + "shape-rendering", + "stop-color", + "stop-opacity", + "stroke", + "stroke-dasharray", + "stroke-dashoffset", + "stroke-linecap", + "stroke-linejoin", + "stroke-miterlimit", + "stroke-opacity", + "stroke-width", + "text-anchor", + "text-decoration", + "text-rendering", + "unicode-bidi", + "vector-effect", + "visibility", + "word-spacing", + "white-space", + "writing-mode", + + // Properties listed in https://svgwg.org/svg2-draft/styling.html#RequiredProperties + "display", + "overflow", + "visibility", + "cursor", + "text-overflow", + "clip", + "clip-path", + "clip-rule", + "mask", + "color", + "opacity", + "color-interpolation-filters", + "filter", + "flood-color", + "flood-opacity", + "isolation", + "lighting-color", + "transform", + "transform-box", + "transform-origin", + "letter-spacing", + "text-align", + "text-align-all", + "text-align-last", + "text-indent", + "word-spacing", + "white-space", + "text-space-collapse", + "vertical-align", + "dominant-baseline", + "alignment-baseline", + "baseline-shift", + "direction", + "text-orientation", + "writing-mode", + "font", + "font-family", + "font-feature-settings", + "font-kerning", + "font-size", + "font-size-adjust", + "font-stretch", + "font-style", + "font-variant", + "font-variant-position", + "font-variant-ligatures", + "font-variant-caps", + "font-variant-numeric", + "font-variant-east-asian", + "font-weight", + "text-decoration", + "text-decoration-line", + "text-decoration-style", + "text-decoration-color" + ]; + properties.sort(); + + var target = document.getElementById('target'); + var previous = null; + for (var property of properties) { + if (property === previous) + continue; // Avoid duplicate test names + previous = property; + + test(function() { + assert_true(property in target.style); + }, 'Property "' + property + '" is supported'); + } + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/styling/style-sheet-interfaces.svg b/testing/web-platform/tests/svg/styling/style-sheet-interfaces.svg new file mode 100644 index 0000000000..9532e64929 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/style-sheet-interfaces.svg @@ -0,0 +1,94 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <h:link rel="help" href="https://www.w3.org/TR/SVG11/styling.html#StyleElement"/> + <h:meta name="assert" content="SVGStyle objects have the properties specified in their interfaces"/> + </metadata> + <h:script src="/resources/testharness.js" type="text/javascript"/> + <h:script src="/resources/testharnessreport.js" type="text/javascript"/> + <style id="styleElement" type="text/css" media="all" title="internal style sheet" disabled="disabled"> + @import url('support/a-green.css'); + * { margin: 0; padding: 0; } + </style> + <script> + var styleElement = document.getElementById("styleElement"); + + var styleSheet; + + // styleElement.sheet exists and is a CSSStyleSheet + test(function() { + assert_idl_attribute(styleElement, "sheet"); + assert_readonly(styleElement, "sheet"); + styleSheet = styleElement.sheet; + assert_true(styleSheet instanceof CSSStyleSheet); + }, "sheet_property"); + + // The sheet property on LinkStyle should always return the current associated style sheet. + test(function () { + var style = document.createElementNS("http://www.w3.org/2000/svg", "style"); + document.querySelector("svg").appendChild(style); + var sheet1 = style.sheet; + assert_equals(sheet1.cssRules.length, 0); + style.appendChild(document.createTextNode("a { color: green; }")); + assert_equals(style.sheet.cssRules.length, 1); + }, "sheet_property_updates"); + + // ownerRule, cssRules, insertRule and deleteRule properties exist on CSSStyleSheet + // ownerRule, cssRules are read only + test(function() { + assert_idl_attribute(styleSheet, "ownerRule"); + assert_idl_attribute(styleSheet, "cssRules"); + assert_inherits(styleSheet, "insertRule"); + assert_inherits(styleSheet, "deleteRule"); + + assert_readonly(styleSheet, "ownerRule"); + assert_readonly(styleSheet, "cssRules"); + }, "CSSStyleSheet_properties"); + + var importSheet; + // CSSStyleSheet initial property values are correct + test(function() { + assert_equals(styleSheet.ownerRule, null); + assert_true(styleSheet.cssRules.length > 0); + assert_true(styleSheet.cssRules.item(0) instanceof CSSImportRule); + importSheet = styleSheet.cssRules.item(0).styleSheet; + }, "CSSStyleSheet_property_values"); + + // type, disabled, ownerNode, parentStyleSheet, href, title, and media properties exist on StyleSheet + // type, ownerNode, parentStyleSheet, href, and title properties are read only + test(function() { + assert_idl_attribute(styleSheet, "type"); + assert_idl_attribute(styleSheet, "disabled"); + assert_idl_attribute(styleSheet, "ownerNode"); + assert_idl_attribute(styleSheet, "parentStyleSheet"); + assert_idl_attribute(styleSheet, "href"); + assert_idl_attribute(styleSheet, "title"); + assert_idl_attribute(styleSheet, "media"); + + assert_readonly(styleSheet, "type"); + assert_readonly(styleSheet, "ownerNode"); + assert_readonly(styleSheet, "parentStyleSheet"); + assert_readonly(styleSheet, "href"); + assert_readonly(styleSheet, "title"); + }, "StyleSheet_properties"); + + // StyleSheet initial property values are correct + test(function() { + assert_equals(styleSheet.type, "text/css"); + assert_equals(styleSheet.disabled, false); + + assert_equals(styleSheet.ownerNode, styleElement); + assert_equals(importSheet.ownerNode, null); + + assert_equals(styleSheet.href, null); + assert_regexp_match(importSheet.href, /support\/a-green.css$/); + + assert_equals(styleSheet.parentStyleSheet, null); + assert_equals(importSheet.parentStyleSheet, styleSheet); + + assert_equals(styleSheet.title, "internal style sheet"); + assert_equals(styleSheet.media.item(0), "all"); + }, "StyleSheet_property_values"); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/styling/support/a-green.css b/testing/web-platform/tests/svg/styling/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/svg/styling/support/circle-padding-right.svg b/testing/web-platform/tests/svg/styling/support/circle-padding-right.svg new file mode 100644 index 0000000000..bf39907c41 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/support/circle-padding-right.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" style="padding-right:30px"> + <circle cx="50" cy="50" r="48"/> +</svg> diff --git a/testing/web-platform/tests/svg/styling/support/circle.svg b/testing/web-platform/tests/svg/styling/support/circle.svg new file mode 100644 index 0000000000..8d897abee3 --- /dev/null +++ b/testing/web-platform/tests/svg/styling/support/circle.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <circle cx="50" cy="50" r="48"/> +</svg> |
