third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/multicol.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>Multicol intrinsic width calculation</title>
   5         <style>
   6             .gap15 { -webkit-column-gap:15px; column-gap:15px; }
   7             .mc3 { -webkit-columns:3; columns:3; }
   8             .mc3w50 { -webkit-columns:3 50px; columns:3 50px; }
   9             .mc3w150 { -webkit-columns:3 150px; columns:3 150px; }
  10             .mcw50 { -webkit-columns:50px; columns:50px; }
  11             .mcw150 { -webkit-columns:150px; columns:150px; }
  12             .intrinsic { width:intrinsic; }
  13             .hidden { visibility:hidden; } /* hide garbage produced from &#x200b; characters */
  14         </style>
  15     </head>
  16     <body>
  17         <!-- min intrinsic width, non-auto column-count -->
  18         <div style="width:1px;">
  19             <div class="intrinsic mc3 gap15" data-expected-width="330">
  20                 <div style="width:100px; height:10px;"></div>
  21             </div>
  22         </div>
  23         <!-- max intrinsic width, non-auto column-count -->
  24         <div style="width:1000px;">
  25             <div class="intrinsic mc3 gap15" data-expected-width="330">
  26                 <div style="width:100px; height:10px;"></div>
  27             </div>
  28         </div>
  29         <!-- min intrinsic width, non-auto column-count, breakable lines -->
  30         <div style="width:1px;">
  31             <div class="intrinsic mc3 gap15" data-expected-width="330">
  32                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
  33             </div>
  34         </div>
  35         <!-- max intrinsic width, non-auto column-count, breakable lines -->
  36         <div style="width:1000px;">
  37             <div class="intrinsic mc3 gap15" data-expected-width="630">
  38                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
  39             </div>
  40         </div>
  41
  42         <!-- min intrinsic width, non-auto column-count and small column-width -->
  43         <div style="width:1px;">
  44             <div class="intrinsic mc3w50 gap15" data-expected-width="50">
  45                 <div style="width:100px; height:10px;"></div>
  46             </div>
  47         </div>
  48         <!-- max intrinsic width, non-auto column-count and small column-width -->
  49         <div style="width:1000px;">
  50             <div class="intrinsic mc3w50 gap15" data-expected-width="330">
  51                 <div style="width:100px; height:10px;"></div>
  52             </div>
  53         </div>
  54         <!-- min intrinsic width, non-auto column-count and small column-width, breakable lines -->
  55         <div style="width:1px;">
  56             <div class="intrinsic mc3w50 gap15" data-expected-width="50">
  57                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
  58             </div>
  59         </div>
  60         <!-- max intrinsic width, non-auto column-count and small column-width, breakable lines -->
  61         <div style="width:1000px;">
  62             <div class="intrinsic mc3w50 gap15" data-expected-width="630">
  63                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
  64             </div>
  65         </div>
  66
  67         <!-- min intrinsic width, non-auto column-count and large column-width -->
  68         <div style="width:1px;">
  69             <div class="intrinsic mc3w150 gap15" data-expected-width="100">
  70                 <div style="width:100px; height:10px;"></div>
  71             </div>
  72         </div>
  73         <!-- max intrinsic width, non-auto column-count and large column-width -->
  74         <div style="width:1000px;">
  75             <div class="intrinsic mc3w150 gap15" data-expected-width="480">
  76                 <div style="width:100px; height:10px;"></div>
  77             </div>
  78         </div>
  79         <!-- min intrinsic width, non-auto column-count and large column-width, breakable lines -->
  80         <div style="width:1px;">
  81             <div class="intrinsic mc3w150 gap15" data-expected-width="100">
  82                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
  83             </div>
  84         </div>
  85         <!-- max intrinsic width, non-auto column-count and large column-width, breakable lines -->
  86         <div style="width:1000px;">
  87             <div class="intrinsic mc3w150 gap15" data-expected-width="630">
  88                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
  89             </div>
  90         </div>
  91
  92         <!-- min intrinsic width, auto column-count and small column-width -->
  93         <div style="width:1px;">
  94             <div class="intrinsic mcw50 gap15" data-expected-width="50">
  95                 <div style="width:100px; height:10px;"></div>
  96             </div>
  97         </div>
  98         <!-- max intrinsic width, auto column-count and small column-width -->
  99         <div style="width:1000px;">
 100             <div class="intrinsic mcw50 gap15" data-expected-width="100">
 101                 <div style="width:100px; height:10px;"></div>
 102             </div>
 103         </div>
 104         <!-- min intrinsic width, auto column-count and small column-width, breakable lines -->
 105         <div style="width:1px;">
 106             <div class="intrinsic mcw50 gap15" data-expected-width="50">
 107                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
 108             </div>
 109         </div>
 110         <!-- max intrinsic width, auto column-count and small column-width, breakable lines -->
 111         <div style="width:1000px;">
 112             <div class="intrinsic mcw50 gap15" data-expected-width="200">
 113                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
 114             </div>
 115         </div>
 116
 117         <!-- min intrinsic width, auto column-count and large column-width -->
 118         <div style="width:1px;">
 119             <div class="intrinsic mcw150 gap15" data-expected-width="100">
 120                 <div style="width:100px; height:10px;"></div>
 121             </div>
 122         </div>
 123         <!-- max intrinsic width, auto column-count and large column-width -->
 124         <div style="width:1000px;">
 125             <div class="intrinsic mcw150 gap15" data-expected-width="150">
 126                 <div style="width:100px; height:10px;"></div>
 127             </div>
 128         </div>
 129         <!-- min intrinsic width, auto column-count and large column-width, breakable lines -->
 130         <div style="width:1px;">
 131             <div class="intrinsic mcw150 gap15" data-expected-width="100">
 132                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
 133             </div>
 134         </div>
 135         <!-- max intrinsic width, auto column-count and large column-width, breakable lines -->
 136         <div style="width:1000px;">
 137             <div class="intrinsic mcw150 gap15" data-expected-width="200">
 138                 <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
 139             </div>
 140         </div>
 141
 142         <script src="../../resources/check-layout.js"></script>
 143         <script>
 144             checkLayout(".intrinsic");
 145         </script>
 146     </body>
 147 </html>