When is TabViewStyle's styleData.availableWidth valid?

Rolias

I created a simple Tab View inside an ApplicationWindow with a style taken directly from the Qt Quick Controls gallery example. If I don't change the width of the TabView everything works like I would expect. If I use anchor.fill to change the width or even width: parent.width, the tabs do not appear. If I give ApplicationWindow and id of rootId and use width: rootId.width, the tabs show up again. Below is the full code from the qml file. The only thing I changed about the style from the example in gallery was the path to the images.

I haven't experimented much with custom styling. Is this a bug in the framework or am I doing something illegal? I would guess the problem has something to do with styleData.availableWidth but that's really just a guess.

Using the Qt 5.3.2 release.

@import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

ApplicationWindow {
id : rootId
visible: true
width: 640
height: 480
title: qsTr("TabView Style Test")

TabView{
    id : tabViewId
   // anchors.fill : parent
    width:rootId.width
    height: parent.height;

    style: sampleStyle

    Tab{
      id :tab1Id
      title: "The Martian"

    }
    Tab{
        id : tab2Id
        title:"Andy Weir"
    }
}

property Component sampleStyle: TabViewStyle {
    tabOverlap: 16
    frameOverlap: 4
    tabsMovable: true

    frame: Rectangle {
        gradient: Gradient{
            GradientStop { color: "#e5e5e5" ; position: 0 }
            GradientStop { color: "#e0e0e0" ; position: 1 }
        }
        border.color: "#898989"
        Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
    }
    tab: Item {
         property int totalOverlap: tabOverlap * (control.count - 1)
        implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, borderImageId.sourceSize.width)
        implicitHeight: borderImageId.sourceSize.height

        BorderImage {
            id: borderImageId
            anchors.fill: parent
            source: styleData.selected ? "tab_selected.png" : "tab.png"
            border.left: 30
            smooth: false
            border.right: 30
        }
        Text {
            text: styleData.title
            anchors.centerIn: parent
        }
    }
    leftCorner: Item { implicitWidth: 12 }
}

}

@