Make the manual test nicer and more useful

Change-Id: Iac5e8c32d8fa70664829ce5ded37fe3ff5ceb455
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>

2 files changed, 228 insertions, 236 deletions

diff --git a/tests/manual/baselines/content/RectangleText.qml b/tests/manual/baselines/content/RectangleText.qml
deleted file mode 100644
index d75e6bf5..00000000
--- a/tests/manual/baselines/content/RectangleText.qml
+++ /dev/null
@@ -1,49 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Quick Controls module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.1
-
-Text {
-    text: "Typography"
-    Rectangle {
-        anchors.fill: parent
-        color: "red"
-        opacity: 0.2
-    }
-}
diff --git a/tests/manual/baselines/main.qml b/tests/manual/baselines/main.qml
index 30cee944..7f9b5509 100644
--- a/tests/manual/baselines/main.qml
+++ b/tests/manual/baselines/main.qml
@@ -38,223 +38,264 @@
 **
 ****************************************************************************/
 
+
+
+
+
 import QtQuick 2.1
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 
-import "content"
-
-Item {
+ApplicationWindow {
     id: window
-    width: 1024
-    height: 400
-    Row {
-        id: row
-        Text {
-            text: "font size:"
+    property variant defaultAlignment: Qt.AlignBaseline
+    title: "Layouts with baselines"
+    property int margin: 11
+    width: mainLayout.implicitWidth + 2 * margin
+    height: mainLayout.implicitHeight + 2 * margin
+    minimumWidth: mainLayout.Layout.minimumWidth + 2 * margin
+    minimumHeight: mainLayout.Layout.minimumHeight + 2 * margin
+
+    Component {
+        id: visualBaselineComponent
+        Rectangle {
+            height: 1
+            width: 1
+            color: 'red'
         }
-        SpinBox {
-            value: 30
-            onValueChanged: {
-                if (textWithBaseLine) { // This might be emitted before the SpinBox is completed
-                    textWithBaseLine.font.pixelSize = value
-                    textWithBaseLineB.pixelSize = value
-                    label.font.pixelSize = value
+    }
+
+    Item {
+        id: visualBaselinesContainer
+        width: parent.width
+        z: 1
+        opacity: 0.5
+
+        function setBaselinesVisible(showBaselines) {
+            for (var i = 0; i < visualBaselinesContainer.children.length; ++i) {
+                visualBaselinesContainer.children[i].destroy();
+            }
+            if (showBaselines) {
+                // assumes mainLayout/GroupBox/Layout/<child_items> hierarchy
+                // Iterates over all <child_items> and gathers their baseline positions,
+                var map_baselines = {}
+                for (var i = 0; i < mainLayout.children.length; ++i) {
+                    var grp = mainLayout.children[i]
+                    var lay = grp.contentItem.children[0]
+                    var y = mainLayout.y + grp.y + grp.contentItem.y + lay.y
+                    var x = mainLayout.x + grp.x + grp.contentItem.x + lay.x
+                    var w = lay.width
+                    for (var j = 0; j < lay.children.length; ++j) {
+                        var child = lay.children[j];
+                        if (child.visible && child.baselineOffset > 0) {
+                            var baseline = y + child.y + child.baselineOffset
+                            map_baselines[baseline] = {x: x, width: w};
+                        }
+                    }
+                }
+
+                for (var key in map_baselines) {
+                    var o = map_baselines[key];
+                    var visualBaseline = visualBaselineComponent.createObject(visualBaselinesContainer, o);
+                    visualBaseline.y = key;
                 }
             }
         }
-        Text {
-            text: "element height:"
-        }
-        SpinBox {
-            value: 36
-            onValueChanged: {
-                if (textWithBaseLine) { // This might be emitted before the SpinBox is completed
-                    textWithBaseLine.height = value
-                    textWithBaseLineB.implicitHeight = value
-                }
+        Timer {
+            // This is a kludge to wait until the layout has been rearranged, since that won't
+            // happen until we get a polish event.
+            // This will wait minimum of one full vertical scan (17 milliseconds), which
+            // should usually be enough
+            id: refreshBaselinesTimer
+            running: false
+            interval: 17
+            onTriggered: {
+                visualBaselinesContainer.setBaselinesVisible(ckShowBaselines.checked);
             }
         }
     }
 
-    RectangleText {
-        id: textWithBaseLine
-        font.pixelSize: 30
-        verticalAlignment: Text.AlignVCenter
-        anchors.top: row.bottom
-    }
-
-    RectangleText {
-        id: textWithBaseLine2
-        font.pixelSize: 12
-        anchors.left: textWithBaseLine.right
-        anchors.baseline: textWithBaseLine.baseline
-    }
-
-    RectangleText {
-        verticalAlignment: Text.AlignVCenter
-        anchors.left: textWithBaseLine2.right
-        anchors.baseline: textWithBaseLine.baseline
-        height: 80
-        baselineOffset: 20
-    }
-
-
-    Rectangle {
-        x: 0
-        y: textWithBaseLine.baselineOffset + textWithBaseLine.y
-        height: 1
-        width: parent.width
-        opacity: 0.2
-        color: "red"
-    }
-
     ColumnLayout {
-        height: Math.ceil(implicitHeight)
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        Text {
-            text: "Qt Quick Controls"
+        id: mainLayout
+        anchors.fill: parent
+        anchors.margins: margin
+
+        GroupBox {
+            id: rowBoxTools
+            title: "Developer tools"
             Layout.fillWidth: true
-        }
-        RowLayout {
-            Rectangle {
-                color: "blue"
-                implicitWidth: 1
-                implicitHeight: 40
-                Layout.fillHeight: true
-                Rectangle {
-                    y: textWithBaseLineC.y + textWithBaseLineC.baselineOffset
-                    height: 1
-                    width: window.width
-                    opacity: 0.5
-                    color: "red"
+            RowLayout {
+                anchors.fill: parent
+                CheckBox {
+                    id: ckShowBaselines
+                    text: "Show baselines"
+                    checked: false
+                    onCheckedChanged: {
+                        visualBaselinesContainer.setBaselinesVisible(checked);
+                    }
+                }
+                Label {
+                    text: "Alignment:"
+                }
+                ComboBox {
+                    model: ListModel {
+                        id: cbItems
+                        ListElement { text: "Default"; value: 0 }
+                        ListElement { text: "Align Left"; value: Qt.AlignLeft }
+                        ListElement { text: "Align Right"; value: Qt.AlignRight }
+                        ListElement { text: "Align HCenter"; value: Qt.AlignHCenter }
+                        ListElement { text: "Align Baseline"; value: Qt.AlignBaseline }
+                        ListElement { text: "Align Top"; value: Qt.AlignTop }
+                        ListElement { text: "Align Bottom"; value: Qt.AlignBottom }
+                        ListElement { text: "Align VCenter"; value: Qt.AlignVCenter }
+                    }
+                    onCurrentIndexChanged: {
+                        // assumes mainLayout/GroupBox/Layout/<child_items> hierarchy
+                        // Iterates over all <child_items> and modifies their baseline alignment
+                        for (var i = 0; i < mainLayout.children.length; ++i) {
+                            var grp = mainLayout.children[i]
+                            var lay = grp.contentItem.children[0]
+                            for (var j = 0; j < lay.children.length; ++j) {
+                                var child = lay.children[j];
+                                child.Layout.alignment = cbItems.get(currentIndex).value
+                            }
+                        }
+                        refreshBaselinesTimer.start();
+                    }
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
                 }
-                z: 1
-            }
-            RectangleText {
-                id: textWithBaseLineC
-                font.pixelSize: 20
-                Layout.alignment: Qt.AlignBaseline
-            }
-            Label {
-                id: label
-                text: "Typography"
-                Layout.alignment: Qt.AlignBaseline
-            }
-            Button {
-                text: "Typography"
-                Layout.alignment: Qt.AlignBaseline
-            }
-            CheckBox {
-                text: "Typography"
-                Layout.alignment: Qt.AlignBaseline
-            }
-            ComboBox {
-                id: combo;
-                model: ["Typography"]
-                currentIndex: 0
-                Layout.alignment: Qt.AlignBaseline
-            }
-            RadioButton {
-                text: "Typography"
-                Layout.alignment: Qt.AlignBaseline
-            }
-            SpinBox {
-                value: 42
-                Layout.alignment: Qt.AlignBaseline
-            }
-            TextField {
-                text: "Typography"
-                Layout.alignment: Qt.AlignBaseline
             }
-            TextArea {
-                text: "The quick brown fox jumps over the lazy dog"
-                Layout.alignment: Qt.AlignBaseline
-                implicitWidth: 100
-                implicitHeight: 60
+        }
+        GroupBox {
+            id: rowBox
+            title: "Row layout"
+            Layout.fillWidth: true
+
+            RowLayout {
+                id: rowLayout
+                anchors.fill: parent
+                Repeater {
+                    model: 3
+                    Text {
+                        text: "Typography"
+                        font.pixelSize: 10 + 4*index
+                        Layout.alignment: defaultAlignment
+                        Layout.fillWidth: index == 2
+                    }
+                }
             }
         }
 
-        Text {
-            text: "Qml Elements"
+        GroupBox {
+            id: gridBox
+            title: "Grid layout"
             Layout.fillWidth: true
-        }
-        RowLayout {
-            id: rowlayout
-            Rectangle {
-                color: "blue"
-                implicitWidth: 1
-                Layout.fillHeight: true
-                Rectangle {
-                    y: textWithBaseLineB.baselineOffset + textWithBaseLineB.y
-                    height: 1
-                    width: window.width
-                    opacity: 0.2
-                    color: "red"
+
+            GridLayout {
+                id: gridLayout
+                anchors.fill: parent
+                rows: 2
+                flow: GridLayout.TopToBottom
+                Repeater {
+                    model: 6
+                    Text {
+                        text: "Typography"
+                        font.pixelSize: 8 + 4*index
+                        Layout.alignment: defaultAlignment
+                    }
                 }
             }
-            Item {
-                id: textWithBaseLineB
-                property alias pixelSize: txt2.font.pixelSize
+        }
 
-                implicitWidth: txt2.implicitWidth
-                implicitHeight: txt2.implicitHeight + 40
-                // Note that we use 20 instead of txt2.y on the below line
-                // This is because we cannot depend on a geometry (that the layout controls)
-                // when we return size hints. size hints should never rely on the current arrangement
-                baselineOffset: 20 + txt2.baselineOffset
-                Rectangle {
-                    anchors.fill: parent
-                    color: "red"
-                    opacity: 0.2
+
+        GroupBox {
+            id: rowBoxWithControls
+            title: "Row layout with Controls"
+            Layout.fillWidth: true
+
+            RowLayout {
+                id: rowLayoutWithControls
+                anchors.fill: parent
+                Label {
+                    id: rowlabel
+                    text: "Typo"
+                    Layout.alignment: defaultAlignment
                 }
-                Text {
-                    id: txt2
-                    font.pixelSize: 30
-                    opacity: 1.0
-                    anchors.centerIn: parent
-                    text: "Typography"
+                Button {
+                    text: "Typo"
+                    Layout.alignment: defaultAlignment
+                }
+                CheckBox {
+                    text: "Typo"
+                    Layout.alignment: defaultAlignment
+                }
+                ComboBox {
+                    model: ["Typo"]
+                    currentIndex: 0
+                    Layout.alignment: defaultAlignment
+                }
+                RadioButton {
+                    text: "Typo"
+                    Layout.alignment: defaultAlignment
+                }
+                SpinBox {
+                    value: 42
+                    Layout.alignment: defaultAlignment
+                }
+                TextField {
+                    text: "Typo"
+                    Layout.alignment: defaultAlignment
+                    Layout.maximumWidth: 40
                 }
-                Layout.alignment: Qt.AlignBaseline
-                Layout.fillWidth: true
             }
 
-            RectangleText {
-                font.pixelSize: 12
-                Layout.alignment: Qt.AlignBaseline
-                Layout.fillWidth: true
-            }
+        }
 
-            Item {
-                implicitWidth: txt.implicitWidth
-                implicitHeight: txt.implicitHeight + 40
-                baselineOffset: txt.y + txt.baselineOffset
-                Rectangle {
-                    anchors.fill: parent
-                    color: "red"
-                    opacity: 0.2
+        GroupBox {
+            id: gridBoxWithControls
+            title: "Grid layout with Controls"
+            Layout.fillWidth: true
+
+            GridLayout {
+                id: gridLayoutWithControls
+                columns: 3
+                flow: GridLayout.LeftToRight
+                anchors.fill: parent
+                Label {
+                    text: "Typography"
+                    Layout.alignment: defaultAlignment
                 }
-                Text {
-                    id: txt
-                    opacity: 1.0
-                    anchors.centerIn: parent
-                    text:"Typography"
+                Button {
+                    text: "Typography"
+                    Layout.alignment: defaultAlignment
+                }
+                CheckBox {
+                    text: "Typography"
+                    Layout.alignment: defaultAlignment
+                }
+                ComboBox {
+                    model: ["Typography"]
+                    currentIndex: 0
+                    Layout.alignment: defaultAlignment
+                }
+                RadioButton {
+                    text: "Typography"
+                    Layout.alignment: defaultAlignment
+                }
+                SpinBox {
+                    value: 42
+                    Layout.alignment: defaultAlignment
+                }
+                TextField {
+                    id: gridTextField
+                    text: "Typography"
+                    Layout.alignment: defaultAlignment
                 }
-                Layout.alignment: Qt.AlignBaseline
-                Layout.fillWidth: true
-            }
-
-            RectangleText {
-                verticalAlignment: Text.AlignVCenter
-                Layout.alignment: Qt.AlignBaseline
-                baselineOffset: 60
-                height: 80  // Needed for baselineOffset to be interpreted correctly
-                Layout.preferredHeight: 80
-                Layout.minimumHeight: Layout.preferredHeight
-                Layout.fillWidth: true
             }
-        }   // RowLayout
-    }   // ColumnLayout
+        }
+    }
 }