Merge lp:~sil2100/ubuntu-ui-toolkit/scrollbar_moreHoverFixesAndTests-ota14 into lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/trunk-ota14

[Łukasz Zemczak]

Cherry-pick Andrea's fix from trunk for OTA-14: Scrollbar: more hover related bugfixes and unit tests. (LP: #1616926 and LP: #1616868)

Cherry-pick Andrea's fix from trunk for OTA-14: Scrollbar: more hover related bugfixes and unit tests. (LP: #1616926 and LP: #1616868)

Original MP: https://code.launchpad.net/~faenil/ubuntu-ui-toolkit/scrollbar_moreHoverFixesAndTests/+merge/304139

Unmerged revisions

1353. By Łukasz Zemczak on 2016-11-09

Cherry-pick Andrea's fix from trunk for OTA-14: Scrollbar: more hover related bugfixes and unit tests. (LP: #1616926 and LP: #1616868)

=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/ScrollbarStyle.qml'
--- src/Ubuntu/Components/Themes/Ambiance/1.3/ScrollbarStyle.qml	2016-08-02 11:18:34 +0000
+++ src/Ubuntu/Components/Themes/Ambiance/1.3/ScrollbarStyle.qml	2016-11-09 16:44:56 +0000
@@ -316,7 +316,9 @@
         property string propPosRatio: (isVertical) ? "yPosition" : "xPosition"
         property string propSizeRatio: (isVertical) ? "heightRatio" : "widthRatio"
         property string propCoordinate: (isVertical) ? "y" : "x"
+        property string otherPropCoordinate: (isVertical) ? "x" : "y"
         property string propSize: (isVertical) ? "height" : "width"
+        property string otherPropSize: (isVertical) ? "width" : "height"
         property string propAtBeginning: (isVertical) ? "atYBeginning" : "atXBeginning"
         property string propAtEnd: (isVertical) ? "atYEnd" : "atXEnd"
 
@@ -622,8 +624,6 @@
                     property bool lockDrag: false
 
                     property bool hoveringThumb: false
