index.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!DOCTYPE html>
  2. <style type="text/css">
  3. html, body {
  4. background: #CCC;
  5. font-size: 14px;
  6. margin: 0;
  7. height: 100%;
  8. }
  9. table {
  10. width: 100%;
  11. border-collapse: collapse;
  12. }
  13. td {
  14. width: 50%;
  15. padding: 0;
  16. vertical-align: top;
  17. }
  18. #output, #style {
  19. width: 49%;
  20. min-height: 99%;
  21. display: inline-block;
  22. vertical-align: top;
  23. }
  24. #style {
  25. position: absolute;
  26. top: 0;
  27. height: 100%;
  28. left: 4px;
  29. width: 49%;
  30. background: #FFF;
  31. border: 1px solid #999;
  32. font: 14px monospace;
  33. white-space: pre-wrap;
  34. }
  35. #output {
  36. position: absolute;
  37. top: 0;
  38. min-height: 100%;
  39. right: 0;
  40. width: 50%;
  41. margin: 0;
  42. padding: 4px;
  43. box-sizing: border-box;
  44. -webkit-box-sizing: border-box;
  45. background: #333;
  46. }
  47. .rule {
  48. color: #8CB7D1;
  49. }
  50. .name {
  51. color: #D7AA69;
  52. }
  53. .value {
  54. color: #D7AA69;
  55. }
  56. .brace-open, .brace-close, .colon, .semicolon {
  57. color: #625035;
  58. }
  59. /*@import url("test/fixtures/dummy.css") screen, handheld;*/
  60. @media screen, all {
  61. body {
  62. color: black;
  63. }
  64. }
  65. </style>
  66. <textarea id="style">.rule {
  67. display: block;
  68. }
  69. .properties {
  70. display: block;
  71. }</textarea>
  72. <pre id="output"></pre>
  73. <script type="text/javascript" src="lib/StyleSheet.js"></script>
  74. <script type="text/javascript" src="lib/CSSStyleSheet.js"></script>
  75. <script type="text/javascript" src="lib/MediaList.js"></script>
  76. <script type="text/javascript" src="lib/CSSRule.js"></script>
  77. <script type="text/javascript" src="lib/CSSStyleRule.js"></script>
  78. <script type="text/javascript" src="lib/CSSMediaRule.js"></script>
  79. <script type="text/javascript" src="lib/CSSStyleDeclaration.js"></script>
  80. <script type="text/javascript" src="lib/parse.js"></script>
  81. <script type="text/javascript" src="lib/parse.js"></script>
  82. <script type="text/javascript" src="plugins/toHTML.js"></script>
  83. <script type="text/javascript">
  84. CSSStyleSheet.prototype.toHTML = toHTML;
  85. window.onload = function(){
  86. var style = document.getElementById("style");
  87. var output = document.getElementById("output")
  88. function outputUpdated(){
  89. output.innerHTML = parse(style.value).toHTML();
  90. }
  91. style.onkeyup = outputUpdated;
  92. outputUpdated();
  93. }
  94. </script>