Changeset 136465 in webkit

Timestamp:

Dec 3, 2012 6:24:23 PM (11 years ago)

Author:

jchaffraix@webkit.org

Message:

Source/WebCore: [CSS Grid Layout] Support paddings and margins on grid items
​https://bugs.webkit.org/show_bug.cgi?id=103677

Reviewed by Tony Chang.

After bug 102968, we properly resolve grid items' width and height against the
grid areas' sizes. However we didn't check for paddings and margins, which is
what this change fixes..

Test: fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html

• rendering/RenderBox.cpp:

(WebCore::RenderBox::computeLogicalWidthInRegion):
Don't stretch the end margin to match the containing block's extent.
The fix is similar to what was done for flex-box in bug 65887.

• rendering/RenderBoxModelObject.cpp:

(WebCore::RenderBoxModelObject::computeStickyPositionConstraints):
Added a comment about not using containingBlockLogicalWidthForContent.

(WebCore::RenderBoxModelObject::computedCSSPaddingTop):
(WebCore::RenderBoxModelObject::computedCSSPaddingBottom):
(WebCore::RenderBoxModelObject::computedCSSPaddingLeft):
(WebCore::RenderBoxModelObject::computedCSSPaddingRight):
(WebCore::RenderBoxModelObject::computedCSSPaddingBefore):
(WebCore::RenderBoxModelObject::computedCSSPaddingAfter):
(WebCore::RenderBoxModelObject::computedCSSPaddingStart):
(WebCore::RenderBoxModelObject::computedCSSPaddingEnd):
Updated these functions to use containingBlockLogicalWidthForContent.

• rendering/RenderGrid.h:
• rendering/RenderObject.h:

(WebCore::RenderObject::isRenderGrid):
Added isRenderGrid.

LayoutTests: [CSS Grid Layout] Support percentage paddings and margins on grid items
​https://bugs.webkit.org/show_bug.cgi?id=103677

Reviewed by Tony Chang.

• resources/check-layout.js:

Extended check-layout to be able to query paddings and margins. Note that in order to compare,
the attribute with the returned value from getComputedStyle, we need to trim the unit ("px")
from the actual values. This trick also works in FireFox and Opera.

