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