css/css-values/attr-length-specified.html

<!DOCTYPE html>
<title>CSS Values and Units Test: attr() specified length</title>
<meta name="assert" content="Test attr() specified length">
<link rel="help" href="https://drafts.csswg.org/css-values/#attr-notation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
  --foo: attr(data-foo type(<length>));
  --bar: attr(data-bar type(<length>));
  --baz: attr(data-baz em);
}
</style>

<div
  data-foo="3em"
  data-bar="3EM"
  data-baz="3"
/ >

<script>
  var elem = getComputedStyle(document.querySelector("div"));
  test(() => {
    assert_equals(elem.getPropertyValue("--foo"), "3em");
  }, "type(<length>) lowercase")
  test(() => {
    assert_equals(elem.getPropertyValue("--bar"), "3em");
  }, "type(<length>) uppercase")
  test(() => {
    assert_equals(elem.getPropertyValue("--baz"), "3em");
  }, "Unit (em) number")
</script>