haikuwebkit/LayoutTests/fast/layoutformattingcontext/flex-box-simple-expected.html

15 lines
336 B
HTML
Raw Permalink Normal View History

[LFC][FFC] Add basic flex item sizing and positioning https://bugs.webkit.org/show_bug.cgi?id=216613 Reviewed by Antti Koivisto. Source/WebCore: This patch adds support for single line (no-wrap), row based flex item layout with default spacing. Test: fast/layoutformattingcontext/flex-box-simple.html * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * layout/FormattingContextGeometry.cpp: (WebCore::Layout::FormattingContext::Geometry::contentHeightForFormattingContextRoot const): * layout/Verification.cpp: (WebCore::Layout::outputMismatchingBlockBoxInformationIfNeeded): * layout/blockformatting/BlockFormattingContextGeometry.cpp: (WebCore::Layout::BlockFormattingContext::Geometry::inFlowNonReplacedHeightAndMargin): * layout/flexformatting/FlexFormattingContext.cpp: (WebCore::Layout::FlexFormattingContext::layoutInFlowContent): (WebCore::Layout::FlexFormattingContext::sizeAndPlaceFlexItems): (WebCore::Layout::FlexFormattingContext::computeIntrinsicWidthConstraintsForFlexItems): * layout/flexformatting/FlexFormattingContext.h: (WebCore::Layout::FlexFormattingContext::Geometry::Geometry): * layout/flexformatting/FlexFormattingContextGeometry.cpp: Added. (WebCore::Layout::FlexFormattingContext::Geometry::intrinsicWidthConstraints): * layout/flexformatting/FlexFormattingState.h: (WebCore::Layout::FlexFormattingState::lines const): Flex layout has the concept of lines where flex wrap may trigger multi-line layout. (WebCore::Layout::FlexFormattingState::addLine): LayoutTests: * fast/layoutformattingcontext/flex-box-simple-expected.html: Added. * fast/layoutformattingcontext/flex-box-simple.html: Added. Canonical link: https://commits.webkit.org/229433@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@267157 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2020-09-16 20:09:04 +00:00
<!DOCTYPE html>
<style>
body {
font-size: 20px;
font-family: ahem;
}
.container {
border: 10px solid blue;
width: 600px;
}
</style>
<div class=container>
<span style="background-color: red">flex items</span><span style="background-color: white;">flex items</span><span style="background-color: green">everywhere</span>
</div>