blob: f93d24cc0268a45842904aff0d500831fb651c4b [file] [log] [blame]
/*
* Copyright 2008 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
@def BIG 50px;
@def DIRECTION ltr;
@eval RED com.google.gwt.resources.client.CSSResourceTest.red();
@url BACKGROUND dataMethod;
@url NESTEDBACKGROUND nested.dataMethod;
@url BACKGROUNDIMAGE spriteMethod;
@url NESTEDBACKGROUNDIMAGE nested.spriteMethod;
/* Check @def expansion */
@def SPRITEWIDTH value("spriteMethod.getWidth", "px");
@def SPRITESIZE SPRITEWIDTH value("spriteMethod.getHeight", "px");
@def NESTEDSPRITEWIDTH value("nested.spriteMethod.getWidth", "px");
/*
* We'll use the token FAIL to indicate text that should never be seen in the output.
*/
/* Test @sprite expansion */
@sprite .spriteClass, .extraSpriteClass {
gwt-image: "spriteMethod";
more: properties;
}
@sprite .nestedSprite {
gwt-image: "nested.spriteMethod";
}
.affectedBySprite {
offset-left: "guard" SPRITEWIDTH !important;
offset: SPRITESIZE;
}
.blahA {
background-color: #000;
}
.blahA[someAttribute="foo"][beer="baz"] {
background-color: #fff;
}
/* Test value substitution */
div {
border: BIG solid RED;
direction: DIRECTION;
backgroundTopLevel: BACKGROUND;
backgroundNested: NESTEDBACKGROUND;
backgroundImage: BACKGROUNDIMAGE;
backgroundImageNested: NESTEDBACKGROUNDIMAGE;
}
div[foo="bar"] {
content: 'bar';
}
@def GREEN #007f00;
@def BLUE_AT_50PCT rgb(0, 0, 127) 50%;
@def TO_RIGHT_GREEN_TO_BLUE_50PCT to right, GREEN, BLUE_AT_50PCT;
@external testSubstitutionsInFunctions;
.testSubstitutionsInFunctions {
background-image: -moz-linear-gradient(left, #007f00, rgb(0, 0, 127) 50%);
background-image: -webkit-linear-gradient(left, GREEN, BLUE_AT_50PCT);
background-image: linear-gradient(TO_RIGHT_GREEN_TO_BLUE_50PCT);
}
/* Test structural modifications */
@if (false) {
div {
runtime: FAIL;
}
} @elif (true) {
div {
runtime: PASSED;
}
} @else {
div {
runtime: FAIL;
}
}
@if CssResource.style obf OBF {
div {
static: PASSED;
}
} @elif CssResource.style pretty PRETTY {
div {
static: PASSED;
}
} @else {
div {
static: FAIL;
}
}
/* Test named classes */
.replacement {
color: red;
}
.replacement:after {
content: "Hello\\\" world";
}
.replacement-not-java-ident {
color: blue;
}
/* Test unusual tag, class, and property names and values */
div {
\-some-wacky-extension : boo;
another-extension: \-bar;
-unescaped-hyphen: -is-better;
with_underscore: _is_better;
}
div {
filter: "alpha(opacity = 30)";
}
div-with-literal {
top: literal("expression(document.compatMode==\"CSS1Compat\" ? documentElement.scrollTop:document.body.scrollTop \\ 2)");
}
ns\:tag {
border: red;
}
ns\:tag:pseudo {
content : "blah";
}
ns\:tag::double-pseudo {
content : "blah";
}
ns\:tag::-webkit-scrollbar {
content : "blah";
}
/* Test merging / promotion functions*/
.may-merge {
border: 0;
}
.may-combine {
border: 0;
}
/* Test merging around empty rules */
.FAIL {}
/* Make sure rules in @if and @media are respected */
@media blah {
@if (true) {
.this-does-not-matter {
after: merge;
}
}
}
.may-merge {
before: merge;
}
.may-combine2 {
border: 0;
}
.may-not-merge {
merge: merge;
}
.may-not-combine {
combine: combine;
prevent-combine: true;
}
/* Make sure rules in @if and @media are respected */
@media blah {
@if (true) {
.may-not-merge-or-combine-because-of-this {
prevent: true;
}
}
}
.may-not-merge {
prevent-merge: true;
}
.may-not-combine2 {
combine: combine;
prevent-combine: true;
}
/* Ensure preservation of standard @rules */
@MEDIA print {
div {
media: no-merge;
}
}
@page {
margin: 3cm;
}
@page :left {
margin: 4cm;
}
/* Ensure multi-class selectors fully obfuscate */
.multiClassA {
border: 1px solid red;
}
.multiClassB {
border: 1px solid blue;
}
.multiClassA.multiClassB {
border: 1px solid blue;
}
.css3Color {
background-color: rgba(0, 0, 0, 0.5);
}
/* The @external parser attempts to be flexible */
@external externalA, .externalB externalC;
.externalA .replacement, .externalB, .externalC {border: GREEN;}
/* Check unknown at-rules */
@dontIgnoreThis;
@dontIgnoreThis { /* the space between the name and the { is important */ }
@dontIgnoreThisToo{ some { random : content } }
/*
* Check font-face declarations. See discussion at
* http://paulirish.com/2010/font-face-gotchas/
*/
@font-face {
font-family: 'Foo Web';
src: url('Foo.eot');
src: local('☺'), url('Foo.otf') format('opentype');
}