Add support for horizontal gradients in Rectangle

[ChangeLog][QtQuick] Added support for horizontal gradients in
Rectangle.

Change-Id: I4feee8ec93d9fe75a9f91a7afbe33c8d4756cedb
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Reviewed-by: Robin Burchell <robin.burchell@crimson.no>

10 files changed, 200 insertions, 105 deletions

diff --git a/src/plugins/scenegraph/openvg/qsgopenvginternalrectanglenode.cpp b/src/plugins/scenegraph/openvg/qsgopenvginternalrectanglenode.cpp
index 0bd51cbf46..d728686248 100644
--- a/src/plugins/scenegraph/openvg/qsgopenvginternalrectanglenode.cpp
+++ b/src/plugins/scenegraph/openvg/qsgopenvginternalrectanglenode.cpp
@@ -176,6 +176,12 @@ void QSGOpenVGInternalRectangleNode::setGradientStops(const QGradientStops &stop
     m_fillDirty = true;
 }
 
+void QSGOpenVGInternalRectangleNode::setGradientVertical(bool vertical)
+{
+    m_vertical = vertical;
+    m_fillDirty = true;
+}
+
 void QSGOpenVGInternalRectangleNode::setRadius(qreal radius)
 {
     m_radius = radius;
@@ -242,13 +248,13 @@ void QSGOpenVGInternalRectangleNode::render()
         } else {
             // Linear Gradient
             vgSetParameteri(m_rectanglePaint, VG_PAINT_TYPE, VG_PAINT_TYPE_LINEAR_GRADIENT);
-            const VGfloat verticalLinearGradient[] = {
-                0.0f,
+            const VGfloat linearGradient[] = {
                 0.0f,
                 0.0f,
-                static_cast<VGfloat>(m_rect.height())
+                m_vertical ? 0.0f : static_cast<VGfloat>(m_rect.width()),
+                m_vertical ? static_cast<VGfloat>(m_rect.height()) : 0.0f
             };
-            vgSetParameterfv(m_rectanglePaint, VG_PAINT_LINEAR_GRADIENT, 4, verticalLinearGradient);
+            vgSetParameterfv(m_rectanglePaint, VG_PAINT_LINEAR_GRADIENT, 4, linearGradient);
             vgSetParameteri(m_rectanglePaint, VG_PAINT_COLOR_RAMP_SPREAD_MODE, VG_COLOR_RAMP_SPREAD_PAD);
             vgSetParameteri(m_rectanglePaint, VG_PAINT_COLOR_RAMP_PREMULTIPLIED, false);
 
diff --git a/src/plugins/scenegraph/openvg/qsgopenvginternalrectanglenode.h b/src/plugins/scenegraph/openvg/qsgopenvginternalrectanglenode.h
index e8d25c94f8..86d2c3318c 100644
--- a/src/plugins/scenegraph/openvg/qsgopenvginternalrectanglenode.h
+++ b/src/plugins/scenegraph/openvg/qsgopenvginternalrectanglenode.h
@@ -59,6 +59,7 @@ public:
     void setPenColor(const QColor &color) override;
     void setPenWidth(qreal width) override;
     void setGradientStops(const QGradientStops &stops) override;
+    void setGradientVertical(bool vertical) override;
     void setRadius(qreal radius) override;
     void setAligned(bool aligned) override;
     void update() override;
@@ -85,6 +86,7 @@ private:
     qreal m_penWidth = 0.0;
     qreal m_radius = 0.0;
     bool m_aligned = false;
+    bool m_vertical = true;
     QGradientStops m_gradientStops;
 
     VGPath m_rectanglePath;
diff --git a/src/quick/items/qquickitemsmodule.cpp b/src/quick/items/qquickitemsmodule.cpp
index c63b4021fe..96927dd37a 100644
--- a/src/quick/items/qquickitemsmodule.cpp
+++ b/src/quick/items/qquickitemsmodule.cpp
@@ -424,6 +424,7 @@ static void qt_quickitems_defineModule(const char *uri, int major, int minor)
     qmlRegisterType<QQuickItem, 11>(uri, 2, 11,"Item");
 
     qmlRegisterType<QQuickAnimatedSprite, 12>("QtQuick", 2, 12, "AnimatedSprite");
+    qmlRegisterType<QQuickGradient, 12>(uri, 2, 12, "Gradient");
 }
 
 static void initResources()
diff --git a/src/quick/items/qquickrectangle.cpp b/src/quick/items/qquickrectangle.cpp
index 3895f59ae1..f619d3b85a 100644
--- a/src/quick/items/qquickrectangle.cpp
+++ b/src/quick/items/qquickrectangle.cpp
@@ -219,10 +219,11 @@ void QQuickGradientStop::updateGradient()
     of solid color fills or images. Consider using gradients for static items
     in a user interface.
 
-    In Qt 5.0, only vertical, linear gradients can be applied to items. If you
-    need to apply different orientations of gradients, a combination of rotation
-    and clipping will need to be applied to the relevant items. This can
-    introduce additional performance requirements for your application.
+    Since Qt 5.12, vertical and horizontal linear gradients can be applied to items.
+    If you need to apply angled gradients, a combination of rotation and clipping
+    can be applied to the relevant items. Alternatively, consider using
+    QtQuick.Shapes::LinearGradient or QtGraphicalEffects::LinearGradient. These
+    approaches can all introduce additional performance requirements for your application.
 
     The use of animations involving gradient stops may not give the desired
     result. An alternative way to animate gradients is to use pre-generated
@@ -255,6 +256,28 @@ QQmlListProperty<QQuickGradientStop> QQuickGradient::stops()
     return QQmlListProperty<QQuickGradientStop>(this, m_stops);
 }
 
