search

brackets-archive / bracketsIssues

Archive of issues in brackets.
0 stars 0 forks source link

[CLOSED] [LiveHTML] Inline SVG with `<font-face>` breaks LiveHTML #4699

Open core-ai-bot opened 3 years ago

core-ai-bot commented 3 years ago

Issue by uptownnickbrown Friday Sep 06, 2013 at 21:35 GMT Originally opened as https://github.com/adobe/brackets/issues/5101

I am unable to get the new LiveHTML feature to work for some pages with Inline SVG content, as I mentioned here on the Google Group.

However, in prepping a sample file that doesn't work I discovered that some pages with SVG content do work. I haven't yet been able to figure out a solid pattern. Here are two sample files:

<!DOCTYPE html>
<html>
    <head>
        <title>Working Inline SVG Example</title>
    </head>
    <body>
        <div>
            <h1>Look at this cool SVG chart</h1>
        </div>
        <div class="logo-main">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" class="logo-img-layer">
                <g id="grid" opacity="0.45" fill="none" stroke-miterlimit="10">
                    <g stroke="#CCCCCC">
                        <line class="gridline" x1="20.8" y1="208.8" x2="229.2" y2="208.8" />
                        <line class="gridline" x1="208.3" y1="21.3" x2="208.3" y2="229.7" />
                        <line class="gridline" x1="41.7" y1="21.3" x2="41.7" y2="229.7" />
                        <line class="gridline" x1="20.8" y1="42" x2="229.2" y2="42" />
                    </g>
                    <g stroke="#999999">
                        <line class="gridline" x1="20.8" y1="188" x2="229.2" y2="188" />
                        <line class="gridline" x1="20.8" y1="63" x2="229.2" y2="63" />
                        <line class="gridline" x1="187.5" y1="21.3" x2="187.5" y2="229.7" />
                        <line class="gridline" x1="62.5" y1="21.3" x2="62.5" y2="229.7" />
                    </g>
                    <g stroke="#666666">
                        <line class="gridline" x1="20.8" y1="167.2" x2="229.2" y2="167.2" />
                        <line class="gridline" x1="20.8" y1="83.8" x2="229.2" y2="83.8" />
                        <line class="gridline" x1="166.7" y1="21.3" x2="166.7" y2="229.7" />
                        <line class="gridline" x1="83.3" y1="21.3" x2="83.3" y2="229.7" />
                    </g>
                    <g stroke="#333333">
                        <line class="gridline" x1="20.8" y1="146.3" x2="229.2" y2="146.3" />
                        <line class="gridline" x1="20.8" y1="104.7" x2="229.2" y2="104.7" />
                        <line class="gridline" x1="145.8" y1="21.3" x2="145.8" y2="229.7" />
                        <line class="gridline" x1="104.2" y1="21.3" x2="104.2" y2="229.7" />
                    </g>
                </g>
                <g id="fill-region">
                    <path fill="#999999" d="M177.08,125v0.5h-20.66V125l-0.12-73.61c7.391-3.49,14.271-4.47,20.65-3.45v0.02L177.08,125z" />
                </g>
                <g id="partitions" fill="none" stroke="#666666" stroke-linecap="round" stroke-miterlimit="10">
                    <g class="partition">
                        <line x1="115.1" y1="94.3" x2="115.1" y2="95.8" />
                        <line stroke-dasharray="3.0741,2.0494" x1="115.1" y1="97.9" x2="115.2" y2="122.5" />
                        <line x1="115.2" y1="123.5" x2="115.2" y2="125" />
                    </g>
                    <g class="partition">
                        <line x1="135.5" y1="68.7" x2="135.5" y2="70.2" />
                        <line stroke-dasharray="3.0769,2.0513" x1="135.5" y1="72.2" x2="135.6" y2="122.5" />
                        <line x1="135.6" y1="123.5" x2="135.6" y2="125" />
                    </g>
                    <g class="partition">
                        <line x1="156.3" y1="51.4" x2="156.3" y2="52.9" />
                        <line stroke-dasharray="2.9421,1.9614" x1="156.3" y1="54.9" x2="156.4" y2="122.5" />
                        <line x1="156.4" y1="123.5" x2="156.4" y2="125" />
                    </g>
                    <g class="partition">
                        <line x1="177" y1="48" x2="177" y2="49.5" />
                        <line stroke-dasharray="3.0848,2.0566" x1="177" y1="51.5" x2="177.1" y2="122.5" />
                        <line x1="177.1" y1="123.5" x2="177.1" y2="125" />
                    </g>
                    <g class="partition">
                        <line x1="197.9" y1="60" x2="197.9" y2="61.5" />
                        <line stroke-dasharray="2.9986,1.9991" x1="197.9" y1="63.5" x2="198" y2="122.5" />
                        <line x1="198" y1="123.5" x2="198" y2="125" />
                    </g>
                    <g class="partition">
                        <line x1="218.4" y1="98" x2="218.4" y2="99.5" />
                        <line stroke-dasharray="3.2689,2.1793" x1="218.4" y1="101.7" x2="218.5" y2="122.4" />
                        <line x1="218.5" y1="123.5" x2="218.5" y2="125" />
                    </g>
                    <g class="partition">
                        <line x1="93.4" y1="114.1" x2="93.4" y2="115.6" />
                        <line stroke-dasharray="3.3923,2.2615" x1="93.4" y1="117.8" x2="93.5" y2="122.4" />
                        <line x1="93.5" y1="123.5" x2="93.5" y2="125" />
                    </g>
                </g>
                <g class="axis">
                    <line fill="none" stroke="#333333" stroke-miterlimit="10" x1="8.2" y1="125.5" x2="241.8" y2="125.5" />
                    <g>
                        <path fill="#333333" d="M9.947 125.5l2.191-3.603l-0.123-0.082l-5.875 2.333c-2.047 0.45-4.094 0.9-6.141 1.4 c2.047 0.5 4.1 0.9 6.1 1.352l5.875 2.333l0.123-0.062L9.947 125.5z" />
                    </g>
                    <g>
                        <path fill="#333333" d="M240.053 125.5l-2.191-3.603l0.123-0.082l5.875 2.333c2.047 0.5 4.1 0.9 6.1 1.4 c-2.047 0.45-4.094 0.9-6.141 1.352l-5.875 2.333l-0.123-0.062L240.053 125.5z" />
                    </g>
                </g>
                <g class="axis">
                    <g>
                        <line fill="none" stroke="#333333" stroke-miterlimit="10" x1="125" y1="8.7" x2="125" y2="242.3" />
                        <g>
                            <path fill="#333333" d="M125 10.447l3.604 2.191l0.081-0.123l-2.333-5.875C125.901 4.6 125.5 2.5 125 0.5 c-0.45 2.047-0.9 4.094-1.351 6.141l-2.333 5.875l0.062 0.123L125 10.447z" />
                        </g>
                        <g>
                            <path fill="#333333" d="M125 240.553l3.604-2.191l0.081 0.123l-2.333 5.875c-0.451 2.047-0.901 4.094-1.352 6.1 c-0.45-2.047-0.9-4.094-1.351-6.141l-2.333-5.875l0.062-0.123L125 240.553z" />
                        </g>
                    </g>
                </g>
                <g>
                    <path id="chart-line" fill="none" stroke="#333333" stroke-miterlimit="10" d="M229.336 143.533c-4.223-59.355-46.486-152.46-114.507-50.558 c-16.366 24.518-56.7 39.076-89.923 47.2" />
                </g>
            </svg>
            <div>
                <h1>Wasn't that great?</h1>
            </div>
        </div>
    </body>

