css/css-variables/variable-animation-guaranteed-invalid.html

<!DOCTYPE html>
<title>CSS Test: animating the guaranteed-invalid value</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid">

<style>
@keyframes anim {
  50% { --width: initial; }
  100% { --width: 100px; }
}
.test {
  --width: 50px;
  width: var(--width);
  animation: anim 100s linear paused both;
  animation-delay: calc(var(--at) * -1s);
  border: solid;
  box-sizing: border-box;
}
.test::before { /* Just informative, not really necessary for the test */
  counter-reset: --at var(--at);
  content: counter(--at) "%";
}
</style>

<div style="width: 200px">
  <!-- From 0% to 25%, `--width` is set to 50px (outside of the @keyframes) -->
  <div class="test" style="--at:   0" data-expected-width= "50"></div>
  <div class="test" style="--at:  24" data-expected-width= "50"></div>

  <!-- From 25% to 75%, `--width` is set to the guaranteed invalid value.
       Therefore `width` becomes invalid at computed-value time, and thus
       computes to its initial value, stretching to fill the container. -->
  <div class="test" style="--at:  25" data-expected-width="200"></div>
  <div class="test" style="--at:  74" data-expected-width="200"></div>

  <!-- From 75% to 100%, `--width` is set to 100px (in the @keyframes) -->
  <div class="test" style="--at:  75" data-expected-width="100"></div>
  <div class="test" style="--at: 100" data-expected-width="100"></div>
</div>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout(".test");
</script>