visibility.html | Explore in Territory

<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation type for the 'visibility' property</title>
<!-- FIXME: The following spec link should be updated once this definition has
  been moved to CSS Values & Units. -->
<link rel="help" href="https://drafts.csswg.org/css-transitions/#animtype-visibility">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
<script>
'use strict';

test(t => {
  const div = createDiv(t);
  const anim = div.animate({ visibility: ['hidden','visible'] },
                           { duration: 100 * MS_PER_SEC, fill: 'both' });

  anim.currentTime = 0;
  assert_equals(getComputedStyle(div).visibility, 'hidden',
                'Visibility when progress = 0');

  anim.currentTime = 10 * MS_PER_SEC + 1;
  assert_equals(getComputedStyle(div).visibility, 'visible',
                'Visibility when progress > 0 due to linear easing');

  anim.finish();
  assert_equals(getComputedStyle(div).visibility, 'visible',
                'Visibility when progress = 1');

}, 'Visibility clamping behavior');

test(t => {
  const div = createDiv(t);
  const anim = div.animate({ visibility: ['hidden', 'visible'] },
                           { duration: 100 * MS_PER_SEC, fill: 'both',
                             easing: 'cubic-bezier(0.25, -0.6, 0, 0.5)' });

  anim.currentTime = 0;
  assert_equals(getComputedStyle(div).visibility, 'hidden',
                'Visibility when progress = 0');

  // Timing function is below zero. So we expected visibility is hidden.
  anim.currentTime = 10 * MS_PER_SEC + 1;
  assert_equals(getComputedStyle(div).visibility, 'hidden',
                'Visibility when progress < 0 due to cubic-bezier easing');

  anim.currentTime = 60 * MS_PER_SEC;
  assert_equals(getComputedStyle(div).visibility, 'visible',
                'Visibility when progress > 0 due to cubic-bezier easing');

}, 'Visibility clamping behavior with an easing that has a negative component');

</script>
</body>
chromium/third_party/blink/web_tests/external/wpt/web-animations/animation-model/animation-types/visibility.html
