Index: third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html |
diff --git a/third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html b/third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..90ff9d07fc6d46f0178be55b8d655e78c074eaa9 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html |
@@ -0,0 +1,161 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<script src='../../resources/testharness.js'></script> |
+<script src='../../resources/testharnessreport.js'></script> |
+</head> |
+<body> |
+<div id='testElement'> |
+ <div id='childTestElement'></div> |
+</div> |
+<style> |
+#testElement { |
+ font-size: 10px; |
+ --my-length: 10em; |
+ --my-inherited-length: 200px; |
+ --my-percentage: 10%; |
+ background-image: var(--my-image); |
+ width: var(--my-length); |
+ height: calc(var(--my-length) + var(--my-percentage) + 15px); |
+} |
+</style> |
+<script> |
+CSS.registerProperty( |
+{ |
+ name: '--my-image', |
+ syntax: '<image>', |
+ inherits: false, |
+ initialValue: 'url()' |
+}); |
+CSS.registerProperty( |
+{ |
+ name: '--my-length', |
+ syntax: '<length>', |
+ inherits: false, |
+ initialValue: '0px' |
+}); |
+CSS.registerProperty( |
+{ |
+ name: '--my-inherited-length', |
+ syntax: '<length>', |
+ inherits: true, |
+ initialValue: '0px' |
+}); |
+CSS.registerProperty( |
+{ |
+ name: '--my-percentage', |
+ syntax: '<percentage>', |
+ inherits: false, |
+ initialValue: '0%' |
+}); |
+CSS.registerProperty( |
+{ |
+ name: '--my-unused-property', |
+ syntax: '<percentage>', |
+ inherits: false, |
+ initialValue: '0%' |
+}); |
+// TODO(rjwright): Change this & put it in the CSS when relative URLs work with registered |
+// properties. |
+var locationPath = location.href.substring(0, location.href.lastIndexOf('/')); |
+var imagePath = locationPath + '/resources/1x1-green.png'; |
+testElement.style = '--my-image: url(\"' + imagePath + '\");'; |
+ |
+var computedStyleMap = getComputedStyleMap(testElement); |
+var childComputedStyleMap = getComputedStyleMap(childTestElement); |
+ |
+test(function() { |
+ assert_true(computedStyleMap.has('--my-length')); |
+ var result = computedStyleMap.get('--my-length'); |
+ assert_true(result instanceof CSSSimpleLength); |
+ assert_equals(result.cssText, '100px'); |
+}, 'Getting a length type registered property returns a CSSSimpleLength'); |
+ |
+var t1 = async_test('Getting a URL image type registered property returns a CSSURLImageValue'); |
+function t1Callback() { |
+ t1.step(function() { |
+ assert_true(computedStyleMap.has('--my-image')); |
+ var result = computedStyleMap.get('--my-image'); |
+ assert_true(result instanceof CSSURLImageValue); |
+ assert_equals(result.cssText, 'url(\"' + imagePath + '\")'); |
+ // FIXME(rjwright): This test currently fails. Need to find out why and fix it. |
+ assert_equals(result.state, 'loaded'); |
+ assert_equals(result.intrinsicWidth, 1); |
+ assert_equals(result.intrinsicHeight, 1); |
+ assert_equals(result.intrinsicRatio, 1); |
+ }); |
+ t1.done(); |
+} |
+ |
+test(function() { |
+ var result = computedStyleMap.get('width'); |
+ assert_true(result instanceof CSSSimpleLength); |
+ assert_equals(result.cssText, '100px'); |
+}, 'Getting a width with a length type var value returns a CSSSimpleLength'); |
+ |
+var t2 = async_test('Getting a background-image with a URL image type var value returns a CSSURLImageValue'); |
+function t2Callback() { |
+ t2.step(function() { |
+ var result = computedStyleMap.get('background-image'); |
+ assert_true(result instanceof CSSURLImageValue); |
+ assert_equals(result.cssText, 'url(\"' + imagePath + '\")'); |
+ assert_equals(result.state, 'loaded'); |
+ assert_equals(result.intrinsicWidth, 1); |
+ assert_equals(result.intrinsicHeight, 1); |
+ assert_equals(result.intrinsicRatio, 1); |
+ }); |
+ t2.done(); |
+} |
+ |
+test(function() { |
+ assert_true(childComputedStyleMap.has('--my-inherited-length')); |
+ var result = childComputedStyleMap.get('--my-inherited-length'); |
+ assert_true(result instanceof CSSSimpleLength); |
+ assert_equals(result.cssText, '200px'); |
+}, 'Getting an inherited length type registered property returns a CSSSimpleLength'); |
+ |
+test(function() { |
+ assert_true(childComputedStyleMap.has('--my-length')); |
+ result = childComputedStyleMap.get('--my-length'); |
+ assert_true(result instanceof CSSSimpleLength); |
+ assert_equals(result.cssText, '0px'); |
+}, 'Getting a non-inherited length type registered property returns a CSSSimpleLength'); |
+ |
+test(function() { |
+ var result = computedStyleMap.get('height'); |
+ assert_true(result instanceof CSSCalcLength); |
+ assert_equals(result.px, 115); |
+ assert_equals(result.percent, 10); |
+ assert_equals(result.cssText, 'calc(10% + 115px)'); |
+}, 'Getting a height with a calc type containing var values returns a CSSCalcLength'); |
+ |
+test(function() { |
+ assert_true(computedStyleMap.has('--my-unused-property')); |
+ result = computedStyleMap.get('--my-unused-property'); |
+ assert_true(result instanceof CSSSimpleLength); |
+ assert_equals(result.cssText, '0%'); |
+}, 'Getting the value of a registered property that isn\'t set on the element ' + |
+ 'returns the initial value for the property'); |
+ |
+test(function() { |
+ assert_false(computedStyleMap.has('--my-non-property')); |
+ assert_equals(computedStyleMap.get('--my-non-property'), null); |
+}, 'Getting the value of a property that isn\'t registered returns null'); |
+ |
+test(function() { |
+ var result = computedStyleMap.getAll('--my-length'); |
+ assert_equals(result.length, 1); |
+ assert_true(result[0] instanceof CSSSimpleLength); |
+ assert_equals(result[0].cssText, '100px'); |
+}, 'getAll for a length type registered property returns a single value'); |
+ |
+document.onreadystatechange = function() { |
+ if(document.readyState == 'complete') { |
+ t1Callback(computedStyleMap); |
+ t2Callback(computedStyleMap); |
+ } |
+}; |
+ |
+</script> |
+</body> |
+</html> |