Skip to content
Browse files

Merge remote-tracking branch 'origin/may2012-f2f-prototype' into may2…

…012-f2f-prototype
  • Loading branch information...
2 parents d3bf6b7 + 09575a1 commit cbb5a8c6d66d1013dc9718050b57a09222ecfbd6 @emalasky emalasky committed May 9, 2012
Showing with 156 additions and 1 deletion.
  1. +2 −1 demos/compositing/README.md
  2. +152 −0 demos/compositing/compositing.html
  3. +2 −0 demos/compositing/image-blend-modes.html
View
3 demos/compositing/README.md
@@ -5,4 +5,5 @@ These demos show prototype work on CSS Compositing.
Requirements
------------
-There is no publicly available build for running these demos.
+
+compositing.html and image-blend-modes.html in this folder can be displayed with [Adobe's prototype build](https://github.com/adobe/webkit/tree/may2012-f2f-prototype). The code required to use the other samples have not yet been implemented.
View
152 demos/compositing/compositing.html
@@ -0,0 +1,152 @@
+<!--
+Copyright 2012 Adobe Systems, Incorporated
+This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License http://creativecommons.org/licenses/by-nc-sa/3.0/ .
+Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe http://www.adobe.com/communities/guidelines/ccplus/commercialcode_plus_permission.html .
+-->
+
+<!DOCTYPE html>
+<html>
+ <head>
+
+ <style>
+ body {
+ background: #ccc;
+ }
+
+ .container {
+ float: left;
+ position: relative;
+ width: 120px;
+ height: 140px;
+ margin: 20px;
+ -webkit-isolation: isolate;
+ }
+
+ .box {
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ width: 75px;
+ height: 75px;
+ background: red;
+ }
+
+ .circle {
+ position: absolute;
+ left: 30px;
+ top: 30px;
+ width: 75px;
+ height: 75px;
+ background: yellow;
+ border-radius: 150px;
+ }
+
+ .caption {
+ position: absolute;
+ left: 0px;
+ top: 120px;
+ width: 120px;
+ height: 20px;
+ text-align: center;
+ }
+
+ br.clear {
+ clear: left;
+ }
+ </style>
+
+ </head>
+
+ <body>
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: clear"></div>
+ <div class="caption">clear</div>
+ </div>
+
+ <br class="clear" />
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: src"></div>
+ <div class="caption">src</div>
+ </div>
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: dst"></div>
+ <div class="caption">dst</div>
+ </div>
+
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: src-over"></div>
+ <div class="caption">src-over</div>
+ </div>
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: dst-over"></div>
+ <div class="caption">dst-over</div>
+ </div>
+
+ <br class="clear" />
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: src-in"></div>
+ <div class="caption">src-in</div>
+ </div>
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: dst-in"></div>
+ <div class="caption">dst-in</div>
+ </div>
+
+
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: src-out"></div>
+ <div class="caption">src-out</div>
+ </div>
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: dst-out"></div>
+ <div class="caption">dst-out</div>
+ </div>
+
+ <br class="clear" />
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: src-atop"></div>
+ <div class="caption">src-atop</div>
+ </div>
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: dst-atop"></div>
+ <div class="caption">dst-atop</div>
+ </div>
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: xor"></div>
+ <div class="caption">xor</div>
+ </div>
+
+ <div class="container">
+ <div class="box"></div>
+ <div class="circle" style="-webkit-alpha-compositing: plus"></div>
+ <div class="caption">plus</div>
+ </div>
+
+ <br class="clear" />
+ <p class="license">Unless otherwise noted, code and content is licensed under a <a href="http://creativecommons.org/publicdomain/zero/1.0/">Public Domain License</a>.</p>
+ </body>
+</html>
View
2 demos/compositing/image-blend-modes.html
@@ -154,6 +154,8 @@
<button value="exclusion">exclusion</button>
<button value="hue">hue</button>
<button value="saturation">saturation</button>
+ <button value="color">color</button>
+ <button value="luminosity">luminosity</button>
</span>
<button class="block-texture-change" id="action-change-texture">Change Texture</button>
</div>

0 comments on commit cbb5a8c

Please sign in to comment.
Something went wrong with that request. Please try again.