computed-style.html | Explore in Territory

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

<style>
#color {
  --color-value: blue;
  --accordionColor:#0000ee;
  --foo:#1\.;
  background-color: var(--color-value);
}

#float_pixel {
  --float-pixel-value: 10.5px;
  border-width: var(--float-pixel-value);
}

#em {
  --em-value: 1.5em;
  font-size: var(--em-value);
}

#percentage {
  --percentage-value: 75%;
  width: var(--percentage-value);
}

#dynamic.dynamic {
  --custom-value:pass;
}
</style>

<body>
  <div id="color"></div>
  <div id="float_pixel"></div>
  <div id="em"></div>
  <div id="percentage"></div>
  <div id="dynamic"></div>
</body>

<script>
test(function() {
  assert_equals(getComputedStyle(color).backgroundColor, 'rgb(0, 0, 255)');
}, 'background-color property, color value');

test(function() {
  assert_equals(getComputedStyle(color).getPropertyValue('--accordionColor'), '#0000ee');
  assert_equals(getComputedStyle(color).getPropertyValue('--foo'), '#1\\.');
}, 'property value, accordionColor, foo');

test(function() {
  assert_equals(getComputedStyle(float_pixel).borderWidth, '0px');
}, 'border-width property, border-style = none');

float_pixel.style.borderStyle = "solid";
test(function() {
  assert_equals(getComputedStyle(float_pixel).borderWidth, '10px');
}, 'border-width property, border-style = solid, floating point pixel value');

test(function() {
  assert_equals(getComputedStyle(em).fontSize, '24px');
}, 'font-size property, em value');

test(function() {
  assert_equals(
    getComputedStyle(percentage).width, parseInt(getComputedStyle(document.body).width) * 0.75 + 'px');
}, 'width property, percentage value');

test(function() {
  assert_equals(getComputedStyle(dynamic).getPropertyValue("--custom-value"), "");
  dynamic.className = "dynamic";
  assert_equals(getComputedStyle(dynamic).getPropertyValue("--custom-value"), "pass");
}, 'custom property, forced style recalc');
</script>
chromium/third_party/blink/web_tests/fast/css/variables/computed-style.html
