title: NVD3 chart fails to calculate legend text length in Chrome, since Window.getComputedStyle does not return font-size correctly
body: <h2>Background Information</h2>
  
  <p>I created an integration of NVD3 charts into Eclipse-RAP using its custom widget framework. The chart is generated into a div. The CSS is loaded dynamically by creating a link entry in javascript. I check if the CSS is already loaded by creating an SVG/text element, and I check if its <code>font-size</code> is ok or not (see <a href="https://stackoverflow.com/a/7997710/337621">https://stackoverflow.com/a/7997710/337621</a>). If the CSS is loaded, I create the chart.</p>
  
  <h2>Problem</h2>
  
  <p>For some reason the chart is not rendered always correctly in Chrome. Usually first time in my session it is shown correctly, but second time it is rendered always wrong. For the wrong case I have found this in the console:</p>
  
  <pre><code>Error: Invalid value for &lt;g&gt; attribute transform="translate(NaN,5)"
  </code></pre>
  
  <p>If I make the chart redraw (for example by updating the chart data or resizing), the legend is rendered correctly.</p>
  
  <p>Expected:
  <img src="https://i.stack.imgur.com/OrZac.png" alt="enter image description here"></p>
  
  <p>Wrong layout:
  <img src="https://i.stack.imgur.com/c8r2K.png" alt="enter image description here"></p>
  
  <p>After some debugging I have found the relevant d3 code part. NVD3 asks for the font size for an SVG Text element using this function:</p>
  
  <pre><code>  d3_selectionPrototype.style = function(name, value, priority) {
      var n = arguments.length;
      if (n &lt; 3) {
        if (typeof name !== "string") {
          if (n &lt; 2) value = "";
          for (priority in name) this.each(d3_selection_style(priority, name[priority], value));
          return this;
        }
        if (n &lt; 2) return d3_window.getComputedStyle(this.node(), null).getPropertyValue(name);
        priority = "";
      }
      return this.each(d3_selection_style(name, value, priority));
    };
  </code></pre>
  
  <p>The relevant CSS part is this:</p>
  
  <pre><code>svg text {
    font: normal 12px Arial;
  }
  </code></pre>
  
  <p>I added the following "printpoint" <em>(conditional breakpoint, which never stops, but prints out values)</em> on the line with the <code>getComputedStyle</code> call:</p>
  
  <pre><code>name == 'font-size' &amp;&amp;
  (
      console.log(this.node()) ||
      console.log( d3_window.getComputedStyle(this.node(), null) ) ||
      console.log( d3_window.getComputedStyle(this.node(), null).getPropertyValue(name) ) || 
      console.log( window.getMatchedCSSRules(this.node()) )
  )
  </code></pre>
  
  <p>The result is really weird. If the chart is correct, I find this in the console for correct layout:
  <img src="https://i.stack.imgur.com/hC5Cp.png" alt="enter image description here"></p>
  
  <p>And this for wrong layout:
  <img src="https://i.stack.imgur.com/ZQEMK.png" alt="enter image description here"></p>
  
  <p>This is the DOM for the wrong layout:</p>
  
  <pre><code>&lt;svg id="ujdh846lhqubvvlg2jbh16s6q9" width="1896" height="361"&gt;
      &lt;g class="nvd3 nv-wrap nv-pieChart" transform="translate(20,90)"&gt;
          &lt;g&gt;
              &lt;g class="nv-pieWrap"&gt;
                  &lt;g class="nvd3 nv-wrap nv-pie nv-chart-6450" transform="translate(0,0)"&gt;
                      &lt;g&gt;
                          &lt;g class="nv-pie" transform="translate(928,125.5)"&gt;
                              &lt;g class="nv-slice" fill="#1f77b4" stroke="#1f77b4"&gt;
                                  &lt;path d="M6.1477269317197136e-15,-100.4A100.4,100.4 0 0,1 65.39779726531111,76.17931551835622L0,0Z"/&gt;
                              &lt;/g&gt;&lt;g class="nv-slice" fill="#ff7f0e" stroke="#ff7f0e"&gt;
                                  &lt;path d="M65.39779726531111,76.17931551835622A100.4,100.4 0 0,1 -90.13957577290248,44.21557281638648L0,0Z"/&gt;
                              &lt;/g&gt;&lt;g class="nv-slice" fill="#2ca02c" stroke="#2ca02c"&gt;
                                  &lt;path d="M-90.13957577290248,44.21557281638648A100.4,100.4 0 0,1 -94.15031406756688,-34.869447385619964L0,0Z"/&gt;
                              &lt;/g&gt;&lt;g class="nv-slice" fill="#d62728" stroke="#d62728"&gt;
                                  &lt;path d="M-94.15031406756688,-34.869447385619964A100.4,100.4 0 0,1 -1.844318079515914e-14,-100.4L0,0Z"/&gt;
                              &lt;/g&gt;
                          &lt;/g&gt;&lt;g class="nv-pieLabels" transform="translate(928,125.5)"&gt;
                              &lt;g class="nv-label" transform="translate(112.95224431711586,-41.8329177051586)"&gt;
                                  &lt;rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/&gt;
                                  &lt;text style="text-anchor: middle; fill: rgb(0, 0, 0);"&gt;alma&lt;/text&gt;
                              &lt;/g&gt;&lt;g class="nv-label" transform="translate(-24.246406744679096,117.98438142386297)"&gt;
                                  &lt;rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/&gt;
                                  &lt;text style="text-anchor: middle; fill: rgb(0, 0, 0);"&gt;korte&lt;/text&gt;
                              &lt;/g&gt;&lt;g class="nv-label" transform="translate(-120.2954032887533,6.100692386622933)"&gt;
                                  &lt;rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/&gt;
                                  &lt;text style="text-anchor: middle; fill: rgb(0, 0, 0);"&gt;szilva&lt;/text&gt;
                              &lt;/g&gt;&lt;g class="nv-label" transform="translate(-68.80925650816773,-98.86095649341644)"&gt;
                                  &lt;rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/&gt;
                                  &lt;text style="text-anchor: middle; fill: rgb(0, 0, 0);"&gt;paradicsom&lt;/text&gt;
                              &lt;/g&gt;
                          &lt;/g&gt;
                      &lt;/g&gt;
                  &lt;/g&gt;
              &lt;/g&gt;&lt;g class="nv-legendWrap" transform="translate(0,-90)"&gt;
                  &lt;g class="nvd3 nv-legend" transform="translate(0,5)"&gt;
                      &lt;g transform="translate(NaN,5)"&gt;
                          &lt;g class="nv-series" transform="translate(0,5)"&gt;
                              &lt;circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(31, 119, 180); stroke: rgb(31, 119, 180);"/&gt;
                              &lt;text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8"&gt;alma&lt;/text&gt;
                          &lt;/g&gt;&lt;g class="nv-series" transform="translate(0,25)"&gt;
                              &lt;circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(255, 127, 14); stroke: rgb(255, 127, 14);"/&gt;
                              &lt;text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8"&gt;korte&lt;/text&gt;
                          &lt;/g&gt;&lt;g class="nv-series" transform="translate(0,45)"&gt;
                              &lt;circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(44, 160, 44); stroke: rgb(44, 160, 44);"/&gt;
                              &lt;text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8"&gt;szilva&lt;/text&gt;
                          &lt;/g&gt;&lt;g class="nv-series" transform="translate(0,65)"&gt;
                              &lt;circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(125, 0, 0); stroke: rgb(125, 0, 0);"/&gt;
                              &lt;text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8"&gt;paradicsom&lt;/text&gt;
                          &lt;/g&gt;
                      &lt;/g&gt;
                  &lt;/g&gt;
              &lt;/g&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>How can it be that once my SVG/Text has no font-size in computed style BUT it always has the font-size in one of the applied CSS rules?</strong></p>
  
  <p><strong>Is there some known bug in Chrome for this?</strong></p>
  
  <p>Note, that in Firefox everything works fine.</p>
  
  <h2>Environment Details</h2>
  
  <p>Chrome 39.0.2171.71 (64-bit)</p>
  
  <p>Kubuntu 3.13.0-29-generic</p>
  
  <h2>Update</h2>
  
  <p>I thought I am affected by this "behaviour" of the browsers : <a href="https://stackoverflow.com/questions/7389069/console-log-object-at-current-state">How can I change the default behavior of console.log? (*Error console in safari, no add-on*)</a> . This means that the console does not show the state of the object at the time point of the log entry, but refers to the current state. So I made a small experiment here: <a href="http://jsfiddle.net/hdv7ty6L/" rel="nofollow noreferrer">http://jsfiddle.net/hdv7ty6L/</a> . I change the class from javascript and I check if the rule list changes in the console or not. And it seems to be a snapshot of the rule list. <strong>So still no clue, what is wrong here :)</strong></p>
  
  <p>Test code:</p>
  
  <pre><code>document.body.className='redbody';
  console.log(window.getMatchedCSSRules(document.body));
  document.body.className='bluebody';
  console.log("Class changed");
  console.log(window.getMatchedCSSRules(document.body));
  </code></pre>
  
  <p>Console output:
  <img src="https://i.stack.imgur.com/KVoQo.png" alt="enter image description here"></p>
  
  <h2>Update 2</h2>
  
  <p>The problem happens also if the CSS is completely static and not loaded dynamically.</p>
  
  <h2>Update 3</h2>
  
  <p>I tried to reproduce it in a jsfiddle: dynamicly created SVG inside a div with asynchronously created chart (onclick of a button). The error does not show up unfortunately. <a href="https://jsfiddle.net/ewsb4d9k/1/" rel="nofollow noreferrer">https://jsfiddle.net/ewsb4d9k/1/</a></p>