visibility.html - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /web-animations/animation-model/animation-types/visibility.html - WPT Dashboard Interop Dashboard

<!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>