<!DOCTYPE HTML> <html> <!-- Test that the Tree Map correctly renders onto 2 managed canvases. --> <head> <meta charset="utf-8"> <title>Tree component test</title> <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> <script type="application/javascript" src="chrome://devtools/content/shared/vendor/d3.js"> </script> </head> <body> <!-- Give the container height so that the whole tree is rendered. --> <div id="container" style="height: 900px;"></div> <pre id="test"> <script src="head.js" type="application/javascript;version=1.8"></script> <script type="application/javascript;version=1.8"> window.onload = Task.async(function*() { try { const container = document.getElementById("container"); yield renderComponent(TreeMap(TEST_TREE_MAP_PROPS), container); let treeMapContainer = container.querySelector(".tree-map-container"); ok(treeMapContainer, "Component creates a container"); let canvases = treeMapContainer.querySelectorAll("canvas"); is(canvases.length, 2, "Creates 2 canvases"); } catch(e) { ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); } finally { SimpleTest.finish(); } }); </script> </pre> </body> </html>