Add vmax support

README.md

@@ -1,13 +1,13 @@
 vminpoly
 ========
 
-A polyfill for CSS units vw, vh & vmin.
+A polyfill for CSS units vw, vh, vmin, & vmax.
 
 Simple online [demo](http://saabi.github.com/vminpoly) right here. A more sophisticated [responsive demo](http://saabi.github.com/vminpoly/demo2.html) demonstrating vw/vh/vmin units along with *media queries*, working right down to IE5.5 on the desktop and Opera Mini on mobiles!! (In Opera Mini the browser must be refreshed after changing phone orientations as it appears it doesn't trigger the window resize event)
 
 This is a working proof of concept right now. There's a lot of cleanup to do on the code.
 
-Since most browsers ignore rules they don't understand, the code must load and parse the original CSS sourcecode. It does this using a javascript [CSS parser](https://github.com/tabatkins/css-parser). Once this is done, it filters the generated tree leaving only rules that use 'vh', 'vw' & 'vmin' units.
+Since most browsers ignore rules they don't understand, the code must load and parse the original CSS sourcecode. It does this using a javascript [CSS parser](https://github.com/tabatkins/css-parser). Once this is done, it filters the generated tree leaving only rules that use 'vh', 'vw', 'vmin' & 'vmax' units.
 At window resize time, it generates CSS code for the 'px' equivalents and appends it in a 'style' element at the end of the 'head' element. The generated code respects media queries.
 
 As it is, it's fast enough for a lot of cases, but the code can still be optimized greatly, both in parsing and in resizing.
@@ -33,6 +33,7 @@ In short, the only browser with apparently full native support right now is Fire
 Latest Changes:
 ---------------
 
+* Added vmax unit support!
 * After some bug fixes it finally works down to **IE5.5 on the desktop** and **Opera Mini on mobile**!!
 * Also, I removed the dependency on jQuery.
 * Now resizes correctly right after page load.

test.css

@@ -6,6 +6,6 @@
 	left:4vw;
 	width:50vmin;
 	height:50vmin;
-	font-size:3vmin;
+	font-size:3vmax;
 	border:1vw solid black;
-}
+}

vminpoly.coffee

@@ -67,7 +67,7 @@ browserSupportsUnitsNatively = ->
   head = document.getElementsByTagName('head')[0]
   head.appendChild style_block
 
-  test_results = testVWSupport(test_element, style_block) and testVWSupport(test_element, style_block) and testVMinSupport(test_element, style_block)
+  test_results = testVWSupport(test_element, style_block) and testVWSupport(test_element, style_block) and testVMinSupport(test_element, style_block) and testVMaxSupport(test_element, style_block)
 
   body.removeChild test_element
   head.removeChild style_block
@@ -147,13 +147,34 @@ testVMinSupport = (element, style_block) ->
   # return result
   actual_vmin is comp_width
 
+testVMaxSupport = (element, style_block) ->
+  # Set width of the element
+  applyStyleTest(style_block, 'width: 50vmax')
+
+  # docElement has to be defined, can you believe it
+  docElement = document.documentElement
+
+  # find maximum calculation sizes
+  one_vw = docElement.clientWidth / 100
+  one_vh = docElement.clientHeight / 100
+  actual_vmax = parseInt(Math.max(one_vw, one_vh)*50,10)
+
+  # Computed width
+  comp_width = parseInt(testElementStyle(element).width, 10)
+
+  # Remove current test style
+  clearStyleTests style_block
+
+  # return result
+  actual_vmax is comp_width
+
 initLayoutEngine = () ->
   analyzeStyleRule = (rule) ->
     declarations = []
     for declaration in rule.value
       hasDimension = false
       for token in declaration.value
-        if token.tokenType is 'DIMENSION' and (token.unit is 'vmin' or token.unit is 'vh' or token.unit is 'vw')
+        if token.tokenType is 'DIMENSION' and (token.unit is 'vmin' or token.unit is 'vh' or token.unit is 'vw' or token.unit is 'vmax')
           hasDimension = true
       if hasDimension
         declarations.push declaration
@@ -181,6 +202,7 @@ initLayoutEngine = () ->
       vh: vpDims.height / 100
       vw: vpDims.width / 100
     dims.vmin = Math.min dims.vh, dims.vw
+    dims.vmax = Math.max dims.vh, dims.vw
 
     vpAspectRatio = vpDims.width / vpDims.height
 
@@ -202,7 +224,7 @@ initLayoutEngine = () ->
         ruleCss += declaration.name
         ruleCss += ":"
         for token in declaration.value
-          if token.tokenType is 'DIMENSION' and (token.unit is 'vmin' or token.unit is 'vh' or token.unit is 'vw')
+          if token.tokenType is 'DIMENSION' and (token.unit is 'vmin' or token.unit is 'vh' or token.unit is 'vw' or token.unit is 'vmax')
             ruleCss += "#{Math.floor(token.num*dims[token.unit])}px"
           else
             ruleCss += token.toSourceString()