-                    property string scrollingProp: isVertical ? "y" : "x"
-                    property string sizeProp: isVertical ? "height" : "width"
 
                     function initDrag(isMouse) {
                         __disableStateBinding = true
@@ -648,20 +648,29 @@
                         if (!thumbArea.pressed) return
 
                         var mouseScrollingProp = isVertical ? mouseY : mouseX
-                        if (mouseScrollingProp < slider[scrollingProp]) {
+                        if (mouseScrollingProp < slider[scrollbarUtils.propCoordinate]) {
                             scrollBy(-pageSize*visuals.longScrollingRatio, true)
-                        } else if (mouseScrollingProp > slider[scrollingProp] + slider[sizeProp]) {
+                        } else if (mouseScrollingProp > slider[scrollbarUtils.propCoordinate] + slider[scrollbarUtils.propSize]) {
                             scrollBy(pageSize*visuals.longScrollingRatio, true)
                         }
                     }
 
+                    //we consider hover if it's inside the TROUGH along the scrolling axis
+                    //and inside the THUMB along the non-scrolling axis
+                    //NOTE: mouseX and mouseY are assumed to be relative to thumbArea
                     function handleHover(mouseX, mouseY) {
+                        //NOTE: we're assuming thumbArea has same size/position as the trough.
+                        //Use mapToItem to map the coordinates if that assumption falls (i.e. to implement
+                        //a larger touch detection area around the thumb)
                         var mouseScrollingProp = isVertical ? mouseY : mouseX
-                        //don't count as hover if the user is already press-and-holding the trough to
-                        //scroll page by page
+                        var otherProp = isVertical ? mouseX : mouseY
+
+                        //don't count as hover if the user is already press-and-holding
+                        //the trough to scroll page by page
                         hoveringThumb = !(pressHoldTimer.running && pressHoldTimer.startedBy === thumbArea)
-                                && mouseScrollingProp >= slider[scrollingProp] &&
-                                mouseScrollingProp <= slider[scrollingProp] + slider[sizeProp]
+                                && mouseScrollingProp >= slider[scrollbarUtils.propCoordinate] &&
+                                mouseScrollingProp <= slider[scrollbarUtils.propCoordinate] + slider[scrollbarUtils.propSize] &&
+                                otherProp >= 0 && otherProp <= trough[scrollbarUtils.otherPropSize]
                     }
 
                     function saveFlickableScrollingState() {
@@ -691,14 +700,9 @@
                         previousY = mouse.y
                     }
 
-                    anchors {
-                        fill: trough
-                        // set margins adding 2 dp for error area
-                        leftMargin: (!isVertical || frontAligned) ? 0 : units.dp(-2)
-                        rightMargin: (!isVertical || rearAligned) ? 0 : units.dp(-2)
-                        topMargin: (isVertical || topAligned) ?  0 : units.dp(-2)
-                        bottomMargin: (isVertical || bottomAligned) ?  0 : units.dp(-2)
-                    }
+                    //NOTE: remember to update the handleHover check if you add anchor margins
+                    anchors.fill: trough
+
                     enabled: isScrollable && interactive && __canFitSteppersAndShorterThumb
                     onPressed: {
                         cacheMousePosition(mouse)
@@ -710,8 +714,8 @@
                         if (firstStepper.visible) {
                             var mouseScrollingProp = isVertical ? mouseY : mouseX
                             //don't start the press and hold timer to avoid conflicts with the drag
-                            if (mouseScrollingProp < slider[scrollingProp] ||
-                                    mouseScrollingProp > (slider[scrollingProp] + slider[sizeProp])) {
+                            if (mouseScrollingProp < slider[scrollbarUtils.propCoordinate] ||
+                                    mouseScrollingProp > (slider[scrollbarUtils.propCoordinate] + slider[scrollbarUtils.propSize])) {
                                 handlePress(mouseX, mouseY)
                                 pressHoldTimer.startTimer(thumbArea)
                             } else {
@@ -761,7 +765,8 @@
                         pressHoldTimer.stop()
                     }
                     onReleased: {
-                        handleHover(mouseX, mouseY)
+                        //don't call handleHover here as touch release also triggers this handler
+                        //see bug #1616868
                         resetDrag()
                         pressHoldTimer.stop()
                     }
@@ -797,18 +802,29 @@
 
                     //logic to support different colour on hovering
                     hoverEnabled: true
+                    //This means this mouse filter will only handle real mouse events!
+                    //i.e. the synthesized mouse events created when you use
+                    //touchscreen will not trigger it! This way we can have logic that
+                    //will not trigger when using touch
+                    Mouse.ignoreSynthesizedEvents: true
                     Mouse.enabled: true
-                    Mouse.ignoreSynthesizedEvents: true
                     Mouse.onEntered: {
                         hoveringThumb = false
                         handleHover(event.x, event.y)
                     }
                     Mouse.onPositionChanged: {
+                        //We need to update the hover state also onPosChanged because this area
+                        //covers the whole trough, not just the thumb, so entered/exited are not enough
+                        //e.g. when mouse moves from inside the thumb to inside the trough, or when you
+                        //click on the trough and the thumb scrolls and goes under the mouse cursor
                         handleHover(mouse.x, mouse.y)
                     }
                     Mouse.onExited: {
                         hoveringThumb = false
                     }
+                    Mouse.onReleased: {
+                        handleHover(mouse.x, mouse.y)
+                    }
 
                     Timer {
                         id: pressHoldTimer
@@ -845,6 +861,7 @@
 
             MouseArea {
                 id: steppersMouseArea
+                objectName: "steppersMouseArea"
                 //size is handled by the states
 
                 property bool hoveringFirstStepper: false
@@ -897,12 +914,7 @@
                     hoveringFirstStepper = false
                     hoveringSecondStepper = false
                 }
-
-                //We don't change the size of the images because we let the image reader figure the size out,
-                //though that means we have to hide the images somehow while the mousearea is visible but has
-                //null size. We choose to enable clipping here instead of creating bindings on images' visible prop
-                clip: true
-                onPressed: {
+                Mouse.onPressed: {
                     //This additional trigger of the hovering logic is useful especially in testing
                     //environments, where simulating a click on the first stepper will generate onEntered,
                     //but then clicking on the second one (without a mouseMove) won't, because they're
@@ -910,7 +922,16 @@
                     //we ensure that the hovering logic is correct even when there are no mouse moves between
                     //clicks on different steppers (like it happens in tst_actionSteppers test).
                     handleHover(mouse)
+                }
+                Mouse.onReleased: {
+                    handleHover(mouse)
+                }
 
+                //We don't change the size of the images because we let the image reader figure the size out,
+                //though that means we have to hide the images somehow while the mousearea is visible but has
+                //null size. We choose to enable clipping here instead of creating bindings on images' visible prop
+                clip: true
+                onPressed: {
                     handlePress()
                     pressHoldTimer.startTimer(steppersMouseArea)
                 }
@@ -952,7 +973,7 @@
                         anchors.centerIn: parent
                         width: __stepperAssetWidth
                         rotation: isVertical ? 180 : 90
-                        //NOTE: Qt.resolvedUrl was removed because it does not seem to be needed and 
+                        //NOTE: Qt.resolvedUrl was removed because it does not seem to be needed and
                         //the QML profiler showed it's relatively expensive
                         source: visible ? "../artwork/toolkit_scrollbar-stepper.svg" : ""
                         asynchronous: true
@@ -998,7 +1019,7 @@
                         anchors.centerIn: parent
                         width: __stepperAssetWidth
                         rotation: isVertical ? 0 : -90
-                        //NOTE: Qt.resolvedUrl was removed because it does not seem to be needed and     
+                        //NOTE: Qt.resolvedUrl was removed because it does not seem to be needed and
                         //the QML profiler showed it's relatively expensive
                         source: visible ? "../artwork/toolkit_scrollbar-stepper.svg" : ""
                         asynchronous: true

=== modified file 'tests/unit/visual/ScrollbarTestCase13.qml'
--- tests/unit/visual/ScrollbarTestCase13.qml	2016-06-08 11:36:03 +0000
+++ tests/unit/visual/ScrollbarTestCase13.qml	2016-11-09 16:44:56 +0000
@@ -242,6 +242,9 @@
     function getThumbArea(scrollbar) {
         return findChildAndCheckValidInstance(scrollbar.__styleInstance, "thumbArea")
     }
+    function getSteppersMouseArea(scrollbar) {
+        return findChildAndCheckValidInstance(scrollbar.__styleInstance, "steppersMouseArea")
+    }
     function getScrollAnimation(scrollbar) {
         var anim = findInvisibleChild(scrollbar.__styleInstance, "scrollAnimation")
         verify(anim !== null, "Returning a valid reference to scrollAnimation.")

=== modified file 'tests/unit/visual/tst_scrollbar.13.qml'
--- tests/unit/visual/tst_scrollbar.13.qml	2016-08-02 13:43:39 +0000
+++ tests/unit/visual/tst_scrollbar.13.qml	2016-11-09 16:44:56 +0000
@@ -250,7 +250,7 @@
             nullFlickableScrollbar.destroy()
         }
 
-        //no need to test the anchors values when flickable is not set because we already 
+        //no need to test the anchors values when flickable is not set because we already
         //test that the scrollbar is hidden when there's no flickable set
         function test_bottomAlign_anchors() {
             compare(scrollbar_bottomAlign_anchors.flickableItem,
@@ -438,40 +438,101 @@
             }
         }
 
-        function test_checkStepperStatesStyling(data) {
-            var freshTestItem = getFreshFlickable(data.alignment)
-            var flickable = freshTestItem.flickable
-            var scrollbar = freshTestItem.scrollbar
-            var style = scrollbar.__styleInstance
+        function checkSteppersColour(scrollbar, firstStepperStateString, secondStepperStateString, testDescription) {
             var firstStepper = getFirstStepper(scrollbar)
             var secondStepper = getSecondStepper(scrollbar)
-
-            triggerSteppersMode(scrollbar)
-
-            //the following tests are assuming that the steppers are not disabled
-            compare(style.isScrollable, true, "Scrollbar is not scrollable, cannot test steppers hover/pressed state.")
-
             var firstStepperIcon = getFirstStepperIcon(scrollbar)
             var secondStepperIcon = getSecondStepperIcon(scrollbar)
+            var style = scrollbar.__styleInstance
 
-            //bg color on hover/pressed. Otherwise it should be transparent so that it shows the same bg as the trough
             var stepperBgColorBase = style.stepperBgColor
-
             var stepperImgColor = style.sliderColor
+
+            var stepperBgColorDisabled = "transparent"
+            var stepperImgColorDisabled = Qt.rgba(stepperImgColor.r, stepperImgColor.g, stepperImgColor.b,
+                                                  stepperImgColor.a * style.__stepperImgOpacityDisabled)
+            var stepperBgColorNormal = "transparent"
+            var stepperImgColorNormal = Qt.rgba(stepperImgColor.r, stepperImgColor.g, stepperImgColor.b,
+                                                stepperImgColor.a * style.__stepperImgOpacityNormal)
+            var stepperBgColorOnHover = Qt.rgba(stepperBgColorBase.r, stepperBgColorBase.g, stepperBgColorBase.b,
+                                                stepperBgColorBase.a *  style.__stepperBgOpacityOnHover)
             var stepperImgColorOnHover = Qt.rgba(stepperImgColor.r, stepperImgColor.g, stepperImgColor.b,
                                                  stepperImgColor.a * style.__stepperImgOpacityOnHover)
-            var stepperBgColorOnHover = Qt.rgba(stepperBgColorBase.r, stepperBgColorBase.g, stepperBgColorBase.b,
-                                                stepperBgColorBase.a *  style.__stepperBgOpacityOnHover)
+            var stepperBgColorOnPressed = Qt.rgba(stepperBgColorBase.r, stepperBgColorBase.g, stepperBgColorBase.b,
+                                                  stepperBgColorBase.a *  style.__stepperBgOpacityOnPressed)
             var stepperImgColorOnPressed = Qt.rgba(stepperImgColor.r, stepperImgColor.g, stepperImgColor.b,
                                                    stepperImgColor.a * style.__stepperImgOpacityOnPressed)
-            var stepperBgColorOnPressed = Qt.rgba(stepperBgColorBase.r, stepperBgColorBase.g, stepperBgColorBase.b,
-                                                  stepperBgColorBase.a *  style.__stepperBgOpacityOnPressed)
-            var stepperBgColorNormal = "transparent"
-            var stepperImgColorNormal = Qt.rgba(stepperImgColor.r, stepperImgColor.g, stepperImgColor.b,
-                                                stepperImgColor.a * style.__stepperImgOpacityNormal)
-            var stepperBgColorDisabled = "transparent"
-            var stepperImgColorDisabled = Qt.rgba(stepperImgColor.r, stepperImgColor.g, stepperImgColor.b,
-                                                  stepperImgColor.a * style.__stepperImgOpacityDisabled)
+
+            switch (firstStepperStateString) {
+            case "disabled":
+                var expectedFirstStepperColour = stepperBgColorDisabled
+                var expectedFirstStepperIconColour = stepperImgColorDisabled
+                break
+            case "normal":
+                var expectedFirstStepperColour = stepperBgColorNormal
+                var expectedFirstStepperIconColour = stepperImgColorNormal
+                break
+            case "hovered":
+                var expectedFirstStepperColour = stepperBgColorOnHover
+                var expectedFirstStepperIconColour = stepperImgColorOnHover
+                break
+            case "pressed":
+                var expectedFirstStepperColour = stepperBgColorOnPressed
+                var expectedFirstStepperIconColour = stepperImgColorOnPressed
+                break
+            default:
+                fail("Invalid stepper state string")
+            }
+
+            switch (secondStepperStateString) {
+            case "disabled":
+                var expectedSecondStepperColour = stepperBgColorDisabled
+                var expectedSecondStepperIconColour = stepperImgColorDisabled
+                break
+            case "normal":
+                var expectedSecondStepperColour = stepperBgColorNormal
+                var expectedSecondStepperIconColour = stepperImgColorNormal
+                break
+            case "hovered":
+                var expectedSecondStepperColour = stepperBgColorOnHover
+                var expectedSecondStepperIconColour = stepperImgColorOnHover
+                break
+            case "pressed":
+                var expectedSecondStepperColour = stepperBgColorOnPressed
+                var expectedSecondStepperIconColour = stepperImgColorOnPressed
+                break
+            default:
+                fail("Invalid stepper state string")
+            }
+
+            var msg = "First stepper expected state: " + firstStepperStateString + "."
+                    + " Second stepper expected state: " + secondStepperStateString + ". "
+                    + " Test description: " + testDescription + ". "
+                    + " Error encountered: "
+
+            //compare() returns pass on different colours, see https://bugreports.qt.io/browse/QTBUG-34878
+            compare(Qt.colorEqual(firstStepper.color, expectedFirstStepperColour), true,
+                    msg + "wrong first stepper background color.")
+            compare(Qt.colorEqual(firstStepperIcon.color, expectedFirstStepperIconColour), true,
+                    msg + "wrong first stepper icon color.")
+            compare(Qt.colorEqual(secondStepper.color, expectedSecondStepperColour), true,
+                    msg + "wrong second stepper background color.")
+            compare(Qt.colorEqual(secondStepperIcon.color, expectedSecondStepperIconColour), true,
+                    msg + "wrong second stepper icon color.")
+        }
+
+        function test_checkStepperStatesStyling(data) {
+            var freshTestItem = getFreshFlickable(data.alignment)
+            var flickable = freshTestItem.flickable
+            var scrollbar = freshTestItem.scrollbar
+            var style = scrollbar.__styleInstance
+            var firstStepper = getFirstStepper(scrollbar)
+            var secondStepper = getSecondStepper(scrollbar)
+
+            triggerSteppersMode(scrollbar)
+
+            //the following tests are assuming that the steppers are not disabled
+            compare(style.isScrollable, true, "Scrollbar is not scrollable, cannot test steppers hover/pressed state.")
 
             if (style.isVertical) {
                 compare(style.flickableItem.atYBeginning, true, "View not scrolled to the beginning as expected.")
@@ -482,38 +543,17 @@
             }
 
             //Check that the first stepper is disabled and the second one is in normal state
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorDisabled), true,
-                    "Wrong first stepper bg color in disabled state.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorDisabled), true,
-                    "Wrong first stepper img color in disabled state.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorNormal), true,
-                    "Wrong second stepper bg color when it should be in normal state.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong second stepper img color when it should be in normal state.")
+            checkSteppersColour(scrollbar, "disabled", "normal", "default state before moving mouse")
+
+            //Check that hovering on a disabled stepper does not change its colour
+            mouseMove(firstStepper, firstStepper.width/2, firstStepper.height/2)
+            checkSteppersColour(scrollbar, "disabled", "normal", "mouse hovered to disabled first stepper")
 
             //Check that tapping on a disabled stepper does not change its colour
             mousePress(firstStepper, firstStepper.width/2, firstStepper.height/2)
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorDisabled), true,
-                    "Pressing first stepper changes its bg colour even when it's disabled.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorDisabled), true,
-                    "Pressing first stepper changes its img colour even when it's disabled.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorNormal), true,
-                    "Wrong second stepper bg color when it should be in normal state.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong second stepper img color when it should be in normal state.")
+            checkSteppersColour(scrollbar, "disabled", "normal", "mouse pressed on disabled first stepper")
             mouseRelease(firstStepper, firstStepper.width/2, firstStepper.height/2)
 
-            //Check that hovering on a disabled stepper does not change its colour
-            mouseMove(firstStepper, firstStepper.width/2, firstStepper.height/2)
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorDisabled), true,
-                    "Hovering on first stepper changes its bg colour even when it's disabled.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorDisabled), true,
-                    "Hovering on first stepper changes its img colour even when it's disabled.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorNormal), true,
-                    "Wrong second stepper bg color when it should be in normal state.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong second stepper img color when it should be in normal state.")
-
             //move mouse away from the steppers
             mouseMove(scrollbar, 0, 0)
 
@@ -533,44 +573,23 @@
             }
 
 
-            //Check that the first stepper is disabled and the second one is in normal state
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorNormal), true,
-                    "Wrong first stepper bg color when it should be in normal state.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong first stepper img color when it should be in normal state.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorDisabled), true,
-                    "Wrong second stepper bg color in disabled state.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorDisabled), true,
-                    "Wrong second stepper img color in disabled state.")
+            //Check that the first stepper is normal and the second one is in disable state
+            checkSteppersColour(scrollbar, "normal", "disabled", "after thumb dragged to bottom and mouse moved away from steppers.")
+
+            //Check that hovering on a disabled stepper does not change its colour
+            mouseMove(secondStepper, secondStepper.width/2, secondStepper.height/2)
+            checkSteppersColour(scrollbar, "normal", "disabled", "thumb at the bottom, mouse hovered on disabled second stepper")
 
             //Check that tapping on a disabled stepper does not change its colour
             mousePress(secondStepper, secondStepper.width/2, secondStepper.height/2)
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorNormal), true,
-                    "Wrong first stepper bg color when it should be in normal state.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong first stepper img color when it should be in normal state.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorDisabled), true,
-                    "Pressing second stepper changes its bg colour even when it's disabled.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorDisabled), true,
-                    "Pressing second stepper changes its img colour even when it's disabled.")
+            checkSteppersColour(scrollbar, "normal", "disabled", "thumb at the bottom, mouse pressed on disabled second stepper")
             mouseRelease(secondStepper, secondStepper.width/2, secondStepper.height/2)
 
