mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-14 13:55:43 +00:00
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:
parent
5ebb40fc4c
commit
2306e3b833
@ -784,6 +784,16 @@ public:
|
|||||||
CHECK_WRITING_MODE(aWritingMode);
|
CHECK_WRITING_MODE(aWritingMode);
|
||||||
return mPoint.y;
|
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
|
* These non-const accessors return a reference (lvalue) that can be
|
||||||
|
@ -10,6 +10,7 @@
|
|||||||
#include <algorithm>
|
#include <algorithm>
|
||||||
|
|
||||||
#include "mozilla/ReflowInput.h"
|
#include "mozilla/ReflowInput.h"
|
||||||
|
#include "mozilla/ShapeUtils.h"
|
||||||
#include "nsBlockFrame.h"
|
#include "nsBlockFrame.h"
|
||||||
#include "nsError.h"
|
#include "nsError.h"
|
||||||
#include "nsIPresShell.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.
|
// There aren't any more floats that could intersect this band.
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (fi.IsEmpty()) {
|
if (fi.IsEmpty(aShapeType)) {
|
||||||
// For compatibility, ignore floats with empty rects, even though it
|
// For compatibility, ignore floats with empty rects, even though it
|
||||||
// disagrees with the spec. (We might want to fix this in the
|
// disagrees with the spec. (We might want to fix this in the
|
||||||
// future, though.)
|
// future, though.)
|
||||||
@ -612,6 +613,60 @@ nsFloatManager::BoxShapeInfo::LineRight(WritingMode aWM,
|
|||||||
return mShapeBoxRect.XMost() - lineRightDiff;
|
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
|
// FloatInfo
|
||||||
|
|
||||||
@ -651,7 +706,8 @@ nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
|
|||||||
// Do nothing. rect is already a margin rect.
|
// Do nothing. rect is already a margin rect.
|
||||||
break;
|
break;
|
||||||
case StyleShapeOutsideShapeBox::NoBox:
|
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;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -660,6 +716,17 @@ nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
|
|||||||
rect.BStart(aWM) + aBlockStart,
|
rect.BStart(aWM) + aBlockStart,
|
||||||
rect.ISize(aWM), rect.BSize(aWM));
|
rect.ISize(aWM), rect.BSize(aWM));
|
||||||
mShapeInfo = MakeUnique<BoxShapeInfo>(shapeBoxRect, mFrame);
|
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) {
|
if (!mShapeInfo) {
|
||||||
return LineLeft();
|
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
|
nscoord
|
||||||
@ -711,7 +782,8 @@ nsFloatManager::FloatInfo::LineRight(WritingMode aWM,
|
|||||||
if (!mShapeInfo) {
|
if (!mShapeInfo) {
|
||||||
return LineRight();
|
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
|
nscoord
|
||||||
@ -725,7 +797,8 @@ nsFloatManager::FloatInfo::BStart(ShapeType aShapeType) const
|
|||||||
if (!mShapeInfo) {
|
if (!mShapeInfo) {
|
||||||
return BStart();
|
return BStart();
|
||||||
}
|
}
|
||||||
return mShapeInfo->BStart();
|
// Clip the flow area to the margin-box. See LineLeft().
|
||||||
|
return std::max(BStart(), mShapeInfo->BStart());
|
||||||
}
|
}
|
||||||
|
|
||||||
nscoord
|
nscoord
|
||||||
@ -739,7 +812,22 @@ nsFloatManager::FloatInfo::BEnd(ShapeType aShapeType) const
|
|||||||
if (!mShapeInfo) {
|
if (!mShapeInfo) {
|
||||||
return BEnd();
|
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
|
/* static */ nscoord
|
||||||
|
@ -15,6 +15,7 @@
|
|||||||
#include "nsCoord.h"
|
#include "nsCoord.h"
|
||||||
#include "nsFrameList.h" // for DEBUG_FRAME_DUMP
|
#include "nsFrameList.h" // for DEBUG_FRAME_DUMP
|
||||||
#include "nsIntervalSet.h"
|
#include "nsIntervalSet.h"
|
||||||
|
#include "nsPoint.h"
|
||||||
#include "nsTArray.h"
|
#include "nsTArray.h"
|
||||||
|
|
||||||
class nsIPresShell;
|
class nsIPresShell;
|
||||||
@ -22,6 +23,7 @@ class nsIFrame;
|
|||||||
class nsPresContext;
|
class nsPresContext;
|
||||||
namespace mozilla {
|
namespace mozilla {
|
||||||
struct ReflowInput;
|
struct ReflowInput;
|
||||||
|
class StyleBasicShape;
|
||||||
} // namespace mozilla
|
} // namespace mozilla
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -348,6 +350,7 @@ private:
|
|||||||
const nscoord aBEnd) const = 0;
|
const nscoord aBEnd) const = 0;
|
||||||
virtual nscoord BStart() const = 0;
|
virtual nscoord BStart() const = 0;
|
||||||
virtual nscoord BEnd() const = 0;
|
virtual nscoord BEnd() const = 0;
|
||||||
|
virtual bool IsEmpty() const = 0;
|
||||||
|
|
||||||
protected:
|
protected:
|
||||||
// Compute the minimum line-axis difference between the bounding shape
|
// Compute the minimum line-axis difference between the bounding shape
|
||||||
@ -386,6 +389,7 @@ private:
|
|||||||
const nscoord aBEnd) const override;
|
const nscoord aBEnd) const override;
|
||||||
nscoord BStart() const override { return mShapeBoxRect.y; }
|
nscoord BStart() const override { return mShapeBoxRect.y; }
|
||||||
nscoord BEnd() const override { return mShapeBoxRect.YMost(); }
|
nscoord BEnd() const override { return mShapeBoxRect.YMost(); }
|
||||||
|
bool IsEmpty() const override { return mShapeBoxRect.IsEmpty(); };
|
||||||
|
|
||||||
private:
|
private:
|
||||||
// This is the reference box of css shape-outside if specified, which
|
// This is the reference box of css shape-outside if specified, which
|
||||||
@ -396,6 +400,35 @@ private:
|
|||||||
nsIFrame* const mFrame;
|
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 {
|
struct FloatInfo {
|
||||||
nsIFrame *const mFrame;
|
nsIFrame *const mFrame;
|
||||||
// The lowest block-ends of left/right floats up to and including
|
// The lowest block-ends of left/right floats up to and including
|
||||||
@ -423,6 +456,7 @@ private:
|
|||||||
const nscoord aBStart, const nscoord aBEnd) const;
|
const nscoord aBStart, const nscoord aBEnd) const;
|
||||||
nscoord BStart(ShapeType aShapeType) const;
|
nscoord BStart(ShapeType aShapeType) const;
|
||||||
nscoord BEnd(ShapeType aShapeType) const;
|
nscoord BEnd(ShapeType aShapeType) const;
|
||||||
|
bool IsEmpty(ShapeType aShapeType) const;
|
||||||
|
|
||||||
#ifdef NS_BUILD_REFCNT_LOGGING
|
#ifdef NS_BUILD_REFCNT_LOGGING
|
||||||
FloatInfo(FloatInfo&& aOther);
|
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-box> only
|
||||||
== shape-outside-margin-box-001.html shape-outside-margin-box-001-ref.html
|
== 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-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-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
|
== 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>
|
Loading…
Reference in New Issue
Block a user