• fast/css-grid-layout/percent-padding-margin-resolution-grid-item-expected.txt: Added.
• fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-expected.txt (added)
• LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html (added)
• LayoutTests/resources/check-layout.js (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/RenderBox.cpp (modified) (1 diff)
• Source/WebCore/rendering/RenderBoxModelObject.cpp (modified) (9 diffs)
• Source/WebCore/rendering/RenderGrid.h (modified) (1 diff)
• Source/WebCore/rendering/RenderObject.h (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2012-12-03  Julien Chaffraix  <jchaffraix@webkit.org>
+
+        [CSS Grid Layout] Support percentage paddings and margins on grid items
+        https://bugs.webkit.org/show_bug.cgi?id=103677
+
+        Reviewed by Tony Chang.
+
+        * resources/check-layout.js:
+        Extended check-layout to be able to query paddings and margins. Note that in order to compare,
+        the attribute with the returned value from getComputedStyle, we need to trim the unit ("px")
+        from the actual values. This trick also works in FireFox and Opera.
+
+        * fast/css-grid-layout/percent-padding-margin-resolution-grid-item-expected.txt: Added.
+        * fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html: Added.
+
 2012-12-03  Roger Fong  <roger_fong@apple.com>
 

trunk/LayoutTests/resources/check-layout.js

@@ -78 +78 @@
             failures.push("Expected " + expectedDisplay + " for display, but got " + actualDisplay + ". ");
     }
+
+    var expectedPaddingTop = node.getAttribute && node.getAttribute("data-expected-padding-top");
+    if (expectedPaddingTop) {
+        var actualPaddingTop = getComputedStyle(node).paddingTop;
+        // Trim the unit "px" from the output.
+        actualPaddingTop = actualPaddingTop.substring(0, actualPaddingTop.length - 2);
+        if (actualPaddingTop != expectedPaddingTop)
+            failures.push("Expected " + expectedPaddingTop + " for padding-top, but got " + actualPaddingTop + ". ");
+    }
+
+    var expectedPaddingBottom = node.getAttribute && node.getAttribute("data-expected-padding-bottom");
+    if (expectedPaddingBottom) {
+        var actualPaddingBottom = getComputedStyle(node).paddingBottom;
+        // Trim the unit "px" from the output.
+        actualPaddingBottom = actualPaddingBottom.substring(0, actualPaddingBottom.length - 2);
+        if (actualPaddingBottom != expectedPaddingBottom)
+            failures.push("Expected " + expectedPaddingBottom + " for padding-bottom, but got " + actualPaddingBottom + ". ");
+    }
+
+    var expectedPaddingLeft = node.getAttribute && node.getAttribute("data-expected-padding-left");
+    if (expectedPaddingLeft) {
+        var actualPaddingLeft = getComputedStyle(node).paddingLeft;
+        // Trim the unit "px" from the output.
+        actualPaddingLeft = actualPaddingLeft.substring(0, actualPaddingLeft.length - 2);
+        if (actualPaddingLeft != expectedPaddingLeft)
+            failures.push("Expected " + expectedPaddingLeft + " for padding-left, but got " + actualPaddingLeft + ". ");
+    }
+
+    var expectedPaddingRight = node.getAttribute && node.getAttribute("data-expected-padding-right");
+    if (expectedPaddingRight) {
+        var actualPaddingRight = getComputedStyle(node).paddingRight;
+        // Trim the unit "px" from the output.
+        actualPaddingRight = actualPaddingRight.substring(0, actualPaddingRight.length - 2);
+        if (actualPaddingRight != expectedPaddingRight)
+            failures.push("Expected " + expectedPaddingRight + " for padding-right, but got " + actualPaddingRight + ". ");
+    }
+
+    var expectedMarginTop = node.getAttribute && node.getAttribute("data-expected-margin-top");
+    if (expectedMarginTop) {
+        var actualMarginTop = getComputedStyle(node).marginTop;
+        // Trim the unit "px" from the output.
+        actualMarginTop = actualMarginTop.substring(0, actualMarginTop.length - 2);
+        if (actualMarginTop != expectedMarginTop)
+            failures.push("Expected " + expectedMarginTop + " for margin-top, but got " + actualMarginTop + ". ");
+    }
+
+    var expectedMarginBottom = node.getAttribute && node.getAttribute("data-expected-margin-bottom");
+    if (expectedMarginBottom) {
+        var actualMarginBottom = getComputedStyle(node).marginBottom;
+        // Trim the unit "px" from the output.
+        actualMarginBottom = actualMarginBottom.substring(0, actualMarginBottom.length - 2);
+        if (actualMarginBottom != expectedMarginBottom)
+            failures.push("Expected " + expectedMarginBottom + " for margin-bottom, but got " + actualMarginBottom + ". ");
+    }
+
+    var expectedMarginLeft = node.getAttribute && node.getAttribute("data-expected-margin-left");
+    if (expectedMarginLeft) {
+        var actualMarginLeft = getComputedStyle(node).marginLeft;
+        // Trim the unit "px" from the output.
+        actualMarginLeft = actualMarginLeft.substring(0, actualMarginLeft.length - 2);
+        if (actualMarginLeft != expectedMarginLeft)
+            failures.push("Expected " + expectedMarginLeft + " for margin-left, but got " + actualMarginLeft + ". ");
+    }
+
+    var expectedMarginRight = node.getAttribute && node.getAttribute("data-expected-margin-right");
+    if (expectedMarginRight) {
+        var actualMarginRight = getComputedStyle(node).marginRight;
+        // Trim the unit "px" from the output.
+        actualMarginRight = actualMarginRight.substring(0, actualMarginRight.length - 2);
+        if (actualMarginRight != expectedMarginRight)
+            failures.push("Expected " + expectedMarginRight + " for margin-right, but got " + actualMarginRight + ". ");
+    }
 }
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-12-03  Julien Chaffraix  <jchaffraix@webkit.org>
+
+        [CSS Grid Layout] Support paddings and margins on grid items
+        https://bugs.webkit.org/show_bug.cgi?id=103677
+
+        Reviewed by Tony Chang.
+
+        After bug 102968, we properly resolve grid items' width and height against the
+        grid areas' sizes. However we didn't check for paddings and margins, which is
+        what this change fixes..
+
+        Test: fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::computeLogicalWidthInRegion):
+        Don't stretch the end margin to match the containing block's extent.
+        The fix is similar to what was done for flex-box in bug 65887.
+
+        * rendering/RenderBoxModelObject.cpp:
+        (WebCore::RenderBoxModelObject::computeStickyPositionConstraints):
+        Added a comment about not using containingBlockLogicalWidthForContent.
+
+        (WebCore::RenderBoxModelObject::computedCSSPaddingTop):
+        (WebCore::RenderBoxModelObject::computedCSSPaddingBottom):
+        (WebCore::RenderBoxModelObject::computedCSSPaddingLeft):
+        (WebCore::RenderBoxModelObject::computedCSSPaddingRight):
+        (WebCore::RenderBoxModelObject::computedCSSPaddingBefore):
+        (WebCore::RenderBoxModelObject::computedCSSPaddingAfter):
+        (WebCore::RenderBoxModelObject::computedCSSPaddingStart):
+        (WebCore::RenderBoxModelObject::computedCSSPaddingEnd):
+        Updated these functions to use containingBlockLogicalWidthForContent.
+
+        * rendering/RenderGrid.h:
+        * rendering/RenderObject.h:
+        (WebCore::RenderObject::isRenderGrid):
+        Added isRenderGrid.
+
 2012-12-03  Scott Violet  <sky@chromium.org>
 

