Repeated background images have the wrong position when using bottom/right-relative...
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 22 Feb 2016 22:26:23 +0000 (22:26 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 22 Feb 2016 22:26:23 +0000 (22:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=154478

Reviewed by Dave Hyatt.
Source/WebCore:

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:

LayoutTests:

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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@196960 268f45cc-cd09-0410-ab3c-d52691b4dbfc

12 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/background-position-serialize-expected.txt
LayoutTests/fast/css/background-position-serialize.html
LayoutTests/fast/images/background-position-expected.html [new file with mode: 0644]
LayoutTests/fast/images/background-position.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/CSSPrimitiveValueMappings.h
Source/WebCore/rendering/RenderBoxModelObject.cpp
Source/WebCore/rendering/style/FillLayer.cpp
Source/WebCore/rendering/style/FillLayer.h
Source/WebCore/rendering/style/RenderStyleConstants.cpp
Source/WebCore/rendering/style/RenderStyleConstants.h

index 6abc7cb..c6d4e8c 100644 (file)
@@ -1,3 +1,20 @@
+2016-02-22  Simon Fraser  <simon.fraser@apple.com>
+
+        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  <mmaxfield@apple.com>
 
         [Font Loading] Split CSSFontSelector into a FontFaceSet implementation and the rest of the class
index 7a0b0fd..c0fb3be 100644 (file)
@@ -56,6 +56,19 @@ PASS: t.style.backgroundPosition should be 10px 15px, 20px 25px, 30px 35px and i
 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 =
index d3950ff..fc21eeb 100644 (file)
@@ -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.backgroundPositionX", "10px, 20px, 30px");
 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 =");
diff --git a/LayoutTests/fast/images/background-position-expected.html b/LayoutTests/fast/images/background-position-expected.html
new file mode 100644 (file)
index 0000000..9de7544
--- /dev/null
@@ -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>
diff --git a/LayoutTests/fast/images/background-position.html b/LayoutTests/fast/images/background-position.html
new file mode 100644 (file)
index 0000000..f2fd54e
--- /dev/null
@@ -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>
index 8fc3ef2..c320dd7 100644 (file)
@@ -1,3 +1,35 @@
+2016-02-22  Simon Fraser  <simon.fraser@apple.com>
+
+        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  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r196935.
index a9aaa94..f7ebbcd 100644 (file)
@@ -902,45 +902,45 @@ template<> inline CSSPrimitiveValue::operator EBoxDecorationBreak() const
 }
 #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)
index 747f6ff..d215980 100644 (file)
@@ -1044,6 +1044,19 @@ static inline LayoutUnit getSpace(LayoutUnit areaSize, LayoutUnit tileSize)
     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 @@ BackgroundImageGeometry RenderBoxModelObject::calculateBackgroundImageGeometry(c
     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 @@ BackgroundImageGeometry RenderBoxModelObject::calculateBackgroundImageGeometry(c
         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 @@ BackgroundImageGeometry RenderBoxModelObject::calculateBackgroundImageGeometry(c
         } 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 @@ BackgroundImageGeometry RenderBoxModelObject::calculateBackgroundImageGeometry(c
             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);
index 1f41988..a0f0abe 100644 (file)
@@ -65,8 +65,8 @@ FillLayer::FillLayer(EFillLayerType type)
     , 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)
index 8b0e65e..2358b4d 100644 (file)
@@ -70,8 +70,8 @@ public:
     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 @@ public:
     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 @@ private:
     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;
index 831d179..f13cd7b 100644 (file)
@@ -85,13 +85,13 @@ TextStream& operator<<(TextStream& ts, EMaskSourceType maskSource)
     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;
 }
index fe6f630..492f78c 100644 (file)
@@ -230,8 +230,8 @@ enum EFillLayerType {
 // 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&, EFillAttachment);
 TextStream& operator<<(TextStream&, EFillBox);
 TextStream& operator<<(TextStream&, EFillRepeat);
 TextStream& operator<<(TextStream&, EMaskSourceType);
-TextStream& operator<<(TextStream&, BackgroundEdgeOrigin);
+TextStream& operator<<(TextStream&, Edge);
 
 } // namespace WebCore