18209 2008-03-29 11:58:51 -0700 Animation: SVG "rotate" transforms fail to obey the center point 2012-05-03 00:45:59 -0700 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) Mac OS X 10.5 RESOLVED FIXED P2 Normal --- 41761 1 ksosjq102 webkit-unassigned jeffschiller koivisto krit martin.hejral zimmermann oldest_to_newest 75779 0 ksosjq102 2008-03-29 11:58:51 -0700 From reading the spec, I would expect the following to produce an indeterminate progress spinner which rotates 30 degrees every 0.5 seconds. In testing, it rotates 30 degrees once, and then proceeds to go insane, jumping all over the viewport. It looks like cX and cY are being incremented along with the angle during each iteration, and I can't really think of any reason why that would be desirable. <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g width="50" height="50" id="spinner" > <animateTransform attributeName="transform" type="rotate" from="0,25,25" to="30,25,25" dur="0.5s" repeatCount="indefinite" calcMode="discrete" additive="sum" accumulate="sum" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(0,25,25)" fill-opacity="0.50" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(30,25,25)" fill-opacity="0.05" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(60,25,25)" fill-opacity="0.10" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(90,25,25)" fill-opacity="0.15" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(120,25,25)" fill-opacity="0.20" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(150,25,25)" fill-opacity="0.25" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(180,25,25)" fill-opacity="0.25" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(210,25,25)" fill-opacity="0.30" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(240,25,25)" fill-opacity="0.35" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(270,25,25)" fill-opacity="0.40" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(300,25,25)" fill-opacity="0.45" /> <polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(330,25,25)" fill-opacity="0.50" /> </g> </svg> I get the correct behavior if I remove the calcMode, additive and accumulate attributes, but then everything is tweened, which is not what I want at all. No other browser handles this any better, so I can't tell if I'm simply misinterpreting the spec or if WebKit is genuinely broken in this regard. There certainly should be a way to specify a non-tweened rotation transform. 75780 1 ksosjq102 2008-03-29 12:08:46 -0700 Supplying explicit values *does* work; i.e.: <animateTransform attributeName="transform" type="rotate" values="0,25,25; 30,25,25; 60,25,25; 90,25,25; 120,25,25; 150,25,25; 180,25,25; 210,25,25; 240,25,25; 270,25,25; 300,25,25; 330,25,25;" dur="0.5s" repeatCount="indefinite" calcMode="discrete" /> but this is rather unwieldy. 75783 2 ksosjq102 2008-03-29 12:39:08 -0700 Supplying explicit values also introduces an unnatural pause between iterations which makes the animation jerky when it loops back around to start over. 77478 3 eric 2008-04-13 22:43:19 -0700 Animation is somewhat broken, atm. We're still fixing lots of bugs in it. Thank you for the test case. 339719 4 martin.hejral 2011-01-25 10:18:01 -0800 NOT a bug! By my opinion WebKit is correct. Problem with 1st testcase is this attribute: accumulate="sum" Also, rotation center is accumulated -> behaviour of Webkit is correct! I will attach corrected testcase... 339720 5 80077 martin.hejral 2011-01-25 10:20:12 -0800 Created attachment 80077 working test 339724 6 martin.hejral 2011-01-25 10:28:15 -0800 PS: ...tested with: Safari 5.0.2 Chrome 8.0.552.237 431850 7 krit 2011-07-04 02:07:45 -0700 I fear the bug is still valid. I agree that the initially posted SVG should not do what the author might want it to, but it works exactly like the "working test". And that seems to be wrong. Compare it to other svg viewers. 431954 8 martin.hejral 2011-07-04 09:04:41 -0700 (In reply to comment #7) > I fear the bug is still valid. I agree that the initially posted SVG should not do what the author might want it to, but ... Hello Dirk, thx for the note. I fear too :-( I made some additional tests and I can confirm, there is still bug... #1 problem resides NOT in "rotate" transform, BUT in computing of accumulated animations (accumulate="sum"). I will attach basic SVG for repeatCount="2" for testing purposes... #2 problem: calcMode="discrete" is ignored... --tested with-- Safari 5.0.2 (5533.18.5) Chrome 14.0.803.0 dev 431956 9 99635 martin.hejral 2011-07-04 09:10:34 -0700 Created attachment 99635 SVG example exactly shows bug of Webkit animateTransform accumulate=sum calculation 431959 10 krit 2011-07-04 09:26:27 -0700 (In reply to comment #8) > (In reply to comment #7) > > I fear the bug is still valid. I agree that the initially posted SVG should not do what the author might want it to, but ... > > Hello Dirk, thx for the note. I fear too :-( > > I made some additional tests and I can confirm, there is still bug... > > #1 problem resides NOT in "rotate" transform, BUT in computing of accumulated animations (accumulate="sum"). I will attach basic SVG for repeatCount="2" for testing purposes... > > #2 problem: calcMode="discrete" is ignored... > > --tested with-- > Safari 5.0.2 (5533.18.5) > Chrome 14.0.803.0 dev I'm unsure if that is right. We have the same animation like batik right now. I have to check it first. The problem on SVGTransform: We don't just add the translation on every repeat, it is like a matrix that gets _post multiplied_ to all previous transforms. Thats why I doubt that 25 after first iteration and 50 after second iteration is correct. Note that I changed the behavior of accumulation lately. We now calculate the distance from 0 to 100% for the first iteration 100% to 200% for the second iteration and so on. Again, we have to do some math to see who is right: opera+FF (match your test) or batik+WebKit (no translation). To calcMode=discrete: I can confirm that we don't have special handling for it. Nevertheless that is another topic. Can you open a new bug and add a test file please? 431976 11 martin.hejral 2011-07-04 10:08:02 -0700 (In reply to comment #10) > I'm unsure if that is right. We have the same animation like batik right now. I have to check it first. The problem on SVGTransform: We don't just add the translation on every repeat, it is like a matrix that gets _post multiplied_ to all previous transforms. Thats why I doubt that 25 after first iteration and 50 after second iteration is correct. I understand, what you mean. It is good consideration. By my opinion, the rock-bottom of this probles lies in this claim: *Should be final animated-transformation after accumulation in 2 cycles: transform="rotate(60,50,50)"* ?? (animated from="0,25,25" to="30,25,25") Primary Question is: YES or NO? ================================ If confirmed YES, then Opera + FF are correct... > Note that I changed the behavior of accumulation lately. We now calculate the distance from 0 to 100% for the first iteration 100% to 200% for the second iteration and so on. It looks absolutely correct... the only possible "hanger" I see, is which value is iterated (transform matrix or XML attributes) I am not sure if we can iterate matrix... 431992 12 martin.hejral 2011-07-04 10:58:31 -0700 (In reply to comment #10) > To calcMode=discrete: I can confirm that we don't have special handling for it. Nevertheless that is another topic. Can you open a new bug and add a test file please? FYI: It looks like this problem belongs here: https://bugs.webkit.org/show_bug.cgi?id=37250 615076 13 zimmermann 2012-05-03 00:45:59 -0700 (In reply to comment #12) > (In reply to comment #10) > > > To calcMode=discrete: I can confirm that we don't have special handling for it. Nevertheless that is another topic. Can you open a new bug and add a test file please? > > FYI: It looks like this problem belongs here: > > https://bugs.webkit.org/show_bug.cgi?id=37250 Both bugs are fixed in trunk, we're now matching Firefox/Opera nightlies behavior. calcMode=discrete being broken was obvious. The other bug with the rotation center is less obvious, but our trunk behavior is now correct: additive/accumulate will animate all functions of a SVGTransform type, like rotate: angle, center x and center y. Both bugs are covered with test cases in LayoutTests/svg/animations, so it's safe to close this bug. Happy SMILing! 80077 2011-01-25 10:20:12 -0800 2011-01-25 10:25:53 -0800 working test animateTransform-rotate-test.svg image/svg+xml 2064 martin.hejral PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iSVNPLTg4NTktMSIgc3RhbmRhbG9uZT0ibm8i Pz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMjAwMTA5MDQvL0VOIg0K ICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEw LmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiAgICAgeG1s bnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDx0aXRsZT5TVkct U01JTCBhbmltYXRlVHJhbnNmb3JtIG9mIHR5cGUgcm90YXRlPC90aXRsZT4NCiAgICA8ZyB0cmFu c2Zvcm09InJvdGF0ZSgwLDI1LDI1KSIgaWQ9InNwaW5uZXIiPg0KICAgICAgICA8YW5pbWF0ZVRy YW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgDQogICAgICAg ICBmcm9tPSIwLDI1LDI1IiB0bz0iMzYwLDI1LDI1IiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5k ZWZpbml0ZSIgDQogICAgICAgICBhZGRpdGl2ZT0ic3VtIiBhY2N1bXVsYXRlPSJub25lIiBjYWxj TW9kZT0ibGluZWFyIi8+DQogICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjIsMCAyOCwwIDI3LDEy IDIzLDEyIiBmaWxsPSIjMDAwIiB4PSIyMiIgdHJhbnNmb3JtPSJyb3RhdGUoMCwyNSwyNSkiICAg ZmlsbC1vcGFjaXR5PSIwLjUwIiAvPg0KICAgICAgICA8cG9seWdvbiBwb2ludHM9IjIyLDAgMjgs MCAyNywxMiAyMywxMiIgZmlsbD0iIzAwMCIgeD0iMjIiIHRyYW5zZm9ybT0icm90YXRlKDMwLDI1 LDI1KSIgIGZpbGwtb3BhY2l0eT0iMC4wNSIgLz4NCiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIy MiwwIDI4LDAgMjcsMTIgMjMsMTIiIGZpbGw9IiMwMDAiIHg9IjIyIiB0cmFuc2Zvcm09InJvdGF0 ZSg2MCwyNSwyNSkiICBmaWxsLW9wYWNpdHk9IjAuMTAiIC8+DQogICAgICAgIDxwb2x5Z29uIHBv aW50cz0iMjIsMCAyOCwwIDI3LDEyIDIzLDEyIiBmaWxsPSIjMDAwIiB4PSIyMiIgdHJhbnNmb3Jt PSJyb3RhdGUoOTAsMjUsMjUpIiAgZmlsbC1vcGFjaXR5PSIwLjE1IiAvPg0KICAgICAgICA8cG9s eWdvbiBwb2ludHM9IjIyLDAgMjgsMCAyNywxMiAyMywxMiIgZmlsbD0iIzAwMCIgeD0iMjIiIHRy YW5zZm9ybT0icm90YXRlKDEyMCwyNSwyNSkiIGZpbGwtb3BhY2l0eT0iMC4yMCIgLz4NCiAgICAg ICAgPHBvbHlnb24gcG9pbnRzPSIyMiwwIDI4LDAgMjcsMTIgMjMsMTIiIGZpbGw9IiMwMDAiIHg9 IjIyIiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAsMjUsMjUpIiBmaWxsLW9wYWNpdHk9IjAuMjUiIC8+ DQogICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjIsMCAyOCwwIDI3LDEyIDIzLDEyIiBmaWxsPSIj MDAwIiB4PSIyMiIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwLDI1LDI1KSIgZmlsbC1vcGFjaXR5PSIw LjI1IiAvPg0KICAgICAgICA8cG9seWdvbiBwb2ludHM9IjIyLDAgMjgsMCAyNywxMiAyMywxMiIg ZmlsbD0iIzAwMCIgeD0iMjIiIHRyYW5zZm9ybT0icm90YXRlKDIxMCwyNSwyNSkiIGZpbGwtb3Bh Y2l0eT0iMC4zMCIgLz4NCiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIyMiwwIDI4LDAgMjcsMTIg MjMsMTIiIGZpbGw9IiMwMDAiIHg9IjIyIiB0cmFuc2Zvcm09InJvdGF0ZSgyNDAsMjUsMjUpIiBm aWxsLW9wYWNpdHk9IjAuMzUiIC8+DQogICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjIsMCAyOCww IDI3LDEyIDIzLDEyIiBmaWxsPSIjMDAwIiB4PSIyMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjcwLDI1 LDI1KSIgZmlsbC1vcGFjaXR5PSIwLjQwIiAvPg0KICAgICAgICA8cG9seWdvbiBwb2ludHM9IjIy LDAgMjgsMCAyNywxMiAyMywxMiIgZmlsbD0iIzAwMCIgeD0iMjIiIHRyYW5zZm9ybT0icm90YXRl KDMwMCwyNSwyNSkiIGZpbGwtb3BhY2l0eT0iMC40NSIgLz4NCiAgICAgICAgPHBvbHlnb24gcG9p bnRzPSIyMiwwIDI4LDAgMjcsMTIgMjMsMTIiIGZpbGw9IiMwMDAiIHg9IjIyIiB0cmFuc2Zvcm09 InJvdGF0ZSgzMzAsMjUsMjUpIiBmaWxsLW9wYWNpdHk9IjAuNTAiIC8+ICAgICAgIA0KICAgIDwv Zz4NCjwvc3ZnPg0K 99635 2011-07-04 09:10:34 -0700 2011-07-04 09:10:34 -0700 SVG example exactly shows bug of Webkit animateTransform accumulate=sum calculation animateTransform-rotate-accumulate=sum.svg image/svg+xml 2488 martin.hejral PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iSVNPLTg4NTktMSIgc3RhbmRhbG9uZT0ibm8i Pz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMjAwMTA5MDQvL0VOIg0K ICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEw LmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiAgICAgeG1s bnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDx0aXRsZT5TVkct U01JTCBhbmltYXRlVHJhbnNmb3JtIC0gV2ViS2l0IGJ1Z3MgZm9yIGNhbGNNb2RlPSJkaXNjcmV0 ZSIgYW5kIGFjY3VtdWxhdGU9InN1bSI8L3RpdGxlPg0KICAgIDxnIHdpZHRoPSI1MCIgaGVpZ2h0 PSI1MCIgaWQ9InNwaW5uZXIiPg0KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVO YW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgDQogICAgICAgICAgICAgICAgICAgICAgICAg IGZyb209IjAsMjUsMjUiIHRvPSIzMCwyNSwyNSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9IjIiIA0K ICAgICAgICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0iZGlzY3JldGUiIA0KICAgICAgICAg ICAgICAgICAgICAgICAgICBhZGRpdGl2ZT0ic3VtIiBhY2N1bXVsYXRlPSJzdW0iIGZpbGw9ImZy ZWV6ZSIgLz4NCiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIyMiwwIDI4LDAgMjcsMTIgMjMsMTIi IGZpbGw9IiMwMDAiIHg9IjIyIiB0cmFuc2Zvcm09InJvdGF0ZSgwLDI1LDI1KSIgICBmaWxsLW9w YWNpdHk9IjAuNTAiIC8+DQogICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjIsMCAyOCwwIDI3LDEy IDIzLDEyIiBmaWxsPSIjMDAwIiB4PSIyMiIgdHJhbnNmb3JtPSJyb3RhdGUoMzAsMjUsMjUpIiAg ZmlsbC1vcGFjaXR5PSIwLjA1IiAvPg0KICAgICAgICA8cG9seWdvbiBwb2ludHM9IjIyLDAgMjgs MCAyNywxMiAyMywxMiIgZmlsbD0iIzAwMCIgeD0iMjIiIHRyYW5zZm9ybT0icm90YXRlKDYwLDI1 LDI1KSIgIGZpbGwtb3BhY2l0eT0iMC4xMCIgLz4NCiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIy MiwwIDI4LDAgMjcsMTIgMjMsMTIiIGZpbGw9IiMwMDAiIHg9IjIyIiB0cmFuc2Zvcm09InJvdGF0 ZSg5MCwyNSwyNSkiICBmaWxsLW9wYWNpdHk9IjAuMTUiIC8+DQogICAgICAgIDxwb2x5Z29uIHBv aW50cz0iMjIsMCAyOCwwIDI3LDEyIDIzLDEyIiBmaWxsPSIjMDAwIiB4PSIyMiIgdHJhbnNmb3Jt PSJyb3RhdGUoMTIwLDI1LDI1KSIgZmlsbC1vcGFjaXR5PSIwLjIwIiAvPg0KICAgICAgICA8cG9s eWdvbiBwb2ludHM9IjIyLDAgMjgsMCAyNywxMiAyMywxMiIgZmlsbD0iIzAwMCIgeD0iMjIiIHRy YW5zZm9ybT0icm90YXRlKDE1MCwyNSwyNSkiIGZpbGwtb3BhY2l0eT0iMC4yNSIgLz4NCiAgICAg ICAgPHBvbHlnb24gcG9pbnRzPSIyMiwwIDI4LDAgMjcsMTIgMjMsMTIiIGZpbGw9IiMwMDAiIHg9 IjIyIiB0cmFuc2Zvcm09InJvdGF0ZSgxODAsMjUsMjUpIiBmaWxsLW9wYWNpdHk9IjAuMjUiIC8+ DQogICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjIsMCAyOCwwIDI3LDEyIDIzLDEyIiBmaWxsPSIj MDAwIiB4PSIyMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjEwLDI1LDI1KSIgZmlsbC1vcGFjaXR5PSIw LjMwIiAvPg0KICAgICAgICA8cG9seWdvbiBwb2ludHM9IjIyLDAgMjgsMCAyNywxMiAyMywxMiIg ZmlsbD0iIzAwMCIgeD0iMjIiIHRyYW5zZm9ybT0icm90YXRlKDI0MCwyNSwyNSkiIGZpbGwtb3Bh Y2l0eT0iMC4zNSIgLz4NCiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIyMiwwIDI4LDAgMjcsMTIg MjMsMTIiIGZpbGw9IiMwMDAiIHg9IjIyIiB0cmFuc2Zvcm09InJvdGF0ZSgyNzAsMjUsMjUpIiBm aWxsLW9wYWNpdHk9IjAuNDAiIC8+DQogICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjIsMCAyOCww IDI3LDEyIDIzLDEyIiBmaWxsPSIjMDAwIiB4PSIyMiIgdHJhbnNmb3JtPSJyb3RhdGUoMzAwLDI1 LDI1KSIgZmlsbC1vcGFjaXR5PSIwLjQ1IiAvPg0KICAgICAgICA8cG9seWdvbiBwb2ludHM9IjIy LDAgMjgsMCAyNywxMiAyMywxMiIgZmlsbD0iIzAwMCIgeD0iMjIiIHRyYW5zZm9ybT0icm90YXRl KDMzMCwyNSwyNSkiIGZpbGwtb3BhY2l0eT0iMC41MCIgLz4gICAgICAgDQogICAgPC9nPg0KICAg IDxnIHRyYW5zZm9ybT0icm90YXRlKDYwLDUwLDUwKSI+DQogICAgICAgIDxjaXJjbGUgY3g9IjI1 IiBjeT0iMjUiIHI9IjI1IiBmaWxsPSJyZWQiIGZpbGwtb3BhY2l0eT0iMC41MCIgLz4NCiAgICAg ICAgPGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMS41IiBmaWxsPSJibGFjayIgLz4NCiAgICAg ICAgPHRleHQgeD0iMjUiIHk9IjI1IiBmaWxsPSJyZWQiIGZvbnQtc2l6ZT0iMTgiID4uIC0tIHBv c2l0aW9uIGFmdGVyIDJuZCByZXBlYXQ6IHg9IjI1IiB5PSIyNSIgdHJhbnNmb3JtPSJyb3RhdGUo NjAsNTAsNTApIjwvdGV4dD4NCiAgICA8L2c+DQo8L3N2Zz4NCg==