| <!DOCTYPE html> |
| <!-- |
| | This test ensures that a non-positioned element with an opacity less than 1 |
| | is painted by its containing stacking context in the order used for child |
| | stacking contexts and positioned elements. The results should draw the blue |
| | rectangle in front of the green rectangle. |
| | https://www.w3.org/TR/css3-color/#opacity |
| --> |
| <html> |
| <head> |
| <style> |
| .container { |
| position: absolute; |
| |
| width: 150px; |
| height: 150px; |
| |
| background-color: rgb(158, 158, 158); |
| } |
| .green { |
| position: absolute; |
| |
| left: 20px; |
| top: 20px; |
| |
| width: 80px; |
| height: 80px; |
| |
| background-color: rgb(15, 157, 88); |
| } |
| .blue-container { |
| position: static; |
| |
| opacity: .9; |
| |
| width: 150px; |
| height: 150px; |
| } |
| .blue { |
| position: static; |
| |
| width: 80px; |
| height: 80px; |
| |
| background-color: rgb(66, 133, 244); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="green"></div> |
| <div class="blue-container"> |
| <div class="blue"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
