Issue 6885 - Indicate the expected outcome of the test pages though CSS

static/css/testpages.css

 * { box-sizing: border-box; }
 
 html, body {
   margin: 0;
   padding: 0;
   
   font-size: 16px;
   font-family: Helvetica, sans-serif;
   
   background-color: #f2f2f2;
@@ skipping 162 matching lines @@
   border: 2px solid #bcbcbc;
   padding: .5rem;
 }
 
 .testcase-contentaside {
   color: white;
   width: 20%;
   vertical-align: top;
   height: 35%;
   padding: .5rem;
-  background-color: red;
  float:right;
  margin-left: .5rem;
   display: table-cell;
 }
 
+img.blocked {
+  padding: .5rem;
+  background-color: red;
+}
+
 .testcase-image {
   height: 5rem;
 }
 
 .testcase-row {
   background-color: white;
   padding: .5rem;
   margin-top: .5rem;
 }
 
@@ skipping 15 matching lines @@
   margin-top: 0;
   margin-bottom: .5rem;
 }
 
 .testcase-filter {
   border: 0px solid #ababab;
 
   margin-top: .5rem;
 }
 
+.testcase-teststylesheet,
 #testcase-scripttarget {
   padding: .5rem;
 }
 
 .testcase-filter .filter {
   background-color: #e0e0e0;
   margin: 0;
   padding: .5rem;
   padding-bottom: .75rem;
   padding-top: .75rem;
@@ skipping 35 matching lines @@
 }
 .testcase-es-regex-3 {
   width: 100px;
 }
 
 @media( min-width: 720px ) {
   .abp-container {
     width: 75%;
         max-width: 900px;
   }
-}
+}
+
+.expected .stripes-red,
+.expected .blocked,
+.expected #testcase-output,
+#testcase-output-expected {
+  display: none;
+}
+
+.expected .trap {
+  visibility: hidden;
+}
+
+.expected #testcase-output-expected {
+  display: block;
+}