| <!DOCTYPE html> |
| <script src='../../resources/testharness.js'></script> |
| <script src='../../resources/testharnessreport.js'></script> |
| |
| <div id="testElement"></div> |
| |
| <script> |
| |
| var computedStyleMap = testElement.computedStyleMap(); |
| var computedStyle = getComputedStyle(testElement); |
| |
| test(function() { |
| var properties = computedStyleMap.getProperties(); |
| var computedStyleProperties = [...computedStyle].sort(); |
| assert_equals(properties.length, computedStyle.length); |
| for (var i = 0; i < computedStyle.length; ++i) { |
| assert_equals(properties[i], computedStyleProperties[i]); |
| } |
| }, "Computed StyleMap.getProperties returns the same list of property names as ComputedStyle"); |
| |
| test(function() { |
| testElement.style.border = '1px solid #00ff00'; |
| var styleValue = computedStyleMap.get('border'); |
| assert_equals(styleValue.constructor, CSSStyleValue); |
| assert_equals(styleValue.toString(), testElement.style.border); |
| }, 'Unsupported but serializable property returns a base CSSStyleValue.'); |
| |
| test(function() { |
| testElement.style.border = ''; |
| testElement.style.borderBottomColor = 'green'; |
| assert_equals(computedStyleMap.get('border'), null); |
| }, 'Unsupported and unserializable property returns null.'); |
| |
| test(function() { |
| assert_throws(new TypeError(), function() { computedStyleMap.get('bananas'); }); |
| }, 'get() throws for an invalid property.'); |
| |
| test(function() { |
| assert_false(computedStyleMap.has('-webkit-mask')); |
| }, 'has() return false for an unsupported property.'); |
| |
| test(function() { |
| assert_throws(new TypeError(), function() { computedStyleMap.has('bananas'); }); |
| }, 'has() throws for an invalid property.'); |
| |
| test(function() { |
| testElement.style.border = '1px solid black'; |
| assert_true(computedStyleMap.has('border')); |
| }, 'has() returns true for an unsupported but serializable shorthand property.'); |
| |
| test(function() { |
| testElement.style.border = ''; |
| testElement.style.borderTopColor = 'red'; |
| assert_false(computedStyleMap.has('border')); |
| }, 'has() return false for unsupported and unserializable shorthand properties.'); |
| |
| test(function() { |
| assert_true(computedStyleMap.has('width')); |
| }, 'has() returns true for a supported property.'); |
| |
| test(function() { |
| testElement.style.width = '100px'; |
| assert_equals(computedStyleMap.get('width').toString(), '100px'); |
| testElement.style.display = 'none'; |
| assert_equals(computedStyleMap.get('width').toString(), '100px'); |
| }, 'get() returns correct values for an element with display: none.'); |
| |
| </script> |
