テストコードその２

[Web開発] テストコードその２

以下、シリアライザでプレフィックスを調整しているのが確認できる JavaScript 用のテストコード。
テスト内容については http://monado.dtiblog.com/blog-entry-175.html を参照。

<!DOCTYPE html> <!-- IE9 でも表示できるようドキュメントタイプは HTML5 とする -->

<html>

<head>

<title>Test2</title>

<style>

  table {

    border-collapse:collapse;

  }

  td {

    vertical-align: top;

    border-bottom: 1px solid gray;

    border-top: 1px solid gray;

    padding: 0px;

  }

  .prop {

    color: red;

    font-family: 'Times New Roman';

  }

  .val {

    vertical-align: middle;

    font-family: 'Courier New', monospace;

  }

  div {

    padding-top: 20px;

    padding-bottom: 10px;

    font-size: 150%;

    font-family: 'Times New Roman';

    font-weight: bold;

  }

</style>

</head>

<body>

  <script>

  var SVG_NS = 'http://www.w3.org/2000/svg';



  function print_props(obj) {

    var props = ['nodeName', 'namespaceURI', 'tagName', 'prefix', 'localName'];

    for (var i = 0; i < props.length; i++ ) {

        document.write('<tr><td class="prop">');

        document.write(props[i]);

        document.write('&nbsp;&nbsp;&nbsp;&nbsp;</td><td class="val">');

        document.write(obj[props[i]]);

        document.write('</td></tr>');

      }

  }



  function print_elem(el) {

    document.write('<table><tbody>');

    print_props(el);

    print_attrs(el);

    document.write('</tbody></table>');

  }



  function print_attrs(el) {

    for(var i = 0 ; i < el.attributes.length; i++) {

      var attr = el.attributes[i];

      document.write('<tr><td class="prop">attributes[' + i + ']:</td>');

      document.write('<td>');

      document.write('<table><tbody>');

      print_props(attr);

      document.write('</tbody></table>');

      document.write('</td><tr>');

    }

  }





  var root = document.createElementNS(SVG_NS, 'svg:svg');

  // rect要素は接頭辞を省略して作成する.

  var el1 = document.createElementNS(SVG_NS, 'rect');

  root.appendChild(el1);



  text = (new XMLSerializer()).serializeToString(root);

  text = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');



  document.write('<div><i>svg</i> node detail</div>');

  print_elem(root);



  document.write('<div><i>rect</i> node detail</div>');

  print_elem(el1);



  document.write('<div>result of serializeToString() method.</div>');

  document.write('<span class="val">');

  document.write(text);

  document.write('</span>');



  </script>

</body>

</html>

Firefoxでの実行結果
以下を見ると rect ノードオブジェクトの prefix が null であるにも関わらず、
シリアライズされた文字列に svg:rect と接頭辞が追加されていることがわかる。

次は、名前空間宣言を明示的に追加し、接頭辞もすべて指定するサンプルコードと実行結果。強調表示部が上のコードに追加した箇所。

<!DOCTYPE html> <!-- IE9 でも表示できるようドキュメントタイプは HTML5 とする -->

<html>

<head>

<title>Test3</title>

<style>

  table {

    border-collapse:collapse;

  }

  td {

    vertical-align: top;

    border-bottom: 1px solid gray;

    border-top: 1px solid gray;

    padding: 0px;

  }

  .prop {

    color: red;

    font-family: 'Times New Roman';

  }

  .val {

    vertical-align: middle;

    font-family: 'Courier New', monospace;

  }

  div {

    padding-top: 20px;

    padding-bottom: 10px;

    font-size: 150%;

    font-family: 'Times New Roman';

    font-weight: bold;

  }

</style>

</head>

<body>

  <script>

  var XMLNS_NS = 'http://www.w3.org/2000/xmlns/';

  var SVG_NS = 'http://www.w3.org/2000/svg';



  function print_props(obj) {

    var props = ['nodeName', 'namespaceURI', 'tagName', 'prefix', 'localName'];

    for (var i = 0; i < props.length; i++ ) {

        document.write('<tr><td class="prop">');

        document.write(props[i]);

        document.write('&nbsp;&nbsp;&nbsp;&nbsp;</td><td class="val">');

        document.write(obj[props[i]]);

        document.write('</td></tr>');

      }

  }



  function print_elem(el) {

    document.write('<table><tbody>');

    print_props(el);

    print_attrs(el);

    document.write('</tbody></table>');

  }



  function print_attrs(el) {

    for(var i = 0 ; i < el.attributes.length; i++) {

      var attr = el.attributes[i];

      document.write('<tr><td class="prop">attributes[' + i + ']:</td>');

      document.write('<td>');

      document.write('<table><tbody>');

      print_props(attr);

      document.write('</tbody></table>');

      document.write('</td><tr>');

    }

  }





  var root = document.createElementNS(SVG_NS, 'svg:svg');

  var el1 = document.createElementNS(SVG_NS, 'svg:rect');

  root.appendChild(el1);

  root.setAttributeNS(XMLNS_NS, 'xmlns:svg', SVG_NS);



  text = (new XMLSerializer()).serializeToString(root);

  text = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');



  document.write('<div><i>svg</i> node detail</div>');

  print_elem(root);



  document.write('<div><i>rect</i> node detail</div>');

  print_elem(el1);



  document.write('<div>result of serializeToString() method.</div>');

  document.write('<span class="val">');

  document.write(text);

  document.write('</span>');



  </script>

</body>

</html>