goog.graphics.VmlGraphics uses incorrect scale when size specifed as percentage

[GoogleCodeExporter]

What steps will reproduce the problem?
--------------------------------------

1. Add this HTML to your document
<div style="height: 400px;" id="app-pages">
    <div style="display: none;" id="status-page"></div>
    <div style="height: 100%;" id="fft-page">
        <div class="goog-inline-block sm-spectrum-view" style="height: 90%; background-color: red;" id="spectrum-view"></div>
    <div style="display: none;" id="channel-page"></div>
</div>

2. Add a graphics object on page load to the "spectrum-view"
    var graphics = new goog.graphics.createSimpleGraphics('100%','100%');
    graphics.render(document.getElementById("spectrum-view"));

3. Draw a square
    var fill = new goog.graphics.SolidFill('yellow');
    var stroke = new goog.graphics.Stroke(1, 'green');
    graphics.drawRect(10, 10, 80, 80, stroke, fill);

4. View page in IE8. (Viewing in Firefox 3.6 produces expected output)

What is the expected output? What do you see instead?
-----------------------------------------------------
Expected output is a small green boardered yellow square on a red background.

Actual output is a rather large green boardered yellow rectangle taking up most 
the drawing space.

What version of the product are you using? On what operating system?
--------------------------------------------------------------------
svn checkout within last 2 weeks.

Please provide any additional information below.
------------------------------------------------

Tracked the problem down in the Closure source code. In the function 
goog.graphics.VmlGraphics.prototype.createDom the percentage value gets used as 
"pixelWidth" and "pixelHeight". These then get used to set the 
"group.coordsize". This means size of the graphics area is assumed to be 100 by 
100 pixels.

Created my own fix so I could continue with my work. Not tested it a great deal 
but it appears to work for me:

Problem with creating a fix is that if the sizes are set on a percentage basis 
you can't tell the pixel size during a call to 
goog.graphics.VmlGraphics.prototype.createDom.

Worked around this be re-calculating and setting the "group.coordsize" in 
goog.graphics.VmlGraphics.prototype.handleContainerResize_. The following is a 
diff of my changes

@@ -517,6 +517,17 @@ goog.graphics.VmlGraphics.prototype.handleContainerResize_ 
= function() {
   if (size.width) {
     style.width = size.width + 'px';
     style.height = size.height + 'px';
+    
+    if (this.coordWidth) {
+        group.coordsize =
+            goog.graphics.VmlGraphics.toSizeCoord(this.coordWidth) + ' ' +
+            goog.graphics.VmlGraphics.toSizeCoord(
+                /** @type {number} */ (this.coordHeight));
+     } else {
+           this.canvasElement.getElement().coordsize = 
goog.graphics.VmlGraphics.toSizeCoord(size.width) + ' ' +
+                       goog.graphics.VmlGraphics.toSizeCoord(size.height);
+     }
+    
   } else {

Original issue reported on code.google.com by simon.al...@gmail.com on 2 Sep 2010 at 9:53

[GoogleCodeExporter]

Just noticed mistake in my changes.

This should be a better fix:

@@ -517,6 +517,17 @@ goog.graphics.VmlGraphics.prototype.handleContainerResize_ 
= function() {
   if (size.width) {
     style.width = size.width + 'px';
     style.height = size.height + 'px';
+    
+    if (this.coordWidth) {
+       this.canvasElement.getElement().coordsize =
+            goog.graphics.VmlGraphics.toSizeCoord(this.coordWidth) + ' ' +
+            goog.graphics.VmlGraphics.toSizeCoord(
+                /** @type {number} */ (this.coordHeight));
+     } else {
+           this.canvasElement.getElement().coordsize = 
goog.graphics.VmlGraphics.toSizeCoord(size.width) + ' ' +
+                       goog.graphics.VmlGraphics.toSizeCoord(size.height);
+     }
+    
   } else {

Original comment by simon.al...@gmail.com on 2 Sep 2010 at 10:01

[GoogleCodeExporter]

Original comment by nn...@google.com on 27 Apr 2012 at 9:27

• Added labels: Type-CodeReview
• Removed labels: Type-Defect

[GoogleCodeExporter]

Have you signed your CLA?
http://code.google.com/p/closure-library/wiki/Contributors

Original comment by chrishe...@google.com on 15 May 2012 at 10:43

• Added labels: NoCLA

[GoogleCodeExporter]

CLA now signed.

Original comment by simon.al...@gmail.com on 16 May 2012 at 12:58