testing/web-platform/tests/css/css-animations/animation-direction-004-manual.html
author Duncan McIntosh <dmcintosh@mozilla.com>
Wed, 09 Jul 2025 19:42:02 +0000 (8 hours ago)
changeset 795924 9ccc6a2267cbf69c621fec973bd28573c2a45a1f
parent 422197 1b4b7c3babaaf64a2b7eae7a6fa0f3c3c225ae9c
permissions -rw-r--r--
Bug 1966586 - Reuse other browser windows when opening _blank links in Taskbar Tabs windows. r=nrishel This doesn't affect other tab additions, nor does it stop the tab bar from appearing altogether. The idea is that _if_ another tab is somehow made, the user should see it; but we should not create new tabs if we can avoid it. This also adds tests for opening URIs in popups and taskbar tabs to make it less likely that this breaks in future. Differential Revision: https://phabricator.services.mozilla.com/D253726
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Animations Test: animation-direction - reverse</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-24 -->
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-direction">
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-direction is set to reverse,
                             all iterations of the animation are played in the reverse direction
                             from the way they were specified.">
<style>
  div {
    animation-name: sample;
    animation-duration: 10s;
    animation-direction: reverse;
    animation-iteration-count: infinite;

    background-color: blue;
    height: 100px;
    width: 100px;
    position: relative;
  }

  @keyframes sample {
    from {
      left: 150px;
    }
    to {
      left: 0px;
    }
  }
</style>
<body>
  <p>
    Test passes if there is a filled color square with 'Filler Text',
    which starts moving from left to right, then back to left again and moves from
    left to right. This cycle gets repeated.
  </p>
  <div>Filler Text</div>
</body>