<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: currentcolor</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color">
<link rel="match" href="greensquare-ref.html">
<meta name="assert" content="This happens at used-value time, which means that if the value is inherited, it’s inherited as currentcolor, not as the value of the color property, so descendants will use their own color property to resolve it.">
<style>
    .outer {color: red; background-color: currentColor; font-size: 200%; width: 6em; height: 6em; }
    .middle {background-color: inherit; width: 6em; height: 6em;}
    .inner {color: green; background-color: inherit; width: 6em; height: 6em; font-weight: bold;}
</style>
<body>
    <p>Test passes if you see a green square, and no red.</p>
    <div class="outer"><div class="middle"><div class="inner">FAIL</div></div></div>
</body>