big-number-clamping.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
div {
  /* This is required so that z-index doesn't compute as auto. */
  position: relative;
}
</style>

<div id="animated"></div>
<div id="reference"></div>

<script>
var numberProperties = [
  'flex-grow',
  'flex-shrink',
  'font-size-adjust',
  'line-height',
  'orphans',
  'stroke-miterlimit',
  'widows',
  'z-index',
];

var bigNumber = 1e20;

function toCamelCase(property) {
  for (var i = property.length - 2; i > 0; --i) {
    if (property[i] === '-') {
      property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
    }
  }
  return property;
}

for (var property of numberProperties) {
  test(() => {
    animated.animate({[toCamelCase(property)]: bigNumber}, {fill: 'forwards'});
    reference.style[property] = bigNumber;
    assert_equals(getComputedStyle(animated)[property], getComputedStyle(reference)[property]);
  }, `Animations on ${property} should clamp identically to setting inline style`);
}
</script>
chromium/third_party/blink/web_tests/animations/big-number-clamping.html
