OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
4 | 4 |
5 <div id="test-image1"></div> | 5 <div id="test-image1"></div> |
6 <div id="test-image2"></div> | 6 <div id="test-image2"></div> |
7 <div id="test-image3"></div> | 7 <div id="test-image3"></div> |
8 <div id="test-image4"></div> | |
8 | 9 |
9 <script> | 10 <script> |
10 | 11 |
11 function urlImage() { | 12 function urlImage() { |
12 var c = document.location.href.split('/'); | 13 var c = document.location.href.split('/'); |
13 c[c.length - 1] = 'resources/1x1-green.png'; | 14 c[c.length - 1] = 'resources/1x1-green.png'; |
14 return c.join('/'); | 15 return c.join('/'); |
15 } | 16 } |
16 | 17 |
17 function base64Image() { | 18 function base64Image() { |
18 return "data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="; | 19 return "data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="; |
19 } | 20 } |
20 | 21 |
22 function assertEqualsURLImageValue(urlImage1, urlImage2) { | |
23 assert_equals(urlImage1.url, urlImage2.url); | |
24 assert_equals(urlImage1.state, urlImage2.state); | |
25 assert_equals(urlImage1.intrinsicWidth, urlImage2.intrinsicWidth); | |
26 assert_equals(urlImage1.intrinsicHeight, urlImage2.intrinsicHeight); | |
27 assert_equals(urlImage1.intrinsicRatio, urlImage2.intrinsicRatio); | |
28 } | |
29 | |
21 test(function() { | 30 test(function() { |
22 var bg = new CSSURLImageValue(urlImage); | 31 var bg = new CSSURLImageValue(urlImage); |
23 assert_equals(bg.state, "unloaded"); | 32 assert_equals(bg.state, "unloaded"); |
24 }, "Can construct a new CSSURLImageValue object with url"); | 33 }, "Can construct a new CSSURLImageValue object with url"); |
25 | 34 |
26 // list of available image properties | 35 // list of available image properties |
27 var imageProperties = ["background-image", "border-image-source", "list-style-im age", "content", "shape-outside"]; | 36 var imageProperties = ["background-image", "border-image-source", "list-style-im age", "content", "shape-outside"]; |
meade_UTC10
2016/08/11 03:57:26
Probably from a dependent CL, but put this right a
anthonyhkf
2016/08/11 06:01:18
Done.
| |
28 | 37 |
29 { | 38 { |
30 var test1 = async_test("Set available properties as CSSURLImageValue using URL "); | 39 var test1 = async_test("Set available properties as CSSURLImageValue using URL "); |
31 var url1 = urlImage(); | 40 var url1 = urlImage(); |
32 | 41 |
33 var imageValue1 = new CSSURLImageValue(url1); | 42 var imageValue1 = new CSSURLImageValue(url1); |
34 var div = document.getElementById("test-image1"); | 43 var div = document.getElementById("test-image1"); |
35 | 44 |
36 for (var i = 0; i < imageProperties.length; ++i) { | 45 for (var i = 0; i < imageProperties.length; ++i) { |
37 if (imageProperties[i] == 'content') // content accepts a list of value | 46 if (imageProperties[i] == 'content') // content accepts a list of value |
(...skipping 25 matching lines...) Expand all Loading... | |
63 var imageValue2 = new CSSURLImageValue(url2); | 72 var imageValue2 = new CSSURLImageValue(url2); |
64 var div2 = document.getElementById("test-image2"); | 73 var div2 = document.getElementById("test-image2"); |
65 | 74 |
66 for (var i = 0; i < imageProperties.length; ++i) { | 75 for (var i = 0; i < imageProperties.length; ++i) { |
67 if (imageProperties[i] == 'content') // content accepts a list of value | 76 if (imageProperties[i] == 'content') // content accepts a list of value |
68 div2.styleMap.set(imageProperties[i], [imageValue2]); | 77 div2.styleMap.set(imageProperties[i], [imageValue2]); |
69 else | 78 else |
70 div2.styleMap.set(imageProperties[i], imageValue2); | 79 div2.styleMap.set(imageProperties[i], imageValue2); |
71 } | 80 } |
72 | 81 |
73 // add an Image object to know if the image has been loaded | |
meade_UTC10
2016/08/11 03:57:26
Might as well keep this comment, even if it is the
| |
74 var image2 = new Image(); | 82 var image2 = new Image(); |
75 image2.src = url2; | 83 image2.src = url2; |
76 | 84 |
77 assert_equals(imageValue2.state, "unloaded"); | 85 assert_equals(imageValue2.state, "unloaded"); |
78 | 86 |
79 image2.addEventListener("load", function() { | 87 image2.addEventListener("load", function() { |
80 assert_equals(imageValue2.url, url2); | 88 assert_equals(imageValue2.url, url2); |
81 assert_equals(imageValue2.state, "loaded"); | 89 assert_equals(imageValue2.state, "loaded"); |
82 assert_equals(imageValue2.intrinsicWidth, 1); | 90 assert_equals(imageValue2.intrinsicWidth, 1); |
83 assert_equals(imageValue2.intrinsicHeight, 1); | 91 assert_equals(imageValue2.intrinsicHeight, 1); |
(...skipping 17 matching lines...) Expand all Loading... | |
101 image3.onerror = function() { | 109 image3.onerror = function() { |
102 assert_equals(imageValue3.url, url3); | 110 assert_equals(imageValue3.url, url3); |
103 assert_equals(imageValue3.state, "error"); | 111 assert_equals(imageValue3.state, "error"); |
104 assert_equals(imageValue3.intrinsicWidth, 0); | 112 assert_equals(imageValue3.intrinsicWidth, 0); |
105 assert_equals(imageValue3.intrinsicHeight, 0); | 113 assert_equals(imageValue3.intrinsicHeight, 0); |
106 assert_equals(imageValue3.intrinsicRatio, null); | 114 assert_equals(imageValue3.intrinsicRatio, null); |
107 test3.done(); | 115 test3.done(); |
108 }; | 116 }; |
109 } | 117 } |
110 | 118 |
119 { | |
120 var test4 = async_test("Get style for each property"); | |
121 var url4 = base64Image(); | |
122 var imageValue4 = new CSSURLImageValue(url4); | |
123 | |
124 var div4 = document.getElementById("test-image4"); | |
125 | |
126 for (var i = 0; i < imageProperties.length; ++i) { | |
127 if (imageProperties[i] == 'content') // content accepts a list of value | |
128 div4.styleMap.set(imageProperties[i], [imageValue4]); | |
129 else | |
130 div4.styleMap.set(imageProperties[i], imageValue4); | |
meade_UTC10
2016/08/11 03:57:26
For this test, it'd be clearer if you set the prop
anthonyhkf
2016/08/11 06:01:18
Done.
| |
131 } | |
132 | |
133 var image4 = new Image(); | |
134 image4.src = url4; | |
135 | |
136 assert_equals(imageValue4.state, "unloaded"); | |
137 | |
138 image4.addEventListener("load", function() { | |
139 for (var i = 0; i < imageProperties.length; ++i) { | |
140 assert_true(getComputedStyleMap(div4).get(imageProperties[i]) instanceof C SSURLImageValue); | |
141 assert_true(div4.styleMap.get(imageProperties[i]) instanceof CSSURLImageVa lue); | |
142 assertEqualsURLImageValue(getComputedStyleMap(div4).get(imageProperties[i] ), imageValue4); | |
143 assertEqualsURLImageValue(div4.styleMap.get(imageProperties[i]), imageValu e4); | |
144 } | |
145 test4.done(); | |
146 }); | |
147 } | |
111 </script> | 148 </script> |
OLD | NEW |