calc() and attr() tests

dabblet.css

/* calc() and attr() tests */

span {outline: 1px solid #ccc;}
.a {font-size: 2em;}
.aa {font-size: calc(1em * 2);}

body {margin: 0;}
p {margin-left: 1.5em;}
.wrapper {padding-top: 2em; clear: left;}
.content {
  float: left;
  width: calc(((100% / 3) * 2) - (1em * 2)); /* extra parens ok in Firefox 9 */
  padding: 1em;
  background-color: #cde;
}
.sidebar {
  float: left;
  width: calc(100% / 3 - 1em - 2px - 1em * 2);
  margin-left: 1em;
  border-left: 2px solid #999;
  padding: 1em;
  background-color: #def;
}
.css2-1 .content:after {content: attr(data-width); margin-left: 2em; font-family: monospace;}
.css2-1 .sidebar:after {content: attr(data-width); margin-left: 2em; font-family: monospace;}
.data-width .content {width: attr(data-width);}
.data-width .sidebar {width: attr(data-width);}
.data-width .content, .data-width .sidebar {box-model: border-box;}
.attr-calc .content {width: calc(attr(data-width) - 1em * 2);}
.attr-calc .sidebar {width: calc(attr(data-width) - 1em - 2px - 1em * 2);}

dabblet.html

<h1><code>calc()</code> and <code>attr()</code> tests</h1>
<p>ref: <a href="https://developer.mozilla.org/en/CSS/calc">calc() on MDC</a>, <a href="https://developer.mozilla.org/en/CSS/attr">attr() on MDC<a></p>
<p>Using <code>calc()</code> for font size: <span class="a">2em</span> <span class="aa">calc(1em * 2)</span></p>

<div class="wrapper basic">
<p>Using <code>calc()</code> for widths minus margin/border/padding</p>
<div class="content">content div</div>
<div class="sidebar">sidebar</div>
</div>

<div class="wrapper css2-1">
<p>Using CSS2.1 <code>attr()</code> to add <code>data-*</code> attributes via <code>content</code></p>
<div class="content" data-width="40em">content div</div>
<div class="sidebar" data-width="15em">sidebar</div>
</div>

<div class="wrapper data-width">
<p>Using CSS3 <code>attr()</code> to use <code>data-*</code> attributes in <code>width</code> (shouldn’t be viewport width but only basic <code>attr()</code> support atm)</p>
<div class="content" data-width="40em">content div</div>
<div class="sidebar" data-width="15em">sidebar</div>
</div>

<div class="wrapper attr-calc">
<p>Using CSS3 <code>attr()</code> <em>in</em> <code>calc()</code> to use <code>data-*</code> attributes in <code>width</code> (again only basic <code>attr()</code> support atm)</p>
<div class="content" data-width="40em">content div</div>
<div class="sidebar" data-width="15em">sidebar</div>
</div>

settings.json

{"version":"1.1","settings":{"prefixfree":"1"},"view":[{"template":"r\nc","active":false,"seethrough":false},{"template":"r\nh","active":true,"seethrough":false},{"template":"r","active":false,"seethrough":false}]}