This is an automated email from the ASF dual-hosted git repository.

harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 3dd2277763 I found a better pattern
3dd2277763 is described below

commit 3dd2277763125fc447c2d26664c650ac896f53b0
Author: Harbs <[email protected]>
AuthorDate: Tue Feb 24 00:17:34 2026 +0200

    I found a better pattern
---
 .../royale/style/stylebeads/SingleStyleBase.as     | 96 ++++++++++++++++++++++
 .../royale/style/stylebeads/StyleBeadBase.as       | 12 ---
 .../FontFeatures.as => layout/AspectRatio.as}      | 27 +++---
 .../TextOverflow.as => layout/Bottom.as}           | 24 +-----
 .../FontFeatures.as => layout/BoxDecoration.as}    | 26 +++---
 .../FontFeatures.as => layout/BoxSizing.as}        | 27 +++---
 .../FontFeatures.as => layout/BreakAfter.as}       | 26 +++---
 .../FontFeatures.as => layout/BreakBefore.as}      | 25 +++---
 .../FontFeatures.as => layout/BreakInside.as}      | 26 +++---
 .../FontFeatures.as => layout/Clear.as}            | 29 ++++---
 .../royale/style/stylebeads/layout/Columns.as      | 67 +++++++++++++++
 .../FontFeatures.as => layout/Display.as}          | 29 +++----
 .../{StyleBeadBase.as => layout/Float.as}          | 39 ++++-----
 .../TextOverflow.as => layout/Inset.as}            | 25 ++----
 .../royale/style/stylebeads/layout/InsetBase.as    | 71 ++++++++++++++++
 .../TextOverflow.as => layout/InsetBlock.as}       | 25 ++----
 .../TextOverflow.as => layout/InsetBlockEnd.as}    | 24 ++----
 .../TextOverflow.as => layout/InsetBlockStart.as}  | 24 ++----
 .../TextOverflow.as => layout/InsetInline.as}      | 25 ++----
 .../TextOverflow.as => layout/InsetInlineEnd.as}   | 24 +-----
 .../TextOverflow.as => layout/InsetInlineStart.as} | 25 ++----
 .../FontFeatures.as => layout/Isolation.as}        | 26 +++---
 .../{typography/TextOverflow.as => layout/Left.as} | 24 +-----
 .../FontFeatures.as => layout/ObjectFit.as}        | 27 +++---
 .../FontFeatures.as => layout/ObjectPosition.as}   | 27 +++---
 .../FontFeatures.as => layout/Overflow.as}         | 25 ++----
 .../FontFeatures.as => layout/OverflowX.as}        | 25 ++----
 .../FontFeatures.as => layout/OverflowY.as}        | 25 ++----
 .../FontFeatures.as => layout/Overscroll.as}       | 26 ++----
 .../FontFeatures.as => layout/OverscrollX.as}      | 26 ++----
 .../FontFeatures.as => layout/OverscrollY.as}      | 26 ++----
 .../FontFeatures.as => layout/Position.as}         | 25 ++----
 .../TextOverflow.as => layout/Right.as}            | 24 ++----
 .../{typography/TextOverflow.as => layout/Top.as}  | 24 ++----
 .../FontFeatures.as => layout/Visibility.as}       | 26 +++---
 .../FontFeatures.as => layout/ZIndex.as}           | 29 +++----
 .../style/stylebeads/typography/FontFeatures.as    |  1 +
 .../style/stylebeads/typography/TextOverflow.as    |  4 +-
 .../royale/org/apache/royale/style/util/CSSUnit.as | 36 ++++++++
 .../TextOverflow.as => util/parseCSSValue.as}      | 25 +-----
 40 files changed, 558 insertions(+), 589 deletions(-)

diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SingleStyleBase.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SingleStyleBase.as
new file mode 100644
index 0000000000..2593a9f1ca
--- /dev/null
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SingleStyleBase.as
@@ -0,0 +1,96 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.stylebeads
+{
+       abstract public class SingleStyleBase extends StyleBeadBase
+       {
+               public function SingleStyleBase(selectorPrefix:String, 
rulePrefix:String)
+               {
+                       super();
+                       _selectorPrefix = selectorPrefix;
+                       _rulePrefix = rulePrefix;
+               }
+               protected var _value:*;
+
+               public function get value():*
+               {
+                       return _value;
+               }
+
+               abstract public function set value(value:*):void;
+
+               protected var _selectorPrefix:String = "";
+
+               public function get selectorPrefix():String
+               {
+                       return _selectorPrefix;
+               }
+               private var _rulePrefix:String = "";
+
+               public function get rulePrefix():String
+               {
+                       return _rulePrefix;
+               }
+
+               public function set rulePrefix(value:String):void
+               {
+                       _rulePrefix = value;
+               }
+               /**
+                * All subclasses should set this value when the value is set.
+                * This allows the base class to generate
+                * the appropriate selectors and rules.
+                */
+               protected var calculatedSelector:String;
+               protected var calculatedRuleValue:String;
+               override public function get selectors():Array
+               {
+                       return selector ? [selector] : [];
+               }
+               override public function get rules():Array
+               {
+                       return rule ? [rule] : [];
+               }
+               public function get selector():String
+               {
+                       if(!calculatedSelector)
+                               return "";
+                       return "." + selectorPrefix + "-" + calculatedSelector;
+               }
+               public function get rule():String
+               {
+                       if(!calculatedRuleValue)
+                               return "";
+                       return rulePrefix + ":" + calculatedRuleValue + ";";
+               }
+               protected function sanitizeSelector(value:String):String
+               {
+                       var strVal:String = "" + value;
+                       if(strVal.indexOf("-") == 0)
+                               strVal = strVal.substring(1);
+                       if(strVal == "100%")
+                               return "full";
+                       if(strVal.indexOf("%") >= 0)
+                               return "p" + strVal.replace(/%/g, "");
+                       
+                       return value.replace(/[\.\s]/g, "-");
+               }
+
+       }
+}
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
index c4e4efaf7c..9abec793f1 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
@@ -30,17 +30,5 @@ package org.apache.royale.style.stylebeads
                }
                abstract public function get selectors():Array;
                abstract public function get rules():Array;
-               protected var _theme:String;
-               protected function findTheme():String
-               {
-                       var parent:IStrand = _strand;
-                       while(parent is IStyleBead)
-                               parent = (parent as StyleBeadBase)._strand;
-                       
-                       if(parent is IStyleUIBase)
-                               return (parent as IStyleUIBase).theme;
-                       
-                       return null;
-               }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/AspectRatio.as
similarity index 67%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/AspectRatio.as
index a050c4da83..a102c44e75 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/AspectRatio.as
@@ -16,29 +16,24 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
 
