The Tor Browser / file comparison
comparison: layout/reftests/css-blending/background-blending-alpha-ref.html
layout/reftests/css-blending/background-blending-alpha-ref.html
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
equal
deleted
inserted
replaced
| -1:000000000000 | 0:aa55d7508928 |
|---|---|
| 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 } | |
| 10 | |
| 11 .child { | |
| 12 width: 100px; | |
| 13 height: 100px; | |
| 14 opacity: 0.5; | |
| 15 background-color: rgb(0, 127, 0); | |
| 16 } | |
| 17 | |
| 18 .topleft { | |
| 19 float:left; | |
| 20 | |
| 21 width: 100px; | |
| 22 height: 100px; | |
| 23 | |
| 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)*/ | |
| 28 | |
| 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*/ | |
| 37 | |
| 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) */ | |
| 40 | |
| 41 background-color: rgb(64, 191, 64); | |
| 42 } | |
| 43 | |
| 44 .topright { | |
| 45 float:left; | |
| 46 width: 100px; | |
| 47 height: 100px; | |
| 48 } | |
| 49 | |
| 50 .bottom { | |
| 51 width:200px; | |
| 52 height: 100px; | |
| 53 clear:both; | |
| 54 } | |
| 55 | |
| 56 </style> | |
| 57 | |
| 58 <div class="topleft"></div> | |
| 59 <div class="reftest topright"></div> | |
| 60 <div class="reftest bottom"></div> | |
| 61 | |
| 62 </html> |
