third_party/WebKit/LayoutTests/fast/gradients/css3-radial-gradients2.html - Issue 2746583003: Send deprecation messages for prefixed gradients now that it's possible.

Side by Side Diff: third_party/WebKit/LayoutTests/fast/gradients/css3-radial-gradients2.html

Issue 2746583003: Send deprecation messages for prefixed gradients now that it's possible. (Closed)

Patch Set: recommit 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/fast/gradients/css3-radial-gradients.html ('k') | third_party/WebKit/LayoutTests/fast/gradients/css3-radial-gradients3.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	2

3 <html>	3 <html>

4 <head>	4 <head>

5 <style type="text/css" media="screen">	5 <style type="text/css" media="screen">

6 .box {	6 .box {

7 display: inline-block;	7 display: inline-block;

8 height: 250px;	8 height: 250px;

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

10 margin: 10px;	10 margin: 10px;

11 border: 1px solid black;	11 border: 1px solid black;

12 background-repeat: no-repeat;	12 background-repeat: no-repeat;

13 }	13 }

14	14

15 .gradient1 {	15 .gradient1 {

16 /* Green should coincide with the edge of the box, with blue fill (buggy i n CG). */	16 /* Green should coincide with the edge of the box, with blue fill (buggy i n CG). */

17 background-image: -webkit-radial-gradient(left, circle closest-corner, red , green 150px, blue);	17 background-image: radial-gradient(circle closest-corner at left, red, gree n 150px, blue);

18 background-image: -moz-radial-gradient(left, circle closest-corner, red, g reen 150px, blue);

19 }	18 }

20	19

21 .gradient2 {	20 .gradient2 {

22 /* Fill should be orange (buggy in CG). */	21 /* Fill should be orange (buggy in CG). */

23 background-image: -webkit-radial-gradient(left, circle closest-corner, red , green 150px, blue, orange 101%);	22 background-image: radial-gradient(circle closest-corner at left, red, gree n 150px, blue, orange 101%);

24 background-image: -moz-radial-gradient(left, circle closest-corner, red, g reen 150px, blue, orange 101%);

25 }	23 }

26	24

27 .gradient3 {	25 .gradient3 {

28 background-image: -webkit-radial-gradient(-100px center, ellipse farthest- corner, black, white);	26 background-image: radial-gradient(ellipse farthest-corner at -100px center , black, white);

29 background-image: -moz-radial-gradient(-100px center, ellipse farthest-cor ner, black, white);

30 }	27 }

31	28

32 .gradient4 {	29 .gradient4 {

33 background-image: -webkit-radial-gradient(-100px center, ellipse closest-c orner, black, white);	30 background-image: radial-gradient(ellipse closest-corner at -100px center, black, white);

34 background-image: -moz-radial-gradient(-100px center, ellipse closest-corn er, black, white);

35 }	31 }

36	32

37 .gradient5 {	33 .gradient5 {

38 background-image: -webkit-radial-gradient(bottom right, black, white);	34 background-image: radial-gradient(at bottom right, black, white);

39 background-image: -moz-radial-gradient(bottom right, black, white);

40 }	35 }

41	36

42 .gradient6 {	37 .gradient6 {

43 background-image: -webkit-radial-gradient(50% 20%, ellipse contain, black, white);	38 background-image: radial-gradient(ellipse closest-side at 50% 20%, black, white);

44 background-image: -moz-radial-gradient(50% 20%, ellipse contain, black, wh ite);

45 }	39 }

46	40

47 </style>	41 </style>

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

49 if (window.testRunner) {	43 if (window.testRunner) {

50 testRunner.dumpAsTextWithPixelResults();	44 testRunner.dumpAsTextWithPixelResults();

51 }	45 }

52 </script>	46 </script>

53 </head>	47 </head>

54 <body>	48 <body>

55	49

56 <div class="gradient1 box"></div>	50 <div class="gradient1 box"></div>

57 <div class="gradient2 box"></div>	51 <div class="gradient2 box"></div>

58 <div class="gradient3 box"></div>	52 <div class="gradient3 box"></div>

59 <br>	53 <br>

60 <div class="gradient4 box"></div>	54 <div class="gradient4 box"></div>

61 <div class="gradient5 box"></div>	55 <div class="gradient5 box"></div>

62 <div class="gradient6 box"></div>	56 <div class="gradient6 box"></div>

63	57

64 </body>	58 </body>

65 </html>	59 </html>

OLD	NEW