-       public class FontFeatures extends StyleBeadBase
+       public class AspectRatio extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function AspectRatio()
                {
-                       super();
+                       super("aspect", "aspect-ratio");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       _value = value;
+                       // TODO validate aspect before setting
+                       calculatedSelector = value;
+                       calculatedRuleValue = value; // aspect-ratio doesn't 
have a separate rule value like box-sizing does
+                       
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Bottom.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Bottom.as
index b651f46a99..ae272f81fb 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Bottom.as
@@ -16,29 +16,13 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
-
-       public class FontFamily extends StyleBeadBase
+       public class Bottom extends InsetBase
        {
-               public function FontFamily()
+               public function Bottom()
                {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
+                       super("bottom", "bottom");
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BoxDecoration.as
similarity index 66%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BoxDecoration.as
index a050c4da83..dcf8df07f5 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BoxDecoration.as
@@ -16,29 +16,23 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class BoxDecoration extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function BoxDecoration()
                {
-                       super();
+                       super("box-decoration", "box-decoration");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       _value = value;
+                       assert(value == "slice" || value == "clone", 
"box-decoration must be 'slice' or 'clone'");
+                       calculatedRuleValue = calculatedSelector = value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BoxSizing.as
similarity index 63%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BoxSizing.as
index a050c4da83..453303469f 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BoxSizing.as
@@ -16,29 +16,24 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class BoxSizing extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function BoxSizing()
                {
-                       super();
+                       super("box", "box-sizing");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       _value = value;
+                       assert(value == "border-box" || value == "content-box", 
"box-sizing must be 'border-box' or 'content-box'");
+                       calculatedSelector = value;
+                       calculatedRuleValue = value.slice(0, -4); // remove 
"-box" from the end of the value for the rule
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BreakAfter.as
similarity index 64%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BreakAfter.as
index a050c4da83..d420c33bdb 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BreakAfter.as
@@ -16,29 +16,23 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class BreakAfter extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function BreakAfter()
                {
-                       super();
+                       super("break-after", "break-after");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       
assert(["auto","avoid","all","avoid-page","page","left","right","column"].indexOf(value)
 >= 0, "Invalid value for break-after: " + value);
+                       _value = value;
+                       calculatedRuleValue = calculatedSelector = value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BreakBefore.as
similarity index 64%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BreakBefore.as
index a050c4da83..12978cb09c 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BreakBefore.as
@@ -16,29 +16,24 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class BreakBefore extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function BreakBefore()
                {
-                       super();
+                       super("break-before", "break-before");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       
assert(["auto","avoid","all","avoid-page","page","left","right","column"].indexOf(value)
 >= 0, "Invalid value for break-before: " + value);
+                       _value = value;
+                       calculatedRuleValue = calculatedSelector = value;
                }
 
-               override public function get rules():Array
-               {
-                       return [];
-               }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BreakInside.as
similarity index 65%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BreakInside.as
index a050c4da83..b9e1ff6b23 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/BreakInside.as
@@ -16,29 +16,23 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class BreakInside extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function BreakInside()
                {
-                       super();
+                       super("break-inside", "break-inside");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       
assert(["auto","avoid","avoid-page","avoid-column"].indexOf(value) >= 0, 
"Invalid value for break-inside: " + value);
+                       _value = value;
+                       calculatedRuleValue = calculatedSelector = value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Clear.as
similarity index 62%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Clear.as
index a050c4da83..eba445947b 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Clear.as
@@ -16,29 +16,28 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class Clear extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function Clear()
                {
-                       super();
+                       super("clear", "clear");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
+               override public function set value(value:*):void
                {
-                       return [];
-               }
+                       
assert(["left","right","both","inline-start","inline-end","none"].indexOf(value)
 >= 0, "Invalid value for clear: " + value);
+                       _value = value;
+                       calculatedSelector = value;
+                       var dashLoc:int = value.indexOf("-");
+                       if (dashLoc > 0)
+                               value = value.substr(dashLoc + 1);
 
-               override public function get rules():Array
-               {
-                       return [];
+                       calculatedRuleValue = value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Columns.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Columns.as
new file mode 100644
index 0000000000..1f99c8920c
--- /dev/null
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Columns.as
@@ -0,0 +1,67 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.stylebeads.layout
+{
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.html.elements.B;
+       import org.apache.royale.debugging.assert;
+
+       public class Columns extends SingleStyleBase
+       {
+               public function Columns()
+               {
+                       super("columns", "columns");
+               }
+               private const presets:Array = 
["3xs","2xs","xs","sm","md","lg","xl","2xl","3xl","4xl","5xl","6xl","7xl"];
+               override public function set value(value:*):void
+               {
+                       var validated:Boolean = false;
+                       var isPreset:Boolean;
+                       var isVar:Boolean;
+                       if(value == "auto")
+                               validated = true;
+                       
+                       else if(parseFloat(value) == value)
+                               validated = true;
+                       else if(presets.indexOf(value) >= 0)
+                       {
+                               validated = true;
+                               isPreset = true;
+                       }
+                       else if(value.indexOf("--") == 0)
+                       {
+                               validated = true;
+                               isVar = true;
+                       }
+                       assert(validated ||!isNaN(parseFloat(value)), "Invalid 
value for columns: " + value);
+                       // TODO calculate the value of presets using the 
container size in theme.
+                       assert(!isPreset, "Preset values for columns are not 
yet supported: " + value);
+                       _value = value;
+                       if(isVar)
+                       {
+                               calculatedSelector = "(" + value.substring(2) + 
")";
+                               calculatedRuleValue = "var(" + value + ")";
+                       }
+                       else
+                       {
+                               calculatedRuleValue = calculatedSelector = 
value;
+                       }
+               }
+       }
+}
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Display.as
similarity index 54%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Display.as
index a050c4da83..9e9ced1a11 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Display.as
@@ -16,29 +16,26 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class Display extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function Display()
                {
-                       super();
+                       super("", "display");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       // TODO: Support `sr-only` and `not-sr-only`
+                       
assert(["inline","block","inline-block","flow-root","flex","inline-flex","grid","inline-grid","contents","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","list-item","none"].indexOf(value)
 >= 0, "Invalid value for display: " + value);
+                       _value = value;
+                       calculatedRuleValue = calculatedSelector = value;
+                       if(value == "none")
+                               calculatedSelector = "hidden";
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Float.as
similarity index 58%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Float.as
index c4e4efaf7c..8b282e5ecb 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Float.as
@@ -16,31 +16,32 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.core.Bead;
-       import org.apache.royale.style.IStyleUIBase;
-       import org.apache.royale.core.IStrand;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       abstract public class StyleBeadBase extends Bead implements IStyleBead
+       public class Float extends SingleStyleBase
        {
-               public function StyleBeadBase()
+               public function Float()
                {
-                       super();
+                       super("float", "float");
                }
-               abstract public function get selectors():Array;
-               abstract public function get rules():Array;
-               protected var _theme:String;
-               protected function findTheme():String
+               override public function set value(value:*):void
                {
-                       var parent:IStrand = _strand;
-                       while(parent is IStyleBead)
-                               parent = (parent as StyleBeadBase)._strand;
-                       
-                       if(parent is IStyleUIBase)
-                               return (parent as IStyleUIBase).theme;
-                       
-                       return null;
+                       
assert(["left","right","inline-start","inline-end","none"].indexOf(value) >= 0, 
"Invalid value for float: " + value);
+                       var str:String = value;
+                       _value = str;
+                       calculatedRuleValue = value;
+                       if(str == "none")
+                               calculatedSelector = "hidden";
+                       else
+                       {
+                               var inlineIdx:int = str.indexOf("inline-");
+                               if(inlineIdx >= 0)
+                                       str = str.substring(inlineIdx + 7);
+                               calculatedSelector = str;
+                       }
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Inset.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Inset.as
index b651f46a99..0478e0483f 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Inset.as
@@ -16,29 +16,16 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFamily extends StyleBeadBase
+       public class Inset extends InsetBase
        {
-               public function FontFamily()
+               public function Inset()
                {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
+                       super("inset", "inset");
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBase.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBase.as
new file mode 100644
index 0000000000..8eb3cfbdac
--- /dev/null
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBase.as
@@ -0,0 +1,71 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.stylebeads.layout
+{
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
+       import org.apache.royale.style.util.ThemeManager;
+       import org.apache.royale.style.util.CSSUnit;
+
+       public class InsetBase extends SingleStyleBase
+       {
+               public function InsetBase(selectorPrefix:String, 
rulePrefix:String)
+               {
+                       super(selectorPrefix, rulePrefix);
+               }
+               public var unit:String = CSSUnit.PX;
+               protected var pixelValue:Number;
+               private var savedPrefix:String;
+               override public function set value(value:*):void
+               {
+                       var isNum:Boolean = parseFloat(value) == value;
+                       var isInt:Boolean = parseInt(value, 10) == value;
+                       var parseNum:Number = parseFloat(value);
+                       var isNegative:Boolean = parseNum < 0;
+                       if(isNegative)
+                       {
+                               if(!savedPrefix)
+                                       savedPrefix = _selectorPrefix;
+                               _selectorPrefix = "-" + savedPrefix;
+                       }
+                       
+                       if(isInt)
+                       {
+                               pixelValue = 
ThemeManager.instance.activeTheme.spacing * value;
+                               calculatedSelector = "" + Math.abs(value);
+                               calculatedRuleValue = 
CSSUnit.convert(pixelValue, CSSUnit.PX, unit) + unit;
+                       }
+                       else if(isNum)
+                       {
+                               calculatedSelector = "p" + Math.abs(value);
+                               calculatedRuleValue = (value * 100) + "%";
+                       }
+                       else
+                       {
+                               calculatedSelector = sanitizeSelector(value);
+                               calculatedRuleValue = value;
+                       }
+                       // 
assert(["inline","block","inline-block","flow-root","flex","inline-flex","grid","inline-grid","contents","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","list-item","none"].indexOf(value)
 >= 0, "Invalid value for display: " + value);
+                       _value = value;
+                       calculatedRuleValue = calculatedSelector = value;
+                       if(value == "none")
+                               calculatedSelector = "hidden";
+               }
+       }
+}
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBlock.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBlock.as
index b651f46a99..508490c73b 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBlock.as
@@ -16,29 +16,16 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFamily extends StyleBeadBase
+       public class InsetBlock extends InsetBase
        {
-               public function FontFamily()
+               public function InsetBlock()
                {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
+                       super("inset-y", "inset-block");
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBlockEnd.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBlockEnd.as
index b651f46a99..96db24174d 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBlockEnd.as
@@ -16,29 +16,17 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFamily extends StyleBeadBase
+       public class InsetBlockEnd extends InsetBase
        {
-               public function FontFamily()
+               public function InsetBlockEnd()
                {
-                       super();
+                       super("inset-be", "inset-block-end");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
-               }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBlockStart.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBlockStart.as
index b651f46a99..490cfc8ec5 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetBlockStart.as
@@ -16,29 +16,17 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFamily extends StyleBeadBase
+       public class InsetBlockStart extends InsetBase
        {
-               public function FontFamily()
+               public function InsetBlockStart()
                {
-                       super();
+                       super("inset-bs", "inset-block-start");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
-               }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetInline.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetInline.as
index b651f46a99..8db401b5ae 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetInline.as
@@ -16,29 +16,16 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFamily extends StyleBeadBase
+       public class InsetInline extends SingleStyleBase
        {
-               public function FontFamily()
+               public function InsetInline()
                {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
+                       super("inset-x", "inset-inline");
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetInlineEnd.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetInlineEnd.as
index b651f46a99..daf90c196d 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetInlineEnd.as
@@ -16,29 +16,13 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
-
-       public class FontFamily extends StyleBeadBase
+       public class InsetInlineEnd extends InsetBase
        {
-               public function FontFamily()
+               public function InsetInlineEnd()
                {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
+                       super("inset-e", "inset-inline-end");
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetInlineStart.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetInlineStart.as
index b651f46a99..6cde1fff28 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/InsetInlineStart.as
@@ -16,29 +16,16 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFamily extends StyleBeadBase
+       public class InsetInlineStart extends InsetBase
        {
-               public function FontFamily()
+               public function InsetInlineStart()
                {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
+                       super("inset-s", "inset-inline-start");
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Isolation.as
similarity index 67%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Isolation.as
index a050c4da83..30bdcebea6 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Isolation.as
@@ -16,29 +16,23 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class Isolation extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function Isolation()
                {
-                       super();
+                       super("isolation", "isolation");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       assert(["auto","isolate"].indexOf(value) >= 0, "Invalid 
value for isolation: " + value);
+                       _value = value;
+                       calculatedRuleValue = calculatedSelector = value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Left.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Left.as
index b651f46a99..1943d10522 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Left.as
@@ -16,29 +16,13 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
-
-       public class FontFamily extends StyleBeadBase
+       public class Left extends InsetBase
        {
-               public function FontFamily()
+               public function Left()
                {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
+                       super("left", "left");
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/ObjectFit.as
similarity index 66%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/ObjectFit.as
index a050c4da83..a56359aeef 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/ObjectFit.as
@@ -16,29 +16,22 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class ObjectFit extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function ObjectFit()
                {
-                       super();
+                       super("object", "object-fit");
                }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       
assert(["fill","contain","cover","none","scale-down"].indexOf(value) >= 0, 
"Invalid value for object-fit: " + value);
+                       _value = value;
+                       calculatedRuleValue = calculatedSelector = value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/ObjectPosition.as
similarity index 68%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/ObjectPosition.as
index a050c4da83..ab82ffacd0 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/ObjectPosition.as
@@ -16,29 +16,22 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
 
-       public class FontFeatures extends StyleBeadBase
+       public class ObjectPosition extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function ObjectPosition()
                {
-                       super();
+                       super("object", "object-position");
                }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       _value = value;
+                       // TODO sanitize the selector name by replacing spaces 
and dots with dashes
+                       calculatedRuleValue = value;
+                       calculatedSelector = sanitizeSelector(value);
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Overflow.as
similarity index 66%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Overflow.as
index a050c4da83..bfe9d854d3 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Overflow.as
@@ -16,29 +16,22 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class Overflow extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function Overflow()
                {
-                       super();
+                       super("overflow", "overflow");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       
assert(["auto","hidden","clip","visible","scroll"].indexOf(value) >= 0, 
"Invalid value for overflow: " + value);
+                       calculatedRuleValue = calculatedSelector = _value = 
value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverflowX.as
similarity index 66%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverflowX.as
index a050c4da83..048aaa8757 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverflowX.as
@@ -16,29 +16,22 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class OverflowX extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function OverflowX()
                {
-                       super();
+                       super("overflow-x", "overflow-x");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       
assert(["auto","hidden","clip","visible","scroll"].indexOf(value) >= 0, 
"Invalid value for overflow-x: " + value);
+                       calculatedRuleValue = calculatedSelector = _value = 
value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverflowY.as
similarity index 66%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverflowY.as
index a050c4da83..236d83ea74 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverflowY.as
@@ -16,29 +16,22 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class OverflowY extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function OverflowY()
                {
-                       super();
+                       super("overflow-y", "overflow-y");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       
assert(["auto","hidden","clip","visible","scroll"].indexOf(value) >= 0, 
"Invalid value for overflow-y: " + value);
+                       calculatedRuleValue = calculatedSelector = _value = 
value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Overscroll.as
similarity index 66%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Overscroll.as
index a050c4da83..164599966f 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Overscroll.as
@@ -16,29 +16,21 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class Overscroll extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function Overscroll()
                {
-                       super();
+                       super("overscroll", "overscroll-behavior");
                }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       assert(["auto","contain","none"].indexOf(value) >= 0, 
"Invalid value for overscroll-behavior: " + value);
+                       calculatedRuleValue = calculatedSelector = _value = 
value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverscrollX.as
similarity index 66%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverscrollX.as
index a050c4da83..8e8e0af262 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverscrollX.as
@@ -16,29 +16,21 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class OverscrollX extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function OverscrollX()
                {
-                       super();
+                       super("overscroll-x", "overscroll-behavior-x");
                }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       assert(["auto","contain","none"].indexOf(value) >= 0, 
"Invalid value for overscroll-behavior-x: " + value);
+                       calculatedRuleValue = calculatedSelector = _value = 
value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverscrollY.as
similarity index 66%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverscrollY.as
index a050c4da83..ca22b0885e 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/OverscrollY.as
@@ -16,29 +16,21 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class OverscrollY extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function OverscrollY()
                {
-                       super();
+                       super("overscroll-y", "overscroll-behavior-y");
                }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       assert(["auto","contain","none"].indexOf(value) >= 0, 
"Invalid value for overscroll-behavior-y: " + value);
+                       calculatedRuleValue = calculatedSelector = _value = 
value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Position.as
similarity index 67%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Position.as
index a050c4da83..d486bbc4d2 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Position.as
@@ -16,29 +16,22 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class Position extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function Position()
                {
-                       super();
+                       super("", "position");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       
assert(["static","fixed","absolute","relative","sticky"].indexOf(value) >= 0, 
"Invalid value for position: " + value);
+                       calculatedSelector = calculatedRuleValue = _value = 
value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Right.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Right.as
index b651f46a99..0149ff7bd3 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Right.as
@@ -16,29 +16,15 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
 
-       public class FontFamily extends StyleBeadBase
+       public class Right extends InsetBase
        {
-               public function FontFamily()
+               public function Right()
                {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
+                       super("right", "right");
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Top.as
similarity index 72%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Top.as
index b651f46a99..36b4501ae4 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Top.as
@@ -16,29 +16,15 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
 
-       public class FontFamily extends StyleBeadBase
+       public class Top extends InsetBase
        {
-               public function FontFamily()
+               public function Top()
                {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
+                       super("top", "top");
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Visibility.as
similarity index 65%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Visibility.as
index a050c4da83..05b73731ea 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Visibility.as
@@ -16,29 +16,23 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
+       import org.apache.royale.debugging.assert;
 
-       public class FontFeatures extends StyleBeadBase
+       public class Visibility extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function Visibility()
                {
-                       super();
+                       super("", "visibility");
                }
 
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               override public function set value(value:*):void
                {
-                       return [];
+                       assert(["visible","hidden","collapse"].indexOf(value) 
>= 0, "Invalid value for visibility: " + value);
+                       calculatedRuleValue = _value = value;
+                       calculatedSelector = value == "hidden" ? "invisible" : 
value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/ZIndex.as
similarity index 68%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/ZIndex.as
index a050c4da83..ff3e263793 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/ZIndex.as
@@ -16,29 +16,24 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.stylebeads.layout
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
+       import org.apache.royale.style.stylebeads.SingleStyleBase;
 
-       public class FontFeatures extends StyleBeadBase
+       public class ZIndex extends SingleStyleBase
        {
-               public function FontFeatures()
+               public function ZIndex()
                {
-                       super();
+                       super("z", "z-index");
                }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
+               private var negative:Boolean;
+               override public function set value(value:*):void
                {
-                       return [];
+                       negative = value < 0;
+                       if(negative)
+                               _rulePrefix = "-z";
+                       calculatedRuleValue = _value = value;
+                       calculatedSelector = negative ? "" + Math.abs(value) : 
value;
                }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
index a050c4da83..46ca3c5dc6 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontFeatures.as
@@ -29,6 +29,7 @@ package org.apache.royale.style.stylebeads.typography
 
                /**
                 * TODO: Figure this out
+                * https://tailwindcss.com/docs/font-feature-settings
                 */
 
                override public function get selectors():Array
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
index b651f46a99..3b6265a7e9 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
@@ -20,9 +20,9 @@ package org.apache.royale.style.stylebeads.typography
 {
        import org.apache.royale.style.stylebeads.StyleBeadBase;
 
-       public class FontFamily extends StyleBeadBase
+       public class TextOverflow extends StyleBeadBase
        {
-               public function FontFamily()
+               public function TextOverflow()
                {
                        super();
                }
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/CSSUnit.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/CSSUnit.as
index 530427871b..a10e47bc2d 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/CSSUnit.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/CSSUnit.as
@@ -37,5 +37,41 @@ package org.apache.royale.style.util
                public static const VMAX:String = "vmax";
                public static const EX:String = "ex";
                public static const CH:String = "ch";
+
+               public static function convert(value:Number, fromUnit:String, 
toUnit:String):Number
+               {
+                       var preprocess:Number = enumToNumber(fromUnit);
+                       if(!preprocess)
+                       {
+                               // Can't convert from this unit, return the 
value as-is.
+                               return value;
+                       }
+                       value /= preprocess;
+                       var postProcess:Number = enumToNumber(toUnit);
+                       if(!postProcess)                        {
+                               // Can't convert to this unit, return the value 
as-is.
+                               return value;
+                       }
+                       return value / postProcess;
+               }
+               private static function enumToNumber(unit:String):Number
+               {
+                       switch(unit)
+                       {
+                               case EM:
+                               case REM:
+                                       return 16;
+                               case PERCENT:
+                                       return 100;
+                               case VW:
+                               case VH:
+                               case VMIN:
+                               case VMAX:
+                                       return 0;
+                               case PX:
+                               default:
+                                       return 1;
+                       }
+               }
        }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/parseCSSValue.as
similarity index 71%
copy from 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
copy to 
frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/parseCSSValue.as
index b651f46a99..b941ac1793 100644
--- 
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextOverflow.as
+++ 
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/parseCSSValue.as
@@ -16,29 +16,10 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style.util
 {
-       import org.apache.royale.style.stylebeads.StyleBeadBase;
-
-       public class FontFamily extends StyleBeadBase
+       public function parseCSSValue(value:*,stepValue:*):*
        {
-               public function FontFamily()
-               {
-                       super();
-               }
-
-               /**
-                * TODO: Figure this out
-                */
-
-               override public function get selectors():Array
-               {
-                       return [];
-               }
-
-               override public function get rules():Array
-               {
-                       return [];
-               }
+               // TODO
        }
 }
\ No newline at end of file

Reply via email to