author | Ting-Yu Lin <tlin@mozilla.com> |
Thu, 16 Feb 2017 10:51:49 +0800 | |
changeset 343242 | 16c77acfaa6e2054a1188c71e07cc656ed494c5e |
parent 343241 | 8a514a5851a4435f772ac5030f1ef4ed7303aa90 |
child 343243 | 5c25a3cb838e345c77cf24fd27afa53fb756ee3a |
push id | 31372 |
push user | cbook@mozilla.com |
push date | Thu, 16 Feb 2017 12:16:10 +0000 |
treeherder | mozilla-central@2737f66ad6ac [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | dbaron |
bugs | 1326407 |
milestone | 54.0a1 |
first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
--- a/layout/generic/nsFloatManager.cpp +++ b/layout/generic/nsFloatManager.cpp @@ -639,19 +639,19 @@ nsFloatManager::FloatInfo::FloatInfo(nsI return; case StyleBasicShapeType::Circle: case StyleBasicShapeType::Ellipse: mShapeInfo = ShapeInfo::CreateCircleOrEllipse(basicShape, shapeBoxRect, aWM, 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!"); } MOZ_ASSERT(mShapeInfo, "All shape-outside values except none should have mShapeInfo!"); @@ -811,16 +811,48 @@ nsFloatManager::ShapeInfo::CreateShapeBo } return MakeUnique<RoundedBoxShapeInfo>(logicalShapeBoxRect, ConvertToFloatLogical(physicalRadii, 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, const LogicalRect& aShapeBoxRect, WritingMode aWM, const nsSize& aContainerSize) { // Use physical coordinates to compute the center of circle() or ellipse() // since the <position> keywords such as 'left', 'top', etc. are physical.
--- a/layout/generic/nsFloatManager.h +++ b/layout/generic/nsFloatManager.h @@ -378,16 +378,22 @@ private: } static mozilla::UniquePtr<ShapeInfo> CreateShapeBox( nsIFrame* const aFrame, const mozilla::LogicalRect& aShapeBoxRect, 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, mozilla::WritingMode aWM, const nsSize& aContainerSize); protected: // Compute the minimum line-axis difference between the bounding shape @@ -415,17 +421,17 @@ private: // Convert the half corner radii (nscoord[8]) to the special logical // coordinate space used in float manager. static mozilla::UniquePtr<nscoord[]> ConvertToFloatLogical( const nscoord aRadii[8], mozilla::WritingMode aWM); }; - // Implements shape-outside: <shape-box>. + // Implements shape-outside: <shape-box> and shape-outside: inset(). class RoundedBoxShapeInfo final : public ShapeInfo { public: RoundedBoxShapeInfo(const nsRect& aRect, mozilla::UniquePtr<nscoord[]> aRadii) : mRect(aRect) , mRadii(Move(aRadii)) {}
--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list +++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list @@ -78,8 +78,22 @@ fails == shape-outside-border-box-border == shape-outside-ellipse-013.html shape-outside-ellipse-013-ref.html == shape-outside-ellipse-014.html shape-outside-ellipse-014-ref.html == shape-outside-ellipse-015.html shape-outside-ellipse-015-ref.html == shape-outside-ellipse-016.html shape-outside-ellipse-016-ref.html == shape-outside-ellipse-017.html shape-outside-ellipse-017-ref.html == 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
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-001-ref.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-001.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-002-ref.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-002.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-003-ref.html @@ -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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-003.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 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-004-ref.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 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-004.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 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-005-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: 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-005.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-006-ref.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: 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-006.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-007-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: 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-007.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-008-ref.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: 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-008.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-009-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: 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-009.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-010-ref.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: 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-010.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-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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-011-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: 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-011.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, 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-012-ref.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: 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-012.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, 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>