| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Multicol intrinsic width calculation</title> | 4 <title>Multicol intrinsic width calculation</title> |
| 5 <style> | 5 <style> |
| 6 .gap15 { -webkit-column-gap:15px; column-gap:15px; } | 6 .gap15 { -webkit-column-gap:15px; column-gap:15px; } |
| 7 .mc3 { -webkit-columns:3; columns:3; } | 7 .mc3 { -webkit-columns:3; columns:3; } |
| 8 .mc3w50 { -webkit-columns:3 50px; columns:3 50px; } | 8 .mc3w50 { -webkit-columns:3 50px; columns:3 50px; } |
| 9 .mc3w150 { -webkit-columns:3 150px; columns:3 150px; } | 9 .mc3w150 { -webkit-columns:3 150px; columns:3 150px; } |
| 10 .mcw50 { -webkit-columns:50px; columns:50px; } | 10 .mcw50 { -webkit-columns:50px; columns:50px; } |
| 11 .mcw150 { -webkit-columns:150px; columns:150px; } | 11 .mcw150 { -webkit-columns:150px; columns:150px; } |
| 12 .intrinsic { width:intrinsic; } | 12 .intrinsic { width:fit-content; } |
| 13 .hidden { visibility:hidden; } /* hide garbage produced from ​
; characters */ | 13 .hidden { visibility:hidden; } /* hide garbage produced from ​
; characters */ |
| 14 </style> | 14 </style> |
| 15 </head> | 15 </head> |
| 16 <body> | 16 <body> |
| 17 <!-- min intrinsic width, non-auto column-count --> | 17 <!-- min intrinsic width, non-auto column-count --> |
| 18 <div style="width:1px;"> | 18 <div style="width:1px;"> |
| 19 <div class="intrinsic mc3 gap15" data-expected-width="330"> | 19 <div class="intrinsic mc3 gap15" data-expected-width="330"> |
| 20 <div style="width:100px; height:10px;"></div> | 20 <div style="width:100px; height:10px;"></div> |
| 21 </div> | 21 </div> |
| 22 </div> | 22 </div> |
| (...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 138 <div class="hidden"><div style="display:inline-block; width:100p
x; height:10px;"></div>​<div style="display:inline-block; width:100px; he
ight:10px;"></div></div> | 138 <div class="hidden"><div style="display:inline-block; width:100p
x; height:10px;"></div>​<div style="display:inline-block; width:100px; he
ight:10px;"></div></div> |
| 139 </div> | 139 </div> |
| 140 </div> | 140 </div> |
| 141 | 141 |
| 142 <script src="../../resources/check-layout.js"></script> | 142 <script src="../../resources/check-layout.js"></script> |
| 143 <script> | 143 <script> |
| 144 checkLayout(".intrinsic"); | 144 checkLayout(".intrinsic"); |
| 145 </script> | 145 </script> |
| 146 </body> | 146 </body> |
| 147 </html> | 147 </html> |
| OLD | NEW |