| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src='../../resources/testharness.js'></script> |
| 5 <script src='../../resources/testharnessreport.js'></script> |
| 6 </head> |
| 7 <body> |
| 8 <div id='testElement'> |
| 9 <div id='childTestElement'></div> |
| 10 </div> |
| 11 <style> |
| 12 #testElement { |
| 13 font-size: 10px; |
| 14 --my-length: 10em; |
| 15 --my-inherited-length: 200px; |
| 16 --my-percentage: 10%; |
| 17 background-image: var(--my-image); |
| 18 width: var(--my-length); |
| 19 height: calc(var(--my-length) + var(--my-percentage) + 15px); |
| 20 } |
| 21 </style> |
| 22 <script> |
| 23 CSS.registerProperty( |
| 24 { |
| 25 name: '--my-image', |
| 26 syntax: '<image>', |
| 27 inherits: false, |
| 28 initialValue: 'url()' |
| 29 }); |
| 30 CSS.registerProperty( |
| 31 { |
| 32 name: '--my-length', |
| 33 syntax: '<length>', |
| 34 inherits: false, |
| 35 initialValue: '0px' |
| 36 }); |
| 37 CSS.registerProperty( |
| 38 { |
| 39 name: '--my-inherited-length', |
| 40 syntax: '<length>', |
| 41 inherits: true, |
| 42 initialValue: '0px' |
| 43 }); |
| 44 CSS.registerProperty( |
| 45 { |
| 46 name: '--my-percentage', |
| 47 syntax: '<percentage>', |
| 48 inherits: false, |
| 49 initialValue: '0%' |
| 50 }); |
| 51 CSS.registerProperty( |
| 52 { |
| 53 name: '--my-unused-property', |
| 54 syntax: '<percentage>', |
| 55 inherits: false, |
| 56 initialValue: '0%' |
| 57 }); |
| 58 // TODO(rjwright): Change this & put it in the CSS when relative URLs work with
registered |
| 59 // properties. |
| 60 var locationPath = location.href.substring(0, location.href.lastIndexOf('/')); |
| 61 var imagePath = locationPath + '/resources/1x1-green.png'; |
| 62 testElement.style = '--my-image: url(\"' + imagePath + '\");'; |
| 63 |
| 64 var computedStyleMap = getComputedStyleMap(testElement); |
| 65 var childComputedStyleMap = getComputedStyleMap(childTestElement); |
| 66 |
| 67 test(function() { |
| 68 assert_true(computedStyleMap.has('--my-length')); |
| 69 var result = computedStyleMap.get('--my-length'); |
| 70 assert_true(result instanceof CSSSimpleLength); |
| 71 assert_equals(result.cssText, '100px'); |
| 72 }, 'Getting a length type registered property returns a CSSSimpleLength'); |
| 73 |
| 74 var t1 = async_test('Getting a URL image type registered property returns a CSSU
RLImageValue'); |
| 75 function t1Callback() { |
| 76 t1.step(function() { |
| 77 assert_true(computedStyleMap.has('--my-image')); |
| 78 var result = computedStyleMap.get('--my-image'); |
| 79 assert_true(result instanceof CSSURLImageValue); |
| 80 assert_equals(result.cssText, 'url(\"' + imagePath + '\")'); |
| 81 // FIXME(rjwright): This test currently fails. Need to find out why and fix
it. |
| 82 assert_equals(result.state, 'loaded'); |
| 83 assert_equals(result.intrinsicWidth, 1); |
| 84 assert_equals(result.intrinsicHeight, 1); |
| 85 assert_equals(result.intrinsicRatio, 1); |
| 86 }); |
| 87 t1.done(); |
| 88 } |
| 89 |
| 90 test(function() { |
| 91 var result = computedStyleMap.get('width'); |
| 92 assert_true(result instanceof CSSSimpleLength); |
| 93 assert_equals(result.cssText, '100px'); |
| 94 }, 'Getting a width with a length type var value returns a CSSSimpleLength'); |
| 95 |
| 96 var t2 = async_test('Getting a background-image with a URL image type var value
returns a CSSURLImageValue'); |
| 97 function t2Callback() { |
| 98 t2.step(function() { |
| 99 var result = computedStyleMap.get('background-image'); |
| 100 assert_true(result instanceof CSSURLImageValue); |
| 101 assert_equals(result.cssText, 'url(\"' + imagePath + '\")'); |
| 102 assert_equals(result.state, 'loaded'); |
| 103 assert_equals(result.intrinsicWidth, 1); |
| 104 assert_equals(result.intrinsicHeight, 1); |
| 105 assert_equals(result.intrinsicRatio, 1); |
| 106 }); |
| 107 t2.done(); |
| 108 } |
| 109 |
| 110 test(function() { |
| 111 assert_true(childComputedStyleMap.has('--my-inherited-length')); |
| 112 var result = childComputedStyleMap.get('--my-inherited-length'); |
| 113 assert_true(result instanceof CSSSimpleLength); |
| 114 assert_equals(result.cssText, '200px'); |
| 115 }, 'Getting an inherited length type registered property returns a CSSSimpleLeng
th'); |
| 116 |
| 117 test(function() { |
| 118 assert_true(childComputedStyleMap.has('--my-length')); |
| 119 result = childComputedStyleMap.get('--my-length'); |
| 120 assert_true(result instanceof CSSSimpleLength); |
| 121 assert_equals(result.cssText, '0px'); |
| 122 }, 'Getting a non-inherited length type registered property returns a CSSSimpleL
ength'); |
| 123 |
| 124 test(function() { |
| 125 var result = computedStyleMap.get('height'); |
| 126 assert_true(result instanceof CSSCalcLength); |
| 127 assert_equals(result.px, 115); |
| 128 assert_equals(result.percent, 10); |
| 129 assert_equals(result.cssText, 'calc(10% + 115px)'); |
| 130 }, 'Getting a height with a calc type containing var values returns a CSSCalcLen
gth'); |
| 131 |
| 132 test(function() { |
| 133 assert_true(computedStyleMap.has('--my-unused-property')); |
| 134 result = computedStyleMap.get('--my-unused-property'); |
| 135 assert_true(result instanceof CSSSimpleLength); |
| 136 assert_equals(result.cssText, '0%'); |
| 137 }, 'Getting the value of a registered property that isn\'t set on the element '
+ |
| 138 'returns the initial value for the property'); |
| 139 |
| 140 test(function() { |
| 141 assert_false(computedStyleMap.has('--my-non-property')); |
| 142 assert_equals(computedStyleMap.get('--my-non-property'), null); |
| 143 }, 'Getting the value of a property that isn\'t registered returns null'); |
| 144 |
| 145 test(function() { |
| 146 var result = computedStyleMap.getAll('--my-length'); |
| 147 assert_equals(result.length, 1); |
| 148 assert_true(result[0] instanceof CSSSimpleLength); |
| 149 assert_equals(result[0].cssText, '100px'); |
| 150 }, 'getAll for a length type registered property returns a single value'); |
| 151 |
| 152 document.onreadystatechange = function() { |
| 153 if(document.readyState == 'complete') { |
| 154 t1Callback(computedStyleMap); |
| 155 t2Callback(computedStyleMap); |
| 156 } |
| 157 }; |
| 158 |
| 159 </script> |
| 160 </body> |
| 161 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2791193004:
[Typed CSSOM] New design for computed styles which includes custom properties (Closed)
