<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      display: inline-block;
    }
    .fully-opaque {
      background-color: green;
    }
    .fully-transparent {
      background-color: transparent;
    }
    .half-transparent {
        background-color: rgba(0, 128, 0, 0.4);
    }
  </style>
  <script src="../../resources/js-test-pre.js"></script>
</head>
<body>
  <div class="fully-opaque"></div>
  <div class="fully-transparent"></div>
  <div class="half-transparent"></div>  
  <br>  
  <svg width="400">
    <rect id="fully-opaque" width="100" height="100" fill="green"/>
    <rect id="fully-transparent" x="104" width="100" height="100" fill="none"/>
    <rect id="half-transparent" x="208" width="100" height="100" fill="rgba(0, 128, 0, 0.4)"/>
  </svg>
  <script>
     shouldBeEqualToString("getComputedStyle(document.querySelector('div.fully-opaque')).backgroundColor", "rgb(0, 128, 0)");
     shouldBeEqualToString("getComputedStyle(document.querySelector('div.fully-transparent')).backgroundColor", "rgba(0, 0, 0, 0)");     
     shouldBeEqualToString("getComputedStyle(document.querySelector('div.half-transparent')).backgroundColor", "rgba(0, 128, 0, 0.4)"); 
     shouldBeEqualToString("getComputedStyle(document.querySelector('svg>rect#fully-opaque')).fill", "rgb(0, 128, 0)");
     shouldBeEqualToString("getComputedStyle(document.querySelector('svg>rect#fully-transparent')).fill", "none");
     shouldBeEqualToString("getComputedStyle(document.querySelector('svg>rect#half-transparent')).fill", "rgba(0, 128, 0, 0.4)");     
  </script>
  <script src="../../resources/js-test-post.js"></script>
</body>
</html>
