Commit 61bbedf5 authored by hyatt@apple.com's avatar hyatt@apple.com

https://bugs.webkit.org/show_bug.cgi?id=46421, make multi-column layout work with vertical text.

Reviewed by Dan Bernstein.

Added new tests in fast/multicol/vertical-lr and fast/multicol/vertical-rl.

Source/WebCore: 

* css/html.css:
Update p, blockquote and h1-h6 to respect directionality so that column layout tests that use those
elements work properly.

* rendering/InlineFlowBox.cpp:
(WebCore::InlineFlowBox::placeBoxesInBlockDirection):
Fix a flipping bug with the computation of lineTopIncludingMargins where it could be incorrectly shrunk
in some cases (causing lines to all stack on top of one another).

* rendering/InlineTextBox.h:
(WebCore::InlineTextBox::calculateBoundaries):
Fix calculateBoundaries to be physical rather than logical.

* rendering/LayoutState.cpp:
(WebCore::LayoutState::addForcedColumnBreak):
* rendering/LayoutState.h:
Rename childY to childLogicalOffset.

* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::layoutBlock):
(WebCore::RenderBlock::addOverflowFromChildren):
(WebCore::RenderBlock::addOverflowFromFloats):
(WebCore::RenderBlock::collapseMargins):
(WebCore::RenderBlock::estimateLogicalTopPosition):
(WebCore::RenderBlock::layoutBlockChild):
(WebCore::RenderBlock::markForPaginationRelayoutIfNeeded):
(WebCore::RenderBlock::paintColumnRules):
(WebCore::RenderBlock::paintColumnContents):
(WebCore::RenderBlock::paintFloats):
(WebCore::RenderBlock::selectionGaps):
(WebCore::RenderBlock::removeFloatingObjectsBelow):
(WebCore::RenderBlock::addOverhangingFloats):
(WebCore::RenderBlock::hitTestFloats):
(WebCore::RenderBlock::hitTestColumns):
(WebCore::RenderBlock::calcColumnWidth):
(WebCore::RenderBlock::desiredColumnWidth):
(WebCore::RenderBlock::columnRectAt):
(WebCore::RenderBlock::layoutColumns):
(WebCore::RenderBlock::adjustPointToColumnContents):
(WebCore::RenderBlock::adjustRectForColumns):
(WebCore::RenderBlock::flipForWritingModeIncludingColumns):
(WebCore::RenderBlock::adjustForColumns):
(WebCore::RenderBlock::adjustForBorderFit):
(WebCore::RenderBlock::nextPageLogicalTop):
(WebCore::RenderBlock::applyBeforeBreak):
(WebCore::RenderBlock::applyAfterBreak):
(WebCore::RenderBlock::adjustForUnsplittableChild):
(WebCore::RenderBlock::adjustLinePositionForPagination):
* rendering/RenderBlock.h:
(WebCore::RenderBlock::logicalRightOffsetForContent):
(WebCore::RenderBlock::logicalLeftOffsetForContent):
(WebCore::RenderBlock::leftForFloatIncludingMargin):
(WebCore::RenderBlock::topForFloatIncludingMargin):
* rendering/RenderBlockLineLayout.cpp:
(WebCore::RenderBlock::layoutInlineChildren):
(WebCore::RenderBlock::determineStartPosition):
Reworking of all the RenderBlock column functions to support flipping and vertical modes.

* rendering/RenderBox.cpp:
(WebCore::RenderBox::offsetFromContainer):
(WebCore::RenderBox::flipForWritingModeIncludingColumns):
Patch offsetFromContainer to be aware of flipped block writing modes when dealing with column layouts.

* rendering/RenderBox.h:
(WebCore::RenderBox::clientLogicalBottom):
Fix a bug in clientLogicalBottom where it didn't add in the right border/padding.
        
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::layoutBlock):
Better terminology for pagination.

* rendering/RenderInline.cpp:
(WebCore::RenderInline::offsetFromContainer):
(WebCore::RenderInline::mapLocalToContainer):
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::paintChildLayerIntoColumns):
(WebCore::RenderLayer::hitTestChildLayerColumns):
(WebCore::RenderLayer::localBoundingBox):
(WebCore::RenderLayer::boundingBox):
Patch painting in RenderLayers to be vertical-text-aware.
    
