Source/WebCore/ChangeLog

 12012-10-30 Bem Jones-Bey <bjonesbe@adobe.com>
 2
 3 [CSS Exclusions] shape-outside on floats for rectangle shapes height/width
 4 https://bugs.webkit.org/show_bug.cgi?id=100398
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Implement shape outside for floats changing only the height and width
 9 as a simple starting point.
 10
 11 This implementation changes floats to use the bounding box of the
 12 shape outside instead of the margin box for layout. The content box of
 13 the float is unchanged. This patch does not support positioning the
 14 shape outside box, so the x and y parameters are currently ignored in
 15 the specified shape. This will be fixed in a patch for bug 100399.
 16
 17 Tests: fast/exclusions/shape-outside-floats/shape-outside-floats-margin-is-ignored.html
 18 fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-larger.html
 19 fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html
 20 fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-smaller.html
 21 fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-percentage.html
 22 fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-vertical.html
 23
 24 * CMakeLists.txt:
 25 * GNUmakefile.list.am:
 26 * WebCore.gypi:
 27 * WebCore.vcproj/WebCore.vcproj:
 28 * WebCore.xcodeproj/project.pbxproj:
 29 * rendering/ExclusionShapeOutsideInfo.cpp: Added.
 30 (WebCore):
 31 (WebCore::exclusionShapeOutsideInfoMap):
 32 (WebCore::ExclusionShapeOutsideInfo::ExclusionShapeOutsideInfo):
 33 (WebCore::ExclusionShapeOutsideInfo::~ExclusionShapeOutsideInfo):
 34 (WebCore::ExclusionShapeOutsideInfo::ensureExclusionShapeOutsideInfoForRenderBox):
 35 (WebCore::ExclusionShapeOutsideInfo::exclusionShapeOutsideInfoForRenderBox):
 36 (WebCore::ExclusionShapeOutsideInfo::isExclusionShapeOutsideInfoEnabledForRenderBox):
 37 (WebCore::ExclusionShapeOutsideInfo::removeExclusionShapeOutsideInfoForRenderBox):
 38 (WebCore::ExclusionShapeOutsideInfo::computeShapeSize):
 39 * rendering/ExclusionShapeOutsideInfo.h: Added.
 40 (WebCore):
 41 (ExclusionShapeOutsideInfo):
 42 (WebCore::ExclusionShapeOutsideInfo::create):
 43 (WebCore::ExclusionShapeOutsideInfo::shapeLogicalLeft):
 44 (WebCore::ExclusionShapeOutsideInfo::shapeLogicalRight):
 45 (WebCore::ExclusionShapeOutsideInfo::shapeLogicalTop):
 46 (WebCore::ExclusionShapeOutsideInfo::shapeLogicalBottom):
 47 (WebCore::ExclusionShapeOutsideInfo::shapeLogicalWidth):
 48 (WebCore::ExclusionShapeOutsideInfo::shapeLogicalHeight):
 49 (WebCore::ExclusionShapeOutsideInfo::dirtyShapeSize):
 50 * rendering/RenderBlock.cpp:
 51 (WebCore::RenderBlock::computeExclusionShapeSize):
 52 (WebCore::RenderBlock::insertFloatingObject):
 53 (WebCore::RenderBlock::positionNewFloats):
 54 * rendering/RenderBox.cpp:
 55 (WebCore::RenderBox::willBeDestroyed):
 56 (WebCore::RenderBox::styleDidChange):
 57 (WebCore):
 58 (WebCore::RenderBox::updateExclusionShapeOutsideInfoAfterStyleChange):
 59 * rendering/RenderBox.h:
 60 (RenderBox):
 61 (WebCore::RenderBox::exclusionShapeOutsideInfo):
 62
1632012-10-30 Rob Buis <rbuis@rim.com>
264
365 [BlackBerry] Remove CookieDatabaseBackingStore::upgradeTableIfNeeded

Source/WebCore/CMakeLists.txt

@@SET(WebCore_SOURCES
20582058 rendering/ExclusionRectangle.cpp
20592059 rendering/ExclusionShape.cpp
20602060 rendering/ExclusionShapeInsideInfo.cpp
 2061 rendering/ExclusionShapeOutsideInfo.cpp
20612062 rendering/FilterEffectRenderer.cpp
20622063 rendering/FixedTableLayout.cpp
20632064 rendering/FlowThreadController.cpp

Source/WebCore/GNUmakefile.list.am

@@webcore_sources += \
49734973 Source/WebCore/rendering/ExclusionShape.h \
49744974 Source/WebCore/rendering/ExclusionShapeInsideInfo.cpp \
49754975 Source/WebCore/rendering/ExclusionShapeInsideInfo.h \
 4976 Source/WebCore/rendering/ExclusionShapeOutsideInfo.cpp \
 4977 Source/WebCore/rendering/ExclusionShapeOutsideInfo.h \
49764978 Source/WebCore/rendering/FilterEffectRenderer.cpp \
49774979 Source/WebCore/rendering/FilterEffectRenderer.h \
49784980 Source/WebCore/rendering/FixedTableLayout.cpp \

Source/WebCore/Target.pri

@@SOURCES += \
11171117 rendering/ExclusionRectangle.cpp \
11181118 rendering/ExclusionShape.cpp \
11191119 rendering/ExclusionShapeInsideInfo.cpp \
 1120 rendering/ExclusionShapeOutsideInfo.cpp \
11201121 rendering/FilterEffectRenderer.cpp \
11211122 rendering/FixedTableLayout.cpp \
11221123 rendering/FlowThreadController.cpp \

@@HEADERS += \
23232324 rendering/ExclusionRectangle.h \
23242325 rendering/ExclusionShape.h \
23252326 rendering/ExclusionShapeInsideInfo.h \
 2327 rendering/ExclusionShapeOutsideInfo.h \
23262328 rendering/FilterEffectRenderer.h \
23272329 rendering/FixedTableLayout.h \
23282330 rendering/HitTestingTransformState.h \

Source/WebCore/WebCore.gypi

33223322 'rendering/ExclusionShape.h',
33233323 'rendering/ExclusionShapeInsideInfo.cpp',
33243324 'rendering/ExclusionShapeInsideInfo.h',
 3325 'rendering/ExclusionShapeOutsideInfo.cpp',
 3326 'rendering/ExclusionShapeOutsideInfo.h',
33253327 'rendering/FilterEffectRenderer.cpp',
33263328 'rendering/FilterEffectRenderer.h',
33273329 'rendering/FixedTableLayout.cpp',

Source/WebCore/WebCore.vcproj/WebCore.vcproj

3853538535 >
3853638536 </File>
3853738537 <File
 38538 RelativePath="..\rendering\ExclusionShapeOutsideInfo.cpp"
 38539 >
 38540 </File>
 38541 <File
 38542 RelativePath="..\rendering\ExclusionShapeOutsideInfo.h"
 38543 >
 38544 </File>
 38545 <File
3853838546 RelativePath="..\rendering\FilterEffectRenderer.cpp"
3853938547 >
3854038548 <FileConfiguration

Source/WebCore/WebCore.xcodeproj/project.pbxproj

37433743 98CE432A129E00E5005821DC /* LinkLoader.h in Headers */ = {isa = PBXBuildFile; fileRef = 98CE4329129E00E5005821DC /* LinkLoader.h */; };
37443744 98EB1F951313FE0500D0E1EA /* NotImplemented.h in Headers */ = {isa = PBXBuildFile; fileRef = 98EB1F941313FE0500D0E1EA /* NotImplemented.h */; settings = {ATTRIBUTES = (Private, ); }; };
37453745 9A1B6F97158869C80011A8C4 /* JSDOMStringListCustom.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 9A1B6F96158869C80011A8C4 /* JSDOMStringListCustom.cpp */; };
 3746 9A9CEF8D163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 9A9CEF8B163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.cpp */; };
 3747 9A9CEF8E163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.h in Headers */ = {isa = PBXBuildFile; fileRef = 9A9CEF8C163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.h */; settings = {ATTRIBUTES = (Private, ); }; };
37463748 9B0FB191140DB5790022588F /* HTTPValidation.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 9B0FB18F140DB5790022588F /* HTTPValidation.cpp */; };
37473749 9B0FB192140DB5790022588F /* HTTPValidation.h in Headers */ = {isa = PBXBuildFile; fileRef = 9B0FB190140DB5790022588F /* HTTPValidation.h */; };
37483750 9B24DE8E15194B9500C59C27 /* HTMLBDIElement.h in Headers */ = {isa = PBXBuildFile; fileRef = 9B24DE8C15194B9500C59C27 /* HTMLBDIElement.h */; };

1101211014 98CE4329129E00E5005821DC /* LinkLoader.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = LinkLoader.h; sourceTree = "<group>"; };
1101311015 98EB1F941313FE0500D0E1EA /* NotImplemented.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = NotImplemented.h; sourceTree = "<group>"; };
1101411016 9A1B6F96158869C80011A8C4 /* JSDOMStringListCustom.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSDOMStringListCustom.cpp; sourceTree = "<group>"; };
 11017 9A9CEF8B163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = ExclusionShapeOutsideInfo.cpp; sourceTree = "<group>"; };
 11018 9A9CEF8C163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ExclusionShapeOutsideInfo.h; sourceTree = "<group>"; };
1101511019 9B0FB18F140DB5790022588F /* HTTPValidation.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = HTTPValidation.cpp; sourceTree = "<group>"; };
1101611020 9B0FB190140DB5790022588F /* HTTPValidation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = HTTPValidation.h; sourceTree = "<group>"; };
1101711021 9B24DE8C15194B9500C59C27 /* HTMLBDIElement.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = HTMLBDIElement.h; sourceTree = "<group>"; };

2145921463 6E8798B915F81E4A00BFE4AA /* ExclusionShape.h */,
2146021464 FD748ABD15BF74ED0059CF0D /* ExclusionShapeInsideInfo.cpp */,
2146121465 FD748ABE15BF74ED0059CF0D /* ExclusionShapeInsideInfo.h */,
 21466 9A9CEF8B163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.cpp */,
 21467 9A9CEF8C163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.h */,
2146221468 31313F631443B35E006E2A90 /* FilterEffectRenderer.cpp */,
2146321469 31313F641443B35E006E2A90 /* FilterEffectRenderer.h */,
2146421470 A8CFF0480A154F09000A4234 /* FixedTableLayout.cpp */,

2239022396 97BC69DB1505F076001B74AC /* AbstractDatabase.h in Headers */,
2239122397 41E1B1D10FF5986900576B3B /* AbstractWorker.h in Headers */,
2239222398 29A8122E0FBB9C1D00510293 /* AccessibilityARIAGridCell.h in Headers */,
 22399 9A9CEF8E163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.h in Headers */,
2239322400 29A812330FBB9C1D00510293 /* AccessibilityARIAGridRow.h in Headers */,
2239422401 29A8123B0FBB9C1D00510293 /* AccessibilityImageMapLink.h in Headers */,
2239522402 29A8122C0FBB9C1D00510293 /* AccessibilityList.h in Headers */,

2878828795 5093334F163B0E4300099A60 /* CustomFilterParameterList.cpp in Sources */,
2878928796 1AA21250163F0DA80000E63F /* AtomicStringCF.cpp in Sources */,
2879028797 50D32857163B313F0016111E /* ValidatedCustomFilterOperation.cpp in Sources */,
 28798 9A9CEF8D163B3EA100DE7EFE /* ExclusionShapeOutsideInfo.cpp in Sources */,
2879128799 );
2879228800 runOnlyForDeploymentPostprocessing = 0;
2879328801 };

Source/WebCore/rendering/ExclusionShapeOutsideInfo.cpp

 1/*
 2 * Copyright (C) 2012 Adobe Systems Incorporated. All rights reserved.
 3 *
 4 * Redistribution and use in source and binary forms, with or without
 5 * modification, are permitted provided that the following conditions
 6 * are met:
 7 *
 8 * 1. Redistributions of source code must retain the above
 9 * copyright notice, this list of conditions and the following
 10 * disclaimer.
 11 * 2. Redistributions in binary form must reproduce the above
 12 * copyright notice, this list of conditions and the following
 13 * disclaimer in the documentation and/or other materials
 14 * provided with the distribution.
 15 *
 16 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER “AS IS” AND ANY
 17 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 18 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 19 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
 20 * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
 21 * OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 22 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 23 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 24 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
 25 * TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 26 * THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
 27 * SUCH DAMAGE.
 28 */
 29
 30#include "config.h"
 31#include "ExclusionShapeOutsideInfo.h"
 32
 33#if ENABLE(CSS_EXCLUSIONS)
 34
 35#include "NotImplemented.h"
 36#include "RenderBox.h"
 37#include <wtf/HashMap.h>
 38#include <wtf/OwnPtr.h>
 39
 40namespace WebCore {
 41
 42typedef HashMap<const RenderBox*, OwnPtr<ExclusionShapeOutsideInfo> > ExclusionShapeOutsideInfoMap;
 43
 44static ExclusionShapeOutsideInfoMap& exclusionShapeOutsideInfoMap()
 45{
 46 DEFINE_STATIC_LOCAL(ExclusionShapeOutsideInfoMap, staticExclusionShapeOutsideInfoMap, ());
 47 return staticExclusionShapeOutsideInfoMap;
 48}
 49
 50ExclusionShapeOutsideInfo::ExclusionShapeOutsideInfo(RenderBox* box)
 51 : m_box(box),
 52 m_logicalWidth(0),
 53 m_logicalHeight(0)
 54{
 55}
 56
 57ExclusionShapeOutsideInfo::~ExclusionShapeOutsideInfo()
 58{
 59}
 60
 61ExclusionShapeOutsideInfo* ExclusionShapeOutsideInfo::ensureExclusionShapeOutsideInfoForRenderBox(RenderBox* box)
 62{
 63 ExclusionShapeOutsideInfoMap& infoMap = exclusionShapeOutsideInfoMap();
 64 if (infoMap.contains(box))
 65 return infoMap.get(box);
 66
 67 ExclusionShapeOutsideInfoMap::AddResult result = infoMap.add(box, create(box));
 68 return result.iterator->value.get();
 69}
 70
 71ExclusionShapeOutsideInfo* ExclusionShapeOutsideInfo::exclusionShapeOutsideInfoForRenderBox(const RenderBox* box)
 72{
 73 ASSERT(box->style()->shapeOutside());
 74 return exclusionShapeOutsideInfoMap().get(box);
 75}
 76
 77bool ExclusionShapeOutsideInfo::isExclusionShapeOutsideInfoEnabledForRenderBox(const RenderBox* box)
 78{
 79 // FIXME enable shape outside for non-rectangular shapes!
 80 BasicShape* shape = box->style()->shapeOutside();
 81 return shape && (shape->type() == BasicShape::BASIC_SHAPE_RECTANGLE);
 82}
 83
 84void ExclusionShapeOutsideInfo::removeExclusionShapeOutsideInfoForRenderBox(const RenderBox* box)
 85{
 86 if (!box->style() || !box->style()->shapeOutside())
 87 return;
 88 exclusionShapeOutsideInfoMap().remove(box);
 89}
 90
 91void ExclusionShapeOutsideInfo::ensureComputedShape()
 92{
 93 if (m_computedShape)
 94 return;
 95
 96 BasicShape* basicShape = m_box->style()->shapeOutside();
 97 ASSERT(basicShape);
 98
 99 m_computedShape = ExclusionShape::createExclusionShape(basicShape, m_logicalWidth, m_logicalHeight, m_box->style()->writingMode());
 100}
 101
 102}
 103#endif

