Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

image within inline svg breaks system #129

Closed
jschoder opened this issue May 9, 2017 · 9 comments
Closed

image within inline svg breaks system #129

jschoder opened this issue May 9, 2017 · 9 comments

Comments

@jschoder
Copy link

jschoder commented May 9, 2017

I have a website with inline SVGs, some of them include a image-tag, which isn't an empty tag but a separate open and close tag. Your function Parser/DOMTreeBuilder.startTag just overrides image with img which doesn't allow a separate closing tag and therefore fails.

I totally get why img is identical to image in normal html. But the replacement shouldn't happen when the tag is inside an inline svg. For now I "fixed" the issue by uncommenting the image-img-replacement.

@goetas goetas added the bug label May 9, 2017
@goetas
Copy link
Member

goetas commented May 9, 2017

Does it mean that when we are in SVG mode, image should not be replaced by img ? is this in the HTML5 spec?

@goetas goetas removed the bug label May 9, 2017
goetas added a commit that referenced this issue May 9, 2017
@goetas
Copy link
Member

goetas commented May 9, 2017

@jschoder
Are you sure about this?

See 4b75717 that tries to reproduce the case you said, and as you can see on travis (https://travis-ci.org/Masterminds/html5-php/builds/230278543) the build is green

@MichaelRoosz
Copy link

MichaelRoosz commented Aug 18, 2017

<svg><image></image></svg>
This is the problematic case.

@goetas
Copy link
Member

goetas commented Aug 23, 2017

@MichaelHeerklotz and @jschoder can you point me to the docs where is specified that <svg><image/></svg> is not valid?

I've used the https://validator.w3.org/nu/#textarea validator, and the following document looks to be valid:

<!DOCTYPE html>
<html>
    <head>
        <title>foo</title>
    </head>
    <body>
        <svg>
            <image height="10"  width="10"/>
        </svg>
    </body>
</html>

Closing the issue because of it.

Feel free to comment, and if the issue looks still there, will re-open it.

@goetas goetas closed this as completed Aug 23, 2017
@MichaelRoosz
Copy link

MichaelRoosz commented Aug 23, 2017

<!DOCTYPE html>
<html>
    <head>
        <title>foo</title>
    </head>
    <body>
        <svg>
            <image height="10" width="10">
        </svg>
    </body>
</html>

html5-php: No errors
W3C Validator: Error: End tag svg did not match the name of the current open element (image).

<!DOCTYPE html>
<html>
    <head>
        <title>foo</title>
    </head>
    <body>
        <svg>
            <image height="10" width="10"/>
        </svg>
    </body>
</html>

html5-php: Line 0, Col 0: Could not find closing tag for image
W3C Validator: No errors

<!DOCTYPE html>
<html>
    <head>
        <title>foo</title>
    </head>
    <body>
        <svg>
            <image height="10" width="10"></image>
        </svg>
    </body>
</html>

html5-php: Line 0, Col 0: Could not find closing tag for image
W3C Validator: No errors

@goetas
Copy link
Member

goetas commented Aug 23, 2017

@MichaelHeerklotz which version are you using? see

public function testImageTagsInSvg()
and https://travis-ci.org/Masterminds/html5-php/builds/267601453

@MichaelRoosz
Copy link

@goetas latest branch 2.x from today. I check the errors with:

    $htmlParser = new \Masterminds\HTML5();
    $htmlDocument = $htmlParser->loadHTML($html);
    if ($htmlParser->hasErrors()) {
        var_dump($htmlParser->getErrors());
    }

@goetas goetas mentioned this issue Aug 25, 2017
@goetas
Copy link
Member

goetas commented Aug 25, 2017

fixed with #133

@mat-hew1
Copy link

The current version 2.7.5 still returns svg as text node:

<ul id="nav1" class="nav1main">
    <li>
        <a href="/" class="logo-image">
            &lt;svg id="logo-mobile"&gt;
                &lt;image href="logo-mobile.svg" width="100%" height="100%" /&gt;
            &lt;/svg&gt;
        </a>
    </li>
</ul>

Source:

<ul id="nav1" class="nav1main">
    <li>
        <a href="/" class="logo-image">
            <svg id="logo-mobile">
                <image href="logo-mobile.svg" width="100%" height="100%"></image>
            </svg>
        </a>
    </li>
</ul>

Equal, if image with separate closing tag or self-closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants