title: overflow-x not working on firefox; works on Chrome/edge
body: <p>I'm trying to do dot leaders in a table cell. I've got it working on Chrome and on Edge, but Firefox isn't properly truncating the leader. Here is a cut-down version showing the problem. On Chrome/Edge, I see <strong>1928.......|1,109|</strong> correctly, while on Firefox the dots just keep going right over the next table cell and out the end.  (Firefox 50.1.0; Chrome 55.0.2883.87)
  This is based on the example <a href="https://www.w3.org/Style/Examples/007/leaders.en.html" rel="nofollow noreferrer">https://www.w3.org/Style/Examples/007/leaders.en.html</a></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;
          td.leader-dots {
            max-width:40em;
            overflow-x:hidden;
            background:green;
          }
          td.leader-dots::after {
            float:left;
            width:0;
            white-space:nowrap;
            content: "..........................................................";
            background:red;
          }
          td.leader-dots span {
            background:yellow;
          }
  
          .tab1c1 { border-right: 1px solid black; }
          .tab1c2 { border-right: 1px solid black; }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;   
  
      &lt;table&gt;
      &lt;colgroup&gt;
      &lt;col span='1' style='width: 7em;'/&gt;
      &lt;col span='1' style='width: 0em;'/&gt;
      &lt;/colgroup&gt;
      &lt;tr&gt;
          &lt;td class='tab1c1 leader-dots'&gt;&lt;span&gt;1928&lt;/span&gt;&lt;/td&gt;
          &lt;td class='tab1c2'&gt;1,109&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>