[LiveHTML] Inline SVG with <font-face> breaks LiveHTML
#5101
Comments
|
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 |
|
It's probably because of the hyphen in the |
|
The shadow DOM will uses hyphen tag names (e.g. |
|
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 |
|
@TomMalbran From what I can see in the Shadow DOM spec, it looks like |
|
Looking at the SVG portion in the HTML5 spec, they don't reference So while it may be illegal in HTML5, it is mandatory for any |
|
Low priority to me |
|
@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. |
|
So what's wrong with the bad file? Live preview looks like this: |
|
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.) |
|
@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: Broken example: |
|
@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. |
|
@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. |
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:
The text was updated successfully, but these errors were encountered: