- Revision
- 140854
- Author
- t...@chromium.org
- Date
- 2013-01-25 11:51:57 -0800 (Fri, 25 Jan 2013)
Log Message
Re-layout child blocks when border/padding of the box-sizing:border-box parent is updated
https://bugs.webkit.org/show_bug.cgi?id=104997
Reviewed by Ojan Vafai.
Source/WebCore:
Original patch by Kent Tamura:
When padding or border is updated for a parent block with
box-sizing:border-box and width, the width of its child block was not
updated.
The change is to look at border width specifically, not all changes to the border style
since changes to border color should not trigger a relayout.
Tests: fast/css/box-sizing-border-box-dynamic-padding-border-update.html
fast/forms/border-color-relayout.html
fast/forms/text/text-padding-dynamic-change.html
* rendering/RenderBox.cpp:
(WebCore::borderWidthChanged): Helper method to compare border widths.
(WebCore::RenderBox::styleDidChange):
If box-sizing of the old style and/or the new style is border-box and
padding or border is changed, apply setChildNeedsLayout(true) for child
boxes.
LayoutTests:
border-color-relayout.html tests that we handle border color style changes properly.
* fast/css/box-sizing-border-box-dynamic-padding-border-update-expected.txt: Added.
* fast/css/box-sizing-border-box-dynamic-padding-border-update.html: Added.
* fast/forms/border-color-relayout-expected.html: Added.
* fast/forms/border-color-relayout.html: Added.
* fast/forms/text/text-padding-dynamic-change-expected.html: Added.
* fast/forms/text/text-padding-dynamic-change.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (140853 => 140854)
--- trunk/LayoutTests/ChangeLog 2013-01-25 19:46:13 UTC (rev 140853)
+++ trunk/LayoutTests/ChangeLog 2013-01-25 19:51:57 UTC (rev 140854)
@@ -1,3 +1,19 @@
+2013-01-25 Tony Chang <t...@chromium.org>
+
+ Re-layout child blocks when border/padding of the box-sizing:border-box parent is updated
+ https://bugs.webkit.org/show_bug.cgi?id=104997
+
+ Reviewed by Ojan Vafai.
+
+ border-color-relayout.html tests that we handle border color style changes properly.
+
+ * fast/css/box-sizing-border-box-dynamic-padding-border-update-expected.txt: Added.
+ * fast/css/box-sizing-border-box-dynamic-padding-border-update.html: Added.
+ * fast/forms/border-color-relayout-expected.html: Added.
+ * fast/forms/border-color-relayout.html: Added.
+ * fast/forms/text/text-padding-dynamic-change-expected.html: Added.
+ * fast/forms/text/text-padding-dynamic-change.html: Added.
+
2013-01-25 Arnaud Renevier <a.renev...@sisa.samsung.com>
Move WebGLErrorsToConsole page setting to window.internals.settings
Added: trunk/LayoutTests/fast/css/box-sizing-border-box-dynamic-padding-border-update-expected.txt (0 => 140854)
--- trunk/LayoutTests/fast/css/box-sizing-border-box-dynamic-padding-border-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/box-sizing-border-box-dynamic-padding-border-update-expected.txt 2013-01-25 19:51:57 UTC (rev 140854)
@@ -0,0 +1,8 @@
+Test if child blocks are correctly laid out when padding/border of the box-sizing:border-box parent is updated.
+
+The quick brown fox jumps over the lazy dog.
+PASS
+The quick brown fox jumps over the lazy dog.
+PASS
+The quick brown fox jumps over the lazy dog.
+PASS
Added: trunk/LayoutTests/fast/css/box-sizing-border-box-dynamic-padding-border-update.html (0 => 140854)
--- trunk/LayoutTests/fast/css/box-sizing-border-box-dynamic-padding-border-update.html (rev 0)
+++ trunk/LayoutTests/fast/css/box-sizing-border-box-dynamic-padding-border-update.html 2013-01-25 19:51:57 UTC (rev 140854)
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<body>
+<p>Test if child blocks are correctly laid out when padding/border of the box-sizing:border-box parent is updated.</p>
+
+<div id="target1" style="width:100px; box-sizing:border-box; border:0 solid;">
+<div data-expected-width="50">The quick brown fox jumps over the lazy dog.</div>
+</div>
+<div id="target2" style="width:100px; box-sizing:border-box;">
+<div data-expected-width="50">The quick brown fox jumps over the lazy dog.</div>
+</div>
+<div id="target3" style="width:100px; box-sizing:border-box;">
+<div data-expected-width="50">The quick brown fox jumps over the lazy dog.</div>
+</div>
+<script src=""
+<script>
+document.body.offsetLeft;
+document.getElementById('target1').style.borderLeftWidth = '50px';
+document.getElementById('target2').style.paddingLeft = '50px';
+document.getElementById('target3').setAttribute('style', 'width:50px; box-sizing:content-box; border-left:50px solid;');
+checkLayout('#target1');
+checkLayout('#target2');
+checkLayout('#target3');
+</script>
+</body>
Added: trunk/LayoutTests/fast/forms/border-color-relayout-expected.html (0 => 140854)
--- trunk/LayoutTests/fast/forms/border-color-relayout-expected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/border-color-relayout-expected.html 2013-01-25 19:51:57 UTC (rev 140854)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+input {
+ box-sizing: border-box;
+ border-color: #bbb;
+}
+</style>
+<script>
+window._onload_ = function() {
+ document.getElementById("input").focus();
+ document.getElementById("input").value = "PASS";
+}
+</script>
+</head>
+<body>
+ <p>You should see the word "PASS" in the input box.</p>
+ <input id="input" value="">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/border-color-relayout.html (0 => 140854)
--- trunk/LayoutTests/fast/forms/border-color-relayout.html (rev 0)
+++ trunk/LayoutTests/fast/forms/border-color-relayout.html 2013-01-25 19:51:57 UTC (rev 140854)
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+input {
+ box-sizing: border-box;
+ border-color: #dfdfdf;
+}
+input:focus {
+ border-color: #bbb;
+}
+</style>
+<script>
+window._onload_ = function() {
+ document.getElementById("input").focus();
+ document.getElementById("input").value = "PASS";
+}
+</script>
+</head>
+<body>
+ <p>You should see the word "PASS" in the input box.</p>
+ <input id="input" value="">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/text/text-padding-dynamic-change-expected.html (0 => 140854)
--- trunk/LayoutTests/fast/forms/text/text-padding-dynamic-change-expected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/text/text-padding-dynamic-change-expected.html 2013-01-25 19:51:57 UTC (rev 140854)
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<body>
+<input style="box-sizing:border-box; width:100px; text-align:right; padding-left:40px;" value="Hello world">
+<input style="box-sizing:border-box; width:100px; text-align:right; padding-left:40px;" placeholder="Hello world">
+<input style="box-sizing:border-box; width:100px; text-align:right; border-left-width:40px;" value="Hello world">
+<input style="box-sizing:border-box; width:100px; text-align:right; border-left-width:40px;" placeholder="Hello world">
+</body>
Added: trunk/LayoutTests/fast/forms/text/text-padding-dynamic-change.html (0 => 140854)
--- trunk/LayoutTests/fast/forms/text/text-padding-dynamic-change.html (rev 0)
+++ trunk/LayoutTests/fast/forms/text/text-padding-dynamic-change.html 2013-01-25 19:51:57 UTC (rev 140854)
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+<input id=text1 style="box-sizing:border-box; width:100px; text-align:right;" value="Hello world">
+<input id=text2 style="box-sizing:border-box; width:100px; text-align:right;" placeholder="Hello world">
+<input id=text3 style="box-sizing:border-box; width:100px; text-align:right;" value="Hello world">
+<input id=text4 style="box-sizing:border-box; width:100px; text-align:right;" placeholder="Hello world">
+<script>
+document.body.offsetLeft;
+document.getElementById('text1').style.paddingLeft = '40px';
+document.getElementById('text2').style.paddingLeft = '40px';
+document.getElementById('text3').style.borderLeftWidth = '40px';
+document.getElementById('text4').style.borderLeftWidth = '40px';
+</script>
+</body>
Modified: trunk/Source/WebCore/ChangeLog (140853 => 140854)
--- trunk/Source/WebCore/ChangeLog 2013-01-25 19:46:13 UTC (rev 140853)
+++ trunk/Source/WebCore/ChangeLog 2013-01-25 19:51:57 UTC (rev 140854)
@@ -1,3 +1,29 @@
+2013-01-25 Tony Chang <t...@chromium.org>
+
+ Re-layout child blocks when border/padding of the box-sizing:border-box parent is updated
+ https://bugs.webkit.org/show_bug.cgi?id=104997
+
+ Reviewed by Ojan Vafai.
+
+ Original patch by Kent Tamura:
+ When padding or border is updated for a parent block with
+ box-sizing:border-box and width, the width of its child block was not
+ updated.
+
+ The change is to look at border width specifically, not all changes to the border style
+ since changes to border color should not trigger a relayout.
+
+ Tests: fast/css/box-sizing-border-box-dynamic-padding-border-update.html
+ fast/forms/border-color-relayout.html
+ fast/forms/text/text-padding-dynamic-change.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::borderWidthChanged): Helper method to compare border widths.
+ (WebCore::RenderBox::styleDidChange):
+ If box-sizing of the old style and/or the new style is border-box and
+ padding or border is changed, apply setChildNeedsLayout(true) for child
+ boxes.
+
2013-01-25 Arnaud Renevier <a.renev...@sisa.samsung.com>
Move WebGLErrorsToConsole page setting to window.internals.settings
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (140853 => 140854)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2013-01-25 19:46:13 UTC (rev 140853)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2013-01-25 19:51:57 UTC (rev 140854)
@@ -232,6 +232,14 @@
RenderBoxModelObject::styleWillChange(diff, newStyle);
}
+static bool borderWidthChanged(const RenderStyle* oldStyle, const RenderStyle* newStyle)
+{
+ return oldStyle->borderLeftWidth() != newStyle->borderLeftWidth()
+ || oldStyle->borderTopWidth() != newStyle->borderTopWidth()
+ || oldStyle->borderRightWidth() != newStyle->borderRightWidth()
+ || oldStyle->borderBottomWidth() != newStyle->borderBottomWidth();
+}
+
void RenderBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
{
// Horizontal writing mode definition is updated in RenderBoxModelObject::updateFromStyle,
@@ -305,6 +313,13 @@
#if ENABLE(CSS_EXCLUSIONS)
updateExclusionShapeOutsideInfoAfterStyleChange(style()->shapeOutside(), oldStyle ? oldStyle->shapeOutside() : 0);
#endif
+
+ if (oldStyle && (newStyle->boxSizing() == BORDER_BOX || oldStyle->boxSizing() == BORDER_BOX) && diff == StyleDifferenceLayout
+ && (newStyle->paddingBox() != oldStyle->paddingBox() || borderWidthChanged(oldStyle, newStyle))) {
+ ASSERT(needsLayout());
+ for (RenderObject* child = firstChild(); child; child = child->nextSibling())
+ child->setChildNeedsLayout(true, MarkOnlyThis);
+ }
}
#if ENABLE(CSS_EXCLUSIONS)