trunk/Source/WebCore/rendering/RenderBox.cpp

@@ -1830 +1830 @@
     
     if (!hasPerpendicularContainingBlock && containerLogicalWidth && containerLogicalWidth != (computedValues.m_extent + computedValues.m_margins.m_start + computedValues.m_margins.m_end)
-            && !isFloating() && !isInline() && !cb->isFlexibleBoxIncludingDeprecated()) {
+        && !isFloating() && !isInline() && !cb->isFlexibleBoxIncludingDeprecated() && !cb->isRenderGrid()) {
         LayoutUnit newMargin = containerLogicalWidth - computedValues.m_extent - cb->marginStartForChild(this);
         bool hasInvertedDirection = cb->style()->isLeftToRightDirection() != style()->isLeftToRightDirection();

trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp

@@ -462 +462 @@
     LayoutRect containerContentRect = containingBlock->contentBoxRect();
 
+    // Sticky positioned element ignore any override logical width on the containing block (as they don't call
+    // containingBlockLogicalWidthForContent). It's unclear whether this is totally fine.
     LayoutUnit minLeftMargin = minimumValueForLength(style()->marginLeft(), containingBlock->availableLogicalWidth(), view());
     LayoutUnit minTopMargin = minimumValueForLength(style()->marginTop(), containingBlock->availableLogicalWidth(), view());
@@ -556 +558 @@
     Length padding = style()->paddingTop();
     if (padding.isPercent())
-        w = containingBlock()->availableLogicalWidth();
+        w = containingBlockLogicalWidthForContent();
     else if (padding.isViewportPercentage())
         renderView = view();
@@ -568 +570 @@
     Length padding = style()->paddingBottom();
     if (padding.isPercent())
-        w = containingBlock()->availableLogicalWidth();
+        w = containingBlockLogicalWidthForContent();
     else if (padding.isViewportPercentage())
         renderView = view();
@@ -580 +582 @@
     Length padding = style()->paddingLeft();
     if (padding.isPercent())
-        w = containingBlock()->availableLogicalWidth();
+        w = containingBlockLogicalWidthForContent();
     else if (padding.isViewportPercentage())
         renderView = view();
@@ -592 +594 @@
     Length padding = style()->paddingRight();
     if (padding.isPercent())
-        w = containingBlock()->availableLogicalWidth();
+        w = containingBlockLogicalWidthForContent();
     else if (padding.isViewportPercentage())
         renderView = view();
@@ -604 +606 @@
     Length padding = style()->paddingBefore();
     if (padding.isPercent())
-        w = containingBlock()->availableLogicalWidth();
+        w = containingBlockLogicalWidthForContent();
     else if (padding.isViewportPercentage())
         renderView = view();
@@ -616 +618 @@
     Length padding = style()->paddingAfter();
     if (padding.isPercent())
-        w = containingBlock()->availableLogicalWidth();
+        w = containingBlockLogicalWidthForContent();
     else if (padding.isViewportPercentage())
         renderView = view();
@@ -628 +630 @@
     Length padding = style()->paddingStart();
     if (padding.isPercent())
-        w = containingBlock()->availableLogicalWidth();
+        w = containingBlockLogicalWidthForContent();
     else if (padding.isViewportPercentage())
         renderView = view();
@@ -640 +642 @@
     Length padding = style()->paddingEnd();
     if (padding.isPercent())
-        w = containingBlock()->availableLogicalWidth();
+        w = containingBlockLogicalWidthForContent();
     else if (padding.isViewportPercentage())
         renderView = view();

trunk/Source/WebCore/rendering/RenderGrid.h

@@ -45 +45 @@
 
 private:
+    virtual bool isRenderGrid() const OVERRIDE { return true; }
+
     class GridTrack;
     enum TrackSizingDirection { ForColumns, ForRows };

trunk/Source/WebCore/rendering/RenderObject.h

@@ -396 +396 @@
     virtual bool isRenderFullScreenPlaceholder() const { return false; }
 #endif
+
+    virtual bool isRenderGrid() const { return false; }
 
     virtual bool isRenderFlowThread() const { return false; }