forked from mirrors/gecko-dev
Automatic update from web-platform-tests Fix many tests to use correct syntax for SVG transform attribute. (#30852) Many tests were using syntax in the SVG transform attribute that is allowed in the CSS transform property but not the SVG transform attribute, according to https://drafts.csswg.org/css-transforms-1/#svg-syntax . In particular, they were: * using units when no units are allowed, or * using functions that are not accepted (translateX, translateY, scaleX, scaleY, skew). The modified tests were failing in all of Chromium, Gecko, and WebKit, with the exceptions of: * document-styles/svg-document-styles-004.html, which I fixed incorrectly in #30847, and for which this is the correct fix (and revert of the prior fix), * document-styles/svg-document-styles-014.html, external-styles/svg-external-styles-014.html, inline-styles/svg-inline-styles-014.html, matrix/svg-matrix-{064,065,068,069}.html, and rotate/svg-rotate-3args-invalid-002.html, which were testing other aspects of invalidity, * group/svg-transform-nested-018.html, for which I added a FIXME, Note that the rotate/svg-rotate-3args-invalid-* tests are mostly wrong, and I hope to deal with them in a later PR. -- wpt-commits: 73cd80f155f0914c82c70586d5c8501b559c1e1e wpt-pr: 30852
33 lines
1.5 KiB
HTML
33 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Transforms Test: Invalid inline and presentation attribute styles on an SVG element using rotate with three arguments</title>
|
|
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
|
|
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
|
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity">
|
|
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
|
|
<link rel="match" href="reference/svg-inline-styles-ref.html">
|
|
<meta name="flags" content="svg">
|
|
<meta name="assert" content="When both the inline and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or rotated">
|
|
<style type="text/css">
|
|
svg {
|
|
height: 300px;
|
|
width: 300px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p>
|
|
<svg>
|
|
<!-- Fill with Gradient to avoid false positive. -->
|
|
<defs>
|
|
<linearGradient id="grad">
|
|
<stop offset="50%" stop-color="green"/>
|
|
<stop offset="50%" stop-color="yellow"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="1" y="1" width="98" height="98" fill="red"/>
|
|
<rect width="100" height="100" fill="url(#grad)" style="transform: scale(invalid)" transform="rotate(90,invalid,invalid)"/>
|
|
</svg>
|
|
</body>
|
|
</html>
|