chromium/third_party/google-closure-library/closure/goog/debug/devcss/devcss_test.html

<!DOCTYPE html><!-- DO NOT EDIT. This file auto-generated by generate_closure_unit_tests.js --><!--
Copyright 2017 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.
--><html><head><meta charset="UTF-8">

<script src="../../base.js"></script>

<script>goog.require('goog.debug.DevCssTest');</script>
<title>Closure Unit Tests - goog.debug.DevCssTest</title><!--
Copyright 2017 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.
-->
<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 class="css-style-2" id="devcss-test-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 class="compound1" id="devcss-test-compound1">
         This (class="compound1") should have no bg.
        </div>
        <div class="compound2" id="devcss-test-compound2">
         This (class="compound2") should have no bg.
        </div>
        <div class="compound1 compound2 compound1_compound2" id="devcss-test-compound1-2">
         This (class="compound1 compound2 compound1_compound2") should have
      a pink bg for IE6.
        </div>
        <br>
         <br>
          <input class="ie6-1 ie6-2" id="devcss-test-combined1" type="hidden">
           <input class="ie6-3 ie6-1 ie6-2" id="devcss-test-combined2" type="hidden">
            <input class="ie6-1" id="devcss-test-notcombined1" type="hidden">
             <input class="ie6-2" id="devcss-test-notcombined2" type="hidden">
              <input class="ie6-3" id="devcss-test-notcombined3" type="hidden">
              
             
            
           
          
         <br>
        <br>
       <br>
      <br>
     <br>
    <br>
   <br>
  <br>
 <br>
<br></body></html>