gecko-dev/layout/reftests/css-blending/mix-blend-mode-952051.html
Horia Iosif Olaru 08ad122fd2 Bug 952051 - Add reftests. r=roc
* Add a reftest for checking that blending takes place between a blended child element that is clipped by a rounded rect and its parent element (which has overflow hidden, and rounded corners).
* Add a reftest to check the behavior described in bug 947121 no longer reproduces.
2014-02-27 11:56:48 -05:00

38 lines
828 B
HTML

<!DOCTYPE HTML>
<head>
<style>
.parent {
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 0px 0px 20px 0px;
position: absolute;
z-index: 0;
background-color: #00ff00;
}
.child {
width: 300px;
height: 300px;
margin-left: 100px;
background-color: #ff0000;
mix-blend-mode: difference;
}
body {
margin: 0;
}
</style>
<!-- Rounded rect clipping seems to not yield the same results when clipping
the parent and child elements individually. The reference rendering will show
some of the parent green color around the child's clipped corner.
The reftests, on the other hand, shows some gray pixels around the same area.
This may somehow be related to antialiasing. -->
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>