</html>
<!DOCTYPE html>
<html>
    <head>
        <title>Broken Inline SVG Example</title>
    </head>
    <body>
        <div>
            <h1>Look at this tiny little SVG chart</h1>
        </div>
        <div class="logo-tiny">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                <font horiz-adv-x="1000">
                    <font-face font-family="BebasNeue" units-per-em="1000" underline-position="-110" underline-thickness="50" />
                    <missing-glyph horiz-adv-x="733" d="M345,317C368,317 381,345 387,345C389,345 397,341 404,341C427,341 442,365 442,387C442,394 441,399 438,404C451,403 454,382 454,370l0,-24C454,342 456,339 460,339C483,339 503,317 504,297C495,309 444,317 377,317C368,317 357,313 347,313C337,313 333,314 323,314C274,314 212,300 212,287C212,278 234,275 240,275C247,275 255,271 264,271C284,271 316,283 355,283C433,283 427,276 465,276C476,276 487,285 491,285C493,285 503,287 506,291C504,266 501,264 490,257C488,256 488,254 488,254C488,253 490,252 491,252C495,252 503,258 504,260C498,215 479,176 442,143l73,0C525,197 540,275 540,353C540,481 503,607 350,607C212,607 174,491 174,369C174,283 194,192 209,143l55,0C240,168 224,206 216,247C217,246 224,242 228,242C230,242 231,243 231,246C231,246 209,271 209,280C209,295 209,309 228,320C258,342 251,380 269,398C264,390 261,375 261,363C261,352 271,338 282,338C293,338 300,342 307,342C316,342 324,317 345,317M733,291C695,370 617,430 593,435C574,579 523,714 336,714C190,714 119,562 113,427C92,404 25,352 0,291l0,-148C24,183 81,306 119,327C119,263 121,203 138,143l47,0C170,188 156,268 156,353C156,502 198,661 346,661C520,661 559,497 559,342C559,266 551,195 543,143l42,0C593,187 600,223 600,271C600,291 598,306 597,320C626,320 708,198 733,143M345,503C330,493 312,486 296,486C264,486 248,502 247,502C246,502 244,501 244,498C244,497 247,493 250,491C247,476 226,461 209,452C225,517 274,570 351,570C434,570 472,539 490,490C472,497 450,501 438,501C439,502 446,507 446,509C446,510 444,511 442,511C439,511 423,494 387,494C359,494 347,511 344,511C343,511 342,510 342,509C342,507 344,504 345,503M371,430l0,-14C371,411 372,403 378,403C387,403 391,416 404,416C419,416 426,402 426,390C426,373 414,355 400,355C395,355 387,362 381,362C374,362 368,341 344,341C326,341 318,368 312,368C305,368 304,355 285,355C278,356 274,362 274,369C274,387 285,404 303,404C312,404 318,398 324,398C335,398 339,476 357,476C364,476 371,441 371,430M507,397C508,371 510,346 510,318C499,348 468,352 468,360C468,374 464,411 434,411C426,420 416,425 403,425C399,425 395,425 388,423C381,423 383,458 368,480C372,478 378,477 383,476C383,473 381,469 381,467C381,444 406,425 434,425C461,425 493,437 493,468l5,-3C503,446 504,420 507,397M383,310C423,310 485,300 485,293C485,291 475,284 465,284C435,284 391,291 355,291C323,291 302,278 257,278C251,278 237,278 237,288C237,293 289,309 322,309C329,309 337,306 346,306C357,306 381,310 383,310M267,413C303,413 328,444 329,474l13,4C318,449 320,417 308,417C300,417 292,415 285,412C261,409 250,394 247,371C243,345 219,339 205,318C202,346 202,370 202,396C202,409 202,423 206,439C210,440 216,441 221,444C223,430 241,413 267,413M419,465C431,465 436,477 438,486C454,486 481,480 481,469C481,451 454,439 437,439C418,439 391,448 391,463C391,467 395,478 403,478C404,473 408,465 419,465M267,427C252,427 237,435 234,451C241,455 247,458 252,463C257,458 262,458 267,458C274,458 282,463 285,472C292,471 297,471 303,471l9,0C313,468 313,465 313,462C313,444 285,427 267,427M266,288C300,295 336,297 373,297C403,297 433,296 461,292C462,292 464,293 464,295C464,301 391,303 371,303C347,303 264,300 264,291C264,289 265,288 266,288M305,262C305,259 307,258 309,258C315,258 323,264 331,264C342,264 358,265 377,265C385,265 389,261 397,261C399,261 399,262 399,264C399,272 369,272 368,272C355,272 305,271 305,262M417,473C413,473 410,475 410,480C415,482 421,486 426,486C426,486 426,484 426,483C426,477 422,473 417,473M266,466C263,466 260,467 259,469C263,473 265,477 265,479C269,477 272,476 276,475C274,469 270,466 266,466M323,34l14,0l15,48l-8,-82l21,0l13,125l-26,0l-19,-60l-5,60l-25,0l-14,-125l21,0l8,82M65,22l9,82C75,118 68,125 56,125l-37,0l-12,-125l37,0C56,0 64,7 65,22M280,44l6,60C287,118 280,125 268,125l-37,0l-13,-125l23,0l3,23l6,0l7,-23l21,0l-8,27C275,30 279,36 280,44M182,0l23,0l11,104C217,118 210,125 198,125l-17,0C169,125 160,118 159,104l-11,-104l21,0l3,23l14,0M414,0l21,0l13,104C449,118 440,125 428,125l-15,0C401,125 390,118 389,104l-11,-104l23,0l3,23l13,0M590,0l23,0l3,23l14,0C642,23 653,30 654,44l6,60C661,118 654,125 640,125l-35,0M112,0l22,0l14,125l-23,0l-9,-83l-13,0l9,83l-21,0l-15,-125l23,0l3,23l13,0M533,125l-8,-81C524,31 530,24 540,23l-9,-23l23,0l9,23C573,24 581,31 582,44l8,81l-21,0l-8,-79C561,43 559,42 556,42l-5,0C547,42 547,43 547,46l9,79M509,106l13,0l2,19l-49,0l-2,-19l13,0l-11,-106l23,0M52,102l-8,-80C44,20 43,18 41,18l-11,0l10,88l9,0C52,106 53,105 52,102M636,102l-5,-56C631,43 629,42 626,42l-9,0l7,64l9,0C636,106 637,105 636,102M173,42l6,60C179,105 181,106 185,106l6,0C194,106 194,105 194,102l-7,-60M264,102l-5,-56C259,43 257,42 254,42l-9,0l7,64l9,0C264,106 264,105 264,102M405,42l6,60C411,105 413,106 416,106l5,0C424,106 424,105 424,102l-6,-60M711,57l-22,0l5,49l28,0l2,19l-49,0l-13,-125l49,0l2,18l-28,0l2,21l22,0z" />
                    <glyph unicode="C" horiz-adv-x="386" d="M255,261l0,-100C255,111 233,93 198,93C163,93 141,111 141,161l0,378C141,589 163,608 198,608C233,608 255,589 255,539l0,-75l104,0l0,68C359,644 303,708 195,708C87,708 31,644 31,532l0,-364C31,56 87,-8 195,-8C303,-8 359,56 359,168l0,93z" />
                    <glyph unicode="G" horiz-adv-x="390" d="M205,290l50,0l0,-129C255,111 233,93 198,93C163,93 141,111 141,161l0,378C141,589 163,608 198,608C233,608 255,589 255,539l0,-75l104,0l0,68C359,644 303,708 195,708C87,708 31,644 31,532l0,-364C31,56 87,-8 195,-8C303,-8 359,56 359,168l0,222l-154,0z" />
                </font>
                <line opacity="0.25" fill="none" stroke="#CCCCCC" stroke-width="0.5" stroke-miterlimit="10" x1="4.168" y1="41.712" x2="45.893" y2="41.712" />
                <line opacity="0.25" fill="none" stroke="#999999" stroke-width="0.5" stroke-miterlimit="10" x1="4.168" y1="37.545" x2="45.893" y2="37.545" />
                <line opacity="0.25" fill="none" stroke="#666766" stroke-width="0.5" stroke-miterlimit="10" x1="4.168" y1="33.377" x2="45.893" y2="33.377" />
                <line opacity="0.25" fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" x1="4.168" y1="29.197" x2="45.893" y2="29.197" />
                <g>
                    <g>
                        <line fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" x1="2.446" y1="25.03" x2="47.614" y2="25.03" />
                        <g>
                            <path fill="#333333" d="M2.984,25.03l0.657-1.081l-0.037-0.024l-1.762,0.7C1.228,24.76,0.614,24.895,0,25.03
                c0.614,0.135,1.228,0.27,1.842,0.405l1.762,0.7l0.037-0.018L2.984,25.03z" />
                        </g>
                        <g>
                            <path fill="#333333" d="M47.075,25.03l-0.657-1.081l0.037-0.024l1.763,0.7c0.613,0.135,1.228,0.27,1.842,0.405
                c-0.614,0.135-1.229,0.27-1.842,0.405l-1.763,0.7l-0.037-0.018L47.075,25.03z" />
                        </g>
                    </g>
                </g>
                <line opacity="0.25" fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" x1="4.168" y1="20.862" x2="45.893" y2="20.862" />
                <line opacity="0.25" fill="none" stroke="#666766" stroke-width="0.5" stroke-miterlimit="10" x1="4.168" y1="16.682" x2="45.893" y2="16.682" />
                <line opacity="0.25" fill="none" stroke="#999999" stroke-width="0.5" stroke-miterlimit="10" x1="4.168" y1="12.515" x2="45.893" y2="12.515" />
                <line opacity="0.25" fill="none" stroke="#CCCCCC" stroke-width="0.5" stroke-miterlimit="10" x1="41.712" y1="4.168" x2="41.712" y2="45.893" />
                <line opacity="0.25" fill="none" stroke="#999999" stroke-width="0.5" stroke-miterlimit="10" x1="37.545" y1="4.168" x2="37.545" y2="45.893" />
                <line opacity="0.25" fill="none" stroke="#666766" stroke-width="0.5" stroke-miterlimit="10" x1="33.377" y1="4.168" x2="33.377" y2="45.893" />
                <line opacity="0.25" fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" x1="29.197" y1="4.168" x2="29.197" y2="45.893" />
                <g>
                    <g>
                        <line fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" x1="25.03" y1="2.446" x2="25.03" y2="47.614" />
                        <g>
                            <path fill="#333333" d="M25.03,2.984l1.081,0.657l0.024-0.037l-0.7-1.762C25.3,1.228,25.165,0.614,25.03,0
                c-0.135,0.614-0.27,1.228-0.405,1.842l-0.7,1.762l0.019,0.037L25.03,2.984z" />
                        </g>
                        <g>
                            <path fill="#333333" d="M25.03,47.075l1.081-0.657l0.024,0.037l-0.7,1.763c-0.135,0.613-0.27,1.228-0.405,1.842
                c-0.135-0.614-0.27-1.229-0.405-1.842l-0.7-1.763l0.019-0.037L25.03,47.075z" />
                        </g>
                    </g>
                </g>
                <line opacity="0.25" fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" x1="20.862" y1="4.168" x2="20.862" y2="45.893" />
                <line opacity="0.25" fill="none" stroke="#666766" stroke-width="0.5" stroke-miterlimit="10" x1="16.682" y1="4.168" x2="16.682" y2="45.893" />
                <line opacity="0.25" fill="none" stroke="#999999" stroke-width="0.5" stroke-miterlimit="10" x1="12.515" y1="4.168" x2="12.515" y2="45.893" />
                <line opacity="0.25" fill="none" stroke="#CCCCCC" stroke-width="0.5" stroke-miterlimit="10" x1="8.348" y1="4.168" x2="8.348" y2="45.893" />
                <line opacity="0.25" fill="none" stroke="#CCCCCC" stroke-width="0.5" stroke-miterlimit="10" x1="4.168" y1="8.31" x2="45.893" y2="8.31" />
                <text transform="matrix(1 0 0 1 8.8027 21.8618)" fill="#333333" font-family="'BebasNeue'" font-size="24.9323">C</text>
                <text transform="matrix(0.9762 0 0 1 31.5537 45.5137)" fill="#333333" font-family="'BebasNeue'" font-size="25.0541">G</text>
            </svg>
            <div>
                <h1>What's up with that?</h1>
            </div>
        </div>
    </body>
