haikuwebkit/LayoutTests/css3/flexbox/flex-item-text-background-n...

21 lines
447 B
HTML
Raw Permalink Normal View History

Flex and grid items should be painted as inline-blocks https://bugs.webkit.org/show_bug.cgi?id=142266 Reviewed by Darin Adler. Source/WebCore: Based on Blink r157004 by <cbiesinger@chromium.org>. https://src.chromium.org/viewvc/blink?revision=157004&view=revision Both flexbox and grid specs define that the painting order of flex/grid items is the same as inline blocks. See http://dev.w3.org/csswg/css-flexbox/#painting and http://dev.w3.org/csswg/css-grid/#z-order. Extracted inline blocks painting code from InlineElementBox and moved to a helper method that will be reused for flexboxes and grids. Tests: css3/flexbox/flex-item-text-background-not-interleaved.html fast/css-grid-layout/grid-item-text-background-not-interleaved.html * rendering/InlineElementBox.cpp: (WebCore::InlineElementBox::paint): Move code to RenderElement::paintAsInlineBlock(). * rendering/RenderBlock.cpp: (WebCore::RenderBlock::paintChild): Add new argument to paint children as inline blocks. * rendering/RenderBlock.h: Define PaintType enmu and modify paintChild() signature to add the new argument. * rendering/RenderElement.cpp: (WebCore::paintPhase): Paint element in a phase. (WebCore::RenderElement::paintAsInlineBlock): Code extracted from InlineElementBox::paint(). * rendering/RenderElement.h: Add new method signature. * rendering/RenderFlexibleBox.cpp: (WebCore::RenderFlexibleBox::paintChildren): Call RenderBlock::paintChild() with the new argument. * rendering/RenderGrid.cpp: (WebCore::RenderGrid::paintChildren): Ditto. LayoutTests: * css3/flexbox/flex-item-text-background-not-interleaved-expected.html: Added. * css3/flexbox/flex-item-text-background-not-interleaved.html: Added. * fast/css-grid-layout/float-not-protruding-into-next-grid-item-expected.html: Add some vertical space to avoid issues with backgrounds. * fast/css-grid-layout/float-not-protruding-into-next-grid-item.html: Ditto. * fast/css-grid-layout/grid-item-text-background-not-interleaved-expected.html: Added. * fast/css-grid-layout/grid-item-text-background-not-interleaved.html: Added. Canonical link: https://commits.webkit.org/160844@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@181691 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-03-18 13:47:52 +00:00
<!DOCTYPE html>
<link href="resources/flexbox.css" rel="stylesheet">
<style>
.first {
width: 50px;
background: lime;
}
.second {
width: 50px;
background: cyan;
}
</style>
<p>This test checks that flex items text and background are not interleaved.</p>
<p>The test passes if you see "Item2" on top of "VeryLongItem1".</p>
<div class="flexbox">
<div class="first">VeryLongItem1</div>
<div class="second">Item2</div>
</div>