Chromium Code Reviews| 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> |