gecko/layout/style/test/file_flexbox_flex_grow_and_shrink.html

<!DOCTYPE HTML>
<html>
<head>
  <script type="application/javascript" src="animation_utils.js"></script>
  <style type="text/css">

  /* Set flex-grow and flex-shrink to nonzero values,
     when no animations are applied. */

  * { flex-grow: 10; flex-shrink: 20 }

  /* These animations SHOULD affect computed style */
  @keyframes flexGrowTwoToThree {
     0%   { flex-grow: 2 }
     100% { flex-grow: 3 }
  }
  @keyframes flexShrinkTwoToThree {
     0%   { flex-shrink: 2 }
     100% { flex-shrink: 3 }
  }
  @keyframes flexGrowZeroToZero {
     0%   { flex-grow: 0 }
     100% { flex-grow: 0 }
  }
  @keyframes flexShrinkZeroToZero {
     0%   { flex-shrink: 0 }
     100% { flex-shrink: 0 }
  }

  /* These animations SHOULD NOT affect computed style. (flex-grow and
     flex-shrink are animatable "except between '0' and other values") */
  @keyframes flexGrowZeroToOne {
     0%   { flex-grow: 0 }
     100% { flex-grow: 1 }
  }
  @keyframes flexShrinkZeroToOne {
     0%   { flex-shrink: 0 }
     100% { flex-shrink: 1 }
  }
  @keyframes flexGrowOneToZero {
     0%   { flex-grow: 1 }
     100% { flex-grow: 0 }
  }
  @keyframes flexShrinkOneToZero {
     0%   { flex-shrink: 1 }
     100% { flex-shrink: 0 }
  }

  </style>
</head>
<body>
<div id="display">
  <div id="myDiv"></div>
</div>
<pre id="test">
<script type="application/javascript">
"use strict";

/** Test for flex-grow and flex-shrink animation (Bug 696253) **/

function advance_clock(milliseconds) {
  SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
}

// Use "is()" and "ok()" from parent document.
var is = parent.is;
var ok = parent.ok;

ok(SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
   "expecting to be run with flexbox support enabled");

var display = document.getElementById("display");
var div = null;
var cs = null;
function new_div(style) {
  return new_element("div", style);
}
function new_element(tagname, style) {
  if (div != null || cs != null) {
    ok(false, "test author forgot to call done_div");
  }
  if (typeof(style) != "string") {
    ok(false, "test author forgot to pass argument");
  }
  div = document.createElement(tagname);
  div.setAttribute("style", style);
  display.appendChild(div);
  cs = getComputedStyle(div, "");
}

function done_div() {
  display.removeChild(div);
  div = null;
  cs = null;
}
// take over the refresh driver
advance_clock(0);

// ANIMATIONS THAT SHOULD AFFECT COMPUTED STYLE
// --------------------------------------------

// flexGrowTwoToThree: 2.0 at 0%, 2.5 at 50%, 10 after animation is over
new_div("animation: flexGrowTwoToThree linear 1s");
is_approx(cs.flexGrow, 2, 0.01, "flexGrowTwoToThree at 0.0s");
advance_clock(500);
is_approx(cs.flexGrow, 2.5, 0.01, "flexGrowTwoToThree at 0.5s");
advance_clock(1000);
is(cs.flexGrow, 10, "flexGrowTwoToThree at 1.5s");
done_div();

// flexShrinkTwoToThree: 2.0 at 0%, 2.5 at 50%, 20 after animation is over
new_div("animation: flexShrinkTwoToThree linear 1s");
is_approx(cs.flexShrink, 2, 0.01,  "flexShrinkTwoToThree at 0.0s");
advance_clock(500);
is_approx(cs.flexShrink, 2.5, 0.01, "flexShrinkTwoToThree at 0.5s");
advance_clock(1000);
is(cs.flexShrink, 20, "flexShrinkTwoToThree at 1.5s");
done_div();

// flexGrowZeroToZero: 0 at 0%, 0 at 50%, 10 after animation is over
new_div("animation: flexGrowZeroToZero linear 1s");
is(cs.flexGrow, 0, "flexGrowZeroToZero at 0.0s");
advance_clock(500);
is(cs.flexGrow, 0, "flexGrowZeroToZero at 0.5s");
advance_clock(1000);
is(cs.flexGrow, 10, "flexGrowZeroToZero at 1.5s");
done_div();

// flexShrinkZeroToZero: 0 at 0%, 0 at 50%, 20 after animation is over
new_div("animation: flexShrinkZeroToZero linear 1s");
is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.0s");
advance_clock(500);
is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.5s");
advance_clock(1000);
is(cs.flexShrink, 20, "flexShrinkZeroToZero at 1.5s");
done_div();

// ANIMATIONS THAT SHOULD NOT AFFECT COMPUTED STYLE
// ------------------------------------------------

// flexGrowZeroToOne: no effect on computed style. 10 all the way through.
new_div("animation: flexGrowZeroToOne linear 1s");
is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.0s");
advance_clock(500);
is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.5s");
advance_clock(1000);
is(cs.flexGrow, 10, "flexGrowZeroToOne at 1.5s");
done_div();

// flexShrinkZeroToOne: no effect on computed style. 20 all the way through.
new_div("animation: flexShrinkZeroToOne linear 1s");
is(cs.flexShrink, 20,  "flexShrinkZeroToOne at 0.0s");
advance_clock(500);
is(cs.flexShrink, 20, "flexShrinkZeroToOne at 0.5s");
advance_clock(1000);
is(cs.flexShrink, 20, "flexShrinkZeroToOne at 1.5s");
done_div();

// flexGrowOneToZero: no effect on computed style. 10 all the way through.
new_div("animation: flexGrowOneToZero linear 1s");
is(cs.flexGrow, 10, "flexGrowOneToZero at 0.0s");
advance_clock(500);
is(cs.flexGrow, 10, "flexGrowOneToZero at 0.5s");
advance_clock(1000);
is(cs.flexGrow, 10, "flexGrowOneToZero at 1.5s");
done_div();

// flexShrinkOneToZero: no effect on computed style. 20 all the way through.
new_div("animation: flexShrinkOneToZero linear 1s");
is(cs.flexShrink, 20,  "flexShrinkOneToZero at 0.0s");
advance_clock(500);
is(cs.flexShrink, 20, "flexShrinkOneToZero at 0.5s");
advance_clock(1000);
is(cs.flexShrink, 20, "flexShrinkOneToZero at 1.5s");
done_div();

SpecialPowers.DOMWindowUtils.restoreNormalRefresh();

parent.finish();

</script>
</pre>
</body>
</html>