[myfaces-tobago] 02/02: TOBAGO-1813: Internal Measure support for CSS units: ch, rem, vw, vh, vmin, vmax

[lo...@apache.org]

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

lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit 14de8474cd4c0fc21770ba2d75f641cd44c37056
Author: Udo Schnurpfeil <lo...@apache.org>
AuthorDate: Thu Sep 28 14:17:58 2017 +0200

    TOBAGO-1813: Internal Measure support for CSS units: ch, rem, vw, vh, vmin, vmax
---
 .../main/java/org/apache/myfaces/tobago/layout/Measure.java | 13 +++++++++++--
 .../org/apache/myfaces/tobago/layout/MeasureUnitTest.java   |  6 ++++++
 .../content/30-concept/16-layout/20-flex/flex-layout.xhtml  |  8 ++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/layout/Measure.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/layout/Measure.java
index ee7b668..91bc6c1 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/layout/Measure.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/layout/Measure.java
@@ -99,8 +99,11 @@ public final class Measure implements Serializable {
       if (value.endsWith("%")) {
         return new Measure(value.substring(0, length - 1), Unit.PERCENT);
       }
-      if (length >= 2 && Character.isLetter(value.charAt(length - 2))) {
-        return new Measure(value.substring(0, length - 2), Unit.valueOf(value.substring(length - 2).toUpperCase()));
+      for (int i = 4; i >= 2; i--) {
+        final int pos = length - i;
+        if (length >= i && Character.isLetter(value.charAt(pos))) {
+          return new Measure(value.substring(0, pos), Unit.valueOf(value.substring(pos).toUpperCase()));
+        }
       }
       return new Measure(value, Unit.PX);
 
@@ -173,6 +176,12 @@ public final class Measure implements Serializable {
     MM,
     IN,
     PC,
+    CH, // Relative to width of the "0" (zero)
+    REM, // Relative to font-size of the root element
+    VW, // Relative to 1% of the width of the viewport*
+    VH, // Relative to 1% of the height of the viewport*
+    VMIN, // Relative to 1% of viewport's* smaller dimension
+    VMAX, // Relative to 1% of viewport's* larger dimension
     PERCENT;
 
     private final String value;
diff --git a/tobago-core/src/test/java/org/apache/myfaces/tobago/layout/MeasureUnitTest.java b/tobago-core/src/test/java/org/apache/myfaces/tobago/layout/MeasureUnitTest.java
index 0eeaa8d..efba114 100644
--- a/tobago-core/src/test/java/org/apache/myfaces/tobago/layout/MeasureUnitTest.java
+++ b/tobago-core/src/test/java/org/apache/myfaces/tobago/layout/MeasureUnitTest.java
@@ -42,6 +42,12 @@ public class MeasureUnitTest {
     Assert.assertEquals("13.7ex", "" + Measure.valueOf("13.7ex"));
     Assert.assertEquals("13.7em", "" + Measure.valueOf("13.7em"));
     Assert.assertEquals("13.7in", "" + Measure.valueOf("13.7in"));
+    Assert.assertEquals("13.7ch", "" + Measure.valueOf("13.7ch"));
+    Assert.assertEquals("13.7rem", "" + Measure.valueOf("13.7rem"));
+    Assert.assertEquals("13.7vw", "" + Measure.valueOf("13.7vw"));
+    Assert.assertEquals("13.7vh", "" + Measure.valueOf("13.7vh"));
+    Assert.assertEquals("13.7vmin", "" + Measure.valueOf("13.7vmin"));
+    Assert.assertEquals("13.7vmax", "" + Measure.valueOf("13.7vmax"));
     Assert.assertEquals("13.7%", "" + Measure.valueOf("13.7%"));
   }
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/20-flex/flex-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/20-flex/flex-layout.xhtml
index 91cb12d..e40a6ee 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/20-flex/flex-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/20-flex/flex-layout.xhtml
@@ -40,21 +40,21 @@
   </tc:section>
 
   <tc:section label="Columns">
-    <p>In this example, the <code>columns</code> attribute is set to '200px;auto;1*;2*;10em'.
+    <p>In this example, the <code>columns</code> attribute is set to '200px;auto;1*;2*;10rem'.
       This means:</p>
     <ul>
       <li>Column 1: Width is always at 200px.</li>
       <li>Column 2: Width is always the width of the button.</li>
       <li>Column 3: The left space is filled with the remaining buttons in a ratio of 1:3 for this button.</li>
       <li>Column 4: The left space is filled with the remaining buttons in a ratio of 2:3 for this button.</li>
-      <li>Column 5: Width is always set to 10em.</li>
+      <li>Column 5: Width is always set to 10rem.</li>
     </ul>
-    <tc:flexLayout columns="200px;auto;1*;2*;10em">
+    <tc:flexLayout columns="200px;auto;1*;2*;10rem">
       <tc:button label="200px"/>
       <tc:button label="auto"/>
       <tc:button label="1*"/>
       <tc:button label="2*"/>
-      <tc:button label="10em"/>
+      <tc:button label="10rem"/>
     </tc:flexLayout>
   </tc:section>
 

-- 
To stop receiving notification emails like this one, please contact
"commits@myfaces.apache.org" <co...@myfaces.apache.org>.