Text baseline does not follow selected vertical alignment although text is rendered correctly according to selected vertical alignment

import QtQuick 2.2
import QtQuick.Window 2.1

Window {
    visible: true
    width:   220
    height:  220

    Item {
        id: theText
        anchors.fill:    parent
        anchors.margins: 10

        property int horizontalAlignment: Text.AlignLeft
        
        // result is ok for Top, but fails for VCenter and Bottom !?
        property int verticalAlignment:   Text.AlignVCenter

        Text {
            id: major
            text: "xx"
            font.pixelSize:      40
            height:              parent.height
            horizontalAlignment: theText.horizontalAlignment
            verticalAlignment:   theText.verticalAlignment
            x: getX(theText.horizontalAlignment,theText.width,major.width,minor.width)

            function getX() {
                if( theText.horizontalAlignment == Text.AlignLeft )
                    return 0
                if( theText.horizontalAlignment === Text.AlignHCenter )
                    return (theText.width - major.width - minor.width) / 2
                if( theText.horizontalAlignment === Text.AlignRight )
                    return theText.width - major.width - minor.width
            }
        }
        Text {
            id: minor
            text: ".yy"
            anchors.left:     major.right
            anchors.baseline: major.baseline
            font.pixelSize:   20
        }
        Binding {
            target:   major
            property: "width"
            value:    theText.width - minor.width
            when:     theText.horizontalAlignment == Text.AlignRight
        }
        Binding {
            target:   minor
            property: "width"
            value:    theText.width - major.width
            when:     theText.horizontalAlignment == Text.AlignLeft
        }


        // Dummy border around texts to show the bounding boxes and baseline
        Rectangle {
            anchors.fill: theText
            color: Qt.rgba(0,0,0,0)
            border { width: 1; color: "magenta" }
        }
        Rectangle {
            anchors.fill: major
            color: Qt.rgba(0,0,0,0)
            border { width: 1; color: "blue" }
        }
        Rectangle {
            anchors.fill: minor
            color: Qt.rgba(0,0,0,0)
            border { width: 1; color: "orange" }
        }
        Rectangle {
            anchors.top:          major.baseline
            anchors.bottom:       major.baseline
            anchors.bottomMargin: -1
            anchors.left:         theText.left
            anchors.right:        theText.right
            color: Qt.rgba(0,0,0,0)
            border { width: 1; color: "pink" }
        }
        // end-of dummy borders
    }
}