See the original report in https://github.com/facebook/react/issues/10772#issuecomment-333242375.

The problem is that SVG is case sensitive, and so naïvely setting `tabIndex` and relying on insensitivity won't work with it.

The good news is it seems like `tabindex` is the only valid [SVG attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) with this problem. We just missed it because it applies both to HTML and SVG.

I think the fix is to add it back to the whitelist. 
itRenders('relevant styles with px', async render => {
        const e = await render(
          <div
            style={{
              left: 0,
              margin: 16,
              opacity: 0.5,
              padding: '4px',
            }}
          />,
        );
        expect(e.style.left).toBe('0px');
        expect(e.style.margin).toBe('16px');
        expect(e.style.opacity).toBe('0.5');
        expect(e.style.padding).toBe('4px');
      });
      itRenders('custom properties', async render => {
        const e = await render(<div style={{'--foo': 5}} />);
        
        
        expect(e.style.Foo).toBe('5');
      });
      itRenders('no undefined styles', async render => {
        const e = await render(
          <div style={{color: undefined, width: '30px'}} />,
        );
        expect(e.style.color).toBe('');
        expect(e.style.width).toBe('30px');
      });
      itRenders('no null styles', async render => {