Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-07 18:04:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out 8 changesets (bug 1311244) for OOM failures in Win7 debug R1

Browse Source 
Backed out changeset d5411799a28f (bug 1311244)
Backed out changeset ff9c71e1dbc8 (bug 1311244)
Backed out changeset 96988ec5b81c (bug 1311244)
Backed out changeset 9d257713833a (bug 1311244)
Backed out changeset 2c33905ccb04 (bug 1311244)
Backed out changeset 20148e33d523 (bug 1311244)
Backed out changeset f36cd1532fdb (bug 1311244)
Backed out changeset 2ee4ea83a6b4 (bug 1311244)
This commit is contained in:
Phil Ringnalda 2017-01-08 21:11:25 -08:00
parent b6276d9ee4
commit a52a0f5571
52 changed files with 221 additions and 2719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
layout/base/ShapeUtils.cpp
View File

@ -1,80 +0,0 @@
/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set ts=8 sts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#include "mozilla/ShapeUtils.h"
#include <cstdlib>
#include "nsCSSRendering.h"
#include "nsRuleNode.h"
#include "nsStyleCoord.h"
#include "nsStyleStruct.h"
#include "SVGContentUtils.h"
namespace mozilla {
nscoord
ShapeUtils::ComputeShapeRadius(const StyleShapeRadius aType,
const nscoord aCenter,
const nscoord aPosMin,
const nscoord aPosMax)
{
nscoord dist1 = std::abs(aPosMin - aCenter);
nscoord dist2 = std::abs(aPosMax - aCenter);
nscoord length = 0;
switch (aType) {
case StyleShapeRadius::FarthestSide:
length = dist1 > dist2 ? dist1 : dist2;
break;
case StyleShapeRadius::ClosestSide:
length = dist1 > dist2 ? dist2 : dist1;
break;
}
return length;
}
nsPoint
ShapeUtils::ComputeCircleOrEllipseCenter(StyleBasicShape* const aBasicShape,
const nsRect& aRefBox)
{
nsPoint topLeft, anchor;
nsSize size(aRefBox.Size());
nsImageRenderer::ComputeObjectAnchorPoint(aBasicShape->GetPosition(),
size, size,
&topLeft, &anchor);
return nsPoint(anchor.x + aRefBox.x, anchor.y + aRefBox.y);
}
nscoord
ShapeUtils::ComputeCircleRadius(StyleBasicShape* const aBasicShape,
const nsPoint& aCenter,
const nsRect& aRefBox)
{
const nsTArray<nsStyleCoord>& coords = aBasicShape->Coordinates();
MOZ_ASSERT(coords.Length() == 1, "wrong number of arguments");
nscoord r = 0;
if (coords[0].GetUnit() == eStyleUnit_Enumerated) {
const auto styleShapeRadius = coords[0].GetEnumValue<StyleShapeRadius>();
nscoord horizontal =
ComputeShapeRadius(styleShapeRadius, aCenter.x, aRefBox.x, aRefBox.XMost());
nscoord vertical =
ComputeShapeRadius(styleShapeRadius, aCenter.y, aRefBox.y, aRefBox.YMost());
r = styleShapeRadius == StyleShapeRadius::FarthestSide
? std::max(horizontal, vertical)
: std::min(horizontal, vertical);
} else {
// We resolve percent <shape-radius> value for circle() as defined here:
// https://drafts.csswg.org/css-shapes/#funcdef-circle
double referenceLength =
SVGContentUtils::ComputeNormalizedHypotenuse(aRefBox.width,
aRefBox.height);
r = nsRuleNode::ComputeCoordPercentCalc(coords[0],
NSToCoordRound(referenceLength));
}
return r;
}
} // namespace mozilla

55
layout/base/ShapeUtils.h
View File

@ -1,55 +0,0 @@
/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set ts=8 sts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#ifndef mozilla_ShapeUtils_h
#define mozilla_ShapeUtils_h
#include "nsCoord.h"
#include "nsStyleConsts.h"
struct nsPoint;
struct nsRect;
namespace mozilla {
class StyleBasicShape;
// ShapeUtils is a namespace class containing utility functions related to
// processing basic shapes in the CSS Shapes Module.
// https://drafts.csswg.org/css-shapes/#basic-shape-functions
//
struct ShapeUtils final
{
// Compute the length of a keyword <shape-radius>, i.e. closest-side or
// farthest-side, for a circle or an ellipse on a single dimension. The
// caller needs to call for both dimensions and combine the result.
// https://drafts.csswg.org/css-shapes/#typedef-shape-radius.
//
// @return The length of the radius in app units.
static nscoord ComputeShapeRadius(const StyleShapeRadius aType,
const nscoord aCenter,
const nscoord aPosMin,
const nscoord aPosMax);
// Compute the center of a circle or an ellipse.
//
// @param aRefBox The reference box of the basic shape.
// @return The point of the center.
static nsPoint ComputeCircleOrEllipseCenter(
StyleBasicShape* const aBasicShape,
const nsRect& aRefBox);
// Compute the radius for a circle.
// @param aCenter the center of the circle.
// @param aRefBox the reference box of the circle.
// @return The length of the radius in app unit.
static nscoord ComputeCircleRadius(
mozilla::StyleBasicShape* const aBasicShape,
const nsPoint& aCenter, const nsRect& aRefBox);
};
} // namespace mozilla
#endif // mozilla_ShapeUtils_h

2
layout/base/moz.build
View File

@ -80,7 +80,6 @@ EXPORTS.mozilla += [
'RestyleManagerHandleInlines.h',
'ServoRestyleManager.h',
'ServoRestyleManagerInlines.h',
'ShapeUtils.h',
'StaticPresData.h',
]
@ -115,7 +114,6 @@ UNIFIED_SOURCES += [
'RestyleTracker.cpp',
'ScrollbarStyles.cpp',
'ServoRestyleManager.cpp',
'ShapeUtils.cpp',
'StackArena.cpp',
'StaticPresData.cpp',
'TouchManager.cpp',

1
layout/base/nsLayoutUtils.cpp
View File

@ -22,7 +22,6 @@
#include "mozilla/dom/ContentChild.h"
#include "mozilla/Unused.h"
#include "nsCharTraits.h"
#include "nsDocument.h"
#include "nsFontMetrics.h"
#include "nsPresContext.h"
#include "nsIContent.h"

5
layout/generic/BlockReflowInput.cpp
View File

@ -988,8 +988,9 @@ BlockReflowInput::FlowAndPlaceFloat(nsIFrame* aFloat)
region.BSize(wm) = std::max(region.BSize(wm),
ContentBSize() - floatPos.B(wm));
}
mFloatManager->AddFloat(aFloat, region, wm, ContainerSize());
DebugOnly<nsresult> rv = mFloatManager->AddFloat(aFloat, region, wm,
ContainerSize());
MOZ_ASSERT(NS_SUCCEEDED(rv), "bad float placement");
// store region
nsFloatManager::StoreRegionFor(wm, aFloat, region, ContainerSize());

