--- a/dom/animation/test/mozilla/file_restyles.html
+++ b/dom/animation/test/mozilla/file_restyles.html
@@ -1429,83 +1429,16 @@ waitForAllPaints(() => {
var markers = await observeStyling(5);
is(markers.length, 0,
'Animation running on the main-thread while computed timing is not ' +
'changed should never cause restyles');
await ensureElementRemoval(div);
});
- add_task(async function no_throttling_animations_in_view_svg() {
- var div = addDiv(null, { style: 'overflow: scroll;' +
- 'height: 100px; width: 100px;' });
- var svg = addSVGElement(div, 'svg', { viewBox: '-10 -10 0.1 0.1',
- width: '50px',
- height: '50px' });
- var rect = addSVGElement(svg, 'rect', { x: '-10',
- y: '-10',
- width: '10',
- height: '10',
- fill: 'red' });
- var animation = rect.animate({ fill: ['blue', 'lime'] }, 100 * MS_PER_SEC);
- await animation.ready;
-
- const expectedRestyleCount = tweakExpectedRestyleCount(animation, 5);
- var markers = await observeStyling(5);
- is(markers.length, expectedRestyleCount,
- 'CSS animations on an in-view svg element with post-transform should ' +
- 'not be throttled.');
-
- await ensureElementRemoval(div);
- });
-
- add_task(async function no_throttling_animations_in_transformed_parent() {
- var div = addDiv(null, { style: 'overflow: scroll;' +
- 'transform: translateX(50px);' });
- var svg = addSVGElement(div, 'svg', { viewBox: '0 0 1250 1250',
- width: '40px',
- height: '40px' });
- var rect = addSVGElement(svg, 'rect', { x: '0',
- y: '0',
- width: '1250',
- height: '1250',
- fill: 'red' });
- var animation = rect.animate({ fill: ['blue', 'lime'] }, 100 * MS_PER_SEC);
- await animation.ready;
-
- const expectedRestyleCount = tweakExpectedRestyleCount(animation, 5);
- var markers = await observeStyling(5);
- is(markers.length, expectedRestyleCount,
- 'CSS animations on an in-view svg element which is inside transformed ' +
- 'parent should not be throttled.');
-
- await ensureElementRemoval(div);
- });
-
- add_task(async function throttling_animations_out_of_view_svg() {
- var div = addDiv(null, { style: 'overflow: scroll;' +
- 'height: 100px; width: 100px;' });
- var svg = addSVGElement(div, 'svg', { viewBox: '-10 -10 0.1 0.1',
- width: '50px',
- height: '50px' });
- var rect = addSVGElement(svg, 'rect', { width: '10',
- height: '10',
- fill: 'red' });
-
- var animation = rect.animate({ fill: ['blue', 'lime'] }, 100 * MS_PER_SEC);
- await animation.ready;
-
- var markers = await observeStyling(5);
- is(markers.length, 0,
- 'CSS animations on an out-of-view svg element with post-transform ' +
- 'should be throttled.');
-
- await ensureElementRemoval(div);
- });
-
add_task(async function no_throttling_animations_in_view_css_transform() {
var scrollDiv = addDiv(null, { style: 'overflow: scroll; ' +
'height: 100px; width: 100px;' });
var targetDiv = addDiv(null,
{ style: 'animation: background-color 100s;' +
'transform: translate(-50px, -50px);' });
scrollDiv.appendChild(targetDiv);
@@ -1702,12 +1635,83 @@ waitForAllPaints(() => {
is(markers.length, 2, // One is done through UpdateOnlyAnimationStyles(),
// the other is for discarding the animation.
'Element.getAnimations() should flush throttled animation style that ' +
'the throttled animation is discarded');
}
await ensureElementRemoval(div);
});
+
+ // Bug 1443725: Test cases that use SVG namespace element causes a problem
+ // that transition is not triggered reliably by getAnimations() on old style
+ // system. So we have to run these tests at the end of this file.
+ add_task(async function no_throttling_animations_in_view_svg() {
+ var div = addDiv(null, { style: 'overflow: scroll;' +
+ 'height: 100px; width: 100px;' });
+ var svg = addSVGElement(div, 'svg', { viewBox: '-10 -10 0.1 0.1',
+ width: '50px',
+ height: '50px' });
+ var rect = addSVGElement(svg, 'rect', { x: '-10',
+ y: '-10',
+ width: '10',
+ height: '10',
+ fill: 'red' });
+ var animation = rect.animate({ fill: ['blue', 'lime'] }, 100 * MS_PER_SEC);
+ await animation.ready;
+
+ const expectedRestyleCount = tweakExpectedRestyleCount(animation, 5);
+ var markers = await observeStyling(5);
+ is(markers.length, expectedRestyleCount,
+ 'CSS animations on an in-view svg element with post-transform should ' +
+ 'not be throttled.');
+
+ await ensureElementRemoval(div);
+ });
+
+ add_task(async function no_throttling_animations_in_transformed_parent() {
+ var div = addDiv(null, { style: 'overflow: scroll;' +
+ 'transform: translateX(50px);' });
+ var svg = addSVGElement(div, 'svg', { viewBox: '0 0 1250 1250',
+ width: '40px',
+ height: '40px' });
+ var rect = addSVGElement(svg, 'rect', { x: '0',
+ y: '0',
+ width: '1250',
+ height: '1250',
+ fill: 'red' });
+ var animation = rect.animate({ fill: ['blue', 'lime'] }, 100 * MS_PER_SEC);
+ await animation.ready;
+
+ const expectedRestyleCount = tweakExpectedRestyleCount(animation, 5);
+ var markers = await observeStyling(5);
+ is(markers.length, expectedRestyleCount,
+ 'CSS animations on an in-view svg element which is inside transformed ' +
+ 'parent should not be throttled.');
+
+ await ensureElementRemoval(div);
+ });
+
+ add_task(async function throttling_animations_out_of_view_svg() {
+ var div = addDiv(null, { style: 'overflow: scroll;' +
+ 'height: 100px; width: 100px;' });
+ var svg = addSVGElement(div, 'svg', { viewBox: '-10 -10 0.1 0.1',
+ width: '50px',
+ height: '50px' });
+ var rect = addSVGElement(svg, 'rect', { width: '10',
+ height: '10',
+ fill: 'red' });
+
+ var animation = rect.animate({ fill: ['blue', 'lime'] }, 100 * MS_PER_SEC);
+ await animation.ready;
+
+ var markers = await observeStyling(5);
+ is(markers.length, 0,
+ 'CSS animations on an out-of-view svg element with post-transform ' +
+ 'should be throttled.');
+
+ await ensureElementRemoval(div);
+ });
+
});
</script>
</body>