<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="testElement"></div>
<script>
test(function() {
testElement.attributeStyleMap.set('width', new CSSUnitValue(10, 'px'));
assert_equals(testElement.attributeStyleMap.get('width').toString(), '10px');
}, "Setting and getting round trips");
test(function() {
testElement.attributeStyleMap.set('WIDTH', new CSSUnitValue(40, 'px'));
assert_equals(testElement.attributeStyleMap.get('WiDtH').toString(), '40px');
testElement.attributeStyleMap.set('wIdTh', new CSSUnitValue(50, 'px'));
assert_equals(testElement.attributeStyleMap.get('width').toString(), '50px');
}, "Setting and getting is not case sensitive");
test(function() {
testElement.style.width = '20px';
assert_equals(testElement.attributeStyleMap.get('width').toString(), '20px');
}, "Changes to element.style are reflected in the element.styleMap");
test(function() {
testElement.attributeStyleMap.set('width', new CSSUnitValue(30, 'px'));
assert_equals(testElement.style.width, '30px');
}, "Changes to element.styleMap are reflected in element.style");
test(function() {
assert_throws_js(TypeError, function() {
testElement.attributeStyleMap.set('width', new CSSUnitValue(4, 'number'));
});
}, "Attempting to set an invalid type for a property throws");
test(function() {
testElement.attributeStyleMap.set('width', new CSSUnitValue(2, 'px'));
assert_throws_js(TypeError, function() {
testElement.attributeStyleMap.set('width', new CSSUnitValue(4, 'number'));
});
assert_equals(testElement.attributeStyleMap.get('width').toString(), '2px');
}, "Attempting to set an invalid type for a property does not change the value");
test(function() {
assert_throws_js(TypeError, function() {
testElement.attributeStyleMap.set('lemons', new CSSUnitValue(4, 'number'));
});
assert_throws_js(TypeError, function() {
testElement.attributeStyleMap.set('lemons', null);
});
}, "Attempting to set an invalid property throws");
test(function() {
assert_equals(testElement.attributeStyleMap.get('height'), null);
}, "Getting a property that isn't set returns null");
test(function() {
assert_throws_js(TypeError, function() {
testElement.attributeStyleMap.get('lemons');
});
}, "Getting a property that doesn't exist throws");
test(function() {
assert_throws_js(TypeError, function() {
testElement.attributeStyleMap.set('width', null);
});
// Force a style recalc.
getComputedStyle(testElement).width;
}, "Setting null to a property does not crash");
</script>