kaorimatz/mozilla-css-extensions-color-value.html

## mozilla-css-extensions-color-value.html
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>MOZ CSS COLOR LIST</title>
    <style type="text/css">
      #container {
        width: 980px;
        margin: 10px auto;
      }
      .box {
        width: 100%;
        height: 50px;
        text-align: center;
        padding: 10px;
      }
      .property {
        width: 30%;
        font-family: monospace;
        text-align: right;
        padding-right: 10px;
      }
    </style>
    <script type="text/javascript">
      (function(undefined) {
        // https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions
        var keywords = [
          '-moz-activehyperlinktext',
          '-moz-hyperlinktext',
          '-moz-visitedhyperlinktext',
          '-moz-buttondefault',
          '-moz-buttonhoverface',
          '-moz-buttonhovertext',
          '-moz-default-background-color',
          '-moz-default-color',
          '-moz-cellhighlight',
          '-moz-cellhighlighttext',
          '-moz-field',
          '-moz-fieldtext',
          '-moz-dialog',
          '-moz-dialogtext',
          '-moz-dragtargetzone',
          '-moz-mac-accentdarkestshadow',
          '-moz-mac-accentdarkshadow',
          '-moz-mac-accentface',
          '-moz-mac-accentlightesthighlight',
          '-moz-mac-accentlightshadow',
          '-moz-mac-accentregularhighlight',
          '-moz-mac-accentregularshadow',
          '-moz-mac-chrome-active',
          '-moz-mac-chrome-inactive',
          '-moz-mac-focusring',
          '-moz-mac-menuselect',
          '-moz-mac-menushadow',
          '-moz-mac-menutextselect',
          '-moz-menuhover',
          '-moz-menuhovertext',
          '-moz-win-communicationstext',
          '-moz-win-mediatext',
          '-moz-nativehyperlinktext'
        ];
        window.onload = function() {
          var content = document.getElementById('content');
          keywords.forEach(function(k) {
            var entry = document.createElement('tr');
            var value = document.createElement('td');
            value.className = 'box';
            value.style.backgroundColor = k;
            var prop = document.createElement('td');
            prop.className = 'property';
            var t = document.createTextNode(k);
            prop.appendChild(t);
            entry.appendChild(prop);
            entry.appendChild(value);
            content.appendChild(entry);
          });
        };
      })();
    </script>
  </head>
  <body>
    <table id="container">
      <tbody id="content">
        <!--
        <tr>
          <td class="property">-moz-dialog</td>
          <td class="box" style="background-color: -moz-dialog"></td>
        </tr>
        -->
      </tbody>
    </table>
  </body>
</html>
	<?xml version="1.0"?>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>MOZ CSS COLOR LIST</title>
	<style type="text/css">
	#container {
	width: 980px;
	margin: 10px auto;
	}
	.box {
	width: 100%;
	height: 50px;
	text-align: center;
	padding: 10px;
	}
	.property {
	width: 30%;
	font-family: monospace;
	text-align: right;
	padding-right: 10px;
	}
	</style>
	<script type="text/javascript">
	(function(undefined) {
	// https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions
	var keywords = [
	'-moz-activehyperlinktext',
	'-moz-hyperlinktext',
	'-moz-visitedhyperlinktext',
	'-moz-buttondefault',
	'-moz-buttonhoverface',
	'-moz-buttonhovertext',
	'-moz-default-background-color',
	'-moz-default-color',
	'-moz-cellhighlight',
	'-moz-cellhighlighttext',
	'-moz-field',
	'-moz-fieldtext',
	'-moz-dialog',
	'-moz-dialogtext',
	'-moz-dragtargetzone',
	'-moz-mac-accentdarkestshadow',
	'-moz-mac-accentdarkshadow',
	'-moz-mac-accentface',
	'-moz-mac-accentlightesthighlight',
	'-moz-mac-accentlightshadow',
	'-moz-mac-accentregularhighlight',
	'-moz-mac-accentregularshadow',
	'-moz-mac-chrome-active',
	'-moz-mac-chrome-inactive',
	'-moz-mac-focusring',
	'-moz-mac-menuselect',
	'-moz-mac-menushadow',
	'-moz-mac-menutextselect',
	'-moz-menuhover',
	'-moz-menuhovertext',
	'-moz-win-communicationstext',
	'-moz-win-mediatext',
	'-moz-nativehyperlinktext'
	];
	window.onload = function() {
	var content = document.getElementById('content');
	keywords.forEach(function(k) {
	var entry = document.createElement('tr');
	var value = document.createElement('td');
	value.className = 'box';
	value.style.backgroundColor = k;
	var prop = document.createElement('td');
	prop.className = 'property';
	var t = document.createTextNode(k);
	prop.appendChild(t);
	entry.appendChild(prop);
	entry.appendChild(value);
	content.appendChild(entry);
	});
	};
	})();
	</script>
	</head>
	<body>
	<table id="container">
	<tbody id="content">
	<!--
	<tr>
	<td class="property">-moz-dialog</td>
	<td class="box" style="background-color: -moz-dialog"></td>
	</tr>
	-->
	</tbody>
	</table>
	</body>
	</html>