src/third_party/WebKit/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html

   1 <!DOCTYPE html>
   2 <link href="resources/flexbox.css" rel="stylesheet">
   3 <style>
   4 .horizontal {
   5     height: 50px;
   6     background-color: purple;
   7     position: relative;
   8 }
   9
  10 .vertical {
  11     width: 50px;
  12     height: 10px;
  13     background-color: purple;
  14     position: relative;
  15     -webkit-writing-mode: vertical-rl;
  16 }
  17
  18 .flex-one {
  19     background-color: red;
  20 }
  21 </style>
  22 <script src="../../resources/check-layout.js"></script>
  23 <script>
  24 function changeHeight()
  25 {
  26   document.getElementById('dynamicHorizontalChild').style.height = "90%";
  27   document.getElementById('dynamicVerticalChild').style.width = "30%";
  28   checkLayout('.flexbox');
  29 }
  30 </script>
  31 <body onload="changeHeight()">
  32 <div class="flexbox horizontal">
  33   <div data-expected-height="50" class="flex-one">
  34     <div data-expected-height="35" style="height: 70%; background-color: lime"></div>
  35   </div>
  36 </div>
  37
  38 <div class="flexbox horizontal">
  39   <div data-expected-height="50" class="flex-one">
  40     <div id="dynamicHorizontalChild" data-expected-height="45" style="height: 70%; background-color: lime"></div>
  41   </div>
  42 </div>
  43
  44 <div class="flexbox horizontal">
  45   <div data-expected-height="50" class="flex-one" style="padding: 10px; border: 2px solid black">
  46     <div data-expected-height="18" style="height: 70%; background-color: lime"></div>
  47   </div>
  48 </div>
  49
  50 <div class="flexbox horizontal">
  51   <img data-expected-height="25" style="max-height: 50%" src="../images/resources/green-10.png" />
  52 </div>
  53
  54 <div class="flexbox horizontal">
  55   <div data-expected-height="25" class="flex-one" style="max-height:50%">
  56     <div data-expected-height="13" style="height: 50%; background-color: lime"></div>
  57   </div>
  58 </div>
  59
  60 <div class="flexbox wrap align-content-flex-start" style="width: 100px; height: 100px; background-color: yellow; padding: 3px;">
  61   <div data-expected-height="30" style="min-height: 30%; width: 80px; background-color: purple; margin: 2px; ">
  62     <div data-expected-height="15" style="background-color: red; height: 50%; width: 20px;"></div>
  63   </div>
  64   <div data-expected-height="40" style="height: 40px; width: 80px; background-color: green; margin: 2px;"></div>
  65 </div>
  66
  67 <div class="flexbox vertical">
  68   <div data-expected-width="50" class="flex-one">
  69     <div data-expected-width="25" style="width: 50%; background-color: lime"></div>
  70   </div>
  71 </div>
  72
  73 <div class="flexbox vertical">
  74   <div data-expected-width="50" class="flex-one">
  75     <div id="dynamicVerticalChild" data-expected-width="15" style="width: 50%; background-color: lime"></div>
  76   </div>
  77 </div>
  78
  79 <div class="flexbox vertical">
  80   <div data-expected-width="50" class="flex-one" style="padding: 10px; border: 2px solid black">
  81     <div data-expected-width="13" style="width: 50%; background-color: lime"></div>
  82   </div>
  83 </div>
  84
  85 <div class="flexbox vertical">
  86   <img data-expected-width="25" style="max-width: 50%" src="../images/resources/green-10.png" />
  87 </div>
  88
  89 <div class="flexbox vertical">
  90   <div data-expected-width="25" class="flex-one" style="max-width: 50%">
  91     <div data-expected-width="13" style="width: 50%; background-color: lime"></div>
  92   </div>
  93 </div>
  94 </body>