third_party/WebKit/LayoutTests/css3/flexbox/flex-longhand-parsing.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <div id="flexbox">
   8     <div id="flexitem"></div>
   9 </div>
  10 <script>
  11 description('Tests the interaction between the flex shorthand propery and the flex-grow, flex-shrink, and flex-basis longhand properties.');
  12
  13 var flexitem = document.getElementById("flexitem");
  14
  15 // Test default value.
  16 shouldBeEqualToString('flexitem.style.flex', '');
  17 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
  18
  19 flexitem.style.flexGrow = 2;
  20 shouldBeEqualToString('flexitem.style.flexGrow', '2');
  21 shouldBeEqualToString('getComputedStyle(flexitem).flexGrow', '2');
  22 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 auto');
  23
  24 flexitem.style.flexShrink = 3;
  25 shouldBeEqualToString('flexitem.style.flexShrink', '3');
  26 shouldBeEqualToString('getComputedStyle(flexitem).flexShrink', '3');
  27 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 3 auto');
  28
  29 flexitem.style.flexBasis = 0;
  30 shouldBeEqualToString('flexitem.style.flexBasis', '0px');
  31 shouldBeEqualToString('getComputedStyle(flexitem).flexBasis', '0px');
  32 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 3 0px');
  33
  34 flexitem.style.flexShrink = 0;
  35 shouldBeEqualToString('flexitem.style.flexShrink', '0');
  36 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 0 0px');
  37
  38 flexitem.style.flexBasis = '50%';
  39 shouldBeEqualToString('flexitem.style.flexBasis', '50%');
  40 shouldBeEqualToString('getComputedStyle(flexitem).flexBasis', '50%');
  41 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 0 50%');
  42
  43 flexitem.style.flexBasis = 'auto';
  44 shouldBeEqualToString('flexitem.style.flexBasis', 'auto');
  45 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 0 auto');
  46
  47 flexitem.style.flex = 'none';
  48 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
  49 shouldBeEqualToString('flexitem.style.flexGrow', '0');
  50 shouldBeEqualToString('flexitem.style.flexShrink', '0');
  51 shouldBeEqualToString('flexitem.style.flexBasis', 'auto');
  52 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
  53
  54 flexitem.style.flexGrow = 1.5;
  55 shouldBeEqualToString('flexitem.style.flex', '1.5 0 auto');
  56 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.5 0 auto');
  57
  58 flexitem.style.flex = 3;
  59 shouldBeEqualToString('flexitem.style.flex', '3 1 0%');
  60 shouldBeEqualToString('flexitem.style.flexGrow', '3');
  61 shouldBeEqualToString('flexitem.style.flexShrink', '1');
  62 shouldBeEqualToString('flexitem.style.flexBasis', '0%');
  63 shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 0%');
  64
  65 </script>
  66 </body>
  67 </html>