| <!DOCTYPE html> |
| <title>SVG Web Animations should be responsive to changes in the underlying value</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| // offset has a primitive animVal type. |
| function createOffsetTestTarget() { |
| var target = document.createElementNS('http://www.w3.org/2000/svg', 'stop'); |
| target.setAttribute('offset', '0'); |
| var animation = target.animate({'svg-offset': '1'}, 1); |
| animation.pause(); |
| animation.currentTime = 0.5; |
| assert_equals(target.getAttribute('offset'), '0.5', 'Initial getAttribute()'); |
| assert_equals(target.offset.animVal, 0.5, 'Initial get animVal'); |
| return target; |
| } |
| |
| test(() => { |
| var target = createOffsetTestTarget(); |
| target.setAttribute('offset', '0.5'); |
| assert_equals(target.getAttribute('offset'), '0.75'); |
| }, document.title + ': setAttribute() -> getAttribute()'); |
| |
| test(() => { |
| var target = createOffsetTestTarget(); |
| target.setAttribute('offset', '0.5'); |
| assert_equals(target.offset.animVal, 0.75); |
| }, document.title + ': setAttribute() -> get primitive animVal'); |
| |
| test(() => { |
| var target = createOffsetTestTarget(); |
| target.offset.baseVal = '0.5'; |
| assert_equals(target.getAttribute('offset'), '0.75'); |
| }, document.title + ': set baseVal -> getAttribute()'); |
| |
| test(() => { |
| var target = createOffsetTestTarget(); |
| target.offset.baseVal = '0.5'; |
| assert_equals(target.offset.animVal, 0.75); |
| }, document.title + ': set baseVal -> get primitive animVal'); |
| |
| |
| function serializeRect(rect) { |
| return [rect.x, rect.y, rect.width, rect.height].join(' '); |
| } |
| |
| // viewBox has a tear-off animVal type. |
| function createViewBoxTestTarget() { |
| var target = document.createElementNS('http://www.w3.org/2000/svg', 'marker'); |
| target.setAttribute('viewBox', '0 0 0 0'); |
| var animation = target.animate({'svg-viewBox': '1 1 1 1'}, 1); |
| animation.pause(); |
| animation.currentTime = 0.5; |
| assert_equals(target.getAttribute('viewBox'), '0.5 0.5 0.5 0.5', 'Initial getAttribute()'); |
| assert_equals(serializeRect(target.viewBox.animVal), '0.5 0.5 0.5 0.5', 'Initial get animVal'); |
| return target; |
| } |
| |
| test(() => { |
| var target = createViewBoxTestTarget(); |
| var animVal = target.viewBox.animVal; |
| target.setAttribute('viewBox', '0.5 0.5 0.5 0.5'); |
| assert_equals(serializeRect(animVal), '0.75 0.75 0.75 0.75'); |
| }, document.title + ': setAttribute() -> read tear-off animVal'); |
| |
| test(() => { |
| var target = createViewBoxTestTarget(); |
| var animVal = target.viewBox.animVal; |
| var baseVal = target.viewBox.baseVal; |
| baseVal.x = 0.5; |
| baseVal.y = 0.5; |
| baseVal.width = 0.5; |
| baseVal.height = 0.5; |
| assert_equals(serializeRect(animVal), '0.75 0.75 0.75 0.75'); |
| }, document.title + ': set baseVal -> read tear-off animVal'); |
| </script> |
