<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("This test checks the SVGViewSpec API using multiple <view> elements");
jsTestIsAsync = true;

var externalSVGFileName = "resources/multiple-view-elements.svg";

function matrixToString(matrix) {
    return "[" + matrix.a.toFixed(2) + " " + matrix.b.toFixed(2) + " " + matrix.c.toFixed(2) + " " + matrix.d.toFixed(2) + " " + matrix.e.toFixed(2) + " " + matrix.f.toFixed(2) + "]";
}

var firstDocumentElement;

function testFirstViewElement() {

    iframeElement = document.getElementById("iframe");
    currentDocumentElement = iframeElement.contentDocument.documentElement;
    firstDocumentElement = currentDocumentElement;
    currentView = currentDocumentElement.currentView;

    debug("");
    debug("Check transform value");
    shouldBeEmptyString("currentView.transformString");
    shouldBe("currentView.transform.numberOfItems", "0");

    debug("");
    debug("Check viewTarget value");
    shouldBeEmptyString("currentView.viewTargetString");
    shouldBeNull("currentView.viewTarget");

    debug("");
    debug("Check zoomAndPan value");
    shouldBe("currentView.zoomAndPan", "SVGViewElement.SVG_ZOOMANDPAN_MAGNIFY");

    debug("");
    debug("Check viewBox value");
    shouldBe("currentView.viewBox.baseVal.x", "0");
    shouldBe("currentView.viewBox.baseVal.y", "0");
    shouldBe("currentView.viewBox.baseVal.width", "10");
    shouldBe("currentView.viewBox.baseVal.height", "10");
    shouldBeEqualToString("currentView.viewBoxString", "0 0 10 10");

    debug("");
    debug("Check preserveAspectRatio value");
    shouldBeEqualToString("currentView.preserveAspectRatioString", "xMidYMid meet");
    shouldBe("currentView.preserveAspectRatio.baseVal.align", "SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID");
    shouldBe("currentView.preserveAspectRatio.baseVal.meetOrSlice", "SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET");

    nextView = "#view2";
    debug("");
    debug("Loading external SVG " + externalSVGFileName + nextView + "...");
    debug("");

    iframeElement.src = externalSVGFileName + nextView;
    testSecondViewElement();
}

function testSecondViewElement() {

    iframeElement = document.getElementById("iframe");
    currentView = iframeElement.contentDocument.documentElement.currentView;

    debug("Verify that no load was performed, but only a different view was set on the same document");
    shouldBe("iframeElement.contentDocument.documentElement", "firstDocumentElement");

    debug("");
    debug("Check transform value");
    shouldBeEmptyString("currentView.transformString");
    shouldBe("currentView.transform.numberOfItems", "0");

    debug("");
    debug("Check viewTarget value");
    shouldBeEmptyString("currentView.viewTargetString");
    shouldBeNull("currentView.viewTarget");

    debug("");
    debug("Check zoomAndPan value");
    shouldBe("currentView.zoomAndPan", "SVGViewElement.SVG_ZOOMANDPAN_MAGNIFY");

    debug("");
    debug("Check viewBox value");
    shouldBe("currentView.viewBox.baseVal.x", "40");
    shouldBe("currentView.viewBox.baseVal.y", "0");
    shouldBe("currentView.viewBox.baseVal.width", "20");
    shouldBe("currentView.viewBox.baseVal.height", "10");
    shouldBeEqualToString("currentView.viewBoxString", "40 0 20 10");

    debug("");
    debug("Check preserveAspectRatio value");
    shouldBeEqualToString("currentView.preserveAspectRatioString", "xMidYMax slice");
    shouldBe("currentView.preserveAspectRatio.baseVal.align", "SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMAX");
    shouldBe("currentView.preserveAspectRatio.baseVal.meetOrSlice", "SVGPreserveAspectRatio.SVG_MEETORSLICE_SLICE");

    debug("");
    debug("Test dynamic modifications of the 'view2' element");
    iframeElement.contentDocument.documentElement.getElementById("view2").setAttribute("viewBox", "10 10 30 30");

    debug("");
    debug("Check viewBox value after modification");
    shouldBe("currentView.viewBox.baseVal.x", "10");
    shouldBe("currentView.viewBox.baseVal.y", "10");
    shouldBe("currentView.viewBox.baseVal.width", "30");
    shouldBe("currentView.viewBox.baseVal.height", "30");
    shouldBeEqualToString("currentView.viewBoxString", "10 10 30 30");

    nextView = "#svgView(viewBox(0 0 10 15);transform(scale(2 2));preserveAspectRatio(xMinYMax meet))";
    debug("");
    debug("Loading external SVG " + externalSVGFileName + nextView + "...");
    debug("");

    iframeElement.src = externalSVGFileName + nextView;
    testCustomViewSpec();
}

function testCustomViewSpec() {

    iframeElement = document.getElementById("iframe");
    currentView = iframeElement.contentDocument.documentElement.currentView;

    debug("Verify that no load was performed, but only a different view was set on the same document");
    shouldBe("iframeElement.contentDocument.documentElement", "firstDocumentElement");

    debug("");
    debug("Check transform value");
    shouldBeEqualToString("currentView.transformString", "scale(2 2)");
    shouldBe("currentView.transform.numberOfItems", "1");

    shouldBe("currentView.transform.getItem(0).type", "SVGTransform.SVG_TRANSFORM_SCALE");
    shouldBe("currentView.transform.getItem(0).angle", "0");
    shouldBeEqualToString("matrixToString(currentView.transform.getItem(0).matrix)", "[2.00 0.00 0.00 2.00 0.00 0.00]");

    debug("");
    debug("Check viewTarget value");
    shouldBeEmptyString("currentView.viewTargetString");
    shouldBeNull("currentView.viewTarget");

    debug("");
    debug("Check zoomAndPan value");
    shouldBe("currentView.zoomAndPan", "SVGViewElement.SVG_ZOOMANDPAN_MAGNIFY");

    debug("");
    debug("Check viewBox value");
    shouldBe("currentView.viewBox.baseVal.x", "0");
    shouldBe("currentView.viewBox.baseVal.y", "0");
    shouldBe("currentView.viewBox.baseVal.width", "10");
    shouldBe("currentView.viewBox.baseVal.height", "15");
    shouldBeEqualToString("currentView.viewBoxString", "0 0 10 15");

    debug("");
    debug("Check preserveAspectRatio value");
    shouldBeEqualToString("currentView.preserveAspectRatioString", "xMinYMax meet");
    shouldBe("currentView.preserveAspectRatio.baseVal.align", "SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMAX");
    shouldBe("currentView.preserveAspectRatio.baseVal.meetOrSlice", "SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET");

    finishJSTest();
}

nextView = "#view1";
debug("");
debug("Loading external SVG " + externalSVGFileName + nextView + "...");
debug("");

var iframeElement = document.createElement("iframe");
iframeElement.setAttribute("id", "iframe");
iframeElement.setAttribute("width", "120px");
iframeElement.setAttribute("height", "120px");
iframeElement.setAttribute("onload", "setTimeout(testFirstViewElement, 0)");
iframeElement.src = externalSVGFileName + "#view1";
document.getElementById("console").appendChild(iframeElement);

successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>