blob: 31a6362d1e270dfbfd17ed026822419920a947ad [file] [log] [blame]
<!DOCTYPE html>
This tests verifies that filters work even on composited layers that fallback to rendering in software.
NOTE: It is using the fact that Safari can draw drop-shadows in GPU only if the filter is the last one in the filter chain.
You should see three green rectangles slightly rotated and blurred. There should be no red.
.box {
position: relative;
margin: 10px;
height: 50px;
width: 50px;
background-color: green;
transform: translate(50px, 0px) rotate(20deg);
.before {
background-color: red;
.blur {
/* force a composited layer */
transform: translate3d(0, 0, 0);
background: red;
margin: 50px;
filter: drop-shadow(0px 0px 1px blue) blur(5px);
width: 0px;
height: 0px;
<script src="../../resources/run-after-layout-and-paint.js"></script>
function repaintTest()
<body onload="runAfterLayoutAndPaint(repaintTest, true)">
<div class="blur">
<div class="box"></div>
<div class="box before"></div>
<div class="box"></div>