| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| .hidesOverflow { |
| background-color: blue; |
| width: 200px; |
| height: 200px; |
| overflow: hidden; |
| } |
| |
| .shouldNotBeVisible { |
| background-color: red; |
| width: 140px; |
| height: 140px; |
| } |
| |
| .composited { |
| -webkit-transform: translatez(0); |
| } |
| |
| .masked { |
| -webkit-mask-box-image: url(../resources/alpha-blocks.png); |
| background-color: lime; |
| width: 300px; |
| height: 300px; |
| } |
| </style> |
| </head> |
| <body> |
| <!-- |
| https://bugs.webkit.org/show_bug.cgi?id=93558 |
| |
| Scenario: The alpha-blocks mask has a checkerboard pattern of opaque/transparent |
| sections. The top-left section of the mask should be opaque, so the red div should not be |
| visible underneath the mask. However, in chromium there was a bug where the mask was |
| accidentally being resized to the clip area, incorrectly exposing the red div. |
| --> |
| <div class="hidesOverflow"> |
| <div class="shouldNotBeVisible"> |
| <div class="composited masked"> |
| </div> |
| </div> |
| </body> |
| </html> |
