third_party/WebKit/LayoutTests/fast/table/css-table-max-height.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/ahem.js"></script>
   5 <style type="text/css">
   6 .container
   7 {
   8     width:300px;
   9     height:400px;
  10     font:16px/1 Ahem;
  11     background-color:#999999;
  12 }
  13
  14 .child
  15 {
  16     display:table;
  17     height:100%;
  18     background-color:green;
  19 }
  20 .fixed-table
  21 {
  22     table-layout:fixed;
  23 }
  24 </style>
  25 <script src="../../resources/check-layout.js"></script>
  26 </head>
  27 <body onload="checkLayout('.child')">
  28 <div> Testcase for Bug <a href="http://wkbug.com/98633">http://wkbug.com/98633</a>. The testcase checks if the height of a
  29 css table does not exceed the max-height value. The height of the table can be greater than max-height value when either
  30 min-height is greater than max-height or computed height of the content is greater than the max-height.
  31 </div>
  32 <br>
  33 <div class="container">
  34     <div id="maxGreatThanMinHeightAutoLayout" class="child" style="min-height:100px; max-height:200px;" data-expected-height=200>
  35         This sub-test checks that when min-height is lesser than max-height, max-height is applied to a table with auto layout.
  36     </div>
  37 </div>
  38 <div class="container">
  39     <div class="child" style="min-height:200px; max-height:100px;" data-expected-height=200>
  40         This sub-test checks that when min-height is greater than max-height, min-height is applied to a table with auto layout.
  41     </div>
  42 </div>
  43 <div class="container">
  44     <div class="child" style="max-height:200px;" data-expected-height=200>
  45         This sub-test checks that max-height with fixed value is applied to a table with auto layout.
  46     </div>
  47 </div>
  48 <div class="container">
  49     <div class="child" style="max-height:50%;" data-expected-height=200>
  50         This sub-test checks that max-height with percent value is applied to a table with auto layout.
  51     </div>
  52 </div>
  53 <div class="container">
  54     <div class="child" style="max-height:50vh;" data-expected-height=300>
  55         This sub-test checks that max-height with viewport percent height value is applied to a table with auto layout.
  56     </div>
  57 </div>
  58 <div class="container">
  59     <div class="child" style="max-height:25vw;" data-expected-height=200>
  60         This sub-test checks that max-height with viewport percent width value is applied to a table with auto layout.
  61     </div>
  62 </div>
  63 <div class="container">
  64     <div class="child" style="max-height:100px;" data-expected-height=192>
  65         This sub-test checks that when content height is greater than max-height, content height is applied to the table with auto layout.
  66         <br><br>FILLER TEXT TO INCREASE CONTENT HEIGHT.
  67     </div>
  68 </div>
  69 <div class="container">
  70     <div class="child fixed-table" style="height:auto;">
  71         This test checks that when height of an auto-table is auto, there is are no asserts. No crash means the test passed.
  72     </div>
  73 </div>
  74 <div class="container">
  75     <div class="child fixed-table" style="min-height:100px; max-height:200px;" data-expected-height=200>
  76         This sub-test checks that when min-height is lesser than max-height, max-height is applied to a table with fixed layout.
  77     </div>
  78 </div>
  79 <div class="container">
  80     <div class="child fixed-table" style="min-height:200px; max-height:100px;" data-expected-height=200>
  81         This sub-test checks that when min-height is greater than max-height, min-height is applied to a table with fixed layout.
  82     </div>
  83 </div>
  84 <div class="container">
  85     <div class="child fixed-table" style="max-height:200px;" data-expected-height=200>
  86         This sub-test checks that max-height with fixed value is applied to a table with fixed layout.
  87     </div>
  88 </div>
  89 <div class="container">
  90     <div class="child fixed-table" style="max-height:50%;" data-expected-height=200>
  91         This sub-test checks that max-height with percent value is applied to a table with fixed layout.
  92     </div>
  93 </div>
  94 <div class="container">
  95     <div class="child fixed-table" style="max-height:50vh;" data-expected-height=300>
  96         This sub-test checks that max-height with viewport percent height value is applied to a table with fixed layout.
  97     </div>
  98 </div>
  99 <div class="container">
 100     <div class="child fixed-table" style="max-height:25vw;" data-expected-height=200>
 101         This sub-test checks that max-height with viewport percent width value is applied to a table with fixed layout.
 102     </div>
 103 </div>
 104 <div class="container">
 105     <div class="child fixed-table" style="max-height:100px;" data-expected-height=192>
 106         This sub-test checks that when content height is greater than max-height, content height is applied to a table with fixed layout.
 107         <br><br>FILLER TEXT TO INCREASE CONTENT HEIGHT.
 108     </div>
 109 </div>
 110 <div class="container">
 111     <div class="child fixed-table" style="height:auto;">
 112         This test checks that when height of a fixed table is auto, there is are no asserts. No crash means the test passed.
 113     </div>
 114 </div>
 115 <body>
 116 </html>