| <!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"> |
| <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 */ |
| } |
| </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> |
