unparsedValue.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<div id="testElement"></div>

<script>

test(function() {
  testElement.style.width = "calc(42px + var(--foo, 15em) + var(--bar, var(--test) + 15px))";
  var result = [...testElement.attributeStyleMap.get('width')];
  assert_equals(result.length, 5);
  assert_equals(result[0], "calc(42px + ");
  assert_equals(result[1].variable, "--foo");
  assert_equals([...result[1].fallback].length, 1);
  assert_equals([...result[1].fallback][0], " 15em");
  assert_equals(result[2], " + ");
  assert_equals(result[3].variable, "--bar");
  var barFallback = [...result[3].fallback];
  assert_equals(barFallback.length, 3);
  assert_equals(barFallback[0], " ");
  assert_equals(barFallback[1].variable, "--test");
  assert_equals(barFallback[1].fallback, null);
  assert_equals(barFallback[2], " + 15px");
  assert_equals(result[4], ")");
}, "Construction of CSSUnparsedValue is normalized using example from the spec");

test(function() {
  testElement.style.width = "var(--a, 10px, 20px, 30em)";
  var result = [...testElement.attributeStyleMap.get('width')];
  assert_equals(result.length, 1);
  assert_equals(result[0].variable, "--a");
  assert_equals([...result[0].fallback].length, 1);
  assert_equals([...result[0].fallback][0], " 10px, 20px, 30em");
}, "Has several values");

test(function() {
  testElement.style.width = "   var(   --a   ,   5px   )  ";
  var result = [...testElement.attributeStyleMap.get('width')];
  assert_equals(result.length, 1);
  assert_equals(result[0].variable, "--a");
  assert_equals([...result[0].fallback].length, 1);
  assert_equals([...result[0].fallback][0], " 5px ");

  testElement.style.width = "  calc(  var(  --test, 30px ) + 15px  )";
  result = [...testElement.attributeStyleMap.get('width')];
  assert_equals(result.length, 3);
  assert_equals(result[0], "calc( ");
  assert_equals(result[1].variable, "--test");
  assert_equals([...result[1].fallback].length, 1);
  assert_equals([...result[1].fallback][0], " 30px ");
  assert_equals(result[2], " + 15px )");
}, "Can handle extra spaces with fallback");

test(function() {
  testElement.style.width = "   var(  --a  )  ";
  var result = [...testElement.attributeStyleMap.get('width')];
  assert_equals(result.length, 1);
  assert_equals(result[0].variable, "--a");
  assert_equals(result[0].fallback, null);

  testElement.style.width = " calc( var(  --test ) + 15px  ) ";
  result = [...testElement.attributeStyleMap.get('width')];
  assert_equals(result.length, 3);
  assert_equals(result[0], "calc( ");
  assert_equals(result[1].variable, "--test");
  assert_equals(result[1].fallback, null);
  assert_equals(result[2], " + 15px )");
}, "Can handle extra spaces without fallback");
</script>
chromium/third_party/blink/web_tests/typedcssom/inlinestyle/unparsedValue.html