</html>
core-ai-bot commented 3 years ago

Comment by peterflynn Saturday Sep 07, 2013 at 01:06 GMT

I've boiled it down to just the following:

<!DOCTYPE html>
<html>
    <body>
        <div>
            <h1>Look at this tiny little SVG chart</h1>
        </div>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                <font horiz-adv-x="1000">
                    <font-face font-family="BebasNeue" units-per-em="1000" underline-position="-110" underline-thickness="50" />
                </font>
            </svg>
        </div>
    </body>
</html>

Perhaps w're attempting to treat the <font> tag as the span-like regular HTML tag?

core-ai-bot commented 3 years ago

Comment by njx Saturday Sep 07, 2013 at 01:15 GMT

It's probably because of the hyphen in the font-face tag name--we don't consider hyphens legal in tag names. My read of the HTML5 spec is that they're not legal (it says that tag names must consist of alphanumeric characters), but it could be that they're legal inside SVG blocks. In any case, it would be trivial to fix if we wanted to consider it legal.

core-ai-bot commented 3 years ago

Comment by TomMalbran Saturday Sep 07, 2013 at 01:30 GMT

The shadow DOM will uses hyphen tag names (e.g. x-tab), although I think these need to always start with an x.

core-ai-bot commented 3 years ago

Comment by peterflynn Saturday Sep 07, 2013 at 01:33 GMT