-            //Check that hovering on a disabled stepper does not change its colour
-            mouseMove(secondStepper, secondStepper.width/2, secondStepper.height/2)
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorNormal), true,
-                    "Wrong first stepper bg color when it should be in normal state.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong first stepper img color when it should be in normal state.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorDisabled), true,
-                    "Hovering on second stepper changes its bg colour even when it's disabled.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorDisabled), true,
-                    "Hovering on second stepper changes its img colour even when it's disabled.")
-
             //move mouse away from the steppers
             mouseMove(scrollbar, 0, 0)
 
-            //trigger first stepper to scroll down a bit, so that they're both not disabled
-            //scrolling down with a stepper should not scroll to the top, unless there's a bug somewhere else
+            //trigger first stepper to scroll up a bit, so that they're both not disabled
+            //scrolling up with a stepper should not scroll to the top, unless there's a bug somewhere else
             //or the flickable test item gets changed
             clickInTheMiddle(firstStepper)
             checkScrolling(flickable, style.flickableItem.contentX, style.flickableItem.contentY, style,
@@ -589,65 +608,46 @@
             mouseMove(scrollbar, 0, 0)
 
             //Check colours in normal state
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorNormal), true,
-                    "Wrong first stepper bg color in normal state.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong first stepper img color in normal state.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorNormal), true,
-                    "Wrong second stepper bg color in normal state.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong second stepper img color in normal state.")
+            checkSteppersColour(scrollbar, "normal", "normal", "mouse moved away from steppers")
 
             //Hover on first stepper and check colour of both steppers
             mouseMove(firstStepper, firstStepper.width/2, firstStepper.height/2)
