haikuwebkit/LayoutTests/fast/inline/out-of-flow-with-static-pos...

45 lines
1.2 KiB
HTML
Raw Permalink Normal View History

[LFC][IFC] Add support for out-of-flow box static positioning https://bugs.webkit.org/show_bug.cgi?id=229103 Reviewed by Antti Koivisto. Source/WebCore: This patch is in preparation for enabling positioned content for IFC handling. In this patch we compute the static position for out-of-flow content inside the inline formatting context. As per spec, the static position of an out-of-flow box is computed as if the position was set to static. However it does not mean that the out-of-flow box should be involved in the inline layout process. Instead we figure out this static position after the inline layout by looking at the previous sibling (or parent) box's geometry and place the out-of-flow box at the logical right position. * layout/formattingContexts/inline/InlineFormattingContext.cpp: (WebCore::Layout::InlineFormattingContext::layoutInFlowContent): (WebCore::Layout::InlineFormattingContext::lineLayoutForIntergration): (WebCore::Layout::InlineFormattingContext::computeStaticPositionForOutOfFlowContent): (WebCore::Layout::InlineFormattingContext::computedIntrinsicWidthConstraints): (WebCore::Layout::InlineFormattingContext::collectContentIfNeeded): (WebCore::Layout::InlineFormattingContext::collectInlineContentIfNeeded): Deleted. * layout/formattingContexts/inline/InlineFormattingContext.h: LayoutTests: * fast/inline/out-of-flow-with-static-position-in-ifc-expected.html: Added. * fast/inline/out-of-flow-with-static-position-in-ifc.html: Added. Canonical link: https://commits.webkit.org/240814@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@281424 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-08-23 00:03:10 +00:00
<style>
body {
margin: 0px;
font-family: Ahem;
}
div {
line-height: 40px;
}
img {
position: absolute;
width: 10px;
height: 10px;
background-color: green;
}
</style>
<!-- out-of-flow boxes with static positioning in IFC -->
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div><span></span>text</div>
<div><span><span></span></span>text</div>
<div><span>text</span>text</div>
<div><span>text</span>text</div>
<div><br></div>
<div><br>text</div>
<div><br><br></div>
<div>text<br></div>
<div>text<br></div>
<img style="left: 0px; top: 0px;">
<img style="left: 0px; top: 40px;">
<img style="left: 64px; top: 80px;">
<img style="left: 0px; top: 120px;"><img style="left: 64px; top: 120px;">
<img style="left: 0px; top: 160px;"><img style="left: 64px; top: 160px;">
<img style="left: 0px; top: 200px;"><img style="left: 64px; top: 200px;">
<img style="left: 64px; top: 240px;"><img style="left: 128px; top: 240px;">
<img style="left: 64px; top: 280px;"><img style="left: 128px; top: 280px;">
<img style="left: 0px; top: 360px;">
<img style="left: 64px; top: 400px;">
<img style="left: 0px; top: 520px;">
<img style="left: 0px; top: 560px;">
<img style="left: 0px; top: 600px;">