Yeah, hyphens are definitely illegal in HTML 5.

It's unclear whether the spec allows hyphens in embedded SVG content, but my reading suggests it is still not allowed: "Foreign elements whose start tag is not marked as self-closing can have text, character references, CDATA sections, other elements, and comments, but the text must not contain the character "<" (U+003C) or an ambiguous ampersand." (where the word "elements" links back to the definition above, which says only alphanumeric chars.

The W3C validator seems to accept a hyphenated tag inside SVG, but it isn't clear whether it's even checking tag name validity -- outside SVG blocks, it gives the same generic "Content model for element div: Flow content" error for every unknown tag (whether <foo> or <foo-bar>). It doesn't seem to halt on the first error though, and it doesn't have any other complains about <foo-bar>, so my guess is it's not validating the char composition of tag names at all.

core-ai-bot commented 3 years ago

Comment by peterflynn Saturday Sep 07, 2013 at 01:38 GMT

@TomMalbran From what I can see in the Shadow DOM spec, it looks like x- is only used in CSS selectors, never for actual existent DOM nodes... but I haven't read it in huge detail.

core-ai-bot commented 3 years ago

Comment by uptownnickbrown Saturday Sep 07, 2013 at 01:54 GMT

Looking at the SVG portion in the HTML5 spec, they don't reference font-face (or other SVG elements with hyphens in the tag name) specifically. However, in the version of the SVG spec they do reference, this is what they have to say: "Each 'font' element must have a 'font-face' child element which describes various characteristics of the font."

