The Tor Browser: layout/style/test/test_flexbox_flex_grow_and

layout/style/test/test_flexbox_flex_grow_and_shrink.html@7e26c7da4463 (annotated)

layout/style/test/test_flexbox_flex_grow_and_shrink.html

Wed, 31 Dec 2014 06:55:50 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:55:50 +0100
changeset 2: 7e26c7da4463
permissions: -rw-r--r--

Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2

 <!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 }
   /* These animations SHOULD affect computed style */
   @keyframes flexGrowTwoToThree {
 %   { flex-grow: 2 }
 % { flex-grow: 3 }
   }
   @keyframes flexShrinkTwoToThree {
 %   { flex-shrink: 2 }
 % { flex-shrink: 3 }
   }
   @keyframes flexGrowZeroToZero {
 %   { flex-grow: 0 }
 % { flex-grow: 0 }
   }
   @keyframes flexShrinkZeroToZero {
 %   { flex-shrink: 0 }
 % { 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 {
 %   { flex-grow: 0 }
 % { flex-grow: 1 }
   }
   @keyframes flexShrinkZeroToOne {
 %   { flex-shrink: 0 }
 % { flex-shrink: 1 }
   }
   @keyframes flexGrowOneToZero {
 %   { flex-grow: 1 }
 % { flex-grow: 0 }
   }
   @keyframes flexShrinkOneToZero {
 %   { flex-shrink: 1 }
 % { 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 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();
 </script>
 </pre>
 </body>
 </html>

The Tor Browser / annotate

layout/style/test/test_flexbox_flex_grow_and_shrink.html@7e26c7da4463 (annotated)

layout/style/test/test_flexbox_flex_grow_and_shrink.html