-            //compare() returns pass on different colours, see https://bugreports.qt.io/browse/QTBUG-34878
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorOnHover), true,
-                    "Wrong first stepper bg color on hover.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorOnHover), true,
-                    "Wrong first stepper img color on hover.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorNormal), true,
-                    "Wrong second stepper bg color when hovering on first stepper.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong second stepper img color when hovering on first stepper.")
+            checkSteppersColour(scrollbar, "hovered", "normal", "mouse hovered on first stepper")
 
             //Press on first stepper and check colour of both steppers
             mousePress(firstStepper, firstStepper.width/2, firstStepper.height/2)
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorOnPressed), true,
-                    "Wrong first stepper bg color on pressed.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorOnPressed), true,
-                    "Wrong first stepper img color on pressed.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorNormal), true,
-                    "Wrong second stepper bg color when pressing on first stepper.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong second stepper img color when pressing on first stepper.")
+            checkSteppersColour(scrollbar, "pressed", "normal", "mouse pressed on first stepper")
             mouseRelease(firstStepper, firstStepper.width/2, firstStepper.height/2)
 
             //Hover on second stepper and check colour of both steppers
             mouseMove(secondStepper, secondStepper.width/2, secondStepper.height/2)
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorNormal), true,
-                    "Wrong first stepper bg color when hovering on second stepper.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong first stepper img color when hovering on second stepper.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorOnHover), true,
-                    "Wrong second stepper bg color on hover.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorOnHover), true,
-                    "Wrong second stepper img color on hover.")
+            checkSteppersColour(scrollbar, "normal", "hovered", "mouse hovered on second stepper")
 
             //Press on second stepper and check colour of both steppers
             mousePress(secondStepper, secondStepper.width/2, secondStepper.height/2)