10
layout/generic/WritingModes.h
View File

@ -784,16 +784,6 @@ public:
CHECK_WRITING_MODE(aWritingMode);
return mPoint.y;
}
nscoord LineRelative(WritingMode aWritingMode,
const nsSize& aContainerSize) const // line-axis
{
CHECK_WRITING_MODE(aWritingMode);
if (aWritingMode.IsBidiLTR()) {
return I();
}
return (aWritingMode.IsVertical() ? aContainerSize.height
: aContainerSize.width) - I();
}
/**
* These non-const accessors return a reference (lvalue) that can be

361
layout/generic/nsFloatManager.cpp
View File

@ -10,7 +10,6 @@
#include <algorithm>
#include "mozilla/ReflowInput.h"
#include "mozilla/ShapeUtils.h"
#include "nsBlockFrame.h"
#include "nsError.h"
#include "nsIPresShell.h"
@ -188,7 +187,7 @@ nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
// There aren't any more floats that could intersect this band.
break;
}
if (fi.IsEmpty(aShapeType)) {
if (fi.IsEmpty()) {
// For compatibility, ignore floats with empty rects, even though it
// disagrees with the spec. (We might want to fix this in the
// future, though.)
@ -262,7 +261,7 @@ nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
lineRight - lineLeft, blockSize, haveFloats);
}
void
nsresult
nsFloatManager::AddFloat(nsIFrame* aFloatFrame, const LogicalRect& aMarginRect,
WritingMode aWM, const nsSize& aContainerSize)
{
@ -291,7 +290,10 @@ nsFloatManager::AddFloat(nsIFrame* aFloatFrame, const LogicalRect& aMarginRect,
if (thisBEnd > sideBEnd)
sideBEnd = thisBEnd;
mFloats.AppendElement(Move(info));
if (!mFloats.AppendElement(info))
return NS_ERROR_OUT_OF_MEMORY;
return NS_OK;
}
// static
@ -528,145 +530,6 @@ nsFloatManager::ClearContinues(StyleClear aBreakType) const
aBreakType == StyleClear::Right));
}
/////////////////////////////////////////////////////////////////////////////
// BoxShapeInfo
nscoord
nsFloatManager::BoxShapeInfo::LineLeft(WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const
{
nscoord radii[8];
bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
if (!hasRadii) {
return mShapeBoxRect.x;
}
// Get the physical side for line-left since border-radii are in
// the physical axis.
mozilla::Side lineLeftSide =
aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirLeft));
nscoord blockStartCornerRadiusL =
radii[SideToHalfCorner(lineLeftSide, true, false)];
nscoord blockStartCornerRadiusB =
radii[SideToHalfCorner(lineLeftSide, true, true)];
nscoord blockEndCornerRadiusL =
radii[SideToHalfCorner(lineLeftSide, false, false)];
nscoord blockEndCornerRadiusB =
radii[SideToHalfCorner(lineLeftSide, false, true)];
if (aWM.IsLineInverted()) {
// This happens only when aWM is vertical-lr. Need to swap blockStart
// and blockEnd corners.
std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
}
nscoord lineLeftDiff =
ComputeEllipseLineInterceptDiff(
mShapeBoxRect.y, mShapeBoxRect.YMost(),
blockStartCornerRadiusL, blockStartCornerRadiusB,
blockEndCornerRadiusL, blockEndCornerRadiusB,
aBStart, aBEnd);
return mShapeBoxRect.x + lineLeftDiff;
}
nscoord
nsFloatManager::BoxShapeInfo::LineRight(WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const
{
nscoord radii[8];
bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
if (!hasRadii) {
return mShapeBoxRect.XMost();
}
// Get the physical side for line-right since border-radii are in
// the physical axis.
mozilla::Side lineRightSide =
aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirRight));
nscoord blockStartCornerRadiusL =
radii[SideToHalfCorner(lineRightSide, false, false)];
nscoord blockStartCornerRadiusB =
radii[SideToHalfCorner(lineRightSide, false, true)];
nscoord blockEndCornerRadiusL =
radii[SideToHalfCorner(lineRightSide, true, false)];
nscoord blockEndCornerRadiusB =
radii[SideToHalfCorner(lineRightSide, true, true)];
if (aWM.IsLineInverted()) {
// This happens only when aWM is vertical-lr. Need to swap blockStart
// and blockEnd corners.
std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
}
nscoord lineRightDiff =
ComputeEllipseLineInterceptDiff(
mShapeBoxRect.y, mShapeBoxRect.YMost(),
blockStartCornerRadiusL, blockStartCornerRadiusB,
blockEndCornerRadiusL, blockEndCornerRadiusB,
aBStart, aBEnd);
return mShapeBoxRect.XMost() - lineRightDiff;
}
/////////////////////////////////////////////////////////////////////////////
// CircleShapeInfo
nsFloatManager::CircleShapeInfo::CircleShapeInfo(
StyleBasicShape* const aBasicShape,
nscoord aLineLeft,
nscoord aBlockStart,
const LogicalRect& aShapeBoxRect,
WritingMode aWM,
const nsSize& aContainerSize)
{
// Use physical coordinates to compute the center of the circle() since
// the <position> keywords such as 'left', 'top', etc. are physical.
// https://drafts.csswg.org/css-shapes-1/#funcdef-circle
nsRect physicalShapeBoxRect =
aShapeBoxRect.GetPhysicalRect(aWM, aContainerSize);
nsPoint physicalCenter =
ShapeUtils::ComputeCircleOrEllipseCenter(aBasicShape, physicalShapeBoxRect);
mRadius =
ShapeUtils::ComputeCircleRadius(aBasicShape, physicalCenter,
physicalShapeBoxRect);
// Convert the coordinate space back to the same as FloatInfo::mRect.
// mCenter.x is in the line-axis of the frame manager and mCenter.y are in
// the frame manager's real block-axis.
LogicalPoint logicalCenter(aWM, physicalCenter, aContainerSize);
mCenter = nsPoint(logicalCenter.LineRelative(aWM, aContainerSize) + aLineLeft,
logicalCenter.B(aWM) + aBlockStart);
}
nscoord
nsFloatManager::CircleShapeInfo::LineLeft(WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const
{
nscoord lineLeftDiff =
ComputeEllipseLineInterceptDiff(mCenter.y - mRadius, mCenter.y + mRadius,
mRadius, mRadius, mRadius, mRadius,
aBStart, aBEnd);
return mCenter.x - mRadius + lineLeftDiff;
}
nscoord
nsFloatManager::CircleShapeInfo::LineRight(WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const
{
nscoord lineRightDiff =
ComputeEllipseLineInterceptDiff(mCenter.y - mRadius, mCenter.y + mRadius,
mRadius, mRadius, mRadius, mRadius,
aBStart, aBEnd);
return mCenter.x + mRadius - lineRightDiff;
}
/////////////////////////////////////////////////////////////////////////////
// FloatInfo
@ -685,58 +548,41 @@ nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
if (shapeOutside.GetType() == StyleShapeSourceType::None) {
return;
}
// Initialize <shape-box>'s reference rect.
LogicalRect rect = aMarginRect;
switch (shapeOutside.GetReferenceBox()) {
case StyleShapeOutsideShapeBox::Content:
rect.Deflate(aWM, mFrame->GetLogicalUsedPadding(aWM));
MOZ_FALLTHROUGH;
case StyleShapeOutsideShapeBox::Padding:
rect.Deflate(aWM, mFrame->GetLogicalUsedBorder(aWM));
MOZ_FALLTHROUGH;
case StyleShapeOutsideShapeBox::Border:
rect.Deflate(aWM, mFrame->GetLogicalUsedMargin(aWM));
break;
case StyleShapeOutsideShapeBox::Margin:
// Do nothing. rect is already a margin rect.
break;
case StyleShapeOutsideShapeBox::NoBox:
MOZ_ASSERT(shapeOutside.GetType() != StyleShapeSourceType::Box,
"Box source type must have <shape-box> specified!");
break;
}
if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
nsRect shapeBoxRect(rect.LineLeft(aWM, aContainerSize) + aLineLeft,
rect.BStart(aWM) + aBlockStart,
rect.ISize(aWM), rect.BSize(aWM));
mShapeInfo = MakeUnique<BoxShapeInfo>(shapeBoxRect, mFrame);
} else if (shapeOutside.GetType() == StyleShapeSourceType::Shape) {
StyleBasicShape* const basicShape = shapeOutside.GetBasicShape();
// Initialize shape-box reference rect.
LogicalRect rect = aMarginRect;
if (basicShape->GetShapeType() == StyleBasicShapeType::Circle) {
mShapeInfo = MakeUnique<CircleShapeInfo>(basicShape, aLineLeft, aBlockStart,
rect, aWM, aContainerSize);
switch (shapeOutside.GetReferenceBox()) {
case StyleShapeOutsideShapeBox::Content:
rect.Deflate(aWM, mFrame->GetLogicalUsedPadding(aWM));
MOZ_FALLTHROUGH;
case StyleShapeOutsideShapeBox::Padding:
rect.Deflate(aWM, mFrame->GetLogicalUsedBorder(aWM));
MOZ_FALLTHROUGH;
case StyleShapeOutsideShapeBox::Border:
rect.Deflate(aWM, mFrame->GetLogicalUsedMargin(aWM));
break;
case StyleShapeOutsideShapeBox::Margin:
// Do nothing. rect is already a margin rect.
break;
case StyleShapeOutsideShapeBox::NoBox:
MOZ_ASSERT_UNREACHABLE("Why don't we have a shape-box?");
break;
}
} else if (shapeOutside.GetType() == StyleShapeSourceType::URL) {
// Bug 1265343: Implement 'shape-image-threshold'.
} else {
MOZ_ASSERT_UNREACHABLE("Unknown StyleShapeSourceType!");
mShapeBoxRect.emplace(rect.LineLeft(aWM, aContainerSize) + aLineLeft,
rect.BStart(aWM) + aBlockStart,
rect.ISize(aWM), rect.BSize(aWM));
}
}
#ifdef NS_BUILD_REFCNT_LOGGING
nsFloatManager::FloatInfo::FloatInfo(FloatInfo&& aOther)
: mFrame(Move(aOther.mFrame))
, mLeftBEnd(Move(aOther.mLeftBEnd))
, mRightBEnd(Move(aOther.mRightBEnd))
, mRect(Move(aOther.mRect))
, mShapeInfo(Move(aOther.mShapeInfo))
nsFloatManager::FloatInfo::FloatInfo(const FloatInfo& aOther)
: mFrame(aOther.mFrame)
, mLeftBEnd(aOther.mLeftBEnd)
, mRightBEnd(aOther.mRightBEnd)
, mRect(aOther.mRect)
, mShapeBoxRect(aOther.mShapeBoxRect)
{
MOZ_COUNT_CTOR(nsFloatManager::FloatInfo);
}
@ -758,14 +604,51 @@ nsFloatManager::FloatInfo::LineLeft(WritingMode aWM,
}
MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
if (!mShapeInfo) {
const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
if (shapeOutside.GetType() == StyleShapeSourceType::None) {
return LineLeft();
}
// Clip the flow area to the margin-box because
// https://drafts.csswg.org/css-shapes-1/#relation-to-box-model-and-float-behavior
// says "When a shape is used to define a float area, the shape is clipped
// to the float’s margin box."
return std::max(LineLeft(), mShapeInfo->LineLeft(aWM, aBStart, aBEnd));
if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
nscoord radii[8];
bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
if (!hasRadii) {
return ShapeBoxRect().x;
}
// Get the physical side for line-left since border-radii are in
// the physical axis.
mozilla::Side lineLeftSide =
aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirLeft));
nscoord blockStartCornerRadiusL =
radii[SideToHalfCorner(lineLeftSide, true, false)];
nscoord blockStartCornerRadiusB =
radii[SideToHalfCorner(lineLeftSide, true, true)];
nscoord blockEndCornerRadiusL =
radii[SideToHalfCorner(lineLeftSide, false, false)];
nscoord blockEndCornerRadiusB =
radii[SideToHalfCorner(lineLeftSide, false, true)];
if (aWM.IsLineInverted()) {
// This happens only when aWM is vertical-lr. Need to swap blockStart
// and blockEnd corners.
std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
}
nscoord lineLeftDiff =
ComputeEllipseLineInterceptDiff(
ShapeBoxRect().y, ShapeBoxRect().YMost(),
blockStartCornerRadiusL, blockStartCornerRadiusB,
blockEndCornerRadiusL, blockEndCornerRadiusB,
aBStart, aBEnd);
return ShapeBoxRect().x + lineLeftDiff;
}
// XXX: Other shape source types are not implemented yet.
return LineLeft();
}
nscoord
@ -779,59 +662,55 @@ nsFloatManager::FloatInfo::LineRight(WritingMode aWM,
}
MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
if (!mShapeInfo) {
const StyleShapeOutside& shapeOutside = mFrame->StyleDisplay()->mShapeOutside;
if (shapeOutside.GetType() == StyleShapeSourceType::None) {
return LineRight();
}
// Clip the flow area to the margin-box. See LineLeft().
return std::min(LineRight(), mShapeInfo->LineRight(aWM, aBStart, aBEnd));
}
nscoord
nsFloatManager::FloatInfo::BStart(ShapeType aShapeType) const
{
if (aShapeType == ShapeType::Margin) {
return BStart();
if (shapeOutside.GetType() == StyleShapeSourceType::Box) {
nscoord radii[8];
bool hasRadii = mFrame->GetShapeBoxBorderRadii(radii);
if (!hasRadii) {
return ShapeBoxRect().XMost();
}
// Get the physical side for line-right since border-radii are in
// the physical axis.
mozilla::Side lineRightSide =
aWM.PhysicalSide(aWM.LogicalSideForLineRelativeDir(eLineRelativeDirRight));
nscoord blockStartCornerRadiusL =
radii[SideToHalfCorner(lineRightSide, false, false)];
nscoord blockStartCornerRadiusB =
radii[SideToHalfCorner(lineRightSide, false, true)];
nscoord blockEndCornerRadiusL =
radii[SideToHalfCorner(lineRightSide, true, false)];
nscoord blockEndCornerRadiusB =
radii[SideToHalfCorner(lineRightSide, true, true)];
if (aWM.IsLineInverted()) {
// This happens only when aWM is vertical-lr. Need to swap blockStart
// and blockEnd corners.
std::swap(blockStartCornerRadiusL, blockEndCornerRadiusL);
std::swap(blockStartCornerRadiusB, blockEndCornerRadiusB);
}
nscoord lineRightDiff =
ComputeEllipseLineInterceptDiff(
ShapeBoxRect().y, ShapeBoxRect().YMost(),
blockStartCornerRadiusL, blockStartCornerRadiusB,
blockEndCornerRadiusL, blockEndCornerRadiusB,
aBStart, aBEnd);
return ShapeBoxRect().XMost() - lineRightDiff;
}
MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
if (!mShapeInfo) {
return BStart();
}
// Clip the flow area to the margin-box. See LineLeft().
return std::max(BStart(), mShapeInfo->BStart());
}
// XXX: Other shape source types are not implemented yet.
nscoord
nsFloatManager::FloatInfo::BEnd(ShapeType aShapeType) const
{
if (aShapeType == ShapeType::Margin) {
return BEnd();
}
MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
if (!mShapeInfo) {
return BEnd();
}
// Clip the flow area to the margin-box. See LineLeft().
return std::min(BEnd(), mShapeInfo->BEnd());
}
bool
nsFloatManager::FloatInfo::IsEmpty(ShapeType aShapeType) const
{
if (aShapeType == ShapeType::Margin) {
return IsEmpty();
}
MOZ_ASSERT(aShapeType == ShapeType::ShapeOutside);
if (!mShapeInfo) {
return IsEmpty();
}
return mShapeInfo->IsEmpty();
return LineRight();
}
/* static */ nscoord
nsFloatManager::ComputeEllipseLineInterceptDiff(
nsFloatManager::FloatInfo::ComputeEllipseLineInterceptDiff(
const nscoord aShapeBoxBStart, const nscoord aShapeBoxBEnd,
const nscoord aBStartCornerRadiusL, const nscoord aBStartCornerRadiusB,
const nscoord aBEndCornerRadiusL, const nscoord aBEndCornerRadiusB,
@ -901,9 +780,9 @@ nsFloatManager::ComputeEllipseLineInterceptDiff(
}
/* static */ nscoord
nsFloatManager::XInterceptAtY(const nscoord aY,
const nscoord aRadiusX,
const nscoord aRadiusY)
nsFloatManager::FloatInfo::XInterceptAtY(const nscoord aY,
const nscoord aRadiusX,
const nscoord aRadiusY)
{
// Solve for x in the ellipse equation (x/radiusX)^2 + (y/radiusY)^2 = 1.
MOZ_ASSERT(aRadiusY > 0);

143
layout/generic/nsFloatManager.h
View File

@ -10,12 +10,11 @@
#define nsFloatManager_h_
#include "mozilla/Attributes.h"
#include "mozilla/UniquePtr.h"
#include "mozilla/Maybe.h"
#include "mozilla/WritingModes.h"
#include "nsCoord.h"
#include "nsFrameList.h" // for DEBUG_FRAME_DUMP
#include "nsIntervalSet.h"
#include "nsPoint.h"
#include "nsTArray.h"
class nsIPresShell;
@ -23,7 +22,6 @@ class nsIFrame;
class nsPresContext;
namespace mozilla {
struct ReflowInput;
class StyleBasicShape;
} // namespace mozilla
/**
@ -203,9 +201,9 @@ public:
* aMarginRect is relative to the current translation. The caller
* must ensure aMarginRect.height >= 0 and aMarginRect.width >= 0.
*/
void AddFloat(nsIFrame* aFloatFrame,
const mozilla::LogicalRect& aMarginRect,
mozilla::WritingMode aWM, const nsSize& aContainerSize);
nsresult AddFloat(nsIFrame* aFloatFrame,
const mozilla::LogicalRect& aMarginRect,
mozilla::WritingMode aWM, const nsSize& aContainerSize);
/**
* Notify that we tried to place a float that could not fit at all and
@ -333,99 +331,6 @@ public:
#endif
private:
// Compute the minimum line-axis difference between the bounding shape
// box and its rounded corner within the given band (block-axis region).
// This is used as a helper function to compute the LineRight() and
// LineLeft(). See the picture in the implementation for an example.
// RadiusL and RadiusB stand for radius on the line-axis and block-axis.
//
// Returns radius-x diff on the line-axis, or 0 if there's no rounded
// corner within the given band.
static nscoord ComputeEllipseLineInterceptDiff(
const nscoord aShapeBoxBStart, const nscoord aShapeBoxBEnd,
const nscoord aBStartCornerRadiusL, const nscoord aBStartCornerRadiusB,
const nscoord aBEndCornerRadiusL, const nscoord aBEndCornerRadiusB,
const nscoord aBandBStart, const nscoord aBandBEnd);
static nscoord XInterceptAtY(const nscoord aY, const nscoord aRadiusX,
const nscoord aRadiusY);
// ShapeInfo is an abstract class for implementing all the shapes in CSS
// Shapes Module. A subclass needs to override all the methods to adjust
// the flow area with respect to its shape.
class ShapeInfo
{
public:
virtual ~ShapeInfo() {}
virtual nscoord LineLeft(mozilla::WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const = 0;
virtual nscoord LineRight(mozilla::WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const = 0;
virtual nscoord BStart() const = 0;
virtual nscoord BEnd() const = 0;
virtual bool IsEmpty() const = 0;
};
// Implements shape-outside: <shape-box>.
class BoxShapeInfo final : public ShapeInfo
{
public:
BoxShapeInfo(const nsRect& aShapeBoxRect, nsIFrame* const aFrame)
: mShapeBoxRect(aShapeBoxRect)
, mFrame(aFrame)
{
}
nscoord LineLeft(mozilla::WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const override;
nscoord LineRight(mozilla::WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const override;
nscoord BStart() const override { return mShapeBoxRect.y; }
nscoord BEnd() const override { return mShapeBoxRect.YMost(); }
bool IsEmpty() const override { return mShapeBoxRect.IsEmpty(); };
private:
// This is the reference box of css shape-outside if specified, which
// implements the <shape-box> value in the CSS Shapes Module Level 1.
// The coordinate space is the same as FloatInfo::mRect.
const nsRect mShapeBoxRect;
// The frame of the float.
nsIFrame* const mFrame;
};
// Implements shape-outside: circle().
class CircleShapeInfo final : public ShapeInfo
{
public:
CircleShapeInfo(mozilla::StyleBasicShape* const aBasicShape,
nscoord aLineLeft,
nscoord aBlockStart,
const mozilla::LogicalRect& aShapeBoxRect,
mozilla::WritingMode aWM,
const nsSize& aContainerSize);
nscoord LineLeft(mozilla::WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const override;
nscoord LineRight(mozilla::WritingMode aWM,
const nscoord aBStart,
const nscoord aBEnd) const override;
nscoord BStart() const override { return mCenter.y - mRadius; }
nscoord BEnd() const override { return mCenter.y + mRadius; }
bool IsEmpty() const override { return mRadius == 0; };
private:
// The position of the center of the circle. The coordinate space is the
// same as FloatInfo::mRect.
nsPoint mCenter;
// The radius of the circle in app units.
nscoord mRadius;
};
struct FloatInfo {
nsIFrame *const mFrame;
@ -445,6 +350,8 @@ private:
nscoord BSize() const { return mRect.height; }
bool IsEmpty() const { return mRect.IsEmpty(); }
nsRect ShapeBoxRect() const { return mShapeBoxRect.valueOr(mRect); }
// aBStart and aBEnd are the starting and ending coordinate of a band.
// LineLeft() and LineRight() return the innermost line-left extent and
// line-right extent within the given band, respectively.
@ -452,12 +359,35 @@ private:
const nscoord aBStart, const nscoord aBEnd) const;
nscoord LineRight(mozilla::WritingMode aWM, ShapeType aShapeType,
const nscoord aBStart, const nscoord aBEnd) const;
nscoord BStart(ShapeType aShapeType) const;
nscoord BEnd(ShapeType aShapeType) const;
bool IsEmpty(ShapeType aShapeType) const;
nscoord BStart(ShapeType aShapeType) const
{
return aShapeType == ShapeType::Margin ? BStart() : ShapeBoxRect().y;
}
nscoord BEnd(ShapeType aShapeType) const
{
return aShapeType == ShapeType::Margin ? BEnd() : ShapeBoxRect().YMost();
}
// Compute the minimum line-axis difference between the bounding shape
// box and its rounded corner within the given band (block-axis region).
// This is used as a helper function to compute the LineRight() and
// LineLeft(). See the picture in the implementation for an example.
// RadiusL and RadiusB stand for radius on the line-axis and block-axis.
//
// Returns radius-x diff on the line-axis, or 0 if there's no rounded
// corner within the given band.
static nscoord ComputeEllipseLineInterceptDiff(
const nscoord aShapeBoxBStart, const nscoord aShapeBoxBEnd,
const nscoord aBStartCornerRadiusL, const nscoord aBStartCornerRadiusB,
const nscoord aBEndCornerRadiusL, const nscoord aBEndCornerRadiusB,
const nscoord aBandBStart, const nscoord aBandBEnd);
static nscoord XInterceptAtY(const nscoord aY, const nscoord aRadiusX,
const nscoord aRadiusY);
#ifdef NS_BUILD_REFCNT_LOGGING
FloatInfo(FloatInfo&& aOther);
FloatInfo(const FloatInfo& aOther);
~FloatInfo();
#endif
@ -468,9 +398,10 @@ private:
// the line-relative axis of the frame manager and its block
// coordinates are in the frame manager's real block direction.
nsRect mRect;
// Pointer to a concrete subclass of ShapeInfo or null, which means that
// there is no shape-outside.
mozilla::UniquePtr<ShapeInfo> mShapeInfo;
// This is the reference box of css shape-outside if specified, which
// implements the <shape-box> value in the CSS Shapes Module Level 1.
// The coordinate setup is the same as mRect.
mozilla::Maybe<nsRect> mShapeBoxRect;
};
#ifdef DEBUG

28
layout/reftests/w3c-css/submitted/shapes1/reftest.list
View File

@ -1,4 +1,4 @@
default-preferences pref(layout.css.shape-outside.enabled,true) pref(layout.css.clip-path-shapes.enabled,true)
default-preferences pref(layout.css.shape-outside.enabled,true)
# <shape-box> only
== shape-outside-margin-box-001.html shape-outside-margin-box-001-ref.html
@ -35,29 +35,3 @@ fails == shape-outside-border-box-border-radius-004.html shape-outside-border-bo
== shape-outside-padding-box-border-radius-002.html shape-outside-padding-box-border-radius-002-ref.html
== shape-outside-content-box-border-radius-001.html shape-outside-content-box-border-radius-001-ref.html
== shape-outside-content-box-border-radius-002.html shape-outside-content-box-border-radius-002-ref.html
# Basic shape: circle()
== shape-outside-circle-001.html shape-outside-circle-001-ref.html
== shape-outside-circle-002.html shape-outside-circle-002-ref.html
== shape-outside-circle-003.html shape-outside-circle-003-ref.html
== shape-outside-circle-004.html shape-outside-circle-004-ref.html
== shape-outside-circle-005.html shape-outside-circle-005-ref.html
== shape-outside-circle-006.html shape-outside-circle-005-ref.html
== shape-outside-circle-007.html shape-outside-circle-005-ref.html
== shape-outside-circle-008.html shape-outside-circle-008-ref.html
== shape-outside-circle-009.html shape-outside-circle-008-ref.html
== shape-outside-circle-010.html shape-outside-circle-010-ref.html
== shape-outside-circle-011.html shape-outside-circle-011-ref.html
== shape-outside-circle-012.html shape-outside-circle-011-ref.html
== shape-outside-circle-013.html shape-outside-circle-011-ref.html
== shape-outside-circle-014.html shape-outside-circle-014-ref.html
== shape-outside-circle-015.html shape-outside-circle-014-ref.html
== shape-outside-circle-016.html shape-outside-circle-016-ref.html
== shape-outside-circle-017.html shape-outside-circle-017-ref.html
== shape-outside-circle-018.html shape-outside-circle-018-ref.html
== shape-outside-circle-019.html shape-outside-circle-019-ref.html
== shape-outside-circle-020.html shape-outside-circle-020-ref.html
== shape-outside-circle-021.html shape-outside-circle-021-ref.html
== shape-outside-circle-022.html shape-outside-circle-022-ref.html
== shape-outside-circle-023.html shape-outside-circle-023-ref.html
== shape-outside-circle-024.html shape-outside-circle-024-ref.html

51
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-001-ref.html
View File

@ -1,51 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(50% at left top) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: circle(50% at left top);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
position: absolute;
width: 120px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="shape"></div>
<div class="box" style="height: 36px; top: 0px; left: 60px;"></div>
<div class="box" style="height: 12px; top: 36px; left: 48px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px; top: 48px; left: 36px;"></div> <!-- Box at corner -->
<div class="long box" style="height: 60px; top: 60px; left: 0px;"></div> <!-- Fill the space between two floats -->
<div class="box" style="height: 36px; top: 120px; left: 60px;"></div>
<div class="box" style="height: 12px; top: 156px; left: 48px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px; top: 168px; left: 36px;"></div> <!-- Box at corner -->
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-001.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(50% at left top)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-001-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at left top) value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(50% at left top);
clip-path: circle(50% at left top);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 120px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="shape"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
</body>
</html>

52
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-002-ref.html
View File

@ -1,52 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(50% at right bottom) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: circle(50% at right bottom);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
position: absolute;
width: 60px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="shape"></div>
<div class="long box" style="height: 60px; top: 0px; left: 0px;"></div> <!-- Fill the space above the first float -->
<div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
<div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
<div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
<div class="long box" style="height: 60px; top: 120px; left: 0px;"></div> <!-- Fill the space between two floats -->
<div class="box" style="height: 36px; top: 180px; left: 120px;"></div>
<div class="box" style="height: 12px; top: 216px; left: 120px;"></div>
<div class="box" style="height: 12px; top: 228px; left: 120px;"></div>
</body>
</html>

55
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-002.html
View File

@ -1,55 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(50% at right bottom)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-002-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at right bottom) value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(50% at right bottom);
clip-path: circle(50% at right bottom);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="shape"></div>
<div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
</body>
</html>

52
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-003-ref.html
View File

@ -1,52 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(50% at right top) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
direction: rtl;
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: circle(50% at right top);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
position: absolute;
width: 120px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="shape"></div>
<div class="box" style="height: 36px; top: 0px; right: 60px;"></div>
<div class="box" style="height: 12px; top: 36px; right: 48px;"></div>
<div class="box" style="height: 12px; top: 48px; right: 36px;"></div>
<div class="long box" style="height: 60px; top: 60px; right: 0px;"></div> <!-- Fill the space between two floats -->
<div class="box" style="height: 36px; top: 120px; right: 60px;"></div>
<div class="box" style="height: 12px; top: 156px; right: 48px;"></div>
<div class="box" style="height: 12px; top: 168px; right: 36px;"></div>
</body>
</html>

55
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-003.html
View File

@ -1,55 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(50% at right top)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-003-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at right top) value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(50% at right top);
clip-path: circle(50% at right top);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 120px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="shape"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
</body>
</html>

53
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-004-ref.html
View File

@ -1,53 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(50% at left bottom) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
direction: rtl;
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: circle(50% at left bottom);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
position: absolute;
width: 60px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="shape"></div>
<div class="long box" style="height: 60px; top: 0px; right: 0px;"></div> <!-- Fill the space above the first float -->
<div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
<div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
<div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
<div class="long box" style="height: 60px; top: 120px; right: 0px;"></div> <!-- Fill the space between two floats -->
<div class="box" style="height: 36px; top: 180px; right: 120px;"></div>
<div class="box" style="height: 12px; top: 216px; right: 120px;"></div>
<div class="box" style="height: 12px; top: 228px; right: 120px;"></div>
</body>
</html>

56
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-004.html
View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(50% at left bottom)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-004-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at left bottom) value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(50% at left bottom);
clip-path: circle(50% at left bottom);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="shape"></div>
<div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
</body>
</html>

45
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-005-ref.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle() reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: circle();
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
position: absolute;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner -->
<div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
<div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
<div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner -->
</body>
</html>

48
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-005.html
View File

@ -1,48 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle()</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-005-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle() value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle();
clip-path: circle();
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
</body>
</html>

49
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-006.html
View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(closest-side at center) border-box</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-005-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(closest-side at center) border-box value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(closest-side at center) border-box;
clip-path: circle(closest-side at center) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-right: 10px; /* Not affect layout of the boxes */
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
</body>
</html>

48
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-007.html
View File

@ -1,48 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(farthest-side at center)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-005-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(farthest-side at center) value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(farthest-side at center);
clip-path: circle(farthest-side at center);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
</body>
</html>

46
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-008-ref.html
View File

@ -1,46 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(0%) border-box reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: circle(0%) border-box;
box-sizing: content-box;
height: 20px;
width: 20px;
padding: 20px;
border: 20px solid lightgreen;
margin: 10px;
background-color: orange;
}
.box {
position: absolute;
width: 200px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px; top: 0px; left: 0px;"></div>
<div class="box" style="height: 12px; top: 12px; left: 0px;"></div>
<div class="box" style="height: 36px; top: 24px; left: 0px;"></div>
<div class="box" style="height: 36px; top: 60px; left: 0px;"></div>
<div class="box" style="height: 12px; top: 96px; left: 0px;"></div>
<div class="box" style="height: 12px; top: 108px; left: 0px;"></div>
</body>
</html>

49
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-008.html
View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(0%) border-box</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-008-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(0%) border-box value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(0%) border-box;
clip-path: circle(0%) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 10px;
background-color: orange;
}
.box {
display: inline-block;
width: 200px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
</body>
</html>

49
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-009.html
View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(closest-side at left center) border-box</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-008-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(closest-side at left center) border-box value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(closest-side at left center) border-box;
clip-path: circle(closest-side at left center) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 10px;
background-color: orange;
}
.box {
display: inline-block;
width: 200px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
</body>
</html>

45
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-010-ref.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(100%) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: circle(100%);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
position: absolute;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px; top: 0px; left: 120px;"></div>
<div class="box" style="height: 12px; top: 12px; left: 120px;"></div>
<div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
<div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
<div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
<div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
</body>
</html>

48
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-010.html
View File

@ -1,48 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float left, circle(100%)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-010-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(100%) value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(100%);
clip-path: circle(100%); /* Rendered as a rectangle */
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
</body>
</html>

46
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-011-ref.html
View File

@ -1,46 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle() reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
direction: rtl;
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: circle();
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
position: absolute;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner -->
<div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
<div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
<div class="box" style="height: 12px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px; top: 108px; right: 96px;"></div> <!-- Box at corner -->
</body>
</html>

49
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-011.html
View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle()</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-011-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle() value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle();
clip-path: circle();
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
</body>
</html>

50
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-012.html
View File

@ -1,50 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(closest-side at center) border-box</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-011-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(closest-side at center) border-box value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(closest-side at center) border-box;
clip-path: circle(closest-side at center) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-left: 10px; /* Not affect layout of the boxes */
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
</body>
</html>

49
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-013.html
View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(farthest-side at center)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-011-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(farthest-side at center) value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(farthest-side at center);
clip-path: circle(farthest-side at center);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
</body>
</html>

47
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-014-ref.html
View File

@ -1,47 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(0%) border-box reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
direction: rtl;
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: circle(0%) border-box;
box-sizing: content-box;
height: 20px;
width: 20px;
padding: 20px;
border: 20px solid lightgreen;
margin: 10px;
background-color: orange;
}
.box {
position: absolute;
width: 200px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px; top: 0px; right: 0px;"></div>
<div class="box" style="height: 12px; top: 12px; right: 0px;"></div>
<div class="box" style="height: 36px; top: 24px; right: 0px;"></div>
<div class="box" style="height: 36px; top: 60px; right: 0px;"></div>
<div class="box" style="height: 12px; top: 96px; right: 0px;"></div>
<div class="box" style="height: 12px; top: 108px; right: 0px;"></div>
</body>
</html>

50
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-014.html
View File

@ -1,50 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(0%) border-box</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-014-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(0%) border-box value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(0%) border-box;
clip-path: circle(0%) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 10px;
background-color: orange;
}
.box {
display: inline-block;
width: 200px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
</body>
</html>

50
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-015.html
View File

@ -1,50 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(closest-side at right center) border-box</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-014-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(closest-side at right center) border-box value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(closest-side at right center) border-box;
clip-path: circle(closest-side at right center) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 10px;
background-color: orange;
}
.box {
display: inline-block;
width: 200px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
</body>
</html>

46
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-016-ref.html
View File

@ -1,46 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(100%) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
direction: rtl;
position: absolute;
width: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: circle(100%);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
position: absolute;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px; top: 0px; right: 120px;"></div>
<div class="box" style="height: 12px; top: 12px; right: 120px;"></div>
<div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
<div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
<div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
<div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
</body>
</html>

49
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-016.html
View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: float right, circle(100%)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-016-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(100%) value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(100%);
clip-path: circle(100%); /* Rendered as a rectangle */
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
background-color: orange;
}
.box {
display: inline-block;
width: 60px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 12px;"></div>
<div class="box" style="height: 12px;"></div>
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-017-ref.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
writing-mode: vertical-rl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: circle(50% at left 40px top 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-start: 20px;
margin-block-end: 28px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
</body>
</html>

56
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-017.html
View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-017-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px top 40px) value under vertical-rl writing-mode.">
<style>
.container {
writing-mode: vertical-rl;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(50% at left 40px top 40px) border-box;
clip-path: circle(50% at left 40px top 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-end: 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px;"></div>
</body>
</html>

55
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-018-ref.html
View File

@ -1,55 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
writing-mode: vertical-rl;
direction: rtl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: circle(50% at left 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-start: 20px;
margin-block-end: 28px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
</body>
</html>

57
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-018.html
View File

@ -1,57 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-018-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at left 40px bottom 40px) value under vertical-rl writing-mode.">
<style>
.container {
writing-mode: vertical-rl;
direction: rtl;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(50% at left 40px bottom 40px) border-box;
clip-path: circle(50% at left 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-end: 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px;"></div>
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-019-ref.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
writing-mode: vertical-lr;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: circle(50% at right 40px top 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-start: 20px;
margin-block-end: 20px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
</body>
</html>

56
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-019.html
View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-019-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under vertical-lr writing-mode.">
<style>
.container {
writing-mode: vertical-lr;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(50% at right 40px top 40px) border-box;
clip-path: circle(50% at right 40px top 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-end: 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px;"></div>
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-020-ref.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
writing-mode: vertical-lr;
direction: rtl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: circle(50% at right 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-start: 20px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
</body>
</html>

57
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-020.html
View File

@ -1,57 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-020-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under vertical-lr writing-mode.">
<style>
.container {
writing-mode: vertical-lr;
direction: rtl;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(50% at right 40px bottom 40px) border-box;
clip-path: circle(50% at right 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-end: 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px;"></div>
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-021-ref.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
writing-mode: sideways-lr;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: circle(50% at right 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-start: 20px;
margin-block-end: 20px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
</body>
</html>

56
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-021.html
View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-021-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at right 40px bottom 40px) value under sideways-lr writing-mode.">
<style>
.container {
writing-mode: sideways-lr;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(50% at right 40px bottom 40px) border-box;
clip-path: circle(50% at right 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-end: 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px;"></div>
</body>
</html>

55
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-022-ref.html
View File

@ -1,55 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
writing-mode: sideways-lr;
direction: rtl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: circle(50% at right 40px top 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-start: 20px;
margin-block-end: 20px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
</body>
</html>

57
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-022.html
View File

@ -1,57 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-022-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under sideways-lr writing-mode.">
<style>
.container {
writing-mode: sideways-lr;
direction: rtl;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(50% at right 40px top 40px) border-box;
clip-path: circle(50% at right 40px top 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-end: 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px;"></div>
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-023-ref.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
writing-mode: horizontal-tb;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: circle(50% at left 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-start: 20px;
margin-block-end: 20px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
</body>
</html>

56
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-023.html
View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-023-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px bottom 40px) value under horizontal-tb writing-mode.">
<style>
.container {
writing-mode: horizontal-tb;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: circle(50% at left 40px bottom 40px) border-box;
clip-path: circle(50% at left 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-end: 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px;"></div>
</body>
</html>

55
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-024-ref.html
View File

@ -1,55 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px) reference</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.container {
writing-mode: horizontal-tb;
direction: rtl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: circle(50% at right 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-start: 20px;
margin-block-end: 20px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
<div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
</body>
</html>

57
layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-024.html
View File

@ -1,57 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<meta charset="utf-8">
<title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px)</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
<link rel="match" href="shape-outside-circle-024-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under horizontal-tb writing-mode.">
<style>
.container {
writing-mode: horizontal-tb;
direction: rtl;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: circle(50% at right 40px bottom 40px) border-box;
clip-path: circle(50% at right 40px bottom 40px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin-inline-start: 20px;
margin-inline-end: 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 60px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 20px;"></div>
</body>
</html>

77
layout/svg/nsCSSClipPathInstance.cpp
View File

@ -11,7 +11,6 @@
#include "mozilla/dom/SVGSVGElement.h"
#include "mozilla/gfx/2D.h"
#include "mozilla/gfx/PathHelpers.h"
#include "mozilla/ShapeUtils.h"
#include "nsCSSRendering.h"
#include "nsIFrame.h"
#include "nsRenderingContext.h"
@ -105,6 +104,22 @@ nsCSSClipPathInstance::CreateClipPath(DrawTarget* aDrawTarget)
return builder->Finish();
}
static void
EnumerationToLength(nscoord& aCoord, StyleShapeRadius aType,
nscoord aCenter, nscoord aPosMin, nscoord aPosMax)
{
nscoord dist1 = abs(aPosMin - aCenter);
nscoord dist2 = abs(aPosMax - aCenter);
switch (aType) {
case StyleShapeRadius::FarthestSide:
aCoord = dist1 > dist2 ? dist1 : dist2;
break;
case StyleShapeRadius::ClosestSide:
aCoord = dist1 > dist2 ? dist2 : dist1;
break;
}
}
already_AddRefed<Path>
nsCSSClipPathInstance::CreateClipPathCircle(DrawTarget* aDrawTarget,
const nsRect& aRefBox)
@ -113,13 +128,41 @@ nsCSSClipPathInstance::CreateClipPathCircle(DrawTarget* aDrawTarget,
RefPtr<PathBuilder> builder = aDrawTarget->CreatePathBuilder();
nsPoint center =
ShapeUtils::ComputeCircleOrEllipseCenter(basicShape, aRefBox);
nscoord r = ShapeUtils::ComputeCircleRadius(basicShape, center, aRefBox);
nsPoint topLeft, anchor;
nsSize size = nsSize(aRefBox.width, aRefBox.height);
nsImageRenderer::ComputeObjectAnchorPoint(basicShape->GetPosition(),
size, size,
&topLeft, &anchor);
Point center = Point(anchor.x + aRefBox.x, anchor.y + aRefBox.y);
const nsTArray<nsStyleCoord>& coords = basicShape->Coordinates();
MOZ_ASSERT(coords.Length() == 1, "wrong number of arguments");
nscoord r = 0;
if (coords[0].GetUnit() == eStyleUnit_Enumerated) {
const auto styleShapeRadius = coords[0].GetEnumValue<StyleShapeRadius>();
nscoord horizontal, vertical;
EnumerationToLength(horizontal, styleShapeRadius,
center.x, aRefBox.x, aRefBox.x + aRefBox.width);
EnumerationToLength(vertical, styleShapeRadius,
center.y, aRefBox.y, aRefBox.y + aRefBox.height);
if (styleShapeRadius == StyleShapeRadius::FarthestSide) {
r = horizontal > vertical ? horizontal : vertical;
} else {
r = horizontal < vertical ? horizontal : vertical;
}
} else {
// We resolve percent <shape-radius> value for circle() as defined here:
// https://drafts.csswg.org/css-shapes/#funcdef-circle
double referenceLength =
SVGContentUtils::ComputeNormalizedHypotenuse(aRefBox.width,
aRefBox.height);
r = nsRuleNode::ComputeCoordPercentCalc(coords[0],
NSToCoordRound(referenceLength));
}
nscoord appUnitsPerDevPixel =
mTargetFrame->PresContext()->AppUnitsPerDevPixel();
builder->Arc(Point(center.x, center.y) / appUnitsPerDevPixel,
r / appUnitsPerDevPixel,
builder->Arc(center / appUnitsPerDevPixel, r / appUnitsPerDevPixel,
0, Float(2 * M_PI));
builder->Close();
return builder->Finish();
@ -133,25 +176,25 @@ nsCSSClipPathInstance::CreateClipPathEllipse(DrawTarget* aDrawTarget,
RefPtr<PathBuilder> builder = aDrawTarget->CreatePathBuilder();
nsPoint center =
ShapeUtils::ComputeCircleOrEllipseCenter(basicShape, aRefBox);
nsPoint topLeft, anchor;
nsSize size = nsSize(aRefBox.width, aRefBox.height);
nsImageRenderer::ComputeObjectAnchorPoint(basicShape->GetPosition(),
size, size,
&topLeft, &anchor);
Point center = Point(anchor.x + aRefBox.x, anchor.y + aRefBox.y);
const nsTArray<nsStyleCoord>& coords = basicShape->Coordinates();
MOZ_ASSERT(coords.Length() == 2, "wrong number of arguments");
nscoord rx = 0, ry = 0;
if (coords[0].GetUnit() == eStyleUnit_Enumerated) {
rx = ShapeUtils::ComputeShapeRadius(coords[0].GetEnumValue<StyleShapeRadius>(),
center.x,
aRefBox.x,
aRefBox.x + aRefBox.width);
EnumerationToLength(rx, coords[0].GetEnumValue<StyleShapeRadius>(),
center.x, aRefBox.x, aRefBox.x + aRefBox.width);
} else {
rx = nsRuleNode::ComputeCoordPercentCalc(coords[0], aRefBox.width);
}
if (coords[1].GetUnit() == eStyleUnit_Enumerated) {
ry = ShapeUtils::ComputeShapeRadius(coords[1].GetEnumValue<StyleShapeRadius>(),
center.y,
aRefBox.y,
aRefBox.y + aRefBox.height);
EnumerationToLength(ry, coords[1].GetEnumValue<StyleShapeRadius>(),
center.y, aRefBox.y, aRefBox.y + aRefBox.height);
} else {
ry = nsRuleNode::ComputeCoordPercentCalc(coords[1], aRefBox.height);
}
@ -159,7 +202,7 @@ nsCSSClipPathInstance::CreateClipPathEllipse(DrawTarget* aDrawTarget,
nscoord appUnitsPerDevPixel =
mTargetFrame->PresContext()->AppUnitsPerDevPixel();
EllipseToBezier(builder.get(),
Point(center.x, center.y) / appUnitsPerDevPixel,
center / appUnitsPerDevPixel,
Size(rx, ry) / appUnitsPerDevPixel);
builder->Close();
return builder->Finish();