third_party/WebKit/LayoutTests/paint/invalidation/svg/image-animation-with-zoom.html - Issue 2882873002: Deflake paint/invalidation/svg/image-animation-with-zoom.html

Side by Side Diff: third_party/WebKit/LayoutTests/paint/invalidation/svg/image-animation-with-zoom.html

Issue 2882873002: Deflake paint/invalidation/svg/image-animation-with-zoom.html (Closed)

Patch Set: - Created 3 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/paint/invalidation/svg/image-animation-with-zoom-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE HTML>	1 <!DOCTYPE HTML>

2 <!-- Test for crbug.com/375765: test passes if a green square is drawn. -->	2 <!-- Test for crbug.com/375765: test passes if a green square is drawn. -->

3 <script src="../resources/text-based-repaint.js"></script>	3 <script src="../../../resources/run-after-layout-and-paint.js"></script>

4 <style>	4 <style>

5 html {	5 html {

6 zoom: 2.2;	6 zoom: 2.2;

7 }	7 }

8 * {	8 * {

9 margin: 0;	9 margin: 0;

10 padding: 0;	10 padding: 0;

11 }	11 }

	12 img {

	13 width: 50px;

	14 height: 50px;

	15 }

12 </style>	16 </style>

13 <script>	17 <script>

14 window.testIsAsync = true;	18 if (window.testRunner)

15 window.onload = runRepaintTest;	19 testRunner.waitUntilDone();

16	20 window.onload = function() {

17 function repaintTest() {	21 targetImage.onload = function() {

18 window.internals.advanceImageAnimation(targetImage);	22 runAfterLayoutAndPaint(function() {

19 window.requestAnimationFrame(function() {	23 if (window.internals) {

20 finishRepaintTest();	24 internals.advanceImageAnimation(targetImage);

21 });	25 runAfterLayoutAndPaint(function() {

	26 internals.advanceImageAnimation(targetImage);
	Xianzhu 2017/05/15 22:13:20 Without the second advanceImageAnimation, the test Without the second advanceImageAnimation, the test sometimes fail on release builds, e.g. https://storage.googleapis.com/chromium-layout-test-archives/win10_blink_rel/.... I'm not sure how advanceImageAnimation works for animated svg images. Ran 1000 times of the test locally with a release build and all succeeded. pdr. 2017/05/16 01:39:50 I think I found the bug: https://cs.chromium.org/c Show quoted text On 2017/05/15 at 22:13:20, Xianzhu wrote: > Without the second advanceImageAnimation, the test sometimes fail on release builds, e.g. https://storage.googleapis.com/chromium-layout-test-archives/win10_blink_rel/.... I'm not sure how advanceImageAnimation works for animated svg images. Ran 1000 times of the test locally with a release build and all succeeded. I think I found the bug: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/svg/graph... We don't actually advance the css animation timeline in svg images, despite what the comment above Internals::advanceImageAnimation says. Taking away both advanceImageAnimation lines in this patch has no effect. I think this test is getting rid of the flakiness by ensuring the SVG image's internal css timeline gets advanced twice. I think this is a good approach. WDYT of removing the advanceImageAnimation lines and adding the following comment: // Two paints are needed to ensure the CSS timeline advances because we do not have // control over the SVGImage's CSS timeline with internals.advanceImageAnimation, // see TODO in Internals.h. And then add the following in Internals.h above advanceImageAnimation: // Advances an animated image. For BitmapImage (e.g., animated gifs) this // will advance to the next frame. For SVGImage, this will trigger an // animation to advance the SMIL timeline by one frame. // TODO(pdr): SVGImage does not advance the CSS timer so CSS animations // will be difficult to test reliably.
	27 runAfterLayoutAndPaint(function() {

	28 testRunner.notifyDone();

	29 });

	30 });

	31 }

	32 });

	33 };

	34 targetImage.src='resources/animate-center.svg';

22 };	35 };

23 </script>	36 </script>

24 <img id="targetImage" src="resources/animate-center.svg" width="10px" height="10 px">	37 <img id="targetImage">

OLD	NEW