Source/WebCore/rendering/ExclusionShapeOutsideInfo.h

 1/*
 2 * Copyright (C) 2012 Adobe Systems Incorporated. All rights reserved.
 3 *
 4 * Redistribution and use in source and binary forms, with or without
 5 * modification, are permitted provided that the following conditions
 6 * are met:
 7 *
 8 * 1. Redistributions of source code must retain the above
 9 * copyright notice, this list of conditions and the following
 10 * disclaimer.
 11 * 2. Redistributions in binary form must reproduce the above
 12 * copyright notice, this list of conditions and the following
 13 * disclaimer in the documentation and/or other materials
 14 * provided with the distribution.
 15 *
 16 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER “AS IS” AND ANY
 17 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 18 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 19 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
 20 * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
 21 * OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 22 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 23 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 24 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
 25 * TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 26 * THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
 27 * SUCH DAMAGE.
 28 */
 29
 30#ifndef ExclusionShapeOutsideInfo_h
 31#define ExclusionShapeOutsideInfo_h
 32
 33#if ENABLE(CSS_EXCLUSIONS)
 34
 35#include "ExclusionShape.h"
 36#include "FloatRect.h"
 37#include "LayoutTypesInlineMethods.h"
 38#include <wtf/OwnPtr.h>
 39#include <wtf/PassOwnPtr.h>
 40#include <wtf/Vector.h>
 41
 42namespace WebCore {
 43
 44class RenderBox;
 45
 46class ExclusionShapeOutsideInfo {
 47 WTF_MAKE_FAST_ALLOCATED;
 48public:
 49 ~ExclusionShapeOutsideInfo();
 50
 51 static PassOwnPtr<ExclusionShapeOutsideInfo> create(RenderBox* box) { return adoptPtr(new ExclusionShapeOutsideInfo(box)); }
 52 static ExclusionShapeOutsideInfo* exclusionShapeOutsideInfoForRenderBox(const RenderBox*);
 53 static ExclusionShapeOutsideInfo* ensureExclusionShapeOutsideInfoForRenderBox(RenderBox*);
 54 static void removeExclusionShapeOutsideInfoForRenderBox(const RenderBox*);
 55 static bool isExclusionShapeOutsideInfoEnabledForRenderBox(const RenderBox*);
 56
 57 LayoutUnit shapeLogicalLeft()
 58 {
 59 ensureComputedShape();
 60 return m_computedShape->shapeLogicalBoundingBox().x();
 61 }
 62 LayoutUnit shapeLogicalRight()
 63 {
 64 ensureComputedShape();
 65 return m_computedShape->shapeLogicalBoundingBox().maxX();
 66 }
 67 LayoutUnit shapeLogicalTop()
 68 {
 69 ensureComputedShape();
 70 return m_computedShape->shapeLogicalBoundingBox().y();
 71 }
 72 LayoutUnit shapeLogicalBottom()
 73 {
 74 ensureComputedShape();
 75 return m_computedShape->shapeLogicalBoundingBox().maxY();
 76 }
 77 LayoutUnit shapeLogicalWidth()
 78 {
 79 ensureComputedShape();
 80 return m_computedShape->shapeLogicalBoundingBox().width();
 81 }
 82 LayoutUnit shapeLogicalHeight()
 83 {
 84 ensureComputedShape();
 85 return m_computedShape->shapeLogicalBoundingBox().height();
 86 }
 87
 88 void setShapeSize(LayoutUnit logicalWidth, LayoutUnit logicalHeight)
 89 {
 90 if (m_logicalWidth != logicalWidth || m_logicalHeight != logicalHeight) {
 91 dirtyShapeSize();
 92 m_logicalWidth = logicalWidth;
 93 m_logicalHeight = logicalHeight;
 94 }
 95 }
 96
 97 void dirtyShapeSize() { m_computedShape = 0; }
 98
 99private:
 100 ExclusionShapeOutsideInfo(RenderBox*);
 101 void ensureComputedShape();
 102
 103 RenderBox* m_box;
 104 OwnPtr<ExclusionShape> m_computedShape;
 105
 106 LayoutUnit m_logicalWidth;
 107 LayoutUnit m_logicalHeight;
 108};
 109
 110}
 111#endif
 112#endif

Source/WebCore/rendering/RenderBlock.cpp

6464#include <wtf/StdLibExtras.h>
6565#if ENABLE(CSS_EXCLUSIONS)
6666#include "ExclusionShapeInsideInfo.h"
 67#include "ExclusionShapeOutsideInfo.h"
6768#endif
6869
6970using namespace std;

@@RenderBlock::FloatingObject* RenderBlock::insertFloatingObject(RenderBox* o)
37903791 o->updateLogicalWidth();
37913792 o->computeAndSetBlockDirectionMargins(this);
37923793 }
3793  setLogicalWidthForFloat(newObj, logicalWidthForChild(o) + marginStartForChild(o) + marginEndForChild(o));
 3794
 3795 LayoutUnit logicalWidth = logicalWidthForChild(o) + marginStartForChild(o) + marginEndForChild(o);
 3796#if ENABLE(CSS_EXCLUSIONS)
 3797 ExclusionShapeOutsideInfo* shapeOutside = o->exclusionShapeOutsideInfo();
 3798 if (shapeOutside) {
 3799 shapeOutside->setShapeSize(o->logicalWidth(), o->logicalHeight());
 3800 logicalWidth = shapeOutside->shapeLogicalWidth();
 3801 }
 3802#endif
 3803 setLogicalWidthForFloat(newObj, logicalWidth);
37943804
37953805 newObj->setShouldPaint(!o->hasSelfPaintingLayer()); // If a layer exists, the float will paint itself. Otherwise someone else will.
37963806 newObj->setIsDescendant(true);

@@bool RenderBlock::positionNewFloats()
39593969 logicalTop = max(lowestFloatLogicalBottom(FloatingObject::FloatRight), logicalTop);
39603970
39613971 LayoutPoint floatLogicalLocation = computeLogicalLocationForFloat(floatingObject, logicalTop);
 3972 LayoutUnit floatLogicalLeftOffset = childLogicalLeftMargin;
 3973 LayoutUnit floatLogicalTopOffset = marginBeforeForChild(childBox);
39623974
39633975 setLogicalLeftForFloat(floatingObject, floatLogicalLocation.x());
3964  setLogicalLeftForChild(childBox, floatLogicalLocation.x() + childLogicalLeftMargin);
3965  setLogicalTopForChild(childBox, floatLogicalLocation.y() + marginBeforeForChild(childBox));
 3976#if ENABLE(CSS_EXCLUSIONS)
 3977 ExclusionShapeOutsideInfo* shapeOutside = floatingObject->renderer()->exclusionShapeOutsideInfo();
 3978 if (shapeOutside) {
 3979 floatLogicalLeftOffset = 0;
 3980 floatLogicalTopOffset = 0;
 3981 }
 3982#endif
 3983 setLogicalLeftForChild(childBox, floatLogicalLocation.x() + floatLogicalLeftOffset);
 3984 setLogicalTopForChild(childBox, floatLogicalLocation.y() + floatLogicalTopOffset);
39663985
39673986 LayoutState* layoutState = view()->layoutState();
39683987 bool isPaginated = layoutState->isPaginated();

@@bool RenderBlock::positionNewFloats()
39894008 floatingObject->m_paginationStrut = newLogicalTop - floatLogicalLocation.y();
39904009
39914010 floatLogicalLocation = computeLogicalLocationForFloat(floatingObject, newLogicalTop);
 4011 floatLogicalLeftOffset = childLogicalLeftMargin;
 4012 floatLogicalTopOffset = marginBeforeForChild(childBox);
39924013 setLogicalLeftForFloat(floatingObject, floatLogicalLocation.x());
3993  setLogicalLeftForChild(childBox, floatLogicalLocation.x() + childLogicalLeftMargin);
3994  setLogicalTopForChild(childBox, floatLogicalLocation.y() + marginBeforeForChild(childBox));
 4014#if ENABLE(CSS_EXCLUSIONS)
 4015 if (shapeOutside) {
 4016 floatLogicalLeftOffset = 0;
 4017 floatLogicalTopOffset = 0;
 4018 }
 4019#endif
 4020 setLogicalLeftForChild(childBox, floatLogicalLocation.x() + floatLogicalLeftOffset);
 4021 setLogicalTopForChild(childBox, floatLogicalLocation.y() + floatLogicalTopOffset);
39954022
39964023 if (childBlock)
39974024 childBlock->setChildNeedsLayout(true, MarkOnlyThis);

@@bool RenderBlock::positionNewFloats()
40004027 }
40014028
40024029 setLogicalTopForFloat(floatingObject, floatLogicalLocation.y());
4003  setLogicalHeightForFloat(floatingObject, logicalHeightForChild(childBox) + marginBeforeForChild(childBox) + marginAfterForChild(childBox));
 4030 LayoutUnit floatLogicalHeight = logicalHeightForChild(childBox) + marginBeforeForChild(childBox) + marginAfterForChild(childBox);
 4031#if ENABLE(CSS_EXCLUSIONS)
 4032 if (shapeOutside)
 4033 floatLogicalHeight = shapeOutside->shapeLogicalHeight();
 4034#endif
 4035 setLogicalHeightForFloat(floatingObject, floatLogicalHeight);
40044036
40054037 m_floatingObjects->addPlacedObject(floatingObject);
40064038

Source/WebCore/rendering/RenderBox.cpp

@@void RenderBox::willBeDestroyed()
136136
137137 RenderBlock::removePercentHeightDescendantIfNeeded(this);
138138
 139#if ENABLE(CSS_EXCLUSIONS)
 140 ExclusionShapeOutsideInfo::removeExclusionShapeOutsideInfoForRenderBox(this);
 141#endif
 142
139143 RenderBoxModelObject::willBeDestroyed();
140144}
141145

@@void RenderBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle
267271
268272 frame()->view()->recalculateScrollbarOverlayStyle();
269273 }
 274
 275#if ENABLE(CSS_EXCLUSIONS)
 276 updateExclusionShapeOutsideInfoAfterStyleChange(style()->shapeOutside(), oldStyle ? oldStyle->shapeOutside() : 0);
 277#endif
 278
 279}
 280
 281#if ENABLE(CSS_EXCLUSIONS)
 282void RenderBox::updateExclusionShapeOutsideInfoAfterStyleChange(const BasicShape* shapeOutside, const BasicShape* oldShapeOutside)
 283{
 284 // FIXME: A future optimization would do a deep comparison for equality.
 285 if (shapeOutside == oldShapeOutside)
 286 return;
 287
 288 if (shapeOutside) {
 289 ExclusionShapeOutsideInfo* exclusionShapeOutsideInfo = ExclusionShapeOutsideInfo::ensureExclusionShapeOutsideInfoForRenderBox(this);
 290 exclusionShapeOutsideInfo->dirtyShapeSize();
 291 } else
 292 ExclusionShapeOutsideInfo::removeExclusionShapeOutsideInfoForRenderBox(this);
270293}
 294#endif
