зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1311244 Part 7 - Implement shape-outside: circle(). r=dbaron
circle() allows the user to define an empty flow area, so IsEmpty() needs to be overridden. The flow area defined by a shape needs to be clipped to the margin-box per https://drafts.csswg.org/css-shapes/#relation-to-box-model-and-float-behavior In the reftests, both clip-path and shape-outside uses the same value so that it's easier to debug visually. Add LogicalPoint::LineRelative() because we need to convert a point's I() to the line-axis in nsFloatManager. LineRelative() differs from I() in all 'rtl' direction per https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical MozReview-Commit-ID: FxQaFPrEQ73 --HG-- extra : rebase_source : 0d768002a38adbded2a0caa6d3e001eaaca3313d
This commit is contained in:
Ting-Yu Lin
Родитель
5ebb40fc4c
Коммит
2306e3b833
|
|
@ -784,6 +784,16 @@ 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
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
#include <algorithm>
|
||||
|
||||
#include "mozilla/ReflowInput.h"
|
||||
#include "mozilla/ShapeUtils.h"
|
||||
#include "nsBlockFrame.h"
|
||||
#include "nsError.h"
|
||||
#include "nsIPresShell.h"
|
||||
|
|
@ -187,7 +188,7 @@ nsFloatManager::GetFlowArea(WritingMode aWM, nscoord aBCoord, nscoord aBSize,
|
|||
// There aren't any more floats that could intersect this band.
|
||||
break;
|
||||
}
|
||||
if (fi.IsEmpty()) {
|
||||
if (fi.IsEmpty(aShapeType)) {
|
||||
// For compatibility, ignore floats with empty rects, even though it
|
||||
// disagrees with the spec. (We might want to fix this in the
|
||||
// future, though.)
|
||||
|
|
@ -612,6 +613,60 @@ nsFloatManager::BoxShapeInfo::LineRight(WritingMode aWM,
|
|||
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(BStart(), BEnd(),
|
||||
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(BStart(), BEnd(),
|
||||
mRadius, mRadius, mRadius, mRadius,
|
||||
aBStart, aBEnd);
|
||||
return mCenter.x + mRadius - lineRightDiff;
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
// FloatInfo
|
||||
|
||||
|
|
@ -651,7 +706,8 @@ nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
|
|||
// Do nothing. rect is already a margin rect.
|
||||
break;
|
||||
case StyleShapeOutsideShapeBox::NoBox:
|
||||
MOZ_ASSERT_UNREACHABLE("Why don't we have a shape-box?");
|
||||
MOZ_ASSERT(shapeOutside.GetType() != StyleShapeSourceType::Box,
|
||||
"Box source type must have <shape-box> specified!");
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -660,6 +716,17 @@ nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
|
|||
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();
|
||||
|
||||
if (basicShape->GetShapeType() == StyleBasicShapeType::Circle) {
|
||||
mShapeInfo = MakeUnique<CircleShapeInfo>(basicShape, aLineLeft, aBlockStart,
|
||||
rect, aWM, aContainerSize);
|
||||
}
|
||||
} else if (shapeOutside.GetType() == StyleShapeSourceType::URL) {
|
||||
// Bug 1265343: Implement 'shape-image-threshold'.
|
||||
} else {
|
||||
MOZ_ASSERT_UNREACHABLE("Unknown StyleShapeSourceType!");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -694,7 +761,11 @@ nsFloatManager::FloatInfo::LineLeft(WritingMode aWM,
|
|||
if (!mShapeInfo) {
|
||||
return LineLeft();
|
||||
}
|
||||
return mShapeInfo->LineLeft(aWM, aBStart, aBEnd);
|
||||
// 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));
|
||||
}
|
||||
|
||||
nscoord
|
||||
|
|
@ -711,7 +782,8 @@ nsFloatManager::FloatInfo::LineRight(WritingMode aWM,
|
|||
if (!mShapeInfo) {
|
||||
return LineRight();
|
||||
}
|
||||
return mShapeInfo->LineRight(aWM, aBStart, aBEnd);
|
||||
// Clip the flow area to the margin-box. See LineLeft().
|
||||
return std::min(LineRight(), mShapeInfo->LineRight(aWM, aBStart, aBEnd));
|
||||
}
|
||||
|
||||
nscoord
|
||||
|
|
@ -725,7 +797,8 @@ nsFloatManager::FloatInfo::BStart(ShapeType aShapeType) const
|
|||
if (!mShapeInfo) {
|
||||
return BStart();
|
||||
}
|
||||
return mShapeInfo->BStart();
|
||||
// Clip the flow area to the margin-box. See LineLeft().
|
||||
return std::max(BStart(), mShapeInfo->BStart());
|
||||
}
|
||||
|
||||
nscoord
|
||||
|
|
@ -739,7 +812,22 @@ nsFloatManager::FloatInfo::BEnd(ShapeType aShapeType) const
|
|||
if (!mShapeInfo) {
|
||||
return BEnd();
|
||||
}
|
||||
return mShapeInfo->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();
|
||||
}
|
||||
|
||||
/* static */ nscoord
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
#include "nsCoord.h"
|
||||
#include "nsFrameList.h" // for DEBUG_FRAME_DUMP
|
||||
#include "nsIntervalSet.h"
|
||||
#include "nsPoint.h"
|
||||
#include "nsTArray.h"
|
||||
|
||||
class nsIPresShell;
|
||||
|
|
@ -22,6 +23,7 @@ class nsIFrame;
|
|||
class nsPresContext;
|
||||
namespace mozilla {
|
||||
struct ReflowInput;
|
||||
class StyleBasicShape;
|
||||
} // namespace mozilla
|
||||
|
||||
/**
|
||||
|
|
@ -348,6 +350,7 @@ private:
|
|||
const nscoord aBEnd) const = 0;
|
||||
virtual nscoord BStart() const = 0;
|
||||
virtual nscoord BEnd() const = 0;
|
||||
virtual bool IsEmpty() const = 0;
|
||||
|
||||
protected:
|
||||
// Compute the minimum line-axis difference between the bounding shape
|
||||
|
|
@ -386,6 +389,7 @@ private:
|
|||
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
|
||||
|
|
@ -396,6 +400,35 @@ private:
|
|||
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;
|
||||
// The lowest block-ends of left/right floats up to and including
|
||||
|
|
@ -423,6 +456,7 @@ private:
|
|||
const nscoord aBStart, const nscoord aBEnd) const;
|
||||
nscoord BStart(ShapeType aShapeType) const;
|
||||
nscoord BEnd(ShapeType aShapeType) const;
|
||||
bool IsEmpty(ShapeType aShapeType) const;
|
||||
|
||||
#ifdef NS_BUILD_REFCNT_LOGGING
|
||||
FloatInfo(FloatInfo&& aOther);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
default-preferences pref(layout.css.shape-outside.enabled,true)
|
||||
default-preferences pref(layout.css.shape-outside.enabled,true) pref(layout.css.clip-path-shapes.enabled,true)
|
||||
|
||||
# <shape-box> only
|
||||
== shape-outside-margin-box-001.html shape-outside-margin-box-001-ref.html
|
||||
|
|
@ -35,3 +35,29 @@ 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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!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>
|
||||
Загрузка…
Ссылка в новой задаче