WebKit Bugzilla
Attachment 359133 Details for
Bug 193431
: [LFC] Use the containing block's padding box to position out-of-flow elements.
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-193431-20190114212704.patch (text/plain), 18.69 KB, created by
zalan
on 2019-01-14 21:27:19 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
zalan
Created:
2019-01-14 21:27:19 PST
Size:
18.69 KB
patch
obsolete
>Subversion Revision: 239927 >diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog >index 2870e6b8095f05a11adae1efb068f71a2f7dea95..6286e838f1912f3500b33541099a0b5a49723c89 100644 >--- a/Source/WebCore/ChangeLog >+++ b/Source/WebCore/ChangeLog >@@ -1,3 +1,37 @@ >+2019-01-14 Zalan Bujtas <zalan@apple.com> >+ >+ [LFC] Use the containing block's padding box to position out-of-flow elements. >+ https://bugs.webkit.org/show_bug.cgi?id=193431 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ If the element has 'position: absolute', the containing block is established by the nearest ancestor >+ with a 'position' of 'absolute', 'relative' or 'fixed', in the following way: >+ >+ 1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding >+ boxes of the first and the last inline boxes generated for that element. In CSS 2.2, if the inline element is split >+ across multiple lines, the containing block is undefined. >+ >+ 2. Otherwise, the containing block is formed by the padding edge of the ancestor. >+ >+ This patch covers #2. >+ >+ Test: fast/block/block-only/out-of-flow-with-containing-block-border-padding.html >+ >+ * layout/displaytree/DisplayBox.h: >+ (WebCore::Display::Box::width const): >+ (WebCore::Display::Box::height const): >+ (WebCore::Display::Box::contentBoxTop const): >+ (WebCore::Display::Box::contentBoxLeft const): >+ (WebCore::Display::Box::paddingBoxTop const): >+ (WebCore::Display::Box::paddingBoxLeft const): >+ (WebCore::Display::Box::paddingBoxBottom const): >+ (WebCore::Display::Box::paddingBoxRight const): >+ (WebCore::Display::Box::paddingBoxHeight const): >+ (WebCore::Display::Box::paddingBoxWidth const): >+ * page/FrameViewLayoutContext.cpp: >+ (WebCore::layoutUsingFormattingContext): >+ > 2019-01-14 Zan Dobersek <zdobersek@igalia.com> > > DOMCacheStorage: use-after-move in doSequentialMatch() >diff --git a/Source/WebCore/layout/FormattingContextGeometry.cpp b/Source/WebCore/layout/FormattingContextGeometry.cpp >index 6643c1470fa1aef0ae9957869095a75c2ea353ce..cc38f183d60a9a490dcc2c299ad184601ec29c84 100644 >--- a/Source/WebCore/layout/FormattingContextGeometry.cpp >+++ b/Source/WebCore/layout/FormattingContextGeometry.cpp >@@ -273,11 +273,12 @@ VerticalGeometry FormattingContext::Geometry::outOfFlowNonReplacedVerticalGeomet > auto& style = layoutBox.style(); > auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox); > auto& containingBlockDisplayBox = layoutState.displayBoxForLayoutBox(*layoutBox.containingBlock()); >- auto containingBlockHeight = containingBlockDisplayBox.height(); >- auto containingBlockWidth = containingBlockDisplayBox.width(); >+ auto containingBlockHeight = containingBlockDisplayBox.paddingBoxHeight(); >+ auto containingBlockWidth = containingBlockDisplayBox.paddingBoxWidth(); > > auto top = computedValueIfNotAuto(style.logicalTop(), containingBlockWidth); > auto bottom = computedValueIfNotAuto(style.logicalBottom(), containingBlockWidth); >+ auto isStaticallyPositioned = !top && !bottom; > auto height = usedHeight ? usedHeight.value() : computedHeightValue(layoutState, layoutBox, HeightType::Normal); > auto computedVerticalMargin = Geometry::computedVerticalMargin(layoutState, layoutBox); > UsedVerticalMargin::NonCollapsedValues usedVerticalMargin; >@@ -353,6 +354,14 @@ VerticalGeometry FormattingContext::Geometry::outOfFlowNonReplacedVerticalGeomet > ASSERT(bottom); > ASSERT(height); > >+ // For out-of-flow elements the containing block is formed by the padding edge of the ancestor. >+ // At this point the non-statically positioned value is in the coordinate system of the padding box. Let's convert it to border box coordinate system. >+ if (!isStaticallyPositioned) { >+ auto containingBlockPaddingVerticalEdge = containingBlockDisplayBox.paddingBoxTop(); >+ *top += containingBlockPaddingVerticalEdge; >+ *bottom += containingBlockPaddingVerticalEdge; >+ } >+ > LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Height][Margin] -> out-of-flow non-replaced -> top(" << *top << "px) bottom(" << *bottom << "px) height(" << *height << "px) margin(" << usedVerticalMargin.before << "px, " << usedVerticalMargin.after << "px) layoutBox(" << &layoutBox << ")"); > return { *top, *bottom, { contentHeight(), usedVerticalMargin } }; > } >@@ -390,11 +399,13 @@ HorizontalGeometry FormattingContext::Geometry::outOfFlowNonReplacedHorizontalGe > auto& style = layoutBox.style(); > auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox); > auto& containingBlock = *layoutBox.containingBlock(); >- auto containingBlockWidth = layoutState.displayBoxForLayoutBox(containingBlock).contentBoxWidth(); >+ auto& containingBlockDisplayBox = layoutState.displayBoxForLayoutBox(containingBlock); >+ auto containingBlockWidth = containingBlockDisplayBox.paddingBoxWidth(); > auto isLeftToRightDirection = containingBlock.style().isLeftToRightDirection(); > > auto left = computedValueIfNotAuto(style.logicalLeft(), containingBlockWidth); > auto right = computedValueIfNotAuto(style.logicalRight(), containingBlockWidth); >+ auto isStaticallyPositioned = !left && !right; > auto width = computedValueIfNotAuto(usedWidth ? Length { usedWidth.value(), Fixed } : style.logicalWidth(), containingBlockWidth); > auto computedHorizontalMargin = Geometry::computedHorizontalMargin(layoutState, layoutBox); > UsedHorizontalMargin usedHorizontalMargin; >@@ -496,6 +507,14 @@ HorizontalGeometry FormattingContext::Geometry::outOfFlowNonReplacedHorizontalGe > ASSERT(right); > ASSERT(width); > >+ // For out-of-flow elements the containing block is formed by the padding edge of the ancestor. >+ // At this point the non-statically positioned value is in the coordinate system of the padding box. Let's convert it to border box coordinate system. >+ if (!isStaticallyPositioned) { >+ auto containingBlockPaddingVerticalEdge = containingBlockDisplayBox.paddingBoxLeft(); >+ *left += containingBlockPaddingVerticalEdge; >+ *right += containingBlockPaddingVerticalEdge; >+ } >+ > LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Width][Margin] -> out-of-flow non-replaced -> left(" << *left << "px) right(" << *right << "px) width(" << *width << "px) margin(" << usedHorizontalMargin.start << "px, " << usedHorizontalMargin.end << "px) layoutBox(" << &layoutBox << ")"); > return { *left, *right, { contentWidth(), usedHorizontalMargin, computedHorizontalMargin } }; > } >@@ -517,11 +536,12 @@ VerticalGeometry FormattingContext::Geometry::outOfFlowReplacedVerticalGeometry( > auto& style = layoutBox.style(); > auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox); > auto& containingBlockDisplayBox = layoutState.displayBoxForLayoutBox(*layoutBox.containingBlock()); >- auto containingBlockHeight = containingBlockDisplayBox.height(); >- auto containingBlockWidth = containingBlockDisplayBox.width(); >+ auto containingBlockHeight = containingBlockDisplayBox.paddingBoxHeight(); >+ auto containingBlockWidth = containingBlockDisplayBox.paddingBoxWidth(); > > auto top = computedValueIfNotAuto(style.logicalTop(), containingBlockWidth); > auto bottom = computedValueIfNotAuto(style.logicalBottom(), containingBlockWidth); >+ auto isStaticallyPositioned = !top && !bottom; > auto height = inlineReplacedHeightAndMargin(layoutState, layoutBox, usedHeight).height; > auto computedVerticalMargin = Geometry::computedVerticalMargin(layoutState, layoutBox); > UsedVerticalMargin::NonCollapsedValues usedVerticalMargin; >@@ -564,6 +584,14 @@ VerticalGeometry FormattingContext::Geometry::outOfFlowReplacedVerticalGeometry( > if (boxHeight > containingBlockHeight) > bottom = containingBlockHeight - (*top + usedVerticalMargin.before + borderTop + paddingTop + height + paddingBottom + borderBottom + usedVerticalMargin.after); > >+ // For out-of-flow elements the containing block is formed by the padding edge of the ancestor. >+ // At this point the non-statically positioned value is in the coordinate system of the padding box. Let's convert it to border box coordinate system. >+ if (!isStaticallyPositioned) { >+ auto containingBlockPaddingVerticalEdge = containingBlockDisplayBox.paddingBoxTop(); >+ *top += containingBlockPaddingVerticalEdge; >+ *bottom += containingBlockPaddingVerticalEdge; >+ } >+ > LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Height][Margin] -> out-of-flow replaced -> top(" << *top << "px) bottom(" << *bottom << "px) height(" << height << "px) margin(" << usedVerticalMargin.before << "px, " << usedVerticalMargin.after << "px) layoutBox(" << &layoutBox << ")"); > return { *top, *bottom, { height, usedVerticalMargin } }; > } >@@ -589,11 +617,13 @@ HorizontalGeometry FormattingContext::Geometry::outOfFlowReplacedHorizontalGeome > auto& style = layoutBox.style(); > auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox); > auto& containingBlock = *layoutBox.containingBlock(); >- auto containingBlockWidth = layoutState.displayBoxForLayoutBox(containingBlock).contentBoxWidth(); >+ auto& containingBlockDisplayBox = layoutState.displayBoxForLayoutBox(containingBlock); >+ auto containingBlockWidth = containingBlockDisplayBox.paddingBoxWidth(); > auto isLeftToRightDirection = containingBlock.style().isLeftToRightDirection(); > > auto left = computedValueIfNotAuto(style.logicalLeft(), containingBlockWidth); > auto right = computedValueIfNotAuto(style.logicalRight(), containingBlockWidth); >+ auto isStaticallyPositioned = !left && !right; > auto computedHorizontalMargin = Geometry::computedHorizontalMargin(layoutState, layoutBox); > UsedHorizontalMargin usedHorizontalMargin; > auto width = inlineReplacedWidthAndMargin(layoutState, layoutBox, usedWidth).width; >@@ -657,6 +687,14 @@ HorizontalGeometry FormattingContext::Geometry::outOfFlowReplacedHorizontalGeome > ASSERT(left); > ASSERT(right); > >+ // For out-of-flow elements the containing block is formed by the padding edge of the ancestor. >+ // At this point the non-statically positioned value is in the coordinate system of the padding box. Let's convert it to border box coordinate system. >+ if (isStaticallyPositioned) { >+ auto containingBlockPaddingVerticalEdge = containingBlockDisplayBox.paddingBoxLeft(); >+ *left += containingBlockPaddingVerticalEdge; >+ *right += containingBlockPaddingVerticalEdge; >+ } >+ > LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Width][Margin] -> out-of-flow replaced -> left(" << *left << "px) right(" << *right << "px) width(" << width << "px) margin(" << usedHorizontalMargin.start << "px, " << usedHorizontalMargin.end << "px) layoutBox(" << &layoutBox << ")"); > return { *left, *right, { width, usedHorizontalMargin, computedHorizontalMargin } }; > } >diff --git a/Source/WebCore/layout/displaytree/DisplayBox.h b/Source/WebCore/layout/displaytree/DisplayBox.h >index 16782c44ebcb765869f1691174131572b17df065..1d45aa3dfb6909b84fdb39091ad4f621bf171c9a 100644 >--- a/Source/WebCore/layout/displaytree/DisplayBox.h >+++ b/Source/WebCore/layout/displaytree/DisplayBox.h >@@ -133,8 +133,8 @@ public: > LayoutPoint bottomRight() const { return { right(), bottom() }; } > > LayoutSize size() const { return { width(), height() }; } >- LayoutUnit width() const { return borderLeft() + paddingLeft().valueOr(0) + contentBoxWidth() + paddingRight().valueOr(0) + borderRight(); } >- LayoutUnit height() const { return borderTop() + paddingTop().valueOr(0) + contentBoxHeight() + paddingBottom().valueOr(0) + borderBottom(); } >+ LayoutUnit width() const { return borderLeft() + paddingBoxWidth() + borderRight(); } >+ LayoutUnit height() const { return borderTop() + paddingBoxHeight() + borderBottom(); } > Rect rect() const { return { top(), left(), width(), height() }; } > Rect rectWithMargin() const; > >@@ -160,13 +160,20 @@ public: > Optional<LayoutUnit> paddingBottom() const; > Optional<LayoutUnit> paddingRight() const; > >- LayoutUnit contentBoxTop() const { return borderTop() + paddingTop().valueOr(0); } >- LayoutUnit contentBoxLeft() const { return borderLeft() + paddingLeft().valueOr(0); } >+ LayoutUnit contentBoxTop() const { return paddingBoxTop() + paddingTop().valueOr(0); } >+ LayoutUnit contentBoxLeft() const { return paddingBoxLeft() + paddingLeft().valueOr(0); } > LayoutUnit contentBoxBottom() const { return contentBoxTop() + contentBoxHeight(); } > LayoutUnit contentBoxRight() const { return contentBoxLeft() + contentBoxWidth(); } > LayoutUnit contentBoxHeight() const; > LayoutUnit contentBoxWidth() const; > >+ LayoutUnit paddingBoxTop() const { return borderTop(); } >+ LayoutUnit paddingBoxLeft() const { return borderLeft(); } >+ LayoutUnit paddingBoxBottom() const { return paddingBoxTop() + paddingBoxHeight(); } >+ LayoutUnit paddingBoxRight() const { return paddingBoxLeft() + paddingBoxWidth(); } >+ LayoutUnit paddingBoxHeight() const { return paddingTop().valueOr(0) + contentBoxHeight() + paddingBottom().valueOr(0); } >+ LayoutUnit paddingBoxWidth() const { return paddingLeft().valueOr(0) + contentBoxWidth() + paddingRight().valueOr(0); } >+ > Rect marginBox() const; > Rect nonCollapsedMarginBox() const; > >diff --git a/Tools/ChangeLog b/Tools/ChangeLog >index 79e58efbd47bcbc9c6ecdccfbb9b6e53fb98aa6e..95548b277e81fdfcc1bd71d275364459392bb755 100644 >--- a/Tools/ChangeLog >+++ b/Tools/ChangeLog >@@ -1,3 +1,12 @@ >+2019-01-14 Zalan Bujtas <zalan@apple.com> >+ >+ [LFC] Use the containing block's padding box to position out-of-flow elements. >+ https://bugs.webkit.org/show_bug.cgi?id=193431 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * LayoutReloaded/misc/LFC-passing-tests.txt: >+ > 2019-01-14 Zalan Bujtas <zalan@apple.com> > > [LFC][BFC] Add basic box-sizing support. >diff --git a/Tools/LayoutReloaded/misc/LFC-passing-tests.txt b/Tools/LayoutReloaded/misc/LFC-passing-tests.txt >index 2826337d4dfbe7b9ce186b505f4fe01f66663c30..4ec9d7649aeef911eaccb6e33954043d38969f4f 100644 >--- a/Tools/LayoutReloaded/misc/LFC-passing-tests.txt >+++ b/Tools/LayoutReloaded/misc/LFC-passing-tests.txt >@@ -77,6 +77,7 @@ fast/block/block-only/relative-right.html > fast/block/block-only/relative-siblings.html > fast/block/block-only/relative-simple.html > fast/block/block-only/box-sizing-inflow-out-of-flow-simple.html >+fast/block/block-only/out-of-flow-with-containing-block-border-padding.html > fast/block/basic/002.html > fast/block/basic/003.html > fast/block/basic/006.html >diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog >index 739fefad9376014a18e972447a004f82048ab15c..2afe2bc8fbc28ef4cee36926f1b4cb6434aa0f78 100644 >--- a/LayoutTests/ChangeLog >+++ b/LayoutTests/ChangeLog >@@ -1,3 +1,13 @@ >+2019-01-14 Zalan Bujtas <zalan@apple.com> >+ >+ [LFC] Use the containing block's padding box to position out-of-flow elements. >+ https://bugs.webkit.org/show_bug.cgi?id=193431 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * fast/block/block-only/out-of-flow-with-containing-block-border-padding-expected.txt: Added. >+ * fast/block/block-only/out-of-flow-with-containing-block-border-padding.html: Added. >+ > 2019-01-14 Zalan Bujtas <zalan@apple.com> > > [LFC][BFC] Add basic box-sizing support. >diff --git a/LayoutTests/fast/block/block-only/out-of-flow-with-containing-block-border-padding-expected.txt b/LayoutTests/fast/block/block-only/out-of-flow-with-containing-block-border-padding-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..cf325a46cbc93696e7b4f359014560c630783ba0 >--- /dev/null >+++ b/LayoutTests/fast/block/block-only/out-of-flow-with-containing-block-border-padding-expected.txt >@@ -0,0 +1,33 @@ >+layer at (0,0) size 800x600 >+ RenderView at (0,0) size 800x600 >+layer at (0,0) size 800x600 >+ RenderBlock {HTML} at (0,0) size 800x600 >+ RenderBody {BODY} at (8,8) size 784x584 >+layer at (8,8) size 56x56 >+ RenderBlock (relative positioned) {DIV} at (0,0) size 56x56 [border: (3px solid #008000)] >+layer at (21,13) size 10x10 >+ RenderBlock (positioned) {DIV} at (13,5) size 10x10 [bgcolor=#0000FF] >+layer at (8,64) size 56x56 >+ RenderBlock (relative positioned) {DIV} at (0,56) size 56x56 [border: (3px solid #008000)] >+layer at (21,105) size 10x10 >+ RenderBlock (positioned) {DIV} at (13,41) size 10x10 [bgcolor=#0000FF] >+layer at (8,120) size 56x56 >+ RenderBlock (relative positioned) {DIV} at (0,112) size 56x56 [border: (3px solid #008000)] >+layer at (21,125) size 10x46 >+ RenderBlock (positioned) {DIV} at (13,5) size 10x46 [bgcolor=#0000FF] >+layer at (8,176) size 56x56 >+ RenderBlock (relative positioned) {DIV} at (0,168) size 56x56 [border: (3px solid #008000)] >+layer at (13,189) size 10x10 >+ RenderBlock (positioned) {DIV} at (5,13) size 10x10 [bgcolor=#0000FF] >+layer at (8,232) size 56x56 >+ RenderBlock (relative positioned) {DIV} at (0,224) size 56x56 [border: (3px solid #008000)] >+layer at (49,245) size 10x10 >+ RenderBlock (positioned) {DIV} at (41,13) size 10x10 [bgcolor=#0000FF] >+layer at (8,288) size 56x56 >+ RenderBlock (relative positioned) {DIV} at (0,280) size 56x56 [border: (3px solid #008000)] >+layer at (13,301) size 46x10 >+ RenderBlock (positioned) {DIV} at (5,13) size 46x10 [bgcolor=#0000FF] >+layer at (8,344) size 56x56 >+ RenderBlock (relative positioned) {DIV} at (0,336) size 56x56 [border: (3px solid #008000)] >+layer at (13,349) size 46x46 >+ RenderBlock (positioned) {DIV} at (5,5) size 46x46 [bgcolor=#0000FF] >diff --git a/LayoutTests/fast/block/block-only/out-of-flow-with-containing-block-border-padding.html b/LayoutTests/fast/block/block-only/out-of-flow-with-containing-block-border-padding.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f65db9352224c060a513c5b7a2d1410719940edd >--- /dev/null >+++ b/LayoutTests/fast/block/block-only/out-of-flow-with-containing-block-border-padding.html >@@ -0,0 +1,35 @@ >+<style> >+.container { >+ border: 3px solid green; >+ padding: 10px; >+ height: 30px; >+ width: 30px; >+ position: relative; >+} >+ >+div div { >+ background: blue; >+ position: absolute; >+} >+</style> >+<div class=container> >+ <div style="top: 2px; width: 10px; height: 10px"></div> >+</div> >+<div class=container> >+ <div style="bottom: 2px; width: 10px; height: 10px"></div> >+</div> >+<div class=container> >+ <div style="top: 2px; bottom: 2px; width: 10px;"></div> >+</div> >+<div class=container> >+ <div style="left: 2px; width: 10px; height: 10px"></div> >+</div> >+<div class=container> >+ <div style="right: 2px; width: 10px; height: 10px"></div> >+</div> >+<div class=container> >+ <div style="left: 2px; right: 2px; height: 10px;"></div> >+</div> >+<div class=container> >+ <div style="top: 2px; left: 2px; right: 2px; bottom: 2px;"></div> >+</div>
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 193431
: 359133