[FLEX-27141] SDK-4.5.0.19786 - styles propagation to modules

• Type: Bug
• Status: Closed
• Priority: Major
• Resolution: Cannot Reproduce
• Affects Version/s: Adobe Flex SDK Previous
• Component/s: Styles
• Environment: Affected OS(s): All OS Platforms; Affected OS(s): All OS Platforms; Browser: Internet Explorer 8.x; Language Found: English
• Assignee: Adobe JIRA
• Reporter: Adobe JIRA
• Created: 23/Mar/11 05:57
• Updated: 01/Apr/11 17:22
• Resolved: 23/Mar/11 21:07

Description

Steps to reproduce:
a) Create a Flex library
1. Create a library with one Button that extends Spark Button.
2. Create a defaults.css inside this library with a simple content like this:
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace stylesTest "http://stylesTestNamespace";

global
{
font-family: arial, sans-serif;
font-size: 20;
color: #666666;
}
3. Create a manifest.xml file and put the following code there:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<componentPackage>
<component class="components.Button" id="Button"/>
</componentPackage>
4. Edit project properties and set Namespace URL to "http://stylesTestNamespace" and manifest file to "manifest.xml".
5. Compile project

b) Create a Flex project
1. Create a project
2. Include the library into the project.
3. Create one sample module with the following code:
<?xml version="1.0"?>
<?xml version="1.0"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
<![CDATA[
protected function myButton_clickHandler(event:MouseEvent):void

{ styleManager.loadStyleDeclarations("smallFont.swf", true, false, ApplicationDomain.currentDomain); }
]]
>
</fx:Script>

<s:Button label="Spark Button in StyleMod1"/>
<s:Button label="Load smallFont.swf" click="myButton_clickHandler(event)"/>

</mx:Module>
4. Create one sample application with the following code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
minHeight="600"
minWidth="955"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:stylesTest="http://stylesTestNamespace">

<s:layout>
<s:VerticalLayout/>
</s:layout>

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";

global
{ font-size: 30; }

s|Button { color:blue; cornerRadius:10; }
</fx:Style>

<fx:Script>
<![CDATA[
protected function myButton_clickHandler(event:MouseEvent):void
{ styleManager.loadStyleDeclarations("smallFont.swf", true, false, ApplicationDomain.currentDomain); }

]]
>
</fx:Script>

<s:BorderContainer>
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:Label text="Module 1"/>
<mx:ModuleLoader url="StyleMod1.swf"/>
</s:BorderContainer>

<!-- If you remove this, suddenly it's working -->
<stylesTest:Button label="library button"/>

<s:Button label="Load smallFont.swf" click="myButton_clickHandler(event)"/>

</s:Application>

c) Create run-time style sheet
1. Create a css file smallFont.css with the following code:
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

global
{
font-size: 6;
}

2. Compile the css to run-time style sheet (swf) using the following command:
mxmlc smallFont.css
3. Put the compiled smallFont.swf to the bin-debug folder of the Flex project so that we can load it during the run-time.

Final steps:
Compile and run the Flex project.
Click on the Load smallFont.swf button.

Actual Results:
Font size of the components used in the Application outside the module was changed to 6px. Font size of the components inside the module hasn't changed, it's still 20 px like it's defined in the defaults.css file of the Flex library.

Expected Results:
Font size of all components should be changed to 6px, even of those used in the module.

Now find the following line in the Application and delete it.
<stylesTest:Button label="library button"/>
Suddenly everything is working just fine.

This is working in Flex SDK version 4.1.0.16076.

Workaround (if any):
Loading the same run-time style sheet inside the module once again. In our example to do this, hit the "Load smallFont.swf" button inside the Module1 container.

I'm attaching also sample Flex library and project described here.