+/*!
+    \qmlproperty enumeration QtQuick::Gradient::orientation
+    \since 5.12
+
+    Set this property to define the direction of the gradient.
+    \list
+    \li Gradient.Vertical - a vertical gradient
+    \li Gradient.Horizontal - a horizontal gradient
+    \endlist
+
+    The default is Gradient.Vertical.
+*/
+void QQuickGradient::setOrientation(Orientation orientation)
+{
+    if (m_orientation == orientation)
+        return;
+
+    m_orientation = orientation;
+    emit orientationChanged();
+    emit updated();
+}
+
 QGradientStops QQuickGradient::gradientStops() const
 {
     QGradientStops stops;
@@ -374,7 +397,7 @@ QQuickPen *QQuickRectangle::border()
 
     The gradient to use to fill the rectangle.
 
-    This property allows for the construction of simple vertical gradients.
+    This property allows for the construction of simple vertical or horizontal gradients.
     Other gradients may be formed by adding rotation to the rectangle.
 
     \div {class="float-left"}
@@ -510,10 +533,13 @@ QSGNode *QQuickRectangle::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData
     rectangle->setAntialiasing(antialiasing());
 
     QGradientStops stops;
+    bool vertical = true;
     if (d->gradient) {
         stops = d->gradient->gradientStops();
+        vertical = d->gradient->orientation() == QQuickGradient::Vertical;
     }
     rectangle->setGradientStops(stops);
+    rectangle->setGradientVertical(vertical);
 
     rectangle->update();
 
diff --git a/src/quick/items/qquickrectangle_p.h b/src/quick/items/qquickrectangle_p.h
index c07ad835fb..ddafaafb28 100644
--- a/src/quick/items/qquickrectangle_p.h
+++ b/src/quick/items/qquickrectangle_p.h
@@ -119,24 +119,34 @@ class Q_QUICK_PRIVATE_EXPORT QQuickGradient : public QObject
     Q_OBJECT
 
     Q_PROPERTY(QQmlListProperty<QQuickGradientStop> stops READ stops)
+    Q_PROPERTY(Orientation orientation READ orientation WRITE setOrientation NOTIFY orientationChanged REVISION 12)
     Q_CLASSINFO("DefaultProperty", "stops")
 
 public:
     QQuickGradient(QObject *parent=nullptr);
     ~QQuickGradient() override;
 
+    enum Orientation { Vertical = Qt::Vertical,
+                       Horizontal = Qt::Horizontal };
+    Q_ENUM(Orientation)
+
     QQmlListProperty<QQuickGradientStop> stops();
 
+    Orientation orientation() const { return m_orientation; }
+    void setOrientation(Orientation orientation);
+
     QGradientStops gradientStops() const;
 
 Q_SIGNALS:
     void updated();
+    void orientationChanged();
 
 private:
     void doUpdate();
 
 private:
     QList<QQuickGradientStop *> m_stops;
+    Orientation m_orientation = Vertical;
     friend class QQuickRectangle;
     friend class QQuickGradientStop;
 };
diff --git a/src/quick/scenegraph/adaptations/software/qsgsoftwareinternalrectanglenode.cpp b/src/quick/scenegraph/adaptations/software/qsgsoftwareinternalrectanglenode.cpp
index bf3141bc32..2c361e03e2 100644
--- a/src/quick/scenegraph/adaptations/software/qsgsoftwareinternalrectanglenode.cpp
+++ b/src/quick/scenegraph/adaptations/software/qsgsoftwareinternalrectanglenode.cpp
@@ -47,6 +47,7 @@ QT_BEGIN_NAMESPACE
 QSGSoftwareInternalRectangleNode::QSGSoftwareInternalRectangleNode()
     : m_penWidth(0)
     , m_radius(0)
