Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-01 00:32:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1326407 Part 8 - Implement shape-outside: inset(). r=dbaron

Browse Source 
The reftests have passed
layout/reftests/w3c-css/submitted/check-for-references.sh.

MozReview-Commit-ID: JZk1fo8SxgV

--HG--
extra : rebase_source : 5010c7e32bfe383c855ea5899f84860c4c747658
This commit is contained in:
Ting-Yu Lin 2017-02-16 10:51:49 +08:00
parent 859109777e
commit e5836e823a
27 changed files with 1288 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
layout/generic/nsFloatManager.cpp
View File

@ -644,9 +644,9 @@ nsFloatManager::FloatInfo::FloatInfo(nsIFrame* aFrame,
aContainerSize);
break;
case StyleBasicShapeType::Inset:
// Bug 1326407 - Implement the rendering of basic shape inset() for
// CSS shape-outside.
return;
mShapeInfo =
ShapeInfo::CreateInset(basicShape, shapeBoxRect, aWM, aContainerSize);
break;
}
} else {
MOZ_ASSERT_UNREACHABLE("Unknown StyleShapeSourceType!");
@ -815,6 +815,38 @@ nsFloatManager::ShapeInfo::CreateShapeBox(
aWM));
}
/* static */ UniquePtr<nsFloatManager::ShapeInfo>
nsFloatManager::ShapeInfo::CreateInset(
StyleBasicShape* const aBasicShape,
const LogicalRect& aShapeBoxRect,
WritingMode aWM,
const nsSize& aContainerSize)
{
// Use physical coordinates to compute inset() because the top, right,
// bottom and left offsets are physical.
// https://drafts.csswg.org/css-shapes-1/#funcdef-inset
nsRect physicalShapeBoxRect =
aShapeBoxRect.GetPhysicalRect(aWM, aContainerSize);
nsRect insetRect =
ShapeUtils::ComputeInsetRect(aBasicShape, physicalShapeBoxRect);
nsRect logicalInsetRect =
ConvertToFloatLogical(LogicalRect(aWM, insetRect, aContainerSize),
aWM, aContainerSize);
nscoord physicalRadii[8];
bool hasRadii =
ShapeUtils::ComputeInsetRadii(aBasicShape, insetRect, physicalShapeBoxRect,
physicalRadii);
if (!hasRadii) {
return MakeUnique<RoundedBoxShapeInfo>(logicalInsetRect,
UniquePtr<nscoord[]>());
}
return MakeUnique<RoundedBoxShapeInfo>(logicalInsetRect,
ConvertToFloatLogical(physicalRadii,
aWM));
}
/* static */ UniquePtr<nsFloatManager::ShapeInfo>
nsFloatManager::ShapeInfo::CreateCircleOrEllipse(
StyleBasicShape* const aBasicShape,

8
layout/generic/nsFloatManager.h
View File

@ -383,6 +383,12 @@ private:
mozilla::WritingMode aWM,
const nsSize& aContainerSize);
static mozilla::UniquePtr<ShapeInfo> CreateInset(
mozilla::StyleBasicShape* const aBasicShape,
const mozilla::LogicalRect& aShapeBoxRect,
mozilla::WritingMode aWM,
const nsSize& aContainerSize);
static mozilla::UniquePtr<ShapeInfo> CreateCircleOrEllipse(
mozilla::StyleBasicShape* const aBasicShape,
const mozilla::LogicalRect& aShapeBoxRect,
@ -420,7 +426,7 @@ private:
mozilla::WritingMode aWM);
};
// Implements shape-outside: <shape-box>.
// Implements shape-outside: <shape-box> and shape-outside: inset().
class RoundedBoxShapeInfo final : public ShapeInfo
{
public:

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

@ -83,3 +83,17 @@ fails == shape-outside-border-box-border-radius-004.html shape-outside-border-bo
== shape-outside-ellipse-018.html shape-outside-ellipse-018-ref.html
== shape-outside-ellipse-019.html shape-outside-ellipse-019-ref.html
== shape-outside-ellipse-020.html shape-outside-ellipse-020-ref.html
# Basic shape: inset()
== shape-outside-inset-001.html shape-outside-inset-001-ref.html
== shape-outside-inset-002.html shape-outside-inset-002-ref.html
== shape-outside-inset-003.html shape-outside-inset-003-ref.html
== shape-outside-inset-004.html shape-outside-inset-004-ref.html
== shape-outside-inset-005.html shape-outside-inset-005-ref.html
== shape-outside-inset-006.html shape-outside-inset-006-ref.html
== shape-outside-inset-007.html shape-outside-inset-007-ref.html
== shape-outside-inset-008.html shape-outside-inset-008-ref.html
== shape-outside-inset-009.html shape-outside-inset-009-ref.html
== shape-outside-inset-010.html shape-outside-inset-010-ref.html
== shape-outside-inset-011.html shape-outside-inset-011-ref.html
== shape-outside-inset-012.html shape-outside-inset-012-ref.html

48
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-001-ref.html Normal file
View File

@ -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, inset(20px) 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: inset(20px) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 20px;
background-color: orange;
}
.box {
position: absolute;
width: 60px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="height: 40px; top: 0; left: 0;"></div> <!-- Fill the margin and inset space -->
<div class="box" style="height: 40px; top: 40px; left: 120px;"></div>
<div class="box" style="height: 40px; top: 80px; left: 120px;"></div>
<div class="long box" style="height: 40px; top: 120px; left: 0;"></div> <!-- Fill the margin and inset space -->
</body>
</html>

51
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-001.html Normal file
View File

@ -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, inset(20px) 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-inset-001-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(20px) border-box value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: inset(20px) border-box;
clip-path: inset(20px) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 20px;
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="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space -->
<div class="box" style="height: 40px;"></div>
<div class="box" style="height: 40px;"></div>
<div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space -->
</body>
</html>

49
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-002-ref.html Normal file
View File

@ -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, inset(20px) 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: inset(20px) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 20px;
background-color: orange;
}
.box {
position: absolute;
width: 60px;
background-color: blue;
}
.long {
width: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="height: 40px; top: 0; right: 0;"></div> <!-- Fill the margin and inset space -->
<div class="box" style="height: 40px; top: 40px; right: 120px;"></div>
<div class="box" style="height: 40px; top: 80px; right: 120px;"></div>
<div class="long box" style="height: 40px; top: 120px; right: 0;"></div> <!-- Fill the margin and inset space -->
</body>
</html>

52
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-002.html Normal file
View File

@ -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, inset(20px) 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-inset-002-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(20px) border-box value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: inset(20px) border-box;
clip-path: inset(20px) border-box;
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 20px;
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="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space -->
<div class="box" style="height: 40px;"></div>
<div class="box" style="height: 40px;"></div>
<div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space -->
</body>
</html>

44
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-003-ref.html Normal file
View File

@ -0,0 +1,44 @@
<!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, inset(50%) 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: inset(50%);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 20px;
background-color: orange;
}
.box {
position: absolute;
width: 200px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 24px; top: 0; left: 0;"></div>
<div class="box" style="height: 36px; top: 24px; left: 0;"></div>
<div class="box" style="height: 36px; top: 60px; left: 0;"></div>
<div class="box" style="height: 24px; top: 96px; left: 0;"></div>
</body>
</html>

47
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-003.html Normal file
View File

@ -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 left, inset(50%)</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-inset-003-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape inset(50%) value.">
<style>
.container {
width: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: inset(50%);
clip-path: inset(50%);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 20px;
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: 24px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 24px;"></div>
</body>
</html>

45
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-004-ref.html Normal file
View File

@ -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 right, inset(50%) 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: inset(50%);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 20px;
background-color: orange;
}
.box {
position: absolute;
width: 200px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="box" style="height: 24px; top: 0; right: 0;"></div>
<div class="box" style="height: 36px; top: 24px; right: 0;"></div>
<div class="box" style="height: 36px; top: 60px; right: 0;"></div>
<div class="box" style="height: 24px; top: 96px; right: 0;"></div>
</body>
</html>

48
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-004.html Normal file
View File

@ -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 right, inset(50%)</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-inset-004-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape inset(50%) value.">
<style>
.container {
direction: rtl;
width: 200px;
line-height: 0;
}
.shape {
float: right;
shape-outside: inset(50%);
clip-path: inset(50%);
box-sizing: content-box;
height: 40px;
width: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 20px;
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: 24px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 36px;"></div>
<div class="box" style="height: 24px;"></div>
</body>
</html>

51
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-005-ref.html Normal file
View File

@ -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: horizontal-tb, float left, inset(10px round 0 40px/ 0 60px) 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 {
writing-mode: horizontal-tb;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: inset(10px round 0 40px/ 0 60px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px 10px;
border: solid lightgreen;
border-width: 30px 20px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-005.html Normal file
View File

@ -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, inset(10px round 0 40px/ 0 60px) 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-inset-005-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 0 40px/ 0 60px) border-box value under horizontal-tb writing-mode.">
<style>
.container {
writing-mode: horizontal-tb;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: inset(10px round 0 40px/ 0 60px) border-box;
clip-path: inset(10px round 0 40px/ 0 60px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px 10px;
border: solid lightgreen;
border-width: 30px 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px;"></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: 24px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
</body>
</html>

52
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-006-ref.html Normal file
View File

@ -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: horizontal-tb, float right, inset(10px round 0 40px/ 0 60px) 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 {
writing-mode: horizontal-tb;
direction: rtl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: inset(10px round 0 40px/ 0 60px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px 10px;
border: solid lightgreen;
border-width: 30px 20px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>

55
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-006.html Normal file
View File

@ -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, inset(10px round 0 40px/ 0 60px) 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-inset-006-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 0 40px/ 0 60px) border-box 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: inset(10px round 0 40px/ 0 60px) border-box;
clip-path: inset(10px round 0 40px/ 0 60px) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px 10px;
border: solid lightgreen;
border-width: 30px 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px;"></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: 24px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
</body>
</html>

51
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-007-ref.html Normal file
View File

@ -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: vertical-rl, float left, inset(10px round 60px 0/ 40px 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 {
writing-mode: vertical-rl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-007.html Normal file
View File

@ -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, inset(10px round 60px 0/ 40px 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-inset-007-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-rl writing-mode.">
<style>
.container {
writing-mode: vertical-rl;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: inset(10px round 60px 0/ 40px 0) border-box;
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px;"></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: 24px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
</body>
</html>

52
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-008-ref.html Normal file
View File

@ -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: vertical-rl, float right, inset(10px round 60px 0/ 40px 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 {
writing-mode: vertical-rl;
direction: rtl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>

55
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-008.html Normal file
View File

@ -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, inset(10px round 60px 0/ 40px 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-inset-008-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box 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: inset(10px round 60px 0/ 40px 0) border-box;
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px;"></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: 24px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
</body>
</html>

51
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-009-ref.html Normal file
View File

@ -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: vertical-lr, float left, inset(10px round 60px 0/ 40px 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 {
writing-mode: vertical-lr;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-009.html Normal file
View File

@ -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, inset(10px round 60px 0/ 40px 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-inset-009-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-lr writing-mode.">
<style>
.container {
writing-mode: vertical-lr;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: inset(10px round 60px 0/ 40px 0) border-box;
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px;"></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: 24px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
</body>
</html>

52
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-010-ref.html Normal file
View File

@ -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: vertical-lr, float right, inset(10px round 60px 0/ 40px 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 {
writing-mode: vertical-lr;
direction: rtl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>

55
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-010.html Normal file
View File

@ -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-lr, float right, inset(10px round 60px 0/ 40px 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-inset-010-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box 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: inset(10px round 60px 0/ 40px 0) border-box;
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px;"></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: 24px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
</body>
</html>

51
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-011-ref.html Normal file
View File

@ -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: sideways-lr, float left, inset(10px round 60px 0/ 40px 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 {
writing-mode: sideways-lr;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
/* Omit shape-outside */
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>

54
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-011.html Normal file
View File

@ -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, inset(10px round 60px 0/ 40px 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-inset-011-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under sideways-lr writing-mode.">
<style>
.container {
writing-mode: sideways-lr;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: inset(10px round 60px 0/ 40px 0) border-box;
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px;"></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: 24px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
</body>
</html>

52
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-012-ref.html Normal file
View File

@ -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: sideways-lr, float right, inset(10px round 60px 0/ 40px 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 {
writing-mode: sideways-lr;
direction: rtl;
position: absolute;
inline-size: 200px;
line-height: 0;
}
.shape {
float: right;
/* Omit shape-outside */
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
position: absolute;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
<div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>

55
layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-012.html Normal file
View File

@ -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, inset(10px round 60px 0/ 40px 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-inset-012-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box 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: inset(10px round 60px 0/ 40px 0) border-box;
clip-path: inset(10px round 60px 0/ 40px 0) border-box;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 10px 20px;
border: solid lightgreen;
border-width: 20px 30px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 80px;
background-color: blue;
}
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
<div class="box" style="block-size: 24px;"></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: 24px;"></div> <!-- Box at corner -->
<div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space -->
</body>
</html>