Skip to content
Permalink
Browse files
percentage widths rendered wrong in vertical writing mode with orthog…
…onal parent

https://bugs.webkit.org/show_bug.cgi?id=96308

Reviewed by Tony Chang.

Source/WebCore:

When the containingBlock is in a perpendicular writing-mode, we need to use
it's logicalWidth as the availableHeight for computing percentage values.

Tests: fast/writing-mode/percentage-height-orthogonal-writing-modes-quirks.html
       fast/writing-mode/percentage-height-orthogonal-writing-modes.html

* rendering/RenderBox.cpp:
(WebCore::RenderBox::computePercentageLogicalHeight):
(WebCore::RenderBox::availableLogicalHeightUsing):
Added some FIXMEs for perpendicular writing mode cases.

LayoutTests:

* fast/writing-mode/percentage-height-orthogonal-writing-modes-expected.txt: Added.
* fast/writing-mode/percentage-height-orthogonal-writing-modes-quirks-expected.txt: Added.
* fast/writing-mode/percentage-height-orthogonal-writing-modes-quirks.html: Added.
* fast/writing-mode/percentage-height-orthogonal-writing-modes.html: Added.


Canonical link: https://commits.webkit.org/114461@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@128375 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
ojanvafai committed Sep 12, 2012
1 parent 3c455a3 commit c9d0929eae62c3ba7a62dd18a936c62168fca7a2
Showing 9 changed files with 260 additions and 17 deletions.
@@ -1,3 +1,15 @@
2012-09-12 Ojan Vafai <ojan@chromium.org>

percentage widths rendered wrong in vertical writing mode with orthogonal parent
https://bugs.webkit.org/show_bug.cgi?id=96308

Reviewed by Tony Chang.

* fast/writing-mode/percentage-height-orthogonal-writing-modes-expected.txt: Added.
* fast/writing-mode/percentage-height-orthogonal-writing-modes-quirks-expected.txt: Added.
* fast/writing-mode/percentage-height-orthogonal-writing-modes-quirks.html: Added.
* fast/writing-mode/percentage-height-orthogonal-writing-modes.html: Added.

2012-09-12 Adam Barth <abarth@webkit.org>

[v8] document.getCSSCanvasContext doesn't need to be custom
@@ -0,0 +1,20 @@
PASS
PASS
PASS
PASS
PASS
FAIL:
Expected 100 for height, but got 600.

<div class="container">
<div style="width: 100%; height: 100%;" data-expected-height="100" data-expected-width="200">
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height="100" data-expected-width="200"></div>
</div>
</div>
PASS
FAIL:
Expected 584 for height, but got 600.

<div class="container" style="width: auto; height: auto; float: left;">
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height="584" data-expected-width="0"></div>
</div>
@@ -0,0 +1,39 @@
compatMode: BackCompat
PASS
PASS
PASS
PASS
PASS
FAIL:
Expected 100 for height, but got 600.

<div class="container">
<div style="width: 100%; height: 100%;" data-expected-height="100" data-expected-width="200">
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height="100" data-expected-width="200"></div>
</div>
</div>
PASS
FAIL:
Expected 100 for height, but got 600.
Expected 100 for height, but got 600.
Expected 100 for height, but got 600.

<div class="container">
<div style="width: 150px;" data-expected-height="100" data-expected-width="150">
<div data-expected-height="100" data-expected-width="150">
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height="100" data-expected-width="150"></div>
</div>
</div>
</div>
FAIL:
Expected 584 for height, but got 1447.

<div class="container" style="width: auto; height: auto; float: left;">
<div class="item" style="width: 100%; height: 100%;" data-expected-height="584" data-expected-width="0"></div>
</div>
FAIL:
Expected 584 for height, but got 600.

<div class="container" style="width: auto; height: auto; float: left;">
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height="584" data-expected-width="0"></div>
</div>
@@ -0,0 +1,84 @@
<script src="../../resources/check-layout.js"></script>

<style>
html {
height: 600px;
}
.container {
width: 200px;
height: 100px;
outline: 10px solid salmon;
}
.item {
background-color: orange;
}
.vertical-rl {
-webkit-writing-mode: vertical-rl;
}
</style>

<body onload="checkLayout('.container')">

<script>
if (window.testRunner)
testRunner.dumpAsText();
document.write("<div>compatMode: " + document.compatMode + "</div>");
</script>

<div class="container">
<div class="item" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>

<div class="container">
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>

<div class="container" style="border-style: dashed; border-width: 1px 2px; padding: 3px 4px;">
<div class="item" style="width: 100%; height: 100%; border-style: solid; border-width: 1px 2px; padding: 3px 4px;" data-expected-height=108 data-expected-width=212></div>
</div>

