HTML Test Case

https://bugzilla.mozilla.org/show_bug.cgi?id=591600

by MegaScience

HTML

<p><strong>SCENARIO</strong> There are two boxes with CSS gradients. BOX A is from a hex colour to the keyword "transparent" <pre>-moz-linear-gradient(top, #FFFF00 0%,transparent 100%);</pre>. BOX B uses an rgba colour with an opacity value from 1 to 0 <pre>-moz-linear-gradient(top, rgba(255,255,0,1) 0%,rgba(255,255,0,0) 100%);</pre>
</p>
<p><strong>EXPECTED</strong> Both boxes look the same (see Opera 12.15 and Internet Explorer 10)</p>
<p><strong>ACTUAL</strong> The box using the "transparent" keyword passes via black creating an incorrect mid-range gradient</p>
<div class="box-a">A</div>
<div class="box-b">B</div>

CSS

.box-a, .box-b {
      display: block;
      border: solid 1px black;
      height: 200px;
      width: 200px;
      margin-right: 8px;
      float: left;
  }
  .box-a {
      background: -moz-linear-gradient(top, #FFFF00 0%, transparent 100%);
      background: linear-gradient(top, #FFFF00 0%, transparent 100%);
  }
  .box-b {
      background: -moz-linear-gradient(top, rgba(255, 255, 0, 1) 0%, rgba(255, 255, 0, 0) 100%);
      background: linear-gradient(top, rgba(255, 255, 0, 1) 0%, rgba(255, 255, 0, 0) 100%);
  }