<!DOCTYPE html>
<html>
<head>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
</head>
<body>
<div id='testElement'></div>

<script>

testElement.style.width = '10px';

var t1 = async_test("Getting a 10px width results in a CSSUnitValue");
function t1Callback(computedStyleMap) {
  t1.step(function() {
    var result = computedStyleMap.get('width');
    assert_equals(result.constructor.name, CSSUnitValue.name);
    assert_equals(result.toString(), '10px');
  });
  t1.done();
}

var t2 = async_test("getAll for width returns a single value");
function t2Callback(computedStyleMap) {
  t2.step(function() {
    testElement.style.width = '20px';
    var result = computedStyleMap.getAll('width');
    assert_equals(result.length, 1);
    assert_equals(result[0].toString(), '20px');
  });
  t2.done();
}

document.onreadystatechange = function() {
  if(document.readyState == 'complete') {
    var computedStyleMap = testElement.computedStyleMap();
    t1Callback(computedStyleMap);
    t2Callback(computedStyleMap);
  }
};

</script>
</body>
</html>