layout/reftests/svg/smil/mapped-attr-vs-css-prop-1.svg@8bccb770b82d
layout/reftests/svg/smil/mapped-attr-vs-css-prop-1.svg
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
1 <svg xmlns="http://www.w3.org/2000/svg"
2 xmlns:xlink="http://www.w3.org/1999/xlink"
3 class="reftest-wait"
4 onload="document.documentElement.setCurrentTime(1);
5 setTimeAndSnapshot(1, false)">
6 <!-- XXXdholbert the above "document.documentElement.setCurrentTime" call
7 shouldn't be necessary - it's a temporary workaround for Bug 552873 -->
8 <script xlink:href="smil-util.js" type="text/javascript"/>
9 <!-- This test consists of a 4x3 grid, containing various cases with
10 animations that have attributeType="CSS" vs "XML", for the
11 presentational ("mapped") attribute 'fill-opacity'.
13 As one would expect, the "CSS" and "XML" versions are treated as
14 separate animation targets. However, there are some interactions:
15 - When they conflict, both the inline style & any animations with
16 attributeType="CSS" will have higher priority than the XML attribute
17 and animations with attributeType="XML".
18 - However, as described in the "FIRST ROW" comment below, animations
19 with attributeType="XML" can sometimes feed in to the base value
20 used for animations with attributeType="CSS". -->
22 <!-- GIANT GREEN BACKGROUND -->
23 <!-- (We'll put red rects on top, and then animate them to be transparent -->
24 <rect height="100%" width="100%" fill="lime" />
26 <!-- FIRST ROW: Additive CSS and XML animations, with CSS or XML base values.
28 When the base value is set using the inline style attribute, the
29 attributeType="XML" animation should be ignored, because the XML
30 attribute gets masked by the inline style.
32 However, when the base value is set using the XML attribute (or more
33 generally, when attributeType="XML" animations aren't masked by a value
34 in the inline style or in a stylesheet), then the animations will
35 effectively add together, because the (animated) XML attribute feeds
36 into the computed style, which gets used as the base value for the CSS
37 animation. -->
38 <g>
39 <!-- CSS base value + CSS animation + XML animation -->
40 <rect x="0" width="50" height="50" fill="red" style="fill-opacity: 0.5">
41 <animate attributeName="fill-opacity" attributeType="XML"
42 by="1" dur="1s" fill="freeze"/>
43 <animate attributeName="fill-opacity" attributeType="CSS"
44 by="-0.5" dur="1s" fill="freeze"/>
45 </rect>
46 <!-- CSS base value + XML animation + CSS animation -->
47 <rect x="50" width="50" height="50" fill="red" style="fill-opacity: 0.5">
48 <animate attributeName="fill-opacity" attributeType="CSS"
49 by="-0.5" dur="1s" fill="freeze"/>
50 <animate attributeName="fill-opacity" attributeType="XML"
51 by="1" dur="1s" fill="freeze"/>
52 </rect>
53 <!-- XML base value + CSS animation + XML animation -->
54 <rect x="100" width="50" height="50" fill="red" fill-opacity="0.5">
55 <animate attributeName="fill-opacity" attributeType="XML"
56 by="-0.2" dur="1s" fill="freeze"/>
57 <animate attributeName="fill-opacity" attributeType="CSS"
58 by="-0.3" dur="1s" fill="freeze"/>
59 </rect>
60 <!-- XML base value + XML animation + CSS animation -->
61 <rect x="150" width="50" height="50" fill="red" fill-opacity="0.5">
62 <animate attributeName="fill-opacity" attributeType="CSS"
63 by="-0.2" dur="1s" fill="freeze"/>
64 <animate attributeName="fill-opacity" attributeType="XML"
65 by="-0.3" dur="1s" fill="freeze"/>
66 </rect>
67 </g>
69 <!-- SECOND ROW: Single animation, with CSS or XML attributeType & base value.
70 In every case except for CSS-base-value + XML animation, the animation
71 should take effect. -->
72 <g transform="translate(0, 50)">
73 <!-- CSS base value + CSS animation -->
74 <rect x="0" width="50" height="50" fill="red" style="fill-opacity: 0.5">
75 <animate attributeName="fill-opacity" attributeType="CSS"
76 to="0" dur="1s" fill="freeze"/>
77 </rect>
78 <!-- CSS base value + XML animation -->
79 <!-- (starting at fill-opacity 0, since anim shouldn't have any effect -->
80 <rect x="50" width="50" height="50" fill="red" style="fill-opacity: 0">
81 <animate attributeName="fill-opacity" attributeType="XML"
82 to="0.5" dur="1s" fill="freeze"/>
83 </rect>
84 <!-- XML base value + CSS animation -->
85 <rect x="100" width="50" height="50" fill="red" fill-opacity="0.5">
86 <animate attributeName="fill-opacity" attributeType="CSS"
87 to="0" dur="1s" fill="freeze"/>
88 </rect>
89 <!-- XML base value + XML animation -->
90 <rect x="150" width="50" height="50" fill="red" fill-opacity="0.5">
91 <animate attributeName="fill-opacity" attributeType="XML"
92 to="0" dur="1s" fill="freeze"/>
93 </rect>
94 </g>
96 <!-- THIRD ROW: Competing animations, with CSS or XML attributeType & base
97 value. In each case, the attributeType="CSS" animation should win. -->
98 <g transform="translate(0, 100)">
99 <!-- CSS base value + CSS animation animation vs XML animation -->
100 <rect x="0" width="50" height="50" fill="red" style="fill-opacity: 0.5">
101 <animate attributeName="fill-opacity" attributeType="CSS"
102 to="0" dur="1s" fill="freeze"/>
103 <animate attributeName="fill-opacity" attributeType="XML"
104 to="1" dur="1s" fill="freeze"/>
105 </rect>
106 <!-- CSS base value + XML animation vs CSS animation -->
107 <rect x="50" width="50" height="50" fill="red" style="fill-opacity: 0.5">
108 <animate attributeName="fill-opacity" attributeType="XML"
109 to="1" dur="1s" fill="freeze"/>
110 <animate attributeName="fill-opacity" attributeType="CSS"
111 to="0" dur="1s" fill="freeze"/>
112 </rect>
113 <!-- XML base value + CSS animation vs XML animation -->
114 <rect x="100" width="50" height="50" fill="red" fill-opacity="0.5">
115 <animate attributeName="fill-opacity" attributeType="CSS"
116 to="0" dur="1s" fill="freeze"/>
117 <animate attributeName="fill-opacity" attributeType="XML"
118 to="1" dur="1s" fill="freeze"/>
119 </rect>
120 <!-- XML base value + XML animation vs CSS animation -->
121 <rect x="150" width="50" height="50" fill="red" fill-opacity="0.5">
122 <animate attributeName="fill-opacity" attributeType="XML"
123 to="1" dur="1s" fill="freeze"/>
124 <animate attributeName="fill-opacity" attributeType="CSS"
125 to="0" dur="1s" fill="freeze"/>
126 </rect>
127 </g>
128 </svg>
