third_party/WebKit/LayoutTests/fast/backgrounds/background-clip-text-composited.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5 .div {
   6   width: 300px;
   7   height: 80px;
   8   border: 1px solid black;
   9   font-size: 50px;
  10   font-weight: bold;
  11   text-align:center;
  12   color: transparent;
  13   -webkit-background-clip: text;
  14   background-color: rgba(0, 255, 0, 0.5);
  15   /* 300 x 100 image, left half filled with rgba(0, 0, 255, 0.5), right half transparent */
  16   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABkCAYAAAA8AQ3AAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAARlJREFUeNrt1MEJACAQBLE7GxcrX2sQQRCSEuYxnaQAftBVmTJwI6mlAi8MCQDDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsACObZ9kB8Gc0I/yAAAAAElFTkSuQmCC);
  17 }
  18
  19 .label {
  20   font-size: 20px;
  21   color: black;
  22 }
  23     </style>
  24   </head>
  25   <body >
  26     <div style="display: inline-block;">
  27       <div class="div" style="-webkit-background-clip: border-box;">01234 56789
  28         <div class="label">unclipped background</div>
  29       </div>
  30       <div class="div" style="-webkit-background-composite: xor;">01234 56789
  31         <div class="label">xor</div>
  32       </div>
  33       <div class="div" style="-webkit-background-composite: plus-lighter;">01234 56789
  34         <div class="label">plus-lighter</div>
  35       </div>
  36       <div class="div" style="-webkit-background-composite: source-over;">01234 56789
  37         <div class="label">source-over</div>
  38       </div>
  39       <div class="div" style="-webkit-background-composite: source-atop;">01234 56789
  40         <div class="label">source-atop</div>
  41       </div>
  42       <div class="div" style="-webkit-background-composite: source-in;">01234 56789
  43         <div class="label">source-in</div>
  44       </div>
  45       <div class="div" style="-webkit-background-composite: source-out;">01234 56789
  46         <div class="label">source-out</div>
  47       </div>
  48     </div>
  49     <div style="display: inline-block;">
  50       <div class="div" style="-webkit-background-composite: clear;">01234 56789
  51         <div class="label">clear</div>
  52       </div>
  53       <div class="div" style="-webkit-background-composite: copy;">01234 56789
  54         <div class="label">copy</div>
  55       </div>
  56       <div class="div" style="-webkit-background-composite: destination-over;">01234 56789
  57         <div class="label">destination-over</div>
  58       </div>
  59       <div class="div" style="-webkit-background-composite: destination-atop;">01234 56789
  60         <div class="label">destination-atop</div>
  61       </div>
  62       <div class="div" style="-webkit-background-composite: destination-in;">01234 56789
  63         <div class="label">destination-in</div>
  64       </div>
  65       <div class="div" style="-webkit-background-composite: destination-out;">01234 56789
  66         <div class="label">destination-out</div>
  67       </div>
  68     </div>
  69   </body>
  70 </html>