third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-invalid-color-values.html - Issue 2186773002: Revert of Devtools Color: Basic support for #RRGGBBAA and #RGBA

Side by Side Diff: third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-invalid-color-values.html

Issue 2186773002: Revert of Devtools Color: Basic support for #RRGGBBAA and #RGBA (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Manual revert Created 4 years, 4 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:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/inspector/elements/styles-3/spectrum-expected.txt ('k') | third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-invalid-color-values-expected.txt » ('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 <script src="../../../http/tests/inspector/inspector-test.js"></script>	3 <script src="../../../http/tests/inspector/inspector-test.js"></script>

4 <script src="../../../http/tests/inspector/elements-test.js"></script>	4 <script src="../../../http/tests/inspector/elements-test.js"></script>

5 <script>	5 <script>

6 function test()	6 function test()

7 {	7 {

8 var colors = [	8 var colors = [

9 // Each of these is red. Some may need to be clipped to [0, 255].	9 // Each of these is red. Some may need to be clipped to [0, 255].

10 'red',	10 'red',

11 '#F00',	11 '#F00',

12 '#F00F',

13 '#FF0000',

14 '#FF0000FF',

15 'rgb(255,0,0)',	12 'rgb(255,0,0)',

16 'rgb(300,0,0)', // clipped to rgb(255,0,0)	13 'rgb(300,0,0)', // clipped to rgb(255,0,0)

17 'rgb(255,-10,0)', // clipped to rgb(255,0,0)	14 'rgb(255,-10,0)', // clipped to rgb(255,0,0)

18 'rgb(110%, 0%, 0%)', // clipped to rgb(100%,0%,0%)	15 'rgb(110%, 0%, 0%)', // clipped to rgb(100%,0%,0%)

19	16

20 // Each of these are valid	17 // Each of these are valid

21 'rgba(0,0,0,0.5)',	18 'rgba(0,0,0,0.5)',

22 'hsl(-120, 100%, 50%)',	19 'hsl(-120, 100%, 50%)',

23 'hsl(-120, 200%, 200%)', // clipped to hsl(240,100%,100%)	20 'hsl(-120, 200%, 200%)', // clipped to hsl(240,100%,100%)

24 'hsl(-120, -200%, -200%)', // clipped to hsl(240,100%,100%)	21 'hsl(-120, -200%, -200%)', // clipped to hsl(240,100%,100%)

25 'hsla(-120, -200%, -200%, -5)', // clipped to hsla(0,0%,0%,0)	22 'hsla(-120, -200%, -200%, -5)', // clipped to hsla(0,0%,0%,0)

26 'hsla(240,100%,50%,0.05)',	23 'hsla(240,100%,50%,0.05)',

27 'hsl(200.5,0%,50%)',	24 'hsl(200.5,0%,50%)',

28 'hsla(200,1.5%,50%,1)',	25 'hsla(200,1.5%,50%,1)',

29 'rgba(0,0,0,.5)',	26 'rgba(0,0,0,.5)',

30 'hsla(.5,.5%,.5%,.5)',	27 'hsla(.5,.5%,.5%,.5)',

31 'hsla(100.5,50.5%,50.5%,.5)',	28 'hsla(100.5,50.5%,50.5%,.5)',

32	29

33 // Each of these has their alpha clipped [0.0, 1.0].	30 // Each of these has their alpha clipped [0.0, 1.0].

34 'rgba(255, 0, 0, -5)', // clipped to rgba(255,0,0,0)	31 'rgba(255, 0, 0, -5)', // clipped to rgba(255,0,0,0)

35 'rgba(255, 0, 0, 5)', // clipped to rgba(255,0,0,1)	32 'rgba(255, 0, 0, 5)', // clipped to rgba(255,0,0,1)

36 ];	33 ];

37	34

38 var invalidColors = [	35 var invalidColors = [

39 // An invalid color, eg a value for a shorthand like 'border' which can have a color	36 // An invalid color, eg a value for a shorthand like 'border' which can have a color

40 'none',	37 'none',

	38 '#0000',

41 '#00000',	39 '#00000',

42 '#ggg',	40 '#ggg',

43 'rgb(a,b,c)',	41 'rgb(a,b,c)',

44 'rgb(a,b,c,d)',	42 'rgb(a,b,c,d)',

45 'rgb(1,1,1.2)',	43 'rgb(1,1,1.2)',

46 'rgba(0,0,0,1%)',	44 'rgba(0,0,0,1%)',

47 'rgba(0,0,0,)',	45 'rgba(0,0,0,)',

48 'hsl(0,0,0)',	46 'hsl(0,0,0)',

49 'hsl(0%, 0%, 0%)',	47 'hsl(0%, 0%, 0%)',

50 'hsla(0,,0,1)',	48 'hsla(0,,0,1)',

(...skipping 42 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
93 var cf = WebInspector.Color.Format;	91 var cf = WebInspector.Color.Format;

94 for (var colorFormatKey in cf) {	92 for (var colorFormatKey in cf) {

95 var colorFormat = cf[colorFormatKey];	93 var colorFormat = cf[colorFormatKey];

96 // Simple colors do not have RGBA and HSLA representations.	94 // Simple colors do not have RGBA and HSLA representations.

97 if (!color.hasAlpha() && (colorFormat === cf.RGBA \|\| colorFormat === cf.HSLA))	95 if (!color.hasAlpha() && (colorFormat === cf.RGBA \|\| colorFormat === cf.HSLA))

98 continue;	96 continue;

99 // Advanced colors do not have HEX representations.	97 // Advanced colors do not have HEX representations.

100 if (color.hasAlpha() && (colorFormat === cf.ShortHEX \|\| colorFormat === cf.HEX))	98 if (color.hasAlpha() && (colorFormat === cf.ShortHEX \|\| colorFormat === cf.HEX))

101 continue;	99 continue;

102 // If there is no ShortHEX then skip it.	100 // If there is no ShortHEX then skip it.

103 if (colorFormat === cf.ShortHEX && color.detectHEXFormat() !== cf.Sh ortHEX)	101 if (colorFormat === cf.ShortHEX && !color.canBeShortHex())

104 continue;	102 continue;

105 // If there is no nickname, then skip it.	103 // If there is no nickname, then skip it.

106 if (colorFormat === cf.Nickname && !color.nickname())	104 if (colorFormat === cf.Nickname && !color.nickname())

107 continue;	105 continue;

108 InspectorTest.addResult(' ' + colorFormat + ": " + color.asString(c olorFormat));	106 InspectorTest.addResult(' ' + colorFormat + ": " + color.asString(c olorFormat));

109 }	107 }

110 }	108 }

111 }	109 }

112 </script>	110 </script>

113 </head>	111 </head>

114	112

115 <body onload="runTest()">	113 <body onload="runTest()">

116 <p>	114 <p>

117 Tests that the displayed string for colors correctly handles clipped CSS values and RGB percentages.	115 Tests that the displayed string for colors correctly handles clipped CSS values and RGB percentages.

118 </p>	116 </p>

119	117

120 </body>	118 </body>

121 </html>	119 </html>

OLD	NEW