+    , m_vertical(true)
     , m_cornerPixmapIsDirty(true)
     , m_devicePixelRatio(1)
 {
@@ -186,6 +187,15 @@ void QSGSoftwareInternalRectangleNode::setGradientStops(const QGradientStops &st
     markDirty(DirtyMaterial);
 }
 
+void QSGSoftwareInternalRectangleNode::setGradientVertical(bool vertical)
+{
+    if (m_vertical != vertical) {
+        m_vertical = vertical;
+        m_cornerPixmapIsDirty = true;
+        markDirty(DirtyMaterial);
+    }
+}
+
 void QSGSoftwareInternalRectangleNode::setRadius(qreal radius)
 {
     if (m_radius != radius) {
@@ -209,7 +219,7 @@ void QSGSoftwareInternalRectangleNode::update()
     }
 
     if (!m_stops.isEmpty()) {
-        QLinearGradient gradient(QPoint(0,0), QPoint(0,1));
+        QLinearGradient gradient(QPoint(0,0), QPoint(m_vertical ? 0 : 1, m_vertical ? 1 : 0));
         gradient.setStops(m_stops);
         gradient.setCoordinateMode(QGradient::ObjectBoundingMode);
         m_brush = QBrush(gradient);
diff --git a/src/quick/scenegraph/adaptations/software/qsgsoftwareinternalrectanglenode_p.h b/src/quick/scenegraph/adaptations/software/qsgsoftwareinternalrectanglenode_p.h
index 1f87424d2a..125520de26 100644
--- a/src/quick/scenegraph/adaptations/software/qsgsoftwareinternalrectanglenode_p.h
+++ b/src/quick/scenegraph/adaptations/software/qsgsoftwareinternalrectanglenode_p.h
@@ -69,6 +69,7 @@ public:
     void setPenColor(const QColor &color) override;
     void setPenWidth(qreal width) override;
     void setGradientStops(const QGradientStops &stops) override;
+    void setGradientVertical(bool vertical) override;
     void setRadius(qreal radius) override;
     void setAntialiasing(bool antialiasing) override { Q_UNUSED(antialiasing) }
     void setAligned(bool aligned) override;
@@ -91,6 +92,7 @@ private:
     double m_radius;
     QPen m_pen;
     QBrush m_brush;
+    bool m_vertical;
 
     bool m_cornerPixmapIsDirty;
     QPixmap m_cornerPixmap;
diff --git a/src/quick/scenegraph/qsgadaptationlayer_p.h b/src/quick/scenegraph/qsgadaptationlayer_p.h
index 9c88b8272c..c23163a6b3 100644
--- a/src/quick/scenegraph/qsgadaptationlayer_p.h
+++ b/src/quick/scenegraph/qsgadaptationlayer_p.h
@@ -136,6 +136,7 @@ public:
     virtual void setPenColor(const QColor &color) = 0;
     virtual void setPenWidth(qreal width) = 0;
     virtual void setGradientStops(const QGradientStops &stops) = 0;
+    virtual void setGradientVertical(bool vertical) = 0;
     virtual void setRadius(qreal radius) = 0;
     virtual void setAntialiasing(bool antialiasing) { Q_UNUSED(antialiasing) }
     virtual void setAligned(bool aligned) = 0;
diff --git a/src/quick/scenegraph/qsgbasicinternalrectanglenode.cpp b/src/quick/scenegraph/qsgbasicinternalrectanglenode.cpp
index df124cce35..91317ee2d7 100644
--- a/src/quick/scenegraph/qsgbasicinternalrectanglenode.cpp
+++ b/src/quick/scenegraph/qsgbasicinternalrectanglenode.cpp
@@ -68,19 +68,30 @@ namespace
     {
         float x, y;
         Color4ub color;
-        void set(float nx, float ny, Color4ub ncolor)
+
+        void set(float primary, float secondary, Color4ub ncolor, bool vertical)
         {
-            x = nx; y = ny; color = ncolor;
+            if (vertical) {
+                x = secondary; y = primary;
+            } else {
+                x = primary; y = secondary;
+            }
+            color = ncolor;
         }
     };
 
     struct SmoothVertex : public Vertex
     {
         float dx, dy;
-        void set(float nx, float ny, Color4ub ncolor, float ndx, float ndy)
+
+        void set(float primary, float secondary, Color4ub ncolor, float dPrimary, float dSecondary, bool vertical)
         {
-            Vertex::set(nx, ny, ncolor);
-            dx = ndx; dy = ndy;
+            Vertex::set(primary, secondary, ncolor, vertical);
+            if (vertical) {
+                dx = dSecondary; dy = dPrimary;
+            } else {
+                dx = dPrimary; dy = dSecondary;
+            }
         }
     };
 
@@ -103,6 +114,7 @@ QSGBasicInternalRectangleNode::QSGBasicInternalRectangleNode()
     , m_antialiasing(false)
     , m_gradient_is_opaque(true)
     , m_dirty_geometry(false)
+    , m_gradient_is_vertical(true)
     , m_geometry(QSGGeometry::defaultAttributes_ColoredPoint2D(), 0)
 {
     setGeometry(&m_geometry);
@@ -160,6 +172,15 @@ void QSGBasicInternalRectangleNode::setGradientStops(const QGradientStops &stops
     m_dirty_geometry = true;
 }
 
+void QSGBasicInternalRectangleNode::setGradientVertical(bool vertical)
+{
+    if (vertical == m_gradient_is_vertical)
+        return;
+    m_gradient_is_vertical = vertical;
+    m_dirty_geometry = true;
+}
+
+
 void QSGBasicInternalRectangleNode::setRadius(qreal radius)
 {
     if (radius == m_radius)
@@ -230,12 +251,15 @@ void QSGBasicInternalRectangleNode::updateGeometry()
     Color4ub transparent = { 0, 0, 0, 0 };
     const QGradientStops &stops = m_gradient_stops;
 
+    float length = (m_gradient_is_vertical ? height : width);
+    float secondaryLength = (m_gradient_is_vertical ? width : height);
+
     int nextGradientStop = 0;
-    float gradientPos = penWidth / height;
+    float gradientPos = penWidth / length;
     while (nextGradientStop < stops.size() && stops.at(nextGradientStop).first <= gradientPos)
         ++nextGradientStop;
     int lastGradientStop = stops.size() - 1;
-    float lastGradientPos = 1.0f - penWidth / height;
+    float lastGradientPos = 1.0f - penWidth / length;
     while (lastGradientStop >= nextGradientStop && stops.at(lastGradientStop).first >= lastGradientPos)
         --lastGradientStop;
     int gradientIntersections = (lastGradientStop - nextGradientStop + 1);
@@ -319,40 +343,46 @@ void QSGBasicInternalRectangleNode::updateGeometry()
         quint16 *indices = g->indexDataAsUShort();
         quint16 index = 0;
 
-        float py = 0; // previous inner y-coordinate.
-        float plx = 0; // previous inner left x-coordinate.
-        float prx = 0; // previous inner right x-coordinate.
+        float pp = 0; // previous inner primary coordinate.
+        float pss = 0; // previous inner secondary start coordinate.
+        float pse = 0; // previous inner secondary end coordinate.
 
         float angle = 0.5f * float(M_PI) / segments;
         float cosStep = qFastCos(angle);
         float sinStep = qFastSin(angle);
 
+        float innerStart = (m_gradient_is_vertical ? innerRect.top() : innerRect.left());
+        float innerEnd = (m_gradient_is_vertical ? innerRect.bottom() : innerRect.right());
+        float innerLength = (m_gradient_is_vertical ? innerRect.height() : innerRect.width());
+        float innerSecondaryStart = (m_gradient_is_vertical ? innerRect.left() : innerRect.top());
+        float innerSecondaryEnd = (m_gradient_is_vertical ? innerRect.right() : innerRect.bottom());
+
         for (int part = 0; part < 2; ++part) {
             float c = 1 - part;
             float s = part;
             for (int i = 0; i <= segments; ++i) {
-                float y, lx, rx;
+                float p, ss, se;
                 if (innerRadius > 0) {
-                    y = (part ? innerRect.bottom() : innerRect.top()) - innerRadius * c; // current inner y-coordinate.
-                    lx = innerRect.left() - innerRadius * s; // current inner left x-coordinate.
-                    rx = innerRect.right() + innerRadius * s; // current inner right x-coordinate.
-                    gradientPos = ((part ? innerRect.height() : 0) + radius - innerRadius * c) / height;
+                    p = (part ? innerEnd : innerStart) - innerRadius * c; // current inner primary coordinate.
+                    ss = innerSecondaryStart - innerRadius * s; // current inner secondary start coordinate.
+                    se = innerSecondaryEnd + innerRadius * s; // current inner secondary end coordinate.
+                    gradientPos = ((part ? innerLength : 0) + radius - innerRadius * c) / length;
                 } else {
-                    y = (part ? innerRect.bottom() + innerRadius : innerRect.top() - innerRadius); // current inner y-coordinate.
-                    lx = innerRect.left() - innerRadius; // current inner left x-coordinate.
-                    rx = innerRect.right() + innerRadius; // current inner right x-coordinate.
-                    gradientPos = ((part ? innerRect.height() + innerRadius : -innerRadius) + radius) / height;
+                    p = (part ? innerEnd + innerRadius : innerStart - innerRadius); // current inner  primary coordinate.
+                    ss = innerSecondaryStart - innerRadius; // current inner secondary start coordinate.
+                    se = innerSecondaryEnd + innerRadius; // current inner secondary end coordinate.
+                    gradientPos = ((part ? innerLength + innerRadius : -innerRadius) + radius) / length;
                 }
-                float Y = (part ? innerRect.bottom() : innerRect.top()) - outerRadius * c; // current outer y-coordinate.
-                float lX = innerRect.left() - outerRadius * s; // current outer left x-coordinate.
-                float rX = innerRect.right() + outerRadius * s; // current outer right x-coordinate.
+                float outerEdge = (part ? innerEnd : innerStart) - outerRadius * c; // current outer primary coordinate.
+                float outerSecondaryStart = innerSecondaryStart - outerRadius * s; // current outer secondary start coordinate.
+                float outerSecondaryEnd = innerSecondaryEnd + outerRadius * s; // current outer secondary end coordinate.
 
                 while (nextGradientStop <= lastGradientStop && stops.at(nextGradientStop).first <= gradientPos) {
                     // Insert vertices at gradient stops.
-                    float gy = (innerRect.top() - radius) + stops.at(nextGradientStop).first * height;
-                    float t = (gy - py) / (y - py);
-                    float glx = plx * (1 - t) + t * lx;
-                    float grx = prx * (1 - t) + t * rx;
+                    float gp = (innerStart - radius) + stops.at(nextGradientStop).first * length;
+                    float t = (gp - pp) / (p - pp);
+                    float gis = pss * (1 - t) + t * ss; // gradient inner start
+                    float gie = pse * (1 - t) + t * se; // gradient inner end
 
                     fillColor = colorToColor4ub(stops.at(nextGradientStop).second);
 
@@ -377,23 +407,23 @@ void QSGBasicInternalRectangleNode::updateGeometry()
                         indices[innerAATail++] = index + 3;
 
                         bool lower = stops.at(nextGradientStop).first > 0.5f;
-                        float dy = lower ? qMin(0.0f, height - gy - delta) : qMax(0.0f, delta - gy);
-                        smoothVertices[index++].set(grx, gy, fillColor, width - grx - delta, dy);
-                        smoothVertices[index++].set(glx, gy, fillColor, delta - glx, dy);
+                        float dp = lower ? qMin(0.0f, length - gp - delta) : qMax(0.0f, delta - gp);
+                        smoothVertices[index++].set(gp, gie, fillColor, dp, secondaryLength - gie - delta, m_gradient_is_vertical);
+                        smoothVertices[index++].set(gp, gis, fillColor, dp, delta - gis, m_gradient_is_vertical);
                         if (penWidth) {
-                            smoothVertices[index++].set(grx, gy, borderColor, 0.49f * penWidth * s, -0.49f * penWidth * c);
-                            smoothVertices[index++].set(glx, gy, borderColor, -0.49f * penWidth * s, -0.49f * penWidth * c);
+                            smoothVertices[index++].set(gp, gie, borderColor, -0.49f * penWidth * c, 0.49f * penWidth * s, m_gradient_is_vertical);
+                            smoothVertices[index++].set(gp, gis, borderColor, -0.49f * penWidth * c, -0.49f * penWidth * s, m_gradient_is_vertical);
                         } else {
-                            dy = lower ? delta : -delta;
-                            smoothVertices[index++].set(grx, gy, transparent, delta, dy);
-                            smoothVertices[index++].set(glx, gy, transparent, -delta, dy);
+                            dp = lower ? delta : -delta;
+                            smoothVertices[index++].set(gp, gie, transparent, dp, delta, m_gradient_is_vertical);
+                            smoothVertices[index++].set(gp, gis, transparent, dp, -delta, m_gradient_is_vertical);
                         }
                     } else {
-                        vertices[index++].set(grx, gy, fillColor);
-                        vertices[index++].set(glx, gy, fillColor);
+                        vertices[index++].set(gp, gie, fillColor, m_gradient_is_vertical);
+                        vertices[index++].set(gp, gis, fillColor, m_gradient_is_vertical);
                         if (penWidth) {
-                            vertices[index++].set(grx, gy, borderColor);
-                            vertices[index++].set(glx, gy, borderColor);
+                            vertices[index++].set(gp, gie, borderColor, m_gradient_is_vertical);
+                            vertices[index++].set(gp, gis, borderColor, m_gradient_is_vertical);
                         }
                     }
                     ++nextGradientStop;
@@ -430,41 +460,41 @@ void QSGBasicInternalRectangleNode::updateGeometry()
                     indices[innerAATail++] = index + 1;
                     indices[innerAATail++] = index + 3;
 
-                    float dy = part ? qMin(0.0f, height - y - delta) : qMax(0.0f, delta - y);
-                    smoothVertices[index++].set(rx, y, fillColor, width - rx - delta, dy);
-                    smoothVertices[index++].set(lx, y, fillColor, delta - lx, dy);
+                    float dp = part ? qMin(0.0f, length - p - delta) : qMax(0.0f, delta - p);
+                    smoothVertices[index++].set(p, se, fillColor, dp, secondaryLength - se - delta, m_gradient_is_vertical);
+                    smoothVertices[index++].set(p, ss, fillColor, dp, delta - ss, m_gradient_is_vertical);
 
-                    dy = part ? delta : -delta;
+                    dp = part ? delta : -delta;
                     if (penWidth) {
-                        smoothVertices[index++].set(rx, y, borderColor, 0.49f * penWidth * s, -0.49f * penWidth * c);
-                        smoothVertices[index++].set(lx, y, borderColor, -0.49f * penWidth * s, -0.49f * penWidth * c);
-                        smoothVertices[index++].set(rX, Y, borderColor, -0.49f * penWidth * s, 0.49f * penWidth * c);
-                        smoothVertices[index++].set(lX, Y, borderColor, 0.49f * penWidth * s, 0.49f * penWidth * c);
-                        smoothVertices[index++].set(rX, Y, transparent, delta, dy);
-                        smoothVertices[index++].set(lX, Y, transparent, -delta, dy);
+                        smoothVertices[index++].set(p, se, borderColor, -0.49f * penWidth * c, 0.49f * penWidth * s, m_gradient_is_vertical);
+                        smoothVertices[index++].set(p, ss, borderColor, -0.49f * penWidth * c, -0.49f * penWidth * s, m_gradient_is_vertical);
+                        smoothVertices[index++].set(outerEdge, outerSecondaryEnd, borderColor, 0.49f * penWidth * c, -0.49f * penWidth * s, m_gradient_is_vertical);
+                        smoothVertices[index++].set(outerEdge, outerSecondaryStart, borderColor, 0.49f * penWidth * c, 0.49f * penWidth * s, m_gradient_is_vertical);
+                        smoothVertices[index++].set(outerEdge, outerSecondaryEnd, transparent, dp, delta, m_gradient_is_vertical);
+                        smoothVertices[index++].set(outerEdge, outerSecondaryStart, transparent, dp, -delta, m_gradient_is_vertical);
 
                         indices[--outerAAHead] = index - 2;
                         indices[--outerAAHead] = index - 4;
                         indices[outerAATail++] = index - 3;
                         indices[outerAATail++] = index - 1;
                     } else {
-                        smoothVertices[index++].set(rx, y, transparent, delta, dy);
-                        smoothVertices[index++].set(lx, y, transparent, -delta, dy);
+                        smoothVertices[index++].set(p, se, transparent, dp, delta, m_gradient_is_vertical);
+                        smoothVertices[index++].set(p, ss, transparent, dp, -delta, m_gradient_is_vertical);
                     }
                 } else {
-                    vertices[index++].set(rx, y, fillColor);
-                    vertices[index++].set(lx, y, fillColor);
+                    vertices[index++].set(p, se, fillColor, m_gradient_is_vertical);
+                    vertices[index++].set(p, ss, fillColor, m_gradient_is_vertical);
                     if (penWidth) {
-                        vertices[index++].set(rx, y, borderColor);
-                        vertices[index++].set(lx, y, borderColor);
-                        vertices[index++].set(rX, Y, borderColor);
-                        vertices[index++].set(lX, Y, borderColor);
+                        vertices[index++].set(p, se, borderColor, m_gradient_is_vertical);
+                        vertices[index++].set(p, ss, borderColor, m_gradient_is_vertical);
+                        vertices[index++].set(outerEdge, outerSecondaryEnd, borderColor, m_gradient_is_vertical);
+                        vertices[index++].set(outerEdge, outerSecondaryStart, borderColor, m_gradient_is_vertical);
                     }
                 }
 
-                py = y;
-                plx = lx;
-                prx = rx;
+                pp = p;
+                pss = ss;
+                pse = se;
 
                 // Rotate
                 qreal tmp = c;
@@ -543,19 +573,24 @@ void QSGBasicInternalRectangleNode::updateGeometry()
         quint16 *indices = g->indexDataAsUShort();
         quint16 index = 0;
 
-        float lx = innerRect.left();
-        float rx = innerRect.right();
-        float lX = outerRect.left();
-        float rX = outerRect.right();
+        float innerStart = (m_gradient_is_vertical ? innerRect.top() : innerRect.left());
+        float innerEnd = (m_gradient_is_vertical ? innerRect.bottom() : innerRect.right());
+        float outerStart = (m_gradient_is_vertical ? outerRect.top() : outerRect.left());
+        float outerEnd = (m_gradient_is_vertical ? outerRect.bottom() : outerRect.right());
+
+        float innerSecondaryStart = (m_gradient_is_vertical ? innerRect.left() : innerRect.top());
+        float innerSecondaryEnd = (m_gradient_is_vertical ? innerRect.right() : innerRect.bottom());
+        float outerSecondaryStart = (m_gradient_is_vertical ? outerRect.left() : outerRect.top());
+        float outerSecondaryEnd = (m_gradient_is_vertical ? outerRect.right() : outerRect.bottom());
 
         for (int part = -1; part <= 1; part += 2) {
-            float y = (part == 1 ? innerRect.bottom() : innerRect.top());
-            float Y = (part == 1 ? outerRect.bottom() : outerRect.top());
-            gradientPos = (y - innerRect.top() + penWidth) / height;
+            float innerEdge = (part == 1 ? innerEnd : innerStart);
+            float outerEdge = (part == 1 ? outerEnd : outerStart);
+            gradientPos = (innerEdge - innerStart + penWidth) / length;
 
             while (nextGradientStop <= lastGradientStop && stops.at(nextGradientStop).first <= gradientPos) {
                 // Insert vertices at gradient stops.
-                float gy = (innerRect.top() - penWidth) + stops.at(nextGradientStop).first * height;
+                float gp = (innerStart - penWidth) + stops.at(nextGradientStop).first * length;
 
                 fillColor = colorToColor4ub(stops.at(nextGradientStop).second);
 
@@ -580,22 +615,22 @@ void QSGBasicInternalRectangleNode::updateGeometry()
                     indices[innerAATail++] = index + 3;
 
                     bool lower = stops.at(nextGradientStop).first > 0.5f;
-                    float dy = lower ? qMin(0.0f, height - gy - delta) : qMax(0.0f, delta - gy);
-                    smoothVertices[index++].set(rx, gy, fillColor, width - rx - delta, dy);
-                    smoothVertices[index++].set(lx, gy, fillColor, delta - lx, dy);
+                    float dp = lower ? qMin(0.0f, length - gp - delta) : qMax(0.0f, delta - gp);
+                    smoothVertices[index++].set(gp, innerSecondaryEnd, fillColor, dp, secondaryLength - innerSecondaryEnd - delta, m_gradient_is_vertical);
+                    smoothVertices[index++].set(gp, innerSecondaryStart, fillColor, dp, delta - innerSecondaryStart, m_gradient_is_vertical);
                     if (penWidth) {
-                        smoothVertices[index++].set(rx, gy, borderColor, 0.49f * penWidth, (lower ? 0.49f : -0.49f) * penWidth);
-                        smoothVertices[index++].set(lx, gy, borderColor, -0.49f * penWidth, (lower ? 0.49f : -0.49f) * penWidth);
+                        smoothVertices[index++].set(gp, innerSecondaryEnd, borderColor, (lower ? 0.49f : -0.49f) * penWidth, 0.49f * penWidth, m_gradient_is_vertical);
+                        smoothVertices[index++].set(gp, innerSecondaryStart, borderColor, (lower ? 0.49f : -0.49f) * penWidth, -0.49f * penWidth, m_gradient_is_vertical);
                     } else {
-                        smoothVertices[index++].set(rx, gy, transparent, delta, lower ? delta : -delta);
-                        smoothVertices[index++].set(lx, gy, transparent, -delta, lower ? delta : -delta);
+                        smoothVertices[index++].set(gp, innerSecondaryEnd, transparent, lower ? delta : -delta, delta, m_gradient_is_vertical);
+                        smoothVertices[index++].set(gp, innerSecondaryStart, transparent, lower ? delta : -delta, -delta, m_gradient_is_vertical);
                     }
                 } else {
-                    vertices[index++].set(rx, gy, fillColor);
-                    vertices[index++].set(lx, gy, fillColor);
+                    vertices[index++].set(gp, innerSecondaryEnd, fillColor, m_gradient_is_vertical);
+                    vertices[index++].set(gp, innerSecondaryStart, fillColor, m_gradient_is_vertical);
                     if (penWidth) {
-                        vertices[index++].set(rx, gy, borderColor);
-                        vertices[index++].set(lx, gy, borderColor);
+                        vertices[index++].set(gp, innerSecondaryEnd, borderColor, m_gradient_is_vertical);
+                        vertices[index++].set(gp, innerSecondaryStart, borderColor, m_gradient_is_vertical);
                     }
                 }
                 ++nextGradientStop;
@@ -632,34 +667,34 @@ void QSGBasicInternalRectangleNode::updateGeometry()
                 indices[innerAATail++] = index + 1;
                 indices[innerAATail++] = index + 3;
 
-                float dy = part == 1 ? qMin(0.0f, height - y - delta) : qMax(0.0f, delta - y);
-                smoothVertices[index++].set(rx, y, fillColor, width - rx - delta, dy);
-                smoothVertices[index++].set(lx, y, fillColor, delta - lx, dy);
+                float dp = part == 1 ? qMin(0.0f, length - innerEdge - delta) : qMax(0.0f, delta - innerEdge);
+                smoothVertices[index++].set(innerEdge, innerSecondaryEnd, fillColor, dp, secondaryLength - innerSecondaryEnd - delta, m_gradient_is_vertical);
+                smoothVertices[index++].set(innerEdge, innerSecondaryStart, fillColor, dp, delta - innerSecondaryStart, m_gradient_is_vertical);
 
                 if (penWidth) {
-                    smoothVertices[index++].set(rx, y, borderColor, 0.49f * penWidth, 0.49f * penWidth * part);
-                    smoothVertices[index++].set(lx, y, borderColor, -0.49f * penWidth, 0.49f * penWidth * part);
-                    smoothVertices[index++].set(rX, Y, borderColor, -0.49f * penWidth, -0.49f * penWidth * part);
-                    smoothVertices[index++].set(lX, Y, borderColor, 0.49f * penWidth, -0.49f * penWidth * part);
-                    smoothVertices[index++].set(rX, Y, transparent, delta, delta * part);
-                    smoothVertices[index++].set(lX, Y, transparent, -delta, delta * part);
+                    smoothVertices[index++].set(innerEdge, innerSecondaryEnd, borderColor, 0.49f * penWidth * part, 0.49f * penWidth, m_gradient_is_vertical);
+                    smoothVertices[index++].set(innerEdge, innerSecondaryStart, borderColor, 0.49f * penWidth * part, -0.49f * penWidth, m_gradient_is_vertical);
+                    smoothVertices[index++].set(outerEdge, outerSecondaryEnd, borderColor, -0.49f * penWidth * part, -0.49f * penWidth, m_gradient_is_vertical);
+                    smoothVertices[index++].set(outerEdge, outerSecondaryStart, borderColor, -0.49f * penWidth * part, 0.49f * penWidth, m_gradient_is_vertical);
+                    smoothVertices[index++].set(outerEdge, outerSecondaryEnd, transparent, delta * part, delta, m_gradient_is_vertical);
+                    smoothVertices[index++].set(outerEdge, outerSecondaryStart, transparent, delta * part, -delta, m_gradient_is_vertical);
 
                     indices[--outerAAHead] = index - 2;
                     indices[--outerAAHead] = index - 4;
                     indices[outerAATail++] = index - 3;
                     indices[outerAATail++] = index - 1;
                 } else {
-                    smoothVertices[index++].set(rx, y, transparent, delta, delta * part);
-                    smoothVertices[index++].set(lx, y, transparent, -delta, delta * part);
+                    smoothVertices[index++].set(innerEdge, innerSecondaryEnd, transparent, delta * part, delta, m_gradient_is_vertical);
+                    smoothVertices[index++].set(innerEdge, innerSecondaryStart, transparent, delta * part, -delta, m_gradient_is_vertical);
                 }
             } else {
-                vertices[index++].set(rx, y, fillColor);
-                vertices[index++].set(lx, y, fillColor);
+                vertices[index++].set(innerEdge, innerSecondaryEnd, fillColor, m_gradient_is_vertical);
+                vertices[index++].set(innerEdge, innerSecondaryStart, fillColor, m_gradient_is_vertical);
                 if (penWidth) {
-                    vertices[index++].set(rx, y, borderColor);
-                    vertices[index++].set(lx, y, borderColor);
-                    vertices[index++].set(rX, Y, borderColor);
-                    vertices[index++].set(lX, Y, borderColor);
+                    vertices[index++].set(innerEdge, innerSecondaryEnd, borderColor, m_gradient_is_vertical);
+                    vertices[index++].set(innerEdge, innerSecondaryStart, borderColor, m_gradient_is_vertical);
+                    vertices[index++].set(outerEdge, outerSecondaryEnd, borderColor, m_gradient_is_vertical);
+                    vertices[index++].set(outerEdge, outerSecondaryStart, borderColor, m_gradient_is_vertical);
                 }
             }
         }
diff --git a/src/quick/scenegraph/qsgbasicinternalrectanglenode_p.h b/src/quick/scenegraph/qsgbasicinternalrectanglenode_p.h
index 98e53669ce..99f26b9aed 100644
--- a/src/quick/scenegraph/qsgbasicinternalrectanglenode_p.h
+++ b/src/quick/scenegraph/qsgbasicinternalrectanglenode_p.h
@@ -66,6 +66,7 @@ public:
     void setPenColor(const QColor &color) override;
     void setPenWidth(qreal width) override;
     void setGradientStops(const QGradientStops &stops) override;
+    void setGradientVertical(bool vertical) override;
     void setRadius(qreal radius) override;
     void setAntialiasing(bool antialiasing) override;
     void setAligned(bool aligned) override;
@@ -90,6 +91,7 @@ protected:
     uint m_antialiasing : 1;
     uint m_gradient_is_opaque : 1;
     uint m_dirty_geometry : 1;
+    uint m_gradient_is_vertical : 1;
 
     QSGGeometry m_geometry;
 };