[FlexJS] SimpleCSSStyles backgroundAlpha not working on JS

[Justin Mclean]

Hi,

Looking at SimpleCSSStyles I can see a property called backgroundAlpha, but 
there is no CSS property called backgroundAlpha and as far as I can tell 
SimpleCSSValueImpl does nothing special with backgroundAlpha. I think it needs 
to be converted to the corresponding CSS style opacity?

At a guess code like this would needed to be added to applyStyles is 
SimpleCSSStyles.as

if (p == 'backgroundAlpha') {
        p = opacity;
}

Above the exiting "if (typeof(value) == 'number’)”.

Any other thoughts / differences of opinion? Should I raise a JIRA for this?

There’s is probably a further complication in that opacity doesn’t effect 
background colour only background  images. For background colour you need to 
modify the background colour and use a rgba value rather than a rgb value.

However it looks like SimpleCSSStyles doesn’t support rgba values either. There 
is some code in CCSUtils to parse rgba values but as this example shows it 
fails to work correctly.

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
                xmlns:js="library://ns.apache.org/flexjs/basic">

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl/>
    </js:valuesImpl>
    
    <js:initialView>
        <js:View percentWidth="100" percentHeight="100">
            <js:HContainer>
                <js:Container width="100" height="100">
                    <js:style>
                        <js:SimpleCSSStyles backgroundColor="#FF0000" />
                    </js:style>
                </js:Container>
                <js:Container width="100" height="100">
                    <js:style>
                        <js:SimpleCSSStyles backgroundColor="#FF000066" />
                    </js:style>
                </js:Container>
                <js:Container width="100" height="100">
                    <js:style>
                        <js:SimpleCSSStyles backgroundColor="rgba(FF,0,0,66)" />
                    </js:style>
                </js:Container>
                <js:Container width="100" height="100">
                    <js:style>
                        <js:SimpleCSSStyles backgroundColor="rgba(FF,0,0,0.4)" 
/>
                    </js:style>
                </js:Container>
            </js:HContainer>
        </js:View>
    </js:initialView>

</js:Application>

Only the first box shows as red.

Thanks,
Justin