devtools/server/tests/chrome/test_styles-svg.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=921191
   5 Bug 921191 - allow inspection/editing of SVG elements' CSS properties
   6 -->
   7 <head>
   8   <meta charset="utf-8">
   9   <title>Test for Bug </title>
  10
  11   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  12   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
  13   <script type="application/javascript" src="inspector-helpers.js"></script>
  14   <script type="application/javascript">
  15 "use strict";
  16
  17 window.onload = function() {
  18   SimpleTest.waitForExplicitFinish();
  19   runNextTest();
  20 };
  21
  22 let gWalker = null;
  23 let gStyles = null;
  24
  25 addTest(async function setup() {
  26   const url = document.getElementById("inspectorContent").href;
  27   const { target } = await attachURL(url);
  28   const inspector = await target.getFront("inspector");
  29   gWalker = inspector.walker;
  30   gStyles = await inspector.getPageStyle();
  31   runNextTest();
  32 });
  33
  34 addTest(function inheritedUserStyles() {
  35   promiseDone(gWalker.querySelector(gWalker.rootNode, "#svgcontent rect").then(node => {
  36     return gStyles.getApplied(node, { inherited: true, filter: "user" });
  37   }).then(applied => {
  38     is(applied.length, 2, "Should have 2 rules");
  39     is(applied[1].rule.cssText, "fill: rgb(1, 2, 3);", "cssText is right");
  40   }).then(runNextTest));
  41 });
  42
  43 addTest(function cleanup() {
  44   gStyles = null;
  45   gWalker = null;
  46   runNextTest();
  47 });
  48
  49   </script>
  50 </head>
  51 <body>
  52 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=921191">Mozilla Bug 921191</a>
  53 <a id="inspectorContent" target="_blank" href="inspector-styles-data.html">Test Document</a>
  54 <p id="display"></p>
  55 <div id="content" style="display: none">
  56
  57 </div>
  58 <pre id="test">
  59 </pre>
  60 </body>
  61 </html>