| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!DOCTYPE html> | 
|  | 2 <html> | 
|  | 3 <head> | 
|  | 4   <style> | 
|  | 5     .set { | 
|  | 6       position: absolute; | 
|  | 7       top: 8px; | 
|  | 8     } | 
|  | 9     .box { | 
|  | 10       height: 100px; | 
|  | 11       width: 100px; | 
|  | 12       background-color: blue; | 
|  | 13     } | 
|  | 14 | 
|  | 15     .hidden { | 
|  | 16       visibility: hidden; | 
|  | 17     } | 
|  | 18 | 
|  | 19     .container.hidden { | 
|  | 20       outline: 4px solid red; | 
|  | 21     } | 
|  | 22 | 
|  | 23     .visible { | 
|  | 24       visibility: visible; | 
|  | 25     } | 
|  | 26     .should-be-hidden { | 
|  | 27       background-color: red !important; | 
|  | 28     } | 
|  | 29     .should-be-visible { | 
|  | 30       background-color: green !important; | 
|  | 31     } | 
|  | 32 | 
|  | 33     .visible-indicator { | 
|  | 34       background-color: green; | 
|  | 35     } | 
|  | 36 | 
|  | 37     .hidden-indicator { | 
|  | 38       background-color: red; | 
|  | 39     } | 
|  | 40   </style> | 
|  | 41 </head> | 
|  | 42 <body> | 
|  | 43   <div class="set"> | 
|  | 44     <div class="hidden-indicator box"></div> | 
|  | 45     <div class="visible-indicator box"></div> | 
|  | 46     <div class="hidden-indicator box"></div> | 
|  | 47   </div> | 
|  | 48 | 
|  | 49   <div class="set"> | 
|  | 50     <div class="hidden container"> | 
|  | 51       <div class="visible box should-be-visible"></div> | 
|  | 52     </div> | 
|  | 53 | 
|  | 54     <div class="hidden container"> | 
|  | 55       <div class="box should-be-hidden"></div> | 
|  | 56     </div> | 
|  | 57 | 
|  | 58     <div class="hidden container"> | 
|  | 59       <div id="target" class="visible box should-be-visible"></div> | 
|  | 60     </div> | 
|  | 61   </div> | 
|  | 62 </body> | 
|  | 63 </html> | 
| OLD | NEW | 
|---|