case where formatting the document changes the elements hierarchy

thomasleveil commented 6 years ago

The following HTML document gets its element hierarchy altered when formatting the document

context

Version 1.21.1 Commit 79b44aa704ce542d8ca4a3cc44cfca566e7720f1 Date 2018-03-14T14:46:30.761Z Shell 1.7.9 Renderer 58.0.3029.110 Node 7.9.0 Architecture x64

Enabled extensions:

mrmlnc.vscode-attrs-sorter 2.1.0

test case

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>attrs-sorter bug</title>
</head>

<body>
    <svg viewBox="0 0 141 277.7">
        <defs>
            <filter id="svg-dropshadow" height="130%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
                <!-- stdDeviation is how much to blur -->
                <feOffset dx="2" dy="2" result="offsetblur" />
                <!-- how much to offset -->
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.8" />
                    <!-- slope is the opacity of the shadow -->
                </feComponentTransfer>
                <feMerge>
                    <feMergeNode />
                    <!-- this contains the offset blurred image -->
                    <feMergeNode in="SourceGraphic" />
                    <!-- this contains the element that the filter is applied to -->
                </feMerge>
            </filter>
        </defs>
        <circle cx="40" cy="40" r="20" style="filter:url(#svg-dropshadow); fill:#00cc00"></circle>
    </svg>
</body>

</html>

which displays the following svg image:

before_formatting_document

issue

When formatting the document, the HTML it changed to:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>attrs-sorter bug</title>
</head>

<body>
    <svg viewBox="0 0 141 277.7">
        <defs>
            <filter id="svg-dropshadow" height="130%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="3">
                <!-- stdDeviation is how much to blur -->
                <feOffset dx="2" dy="2" result="offsetblur">
                <!-- how much to offset -->
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.8">
                    <!-- slope is the opacity of the shadow -->
                </feFuncA></feComponentTransfer>
                <feMerge>
                    <feMergeNode>
                    <!-- this contains the offset blurred image -->
                    <feMergeNode in="SourceGraphic">
                    <!-- this contains the element that the filter is applied to -->
                </feMergeNode></feMergeNode></feMerge>
            </feOffset></feGaussianBlur></filter>
        </defs>
        <circle cx="40" cy="40" r="20" style="filter:url(#svg-dropshadow); fill:#00cc00"></circle>
    </svg>
</body>

</html>

which produces the following image: after_formatting_document

thomasleveil commented 6 years ago

Here's a smaller test case:

<html>
    <span/>
    <p/>
    <b/>
</html>

becomes:

<html>
    <span>
    <p>
    <b>
</b></p></span></html>

    it('Issue #42', function() {
        return htmlSorter('<html>\n  <div/>\n  <span/>\n</html>', {}).then((result) => {
            assert.equal(result.html, '<html>\n  <div/>\n  <span/>\n</html>');
        });
    });

thomasleveil commented 6 years ago

mrmlnc / vscode-attrs-sorter

case where formatting the document changes the elements hierarchy #42

context

test case

issue