Skip to content

W
webkit
Commit 49710b19 authored by hbono@chromium.org's avatar hbono@chromium.org
Browse files
Options

Move contents right when a vertical scrollbar is shown at the left side of an RTL element. 

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

Reviewed by Hajime Morita.

Source/WebCore:

This change prevents the scrollWidth value from being cropped by the width of a
scrollbar when a vertical scrollbar is shown at the left side of an RTL element.
This change also increases the clientLeft value by this scrollbar width and move
contents right to improve compliance with CSSOM <http://www.w3.org/TR/cssom-view>.

Tests: scrollbars/rtl/div-horizontal.html
       scrollbars/rtl/div-vertical.html

* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::paintObject): Move contents to the right.
* rendering/RenderBox.cpp:
(WebCore::RenderBox::topLeftLocationOffset): Move the top-left corner to the right to prevent WebKit from cropping scrollWidth.
* rendering/RenderBox.h:
(WebCore::RenderBox::clientLeft): Increase clientLeft by the width of a scrollbar.

LayoutTests:

This changes adds a couple of tests that verify CSSOM properties of RTL elements
are compliant with <http://www.w3.org/TR/cssom-view> regardless of their
scrollbar positions.

* platform/chromium/TestExpectations:
* scrollbars/rtl: Added.
* scrollbars/rtl/div-horizontal-expected.txt: Added.
* scrollbars/rtl/div-horizontal.html: Added.
* scrollbars/rtl/div-vertical-expected.txt: Added.
* scrollbars/rtl/div-vertical.html: Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@123067 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 79ff7c25
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 2 deletions
LayoutTests/ChangeLog
View file @ 49710b19
2012-07-18 Hironori Bono <hbono@chromium.org>
Move contents right when a vertical scrollbar is shown at the left side of an RTL element.
https://bugs.webkit.org/show_bug.cgi?id=85856
Reviewed by Hajime Morita.
This changes adds a couple of tests that verify CSSOM properties of RTL elements
are compliant with <http://www.w3.org/TR/cssom-view> regardless of their
scrollbar positions.
* platform/chromium/TestExpectations:
* scrollbars/rtl: Added.
* scrollbars/rtl/div-horizontal-expected.txt: Added.
* scrollbars/rtl/div-horizontal.html: Added.
* scrollbars/rtl/div-vertical-expected.txt: Added.
* scrollbars/rtl/div-vertical.html: Added.
2012-07-18 Kent Tamura <tkent@chromium.org>
Form state restore: Classify form control sates by owners in internal and serialized representations
LayoutTests/platform/chromium/TestExpectations
View file @ 49710b19
......@@ -3645,6 +3645,11 @@ BUGWK90517 WIN : svg/W3C-I18N/tspan-dirRTL-ubNone-in-default-context.svg = PASS
BUGWK91421 WIN7 : svg/W3C-SVG-1.1/animate-elem-39-t.svg = PASS CRASH
BUGWK90469 WIN : storage/websql/multiple-databases-garbage-collection.html = PASS CRASH
// Require rebaselines when Bug 85856 is fixed. (The left side of their RTL elements are cropped due to this bug.)
BUGWK85856 : fast/block/float/028.html = IMAGE
BUGWK85856 : fast/overflow/unreachable-overflow-rtl-bug.html = IMAGE
BUGWK85856 : fast/block/float/026.html = IMAGE
// Require rebaseline after bug 88171
BUGWK88171 WIN : css1/formatting_model/floating_elements.html = IMAGE
......
LayoutTests/scrollbars/rtl/div-horizontal-expected.txt 0 → 100644
View file @ 49710b19
Test if WebKit can show the left side of the inner elements regardless of the position of its scrollbars. To test manually, open this document and verify we can see "ABC" both in the LTR element and in the RTL element.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Verify the widths of the outer RTL elements are the same as the widths of the outer LTR elements.
PASS outerLTR.offsetWidth == outerRTL.offsetWidth is true
PASS outerLTR.clientWidth == outerRTL.clientWidth is true
PASS outerLTR.scrollWidth == outerRTL.scrollWidth is true
Verify the widths of the inner RTL elements are the same as the widths of the inner LTR elements.
PASS innerLTR.offsetWidth == innerRTL.offsetWidth is true
PASS innerLTR.clientWidth == innerRTL.clientWidth is true
PASS innerLTR.scrollWidth == innerRTL.scrollWidth is true
Verify the width of the vertical scrollbar of the outer RTL element is the same as the one of the outer LTR element regardless of their scrollbar positions.
PASS scrollbarWidthLTR == scrollbarWidthRTL is true
PASS successfullyParsed is true
TEST COMPLETE
ABC
ABC
LayoutTests/scrollbars/rtl/div-horizontal.html 0 → 100644
View file @ 49710b19
<!DOCTYPE html>
<html>
<head>
<title>Bug 85856</title>
<script src="../../fast/js/resources/js-test-pre.js"></script>
</head>
<body dir="ltr">
<div dir="ltr" id="outer-ltr" style="width: 200px; height: 200px; overflow: scroll;">
<div id="inner-ltr" style="text-align: left; width: 300px; height: 300px;">ABC</div>
</div>
<div dir="rtl" id="outer-rtl" style="width: 200px; height: 200px; overflow: scroll;">
<div id="inner-rtl" style="text-align: left; width: 300px; height: 300px;">ABC</div>
</div>
<script type="text/javascript">
description('Test if WebKit can show the left side of the inner elements regardless of the position of its scrollbars. To test manually, open this document and verify we can see "ABC" both in the LTR element and in the RTL element.');
var outerLTR = document.getElementById('outer-ltr');
var innerLTR = document.getElementById('inner-ltr');
var outerRTL = document.getElementById('outer-rtl');
var innerRTL = document.getElementById('inner-rtl');
outerLTR.scrollLeft = 0;
outerRTL.scrollLeft = 0;
debug('Verify the widths of the outer RTL elements are the same as the widths of the outer LTR elements.');
shouldBeTrue('outerLTR.offsetWidth == outerRTL.offsetWidth');
shouldBeTrue('outerLTR.clientWidth == outerRTL.clientWidth');
shouldBeTrue('outerLTR.scrollWidth == outerRTL.scrollWidth');
debug('Verify the widths of the inner RTL elements are the same as the widths of the inner LTR elements.');
shouldBeTrue('innerLTR.offsetWidth == innerRTL.offsetWidth');
shouldBeTrue('innerLTR.clientWidth == innerRTL.clientWidth');
shouldBeTrue('innerLTR.scrollWidth == innerRTL.scrollWidth');
debug('Verify the width of the vertical scrollbar of the outer RTL element is the same as the one of the outer LTR element regardless of their scrollbar positions.');
var scrollbarWidthLTR = outerLTR.offsetWidth - outerLTR.clientWidth;
var scrollbarWidthRTL = outerRTL.offsetWidth - outerRTL.clientWidth;
shouldBeTrue('scrollbarWidthLTR == scrollbarWidthRTL');
</script>
<script src="../../fast/js/resources/js-test-post.js"></script>
</body>
</html>
LayoutTests/scrollbars/rtl/div-vertical-expected.txt 0 → 100644
View file @ 49710b19
Test if WebKit can show the left side of the inner elements regardless of the position of its scrollbars. To test manually, open this document and verify we can see "ABC" both in the LTR element and in the RTL element.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Verify the widths of the outer RTL elements are the same as the widths of the outer LTR elements.
PASS outerLTR.offsetWidth == outerRTL.offsetWidth is true
PASS outerLTR.clientWidth == outerRTL.clientWidth is true
PASS outerLTR.scrollWidth == outerRTL.scrollWidth is true
Verify the widths of the inner RTL elements are the same as the widths of the inner LTR elements.
PASS innerLTR.offsetWidth == innerRTL.offsetWidth is true
PASS innerLTR.clientWidth == innerRTL.clientWidth is true
PASS innerLTR.scrollWidth == innerRTL.scrollWidth is true
Verify the width of the vertical scrollbar of the outer RTL element is the same as the one of the outer LTR element regardless of their scrollbar positions.
PASS scrollbarWidthLTR == scrollbarWidthRTL is true
PASS successfullyParsed is true
TEST COMPLETE
ABC
ABC
LayoutTests/scrollbars/rtl/div-vertical.html 0 → 100644
View file @ 49710b19
<!DOCTYPE html>
<html>
<head>
<title>Bug 85856</title>
<script src="../../fast/js/resources/js-test-pre.js"></script>
</head>
<body dir="ltr" style="-webkit-writing-mode: vertical-rl;">
<div dir="ltr" id="outer-ltr" style="width: 200px; height: 200px; overflow: scroll;">
<div id="inner-ltr" style="text-align: left; width: 300px; height: 300px;">ABC</div>
</div>
<div dir="rtl" id="outer-rtl" style="width: 200px; height: 200px; overflow: scroll;">
<div id="inner-rtl" style="text-align: left; width: 300px; height: 300px;">ABC</div>
</div>
<script type="text/javascript">
description('Test if WebKit can show the left side of the inner elements regardless of the position of its scrollbars. To test manually, open this document and verify we can see "ABC" both in the LTR element and in the RTL element.');
var outerLTR = document.getElementById('outer-ltr');
var innerLTR = document.getElementById('inner-ltr');
var outerRTL = document.getElementById('outer-rtl');
var innerRTL = document.getElementById('inner-rtl');
outerLTR.scrollLeft = 0;
outerRTL.scrollLeft = 0;
debug('Verify the widths of the outer RTL elements are the same as the widths of the outer LTR elements.');
shouldBeTrue('outerLTR.offsetWidth == outerRTL.offsetWidth');
shouldBeTrue('outerLTR.clientWidth == outerRTL.clientWidth');
shouldBeTrue('outerLTR.scrollWidth == outerRTL.scrollWidth');
debug('Verify the widths of the inner RTL elements are the same as the widths of the inner LTR elements.');
shouldBeTrue('innerLTR.offsetWidth == innerRTL.offsetWidth');
shouldBeTrue('innerLTR.clientWidth == innerRTL.clientWidth');
shouldBeTrue('innerLTR.scrollWidth == innerRTL.scrollWidth');
debug('Verify the width of the vertical scrollbar of the outer RTL element is the same as the one of the outer LTR element regardless of their scrollbar positions.');
var scrollbarWidthLTR = outerLTR.offsetWidth - outerLTR.clientWidth;
var scrollbarWidthRTL = outerRTL.offsetWidth - outerRTL.clientWidth;
shouldBeTrue('scrollbarWidthLTR == scrollbarWidthRTL');
</script>
<script src="../../fast/js/resources/js-test-post.js"></script>
</body>
</html>
Source/WebCore/ChangeLog
View file @ 49710b19
2012-07-18 Hironori Bono <hbono@chromium.org>
Move contents right when a vertical scrollbar is shown at the left side of an RTL element.
https://bugs.webkit.org/show_bug.cgi?id=85856
Reviewed by Hajime Morita.
This change prevents the scrollWidth value from being cropped by the width of a
scrollbar when a vertical scrollbar is shown at the left side of an RTL element.
This change also increases the clientLeft value by this scrollbar width and move
contents right to improve compliance with CSSOM <http://www.w3.org/TR/cssom-view>.
Tests: scrollbars/rtl/div-horizontal.html
scrollbars/rtl/div-vertical.html
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::paintObject): Move contents to the right.
* rendering/RenderBox.cpp:
(WebCore::RenderBox::topLeftLocationOffset): Move the top-left corner to the right to prevent WebKit from cropping scrollWidth.
* rendering/RenderBox.h:
(WebCore::RenderBox::clientLeft): Increase clientLeft by the width of a scrollbar.
2012-07-18 Kent Tamura <tkent@chromium.org>
Form state restore: Classify form control sates by owners in internal and serialized representations
Source/WebCore/rendering/RenderBlock.cpp
View file @ 49710b19
......@@ -2967,8 +2967,11 @@ void RenderBlock::paintObject(PaintInfo& paintInfo, const LayoutPoint& paintOffs
// Adjust our painting position if we're inside a scrolled layer (e.g., an overflow:auto div).
LayoutPoint scrolledOffset = paintOffset;
if (hasOverflowClip())
if (hasOverflowClip()) {
scrolledOffset.move(-scrolledContentOffset());
if (style()->shouldPlaceBlockDirectionScrollbarOnLogicalLeft())
scrolledOffset.move(verticalScrollbarWidth(), 0);
}
// 2. paint contents
if (paintPhase != PaintPhaseSelfOutline) {
......
Source/WebCore/rendering/RenderBox.cpp
View file @ 49710b19
......@@ -3938,6 +3938,8 @@ LayoutSize RenderBox::topLeftLocationOffset() const
return locationOffset();
LayoutRect rect(frameRect());
if (containerBlock->style()->shouldPlaceBlockDirectionScrollbarOnLogicalLeft())
rect.move(containerBlock->verticalScrollbarWidth(), 0);
containerBlock->flipForWritingMode(rect); // FIXME: This is wrong if we are an absolutely positioned object enclosed by a relative-positioned inline.
return LayoutSize(rect.x(), rect.y());
}
......
Source/WebCore/rendering/RenderBox.h
View file @ 49710b19
......@@ -197,7 +197,7 @@ public:
// More IE extensions. clientWidth and clientHeight represent the interior of an object
// excluding border and scrollbar. clientLeft/Top are just the borderLeftWidth and borderTopWidth.
LayoutUnit clientLeft() const { return borderLeft(); }
LayoutUnit clientLeft() const { return borderLeft() + (style()->shouldPlaceBlockDirectionScrollbarOnLogicalLeft() ? verticalScrollbarWidth() : 0); }
LayoutUnit clientTop() const { return borderTop(); }
LayoutUnit clientWidth() const;
LayoutUnit clientHeight() const;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment