| Index: LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html
|
| diff --git a/LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html b/LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..63a7b4853329ea4d5a198d9ad5b957dd6c7d4ac2
|
| --- /dev/null
|
| +++ b/LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html
|
| @@ -0,0 +1,110 @@
|
| +<!DOCTYPE HTML>
|
| +<html>
|
| +<head>
|
| +<style>
|
| +
|
| + body {
|
| + background: blue;
|
| + }
|
| +
|
| + div {
|
| + margin: 20px;
|
| + width: 130px;
|
| + height: 130px;
|
| + }
|
| +
|
| + .parent {
|
| + position: relative;
|
| + z-index: -1;
|
| + float: left;
|
| + background: violet;
|
| + }
|
| +
|
| + .child {
|
| + background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;
|
| + }
|
| +
|
| +</style>
|
| +<body>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: normal;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: multiply;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: screen;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: overlay;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: darken;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: lighten;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: color-dodge;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: color-burn;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: hard-light;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: soft-light;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: difference;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: exclusion;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: hue;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: saturation;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: color;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| + <div class="parent">
|
| + <div class="child" style="mix-blend-mode: luminosity;">
|
| + <div style="background-color: orange; z-index: 1; position: absolute"></div>
|
| + </div>
|
| + </div>
|
| +</body>
|
| +</html>
|
|
|