So while it may be illegal in HTML5, it is mandatory for any <font> styling functionality in inline SVG. Now maybe their intention is simply that font-face info should solely be included via an external CSS @font-face declaration?

core-ai-bot commented 3 years ago

Comment by njx Tuesday Sep 10, 2013 at 17:19 GMT

Low priority to me

core-ai-bot commented 3 years ago

Comment by peterflynn Friday Sep 13, 2013 at 08:53 GMT

@TomMalbran Oops, looks like I was wrong about web components. I'm sitting in a CSSConf talk right now where I learned that there will indeed be hyphenated custom tag names -- it's just in the web components spec, not the shadow DOM spec.

core-ai-bot commented 3 years ago

Comment by couzteau Tuesday Sep 17, 2013 at 23:02 GMT

So what's wrong with the bad file? Live preview looks like this: screen shot 2013-09-17 at 3 55 53 pm

core-ai-bot commented 3 years ago

Comment by njx Wednesday Sep 18, 2013 at 17:18 GMT

I think the issue is that it doesn't update live as you type because it doesn't parse the SVG properly. (I haven't tried it myself though.)

core-ai-bot commented 3 years ago

Comment by uptownnickbrown Thursday Sep 19, 2013 at 18:37 GMT

@njx - exactly right. Live Preview works, LiveHTML does not. So you don't get auto text updating, or element highlighting when you are working on an element in Brackets.

Working example: screen shot 2013-09-19 at 2 36 22 pm

Broken example: screen shot 2013-09-19 at 2 33 53 pm

core-ai-bot commented 3 years ago

Comment by njx Friday Oct 25, 2013 at 00:17 GMT

@uptownnickbrown - we're now allowing hyphens in tag names; curious if it fixes your problem in this bug. Let us know what happens for you in sprint 33.

core-ai-bot commented 3 years ago

Comment by uptownnickbrown Sunday Nov 10, 2013 at 00:45 GMT

@njx - it's still not quite working.

It seems like the initial parse is correct, so if you select an element in Brackets right after launching Live Preview, you'll see the correct element highlight in the browser.

But if you make any changes, they aren't reflected in the browser correctly - the behavior is similar to #5058.

core-ai-bot commented 3 years ago

Comment by njx Sunday Nov 10, 2013 at 02:09 GMT

There is another issue you might be running into if you have empty tags (<foo/>) in your SVG: #5822. I have PR #5823 up to fix that.

(Note that even with this fix, editing the SVG itself won't update live--but editing the HTML around it should.)