src/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 -webkit-flex shorthand propery and the -webkit-flex-grow, -webkit-flex-shrink, and -webkit-flex-basis longhand properties.');
  12
  13 var flexitem = document.getElementById("flexitem");
  14
  15 // Test default value.
  16 shouldBeEqualToString('flexitem.style.webkitFlex', '');
  17 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto');
  18
  19 flexitem.style.webkitFlexGrow = 2;
  20 shouldBeEqualToString('flexitem.style.webkitFlexGrow', '2');
  21 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexGrow', '2');
  22 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 1 auto');
  23
  24 flexitem.style.webkitFlexShrink = 3;
  25 shouldBeEqualToString('flexitem.style.webkitFlexShrink', '3');
  26 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexShrink', '3');
  27 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 3 auto');
  28
  29 flexitem.style.webkitFlexBasis = 0;
  30 shouldBeEqualToString('flexitem.style.webkitFlexBasis', '0px');
  31 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexBasis', '0px');
  32 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 3 0px');
  33
  34 flexitem.style.webkitFlexShrink = 0;
  35 shouldBeEqualToString('flexitem.style.webkitFlexShrink', '0');
  36 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 0px');
  37
  38 flexitem.style.webkitFlexBasis = '50%';
  39 shouldBeEqualToString('flexitem.style.webkitFlexBasis', '50%');
  40 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexBasis', '50%');
  41 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 50%');
  42
  43 flexitem.style.webkitFlexBasis = 'auto';
  44 shouldBeEqualToString('flexitem.style.webkitFlexBasis', 'auto');
  45 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 auto');
  46
  47 flexitem.style.webkitFlex = 'none';
  48 shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');
  49 shouldBeEqualToString('flexitem.style.webkitFlexGrow', '0');
  50 shouldBeEqualToString('flexitem.style.webkitFlexShrink', '0');
  51 shouldBeEqualToString('flexitem.style.webkitFlexBasis', 'auto');
  52 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');
  53
  54 flexitem.style.webkitFlexGrow = 1.5;
  55 shouldBeEqualToString('flexitem.style.webkitFlex', '1.5 0 auto');
  56 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1.5 0 auto');
  57
  58 flexitem.style.webkitFlex = 3;
  59 shouldBeEqualToString('flexitem.style.webkitFlex', '3 1 0%');
  60 shouldBeEqualToString('flexitem.style.webkitFlexGrow', '3');
  61 shouldBeEqualToString('flexitem.style.webkitFlexShrink', '1');
  62 shouldBeEqualToString('flexitem.style.webkitFlexBasis', '0%');
  63 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '3 1 0%');
  64
  65 </script>
  66 </body>
  67 </html>