fune/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-014.html
L. David Baron 93788c3bb5 Bug 1732013 [wpt PR 30852] - Fix many tests to use correct syntax for SVG transform attribute., a=testonly
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
2021-10-04 00:19:42 +00:00

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>