| <!DOCTYPE html> |
| <html> |
| <!-- |
| | This test ensures that a non-positioned element with an opacity less than 1 |
| | paints the layer it creates at the same stacking order that would be used if |
| | it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’, impacting |
| | all of its positioned ancestors. The results should not display "This line is |
| | invisible." |
| | https://www.w3.org/TR/css3-color/#transparency |
| --> |
| <head> |
| <style> |
| body { |
| font-family: Roboto; |
| font-size: 16px; |
| } |
| |
| .positioned-container { |
| position: absolute; |
| width: 300px; |
| height: 50px; |
| background-color: #00CC00; |
| } |
| |
| .opacity-test { |
| position: static; |
| opacity: 0; |
| width: 300px; |
| height: 50px; |
| background-color: #00CC00; |
| } |
| |
| .positioned-red { |
| position: absolute; |
| width: 400px; |
| height: 20px; |
| background-color: #FF0000; |
| top: 60px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="positioned-container"> |
| <div class="opacity-test"> |
| <div class="positioned-red"> This line is invisible. </div> |
| </div> |
| </div> |
| </body> |
| </html> |
