| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src='../../resources/testharness.js'></script> | 4 <script src='../../resources/testharness.js'></script> |
| 5 <script src='../../resources/testharnessreport.js'></script> | 5 <script src='../../resources/testharnessreport.js'></script> |
| 6 </head> | 6 </head> |
| 7 <body> | 7 <body> |
| 8 <div id='testElement'> | 8 <div id='testElement'> |
| 9 <div id='childTestElement'></div> | 9 <div id='childTestElement'></div> |
| 10 </div> | 10 </div> |
| (...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 60 var locationPath = location.href.substring(0, location.href.lastIndexOf('/')); | 60 var locationPath = location.href.substring(0, location.href.lastIndexOf('/')); |
| 61 var imagePath = locationPath + '/resources/1x1-green.png'; | 61 var imagePath = locationPath + '/resources/1x1-green.png'; |
| 62 testElement.style = '--my-image: url(\"' + imagePath + '\");'; | 62 testElement.style = '--my-image: url(\"' + imagePath + '\");'; |
| 63 | 63 |
| 64 var computedStyleMap = getComputedStyleMap(testElement); | 64 var computedStyleMap = getComputedStyleMap(testElement); |
| 65 var childComputedStyleMap = getComputedStyleMap(childTestElement); | 65 var childComputedStyleMap = getComputedStyleMap(childTestElement); |
| 66 | 66 |
| 67 test(function() { | 67 test(function() { |
| 68 assert_true(computedStyleMap.has('--my-length')); | 68 assert_true(computedStyleMap.has('--my-length')); |
| 69 var result = computedStyleMap.get('--my-length'); | 69 var result = computedStyleMap.get('--my-length'); |
| 70 assert_true(result instanceof CSSSimpleLength); | 70 assert_equals(result.constructor.name, CSSUnitValue.name); |
| 71 assert_equals(result.cssText, '100px'); | 71 assert_equals(result.cssText, '100px'); |
| 72 }, 'Getting a length type registered property returns a CSSSimpleLength'); | 72 }, 'Getting a length type registered property returns a CSSUnitValue'); |
| 73 | 73 |
| 74 var t1 = async_test('Getting a URL image type registered property returns a CSSU
RLImageValue'); | 74 var t1 = async_test('Getting a URL image type registered property returns a CSSU
RLImageValue'); |
| 75 function t1Callback() { | 75 function t1Callback() { |
| 76 t1.step(function() { | 76 t1.step(function() { |
| 77 assert_true(computedStyleMap.has('--my-image')); | 77 assert_true(computedStyleMap.has('--my-image')); |
| 78 var result = computedStyleMap.get('--my-image'); | 78 var result = computedStyleMap.get('--my-image'); |
| 79 assert_true(result instanceof CSSURLImageValue); | 79 assert_equals(result.constructor.name, CSSURLImageValue.name); |
| 80 assert_equals(result.cssText, 'url(\"' + imagePath + '\")'); | 80 assert_equals(result.cssText, 'url(\"' + imagePath + '\")'); |
| 81 // FIXME: This section of this test fails. It seems to be a bug in custom pr
operties. See | 81 // FIXME: This section of this test fails. It seems to be a bug in custom pr
operties. See |
| 82 // crbug.com/719838 | 82 // crbug.com/719838 |
| 83 assert_equals(result.state, 'loaded'); | 83 assert_equals(result.state, 'loaded'); |
| 84 assert_equals(result.intrinsicWidth, 1); | 84 assert_equals(result.intrinsicWidth, 1); |
| 85 assert_equals(result.intrinsicHeight, 1); | 85 assert_equals(result.intrinsicHeight, 1); |
| 86 assert_equals(result.intrinsicRatio, 1); | 86 assert_equals(result.intrinsicRatio, 1); |
| 87 }); | 87 }); |
| 88 t1.done(); | 88 t1.done(); |
| 89 } | 89 } |
| 90 | 90 |
| 91 test(function() { | 91 test(function() { |
| 92 var result = computedStyleMap.get('width'); | 92 var result = computedStyleMap.get('width'); |
| 93 assert_true(result instanceof CSSSimpleLength); | 93 assert_equals(result.constructor.name, CSSUnitValue.name); |
| 94 assert_equals(result.cssText, '100px'); | 94 assert_equals(result.cssText, '100px'); |
| 95 }, 'Getting a width with a length type var value returns a CSSSimpleLength'); | 95 }, 'Getting a width with a length type var value returns a CSSUnitValue'); |
| 96 | 96 |
| 97 var t2 = async_test('Getting a background-image with a URL image type var value
returns a CSSURLImageValue'); | 97 var t2 = async_test('Getting a background-image with a URL image type var value
returns a CSSURLImageValue'); |
| 98 function t2Callback() { | 98 function t2Callback() { |
| 99 t2.step(function() { | 99 t2.step(function() { |
| 100 var result = computedStyleMap.get('background-image'); | 100 var result = computedStyleMap.get('background-image'); |
| 101 assert_true(result instanceof CSSURLImageValue); | 101 assert_equals(result.constructor.name, CSSURLImageValue.name); |
| 102 assert_equals(result.cssText, 'url(\"' + imagePath + '\")'); | 102 assert_equals(result.cssText, 'url(\"' + imagePath + '\")'); |
| 103 assert_equals(result.state, 'loaded'); | 103 assert_equals(result.state, 'loaded'); |
| 104 assert_equals(result.intrinsicWidth, 1); | 104 assert_equals(result.intrinsicWidth, 1); |
| 105 assert_equals(result.intrinsicHeight, 1); | 105 assert_equals(result.intrinsicHeight, 1); |
| 106 assert_equals(result.intrinsicRatio, 1); | 106 assert_equals(result.intrinsicRatio, 1); |
| 107 }); | 107 }); |
| 108 t2.done(); | 108 t2.done(); |
| 109 } | 109 } |
| 110 | 110 |
| 111 test(function() { | 111 test(function() { |
| 112 assert_true(childComputedStyleMap.has('--my-inherited-length')); | 112 assert_true(childComputedStyleMap.has('--my-inherited-length')); |
| 113 var result = childComputedStyleMap.get('--my-inherited-length'); | 113 var result = childComputedStyleMap.get('--my-inherited-length'); |
| 114 assert_true(result instanceof CSSSimpleLength); | 114 assert_equals(result.constructor.name, CSSUnitValue.name); |
| 115 assert_equals(result.cssText, '200px'); | 115 assert_equals(result.cssText, '200px'); |
| 116 }, 'Getting an inherited length type registered property returns a CSSSimpleLeng
th'); | 116 }, 'Getting an inherited length type registered property returns a CSSUnitValue'
); |
| 117 | 117 |
| 118 test(function() { | 118 test(function() { |
| 119 assert_true(childComputedStyleMap.has('--my-length')); | 119 assert_true(childComputedStyleMap.has('--my-length')); |
| 120 result = childComputedStyleMap.get('--my-length'); | 120 result = childComputedStyleMap.get('--my-length'); |
| 121 assert_true(result instanceof CSSSimpleLength); | 121 assert_equals(result.constructor.name, CSSUnitValue.name); |
| 122 assert_equals(result.cssText, '0px'); | 122 assert_equals(result.cssText, '0px'); |
| 123 }, 'Getting a non-inherited length type registered property returns a CSSSimpleL
ength'); | 123 }, 'Getting a non-inherited length type registered property returns a CSSUnitVal
ue'); |
| 124 | 124 |
| 125 test(function() { | 125 test(function() { |
| 126 var result = computedStyleMap.get('height'); | 126 var result = computedStyleMap.get('height'); |
| 127 assert_true(result instanceof CSSCalcLength); | 127 assert_equals(result.constructor.name, CSSCalcValue.name); |
| 128 assert_equals(result.px, 115); | 128 assert_equals(result.px, 115); |
| 129 assert_equals(result.percent, 10); | 129 assert_equals(result.percent, 10); |
| 130 assert_equals(result.cssText, 'calc(10% + 115px)'); | 130 assert_equals(result.cssText, 'calc(10% + 115px)'); |
| 131 }, 'Getting a height with a calc type containing var values returns a CSSCalcLen
gth'); | 131 }, 'Getting a height with a calc type containing var values returns a CSSCalcVal
ue'); |
| 132 | 132 |
| 133 test(function() { | 133 test(function() { |
| 134 assert_true(computedStyleMap.has('--my-unused-property')); | 134 assert_true(computedStyleMap.has('--my-unused-property')); |
| 135 result = computedStyleMap.get('--my-unused-property'); | 135 result = computedStyleMap.get('--my-unused-property'); |
| 136 assert_true(result instanceof CSSSimpleLength); | 136 assert_equals(result.constructor.name, CSSUnitValue.name); |
| 137 assert_equals(result.cssText, '0%'); | 137 assert_equals(result.cssText, '0%'); |
| 138 }, 'Getting the value of a registered property that isn\'t set on the element '
+ | 138 }, 'Getting the value of a registered property that isn\'t set on the element '
+ |
| 139 'returns the initial value for the property'); | 139 'returns the initial value for the property'); |
| 140 | 140 |
| 141 test(function() { | 141 test(function() { |
| 142 assert_false(computedStyleMap.has('--my-non-property')); | 142 assert_false(computedStyleMap.has('--my-non-property')); |
| 143 assert_equals(computedStyleMap.get('--my-non-property'), null); | 143 assert_equals(computedStyleMap.get('--my-non-property'), null); |
| 144 }, 'Getting the value of a property that isn\'t registered returns null'); | 144 }, 'Getting the value of a property that isn\'t registered returns null'); |
| 145 | 145 |
| 146 test(function() { | 146 test(function() { |
| 147 var result = computedStyleMap.getAll('--my-length'); | 147 var result = computedStyleMap.getAll('--my-length'); |
| 148 assert_equals(result.length, 1); | 148 assert_equals(result.length, 1); |
| 149 assert_true(result[0] instanceof CSSSimpleLength); | 149 assert_equals(result[0].constructor.name, CSSUnitValue.name); |
| 150 assert_equals(result[0].cssText, '100px'); | 150 assert_equals(result[0].cssText, '100px'); |
| 151 }, 'getAll for a length type registered property returns a single value'); | 151 }, 'getAll for a length type registered property returns a single value'); |
| 152 | 152 |
| 153 document.onreadystatechange = function() { | 153 document.onreadystatechange = function() { |
| 154 if(document.readyState == 'complete') { | 154 if(document.readyState == 'complete') { |
| 155 t1Callback(); | 155 t1Callback(); |
| 156 t2Callback(); | 156 t2Callback(); |
| 157 } | 157 } |
| 158 }; | 158 }; |
| 159 | 159 |
| 160 </script> | 160 </script> |
| 161 </body> | 161 </body> |
| 162 </html> | 162 </html> |
| OLD | NEW |