* rendering/RenderObject.cpp:
(WebCore::RenderObject::mapLocalToContainer):
Add code to be flipped block-aware with columns.

* rendering/RenderTable.cpp:
(WebCore::RenderTable::layout):
* rendering/RenderTableRow.cpp:
(WebCore::RenderTableRow::layout):
* rendering/RenderTableSection.cpp:
(WebCore::RenderTableSection::layoutRows):
Fix pagination to use better terminology.
        
* rendering/RenderText.cpp:
(WebCore::RenderText::absoluteQuads):
(WebCore::RenderText::absoluteQuadsForRange):
Fix a bug where vertical text wasn't taken into account.

LayoutTests: 

* fast/multicol/break-properties-expected.txt:
* fast/multicol/break-properties.html:
* fast/multicol/float-truncation.html:
* fast/multicol/vertical-lr: Added.
* fast/multicol/vertical-lr/border-padding-pagination.html: Added.
* fast/multicol/vertical-lr/break-properties-expected.txt: Added.
* fast/multicol/vertical-lr/break-properties.html: Added.
* fast/multicol/vertical-lr/column-break-with-balancing.html: Added.
* fast/multicol/vertical-lr/column-count-with-rules.html: Added.
* fast/multicol/vertical-lr/column-rules.html: Added.
* fast/multicol/vertical-lr/float-avoidance.html: Added.
* fast/multicol/vertical-lr/float-multicol.html: Added.
* fast/multicol/vertical-lr/float-paginate-complex.html: Added.
* fast/multicol/vertical-lr/float-paginate.html: Added.
* fast/multicol/vertical-lr/float-truncation-expected.txt: Added.
* fast/multicol/vertical-lr/float-truncation.html: Added.
* fast/multicol/vertical-lr/gap-non-negative-expected.txt: Added.
* fast/multicol/vertical-lr/gap-non-negative.html: Added.
* fast/multicol/vertical-lr/image-inside-nested-blocks-with-border-expected.txt: Added.
* fast/multicol/vertical-lr/image-inside-nested-blocks-with-border.html: Added.
* fast/multicol/vertical-lr/nested-columns.html: Added.
* fast/multicol/vertical-lr/resources: Added.
* fast/multicol/vertical-lr/resources/blimp.png: Added.
* fast/multicol/vertical-lr/unsplittable-inline-block.html: Added.
* fast/multicol/vertical-rl: Added.
* fast/multicol/vertical-rl/border-padding-pagination.html: Added.
* fast/multicol/vertical-rl/break-properties-expected.txt: Added.
* fast/multicol/vertical-rl/break-properties.html: Added.
* fast/multicol/vertical-rl/column-break-with-balancing.html: Added.
* fast/multicol/vertical-rl/column-count-with-rules.html: Added.
* fast/multicol/vertical-rl/column-rules.html: Added.
* fast/multicol/vertical-rl/float-avoidance.html: Added.
* fast/multicol/vertical-rl/float-multicol.html: Added.
* fast/multicol/vertical-rl/float-paginate-complex.html: Added.
* fast/multicol/vertical-rl/float-paginate.html: Added.
* fast/multicol/vertical-rl/float-truncation-expected.txt: Added.
* fast/multicol/vertical-rl/float-truncation.html: Added.
* fast/multicol/vertical-rl/gap-non-negative-expected.txt: Added.
* fast/multicol/vertical-rl/gap-non-negative.html: Added.
* fast/multicol/vertical-rl/image-inside-nested-blocks-with-border-expected.txt: Added.
* fast/multicol/vertical-rl/image-inside-nested-blocks-with-border.html: Added.
* fast/multicol/vertical-rl/nested-columns.html: Added.
* fast/multicol/vertical-rl/resources: Added.
* fast/multicol/vertical-rl/resources/blimp.png: Added.
* fast/multicol/vertical-rl/unsplittable-inline-block.html: Added.
* platform/mac/fast/multicol/vertical-lr: Added.
* platform/mac/fast/multicol/vertical-lr/border-padding-pagination-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/border-padding-pagination-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/border-padding-pagination-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/column-break-with-balancing-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/column-break-with-balancing-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/column-break-with-balancing-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/column-count-with-rules-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/column-count-with-rules-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/column-count-with-rules-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/column-rules-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/column-rules-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/column-rules-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/float-avoidance-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/float-avoidance-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/float-avoidance-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/float-multicol-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/float-multicol-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/float-multicol-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-complex-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-complex-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-complex-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/nested-columns-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/nested-columns-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/nested-columns-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/unsplittable-inline-block-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/unsplittable-inline-block-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/unsplittable-inline-block-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl: Added.
* platform/mac/fast/multicol/vertical-rl/border-padding-pagination-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/border-padding-pagination-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/border-padding-pagination-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/column-break-with-balancing-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/column-break-with-balancing-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/column-break-with-balancing-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/column-count-with-rules-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/column-count-with-rules-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/column-count-with-rules-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/column-rules-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/column-rules-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/column-rules-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/float-avoidance-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/float-avoidance-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/float-avoidance-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/float-multicol-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/float-multicol-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/float-multicol-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-complex-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-complex-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-complex-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/nested-columns-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/nested-columns-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/nested-columns-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/unsplittable-inline-block-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/unsplittable-inline-block-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/unsplittable-inline-block-expected.txt: Added.



