<!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(new 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(new 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(new TypeError(), function() {
    testElement.attributeStyleMap.set('lemons', new CSSUnitValue(4, 'number'));
  });
  assert_throws(new 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(new TypeError(), function() {
    testElement.attributeStyleMap.get('lemons');
  });
}, "Getting a property that doesn't exist throws");

test(function() {
  assert_throws(new TypeError(), function() {
    testElement.attributeStyleMap.set('width', null);
  });
  // Force a style recalc.
  getComputedStyle(testElement).width;
}, "Setting null to a property does not crash");


</script>