De quoi me mettre en rogne : un test Acid3, qui - on l'aura déjà deviné - met complètement Internet Explorer hors course...
Alors bien sûr, on se consolera en se disant que même FireFox échoue très lamentablement à ce test, mais ca ne me suffit pas... J'ai décidé de regarde comment notre test fait échoué IE, ainsi que les autres navigateurs modernes, pourtant maintenants fort de l'Acid Test 2.
EDIT : Apple et sa vision d'Acid Test 3
Comment foutre tous les navigateurs dedans, et IE en particulier
*** Premier élément de réponse : jouer sur des détails (enfin ca c'était déjà Acid2)
*** Deuxième chose : utiliser tout ce qu'IE n'a pas. Ne jamais utiliser ce qu'IE a.
*** Troisième chose : Empecher IE de faire les tests en le faisant buter sur des futilités (IE n'effectue en fait aucun test après le 40e - il en rate deux avant 29 en n'en rate plus aucun après le 29. En tout il totalise 13 points. 29 + 13 - 2 = 40)
*** 4e chose : Utiliser un test qui déstabilise le navigateur, au point de causer des anomalies étonnantes :
Strangely, loading the test in a background tab in Firefox 3 (2008012704) gives me 58, whereas loading in the foreground gives me 60.
Also, on random occasions, I get 61 instead.
Ce n'est pas le seul témoignage. Des utilisateurs de FireFox obtiennent 51, d'autre disent avoir 57, ...
Konqueror 3.5.8 on latest Ubuntu Linux 7.10 loads the page, then crashes after a split second
En gros, ca ressemble un peu à rien ce test...
REM : Je ne veux pas faire croire que je suis pro-IE (même si cela a peut-être un fond de vérité, car j'ai toujours trouvé malhonnête d'accuser IE de ne pas respecter des standards qu'on a créé très différent de l'implémentation DEJA EXISTANTE d'IE du HTML/CSS/JavaScript) mais je vais démontrer ici que ce test, loin d'avoir été fait pour le respect des standards, a surtout été conçu pour discréditer IE.
Le protocol data
Inutile en soit. Comme par hasard présent à de nombreuses reprises dans le test.
Le sélecteur :root
Si vous n'avez plus envie de taper HTML { ... }, pourquoi ne pas taper :root { ... } ?
Font-Face
Trop dur de taper url(font.ttf) ? On a pensé à vous :
@font-face { font-family: "AcidAhemTest"; src: url(font.ttf); }
* { font: AcidAhemTest; }
Opacity
Non content de montrer qu'IE ne gère pas l'opacité via opacity mais bien via filter, on s'arrange aussi pour que la DIV censée disparaitre via opacity soit grande et très mal placée :
.removed { position: absolute; top: 80px; left: 380px; height: 100px; width: 100px; opacity: 0; }
Ne pas faire confiance à celui qui tape son code HTML
<link rel="stylesheet" href="empty.css">
<!-- text/html file (should be ignored, <h1> will go red if it isn't) -->
C'est pareil pour de nombreux test.
On fait passez un script pour un PNG, et on regarde si il se lance.
On refait le même essai mais avec un document HTML.
Créer un document, supprimer head et body, puis les recréer.
De préférence en larguant IE dès la première ligne : doc = iframe.contentDocument;
Ce code est utilisé à chaque fois qu'on tente de tester les manipulations du DOM du navigateur.
Faire foirer IE à tous les tests CSS
doc.defaultView.getComputedStyle, sans aucun appel à currentStyle (variante IE qui me semble en plus bien plus simple que son cousin FireFox)
Demander de garder des TextNode vide (ou remplis d'espace)
var penultimate = last.previousSibling; // this should be the whitespace node
penultimate = penultimate.previousSibling; // this should now be the actual penultimate element
Utiliser des fonctions inconnues
doc.createNodeIterator; doc.createTreeWalker
Appeler les propriétés comme des méthodes
w.lastChild()
Très courrant et surtout non-supporté par IE.
Document.getElementById searched on name
Très très grave bug d'IE et d'opéra, en effet....
Test sur les DOM Range
Implémentation W3C du ControlRange d'IE, lors d'une sélection. Aucune chance pour IE de réussir vu que la manière dont cela est géré est radicalement différente.
IE ne sait même pas en créer une (document.createRange)
Tromper le appels vers le C++ avec des chaines contentant \0
document.getElementById('bucket1\0error')
Utiliser les features d'IE et les considérer comme un bug
document.createElement('<div>');
document.implementation.createDocumentType
Rien à dire si ce n'est qu'IE utilise évidemment les ActiveX.
Changer le type des inputs dynamiquement
input.type="password"
Empecher de joindre une propriété et un attribut
test.setAttribute('http-equiv', 'boxes');
assertEquals(test.httpEquiv, 'boxes', "boxes: httpEquiv wrong");
Utilisation du SVG
Non supporté par défaut sur IE
Utilisation du seul nom de couleur HTML n'étant pas géré correctement par IE
grey est en effet, selon CSS3.info, le seul nom de couleur du CSS3 à ne pas être supporté par IE
Changer le contenu HTML d'une feuille de style.
Et pas passer par sa propriété cssText. Complètement tordu.
doc.styleSheets[0].ownerNode.firstChild.data = "img { height: 20px; }";
Des trus à propos des events à dormir debout.
Mais je parie que ca passe sous FireFox.
button.onclick = function () { up += 1; if (up < 10) button.click(); down += up; };
button.click();
assertEquals(up, 10, "click event handler called the wrong number of times");
assertEquals(down, 100, "click event handler called in the wrong order");
Jouer sur les specs ECMA
// constructor is not DontDelete
var f3 = function (a, b) { 3 };
delete f3.prototype.constructor;
var f3i = new f3();
assertEquals(f3i.constructor, Object.prototype.constructor, "Function object's prototype's constructor was DontDelete (or got magically replaced)");
En vrac
var a = []; var s;
s = a.length = "2147483648";
assertEquals(typeof s, "string", "type of |\"2147483648\"| is not string");
<div class="buckets"
><p id="bucket1" class="z"></p
><p id="bucket2" class="z"></p
><p id="bucket3" class="z"></p
><p id="bucket4" class="z"></p
><p id="bucket5" class="z"></p
><p id="bucket6" class="z"></p>
</div>
....
Pour ceux qui veulent se marrer : http://acid3.acidtests.org/
Info relayée de : http://www.css3.info/acid3-completed/