<div class="container" style="border-style: dashed; border-width: 1px 2px; padding: 3px 4px;">
<div class="item vertical-rl" style="width: 100%; height: 100%; border-style: solid; border-width: 1px 2px; padding: 3px 4px;" data-expected-height=108 data-expected-width=212></div>
</div>

<div class="container">
<div style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200>
<div class="item" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>
</div>

<!-- FIXME: We get the height wrong on the innermost element. https://bugs.webkit.org/show_bug.cgi?id=93655 -->
<div class="container">
<div style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200>
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>
</div>

<div class="container">
<div style="width: 150px;" data-expected-height=100 data-expected-width=150>
<div data-expected-height=100 data-expected-width=150>
<div class="item" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=150></div>
</div>
</div>
</div>

<!-- FIXME: We get the height wrong on the innermost element. https://bugs.webkit.org/show_bug.cgi?id=93655 -->
<div class="container">
<div style="width: 150px;" data-expected-height=100 data-expected-width=150>
<div data-expected-height=100 data-expected-width=150>
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=150></div>
</div>
</div>
</div>

<!-- FIXME: We incorrectly use the size of the body element for calculating the percentage height. https://bugs.webkit.org/show_bug.cgi?id=96426 -->
<div class="container" style="width: auto; height: auto; float: left;">
<div class="item" style="width: 100%; height: 100%;" data-expected-height=584 data-expected-width=0></div>
</div>

<!-- FIXME: We get the height wrong on the innermost element. https://bugs.webkit.org/show_bug.cgi?id=93655 -->
<div class="container" style="width: auto; height: auto; float: left;">
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=584 data-expected-width=0></div>
</div>

</body>
@@ -0,0 +1,66 @@
<!DOCTYPE html>

<script src="../../resources/check-layout.js"></script>
<script>
if (window.testRunner)
testRunner.dumpAsText();
</script>

<style>
html {
height: 600px;
}
.container {
width: 200px;
height: 100px;
outline: 10px solid salmon;
}
.item {
background-color: orange;
}
.vertical-rl {
-webkit-writing-mode: vertical-rl;
}
</style>

<body onload="checkLayout('.container')">

<div class="container">
<div class="item" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>

<div class="container">
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>

<div class="container" style="border-style: dashed; border-width: 1px 2px; padding: 3px 4px;">
<div class="item" style="width: 100%; height: 100%; border-style: solid; border-width: 1px 2px; padding: 3px 4px;" data-expected-height=108 data-expected-width=212></div>
</div>

<div class="container" style="border-style: dashed; border-width: 1px 2px; padding: 3px 4px;">
<div class="item vertical-rl" style="width: 100%; height: 100%; border-style: solid; border-width: 1px 2px; padding: 3px 4px;" data-expected-height=108 data-expected-width=212></div>
</div>

<div class="container">
<div style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200>
<div class="item" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>
</div>

<!-- FIXME: We get the height wrong on the innermost element. https://bugs.webkit.org/show_bug.cgi?id=93655 -->
<div class="container">
<div style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200>
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>
</div>

<div class="container" style="width: auto; height: auto; float: left;">
<div class="item" style="width: 100%; height: 100%;" data-expected-height=0 data-expected-width=0></div>
</div>

<!-- FIXME: We get the height wrong on the innermost element. https://bugs.webkit.org/show_bug.cgi?id=93655 -->
<div class="container" style="width: auto; height: auto; float: left;">
<div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=584 data-expected-width=0></div>
</div>

