Blitz - WPT: individual-transform-combine.html

wpt / css / css-transforms / individual-transform / animation / individual-transform-combine.html

/css/css-transforms/individual-transform/animation/individual-transform-combine.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Individual transform: combine individual transform properties</title>
    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
    <meta name="assert" content="Tests that we combine animated transformations with the underlying style correctly."/>
    <link rel="match" href="individual-transform-combine-ref.html">
    <style>
      .block {
        display:  inline-block;
        width: 50px;
        height: 50px;
        margin:  50px;
        padding:  0;
        transform-origin: center center;
        background:  lime;
        /* Freeze the animation at the midpoint. */
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
        animation-duration:  1000000s;
        animation-delay:  -500000s;
      }

      @keyframes anim-1 {
        to { rotate: 180deg; }
      }
      #div-1 {
        scale:  2 1;
        animation-name: anim-1;
      }

      @keyframes anim-2 {
        from { scale: 1 1; }
        to { scale: 3 1; }
      }
      #div-2 {
        /* The scale property is replaced in the animation. */
        scale: 1 3;
        rotate: 90deg;
        animation-name:  anim-2;
      }

      @keyframes anim-3 {
        to { rotate: 180deg; }
      }
      #div-3 {
        transform: scale(2, 1);
        animation-name:  anim-3;
      }

      @keyframes anim-4 {
        to { transform: scale(7, 1); }
      }
      #div-4 {
        rotate:  90deg;
        /* As transform is a separate property from scale, the two scales are
           chained together. */
        scale:  0.5 1;
        animation-name: anim-4;
      }

      /* transform origin tests */

      @keyframes anim-5 {
        to { rotate: 180deg; translate: 100px -50px; }
      }
      #div-5 {
        transform-origin: top left;
        scale:  2 1;
        animation-name: anim-5;
      }

      @keyframes anim-6 {
        to { rotate: 180deg; translate: -100px 50px; }
      }
      #div-6 {
        transform-origin: bottom right;
        scale:  2 1;
        animation-name: anim-6;
      }

    </style>
  </head>
  <body>
    <div>
      <div id="div-1" class="block"></div>
      <div id="div-2" class="block"></div>
    </div>
    <div>
      <div id="div-3" class="block"></div>
      <div id="div-4" class="block"></div>
    </div>
    <div>
      <div id="div-5" class="block"></div>
      <div id="div-6" class="block"></div>
    </div>

  </body>
</html>

/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Individual transform: combine individual transform properties</title>
    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
    <style>
      .block {
        display:  inline-block;
        width: 50px;
        height: 50px;
        margin:  50px;
        padding:  0;
        transform-origin: center center;
        background:  lime;
        transform: rotate(90deg) scale(2, 1);
      }
    </style>
  </head>
  <body>
    <div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
    <div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
    <div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </body>
</html>