third_party/WebKit/LayoutTests/animations/cross-fade-webkit-mask-box-image.html - Issue 2970883003: Separate out animations tests with prefixing

Side by Side Diff: third_party/WebKit/LayoutTests/animations/cross-fade-webkit-mask-box-image.html

Issue 2970883003: Separate out animations tests with prefixing (Closed)

Patch Set: Rebaseline virtual/threaded version of test too Created 3 years, 5 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/animations/cross-fade-list-style-image.html ('k') | third_party/WebKit/LayoutTests/animations/cross-fade-webkit-mask-box-image-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 <html>	1 <html>

2 <head>	2 <head>

3 <style>	3 <style>

4 #box {	4 #box {

5 position: absolute;	5 position: absolute;

6 left: 100px;	6 left: 100px;

7 top: 100px;	7 top: 100px;

8 height: 200px;	8 height: 200px;

9 width: 200px;	9 width: 200px;

10 background-color: red;	10 background-color: red;

11 -webkit-animation: anim 1s linear infinite;	11 animation: anim 1s linear infinite;

12 }	12 }

13 #boxStatic {	13 #boxStatic {

14 position: absolute;	14 position: absolute;

15 left: 100px;	15 left: 100px;

16 top: 300px;	16 top: 300px;

17 height: 200px;	17 height: 200px;

18 width: 200px;	18 width: 200px;

19 background-color: red;	19 background-color: red;

20 -webkit-mask-box-image: -webkit-cross-fade(url(resources/stripes-100.png ), url(resources/green-100.png), 25%) 50 stretch;	20 -webkit-mask-box-image: -webkit-cross-fade(url(resources/stripes-100.png ), url(resources/green-100.png), 25%) 50 stretch;

21 }	21 }

22 @-webkit-keyframes anim {	22 @keyframes anim {

23 from { -webkit-mask-box-image: url(resources/stripes-100.png) 50 stretch ; }	23 from { -webkit-mask-box-image: url(resources/stripes-100.png) 50 stretch ; }

24 to { -webkit-mask-box-image: url(resources/green-100.png) 50 stretch; }	24 to { -webkit-mask-box-image: url(resources/green-100.png) 50 stretch; }

25 }	25 }

26 </style>	26 </style>

27 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script>	27 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script>

28 <script type="text/javascript" charset="utf-8">	28 <script type="text/javascript" charset="utf-8">

29 // This test was flaky because it would start before the images were loaded.	29 // This test was flaky because it would start before the images were loaded.

30 var imagesLoaded = 0;	30 var imagesLoaded = 0;

31 function imageLoaded() {	31 function imageLoaded() {

32 ++imagesLoaded;	32 ++imagesLoaded;

33 if (imagesLoaded == 2) {	33 if (imagesLoaded == 2) {

34 const expectedValues = [	34 const expectedValues = [

35 // [time, element-id, property, expected-value, tolerance]	35 // [time, element-id, property, expected-value, tolerance]

36 [2.25, ["box", "boxStatic"], "webkitMaskBoxImage", 0.25, 0.05]	36 [2.25, ["box", "boxStatic"], "webkitMaskBoxImage", 0.25, 0.05]

37 ];	37 ];

38 var doPixelTest = true;	38 var doPixelTest = true;

39 var disablePauseAPI = false;	39 var disablePauseAPI = false;

40 var startTestImmediately = true;	40 var startTestImmediately = true;

41 runAnimationTest(expectedValues, undefined, undefined, disablePauseAPI, do PixelTest, startTestImmediately);	41 runAnimationTest(expectedValues, undefined, undefined, disablePauseAPI, do PixelTest, startTestImmediately);

42 }	42 }

43 }	43 }

44 </script>	44 </script>

45 </head>	45 </head>

46 <body>	46 <body>

47 <img id="box" src="resources/green-100.png" onLoad="imageLoaded();"/>	47 <img id="box" src="resources/green-100.png" onLoad="imageLoaded();"/>

48 <img id="boxStatic" src="resources/stripes-100.png" onLoad="imageLoaded();"/>	48 <img id="boxStatic" src="resources/stripes-100.png" onLoad="imageLoaded();"/>

49 <div id="result"></div>	49 <div id="result"></div>

50 </body>	50 </body>

51 </html>	51 </html>

OLD	NEW