Microsoft and IE9 New Features
in [JavaScript]
|
Prev: Microsoft expanding it use of jQuery & involvement with jQuery
Next: *PITIFUL* FAQ Entry - How can I access the client-side filesystem?(2010-03-15)
From: David Mark on 18 Mar 2010 08:41 kangax wrote: > On 3/17/10 10:08 AM, Richard Cornford wrote: >> On Mar 17, 1:22 pm, kangax wrote: >>> On 3/16/10 6:17 PM, Garrett Smith wrote: >>> >>>> A colleague of mine recently informed me with the emphatic title: >>>> "HTML5, CSS3, and omg finally AddEventListener in new IE9!" >>> >>>> With a link to: >>>> http://ie.microsoft.com/testdrive/ >>> >>> [...] >>> >>> I was testing preview of IE9 on Vista yesterday >> >> It is probably worth mentioning that this IE 9 preview will only >> install on Vista SP2 or later OSs and requires IE 8 to already be >> installed. > > Didn't know about SP2. I used one of the virtual machine images laying > around; going through closing dozens of popups while installing IE9 was > fun. > >> >>> and posted some of the >>> initial observations on twitter (http://twitter.com/kangax). >>> Most notable change IE can now actually render documents >>> served as application/xhtml+xml. >> <snip> > > I've created a simple test page > (<http://yura.thinkweb2.com/test.xhtml>), served as > "application/xhtml+xml". I don't have much time at the moment, so only > did few cursory checks. I'm also not familiar with XHTML DOM _at all_, > so please correct me if I did something stupid. Nope, good job. Served with the correct MIME type and rendered without exception (XHTML renderers are _very_ unforgiving of malformed markup). > >> >> Render, maybe, but the important question for us is does it create an >> XHTML DOM, or is it just accepting the content type and using its >> normal HTML DOM (that is, doing no more than tag soup-ing and error- >> correcting the mark-up)? > > Doesn't look like it. See below (input is marked with ">"). I don't think the results are conclusive. > >> Does the DOM have the namespace qualified DOM >> methods (e.g. - createElementNS -), > >> document.createElementNS; > > function createElementNS() { > [native code] > } > > (ditto for `getElementsByTagNameNS` and `createAttributeNS`) Yes, but HTML DOM's have those too. The last one is used to create SVG, which can be mixed in with HTML. > >> document.getElementsByTagNameNS( > 'http://www.w3.org/2000/svg', 'polygon')[0]; > > [object SVGPolygonElement] > >> document.getElementsByTagName('polygon')[0]; > > undefined Okay. > >> and if so, do they work correctly >> (can you create both XHTML and non-XHTM XML elements, for example). > > Apparently you can: > >> document.createElementNS( > 'http://www.w3.org/2000/svg', 'circle').namespaceURI; > > "http://www.w3.org/2000/svg" > >> document.createElement('circle').namespaceURI; > > "http://www.w3.org/1999/xhtml" > >> Are the element names case-sensitive (with the XHTML names lowercase)? > > Yes. > >> document.documentElement.tagName; > > "html" But what does this do:- document.getElementsByTagNameNS( 'http://www.w3.org/2000/svg', 'POLYGON')[0] Should also be undefined. > >> document.createElementNS( > 'http://www.w3.org/2000/svg', 'circle').tagName; > > "circle" > >> Does - document.wirte - work in that DOM? (where its not working is >> not standard, but is the norm with XHTML DOMs). If not, how does it >> fail (silently or not)? > > What would be a good test for this? Try calling that method. It will throw an exception in most XHTML DOM's (if it is available at all). > >> If we have a situation where all IE is going to do is accept the >> content type, but still treat the result as (tag soup) HTML then the >> result will be the worst of all possible worlds. > > Fortunately, this doesn't seem to be the case. I see that IE renders > embedded SVG more or less properly (on the test page, it fails to render > shape stroke properly; apparently setting width to something that looks > like "1", even though in markup, "stroke-width" is set to 10). Sounds like a bug in their Beta. That's forgivable. > >> >> How does the Rendering cope with mixed namespace mark-up? > > Curiously, MathML chunk is rendered as "plain text" (without any special > formatting). So what has to look like: > > y = 1 / sqrt(x^2 + 1) > > � IE9 displays as: > > y = 1 x 2 + 1 > > � completely destroying the meaning of an equation. > They are good at destroying things, but then it's a Beta.
From: Richard Cornford on 18 Mar 2010 09:17 On Mar 17, 9:46 pm, kangax wrote: > On 3/17/10 10:08 AM, Richard Cornford wrote: >> On Mar 17, 1:22 pm, kangax wrote: >>> On 3/16/10 6:17 PM, Garrett Smith wrote: > >>>> A colleague of mine recently informed me with the emphatic >>>> title: "HTML5, CSS3, and omg finally AddEventListener in >>>> new IE9!" > >>>> With a link to: >>>>http://ie.microsoft.com/testdrive/ > >>> [...] > >>> I was testing preview of IE9 on Vista yesterday > >> It is probably worth mentioning that this IE 9 preview will >> only install on Vista SP2 or later OSs and requires IE 8 to >> already be installed. > > Didn't know about SP2. I used one of the virtual machine images > laying around; going through closing dozens of popups while > installing IE9 was fun. The 'you need vista SP 2 or above' dialog was one of the ones I encountered trying to install it on an XP machine. >>> and posted some of the >>> initial observations on twitter (http://twitter.com/kangax). >>> Most notable change IE can now actually render documents >>> served as application/xhtml+xml. >> <snip> > > I've created a simple test page > (<http://yura.thinkweb2.com/test.xhtml>), served as > "application/xhtml+xml". I don't have much time at the moment, > so only did few cursory checks. I'm also not familiar with > XHTML DOM _at all_, so please correct me if I did something > stupid. I won't have time to look at that page today, but everything below seems quite reasonable as far as tests go, and confirm what looks like a proper XHTML DOM. Thanks for looking. <snip - XHTML DOM confirmation tests> >> Does - document.wirte - work in that DOM? (where its not >> working is not standard, but is the norm with XHTML DOMs). >> If not, how does it fail (silently or not)? > > What would be a good test for this? probably starting with verifying the existence of a - write - method on the document, somewhere in the body including a script element that contained a call to - document.write - that would, if it worked, still result in valid XHTML and see if the mark-up written ended up in the document (which is not expected, but just about possible). If there is no apparent result, was an exception thrown or was the failure silent (as I recall, Mozilla threw exceptions while Opera was silent, though that was some time ago and things may have changed). I haven't looked at the IE 9 preview's error reporting, so it might be worth doing the test in a try-catch block and using - alert - to show (the messages of) any exceptions thrown. >> If we have a situation where all IE is going to do is accept >> the content type, but still treat the result as (tag soup) >> HTML then the result will be the worst of all possible worlds. > > Fortunately, this doesn't seem to be the case. I see that IE > renders embedded SVG more or less properly (on the test page, > it fails to render shape stroke properly; apparently setting > width to something that looks like "1", even though in markup, > "stroke-width" is set to 10). They have time to fins and fix those sorts of bugs. >> How does the Rendering cope with mixed namespace mark-up? > > Curiously, MathML chunk is rendered as "plain text" (without > any special formatting). So what has to look like: > > y = 1 / sqrt(x^2 + 1) > > - IE9 displays as: > > y = 1 x 2 + 1 > > - completely destroying the meaning of an equation. Presumably MathML is not supported, which is always going to happen with some types of mixed mark-up. How that unsupported mark-up is handled is probably a open to opinion, but showing the element's text content seems fairly reasonable. Some other test ideas might be derived from:- <URL: https://developer.mozilla.org/en/Mozilla_Web_Developer_FAQ#section_11 > Richard.
From: Gregor Kofler on 18 Mar 2010 11:27 S.T. meinte: > On 3/17/2010 11:31 AM, David Mark wrote: >> S.T. wrote: >>> BTW: The default mm/dd/yy or yyyy is VERY standard in the U.S. Believe >>> me. Last year our company loaded 78,462 lodging rates from 1,414 lodging >>> properties. I built the UI that's used for the data entry. > http://en.wikipedia.org/wiki/File:Date.png So the datepicker defaults to a date format which is the least common throughout the world? According to the above image it is *only* used in the US (and as an alternative in Kenya, the Phillipines and Canada). Gregor -- http://www.gregorkofler.com
From: kangax on 18 Mar 2010 13:38 On 3/18/10 8:41 AM, David Mark wrote: [...] > But what does this do:- > > document.getElementsByTagNameNS( > 'http://www.w3.org/2000/svg', 'POLYGON')[0] > > Should also be undefined. Yep, it is `undefined`. > >> >>> document.createElementNS( >> 'http://www.w3.org/2000/svg', 'circle').tagName; >> >> "circle" >> >>> Does - document.wirte - work in that DOM? (where its not working is >>> not standard, but is the norm with XHTML DOMs). If not, how does it >>> fail (silently or not)? >> >> What would be a good test for this? > > Try calling that method. It will throw an exception in most XHTML DOM's > (if it is available at all). Method exists, but throws error. See below. [...] I tweaked output on test page slightly, to make it more understandable. Here's what I see in IE9: document.write: function write() { [native code]} document.createElementNS: function createElementNS() { [native code]} document.createAttributeNS: function createAttributeNS() { [native code]} document.getElementsByTagNameNS: function getElementsByTagNameNS() { [native code]} document.body: [object HTMLBodyElement] document.documentElement.tagName: html document.getElementById('test').innerHTML: <span class=foo>bar</span> document.getElementById('test').outerHTML: <div style="DISPLAY: none" id=test><span class=foo>bar</span></div> document.getElementById('math-test'): [object HTMLGenericElement] document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'h1')[0]: [object HTMLHeadingElement] document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'polygon')[0]: [object SVGPolygonElement] document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'POLYGON')[0]: undefined document.getElementsByTagName('polygon')[0]: undefined document.createElementNS('http://www.w3.org/2000/svg', 'circle').namespaceURI: http://www.w3.org/2000/svg document.createElement('circle').namespaceURI: http://www.w3.org/1999/xhtml document.write(''): Error: document.getElementById('math-test').innerHTML: <mrow><mi>y</mi> <mo>=</mo> <mfrac><mn>1</mn> <msqrt><mrow><msup><mi>x</mi> <mn>2</mn> </msup><mo>+</mo> <mn>1</mn> </mrow></msqrt></mfrac></mrow> document.getElementById('math-test').outerHTML: <math id=math-test xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>y</mi> <mo>=</mo> <mfrac><mn>1</mn> <msqrt><mrow><msup><mi>x</mi> <mn>2</mn> </msup><mo>+</mo> <mn>1</mn> </mrow></msqrt></mfrac></mrow></math> Note how `document.write('')` throws error (although error's `message` appears to be an empty string). Interesting that `innerHTML` representation actually looks like an invalid (if we consider it in context of PCDATA) chunk of XHTML, with missing attribute value quotes: "<span class=foo>bar</span>" I also tried `outerHTML` (thinking that property might very well not even exist), and got similar results: "<div style="DISPLAY: none" id=test><span class=foo>bar</span></div>" Curiously, `innerHTML` and `outerHTML` even exist on elements from within MathML namespace (see last 2 results). Note how outerHTML representation of <math> element shows "xmlns" attribute value with quotes � '<math id=math-test xmlns="http://www.w3.org/1998/Math/MathML">', but "id" � without; which all looks suspiciously similar to HTML 4.01 rules for quotes omission :) -- kangax
From: David Mark on 18 Mar 2010 13:49
kangax wrote: > On 3/18/10 8:41 AM, David Mark wrote: > [...] >> But what does this do:- >> >> document.getElementsByTagNameNS( >> 'http://www.w3.org/2000/svg', 'POLYGON')[0] >> >> Should also be undefined. > > Yep, it is `undefined`. Sounds like they did a good job. > >> >>> >>>> document.createElementNS( >>> 'http://www.w3.org/2000/svg', 'circle').tagName; >>> >>> "circle" >>> >>>> Does - document.wirte - work in that DOM? (where its not working is >>>> not standard, but is the norm with XHTML DOMs). If not, how does it >>>> fail (silently or not)? >>> >>> What would be a good test for this? >> >> Try calling that method. It will throw an exception in most XHTML DOM's >> (if it is available at all). > > Method exists, but throws error. See below. That is in line with what most of the others do. > > [...] > > I tweaked output on test page slightly, to make it more understandable. > Here's what I see in IE9: > > document.write: > function write() { [native code]} > > document.createElementNS: > function createElementNS() { [native code]} > > document.createAttributeNS: > function createAttributeNS() { [native code]} > > document.getElementsByTagNameNS: > function getElementsByTagNameNS() { [native code]} > > document.body: > [object HTMLBodyElement] Yeah, some XHTML DOM's will have this, as well as innerHTML (though the latter never works for sets, even for well-formed XHTML). > > document.documentElement.tagName: > html > > document.getElementById('test').innerHTML: > <span class=foo>bar</span> > > document.getElementById('test').outerHTML: > <div style="DISPLAY: none" id=test><span class=foo>bar</span></div> > > document.getElementById('math-test'): > [object HTMLGenericElement] > > document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'h1')[0]: > [object HTMLHeadingElement] > > document.getElementsByTagNameNS('http://www.w3.org/2000/svg', > 'polygon')[0]: > [object SVGPolygonElement] > > document.getElementsByTagNameNS('http://www.w3.org/2000/svg', > 'POLYGON')[0]: > undefined > > document.getElementsByTagName('polygon')[0]: > undefined > > document.createElementNS('http://www.w3.org/2000/svg', > 'circle').namespaceURI: > http://www.w3.org/2000/svg > > document.createElement('circle').namespaceURI: > http://www.w3.org/1999/xhtml > > document.write(''): > Error: > > document.getElementById('math-test').innerHTML: > <mrow><mi>y</mi> <mo>=</mo> <mfrac><mn>1</mn> > <msqrt><mrow><msup><mi>x</mi> <mn>2</mn> </msup><mo>+</mo> <mn>1</mn> > </mrow></msqrt></mfrac></mrow> > > document.getElementById('math-test').outerHTML: > <math id=math-test > xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>y</mi> <mo>=</mo> > <mfrac><mn>1</mn> <msqrt><mrow><msup><mi>x</mi> <mn>2</mn> > </msup><mo>+</mo> <mn>1</mn> </mrow></msqrt></mfrac></mrow></math> > > > Note how `document.write('')` throws error (although error's `message` > appears to be an empty string). They seem to have a few things to clean up before release. That is an odd one though. Did you try the description property of the Error object? > > Interesting that `innerHTML` representation actually looks like an > invalid (if we consider it in context of PCDATA) chunk of XHTML, with > missing attribute value quotes: Yeah, that's ugly. I suspect that setting it back wouldn't work regardless of whether it was well-formed or not. > > "<span class=foo>bar</span>" > > I also tried `outerHTML` (thinking that property might very well not > even exist), and got similar results: > > "<div style="DISPLAY: none" id=test><span class=foo>bar</span></div>" > > Curiously, `innerHTML` and `outerHTML` even exist on elements from > within MathML namespace (see last 2 results). Note how outerHTML > representation of <math> element shows "xmlns" attribute value with > quotes � '<math id=math-test > xmlns="http://www.w3.org/1998/Math/MathML">', but "id" � without; which > all looks suspiciously similar to HTML 4.01 rules for quotes omission :) > Looks a bit hack-y. Well, they've got time (I imagine it will be years before this is released). |