LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html - Issue 23503046: [CSS Blending] Implement mix-blend-mode in software.

Side by Side Diff: LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html

Issue 23503046: [CSS Blending] Implement mix-blend-mode in software. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Rebase Created 7 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « LayoutTests/css3/compositing/mix-blend-mode-isolated-group-2.html ('k') | LayoutTests/css3/compositing/mix-blend-mode-simple.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE HTML>

	2 <html>

	3 <head>

	4 <style>

	5

	6 body {

	7 background: blue;

	8 }

	9

	10 div {

	11 margin: 20px;

	12 width: 60px;

	13 height: 60px;

	14 }

	15

	16 .parent {

	17 position: relative;

	18 z-index: -1;

	19 float: left;

	20 background: violet;

	21 }

	22

	23 .child {

	24 background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;

	25 }

	26

	27 </style>

	28 <!-- Test to ensure that blending is performed only with the contents of the ele ment's nearest ancestor stacking context.

	29 Test this with a parent element that has zIndex set. Also, tests whether a c hild element blends if the parent has a blend mode set.-->

	30 <body>

	31 <div class="parent">

	32 <div class="child" style="mix-blend-mode: normal;">

	33 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	34 </div>

	35 </div>

	36 <div class="parent">

	37 <div class="child" style="mix-blend-mode: multiply;">

	38 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	39 </div>

	40 </div>

	41 <div class="parent">

	42 <div class="child" style="mix-blend-mode: screen;">

	43 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	44 </div>

	45 </div>

	46 <div class="parent">

	47 <div class="child" style="mix-blend-mode: overlay;">

	48 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	49 </div>

	50 </div>

	51 <div class="parent">

	52 <div class="child" style="mix-blend-mode: darken;">

	53 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	54 </div>

	55 </div>

	56 <div class="parent">

	57 <div class="child" style="mix-blend-mode: lighten;">

	58 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	59 </div>

	60 </div>

	61 <div class="parent">

	62 <div class="child" style="mix-blend-mode: color-dodge;">

	63 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	64 </div>

	65 </div>

	66 <div class="parent">

	67 <div class="child" style="mix-blend-mode: color-burn;">

	68 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	69 </div>

	70 </div>

	71 <div class="parent">

	72 <div class="child" style="mix-blend-mode: hard-light;">

	73 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	74 </div>

	75 </div>

	76 <div class="parent">

	77 <div class="child" style="mix-blend-mode: soft-light;">

	78 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	79 </div>

	80 </div>

	81 <div class="parent">

	82 <div class="child" style="mix-blend-mode: difference;">

	83 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	84 </div>

	85 </div>

	86 <div class="parent">

	87 <div class="child" style="mix-blend-mode: exclusion;">

	88 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	89 </div>

	90 </div>

	91 <div class="parent">

	92 <div class="child" style="mix-blend-mode: hue;">

	93 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	94 </div>

	95 </div>

	96 <div class="parent">

	97 <div class="child" style="mix-blend-mode: saturation;">

	98 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	99 </div>

	100 </div>

	101 <div class="parent">

	102 <div class="child" style="mix-blend-mode: color;">

	103 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	104 </div>

	105 </div>

	106 <div class="parent">

	107 <div class="child" style="mix-blend-mode: luminosity;">

	108 <div style="background-color: orange; z-index: 1; position: absolute "></div>

	109 </div>

	110 </div>

	111 </body>

	112 </html>

OLD	NEW