parsing-compound-color-with-variable.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Verify parsing of colors with prefixed information and variables.</title>
<link rel="author" title="Aaron Krajeski" href="mailto:[email protected]">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  html {
    --my-var: 1;
    color: black;
  }

  div {
    width: 100px;
    height: 100px;
    background-color: rgb(0 calc(255 * var(--my-var)) 0);
    border: 50px solid rgb(0 calc(255 * var(--my-var)) 0);
  }

</style>
</head>
<body>
  <div id="target"></div>
  <p>
    Test passes if the square is green with no black border.
    If colors with variables for channels and prefixes in front (such as borders
    and shadows) are not carefully consumed they might not be parsed
    correctly.
    See <a href="crbug.com/1467145">crbug.com/1467145</a>
  </p>
</body>
<script>
test(function() {
  const target = document.getElementById("target")
  const borderColor = getComputedStyle(target).borderColor;
  const backgroundColor = getComputedStyle(target).backgroundColor;
  assert_equals(borderColor, backgroundColor);
}, "Border/shadow colors with sizes and variables should parse.");
</script>
</html>
chromium/third_party/blink/web_tests/fast/css/parsing-compound-color-with-variable.html
