test_flexbox_flex_grow_and_shrink.html (5127B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=696253 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for flex-grow and flex-shrink animation (Bug 696253)</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script type="application/javascript" src="animation_utils.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 <style type="text/css"> 13 14 /* Set flex-grow and flex-shrink to nonzero values, 15 when no animations are applied. */ 16 17 * { flex-grow: 10; flex-shrink: 20 } 18 19 /* Animations that we'll test (individually) in the script below: */ 20 @keyframes flexGrowTwoToThree { 21 0% { flex-grow: 2 } 22 100% { flex-grow: 3 } 23 } 24 @keyframes flexShrinkTwoToThree { 25 0% { flex-shrink: 2 } 26 100% { flex-shrink: 3 } 27 } 28 @keyframes flexGrowZeroToZero { 29 0% { flex-grow: 0 } 30 100% { flex-grow: 0 } 31 } 32 @keyframes flexShrinkZeroToZero { 33 0% { flex-shrink: 0 } 34 100% { flex-shrink: 0 } 35 } 36 @keyframes flexGrowZeroToOne { 37 0% { flex-grow: 0 } 38 100% { flex-grow: 1 } 39 } 40 @keyframes flexShrinkZeroToOne { 41 0% { flex-shrink: 0 } 42 100% { flex-shrink: 1 } 43 } 44 @keyframes flexGrowOneToZero { 45 0% { flex-grow: 1 } 46 100% { flex-grow: 0 } 47 } 48 @keyframes flexShrinkOneToZero { 49 0% { flex-shrink: 1 } 50 100% { flex-shrink: 0 } 51 } 52 53 </style> 54 </head> 55 <body> 56 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a> 57 <div id="display"> 58 <div id="myDiv"></div> 59 </div> 60 <pre id="test"> 61 <script type="application/javascript"> 62 "use strict"; 63 64 /** Test for flex-grow and flex-shrink animation (Bug 696253) */ 65 66 // take over the refresh driver 67 advance_clock(0); 68 69 // ANIMATIONS THAT SHOULD AFFECT COMPUTED STYLE 70 // -------------------------------------------- 71 72 // flexGrowTwoToThree: 2.0 at 0%, 2.5 at 50%, 10 after animation is over 73 var [ div, cs ] = new_div("animation: flexGrowTwoToThree linear 1s"); 74 is_approx(+cs.flexGrow, 2, 0.01, "flexGrowTwoToThree at 0.0s"); 75 advance_clock(500); 76 is_approx(+cs.flexGrow, 2.5, 0.01, "flexGrowTwoToThree at 0.5s"); 77 advance_clock(1000); 78 is(cs.flexGrow, "10", "flexGrowTwoToThree at 1.5s"); 79 done_div(); 80 81 // flexShrinkTwoToThree: 2.0 at 0%, 2.5 at 50%, 20 after animation is over 82 [ div, cs ] = new_div("animation: flexShrinkTwoToThree linear 1s"); 83 is_approx(cs.flexShrink, 2, 0.01, "flexShrinkTwoToThree at 0.0s"); 84 advance_clock(500); 85 is_approx(cs.flexShrink, 2.5, 0.01, "flexShrinkTwoToThree at 0.5s"); 86 advance_clock(1000); 87 is(cs.flexShrink, "20", "flexShrinkTwoToThree at 1.5s"); 88 done_div(); 89 90 // flexGrowZeroToZero: 0 at 0%, 0 at 50%, 10 after animation is over 91 [ div, cs ] = new_div("animation: flexGrowZeroToZero linear 1s"); 92 is(cs.flexGrow, "0", "flexGrowZeroToZero at 0.0s"); 93 advance_clock(500); 94 is(cs.flexGrow, "0", "flexGrowZeroToZero at 0.5s"); 95 advance_clock(1000); 96 is(cs.flexGrow, "10", "flexGrowZeroToZero at 1.5s"); 97 done_div(); 98 99 // flexShrinkZeroToZero: 0 at 0%, 0 at 50%, 20 after animation is over 100 [ div, cs ] = new_div("animation: flexShrinkZeroToZero linear 1s"); 101 is(cs.flexShrink, "0", "flexShrinkZeroToZero at 0.0s"); 102 advance_clock(500); 103 is(cs.flexShrink, "0", "flexShrinkZeroToZero at 0.5s"); 104 advance_clock(1000); 105 is(cs.flexShrink, "20", "flexShrinkZeroToZero at 1.5s"); 106 done_div(); 107 108 // ANIMATIONS THAT DIDN'T USED TO AFFECT COMPUTED STYLE, BUT NOW DO 109 // ---------------------------------------------------------------- 110 // (In an older version of the flexbox spec, flex-grow & flex-shrink were not 111 // allowed to animate between 0 and other values. But now that's allowed.) 112 113 // flexGrowZeroToOne: 0 at 0%, 0.5 at 50%, 10 after animation is over. 114 [ div, cs ] = new_div("animation: flexGrowZeroToOne linear 1s"); 115 is(cs.flexGrow, "0", "flexGrowZeroToOne at 0.0s"); 116 advance_clock(500); 117 is(cs.flexGrow, "0.5", "flexGrowZeroToOne at 0.5s"); 118 advance_clock(1000); 119 is(cs.flexGrow, "10", "flexGrowZeroToOne at 1.5s"); 120 done_div(); 121 122 // flexShrinkZeroToOne: 0 at 0%, 0.5 at 50%, 20 after animation is over. 123 [ div, cs ] = new_div("animation: flexShrinkZeroToOne linear 1s"); 124 is(cs.flexShrink, "0", "flexShrinkZeroToOne at 0.0s"); 125 advance_clock(500); 126 is(cs.flexShrink, "0.5", "flexShrinkZeroToOne at 0.5s"); 127 advance_clock(1000); 128 is(cs.flexShrink, "20", "flexShrinkZeroToOne at 1.5s"); 129 done_div(); 130 131 // flexGrowOneToZero: 1 at 0%, 0.5 at 50%, 10 after animation is over. 132 [ div, cs ] = new_div("animation: flexGrowOneToZero linear 1s"); 133 is(cs.flexGrow, "1", "flexGrowOneToZero at 0.0s"); 134 advance_clock(500); 135 is(cs.flexGrow, "0.5", "flexGrowOneToZero at 0.5s"); 136 advance_clock(1000); 137 is(cs.flexGrow, "10", "flexGrowOneToZero at 1.5s"); 138 done_div(); 139 140 // flexShrinkOneToZero: 1 at 0%, 0.5 at 50%, 20 after animation is over. 141 [ div, cs ] = new_div("animation: flexShrinkOneToZero linear 1s"); 142 is(cs.flexShrink, "1", "flexShrinkOneToZero at 0.0s"); 143 advance_clock(500); 144 is(cs.flexShrink, "0.5", "flexShrinkOneToZero at 0.5s"); 145 advance_clock(1000); 146 is(cs.flexShrink, "20", "flexShrinkOneToZero at 1.5s"); 147 done_div(); 148 149 SpecialPowers.DOMWindowUtils.restoreNormalRefresh(); 150 151 </script> 152 </pre> 153 </body> 154 </html>