Index: LayoutTests/fast/multicol/column-count-with-rules-expected.html |
diff --git a/LayoutTests/fast/multicol/column-count-with-rules-expected.html b/LayoutTests/fast/multicol/column-count-with-rules-expected.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..5d96c96ae531fa450bbadc5b33b525c3d42761a0 |
--- /dev/null |
+++ b/LayoutTests/fast/multicol/column-count-with-rules-expected.html |
@@ -0,0 +1,68 @@ |
+<!DOCTYPE html> |
+<style> |
+ .columns { |
+ position: relative; |
+ width: 340px; |
+ height: 100px; |
+ border: 10px solid maroon; |
+ margin-bottom: 1em; |
+ line-height: 20px; |
+ } |
+ .column { |
+ width: 120px; |
+ display: inline-block; |
mstensho (USE GERRIT)
2014/10/20 21:42:31
float:left instead of display:inline-block? Then t
andersr
2014/10/21 12:33:35
Done.
|
+ vertical-align: top; |
+ } |
+ .column:last-child { |
+ width: 100px; |
+ } |
+ .rule { |
+ height: 100px; |
+ width: 2px; |
+ background-color: black; |
+ position: absolute; |
mstensho (USE GERRIT)
2014/10/20 21:42:31
You could also do the rules as floats, of course,
andersr
2014/10/21 12:33:35
Yeah, that's much better.
Done.
|
+ } |
+ .rule1 { left: 109px; } |
+ .rule2 { left: 229px; } |
+</style> |
+<div class="columns"> |
+ <div class="rule rule1"></div> |
+ <div class="rule rule2"></div> |
+ <div class="column"> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ </div><div class="column"> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ </div><div class="column"> |
+ Column text.<br> |
+ Column text.<br> |
+ </div> |
+</div> |
+ |
+<div class="columns" style="direction:rtl;"> |
+ <div class="rule rule1"></div> |
+ <div class="rule rule2"></div> |
+ <div class="column"> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ </div><div class="column"> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ Column text.<br> |
+ </div><div class="column"> |
+ Column text.<br> |
+ Column text.<br> |
+ </div> |
+</div> |