hyperHTML throws error with xlink:href interpolation in Testcafe

judge commented 5 years ago

Hello,

We use Testcafe to test our applications and after version 2.18.0 our SVG elements containing use (<use xlink:href="${variable}" ) throw error with hyperHTML. The tricky part is that it only fails if the page is loaded through Testcafe's proxy (https://github.com/DevExpress/testcafe-hammerhead). Here is a sample code you can try:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <svg style="display: none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <g id="icon">
        <rect x="0" y="0" width="10" height="10"></rect>
      </g>
    </defs>
  </svg>

  <div id="test"></div>

  <script src="https://cdn.jsdelivr.net/npm/hyperhtml@2.23.0/index.js"></script>
  <script>
    const icon = '#icon';
    const render = hyperHTML.bind(document.getElementById('test'));
    render`<svg class="${icon}" xmlns="http://www.w3.org/2000/svg"><use xlink:href=${icon}></use></svg>`;
  </script>
</body>
</html>

You need to load this page through Testcafe's proxy server: git clone https://github.com/DevExpress/testcafe-hammerhead.git cd testcafe-hammerhead npm install node node_modules/gulp/bin/gulp http-playground

This opens a playground page where you can specify the webpage to proxy. Enter the page URL and hit Proxy!.

The sample page uses the latest version of hyperHTML but the error is present since 2.19.0.

We know that this is a tricky error, we tried to debug it but maybe you'll know what change could cause this. 😢

Thanks in advance!

WebReflection commented 5 years ago

hammered.js is messing up with the layout so this has nothing to do with hyperHTML

the input

the mess caused by hammered js

from that time on I've no interest in this bug anymore, I think you should file an issue in hammered js

WebReflection commented 5 years ago

P.S. I think either hammered.js or your test cafe thing messes up with any href attribute

judge commented 5 years ago

Thanks for trying it out! It seems everything works fine if we use href instead of xlink:href (but we cannot use it because is Safari). 😞 I don't really know how should we reproduce this without hyperHTML to file an issue for the Testcafe guys. Do you have an idea?

WebReflection commented 5 years ago

just anyNode.innerHTML = '<svg class="-0.2%" xmlns="http://www.w3.org/2000/svg"><use xlink:href="-0.2%"></use></svg>' and see the corrupted outcome?

WebReflection / hyperHTML

hyperHTML throws error with xlink:href interpolation in Testcafe #329

the input

the mess caused by hammered js