<Page id="test-element" xmlns="http://schemas.nativescript.org/tns.xsd">

	<Page.actionBar>
		<ActionBar title="Sample title" />
	</Page.actionBar>

    <StackLayout padding="10">
        <Label text="IOS and Android" fontSize="14"/>
        <WrapLayout>
            <!-- status-bar-style -->  
            <Button text="11" tap="applyTap" tag="status-bar-style: light;" style.fontSize="8" width="40" height="40" automationText="light;" />
            <Button text="12" tap="applyTap" tag="status-bar-style: dark;" style.fontSize="8" width="40" height="40" automationText="dark;" />

            <!-- status-bar-style - action-bar - background -->
            <Button text="21" tap="applyTapOnStyledActionBar" tag="status-bar-style: light;" style.fontSize="8" width="40" height="40" automationText="light-abb-ruby" />
            <Button text="22" tap="applyTapOnStyledActionBar" tag="status-bar-style: dark;" style.fontSize="8" width="40" height="40"  automationText="dark-abb-ruby" />

            <!-- status-bar-style - page - background -->
            <Button text="51" tap="applyTap" tag="status-bar-style: light; background-color: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="light-bckg-ruby" />
            <Button text="52" tap="applyTap" tag="status-bar-style: dark; background-color: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="dark-bckg-ruby" />

            <!-- status-bar-style - page - and - action-bar - background -->
            <Button text="61" tap="applyTapOnStyledActionBar" tag="status-bar-style: light;background-color: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="light-bckg-yellow-abbckg-ruby" />
            <Button text="62" tap="applyTapOnStyledActionBar" tag="status-bar-style: dark;background-color: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="dark-bckg-yellow-abbckg-ruby" />

            <!-- status-bar-style - action-bar - hidden - and - backgroundSpanUnderStatusBar -->
            <Button text="71" tap="applyTapWithSpan" tag="status-bar-style: light;background-color: yellow" style.fontSize="8" width="40" height="40"  automationText="dark-bckg-yellow-bckgsusb-true" />
            <Button text="72" tap="applyTapOnStyledActionBarAndSpan" tag="status-bar-style: light; background-color: yellow;" style.fontSize="8" width="40" height="40" automationText="light-bckg-yellow-abbck-ruby-bckgsusb-true" />

            <Button text="73" tap="applyTapWithSpan" tag="status-bar-style: dark;background-color: yellow;" style.fontSize="8" width="40" height="40"  automationText="light-ab-hidden-bckgsusb-true" />
            <Button text="74" tap="applyTapWithActionBarHiddenAndSpan" tag="status-bar-style: dark; background-color: yellow;" style.fontSize="8" width="40" height="40"  automationText="dark-ab-hidden-bckgsusb-true" />

        </WrapLayout>

        <Label text="Android" fontSize="14" marginTop="10"/>
        <WrapLayout>
            <!-- status-bar-style - action-bar - hidden -->
            <Button text="31" tap="applyTapWithHiddenActionBar" tag="status-bar-style: light;" style.fontSize="8" width="40" height="40"  automationText="light-ab-hidden" />
            <Button text="32" tap="applyTapWithHiddenActionBar" tag="status-bar-style: dark;" style.fontSize="8" width="40" height="40"  automationText="ark-ab-hidden" />

            <!-- android-status-bar-background -->  
            <Button text="41" tap="applyTap" tag="android-status-bar-background: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="asbb-ruby" />
        </WrapLayout>
    </StackLayout>
</Page>