</body>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,9 +1,9 @@
layer at (0,0) size 1282x585
layer at (0,0) size 1712x585
RenderView at (0,0) size 800x585
layer at (0,0) size 800x585
RenderBlock {HTML} at (0,0) size 800x585
RenderBody {BODY} at (8,8) size 784x569
RenderBlock {DIV} at (0,0) size 1274x134
RenderBlock {DIV} at (0,0) size 1704x134
RenderBlock {DIV} at (16,16) size 26x102 [border: (1px solid #000000)]
RenderBlock (floating) {DIV} at (1,1) size 24x100
RenderBlock {DIV} at (0,0) size 24x100 [bgcolor=#008000]
@@ -14,13 +14,13 @@ layer at (0,0) size 800x585
RenderTableRow {TR} at (0,0) size 24x96
RenderTableCell {TD} at (0,1) size 24x94 [r=0 c=0 rs=1 cs=1]
RenderImage {IMG} at (1,-1) size 22x96 [bgcolor=#008000]
RenderBlock {DIV} at (100,16) size 571x102 [border: (1px solid #000000)]
RenderBlock {DIV} at (1,1) size 569x100
RenderBlock {DIV} at (0,0) size 569x100 [bgcolor=#008000]
RenderBlock {DIV} at (687,16) size 571x102 [border: (1px solid #000000)]
RenderBlock {DIV} at (1,1) size 569x100
RenderTable {TABLE} at (0,0) size 569x96 [bgcolor=#FF0000]
RenderTableSection {TBODY} at (0,0) size 569x96
RenderTableRow {TR} at (0,0) size 569x96
RenderTableCell {TD} at (0,273) size 569x-451 [r=0 c=0 rs=1 cs=1]
RenderImage {IMG} at (273,-273) size 22x96 [bgcolor=#008000]
RenderBlock {DIV} at (100,16) size 786x102 [border: (1px solid #000000)]
RenderBlock {DIV} at (1,1) size 784x100
RenderBlock {DIV} at (0,0) size 784x100 [bgcolor=#008000]
RenderBlock {DIV} at (902,16) size 786x102 [border: (1px solid #000000)]
RenderBlock {DIV} at (1,1) size 784x100
RenderTable {TABLE} at (0,0) size 784x96 [bgcolor=#FF0000]
RenderTableSection {TBODY} at (0,0) size 784x96
RenderTableRow {TR} at (0,0) size 784x96
RenderTableCell {TD} at (0,381) size 784x-666 [r=0 c=0 rs=1 cs=1]
RenderImage {IMG} at (381,-381) size 22x96 [bgcolor=#008000]
@@ -1,3 +1,21 @@
2012-09-12 Ojan Vafai <ojan@chromium.org>

percentage widths rendered wrong in vertical writing mode with orthogonal parent
https://bugs.webkit.org/show_bug.cgi?id=96308

Reviewed by Tony Chang.

When the containingBlock is in a perpendicular writing-mode, we need to use
it's logicalWidth as the availableHeight for computing percentage values.

Tests: fast/writing-mode/percentage-height-orthogonal-writing-modes-quirks.html
fast/writing-mode/percentage-height-orthogonal-writing-modes.html

* rendering/RenderBox.cpp:
(WebCore::RenderBox::computePercentageLogicalHeight):
(WebCore::RenderBox::availableLogicalHeightUsing):
Added some FIXMEs for perpendicular writing mode cases.

2012-09-12 Adam Barth <abarth@webkit.org>

[v8] document.getCSSCanvasContext doesn't need to be custom
@@ -2127,7 +2127,7 @@ LayoutUnit RenderBox::computePercentageLogicalHeight(const Length& height) const
// only at explicit containers.
bool skippedAutoHeightContainingBlock = false;
RenderBlock* cb = containingBlock();
while (!cb->isRenderView() && !cb->isBody() && !cb->isTableCell() && !cb->isOutOfFlowPositioned() && cb->style()->logicalHeight().isAuto()) {
while (!cb->isRenderView() && !cb->isBody() && !cb->isTableCell() && !cb->isOutOfFlowPositioned() && cb->style()->logicalHeight().isAuto() && isHorizontalWritingMode() == cb->isHorizontalWritingMode()) {
if (!document()->inQuirksMode() && !cb->isAnonymousBlock())
break;
skippedAutoHeightContainingBlock = true;
@@ -2145,10 +2145,12 @@ LayoutUnit RenderBox::computePercentageLogicalHeight(const Length& height) const

bool includeBorderPadding = isTable();

// Table cells violate what the CSS spec says to do with heights. Basically we
// don't care if the cell specified a height or not. We just always make ourselves
// be a percentage of the cell's current content height.
if (cb->isTableCell()) {
if (isHorizontalWritingMode() != cb->isHorizontalWritingMode())
availableHeight = cb->contentLogicalWidth();
else if (cb->isTableCell()) {
// Table cells violate what the CSS spec says to do with heights. Basically we
// don't care if the cell specified a height or not. We just always make ourselves
// be a percentage of the cell's current content height.
if (!skippedAutoHeightContainingBlock) {
if (!cb->hasOverrideHeight()) {
// Normally we would let the cell size intrinsically, but scrolling overflow has to be
@@ -2336,6 +2338,7 @@ LayoutUnit RenderBox::availableLogicalHeightUsing(const Length& h) const
return overrideLogicalContentHeight();

if (h.isPercent() && isOutOfFlowPositioned()) {
// FIXME: This is wrong if the containingBlock has a perpendicular writing mode.
LayoutUnit availableHeight = containingBlockLogicalHeightForPositioned(containingBlock());
return adjustContentBoxLogicalHeightForBoxSizing(valueForLength(h, availableHeight));
}
@@ -2355,6 +2358,7 @@ LayoutUnit RenderBox::availableLogicalHeightUsing(const Length& h) const
return adjustContentBoxLogicalHeightForBoxSizing(newHeight);
}

// FIXME: This is wrong if the containingBlock has a perpendicular writing mode.
return containingBlock()->availableLogicalHeight();
}

0 comments on commit c9d0929

Please sign in to comment.