chao
/
mini_cocopi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<!DOCTYPE html>
<html>
 <!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
 <!--
-->
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="UTF-8" />
  <title>
   Closure Unit Tests - CSS Object Model helper
  </title>
  <script src="../../base.js">
  </script>
  <script>
    goog.require('goog.debug.DevCssTest');
  </script>
  <style>
   @import "devcss_test_import_1.css";

      .css-style-1 {
        background-color: rgb(173,216,230); /* lightblue */
        padding: 10px;
      }
      .css-style-2 {
        display: block;
        background-color: transparent;
        margin-top: 1px;
        margin-left: 1px;
        padding: 10px;
      }
      .css-style-3 {
        background-color: orange;
        padding: 10px;
      }

      .compound1.compound2 {
        -goog-ie6-selector: ".compound1_compound2";
        background-color: rgb(255,192,203); /* aka pink */
      }

      .USERAGENT-OPERA .css-style-2,
      .USERAGENT-GECKO .css-style-2,
      .USERAGENT-MOBILE .css-style-2 {
        background-color: rgb(255,192,203); /* aka pink */
      }

      .USERAGENT-OPERA .css-style-2,
      .USERAGENT-WEBKIT-GTE255 .css-style-2,
      .USERAGENT-MOBILE .css-style-2 {
        margin-top: 20px;
      }

      .USERAGENT-OPERA .css-style-2,
      .USERAGENT-WEBKIT-LTE200 .css-style-2,
      .USERAGENT-MOBILE .css-style-2 {
        margin-left: 15px;
      }
      .USERAGENT-GECKO #devcss-gecko-1,
      .USERAGENT-GECKO #devcss-gecko-2 {
        background-color: rgb(255,192,203); /* aka pink */
      }
      .USERAGENT-IE-8 #devcss-ie8-1,
      .USERAGENT-IE-8 #devcss-ie8-2 {
        background-color: rgb(255,192,203); /* aka pink */
      }
      #devcss-test-ie6 {
        background-color: purple;
      }
      .USERAGENT-IE-6 #devcss-test-ie6 {
        background-color: rgb(255,192,203); /* aka pink */
      }

      @keyframes spin {
        0% {
          @mixin transform(rotate(0deg));
        }
        100% {
          @mixin transform(rotate(360deg));
        }
      }
  </style>
  <style>
   @import "devcss_test_import_2.css";
  </style>
 </head>
 <body>
  <div id="devcss-test-2" class="css-style-2">
   <ul>
    <li>
     Should end up background-color:rgb(255, 192, 203) aka pink.
    </li>
    <li>
     Should end up with margin-top: 20px; margin-left: 15px;
    </li>
   </ul>
  </div>
  <br>
  <br>
  <div id="devcss-test-ie6">
   <ul>
    <li>
     Should end up background-color:rgb(255, 192, 203) aka pink, not black or purple.
    </li>
   </ul>
  </div>
  <!--
      TODO(user): Re-enable if we ever come up with a way to make imports
          work.
    <div id="devcss-test-importfixer-1" class="css-style-3">
      <ul>
        <li>
          Should end up yellow from the first import of
          devcss_test_import_2.css, overriding the previous orange setting and
          ignoring the second import of devcss_test_import_1.css which would set
          it grey.
        </li>
      </ul>
    </div>
    <div id="devcss-test-importfixer-2" class="css-style-1">
      <ul>
        <li>
          Should end up lightblue, which is a revert back to the setting in this
          test file, after disabling the second import of
          devcss_test_import_1.css
        </li>
      </ul>
    </div>
    -->
  <br>
  <br>
  <div id="devcss-ie8-1">
   This element should be pink for IE8.
  </div>
  <div id="devcss-ie8-2">
   This element should also be pink for IE8.
  </div>
  <br>
  <br>
  <div id="devcss-gecko-1">
   This element should be pink for Gecko.
  </div>
  <div id="devcss-gecko-2">
   This element should also be pink for Gecko.
  </div>
  <br>
  <br>
  <div id="devcss-test-compound1" class="compound1">
   This (class="compound1") should have no bg.
  </div>
  <div id="devcss-test-compound2" class="compound2">
   This (class="compound2") should have no bg.
  </div>
  <div id="devcss-test-compound1-2" class="compound1 compound2 compound1_compound2">
   This (class="compound1 compound2 compound1_compound2") should have
      a pink bg for IE6.
  </div>
  <br>
  <br>
  <input id="devcss-test-combined1" type="hidden" class="ie6-1 ie6-2">
  <input id="devcss-test-combined2" type="hidden" class="ie6-3 ie6-1 ie6-2">
  <input id="devcss-test-notcombined1" type="hidden" class="ie6-1">
  <input id="devcss-test-notcombined2" type="hidden" class="ie6-2">
  <input id="devcss-test-notcombined3" type="hidden" class="ie6-3">
 </body>
</html>