DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (b6057e17f856)

VCS Links

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=696253
-->
<head>
  <meta charset="utf-8">
  <title>Test for flex-grow and flex-shrink animation (Bug 696253)</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="animation_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style type="text/css">

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

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

  /* Animations that we'll test (individually) in the script below: */
  @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 }
  }
  @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>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
<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);
}

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 DIDN'T USED TO AFFECT COMPUTED STYLE, BUT NOW DO
// ----------------------------------------------------------------
// (In an older version of the flexbox spec, flex-grow & flex-shrink were not
// allowed to animate between 0 and other values. But now that's allowed.)

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

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

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

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

SpecialPowers.DOMWindowUtils.restoreNormalRefresh();

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