third_party/WebKit/LayoutTests/fast/canvas/canvas-getImageData-linear-rgb.html - Issue 2708403003: Implement canvas color space IDL format for 2D canvas

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-getImageData-linear-rgb.html

Issue 2708403003: Implement canvas color space IDL format for 2D canvas (Closed)

Patch Set: Fixing layout test failures Created 3 years, 9 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:

« third_party/WebKit/LayoutTests/TestExpectations ('K') | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/fast/canvas/canvas-getImageData-rec-2020.html » ('j') | third_party/WebKit/LayoutTests/fast/canvas/color-space/canvas-colorspace-arguments.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <body>	2 <body>

3 <script src="../../resources/testharness.js"></script>	3 <script src="../../resources/testharness.js"></script>

4 <script src="../../resources/testharnessreport.js"></script>	4 <script src="../../resources/testharnessreport.js"></script>

5 <script>	5 <script>

6 test(drawThenGetImageData, 'verifies that getImageData works on linear-rgb canva ses.');	6 test(drawThenGetImageData, 'verifies that getImageData works on linear-rgb canva ses.');

7 test(putThenGetImageData, 'verifies that putImageData works on linear-rgb canvas es.');	7 test(putThenGetImageData, 'verifies that putImageData works on linear-rgb canvas es.');

8	8

9 function drawThenGetImageData() {	9 function drawThenGetImageData() {

10 var canvas = document.createElement('canvas');	10 var canvas = document.createElement('canvas');

11 canvas.width = 10;	11 canvas.width = 10;

12 canvas.height = 10;	12 canvas.height = 10;

13 var ctx = canvas.getContext('2d', {colorSpace: 'linear-rgb'})	13 var ctx = canvas.getContext('2d', {colorSpace: 'srgb', pixelFormat: 'float16'} )

14 ctx.fillStyle = 'rgb(50, 100, 150)';	14 ctx.fillStyle = 'rgb(50, 100, 150)';

15 ctx.fillRect(0, 0, 10, 10);	15 ctx.fillRect(0, 0, 10, 10);

16 var pixel = ctx.getImageData(5, 5, 1, 1).data;	16 var pixel = ctx.getImageData(5, 5, 1, 1).data;

17 // Note: the color specified as as fillStyle is converted from srgb to linear	17 // Note: the color specified as as fillStyle is converted from srgb to linear

18 // when drawn and the the results of getImageData are re-converted to sRGB	18 // when drawn and the the results of getImageData are re-converted to sRGB

19 assert_equals(pixel[0], 50, "Red component retrieved by getImageData is the co lor that was drawn." );	19 assert_equals(pixel[0], 50, "Red component retrieved by getImageData is the co lor that was drawn." );

20 assert_equals(pixel[1], 100, "Green component retrieved by getImageData is the color that was drawn." );	20 assert_equals(pixel[1], 100, "Green component retrieved by getImageData is the color that was drawn." );

21 assert_equals(pixel[2], 150, "Blue component retrieved by getImageData is the color that was drawn." );	21 assert_equals(pixel[2], 150, "Blue component retrieved by getImageData is the color that was drawn." );

22 assert_equals(pixel[3], 255, "Alpha component retrieved by getImageData is the color that was drawn." );	22 assert_equals(pixel[3], 255, "Alpha component retrieved by getImageData is the color that was drawn." );

23 }	23 }

24	24

25 function putThenGetImageData() {	25 function putThenGetImageData() {

26 var canvas = document.createElement('canvas');	26 var canvas = document.createElement('canvas');

27 canvas.width = 10;	27 canvas.width = 10;

28 canvas.height = 10;	28 canvas.height = 10;

29 var ctx = canvas.getContext('2d', {colorSpace: 'linear-rgb'})	29 var ctx = canvas.getContext('2d', {colorSpace: 'srgb', pixelFormat: 'float16'} )

30 var initialData = ctx.createImageData(1, 1);	30 var initialData = ctx.createImageData(1, 1);

31 initialData.data[0] = 50;	31 initialData.data[0] = 50;

32 initialData.data[1] = 100;	32 initialData.data[1] = 100;

33 initialData.data[2] = 150;	33 initialData.data[2] = 150;

34 initialData.data[3] = 255;	34 initialData.data[3] = 255;

35 ctx.putImageData(initialData, 5, 5);	35 ctx.putImageData(initialData, 5, 5);

36 var pixel = ctx.getImageData(5, 5, 1, 1).data;	36 var pixel = ctx.getImageData(5, 5, 1, 1).data;

37 assert_equals(pixel[0], 50, "Red component retrieved by getImageData is the co lor that was put." );	37 assert_equals(pixel[0], 50, "Red component retrieved by getImageData is the co lor that was put." );

38 assert_equals(pixel[1], 100, "Green component retrieved by getImageData is the color that was put." );	38 assert_equals(pixel[1], 100, "Green component retrieved by getImageData is the color that was put." );

39 assert_equals(pixel[2], 150, "Blue component retrieved by getImageData is the color that was put." );	39 assert_equals(pixel[2], 150, "Blue component retrieved by getImageData is the color that was put." );

40 assert_equals(pixel[3], 255, "Alpha component retrieved by getImageData is the color that was put." );	40 assert_equals(pixel[3], 255, "Alpha component retrieved by getImageData is the color that was put." );

41 }	41 }

42	42

43 </script>	43 </script>

44 </body>	44 </body>

OLD	NEW