819999 - Live example is not working

Status: VERIFIED FIXED

(developer.mozilla.org Graveyard :: Editing, defect)

Description

[Jeremie Patonnier :Jeremie]

I found an odd bug with live examples.

I jsut create the following page : https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3

For some unknown reason, the rendering just fail like the CSS and the JavaScript part were not interpreted.

If I go to http://mdn.mozillademos.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3$samples/Change_states
and copy/past the source code in an HTML file on my computer, the file is interpreted as expected.

Very odd.

Comment 1

[Les Orchard [:lorchard]]

Not sure how you copied & pasted it, but it doesn't work for me when I download the HTML:

    https://dl.dropbox.com/u/2798055/lex.html

I ran this command in my Dropbox public folder:

    curl 'http://mdn.mozillademos.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3$samples/Change_states' > lex.html

Comment 2

[Les Orchard [:lorchard]]

Okay, if I view source and copy & paste from there, something seems to work:

https://dl.dropbox.com/u/2798055/lex2.html

No idea what the difference between these two are, though. Running a diff doesn't seem to turn up anything useful, and I don't see any useful errors in the console

Comment 3

[Jeremie Patonnier :Jeremie]

Yes, my point exactly :-/

And all browsers behave the same!

Comment 4

[Les Orchard [:lorchard]]

Okay, this is really weird:

https://mdn.mozillademos.org/en-US/docs/User:lmorchard/bug819999$samples/Change_states

I got this to work by dropping into the "source" view in CKEditor and pasting in the CSS as raw, unencoded text. Still not really sure what's going on here, but it looks like lots of  's are inserted by CKEditor and decoded into something that CSS parsers don't like on the other end. Lots of CSS parsing errors in the console.

Comment 5

[Jeremie Patonnier :Jeremie]

Ok, I found the issue \o/

If for some reason, you copy past some code in the wisiwig editor with unbreakable spaces, those spaces are turn into the html entity  

I removed the   entities (and use regular space instead) from my example and now, it works nicely.

Maybe the live example just need to be sanitize from those entities.

Comment 6

[Les Orchard [:lorchard]]

https://github.com/mozilla/kuma/pull/754

Comment 7

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/98a3b1c02e95ec34f81b93cf6d3c13cc86778085
fix bug 819999: Code sample extraction replaces non-breaking spaces with normal spaces

https://github.com/mozilla/kuma/commit/390786aba547443d46335af7de1d2c8283f0dd43
Merge pull request #754 from lmorchard/819999-code-sample-nbsps

fix bug 819999: Code sample extraction replaces non-breaking spaces with normal spaces

Comment 8

[Stephen Donner [:stephend] Not actively reading bugmail]

Looks good on https://developer.allizom.org/en-US/docs/User:lmorchard/bug819999; see screenshot.

Comment 9

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Post-fix screenshot

Comment 10

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED live on https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3