271295
272296void RenderBox::updateFromStyle()
273297{

Source/WebCore/rendering/RenderBox.h

2626#include "RenderBoxModelObject.h"
2727#include "RenderOverflow.h"
2828#include "ScrollTypes.h"
 29#if ENABLE(CSS_EXCLUSIONS)
 30#include "ExclusionShapeOutsideInfo.h"
 31#endif
2932
3033namespace WebCore {
3134

@@public:
551554
552555 bool hasSameDirectionAs(const RenderBox* object) const { return style()->direction() == object->style()->direction(); }
553556
 557#if ENABLE(CSS_EXCLUSIONS)
 558 ExclusionShapeOutsideInfo* exclusionShapeOutsideInfo() const
 559 {
 560 return style()->shapeOutside() && ExclusionShapeOutsideInfo::isExclusionShapeOutsideInfoEnabledForRenderBox(this) ? ExclusionShapeOutsideInfo::exclusionShapeOutsideInfoForRenderBox(this) : 0;
 561 }
 562#endif
 563
554564protected:
555565 virtual void willBeDestroyed();
556566

@@protected:
585595 RenderObject* splitAnonymousBoxesAroundChild(RenderObject* beforeChild);
586596
587597private:
 598#if ENABLE(CSS_EXCLUSIONS)
 599 void updateExclusionShapeOutsideInfoAfterStyleChange(const BasicShape* shapeOutside, const BasicShape* oldShapeOutside);
 600#endif
 601
588602 bool fixedElementLaysOutRelativeToFrame(Frame*, FrameView*) const;
589603
590604 bool includeVerticalScrollbarSize() const;

LayoutTests/ChangeLog

 12012-10-30 Bem Jones-Bey <bjonesbe@adobe.com>
 2
 3 [CSS Exclusions] shape-outside on floats for rectangle shapes height/width
 4 https://bugs.webkit.org/show_bug.cgi?id=100398
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Tests for changing the height and width of a float with a rectangular
 9 shape outside.
 10
 11 * fast/exclusions/shape-outside-floats/shape-outside-floats-margin-is-ignored-expected.html: Added.
 12 * fast/exclusions/shape-outside-floats/shape-outside-floats-margin-is-ignored.html: Added.
 13 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-larger-expected.html: Added.
 14 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-larger.html: Added.
 15 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple-expected.html: Added.
 16 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html: Added.
 17 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-smaller-expected.html: Added.
 18 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-smaller.html: Added.
 19 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-percentage-expected.html: Added.
 20 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-percentage.html: Added.
 21 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-vertical-expected.html: Added.
 22 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-vertical.html: Added.
 23
1242012-10-30 Vincent Scheib <scheib@chromium.org>
225
326 [Chromium] Unreviwed suppression of 6 webgl tests.

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-margin-is-ignored-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<style>
 5 .container {
 6 font: 10px/1 Ahem, sans-serif;
 7 height: 300px;
 8 width: 400px;
 9 border: 1px solid black;
 10 }
 11 .float-right {
 12 float: right;
 13 margin: 0px;
 14 height: 200px;
 15 width: 200px;
 16 }
 17 .float-left {
 18 float: left;
 19 margin: 0px;
 20 height: 200px;
 21 width: 200px;
 22 }
 23</style>
 24</head>
 25<body>
 26 <p>
 27 Requites Ahem font. Tests that the shape on a right float causes the margin on the float to have no effect on layout.
 28 This should display 10 black vertical lines, with 10 shorter lines on the right.
 29 </p>
 30 <div class="container">
 31 <div class="float-right"></div>
 32 X X X X X X X X X X X X X X X
 33 X X X X X X X X X X X X X X X
 34 X X X X X X X X X X X X X X X
 35 X X X X X X X X X X X X X X X
 36 X X X X X X X X X X X X X X X
 37 X X X X X X X X X X X X X X X
 38 X X X X X X X X X X X X X X X
 39 X X X X X X X X X X X X X X X
 40 X X X X X X X X X X X X X X X
 41 X X X X X X X X X X X X X X X
 42 X X X X X X X X X X X X X X X
 43 X X X X X X X X X X X X X X X
 44 X X X X X X X X X X X X X X X
 45 X X X X X X X X X X X X X X X
 46 X X X X X X X X X X X X X X X
 47 X X X X X X X X X X X X X X X
 48 X X X X X X X X X X X X X X X
 49 X X X X X X X X X X X X X X X
 50 X X X X X X X X X X X X X X X
 51 X X X X X X X X X X X X X X X
 52 </div>
 53 <p>
 54 Requites Ahem font. Tests that the shape on a left float causes the margin on the float to have no effect on layout.
 55 This should display 10 black vertical lines, with 10 shorter lines on the left.
 56 </p>
 57 <div class="container">
 58 <div class="float-left"></div>
 59 X X X X X X X X X X X X X X X
 60 X X X X X X X X X X X X X X X
 61 X X X X X X X X X X X X X X X
 62 X X X X X X X X X X X X X X X
 63 X X X X X X X X X X X X X X X
 64 X X X X X X X X X X X X X X X
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 X X X X X X X X X X X X X X X
 71 X X X X X X X X X X X X X X X
 72 X X X X X X X X X X X X X X X
 73 X X X X X X X X X X X X X X X
 74 X X X X X X X X X X X X X X X
 75 X X X X X X X X X X X X X X X
 76 X X X X X X X X X X X X X X X
 77 X X X X X X X X X X X X X X X
 78 X X X X X X X X X X X X X X X
 79 </div>
 80</body>
 81</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-margin-is-ignored.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<script>
 5 if (window.internals)
 6 window.internals.settings.setCSSExclusionsEnabled(true);
 7</script>
 8<style>
 9 .container {
 10 font: 10px/1 Ahem, sans-serif;
 11 height: 300px;
 12 width: 400px;
 13 border: 1px solid black;
 14 }
 15 .float-right {
 16 -webkit-shape-outside: rectangle(0px, 0px, 200px, 200px);
 17 float: right;
 18 margin: 100px;
 19 height: 200px;
 20 width: 200px;
 21 }
 22 .float-left {
 23 -webkit-shape-outside: rectangle(0px, 0px, 200px, 200px);
 24 float: left;
 25 margin: 100px;
 26 height: 200px;
 27 width: 200px;
 28 }
 29</style>
 30</head>
 31<body>
 32 <p>
 33 Requites Ahem font. Tests that the shape on a right float causes the margin on the float to have no effect on layout.
 34 This should display 10 black vertical lines, with 10 shorter lines on the right.
 35 </p>
 36 <div class="container">
 37 <div class="float-right"></div>
 38 X X X X X X X X X X X X X X X
 39 X X X X X X X X X X X X X X X
 40 X X X X X X X X X X X X X X X
 41 X X X X X X X X X X X X X X X
 42 X X X X X X X X X X X X X X X
 43 X X X X X X X X X X X X X X X
 44 X X X X X X X X X X X X X X X
 45 X X X X X X X X X X X X X X X
 46 X X X X X X X X X X X X X X X
 47 X X X X X X X X X X X X X X X
 48 X X X X X X X X X X X X X X X
 49 X X X X X X X X X X X X X X X
 50 X X X X X X X X X X X X X X X
 51 X X X X X X X X X X X X X X X
 52 X X X X X X X X X X X X X X X
 53 X X X X X X X X X X X X X X X
 54 X X X X X X X X X X X X X X X
 55 X X X X X X X X X X X X X X X
 56 X X X X X X X X X X X X X X X
 57 X X X X X X X X X X X X X X X
 58 </div>
 59 <p>
 60 Requites Ahem font. Tests that the shape on a left float causes the margin on the float to have no effect on layout.
 61 This should display 10 black vertical lines, with 10 shorter lines on the left.
 62 </p>
 63 <div class="container">
 64 <div class="float-left"></div>
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 X X X X X X X X X X X X X X X
 71 X X X X X X X X X X X X X X X
 72 X X X X X X X X X X X X X X X
 73 X X X X X X X X X X X X X X X
 74 X X X X X X X X X X X X X X X
 75 X X X X X X X X X X X X X X X
 76 X X X X X X X X X X X X X X X
 77 X X X X X X X X X X X X X X X
 78 X X X X X X X X X X X X X X X
 79 X X X X X X X X X X X X X X X
 80 X X X X X X X X X X X X X X X
 81 X X X X X X X X X X X X X X X
 82 X X X X X X X X X X X X X X X
 83 X X X X X X X X X X X X X X X
 84 X X X X X X X X X X X X X X X
 85 </div>
 86</body>
 87</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-larger-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<style>
 5 .container {
 6 font: 10px/1 Ahem, sans-serif;
 7 height: 300px;
 8 width: 400px;
 9 border: 1px solid black;
 10 }
 11 .float-right {
 12 float: right;
 13 height: 200px;
 14 width: 300px;
 15 }
 16 .float-left {
 17 float: left;
 18 height: 200px;
 19 width: 300px;
 20 }
 21 .float-right-vertical {
 22 float: right;
 23 height: 300px;
 24 width: 200px;
 25 }
 26 .float-left-vertical {
 27 float: left;
 28 height: 300px;
 29 width: 200px;
 30 }
 31 .writing-mode-vertical-lr {
 32 -webkit-writing-mode: vertical-lr;
 33 height: 400px;
 34 width: 300px;
 35 }
 36 .writing-mode-vertical-rl {
 37 -webkit-writing-mode: vertical-rl;
 38 height: 400px;
 39 width: 300px;
 40 }
 41</style>
 42</head>
 43<body>
 44 <p>
 45 Requites Ahem font. Tests that the shape on a right float can enlarge the size of the float's box horizontally for purposes of text wrapping.
 46 This should display 5 black vertical lines, with 15 short lines on the right.
 47 </p>
 48 <div class="container">
 49 <div class="float-right"></div>
 50 X X X X X X X X X X X X X X X
 51 X X X X X X X X X X X X X X X
 52 X X X X X X X X X X X X X X X
 53 X X X X X X X X X X X X X X X
 54 X X X X X X X X X X X X X X X
 55 X X X X X X X X X X X X X X X
 56 X X X X X X X X X X X X X X X
 57 X X X X X X X X X X X X X X X
 58 X X X X X X X X X X X X X X X
 59 X X X X X X X X X X X X X X X
 60 X X X X X X X X X X X X X X X
 61 X X X X X X X X X X X X X X X
 62 X X X X X X X X X X X X X X X
 63 X X X X X X X X X X X X X X X
 64 X X X X X X X X X X X X X X X
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 </div>
 71 <p>
 72 Requites Ahem font. Tests that the shape on a left float can enlarge the size of the float's box horizontally for purposes of text wrapping.
 73 This should display 5 black vertical lines, with 15 short lines on the left.
 74 </p>
 75 <div class="container">
 76 <div class="float-left"></div>
 77 X X X X X X X X X X X X X X X
 78 X X X X X X X X X X X X X X X
 79 X X X X X X X X X X X X X X X
 80 X X X X X X X X X X X X X X X
 81 X X X X X X X X X X X X X X X
 82 X X X X X X X X X X X X X X X
 83 X X X X X X X X X X X X X X X
 84 X X X X X X X X X X X X X X X
 85 X X X X X X X X X X X X X X X
 86 X X X X X X X X X X X X X X X
 87 X X X X X X X X X X X X X X X
 88 X X X X X X X X X X X X X X X
 89 X X X X X X X X X X X X X X X
 90 X X X X X X X X X X X X X X X
 91 X X X X X X X X X X X X X X X
 92 X X X X X X X X X X X X X X X
 93 X X X X X X X X X X X X X X X
 94 X X X X X X X X X X X X X X X
 95 X X X X X X X X X X X X X X X
 96 X X X X X X X X X X X X X X X
 97 </div>
 98 <p>
 99 Requites Ahem font. Tests that the shape on a right float can enlarge the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 100 This should display 5 black horizontal lines, with 15 short lines on the bottom.
 101 </p>
 102 <div class="container writing-mode-vertical-lr">
 103 <div class="float-right-vertical"></div>
 104 X X X X X X X X X X X X X X X
 105 X X X X X X X X X X X X X X X
 106 X X X X X X X X X X X X X X X
 107 X X X X X X X X X X X X X X X
 108 X X X X X X X X X X X X X X X
 109 X X X X X X X X X X X X X X X
 110 X X X X X X X X X X X X X X X
 111 X X X X X X X X X X X X X X X
 112 X X X X X X X X X X X X X X X
 113 X X X X X X X X X X X X X X X
 114 X X X X X X X X X X X X X X X
 115 X X X X X X X X X X X X X X X
 116 X X X X X X X X X X X X X X X
 117 X X X X X X X X X X X X X X X
 118 X X X X X X X X X X X X X X X
 119 X X X X X X X X X X X X X X X
 120 X X X X X X X X X X X X X X X
 121 X X X X X X X X X X X X X X X
 122 X X X X X X X X X X X X X X X
 123 X X X X X X X X X X X X X X X
 124 </div>
 125 <p>
 126 Requites Ahem font. Tests that the shape on a left float can enlarge the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 127 This should display 5 black horizontal lines, with 15 short lines on the top.
 128 </p>
 129 <div class="container writing-mode-vertical-lr">
 130 <div class="float-left-vertical"></div>
 131 X X X X X X X X X X X X X X X
 132 X X X X X X X X X X X X X X X
 133 X X X X X X X X X X X X X X X
 134 X X X X X X X X X X X X X X X
 135 X X X X X X X X X X X X X X X
 136 X X X X X X X X X X X X X X X
 137 X X X X X X X X X X X X X X X
 138 X X X X X X X X X X X X X X X
 139 X X X X X X X X X X X X X X X
 140 X X X X X X X X X X X X X X X
 141 X X X X X X X X X X X X X X X
 142 X X X X X X X X X X X X X X X
 143 X X X X X X X X X X X X X X X
 144 X X X X X X X X X X X X X X X
 145 X X X X X X X X X X X X X X X
 146 X X X X X X X X X X X X X X X
 147 X X X X X X X X X X X X X X X
 148 X X X X X X X X X X X X X X X
 149 X X X X X X X X X X X X X X X
 150 X X X X X X X X X X X X X X X
 151 </div>
 152 <p>
 153 Requites Ahem font. Tests that the shape on a right float can enlarge the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 154 This should display 5 black horizontal lines, with 15 short lines on the bottom.
 155 </p>
 156 <div class="container writing-mode-vertical-rl">
 157 <div class="float-right-vertical"></div>
 158 X X X X X X X X X X X X X X X
 159 X X X X X X X X X X X X X X X
 160 X X X X X X X X X X X X X X X
 161 X X X X X X X X X X X X X X X
 162 X X X X X X X X X X X X X X X
 163 X X X X X X X X X X X X X X X
 164 X X X X X X X X X X X X X X X
 165 X X X X X X X X X X X X X X X
 166 X X X X X X X X X X X X X X X
 167 X X X X X X X X X X X X X X X
 168 X X X X X X X X X X X X X X X
 169 X X X X X X X X X X X X X X X
 170 X X X X X X X X X X X X X X X
 171 X X X X X X X X X X X X X X X
 172 X X X X X X X X X X X X X X X
 173 X X X X X X X X X X X X X X X
 174 X X X X X X X X X X X X X X X
 175 X X X X X X X X X X X X X X X
 176 X X X X X X X X X X X X X X X
 177 X X X X X X X X X X X X X X X
 178 </div>
 179 <p>
 180 Requites Ahem font. Tests that the shape on a left float can enlarge the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 181 This should display 5 black horizontal lines, with 15 short lines on the top.
 182 </p>
 183 <div class="container writing-mode-vertical-rl">
 184 <div class="float-left-vertical"></div>
 185 X X X X X X X X X X X X X X X
 186 X X X X X X X X X X X X X X X
 187 X X X X X X X X X X X X X X X
 188 X X X X X X X X X X X X X X X
 189 X X X X X X X X X X X X X X X
 190 X X X X X X X X X X X X X X X
 191 X X X X X X X X X X X X X X X
 192 X X X X X X X X X X X X X X X
 193 X X X X X X X X X X X X X X X
 194 X X X X X X X X X X X X X X X
 195 X X X X X X X X X X X X X X X
 196 X X X X X X X X X X X X X X X
 197 X X X X X X X X X X X X X X X
 198 X X X X X X X X X X X X X X X
 199 X X X X X X X X X X X X X X X
 200 X X X X X X X X X X X X X X X
 201 X X X X X X X X X X X X X X X
 202 X X X X X X X X X X X X X X X
 203 X X X X X X X X X X X X X X X
 204 X X X X X X X X X X X X X X X
 205 </div>
 206</body>
 207</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-larger.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<script>
 5 if (window.internals)
 6 window.internals.settings.setCSSExclusionsEnabled(true);
 7</script>
 8<style>
 9 .container {
 10 font: 10px/1 Ahem, sans-serif;
 11 height: 300px;
 12 width: 400px;
 13 border: 1px solid black;
 14 }
 15 .float-right {
 16 -webkit-shape-outside: rectangle(-100px, 0px, 300px, 200px);
 17 float: right;
 18 height: 200px;
 19 width: 200px;
 20 }
 21 .float-left {
 22 -webkit-shape-outside: rectangle(0px, 0px, 300px, 200px);
 23 float: left;
 24 height: 200px;
 25 width: 200px;
 26 }
 27 .float-right-vertical {
 28 -webkit-shape-outside: rectangle(0px, -100px, 200px, 300px);
 29 float: right;
 30 height: 200px;
 31 width: 200px;
 32 }
 33 .float-left-vertical {
 34 -webkit-shape-outside: rectangle(0px, 0px, 200px, 300px);
 35 float: left;
 36 height: 200px;
 37 width: 200px;
 38 }
 39 .writing-mode-vertical-lr {
 40 -webkit-writing-mode: vertical-lr;
 41 height: 400px;
 42 width: 300px;
 43 }
 44 .writing-mode-vertical-rl {
 45 -webkit-writing-mode: vertical-rl;
 46 height: 400px;
 47 width: 300px;
 48 }
 49</style>
 50</head>
 51<body>
 52 <p>
 53 Requites Ahem font. Tests that the shape on a right float can enlarge the size of the float's box horizontally for purposes of text wrapping.
 54 This should display 5 black vertical lines, with 15 short lines on the right.
 55 </p>
 56 <div class="container">
 57 <div class="float-right"></div>
 58 X X X X X X X X X X X X X X X
 59 X X X X X X X X X X X X X X X
 60 X X X X X X X X X X X X X X X
 61 X X X X X X X X X X X X X X X
 62 X X X X X X X X X X X X X X X
 63 X X X X X X X X X X X X X X X
 64 X X X X X X X X X X X X X X X
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 X X X X X X X X X X X X X X X
 71 X X X X X X X X X X X X X X X
 72 X X X X X X X X X X X X X X X
 73 X X X X X X X X X X X X X X X
 74 X X X X X X X X X X X X X X X
 75 X X X X X X X X X X X X X X X
 76 X X X X X X X X X X X X X X X
 77 X X X X X X X X X X X X X X X
 78 </div>
 79 <p>
 80 Requites Ahem font. Tests that the shape on a left float can enlarge the size of the float's box horizontally for purposes of text wrapping.
 81 This should display 5 black vertical lines, with 15 short lines on the left.
 82 </p>
 83 <div class="container">
 84 <div class="float-left"></div>
 85 X X X X X X X X X X X X X X X
 86 X X X X X X X X X X X X X X X
 87 X X X X X X X X X X X X X X X
 88 X X X X X X X X X X X X X X X
 89 X X X X X X X X X X X X X X X
 90 X X X X X X X X X X X X X X X
 91 X X X X X X X X X X X X X X X
 92 X X X X X X X X X X X X X X X
 93 X X X X X X X X X X X X X X X
 94 X X X X X X X X X X X X X X X
 95 X X X X X X X X X X X X X X X
 96 X X X X X X X X X X X X X X X
 97 X X X X X X X X X X X X X X X
 98 X X X X X X X X X X X X X X X
 99 X X X X X X X X X X X X X X X
 100 X X X X X X X X X X X X X X X
 101 X X X X X X X X X X X X X X X
 102 X X X X X X X X X X X X X X X
 103 X X X X X X X X X X X X X X X
 104 X X X X X X X X X X X X X X X
 105 </div>
 106 <p>
 107 Requites Ahem font. Tests that the shape on a right float can enlarge the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 108 This should display 5 black horizontal lines, with 15 short lines on the bottom.
 109 </p>
 110 <div class="container writing-mode-vertical-lr">
 111 <div class="float-right-vertical"></div>
 112 X X X X X X X X X X X X X X X
 113 X X X X X X X X X X X X X X X
 114 X X X X X X X X X X X X X X X
 115 X X X X X X X X X X X X X X X
 116 X X X X X X X X X X X X X X X
 117 X X X X X X X X X X X X X X X
 118 X X X X X X X X X X X X X X X
 119 X X X X X X X X X X X X X X X
 120 X X X X X X X X X X X X X X X
 121 X X X X X X X X X X X X X X X
 122 X X X X X X X X X X X X X X X
 123 X X X X X X X X X X X X X X X
 124 X X X X X X X X X X X X X X X
 125 X X X X X X X X X X X X X X X
 126 X X X X X X X X X X X X X X X
 127 X X X X X X X X X X X X X X X
 128 X X X X X X X X X X X X X X X
 129 X X X X X X X X X X X X X X X
 130 X X X X X X X X X X X X X X X
 131 X X X X X X X X X X X X X X X
 132 </div>
 133 <p>
 134 Requites Ahem font. Tests that the shape on a left float can enlarge the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 135 This should display 5 black horizontal lines, with 15 short lines on the top.
 136 </p>
 137 <div class="container writing-mode-vertical-lr">
 138 <div class="float-left-vertical"></div>
 139 X X X X X X X X X X X X X X X
 140 X X X X X X X X X X X X X X X
 141 X X X X X X X X X X X X X X X
 142 X X X X X X X X X X X X X X X
 143 X X X X X X X X X X X X X X X
 144 X X X X X X X X X X X X X X X
 145 X X X X X X X X X X X X X X X
 146 X X X X X X X X X X X X X X X
 147 X X X X X X X X X X X X X X X
 148 X X X X X X X X X X X X X X X
 149 X X X X X X X X X X X X X X X
 150 X X X X X X X X X X X X X X X
 151 X X X X X X X X X X X X X X X
 152 X X X X X X X X X X X X X X X
 153 X X X X X X X X X X X X X X X
 154 X X X X X X X X X X X X X X X
 155 X X X X X X X X X X X X X X X
 156 X X X X X X X X X X X X X X X
 157 X X X X X X X X X X X X X X X
 158 X X X X X X X X X X X X X X X
 159 </div>
 160 <p>
 161 Requites Ahem font. Tests that the shape on a right float can enlarge the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 162 This should display 5 black horizontal lines, with 15 short lines on the bottom.
 163 </p>
 164 <div class="container writing-mode-vertical-rl">
 165 <div class="float-right-vertical"></div>
 166 X X X X X X X X X X X X X X X
 167 X X X X X X X X X X X X X X X
 168 X X X X X X X X X X X X X X X
 169 X X X X X X X X X X X X X X X
 170 X X X X X X X X X X X X X X X
 171 X X X X X X X X X X X X X X X
 172 X X X X X X X X X X X X X X X
 173 X X X X X X X X X X X X X X X
 174 X X X X X X X X X X X X X X X
 175 X X X X X X X X X X X X X X X
 176 X X X X X X X X X X X X X X X
 177 X X X X X X X X X X X X X X X
 178 X X X X X X X X X X X X X X X
 179 X X X X X X X X X X X X X X X
 180 X X X X X X X X X X X X X X X
 181 X X X X X X X X X X X X X X X
 182 X X X X X X X X X X X X X X X
 183 X X X X X X X X X X X X X X X
 184 X X X X X X X X X X X X X X X
 185 X X X X X X X X X X X X X X X
 186 </div>
 187 <p>
 188 Requites Ahem font. Tests that the shape on a left float can enlarge the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 189 This should display 5 black horizontal lines, with 15 short lines on the top.
 190 </p>
 191 <div class="container writing-mode-vertical-rl">
 192 <div class="float-left-vertical"></div>
 193 X X X X X X X X X X X X X X X
 194 X X X X X X X X X X X X X X X
 195 X X X X X X X X X X X X X X X
 196 X X X X X X X X X X X X X X X
 197 X X X X X X X X X X X X X X X
 198 X X X X X X X X X X X X X X X
 199 X X X X X X X X X X X X X X X
 200 X X X X X X X X X X X X X X X
 201 X X X X X X X X X X X X X X X
 202 X X X X X X X X X X X X X X X
 203 X X X X X X X X X X X X X X X
 204 X X X X X X X X X X X X X X X
 205 X X X X X X X X X X X X X X X
 206 X X X X X X X X X X X X X X X
 207 X X X X X X X X X X X X X X X
 208 X X X X X X X X X X X X X X X
 209 X X X X X X X X X X X X X X X
 210 X X X X X X X X X X X X X X X
 211 X X X X X X X X X X X X X X X
 212 X X X X X X X X X X X X X X X
 213 </div>
 214</body>
 215</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<style>
 5 .container {
 6 font: 10px/1 Ahem, sans-serif;
 7 height: 300px;
 8 width: 400px;
 9 border: 1px solid black;
 10 }
 11 .float-right {
 12 float: right;
 13 height: 200px;
 14 width: 200px;
 15 border: 1px solid red;
 16 }
 17 .float-left {
 18 float: left;
 19 height: 200px;
 20 width: 200px;
 21 border: 1px solid red;
 22 }
 23 .float-right-vertical {
 24 float: right;
 25 height: 200px;
 26 width: 200px;
 27 border: 1px solid red;
 28 }
 29 .float-left-vertical {
 30 float: left;
 31 height: 200px;
 32 width: 200px;
 33 border: 1px solid red;
 34 }
 35 .float-right-exclusion {
 36 float: right;
 37 height: 200px;
 38 width: 100px;
 39 }
 40 .float-left-exclusion {
 41 float: left;
 42 height: 200px;
 43 width: 100px;
 44 }
 45 .float-right-vertical-exclusion {
 46 float: right;
 47 height: 100px;
 48 width: 200px;
 49 }
 50 .float-left-vertical-exclusion {
 51 float: left;
 52 height: 100px;
 53 width: 200px;
 54 }
 55 .writing-mode-vertical-lr {
 56 -webkit-writing-mode: vertical-lr;
 57 height: 400px;
 58 width: 300px;
 59 }
 60 .writing-mode-vertical-rl {
 61 -webkit-writing-mode: vertical-rl;
 62 height: 400px;
 63 width: 300px;
 64 }
 65</style>
 66</head>
 67<body>
 68 <p>
 69 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box horizontally for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 70 </p>
 71 <div class="container">
 72 <div class="float-right-exclusion"></div>
 73 <div class="float-right"></div>
 74 X X X X X X X X X X X X X X X
 75 X X X X X X X X X X X X X X X
 76 X X X X X X X X X X X X X X X
 77 X X X X X X X X X X X X X X X
 78 X X X X X X X X X X X X X X X
 79 X X X X X X X X X X X X X X X
 80 X X X X X X X X X X
 81 </div>
 82 <p>
 83 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box horizontally for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 84 </p>
 85 <div class="container">
 86 <div class="float-left-exclusion"></div>
 87 <div class="float-left"></div>
 88 X X X X X X X X X X X X X X X
 89 X X X X X X X X X X X X X X X
 90 X X X X X X X X X X X X X X X
 91 X X X X X X X X X X X X X X X
 92 X X X X X X X X X X X X X X X
 93 X X X X X X X X X X X X X X X
 94 X X X X X X X X X X
 95 </div>
 96 <p>
 97 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 98 </p>
 99 <div class="container writing-mode-vertical-lr">
 100 <div class="float-right-vertical-exclusion"></div>
 101 <div class="float-right-vertical"></div>
 102 X X X X X X X X X X X X X X X
 103 X X X X X X X X X X X X X X X
 104 X X X X X X X X X X X X X X X
 105 X X X X X X X X X X X X X X X
 106 X X X X X X X X X X X X X X X
 107 X X X X X X X X X X X X X X X
 108 X X X X X X X X X X
 109 </div>
 110 <p>
 111 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 112 </p>
 113 <div class="container writing-mode-vertical-lr">
 114 <div class="float-left-vertical-exclusion"></div>
 115 <div class="float-left-vertical"></div>
 116 X X X X X X X X X X X X X X X
 117 X X X X X X X X X X X X X X X
 118 X X X X X X X X X X X X X X X
 119 X X X X X X X X X X X X X X X
 120 X X X X X X X X X X X X X X X
 121 X X X X X X X X X X X X X X X
 122 X X X X X X X X X X
 123 </div>
 124 <p>
 125 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 126 </p>
 127 <div class="container writing-mode-vertical-rl">
 128 <div class="float-right-vertical-exclusion"></div>
 129 <div class="float-right-vertical"></div>
 130 X X X X X X X X X X X X X X X
 131 X X X X X X X X X X X X X X X
 132 X X X X X X X X X X X X X X X
 133 X X X X X X X X X X X X X X X
 134 X X X X X X X X X X X X X X X
 135 X X X X X X X X X X X X X X X
 136 X X X X X X X X X X
 137 </div>
 138 <p>
 139 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 140 </p>
 141 <div class="container writing-mode-vertical-rl">
 142 <div class="float-left-vertical-exclusion"></div>
 143 <div class="float-left-vertical"></div>
 144 X X X X X X X X X X X X X X X
 145 X X X X X X X X X X X X X X X
 146 X X X X X X X X X X X X X X X
 147 X X X X X X X X X X X X X X X
 148 X X X X X X X X X X X X X X X
 149 X X X X X X X X X X X X X X X
 150 X X X X X X X X X X
 151 </div>
 152</body>
 153</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<script>
 5 if (window.internals)
 6 window.internals.settings.setCSSExclusionsEnabled(true);
 7</script>
 8<style>
 9 .container {
 10 font: 10px/1 Ahem, sans-serif;
 11 height: 300px;
 12 width: 400px;
 13 border: 1px solid black;
 14 }
 15 .float-right {
 16 float: right;
 17 height: 200px;
 18 width: 200px;
 19 border: 1px solid red;
 20 }
 21 .float-left {
 22 float: left;
 23 height: 200px;
 24 width: 200px;
 25 border: 1px solid red;
 26 }
 27 .float-right-vertical {
 28 float: right;
 29 height: 200px;
 30 width: 200px;
 31 border: 1px solid red;
 32 }
 33 .float-left-vertical {
 34 float: left;
 35 height: 200px;
 36 width: 200px;
 37 border: 1px solid red;
 38 }
 39 .float-right-exclusion {
 40 -webkit-shape-outside: rectangle(100px, 0px, 100px, 200px);
 41 float: right;
 42 height: 200px;
 43 width: 200px;
 44 }
 45 .float-left-exclusion {
 46 -webkit-shape-outside: rectangle(0px, 0px, 100px, 200px);
 47 float: left;
 48 height: 200px;
 49 width: 200px;
 50 }
 51 .float-right-vertical-exclusion {
 52 -webkit-shape-outside: rectangle(0px, 100px, 200px, 100px);
 53 float: right;
 54 height: 200px;
 55 width: 200px;
 56 }
 57 .float-left-vertical-exclusion {
 58 -webkit-shape-outside: rectangle(0px, 0px, 200px, 100px);
 59 float: left;
 60 height: 200px;
 61 width: 200px;
 62 }
 63 .writing-mode-vertical-lr {
 64 -webkit-writing-mode: vertical-lr;
 65 height: 400px;
 66 width: 300px;
 67 }
 68 .writing-mode-vertical-rl {
 69 -webkit-writing-mode: vertical-rl;
 70 height: 400px;
 71 width: 300px;
 72 }
 73</style>
 74</head>
 75<body>
 76 <p>
 77 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box horizontally for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 78 </p>
 79 <div class="container">
 80 <div class="float-right-exclusion"></div>
 81 <div class="float-right"></div>
 82 X X X X X X X X X X X X X X X
 83 X X X X X X X X X X X X X X X
 84 X X X X X X X X X X X X X X X
 85 X X X X X X X X X X X X X X X
 86 X X X X X X X X X X X X X X X
 87 X X X X X X X X X X X X X X X
 88 X X X X X X X X X X
 89 </div>
 90 <p>
 91 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box horizontally for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 92 </p>
 93 <div class="container">
 94 <div class="float-left-exclusion"></div>
 95 <div class="float-left"></div>
 96 X X X X X X X X X X X X X X X
 97 X X X X X X X X X X X X X X X
 98 X X X X X X X X X X X X X X X
 99 X X X X X X X X X X X X X X X
 100 X X X X X X X X X X X X X X X
 101 X X X X X X X X X X X X X X X
 102 X X X X X X X X X X
 103 </div>
 104 <p>
 105 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 106 </p>
 107 <div class="container writing-mode-vertical-lr">
 108 <div class="float-right-vertical-exclusion"></div>
 109 <div class="float-right-vertical"></div>
 110 X X X X X X X X X X X X X X X
 111 X X X X X X X X X X X X X X X
 112 X X X X X X X X X X X X X X X
 113 X X X X X X X X X X X X X X X
 114 X X X X X X X X X X X X X X X
 115 X X X X X X X X X X X X X X X
 116 X X X X X X X X X X
 117 </div>
 118 <p>
 119 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 120 </p>
 121 <div class="container writing-mode-vertical-lr">
 122 <div class="float-left-vertical-exclusion"></div>
 123 <div class="float-left-vertical"></div>
 124 X X X X X X X X X X X X X X X
 125 X X X X X X X X X X X X X X X
 126 X X X X X X X X X X X X X X X
 127 X X X X X X X X X X X X X X X
 128 X X X X X X X X X X X X X X X
 129 X X X X X X X X X X X X X X X
 130 X X X X X X X X X X
 131 </div>
 132 <p>
 133 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 134 </p>
 135 <div class="container writing-mode-vertical-rl">
 136 <div class="float-right-vertical-exclusion"></div>
 137 <div class="float-right-vertical"></div>
 138 X X X X X X X X X X X X X X X
 139 X X X X X X X X X X X X X X X
 140 X X X X X X X X X X X X X X X
 141 X X X X X X X X X X X X X X X
 142 X X X X X X X X X X X X X X X
 143 X X X X X X X X X X X X X X X
 144 X X X X X X X X X X
 145 </div>
 146 <p>
 147 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of laying out a second float on the same line. You should see a red box and a blue box that overlap.
 148 </p>
 149 <div class="container writing-mode-vertical-rl">
 150 <div class="float-left-vertical-exclusion"></div>
 151 <div class="float-left-vertical"></div>
 152 X X X X X X X X X X X X X X X
 153 X X X X X X X X X X X X X X X
 154 X X X X X X X X X X X X X X X
 155 X X X X X X X X X X X X X X X
 156 X X X X X X X X X X X X X X X
 157 X X X X X X X X X X X X X X X
 158 X X X X X X X X X X
 159 </div>
 160</body>
 161</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-smaller-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<style>
 5 .container {
 6 font: 10px/1 Ahem, sans-serif;
 7 height: 300px;
 8 width: 400px;
 9 border: 1px solid black;
 10 }
 11 .float-right {
 12 float: right;
 13 height: 200px;
 14 width: 100px;
 15 }
 16 .float-left {
 17 float: left;
 18 height: 200px;
 19 width: 100px;
 20 }
 21 .float-right-vertical {
 22 float: right;
 23 height: 100px;
 24 width: 200px;
 25 }
 26 .float-left-vertical {
 27 float: left;
 28 height: 100px;
 29 width: 200px;
 30 }
 31 .writing-mode-vertical-lr {
 32 -webkit-writing-mode: vertical-lr;
 33 height: 400px;
 34 width: 300px;
 35 }
 36 .writing-mode-vertical-rl {
 37 -webkit-writing-mode: vertical-rl;
 38 height: 400px;
 39 width: 300px;
 40 }
 41</style>
 42</head>
 43<body>
 44 <p>
 45 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box horizontally for purposes of text wrapping.
 46 This should display 15 black vertical lines, with empty space on the right.
 47 </p>
 48 <div class="container">
 49 <div class="float-right"></div>
 50 X X X X X X X X X X X X X X X
 51 X X X X X X X X X X X X X X X
 52 X X X X X X X X X X X X X X X
 53 X X X X X X X X X X X X X X X
 54 X X X X X X X X X X X X X X X
 55 X X X X X X X X X X X X X X X
 56 X X X X X X X X X X X X X X X
 57 X X X X X X X X X X X X X X X
 58 X X X X X X X X X X X X X X X
 59 X X X X X X X X X X X X X X X
 60 X X X X X X X X X X X X X X X
 61 X X X X X X X X X X X X X X X
 62 X X X X X X X X X X X X X X X
 63 X X X X X X X X X X X X X X X
 64 X X X X X X X X X X X X X X X
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 </div>
 71 <p>
 72 Requites Ahem font. Tests that the shape on a left float can reduce the size of the float's box horizontally for purposes of text wrapping.
 73 This should display 15 black vertical lines, with empty space on the left.
 74 </p>
 75 <div class="container">
 76 <div class="float-left"></div>
 77 X X X X X X X X X X X X X X X
 78 X X X X X X X X X X X X X X X
 79 X X X X X X X X X X X X X X X
 80 X X X X X X X X X X X X X X X
 81 X X X X X X X X X X X X X X X
 82 X X X X X X X X X X X X X X X
 83 X X X X X X X X X X X X X X X
 84 X X X X X X X X X X X X X X X
 85 X X X X X X X X X X X X X X X
 86 X X X X X X X X X X X X X X X
 87 X X X X X X X X X X X X X X X
 88 X X X X X X X X X X X X X X X
 89 X X X X X X X X X X X X X X X
 90 X X X X X X X X X X X X X X X
 91 X X X X X X X X X X X X X X X
 92 X X X X X X X X X X X X X X X
 93 X X X X X X X X X X X X X X X
 94 X X X X X X X X X X X X X X X
 95 X X X X X X X X X X X X X X X
 96 X X X X X X X X X X X X X X X
 97 </div>
 98 <p>
 99 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 100 This should display 15 black horizontal lines, with empty space on the bottom.
 101 </p>
 102 <div class="container writing-mode-vertical-lr">
 103 <div class="float-right-vertical"></div>
 104 X X X X X X X X X X X X X X X
 105 X X X X X X X X X X X X X X X
 106 X X X X X X X X X X X X X X X
 107 X X X X X X X X X X X X X X X
 108 X X X X X X X X X X X X X X X
 109 X X X X X X X X X X X X X X X
 110 X X X X X X X X X X X X X X X
 111 X X X X X X X X X X X X X X X
 112 X X X X X X X X X X X X X X X
 113 X X X X X X X X X X X X X X X
 114 X X X X X X X X X X X X X X X
 115 X X X X X X X X X X X X X X X
 116 X X X X X X X X X X X X X X X
 117 X X X X X X X X X X X X X X X
 118 X X X X X X X X X X X X X X X
 119 X X X X X X X X X X X X X X X
 120 X X X X X X X X X X X X X X X
 121 X X X X X X X X X X X X X X X
 122 X X X X X X X X X X X X X X X
 123 X X X X X X X X X X X X X X X
 124 </div>
 125 <p>
 126 Requites Ahem font. Tests that the shape on a left float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 127 This should display 15 black horizontal lines, with empty space on the top.
 128 </p>
 129 <div class="container writing-mode-vertical-lr">
 130 <div class="float-left-vertical"></div>
 131 X X X X X X X X X X X X X X X
 132 X X X X X X X X X X X X X X X
 133 X X X X X X X X X X X X X X X
 134 X X X X X X X X X X X X X X X
 135 X X X X X X X X X X X X X X X
 136 X X X X X X X X X X X X X X X
 137 X X X X X X X X X X X X X X X
 138 X X X X X X X X X X X X X X X
 139 X X X X X X X X X X X X X X X
 140 X X X X X X X X X X X X X X X
 141 X X X X X X X X X X X X X X X
 142 X X X X X X X X X X X X X X X
 143 X X X X X X X X X X X X X X X
 144 X X X X X X X X X X X X X X X
 145 X X X X X X X X X X X X X X X
 146 X X X X X X X X X X X X X X X
 147 X X X X X X X X X X X X X X X
 148 X X X X X X X X X X X X X X X
 149 X X X X X X X X X X X X X X X
 150 X X X X X X X X X X X X X X X
 151 </div>
 152 <p>
 153 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 154 This should display 15 black horizontal lines, with empty space on the bottom.
 155 </p>
 156 <div class="container writing-mode-vertical-rl">
 157 <div class="float-right-vertical"></div>
 158 X X X X X X X X X X X X X X X
 159 X X X X X X X X X X X X X X X
 160 X X X X X X X X X X X X X X X
 161 X X X X X X X X X X X X X X X
 162 X X X X X X X X X X X X X X X
 163 X X X X X X X X X X X X X X X
 164 X X X X X X X X X X X X X X X
 165 X X X X X X X X X X X X X X X
 166 X X X X X X X X X X X X X X X
 167 X X X X X X X X X X X X X X X
 168 X X X X X X X X X X X X X X X
 169 X X X X X X X X X X X X X X X
 170 X X X X X X X X X X X X X X X
 171 X X X X X X X X X X X X X X X
 172 X X X X X X X X X X X X X X X
 173 X X X X X X X X X X X X X X X
 174 X X X X X X X X X X X X X X X
 175 X X X X X X X X X X X X X X X
 176 X X X X X X X X X X X X X X X
 177 X X X X X X X X X X X X X X X
 178 </div>
 179 <p>
 180 Requites Ahem font. Tests that the shape on a left float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 181 This should display 15 black horizontal lines, with empty space on the top.
 182 </p>
 183 <div class="container writing-mode-vertical-rl">
 184 <div class="float-left-vertical"></div>
 185 X X X X X X X X X X X X X X X
 186 X X X X X X X X X X X X X X X
 187 X X X X X X X X X X X X X X X
 188 X X X X X X X X X X X X X X X
 189 X X X X X X X X X X X X X X X
 190 X X X X X X X X X X X X X X X
 191 X X X X X X X X X X X X X X X
 192 X X X X X X X X X X X X X X X
 193 X X X X X X X X X X X X X X X
 194 X X X X X X X X X X X X X X X
 195 X X X X X X X X X X X X X X X
 196 X X X X X X X X X X X X X X X
 197 X X X X X X X X X X X X X X X
 198 X X X X X X X X X X X X X X X
 199 X X X X X X X X X X X X X X X
 200 X X X X X X X X X X X X X X X
 201 X X X X X X X X X X X X X X X
 202 X X X X X X X X X X X X X X X
 203 X X X X X X X X X X X X X X X
 204 X X X X X X X X X X X X X X X
 205 </div>
 206</body>
 207</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-smaller.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<script>
 5 if (window.internals)
 6 window.internals.settings.setCSSExclusionsEnabled(true);
 7</script>
 8<style>
 9 .container {
 10 font: 10px/1 Ahem, sans-serif;
 11 height: 300px;
 12 width: 400px;
 13 border: 1px solid black;
 14 }
 15 .float-right {
 16 -webkit-shape-outside: rectangle(100px, 0px, 100px, 200px);
 17 float: right;
 18 height: 200px;
 19 width: 200px;
 20 }
 21 .float-left {
 22 -webkit-shape-outside: rectangle(0px, 0px, 100px, 200px);
 23 float: left;
 24 height: 200px;
 25 width: 200px;
 26 }
 27 .float-right-vertical {
 28 -webkit-shape-outside: rectangle(0px, 100px, 200px, 100px);
 29 float: right;
 30 height: 200px;
 31 width: 200px;
 32 }
 33 .float-left-vertical {
 34 -webkit-shape-outside: rectangle(0px, 0px, 200px, 100px);
 35 float: left;
 36 height: 200px;
 37 width: 200px;
 38 }
 39 .writing-mode-vertical-lr {
 40 -webkit-writing-mode: vertical-lr;
 41 height: 400px;
 42 width: 300px;
 43 }
 44 .writing-mode-vertical-rl {
 45 -webkit-writing-mode: vertical-rl;
 46 height: 400px;
 47 width: 300px;
 48 }
 49</style>
 50</head>
 51<body>
 52 <p>
 53 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box horizontally for purposes of text wrapping.
 54 This should display 15 black vertical lines, with empty space on the right.
 55 </p>
 56 <div class="container">
 57 <div class="float-right"></div>
 58 X X X X X X X X X X X X X X X
 59 X X X X X X X X X X X X X X X
 60 X X X X X X X X X X X X X X X
 61 X X X X X X X X X X X X X X X
 62 X X X X X X X X X X X X X X X
 63 X X X X X X X X X X X X X X X
 64 X X X X X X X X X X X X X X X
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 X X X X X X X X X X X X X X X
 71 X X X X X X X X X X X X X X X
 72 X X X X X X X X X X X X X X X
 73 X X X X X X X X X X X X X X X
 74 X X X X X X X X X X X X X X X
 75 X X X X X X X X X X X X X X X
 76 X X X X X X X X X X X X X X X
 77 X X X X X X X X X X X X X X X
 78 </div>
 79 <p>
 80 Requites Ahem font. Tests that the shape on a left float can reduce the size of the float's box horizontally for purposes of text wrapping.
 81 This should display 15 black vertical lines, with empty space on the left.
 82 </p>
 83 <div class="container">
 84 <div class="float-left"></div>
 85 X X X X X X X X X X X X X X X
 86 X X X X X X X X X X X X X X X
 87 X X X X X X X X X X X X X X X
 88 X X X X X X X X X X X X X X X
 89 X X X X X X X X X X X X X X X
 90 X X X X X X X X X X X X X X X
 91 X X X X X X X X X X X X X X X
 92 X X X X X X X X X X X X X X X
 93 X X X X X X X X X X X X X X X
 94 X X X X X X X X X X X X X X X
 95 X X X X X X X X X X X X X X X
 96 X X X X X X X X X X X X X X X
 97 X X X X X X X X X X X X X X X
 98 X X X X X X X X X X X X X X X
 99 X X X X X X X X X X X X X X X
 100 X X X X X X X X X X X X X X X
 101 X X X X X X X X X X X X X X X
 102 X X X X X X X X X X X X X X X
 103 X X X X X X X X X X X X X X X
 104 X X X X X X X X X X X X X X X
 105 </div>
 106 <p>
 107 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 108 This should display 15 black horizontal lines, with empty space on the bottom.
 109 </p>
 110 <div class="container writing-mode-vertical-lr">
 111 <div class="float-right-vertical"></div>
 112 X X X X X X X X X X X X X X X
 113 X X X X X X X X X X X X X X X
 114 X X X X X X X X X X X X X X X
 115 X X X X X X X X X X X X X X X
 116 X X X X X X X X X X X X X X X
 117 X X X X X X X X X X X X X X X
 118 X X X X X X X X X X X X X X X
 119 X X X X X X X X X X X X X X X
 120 X X X X X X X X X X X X X X X
 121 X X X X X X X X X X X X X X X
 122 X X X X X X X X X X X X X X X
 123 X X X X X X X X X X X X X X X
 124 X X X X X X X X X X X X X X X
 125 X X X X X X X X X X X X X X X
 126 X X X X X X X X X X X X X X X
 127 X X X X X X X X X X X X X X X
 128 X X X X X X X X X X X X X X X
 129 X X X X X X X X X X X X X X X
 130 X X X X X X X X X X X X X X X
 131 X X X X X X X X X X X X X X X
 132 </div>
 133 <p>
 134 Requites Ahem font. Tests that the shape on a left float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 135 This should display 15 black horizontal lines, with empty space on the top.
 136 </p>
 137 <div class="container writing-mode-vertical-lr">
 138 <div class="float-left-vertical"></div>
 139 X X X X X X X X X X X X X X X
 140 X X X X X X X X X X X X X X X
 141 X X X X X X X X X X X X X X X
 142 X X X X X X X X X X X X X X X
 143 X X X X X X X X X X X X X X X
 144 X X X X X X X X X X X X X X X
 145 X X X X X X X X X X X X X X X
 146 X X X X X X X X X X X X X X X
 147 X X X X X X X X X X X X X X X
 148 X X X X X X X X X X X X X X X
 149 X X X X X X X X X X X X X X X
 150 X X X X X X X X X X X X X X X
 151 X X X X X X X X X X X X X X X
 152 X X X X X X X X X X X X X X X
 153 X X X X X X X X X X X X X X X
 154 X X X X X X X X X X X X X X X
 155 X X X X X X X X X X X X X X X
 156 X X X X X X X X X X X X X X X
 157 X X X X X X X X X X X X X X X
 158 X X X X X X X X X X X X X X X
 159 </div>
 160 <p>
 161 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 162 This should display 15 black horizontal lines, with empty space on the bottom.
 163 </p>
 164 <div class="container writing-mode-vertical-rl">
 165 <div class="float-right-vertical"></div>
 166 X X X X X X X X X X X X X X X
 167 X X X X X X X X X X X X X X X
 168 X X X X X X X X X X X X X X X
 169 X X X X X X X X X X X X X X X
 170 X X X X X X X X X X X X X X X
 171 X X X X X X X X X X X X X X X
 172 X X X X X X X X X X X X X X X
 173 X X X X X X X X X X X X X X X
 174 X X X X X X X X X X X X X X X
 175 X X X X X X X X X X X X X X X
 176 X X X X X X X X X X X X X X X
 177 X X X X X X X X X X X X X X X
 178 X X X X X X X X X X X X X X X
 179 X X X X X X X X X X X X X X X
 180 X X X X X X X X X X X X X X X
 181 X X X X X X X X X X X X X X X
 182 X X X X X X X X X X X X X X X
 183 X X X X X X X X X X X X X X X
 184 X X X X X X X X X X X X X X X
 185 X X X X X X X X X X X X X X X
 186 </div>
 187 <p>
 188 Requites Ahem font. Tests that the shape on a left float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 189 This should display 15 black horizontal lines, with empty space on the top.
 190 </p>
 191 <div class="container writing-mode-vertical-rl">
 192 <div class="float-left-vertical"></div>
 193 X X X X X X X X X X X X X X X
 194 X X X X X X X X X X X X X X X
 195 X X X X X X X X X X X X X X X
 196 X X X X X X X X X X X X X X X
 197 X X X X X X X X X X X X X X X
 198 X X X X X X X X X X X X X X X
 199 X X X X X X X X X X X X X X X
 200 X X X X X X X X X X X X X X X
 201 X X X X X X X X X X X X X X X
 202 X X X X X X X X X X X X X X X
 203 X X X X X X X X X X X X X X X
 204 X X X X X X X X X X X X X X X
 205 X X X X X X X X X X X X X X X
 206 X X X X X X X X X X X X X X X
 207 X X X X X X X X X X X X X X X
 208 X X X X X X X X X X X X X X X
 209 X X X X X X X X X X X X X X X
 210 X X X X X X X X X X X X X X X
 211 X X X X X X X X X X X X X X X
 212 X X X X X X X X X X X X X X X
 213 </div>
 214</body>
 215</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-percentage-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<style>
 5 .container {
 6 font: 10px/1 Ahem, sans-serif;
 7 border: 1px solid black;
 8 }
 9 .container-smaller {
 10 height: 300px;
 11 width: 300px;
 12 }
 13 .container-horizontal-larger {
 14 height: 400px;
 15 width: 300px;
 16 }
 17 .container-vertical-larger {
 18 height: 300px;
 19 width: 400px;
 20 }
 21 .float-horizontal-smaller {
 22 float: right;
 23 height: 100px;
 24 width: 200px;
 25 }
 26 .float-vertical-smaller {
 27 float: right;
 28 height: 200px;
 29 width: 100px;
 30 }
 31 .float-horizontal-larger {
 32 float: right;
 33 height: 300px;
 34 width: 200px;
 35 }
 36 .float-vertical-larger {
 37 float: right;
 38 height: 200px;
 39 width: 300px;
 40 }
 41 .writing-mode-vertical-lr {
 42 -webkit-writing-mode: vertical-lr;
 43 }
 44 .writing-mode-vertical-rl {
 45 -webkit-writing-mode: vertical-rl;
 46 }
 47</style>
 48</head>
 49<body>
 50 <p>
 51 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping.
 52 This should display a box full of vertical lines, with a small empty space on the upper right.
 53 </p>
 54 <div class="container container-smaller">
 55 <div class="float-horizontal-smaller"></div>
 56 X X X X X X X X X X X X X X X
 57 X X X X X X X X X X X X X X X
 58 X X X X X X X X X X X X X X X
 59 X X X X X X X X X X X X X X X
 60 X X X X X X X X X X X X X X X
 61 X X X X X X X X X X X X X X X
 62 X X X X X X X X X X X X X X X
 63 X X X X X X X X X X X X X X X
 64 X X X X X X X X X X X X X X X
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 X X X X X X X X X X X X X X X
 71 X X X X X X X X X X X X X X X
 72 X X X X X X X X X X X X X X X
 73 X X X X X X X X X X X X X X X
 74 X X X X X X X X X X X X X X X
 75 X X X X X X X X X X X X X X X
 76 X X X X X X X X X X X X X X X
 77 X X X X X X X X X X X X X X X
 78 X X X X X X X X X X X X X X X
 79 X X X X X
 80 </div>
 81 <p>
 82 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 83 This should display a box full of horizontal lines, with a small empty space on the bottom left.
 84 </p>
 85 <div class="container container-smaller writing-mode-vertical-lr">
 86 <div class="float-vertical-smaller"></div>
 87 X X X X X X X X X X X X X X X
 88 X X X X X X X X X X X X X X X
 89 X X X X X X X X X X X X X X X
 90 X X X X X X X X X X X X X X X
 91 X X X X X X X X X X X X X X X
 92 X X X X X X X X X X X X X X X
 93 X X X X X X X X X X X X X X X
 94 X X X X X X X X X X X X X X X
 95 X X X X X X X X X X X X X X X
 96 X X X X X X X X X X X X X X X
 97 X X X X X X X X X X X X X X X
 98 X X X X X X X X X X X X X X X
 99 X X X X X X X X X X X X X X X
 100 X X X X X X X X X X X X X X X
 101 X X X X X X X X X X X X X X X
 102 X X X X X X X X X X X X X X X
 103 X X X X X X X X X X X X X X X
 104 X X X X X X X X X X X X X X X
 105 X X X X X X X X X X X X X X X
 106 X X X X X X X X X X X X X X X
 107 X X X X X X X X X X X X X X X
 108 X X X X X X X X X X X X X X X
 109 X X X X X X X X X X X X X X X
 110 X X X X X
 111 </div>
 112 <p>
 113 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 114 This should display a box full of horizontal lines, with a small empty space on the bottom right.
 115 </p>
 116 <div class="container container-smaller writing-mode-vertical-rl">
 117 <div class="float-vertical-smaller"></div>
 118 X X X X X X X X X X X X X X X
 119 X X X X X X X X X X X X X X X
 120 X X X X X X X X X X X X X X X
 121 X X X X X X X X X X X X X X X
 122 X X X X X X X X X X X X X X X
 123 X X X X X X X X X X X X X X X
 124 X X X X X X X X X X X X X X X
 125 X X X X X X X X X X X X X X X
 126 X X X X X X X X X X X X X X X
 127 X X X X X X X X X X X X X X X
 128 X X X X X X X X X X X X X X X
 129 X X X X X X X X X X X X X X X
 130 X X X X X X X X X X X X X X X
 131 X X X X X X X X X X X X X X X
 132 X X X X X X X X X X X X X X X
 133 X X X X X X X X X X X X X X X
 134 X X X X X X X X X X X X X X X
 135 X X X X X X X X X X X X X X X
 136 X X X X X X X X X X X X X X X
 137 X X X X X X X X X X X X X X X
 138 X X X X X X X X X X X X X X X
 139 X X X X X X X X X X X X X X X
 140 X X X X X X X X X X X X X X X
 141 X X X X X
 142 </div>
 143 <p>
 144 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping.
 145 This should display a box full of vertical lines, with a large empty space on the upper right.
 146 </p>
 147 <div class="container container-horizontal-larger">
 148 <div class="float-horizontal-larger"></div>
 149 X X X X X X X X X X X X X X X
 150 X X X X X X X X X X X X X X X
 151 X X X X X X X X X X X X X X X
 152 X X X X X X X X X X X X X X X
 153 X X X X X X X X X X X X X X X
 154 X X X X X X X X X X X X X X X
 155 X X X X X X X X X X X X X X X
 156 X X X X X X X X X X X X X X X
 157 X X X X X X X X X X X X X X X
 158 X X X X X X X X X X X X X X X
 159 X X X X X X X X X X X X X X X
 160 X X X X X X X X X X X X X X X
 161 X X X X X X X X X X X X X X X
 162 X X X X X X X X X X X X X X X
 163 X X X X X X X X X X X X X X X
 164 X X X X X X X X X X X X X X X
 165 X X X X X X X X X X X X X X X
 166 X X X X X X X X X X X X X X X
 167 X X X X X X X X X X X X X X X
 168 X X X X X X X X X X X X X X X
 169 </div>
 170 <p>
 171 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 172 This should display a box full of horizontal lines, with a large empty space on the bottom left.
 173 </p>
 174 <div class="container container-vertical-larger writing-mode-vertical-lr">
 175 <div class="float-vertical-larger"></div>
 176 X X X X X X X X X X X X X X X
 177 X X X X X X X X X X X X X X X
 178 X X X X X X X X X X X X X X X
 179 X X X X X X X X X X X X X X X
 180 X X X X X X X X X X X X X X X
 181 X X X X X X X X X X X X X X X
 182 X X X X X X X X X X X X X X X
 183 X X X X X X X X X X X X X X X
 184 X X X X X X X X X X X X X X X
 185 X X X X X X X X X X X X X X X
 186 X X X X X X X X X X X X X X X
 187 X X X X X X X X X X X X X X X
 188 X X X X X X X X X X X X X X X
 189 X X X X X X X X X X X X X X X
 190 X X X X X X X X X X X X X X X
 191 X X X X X X X X X X X X X X X
 192 X X X X X X X X X X X X X X X
 193 X X X X X X X X X X X X X X X
 194 X X X X X X X X X X X X X X X
 195 X X X X X X X X X X X X X X X
 196 </div>
 197 <p>
 198 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 199 This should display a box full of horizontal lines, with a large empty space on the bottom right.
 200 </p>
 201 <div class="container container-vertical-larger writing-mode-vertical-rl">
 202 <div class="float-vertical-larger"></div>
 203 X X X X X X X X X X X X X X X
 204 X X X X X X X X X X X X X X X
 205 X X X X X X X X X X X X X X X
 206 X X X X X X X X X X X X X X X
 207 X X X X X X X X X X X X X X X
 208 X X X X X X X X X X X X X X X
 209 X X X X X X X X X X X X X X X
 210 X X X X X X X X X X X X X X X
 211 X X X X X X X X X X X X X X X
 212 X X X X X X X X X X X X X X X
 213 X X X X X X X X X X X X X X X
 214 X X X X X X X X X X X X X X X
 215 X X X X X X X X X X X X X X X
 216 X X X X X X X X X X X X X X X
 217 X X X X X X X X X X X X X X X
 218 X X X X X X X X X X X X X X X
 219 X X X X X X X X X X X X X X X
 220 X X X X X X X X X X X X X X X
 221 X X X X X X X X X X X X X X X
 222 X X X X X X X X X X X X X X X
 223 </div>
 224</body>
 225</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-percentage.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<script>
 5 if (window.internals)
 6 window.internals.settings.setCSSExclusionsEnabled(true);
 7</script>
 8<style>
 9 .container {
 10 font: 10px/1 Ahem, sans-serif;
 11 border: 1px solid black;
 12 }
 13 .container-smaller {
 14 height: 300px;
 15 width: 300px;
 16 }
 17 .container-horizontal-larger {
 18 height: 400px;
 19 width: 300px;
 20 }
 21 .container-vertical-larger {
 22 height: 300px;
 23 width: 400px;
 24 }
 25 .float-horizontal-smaller {
 26 -webkit-shape-outside: rectangle(0px, 0px, 100%, 50%);
 27 float: right;
 28 height: 200px;
 29 width: 200px;
 30 }
 31 .float-vertical-smaller {
 32 -webkit-shape-outside: rectangle(0px, 0px, 50%, 100%);
 33 float: right;
 34 height: 66.66666666%;
 35 width: 66.66666666%;
 36 }
 37 .float-horizontal-larger {
 38 -webkit-shape-outside: rectangle(0px, 0px, 100%, 150%);
 39 float: right;
 40 height: 200px;
 41 width: 200px;
 42 }
 43 .float-vertical-larger {
 44 -webkit-shape-outside: rectangle(0px, 0px, 300px, 200px);
 45 float: right;
 46 height: 66.66666666%;
 47 width: 50%;
 48 }
 49 .writing-mode-vertical-lr {
 50 -webkit-writing-mode: vertical-lr;
 51 }
 52 .writing-mode-vertical-rl {
 53 -webkit-writing-mode: vertical-rl;
 54 }
 55</style>
 56</head>
 57<body>
 58 <p>
 59 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping.
 60 This should display a box full of vertical lines, with a small empty space on the upper right.
 61 </p>
 62 <div class="container container-smaller">
 63 <div class="float-horizontal-smaller"></div>
 64 X X X X X X X X X X X X X X X
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 X X X X X X X X X X X X X X X
 71 X X X X X X X X X X X X X X X
 72 X X X X X X X X X X X X X X X
 73 X X X X X X X X X X X X X X X
 74 X X X X X X X X X X X X X X X
 75 X X X X X X X X X X X X X X X
 76 X X X X X X X X X X X X X X X
 77 X X X X X X X X X X X X X X X
 78 X X X X X X X X X X X X X X X
 79 X X X X X X X X X X X X X X X
 80 X X X X X X X X X X X X X X X
 81 X X X X X X X X X X X X X X X
 82 X X X X X X X X X X X X X X X
 83 X X X X X X X X X X X X X X X
 84 X X X X X X X X X X X X X X X
 85 X X X X X X X X X X X X X X X
 86 X X X X X X X X X X X X X X X
 87 X X X X X
 88 </div>
 89 <p>
 90 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 91 This should display a box full of horizontal lines, with a small empty space on the bottom left.
 92 </p>
 93 <div class="container container-smaller writing-mode-vertical-lr">
 94 <div class="float-vertical-smaller"></div>
 95 X X X X X X X X X X X X X X X
 96 X X X X X X X X X X X X X X X
 97 X X X X X X X X X X X X X X X
 98 X X X X X X X X X X X X X X X
 99 X X X X X X X X X X X X X X X
 100 X X X X X X X X X X X X X X X
 101 X X X X X X X X X X X X X X X
 102 X X X X X X X X X X X X X X X
 103 X X X X X X X X X X X X X X X
 104 X X X X X X X X X X X X X X X
 105 X X X X X X X X X X X X X X X
 106 X X X X X X X X X X X X X X X
 107 X X X X X X X X X X X X X X X
 108 X X X X X X X X X X X X X X X
 109 X X X X X X X X X X X X X X X
 110 X X X X X X X X X X X X X X X
 111 X X X X X X X X X X X X X X X
 112 X X X X X X X X X X X X X X X
 113 X X X X X X X X X X X X X X X
 114 X X X X X X X X X X X X X X X
 115 X X X X X X X X X X X X X X X
 116 X X X X X X X X X X X X X X X
 117 X X X X X X X X X X X X X X X
 118 X X X X X
 119 </div>
 120 <p>
 121 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 122 This should display a box full of horizontal lines, with a small empty space on the bottom right.
 123 </p>
 124 <div class="container container-smaller writing-mode-vertical-rl">
 125 <div class="float-vertical-smaller"></div>
 126 X X X X X X X X X X X X X X X
 127 X X X X X X X X X X X X X X X
 128 X X X X X X X X X X X X X X X
 129 X X X X X X X X X X X X X X X
 130 X X X X X X X X X X X X X X X
 131 X X X X X X X X X X X X X X X
 132 X X X X X X X X X X X X X X X
 133 X X X X X X X X X X X X X X X
 134 X X X X X X X X X X X X X X X
 135 X X X X X X X X X X X X X X X
 136 X X X X X X X X X X X X X X X
 137 X X X X X X X X X X X X X X X
 138 X X X X X X X X X X X X X X X
 139 X X X X X X X X X X X X X X X
 140 X X X X X X X X X X X X X X X
 141 X X X X X X X X X X X X X X X
 142 X X X X X X X X X X X X X X X
 143 X X X X X X X X X X X X X X X
 144 X X X X X X X X X X X X X X X
 145 X X X X X X X X X X X X X X X
 146 X X X X X X X X X X X X X X X
 147 X X X X X X X X X X X X X X X
 148 X X X X X X X X X X X X X X X
 149 X X X X X
 150 </div>
 151 <p>
 152 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping.
 153 This should display a box full of vertical lines, with a large empty space on the upper right.
 154 </p>
 155 <div class="container container-horizontal-larger">
 156 <div class="float-horizontal-larger"></div>
 157 X X X X X X X X X X X X X X X
 158 X X X X X X X X X X X X X X X
 159 X X X X X X X X X X X X X X X
 160 X X X X X X X X X X X X X X X
 161 X X X X X X X X X X X X X X X
 162 X X X X X X X X X X X X X X X
 163 X X X X X X X X X X X X X X X
 164 X X X X X X X X X X X X X X X
 165 X X X X X X X X X X X X X X X
 166 X X X X X X X X X X X X X X X
 167 X X X X X X X X X X X X X X X
 168 X X X X X X X X X X X X X X X
 169 X X X X X X X X X X X X X X X
 170 X X X X X X X X X X X X X X X
 171 X X X X X X X X X X X X X X X
 172 X X X X X X X X X X X X X X X
 173 X X X X X X X X X X X X X X X
 174 X X X X X X X X X X X X X X X
 175 X X X X X X X X X X X X X X X
 176 X X X X X X X X X X X X X X X
 177 </div>
 178 <p>
 179 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 180 This should display a box full of horizontal lines, with a large empty space on the bottom left.
 181 </p>
 182 <div class="container container-vertical-larger writing-mode-vertical-lr">
 183 <div class="float-vertical-larger"></div>
 184 X X X X X X X X X X X X X X X
 185 X X X X X X X X X X X X X X X
 186 X X X X X X X X X X X X X X X
 187 X X X X X X X X X X X X X X X
 188 X X X X X X X X X X X X X X X
 189 X X X X X X X X X X X X X X X
 190 X X X X X X X X X X X X X X X
 191 X X X X X X X X X X X X X X X
 192 X X X X X X X X X X X X X X X
 193 X X X X X X X X X X X X X X X
 194 X X X X X X X X X X X X X X X
 195 X X X X X X X X X X X X X X X
 196 X X X X X X X X X X X X X X X
 197 X X X X X X X X X X X X X X X
 198 X X X X X X X X X X X X X X X
 199 X X X X X X X X X X X X X X X
 200 X X X X X X X X X X X X X X X
 201 X X X X X X X X X X X X X X X
 202 X X X X X X X X X X X X X X X
 203 X X X X X X X X X X X X X X X
 204 </div>
 205 <p>
 206 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 207 This should display a box full of horizontal lines, with a large empty space on the bottom right.
 208 </p>
 209 <div class="container container-vertical-larger writing-mode-vertical-rl">
 210 <div class="float-vertical-larger"></div>
 211 X X X X X X X X X X X X X X X
 212 X X X X X X X X X X X X X X X
 213 X X X X X X X X X X X X X X X
 214 X X X X X X X X X X X X X X X
 215 X X X X X X X X X X X X X X X
 216 X X X X X X X X X X X X X X X
 217 X X X X X X X X X X X X X X X
 218 X X X X X X X X X X X X X X X
 219 X X X X X X X X X X X X X X X
 220 X X X X X X X X X X X X X X X
 221 X X X X X X X X X X X X X X X
 222 X X X X X X X X X X X X X X X
 223 X X X X X X X X X X X X X X X
 224 X X X X X X X X X X X X X X X
 225 X X X X X X X X X X X X X X X
 226 X X X X X X X X X X X X X X X
 227 X X X X X X X X X X X X X X X
 228 X X X X X X X X X X X X X X X
 229 X X X X X X X X X X X X X X X
 230 X X X X X X X X X X X X X X X
 231 </div>
 232</body>
 233</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-vertical-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<style>
 5 .container {
 6 font: 10px/1 Ahem, sans-serif;
 7 border: 1px solid black;
 8 }
 9 .container-smaller {
 10 height: 300px;
 11 width: 300px;
 12 }
 13 .container-horizontal-larger {
 14 height: 400px;
 15 width: 300px;
 16 }
 17 .container-vertical-larger {
 18 height: 300px;
 19 width: 400px;
 20 }
 21 .float-horizontal-smaller {
 22 float: right;
 23 height: 100px;
 24 width: 200px;
 25 }
 26 .float-vertical-smaller {
 27 float: right;
 28 height: 200px;
 29 width: 100px;
 30 }
 31 .float-horizontal-larger {
 32 float: right;
 33 height: 300px;
 34 width: 200px;
 35 }
 36 .float-vertical-larger {
 37 float: right;
 38 height: 200px;
 39 width: 300px;
 40 }
 41 .writing-mode-vertical-lr {
 42 -webkit-writing-mode: vertical-lr;
 43 }
 44 .writing-mode-vertical-rl {
 45 -webkit-writing-mode: vertical-rl;
 46 }
 47</style>
 48</head>
 49<body>
 50 <p>
 51 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping.
 52 This should display a box full of vertical lines, with a small empty space on the upper right.
 53 </p>
 54 <div class="container container-smaller">
 55 <div class="float-horizontal-smaller"></div>
 56 X X X X X X X X X X X X X X X
 57 X X X X X X X X X X X X X X X
 58 X X X X X X X X X X X X X X X
 59 X X X X X X X X X X X X X X X
 60 X X X X X X X X X X X X X X X
 61 X X X X X X X X X X X X X X X
 62 X X X X X X X X X X X X X X X
 63 X X X X X X X X X X X X X X X
 64 X X X X X X X X X X X X X X X
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 X X X X X X X X X X X X X X X
 71 X X X X X X X X X X X X X X X
 72 X X X X X X X X X X X X X X X
 73 X X X X X X X X X X X X X X X
 74 X X X X X X X X X X X X X X X
 75 X X X X X X X X X X X X X X X
 76 X X X X X X X X X X X X X X X
 77 X X X X X X X X X X X X X X X
 78 X X X X X X X X X X X X X X X
 79 X X X X X
 80 </div>
 81 <p>
 82 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 83 This should display a box full of horizontal lines, with a small empty space on the bottom left.
 84 </p>
 85 <div class="container container-smaller writing-mode-vertical-lr">
 86 <div class="float-vertical-smaller"></div>
 87 X X X X X X X X X X X X X X X
 88 X X X X X X X X X X X X X X X
 89 X X X X X X X X X X X X X X X
 90 X X X X X X X X X X X X X X X
 91 X X X X X X X X X X X X X X X
 92 X X X X X X X X X X X X X X X
 93 X X X X X X X X X X X X X X X
 94 X X X X X X X X X X X X X X X
 95 X X X X X X X X X X X X X X X
 96 X X X X X X X X X X X X X X X
 97 X X X X X X X X X X X X X X X
 98 X X X X X X X X X X X X X X X
 99 X X X X X X X X X X X X X X X
 100 X X X X X X X X X X X X X X X
 101 X X X X X X X X X X X X X X X
 102 X X X X X X X X X X X X X X X
 103 X X X X X X X X X X X X X X X
 104 X X X X X X X X X X X X X X X
 105 X X X X X X X X X X X X X X X
 106 X X X X X X X X X X X X X X X
 107 X X X X X X X X X X X X X X X
 108 X X X X X X X X X X X X X X X
 109 X X X X X X X X X X X X X X X
 110 X X X X X
 111 </div>
 112 <p>
 113 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 114 This should display a box full of horizontal lines, with a small empty space on the bottom right.
 115 </p>
 116 <div class="container container-smaller writing-mode-vertical-rl">
 117 <div class="float-vertical-smaller"></div>
 118 X X X X X X X X X X X X X X X
 119 X X X X X X X X X X X X X X X
 120 X X X X X X X X X X X X X X X
 121 X X X X X X X X X X X X X X X
 122 X X X X X X X X X X X X X X X
 123 X X X X X X X X X X X X X X X
 124 X X X X X X X X X X X X X X X
 125 X X X X X X X X X X X X X X X
 126 X X X X X X X X X X X X X X X
 127 X X X X X X X X X X X X X X X
 128 X X X X X X X X X X X X X X X
 129 X X X X X X X X X X X X X X X
 130 X X X X X X X X X X X X X X X
 131 X X X X X X X X X X X X X X X
 132 X X X X X X X X X X X X X X X
 133 X X X X X X X X X X X X X X X
 134 X X X X X X X X X X X X X X X
 135 X X X X X X X X X X X X X X X
 136 X X X X X X X X X X X X X X X
 137 X X X X X X X X X X X X X X X
 138 X X X X X X X X X X X X X X X
 139 X X X X X X X X X X X X X X X
 140 X X X X X X X X X X X X X X X
 141 X X X X X
 142 </div>
 143 <p>
 144 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping.
 145 This should display a box full of vertical lines, with a large empty space on the upper right.
 146 </p>
 147 <div class="container container-horizontal-larger">
 148 <div class="float-horizontal-larger"></div>
 149 X X X X X X X X X X X X X X X
 150 X X X X X X X X X X X X X X X
 151 X X X X X X X X X X X X X X X
 152 X X X X X X X X X X X X X X X
 153 X X X X X X X X X X X X X X X
 154 X X X X X X X X X X X X X X X
 155 X X X X X X X X X X X X X X X
 156 X X X X X X X X X X X X X X X
 157 X X X X X X X X X X X X X X X
 158 X X X X X X X X X X X X X X X
 159 X X X X X X X X X X X X X X X
 160 X X X X X X X X X X X X X X X
 161 X X X X X X X X X X X X X X X
 162 X X X X X X X X X X X X X X X
 163 X X X X X X X X X X X X X X X
 164 X X X X X X X X X X X X X X X
 165 X X X X X X X X X X X X X X X
 166 X X X X X X X X X X X X X X X
 167 X X X X X X X X X X X X X X X
 168 X X X X X X X X X X X X X X X
 169 </div>
 170 <p>
 171 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 172 This should display a box full of horizontal lines, with a large empty space on the bottom left.
 173 </p>
 174 <div class="container container-vertical-larger writing-mode-vertical-lr">
 175 <div class="float-vertical-larger"></div>
 176 X X X X X X X X X X X X X X X
 177 X X X X X X X X X X X X X X X
 178 X X X X X X X X X X X X X X X
 179 X X X X X X X X X X X X X X X
 180 X X X X X X X X X X X X X X X
 181 X X X X X X X X X X X X X X X
 182 X X X X X X X X X X X X X X X
 183 X X X X X X X X X X X X X X X
 184 X X X X X X X X X X X X X X X
 185 X X X X X X X X X X X X X X X
 186 X X X X X X X X X X X X X X X
 187 X X X X X X X X X X X X X X X
 188 X X X X X X X X X X X X X X X
 189 X X X X X X X X X X X X X X X
 190 X X X X X X X X X X X X X X X
 191 X X X X X X X X X X X X X X X
 192 X X X X X X X X X X X X X X X
 193 X X X X X X X X X X X X X X X
 194 X X X X X X X X X X X X X X X
 195 X X X X X X X X X X X X X X X
 196 </div>
 197 <p>
 198 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 199 This should display a box full of horizontal lines, with a large empty space on the bottom right.
 200 </p>
 201 <div class="container container-vertical-larger writing-mode-vertical-rl">
 202 <div class="float-vertical-larger"></div>
 203 X X X X X X X X X X X X X X X
 204 X X X X X X X X X X X X X X X
 205 X X X X X X X X X X X X X X X
 206 X X X X X X X X X X X X X X X
 207 X X X X X X X X X X X X X X X
 208 X X X X X X X X X X X X X X X
 209 X X X X X X X X X X X X X X X
 210 X X X X X X X X X X X X X X X
 211 X X X X X X X X X X X X X X X
 212 X X X X X X X X X X X X X X X
 213 X X X X X X X X X X X X X X X
 214 X X X X X X X X X X X X X X X
 215 X X X X X X X X X X X X X X X
 216 X X X X X X X X X X X X X X X
 217 X X X X X X X X X X X X X X X
 218 X X X X X X X X X X X X X X X
 219 X X X X X X X X X X X X X X X
 220 X X X X X X X X X X X X X X X
 221 X X X X X X X X X X X X X X X
 222 X X X X X X X X X X X X X X X
 223 </div>
 224</body>
 225</html>

LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rectangle-vertical.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<script>
 5 if (window.internals)
 6 window.internals.settings.setCSSExclusionsEnabled(true);
 7</script>
 8<style>
 9 .container {
 10 font: 10px/1 Ahem, sans-serif;
 11 border: 1px solid black;
 12 }
 13 .container-smaller {
 14 height: 300px;
 15 width: 300px;
 16 }
 17 .container-horizontal-larger {
 18 height: 400px;
 19 width: 300px;
 20 }
 21 .container-vertical-larger {
 22 height: 300px;
 23 width: 400px;
 24 }
 25 .float-horizontal-smaller {
 26 -webkit-shape-outside: rectangle(0px, 0px, 200px, 100px);
 27 float: right;
 28 height: 200px;
 29 width: 200px;
 30 }
 31 .float-vertical-smaller {
 32 -webkit-shape-outside: rectangle(0px, 0px, 100px, 200px);
 33 float: right;
 34 height: 200px;
 35 width: 200px;
 36 }
 37 .float-horizontal-larger {
 38 -webkit-shape-outside: rectangle(0px, 0px, 200px, 300px);
 39 float: right;
 40 height: 200px;
 41 width: 200px;
 42 }
 43 .float-vertical-larger {
 44 -webkit-shape-outside: rectangle(0px, 0px, 300px, 200px);
 45 float: right;
 46 height: 200px;
 47 width: 200px;
 48 }
 49 .writing-mode-vertical-lr {
 50 -webkit-writing-mode: vertical-lr;
 51 }
 52 .writing-mode-vertical-rl {
 53 -webkit-writing-mode: vertical-rl;
 54 }
 55</style>
 56</head>
 57<body>
 58 <p>
 59 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping.
 60 This should display a box full of vertical lines, with a small empty space on the upper right.
 61 </p>
 62 <div class="container container-smaller">
 63 <div class="float-horizontal-smaller"></div>
 64 X X X X X X X X X X X X X X X
 65 X X X X X X X X X X X X X X X
 66 X X X X X X X X X X X X X X X
 67 X X X X X X X X X X X X X X X
 68 X X X X X X X X X X X X X X X
 69 X X X X X X X X X X X X X X X
 70 X X X X X X X X X X X X X X X
 71 X X X X X X X X X X X X X X X
 72 X X X X X X X X X X X X X X X
 73 X X X X X X X X X X X X X X X
 74 X X X X X X X X X X X X X X X
 75 X X X X X X X X X X X X X X X
 76 X X X X X X X X X X X X X X X
 77 X X X X X X X X X X X X X X X
 78 X X X X X X X X X X X X X X X
 79 X X X X X X X X X X X X X X X
 80 X X X X X X X X X X X X X X X
 81 X X X X X X X X X X X X X X X
 82 X X X X X X X X X X X X X X X
 83 X X X X X X X X X X X X X X X
 84 X X X X X X X X X X X X X X X
 85 X X X X X X X X X X X X X X X
 86 X X X X X X X X X X X X X X X
 87 X X X X X
 88 </div>
 89 <p>
 90 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 91 This should display a box full of horizontal lines, with a small empty space on the bottom left.
 92 </p>
 93 <div class="container container-smaller writing-mode-vertical-lr">
 94 <div class="float-vertical-smaller"></div>
 95 X X X X X X X X X X X X X X X
 96 X X X X X X X X X X X X X X X
 97 X X X X X X X X X X X X X X X
 98 X X X X X X X X X X X X X X X
 99 X X X X X X X X X X X X X X X
 100 X X X X X X X X X X X X X X X
 101 X X X X X X X X X X X X X X X
 102 X X X X X X X X X X X X X X X
 103 X X X X X X X X X X X X X X X
 104 X X X X X X X X X X X X X X X
 105 X X X X X X X X X X X X X X X
 106 X X X X X X X X X X X X X X X
 107 X X X X X X X X X X X X X X X
 108 X X X X X X X X X X X X X X X
 109 X X X X X X X X X X X X X X X
 110 X X X X X X X X X X X X X X X
 111 X X X X X X X X X X X X X X X
 112 X X X X X X X X X X X X X X X
 113 X X X X X X X X X X X X X X X
 114 X X X X X X X X X X X X X X X
 115 X X X X X X X X X X X X X X X
 116 X X X X X X X X X X X X X X X
 117 X X X X X X X X X X X X X X X
 118 X X X X X
 119 </div>
 120 <p>
 121 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 122 This should display a box full of horizontal lines, with a small empty space on the bottom right.
 123 </p>
 124 <div class="container container-smaller writing-mode-vertical-rl">
 125 <div class="float-vertical-smaller"></div>
 126 X X X X X X X X X X X X X X X
 127 X X X X X X X X X X X X X X X
 128 X X X X X X X X X X X X X X X
 129 X X X X X X X X X X X X X X X
 130 X X X X X X X X X X X X X X X
 131 X X X X X X X X X X X X X X X
 132 X X X X X X X X X X X X X X X
 133 X X X X X X X X X X X X X X X
 134 X X X X X X X X X X X X X X X
 135 X X X X X X X X X X X X X X X
 136 X X X X X X X X X X X X X X X
 137 X X X X X X X X X X X X X X X
 138 X X X X X X X X X X X X X X X
 139 X X X X X X X X X X X X X X X
 140 X X X X X X X X X X X X X X X
 141 X X X X X X X X X X X X X X X
 142 X X X X X X X X X X X X X X X
 143 X X X X X X X X X X X X X X X
 144 X X X X X X X X X X X X X X X
 145 X X X X X X X X X X X X X X X
 146 X X X X X X X X X X X X X X X
 147 X X X X X X X X X X X X X X X
 148 X X X X X X X X X X X X X X X
 149 X X X X X
 150 </div>
 151 <p>
 152 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping.
 153 This should display a box full of vertical lines, with a large empty space on the upper right.
 154 </p>
 155 <div class="container container-horizontal-larger">
 156 <div class="float-horizontal-larger"></div>
 157 X X X X X X X X X X X X X X X
 158 X X X X X X X X X X X X X X X
 159 X X X X X X X X X X X X X X X
 160 X X X X X X X X X X X X X X X
 161 X X X X X X X X X X X X X X X
 162 X X X X X X X X X X X X X X X
 163 X X X X X X X X X X X X X X X
 164 X X X X X X X X X X X X X X X
 165 X X X X X X X X X X X X X X X
 166 X X X X X X X X X X X X X X X
 167 X X X X X X X X X X X X X X X
 168 X X X X X X X X X X X X X X X
 169 X X X X X X X X X X X X X X X
 170 X X X X X X X X X X X X X X X
 171 X X X X X X X X X X X X X X X
 172 X X X X X X X X X X X X X X X
 173 X X X X X X X X X X X X X X X
 174 X X X X X X X X X X X X X X X
 175 X X X X X X X X X X X X X X X
 176 X X X X X X X X X X X X X X X
 177 </div>
 178 <p>
 179 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical left-right writing mode.
 180 This should display a box full of horizontal lines, with a large empty space on the bottom left.
 181 </p>
 182 <div class="container container-vertical-larger writing-mode-vertical-lr">
 183 <div class="float-vertical-larger"></div>
 184 X X X X X X X X X X X X X X X
 185 X X X X X X X X X X X X X X X
 186 X X X X X X X X X X X X X X X
 187 X X X X X X X X X X X X X X X
 188 X X X X X X X X X X X X X X X
 189 X X X X X X X X X X X X X X X
 190 X X X X X X X X X X X X X X X
 191 X X X X X X X X X X X X X X X
 192 X X X X X X X X X X X X X X X
 193 X X X X X X X X X X X X X X X
 194 X X X X X X X X X X X X X X X
 195 X X X X X X X X X X X X X X X
 196 X X X X X X X X X X X X X X X
 197 X X X X X X X X X X X X X X X
 198 X X X X X X X X X X X X X X X
 199 X X X X X X X X X X X X X X X
 200 X X X X X X X X X X X X X X X
 201 X X X X X X X X X X X X X X X
 202 X X X X X X X X X X X X X X X
 203 X X X X X X X X X X X X X X X
 204 </div>
 205 <p>
 206 Requites Ahem font. Tests that the shape on a right float can reduce the size of the float's box vertically for purposes of text wrapping in vertical right-left writing mode.
 207 This should display a box full of horizontal lines, with a large empty space on the bottom right.
 208 </p>
 209 <div class="container container-vertical-larger writing-mode-vertical-rl">
 210 <div class="float-vertical-larger"></div>
 211 X X X X X X X X X X X X X X X
 212 X X X X X X X X X X X X X X X
 213 X X X X X X X X X X X X X X X
 214 X X X X X X X X X X X X X X X
 215 X X X X X X X X X X X X X X X
 216 X X X X X X X X X X X X X X X
 217 X X X X X X X X X X X X X X X
 218 X X X X X X X X X X X X X X X
 219 X X X X X X X X X X X X X X X
 220 X X X X X X X X X X X X X X X
 221 X X X X X X X X X X X X X X X
 222 X X X X X X X X X X X X X X X
 223 X X X X X X X X X X X X X X X
 224 X X X X X X X X X X X X X X X
 225 X X X X X X X X X X X X X X X
 226 X X X X X X X X X X X X X X X
 227 X X X X X X X X X X X X X X X
 228 X X X X X X X X X X X X X X X
 229 X X X X X X X X X X X X X X X
 230 X X X X X X X X X X X X X X X
 231 </div>
 232</body>
 233</html>