<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="data:text/css,#test-element{text-decoration:line-through}">
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
description(
'This tests enumerating the elements of DOM lists.'
);

if (window.testRunner)
    testRunner.dumpAsText();

// Create a testing environment that can be cleanup up easily.
var testingGround = document.createElement('div');
document.body.appendChild(testingGround);

function createFromMarkup(markup)
{
    var range = document.createRange();
    var fragmentContainer = document.createElement("div");
    range.selectNodeContents(fragmentContainer);
    testingGround.appendChild(fragmentContainer);
    var fragment = range.createContextualFragment(markup);
    fragmentContainer.appendChild(fragment);
    return fragmentContainer.firstChild;
}

function setup()
{
    var head = document.getElementsByTagName('head')[0];

    // 2 additional <style>s needed for StyleSheetList test (one is included in the template).
    // 3 rules needed in the first addtional <style> for the CSSRuleList test.
    // 3 declarations needed in the first rule needed for the CSSStyleDeclaration test.
    // @media rule in the second addtional <style> for the MediaList test.
    head.appendChild(createFromMarkup("<style> ol { width: 100px; height: 100px; color: green; } ol { } ol { } </style>"));
    head.appendChild(createFromMarkup("<style> @media screen, projector, printer { ol { } } </style>"));

    // 3 <ol>s for NodeList test.
    // 3 attributes in the first <ol> for the NamedNodeMap test.
    testingGround.appendChild(createFromMarkup("<ol class='foo' id='bar' name='baz'></ol>"));
    testingGround.appendChild(document.createElement('ol'));
    testingGround.appendChild(document.createElement('ol'));

    // 3 <form>s for forms for HTMLCollection test.
    var form = document.createElement('form');
    testingGround.appendChild(form);
    testingGround.appendChild(document.createElement('form'));
    testingGround.appendChild(document.createElement('form'));

    // 3 <select>s for HTMLFormElement test.
    var select = document.createElement('select');
    form.appendChild(select);
    form.appendChild(document.createElement('select'));
    form.appendChild(document.createElement('select'));

    // 3 <option>s for HTMLSelectElement test.
    select.appendChild(document.createElement('option'));
    select.appendChild(document.createElement('option'));
    select.appendChild(document.createElement('option'));

    document.body.appendChild(testingGround);
}

function iterateList(list)
{
    debug("");
    debug(Object.prototype.toString.call(list));
    var temp = new Array();
    for (var i in list) {
        temp.push(i);
    }
    temp.sort();

    var a = new Array();
    for (var i = 0; i < temp.length; ++i) {
        a.push({"i" : temp[i], "item" : list[temp[i]]});
    }
    return a;
}

// ** Firefox DOES include the indexGetter results in enumeration **
// NodeList
// HTMLCollection
// CSSRuleList
// CSSStyleDeclaration
// CSSValueList
// StyleSheetList
// MediaList
// NamedNodeMap
// HTMLFormElement
// HTMLSelectElement

// ** Firefox DOESN'T include the indexGetter results in enumeration **
// Window

setup();

var resultArray = new Array();

// NodeList
var nodeList = testingGround.childNodes;
resultArray = iterateList(nodeList);

shouldBe("resultArray.length", "15");
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "nodeList.item(0)");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "nodeList.item(1)");
shouldBe("resultArray[2].i", "'2'");
shouldBe("resultArray[2].item", "nodeList.item(2)");

// HTMLCollection
var htmlCollection = document.forms;
resultArray = iterateList(htmlCollection);
shouldBe("resultArray.length", "6");
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "htmlCollection.item(0)");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "htmlCollection.item(1)");
shouldBe("resultArray[2].i", "'2'");
shouldBe("resultArray[2].item", "htmlCollection.item(2)");

// NamedNodeMap
var namedNodeMap = document.getElementsByTagName('ol')[0].attributes;
resultArray = iterateList(namedNodeMap);
shouldBe("resultArray.length", "11");
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "namedNodeMap.item(0)");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "namedNodeMap.item(1)");
shouldBe("resultArray[2].i", "'2'");
shouldBe("resultArray[2].item", "namedNodeMap.item(2)");

// HTMLFormElement
var htmlFormElement = document.getElementsByTagName('form')[0];
resultArray = iterateList(htmlFormElement);
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "document.getElementsByTagName('select')[0]");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "document.getElementsByTagName('select')[1]");
shouldBe("resultArray[2].i", "'2'");
shouldBe("resultArray[2].item", "document.getElementsByTagName('select')[2]");

// HTMLSelectElement
var htmlSelectElement = document.getElementsByTagName('select')[0];
resultArray = iterateList(htmlSelectElement);
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "document.getElementsByTagName('option')[0]");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "document.getElementsByTagName('option')[1]");
shouldBe("resultArray[2].i", "'2'");
shouldBe("resultArray[2].item", "document.getElementsByTagName('option')[2]");

// StyleSheetList
var styleSheetList = document.styleSheets;
resultArray = iterateList(styleSheetList);
shouldBe("resultArray.length", "6");
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "styleSheetList.item(0)");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "styleSheetList.item(1)");
shouldBe("resultArray[2].i", "'2'");
shouldBe("resultArray[2].item", "styleSheetList.item(2)");

// CSSRuleList
var cssRuleList = document.styleSheets[1].cssRules;
resultArray = iterateList(cssRuleList);
shouldBe("resultArray.length", "5");
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "cssRuleList.item(0)");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "cssRuleList.item(1)");
shouldBe("resultArray[2].i", "'2'");
shouldBe("resultArray[2].item", "cssRuleList.item(2)");

// CSSStyleDeclaration
//debug(escapeHTML(document.getElementsByTagName('style')));
var cssStyleDeclaration = document.styleSheets[2].cssRules[0].style;
resultArray = iterateList(cssStyleDeclaration);
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "cssStyleDeclaration.item(0)");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "cssStyleDeclaration.item(1)");
shouldBe("resultArray[2].i", "'2'");
shouldBe("resultArray[2].item", "cssStyleDeclaration.item(2)");

// CSSValueList
var cssValueList = window.getComputedStyle(document.getElementsByTagName('ol')[0]).getPropertyCSSValue('border-spacing');
resultArray = iterateList(cssValueList);
shouldBe("resultArray.length", "10");
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "cssValueList.item(0)");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "cssValueList.item(1)");

// MediaList
var mediaList = document.styleSheets[3].cssRules[0].media;
resultArray = iterateList(mediaList);
shouldBe("resultArray.length", "8");
shouldBe("resultArray[0].i", "'0'");
shouldBe("resultArray[0].item", "mediaList.item(0)");
shouldBe("resultArray[1].i", "'1'");
shouldBe("resultArray[1].item", "mediaList.item(1)");
shouldBe("resultArray[2].i", "'2'");
shouldBe("resultArray[2].item", "mediaList.item(2)");

debug("");

document.body.removeChild(testingGround);
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>