Mask appears correct in design view but not runtime

Question

I have a component that the designer did as an elaborate thermometer in photoshop, I am trying to replicate it in flex so that I can set the size of the thermometer with code. I have it set up as a custom component (code below), in design view looks like (enlarged):
But when I run the app where I am using the component, the green bar is missing:
Here's the code. Why would this be?
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="180" height="20">
     <s:Group top="0" left="0" right="0" bottom="0" >
          <s:Rect top="0" left="0" right="0" bottom="0" radiusX="8">
               <s:fill>
                    <s:SolidColor color="#fbe5a1"/>
               </s:fill>
               <s:stroke>
                    <s:SolidColorStroke id="bdr" weight="2" color="#ffffff"/>
               </s:stroke>
          </s:Rect>
          <s:Group top="0" left="0" bottom="0" right="0">
               <s:Rect id="thermo" top="0" left="0" bottom="0" width="80">
                    <s:fill>
                         <s:SolidColor color="#bfe994" />
                    </s:fill>
               </s:Rect>
               <s:mask>
                    <s:Group>
                         <s:Rect top="2" bottom="2" left="2" width="178" radiusX="8" radiusY="8">
                              <s:fill>
                                   <s:SolidColor color="#000000"/>
                              </s:fill>
                         </s:Rect>
                    </s:Group>
               </s:mask>
          </s:Group>
     </s:Group>
     <s:Rect top="2" left="2" right="2" bottom="2" radiusX="8" radiusY="8">
          <s:filters>
               <s:DropShadowFilter alpha=".3" blurX="12" blurY="12" distance="2" inner="true" knockout="true" />
          </s:filters>
          <s:fill>
               <s:SolidColor color="#fbe5a1"/>
          </s:fill>
     </s:Rect>
</s:Group>

Answer 1

FWIW, setting it like this seems to work:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="180" height="20" creationComplete="group1_creationCompleteHandler(event)">
     <fx:Script>
          <![CDATA[
               import mx.events.FlexEvent;
               import spark.components.BorderContainer;
               protected function group1_creationCompleteHandler(event:FlexEvent):void
                    var bc:BorderContainer = new BorderContainer();
                    bc.width = ds.width;
                    bc.height = ds.height;
                    bc.setStyle("cornerRadius", 8);
                    bc.y = 2;
                    bc.x = 2;
                    bar.mask = bc;
          ]]>
     </fx:Script>
     <s:Group top="0" left="0" right="0" bottom="0" >
          <s:Rect top="0" left="0" right="0" bottom="0" radiusX="8">
               <s:fill>
                    <s:SolidColor color="#fbe5a1"/>
               </s:fill>
               <s:stroke>
                    <s:SolidColorStroke id="bdr" weight="2" color="#ffffff"/>
               </s:stroke>
          </s:Rect>
          <s:Rect id="bar" top="0" left="0" bottom="0" width="80">
               <s:fill>
                    <s:SolidColor color="#bfe994" />
               </s:fill>
          </s:Rect>
     </s:Group>
     <s:Rect id="ds" top="2" left="2" right="2" bottom="2" radiusX="8" radiusY="8">
          <s:filters>
               <s:DropShadowFilter alpha=".3" blurX="12" blurY="12" distance="2" inner="true" knockout="true" />
          </s:filters>
          <s:fill>
               <s:SolidColor color="#fbe5a1"/>
          </s:fill>
     </s:Rect>
</s:Group>