css/css-contain/content-visibility/content-visibility-animation-with-scroll-timeline-in-hidden-subtree.html

<!DOCTYPE html>
<meta charset=utf8>
<title>Test getComputedStyle on a CSS animation with scroll-timeline in a content-visibility subtree</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
<script src="/web-animations/testcommon.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container {
  content-visibility: visible;
}

#scrollContainer {
  height: 100vh;
  overflow-y: scroll;
  scroll-timeline-name: --targetTimeline;
}
#innerspacer {
    height: 300vh;
}
@keyframes fade {
  from { opacity: 1; }
  to { opacity: 0;  }
}
#target {
  background: green;
  height: 100px;
  width: 100px;
}
.animate {
  animation-name: fade;
  animation-duration: 1ms;
  animation-direction: alternate;
  animation-timeline: --targetTimeline;
}

</style>
<body>
  <div id="log"></div>
  <div id="scrollContainer">
    <div id="container"></div>
    <div id="innerspacer"></div>
  </div>

</body>
<script>
"use strict";

function createAnimatingElement(test, name) {
  const container = document.getElementById('container');
  const target = document.createElement('div');
  container.appendChild(target);
  target.id = 'target';
  target.className = name;
  return target;
}

promise_test(async t => {
  const container = document.getElementById('container');
  const target = createAnimatingElement(t, 'animate');
  scrollContainer.scrollTop = 10000;
  const animation = target.getAnimations()[0];
  await animation.ready;
  await waitForAnimationFrames(1);
  let expectedOpacity = parseFloat(getComputedStyle(target).opacity);
  assert_approx_equals(expectedOpacity, 0, 0.1, 'scrollContainer scrolls to bottom, so the opacity should be 0');
  document.getElementById('container').style.contentVisibility = 'hidden';
  await waitForAnimationFrames(1);
  assert_equals(parseFloat(getComputedStyle(target).opacity), expectedOpacity, 'Opacity does not change when it is hidden by c-v');

  scrollContainer.scrollTop = 0;
  assert_equals(parseFloat(getComputedStyle(target).opacity), expectedOpacity, 'The animation is hidden by c-v, so opacity does not change even if scrollTop changes');

  await waitForAnimationFrames(2);

  document.getElementById('container').style.contentVisibility = 'visible';
  await waitForAnimationFrames(2);
  assert_approx_equals(parseFloat(getComputedStyle(target).opacity), 1, 0.1, 'Now that the animation is visible, opacity should be updated');
}, 'Animation with scroll-timeline should be affected c-v');

</script>