git-svn-id: http://svn.webkit.org/repository/webkit/trunk@76726 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 1ed9b9f6
2011-01-26 Dave Hyatt <hyatt@apple.com>
Reviewed by Dan Bernstein.
https://bugs.webkit.org/show_bug.cgi?id=46421, make multi-column layout work with vertical text.
Added new tests in fast/multicol/vertical-lr and fast/multicol/vertical-rl.
* fast/multicol/break-properties-expected.txt:
* fast/multicol/break-properties.html:
* fast/multicol/float-truncation.html:
* fast/multicol/vertical-lr: Added.
* fast/multicol/vertical-lr/border-padding-pagination.html: Added.
* fast/multicol/vertical-lr/break-properties-expected.txt: Added.
* fast/multicol/vertical-lr/break-properties.html: Added.
* fast/multicol/vertical-lr/column-break-with-balancing.html: Added.
* fast/multicol/vertical-lr/column-count-with-rules.html: Added.
* fast/multicol/vertical-lr/column-rules.html: Added.
* fast/multicol/vertical-lr/float-avoidance.html: Added.
* fast/multicol/vertical-lr/float-multicol.html: Added.
* fast/multicol/vertical-lr/float-paginate-complex.html: Added.
* fast/multicol/vertical-lr/float-paginate.html: Added.
* fast/multicol/vertical-lr/float-truncation-expected.txt: Added.
* fast/multicol/vertical-lr/float-truncation.html: Added.
* fast/multicol/vertical-lr/gap-non-negative-expected.txt: Added.
* fast/multicol/vertical-lr/gap-non-negative.html: Added.
* fast/multicol/vertical-lr/image-inside-nested-blocks-with-border-expected.txt: Added.
* fast/multicol/vertical-lr/image-inside-nested-blocks-with-border.html: Added.
* fast/multicol/vertical-lr/nested-columns.html: Added.
* fast/multicol/vertical-lr/resources: Added.
* fast/multicol/vertical-lr/resources/blimp.png: Added.
* fast/multicol/vertical-lr/unsplittable-inline-block.html: Added.
* fast/multicol/vertical-rl: Added.
* fast/multicol/vertical-rl/border-padding-pagination.html: Added.
* fast/multicol/vertical-rl/break-properties-expected.txt: Added.
* fast/multicol/vertical-rl/break-properties.html: Added.
* fast/multicol/vertical-rl/column-break-with-balancing.html: Added.
* fast/multicol/vertical-rl/column-count-with-rules.html: Added.
* fast/multicol/vertical-rl/column-rules.html: Added.
* fast/multicol/vertical-rl/float-avoidance.html: Added.
* fast/multicol/vertical-rl/float-multicol.html: Added.
* fast/multicol/vertical-rl/float-paginate-complex.html: Added.
* fast/multicol/vertical-rl/float-paginate.html: Added.
* fast/multicol/vertical-rl/float-truncation-expected.txt: Added.
* fast/multicol/vertical-rl/float-truncation.html: Added.
* fast/multicol/vertical-rl/gap-non-negative-expected.txt: Added.
* fast/multicol/vertical-rl/gap-non-negative.html: Added.
* fast/multicol/vertical-rl/image-inside-nested-blocks-with-border-expected.txt: Added.
* fast/multicol/vertical-rl/image-inside-nested-blocks-with-border.html: Added.
* fast/multicol/vertical-rl/nested-columns.html: Added.
* fast/multicol/vertical-rl/resources: Added.
* fast/multicol/vertical-rl/resources/blimp.png: Added.
* fast/multicol/vertical-rl/unsplittable-inline-block.html: Added.
* platform/mac/fast/multicol/vertical-lr: Added.
* platform/mac/fast/multicol/vertical-lr/border-padding-pagination-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/border-padding-pagination-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/border-padding-pagination-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/column-break-with-balancing-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/column-break-with-balancing-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/column-break-with-balancing-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/column-count-with-rules-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/column-count-with-rules-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/column-count-with-rules-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/column-rules-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/column-rules-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/column-rules-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/float-avoidance-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/float-avoidance-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/float-avoidance-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/float-multicol-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/float-multicol-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/float-multicol-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-complex-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-complex-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-complex-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/float-paginate-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/nested-columns-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/nested-columns-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/nested-columns-expected.txt: Added.
* platform/mac/fast/multicol/vertical-lr/unsplittable-inline-block-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-lr/unsplittable-inline-block-expected.png: Added.
* platform/mac/fast/multicol/vertical-lr/unsplittable-inline-block-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl: Added.
* platform/mac/fast/multicol/vertical-rl/border-padding-pagination-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/border-padding-pagination-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/border-padding-pagination-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/column-break-with-balancing-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/column-break-with-balancing-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/column-break-with-balancing-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/column-count-with-rules-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/column-count-with-rules-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/column-count-with-rules-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/column-rules-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/column-rules-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/column-rules-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/float-avoidance-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/float-avoidance-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/float-avoidance-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/float-multicol-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/float-multicol-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/float-multicol-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-complex-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-complex-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-complex-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/float-paginate-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/nested-columns-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/nested-columns-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/nested-columns-expected.txt: Added.
* platform/mac/fast/multicol/vertical-rl/unsplittable-inline-block-expected.checksum: Added.
* platform/mac/fast/multicol/vertical-rl/unsplittable-inline-block-expected.png: Added.
* platform/mac/fast/multicol/vertical-rl/unsplittable-inline-block-expected.txt: Added.
2011-01-26 Tony Chang <tony@chromium.org>
Reviewed by Ryosuke Niwa.
PASS: 'break-before' is at (218, 8)
PASS: 'after-break' is at (428, 8)
FAIL: 'no-break' is at (428, 68) instead of (533 ,8)
......@@ -32,5 +32,4 @@
testBoxPosition("break-before", 218, 8);
testBoxPosition("after-break", 428, 8);
testBoxPosition("no-break", 533, 8);
</script>
<html>
<head>
<style>
div.columns {
width: 200px;
......@@ -17,6 +19,8 @@
color: silver;
}
</style>
</head>
<body>
<div id="tests">
<div class="columns" style="height: 80px;">
one line two lines three lines
......
<html>
<body style="-webkit-writing-mode:vertical-lr">
<div style="-webkit-column-count:2;-moz-column-count:2; border:2px solid maroon">
<div style="width:110px"></div>
<div style="background-color:lime; border:2px solid black; height:375px;">
<div style="margin: 10px 0; background-color:green; border: 2px solid blue">
<span style="font-size:64px">In 2nd column</span>
</div>
</div>
PASS: 'break-before' is at (8, 218)
PASS: 'after-break' is at (8, 428)
<style>
div.box { -webkit-box-sizing: border; border: solid blue; }
div.shorter { width: 54px; }
div.taller { width: 72px; }
</style>
<body style="-webkit-writing-mode:vertical-lr">
<div style="width: 100px; height: 630px; -webkit-column-gap: 5px; -webkit-columns: 6;">
<div class="taller box"></div>
<div class="taller box"></div>
<div id="break-before" class="shorter box" style="-webkit-column-break-before: always;"></div>
<div class="shorter box" style="-webkit-column-break-after: always;"></div>
<div id="after-break" class="shorter box"></div>
<div id="no-break" class="shorter box" style="-webkit-column-break-inside: avoid;"></div>
</div>
<pre id="console"></pre>
<script>
if (window.layoutTestController)
layoutTestController.dumpAsText();
function log(message)
{
document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
}
function testBoxPosition(id, expectedLeft, expectedTop)
{
var rect = document.getElementById(id).getBoundingClientRect();
if (rect.left === expectedLeft && rect.top === expectedTop)
log("PASS: '" + id + "' is at (" + expectedLeft + ", " + expectedTop + ")");
else
log("FAIL: '" + id + "' is at (" + rect.left + ", " + rect.top + ") instead of (" + expectedLeft + " ," + expectedTop + ")");
}
testBoxPosition("break-before", 8, 218);
testBoxPosition("after-break", 8, 428);
</script>
<html style="-webkit-writing-mode:vertical-lr">
<div style="-webkit-column-count:2; border:5px solid blue">
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
<div style="-webkit-column-break-before: always">
This text should be in the second column.<br>
This text should be in the second column.<br>
This text should be in the second column.<br>
This text should be in the second column.<br>
</div>
</div>
<div style="-webkit-margin-before:1em; -webkit-column-count:2; border:5px solid blue">
This text should be in the first column.<br>
This text should be in the first column.<br>
This text should be in the first column.<br>
This text should be in the first column.<br>
<div style="-webkit-column-break-before: always">
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
This is some text.<br>
</div>
<body style="-webkit-writing-mode: vertical-lr">
<p style="-webkit-column-count:3;-webkit-column-rule:3px solid black; width:100px;border:10px solid maroon; padding:20px;">
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
</p>
<p style="-webkit-column-count:3;-webkit-column-rule:3px solid black; width:100px;border:10px solid maroon; padding:20px; direction:rtl">
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
This is some column text.<br>
</p>
<body style="-webkit-writing-mode: vertical-lr">
<div style="-webkit-columns: 3; -webkit-column-rule: 4px solid maroon; padding: 10px 0; border:5px solid black">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum.
Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin bibendum justo ac enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed leo nulla, rutrum eu, dictum ut, posuere vel, arcu. Nam libero. Morbi orci. Maecenas pellentesque. Curabitur erat erat, ullamcorper at, gravida vitae, iaculis vitae, elit. Nullam quam. Quisque orci lectus, ullamcorper eu, imperdiet sed, accumsan et, ligula. Duis diam nisl, sagittis a, blandit volutpat, interdum sed, velit. Vestibulum quam.
Nulla a purus. Phasellus semper semper lectus. Nulla porttitor, dolor dictum scelerisque luctus, velit ipsum lobortis mauris, ac pretium enim nunc vel risus. Proin gravida mi ut sem cursus mattis. Fusce laoreet, nisi quis luctus volutpat, arcu pede tincidunt enim, nec malesuada urna nisl eu enim. Vivamus varius augue ac purus. Vestibulum vestibulum. Phasellus et est vitae ante accumsan rhoncus. Morbi convallis, arcu at hendrerit gravida, sem diam dignissim risus, sed aliquet erat mi ut mi. Nunc cursus lacinia elit.
Nunc nisi. Quisque at erat. Vestibulum dictum quam vitae nibh. Nunc vitae ante non odio interdum blandit. Curabitur leo quam, fermentum sed, feugiat in, ullamcorper id, nibh. Suspendisse ac turpis. In iaculis sollicitudin dui. Aenean vitae lectus vitae nulla pellentesque sollicitudin. Nunc gravida pharetra lectus. Etiam lacus ligula, placerat ut, dictum vitae, tempus vel, risus. Cras rhoncus. Praesent varius ultricies orci. Donec mattis, neque ut ornare fringilla, ante urna placerat eros, vel commodo nisi tortor ut mauris. Morbi magna dui, sagittis sit amet, tincidunt et, elementum eget, quam. Fusce molestie nisl vitae nisi.
Vestibulum a sapien. Phasellus ante lacus, vehicula non, cursus a, tempor ut, magna. Suspendisse potenti. Fusce aliquet, odio viverra vulputate dictum, enim odio luctus purus, ut scelerisque quam nulla non est. Donec eros lacus, egestas vitae, lacinia quis, tempor quis, pede. Morbi orci erat, iaculis id, ornare ac, elementum at, sem. Nunc ornare sodales nisi. Morbi interdum commodo nisl. Fusce eget eros non nisi ornare facilisis. Sed placerat, est non posuere posuere, purus sem dignissim libero, a viverra tellus dolor vel lorem. Cras augue. Etiam ultricies consequat odio. Mauris ac libero. Etiam posuere, libero vitae euismod gravida, urna elit imperdiet magna, vel cursus elit felis non mauris. Donec orci erat, porta id, dignissim ut, posuere dictum, leo. Suspendisse scelerisque egestas nulla.
</div>
<body style="-webkit-writing-mode:vertical-lr">
<div style="float:left; width:100px; height:200px; background-color:lime"></div>
<div style="height:415px; -moz-column-width:200px; -webkit-column-width:200px;
text-align:justify; border:10px solid black">
<p>This technology preview of our award winning next generation browser
is a sign of things to come from Mozilla. Powerful yet easy to use. This
maintenance release provides a few updates based on user feedback - including
changes to the Extension System and icon improvements.
\ No newline at end of file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html style="-webkit-writing-mode:vertical-lr">
<body style="-moz-column-width:24em; -moz-column-gap:2em; -webkit-column-width:24em; -webkit-column-gap:2em; height:1500px">
<div style="background:cyan;">
<div style="float:left; height:50%; background:yellow; margin:0.3em;">
<img src="resources/blimp.png" style="float:left;">
You've already downloaded a build. All you have to do is use it as your everyday browser and mail/news reader. If you downloaded a build with Talkback, please turn it on when it asks.
<div style="float:right; background:red;">
<p>Hola hola 1
<p>Hola hola 2
<p>Hola hola 3
<p>Hola hola 4
<p>Hola hola 5
<p>Hola hola 6
<p>Hola hola 7
<p>Hola hola 8
<p>Hola hola 9
<p>Hola hola 10
<p>Hola hola 11
</div>
Talkback reports give us really valuable data on which crashes are the most serious, and how often people are encountering them.
</div>
<div style="float:right; background:magenta;">
<p>Hello Kitty 1
<p>Hello Kitty 2
<p>Hello Kitty 3
<p>Hello Kitty 4
<p>Hello Kitty 5
<p>Hello Kitty 6
<p>Hello Kitty 7
<p>Hello Kitty 8
<p>Hello Kitty 9
</div>
<h2>What Needs To Be Done?</h2>
</div>
<div style="float:left; background:gray;">
<p>Hola hola 1
<p>Hola hola 2
<p>Hola hola 3
<p>Hola hola 4
<p>Hola hola 5
<p>Hola hola 6
<p>Hola hola 7
<p>Hola hola 8
<p>Hola hola 9
<p>Hola hola 10
<p>Hola hola 11
</div>
<dl class="tasklist">
<dt>Report Bugs</dt>
<dd>
<p>You've already downloaded a build. All you have to do is use it as
your everyday browser and mail/news reader. If you downloaded a build with
Talkback, <em>please turn it on</em> when it asks. Talkback reports give
us really valuable data on which crashes are the most serious, and how
often people are encountering them. And all you have to do is click "OK".
If you find something you think is a bug, check to see if it's not already
<a href="http://bugzilla.mozilla.org/duplicates.cgi">known about</a>, and then please
follow the <a href="http://bugzilla.mozilla.org/enter_bug.cgi?format=guided">bug submission procedure</a>.
</p>
</dd>
<div style="float:left; background:green;">
<p>Hola hola 1
<p>Hola hola 2
<p>Hola hola 3
<p>Hola hola 4
<p>Hola hola 5
<p>Hola hola 6
<p>Hola hola 7
<p>Hola hola 8
<p>Hola hola 9
<p>Hola hola 10
<p>Hola hola 11
</div>
<dt>Quality Assurance</dt>
<dd>
<p><a href="../quality/">Mozilla QA</a>
has a <a href="../quality/help/">page</a>
dedicated to ways to get involved with helping. This doesn't involve
knowing how to code, although a little knowledge of HTML is helpful. Being
involved with QA is good for people wanting to get more familiar with
Mozilla, and there's a strong community. A particularly good way to get involved
is to join the <a href="../newlayout/bugathon.html">BugAThon</a>.</p>
</dd>
</dl>
</body>
</html>
<body style="-webkit-writing-mode:vertical-lr; height:1200px">
<div style="-webkit-column-width:300px;-moz-column-width:300px; border:2px solid black; width:400px">
This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>
<p><span style="float:left;font-size:128px;">T</span>
his is some text.<br>
This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br></p>
</div>
<div style="-webkit-margin-before:1em; -webkit-column-width:300px;-moz-column-width:300px; border:2px solid black; width:400px">
This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>
<p><img style="float:left;width:100px;height:100px;background-color:green"><img style="float:right;width:200px;height:100px;background-color:green">
This is some text<br>
This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br></p>
</div>
<div style="-webkit-margin-before:1em; -webkit-column-width:300px;-moz-column-width:300px; border:2px solid black; width:400px">
<img style="float:left;background-color:green; height:300px;width:390px">
Longer text designed to test float and wrapping behavior. Longer text designed to test float and wrapping behavior.
Longer text designed to test float and wrapping behavior.
Longer text designed to test float and wrapping behavior.
Longer text designed to test float and wrapping behavior.
</div>
<div style="-webkit-margin-before:1em; -webkit-column-width:300px;-moz-column-width:300px; border:2px solid black; width:400px">
<img style="float:left;background-color:blue; height:100%;width:380px">
<span style="font-size:24px"><img style="float:left;background-color:green;width:20px;height:100px">
Longer text designed <img style="float:right;background-color:green;width:20px;height:100px">to test float and wrapping behavior. Longer text designed to test float and wrapping behavior.
Longer text designed to test float and wrapping behavior.
Longer text designed to test float and wrapping behavior.
Longer text designed to test float and wrapping behavior.
</span>
</div>
<body style="-webkit-writing-mode:vertical-lr; height:1200px">
<div style="-webkit-column-width:300px;-moz-column-width:300px; border:2px solid black; width:400px">
This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>
<img style="float:left;width:300px;height:250px;background-color:green;display:block">
This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>This is some text.<br>
This is some text.<br>This is some text.<br>This is some text.<br>
<html style="-webkit-writing-mode:vertical-lr">
<style>
div.columns {
height: 200px;
-webkit-columns: 2;
-webkit-column-gap: 0;
outline: 1px solid blue;
font-family: ahem;
font-size: 10px;
margin: 5px;
overflow: hidden;
}
div.float {
float: left;
height: 50px;
-webkit-margin-before: 5px;
color: silver;
}
</style>
<div id="tests">
<div class="columns" style="width: 80px;">
one line two lines three lines
<div class="float" id="f1">
three line float
</div>
text runs here next to the float
</div>
<!-- In this case, the float fits, but then the main content causes the break
to occur earlier and the float gets split. -->
<div class="columns" style="width: 75px;">
one line two lines three lines
<div class="float" id="f2">
three line float
</div>
text runs here next to the float
</div>
<!-- In this case, the float paginates after its second line. -->
<div class="columns" style="width: 70px;">
one line two lines three lines
<div class="float" id="f3">
three line float
</div>
text runs here next to the float
</div>
<!-- In this case, the float paginates after its first line. -->
<div class="columns" style="width: 70px;">
one line two lines three lines and some more
<div class="float" id="f4">
three line float
</div>
text runs here next to the float
</div>
<!-- In this case, the float paginates after its third line. -->
<div class="columns" style="width: 45px;">
one line
<div class="float" id="f5">
and one five line float
</div>
text runs here next to the float
</div>
</div>
<pre id="result"></pre>
<script>
function floatOffset(float)
{
var range = document.createRange();
range.setStart(float, 0);
range.setEnd(float, 0);
range.expand("word");
var rect = range.getBoundingClientRect();
var parentRect = float.parentNode.getBoundingClientRect();
return { width: rect.left - parentRect.left, height: rect.top - parentRect.top };
}
var tests = [
["f1", 45, 0],
["f2", 45, 0],
["f3", 45, 0],
["f4", 55, 0],
["f5", 15, 0]
];
var test;
var failures = 0;
while (test = tests.shift()) {
var float = document.getElementById(test[0]);