Use baked CSS colors instead of opacity for flakiness interpolated results

Tools/TestResultServer/static-dashboards/flakiness_dashboard_tests.css

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 70 matching lines @@
     cursor: pointer;
 }
 .results {
     cursor: pointer;
     padding: 0 1px;
     font-size: 10px;
     text-align: center;
     min-width: .75em;
 }
 .interpolatedResult {
-    opacity: 0.2;
+    color: rgba(0, 0, 0, 0.2);
 }
 #legend {
     position: fixed;
     top: 5px;
     right: 5px;
     width: 400px;
     padding: 2px;
     border: 2px solid grey;
     background-color: white;
     z-index: 1;
 }
 #legend ul, #legend ol {
     margin-top: 0;
     margin-bottom: 5px;
 }
 #legend-contents * {
     margin: 3px 0;
     padding: 0 2px;
     float: left;
     border: 1px solid grey;
 }
+
+/*
+These interpolatedResult values are 20% opacity versions of the test results
+below and should be kept in sync. See: crbug.com/397886.
+*/
+.PASS.interpolatedResult {
+    background-color: rgba(51, 255, 51, 0.2);
+}
+.NODATA.interpolatedResult, .NOTRUN.interpolatedResult {
+    background-color: rgba(255, 255, 255, 0.2);
+    color: rgba(187, 187, 187, 0.2);
+}
+.SKIP.interpolatedResult {
+    background-color: rgba(211, 211, 211, 0.2);
+}
+.CRASH.interpolatedResult {
+    background-color: rgba(204, 153, 0, 0.2);
+}
+.TIMEOUT.interpolatedResult {
+    background-color: rgba(255, 252, 108, 0.2);
+}
+.IMAGE.interpolatedResult {
+    background-color: rgba(102, 153, 255, 0.2);
+}
+.FAIL.interpolatedResult, .TEXT.interpolatedResult {
+    background-color: rgba(233, 128, 128, 0.2);
+}
+.MISSING.interpolatedResult {
+    background-color: rgba(138, 119, 0, 0.2);
+}
+.IMAGETEXT.interpolatedResult {
+    background-color: rgba(153, 102, 255, 0.2);
+}
+.AUDIO.interpolatedResult {
+    background-color: rgba(173, 216, 230, 0.2);
+}
+.FLAKY.interpolatedResult {
+    background-color: rgba(64, 224, 208, 0.2);
+}
+.LEAK.interpolatedResult {
+    background-color: rgba(255, 192, 203, 0.2);
+}
+
 .PASS {
     background-color: #3f3;
 }
 .NODATA, .NOTRUN {
     background-color: #fff;
     color: #bbb;
 }
 .SKIP {
     background-color: lightgray;
 }
@@ skipping 138 matching lines @@
     display: inline-block;
     white-space: nowrap;
 }
 .skipped-builder:after {
     content: '|';
     margin: 5px;
 }
 .skipped-builder:last-child:after {
     content: '';
 }