Diff
Modified: trunk/LayoutTests/ChangeLog (196959 => 196960)
--- trunk/LayoutTests/ChangeLog 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/LayoutTests/ChangeLog 2016-02-22 22:26:23 UTC (rev 196960)
@@ -1,3 +1,20 @@
+2016-02-22 Simon Fraser <[email protected]>
+
+ Repeated background images have the wrong position when using bottom/right-relative background-position
+ https://bugs.webkit.org/show_bug.cgi?id=154478
+
+ Reviewed by Dave Hyatt.
+
+ Enhanced background-position-serialize.html to test values that use right/bottom edge specifiers.
+
+ Ref test for background-position.
+
+ * fast/css/background-position-serialize-expected.txt:
+ * fast/css/background-position-serialize.html:
+ * fast/images/background-position-expected.html: Added.
+ * fast/images/background-position.html: Added.
+ * fast/images/resources/checker.png: Added.
+
2016-02-22 Myles C. Maxfield <[email protected]>
[Font Loading] Split CSSFontSelector into a FontFaceSet implementation and the rest of the class
Modified: trunk/LayoutTests/fast/css/background-position-serialize-expected.txt (196959 => 196960)
--- trunk/LayoutTests/fast/css/background-position-serialize-expected.txt 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/LayoutTests/fast/css/background-position-serialize-expected.txt 2016-02-22 22:26:23 UTC (rev 196960)
@@ -56,6 +56,19 @@
PASS: t.style.backgroundPositionX should be 10px, 20px, 30px and is.
PASS: t.style.backgroundPositionY should be 15px, 25px, 35px and is.
PASS: t.style.cssText should be background-position: 10px 15px, 20px 25px, 30px 35px; and is.
+t.setAttribute('style', 'background-position: bottom 10px right 20px');
+PASS: t.style.backgroundPosition should be right 20px bottom 10px and is.
+PASS: window.getComputedStyle(t).backgroundPosition should be right 20px bottom 10px and is.
+t.setAttribute('style', 'background-position: top 10px right 20px');
+PASS: t.style.backgroundPosition should be right 20px top 10px and is.
+PASS: window.getComputedStyle(t).backgroundPosition should be right 20px top 10px and is.
+t.setAttribute('style', 'background-position: 50% left');
+PASS: t.style.backgroundPosition should be and is.
+t.setAttribute('style', 'background-position-x: right 20px');
+PASS: window.getComputedStyle(t).backgroundPositionX should be 0% and is.
+t.setAttribute('style', 'background-position: right 20px bottom 10px');
+PASS: window.getComputedStyle(t).backgroundPosition should be right 20px bottom 10px and is.
+PASS: window.getComputedStyle(t).backgroundPositionX should be 20px and is.
t.setAttribute('style', 'background: url(about:blank) 80% 80%;');
t.style.backgroundPositionY = '50px'
style.cssText =
Modified: trunk/LayoutTests/fast/css/background-position-serialize.html (196959 => 196960)
--- trunk/LayoutTests/fast/css/background-position-serialize.html 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/LayoutTests/fast/css/background-position-serialize.html 2016-02-22 22:26:23 UTC (rev 196960)
@@ -1,7 +1,7 @@
<html>
<body>
-<div id=t></div>
-<div id=console></div>
+<div id="t"></div>
+<div id="console"></div>
<script>
function print(message, color)
{
@@ -111,6 +111,24 @@
shouldBe("t.style.backgroundPositionY", "15px, 25px, 35px");
shouldBe("t.style.cssText", "background-position: 10px 15px, 20px 25px, 30px 35px;");
+run("t.setAttribute('style', 'background-position: bottom 10px right 20px');");
+shouldBe("t.style.backgroundPosition", "right 20px bottom 10px");
+shouldBe("window.getComputedStyle(t).backgroundPosition", "right 20px bottom 10px");
+
+run("t.setAttribute('style', 'background-position: top 10px right 20px');");
+shouldBe("t.style.backgroundPosition", "right 20px top 10px");
+shouldBe("window.getComputedStyle(t).backgroundPosition", "right 20px top 10px");
+
+run("t.setAttribute('style', 'background-position: 50% left');"); // Invalid per spec.
+shouldBe("t.style.backgroundPosition", "");
+
+run("t.setAttribute('style', 'background-position-x: right 20px');"); // This does not parse, but perhaps it should.
+shouldBe("window.getComputedStyle(t).backgroundPositionX", "0%");
+
+run("t.setAttribute('style', 'background-position: right 20px bottom 10px');");
+shouldBe("window.getComputedStyle(t).backgroundPosition", "right 20px bottom 10px");
+shouldBe("window.getComputedStyle(t).backgroundPositionX", "20px"); // This is a bug. webkit.org/b/154551
+
run("t.setAttribute('style', 'background: url(about:blank) 80% 80%;');");
run("t.style.backgroundPositionY = '50px'");
print("style.cssText =");
Added: trunk/LayoutTests/fast/images/background-position-expected.html (0 => 196960)
--- trunk/LayoutTests/fast/images/background-position-expected.html (rev 0)
+++ trunk/LayoutTests/fast/images/background-position-expected.html 2016-02-22 22:26:23 UTC (rev 196960)
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .container {
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ border: 2px solid gray;
+ display: inline-block;
+ position: relative;
+ }
+ .box {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ background-image: url('resources/checker.png');
+ background-repeat: no-repeat;
+ }
+
+ .repeat .box {
+ background-repeat: repeat;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div class="container">
+ <div class="box" style="background-position: 0 0"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 10px 20px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 5px 25px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 25px 5px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 45px 25px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 100% 25px"></div>
+ </div>
+ </div>
+ <div class="repeat">
+ <div class="container">
+ <div class="box" style="background-position: 0 0"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 10px 20px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 5px 25px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 25px 5px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 45px 25px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 100% 25px"></div>
+ </div>
+ </div>
+ <div class="repeat">
+ <div class="container">
+ <div class="box" style="background-position: 0 0; -webkit-clip-path: inset(0 50px 50px 0);"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 10px 20px; -webkit-clip-path: inset(20px 40px 30px 10px);"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 5px 25px; -webkit-clip-path: inset(25px 45px 25px 5px);"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 25px 5px; -webkit-clip-path: inset(5px 25px 45px 25px);"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 45px 25px; -webkit-clip-path: inset(25px 5px 25px 45px);"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 100% 25px; -webkit-clip-path: inset(25px 0 25px 50px);"></div>
+ </div>
+ </div>
+
+</body>
+</html>
Added: trunk/LayoutTests/fast/images/background-position.html (0 => 196960)
--- trunk/LayoutTests/fast/images/background-position.html (rev 0)
+++ trunk/LayoutTests/fast/images/background-position.html 2016-02-22 22:26:23 UTC (rev 196960)
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .container {
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ border: 2px solid gray;
+ display: inline-block;
+ position: relative;
+ }
+ .box {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ background-image: url('resources/checker.png');
+ background-repeat: no-repeat;
+ }
+
+ .repeat .box {
+ background-repeat: repeat;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div class="container">
+ <div class="box" style="background-position: 0 0"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 10px 20px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 10% 50%"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: top 10% left 50%"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: right 10% bottom 50%"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: center right"></div>
+ </div>
+ </div>
+ <div class="repeat">
+ <div class="container">
+ <div class="box" style="background-position: 0 0"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 10px 20px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 10% 50%"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: top 10% left 50%"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: right 10% bottom 50%"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: center right"></div>
+ </div>
+ </div>
+ <div>
+ <div class="container">
+ <div class="box" style="background-position: 0 0"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 10px 20px"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: 10% 50%"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: top 10% left 50%"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: right 10% bottom 50%"></div>
+ </div>
+ <div class="container">
+ <div class="box" style="background-position: center right"></div>
+ </div>
+ </div>
+
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (196959 => 196960)
--- trunk/Source/WebCore/ChangeLog 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/Source/WebCore/ChangeLog 2016-02-22 22:26:23 UTC (rev 196960)
@@ -1,3 +1,35 @@
+2016-02-22 Simon Fraser <[email protected]>
+
+ Repeated background images have the wrong position when using bottom/right-relative background-position
+ https://bugs.webkit.org/show_bug.cgi?id=154478
+
+ Reviewed by Dave Hyatt.
+
+ Fix RenderBoxModelObject::calculateBackgroundImageGeometry() to use the right position when
+ painting repeated background images when right/bottom edges are used.
+
+ Also rename BackgroundEdgeOrigin to Edge
+
+ Test: fast/images/background-position.html
+
+ * css/CSSPrimitiveValueMappings.h:
+ (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
+ (WebCore::CSSPrimitiveValue::operator Edge):
+ (WebCore::CSSPrimitiveValue::operator BackgroundEdgeOrigin): Deleted.
+ * rendering/RenderBoxModelObject.cpp:
+ (WebCore::resolveEdgeRelativeLength):
+ (WebCore::RenderBoxModelObject::calculateBackgroundImageGeometry):
+ * rendering/style/FillLayer.cpp:
+ (WebCore::FillLayer::FillLayer):
+ * rendering/style/FillLayer.h:
+ (WebCore::FillLayer::backgroundXOrigin):
+ (WebCore::FillLayer::backgroundYOrigin):
+ (WebCore::FillLayer::setBackgroundXOrigin):
+ (WebCore::FillLayer::setBackgroundYOrigin):
+ * rendering/style/RenderStyleConstants.cpp:
+ (WebCore::operator<<):
+ * rendering/style/RenderStyleConstants.h:
+
2016-02-22 Commit Queue <[email protected]>
Unreviewed, rolling out r196935.
Modified: trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h (196959 => 196960)
--- trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2016-02-22 22:26:23 UTC (rev 196960)
@@ -902,45 +902,45 @@
}
#endif
-template<> inline CSSPrimitiveValue::CSSPrimitiveValue(BackgroundEdgeOrigin e)
+template<> inline CSSPrimitiveValue::CSSPrimitiveValue(Edge e)
: CSSValue(PrimitiveClass)
{
m_primitiveUnitType = CSS_VALUE_ID;
switch (e) {
- case TopEdge:
+ case Edge::Top:
m_value.valueID = CSSValueTop;
break;
- case RightEdge:
+ case Edge::Right:
m_value.valueID = CSSValueRight;
break;
- case BottomEdge:
+ case Edge::Bottom:
m_value.valueID = CSSValueBottom;
break;
- case LeftEdge:
+ case Edge::Left:
m_value.valueID = CSSValueLeft;
break;
}
}
-template<> inline CSSPrimitiveValue::operator BackgroundEdgeOrigin() const
+template<> inline CSSPrimitiveValue::operator Edge() const
{
ASSERT(isValueID());
switch (m_value.valueID) {
case CSSValueTop:
- return TopEdge;
+ return Edge::Top;
case CSSValueRight:
- return RightEdge;
+ return Edge::Right;
case CSSValueBottom:
- return BottomEdge;
+ return Edge::Bottom;
case CSSValueLeft:
- return LeftEdge;
+ return Edge::Left;
default:
break;
}
ASSERT_NOT_REACHED();
- return TopEdge;
+ return Edge::Top;
}
template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EBoxSizing e)
Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (196959 => 196960)
--- trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2016-02-22 22:26:23 UTC (rev 196960)
@@ -1044,6 +1044,19 @@
return space;
}
+static LayoutUnit resolveEdgeRelativeLength(const Length& length, Edge edge, LayoutUnit availableSpace, const LayoutSize& areaSize, const LayoutSize& tileSize)
+{
+ LayoutUnit result = minimumValueForLength(length, availableSpace, false);
+
+ if (edge == Edge::Right)
+ return areaSize.width() - tileSize.width() - result;
+
+ if (edge == Edge::Bottom)
+ return areaSize.height() - tileSize.height() - result;
+
+ return result;
+}
+
BackgroundImageGeometry RenderBoxModelObject::calculateBackgroundImageGeometry(const RenderLayerModelObject* paintContainer, const FillLayer& fillLayer, const LayoutPoint& paintOffset,
const LayoutRect& borderBoxRect, RenderElement* backgroundObject) const
{
@@ -1147,7 +1160,7 @@
LayoutSize spaceSize;
LayoutSize phase;
LayoutSize noRepeat;
- LayoutUnit computedXPosition = minimumValueForLength(fillLayer.xPosition(), availableWidth, false);
+ LayoutUnit computedXPosition = resolveEdgeRelativeLength(fillLayer.xPosition(), fillLayer.backgroundXOrigin(), availableWidth, positioningAreaSize, tileSize);
if (backgroundRepeatX == RoundFill && positioningAreaSize.width() > 0 && tileSize.width() > 0) {
int numTiles = std::max(1, roundToInt(positioningAreaSize.width() / tileSize.width()));
if (fillLayer.size().size.height().isAuto() && backgroundRepeatY != RoundFill)
@@ -1157,7 +1170,7 @@
phase.setWidth(tileSize.width() ? tileSize.width() - fmodf((computedXPosition + left), tileSize.width()) : 0);
}
- LayoutUnit computedYPosition = minimumValueForLength(fillLayer.yPosition(), availableHeight, false);
+ LayoutUnit computedYPosition = resolveEdgeRelativeLength(fillLayer.yPosition(), fillLayer.backgroundYOrigin(), availableHeight, positioningAreaSize, tileSize);
if (backgroundRepeatY == RoundFill && positioningAreaSize.height() > 0 && tileSize.height() > 0) {
int numTiles = std::max(1, roundToInt(positioningAreaSize.height() / tileSize.height()));
if (fillLayer.size().size.width().isAuto() && backgroundRepeatX != RoundFill)
@@ -1181,8 +1194,9 @@
} else
backgroundRepeatX = NoRepeatFill;
}
+
if (backgroundRepeatX == NoRepeatFill) {
- LayoutUnit xOffset = left + (fillLayer.backgroundXOrigin() == RightEdge ? availableWidth - computedXPosition : computedXPosition);
+ LayoutUnit xOffset = left + computedXPosition;
if (xOffset > 0)
destinationRect.move(xOffset, 0);
xOffset = std::min<LayoutUnit>(xOffset, 0);
@@ -1206,7 +1220,7 @@
backgroundRepeatY = NoRepeatFill;
}
if (backgroundRepeatY == NoRepeatFill) {
- LayoutUnit yOffset = top + (fillLayer.backgroundYOrigin() == BottomEdge ? availableHeight - computedYPosition : computedYPosition);
+ LayoutUnit yOffset = top + computedYPosition;
if (yOffset > 0)
destinationRect.move(0, yOffset);
yOffset = std::min<LayoutUnit>(yOffset, 0);
Modified: trunk/Source/WebCore/rendering/style/FillLayer.cpp (196959 => 196960)
--- trunk/Source/WebCore/rendering/style/FillLayer.cpp 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/Source/WebCore/rendering/style/FillLayer.cpp 2016-02-22 22:26:23 UTC (rev 196960)
@@ -65,8 +65,8 @@
, m_xPosSet(false)
, m_yPosSet(false)
, m_backgroundOriginSet(false)
- , m_backgroundXOrigin(LeftEdge)
- , m_backgroundYOrigin(TopEdge)
+ , m_backgroundXOrigin(static_cast<unsigned>(Edge::Left))
+ , m_backgroundYOrigin(static_cast<unsigned>(Edge::Top))
, m_compositeSet(type == MaskFillLayer)
, m_blendModeSet(false)
, m_maskSourceTypeSet(false)
Modified: trunk/Source/WebCore/rendering/style/FillLayer.h (196959 => 196960)
--- trunk/Source/WebCore/rendering/style/FillLayer.h 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/Source/WebCore/rendering/style/FillLayer.h 2016-02-22 22:26:23 UTC (rev 196960)
@@ -70,8 +70,8 @@
StyleImage* image() const { return m_image.get(); }
const Length& xPosition() const { return m_xPosition; }
const Length& yPosition() const { return m_yPosition; }
- BackgroundEdgeOrigin backgroundXOrigin() const { return static_cast<BackgroundEdgeOrigin>(m_backgroundXOrigin); }
- BackgroundEdgeOrigin backgroundYOrigin() const { return static_cast<BackgroundEdgeOrigin>(m_backgroundYOrigin); }
+ Edge backgroundXOrigin() const { return static_cast<Edge>(m_backgroundXOrigin); }
+ Edge backgroundYOrigin() const { return static_cast<Edge>(m_backgroundYOrigin); }
EFillAttachment attachment() const { return static_cast<EFillAttachment>(m_attachment); }
EFillBox clip() const { return static_cast<EFillBox>(m_clip); }
EFillBox origin() const { return static_cast<EFillBox>(m_origin); }
@@ -104,8 +104,8 @@
void setImage(PassRefPtr<StyleImage> image) { m_image = image; m_imageSet = true; }
void setXPosition(Length length) { m_xPosition = WTFMove(length); m_xPosSet = true; }
void setYPosition(Length length) { m_yPosition = WTFMove(length); m_yPosSet = true; }
- void setBackgroundXOrigin(BackgroundEdgeOrigin o) { m_backgroundXOrigin = o; m_backgroundOriginSet = true; }
- void setBackgroundYOrigin(BackgroundEdgeOrigin o) { m_backgroundYOrigin = o; m_backgroundOriginSet = true; }
+ void setBackgroundXOrigin(Edge o) { m_backgroundXOrigin = static_cast<unsigned>(o); m_backgroundOriginSet = true; }
+ void setBackgroundYOrigin(Edge o) { m_backgroundYOrigin = static_cast<unsigned>(o); m_backgroundOriginSet = true; }
void setAttachment(EFillAttachment attachment) { m_attachment = attachment; m_attachmentSet = true; }
void setClip(EFillBox b) { m_clip = b; m_clipSet = true; }
void setOrigin(EFillBox b) { m_origin = b; m_originSet = true; }
@@ -202,8 +202,8 @@
unsigned m_xPosSet : 1;
unsigned m_yPosSet : 1;
unsigned m_backgroundOriginSet : 1;
- unsigned m_backgroundXOrigin : 2; // BackgroundEdgeOrigin
- unsigned m_backgroundYOrigin : 2; // BackgroundEdgeOrigin
+ unsigned m_backgroundXOrigin : 2; // Edge
+ unsigned m_backgroundYOrigin : 2; // Edge
unsigned m_compositeSet : 1;
unsigned m_blendModeSet : 1;
unsigned m_maskSourceTypeSet : 1;
Modified: trunk/Source/WebCore/rendering/style/RenderStyleConstants.cpp (196959 => 196960)
--- trunk/Source/WebCore/rendering/style/RenderStyleConstants.cpp 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/Source/WebCore/rendering/style/RenderStyleConstants.cpp 2016-02-22 22:26:23 UTC (rev 196960)
@@ -85,13 +85,13 @@
return ts;
}
-TextStream& operator<<(TextStream& ts, BackgroundEdgeOrigin edge)
+TextStream& operator<<(TextStream& ts, Edge edge)
{
switch (edge) {
- case TopEdge: ts << "top"; break;
- case RightEdge: ts << "right"; break;
- case BottomEdge: ts << "bottom"; break;
- case LeftEdge: ts << "left"; break;
+ case Edge::Top: ts << "top"; break;
+ case Edge::Right: ts << "right"; break;
+ case Edge::Bottom: ts << "bottom"; break;
+ case Edge::Left: ts << "left"; break;
}
return ts;
}
Modified: trunk/Source/WebCore/rendering/style/RenderStyleConstants.h (196959 => 196960)
--- trunk/Source/WebCore/rendering/style/RenderStyleConstants.h 2016-02-22 22:24:51 UTC (rev 196959)
+++ trunk/Source/WebCore/rendering/style/RenderStyleConstants.h 2016-02-22 22:26:23 UTC (rev 196960)
@@ -230,8 +230,8 @@
// CSS3 Background Values
enum EFillSizeType { Contain, Cover, SizeLength, SizeNone };
-// CSS3 Background Position
-enum BackgroundEdgeOrigin { TopEdge, RightEdge, BottomEdge, LeftEdge };
+// CSS3 <position>
+enum class Edge { Top, Right, Bottom, Left };
// CSS3 Mask Source Types
enum EMaskSourceType { MaskAlpha, MaskLuminance };
@@ -694,7 +694,7 @@
TextStream& operator<<(TextStream&, EFillBox);
TextStream& operator<<(TextStream&, EFillRepeat);
TextStream& operator<<(TextStream&, EMaskSourceType);
-TextStream& operator<<(TextStream&, BackgroundEdgeOrigin);
+TextStream& operator<<(TextStream&, Edge);
} // namespace WebCore