-            compare(Qt.colorEqual(firstStepper.color, stepperBgColorNormal), true,
-                    "Wrong first stepper bg color when pressing on second stepper.")
-            compare(Qt.colorEqual(firstStepperIcon.color, stepperImgColorNormal), true,
-                    "Wrong first stepper img color when pressing on second stepper.")
-            compare(Qt.colorEqual(secondStepper.color, stepperBgColorOnPressed), true,
-                    "Wrong second stepper bg color on pressed.")
-            compare(Qt.colorEqual(secondStepperIcon.color, stepperImgColorOnPressed), true,
-                    "Wrong second stepper img color on pressed.")
-            mouseRelease(secondStepper, secondStepper.width/2, secondStepper.height/2)
+            checkSteppersColour(scrollbar, "normal", "pressed", "mouse pressed on second stepper")
+            mouseRelease(secondStepper, secondStepper.width/2, secondStepper.height/2)
+
+            //Check that pressing on a stepper (mouse-only) will activate the hover state
+            //even without a mouse move (i.e. without onEntered/onExited, which can often
+            //happen in unit tests)
+
+            //Press on first stepper without first firing mouseMove and check colour of both steppers
+            mousePress(firstStepper, firstStepper.width/2, firstStepper.height/2)
+            checkSteppersColour(scrollbar, "pressed", "normal", "mouse pressed on first stepper without sending mouseMove before")
+            mouseRelease(firstStepper, firstStepper.width/2, firstStepper.height/2)
+            checkSteppersColour(scrollbar, "hovered", "normal", "after mouse released while on first stepper")
+
+            //Press on second stepper  without first firing mouseMove and check colour of both steppers
+            mousePress(secondStepper, secondStepper.width/2, secondStepper.height/2)
+            checkSteppersColour(scrollbar, "normal", "pressed", "mouse pressed on second stepper without sending mouseMove before")
+            mouseRelease(secondStepper, secondStepper.width/2, secondStepper.height/2)
+            checkSteppersColour(scrollbar, "normal", "hovered", "after mouse released while on second stepper")
         }
 
