layout/reftests/css-blending/background-blending-alpha-ref.html@925c144e1f1f
layout/reftests/css-blending/background-blending-alpha-ref.html
Fri, 16 Jan 2015 18:13:44 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 18:13:44 +0100
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
- permissions
- -rw-r--r--
Integrate suggestion from review to improve consistency with existing code.
1 <!--
2 Any copyright is dedicated to the Public Domain.
3 http://creativecommons.org/publicdomain/zero/1.0/
4 -->
5 <html>
6 <style>
7 .reftest {
8 background-color: rgba(0, 255, 0, 0.5);
9 }
11 .child {
12 width: 100px;
13 height: 100px;
14 opacity: 0.5;
15 background-color: rgb(0, 127, 0);
16 }
18 .topleft {
19 float:left;
21 width: 100px;
22 height: 100px;
24 /*First blend black rect with green in place*/
25 /* Cs = (1 - αb) x Cs + αb x B(Cb, Cs)*/
26 /* B(Cb, Cs) = | Cb - Cs | = (0, 0, 0) */
27 /* 0.5 * (0, 255, 0) + 0.5 * (0, 0, 0) = (0, 127.5, 0)*/
29 /* Now, composite the resulting color with src-over; the alpha is the original alpha for the top layer
30 while the color is the blending result*/
31 /* co = αs x Fa x Cs + αb x Fb x Cb - this is premultiplied */
32 /* αo = αs + αb x (1 – αs) */
33 /* Source over: Fa = 1; Fb = 1 – αs */
34 /*co = 0.5 * 1 * (0, 127.5, 0) + 0.5 * 0.5 * (0, 255, 0) = (0, 63.5, 0) + 0.25 * (0, 255, 0) = (0, 127.5, 0)*/
35 /*ao = 0.5 + 0.5 * 0.5 = 0.75*/
36 /* Co = co/ao = (0, 127.5, 0) / 0.75*/
38 /* Now alpha composite on white background */
39 /*co = 0.75 * 1 * (0, 127.5, 0) / 0.75 + 1 * 0.25 * (255, 255, 255) = (0, 127.5, 0) + (63.75, 63.75, 63.75) = (63.75, 159, 63.75) = (64, 191, 64) */
41 background-color: rgb(64, 191, 64);
42 }
44 .topright {
45 float:left;
46 width: 100px;
47 height: 100px;
48 }
50 .bottom {
51 width:200px;
52 height: 100px;
53 clear:both;
54 }
56 </style>
58 <div class="topleft"></div>
59 <div class="reftest topright"></div>
60 <div class="reftest bottom"></div>
62 </html>
