Layout test for definition lists

dabblet.css

/**
 * Layout test for definition lists
 */

dl.compat-list {
	position: relative;
	margin: 0;
}

dd dl.compat-list {
	display: none;
	position: relative;
	margin: 0;
}

dd:hover dl.compat-list {
	display: inline-block;
}

dt {
	display: inline-block;
	width: 60px; height: 60px;
	background: black;
	margin: 0 0 0 5px;
	font-size: 1px;
}

dt.chrome {
	background: gold;
}

dt.firefox {
	background: orange;
}

dt.ie {
	background: blue;
}

dt.opera {
	background: red;
}

dt.safari {
	background: silver;
}


dd {
	display: inline-block;
	width: 30px; height: 30px;
	margin: 0 0 -10px -20px;
	font-size: 1px;
}

dd.Supported {
	background: lime;		
}

dd.Unsupported {
	background: pink;		
}

dd.Partial {
	background: yellow;		
}

dabblet.html

<dl class="compat-list">
   <dt class="Supported chrome">Chrome</dt>
   <dd class="Supported">Supported</dd>

   <dt class="Supported firefox">Firefox</dt>
   <dd class="Supported">Supported</dd>

   <dt class="Supported ie">IE</dt>
   <dd class="Supported">Supported</dd>

   <dt class="Supported opera">Opera</dt>
   <dd class="Supported">Supported</dd>

   <dt class="Supported safari">Safari</dt>
   <dd class="Supported">Supported</dd>

   <dt class="Partial mobiles">Mobiles</dt>
   <dd class="Partial">Partial
      <dl class="compat-list">
         <dt class="Supported android">Android Browser</dt>
         <dd class="Supported">Supported</dd>

         <dt class="Supported bb">Blackberry Browser</dt>
         <dd class="Supported">Supported</dd>

         <dt class="Supported and_chr">Chrome for Android</dt>
         <dd class="Supported">Supported</dd>

         <dt class="Supported and_ff">Firefox for Android</dt>
         <dd class="Supported">Supported</dd>

         <dt class="Unsupported ie_mob"></dt>
         <dd class="Unsupported">Unsupported</dd>

         <dt class="Supported op_mob">Opera Mobile</dt>
         <dd class="Supported">Supported</dd>

         <dt class="Unsupported op_mini">Opera Mini</dt>
         <dd class="Unsupported">Unsupported</dd>

         <dt class="Supported ios_saf">iOS Safari</dt>
         <dd class="Supported">Supported</dd>
      </dl>
   </dd>
</dl>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}