-        //test dragging the thumb and relative visual changes due to hover/pressed states
-        function test_dragThumbAndCheckStyling(data) {
+
+        //test that moving the mouse inside and outside any of the hover area borders has the expected effect
+        function test_thumbHoverArea(data) {
             var freshTestItem = getFreshFlickable(data.alignment)
             var flickable = freshTestItem.flickable
             var scrollbar = freshTestItem.scrollbar
@@ -673,7 +673,7 @@
             //check colour of the thumb in normal state
             compare(Qt.colorEqual(thumb.color, thumbNormalColor), true, "Wrong thumb color in normal state.")
 
-            //check hovered colour
+            //hover on the middle
             mouseMove(thumb, thumb.width/2, thumb.height/2)
             compare(Qt.colorEqual(thumb.color, thumbHoveredColor), true, "Wrong thumb color in hover state.")
 
@@ -695,6 +695,102 @@
             compare(Qt.colorEqual(thumb.color, thumbHoveredColor), true,
                     "Thumb does not show as hovered after mouse press-release inside it.")
 
+            //depending on how the implementation of the scrollbar evolves, the input area
+            //may become bigger than the trough on one or both sides, so we map the coords
+            //to know where to send events relative to the thumb so that they hit the trough
+            //(which is part of the hover area, along the scrolling axis, i.e. x-axis for vert.scrollbar)
+            var mappedCoords = thumb.mapToItem(trough, 0, 0)
+
+            //mouseMove seem to deliver events at pixel bound, so we have to take the floor of the sizes
+            //otherwise if thumb has width 50.6, mouseMove(thumb, 50.6, 0) will send an event to x==51 and that
+            //will cause the logic to assume the mouse is outside the hover area while it's on the border
+            var floorThumbWidth = Math.floor(thumb.width)
+            var floorThumbHeight = Math.floor(thumb.height)
+            var floorTroughWidth = Math.floor(trough.width)
+            var floorTroughHeight = Math.floor(trough.height)
+
+            //top-left and bottom-right coords of the rectangle defining the thumb hover area
+            //we need different handling of vertical/horizontal because the hover area is defined
+            //as the whole trough along the scrolling axis (e.g. whole trough width for the vert. scrollbar)
+            //and exactly the thumb along the non-scrolling axis (e.g. thumb's height for vert. scrollbar
+            if (style.isVertical) {
+                var insideTopLeft     = [-mappedCoords.x                   , 0               ]
+                var insideBottomRight = [-mappedCoords.x + floorTroughWidth, floorThumbHeight]
+            } else {
+                var insideTopLeft     = [0              , -mappedCoords.y                    ]
+                var insideBottomRight = [floorThumbWidth, -mappedCoords.y + floorTroughHeight]
+            }
+            mouseMove(thumb, insideTopLeft[0], insideTopLeft[1])
+            compare(Qt.colorEqual(thumb.color, thumbHoveredColor), true,
+                    "Thumb does not show as hovered after mouse moved to the top-left corner of the hover area.")
+            mouseMove(thumb, insideBottomRight[0], insideBottomRight[1])
+            compare(Qt.colorEqual(thumb.color, thumbHoveredColor), true,
+                    "Thumb does not show as hovered after mouse moved to the bottom-right corner of the hover area.")
+
+            //right outside the hover area
+            var outsideTopBorder    = [insideTopLeft[0]           , insideTopLeft[1] - 1] //move 1 up
+            var outsideLeftBorder   = [insideTopLeft[0] - 1       , insideTopLeft[1]] //move 1 left
+            var outsideBottomBorder = [insideBottomRight[0]       , insideBottomRight[1] + 1] //move 1 down
+            var outsideRightBorder  = [insideBottomRight[0] + 1   , insideBottomRight[1]] //move 1 right
+
+            //check that when the mouse is right outside the borders of the hover area the thumb will use the non-hover colour
+            mouseMove(thumb, outsideTopBorder[0], outsideTopBorder[1])
+            compare(Qt.colorEqual(thumb.color, thumbNormalColor), true,
+                    "Thumb does not show as NOT-hovered after mouse moved outside the top border of the hover area.")
+            mouseMove(thumb, outsideBottomBorder[0], outsideBottomBorder[1])
+            compare(Qt.colorEqual(thumb.color, thumbNormalColor), true,
+                    "Thumb does not show as NOT-hovered after mouse moved outside the bottom border of the hover area.")
+            mouseMove(thumb, outsideLeftBorder[0], outsideLeftBorder[1])
+            compare(Qt.colorEqual(thumb.color, thumbNormalColor), true,
+                    "Thumb does not show as NOT-hovered after mouse moved outside the left border of the hover area.")
+            mouseMove(thumb, outsideRightBorder[0], outsideRightBorder[1])
+            compare(Qt.colorEqual(thumb.color, thumbNormalColor), true,
+                    "Thumb does not show as NOT-hovered after mouse moved outside the right border of the hover area.")
+
+            //BUG #1616926
+            //check pressind on the THUMB and releasing mouse outside the TROUGH resets it to normal state
+            //press thumb, move mouse outside the trough and check that the thumb is not showing as hovered
+            //The broken logic was just checking if mouse was inside the thumb
+            //on the same axis as the scrolling one (so y for vertical scrollbar, x for horizontal) so we move
+            //mouse in the opposite axis (i.e. along x if vertical scrollbar) to check that the bug is fixed
+            mousePress(thumb, thumb.width/2, thumb.height/2)
+            if (style.isVertical) {
+                mouseMove(thumb, outsideLeftBorder[0], outsideLeftBorder[1])
+                compare(Qt.colorEqual(thumb.color, thumbPressedColor), true, "Wrong THUMB color in pressed state.")
+                mouseRelease(thumb, outsideLeftBorder[0], outsideLeftBorder[1])
+                compare(Qt.colorEqual(thumb.color, thumbNormalColor), true, "Wrong THUMB color after releasing mouse with x outside TROUGH.")
+            } else {
+                mouseMove(thumb, outsideTopBorder[0], outsideTopBorder[1])
+                compare(Qt.colorEqual(thumb.color, thumbPressedColor), true, "Wrong THUMB color in pressed state.")
+                mouseRelease(thumb, outsideTopBorder[0], outsideTopBorder[1])
+                compare(Qt.colorEqual(thumb.color, thumbNormalColor), true, "Wrong THUMB color after releasing mouse with y outside TROUGH.")
+            }
+        }
+
+        //test dragging the thumb and relative visual changes due to hover/pressed states
+        function test_dragThumbAndCheckStyling(data) {
+            var freshTestItem = getFreshFlickable(data.alignment)
+            var flickable = freshTestItem.flickable
+            var scrollbar = freshTestItem.scrollbar
+            var thumb = getThumb(scrollbar)
+            var thumbArea = getThumbArea(scrollbar)
+            var trough = getTrough(scrollbar)
+            var style = freshTestItem.scrollbar.__styleInstance
+            var scrollbarUtils = getScrollbarUtils(scrollbar)
+            var secondStepper = getSecondStepper(scrollbar)
+            var thumbNormalColor = Qt.rgba(style.sliderColor.r, style.sliderColor.g, style.sliderColor.b,
+                                           style.sliderColor.a * 0.4)
+            var thumbHoveredColor = Qt.rgba(style.sliderColor.r, style.sliderColor.g, style.sliderColor.b,
+                                           style.sliderColor.a * 0.7)
+            var thumbPressedColor = Qt.rgba(style.sliderColor.r, style.sliderColor.g, style.sliderColor.b,
+                                           style.sliderColor.a * 1.0)
+
+            addContentMargins(flickable)
+
+            setContentPositionToTopLeft(flickable)
+
+            triggerSteppersMode(scrollbar)
+
             if (style.isVertical) {
                 mouseDrag(thumb, thumb.width/2, thumb.height/2, 0, trough.height)
                 compare(flickable[scrollbarUtils.propContent],
@@ -1072,6 +1168,22 @@
 
         }
 
+        //check that the mouse filters handling the interactions with the thumb and steppers
+        //ignore the synthesized events. This is required to have the correct hover handling,
+        //because it's the way we make sure that the hover logic is only called for real mouse
+        //events, and not touch-to-mouse synthesized events
+        function test_ignoreSynthesizedEventsInMouseFilters() {
+            var scrollbar = defaultValuesScrollbar
+            var style = scrollbar.__styleInstance
+            var thumbArea = getThumbArea(scrollbar)
+            var steppersMouseArea = getSteppersMouseArea(scrollbar)
+
+            compare(thumbArea.Mouse.ignoreSynthesizedEvents, true,
+                    "The mouse filter in the thumb MouseArea does not ignore synthesized events. Hover state logic may be affected.")
+            compare(steppersMouseArea.Mouse.ignoreSynthesizedEvents, true,
+                    "The mouse filter in the steppers MouseArea does not ignore synthesized events. Hover state logic may be affected.")
+        }
+
         function test_defaultStylingValues() {
             var scrollbar = defaultValuesScrollbar
             var style = scrollbar.__styleInstance