Index: LayoutTests/fast/css-intrinsic-dimensions/multicol.html |
diff --git a/LayoutTests/fast/css-intrinsic-dimensions/multicol.html b/LayoutTests/fast/css-intrinsic-dimensions/multicol.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..84959e960412cd10d7d5ae84aaca89a4a52c2019 |
--- /dev/null |
+++ b/LayoutTests/fast/css-intrinsic-dimensions/multicol.html |
@@ -0,0 +1,147 @@ |
+<!DOCTYPE html> |
+<html> |
+ <head> |
+ <title>Multicol intrinsic width calculation</title> |
+ <style> |
+ .gap15 { -webkit-column-gap:15px; column-gap:15px; } |
+ .mc3 { -webkit-columns:3; columns:3; } |
+ .mc3w50 { -webkit-columns:3 50px; columns:3 50px; } |
+ .mc3w150 { -webkit-columns:3 150px; columns:3 150px; } |
+ .mcw50 { -webkit-columns:50px; columns:50px; } |
+ .mcw150 { -webkit-columns:150px; columns:150px; } |
+ .intrinsic { width:intrinsic; } |
+ .hidden { visibility:hidden; } /* hide garbage produced from ​ characters */ |
+ </style> |
+ </head> |
+ <body> |
+ <!-- min intrinsic width, non-auto column-count --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mc3 gap15" data-expected-width="330"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, non-auto column-count --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mc3 gap15" data-expected-width="330"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- min intrinsic width, non-auto column-count, breakable lines --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mc3 gap15" data-expected-width="330"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, non-auto column-count, breakable lines --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mc3 gap15" data-expected-width="630"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ |
+ <!-- min intrinsic width, non-auto column-count and small column-width --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mc3w50 gap15" data-expected-width="50"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, non-auto column-count and small column-width --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mc3w50 gap15" data-expected-width="330"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- min intrinsic width, non-auto column-count and small column-width, breakable lines --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mc3w50 gap15" data-expected-width="50"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, non-auto column-count and small column-width, breakable lines --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mc3w50 gap15" data-expected-width="630"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ |
+ <!-- min intrinsic width, non-auto column-count and large column-width --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mc3w150 gap15" data-expected-width="100"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, non-auto column-count and large column-width --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mc3w150 gap15" data-expected-width="480"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- min intrinsic width, non-auto column-count and large column-width, breakable lines --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mc3w150 gap15" data-expected-width="100"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, non-auto column-count and large column-width, breakable lines --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mc3w150 gap15" data-expected-width="630"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ |
+ <!-- min intrinsic width, auto column-count and small column-width --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mcw50 gap15" data-expected-width="50"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, auto column-count and small column-width --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mcw50 gap15" data-expected-width="100"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- min intrinsic width, auto column-count and small column-width, breakable lines --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mcw50 gap15" data-expected-width="50"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, auto column-count and small column-width, breakable lines --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mcw50 gap15" data-expected-width="200"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ |
+ <!-- min intrinsic width, auto column-count and large column-width --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mcw150 gap15" data-expected-width="100"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, auto column-count and large column-width --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mcw150 gap15" data-expected-width="150"> |
+ <div style="width:100px; height:10px;"></div> |
+ </div> |
+ </div> |
+ <!-- min intrinsic width, auto column-count and large column-width, breakable lines --> |
+ <div style="width:1px;"> |
+ <div class="intrinsic mcw150 gap15" data-expected-width="100"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ <!-- max intrinsic width, auto column-count and large column-width, breakable lines --> |
+ <div style="width:1000px;"> |
+ <div class="intrinsic mcw150 gap15" data-expected-width="200"> |
+ <div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>​<div style="display:inline-block; width:100px; height:10px;"></div></div> |
+ </div> |
+ </div> |
+ |
+ <script src="../../resources/check-layout.js"></script> |
+ <script> |
+ checkLayout(".intrinsic"); |
+ </script> |
+ </body> |
+</html> |