Clean up visuals of elements test

Elements were not being displayed correctly on small screens,
i.e. devices. Should anchor these to the bottom, rather than center.
Also fix layout element child positions, as opacity is not used to
determine placement - use visible property instead.

Change-Id: I9fff7e64f3f03f1a4d60a242fb8f95629da6f7c9
Reviewed-by: Michael Brasser <michael.brasser@nokia.com>

24 files changed, 118 insertions, 62 deletions

diff --git a/tests/testapplications/elements/content/AnimatedImageElement.qml b/tests/testapplications/elements/content/AnimatedImageElement.qml
index 073a002b25..6af67764fc 100644
--- a/tests/testapplications/elements/content/AnimatedImageElement.qml
+++ b/tests/testapplications/elements/content/AnimatedImageElement.qml
@@ -49,7 +49,9 @@ Item {
     Item {
         id: animatedimageelementcontainer
         height: 100; width: 100
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         AnimatedImage { id: animatedimageelement; anchors.fill: parent; source: "pics/cat.gif" }
         Behavior on height { NumberAnimation { duration: 1000 } }
         Behavior on width { NumberAnimation { duration: 1000 } }
diff --git a/tests/testapplications/elements/content/BorderImageElement.qml b/tests/testapplications/elements/content/BorderImageElement.qml
index 67d54ede45..427f14023a 100644
--- a/tests/testapplications/elements/content/BorderImageElement.qml
+++ b/tests/testapplications/elements/content/BorderImageElement.qml
@@ -49,7 +49,9 @@ Item {
 
     BorderImage {
         id: borderimageelement
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         width: 100; height: 100
         source: "pics/qml-borderimage.png"
         border { left: bordervalue; top: bordervalue; right: bordervalue; bottom: bordervalue }
diff --git a/tests/testapplications/elements/content/ColumnElement.qml b/tests/testapplications/elements/content/ColumnElement.qml
index 1b48db130e..bd0ed39afd 100644
--- a/tests/testapplications/elements/content/ColumnElement.qml
+++ b/tests/testapplications/elements/content/ColumnElement.qml
@@ -48,8 +48,11 @@ Item {
 
     Column {
         id: columnelement
-        height: 250; width: 200; spacing: 5
-        anchors.centerIn: parent
+        width: 200
+        spacing: 5
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Rectangle { id: gr; color: "green"; height: 50; width: parent.width; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle { id: re; color: "red"; height: 50; width: parent.width; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle {
diff --git a/tests/testapplications/elements/content/DoubleValidatorElement.qml b/tests/testapplications/elements/content/DoubleValidatorElement.qml
index aaf50aa32d..c186ff5a80 100644
--- a/tests/testapplications/elements/content/DoubleValidatorElement.qml
+++ b/tests/testapplications/elements/content/DoubleValidatorElement.qml
@@ -56,7 +56,9 @@ Item {
         id: doublevalidatorelementbackground
         color: doublevalidatorelementinput.acceptableInput ? "green" : "red"; height: 50; width: parent.width *.8
         border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         TextInput {
             id: doublevalidatorelementinput
diff --git a/tests/testapplications/elements/content/FlickableElement.qml b/tests/testapplications/elements/content/FlickableElement.qml
index ffb481f245..b7797f46f1 100644
--- a/tests/testapplications/elements/content/FlickableElement.qml
+++ b/tests/testapplications/elements/content/FlickableElement.qml
@@ -51,7 +51,9 @@ Item {
         id: flickableelementbox
         color: "lightgray"; border.color: "gray"; radius: 5; clip: true; opacity: .1
         height: 250; width: parent.width *.8
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         Flickable {
             id: flickableelement
diff --git a/tests/testapplications/elements/content/FlipableElement.qml b/tests/testapplications/elements/content/FlipableElement.qml
index cb2b11c532..77187bd3a2 100644
--- a/tests/testapplications/elements/content/FlipableElement.qml
+++ b/tests/testapplications/elements/content/FlipableElement.qml
@@ -49,7 +49,9 @@ Item {
     Flipable {
         id: flipableelement
         height: 250; width: 250
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         front: Rectangle { color: "green"; anchors.fill: parent; border.color: "gray"; border.width: 3; opacity: .9; radius: 20; clip: true }
         back: Rectangle { color: "red"; anchors.fill: parent; border.color: "gray"; border.width: 3; opacity: .9; radius: 20; clip: true }
         transform: Rotation {
diff --git a/tests/testapplications/elements/content/FlowElement.qml b/tests/testapplications/elements/content/FlowElement.qml
index 88a86bb498..67528434ec 100644
--- a/tests/testapplications/elements/content/FlowElement.qml
+++ b/tests/testapplications/elements/content/FlowElement.qml
@@ -50,15 +50,18 @@ Item {
 
     Flow {
         id: flowelement
-        height: 150; width: 150; spacing: 5; flow: Flow.LeftToRight
-        anchors.centerIn: parent
+        height: 110; width: 110
+        spacing: 5; flow: Flow.LeftToRight
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Rectangle { id: gr; color: "green"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { anchors.centerIn: parent; text: "1" }
         }
         Rectangle { id: re; color: "red"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { anchors.centerIn: parent; text: "2" }
         }
-        Rectangle { id: bl; color: "blue"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: 0; radius: 5; clip: true
+        Rectangle { id: bl; color: "blue"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true; visible: false
             Text { anchors.centerIn: parent; text: "3" }
         }
         Rectangle { id: bk; color: "black"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true
@@ -82,20 +85,20 @@ Item {
                 "Next, let's add a rectangle to the Flow - it should slide in from the left and the black rectangle should move to give it space" }
         },
         State { name: "added"; when: statenum == 2
-            PropertyChanges { target: bl; opacity: .9 }
+            PropertyChanges { target: bl; visible: true }
             PropertyChanges { target: flowelementtest
                 testtext: "Flow should now be showing four rectangles - green, red, blue and black.\n"+
                 "Next let's change the direction of the flow to vertical." }
         },
         State { name: "vertical"; when: statenum == 3
-            PropertyChanges { target: bl; opacity: .9 }
+            PropertyChanges { target: bl; visible: true }
             PropertyChanges { target: flowelement; flow: Flow.TopToBottom }
             PropertyChanges { target: flowelementtest
                 testtext: "Flow should now be showing four rectangles - green, blue, red and black.\n"+
                 "Next, let's flip the layout direction to RightToLeft." }
         },
         State { name: "rtlvertical"; when: statenum == 4
-            PropertyChanges { target: bl; opacity: .9 }
+            PropertyChanges { target: bl; visible: true }
             PropertyChanges { target: flowelement; flow: Flow.TopToBottom; layoutDirection: Qt.RightToLeft }
             PropertyChanges { target: flowelementtest
                 testtext: "Flow should now be showing the four rectangles aligned to the right and in a column order flowing to the left"+
diff --git a/tests/testapplications/elements/content/FontLoaderElement.qml b/tests/testapplications/elements/content/FontLoaderElement.qml
index 0dd9cf03bf..3aab22d1b0 100644
--- a/tests/testapplications/elements/content/FontLoaderElement.qml
+++ b/tests/testapplications/elements/content/FontLoaderElement.qml
@@ -55,7 +55,9 @@ Item {
 
     Text {
         id: textitem
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         height: 100; width: 250; text: fontloaderelement.name; font: fontloaderelement.name
         horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter
     }
diff --git a/tests/testapplications/elements/content/GridElement.qml b/tests/testapplications/elements/content/GridElement.qml
index da27b4793e..0a92e10c92 100644
--- a/tests/testapplications/elements/content/GridElement.qml
+++ b/tests/testapplications/elements/content/GridElement.qml
@@ -48,8 +48,10 @@ Item {
 
     Grid {
         id: gridelement
-        height: 250; width: 120; spacing: 5; columns: 2
-        anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom; anchors.bottomMargin: 100
+        height: 120; width: 120; spacing: 5; columns: 2
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         Rectangle { id: gr; color: "green"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle { id: re; color: "red"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
diff --git a/tests/testapplications/elements/content/ImageElement.qml b/tests/testapplications/elements/content/ImageElement.qml
index b56d6e9bec..65000eee08 100644
--- a/tests/testapplications/elements/content/ImageElement.qml
+++ b/tests/testapplications/elements/content/ImageElement.qml
@@ -49,7 +49,9 @@ Item {
     Item {
         id: imageelementcontainer
         height: 100; width: 100; clip: true
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Behavior on height { NumberAnimation { duration: 1000 } }
         Behavior on width { NumberAnimation { duration: 1000 } }
         Image {
diff --git a/tests/testapplications/elements/content/IntValidatorElement.qml b/tests/testapplications/elements/content/IntValidatorElement.qml
index 12df298c81..f96e2e2db0 100644
--- a/tests/testapplications/elements/content/IntValidatorElement.qml
+++ b/tests/testapplications/elements/content/IntValidatorElement.qml
@@ -54,7 +54,9 @@ Item {
         id: intvalidatorelementbackground
         color: intvalidatorelementinput.acceptableInput ? "green" : "red"
         height: 50; width: parent.width *.8; border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         TextInput {
             id: intvalidatorelementinput
diff --git a/tests/testapplications/elements/content/ListViewElement.qml b/tests/testapplications/elements/content/ListViewElement.qml
index d021f8e555..54b878451f 100644
--- a/tests/testapplications/elements/content/ListViewElement.qml
+++ b/tests/testapplications/elements/content/ListViewElement.qml
@@ -57,7 +57,9 @@ Item {
     ListView {
         id: listviewelement
         height: 250; width: parent.width *.8; clip: true
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         model: devices
         highlightFollowsCurrentItem: true
         highlight: highlightrect
diff --git a/tests/testapplications/elements/content/MouseAreaElement.qml b/tests/testapplications/elements/content/MouseAreaElement.qml
index a5ee79888f..f4143e295d 100644
--- a/tests/testapplications/elements/content/MouseAreaElement.qml
+++ b/tests/testapplications/elements/content/MouseAreaElement.qml
@@ -45,13 +45,14 @@ Item {
     id: mouseareaelementtest
     anchors.fill: parent
     property string testtext: ""
-    property int sidelength: 1500
-
     focus: true
+
     Rectangle {
         id: mouseareaelementbox
-        color: "lightgray"; border.color: "gray"; radius: 5; clip: true; opacity: .7; height: 300; width: 300
-        anchors.centerIn: parent
+        color: "lightgray"; border.color: "gray"; radius: 5; clip: true; opacity: .7; height: 200; width: 200
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         MouseArea {
             id: mouseareaelement
             hoverEnabled: true
diff --git a/tests/testapplications/elements/content/ParallelAnimationElement.qml b/tests/testapplications/elements/content/ParallelAnimationElement.qml
index ae0ed972c6..1eb4e1faf3 100644
--- a/tests/testapplications/elements/content/ParallelAnimationElement.qml
+++ b/tests/testapplications/elements/content/ParallelAnimationElement.qml
@@ -47,16 +47,23 @@ Item {
     property string testtext: ""
     property int firstduration: 1000
     property int secondduration: 3000
+    property int firstY
+    firstY: parent.height * .6
+    property int secondY
+    secondY: parent.height * .8
+
+    Timer { id: startanimationtimer; interval: 1000; onTriggered: parallelanimationelement.start() }
+
     ParallelAnimation {
         id: parallelanimationelement
         running: false
-        NumberAnimation { id: movement; target: animatedrect; properties: "y"; to: 500; duration: firstduration }
+        NumberAnimation { id: movement; target: animatedrect; properties: "y"; to: secondY; duration: firstduration }
         ColorAnimation { id: recolor; target: animatedrect; properties: "color"; to: "green"; duration: secondduration }
     }
 
     Rectangle {
         id: animatedrect
-        width: 50; height: 50; color: "blue"; y: 300
+        width: 50; height: 50; color: "blue"; y: firstY
         anchors.horizontalCenter: parent.horizontalCenter
     }
 
@@ -67,26 +74,25 @@ Item {
 
     states: [
         State { name: "start"; when: statenum == 1
-            PropertyChanges { target: animatedrect; color: "blue"; y: 300 }
+            PropertyChanges { target: animatedrect; color: "blue"; y: firstY }
             PropertyChanges { target: parallelanimationelementtest
                 testtext: "This square will have two properties animated simultaneously.\n"+
                 "The next step will see it move quickly down the display, and slowly change its color to green, at the same time";
             }
         },
         State { name: "firstchange"; when: statenum == 2
-            PropertyChanges { target: parallelanimationelement; running: true }
+            StateChangeScript { script: { firstduration = 1000; secondduration = 3000; startanimationtimer.start() } }
             PropertyChanges { target: parallelanimationelementtest
                 testtext: "The square should have moved quickly, and recolored slowly\n"+
                 "Next, it will recolor quickly and move slowly back to it's original position"
             }
         },
         State { name: "secondchange"; when: statenum == 3
-            StateChangeScript { script: { firstduration = 3000; secondduration = 1000 } }
-            PropertyChanges { target: movement; to: 300 }
+            StateChangeScript { script: { firstduration = 3000; secondduration = 1000; startanimationtimer.start() } }
+            PropertyChanges { target: movement; to: firstY }
             PropertyChanges { target: recolor; to: "blue" }
-            PropertyChanges { target: parallelanimationelement; running: true }
             PropertyChanges { target: parallelanimationelementtest
-                testtext: "The square should have moved slowly, then recolored quickly, simultaneously\n"+
+                testtext: "The square should have simultaneously moved slowly and recolored quickly.\n"+
                 "Advance to restart the test"
             }
         }
diff --git a/tests/testapplications/elements/content/RectangleElement.qml b/tests/testapplications/elements/content/RectangleElement.qml
index 327aa49c5e..350bf75d8f 100644
--- a/tests/testapplications/elements/content/RectangleElement.qml
+++ b/tests/testapplications/elements/content/RectangleElement.qml
@@ -47,8 +47,10 @@ Item { id: rectangleelementtest
 
     Rectangle {
         id: rectangleelement
-        height: 100; width: 100; color: "blue"; border.width: 2; border.color: "red"; border.aligned: false; smooth: true
-        anchors.centerIn: parent
+        height: 100; width: 100; color: "blue"; border.width: 2; border.color: "red"; smooth: true
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Behavior on height { NumberAnimation { duration: 1000 } }
         Behavior on width { NumberAnimation { duration: 1000 } }
         Behavior on radius { NumberAnimation { duration: 1000 } }
diff --git a/tests/testapplications/elements/content/RegExpValidatorElement.qml b/tests/testapplications/elements/content/RegExpValidatorElement.qml
index 466619b7eb..6908c144d8 100644
--- a/tests/testapplications/elements/content/RegExpValidatorElement.qml
+++ b/tests/testapplications/elements/content/RegExpValidatorElement.qml
@@ -53,7 +53,9 @@ Item {
         id: regexpvalidatorelementbackground
         color: regexpvalidatorelementinput.acceptableInput ? "green" : "red"; height: 50; width: parent.width *.8
         border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         TextInput {
             id: regexpvalidatorelementinput
diff --git a/tests/testapplications/elements/content/RepeaterElement.qml b/tests/testapplications/elements/content/RepeaterElement.qml
index ed9a74e6fa..6134dcaeb1 100644
--- a/tests/testapplications/elements/content/RepeaterElement.qml
+++ b/tests/testapplications/elements/content/RepeaterElement.qml
@@ -49,8 +49,11 @@ Item {
 
     Column {
         id: container
-        height: 50; width: 250; spacing: 5
-        anchors.centerIn: parent
+        height: 200; width: 250
+        spacing: 5
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Repeater { id: repeaterelement; model: repeatermodel }
         Rectangle { height: 50; width: 150; color: "green" }
         move: Transition { NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce } }
@@ -60,16 +63,16 @@ Item {
 
     VisualItemModel {
         id: repeatermodel
-        Rectangle { color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+        Rectangle { color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 1"; anchors.centerIn: parent } }
-        Rectangle { color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+        Rectangle { color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 2"; anchors.centerIn: parent } }
         Rectangle { visible: repeaterelementtest.showme;
-            color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+            color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 3"; anchors.centerIn: parent } }
-        Rectangle { color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+        Rectangle { color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 4"; anchors.centerIn: parent } }
-        Rectangle { color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+        Rectangle { color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 5"; anchors.centerIn: parent } }
     }
 
diff --git a/tests/testapplications/elements/content/RowElement.qml b/tests/testapplications/elements/content/RowElement.qml
index 5e4805fb51..59876bfde8 100644
--- a/tests/testapplications/elements/content/RowElement.qml
+++ b/tests/testapplications/elements/content/RowElement.qml
@@ -49,7 +49,9 @@ Item {
     Row {
         id: rowelement
         height: 50; width: 250; spacing: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Rectangle { id: gr; color: "green"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle { id: re; color: "red"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle {
diff --git a/tests/testapplications/elements/content/ScaleElement.qml b/tests/testapplications/elements/content/ScaleElement.qml
index 0725898aed..7d23440ed6 100644
--- a/tests/testapplications/elements/content/ScaleElement.qml
+++ b/tests/testapplications/elements/content/ScaleElement.qml
@@ -49,7 +49,9 @@ Item {
     Rectangle {
         id: scaletarget
         color: "green"; height: 100; width: 100; border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         transform: Scale {
             id: scaleelement
             property alias originx: scaleelement.origin.x
diff --git a/tests/testapplications/elements/content/SequentialAnimationElement.qml b/tests/testapplications/elements/content/SequentialAnimationElement.qml
index e8de7fe85d..52fb472aeb 100644
--- a/tests/testapplications/elements/content/SequentialAnimationElement.qml
+++ b/tests/testapplications/elements/content/SequentialAnimationElement.qml
@@ -47,16 +47,23 @@ Item {
     property string testtext: ""
     property int firstduration: 1000
     property int secondduration: 3000
+    property int firstY
+    firstY: parent.height * .6
+    property int secondY
+    secondY: parent.height * .8
+
+    Timer { id: startanimationtimer; interval: 1000; onTriggered: sequentialanimationelement.start() }
+
     SequentialAnimation {
         id: sequentialanimationelement
         running: false
-        NumberAnimation { id: movement; target: animatedrect; properties: "y"; to: 500; duration: firstduration }
+        NumberAnimation { id: movement; target: animatedrect; properties: "y"; to: secondY; duration: firstduration }
         ColorAnimation { id: recolor; target: animatedrect; properties: "color"; to: "green"; duration: secondduration }
     }
 
     Rectangle {
         id: animatedrect
-        width: 50; height: 50; color: "blue"; y: 300
+        width: 50; height: 50; color: "blue"; y: firstY
         anchors.horizontalCenter: parent.horizontalCenter
     }
 
@@ -67,26 +74,25 @@ Item {
 
     states: [
         State { name: "start"; when: statenum == 1
-            PropertyChanges { target: animatedrect; color: "blue"; y: 300 }
+            PropertyChanges { target: animatedrect; color: "blue"; y: firstY }
             PropertyChanges { target: sequentialanimationelementtest
                 testtext: "This square will be animated in a sequence.\n"+
                 "The next step will see it move quickly down the display, then slowly change its color to green";
             }
         },
         State { name: "firstchange"; when: statenum == 2
-            PropertyChanges { target: sequentialanimationelement; running: true }
+            StateChangeScript { script: { firstduration = 1000; secondduration = 3000; startanimationtimer.start() } }
             PropertyChanges { target: sequentialanimationelementtest
-                testtext: "The square should have moved quickly and also recolored slowly\n"+
-                "Next, it will recolor quickly and move slowly back to it's original position at the same time"
+                testtext: "The square should have moved quickly and then recolored slowly\n"+
+                "Next, it will move slowly and recolor to blue, in sequence."
             }
         },
         State { name: "secondchange"; when: statenum == 3
-            StateChangeScript { script: { firstduration = 3000; secondduration = 1000 } }
-            PropertyChanges { target: movement; to: 300 }
+            StateChangeScript { script: { firstduration = 3000; secondduration = 1000; startanimationtimer.start() } }
+            PropertyChanges { target: movement; to: firstY }
             PropertyChanges { target: recolor; to: "blue" }
-            PropertyChanges { target: sequentialanimationelement; running: true }
             PropertyChanges { target: sequentialanimationelementtest
-                testtext: "The square should have moved slowly and also recolored quickly\n"+
+                testtext: "The square should have moved slowly and then recolored quickly\n"+
                 "Advance to restart the test"
             }
         }
diff --git a/tests/testapplications/elements/content/SystemPaletteElement.qml b/tests/testapplications/elements/content/SystemPaletteElement.qml
index ea03a4882c..43aea9214d 100644
--- a/tests/testapplications/elements/content/SystemPaletteElement.qml
+++ b/tests/testapplications/elements/content/SystemPaletteElement.qml
@@ -63,7 +63,7 @@ Item {
             }
             Rectangle {
                 id: button
-                width: 100; height: 30; radius: 5; border.color: "black"; color: clicky.pressed ? syspal.highlight : syspal.button
+                width: 150; height: 50; radius: 5; border.color: "black"; color: clicky.pressed ? syspal.highlight : syspal.button
                 Behavior on color { ColorAnimation { duration: 500 } }
                 anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 30 }
                 Text { anchors.centerIn: parent; text: "Button"; color: syspal.buttonText }
@@ -76,7 +76,7 @@ Item {
     }
 
     SystemTestHelp { id: helpbubble; visible: statenum != 0
-        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 100 }
+        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 50 }
     }
     BugPanel { id: bugpanel }
 
@@ -85,7 +85,7 @@ Item {
             PropertyChanges { target: systempaletteelementtest
                 testtext: "This is an mock application shaded with the help of the SystemPalette element.\n"+
                 "The colors of the menu bar, menu text and button should mimic that of the OS it is running on.\n"+
-                "Pressing the lablelled button should shade it to the system highlight color." }
+                "Pressing the labelled button should shade it to the system highlight color." }
         }
     ]
 
diff --git a/tests/testapplications/elements/content/TextEditElement.qml b/tests/testapplications/elements/content/TextEditElement.qml
index 3b34043f0b..c25d8dcb8c 100644
--- a/tests/testapplications/elements/content/TextEditElement.qml
+++ b/tests/testapplications/elements/content/TextEditElement.qml
@@ -50,7 +50,9 @@ Item {
     Rectangle {
         id: texteditelementbackground
         color: "green"; height: 150; width: parent.width *.8; border.color: "gray"; opacity: 0.7; radius: 5; clip: true
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: secondarybackground.top
+        anchors.bottomMargin: 10
 
         TextEdit {
             id: texteditelement
@@ -63,8 +65,8 @@ Item {
 
     Rectangle {
         id: secondarybackground
-        color: "lightgray"; border.color: "gray"; opacity: 0.7; radius: 5; height: 150; width: parent.width *.8
-        anchors { top: texteditelementbackground.bottom; topMargin: 50; horizontalCenter: parent.horizontalCenter }
+        color: "lightgray"; border.color: "gray"; opacity: 0.7; radius: 5; height: 50; width: parent.width *.8
+        anchors { bottom: parent.bottom; bottomMargin: 15; horizontalCenter: parent.horizontalCenter }
 
         TextEdit {
             id: secondary
diff --git a/tests/testapplications/elements/content/TextElement.qml b/tests/testapplications/elements/content/TextElement.qml
index 35980cec29..bfdcc2e886 100644
--- a/tests/testapplications/elements/content/TextElement.qml
+++ b/tests/testapplications/elements/content/TextElement.qml
@@ -49,7 +49,9 @@ Item {
     Text {
         id: textelement
         property int pseudopointsize: 12
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         height: 200; width: parent.width *.8; wrapMode: Text.WordWrap; font.pointSize: 12
         text: "Hello, my name is Text"; horizontalAlignment: Text.AlignHCenter; textFormat: Text.PlainText
         Behavior on font.pointSize { NumberAnimation { duration: 1000 } }
diff --git a/tests/testapplications/elements/content/TextInputElement.qml b/tests/testapplications/elements/content/TextInputElement.qml
index 3b79657f08..30da07109a 100644
--- a/tests/testapplications/elements/content/TextInputElement.qml
+++ b/tests/testapplications/elements/content/TextInputElement.qml
@@ -49,7 +49,9 @@ Item {
     Rectangle {
         id: textinputelementbackground
         color: "green"; height: 50; width: parent.width *.8; border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: secondarybackground.top
+        anchors.bottomMargin: 10
         TextInput {
             id: textinputelement
             font.pointSize: 12; width: parent.width; text: ""; horizontalAlignment: Text.AlignHCenter
@@ -62,7 +64,7 @@ Item {
     Rectangle {
         id: secondarybackground
         color: "lightgray"; border.color: "gray"; opacity: 0.7; radius: 5; height: 50; width: parent.width *.8
-        anchors { top: textinputelementbackground.bottom; topMargin: 100; horizontalCenter: parent.horizontalCenter }
+        anchors { bottom: parent.bottom; bottomMargin: 15; horizontalCenter: parent.horizontalCenter }
 
         TextInput {
             id: secondary