accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
171 lines (163 loc) • 4.58 kB
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>