From 1313f0c0286cc31edf9874cedeb44f8689e7d0d0 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Manuel=20Carrasco=20Mo=C3=B1ino?= Date: Mon, 26 Nov 2012 16:20:48 +0100 Subject: [PATCH] End lines with LF instead of CRLF --- .../resources/archetype-resources/pom.xml | 394 +- .../__artifactId__/__projectName__.gwt.xml | 2 +- .../client/__projectName__.java | 56 +- .../client/__projectName__Test.java | 6 +- .../google/gwt/query/DevTestRunner.gwt.xml | 2 +- .../gwt/query/client/DevTestRunner.java | 4044 +++---- .../google/gwt/query/client/MyTestCase.java | 296 +- .../com/google/gwt/query/public/test.html | 18 +- .../google/gwt/core/client/JsArrayMixed.java | 54 +- .../query/linker/IFrameWithDocTypeLinker.java | 6 +- .../rebind/SelectorGeneratorCssToXPath.java | 224 +- .../java/com/google/gwt/query/Query.gwt.xml | 282 +- .../com/google/gwt/query/QueryMin.gwt.xml | 144 +- .../com/google/gwt/query/client/Function.java | 98 +- .../com/google/gwt/query/client/GQuery.java | 9312 ++++++++--------- .../com/google/gwt/query/client/Lazy.java | 6 +- .../com/google/gwt/query/client/LazyBase.java | 6 +- .../google/gwt/query/client/LazyGQuery.java | 448 +- .../google/gwt/query/client/Predicate.java | 22 +- .../google/gwt/query/client/Properties.java | 374 +- .../com/google/gwt/query/client/Selector.java | 62 +- .../google/gwt/query/client/Selectors.java | 144 +- .../query/client/builders/JsonBuilder.java | 122 +- .../client/builders/JsonBuilderBase.java | 24 +- .../gwt/query/client/builders/Name.java | 62 +- .../gwt/query/client/builders/XmlBuilder.java | 162 +- .../query/client/builders/XmlBuilderBase.java | 42 +- .../css/BackgroundAttachmentProperty.java | 6 +- .../client/css/BackgroundColorProperty.java | 6 +- .../client/css/BackgroundImageProperty.java | 6 +- .../css/BackgroundPositionProperty.java | 12 +- .../query/client/css/BackgroundProperty.java | 8 +- .../client/css/BackgroundRepeatProperty.java | 6 +- .../client/css/BorderCollapseProperty.java | 6 +- .../query/client/css/BorderColorProperty.java | 6 +- .../gwt/query/client/css/BorderProperty.java | 12 +- .../client/css/BorderSpacingProperty.java | 8 +- .../query/client/css/BorderStyleProperty.java | 6 +- .../query/client/css/BorderWidthProperty.java | 6 +- .../com/google/gwt/query/client/css/CSS.java | 270 +- .../query/client/css/CaptionSideProperty.java | 8 +- .../gwt/query/client/css/ClearProperty.java | 8 +- .../gwt/query/client/css/ClipProperty.java | 8 +- .../gwt/query/client/css/ColorProperty.java | 6 +- .../gwt/query/client/css/CssProperty.java | 10 +- .../gwt/query/client/css/CursorProperty.java | 8 +- .../query/client/css/DirectionProperty.java | 8 +- .../gwt/query/client/css/DisplayProperty.java | 6 +- .../client/css/EdgePositionProperty.java | 8 +- .../query/client/css/EmptyCellsProperty.java | 8 +- .../gwt/query/client/css/FloatProperty.java | 6 +- .../query/client/css/FontSizeProperty.java | 6 +- .../query/client/css/FontStyleProperty.java | 6 +- .../query/client/css/FontVariantProperty.java | 6 +- .../query/client/css/FontWeightProperty.java | 6 +- .../gwt/query/client/css/HasCssValue.java | 8 +- .../gwt/query/client/css/HeightProperty.java | 6 +- .../google/gwt/query/client/css/Length.java | 8 +- .../client/css/LetterSpacingProperty.java | 6 +- .../query/client/css/LineHeightProperty.java | 8 +- .../client/css/ListStyleImageProperty.java | 6 +- .../client/css/ListStylePositionProperty.java | 8 +- .../query/client/css/ListStyleProperty.java | 6 +- .../client/css/ListStyleTypeProperty.java | 6 +- .../gwt/query/client/css/MarginProperty.java | 6 +- .../client/css/MultipleValueCssSetter.java | 8 +- .../client/css/OutlineColorProperty.java | 6 +- .../gwt/query/client/css/OutlineProperty.java | 8 +- .../client/css/OutlineStyleProperty.java | 6 +- .../client/css/OutlineWidthProperty.java | 8 +- .../query/client/css/OverflowProperty.java | 6 +- .../gwt/query/client/css/PaddingProperty.java | 6 +- .../query/client/css/PositionProperty.java | 6 +- .../google/gwt/query/client/css/RGBColor.java | 6 +- .../gwt/query/client/css/SimpleCssSetter.java | 8 +- .../gwt/query/client/css/TakesCssValue.java | 6 +- .../gwt/query/client/css/TakesInteger.java | 8 +- .../gwt/query/client/css/TakesLength.java | 6 +- .../gwt/query/client/css/TakesNumber.java | 8 +- .../query/client/css/TextAlignProperty.java | 8 +- .../client/css/TextDecorationProperty.java | 6 +- .../query/client/css/TextIdentProperty.java | 6 +- .../client/css/TextTransformProperty.java | 6 +- .../query/client/css/UnicodeBidiProperty.java | 8 +- .../google/gwt/query/client/css/UriValue.java | 6 +- .../client/css/VerticalAlignProperty.java | 6 +- .../query/client/css/VisibilityProperty.java | 6 +- .../query/client/css/WhiteSpaceProperty.java | 6 +- .../gwt/query/client/css/WidthProperty.java | 6 +- .../query/client/css/WordSpacingProperty.java | 6 +- .../gwt/query/client/css/ZIndexProperty.java | 12 +- .../gwt/query/client/impl/AttributeImpl.java | 14 +- .../client/impl/AttributeTridentImpl.java | 6 +- .../query/client/impl/DocumentStyleImpl.java | 66 +- .../client/impl/DocumentStyleImplIE.java | 16 +- .../gwt/query/client/impl/HasSelector.java | 8 +- .../gwt/query/client/impl/SelectorEngine.java | 364 +- .../client/impl/SelectorEngineCssToXPath.java | 550 +- .../query/client/impl/SelectorEngineImpl.java | 48 +- .../client/impl/SelectorEngineNative.java | 24 +- .../client/impl/SelectorEngineNativeIE8.java | 20 +- .../client/impl/SelectorEngineNativeMin.java | 14 +- .../impl/SelectorEngineNativeMinIE8.java | 8 +- .../client/impl/SelectorEngineSizzle.java | 66 +- .../client/impl/SelectorEngineSizzleIE.java | 64 +- .../impl/research/SelectorEngineJS.java | 1624 +-- .../impl/research/SelectorEngineJSIE.java | 74 +- .../research/SelectorEngineSizzleGwt.java | 68 +- .../impl/research/SelectorEngineXPath.java | 502 +- .../google/gwt/query/client/js/JsCache.java | 56 +- .../google/gwt/query/client/js/JsClosure.java | 6 +- .../com/google/gwt/query/client/js/JsMap.java | 12 +- .../gwt/query/client/js/JsNamedArray.java | 16 +- .../gwt/query/client/js/JsNodeArray.java | 176 +- .../gwt/query/client/js/JsObjectArray.java | 14 +- .../google/gwt/query/client/js/JsRegexp.java | 148 +- .../google/gwt/query/client/js/JsUtils.java | 30 +- .../gwt/query/client/plugins/Effects.java | 1198 +-- .../gwt/query/client/plugins/Events.java | 54 +- .../gwt/query/client/plugins/LazyEffects.java | 86 +- .../gwt/query/client/plugins/LazyEvents.java | 54 +- .../gwt/query/client/plugins/LazyWidgets.java | 20 +- .../query/client/plugins/MouseOptions.java | 18 +- .../gwt/query/client/plugins/MousePlugin.java | 678 +- .../gwt/query/client/plugins/Plugin.java | 66 +- .../gwt/query/client/plugins/QueuePlugin.java | 60 +- .../gwt/query/client/plugins/UiPlugin.java | 12 +- .../gwt/query/client/plugins/Widgets.java | 394 +- .../gwt/query/client/plugins/ajax/Ajax.java | 56 +- .../client/plugins/effects/ClipAnimation.java | 292 +- .../gwt/query/client/plugins/effects/Fx.java | 16 +- .../plugins/effects/PropertiesAnimation.java | 560 +- .../client/plugins/events/EventsListener.java | 32 +- .../query/client/plugins/events/GqEvent.java | 34 +- .../plugins/widgets/ButtonWidgetFactory.java | 10 +- .../widgets/HtmlPanelWidgetFactory.java | 10 +- .../plugins/widgets/LabelWidgetFactory.java | 10 +- .../widgets/PasswordTextBoxWidgetFactory.java | 8 +- .../widgets/TextAreaWidgetFactory.java | 16 +- .../widgets/TextBoxBaseWidgetFactory.java | 12 +- .../plugins/widgets/TextBoxWidgetFactory.java | 8 +- .../client/plugins/widgets/WidgetFactory.java | 8 +- .../plugins/widgets/WidgetInitializer.java | 6 +- .../plugins/widgets/WidgetsHtmlPanel.java | 16 +- .../client/plugins/widgets/WidgetsUtils.java | 48 +- .../query/linker/IFrameWithDocTypeLinker.java | 6 +- .../query/rebind/JsonBuilderGenerator.java | 564 +- .../gwt/query/rebind/LazyGenerator.java | 6 +- .../query/rebind/SelectorGeneratorBase.java | 410 +- .../rebind/SelectorGeneratorCssToXPath.java | 220 +- .../gwt/query/rebind/SelectorGeneratorJS.java | 80 +- .../rebind/SelectorGeneratorJSOptimal.java | 378 +- .../query/rebind/SelectorGeneratorNative.java | 132 +- .../rebind/SelectorGeneratorNativeIE8.java | 120 +- .../rebind/SelectorGeneratorNativeIE9.java | 120 +- .../query/rebind/SelectorGeneratorXPath.java | 662 +- .../gwt/query/rebind/XmlBuilderGenerator.java | 334 +- .../gwt/query/client/GQueryAjaxTestGwt.java | 50 +- .../gwt/query/client/GQueryCoreTestGwt.java | 404 +- .../gwt/query/client/GQueryCssTestGwt.java | 34 +- .../query/client/GQueryEffectsTestGwt.java | 94 +- .../gwt/query/client/GQueryEventsTestGwt.java | 10 +- .../gwt/query/client/GQueryJsTestGwt.java | 28 +- .../query/client/GQuerySelectorsTestGwt.java | 84 +- .../query/client/GQueryWidgetsTestGwt.java | 28 +- .../gwt/query/client/JreQueryCoreTest.java | 6 +- .../client/impl/SelectorEnginesTest.java | 64 +- .../client/impl/SelectorEnginesTestGwt.java | 8 +- .../query/rebind/SelectorGeneratorsTest.java | 68 +- .../gwt/query/jsquery/JsQueryApi.gwt.xml | 16 +- .../query/jsquery/client/GQueryOverlay.java | 42 +- .../gwt/query/jsquery/client/JsQuery.java | 18 +- .../gwt/query/jsquery/client/JsQueryApi.java | 2 +- .../query/jsquery/client/JsQueryUtils.java | 8 +- .../gwt/query/jsquery/public/JsQuery.html | 2 +- .../jsplugins/menu/JsQueryMenu.gwt.xml | 4 +- .../jsplugins/menu/client/JsMenu.java | 76 +- .../jsplugins/menu/client/JsQueryMenu.java | 2 +- .../gwtquery/jsplugins/menu/public/demo.html | 6 +- .../gwtquery/samples/GwtQueryBench.gwt.xml | 2 +- .../gwtquery/samples/GwtQueryDemo.gwt.xml | 2 +- .../gwtquery/samples/GwtQueryEffects.gwt.xml | 2 +- .../samples/GwtQueryEffectsMin.gwt.xml | 2 +- .../samples/GwtQueryImageZoom.gwt.xml | 2 +- .../gwtquery/samples/GwtQuerySample.gwt.xml | 2 +- .../samples/client/AnimationsSample.java | 36 +- .../samples/client/GwtQueryBenchModule.java | 4818 ++++----- .../samples/client/GwtQueryDemoModule.java | 206 +- .../samples/client/GwtQueryEffectsModule.java | 246 +- .../samples/client/GwtQueryImageZoom.java | 92 +- .../samples/client/GwtQuerySampleModule.java | 160 +- .../samples/client/HomePageSample.java | 16 +- .../client/JsCollectionVsJavaCollection.java | 40 +- .../gwtquery/samples/client/MySelectors.java | 6 +- .../client/effects/ColorEffectsSample.java | 22 +- .../client/effects/FadeEffectsSample.java | 18 +- .../client/effects/SlideEffectsSample.java | 22 +- .../samples/public/AnimationsSample.html | 62 +- .../samples/public/ColorEffectsSample.html | 102 +- .../samples/public/GwtQueryBench.html | 352 +- .../gwtquery/samples/public/GwtQueryDemo.html | 100 +- .../samples/public/GwtQueryEffects.html | 130 +- .../samples/public/GwtQueryEffectsMin.html | 130 +- .../samples/public/GwtQueryImageZoom.html | 36 +- .../samples/public/GwtQuerySample.html | 98 +- .../samples/public/SlideEffectsSample.html | 200 +- .../samples/public/html/dojobench.html | 26 +- .../public/html/domassistantbench.html | 26 +- .../samples/public/html/gwtbench.html | 2 +- .../samples/public/html/iframebench.html | 84 +- .../samples/public/html/jquerybench.html | 26 +- .../samples/public/html/prototypebench.html | 26 +- .../samples/public/html/sizzlebench.html | 26 +- 213 files changed, 18053 insertions(+), 18053 deletions(-) diff --git a/archetype/src/main/resources/archetype-resources/pom.xml b/archetype/src/main/resources/archetype-resources/pom.xml index d0de9573..dc350f81 100644 --- a/archetype/src/main/resources/archetype-resources/pom.xml +++ b/archetype/src/main/resources/archetype-resources/pom.xml @@ -1,197 +1,197 @@ - - - 4.0.0 - - ${projectName} gwtquery project - ${groupId} - ${artifactId} - war - ${version} - - - UTF-8 - 1.6 - 1.6 - 1.1.0 - 2.5.0-rc1 - 2.4.0 - - - - - central - http://repo1.maven.org/maven2 - - - gwtquery-plugins - http://gwtquery-plugins.googlecode.com/svn/mavenrepo - - - sonatype - http://oss.sonatype.org/content/repositories/snapshots - true - false - - - m.g.o - http://maven.glassfish.org/content/groups/public/ - - - - - - - - - - - - junit - junit - 3.8.1 - test - - - com.google.gwt - gwt-user - ${gwtversion} - provided - - - com.google.gwt - gwt-dev - ${gwtversion} - provided - - - com.google.gwt - gwt-servlet - ${gwtversion} - runtime - - - com.googlecode.gwtquery - gwtquery - ${gQueryVersion} - provided - - - - javax.validation - validation-api - 1.0.0.GA - - - javax.validation - validation-api - 1.0.0.GA - sources - - - - - - org.apache.maven.plugins - maven-compiler-plugin - 2.1 - - 1.6 - 1.6 - - - - org.codehaus.mojo - gwt-maven-plugin - ${gwtmaven} - - ${gwt.loglevel} - - ${gwtversion} - true - ${projectName}/${projectName}.html - ${project.build.directory}/${project.build.finalName} - - - - prepare-package - - compile - - - - - - maven-surefire-plugin - 2.8.1 - - - \${project.build.sourceDirectory} - \${project.build.testSourceDirectory} - - false - always - - - gwt.args - -out target/gwt-tests - - - - gwt.persistentunitcache - false - - - - - - org.apache.maven.plugins - maven-eclipse-plugin - 2.7 - - true - false - - com.google.gwt.eclipse.core.gwtProjectValidator - org.eclipse.wst.common.modulecore.ComponentStructuralBuilder - org.eclipse.jdt.core.javabuilder - org.eclipse.wst.common.modulecore.ComponentStructuralBuilderDependencyResolver - - - com.google.gwt.eclipse.core.gwtNature - org.eclipse.jdt.core.javanature - org.eclipse.wst.common.modulecore.ModuleCoreNature - - - com.google.gwt.eclipse.core.GWT_CONTAINER - org.eclipse.jdt.launching.JRE_CONTAINER - org.eclipse.jdt.junit.JUNIT_CONTAINER/3 - - - - - - maven-resources-plugin - 2.5 - - - copy-resources - generate-sources - - copy-resources - - - ${project.build.directory}/${project.build.finalName} - - - src/main/webapp - true - - - - - - - - ${project.build.directory}/${project.build.finalName}/WEB-INF/classes - - + + + 4.0.0 + + ${projectName} gwtquery project + ${groupId} + ${artifactId} + war + ${version} + + + UTF-8 + 1.6 + 1.6 + 1.1.0 + 2.5.0-rc1 + 2.4.0 + + + + + central + http://repo1.maven.org/maven2 + + + gwtquery-plugins + http://gwtquery-plugins.googlecode.com/svn/mavenrepo + + + sonatype + http://oss.sonatype.org/content/repositories/snapshots + true + false + + + m.g.o + http://maven.glassfish.org/content/groups/public/ + + + + + + + + + + + + junit + junit + 3.8.1 + test + + + com.google.gwt + gwt-user + ${gwtversion} + provided + + + com.google.gwt + gwt-dev + ${gwtversion} + provided + + + com.google.gwt + gwt-servlet + ${gwtversion} + runtime + + + com.googlecode.gwtquery + gwtquery + ${gQueryVersion} + provided + + + + javax.validation + validation-api + 1.0.0.GA + + + javax.validation + validation-api + 1.0.0.GA + sources + + + + + + org.apache.maven.plugins + maven-compiler-plugin + 2.1 + + 1.6 + 1.6 + + + + org.codehaus.mojo + gwt-maven-plugin + ${gwtmaven} + + ${gwt.loglevel} + + ${gwtversion} + true + ${projectName}/${projectName}.html + ${project.build.directory}/${project.build.finalName} + + + + prepare-package + + compile + + + + + + maven-surefire-plugin + 2.8.1 + + + \${project.build.sourceDirectory} + \${project.build.testSourceDirectory} + + false + always + + + gwt.args + -out target/gwt-tests + + + + gwt.persistentunitcache + false + + + + + + org.apache.maven.plugins + maven-eclipse-plugin + 2.7 + + true + false + + com.google.gwt.eclipse.core.gwtProjectValidator + org.eclipse.wst.common.modulecore.ComponentStructuralBuilder + org.eclipse.jdt.core.javabuilder + org.eclipse.wst.common.modulecore.ComponentStructuralBuilderDependencyResolver + + + com.google.gwt.eclipse.core.gwtNature + org.eclipse.jdt.core.javanature + org.eclipse.wst.common.modulecore.ModuleCoreNature + + + com.google.gwt.eclipse.core.GWT_CONTAINER + org.eclipse.jdt.launching.JRE_CONTAINER + org.eclipse.jdt.junit.JUNIT_CONTAINER/3 + + + + + + maven-resources-plugin + 2.5 + + + copy-resources + generate-sources + + copy-resources + + + ${project.build.directory}/${project.build.finalName} + + + src/main/webapp + true + + + + + + + + ${project.build.directory}/${project.build.finalName}/WEB-INF/classes + + diff --git a/archetype/src/main/resources/archetype-resources/src/main/java/__artifactId__/__projectName__.gwt.xml b/archetype/src/main/resources/archetype-resources/src/main/java/__artifactId__/__projectName__.gwt.xml index 5476f939..13e1d579 100644 --- a/archetype/src/main/resources/archetype-resources/src/main/java/__artifactId__/__projectName__.gwt.xml +++ b/archetype/src/main/resources/archetype-resources/src/main/java/__artifactId__/__projectName__.gwt.xml @@ -5,4 +5,4 @@ - + diff --git a/archetype/src/main/resources/archetype-resources/src/main/java/__artifactId__/client/__projectName__.java b/archetype/src/main/resources/archetype-resources/src/main/java/__artifactId__/client/__projectName__.java index 891f5d3e..d5c178e8 100644 --- a/archetype/src/main/resources/archetype-resources/src/main/java/__artifactId__/client/__projectName__.java +++ b/archetype/src/main/resources/archetype-resources/src/main/java/__artifactId__/client/__projectName__.java @@ -1,31 +1,31 @@ #set( $symbol_pound = '#' ) #set( $symbol_dollar = '$' ) #set( $symbol_escape = '\' ) -package ${package}.${artifactId}.client; -import com.google.gwt.dom.client.Element; -import com.google.gwt.query.client.Function; -import static com.google.gwt.query.client.GQuery.*; - - -import com.google.gwt.core.client.EntryPoint; - -/** - * Example code for a GwtQuery application - */ -public class ${projectName} implements EntryPoint { - - public void onModuleLoad() { - - ${symbol_dollar}("div") - .hover(new Function() { - public void f(Element e) { - ${symbol_dollar}(e).css("color", "blue").stop(true, true).animate("fontSize: '+=10px'"); - } - }, new Function() { - public void f(Element e) { - ${symbol_dollar}(e).css("color", "").stop(true, true).animate("fontSize: '-=10px'"); - } - }); - } - -} +package ${package}.${artifactId}.client; +import com.google.gwt.dom.client.Element; +import com.google.gwt.query.client.Function; +import static com.google.gwt.query.client.GQuery.*; + + +import com.google.gwt.core.client.EntryPoint; + +/** + * Example code for a GwtQuery application + */ +public class ${projectName} implements EntryPoint { + + public void onModuleLoad() { + + ${symbol_dollar}("div") + .hover(new Function() { + public void f(Element e) { + ${symbol_dollar}(e).css("color", "blue").stop(true, true).animate("fontSize: '+=10px'"); + } + }, new Function() { + public void f(Element e) { + ${symbol_dollar}(e).css("color", "").stop(true, true).animate("fontSize: '-=10px'"); + } + }); + } + +} diff --git a/archetype/src/main/resources/archetype-resources/src/test/java/__artifactId__/client/__projectName__Test.java b/archetype/src/main/resources/archetype-resources/src/test/java/__artifactId__/client/__projectName__Test.java index aef7cf9e..e007a0a6 100644 --- a/archetype/src/main/resources/archetype-resources/src/test/java/__artifactId__/client/__projectName__Test.java +++ b/archetype/src/main/resources/archetype-resources/src/test/java/__artifactId__/client/__projectName__Test.java @@ -23,7 +23,7 @@ public class ${projectName}Test extends GWTTestCase { } public void testOnModuleLoad() { - + // Create a container in the document final GQuery g = $("
").appendTo(document); @@ -41,7 +41,7 @@ public class ${projectName}Test extends GWTTestCase { public void run() { // assert that the font size increases assertTrue(fontSize(g) > size1); - + // trigger mouse out event final double size2 = fontSize(g); g.trigger(Event.ONMOUSEOUT); @@ -50,7 +50,7 @@ public class ${projectName}Test extends GWTTestCase { // assert that the font size decreases assertTrue(fontSize(g) < size2); g.remove(); - + // finish the test finishTest(); } diff --git a/devtest/src/main/java/com/google/gwt/query/DevTestRunner.gwt.xml b/devtest/src/main/java/com/google/gwt/query/DevTestRunner.gwt.xml index 537f0c47..401fde05 100644 --- a/devtest/src/main/java/com/google/gwt/query/DevTestRunner.gwt.xml +++ b/devtest/src/main/java/com/google/gwt/query/DevTestRunner.gwt.xml @@ -2,4 +2,4 @@ - + diff --git a/devtest/src/main/java/com/google/gwt/query/client/DevTestRunner.java b/devtest/src/main/java/com/google/gwt/query/client/DevTestRunner.java index 26b5faea..53ef8e18 100644 --- a/devtest/src/main/java/com/google/gwt/query/client/DevTestRunner.java +++ b/devtest/src/main/java/com/google/gwt/query/client/DevTestRunner.java @@ -1,2022 +1,2022 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package com.google.gwt.query.client; - -import static com.google.gwt.query.client.GQuery.$; -import static com.google.gwt.query.client.GQuery.window; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.core.client.Scheduler; -import com.google.gwt.core.client.Scheduler.RepeatingCommand; -import com.google.gwt.query.client.js.JsUtils; - -/** - * This module is thought to emulate a test environment similar to - * GWTTestCase, but running it in development mode. - * - * The main goal of it is to execute tests in a faster way, because you just - * push reload in your browser after changing any code. - * - * @author manolo - * - */ -public class DevTestRunner extends MyTestCase implements EntryPoint { - - public void onModuleLoad() { - try { - gwtSetUp(); - // Replace this with the method to run - testSomething(); - } catch (Exception ex) { - ex.printStackTrace(); - $(e).html("").after("
ERROR: " + ex.getMessage() + "
"); - } - } - - public void testSomething() { - // Copy and paste any test from the gquery suite - } - - /** - * Runs jquery code via jsni. - * - * Example: - * System.out.println(evalJQuery("$('div').size()")); - */ - private native T evalJQuery(String command) /*-{ - command = command.replace(/\$/g, "$wnd.$"); - try { - return "" + eval(command); - } catch(e) { - $wnd.alert(command + " " + e); - return ""; - } - }-*/; - - /** - * Loads jquery and schedule the execution of the method testCompare() - * which should have code to test something in both in jquery and gquery. - * - * Put this method in onModuleLoad, and replace below the method to execute - * after jquery is available - */ - public void runTestJQuery() { - JsUtils.loadScript("jquery-1.6.2.js", "jq"); - Scheduler.get().scheduleFixedDelay(new RepeatingCommand() { - private int cont = 0; - private native boolean loaded(String func) /*-{ - return eval("$wnd." + func) ? true : false; - }-*/; - public boolean execute() { - if (cont++ > 10 || JsUtils.hasProperty(window, "$")) { - - // Replace with the method to run - testJQueryCompare(); - return false; - } - return true; - } - }, 100); - } - - public void testJQueryCompare() { - $(e).html("

Content 1

"); - GQuery g = $("#child"); - Properties prop1; - - prop1 = GQuery.$$("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'"); - g.css(prop1); - validateCurCSSBoth("#child", prop1.keys()); - } - - public void validateSizesBoth(String html) { - $(e).html(html); - String gqw = "" + $(".outer").width(); - String jqw = evalJQuery("$('.outer').width()"); - String gqh = "" + $(".outer").height(); - String jqh = evalJQuery("$('.outer').height()"); - - System.out.println(".outer size: GQuery: " + gqw + "x" + gqh + " jQuery: " + jqw + "x" + jqh); - assertEquals(gqw, jqw); - assertEquals(gqh, jqh); - } - - public void validateCssBoth(String selector, boolean force, String... props) { - for (String prop: props) { - String gs = $(selector).css(prop, force); - String js = evalJQuery("$.css($('" + selector + "').get(0), '" + prop + "', " + force + ")"); - System.out.println(selector + " prop:" + prop + " force:" + force + " gQuery:" + gs + " jQuery:" + js); - assertEquals(gs.replaceAll("px", ""), js.replaceAll("px", "")); - } - } - - public void validateCurCSSBoth(String selector, String... props) { - for (String prop: props) { - String gs = Double.toString($(selector).cur(prop, true)).replaceFirst("\\.\\d+$", ""); - String js = evalJQuery("$.curCSS($('" + selector + "').get(0), '" + prop + "', true)"); - gs = gs.replaceAll("px$", ""); - js = js.replaceAll("px$", ""); - System.out.println(selector + " prop:" + prop + " gQuery:" + gs + " jQuery:" + js); - assertEquals(gs, js); - } - } - - // This method is used to initialize a huge html String, because - // java 1.5 has a limitation in the size of static strings. - private String getTestContent() { - String ret = ""; - ret += "
"; - ret += "
"; - ret += "

W3C

"; - ret += "

Selectors

"; - ret += " ."; - ret += "

W3C Working Draft 15 December 2005

"; - ret += "
"; - ret += "
This version:
"; - ret += "
"; - ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215
"; - ret += "
Latest version:"; - ret += "
"; - ret += " http://www.w3.org/TR/css3-selectors"; - ret += "
Previous version:"; - ret += "
"; - ret += " http://www.w3.org/TR/2001/CR-css3-selectors-20011113"; - ret += "
Editors:"; - ret += "
Daniel Glazman (Invited"; - ret += "
"; - ret += "
Tantek Çelik"; - ret += "
Ian"; - ret += " Hickson (Google)"; - ret += "
Peter Linss (former"; - ret += " editor, Netscape/AOL)"; - ret += "
John Williams (former editor, Quark, Inc.)"; - ret += "
"; - ret += "

"; - ret += " Copyright © 2005 W3C®"; - ret += " (MIT, ERCIM, Keio), All Rights Reserved."; - ret += " liability,"; - ret += " trademark,"; - ret += " document"; - ret += " use rules apply."; - ret += "

"; - ret += "
"; - ret += "

Abstract

"; - ret += "

Selectors are patterns that match against elements in a"; - ret += " tree. Selectors have been optimized for use with HTML and XML, and"; - ret += " are designed to be usable in performance-critical code.

"; - ret += "

CSS (Cascading"; - ret += " Style Sheets) is a language for describing the rendering of HTML and XML documents on"; - ret += " screen, on paper, in speech, etc. CSS uses Selectors for binding"; - ret += " describes extensions to the selectors defined in CSS level 2. These"; - ret += " extended selectors will be used by CSS level 3."; - ret += "

Selectors define the following function:

"; - ret += " 
expression ∗ element → boolean
"; - ret += "

That is, given an element and a selector, this specification"; - ret += " defines whether that element matches the selector.

"; - ret += "

These expressions can also be used, for instance, to select a set"; - ret += " subtree. STTS (Simple Tree Transformation Sheets), a"; - ret += " language for transforming XML trees, uses this mechanism. [STTS]

"; - ret += "

Status of this document

"; - ret += "

This section describes the status of this document at the"; - ret += " of this technical report can be found in the W3C technical reports index at"; - ret += " http://www.w3.org/TR/.

"; - ret += "

This document describes the selectors that already exist in CSS1 and CSS2, and"; - ret += " also proposes new selectors for CSS3 and other languages that may need them.

"; - ret += "

The CSS Working Group doesn't expect that all implementations of"; - ret += " CSS3 will have to implement all selectors. Instead, there will"; - ret += " will include all of the selectors.

"; - ret += "

This specification is a last call working draft for the the CSS Working Group"; - ret += " (Style Activity). This"; - ret += " document is a revision of the Candidate"; - ret += " Recommendation dated 2001 November 13, and has incorporated"; - ret += " be demonstrable.

"; - ret += "

All persons are encouraged to review and implement this"; - ret += " specification and return comments to the (archived)"; - ret += " public mailing list www-style"; - ret += " (see instructions). W3C"; - ret += " The deadline for comments is 14 January 2006.

"; - ret += "

This is still a draft document and may be updated, replaced, or"; - ret += "

This document may be available in translation."; - ret += "

"; - ret += "

Table of contents

"; - ret += " "; - ret += "
"; - ret += "

1. Introduction

"; - ret += "

1.1. Dependencies

"; - ret += "

Some features of this specification are specific to CSS, or have"; - ret += " specification, these have been described in terms of CSS2.1. [CSS21]

"; - ret += "

1.2. Terminology

"; - ret += "

All of the text of this specification is normative except"; - ret += " non-normative.

"; - ret += "

1.3. Changes from CSS2

"; - ret += "

This section is non-normative.

"; - ret += "

The main differences between the selectors in CSS2 and those in"; - ret += " Selectors are:"; - ret += "

    "; - ret += "
  • the list of basic definitions (selector, group of selectors,"; - ret += " of simple selectors, and the term 'simple selector' is now used for"; - ret += "
    • "; - ret += "
  • an optional namespace component is now allowed in type element"; - ret += " selectors, the universal selector and attribute selectors"; - ret += "
    • "; - ret += "
  • a new combinator has been"; - ret += "
    • "; - ret += "
  • new simple selectors including substring matching attribute"; - ret += " selectors, and new pseudo-classes"; - ret += "
    • "; - ret += "
  • new pseudo-elements, and introduction of the '::' convention"; - ret += "
    • "; - ret += "
  • the grammar has been rewritten
    • "; - ret += "
  • profiles to be added to specifications integrating Selectors"; - ret += " and defining the set of selectors which is actually supported by"; - ret += "
    • "; - ret += "
  • Selectors are now a CSS3 Module and an independent"; - ret += "
    • "; - ret += "
  • the specification now has its own test suite
    • "; - ret += "
"; - ret += "

2. Selectors

"; - ret += "

This section is non-normative, as it merely summarizes the"; - ret += " following sections.

"; - ret += "

A Selector represents a structure. This structure can be used as a"; - ret += " HTML or XML fragment corresponding to that structure.

"; - ret += "

Selectors may range from simple element names to rich contextual"; - ret += " representations.

"; - ret += "

The following table summarizes the Selector syntax:

"; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
PatternMeaningDescribed in sectionFirst defined in CSS level
*any elementUniversal"; - ret += " selector2
Ean element of type EType selector1
E[foo]an E element with a 'foo' attributeAttribute"; - ret += " selectors2
E[foo='bar']an E element whose 'foo' attribute value is exactly"; - ret += " Attribute"; - ret += " selectors2
E[foo~='bar']an E element whose 'foo' attribute value is a list of"; - ret += " Attribute"; - ret += " selectors2
E[foo^='bar']an E element whose 'foo' attribute value begins exactly"; - ret += " Attribute"; - ret += " selectors3
E[foo$='bar']an E element whose 'foo' attribute value ends exactly"; - ret += " Attribute"; - ret += " selectors3
E[foo*='bar']an E element whose 'foo' attribute value contains the"; - ret += " Attribute"; - ret += " selectors3
E[hreflang|='en']an E element whose 'hreflang' attribute has a"; - ret += " Attribute"; - ret += " selectors2
E:rootan E element, root of the documentStructural"; - ret += " pseudo-classes3
E:nth-child(n)an E element, the n-th child of its parentStructural"; - ret += " pseudo-classes3
E:nth-last-child(n)an E element, the n-th child of its parent, counting"; - ret += " Structural"; - ret += " pseudo-classes3
E:nth-of-type(n)an E element, the n-th sibling of its typeStructural"; - ret += " pseudo-classes3
E:nth-last-of-type(n)an E element, the n-th sibling of its type, counting"; - ret += " Structural"; - ret += " pseudo-classes3
E:first-childan E element, first child of its parentStructural"; - ret += " pseudo-classes2
E:last-childan E element, last child of its parentStructural"; - ret += " pseudo-classes3
E:first-of-typean E element, first sibling of its typeStructural"; - ret += " pseudo-classes3
E:last-of-typean E element, last sibling of its typeStructural"; - ret += " pseudo-classes3
E:only-childan E element, only child of its parentStructural"; - ret += " pseudo-classes3
E:only-of-typean E element, only sibling of its typeStructural"; - ret += " pseudo-classes3
E:emptyan E element that has no children (including text"; - ret += " Structural"; - ret += " pseudo-classes3
E:link
E:visited		an E element being the source anchor of a hyperlink of"; - ret += " The link"; - ret += " pseudo-classes1
E:active
E:hover
E:focus		an E element during certain user actionsThe user"; - ret += " action pseudo-classes1 and 2
E:targetan E element being the target of the referring URIThe target"; - ret += " pseudo-class3
E:lang(fr)an element of type E in language 'fr' (the document"; - ret += " The :lang()"; - ret += " pseudo-class2
E:enabled
E:disabled		a user interface element E which is enabled or"; - ret += " The UI element states"; - ret += " pseudo-classes3
E:checkeda user interface element E which is checked (for instance a radio-button or checkbox)"; - ret += " The UI element states"; - ret += " pseudo-classes3
E::first-linethe first formatted line of an E elementThe ::first-line"; - ret += " pseudo-element1
E::first-letterthe first formatted letter of an E elementThe ::first-letter"; - ret += " pseudo-element1
E::selectionthe portion of an E element that is currently"; - ret += " The UI element"; - ret += " fragments pseudo-elements3
E::beforegenerated content before an E elementThe ::before"; - ret += " pseudo-element2
E::aftergenerated content after an E elementThe ::after"; - ret += " pseudo-element2
E.warningan E element whose class is"; - ret += " Class"; - ret += " selectors1
E#myidan E element with ID equal to 'myid'.ID"; - ret += " selectors1
E:not(s)an E element that does not match simple selector sNegation"; - ret += " pseudo-class3
E Fan F element descendant of an E elementDescendant"; - ret += " combinator1
E > Fan F element child of an E elementChild"; - ret += " combinator2
E + Fan F element immediately preceded by an E elementAdjacent sibling combinator"; - ret += " 2
E ~ Fan F element preceded by an E elementGeneral sibling combinator"; - ret += " 3
"; - ret += "

The meaning of each selector is derived from the table above by"; - ret += " column.

"; - ret += "

3. Case sensitivity

"; - ret += "

The case sensitivity of document language element names, attribute"; - ret += " names, and attribute values in selectors depends on the document"; - ret += " but in XML, they are case-sensitive.

"; - ret += "

4. Selector syntax

"; - ret += "

A selector is a chain of one"; - ret += " or more sequences of simple selectors"; - ret += " separated by combinators.

"; - ret += "

A sequence of simple selectors"; - ret += " is a chain of simple selectors"; - ret += " that are not separated by a combinator. It"; - ret += " always begins with a type selector or a"; - ret += " universal selector. No other type"; - ret += " selector or universal selector is allowed in the sequence.

"; - ret += "

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, content selector, or pseudo-class. One pseudo-element may be appended to the last"; - ret += " sequence of simple selectors.

"; - ret += "

Combinators are: white space, 'greater-than"; - ret += " sign' (U+003E, >), 'plus sign' (U+002B,"; - ret += " +) and 'tilde' (U+007E, ~). White"; - ret += " space may appear between a combinator and the simple selectors around"; - ret += " it. Only the characters 'space' (U+0020), 'tab'"; - ret += " never part of white space.

"; - ret += "

The elements of a document tree that are represented by a selector"; - ret += " are the subjects of the selector. A"; - ret += " selector consisting of a single sequence of simple selectors"; - ret += " sequence of simple selectors and a combinator to a sequence imposes"; - ret += " simple selectors.

"; - ret += "

An empty selector, containing no sequence of simple selectors and"; - ret += " no pseudo-element, is an invalid"; - ret += " selector.

"; - ret += "

5. Groups of selectors

"; - ret += "

When several selectors share the same declarations, they may be"; - ret += " grouped into a comma-separated list. (A comma is U+002C.)

"; - ret += "
"; - ret += "

CSS examples:

"; - ret += "

In this example, we condense three rules with identical"; - ret += " declarations into one. Thus,

"; - ret += " 
h1 { font-family: sans-serif }";
-    ret += "      h3 { font-family: sans-serif }
"; - ret += "

is equivalent to:

"; - ret += " 
h1, h2, h3 { font-family: sans-serif }
"; - ret += "
"; - ret += "

Warning: the equivalence is true in this example"; - ret += " because all the selectors are valid selectors. If just one of these"; - ret += " selectors were invalid, the entire group of selectors would be"; - ret += " heading rules would be invalidated.

"; - ret += "

6. Simple selectors

"; - ret += "

6.1. Type selector

"; - ret += "

A type selector is the name of a document language"; - ret += " type in the document tree.

"; - ret += "
"; - ret += "

Example:

"; - ret += "

The following selector represents an h1 element in the"; - ret += " document tree:

"; - ret += " 
h1
"; - ret += "
"; - ret += "

6.1.1. Type selectors and namespaces

"; - ret += "

Type selectors allow an optional namespace ([XMLNAMES]) component. A namespace prefix"; - ret += " (U+007C, |).

"; - ret += "

The namespace component may be left empty to indicate that the"; - ret += " selector is only to represent elements with no declared namespace.

"; - ret += "

An asterisk may be used for the namespace prefix, indicating that"; - ret += " with no namespace).

"; - ret += "

Element type selectors that have no namespace component (no"; - ret += " element's namespace (equivalent to '*|') unless a default"; - ret += " namespace.

"; - ret += "

A type selector containing a namespace prefix that has not been"; - ret += " previously declared is an invalid selector."; - ret += " language implementing Selectors. In CSS, such a mechanism is defined"; - ret += " in the General Syntax module.

"; - ret += "

In a namespace-aware client, element type selectors will only match"; - ret += " against the local"; - ret += " part"; - ret += " of the element's qualified"; - ret += " name. See below for notes about matching"; - ret += " behaviors in down-level clients.

"; - ret += "

In summary:

"; - ret += "
"; - ret += "
ns|E
"; - ret += "
elements with name E in namespace ns
"; - ret += "
*|E
"; - ret += "
elements with name E in any namespace, including those without any"; - ret += "
"; - ret += "
|E
"; - ret += "
elements with name E without any declared namespace
"; - ret += "
E
"; - ret += "
if no default namespace has been specified, this is equivalent to *|E."; - ret += "
"; - ret += "
"; - ret += "
"; - ret += "

CSS examples:

"; - ret += " 
@namespace foo url(http://www.example.com);";
-    ret += "       h1 { color: green }
"; - ret += "

The first rule will match only h1 elements in the"; - ret += " 'http://www.example.com' namespace.

"; - ret += "

The second rule will match all elements in the"; - ret += " 'http://www.example.com' namespace.

"; - ret += "

The third rule will match only h1 elements without"; - ret += " any declared namespace.

"; - ret += "

The fourth rule will match h1 elements in any"; - ret += " namespace (including those without any declared namespace).

"; - ret += "

The last rule is equivalent to the fourth rule because no default"; - ret += " namespace has been defined.

"; - ret += "
"; - ret += "

6.2. Universal selector

"; - ret += "

The universal selector, written 'asterisk'"; - ret += " (*), represents the qualified name of any element"; - ret += " specified, see Universal selector and"; - ret += " Namespaces below.

"; - ret += "

If the universal selector is not the only component of a sequence"; - ret += " of simple selectors, the * may be omitted.

"; - ret += "
"; - ret += "

Examples:

"; - ret += "
    "; - ret += "
  • *[hreflang|=en] and [hreflang|=en] are"; - ret += "
    • "; - ret += "
  • *.warning and .warning are equivalent,"; - ret += "
    • "; - ret += "
  • *#myid and #myid are equivalent.
    • "; - ret += "
"; - ret += "
"; - ret += "

Note: it is recommended that the"; - ret += " *, representing the universal selector, not be"; - ret += " omitted.

"; - ret += "

6.2.1. Universal selector and namespaces

"; - ret += "

The universal selector allows an optional namespace component. It"; - ret += " is used as follows:

"; - ret += "
"; - ret += "
ns|*
"; - ret += "
all elements in namespace ns
"; - ret += "
*|*
"; - ret += "
all elements
"; - ret += "
|*
"; - ret += "
all elements without any declared namespace
"; - ret += "
*
"; - ret += "
if no default namespace has been specified, this is equivalent to *|*."; - ret += "
"; - ret += "
"; - ret += "

A universal selector containing a namespace prefix that has not"; - ret += " been previously declared is an invalid"; - ret += " to the language implementing Selectors. In CSS, such a mechanism is"; - ret += " defined in the General Syntax module.

"; - ret += "

6.3. Attribute selectors

"; - ret += "

Selectors allow the representation of an element's attributes. When"; - ret += " attribute selectors must be considered to match an element if that"; - ret += " attribute selector.

"; - ret += "

6.3.1. Attribute presence and values"; - ret += " selectors

"; - ret += "

CSS2 introduced four attribute selectors:

"; - ret += "
"; - ret += "
[att]"; - ret += "
Represents an element with the att attribute, whatever the"; - ret += "
"; - ret += "
[att=val]
"; - ret += "
Represents an element with the att attribute whose value is"; - ret += "
"; - ret += "
[att~=val]
"; - ret += "
Represents an element with the att attribute whose value is"; - ret += " a whitespace-separated list of words, one"; - ret += " represent anything (since the words are separated by"; - ret += "
"; - ret += "
[att|=val]"; - ret += "
Represents an element with the att attribute, its value"; - ret += " matches (e.g., the hreflang attribute on the"; - ret += " link element in HTML) as described in RFC 3066 ([RFC3066]). For lang (or"; - ret += " xml:lang) language subcode matching, please see the :lang pseudo-class."; - ret += "
"; - ret += "
"; - ret += "

Attribute values must be identifiers or strings. The"; - ret += " case-sensitivity of attribute names and values in selectors depends on"; - ret += " the document language.

"; - ret += "
"; - ret += "

Examples:

"; - ret += "

The following attribute selector represents an h1"; - ret += " element that carries the title attribute, whatever its"; - ret += " value:

"; - ret += " 
h1[title]
"; - ret += "

In the following example, the selector represents a"; - ret += " span element whose class attribute has"; - ret += " exactly the value 'example':

"; - ret += " 
span[class='example']
"; - ret += "

Multiple attribute selectors can be used to represent several"; - ret += " attribute. Here, the selector represents a span element"; - ret += " whose hello attribute has exactly the value 'Cleveland'"; - ret += " and whose goodbye attribute has exactly the value"; - ret += " 'Columbus':

"; - ret += " 
span[hello='Cleveland'][goodbye='Columbus']
"; - ret += "

The following selectors illustrate the differences between '='"; - ret += " 'copyright copyleft copyeditor' on a rel attribute. The"; - ret += " second selector will only represent an a element with"; - ret += " an href attribute having the exact value"; - ret += " 'http://www.w3.org/'.

"; - ret += " 
a[rel~='copyright']";
-    ret += "      a[href='http://www.w3.org/']
"; - ret += "

The following selector represents a link element"; - ret += " whose hreflang attribute is exactly 'fr'.

"; - ret += " 
link[hreflang=fr]
"; - ret += "

The following selector represents a link element for"; - ret += " which the values of the hreflang attribute begins with"; - ret += " 'en', including 'en', 'en-US', and 'en-cockney':

"; - ret += " 
link[hreflang|='en']
"; - ret += "

Similarly, the following selectors represents a"; - ret += " DIALOGUE element whenever it has one of two different"; - ret += " values for an attribute character:

"; - ret += " 
DIALOGUE[character=romeo]";
-    ret += "      DIALOGUE[character=juliet]
"; - ret += "
"; - ret += "

6.3.2. Substring matching attribute"; - ret += " selectors

"; - ret += "

Three additional attribute selectors are provided for matching"; - ret += " substrings in the value of an attribute:

"; - ret += "
"; - ret += "
[att^=val]
"; - ret += "
Represents an element with the att attribute whose value"; - ret += "
"; - ret += "
[att$=val]"; - ret += "
Represents an element with the att attribute whose value"; - ret += "
"; - ret += "
[att*=val]"; - ret += "
Represents an element with the att attribute whose value"; - ret += "
"; - ret += "
"; - ret += "

Attribute values must be identifiers or strings. The"; - ret += " case-sensitivity of attribute names in selectors depends on the"; - ret += " document language.

"; - ret += "
"; - ret += "

Examples:

"; - ret += "

The following selector represents an HTML object,"; - ret += " image:

"; - ret += " 
object[type^='image/']
"; - ret += "

The following selector represents an HTML anchor a with an"; - ret += " href attribute whose value ends with '.html'.

"; - ret += " 
a[href$='.html']
"; - ret += "

The following selector represents an HTML paragraph with a"; - ret += " title"; - ret += " attribute whose value contains the substring 'hello'

"; - ret += " 
p[title*='hello']
"; - ret += "
"; - ret += "

6.3.3. Attribute selectors and namespaces

"; - ret += "

Attribute selectors allow an optional namespace component to the"; - ret += " separator 'vertical bar' (|). In keeping with"; - ret += " apply to attributes, therefore attribute selectors without a namespace"; - ret += " (equivalent to '|attr'). An asterisk may be used for the"; - ret += "

An attribute selector with an attribute name containing a namespace"; - ret += " prefix that has not been previously declared is an invalid selector. The mechanism for"; - ret += " a namespace prefix is left up to the language implementing Selectors."; - ret += "

"; - ret += "

CSS examples:

"; - ret += " 
@namespace foo 'http://www.example.com';";
-    ret += "      [att] { color: green }
"; - ret += "

The first rule will match only elements with the attribute"; - ret += " att in the 'http://www.example.com' namespace with the"; - ret += " value 'val'.

"; - ret += "

The second rule will match only elements with the attribute"; - ret += " att regardless of the namespace of the attribute"; - ret += " (including no declared namespace).

"; - ret += "

The last two rules are equivalent and will match only elements"; - ret += " with the attribute att where the attribute is not"; - ret += " declared to be in a namespace.

"; - ret += "
"; - ret += "

6.3.4. Default attribute values in DTDs

"; - ret += "

Attribute selectors represent explicitly set attribute values in"; - ret += " selectors. Selectors should be designed so that they work even if the"; - ret += " default values are not included in the document tree.

"; - ret += "

More precisely, a UA is not required to read an 'external"; - ret += " subset' of the DTD but is required to look for default"; - ret += " attribute values in the document's 'internal subset.' (See [XML10] for definitions of these subsets.)

"; - ret += "

A UA that recognizes an XML namespace [XMLNAMES] is not required to use its"; - ret += " required to use its built-in knowledge of the XHTML DTD.)

"; - ret += "

Note: Typically, implementations"; - ret += " choose to ignore external subsets.

"; - ret += "
"; - ret += "

Example:

"; - ret += "

Consider an element EXAMPLE with an attribute 'notation' that has a"; - ret += " default value of 'decimal'. The DTD fragment might be

"; - ret += " 
<!ATTLIST EXAMPLE notation (decimal,octal) 'decimal'>
"; - ret += "

If the style sheet contains the rules

"; - ret += " 
EXAMPLE[notation=decimal] { /*... default property settings ...*/ }";
-    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }
"; - ret += "

the first rule will not match elements whose 'notation' attribute"; - ret += " attribute selector for the default value must be dropped:

"; - ret += " 
EXAMPLE                   { /*... default property settings ...*/ }";
-    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }
"; - ret += "

Here, because the selector EXAMPLE[notation=octal] is"; - ret += " cases' style rules.

"; - ret += "
"; - ret += "

6.4. Class selectors

"; - ret += "

Working with HTML, authors may use the period (U+002E,"; - ret += " .) notation as an alternative to the ~="; - ret += " notation when representing the class attribute. Thus, for"; - ret += " HTML, div.value and div[class~=value] have"; - ret += " 'period' (.).

"; - ret += "

UAs may apply selectors using the period (.) notation in XML"; - ret += " 1.0 [SVG] describes the SVG"; - ret += " 'class' attribute and how a UA should interpret it, and"; - ret += " similarly MathML 1.01 [MATH] describes the MathML"; - ret += " 'class' attribute.)

"; - ret += "
"; - ret += "

CSS examples:

"; - ret += "

We can assign style information to all elements with"; - ret += " class~='pastoral' as follows:

"; - ret += " 
*.pastoral { color: green }  /* all elements with class~=pastoral */
"; - ret += "

or just

"; - ret += " 
.pastoral { color: green }  /* all elements with class~=pastoral */
"; - ret += "

The following assigns style only to H1 elements with"; - ret += " class~='pastoral':

"; - ret += " 
H1.pastoral { color: green }  /* H1 elements with class~=pastoral */
"; - ret += "

Given these rules, the first H1 instance below would not have"; - ret += " green text, while the second would:

"; - ret += " 
<H1>Not green</H1>";
-    ret += "      <H1 class='pastoral'>Very green</H1>
"; - ret += "
"; - ret += "

To represent a subset of 'class' values, each value must be preceded"; - ret += " by a '.', in any order.

"; - ret += "
"; - ret += "

CSS example:

"; - ret += "

The following rule matches any P element whose 'class' attribute"; - ret += " has been assigned a list of whitespace-separated values that includes"; - ret += " 'pastoral' and 'marine':

"; - ret += " 
p.pastoral.marine { color: green }
"; - ret += "

This rule matches when class='pastoral blue aqua"; - ret += " marine' but does not match for class='pastoral"; - ret += " blue'.

"; - ret += "
"; - ret += "

Note: Because CSS gives considerable"; - ret += " not.

"; - ret += "

Note: If an element has multiple"; - ret += " this specification.

"; - ret += "

6.5. ID selectors

"; - ret += "

Document languages may contain attributes that are declared to be"; - ret += " applies.

"; - ret += "

An ID-typed attribute of a document language allows authors to"; - ret += " ID selectors represent an element instance based on its identifier. An"; - ret += " #) immediately followed by the ID value, which must be an"; - ret += " identifier.

"; - ret += "

Selectors does not specify how a UA knows the ID-typed attribute of"; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following ID selector represents an h1 element"; - ret += " whose ID-typed attribute has the value 'chapter1':

"; - ret += " 
h1#chapter1
"; - ret += "

The following ID selector represents any element whose ID-typed"; - ret += " attribute has the value 'chapter1':

"; - ret += " 
#chapter1
"; - ret += "

The following selector represents any element whose ID-typed"; - ret += " attribute has the value 'z98y'.

"; - ret += " 
*#z98y
"; - ret += "
"; - ret += "

Note. In XML 1.0 [XML10], the information about which attribute"; - ret += " should use normal attribute selectors instead:"; - ret += " [name=p371] instead of #p371. Elements in"; - ret += " XML 1.0 documents without a DTD do not have IDs at all.

"; - ret += "

If an element has multiple ID attributes, all of them must be"; - ret += " DOM3 Core, XML DTDs, and namespace-specific knowledge.

"; - ret += "

6.6. Pseudo-classes

"; - ret += "

The pseudo-class concept is introduced to permit selection based on"; - ret += " expressed using the other simple selectors.

"; - ret += "

A pseudo-class always consists of a 'colon'"; - ret += " (:) followed by the name of the pseudo-class and"; - ret += " optionally by a value between parentheses.

"; - ret += "

Pseudo-classes are allowed in all sequences of simple selectors"; - ret += " sequences of simple selectors, after the leading type selector or"; - ret += " document.

"; - ret += "

6.6.1. Dynamic pseudo-classes

"; - ret += "

Dynamic pseudo-classes classify elements on characteristics other"; - ret += " that cannot be deduced from the document tree.

"; - ret += "

Dynamic pseudo-classes do not appear in the document source or"; - ret += " document tree.

"; - ret += "
The link pseudo-classes: :link and :visited
"; - ret += "

User agents commonly display unvisited links differently from"; - ret += " previously visited ones. Selectors"; - ret += " provides the pseudo-classes :link and"; - ret += " :visited to distinguish them:

"; - ret += "
    "; - ret += "
  • The :link pseudo-class applies to links that have"; - ret += "
    • "; - ret += "
  • The :visited pseudo-class applies once the link has"; - ret += "
    • "; - ret += "
"; - ret += "

After some amount of time, user agents may choose to return a"; - ret += " visited link to the (unvisited) ':link' state.

"; - ret += "

The two states are mutually exclusive.

"; - ret += "
"; - ret += "

Example:

"; - ret += "

The following selector represents links carrying class"; - ret += " external and already visited:

"; - ret += " 
a.external:visited
"; - ret += "
"; - ret += "

Note: It is possible for style sheet"; - ret += "

UAs may therefore treat all links as unvisited links, or implement"; - ret += " and unvisited links differently.

"; - ret += "
The user action pseudo-classes"; - ret += " :hover, :active, and :focus
"; - ret += "

Interactive user agents sometimes change the rendering in response"; - ret += " to user actions. Selectors provides"; - ret += " acting on.

"; - ret += "
    "; - ret += "
  • The :hover pseudo-class applies while the user"; - ret += " element. User agents not that do not support interactive"; - ret += " media do not have to support this pseudo-class. Some conforming"; - ret += " user agents that support interactive"; - ret += " media may not be able to support this pseudo-class (e.g., a pen"; - ret += "
    • "; - ret += "
  • The :active pseudo-class applies while an element"; - ret += "
    • "; - ret += "
  • The :focus pseudo-class applies while an element"; - ret += "
    • "; - ret += "
"; - ret += "

There may be document language or implementation specific limits on"; - ret += " which elements can become :active or acquire"; - ret += " :focus.

"; - ret += "

These pseudo-classes are not mutually exclusive. An element may"; - ret += " match several pseudo-classes at the same time.

"; - ret += "

Selectors doesn't define if the parent of an element that is"; - ret += " ':active' or ':hover' is also in that state.

"; - ret += "
"; - ret += "

Examples:

"; - ret += " 
a:link    /* unvisited links */";
-    ret += "      a:active  /* active links */
"; - ret += "

An example of combining dynamic pseudo-classes:

"; - ret += " 
a:focus";
-    ret += "      a:focus:hover
"; - ret += "

The last selector matches a elements that are in"; - ret += " the pseudo-class :focus and in the pseudo-class :hover.

"; - ret += "
"; - ret += "

Note: An element can be both ':visited'"; - ret += " and ':active' (or ':link' and ':active').

"; - ret += "

6.6.2. The target pseudo-class :target

"; - ret += "

Some URIs refer to a location within a resource. This kind of URI"; - ret += " identifier (called the fragment identifier).

"; - ret += "

URIs with fragment identifiers link to a certain element within the"; - ret += " pointing to an anchor named section_2 in an HTML"; - ret += " document:

"; - ret += " 
http://example.com/html/top.html#section_2
"; - ret += "

A target element can be represented by the :target"; - ret += " the document has no target element.

"; - ret += "
"; - ret += "

Example:

"; - ret += " 
p.note:target
"; - ret += "

This selector represents a p element of class"; - ret += " note that is the target element of the referring"; - ret += " URI.

"; - ret += "
"; - ret += "
"; - ret += "

CSS example:

"; - ret += "

Here, the :target pseudo-class is used to make the"; - ret += " target element red and place an image before it, if there is one:

"; - ret += " 
*:target { color : red }";
-    ret += "      *:target::before { content : url(target.png) }
"; - ret += "
"; - ret += "

6.6.3. The language pseudo-class :lang

"; - ret += "

If the document language specifies how the human language of an"; - ret += " element is determined, it is possible to write selectors that"; - ret += " represent an element based on its language. For example, in HTML [HTML4], the language is determined by a"; - ret += " combination of the lang attribute, the meta"; - ret += " headers). XML uses an attribute called xml:lang, and"; - ret += " the language.

"; - ret += "

The pseudo-class :lang(C) represents an element that"; - ret += " :lang() selector is based solely on the identifier C"; - ret += " element's language value, in the same way as if performed by the '|=' operator in attribute"; - ret += " selectors. The identifier C does not have to be a valid language"; - ret += " name.

"; - ret += "

C must not be empty. (If it is, the selector is invalid.)

"; - ret += "

Note: It is recommended that"; - ret += " documents and protocols indicate language using codes from RFC 3066 [RFC3066] or its successor, and by means of"; - ret += " 'xml:lang' attributes in the case of XML-based documents [XML10]. See "; - ret += " 'FAQ: Two-letter or three-letter language codes.'

"; - ret += "
"; - ret += "

Examples:

"; - ret += "

The two following selectors represent an HTML document that is in"; - ret += " Belgian, French, or German. The two next selectors represent"; - ret += " q quotations in an arbitrary element in Belgian, French,"; - ret += " or German.

"; - ret += " 
html:lang(fr-be)";
-    ret += "      :lang(de) > q
"; - ret += "
"; - ret += "

6.6.4. The UI element states pseudo-classes

"; - ret += "
The :enabled and :disabled pseudo-classes
"; - ret += "

The :enabled pseudo-class allows authors to customize"; - ret += " an enabled input element without also specifying what it"; - ret += " would look like when it was disabled.

"; - ret += "

Similar to :enabled, :disabled allows the"; - ret += " element should look.

"; - ret += "

Most elements will be neither enabled nor disabled. An element is"; - ret += " presently activate it or transfer focus to it.

"; - ret += "
The :checked pseudo-class
"; - ret += "

Radio and checkbox elements can be toggled by the user. Some menu"; - ret += " toggled 'on' the :checked pseudo-class applies. The"; - ret += " :checked pseudo-class initially applies to such elements"; - ret += " that have the HTML4 selected and checked"; - ret += " attributes as described in Section"; - ret += " 17.2.1 of HTML4, but of course the user can toggle 'off' such"; - ret += " elements in which case the :checked pseudo-class would no"; - ret += " longer apply. While the :checked pseudo-class is dynamic"; - ret += " on the presence of the semantic HTML4 selected and"; - ret += " checked attributes, it applies to all media."; - ret += "

The :indeterminate pseudo-class
"; - ret += "
"; - ret += "

Radio and checkbox elements can be toggled by the user, but are"; - ret += " This can be due to an element attribute, or DOM manipulation.

"; - ret += "

A future version of this specification may introduce an"; - ret += " :indeterminate pseudo-class that applies to such elements."; - ret += "

"; - ret += "
"; - ret += "

6.6.5. Structural pseudo-classes

"; - ret += "

Selectors introduces the concept of structural"; - ret += " pseudo-classes to permit selection based on extra information that"; - ret += " the document tree but cannot be represented by other simple selectors or"; - ret += "

Note that standalone pieces of PCDATA (text nodes in the DOM) are"; - ret += "

:root pseudo-class
"; - ret += "

The :root pseudo-class represents an element that is"; - ret += " HTML element."; - ret += "

:nth-child() pseudo-class
"; - ret += "

The"; - ret += " :nth-child(an+b)"; - ret += " an+b-1 siblings"; - ret += " before it in the document tree, for a given positive"; - ret += " integer or zero value of n, and has a parent element. In"; - ret += " other words, this matches the bth child of an element after"; - ret += " all the children have been split into groups of a elements"; - ret += " each. For example, this allows the selectors to address every other"; - ret += " of paragraph text in a cycle of four. The a and"; - ret += " b values must be zero, negative integers or positive"; - ret += "

In addition to this, :nth-child() can take"; - ret += " 'odd' and 'even' as arguments instead."; - ret += " 'odd' has the same signification as 2n+1,"; - ret += " and 'even' has the same signification as 2n."; - ret += "

"; - ret += "

Examples:

"; - ret += " 
tr:nth-child(2n+1) /* represents every odd row of an HTML table */";
-    ret += "      p:nth-child(4n+4) { color: purple; }
"; - ret += "
"; - ret += "

When a=0, no repeating is used, so for example"; - ret += " :nth-child(0n+5) matches only the fifth child. When"; - ret += " a=0, the an part need not be"; - ret += " :nth-child(b) and the last example simplifies"; - ret += " to :nth-child(5)."; - ret += "

"; - ret += "

Examples:

"; - ret += " 
foo:nth-child(0n+1)   /* represents an element foo, first child of its parent element */";
-    ret += "      foo:nth-child(1)      /* same */
"; - ret += "
"; - ret += "

When a=1, the number may be omitted from the rule."; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following selectors are therefore equivalent:

"; - ret += " 
bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */";
-    ret += "      bar                   /* same but lower specificity (0,0,1) */
"; - ret += "
"; - ret += "

If b=0, then every ath element is picked. In"; - ret += " such a case, the b part may be omitted."; - ret += "

"; - ret += "

Examples:

"; - ret += " 
tr:nth-child(2n+0) /* represents every even row of an HTML table */";
-    ret += "      tr:nth-child(2n) /* same */
"; - ret += "
"; - ret += "

If both a and b are equal to zero, the"; - ret += " pseudo-class represents no element in the document tree.

"; - ret += "

The value a can be negative, but only the positive"; - ret += " values of an+b, for"; - ret += " n≥0, may represent an element in the document"; - ret += " tree.

"; - ret += "
"; - ret += "

Example:

"; - ret += " 
html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */
"; - ret += "
"; - ret += "

When the value b is negative, the '+' character in the"; - ret += " character indicating the negative value of b).

"; - ret += "
"; - ret += "

Examples:

"; - ret += " 
:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */";
-    ret += "      :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */
"; - ret += "
"; - ret += "
:nth-last-child() pseudo-class
"; - ret += "

The :nth-last-child(an+b)"; - ret += " an+b-1 siblings"; - ret += " after it in the document tree, for a given positive"; - ret += " integer or zero value of n, and has a parent element. See"; - ret += " :nth-child() pseudo-class for the syntax of its argument."; - ret += " It also accepts the 'even' and 'odd' values"; - ret += "

"; - ret += "

Examples:

"; - ret += " 
tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */";
-    ret += "                                    counting from the last one */
"; - ret += "
"; - ret += "
:nth-of-type() pseudo-class
"; - ret += "

The :nth-of-type(an+b)"; - ret += " an+b-1 siblings with the same"; - ret += " element name before it in the document tree, for a"; - ret += " given zero or positive integer value of n, and has a"; - ret += " parent element. In other words, this matches the bth child"; - ret += " groups of a elements each. See :nth-child() pseudo-class"; - ret += " 'even' and 'odd' values."; - ret += "

"; - ret += "

CSS example:

"; - ret += "

This allows an author to alternate the position of floated images:

"; - ret += " 
img:nth-of-type(2n+1) { float: right; }";
-    ret += "      img:nth-of-type(2n) { float: left; }
"; - ret += "
"; - ret += "
:nth-last-of-type() pseudo-class
"; - ret += "

The :nth-last-of-type(an+b)"; - ret += " an+b-1 siblings with the same"; - ret += " element name after it in the document tree, for a"; - ret += " given zero or positive integer value of n, and has a"; - ret += " parent element. See :nth-child() pseudo-class for the"; - ret += " syntax of its argument. It also accepts the 'even' and 'odd'"; - ret += "

"; - ret += "

Example:

"; - ret += "

To represent all h2 children of an XHTML"; - ret += " body except the first and last, one could use the"; - ret += " following selector:

"; - ret += " 
body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
"; - ret += "

In this case, one could also use :not(), although the"; - ret += " selector ends up being just as long:

"; - ret += " 
body > h2:not(:first-of-type):not(:last-of-type)
"; - ret += "
"; - ret += "
:first-child pseudo-class
"; - ret += "

Same as :nth-child(1). The :first-child"; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following selector represents a p element that is"; - ret += " the first child of a div element:

"; - ret += " 
div > p:first-child
"; - ret += "

This selector can represent the p inside the"; - ret += " div of the following fragment:

"; - ret += " 
<p> The last P before the note.</p>";
-    ret += "      </div>
"; - ret += " but cannot represent the second p in the following"; - ret += " 
<p> The last P before the note.</p>";
-    ret += "      </div>
"; - ret += "

The following two selectors are usually equivalent:

"; - ret += " 
* > a:first-child /* a is first child of any element */";
-    ret += "      a:first-child /* Same (assuming a is not the root element) */
"; - ret += "
"; - ret += "
:last-child pseudo-class
"; - ret += "

Same as :nth-last-child(1). The :last-child"; - ret += "

"; - ret += "

Example:

"; - ret += "

The following selector represents a list item li that"; - ret += " is the last child of an ordered list ol."; - ret += " 

ol > li:last-child
"; - ret += "
"; - ret += "
:first-of-type pseudo-class
"; - ret += "

Same as :nth-of-type(1). The :first-of-type"; - ret += "

"; - ret += "

Example:

"; - ret += "

The following selector represents a definition title"; - ret += " dt inside a definition list dl, this"; - ret += " dt being the first of its type in the list of children of"; - ret += " its parent element.

"; - ret += " 
dl dt:first-of-type
"; - ret += "

It is a valid description for the first two dt"; - ret += " elements in the following example but not for the third one:

"; - ret += " 
<dl>";
-    ret += "      </dl>
"; - ret += "
"; - ret += "
:last-of-type pseudo-class
"; - ret += "

Same as :nth-last-of-type(1). The"; - ret += " :last-of-type pseudo-class represents an element that is"; - ret += " element.

"; - ret += "
"; - ret += "

Example:

"; - ret += "

The following selector represents the last data cell"; - ret += " td of a table row.

"; - ret += " 
tr > td:last-of-type
"; - ret += "
"; - ret += "
:only-child pseudo-class
"; - ret += "

Represents an element that has a parent element and whose parent"; - ret += " :first-child:last-child or"; - ret += " :nth-child(1):nth-last-child(1), but with a lower"; - ret += " specificity.

"; - ret += "
:only-of-type pseudo-class
"; - ret += "

Represents an element that has a parent element and whose parent"; - ret += " as :first-of-type:last-of-type or"; - ret += " :nth-of-type(1):nth-last-of-type(1), but with a lower"; - ret += " specificity.

"; - ret += "
:empty pseudo-class
"; - ret += "

The :empty pseudo-class represents an element that has"; - ret += " empty or not.

"; - ret += "
"; - ret += "

Examples:

"; - ret += "

p:empty is a valid representation of the following fragment:"; - ret += "

"; - ret += " 
<p></p>
"; - ret += "

foo:empty is not a valid representation for the"; - ret += " following fragments:

"; - ret += " 
<foo>bar</foo>
"; - ret += " 
<foo><bar>bla</bar></foo>
"; - ret += " 
<foo>this is not <bar>:empty</bar></foo>
"; - ret += "
"; - ret += "

6.6.6. Blank

"; - ret += " "; - ret += "

This section intentionally left blank.

"; - ret += " "; - ret += "

6.6.7. The negation pseudo-class

"; - ret += "

The negation pseudo-class, :not(X), is a"; - ret += " functional notation taking a simple"; - ret += " selector (excluding the negation pseudo-class itself and"; - ret += " "; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following CSS selector matches all button"; - ret += " elements in an HTML document that are not disabled.

"; - ret += " 
button:not([DISABLED])
"; - ret += "

The following selector represents all but FOO"; - ret += " elements.

"; - ret += " 
*:not(FOO)
"; - ret += "

The following group of selectors represents all HTML elements"; - ret += " except links.

"; - ret += " 
html|*:not(:link):not(:visited)
"; - ret += "
"; - ret += "

Default namespace declarations do not affect the argument of the"; - ret += " type selector.

"; - ret += "
"; - ret += "

Examples:

"; - ret += "

Assuming that the default namespace is bound to"; - ret += " elements that are not in that namespace:

"; - ret += " 
*|*:not(*)
"; - ret += "

The following CSS selector matches any element being hovered,"; - ret += " rule when they are being hovered.

"; - ret += " 
*|*:not(:hover)
"; - ret += "
"; - ret += "

Note: the :not() pseudo allows"; - ret += " useless selectors to be written. For instance :not(*|*),"; - ret += " which represents no element at all, or foo:not(bar),"; - ret += " which is equivalent to foo but with a higher"; - ret += " specificity.

"; - ret += "

7. Pseudo-elements

"; - ret += "

Pseudo-elements create abstractions about the document tree beyond"; - ret += " source document (e.g., the ::before and"; - ret += " ::after pseudo-elements give access to generated"; - ret += " content).

"; - ret += "

A pseudo-element is made of two colons (::) followed"; - ret += " by the name of the pseudo-element.

"; - ret += "

This :: notation is introduced by the current document"; - ret += " :first-line, :first-letter,"; - ret += " :before and :after). This compatibility is"; - ret += " not allowed for the new pseudo-elements introduced in CSS level 3.

"; - ret += "

Only one pseudo-element may appear per selector, and if present it"; - ret += " must appear after the sequence of simple selectors that represents the"; - ret += " subjects of the selector. A"; - ret += " pesudo-elements per selector.

"; - ret += "

7.1. The ::first-line pseudo-element

"; - ret += "

The ::first-line pseudo-element describes the contents"; - ret += "

"; - ret += "

CSS example:

"; - ret += " 
p::first-line { text-transform: uppercase }
"; - ret += "

The above rule means 'change the letters of the first line of every"; - ret += " paragraph to uppercase'.

"; - ret += "
"; - ret += "

The selector p::first-line does not match any real"; - ret += " agents will insert at the beginning of every paragraph.

"; - ret += "

Note that the length of the first line depends on a number of"; - ret += " an ordinary HTML paragraph such as:

"; - ret += " 
      <P>This is a somewhat long HTML ";
-    ret += "
"; - ret += "

the lines of which happen to be broken as follows:"; - ret += " 

      THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT";
-    ret += "
"; - ret += "

This paragraph might be 'rewritten' by user agents to include the"; - ret += " fictional tag sequence for ::first-line. This"; - ret += " fictional tag sequence helps to show how properties are inherited.

"; - ret += " 
      <P><P::first-line> This is a somewhat long HTML ";
-    ret += "      paragraph that </P::first-line> will be broken into several";
-    ret += "
"; - ret += "

If a pseudo-element breaks up a real element, the desired effect"; - ret += " with a span element:

"; - ret += " 
      <P><SPAN class='test'> This is a somewhat long HTML";
-    ret += "      lines.</SPAN> The first line will be identified";
-    ret += "
"; - ret += "

the user agent could simulate start and end tags for"; - ret += " span when inserting the fictional tag sequence for"; - ret += " ::first-line."; - ret += " 

      <P><P::first-line><SPAN class='test'> This is a";
-    ret += "      paragraph that will </SPAN></P::first-line><SPAN";
-    ret += "          class='test'> be";
-    ret += "      lines.</SPAN> The first line will be identified";
-    ret += "
"; - ret += "

In CSS, the ::first-line pseudo-element can only be"; - ret += " or a table-cell.

"; - ret += "

The 'first formatted line' of an"; - ret += " line of the div in <DIV><P>This"; - ret += " line...</P></DIV> is the first line of the p"; - ret += " that both p and div are block-level)."; - ret += "

The first line of a table-cell or inline-block cannot be the first"; - ret += " formatted line of an ancestor element. Thus, in <DIV><P"; - ret += " etcetera</DIV> the first formatted line of the"; - ret += " div is not the line 'Hello'."; - ret += "

Note that the first line of the p in this"; - ret += " fragment: <p><br>First... doesn't contain any"; - ret += " letters (assuming the default style for br in HTML"; - ret += "

A UA should act as if the fictional start tags of the"; - ret += " ::first-line pseudo-elements were nested just inside the"; - ret += " is an example. The fictional tag sequence for

"; - ret += " 
      <DIV>";
-    ret += "
"; - ret += "

is

"; - ret += " 
      <DIV>";
-    ret += "
"; - ret += "

The ::first-line pseudo-element is similar to an"; - ret += " following properties apply to a ::first-line"; - ret += " properties as well.

"; - ret += "

7.2. The ::first-letter pseudo-element

"; - ret += "

The ::first-letter pseudo-element represents the first"; - ret += " is 'none'; otherwise, it is similar to a floated element.

"; - ret += "

In CSS, these are the properties that apply to ::first-letter"; - ret += " of the letter, unlike for normal elements.

"; - ret += "
"; - ret += "

Example:

"; - ret += "

This example shows a possible rendering of an initial cap. Note"; - ret += " ::first-letter"; - ret += " fictional start tag of the first letter is inside the span,"; - ret += " the font weight of the first letter is normal, not bold as the span:"; - ret += " 

      p { line-height: 1.1 }";
-    ret += "
"; - ret += "
"; - ret += "

Image illustrating the ::first-letter pseudo-element"; - ret += "

"; - ret += "
"; - ret += "
"; - ret += "

The following CSS will make a drop cap initial letter span about two"; - ret += " lines:

"; - ret += " 
      <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>";
-    ret += "
"; - ret += "

This example might be formatted as follows:

"; - ret += "
"; - ret += "

Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements"; - ret += "

"; - ret += "
"; - ret += "

The fictional tag sequence is:

"; - ret += " 
      <P>";
-    ret += "
"; - ret += "

Note that the ::first-letter pseudo-element tags abut"; - ret += " block element.

"; - ret += "

In order to achieve traditional drop caps formatting, user agents"; - ret += " glyph outline may be taken into account when formatting.

"; - ret += "

Punctuation (i.e, characters defined in Unicode in the 'open' (Ps),"; - ret += " be included. [UNICODE]

"; - ret += "
"; - ret += "

Quotes that precede the"; - ret += " first letter should be included.

"; - ret += "
"; - ret += "

The ::first-letter also applies if the first letter is"; - ret += " money.'

"; - ret += "

In CSS, the ::first-letter pseudo-element applies to"; - ret += " elements. A future version of this specification"; - ret += " types.

"; - ret += "

The ::first-letter pseudo-element can be used with all"; - ret += " the element, even if that first text is in a descendant.

"; - ret += "
"; - ret += "

Example:

"; - ret += "

The fictional tag sequence for this HTMLfragment:"; - ret += " 

<div>";
-    ret += "      <p>The first text.
"; - ret += "

is:"; - ret += " 

<div>";
-    ret += "      <p><div::first-letter><p::first-letter>T</...></...>he first text.
"; - ret += "
"; - ret += "

The first letter of a table-cell or inline-block cannot be the"; - ret += " first letter of an ancestor element. Thus, in <DIV><P"; - ret += " etcetera</DIV> the first letter of the div is"; - ret += " letter 'H'. In fact, the div doesn't have a first letter."; - ret += "

The first letter must occur on the first formatted line. For example, in"; - ret += " this fragment: <p><br>First... the first line"; - ret += " doesn't contain any letters and ::first-letter doesn't"; - ret += " match anything (assuming the default style for br in HTML"; - ret += "

In CSS, if an element is a list item ('display: list-item'), the"; - ret += " ::first-letter applies to the first letter in the"; - ret += " ::first-letter on list items with 'list-style-position:"; - ret += " inside'. If an element has ::before or"; - ret += " ::after content, the ::first-letter applies"; - ret += " to the first letter of the element including that content."; - ret += "

"; - ret += "

Example:

"; - ret += "

After the rule 'p::before {content: 'Note: '}', the selector"; - ret += " 'p::first-letter' matches the 'N' of 'Note'.

"; - ret += "
"; - ret += "

Some languages may have specific rules about how to treat certain"; - ret += " considered within the ::first-letter pseudo-element."; - ret += "

If the letters that would form the ::first-letter are not in the"; - ret += " same element, such as ''T' in <p>'<em>T..., the UA"; - ret += " both elements, or simply not create a pseudo-element.

"; - ret += "

Similarly, if the first letter(s) of the block are not at the start"; - ret += "

"; - ret += "

Example:

"; - ret += "

The following example illustrates"; - ret += " paragraph will be 'red'.

"; - ret += " 
p { color: red; font-size: 12pt }";
-    ret += "      <P>Some text that ends up on two lines</P>
"; - ret += "

Assuming that a line break will occur before the word 'ends', the"; - ret += " fictional tag"; - ret += " sequence for this fragment might be:

"; - ret += " 
<P>";
-    ret += "      </P>
"; - ret += "

Note that the ::first-letter element is inside the ::first-line"; - ret += " element. Properties set on ::first-line are inherited by"; - ret += " ::first-letter, but are overridden if the same property is"; - ret += " ::first-letter.

"; - ret += "
"; - ret += "

7.3. The ::selection"; - ret += " pseudo-element

"; - ret += "

The ::selection pseudo-element applies to the portion"; - ret += " field. This pseudo-element should not be confused with the :checked pseudo-class (which used to be"; - ret += " named :selected)"; - ret += "

Although the ::selection pseudo-element is dynamic in"; - ret += " [CSS21]) which was originally rendered to a"; - ret += " ::selection state to that other medium, and have all the"; - ret += " required — UAs may omit the ::selection"; - ret += "

These are the CSS properties that apply to ::selection"; - ret += " ::selection may be ignored."; - ret += "

7.4. The ::before and ::after pseudo-elements

"; - ret += "

The ::before and ::after pseudo-elements"; - ret += " content. They are explained in CSS 2.1 [CSS21].

"; - ret += "

When the ::first-letter and ::first-line"; - ret += " pseudo-elements are combined with ::before and"; - ret += " ::after, they apply to the first letter or line of the"; - ret += " element including the inserted text.

"; - ret += "

8. Combinators

"; - ret += "

8.1. Descendant combinator

"; - ret += "

At times, authors may want selectors to describe an element that is"; - ret += " EM element that is contained within an H1"; - ret += " descendant combinator is white space that"; - ret += " separates two sequences of simple selectors. A selector of the form"; - ret += " 'A B' represents an element B that is an"; - ret += " arbitrary descendant of some ancestor element A."; - ret += "

"; - ret += "

Examples:

"; - ret += "

For example, consider the following selector:

"; - ret += " 
h1 em
"; - ret += "

It represents an em element being the descendant of"; - ret += " an h1 element. It is a correct and valid, but partial,"; - ret += " description of the following fragment:

"; - ret += " 
<h1>This <span class='myclass'>headline";
-    ret += "      is <em>very</em> important</span></h1>
"; - ret += "

The following selector:

"; - ret += " 
div * p
"; - ret += "

represents a p element that is a grandchild or later"; - ret += " descendant of a div element. Note the whitespace on"; - ret += " of the P.

"; - ret += "

The following selector, which combines descendant combinators and"; - ret += " attribute selectors, represents an"; - ret += " element that (1) has the href attribute set and (2) is"; - ret += " inside a p that is itself inside a div:

"; - ret += " 
div p *[href]
"; - ret += "
"; - ret += "

8.2. Child combinators

"; - ret += "

A child combinator describes a childhood relationship"; - ret += " 'greater-than sign' (>) character and"; - ret += " separates two sequences of simple selectors."; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following selector represents a p element that is"; - ret += " child of body:

"; - ret += " 
body > p
"; - ret += "

The following example combines descendant combinators and child"; - ret += " combinators.

"; - ret += " 
div ol>li p
"; - ret += " "; - ret += "

It represents a p element that is a descendant of an"; - ret += " li element; the li element must be the"; - ret += " child of an ol element; the ol element must"; - ret += " be a descendant of a div. Notice that the optional white"; - ret += " space around the '>' combinator has been left out.

"; - ret += "
"; - ret += "

For information on selecting the first child of an element, please"; - ret += " see the section on the :first-child pseudo-class"; - ret += " above.

"; - ret += "

8.3. Sibling combinators

"; - ret += "

There are two different sibling combinators: the adjacent sibling"; - ret += " considering adjacency of elements.

"; - ret += "

8.3.1. Adjacent sibling combinator"; - ret += "

"; - ret += "

The adjacent sibling combinator is made of the 'plus"; - ret += " sign' (U+002B, +) character that separates two"; - ret += " sequences of simple selectors. The elements represented by the two"; - ret += " represented by the second one.

"; - ret += "
"; - ret += "

Examples:

"; - ret += "

The following selector represents a p element"; - ret += " immediately following a math element:

"; - ret += " 
math + p
"; - ret += "

The following selector is conceptually similar to the one in the"; - ret += " adds a constraint to the h1 element, that it must have"; - ret += " class='opener':

"; - ret += " 
h1.opener + h2
"; - ret += "
"; - ret += "

8.3.2. General sibling combinator"; - ret += "

"; - ret += "

The general sibling combinator is made of the 'tilde'"; - ret += " (U+007E, ~) character that separates two sequences of"; - ret += " simple selectors. The elements represented by the two sequences share"; - ret += " represented by the second one.

"; - ret += "
"; - ret += "

Example:

"; - ret += " 
h1 ~ pre
"; - ret += "

represents a pre element following an h1. It"; - ret += " is a correct and valid, but partial, description of:

"; - ret += " 
<h1>Definition of the function a</h1>";
-    ret += "      <pre>function a(x) = 12x/13.5</pre>
"; - ret += "
"; - ret += "

9. Calculating a selector's specificity

"; - ret += "

A selector's specificity is calculated as follows:

"; - ret += "
    "; - ret += "
  • count the number of ID selectors in the selector (= a)
    • "; - ret += "
  • count the number of class selectors, attributes selectors, and"; - ret += "
    • "; - ret += "
  • count the number of element names in the selector (= c)
    • "; - ret += "
  • ignore pseudo-elements
    • "; - ret += "
"; - ret += "

Selectors inside the negation pseudo-class"; - ret += " a pseudo-class.

"; - ret += "

Concatenating the three numbers a-b-c (in a number system with a"; - ret += " large base) gives the specificity.

"; - ret += "
"; - ret += "

Examples:

"; - ret += " 
*               /* a=0 b=0 c=0 -> specificity =   0 */";
-    ret += "
"; - ret += "
"; - ret += "

Note: the specificity of the styles"; - ret += " specified in an HTML style attribute is described in CSS"; - ret += " 2.1. [CSS21].

"; - ret += "

10. The grammar of Selectors

"; - ret += "

10.1. Grammar

"; - ret += "

The grammar below defines the syntax of Selectors. It is globally"; - ret += " shorthand notations beyond Yacc (see [YACC])"; - ret += " are used:

"; - ret += "
    "; - ret += "
  • *: 0 or more"; - ret += "
  • +: 1 or more"; - ret += "
  • ?: 0 or 1"; - ret += "
  • |: separates alternatives"; - ret += "
  • [ ]: grouping
    • "; - ret += "
"; - ret += "

The productions are:

"; - ret += " 
selectors_group";
-    ret += "        ;
"; - ret += "

10.2. Lexical scanner

"; - ret += "

The following is the tokenizer, written in Flex (see"; - ret += " [FLEX]) notation. The tokenizer is"; - ret += " case-insensitive.

"; - ret += "

The two occurrences of '\377' represent the highest character"; - ret += " possible code point in Unicode/ISO-10646. [UNICODE]

"; - ret += " 
%option case-insensitive";
-    ret += "      .                return *yytext;
"; - ret += "

11. Namespaces and down-level clients

"; - ret += "

An important issue is the interaction of CSS selectors with XML"; - ret += " to construct a CSS style sheet which will properly match selectors in"; - ret += " is possible to construct a style sheet in which selectors would match"; - ret += " elements and attributes correctly.

"; - ret += "

It should be noted that a down-level CSS client will (if it"; - ret += " @namespace at-rules, as well as all style rules that make"; - ret += " use of namespace qualified element type or attribute selectors. The"; - ret += " than possibly match them incorrectly.

"; - ret += "

The use of default namespaces in CSS makes it possible to write"; - ret += " element type selectors that will function in both namespace aware CSS"; - ret += " down-level clients may incorrectly match selectors against XML"; - ret += " elements in other namespaces.

"; - ret += "

The following are scenarios and examples in which it is possible to"; - ret += " that do not implement this proposal.

"; - ret += "
    "; - ret += "
  1. "; - ret += "

    The XML document does not use namespaces.

    "; - ret += "
      "; - ret += "
    • In this case, it is obviously not necessary to declare or use"; - ret += " attribute selectors will function adequately in a down-level"; - ret += "
      • "; - ret += "
    • In a CSS namespace aware client, the default behavior of"; - ret += " element selectors matching without regard to namespace will"; - ret += " present. However, the use of specific element type selectors"; - ret += " match only elements that have no namespace ('|name')"; - ret += " will guarantee that selectors will match only XML elements that"; - ret += "
      • "; - ret += "
    "; - ret += "
    2. "; - ret += "
  2. "; - ret += "

    The XML document defines a single, default namespace used"; - ret += " names.

    "; - ret += "
      "; - ret += "
    • In this case, a down-level client will function as if"; - ret += " element type and attribute selectors will match against all"; - ret += "
      • "; - ret += "
    "; - ret += "
    3. "; - ret += "
  3. "; - ret += "

    The XML document does not use a default namespace, all"; - ret += " to the same URI).

    "; - ret += "
      "; - ret += "
    • In this case, the down-level client will view and match"; - ret += " element type and attribute selectors based on their fully"; - ret += " qualified name, not the local part as outlined in the Type selectors and Namespaces"; - ret += " selectors may be declared using an escaped colon"; - ret += " '\\:'"; - ret += " 'html\\:h1' will match"; - ret += " <html:h1>. Selectors using the qualified name"; - ret += "
      • "; - ret += "
    • Note that selectors declared in this fashion will"; - ret += " only match in down-level clients. A CSS namespace aware"; - ret += " client will match element type and attribute selectors based on"; - ret += " the name's local part. Selectors declared with the fully"; - ret += "
      • "; - ret += "
    "; - ret += "
    4. "; - ret += "
"; - ret += "

In other scenarios: when the namespace prefixes used in the XML are"; - ret += " different namespace URIs within the same document, or in"; - ret += " a CSS and XML namespace aware client.

"; - ret += "

12. Profiles

"; - ret += "

Each specification using Selectors must define the subset of W3C"; - ret += " Selectors it allows and excludes, and describe the local meaning of"; - ret += " all the components of that subset.

"; - ret += "

Non normative examples:"; - ret += "

"; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
Selectors profile
SpecificationCSS level 1
Acceptstype selectors
class selectors
ID selectors
:link,"; - ret += " :visited and :active pseudo-classes
descendant combinator"; - ret += "
::first-line and ::first-letter pseudo-elements"; - ret += "
Excludes"; - ret += "

universal selector
attribute selectors
:hover and"; - ret += " pseudo-classes
:target pseudo-class
:lang()"; - ret += " pseudo-class
all UI"; - ret += " element states pseudo-classes
all structural"; - ret += " pseudo-classes
negation pseudo-class
all"; - ret += " UI element fragments pseudo-elements
::before and ::after"; - ret += " pseudo-elements
child combinators
sibling combinators"; - ret += "

namespaces

Extra constraintsonly one class selector allowed per sequence of simple"; - ret += " selectors"; - ret += "
"; - ret += "

"; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
Selectors profile
SpecificationCSS level 2
Acceptstype selectors
universal selector
attribute presence and"; - ret += " values selectors
class selectors
ID selectors
:link,"; - ret += "
descendant combinator
child combinator
adjacent"; - ret += " combinator
::first-line and ::first-letter"; - ret += " pseudo-elements
::before"; - ret += "
Excludes"; - ret += "

content selectors
substring matching attribute"; - ret += " selectors
:target pseudo-classes
all UI element"; - ret += " states pseudo-classes
all structural pseudo-classes other"; - ret += " than :first-child
negation pseudo-class
all UI element"; - ret += " fragments pseudo-elements
general sibling combinators"; - ret += "

namespaces

Extra constraintsmore than one class selector per sequence of simple selectors"; - ret += "
"; - ret += "

In CSS, selectors express pattern matching rules that determine which"; - ret += "

The following selector (CSS level 2) will match all anchors a"; - ret += " with attribute name set inside a section 1 header"; - ret += " h1:"; - ret += " 

h1 a[name]
"; - ret += "

All CSS declarations attached to such a selector are applied to elements"; - ret += " matching it.

"; - ret += "
"; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
Selectors profile
SpecificationSTTS 3
Accepts"; - ret += "

type selectors
universal selectors
attribute"; - ret += " selectors
class"; - ret += " selectors
ID selectors
all structural"; - ret += " pseudo-classes
"; - ret += "

namespaces

Excludesnon-accepted pseudo-classes
pseudo-elements
Extra constraintssome selectors and combinators are not allowed in fragment"; - ret += "
"; - ret += "

Selectors can be used in STTS 3 in two different"; - ret += "

    "; - ret += "
  1. a selection mechanism equivalent to CSS selection mechanism:"; - ret += "
  2. fragment descriptions that appear on the right side of declarations."; - ret += "
    3. "; - ret += "
"; - ret += "
"; - ret += "

13. Conformance and requirements

"; - ret += "

This section defines conformance with the present specification only."; - ret += "

The inability of a user agent to implement part of this specification due to"; - ret += "

All specifications reusing Selectors must contain a Profile listing the"; - ret += " subset of Selectors it accepts or excludes, and describing the constraints"; - ret += "

Invalidity is caused by a parsing error, e.g. an unrecognized token or a"; - ret += "

User agents must observe the rules for handling parsing errors:"; - ret += "

    "; - ret += "
  • a simple selector containing an undeclared namespace prefix is invalid"; - ret += "
    • "; - ret += "
  • a selector containing an invalid simple selector, an invalid combinator"; - ret += "
    • "; - ret += "
  • a group of selectors containing an invalid selector is invalid.
    • "; - ret += "
"; - ret += "

Specifications reusing Selectors must define how to handle parsing"; - ret += " used is dropped.)

"; - ret += " "; - ret += "

14. Tests

"; - ret += "

This specification has a test"; - ret += " suite allowing user agents to verify their basic conformance to"; - ret += " and does not cover all possible combined cases of Selectors.

"; - ret += "

15. Acknowledgements

"; - ret += "

The CSS working group would like to thank everyone who has sent"; - ret += " comments on this specification over the years.

"; - ret += "

The working group would like to extend special thanks to Donna"; - ret += " the final editorial review.

"; - ret += "

16. References

"; - ret += "
"; - ret += "
[CSS1]"; - ret += "
Bert Bos, HÃ¥kon Wium Lie; 'Cascading"; - ret += " Style Sheets, level 1', W3C Recommendation, 17 Dec 1996, revised"; - ret += "
(http://www.w3.org/TR/REC-CSS1)"; - ret += "
[CSS21]"; - ret += "
Bert Bos, Tantek Çelik, Ian Hickson, Håkon"; - ret += " Wium Lie, editors; 'Cascading Style Sheets, level 2 revision"; - ret += " 1', W3C Working Draft, 13 June 2005"; - ret += "
(http://www.w3.org/TR/CSS21)"; - ret += "
[CWWW]"; - ret += "
Martin J. Dürst, François Yergeau,"; - ret += " Misha Wolf, Asmus Freytag, Tex Texin, editors; 'Character Model"; - ret += " for the World Wide Web', W3C Recommendation, 15 February 2005"; - ret += "
(http://www.w3.org/TR/charmod/)"; - ret += "
[FLEX]"; - ret += "
'Flex: The Lexical Scanner"; - ret += " Generator', Version 2.3.7, ISBN 1882114213"; - ret += "
[HTML4]"; - ret += "
Dave Ragget, Arnaud Le Hors, Ian Jacobs,"; - ret += " editors; 'HTML 4.01 Specification', W3C Recommendation, 24"; - ret += "
"; - ret += " (http://www.w3.org/TR/html4/)"; - ret += "
[MATH]"; - ret += "
Patrick Ion, Robert Miner, editors; 'Mathematical"; - ret += " Markup Language (MathML) 1.01', W3C Recommendation, revision of 7"; - ret += "
(http://www.w3.org/TR/REC-MathML/)"; - ret += "
[RFC3066]"; - ret += "
H. Alvestrand; 'Tags for the"; - ret += " Identification of Languages', Request for Comments 3066, January"; - ret += "
(http://www.ietf.org/rfc/rfc3066.txt)"; - ret += "
[STTS]"; - ret += "
Daniel Glazman; 'Simple Tree Transformation"; - ret += " Sheets 3', Electricité de France, submission to the W3C,"; - ret += "
(http://www.w3.org/TR/NOTE-STTS3)"; - ret += "
[SVG]"; - ret += "
Jon Ferraiolo, 藤沢 淳, Dean"; - ret += " Jackson, editors; 'Scalable Vector Graphics (SVG) 1.1"; - ret += " Specification', W3C Recommendation, 14 January 2003"; - ret += "
(http://www.w3.org/TR/SVG/)"; - ret += "
[UNICODE]
"; - ret += "
The Unicode"; - ret += " Standard, Version 4.1, The Unicode Consortium. Boston, MA,"; - ret += " Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by Unicode"; - ret += " 4.0.1 and Unicode"; - ret += " 4.1.0."; - ret += "
(http://www.unicode.org/versions/)"; - ret += "
"; - ret += "
[XML10]"; - ret += "
Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,"; - ret += " Eve Maler, François Yergeau, editors; 'Extensible Markup"; - ret += " Language (XML) 1.0 (Third Edition)', W3C Recommendation, 4"; - ret += "
(http://www.w3.org/TR/REC-xml/)"; - ret += "
[XMLNAMES]"; - ret += "
Tim Bray, Dave Hollander, Andrew Layman,"; - ret += " editors; 'Namespaces in XML', W3C Recommendation, 14"; - ret += "
(http://www.w3.org/TR/REC-xml-names/)"; - ret += "
[YACC]"; - ret += "
S. C. Johnson; 'YACC — Yet another"; - ret += " compiler compiler', Technical Report, Murray Hill, 1975"; - ret += "
';
"; - ret += " 1"; - ret += " 2"; - ret += ""; - return ret; - } - -} +/* + * Copyright 2011, The gwtquery team. + * + * 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. + */ +package com.google.gwt.query.client; + +import static com.google.gwt.query.client.GQuery.$; +import static com.google.gwt.query.client.GQuery.window; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.core.client.Scheduler; +import com.google.gwt.core.client.Scheduler.RepeatingCommand; +import com.google.gwt.query.client.js.JsUtils; + +/** + * This module is thought to emulate a test environment similar to + * GWTTestCase, but running it in development mode. + * + * The main goal of it is to execute tests in a faster way, because you just + * push reload in your browser after changing any code. + * + * @author manolo + * + */ +public class DevTestRunner extends MyTestCase implements EntryPoint { + + public void onModuleLoad() { + try { + gwtSetUp(); + // Replace this with the method to run + testSomething(); + } catch (Exception ex) { + ex.printStackTrace(); + $(e).html("").after("
ERROR: " + ex.getMessage() + "
"); + } + } + + public void testSomething() { + // Copy and paste any test from the gquery suite + } + + /** + * Runs jquery code via jsni. + * + * Example: + * System.out.println(evalJQuery("$('div').size()")); + */ + private native T evalJQuery(String command) /*-{ + command = command.replace(/\$/g, "$wnd.$"); + try { + return "" + eval(command); + } catch(e) { + $wnd.alert(command + " " + e); + return ""; + } + }-*/; + + /** + * Loads jquery and schedule the execution of the method testCompare() + * which should have code to test something in both in jquery and gquery. + * + * Put this method in onModuleLoad, and replace below the method to execute + * after jquery is available + */ + public void runTestJQuery() { + JsUtils.loadScript("jquery-1.6.2.js", "jq"); + Scheduler.get().scheduleFixedDelay(new RepeatingCommand() { + private int cont = 0; + private native boolean loaded(String func) /*-{ + return eval("$wnd." + func) ? true : false; + }-*/; + public boolean execute() { + if (cont++ > 10 || JsUtils.hasProperty(window, "$")) { + + // Replace with the method to run + testJQueryCompare(); + return false; + } + return true; + } + }, 100); + } + + public void testJQueryCompare() { + $(e).html("

Content 1

"); + GQuery g = $("#child"); + Properties prop1; + + prop1 = GQuery.$$("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'"); + g.css(prop1); + validateCurCSSBoth("#child", prop1.keys()); + } + + public void validateSizesBoth(String html) { + $(e).html(html); + String gqw = "" + $(".outer").width(); + String jqw = evalJQuery("$('.outer').width()"); + String gqh = "" + $(".outer").height(); + String jqh = evalJQuery("$('.outer').height()"); + + System.out.println(".outer size: GQuery: " + gqw + "x" + gqh + " jQuery: " + jqw + "x" + jqh); + assertEquals(gqw, jqw); + assertEquals(gqh, jqh); + } + + public void validateCssBoth(String selector, boolean force, String... props) { + for (String prop: props) { + String gs = $(selector).css(prop, force); + String js = evalJQuery("$.css($('" + selector + "').get(0), '" + prop + "', " + force + ")"); + System.out.println(selector + " prop:" + prop + " force:" + force + " gQuery:" + gs + " jQuery:" + js); + assertEquals(gs.replaceAll("px", ""), js.replaceAll("px", "")); + } + } + + public void validateCurCSSBoth(String selector, String... props) { + for (String prop: props) { + String gs = Double.toString($(selector).cur(prop, true)).replaceFirst("\\.\\d+$", ""); + String js = evalJQuery("$.curCSS($('" + selector + "').get(0), '" + prop + "', true)"); + gs = gs.replaceAll("px$", ""); + js = js.replaceAll("px$", ""); + System.out.println(selector + " prop:" + prop + " gQuery:" + gs + " jQuery:" + js); + assertEquals(gs, js); + } + } + + // This method is used to initialize a huge html String, because + // java 1.5 has a limitation in the size of static strings. + private String getTestContent() { + String ret = ""; + ret += "
"; + ret += "
"; + ret += "

W3C

"; + ret += "

Selectors

"; + ret += " ."; + ret += "

W3C Working Draft 15 December 2005

"; + ret += "
"; + ret += "
This version:
"; + ret += "
"; + ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215
"; + ret += "
Latest version:"; + ret += "
"; + ret += " http://www.w3.org/TR/css3-selectors"; + ret += "
Previous version:"; + ret += "
"; + ret += " http://www.w3.org/TR/2001/CR-css3-selectors-20011113"; + ret += "
Editors:"; + ret += "
Daniel Glazman (Invited"; + ret += "
"; + ret += "
Tantek Çelik"; + ret += "
Ian"; + ret += " Hickson (Google)"; + ret += "
Peter Linss (former"; + ret += " editor, Netscape/AOL)"; + ret += "
John Williams (former editor, Quark, Inc.)"; + ret += "
"; + ret += "

"; + ret += " Copyright © 2005 W3C®"; + ret += " (MIT, ERCIM, Keio), All Rights Reserved."; + ret += " liability,"; + ret += " trademark,"; + ret += " document"; + ret += " use rules apply."; + ret += "

"; + ret += "
"; + ret += "

Abstract

"; + ret += "

Selectors are patterns that match against elements in a"; + ret += " tree. Selectors have been optimized for use with HTML and XML, and"; + ret += " are designed to be usable in performance-critical code.

"; + ret += "

CSS (Cascading"; + ret += " Style Sheets) is a language for describing the rendering of HTML and XML documents on"; + ret += " screen, on paper, in speech, etc. CSS uses Selectors for binding"; + ret += " describes extensions to the selectors defined in CSS level 2. These"; + ret += " extended selectors will be used by CSS level 3."; + ret += "

Selectors define the following function:

"; + ret += " 
expression ∗ element → boolean
"; + ret += "

That is, given an element and a selector, this specification"; + ret += " defines whether that element matches the selector.

"; + ret += "

These expressions can also be used, for instance, to select a set"; + ret += " subtree. STTS (Simple Tree Transformation Sheets), a"; + ret += " language for transforming XML trees, uses this mechanism. [STTS]

"; + ret += "

Status of this document

"; + ret += "

This section describes the status of this document at the"; + ret += " of this technical report can be found in the W3C technical reports index at"; + ret += " http://www.w3.org/TR/.

"; + ret += "

This document describes the selectors that already exist in CSS1 and CSS2, and"; + ret += " also proposes new selectors for CSS3 and other languages that may need them.

"; + ret += "

The CSS Working Group doesn't expect that all implementations of"; + ret += " CSS3 will have to implement all selectors. Instead, there will"; + ret += " will include all of the selectors.

"; + ret += "

This specification is a last call working draft for the the CSS Working Group"; + ret += " (Style Activity). This"; + ret += " document is a revision of the Candidate"; + ret += " Recommendation dated 2001 November 13, and has incorporated"; + ret += " be demonstrable.

"; + ret += "

All persons are encouraged to review and implement this"; + ret += " specification and return comments to the (archived)"; + ret += " public mailing list www-style"; + ret += " (see instructions). W3C"; + ret += " The deadline for comments is 14 January 2006.

"; + ret += "

This is still a draft document and may be updated, replaced, or"; + ret += "

This document may be available in translation."; + ret += "

"; + ret += "

Table of contents

"; + ret += " "; + ret += "
"; + ret += "

1. Introduction

"; + ret += "

1.1. Dependencies

"; + ret += "

Some features of this specification are specific to CSS, or have"; + ret += " specification, these have been described in terms of CSS2.1. [CSS21]

"; + ret += "

1.2. Terminology

"; + ret += "

All of the text of this specification is normative except"; + ret += " non-normative.

"; + ret += "

1.3. Changes from CSS2

"; + ret += "

This section is non-normative.

"; + ret += "

The main differences between the selectors in CSS2 and those in"; + ret += " Selectors are:"; + ret += "

    "; + ret += "
  • the list of basic definitions (selector, group of selectors,"; + ret += " of simple selectors, and the term 'simple selector' is now used for"; + ret += "
    • "; + ret += "
  • an optional namespace component is now allowed in type element"; + ret += " selectors, the universal selector and attribute selectors"; + ret += "
    • "; + ret += "
  • a new combinator has been"; + ret += "
    • "; + ret += "
  • new simple selectors including substring matching attribute"; + ret += " selectors, and new pseudo-classes"; + ret += "
    • "; + ret += "
  • new pseudo-elements, and introduction of the '::' convention"; + ret += "
    • "; + ret += "
  • the grammar has been rewritten
    • "; + ret += "
  • profiles to be added to specifications integrating Selectors"; + ret += " and defining the set of selectors which is actually supported by"; + ret += "
    • "; + ret += "
  • Selectors are now a CSS3 Module and an independent"; + ret += "
    • "; + ret += "
  • the specification now has its own test suite
    • "; + ret += "
"; + ret += "

2. Selectors

"; + ret += "

This section is non-normative, as it merely summarizes the"; + ret += " following sections.

"; + ret += "

A Selector represents a structure. This structure can be used as a"; + ret += " HTML or XML fragment corresponding to that structure.

"; + ret += "

Selectors may range from simple element names to rich contextual"; + ret += " representations.

"; + ret += "

The following table summarizes the Selector syntax:

"; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
PatternMeaningDescribed in sectionFirst defined in CSS level
*any elementUniversal"; + ret += " selector2
Ean element of type EType selector1
E[foo]an E element with a 'foo' attributeAttribute"; + ret += " selectors2
E[foo='bar']an E element whose 'foo' attribute value is exactly"; + ret += " Attribute"; + ret += " selectors2
E[foo~='bar']an E element whose 'foo' attribute value is a list of"; + ret += " Attribute"; + ret += " selectors2
E[foo^='bar']an E element whose 'foo' attribute value begins exactly"; + ret += " Attribute"; + ret += " selectors3
E[foo$='bar']an E element whose 'foo' attribute value ends exactly"; + ret += " Attribute"; + ret += " selectors3
E[foo*='bar']an E element whose 'foo' attribute value contains the"; + ret += " Attribute"; + ret += " selectors3
E[hreflang|='en']an E element whose 'hreflang' attribute has a"; + ret += " Attribute"; + ret += " selectors2
E:rootan E element, root of the documentStructural"; + ret += " pseudo-classes3
E:nth-child(n)an E element, the n-th child of its parentStructural"; + ret += " pseudo-classes3
E:nth-last-child(n)an E element, the n-th child of its parent, counting"; + ret += " Structural"; + ret += " pseudo-classes3
E:nth-of-type(n)an E element, the n-th sibling of its typeStructural"; + ret += " pseudo-classes3
E:nth-last-of-type(n)an E element, the n-th sibling of its type, counting"; + ret += " Structural"; + ret += " pseudo-classes3
E:first-childan E element, first child of its parentStructural"; + ret += " pseudo-classes2
E:last-childan E element, last child of its parentStructural"; + ret += " pseudo-classes3
E:first-of-typean E element, first sibling of its typeStructural"; + ret += " pseudo-classes3
E:last-of-typean E element, last sibling of its typeStructural"; + ret += " pseudo-classes3
E:only-childan E element, only child of its parentStructural"; + ret += " pseudo-classes3
E:only-of-typean E element, only sibling of its typeStructural"; + ret += " pseudo-classes3
E:emptyan E element that has no children (including text"; + ret += " Structural"; + ret += " pseudo-classes3
E:link
E:visited		an E element being the source anchor of a hyperlink of"; + ret += " The link"; + ret += " pseudo-classes1
E:active
E:hover
E:focus		an E element during certain user actionsThe user"; + ret += " action pseudo-classes1 and 2
E:targetan E element being the target of the referring URIThe target"; + ret += " pseudo-class3
E:lang(fr)an element of type E in language 'fr' (the document"; + ret += " The :lang()"; + ret += " pseudo-class2
E:enabled
E:disabled		a user interface element E which is enabled or"; + ret += " The UI element states"; + ret += " pseudo-classes3
E:checkeda user interface element E which is checked (for instance a radio-button or checkbox)"; + ret += " The UI element states"; + ret += " pseudo-classes3
E::first-linethe first formatted line of an E elementThe ::first-line"; + ret += " pseudo-element1
E::first-letterthe first formatted letter of an E elementThe ::first-letter"; + ret += " pseudo-element1
E::selectionthe portion of an E element that is currently"; + ret += " The UI element"; + ret += " fragments pseudo-elements3
E::beforegenerated content before an E elementThe ::before"; + ret += " pseudo-element2
E::aftergenerated content after an E elementThe ::after"; + ret += " pseudo-element2
E.warningan E element whose class is"; + ret += " Class"; + ret += " selectors1
E#myidan E element with ID equal to 'myid'.ID"; + ret += " selectors1
E:not(s)an E element that does not match simple selector sNegation"; + ret += " pseudo-class3
E Fan F element descendant of an E elementDescendant"; + ret += " combinator1
E > Fan F element child of an E elementChild"; + ret += " combinator2
E + Fan F element immediately preceded by an E elementAdjacent sibling combinator"; + ret += " 2
E ~ Fan F element preceded by an E elementGeneral sibling combinator"; + ret += " 3
"; + ret += "

The meaning of each selector is derived from the table above by"; + ret += " column.

"; + ret += "

3. Case sensitivity

"; + ret += "

The case sensitivity of document language element names, attribute"; + ret += " names, and attribute values in selectors depends on the document"; + ret += " but in XML, they are case-sensitive.

"; + ret += "

4. Selector syntax

"; + ret += "

A selector is a chain of one"; + ret += " or more sequences of simple selectors"; + ret += " separated by combinators.

"; + ret += "

A sequence of simple selectors"; + ret += " is a chain of simple selectors"; + ret += " that are not separated by a combinator. It"; + ret += " always begins with a type selector or a"; + ret += " universal selector. No other type"; + ret += " selector or universal selector is allowed in the sequence.

"; + ret += "

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, content selector, or pseudo-class. One pseudo-element may be appended to the last"; + ret += " sequence of simple selectors.

"; + ret += "

Combinators are: white space, 'greater-than"; + ret += " sign' (U+003E, >), 'plus sign' (U+002B,"; + ret += " +) and 'tilde' (U+007E, ~). White"; + ret += " space may appear between a combinator and the simple selectors around"; + ret += " it. Only the characters 'space' (U+0020), 'tab'"; + ret += " never part of white space.

"; + ret += "

The elements of a document tree that are represented by a selector"; + ret += " are the subjects of the selector. A"; + ret += " selector consisting of a single sequence of simple selectors"; + ret += " sequence of simple selectors and a combinator to a sequence imposes"; + ret += " simple selectors.

"; + ret += "

An empty selector, containing no sequence of simple selectors and"; + ret += " no pseudo-element, is an invalid"; + ret += " selector.

"; + ret += "

5. Groups of selectors

"; + ret += "

When several selectors share the same declarations, they may be"; + ret += " grouped into a comma-separated list. (A comma is U+002C.)

"; + ret += "
"; + ret += "

CSS examples:

"; + ret += "

In this example, we condense three rules with identical"; + ret += " declarations into one. Thus,

"; + ret += " 
h1 { font-family: sans-serif }";
+    ret += "      h3 { font-family: sans-serif }
"; + ret += "

is equivalent to:

"; + ret += " 
h1, h2, h3 { font-family: sans-serif }
"; + ret += "
"; + ret += "

Warning: the equivalence is true in this example"; + ret += " because all the selectors are valid selectors. If just one of these"; + ret += " selectors were invalid, the entire group of selectors would be"; + ret += " heading rules would be invalidated.

"; + ret += "

6. Simple selectors

"; + ret += "

6.1. Type selector

"; + ret += "

A type selector is the name of a document language"; + ret += " type in the document tree.

"; + ret += "
"; + ret += "

Example:

"; + ret += "

The following selector represents an h1 element in the"; + ret += " document tree:

"; + ret += " 
h1
"; + ret += "
"; + ret += "

6.1.1. Type selectors and namespaces

"; + ret += "

Type selectors allow an optional namespace ([XMLNAMES]) component. A namespace prefix"; + ret += " (U+007C, |).

"; + ret += "

The namespace component may be left empty to indicate that the"; + ret += " selector is only to represent elements with no declared namespace.

"; + ret += "

An asterisk may be used for the namespace prefix, indicating that"; + ret += " with no namespace).

"; + ret += "

Element type selectors that have no namespace component (no"; + ret += " element's namespace (equivalent to '*|') unless a default"; + ret += " namespace.

"; + ret += "

A type selector containing a namespace prefix that has not been"; + ret += " previously declared is an invalid selector."; + ret += " language implementing Selectors. In CSS, such a mechanism is defined"; + ret += " in the General Syntax module.

"; + ret += "

In a namespace-aware client, element type selectors will only match"; + ret += " against the local"; + ret += " part"; + ret += " of the element's qualified"; + ret += " name. See below for notes about matching"; + ret += " behaviors in down-level clients.

"; + ret += "

In summary:

"; + ret += "
"; + ret += "
ns|E
"; + ret += "
elements with name E in namespace ns
"; + ret += "
*|E
"; + ret += "
elements with name E in any namespace, including those without any"; + ret += "
"; + ret += "
|E
"; + ret += "
elements with name E without any declared namespace
"; + ret += "
E
"; + ret += "
if no default namespace has been specified, this is equivalent to *|E."; + ret += "
"; + ret += "
"; + ret += "
"; + ret += "

CSS examples:

"; + ret += " 
@namespace foo url(http://www.example.com);";
+    ret += "       h1 { color: green }
"; + ret += "

The first rule will match only h1 elements in the"; + ret += " 'http://www.example.com' namespace.

"; + ret += "

The second rule will match all elements in the"; + ret += " 'http://www.example.com' namespace.

"; + ret += "

The third rule will match only h1 elements without"; + ret += " any declared namespace.

"; + ret += "

The fourth rule will match h1 elements in any"; + ret += " namespace (including those without any declared namespace).

"; + ret += "

The last rule is equivalent to the fourth rule because no default"; + ret += " namespace has been defined.

"; + ret += "
"; + ret += "

6.2. Universal selector

"; + ret += "

The universal selector, written 'asterisk'"; + ret += " (*), represents the qualified name of any element"; + ret += " specified, see Universal selector and"; + ret += " Namespaces below.

"; + ret += "

If the universal selector is not the only component of a sequence"; + ret += " of simple selectors, the * may be omitted.

"; + ret += "
"; + ret += "

Examples:

"; + ret += "
    "; + ret += "
  • *[hreflang|=en] and [hreflang|=en] are"; + ret += "
    • "; + ret += "
  • *.warning and .warning are equivalent,"; + ret += "
    • "; + ret += "
  • *#myid and #myid are equivalent.
    • "; + ret += "
"; + ret += "
"; + ret += "

Note: it is recommended that the"; + ret += " *, representing the universal selector, not be"; + ret += " omitted.

"; + ret += "

6.2.1. Universal selector and namespaces

"; + ret += "

The universal selector allows an optional namespace component. It"; + ret += " is used as follows:

"; + ret += "
"; + ret += "
ns|*
"; + ret += "
all elements in namespace ns
"; + ret += "
*|*
"; + ret += "
all elements
"; + ret += "
|*
"; + ret += "
all elements without any declared namespace
"; + ret += "
*
"; + ret += "
if no default namespace has been specified, this is equivalent to *|*."; + ret += "
"; + ret += "
"; + ret += "

A universal selector containing a namespace prefix that has not"; + ret += " been previously declared is an invalid"; + ret += " to the language implementing Selectors. In CSS, such a mechanism is"; + ret += " defined in the General Syntax module.

"; + ret += "

6.3. Attribute selectors

"; + ret += "

Selectors allow the representation of an element's attributes. When"; + ret += " attribute selectors must be considered to match an element if that"; + ret += " attribute selector.

"; + ret += "

6.3.1. Attribute presence and values"; + ret += " selectors

"; + ret += "

CSS2 introduced four attribute selectors:

"; + ret += "
"; + ret += "
[att]"; + ret += "
Represents an element with the att attribute, whatever the"; + ret += "
"; + ret += "
[att=val]
"; + ret += "
Represents an element with the att attribute whose value is"; + ret += "
"; + ret += "
[att~=val]
"; + ret += "
Represents an element with the att attribute whose value is"; + ret += " a whitespace-separated list of words, one"; + ret += " represent anything (since the words are separated by"; + ret += "
"; + ret += "
[att|=val]"; + ret += "
Represents an element with the att attribute, its value"; + ret += " matches (e.g., the hreflang attribute on the"; + ret += " link element in HTML) as described in RFC 3066 ([RFC3066]). For lang (or"; + ret += " xml:lang) language subcode matching, please see the :lang pseudo-class."; + ret += "
"; + ret += "
"; + ret += "

Attribute values must be identifiers or strings. The"; + ret += " case-sensitivity of attribute names and values in selectors depends on"; + ret += " the document language.

"; + ret += "
"; + ret += "

Examples:

"; + ret += "

The following attribute selector represents an h1"; + ret += " element that carries the title attribute, whatever its"; + ret += " value:

"; + ret += " 
h1[title]
"; + ret += "

In the following example, the selector represents a"; + ret += " span element whose class attribute has"; + ret += " exactly the value 'example':

"; + ret += " 
span[class='example']
"; + ret += "

Multiple attribute selectors can be used to represent several"; + ret += " attribute. Here, the selector represents a span element"; + ret += " whose hello attribute has exactly the value 'Cleveland'"; + ret += " and whose goodbye attribute has exactly the value"; + ret += " 'Columbus':

"; + ret += " 
span[hello='Cleveland'][goodbye='Columbus']
"; + ret += "

The following selectors illustrate the differences between '='"; + ret += " 'copyright copyleft copyeditor' on a rel attribute. The"; + ret += " second selector will only represent an a element with"; + ret += " an href attribute having the exact value"; + ret += " 'http://www.w3.org/'.

"; + ret += " 
a[rel~='copyright']";
+    ret += "      a[href='http://www.w3.org/']
"; + ret += "

The following selector represents a link element"; + ret += " whose hreflang attribute is exactly 'fr'.

"; + ret += " 
link[hreflang=fr]
"; + ret += "

The following selector represents a link element for"; + ret += " which the values of the hreflang attribute begins with"; + ret += " 'en', including 'en', 'en-US', and 'en-cockney':

"; + ret += " 
link[hreflang|='en']
"; + ret += "

Similarly, the following selectors represents a"; + ret += " DIALOGUE element whenever it has one of two different"; + ret += " values for an attribute character:

"; + ret += " 
DIALOGUE[character=romeo]";
+    ret += "      DIALOGUE[character=juliet]
"; + ret += "
"; + ret += "

6.3.2. Substring matching attribute"; + ret += " selectors

"; + ret += "

Three additional attribute selectors are provided for matching"; + ret += " substrings in the value of an attribute:

"; + ret += "
"; + ret += "
[att^=val]
"; + ret += "
Represents an element with the att attribute whose value"; + ret += "
"; + ret += "
[att$=val]"; + ret += "
Represents an element with the att attribute whose value"; + ret += "
"; + ret += "
[att*=val]"; + ret += "
Represents an element with the att attribute whose value"; + ret += "
"; + ret += "
"; + ret += "

Attribute values must be identifiers or strings. The"; + ret += " case-sensitivity of attribute names in selectors depends on the"; + ret += " document language.

"; + ret += "
"; + ret += "

Examples:

"; + ret += "

The following selector represents an HTML object,"; + ret += " image:

"; + ret += " 
object[type^='image/']
"; + ret += "

The following selector represents an HTML anchor a with an"; + ret += " href attribute whose value ends with '.html'.

"; + ret += " 
a[href$='.html']
"; + ret += "

The following selector represents an HTML paragraph with a"; + ret += " title"; + ret += " attribute whose value contains the substring 'hello'

"; + ret += " 
p[title*='hello']
"; + ret += "
"; + ret += "

6.3.3. Attribute selectors and namespaces

"; + ret += "

Attribute selectors allow an optional namespace component to the"; + ret += " separator 'vertical bar' (|). In keeping with"; + ret += " apply to attributes, therefore attribute selectors without a namespace"; + ret += " (equivalent to '|attr'). An asterisk may be used for the"; + ret += "

An attribute selector with an attribute name containing a namespace"; + ret += " prefix that has not been previously declared is an invalid selector. The mechanism for"; + ret += " a namespace prefix is left up to the language implementing Selectors."; + ret += "

"; + ret += "

CSS examples:

"; + ret += " 
@namespace foo 'http://www.example.com';";
+    ret += "      [att] { color: green }
"; + ret += "

The first rule will match only elements with the attribute"; + ret += " att in the 'http://www.example.com' namespace with the"; + ret += " value 'val'.

"; + ret += "

The second rule will match only elements with the attribute"; + ret += " att regardless of the namespace of the attribute"; + ret += " (including no declared namespace).

"; + ret += "

The last two rules are equivalent and will match only elements"; + ret += " with the attribute att where the attribute is not"; + ret += " declared to be in a namespace.

"; + ret += "
"; + ret += "

6.3.4. Default attribute values in DTDs

"; + ret += "

Attribute selectors represent explicitly set attribute values in"; + ret += " selectors. Selectors should be designed so that they work even if the"; + ret += " default values are not included in the document tree.

"; + ret += "

More precisely, a UA is not required to read an 'external"; + ret += " subset' of the DTD but is required to look for default"; + ret += " attribute values in the document's 'internal subset.' (See [XML10] for definitions of these subsets.)

"; + ret += "

A UA that recognizes an XML namespace [XMLNAMES] is not required to use its"; + ret += " required to use its built-in knowledge of the XHTML DTD.)

"; + ret += "

Note: Typically, implementations"; + ret += " choose to ignore external subsets.

"; + ret += "
"; + ret += "

Example:

"; + ret += "

Consider an element EXAMPLE with an attribute 'notation' that has a"; + ret += " default value of 'decimal'. The DTD fragment might be

"; + ret += " 
<!ATTLIST EXAMPLE notation (decimal,octal) 'decimal'>
"; + ret += "

If the style sheet contains the rules

"; + ret += " 
EXAMPLE[notation=decimal] { /*... default property settings ...*/ }";
+    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }
"; + ret += "

the first rule will not match elements whose 'notation' attribute"; + ret += " attribute selector for the default value must be dropped:

"; + ret += " 
EXAMPLE                   { /*... default property settings ...*/ }";
+    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }
"; + ret += "

Here, because the selector EXAMPLE[notation=octal] is"; + ret += " cases' style rules.

"; + ret += "
"; + ret += "

6.4. Class selectors

"; + ret += "

Working with HTML, authors may use the period (U+002E,"; + ret += " .) notation as an alternative to the ~="; + ret += " notation when representing the class attribute. Thus, for"; + ret += " HTML, div.value and div[class~=value] have"; + ret += " 'period' (.).

"; + ret += "

UAs may apply selectors using the period (.) notation in XML"; + ret += " 1.0 [SVG] describes the SVG"; + ret += " 'class' attribute and how a UA should interpret it, and"; + ret += " similarly MathML 1.01 [MATH] describes the MathML"; + ret += " 'class' attribute.)

"; + ret += "
"; + ret += "

CSS examples:

"; + ret += "

We can assign style information to all elements with"; + ret += " class~='pastoral' as follows:

"; + ret += " 
*.pastoral { color: green }  /* all elements with class~=pastoral */
"; + ret += "

or just

"; + ret += " 
.pastoral { color: green }  /* all elements with class~=pastoral */
"; + ret += "

The following assigns style only to H1 elements with"; + ret += " class~='pastoral':

"; + ret += " 
H1.pastoral { color: green }  /* H1 elements with class~=pastoral */
"; + ret += "

Given these rules, the first H1 instance below would not have"; + ret += " green text, while the second would:

"; + ret += " 
<H1>Not green</H1>";
+    ret += "      <H1 class='pastoral'>Very green</H1>
"; + ret += "
"; + ret += "

To represent a subset of 'class' values, each value must be preceded"; + ret += " by a '.', in any order.

"; + ret += "
"; + ret += "

CSS example:

"; + ret += "

The following rule matches any P element whose 'class' attribute"; + ret += " has been assigned a list of whitespace-separated values that includes"; + ret += " 'pastoral' and 'marine':

"; + ret += " 
p.pastoral.marine { color: green }
"; + ret += "

This rule matches when class='pastoral blue aqua"; + ret += " marine' but does not match for class='pastoral"; + ret += " blue'.

"; + ret += "
"; + ret += "

Note: Because CSS gives considerable"; + ret += " not.

"; + ret += "

Note: If an element has multiple"; + ret += " this specification.

"; + ret += "

6.5. ID selectors

"; + ret += "

Document languages may contain attributes that are declared to be"; + ret += " applies.

"; + ret += "

An ID-typed attribute of a document language allows authors to"; + ret += " ID selectors represent an element instance based on its identifier. An"; + ret += " #) immediately followed by the ID value, which must be an"; + ret += " identifier.

"; + ret += "

Selectors does not specify how a UA knows the ID-typed attribute of"; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following ID selector represents an h1 element"; + ret += " whose ID-typed attribute has the value 'chapter1':

"; + ret += " 
h1#chapter1
"; + ret += "

The following ID selector represents any element whose ID-typed"; + ret += " attribute has the value 'chapter1':

"; + ret += " 
#chapter1
"; + ret += "

The following selector represents any element whose ID-typed"; + ret += " attribute has the value 'z98y'.

"; + ret += " 
*#z98y
"; + ret += "
"; + ret += "

Note. In XML 1.0 [XML10], the information about which attribute"; + ret += " should use normal attribute selectors instead:"; + ret += " [name=p371] instead of #p371. Elements in"; + ret += " XML 1.0 documents without a DTD do not have IDs at all.

"; + ret += "

If an element has multiple ID attributes, all of them must be"; + ret += " DOM3 Core, XML DTDs, and namespace-specific knowledge.

"; + ret += "

6.6. Pseudo-classes

"; + ret += "

The pseudo-class concept is introduced to permit selection based on"; + ret += " expressed using the other simple selectors.

"; + ret += "

A pseudo-class always consists of a 'colon'"; + ret += " (:) followed by the name of the pseudo-class and"; + ret += " optionally by a value between parentheses.

"; + ret += "

Pseudo-classes are allowed in all sequences of simple selectors"; + ret += " sequences of simple selectors, after the leading type selector or"; + ret += " document.

"; + ret += "

6.6.1. Dynamic pseudo-classes

"; + ret += "

Dynamic pseudo-classes classify elements on characteristics other"; + ret += " that cannot be deduced from the document tree.

"; + ret += "

Dynamic pseudo-classes do not appear in the document source or"; + ret += " document tree.

"; + ret += "
The link pseudo-classes: :link and :visited
"; + ret += "

User agents commonly display unvisited links differently from"; + ret += " previously visited ones. Selectors"; + ret += " provides the pseudo-classes :link and"; + ret += " :visited to distinguish them:

"; + ret += "
    "; + ret += "
  • The :link pseudo-class applies to links that have"; + ret += "
    • "; + ret += "
  • The :visited pseudo-class applies once the link has"; + ret += "
    • "; + ret += "
"; + ret += "

After some amount of time, user agents may choose to return a"; + ret += " visited link to the (unvisited) ':link' state.

"; + ret += "

The two states are mutually exclusive.

"; + ret += "
"; + ret += "

Example:

"; + ret += "

The following selector represents links carrying class"; + ret += " external and already visited:

"; + ret += " 
a.external:visited
"; + ret += "
"; + ret += "

Note: It is possible for style sheet"; + ret += "

UAs may therefore treat all links as unvisited links, or implement"; + ret += " and unvisited links differently.

"; + ret += "
The user action pseudo-classes"; + ret += " :hover, :active, and :focus
"; + ret += "

Interactive user agents sometimes change the rendering in response"; + ret += " to user actions. Selectors provides"; + ret += " acting on.

"; + ret += "
    "; + ret += "
  • The :hover pseudo-class applies while the user"; + ret += " element. User agents not that do not support interactive"; + ret += " media do not have to support this pseudo-class. Some conforming"; + ret += " user agents that support interactive"; + ret += " media may not be able to support this pseudo-class (e.g., a pen"; + ret += "
    • "; + ret += "
  • The :active pseudo-class applies while an element"; + ret += "
    • "; + ret += "
  • The :focus pseudo-class applies while an element"; + ret += "
    • "; + ret += "
"; + ret += "

There may be document language or implementation specific limits on"; + ret += " which elements can become :active or acquire"; + ret += " :focus.

"; + ret += "

These pseudo-classes are not mutually exclusive. An element may"; + ret += " match several pseudo-classes at the same time.

"; + ret += "

Selectors doesn't define if the parent of an element that is"; + ret += " ':active' or ':hover' is also in that state.

"; + ret += "
"; + ret += "

Examples:

"; + ret += " 
a:link    /* unvisited links */";
+    ret += "      a:active  /* active links */
"; + ret += "

An example of combining dynamic pseudo-classes:

"; + ret += " 
a:focus";
+    ret += "      a:focus:hover
"; + ret += "

The last selector matches a elements that are in"; + ret += " the pseudo-class :focus and in the pseudo-class :hover.

"; + ret += "
"; + ret += "

Note: An element can be both ':visited'"; + ret += " and ':active' (or ':link' and ':active').

"; + ret += "

6.6.2. The target pseudo-class :target

"; + ret += "

Some URIs refer to a location within a resource. This kind of URI"; + ret += " identifier (called the fragment identifier).

"; + ret += "

URIs with fragment identifiers link to a certain element within the"; + ret += " pointing to an anchor named section_2 in an HTML"; + ret += " document:

"; + ret += " 
http://example.com/html/top.html#section_2
"; + ret += "

A target element can be represented by the :target"; + ret += " the document has no target element.

"; + ret += "
"; + ret += "

Example:

"; + ret += " 
p.note:target
"; + ret += "

This selector represents a p element of class"; + ret += " note that is the target element of the referring"; + ret += " URI.

"; + ret += "
"; + ret += "
"; + ret += "

CSS example:

"; + ret += "

Here, the :target pseudo-class is used to make the"; + ret += " target element red and place an image before it, if there is one:

"; + ret += " 
*:target { color : red }";
+    ret += "      *:target::before { content : url(target.png) }
"; + ret += "
"; + ret += "

6.6.3. The language pseudo-class :lang

"; + ret += "

If the document language specifies how the human language of an"; + ret += " element is determined, it is possible to write selectors that"; + ret += " represent an element based on its language. For example, in HTML [HTML4], the language is determined by a"; + ret += " combination of the lang attribute, the meta"; + ret += " headers). XML uses an attribute called xml:lang, and"; + ret += " the language.

"; + ret += "

The pseudo-class :lang(C) represents an element that"; + ret += " :lang() selector is based solely on the identifier C"; + ret += " element's language value, in the same way as if performed by the '|=' operator in attribute"; + ret += " selectors. The identifier C does not have to be a valid language"; + ret += " name.

"; + ret += "

C must not be empty. (If it is, the selector is invalid.)

"; + ret += "

Note: It is recommended that"; + ret += " documents and protocols indicate language using codes from RFC 3066 [RFC3066] or its successor, and by means of"; + ret += " 'xml:lang' attributes in the case of XML-based documents [XML10]. See "; + ret += " 'FAQ: Two-letter or three-letter language codes.'

"; + ret += "
"; + ret += "

Examples:

"; + ret += "

The two following selectors represent an HTML document that is in"; + ret += " Belgian, French, or German. The two next selectors represent"; + ret += " q quotations in an arbitrary element in Belgian, French,"; + ret += " or German.

"; + ret += " 
html:lang(fr-be)";
+    ret += "      :lang(de) > q
"; + ret += "
"; + ret += "

6.6.4. The UI element states pseudo-classes

"; + ret += "
The :enabled and :disabled pseudo-classes
"; + ret += "

The :enabled pseudo-class allows authors to customize"; + ret += " an enabled input element without also specifying what it"; + ret += " would look like when it was disabled.

"; + ret += "

Similar to :enabled, :disabled allows the"; + ret += " element should look.

"; + ret += "

Most elements will be neither enabled nor disabled. An element is"; + ret += " presently activate it or transfer focus to it.

"; + ret += "
The :checked pseudo-class
"; + ret += "

Radio and checkbox elements can be toggled by the user. Some menu"; + ret += " toggled 'on' the :checked pseudo-class applies. The"; + ret += " :checked pseudo-class initially applies to such elements"; + ret += " that have the HTML4 selected and checked"; + ret += " attributes as described in Section"; + ret += " 17.2.1 of HTML4, but of course the user can toggle 'off' such"; + ret += " elements in which case the :checked pseudo-class would no"; + ret += " longer apply. While the :checked pseudo-class is dynamic"; + ret += " on the presence of the semantic HTML4 selected and"; + ret += " checked attributes, it applies to all media."; + ret += "

The :indeterminate pseudo-class
"; + ret += "
"; + ret += "

Radio and checkbox elements can be toggled by the user, but are"; + ret += " This can be due to an element attribute, or DOM manipulation.

"; + ret += "

A future version of this specification may introduce an"; + ret += " :indeterminate pseudo-class that applies to such elements."; + ret += "

"; + ret += "
"; + ret += "

6.6.5. Structural pseudo-classes

"; + ret += "

Selectors introduces the concept of structural"; + ret += " pseudo-classes to permit selection based on extra information that"; + ret += " the document tree but cannot be represented by other simple selectors or"; + ret += "

Note that standalone pieces of PCDATA (text nodes in the DOM) are"; + ret += "

:root pseudo-class
"; + ret += "

The :root pseudo-class represents an element that is"; + ret += " HTML element."; + ret += "

:nth-child() pseudo-class
"; + ret += "

The"; + ret += " :nth-child(an+b)"; + ret += " an+b-1 siblings"; + ret += " before it in the document tree, for a given positive"; + ret += " integer or zero value of n, and has a parent element. In"; + ret += " other words, this matches the bth child of an element after"; + ret += " all the children have been split into groups of a elements"; + ret += " each. For example, this allows the selectors to address every other"; + ret += " of paragraph text in a cycle of four. The a and"; + ret += " b values must be zero, negative integers or positive"; + ret += "

In addition to this, :nth-child() can take"; + ret += " 'odd' and 'even' as arguments instead."; + ret += " 'odd' has the same signification as 2n+1,"; + ret += " and 'even' has the same signification as 2n."; + ret += "

"; + ret += "

Examples:

"; + ret += " 
tr:nth-child(2n+1) /* represents every odd row of an HTML table */";
+    ret += "      p:nth-child(4n+4) { color: purple; }
"; + ret += "
"; + ret += "

When a=0, no repeating is used, so for example"; + ret += " :nth-child(0n+5) matches only the fifth child. When"; + ret += " a=0, the an part need not be"; + ret += " :nth-child(b) and the last example simplifies"; + ret += " to :nth-child(5)."; + ret += "

"; + ret += "

Examples:

"; + ret += " 
foo:nth-child(0n+1)   /* represents an element foo, first child of its parent element */";
+    ret += "      foo:nth-child(1)      /* same */
"; + ret += "
"; + ret += "

When a=1, the number may be omitted from the rule."; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following selectors are therefore equivalent:

"; + ret += " 
bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */";
+    ret += "      bar                   /* same but lower specificity (0,0,1) */
"; + ret += "
"; + ret += "

If b=0, then every ath element is picked. In"; + ret += " such a case, the b part may be omitted."; + ret += "

"; + ret += "

Examples:

"; + ret += " 
tr:nth-child(2n+0) /* represents every even row of an HTML table */";
+    ret += "      tr:nth-child(2n) /* same */
"; + ret += "
"; + ret += "

If both a and b are equal to zero, the"; + ret += " pseudo-class represents no element in the document tree.

"; + ret += "

The value a can be negative, but only the positive"; + ret += " values of an+b, for"; + ret += " n≥0, may represent an element in the document"; + ret += " tree.

"; + ret += "
"; + ret += "

Example:

"; + ret += " 
html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */
"; + ret += "
"; + ret += "

When the value b is negative, the '+' character in the"; + ret += " character indicating the negative value of b).

"; + ret += "
"; + ret += "

Examples:

"; + ret += " 
:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */";
+    ret += "      :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */
"; + ret += "
"; + ret += "
:nth-last-child() pseudo-class
"; + ret += "

The :nth-last-child(an+b)"; + ret += " an+b-1 siblings"; + ret += " after it in the document tree, for a given positive"; + ret += " integer or zero value of n, and has a parent element. See"; + ret += " :nth-child() pseudo-class for the syntax of its argument."; + ret += " It also accepts the 'even' and 'odd' values"; + ret += "

"; + ret += "

Examples:

"; + ret += " 
tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */";
+    ret += "                                    counting from the last one */
"; + ret += "
"; + ret += "
:nth-of-type() pseudo-class
"; + ret += "

The :nth-of-type(an+b)"; + ret += " an+b-1 siblings with the same"; + ret += " element name before it in the document tree, for a"; + ret += " given zero or positive integer value of n, and has a"; + ret += " parent element. In other words, this matches the bth child"; + ret += " groups of a elements each. See :nth-child() pseudo-class"; + ret += " 'even' and 'odd' values."; + ret += "

"; + ret += "

CSS example:

"; + ret += "

This allows an author to alternate the position of floated images:

"; + ret += " 
img:nth-of-type(2n+1) { float: right; }";
+    ret += "      img:nth-of-type(2n) { float: left; }
"; + ret += "
"; + ret += "
:nth-last-of-type() pseudo-class
"; + ret += "

The :nth-last-of-type(an+b)"; + ret += " an+b-1 siblings with the same"; + ret += " element name after it in the document tree, for a"; + ret += " given zero or positive integer value of n, and has a"; + ret += " parent element. See :nth-child() pseudo-class for the"; + ret += " syntax of its argument. It also accepts the 'even' and 'odd'"; + ret += "

"; + ret += "

Example:

"; + ret += "

To represent all h2 children of an XHTML"; + ret += " body except the first and last, one could use the"; + ret += " following selector:

"; + ret += " 
body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
"; + ret += "

In this case, one could also use :not(), although the"; + ret += " selector ends up being just as long:

"; + ret += " 
body > h2:not(:first-of-type):not(:last-of-type)
"; + ret += "
"; + ret += "
:first-child pseudo-class
"; + ret += "

Same as :nth-child(1). The :first-child"; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following selector represents a p element that is"; + ret += " the first child of a div element:

"; + ret += " 
div > p:first-child
"; + ret += "

This selector can represent the p inside the"; + ret += " div of the following fragment:

"; + ret += " 
<p> The last P before the note.</p>";
+    ret += "      </div>
"; + ret += " but cannot represent the second p in the following"; + ret += " 
<p> The last P before the note.</p>";
+    ret += "      </div>
"; + ret += "

The following two selectors are usually equivalent:

"; + ret += " 
* > a:first-child /* a is first child of any element */";
+    ret += "      a:first-child /* Same (assuming a is not the root element) */
"; + ret += "
"; + ret += "
:last-child pseudo-class
"; + ret += "

Same as :nth-last-child(1). The :last-child"; + ret += "

"; + ret += "

Example:

"; + ret += "

The following selector represents a list item li that"; + ret += " is the last child of an ordered list ol."; + ret += " 

ol > li:last-child
"; + ret += "
"; + ret += "
:first-of-type pseudo-class
"; + ret += "

Same as :nth-of-type(1). The :first-of-type"; + ret += "

"; + ret += "

Example:

"; + ret += "

The following selector represents a definition title"; + ret += " dt inside a definition list dl, this"; + ret += " dt being the first of its type in the list of children of"; + ret += " its parent element.

"; + ret += " 
dl dt:first-of-type
"; + ret += "

It is a valid description for the first two dt"; + ret += " elements in the following example but not for the third one:

"; + ret += " 
<dl>";
+    ret += "      </dl>
"; + ret += "
"; + ret += "
:last-of-type pseudo-class
"; + ret += "

Same as :nth-last-of-type(1). The"; + ret += " :last-of-type pseudo-class represents an element that is"; + ret += " element.

"; + ret += "
"; + ret += "

Example:

"; + ret += "

The following selector represents the last data cell"; + ret += " td of a table row.

"; + ret += " 
tr > td:last-of-type
"; + ret += "
"; + ret += "
:only-child pseudo-class
"; + ret += "

Represents an element that has a parent element and whose parent"; + ret += " :first-child:last-child or"; + ret += " :nth-child(1):nth-last-child(1), but with a lower"; + ret += " specificity.

"; + ret += "
:only-of-type pseudo-class
"; + ret += "

Represents an element that has a parent element and whose parent"; + ret += " as :first-of-type:last-of-type or"; + ret += " :nth-of-type(1):nth-last-of-type(1), but with a lower"; + ret += " specificity.

"; + ret += "
:empty pseudo-class
"; + ret += "

The :empty pseudo-class represents an element that has"; + ret += " empty or not.

"; + ret += "
"; + ret += "

Examples:

"; + ret += "

p:empty is a valid representation of the following fragment:"; + ret += "

"; + ret += " 
<p></p>
"; + ret += "

foo:empty is not a valid representation for the"; + ret += " following fragments:

"; + ret += " 
<foo>bar</foo>
"; + ret += " 
<foo><bar>bla</bar></foo>
"; + ret += " 
<foo>this is not <bar>:empty</bar></foo>
"; + ret += "
"; + ret += "

6.6.6. Blank

"; + ret += " "; + ret += "

This section intentionally left blank.

"; + ret += " "; + ret += "

6.6.7. The negation pseudo-class

"; + ret += "

The negation pseudo-class, :not(X), is a"; + ret += " functional notation taking a simple"; + ret += " selector (excluding the negation pseudo-class itself and"; + ret += " "; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following CSS selector matches all button"; + ret += " elements in an HTML document that are not disabled.

"; + ret += " 
button:not([DISABLED])
"; + ret += "

The following selector represents all but FOO"; + ret += " elements.

"; + ret += " 
*:not(FOO)
"; + ret += "

The following group of selectors represents all HTML elements"; + ret += " except links.

"; + ret += " 
html|*:not(:link):not(:visited)
"; + ret += "
"; + ret += "

Default namespace declarations do not affect the argument of the"; + ret += " type selector.

"; + ret += "
"; + ret += "

Examples:

"; + ret += "

Assuming that the default namespace is bound to"; + ret += " elements that are not in that namespace:

"; + ret += " 
*|*:not(*)
"; + ret += "

The following CSS selector matches any element being hovered,"; + ret += " rule when they are being hovered.

"; + ret += " 
*|*:not(:hover)
"; + ret += "
"; + ret += "

Note: the :not() pseudo allows"; + ret += " useless selectors to be written. For instance :not(*|*),"; + ret += " which represents no element at all, or foo:not(bar),"; + ret += " which is equivalent to foo but with a higher"; + ret += " specificity.

"; + ret += "

7. Pseudo-elements

"; + ret += "

Pseudo-elements create abstractions about the document tree beyond"; + ret += " source document (e.g., the ::before and"; + ret += " ::after pseudo-elements give access to generated"; + ret += " content).

"; + ret += "

A pseudo-element is made of two colons (::) followed"; + ret += " by the name of the pseudo-element.

"; + ret += "

This :: notation is introduced by the current document"; + ret += " :first-line, :first-letter,"; + ret += " :before and :after). This compatibility is"; + ret += " not allowed for the new pseudo-elements introduced in CSS level 3.

"; + ret += "

Only one pseudo-element may appear per selector, and if present it"; + ret += " must appear after the sequence of simple selectors that represents the"; + ret += " subjects of the selector. A"; + ret += " pesudo-elements per selector.

"; + ret += "

7.1. The ::first-line pseudo-element

"; + ret += "

The ::first-line pseudo-element describes the contents"; + ret += "

"; + ret += "

CSS example:

"; + ret += " 
p::first-line { text-transform: uppercase }
"; + ret += "

The above rule means 'change the letters of the first line of every"; + ret += " paragraph to uppercase'.

"; + ret += "
"; + ret += "

The selector p::first-line does not match any real"; + ret += " agents will insert at the beginning of every paragraph.

"; + ret += "

Note that the length of the first line depends on a number of"; + ret += " an ordinary HTML paragraph such as:

"; + ret += " 
      <P>This is a somewhat long HTML ";
+    ret += "
"; + ret += "

the lines of which happen to be broken as follows:"; + ret += " 

      THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT";
+    ret += "
"; + ret += "

This paragraph might be 'rewritten' by user agents to include the"; + ret += " fictional tag sequence for ::first-line. This"; + ret += " fictional tag sequence helps to show how properties are inherited.

"; + ret += " 
      <P><P::first-line> This is a somewhat long HTML ";
+    ret += "      paragraph that </P::first-line> will be broken into several";
+    ret += "
"; + ret += "

If a pseudo-element breaks up a real element, the desired effect"; + ret += " with a span element:

"; + ret += " 
      <P><SPAN class='test'> This is a somewhat long HTML";
+    ret += "      lines.</SPAN> The first line will be identified";
+    ret += "
"; + ret += "

the user agent could simulate start and end tags for"; + ret += " span when inserting the fictional tag sequence for"; + ret += " ::first-line."; + ret += " 

      <P><P::first-line><SPAN class='test'> This is a";
+    ret += "      paragraph that will </SPAN></P::first-line><SPAN";
+    ret += "          class='test'> be";
+    ret += "      lines.</SPAN> The first line will be identified";
+    ret += "
"; + ret += "

In CSS, the ::first-line pseudo-element can only be"; + ret += " or a table-cell.

"; + ret += "

The 'first formatted line' of an"; + ret += " line of the div in <DIV><P>This"; + ret += " line...</P></DIV> is the first line of the p"; + ret += " that both p and div are block-level)."; + ret += "

The first line of a table-cell or inline-block cannot be the first"; + ret += " formatted line of an ancestor element. Thus, in <DIV><P"; + ret += " etcetera</DIV> the first formatted line of the"; + ret += " div is not the line 'Hello'."; + ret += "

Note that the first line of the p in this"; + ret += " fragment: <p><br>First... doesn't contain any"; + ret += " letters (assuming the default style for br in HTML"; + ret += "

A UA should act as if the fictional start tags of the"; + ret += " ::first-line pseudo-elements were nested just inside the"; + ret += " is an example. The fictional tag sequence for

"; + ret += " 
      <DIV>";
+    ret += "
"; + ret += "

is

"; + ret += " 
      <DIV>";
+    ret += "
"; + ret += "

The ::first-line pseudo-element is similar to an"; + ret += " following properties apply to a ::first-line"; + ret += " properties as well.

"; + ret += "

7.2. The ::first-letter pseudo-element

"; + ret += "

The ::first-letter pseudo-element represents the first"; + ret += " is 'none'; otherwise, it is similar to a floated element.

"; + ret += "

In CSS, these are the properties that apply to ::first-letter"; + ret += " of the letter, unlike for normal elements.

"; + ret += "
"; + ret += "

Example:

"; + ret += "

This example shows a possible rendering of an initial cap. Note"; + ret += " ::first-letter"; + ret += " fictional start tag of the first letter is inside the span,"; + ret += " the font weight of the first letter is normal, not bold as the span:"; + ret += " 

      p { line-height: 1.1 }";
+    ret += "
"; + ret += "
"; + ret += "

Image illustrating the ::first-letter pseudo-element"; + ret += "

"; + ret += "
"; + ret += "
"; + ret += "

The following CSS will make a drop cap initial letter span about two"; + ret += " lines:

"; + ret += " 
      <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>";
+    ret += "
"; + ret += "

This example might be formatted as follows:

"; + ret += "
"; + ret += "

Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements"; + ret += "

"; + ret += "
"; + ret += "

The fictional tag sequence is:

"; + ret += " 
      <P>";
+    ret += "
"; + ret += "

Note that the ::first-letter pseudo-element tags abut"; + ret += " block element.

"; + ret += "

In order to achieve traditional drop caps formatting, user agents"; + ret += " glyph outline may be taken into account when formatting.

"; + ret += "

Punctuation (i.e, characters defined in Unicode in the 'open' (Ps),"; + ret += " be included. [UNICODE]

"; + ret += "
"; + ret += "

Quotes that precede the"; + ret += " first letter should be included.

"; + ret += "
"; + ret += "

The ::first-letter also applies if the first letter is"; + ret += " money.'

"; + ret += "

In CSS, the ::first-letter pseudo-element applies to"; + ret += " elements. A future version of this specification"; + ret += " types.

"; + ret += "

The ::first-letter pseudo-element can be used with all"; + ret += " the element, even if that first text is in a descendant.

"; + ret += "
"; + ret += "

Example:

"; + ret += "

The fictional tag sequence for this HTMLfragment:"; + ret += " 

<div>";
+    ret += "      <p>The first text.
"; + ret += "

is:"; + ret += " 

<div>";
+    ret += "      <p><div::first-letter><p::first-letter>T</...></...>he first text.
"; + ret += "
"; + ret += "

The first letter of a table-cell or inline-block cannot be the"; + ret += " first letter of an ancestor element. Thus, in <DIV><P"; + ret += " etcetera</DIV> the first letter of the div is"; + ret += " letter 'H'. In fact, the div doesn't have a first letter."; + ret += "

The first letter must occur on the first formatted line. For example, in"; + ret += " this fragment: <p><br>First... the first line"; + ret += " doesn't contain any letters and ::first-letter doesn't"; + ret += " match anything (assuming the default style for br in HTML"; + ret += "

In CSS, if an element is a list item ('display: list-item'), the"; + ret += " ::first-letter applies to the first letter in the"; + ret += " ::first-letter on list items with 'list-style-position:"; + ret += " inside'. If an element has ::before or"; + ret += " ::after content, the ::first-letter applies"; + ret += " to the first letter of the element including that content."; + ret += "

"; + ret += "

Example:

"; + ret += "

After the rule 'p::before {content: 'Note: '}', the selector"; + ret += " 'p::first-letter' matches the 'N' of 'Note'.

"; + ret += "
"; + ret += "

Some languages may have specific rules about how to treat certain"; + ret += " considered within the ::first-letter pseudo-element."; + ret += "

If the letters that would form the ::first-letter are not in the"; + ret += " same element, such as ''T' in <p>'<em>T..., the UA"; + ret += " both elements, or simply not create a pseudo-element.

"; + ret += "

Similarly, if the first letter(s) of the block are not at the start"; + ret += "

"; + ret += "

Example:

"; + ret += "

The following example illustrates"; + ret += " paragraph will be 'red'.

"; + ret += " 
p { color: red; font-size: 12pt }";
+    ret += "      <P>Some text that ends up on two lines</P>
"; + ret += "

Assuming that a line break will occur before the word 'ends', the"; + ret += " fictional tag"; + ret += " sequence for this fragment might be:

"; + ret += " 
<P>";
+    ret += "      </P>
"; + ret += "

Note that the ::first-letter element is inside the ::first-line"; + ret += " element. Properties set on ::first-line are inherited by"; + ret += " ::first-letter, but are overridden if the same property is"; + ret += " ::first-letter.

"; + ret += "
"; + ret += "

7.3. The ::selection"; + ret += " pseudo-element

"; + ret += "

The ::selection pseudo-element applies to the portion"; + ret += " field. This pseudo-element should not be confused with the :checked pseudo-class (which used to be"; + ret += " named :selected)"; + ret += "

Although the ::selection pseudo-element is dynamic in"; + ret += " [CSS21]) which was originally rendered to a"; + ret += " ::selection state to that other medium, and have all the"; + ret += " required — UAs may omit the ::selection"; + ret += "

These are the CSS properties that apply to ::selection"; + ret += " ::selection may be ignored."; + ret += "

7.4. The ::before and ::after pseudo-elements

"; + ret += "

The ::before and ::after pseudo-elements"; + ret += " content. They are explained in CSS 2.1 [CSS21].

"; + ret += "

When the ::first-letter and ::first-line"; + ret += " pseudo-elements are combined with ::before and"; + ret += " ::after, they apply to the first letter or line of the"; + ret += " element including the inserted text.

"; + ret += "

8. Combinators

"; + ret += "

8.1. Descendant combinator

"; + ret += "

At times, authors may want selectors to describe an element that is"; + ret += " EM element that is contained within an H1"; + ret += " descendant combinator is white space that"; + ret += " separates two sequences of simple selectors. A selector of the form"; + ret += " 'A B' represents an element B that is an"; + ret += " arbitrary descendant of some ancestor element A."; + ret += "

"; + ret += "

Examples:

"; + ret += "

For example, consider the following selector:

"; + ret += " 
h1 em
"; + ret += "

It represents an em element being the descendant of"; + ret += " an h1 element. It is a correct and valid, but partial,"; + ret += " description of the following fragment:

"; + ret += " 
<h1>This <span class='myclass'>headline";
+    ret += "      is <em>very</em> important</span></h1>
"; + ret += "

The following selector:

"; + ret += " 
div * p
"; + ret += "

represents a p element that is a grandchild or later"; + ret += " descendant of a div element. Note the whitespace on"; + ret += " of the P.

"; + ret += "

The following selector, which combines descendant combinators and"; + ret += " attribute selectors, represents an"; + ret += " element that (1) has the href attribute set and (2) is"; + ret += " inside a p that is itself inside a div:

"; + ret += " 
div p *[href]
"; + ret += "
"; + ret += "

8.2. Child combinators

"; + ret += "

A child combinator describes a childhood relationship"; + ret += " 'greater-than sign' (>) character and"; + ret += " separates two sequences of simple selectors."; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following selector represents a p element that is"; + ret += " child of body:

"; + ret += " 
body > p
"; + ret += "

The following example combines descendant combinators and child"; + ret += " combinators.

"; + ret += " 
div ol>li p
"; + ret += " "; + ret += "

It represents a p element that is a descendant of an"; + ret += " li element; the li element must be the"; + ret += " child of an ol element; the ol element must"; + ret += " be a descendant of a div. Notice that the optional white"; + ret += " space around the '>' combinator has been left out.

"; + ret += "
"; + ret += "

For information on selecting the first child of an element, please"; + ret += " see the section on the :first-child pseudo-class"; + ret += " above.

"; + ret += "

8.3. Sibling combinators

"; + ret += "

There are two different sibling combinators: the adjacent sibling"; + ret += " considering adjacency of elements.

"; + ret += "

8.3.1. Adjacent sibling combinator"; + ret += "

"; + ret += "

The adjacent sibling combinator is made of the 'plus"; + ret += " sign' (U+002B, +) character that separates two"; + ret += " sequences of simple selectors. The elements represented by the two"; + ret += " represented by the second one.

"; + ret += "
"; + ret += "

Examples:

"; + ret += "

The following selector represents a p element"; + ret += " immediately following a math element:

"; + ret += " 
math + p
"; + ret += "

The following selector is conceptually similar to the one in the"; + ret += " adds a constraint to the h1 element, that it must have"; + ret += " class='opener':

"; + ret += " 
h1.opener + h2
"; + ret += "
"; + ret += "

8.3.2. General sibling combinator"; + ret += "

"; + ret += "

The general sibling combinator is made of the 'tilde'"; + ret += " (U+007E, ~) character that separates two sequences of"; + ret += " simple selectors. The elements represented by the two sequences share"; + ret += " represented by the second one.

"; + ret += "
"; + ret += "

Example:

"; + ret += " 
h1 ~ pre
"; + ret += "

represents a pre element following an h1. It"; + ret += " is a correct and valid, but partial, description of:

"; + ret += " 
<h1>Definition of the function a</h1>";
+    ret += "      <pre>function a(x) = 12x/13.5</pre>
"; + ret += "
"; + ret += "

9. Calculating a selector's specificity

"; + ret += "

A selector's specificity is calculated as follows:

"; + ret += "
    "; + ret += "
  • count the number of ID selectors in the selector (= a)
    • "; + ret += "
  • count the number of class selectors, attributes selectors, and"; + ret += "
    • "; + ret += "
  • count the number of element names in the selector (= c)
    • "; + ret += "
  • ignore pseudo-elements
    • "; + ret += "
"; + ret += "

Selectors inside the negation pseudo-class"; + ret += " a pseudo-class.

"; + ret += "

Concatenating the three numbers a-b-c (in a number system with a"; + ret += " large base) gives the specificity.

"; + ret += "
"; + ret += "

Examples:

"; + ret += " 
*               /* a=0 b=0 c=0 -> specificity =   0 */";
+    ret += "
"; + ret += "
"; + ret += "

Note: the specificity of the styles"; + ret += " specified in an HTML style attribute is described in CSS"; + ret += " 2.1. [CSS21].

"; + ret += "

10. The grammar of Selectors

"; + ret += "

10.1. Grammar

"; + ret += "

The grammar below defines the syntax of Selectors. It is globally"; + ret += " shorthand notations beyond Yacc (see [YACC])"; + ret += " are used:

"; + ret += "
    "; + ret += "
  • *: 0 or more"; + ret += "
  • +: 1 or more"; + ret += "
  • ?: 0 or 1"; + ret += "
  • |: separates alternatives"; + ret += "
  • [ ]: grouping
    • "; + ret += "
"; + ret += "

The productions are:

"; + ret += " 
selectors_group";
+    ret += "        ;
"; + ret += "

10.2. Lexical scanner

"; + ret += "

The following is the tokenizer, written in Flex (see"; + ret += " [FLEX]) notation. The tokenizer is"; + ret += " case-insensitive.

"; + ret += "

The two occurrences of '\377' represent the highest character"; + ret += " possible code point in Unicode/ISO-10646. [UNICODE]

"; + ret += " 
%option case-insensitive";
+    ret += "      .                return *yytext;
"; + ret += "

11. Namespaces and down-level clients

"; + ret += "

An important issue is the interaction of CSS selectors with XML"; + ret += " to construct a CSS style sheet which will properly match selectors in"; + ret += " is possible to construct a style sheet in which selectors would match"; + ret += " elements and attributes correctly.

"; + ret += "

It should be noted that a down-level CSS client will (if it"; + ret += " @namespace at-rules, as well as all style rules that make"; + ret += " use of namespace qualified element type or attribute selectors. The"; + ret += " than possibly match them incorrectly.

"; + ret += "

The use of default namespaces in CSS makes it possible to write"; + ret += " element type selectors that will function in both namespace aware CSS"; + ret += " down-level clients may incorrectly match selectors against XML"; + ret += " elements in other namespaces.

"; + ret += "

The following are scenarios and examples in which it is possible to"; + ret += " that do not implement this proposal.

"; + ret += "
    "; + ret += "
  1. "; + ret += "

    The XML document does not use namespaces.

    "; + ret += "
      "; + ret += "
    • In this case, it is obviously not necessary to declare or use"; + ret += " attribute selectors will function adequately in a down-level"; + ret += "
      • "; + ret += "
    • In a CSS namespace aware client, the default behavior of"; + ret += " element selectors matching without regard to namespace will"; + ret += " present. However, the use of specific element type selectors"; + ret += " match only elements that have no namespace ('|name')"; + ret += " will guarantee that selectors will match only XML elements that"; + ret += "
      • "; + ret += "
    "; + ret += "
    2. "; + ret += "
  2. "; + ret += "

    The XML document defines a single, default namespace used"; + ret += " names.

    "; + ret += "
      "; + ret += "
    • In this case, a down-level client will function as if"; + ret += " element type and attribute selectors will match against all"; + ret += "
      • "; + ret += "
    "; + ret += "
    3. "; + ret += "
  3. "; + ret += "

    The XML document does not use a default namespace, all"; + ret += " to the same URI).

    "; + ret += "
      "; + ret += "
    • In this case, the down-level client will view and match"; + ret += " element type and attribute selectors based on their fully"; + ret += " qualified name, not the local part as outlined in the Type selectors and Namespaces"; + ret += " selectors may be declared using an escaped colon"; + ret += " '\\:'"; + ret += " 'html\\:h1' will match"; + ret += " <html:h1>. Selectors using the qualified name"; + ret += "
      • "; + ret += "
    • Note that selectors declared in this fashion will"; + ret += " only match in down-level clients. A CSS namespace aware"; + ret += " client will match element type and attribute selectors based on"; + ret += " the name's local part. Selectors declared with the fully"; + ret += "
      • "; + ret += "
    "; + ret += "
    4. "; + ret += "
"; + ret += "

In other scenarios: when the namespace prefixes used in the XML are"; + ret += " different namespace URIs within the same document, or in"; + ret += " a CSS and XML namespace aware client.

"; + ret += "

12. Profiles

"; + ret += "

Each specification using Selectors must define the subset of W3C"; + ret += " Selectors it allows and excludes, and describe the local meaning of"; + ret += " all the components of that subset.

"; + ret += "

Non normative examples:"; + ret += "

"; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
Selectors profile
SpecificationCSS level 1
Acceptstype selectors
class selectors
ID selectors
:link,"; + ret += " :visited and :active pseudo-classes
descendant combinator"; + ret += "
::first-line and ::first-letter pseudo-elements"; + ret += "
Excludes"; + ret += "

universal selector
attribute selectors
:hover and"; + ret += " pseudo-classes
:target pseudo-class
:lang()"; + ret += " pseudo-class
all UI"; + ret += " element states pseudo-classes
all structural"; + ret += " pseudo-classes
negation pseudo-class
all"; + ret += " UI element fragments pseudo-elements
::before and ::after"; + ret += " pseudo-elements
child combinators
sibling combinators"; + ret += "

namespaces

Extra constraintsonly one class selector allowed per sequence of simple"; + ret += " selectors"; + ret += "
"; + ret += "

"; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
Selectors profile
SpecificationCSS level 2
Acceptstype selectors
universal selector
attribute presence and"; + ret += " values selectors
class selectors
ID selectors
:link,"; + ret += "
descendant combinator
child combinator
adjacent"; + ret += " combinator
::first-line and ::first-letter"; + ret += " pseudo-elements
::before"; + ret += "
Excludes"; + ret += "

content selectors
substring matching attribute"; + ret += " selectors
:target pseudo-classes
all UI element"; + ret += " states pseudo-classes
all structural pseudo-classes other"; + ret += " than :first-child
negation pseudo-class
all UI element"; + ret += " fragments pseudo-elements
general sibling combinators"; + ret += "

namespaces

Extra constraintsmore than one class selector per sequence of simple selectors"; + ret += "
"; + ret += "

In CSS, selectors express pattern matching rules that determine which"; + ret += "

The following selector (CSS level 2) will match all anchors a"; + ret += " with attribute name set inside a section 1 header"; + ret += " h1:"; + ret += " 

h1 a[name]
"; + ret += "

All CSS declarations attached to such a selector are applied to elements"; + ret += " matching it.

"; + ret += "
"; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
Selectors profile
SpecificationSTTS 3
Accepts"; + ret += "

type selectors
universal selectors
attribute"; + ret += " selectors
class"; + ret += " selectors
ID selectors
all structural"; + ret += " pseudo-classes
"; + ret += "

namespaces

Excludesnon-accepted pseudo-classes
pseudo-elements
Extra constraintssome selectors and combinators are not allowed in fragment"; + ret += "
"; + ret += "

Selectors can be used in STTS 3 in two different"; + ret += "

    "; + ret += "
  1. a selection mechanism equivalent to CSS selection mechanism:"; + ret += "
  2. fragment descriptions that appear on the right side of declarations."; + ret += "
    3. "; + ret += "
"; + ret += "
"; + ret += "

13. Conformance and requirements

"; + ret += "

This section defines conformance with the present specification only."; + ret += "

The inability of a user agent to implement part of this specification due to"; + ret += "

All specifications reusing Selectors must contain a Profile listing the"; + ret += " subset of Selectors it accepts or excludes, and describing the constraints"; + ret += "

Invalidity is caused by a parsing error, e.g. an unrecognized token or a"; + ret += "

User agents must observe the rules for handling parsing errors:"; + ret += "

    "; + ret += "
  • a simple selector containing an undeclared namespace prefix is invalid"; + ret += "
    • "; + ret += "
  • a selector containing an invalid simple selector, an invalid combinator"; + ret += "
    • "; + ret += "
  • a group of selectors containing an invalid selector is invalid.
    • "; + ret += "
"; + ret += "

Specifications reusing Selectors must define how to handle parsing"; + ret += " used is dropped.)

"; + ret += " "; + ret += "

14. Tests

"; + ret += "

This specification has a test"; + ret += " suite allowing user agents to verify their basic conformance to"; + ret += " and does not cover all possible combined cases of Selectors.

"; + ret += "

15. Acknowledgements

"; + ret += "

The CSS working group would like to thank everyone who has sent"; + ret += " comments on this specification over the years.

"; + ret += "

The working group would like to extend special thanks to Donna"; + ret += " the final editorial review.

"; + ret += "

16. References

"; + ret += "
"; + ret += "
[CSS1]"; + ret += "
Bert Bos, HÃ¥kon Wium Lie; 'Cascading"; + ret += " Style Sheets, level 1', W3C Recommendation, 17 Dec 1996, revised"; + ret += "
(http://www.w3.org/TR/REC-CSS1)"; + ret += "
[CSS21]"; + ret += "
Bert Bos, Tantek Çelik, Ian Hickson, Håkon"; + ret += " Wium Lie, editors; 'Cascading Style Sheets, level 2 revision"; + ret += " 1', W3C Working Draft, 13 June 2005"; + ret += "
(http://www.w3.org/TR/CSS21)"; + ret += "
[CWWW]"; + ret += "
Martin J. Dürst, François Yergeau,"; + ret += " Misha Wolf, Asmus Freytag, Tex Texin, editors; 'Character Model"; + ret += " for the World Wide Web', W3C Recommendation, 15 February 2005"; + ret += "
(http://www.w3.org/TR/charmod/)"; + ret += "
[FLEX]"; + ret += "
'Flex: The Lexical Scanner"; + ret += " Generator', Version 2.3.7, ISBN 1882114213"; + ret += "
[HTML4]"; + ret += "
Dave Ragget, Arnaud Le Hors, Ian Jacobs,"; + ret += " editors; 'HTML 4.01 Specification', W3C Recommendation, 24"; + ret += "
"; + ret += " (http://www.w3.org/TR/html4/)"; + ret += "
[MATH]"; + ret += "
Patrick Ion, Robert Miner, editors; 'Mathematical"; + ret += " Markup Language (MathML) 1.01', W3C Recommendation, revision of 7"; + ret += "
(http://www.w3.org/TR/REC-MathML/)"; + ret += "
[RFC3066]"; + ret += "
H. Alvestrand; 'Tags for the"; + ret += " Identification of Languages', Request for Comments 3066, January"; + ret += "
(http://www.ietf.org/rfc/rfc3066.txt)"; + ret += "
[STTS]"; + ret += "
Daniel Glazman; 'Simple Tree Transformation"; + ret += " Sheets 3', Electricité de France, submission to the W3C,"; + ret += "
(http://www.w3.org/TR/NOTE-STTS3)"; + ret += "
[SVG]"; + ret += "
Jon Ferraiolo, 藤沢 淳, Dean"; + ret += " Jackson, editors; 'Scalable Vector Graphics (SVG) 1.1"; + ret += " Specification', W3C Recommendation, 14 January 2003"; + ret += "
(http://www.w3.org/TR/SVG/)"; + ret += "
[UNICODE]
"; + ret += "
The Unicode"; + ret += " Standard, Version 4.1, The Unicode Consortium. Boston, MA,"; + ret += " Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by Unicode"; + ret += " 4.0.1 and Unicode"; + ret += " 4.1.0."; + ret += "
(http://www.unicode.org/versions/)"; + ret += "
"; + ret += "
[XML10]"; + ret += "
Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,"; + ret += " Eve Maler, François Yergeau, editors; 'Extensible Markup"; + ret += " Language (XML) 1.0 (Third Edition)', W3C Recommendation, 4"; + ret += "
(http://www.w3.org/TR/REC-xml/)"; + ret += "
[XMLNAMES]"; + ret += "
Tim Bray, Dave Hollander, Andrew Layman,"; + ret += " editors; 'Namespaces in XML', W3C Recommendation, 14"; + ret += "
(http://www.w3.org/TR/REC-xml-names/)"; + ret += "
[YACC]"; + ret += "
S. C. Johnson; 'YACC — Yet another"; + ret += " compiler compiler', Technical Report, Murray Hill, 1975"; + ret += "
';
"; + ret += " 1"; + ret += " 2"; + ret += ""; + return ret; + } + +} diff --git a/devtest/src/main/java/com/google/gwt/query/client/MyTestCase.java b/devtest/src/main/java/com/google/gwt/query/client/MyTestCase.java index 8ea94ea1..3c335039 100644 --- a/devtest/src/main/java/com/google/gwt/query/client/MyTestCase.java +++ b/devtest/src/main/java/com/google/gwt/query/client/MyTestCase.java @@ -1,148 +1,148 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package com.google.gwt.query.client; - -import com.google.gwt.dom.client.Element; -import com.google.gwt.user.client.Timer; -import com.google.gwt.user.client.ui.HTML; -import com.google.gwt.user.client.ui.RootPanel; -import static com.google.gwt.query.client.GQuery.*; - -/** - * Just a simple class to emulate JUnit TestCase. - */ -public class MyTestCase { - - static Element e = null; - static HTML testPanel = null; - - public static void assertEquals(Object a, Object b) { - check(a.equals(b), "assertEquals: expected=" + a + " actual=" + b); - } - - public static void assertFalse(boolean b) { - check(!b, "assertTrue: actual should be false but is true"); - } - - public static void assertFalse(String msg, boolean b) { - check(!b, msg); - } - - public static void assertNotNull(Object a) { - check(a != null, "assertNotNull: actual object is null"); - } - - public static void assertNull(Object a) { - check(a == null, "assertNull: actual object is not null"); - } - - public static void assertTrue(boolean b) { - check(b, "assertTrue: actual should be true but is false"); - } - - public static void assertTrue(String msg, boolean b) { - check(b, msg); - } - - public static void check(boolean condition, String message) { - if (!condition) { - RuntimeException ex = new RuntimeException(message); - ex.printStackTrace(); - throw ex; - } - } - - protected static void assertHtmlEquals(Object expected, Object actual) { - assertEquals(iExplorerFixHtml(expected), iExplorerFixHtml(actual)); - } - - protected static String iExplorerFixHtml(Object s) { - return s.toString().trim().toLowerCase().replaceAll( - "[\r\n]", "").replaceAll( - " ([\\w]+)=[\"']([^\"']+)[\"']", " $1=$2").replaceAll( - "\\s+\\$h=\"[^\"]+\"", "").replaceAll( - " added=[^ >]+", ""); - } - - public void gwtSetUp() { - if (e == null) { - testPanel = new HTML(); - RootPanel.get().add(testPanel); - e = testPanel.getElement(); - e.setId("core-tst"); - } else { - e.setInnerHTML(""); - } - } - - protected static void assertArrayContains(Object result, Object... array) { - assertArrayContains("", result, array); - } - - protected static void assertArrayContains(String message, Object result, Object... array) { - String values = ""; - boolean done = false; - for (Object o : array) { - values += o.toString() + " "; - if (result.equals(o)) { - done = true; - } - } - message = message + ", value (" + result + ") not found in: " + values; - assertTrue(message, done); - } - - private boolean testRunning = false; - - protected void delayTestFinish(int millis) { - testRunning = true; - new Timer(){ - public void run() { - assertFalse(testRunning); - } - }.schedule(millis); - } - - protected void finishTest() { - testRunning = false; - } - - protected void fail() { - check(false, "Test failure"); - } - - protected void fail(String msg) { - check(false, msg); - } - - protected void assertPosition(GQuery g, Offset min, Offset max) { - int a = Math.min(min.top, max.top); - int b = Math.max(min.top, max.top); - int v = g.offset().top; - boolean c = a <= v && v <= b; - String msg = "Top has the value " + v + ", but should be in the range: " - + a + " - " + b; - assertTrue(msg, c); - - a = Math.min(min.left, max.left); - b = Math.max(min.left, max.left); - v = g.offset().left; - c = a <= v && v <= b; - msg = "Left has the value " + v + ", but should be in the range: " + a - + " - " + b; - assertTrue(msg, c); - } -} +/* + * Copyright 2011, The gwtquery team. + * + * 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. + */ +package com.google.gwt.query.client; + +import com.google.gwt.dom.client.Element; +import com.google.gwt.user.client.Timer; +import com.google.gwt.user.client.ui.HTML; +import com.google.gwt.user.client.ui.RootPanel; +import static com.google.gwt.query.client.GQuery.*; + +/** + * Just a simple class to emulate JUnit TestCase. + */ +public class MyTestCase { + + static Element e = null; + static HTML testPanel = null; + + public static void assertEquals(Object a, Object b) { + check(a.equals(b), "assertEquals: expected=" + a + " actual=" + b); + } + + public static void assertFalse(boolean b) { + check(!b, "assertTrue: actual should be false but is true"); + } + + public static void assertFalse(String msg, boolean b) { + check(!b, msg); + } + + public static void assertNotNull(Object a) { + check(a != null, "assertNotNull: actual object is null"); + } + + public static void assertNull(Object a) { + check(a == null, "assertNull: actual object is not null"); + } + + public static void assertTrue(boolean b) { + check(b, "assertTrue: actual should be true but is false"); + } + + public static void assertTrue(String msg, boolean b) { + check(b, msg); + } + + public static void check(boolean condition, String message) { + if (!condition) { + RuntimeException ex = new RuntimeException(message); + ex.printStackTrace(); + throw ex; + } + } + + protected static void assertHtmlEquals(Object expected, Object actual) { + assertEquals(iExplorerFixHtml(expected), iExplorerFixHtml(actual)); + } + + protected static String iExplorerFixHtml(Object s) { + return s.toString().trim().toLowerCase().replaceAll( + "[\r\n]", "").replaceAll( + " ([\\w]+)=[\"']([^\"']+)[\"']", " $1=$2").replaceAll( + "\\s+\\$h=\"[^\"]+\"", "").replaceAll( + " added=[^ >]+", ""); + } + + public void gwtSetUp() { + if (e == null) { + testPanel = new HTML(); + RootPanel.get().add(testPanel); + e = testPanel.getElement(); + e.setId("core-tst"); + } else { + e.setInnerHTML(""); + } + } + + protected static void assertArrayContains(Object result, Object... array) { + assertArrayContains("", result, array); + } + + protected static void assertArrayContains(String message, Object result, Object... array) { + String values = ""; + boolean done = false; + for (Object o : array) { + values += o.toString() + " "; + if (result.equals(o)) { + done = true; + } + } + message = message + ", value (" + result + ") not found in: " + values; + assertTrue(message, done); + } + + private boolean testRunning = false; + + protected void delayTestFinish(int millis) { + testRunning = true; + new Timer(){ + public void run() { + assertFalse(testRunning); + } + }.schedule(millis); + } + + protected void finishTest() { + testRunning = false; + } + + protected void fail() { + check(false, "Test failure"); + } + + protected void fail(String msg) { + check(false, msg); + } + + protected void assertPosition(GQuery g, Offset min, Offset max) { + int a = Math.min(min.top, max.top); + int b = Math.max(min.top, max.top); + int v = g.offset().top; + boolean c = a <= v && v <= b; + String msg = "Top has the value " + v + ", but should be in the range: " + + a + " - " + b; + assertTrue(msg, c); + + a = Math.min(min.left, max.left); + b = Math.max(min.left, max.left); + v = g.offset().left; + c = a <= v && v <= b; + msg = "Left has the value " + v + ", but should be in the range: " + a + + " - " + b; + assertTrue(msg, c); + } +} diff --git a/devtest/src/main/java/com/google/gwt/query/public/test.html b/devtest/src/main/java/com/google/gwt/query/public/test.html index 42830523..1dff4d7e 100644 --- a/devtest/src/main/java/com/google/gwt/query/public/test.html +++ b/devtest/src/main/java/com/google/gwt/query/public/test.html @@ -1,9 +1,9 @@ - - - - - - - - - + + + + + + + + + diff --git a/gwtquery-core-2.0.1/src/main/java/com/google/gwt/core/client/JsArrayMixed.java b/gwtquery-core-2.0.1/src/main/java/com/google/gwt/core/client/JsArrayMixed.java index dae68b3a..0639f8d9 100644 --- a/gwtquery-core-2.0.1/src/main/java/com/google/gwt/core/client/JsArrayMixed.java +++ b/gwtquery-core-2.0.1/src/main/java/com/google/gwt/core/client/JsArrayMixed.java @@ -1,12 +1,12 @@ /* * Copyright 2010 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 @@ -17,10 +17,10 @@ package com.google.gwt.core.client; /** * A simple wrapper around an heterogeneous native array of values. - * + * * This class may not be directly instantiated, and can only be returned from a * native method. For example, - * + * * * native JsArrayMixed getNativeArray() /*-{ * return [ @@ -38,7 +38,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Gets the boolean at a given index. - * + * * @param index the index to be retrieved * @return the object at the given index, or null if none exists */ @@ -48,7 +48,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Gets the double at a given index. - * + * * @param index the index to be retrieved * @return the object at the given index, or null if none exists */ @@ -58,7 +58,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Gets the {@link JavaScriptObject} at a given index. - * + * * @param index the index to be retrieved * @return the {@code JavaScriptObject} at the given index, or * null if none exists @@ -69,7 +69,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Gets the String at a given index. - * + * * @param index the index to be retrieved * @return the object at the given index, or null if none exists */ @@ -98,7 +98,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Gets the length of the array. - * + * * @return the array length */ public final native int length() /*-{ @@ -135,10 +135,10 @@ public class JsArrayMixed extends JavaScriptObject { /** * Sets the boolean value at a given index. - * + * * If the index is out of bounds, the value will still be set. The array's * length will be updated to encompass the bounds implied by the added value. - * + * * @param index the index to be set * @param value the boolean to be stored */ @@ -148,10 +148,10 @@ public class JsArrayMixed extends JavaScriptObject { /** * Sets the double value at a given index. - * + * * If the index is out of bounds, the value will still be set. The array's * length will be updated to encompass the bounds implied by the added value. - * + * * @param index the index to be set * @param value the double to be stored */ @@ -161,10 +161,10 @@ public class JsArrayMixed extends JavaScriptObject { /** * Sets the object value at a given index. - * + * * If the index is out of bounds, the value will still be set. The array's * length will be updated to encompass the bounds implied by the added object. - * + * * @param index the index to be set * @param value the {@link JavaScriptObject} to be stored */ @@ -174,10 +174,10 @@ public class JsArrayMixed extends JavaScriptObject { /** * Sets the String value at a given index. - * + * * If the index is out of bounds, the value will still be set. The array's * length will be updated to encompass the bounds implied by the added String. - * + * * @param index the index to be set * @param value the String to be stored */ @@ -187,7 +187,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Reset the length of the array. - * + * * @param newLength the new length of the array */ public final native void setLength(int newLength) /*-{ @@ -196,7 +196,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Shifts the first value off the array. - * + * * @return the shifted boolean */ public final native boolean shiftBoolean() /*-{ @@ -205,7 +205,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Shifts the first value off the array. - * + * * @return the shifted double */ public final native double shiftNumber() /*-{ @@ -214,7 +214,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Shifts the first value off the array. - * + * * @return the shifted {@link JavaScriptObject} */ public final native T shiftObject() /*-{ @@ -223,7 +223,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Shifts the first value off the array. - * + * * @return the shifted String */ public final native String shiftString() /*-{ @@ -232,7 +232,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Shifts a boolean onto the beginning of the array. - * + * * @param value the value to the stored */ public final native void unshift(boolean value) /*-{ @@ -241,7 +241,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Shifts a double onto the beginning of the array. - * + * * @param value the value to store */ public final native void unshift(double value) /*-{ @@ -250,7 +250,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Shifts a {@link JavaScriptObject} onto the beginning of the array. - * + * * @param value the value to store */ public final native void unshift(JavaScriptObject value) /*-{ @@ -259,7 +259,7 @@ public class JsArrayMixed extends JavaScriptObject { /** * Shifts a String onto the beginning of the array. - * + * * @param value the value to store */ public final native void unshift(String value) /*-{ diff --git a/gwtquery-core-2.0.1/src/main/java/com/google/gwt/query/linker/IFrameWithDocTypeLinker.java b/gwtquery-core-2.0.1/src/main/java/com/google/gwt/query/linker/IFrameWithDocTypeLinker.java index fca45d43..a1bbf53f 100644 --- a/gwtquery-core-2.0.1/src/main/java/com/google/gwt/query/linker/IFrameWithDocTypeLinker.java +++ b/gwtquery-core-2.0.1/src/main/java/com/google/gwt/query/linker/IFrameWithDocTypeLinker.java @@ -1,12 +1,12 @@ /* * Copyright 2009 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 diff --git a/gwtquery-core-2.0.1/src/main/java/com/google/gwt/query/rebind/SelectorGeneratorCssToXPath.java b/gwtquery-core-2.0.1/src/main/java/com/google/gwt/query/rebind/SelectorGeneratorCssToXPath.java index 04028ef0..688a6042 100644 --- a/gwtquery-core-2.0.1/src/main/java/com/google/gwt/query/rebind/SelectorGeneratorCssToXPath.java +++ b/gwtquery-core-2.0.1/src/main/java/com/google/gwt/query/rebind/SelectorGeneratorCssToXPath.java @@ -1,112 +1,112 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package com.google.gwt.query.rebind; - -import java.util.ArrayList; -import java.util.regex.MatchResult; -import java.util.regex.Matcher; -import java.util.regex.Pattern; - -import javax.xml.xpath.XPath; -import javax.xml.xpath.XPathExpressionException; -import javax.xml.xpath.XPathFactory; - -import com.google.gwt.core.ext.TreeLogger; -import com.google.gwt.core.ext.UnableToCompleteException; -import com.google.gwt.core.ext.typeinfo.JMethod; -import com.google.gwt.query.client.Selector; -import com.google.gwt.query.client.impl.SelectorEngineCssToXPath; -import com.google.gwt.query.client.impl.SelectorEngineCssToXPath.ReplaceCallback; -import com.google.gwt.query.client.impl.SelectorEngineCssToXPath.Replacer; -import com.google.gwt.user.rebind.SourceWriter; - -/** - * Compile time selector generator which translates selector into XPath at - * compile time. It Uses the SelectorEngineCssToXpath to produce the xpath - * selectors - */ -public class SelectorGeneratorCssToXPath extends SelectorGeneratorBase { - - /** - * The replacer implementation for the JVM. - */ - public static final Replacer replacerJvm = new Replacer() { - public String replaceAll(String s, String r, Object o) { - Pattern p = Pattern.compile(r); - if (o instanceof ReplaceCallback) { - final Matcher matcher = p.matcher(s); - ReplaceCallback callback = (ReplaceCallback) o; - while (matcher.find()) { - final MatchResult matchResult = matcher.toMatchResult(); - ArrayList argss = new ArrayList(); - for (int i = 0; i < matchResult.groupCount() + 1; i++) { - argss.add(matchResult.group(i)); - } - final String replacement = callback.foundMatch(argss); - s = s.substring(0, matchResult.start()) + replacement - + s.substring(matchResult.end()); - matcher.reset(s); - } - return s; - } else { - return p.matcher(s).replaceAll(o.toString()); - } - } - }; - - public static final Replacer replacer = replacerJvm; - - private SelectorEngineCssToXPath engine = new SelectorEngineCssToXPath( - replacer); - - protected String css2Xpath(String s) { - return engine.css2Xpath(s); - } - - private XPathFactory factory = XPathFactory.newInstance(); - private XPath xpath = factory.newXPath(); - - protected void generateMethodBody(SourceWriter sw, JMethod method, - TreeLogger treeLogger, boolean hasContext) - throws UnableToCompleteException { - - String selector = method.getAnnotation(Selector.class).value(); - String xselector = css2Xpath(selector); - - // Validate the generated xpath selector. - try { - validateXpath(xselector); - } catch (XPathExpressionException e1) { - System.err.println("Invalid XPath generated selector, please revise it: " + xselector); - if (!selector.equals(xselector)) { - System.err.println("If your css2 selector syntax is correct, open an issue in the gwtquery project. cssselector:" - + selector + " xpath:" + xselector); - } - throw new UnableToCompleteException(); - } - - sw.println("return " - + wrap(method, "xpathEvaluate(\"" + xselector + "\", root)") + ";"); - } - - public void validateXpath(String xselector) throws XPathExpressionException { - xpath.compile(xselector); - } - - protected String getImplSuffix() { - return "CssToXPath" + super.getImplSuffix(); - } -} +/* + * Copyright 2011, The gwtquery team. + * + * 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. + */ +package com.google.gwt.query.rebind; + +import java.util.ArrayList; +import java.util.regex.MatchResult; +import java.util.regex.Matcher; +import java.util.regex.Pattern; + +import javax.xml.xpath.XPath; +import javax.xml.xpath.XPathExpressionException; +import javax.xml.xpath.XPathFactory; + +import com.google.gwt.core.ext.TreeLogger; +import com.google.gwt.core.ext.UnableToCompleteException; +import com.google.gwt.core.ext.typeinfo.JMethod; +import com.google.gwt.query.client.Selector; +import com.google.gwt.query.client.impl.SelectorEngineCssToXPath; +import com.google.gwt.query.client.impl.SelectorEngineCssToXPath.ReplaceCallback; +import com.google.gwt.query.client.impl.SelectorEngineCssToXPath.Replacer; +import com.google.gwt.user.rebind.SourceWriter; + +/** + * Compile time selector generator which translates selector into XPath at + * compile time. It Uses the SelectorEngineCssToXpath to produce the xpath + * selectors + */ +public class SelectorGeneratorCssToXPath extends SelectorGeneratorBase { + + /** + * The replacer implementation for the JVM. + */ + public static final Replacer replacerJvm = new Replacer() { + public String replaceAll(String s, String r, Object o) { + Pattern p = Pattern.compile(r); + if (o instanceof ReplaceCallback) { + final Matcher matcher = p.matcher(s); + ReplaceCallback callback = (ReplaceCallback) o; + while (matcher.find()) { + final MatchResult matchResult = matcher.toMatchResult(); + ArrayList argss = new ArrayList(); + for (int i = 0; i < matchResult.groupCount() + 1; i++) { + argss.add(matchResult.group(i)); + } + final String replacement = callback.foundMatch(argss); + s = s.substring(0, matchResult.start()) + replacement + + s.substring(matchResult.end()); + matcher.reset(s); + } + return s; + } else { + return p.matcher(s).replaceAll(o.toString()); + } + } + }; + + public static final Replacer replacer = replacerJvm; + + private SelectorEngineCssToXPath engine = new SelectorEngineCssToXPath( + replacer); + + protected String css2Xpath(String s) { + return engine.css2Xpath(s); + } + + private XPathFactory factory = XPathFactory.newInstance(); + private XPath xpath = factory.newXPath(); + + protected void generateMethodBody(SourceWriter sw, JMethod method, + TreeLogger treeLogger, boolean hasContext) + throws UnableToCompleteException { + + String selector = method.getAnnotation(Selector.class).value(); + String xselector = css2Xpath(selector); + + // Validate the generated xpath selector. + try { + validateXpath(xselector); + } catch (XPathExpressionException e1) { + System.err.println("Invalid XPath generated selector, please revise it: " + xselector); + if (!selector.equals(xselector)) { + System.err.println("If your css2 selector syntax is correct, open an issue in the gwtquery project. cssselector:" + + selector + " xpath:" + xselector); + } + throw new UnableToCompleteException(); + } + + sw.println("return " + + wrap(method, "xpathEvaluate(\"" + xselector + "\", root)") + ";"); + } + + public void validateXpath(String xselector) throws XPathExpressionException { + xpath.compile(xselector); + } + + protected String getImplSuffix() { + return "CssToXPath" + super.getImplSuffix(); + } +} diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml b/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml index 61cdd0df..c71a4361 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml +++ b/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml @@ -1,142 +1,142 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/QueryMin.gwt.xml b/gwtquery-core/src/main/java/com/google/gwt/query/QueryMin.gwt.xml index 9678a7ee..4a9b0fd0 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/QueryMin.gwt.xml +++ b/gwtquery-core/src/main/java/com/google/gwt/query/QueryMin.gwt.xml @@ -1,72 +1,72 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/Function.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/Function.java index f6a7b82c..361eea1f 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/Function.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/Function.java @@ -1,12 +1,12 @@ /* * Copyright 2011, The gwtquery team. - * + * * 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 @@ -25,33 +25,33 @@ import com.google.gwt.user.client.ui.Widget; * Extend this class to implement functions callbacks. */ public abstract class Function { - + private com.google.gwt.dom.client.Element element = null; private Event event = null; private int index = -1; private Object[] data = new Object[0]; - + public T getElement() { return element.cast(); } - + public void setElement(T e) { element = e; } - + public void setEvent(Event e) { event = e; element = e != null ? e.getCurrentEventTarget().cast() : null; } - + public Event getEvent() { return event; } - + public void setIndex(int i) { index = i; } - + public Object[] getData() { return data; } @@ -59,7 +59,7 @@ public abstract class Function { public void setData(Object...data) { this.data = data; } - + public Object getDataObject() { return getDataObject(0); } @@ -67,11 +67,11 @@ public abstract class Function { public Object getDataObject(int idx) { return data != null && data.length > idx ? data[idx] : null; } - + public Properties getDataProperties() { return getDataProperties(0); } - + public Properties getDataProperties(int idx) { Object o = getDataObject(idx); if (o != null && o instanceof JavaScriptObject) { @@ -87,20 +87,20 @@ public abstract class Function { public void setData(double b) { setData(Double.valueOf(b)); } - + public void setDataObject(Object data) { setData(data); } - + public int getIndex() { return index; } - + /** * Override this for methods which invoke a cancel action. - * + * * @param e takes a com.google.gwt.dom.client.Element. - * + * */ public void cancel(com.google.gwt.dom.client.Element e) { setElement(e); @@ -110,9 +110,9 @@ public abstract class Function { /** * Override this for methods which invoke a cancel action. - * + * * @param e takes a com.google.gwt.user.client.Element. - * + * */ public void cancel(com.google.gwt.user.client.Element e) { setElement(e); @@ -129,23 +129,23 @@ public abstract class Function { /** * Override this for GQuery methods which loop over matched elements and * invoke a callback on each element. - * + * * @param e takes a com.google.gwt.dom.client.Element. - * + * */ public Object f(com.google.gwt.dom.client.Element e, int i) { setElement(e); setIndex(i); // This has to be the order of calls - return f(e.cast(), i); + return f(e.cast(), i); } /** * Override this for GQuery methods which loop over matched elements and * invoke a callback on each element. - * + * * @param e takes a com.google.gwt.user.client.Element. - * + * */ public Object f(com.google.gwt.user.client.Element e, int i) { setElement(e); @@ -162,10 +162,10 @@ public abstract class Function { /** * Override this for GQuery methods which loop over matched widgets and * invoke a callback on each widget. - * - * NOTE: If your query has non-widget elements you might need to override + * + * NOTE: If your query has non-widget elements you might need to override * 'public void f()' or 'public void f(Element e)' to handle these elements and - * avoid a runtime exception. + * avoid a runtime exception. */ public Object f(Widget w, int i) { setElement(w.getElement()); @@ -173,21 +173,21 @@ public abstract class Function { f(w); return null; } - + /** * Override this method for bound callbacks */ public void f(Object... data) { fe(data); } - + /** * Override this method for bound callbacks */ public void f(int i, Object data) { f(i, new Object[]{data}); } - + /** * Override this method for bound callbacks */ @@ -206,7 +206,7 @@ public abstract class Function { } } } - + /** * Override this method for bound event handlers if you wish to deal with * per-handler user data. @@ -219,19 +219,19 @@ public abstract class Function { /** * Override this method for bound event handlers. - * - * @return boolean: false means stop propagation and prevent default + * + * @return boolean: false means stop propagation and prevent default */ public boolean f(Event e) { setEvent(e); f(element); return true; } - + /** * Override this for GQuery methods which take a callback and do not expect a * return value. - * + * * @param e takes a com.google.gwt.dom.client.Element */ public void f(com.google.gwt.dom.client.Element e) { @@ -239,11 +239,11 @@ public abstract class Function { // This has to be the order of calls f(e.cast()); } - + /** * Override this for GQuery methods which take a callback and do not expect a * return value. - * + * * @param e takes a com.google.gwt.user.client.Element */ private boolean loop = false; @@ -257,14 +257,14 @@ public abstract class Function { f(); } } - + /** * Override this for GQuery methods which take a callback, but do not expect a * return value, apply to a single widget. - * - * NOTE: If your query has non-widget elements you might need to override + * + * NOTE: If your query has non-widget elements you might need to override * 'public void f()' or 'public void f(Element e)' to handle these elements and - * avoid a runtime exception. + * avoid a runtime exception. */ public void f(Widget w){ setElement(w.getElement()); @@ -279,7 +279,7 @@ public abstract class Function { /** * Methods fe(...) should be used from asynchronous contexts so as we can * catch the exception and send it to the GWT UncaughtExceptionHandler. - * They are intentionally final to avoid override them + * They are intentionally final to avoid override them */ public final void fe() { fe(data); @@ -288,16 +288,16 @@ public abstract class Function { /** * Methods fe(...) should be used from asynchronous contexts so as we can * catch the exception and send it to the GWT UncaughtExceptionHandler - * They are intentionally final to avoid override them + * They are intentionally final to avoid override them */ public final void fe(Object data) { fe(new Object[]{data}); } - + /** * Methods fe(...) should be used from asynchronous contexts so as we can * catch the exception and send it to the GWT UncaughtExceptionHandler - * They are intentionally final to avoid override them + * They are intentionally final to avoid override them */ public final void fe(Object... data) { setData(data); @@ -315,7 +315,7 @@ public abstract class Function { /** * Methods fe(...) should be used from asynchronous contexts so as we can * catch the exception and send it to the GWT UncaughtExceptionHandler - * They are intentionally final to avoid override them + * They are intentionally final to avoid override them */ public final boolean fe(Event ev, Object data) { if (GWT.getUncaughtExceptionHandler() != null) { @@ -328,11 +328,11 @@ public abstract class Function { } return f(ev, data); } - + /** * Methods fe(...) should be used from asynchronous contexts so as we can * catch the exception and send it to the GWT UncaughtExceptionHandler - * They are intentionally final to avoid override them + * They are intentionally final to avoid override them */ public final void fe(com.google.gwt.dom.client.Element elem) { if (GWT.getUncaughtExceptionHandler() != null) { diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java index f6912470..caf188f1 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java @@ -1,4656 +1,4656 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package com.google.gwt.query.client; - -import static com.google.gwt.query.client.plugins.QueuePlugin.Queue; - -import java.util.ArrayList; -import java.util.Arrays; -import java.util.List; -import java.util.Map; - -import com.google.gwt.core.client.GWT; -import com.google.gwt.core.client.JavaScriptObject; -import com.google.gwt.core.client.JsArray; -import com.google.gwt.core.client.JsArrayMixed; -import com.google.gwt.core.client.JsArrayString; -import com.google.gwt.dom.client.BodyElement; -import com.google.gwt.dom.client.ButtonElement; -import com.google.gwt.dom.client.Document; -import com.google.gwt.dom.client.Element; -import com.google.gwt.dom.client.InputElement; -import com.google.gwt.dom.client.Node; -import com.google.gwt.dom.client.NodeList; -import com.google.gwt.dom.client.OptionElement; -import com.google.gwt.dom.client.SelectElement; -import com.google.gwt.dom.client.Style.Display; -import com.google.gwt.dom.client.Style.HasCssName; -import com.google.gwt.dom.client.TextAreaElement; -import com.google.gwt.query.client.css.CSS; -import com.google.gwt.query.client.css.HasCssValue; -import com.google.gwt.query.client.css.TakesCssValue; -import com.google.gwt.query.client.css.TakesCssValue.CssSetter; -import com.google.gwt.query.client.impl.AttributeImpl; -import com.google.gwt.query.client.impl.DocumentStyleImpl; -import com.google.gwt.query.client.impl.SelectorEngine; -import com.google.gwt.query.client.js.JsCache; -import com.google.gwt.query.client.js.JsMap; -import com.google.gwt.query.client.js.JsNamedArray; -import com.google.gwt.query.client.js.JsNodeArray; -import com.google.gwt.query.client.js.JsObjectArray; -import com.google.gwt.query.client.js.JsRegexp; -import com.google.gwt.query.client.js.JsUtils; -import com.google.gwt.query.client.plugins.Effects; -import com.google.gwt.query.client.plugins.Events; -import com.google.gwt.query.client.plugins.Plugin; -import com.google.gwt.query.client.plugins.Widgets; -import com.google.gwt.query.client.plugins.ajax.Ajax; -import com.google.gwt.query.client.plugins.ajax.Ajax.Settings; -import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; -import com.google.gwt.query.client.plugins.events.EventsListener; -import com.google.gwt.query.client.plugins.widgets.WidgetsUtils; -import com.google.gwt.user.client.DOM; -import com.google.gwt.user.client.Event; -import com.google.gwt.user.client.EventListener; -import com.google.gwt.user.client.Window; -import com.google.gwt.user.client.ui.IsWidget; -import com.google.gwt.user.client.ui.Widget; - -/** - * GwtQuery is a GWT clone of the popular jQuery library. - */ -public class GQuery implements Lazy { - - private enum DomMan { - AFTER, APPEND, BEFORE, PREPEND; - } - - /** - * A POJO used to store the top/left CSS positioning values of an element. - */ - public static class Offset { - public int left; - public int top; - - public Offset(int left, int top) { - this.left = left; - this.top = top; - } - - public Offset add(int left, int top) { - return new Offset(this.left + left, this.top + top); - } - - public String toString() { - return top + "+" + left; - } - } - - /** - * Class used internally to create DOM element from html snippet - */ - private static class TagWrapper { - public static final TagWrapper DEFAULT = new TagWrapper(0, "", ""); - private String postWrap; - private String preWrap; - private int wrapDepth; - - public TagWrapper(int wrapDepth, String preWrap, String postWrap) { - this.wrapDepth = wrapDepth; - this.postWrap = postWrap; - this.preWrap = preWrap; - } - } - - /** - * Implementation class to modify attributes. - */ - protected static AttributeImpl attributeImpl; - - /** - * The body element in the current page. - */ - public static final BodyElement body = Document.get().getBody(); - - /** - * Object to store element data (public so as we can access to it from tests). - */ - public static JsCache dataCache = null; - - /** - * The document element in the current page. - */ - public static final Document document = Document.get(); - - /** - * Static reference Effects plugin - */ - public static Class Effects = com.google.gwt.query.client.plugins.Effects.Effects; - - /** - * Implementation engine used for CSS selectors. - */ - protected static SelectorEngine engine; - - /** - * Static reference Events plugin - */ - public static Class Events = com.google.gwt.query.client.plugins.Events.Events; - - /** - * A static reference to the GQuery class. - */ - public static Class GQUERY = GQuery.class; - - private static final String OLD_DATA_PREFIX = "old-"; - - private static final String OLD_DISPLAY = OLD_DATA_PREFIX + "display"; - - private static JsMap, Plugin> plugins; - - // Sizzle POS regex : usefull in some methods - // TODO: Share this static with SelectorEngineSizzle - private static final String POS_REGEX = - ":(nth|eq|gt|lt|first|last|even|odd)(?:\\((\\d*)\\))?(?=[^\\-]|$)"; - - /** - * Implementation class used for style manipulations. - */ - private static DocumentStyleImpl styleImpl; - - private static JsRegexp tagNameRegex = new JsRegexp("<([\\w:]+)"); - - /** - * Static reference to the Widgets plugin - */ - public static Class Widgets = com.google.gwt.query.client.plugins.Widgets.Widgets; - - /** - * The window object. - */ - public static final Element window = window(); - - private static Element windowData = null; - - private static JsNamedArray wrapperMap; - - /** - * Create an empty GQuery object. - */ - public static GQuery $() { - return new GQuery(JsNodeArray.create()); - } - - /** - * Wrap a GQuery around an existing element. - */ - public static GQuery $(Element element) { - return new GQuery(element); - } - - /** - * Wrap a GQuery around an event's target element. - */ - public static GQuery $(Event event) { - return event == null ? $() : $((Element) event.getCurrentEventTarget().cast()); - } - - /** - * Wrap a GQuery around the element of a Function callback. - */ - public static GQuery $(Function f) { - return $(f.getElement()); - } - - /** - * Wrap a GQuery around an existing javascript element, event, node, nodelist, function or array. - */ - public static GQuery $(JavaScriptObject jso) { - if (jso == null) { - return $(); - } - // Execute a native javascript function like jquery does - if (JsUtils.isFunction(jso)) { - new JsUtils.JsFunction(jso).fe(); - return $(); - } - // Wraps a native array like jquery does - if (!JsUtils.isWindow(jso) && !JsUtils.isElement(jso) && JsUtils.isArray(jso)) { - JsArrayMixed c = jso.cast(); - JsNodeArray elms = JsNodeArray.create(); - for (int i = 0; i < c.length(); i++) { - Object obj = c.getObject(i); - if (obj instanceof Node) { - elms.addNode((Node) obj); - } - } - return $((NodeList)elms); - } - - return JsUtils.isWindow(jso) ? $(jso. cast()) : - JsUtils.isElement(jso) ? $(jso. cast()) : - JsUtils.isEvent(jso) ? $(jso. cast()) : - JsUtils.isNodeList(jso) ? $(jso.> cast()) : $(); - } - - /** - * Wrap a GQuery around any object, supported objects are: - * String, GQuery, Function, Widget, JavaScriptObject - * - * In the case of string, we accept a CSS selector which is then used to match a set of - * elements, or a raw HTML to create a GQuery element containing those elements. Xpath - * selector is supported in browsers with native xpath engine. - * - * In the case of a JavaScriptObject we handle: - * Element, Event, Node, Nodelist and native functions or arrays. - * - * If the case of a native function, we execute it and return empty. - */ - public static GQuery $(Object o) { - if (o != null) { - if (o instanceof String) { - return $((String)o); - } - if (o instanceof GQuery) { - return (GQuery)o; - } - if (o instanceof Function) { - return $((Function)o); - } - if (o instanceof JavaScriptObject) { - return $((JavaScriptObject)o); - } - if (o instanceof IsWidget) { - return $(Arrays.asList(o)); - } - System.err.println("GQuery.$(Object o) could not wrap the type : " + o.getClass()); - } - return $(); - } - - /** - * Create a new GQuery given a list of nodes, elements or widgets - */ - public static GQuery $(List nodesOrWidgets) { - JsNodeArray elms = JsNodeArray.create(); - if (nodesOrWidgets != null) { - for (Object o : nodesOrWidgets) { - if (o instanceof Node) { - elms.addNode((Node) o); - } else if (o instanceof IsWidget) { - elms.addNode(((IsWidget)o).asWidget().getElement()); - } - } - } - return new GQuery(elms); - } - - /** - * Wrap a GQuery around an existing node. - */ - public static GQuery $(Node n) { - return $((Element) n); - } - - /** - * Wrap a GQuery around existing Elements. - */ - public static GQuery $(NodeList elms) { - return new GQuery(elms); - } - - /** - * This function accepts a string containing a CSS selector which is then used to match a set of - * elements, or it accepts raw HTML creating a GQuery element containing those elements. Xpath - * selector is supported in browsers with native xpath engine. - */ - public static GQuery $(String selectorOrHtml) { - return $(selectorOrHtml, document); - } - - /** - * This function accepts a string containing a CSS selector which is then used to match a set of - * elements, or it accepts raw HTML creating a GQuery element containing those elements. The - * second parameter is is a class reference to a plugin to be used. - * - * Xpath selector is supported in browsers with native xpath engine. - */ - public static T $(String selector, Class plugin) { - return $(selector, document, plugin); - } - - /** - * This function accepts a string containing a CSS selector which is then used to match a set of - * elements, or it accepts raw HTML creating a GQuery element containing those elements. The - * second parameter is the context to use for the selector, or the document where the new elements - * will be created. - * - * Xpath selector is supported in browsers with native xpath engine. - */ - public static GQuery $(String selectorOrHtml, Node ctx) { - String selector = null; - if (selectorOrHtml == null || (selector = selectorOrHtml.trim()).length() == 0) { - return $(); - } - if (selector.startsWith("<")) { - return innerHtml(selectorOrHtml, JsUtils.getOwnerDocument(ctx)); - } - return new GQuery().select(selectorOrHtml, ctx); - } - - /** - * This function accepts a string containing a CSS selector which is then used to match a set of - * elements, or it accepts raw HTML creating a GQuery element containing those elements. The - * second parameter is the context to use for the selector. The third parameter is the class - * plugin to use. - * - * Xpath selector is supported in browsers with native xpath engine. - */ - @SuppressWarnings("unchecked") - public static T $(String selector, Node context, Class plugin) { - try { - if (plugins != null) { - T gquery = (T) plugins.get(plugin).init(new GQuery().select(selector, context)); - return gquery; - } - throw new RuntimeException("No plugin for class " + plugin); - } catch (Exception e) { - throw new RuntimeException(e); - } - } - - /** - * This function accepts a string containing a CSS selector which is then used to match a set of - * elements, or it accepts raw HTML creating a GQuery element containing those elements. The - * second parameter is the context to use for the selector, or the document where the new elements - * will be created. - * - * Xpath selector is supported in browsers with native xpath engine. - */ - public static GQuery $(String selectorOrHtml, Widget context) { - return $(selectorOrHtml, context.getElement()); - } - - /** - * This function accepts a string containing a CSS selector which is then used to match a set of - * elements, or it accepts raw HTML creating a GQuery element containing those elements. The - * second parameter is the context to use for the selector. The third parameter is the class - * plugin to use. - * - * Xpath selector is supported in browsers with native xpath engine. - */ - public static T $(String selector, Widget context, Class plugin) { - return $(selector, context.getElement(), plugin); - } - - /** - * Wrap a GQuery around one widget or an array of existing ones. - */ - public static GQuery $(Widget... widgets) { - return $(Arrays.asList(widgets)); - } - - /** - * Wrap a JSON object. - */ - public static Properties $$(String properties) { - return Properties.create(properties); - } - - /** - * Perform an ajax request to the server. - */ - public static void ajax(Properties p) { - ajax(p); - } - - /** - * Perform an ajax request to the server. - */ - public static void ajax(Settings settings) { - Ajax.ajax(settings); - } - - /** - * Perform an ajax request to the server. - */ - public static void ajax(String url, Settings settings) { - Ajax.ajax(url, settings); - } - - @SuppressWarnings("unchecked") - protected static GQuery cleanHtmlString(String elem, Document doc) { - - String tag = tagNameRegex.exec(elem).get(1); - - if (tag == null) { - throw new RuntimeException("HTML snippet doesn't contain any tag"); - } - - if (wrapperMap == null) { - initWrapperMap(); - } - - TagWrapper wrapper = wrapperMap.get(tag.toLowerCase()); - - if (wrapper == null) { - wrapper = TagWrapper.DEFAULT; - } - - // TODO: fix IE link tag serialization - // TODO: fix IE \\s*", "") - .replaceAll("\\s*", ""); + .replaceAll("\\s*", ""); // We wrap the results in a div s = "
" + s + "
"; - + Ajax.this.empty().append(filter.isEmpty() ? $(s) : $(s).find(filter)); if (onSuccess != null) { onSuccess.setElement(Ajax.this.get(0)); @@ -385,9 +385,9 @@ public class Ajax extends GQuery { ajax(s); return this; } - + private static int callBackCounter = 0; - + public static native void getJsonpImpl(Element elem, String url, String charset, Function success, Function error, int timeout) /*-{ var fName = "__GQ_cb_" + @com.google.gwt.query.client.plugins.ajax.Ajax::callBackCounter ++; var done = false; @@ -408,7 +408,7 @@ public class Ajax extends GQuery { } if (timeout) { setTimeout(err, timeout); - } + } url = url.replace(/=\?/g,'=' + fName); var script = document.createElement("script" ); @@ -421,5 +421,5 @@ public class Ajax extends GQuery { err(); }; elem.insertBefore(script, elem.firstChild); - }-*/; + }-*/; } diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/ClipAnimation.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/ClipAnimation.java index bb842815..e81e6340 100755 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/ClipAnimation.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/ClipAnimation.java @@ -1,146 +1,146 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package com.google.gwt.query.client.plugins.effects; - -import com.google.gwt.dom.client.Element; -import com.google.gwt.query.client.Function; -import com.google.gwt.query.client.GQuery; -import com.google.gwt.query.client.plugins.Effects; -import com.google.gwt.query.client.plugins.Effects.GQAnimation; - -/** - * Animation wich uses the css clip property to show/hide an element. - */ -public class ClipAnimation extends GQAnimation { - - /** - * Type of the effect action. - */ - public static enum Action { - HIDE, SHOW, TOGGLE - } - - /** - * Corner from which the effect starts. - */ - public static enum Corner { - BOTTOM_LEFT, BOTTOM_RIGHT, CENTER, TOP_LEFT, TOP_RIGHT - } - - /** - * Direction of the effect. - */ - public static enum Direction { - BIDIRECTIONAL, HORIZONTAL, VERTICAL - } - - private static final String[] attrsToSave = new String[]{ - "position", "overflow", "visibility", "white-space", "top", "left"}; - - Action action; - Corner corner; - Direction direction; - int percent; - private GQuery back = Effects.$(); - private Function[] funcs; - private Effects g; - - public ClipAnimation(Element elem, Action a, Corner c, Direction d, - final Function... funcs) { - if (a == Action.TOGGLE) { - a = GQuery.$(elem).isVisible() ? Action.HIDE : Action.SHOW; - } - this.action = a; - this.corner = c; - this.direction = d; - this.funcs = funcs; - e = elem; - g = GQuery.$(e).as(Effects.Effects); - } - - @Override - public void onCancel() { - Boolean jumpToEnd = Effects.$(e).data(Effects.JUMP_TO_END, Boolean.class); - if (jumpToEnd != null && jumpToEnd){ - onComplete(); - } else { - g.dequeue(); - } - } - - @Override - public void onComplete() { - super.onComplete(); - if (action == Action.HIDE) { - g.hide(); - } - g.restoreCssAttrs(attrsToSave); - back.remove(); - back = Effects.$(); - g.css("clip", ""); - g.each(funcs); - g.dequeue(); - } - - @Override - public void onStart() { - g.show(); - g.saveCssAttrs(attrsToSave); - if (!"absolute".equalsIgnoreCase(g.css("position", true))) { - g.css("position", "absolute"); - g.css("top", g.offset().top + "px"); - g.css("left", g.offset().left + "px"); - back = back.add(g.before("
")).prev(); - back.height(g.height()); - back.width(g.width()); - } - g.css("overflow", "hidden"); - g.css("visivility", "visible"); - super.onStart(); - } - - @Override - public void onUpdate(double progress) { - if (action == Action.HIDE) { - progress = (1 - progress); - } - int top = 0; - int left = 0; - int right = g.width(); - int bottom = g.height(); - - if (direction == Direction.VERTICAL || direction == Direction.BIDIRECTIONAL) { - bottom = (int) (g.height() * progress); - } - if (direction == Direction.HORIZONTAL - || direction == Direction.BIDIRECTIONAL) { - right = (int) (g.width() * progress); - } - if (corner == Corner.CENTER) { - top = (g.height() - bottom) / 2; - left = (g.width() - right) / 2; - } else if (corner == Corner.BOTTOM_LEFT) { - top = (g.height() - bottom); - } else if (corner == Corner.TOP_RIGHT) { - left = (g.width() - right); - } else if (corner == Corner.BOTTOM_RIGHT) { - left = (g.width() - right); - top = (g.height() - bottom); - } - String rect = top + "px " + right + "px " + bottom + "px " + left + "px"; - g.css("clip", "rect(" + rect + ")"); - } -} +/* + * Copyright 2011, The gwtquery team. + * + * 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. + */ +package com.google.gwt.query.client.plugins.effects; + +import com.google.gwt.dom.client.Element; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.GQuery; +import com.google.gwt.query.client.plugins.Effects; +import com.google.gwt.query.client.plugins.Effects.GQAnimation; + +/** + * Animation wich uses the css clip property to show/hide an element. + */ +public class ClipAnimation extends GQAnimation { + + /** + * Type of the effect action. + */ + public static enum Action { + HIDE, SHOW, TOGGLE + } + + /** + * Corner from which the effect starts. + */ + public static enum Corner { + BOTTOM_LEFT, BOTTOM_RIGHT, CENTER, TOP_LEFT, TOP_RIGHT + } + + /** + * Direction of the effect. + */ + public static enum Direction { + BIDIRECTIONAL, HORIZONTAL, VERTICAL + } + + private static final String[] attrsToSave = new String[]{ + "position", "overflow", "visibility", "white-space", "top", "left"}; + + Action action; + Corner corner; + Direction direction; + int percent; + private GQuery back = Effects.$(); + private Function[] funcs; + private Effects g; + + public ClipAnimation(Element elem, Action a, Corner c, Direction d, + final Function... funcs) { + if (a == Action.TOGGLE) { + a = GQuery.$(elem).isVisible() ? Action.HIDE : Action.SHOW; + } + this.action = a; + this.corner = c; + this.direction = d; + this.funcs = funcs; + e = elem; + g = GQuery.$(e).as(Effects.Effects); + } + + @Override + public void onCancel() { + Boolean jumpToEnd = Effects.$(e).data(Effects.JUMP_TO_END, Boolean.class); + if (jumpToEnd != null && jumpToEnd){ + onComplete(); + } else { + g.dequeue(); + } + } + + @Override + public void onComplete() { + super.onComplete(); + if (action == Action.HIDE) { + g.hide(); + } + g.restoreCssAttrs(attrsToSave); + back.remove(); + back = Effects.$(); + g.css("clip", ""); + g.each(funcs); + g.dequeue(); + } + + @Override + public void onStart() { + g.show(); + g.saveCssAttrs(attrsToSave); + if (!"absolute".equalsIgnoreCase(g.css("position", true))) { + g.css("position", "absolute"); + g.css("top", g.offset().top + "px"); + g.css("left", g.offset().left + "px"); + back = back.add(g.before("
")).prev(); + back.height(g.height()); + back.width(g.width()); + } + g.css("overflow", "hidden"); + g.css("visivility", "visible"); + super.onStart(); + } + + @Override + public void onUpdate(double progress) { + if (action == Action.HIDE) { + progress = (1 - progress); + } + int top = 0; + int left = 0; + int right = g.width(); + int bottom = g.height(); + + if (direction == Direction.VERTICAL || direction == Direction.BIDIRECTIONAL) { + bottom = (int) (g.height() * progress); + } + if (direction == Direction.HORIZONTAL + || direction == Direction.BIDIRECTIONAL) { + right = (int) (g.width() * progress); + } + if (corner == Corner.CENTER) { + top = (g.height() - bottom) / 2; + left = (g.width() - right) / 2; + } else if (corner == Corner.BOTTOM_LEFT) { + top = (g.height() - bottom); + } else if (corner == Corner.TOP_RIGHT) { + left = (g.width() - right); + } else if (corner == Corner.BOTTOM_RIGHT) { + left = (g.width() - right); + top = (g.height() - bottom); + } + String rect = top + "px " + right + "px " + bottom + "px " + left + "px"; + g.css("clip", "rect(" + rect + ")"); + } +} diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Fx.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Fx.java index 92c0ef42..408a993b 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Fx.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Fx.java @@ -12,17 +12,17 @@ import com.google.gwt.query.client.js.JsRegexp; * A pojo to store effect values. */ public class Fx { - + /** * Public variable to enable/disable effects */ public static boolean off = false; - + /** * A pojo to store color effect values. */ public static class ColorFx extends Fx { - + /** * Specific class handle specific borderColor shortcut properties */ @@ -33,7 +33,7 @@ public class Fx { BorderColorProperty.BORDER_TOP_COLOR_PROPERTY, BorderColorProperty.BORDER_LEFT_COLOR_PROPERTY, BorderColorProperty.BORDER_RIGHT_COLOR_PROPERTY}; - + private JsNamedArray startColors; public BorderColorFx(Element e, String endColorString) { @@ -62,7 +62,7 @@ public class Fx { // hexadecimal regex public static JsRegexp REGEX_HEX_COLOR_PATTERN = new JsRegexp( "#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})"); - + private static JsNamedArray htmlColorToRgb; // rgb and rgba regex @@ -209,7 +209,7 @@ public class Fx { } } - + public String cssprop; public double end; public double start; @@ -245,9 +245,9 @@ public class Fx { } public String toString() { - return ("cssprop=" + cssprop + (attribute != null ? " attr=" + attribute : "") + return ("cssprop=" + cssprop + (attribute != null ? " attr=" + attribute : "") + " value=" + value + " start=" + start + " end=" + end + " unit=" + unit).replaceAll("\\.0([^\\d])", "$1"); } - + } diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/PropertiesAnimation.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/PropertiesAnimation.java index 52199ff6..80b73d2a 100755 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/PropertiesAnimation.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/PropertiesAnimation.java @@ -1,280 +1,280 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package com.google.gwt.query.client.plugins.effects; - -import com.google.gwt.dom.client.Element; -import com.google.gwt.query.client.Function; -import com.google.gwt.query.client.GQuery; -import com.google.gwt.query.client.Properties; -import com.google.gwt.query.client.js.JsObjectArray; -import com.google.gwt.query.client.js.JsRegexp; -import com.google.gwt.query.client.plugins.Effects; -import com.google.gwt.query.client.plugins.Effects.GQAnimation; -import com.google.gwt.query.client.plugins.effects.Fx.ColorFx; -import com.google.gwt.query.client.plugins.effects.Fx.ColorFx.BorderColorFx; - -/** - * Animation effects on any numeric CSS property. - */ -public class PropertiesAnimation extends GQAnimation { - - /** - * Easing method to use. - */ - public static interface Easing { - public double interpolate(double progress); - - public Easing LINEAR = new Easing() { - public double interpolate(double progress) { - return progress; - } - }; - - public Easing SWING = new Easing() { - public double interpolate(double progress) { - return (1 + Math.cos(Math.PI + progress * Math.PI)) / 2; - } - }; - } - - private static final String[] ATTRS_TO_SAVE = new String[]{ - "overflow"}; - - private static final JsRegexp REGEX_NUMBER_UNIT = new JsRegexp( - "^([0-9+-.]+)(.*)?$"); - - private static final JsRegexp REGEX_SYMBOL_NUMBER_UNIT = new JsRegexp( - "^([+-]=)?([0-9+-.]+)(.*)?$"); - - private static final JsRegexp REGEX_NON_PIXEL_ATTRS = new JsRegexp( - "z-?index|font-?weight|opacity|zoom|line-?height|^\\$", "i"); - - private static final JsRegexp REGEX_COLOR_ATTR = new JsRegexp(".*color$", "i"); - - private static final JsRegexp REGEX_BORDERCOLOR = new JsRegexp("^bordercolor$", "i"); - - private static final JsRegexp REGEX_BACKGROUNDCOLOR = new JsRegexp("^backgroundcolor$", "i"); - - - - public static Fx computeFxProp(Element e, String key, String val, - boolean hidden) { - - if (REGEX_COLOR_ATTR.test(key)) { - return computeFxColorProp(e, key, val); - } - - return computeFxNumericProp(e, key, val, hidden); - } - - private static Fx computeFxColorProp(Element e, String key, String val) { - - if (REGEX_BORDERCOLOR.test(key)) { - return new BorderColorFx(e, val); - } - - String initialColor = null; - if (REGEX_BACKGROUNDCOLOR.test(key)) { - // find the first parent having a background-color value (other than - // transparent) - Element current = e; - - while ((initialColor == null || initialColor.length() == 0 || initialColor.equals("transparent")) - && current != null) { - initialColor = GQuery.$(current).css(key, false); - current = !"body".equalsIgnoreCase(current.getTagName()) - ? current.getParentElement() : null; - } - if (initialColor == null || initialColor.length() == 0 - || initialColor.equals("transparent")) { - initialColor = "white"; - } - } else { - initialColor = GQuery.$(e).css(key, true); - } - - return new ColorFx(key, initialColor, val); - } - - public static Fx computeFxNumericProp(Element e, String key, String val, - boolean hidden) { - - GQuery g = Effects.$(e); - String unit = ""; - if ("toggle".equals(val)) { - val = hidden ? "show" : "hide"; - } - - if (("show".equals(val) && !hidden) || ("hide").equals(val) && hidden) { - return null; - } - - if (hidden) { - g.show(); - } - - // If key starts with $ we animate node attributes, otherwise css properties - double cur; - String rkey = null; - if (key.startsWith("$")) { - rkey = key.substring(1).toLowerCase(); - String attr = g.attr(rkey); - JsObjectArray parts = REGEX_NUMBER_UNIT.match(attr); - if (parts != null) { - String $1 = parts.get(1); - String $2 = parts.get(2); - cur = Double.parseDouble($1); - unit = $2 == null ? "" : $2; - } else { - cur = g.cur(key, true); - key = rkey; - } - } else { - cur = g.cur(key, true); - } - - double start = cur, end = start; - - if ("show".equals(val)) { - g.saveCssAttrs(key); - start = 0; - unit = REGEX_NON_PIXEL_ATTRS.test(key) ? "" : "px"; - } else if ("hide".equals(val)) { - if (hidden) { - return null; - } - g.saveCssAttrs(key); - end = 0; - unit = REGEX_NON_PIXEL_ATTRS.test(key) ? "" : "px"; - } else { - JsObjectArray parts = REGEX_SYMBOL_NUMBER_UNIT.match(val); - - if (parts != null) { - String $1 = parts.get(1); - String $2 = parts.get(2); - String $3 = parts.get(3); - end = Double.parseDouble($2); - - if (rkey == null) { - unit = REGEX_NON_PIXEL_ATTRS.test(key) ? "" : // - $3 == null || $3.isEmpty() ? "px" : $3; - if (!"px".equals(unit)) { - double to = end == 0 ? 1 : end; - g.css(key, to + unit); - start = to * start / g.cur(key, true); - g.css(key, start + unit); - } - } else if ($3 != null && !$3.isEmpty()) { - unit = $3; - } - - if ($1 != null && !$1.isEmpty()) { - end = (("-=".equals($1) ? -1 : 1) * end) + start; - } - } - } - - return new Fx(key, val, start, end, unit, rkey); - } - - private Easing easing = Easing.SWING; - private JsObjectArray effects = JsObjectArray.create(); - private Function[] funcs; - - private Effects g; - - private Properties prps; - - public PropertiesAnimation(Easing easing, Element elem, Properties p, - Function... funcs) { - this.easing = easing; - this.e = elem; - this.funcs = funcs; - this.prps = p; - g = Effects.$(e).as(Effects.Effects); - } - - @Override - public void onCancel() { - Boolean jumpToEnd = Effects.$(e).data(Effects.JUMP_TO_END, Boolean.class); - if (jumpToEnd != null && jumpToEnd){ - onComplete(); - } else { - g.dequeue(); - g.restoreCssAttrs(ATTRS_TO_SAVE); - } - } - - @Override - public void onComplete() { - super.onComplete(); - for (int i = 0; i < effects.length(); i++) { - Fx fx = effects.get(i); - if ("hide".equals(fx.value)) { - g.hide(); - g.restoreCssAttrs(fx.cssprop); - } else if ("show".equals(fx.value)) { - g.show(); - g.restoreCssAttrs(fx.cssprop); - } - } - g.restoreCssAttrs(ATTRS_TO_SAVE); - g.each(funcs); - g.dequeue(); - } - - @Override - public void onStart() { - boolean resize = false; - boolean move = false; - boolean hidden = !g.isVisible(); - Fx fx; - // g.show(); - for (String key : prps.keys()) { - String val = prps.getStr(key); - if ((fx = computeFxProp(e, key, val, hidden)) != null) { - effects.add(fx); - resize = resize || "height".equals(key) || "width".equals(key); - move = move || "top".equals(key) || "left".equals(key); - } - } - g.saveCssAttrs(ATTRS_TO_SAVE); - if (resize) { - g.css("overflow", "hidden"); - } - if (move && !g.css("position", true).matches("absolute|relative")) { - g.css("position", "relative"); - } - super.onStart(); - } - - @Override - public void onUpdate(double progress) { - for (int i = 0; i < effects.length(); i++) { - effects.get(i).applyValue(g, progress); - } - } - - @Override - protected double interpolate(double progress) { - if (easing != null) { - return easing.interpolate(progress); - } - // maybe return super.interpolate() instead ? - return progress; - } - -} +/* + * Copyright 2011, The gwtquery team. + * + * 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. + */ +package com.google.gwt.query.client.plugins.effects; + +import com.google.gwt.dom.client.Element; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.GQuery; +import com.google.gwt.query.client.Properties; +import com.google.gwt.query.client.js.JsObjectArray; +import com.google.gwt.query.client.js.JsRegexp; +import com.google.gwt.query.client.plugins.Effects; +import com.google.gwt.query.client.plugins.Effects.GQAnimation; +import com.google.gwt.query.client.plugins.effects.Fx.ColorFx; +import com.google.gwt.query.client.plugins.effects.Fx.ColorFx.BorderColorFx; + +/** + * Animation effects on any numeric CSS property. + */ +public class PropertiesAnimation extends GQAnimation { + + /** + * Easing method to use. + */ + public static interface Easing { + public double interpolate(double progress); + + public Easing LINEAR = new Easing() { + public double interpolate(double progress) { + return progress; + } + }; + + public Easing SWING = new Easing() { + public double interpolate(double progress) { + return (1 + Math.cos(Math.PI + progress * Math.PI)) / 2; + } + }; + } + + private static final String[] ATTRS_TO_SAVE = new String[]{ + "overflow"}; + + private static final JsRegexp REGEX_NUMBER_UNIT = new JsRegexp( + "^([0-9+-.]+)(.*)?$"); + + private static final JsRegexp REGEX_SYMBOL_NUMBER_UNIT = new JsRegexp( + "^([+-]=)?([0-9+-.]+)(.*)?$"); + + private static final JsRegexp REGEX_NON_PIXEL_ATTRS = new JsRegexp( + "z-?index|font-?weight|opacity|zoom|line-?height|^\\$", "i"); + + private static final JsRegexp REGEX_COLOR_ATTR = new JsRegexp(".*color$", "i"); + + private static final JsRegexp REGEX_BORDERCOLOR = new JsRegexp("^bordercolor$", "i"); + + private static final JsRegexp REGEX_BACKGROUNDCOLOR = new JsRegexp("^backgroundcolor$", "i"); + + + + public static Fx computeFxProp(Element e, String key, String val, + boolean hidden) { + + if (REGEX_COLOR_ATTR.test(key)) { + return computeFxColorProp(e, key, val); + } + + return computeFxNumericProp(e, key, val, hidden); + } + + private static Fx computeFxColorProp(Element e, String key, String val) { + + if (REGEX_BORDERCOLOR.test(key)) { + return new BorderColorFx(e, val); + } + + String initialColor = null; + if (REGEX_BACKGROUNDCOLOR.test(key)) { + // find the first parent having a background-color value (other than + // transparent) + Element current = e; + + while ((initialColor == null || initialColor.length() == 0 || initialColor.equals("transparent")) + && current != null) { + initialColor = GQuery.$(current).css(key, false); + current = !"body".equalsIgnoreCase(current.getTagName()) + ? current.getParentElement() : null; + } + if (initialColor == null || initialColor.length() == 0 + || initialColor.equals("transparent")) { + initialColor = "white"; + } + } else { + initialColor = GQuery.$(e).css(key, true); + } + + return new ColorFx(key, initialColor, val); + } + + public static Fx computeFxNumericProp(Element e, String key, String val, + boolean hidden) { + + GQuery g = Effects.$(e); + String unit = ""; + if ("toggle".equals(val)) { + val = hidden ? "show" : "hide"; + } + + if (("show".equals(val) && !hidden) || ("hide").equals(val) && hidden) { + return null; + } + + if (hidden) { + g.show(); + } + + // If key starts with $ we animate node attributes, otherwise css properties + double cur; + String rkey = null; + if (key.startsWith("$")) { + rkey = key.substring(1).toLowerCase(); + String attr = g.attr(rkey); + JsObjectArray parts = REGEX_NUMBER_UNIT.match(attr); + if (parts != null) { + String $1 = parts.get(1); + String $2 = parts.get(2); + cur = Double.parseDouble($1); + unit = $2 == null ? "" : $2; + } else { + cur = g.cur(key, true); + key = rkey; + } + } else { + cur = g.cur(key, true); + } + + double start = cur, end = start; + + if ("show".equals(val)) { + g.saveCssAttrs(key); + start = 0; + unit = REGEX_NON_PIXEL_ATTRS.test(key) ? "" : "px"; + } else if ("hide".equals(val)) { + if (hidden) { + return null; + } + g.saveCssAttrs(key); + end = 0; + unit = REGEX_NON_PIXEL_ATTRS.test(key) ? "" : "px"; + } else { + JsObjectArray parts = REGEX_SYMBOL_NUMBER_UNIT.match(val); + + if (parts != null) { + String $1 = parts.get(1); + String $2 = parts.get(2); + String $3 = parts.get(3); + end = Double.parseDouble($2); + + if (rkey == null) { + unit = REGEX_NON_PIXEL_ATTRS.test(key) ? "" : // + $3 == null || $3.isEmpty() ? "px" : $3; + if (!"px".equals(unit)) { + double to = end == 0 ? 1 : end; + g.css(key, to + unit); + start = to * start / g.cur(key, true); + g.css(key, start + unit); + } + } else if ($3 != null && !$3.isEmpty()) { + unit = $3; + } + + if ($1 != null && !$1.isEmpty()) { + end = (("-=".equals($1) ? -1 : 1) * end) + start; + } + } + } + + return new Fx(key, val, start, end, unit, rkey); + } + + private Easing easing = Easing.SWING; + private JsObjectArray effects = JsObjectArray.create(); + private Function[] funcs; + + private Effects g; + + private Properties prps; + + public PropertiesAnimation(Easing easing, Element elem, Properties p, + Function... funcs) { + this.easing = easing; + this.e = elem; + this.funcs = funcs; + this.prps = p; + g = Effects.$(e).as(Effects.Effects); + } + + @Override + public void onCancel() { + Boolean jumpToEnd = Effects.$(e).data(Effects.JUMP_TO_END, Boolean.class); + if (jumpToEnd != null && jumpToEnd){ + onComplete(); + } else { + g.dequeue(); + g.restoreCssAttrs(ATTRS_TO_SAVE); + } + } + + @Override + public void onComplete() { + super.onComplete(); + for (int i = 0; i < effects.length(); i++) { + Fx fx = effects.get(i); + if ("hide".equals(fx.value)) { + g.hide(); + g.restoreCssAttrs(fx.cssprop); + } else if ("show".equals(fx.value)) { + g.show(); + g.restoreCssAttrs(fx.cssprop); + } + } + g.restoreCssAttrs(ATTRS_TO_SAVE); + g.each(funcs); + g.dequeue(); + } + + @Override + public void onStart() { + boolean resize = false; + boolean move = false; + boolean hidden = !g.isVisible(); + Fx fx; + // g.show(); + for (String key : prps.keys()) { + String val = prps.getStr(key); + if ((fx = computeFxProp(e, key, val, hidden)) != null) { + effects.add(fx); + resize = resize || "height".equals(key) || "width".equals(key); + move = move || "top".equals(key) || "left".equals(key); + } + } + g.saveCssAttrs(ATTRS_TO_SAVE); + if (resize) { + g.css("overflow", "hidden"); + } + if (move && !g.css("position", true).matches("absolute|relative")) { + g.css("position", "relative"); + } + super.onStart(); + } + + @Override + public void onUpdate(double progress) { + for (int i = 0; i < effects.length(); i++) { + effects.get(i).applyValue(g, progress); + } + } + + @Override + protected double interpolate(double progress) { + if (easing != null) { + return easing.interpolate(progress); + } + // maybe return super.interpolate() instead ? + return progress; + } + +} diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/events/EventsListener.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/events/EventsListener.java index 682876ca..886df5b9 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/events/EventsListener.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/events/EventsListener.java @@ -1,11 +1,11 @@ /* * Copyright 2011, The gwtquery team. - * + * * 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 @@ -35,12 +35,12 @@ import java.util.List; /** * This class implements an event queue instance for one Element. The queue instance is configured * as the default event listener in GWT. - * + * * The reference to this queue is stored as a unique variable in the element's DOM - * + * * The class takes care of calling the appropriate functions for each browser event and it also * calls sinkEvents method. - * + * */ public class EventsListener implements EventListener { @@ -149,9 +149,9 @@ public class EventsListener implements EventListener { /** * Remove a set of events. The bind function will not be fire anymore for those events - * + * * @param eventBits the set of events to unsink - * + * */ public int unsink(int eventBits) { if (eventBits <= 0) { @@ -183,7 +183,7 @@ public class EventsListener implements EventListener { /** * {@link BindFunction} used for live() method. - * + * */ private static class LiveBindFunction extends BindFunction { @@ -285,7 +285,7 @@ public class EventsListener implements EventListener { /** * Tell if no {@link BindFunction} are linked to this object - * + * * @return */ public boolean isEmpty() { @@ -301,7 +301,7 @@ public class EventsListener implements EventListener { /** * Return the element whose the listener fired last. It represent the context element where the * {@link LiveBindFunction} was binded - * + * */ private Element getCurrentEventTarget(Event e) { EventTarget currentEventTarget = e.getCurrentEventTarget(); @@ -446,14 +446,14 @@ public class EventsListener implements EventListener { String[] parts = events.split("[\\s,]+"); for (String event : parts) { - + String nameSpace = null; String eventName = event; - + //seperate possible namespace //jDramaix: I removed old regex ^([^.]*)\.?(.*$) because it didn't work on IE8... String[] subparts = event.split("\\.", 2); - + if (subparts.length == 2){ nameSpace = subparts[1]; eventName = subparts[0]; @@ -601,11 +601,11 @@ public class EventsListener implements EventListener { for (String event : parts) { String nameSpace = null; String eventName = event; - + //seperate possible namespace //jDramaix: I removed old regex ^([^.]*)\.?(.*$) because it didn't work on IE8... String[] subparts = event.split("\\.", 2); - + if (subparts.length == 2){ nameSpace = subparts[1]; eventName = subparts[0]; diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/events/GqEvent.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/events/GqEvent.java index b8fbd90e..1a92374f 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/events/GqEvent.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/events/GqEvent.java @@ -8,34 +8,34 @@ import com.google.gwt.user.client.Event; /** * This object allows you to have a full copy of the original Event and * implements some useful method of the jQuery event model. - * + * * This is also useful in Internet Explorer because it use the same javascript * object to fire MouseDownEvent, MouseMoveEvent or MouseStopEvent on the same * element. So, we cannot keep a copy of the MouseDownEvent during a dragging * for example. - * - * - * + * + * + * * Be Careful : the methods preventDefault() and stopPropagation must be called directly on the * original event. - * - * + * + * */ public class GqEvent extends Event { - + public static native void setOriginalEventType(NativeEvent evt, String originalEventName)/*-{ evt["__gwtquery_originalEventName"] = originalEventName; }-*/; - + public static native String getOriginalEventType(Event evt)/*-{ return evt["__gwtquery_originalEventName"] || null; }-*/; - // Gwt Events class has not this event defined, - // so we have to select one power of 2 which is unused in Event class + // Gwt Events class has not this event defined, + // so we have to select one power of 2 which is unused in Event class public static int ONSUBMIT = 0x10000000; public static int ONRESIZE = 0x8000000; - + /** * Create a new {@link GqEvent} by copying the originalEvent. */ @@ -52,7 +52,7 @@ public class GqEvent extends Event { } gQueryEvent.originalEvent = originalEvent; }-*/; - + protected GqEvent() { } @@ -63,10 +63,10 @@ public class GqEvent extends Event { public final native Event getOriginalEvent()/*-{ return this.originalEvent; }-*/; - + public final native void setCurrentElementTarget(Element e)/*-{ this.currentTarget = e; - + //ie don't have a currentEventTarget field on event try{ @com.google.gwt.dom.client.DOMImplTrident::currentEventTarget = e; @@ -75,7 +75,7 @@ public class GqEvent extends Event { /** * Tell whether ctrl or cmd key is pressed - * + * */ public final boolean isMetaKeyPressed() { return getMetaKey() || getCtrlKey(); @@ -83,7 +83,7 @@ public class GqEvent extends Event { /** * The mouse position relative to the left edge of the document - * + * */ public final int pageX() { if (getTouches() != null && getTouches().length() > 0){ @@ -95,7 +95,7 @@ public class GqEvent extends Event { /** * The mouse position relative to the top edge of the document. - * + * */ public final int pageY() { if (getTouches() != null && getTouches().length() > 0){ diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/ButtonWidgetFactory.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/ButtonWidgetFactory.java index 36d076f6..39028149 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/ButtonWidgetFactory.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/ButtonWidgetFactory.java @@ -1,12 +1,12 @@ /* * Copyright 2011, The gwtquery team. - * + * * 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 @@ -32,11 +32,11 @@ public class ButtonWidgetFactory implements WidgetFactory" - + +"" - + +" check0" +" check1" +" check2" - + +" radio0" +" radio1" +" radio2" ); - + assertNull($().val()); assertEquals(0, $().vals().length); @@ -1000,7 +1000,7 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertEquals("newval", $("#inputText", e).val()); assertEquals("newval", $("#textArea", e).val()); assertEquals("newval", $("#button", e).val()); - + assertEquals("v0", $("#selectSingle", e).val()); assertNull($("#selectMultiple", e).val()); $("#selectSingle, #selectMultiple", e).val("v2"); @@ -1017,16 +1017,16 @@ public class GQueryCoreTestGwt extends GWTTestCase { $("input[type='checkbox']", e).val(new String[]{"n0"}); assertEquals("n0", $("input[type='checkbox']", e).val()); assertNotNull($("input[type='checkbox']:checked", e).val()); - + assertEquals("v0", $("input[type='radio']", e).val()); assertNull($("input[type='radio']:checked", e).val()); $("input[type='radio']").eq(0).val("n0"); assertEquals("n0", $("input[type='radio']", e).val()); assertNull($("input[type='radio']:checked", e).val()); - + // evalJQuery("$('input, select, textarea, button').val(['whatever', 'v1', 'v2'])"); $("input, select, textarea, button").val("whatever", "v1", "v2"); - + String joinVals = "whatever,v1,v2"; assertEquals(joinVals, $("#inputText", e).val()); assertEquals(joinVals, $("#textArea", e).val()); @@ -1040,84 +1040,84 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertEquals(1, $("input[type='radio']:checked", e).size()); assertEquals("v2", $("input[type='radio']:checked", e).val()); } - - + + public void testAttr_Issue97() { $(e).html(""); assertNull($("#cb:checked", e).val()); - + $("#cb", e).attr("checked", "checked"); assertEquals(1, $("#cb:checked", e).length()); assertEquals(true, InputElement.as($("#cb", e).get(0)).isChecked()); assertEquals("checked", $("#cb", e).get(0).getAttribute("checked")); assertEquals(true, $("#cb", e).get(0).getPropertyBoolean("checked")); - + $("#cb", e).removeAttr("checked"); assertEquals(0, $("#cb:checked", e).length()); assertEquals(false, InputElement.as($("#cb", e).get(0)).isChecked()); assertEquals("", $("#cb", e).get(0).getAttribute("checked")); assertEquals(false, $("#cb", e).get(0).getPropertyBoolean("checked")); - + $("#cb", e).attr("checked", true); assertEquals(1, $("#cb:checked", e).length()); assertEquals(true, InputElement.as($("#cb", e).get(0)).isChecked()); assertEquals("checked", $("#cb", e).get(0).getAttribute("checked")); assertEquals(true, $("#cb", e).get(0).getPropertyBoolean("checked")); - + $("#cb", e).attr("checked", false); assertEquals(0, $("#cb:checked", e).length()); assertEquals(false, InputElement.as($("#cb", e).get(0)).isChecked()); assertEquals("", $("#cb", e).get(0).getAttribute("checked")); assertEquals(false, $("#cb", e).get(0).getPropertyBoolean("checked")); - + $("#cb", e).attr("checked", ""); assertEquals(1, $("#cb:checked", e).length()); assertEquals(true, InputElement.as($("#cb", e).get(0)).isChecked()); assertEquals("checked", $("#cb", e).get(0).getAttribute("checked")); assertEquals(true, $("#cb", e).get(0).getPropertyBoolean("checked")); - + GQuery gq = $("
test"); gq.attr("class", "test1"); - + assertEquals("test1", gq.get(0).getClassName()); assertEquals("test1", gq.attr("class")); assertNull(gq.get(0).getPropertyString("class")); - + gq.removeAttr("class"); assertEquals("", gq.get(0).getClassName()); assertEquals("", gq.attr("class")); - + //test on value $("#cb", e).attr("value", "mail"); assertEquals("mail", InputElement.as($("#cb", e).get(0)).getValue()); assertEquals("mail", $("#cb", e).get(0).getAttribute("value")); - + $("#cb", e).removeAttr("value"); String val = InputElement.as($("#cb", e).get(0)).getValue(); assertTrue(String.valueOf(val).matches("^(|null|on)$")); - + val = $("#cb", e).get(0).getAttribute("value"); assertTrue(String.valueOf(val).matches("^(|null|on)$")); - + try{ $("#cb", e).attr("type", "hidden"); fail("Cannnot change a type of an element already attached to the dom"); }catch (Exception e){} - + gq = $(""); gq.attr("type", "radio"); assertEquals("radio", InputElement.as(gq.get(0)).getType()); assertEquals("blop", InputElement.as(gq.get(0)).getValue()); - + gq.attr(Properties.create("{class:'test2', disabled:true}")); InputElement ie = InputElement.as(gq.get(0)); - + assertEquals("test2", ie.getClassName()); assertEquals(true, ie.isDisabled()); assertEquals("disabled", ie.getAttribute("disabled")); - + } - + @DoNotRunWith({Platform.Prod}) // FIXME: the hidden part does not work in FF nor Chrome public void testWidthHeight() { @@ -1140,10 +1140,10 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertEquals(122, g.outerWidth()); assertEquals(142, g.outerHeight(true)); assertEquals(142, g.outerWidth(true)); - + // When hiding the element we should get the same sizes $(e).hide(); - + assertEquals(100, g.width()); assertEquals(100, g.height()); assertEquals("h1", 120, g.innerWidth()); @@ -1161,7 +1161,7 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertEquals(142, g.outerHeight(true)); assertEquals(142, g.outerWidth(true)); } - + public void testWidthHeightInlineElement() { $(e).html( "Content 1"); @@ -1186,7 +1186,7 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertHtmlEquals(expected, $(e).html()); } - + public void testFilterBody() { GQuery myNewElement = $("
my new div
"); boolean isAttachedToTheDOM = myNewElement.parents().filter("body").size() > 0; @@ -1196,35 +1196,35 @@ public class GQueryCoreTestGwt extends GWTTestCase { isAttachedToTheDOM = myNewElement.parents().filter("body").size() > 0; assertEquals(true, isAttachedToTheDOM); } - + public void testFilterMethod(){ // first test filter on element attached to the DOM String content = "
Hello blop
And
Goodbye
"; $(e).html(content); - + assertEquals(5, $("*", e).length()); assertEquals(4, $("*", e).filter("div").length()); assertEquals(1, $("*", e).filter("div.outer").length()); assertEquals(3, $("*", e).filter("div.inner").length()); assertEquals(1, $("*", e).filter("span").length()); - + GQuery $html = $("
div1
div2
div3
span1"); assertEquals(3, $html.filter("div").length()); assertEquals(1, $html.filter("span").length()); - + JsNodeArray array = JsNodeArray.create(); for (int i = 0 ; i < 3; i++){ array.addNode(DOM.createDiv()); } - assertEquals(3, $(array).filter("div").length()); - - + assertEquals(3, $(array).filter("div").length()); + + String content2 = "
Hello
And
Goodbye
"; $(e).html(content2); //the inner object contains the 3 div that are detached from the dom GQuery $inner = $(".inner").replaceWith("

blop

"); - assertEquals(3, $inner.filter("div").length()); + assertEquals(3, $inner.filter("div").length()); } public void testGQueryWidgets() { @@ -1253,9 +1253,9 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertEquals(2, $(new Label(""), new TextArea()).size()); } - + public void testGQueryWidgetManipulation() { - + String content = "
"; $(e).html(content); Button b = new Button("b"); @@ -1263,14 +1263,14 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertTrue(b.isAttached()); $("button").remove(); assertFalse(b.isAttached()); - + RootPanel.get().add(b); assertTrue(b.isAttached()); $(e).append($(b)); assertTrue(b.isAttached()); $(e).empty(); // FIXME: assertFalse(b.isAttached()); - + } public void testGQueryMap() { @@ -1308,33 +1308,33 @@ public class GQueryCoreTestGwt extends GWTTestCase { } public void testHtmlSnippet(){ - - GQuery gq = $("
blop

test

test"); + + GQuery gq = $("
blop

test

test"); assertEquals(3, gq.size()); assertEquals("DIV", gq.get(0).getTagName().toUpperCase()); assertEquals("P", gq.get(1).getTagName().toUpperCase()); assertEquals("SPAN", gq.get(2).getTagName().toUpperCase()); - + //xhtml tag - gq = $("
"); + gq = $("
"); assertEquals(1, gq.size()); assertEquals("DIV", gq.get(0).getTagName().toUpperCase()); - - gq = $(""); + + gq = $(""); assertEquals(1, gq.size()); assertEquals("A", gq.get(0).getTagName().toUpperCase()); - - gq = $("
"); + + gq = $("
"); assertEquals(1, gq.size()); assertEquals("DIV", gq.get(0).getTagName().toUpperCase()); - + //issue 81 : trailing spaces - gq = $("
blop

test

test "); + gq = $("
blop

test

test "); assertEquals(3, gq.size()); assertEquals("DIV", gq.get(0).getTagName().toUpperCase()); assertEquals("P", gq.get(1).getTagName().toUpperCase()); assertEquals("SPAN", gq.get(2).getTagName().toUpperCase()); - + //wrapping gq = $("bloptest"); assertEquals(2, gq.size()); @@ -1345,42 +1345,42 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertEquals(2, gq.size()); assertEquals("TR", gq.get(0).getTagName().toUpperCase()); assertEquals("TR", gq.get(1).getTagName().toUpperCase()); - + gq = $("bloptest"); assertEquals(2, gq.size()); assertEquals("TD", gq.get(0).getTagName().toUpperCase()); assertEquals("TD", gq.get(1).getTagName().toUpperCase()); - + gq = $("bloptest"); assertEquals(2, gq.size()); assertEquals("TH", gq.get(0).getTagName().toUpperCase()); assertEquals("TH", gq.get(1).getTagName().toUpperCase()); - + gq = $(""); assertEquals(2, gq.size()); assertEquals("COL", gq.get(0).getTagName().toUpperCase()); assertEquals("COL", gq.get(1).getTagName().toUpperCase()); - + gq = $(""); assertEquals(2, gq.size()); assertEquals("AREA", gq.get(0).getTagName().toUpperCase()); assertEquals("AREA", gq.get(1).getTagName().toUpperCase()); - + gq = $(""); assertEquals(2, gq.size()); assertEquals("OPTION", gq.get(0).getTagName().toUpperCase()); assertEquals("OPTION", gq.get(1).getTagName().toUpperCase()); - + gq = $("bloptest"); assertEquals(2, gq.size()); assertEquals("LEGEND", gq.get(0).getTagName().toUpperCase()); assertEquals("LEGEND", gq.get(1).getTagName().toUpperCase()); - + gq = $("bloptest"); assertEquals(2, gq.size()); assertEquals("THEAD", gq.get(0).getTagName().toUpperCase()); assertEquals("THEAD", gq.get(1).getTagName().toUpperCase()); - + //issue gq = $("

"; $(e).html(html); - + GQuery closeP = $("input", e).closest("p,div"); - + assertEquals(1, closeP.length()); assertEquals("firstP", closeP.get(0).getId()); - + GQuery closeDiv = $("input", e).closest("div"); - + assertEquals(1, closeDiv.length()); assertEquals("firstDiv", closeDiv.get(0).getId()); - + GQuery closeInput = $("input", e).closest("input"); - + assertEquals(1, closeInput.length()); assertEquals("firstInput", closeInput.get(0).getId()); - + GQuery closeUnknown = $("input", e).closest("h1"); - + assertEquals(0, closeUnknown.length()); - + GQuery closePWithContext = $("input", e).closest("p,div",$("#firstDiv",e).get(0)); - + assertEquals(1, closePWithContext.length()); assertEquals("firstP", closePWithContext.get(0).getId()); - + GQuery closeDivWithContext = $("input", e).closest("div",$("#firstP",e).get(0)); - - assertEquals(0, closeDivWithContext.length()); - + + assertEquals(0, closeDivWithContext.length()); + } - + public void testClosestMethodWithArrayOfString(){ - + String html = "

"; $(e).html(html); - + JsNamedArray> close = $("input", e).closest(new String[]{"p","div", ".test", "#unknown"}); - + assertEquals(3, close.length()); - + assertNotNull(close.get("p")); assertEquals(1,close.get("p").getLength()); assertEquals("mainP", close.get("p").getItem(0).getId()); - + assertNotNull(close.get("div")); assertEquals(3,close.get("div").getLength()); assertEquals("subSubDiv", close.get("div").getItem(0).getId()); assertEquals("subDiv", close.get("div").getItem(1).getId()); assertEquals("mainDiv", close.get("div").getItem(2).getId()); - + assertNotNull(close.get(".test")); assertEquals(2,close.get(".test").getLength()); assertEquals("testSpan", close.get(".test").getItem(0).getId()); assertEquals("subDiv", close.get(".test").getItem(1).getId()); - + assertNull(close.get("#unknown")); - + } - + public void testMap() { String html = "
" + "" + @@ -1654,10 +1654,10 @@ public class GQueryCoreTestGwt extends GWTTestCase { "" + ""; $(e).html(html); - + GQuery c = $(e).children(); assertEquals(7, c.size()); - + // A list of lists containing tag,class,id, remove elements without id List> m = $(e).children().map(new Function() { public List f(Element e, int i) { @@ -1673,7 +1673,7 @@ public class GQueryCoreTestGwt extends GWTTestCase { } }); assertEquals(6, m.size()); - + // Sort the list by id assertEquals("div", m.get(0).get(0).toLowerCase()); assertEquals("i", m.get(5).get(0).toLowerCase()); @@ -1685,13 +1685,13 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertEquals("div", m.get(5).get(0).toLowerCase()); assertEquals("i", m.get(0).get(0).toLowerCase()); } - + public void testWindowSize() { GQuery w = $(GQuery.window); assertTrue(w.width() > 0); assertTrue(w.height() > 0); } - + public void testFunction() { $(e).html("
0
"); GQuery g = $("#fid", e); @@ -1728,7 +1728,7 @@ public class GQueryCoreTestGwt extends GWTTestCase { } }); assertEquals("D0", g.text()); - + // EVENTS g.unbind(Event.ONCLICK).click(new Function(){ @Override @@ -1760,13 +1760,13 @@ public class GQueryCoreTestGwt extends GWTTestCase { } }).click(); assertEquals("ED", g.text()); - + // ELEMENTS AND WIDGETS Label label = new Label("1"); RootPanel.get().add(label); g = $("#fid, .gwt-Label"); assertEquals(2, g.size()); - + g.each(new Function() { @Override public void f(com.google.gwt.user.client.Element e) { @@ -1781,7 +1781,7 @@ public class GQueryCoreTestGwt extends GWTTestCase { } }); assertEquals("DD", g.text()); - + g.each(new Function() { @Override public void f(com.google.gwt.user.client.Element e) { @@ -1804,7 +1804,7 @@ public class GQueryCoreTestGwt extends GWTTestCase { } }); assertEquals("DW", g.text()); - + g.each(new Function() { @Override public Object f(com.google.gwt.user.client.Element e, int idx) { @@ -1876,7 +1876,7 @@ public class GQueryCoreTestGwt extends GWTTestCase { label.removeFromParent(); } - + public void testXpathSelector() { $(e).html("
A TextB
"); SelectorEngineCssToXPath s = new SelectorEngineCssToXPath(); @@ -1885,13 +1885,13 @@ public class GQueryCoreTestGwt extends GWTTestCase { assertEquals($(selector).size(), $(xselector).size()); } } - + public void testIssue81(){ GQuery test = $("
blop

test2

"); test.addClass("test"); test.removeClass("test"); } - + public void testHas() { $(e).html("
    " +"
  • list item 1
    • " @@ -1901,7 +1901,7 @@ public class GQueryCoreTestGwt extends GWTTestCase { +"
  • list item 2-b
    • " +"
" +"" - +"
  • list item 3 span" + +"
  • list item 3 span" +"
    • " +"
  • list item 4
    • " +""); @@ -1912,16 +1912,16 @@ public class GQueryCoreTestGwt extends GWTTestCase { Element span = $("span", e).get(0); assertEquals("l3", $("li", e).has(span).id()); } - + public void testDetachedElement(){ GQuery view = $("
    "); - + int viewWidth = view.width(); - + assertEquals(300, viewWidth); - + int innerViewWidth = view.children().width(); - + assertEquals(150, innerViewWidth); } diff --git a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCssTestGwt.java b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCssTestGwt.java index 10ed3caa..ea9b91dd 100644 --- a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCssTestGwt.java +++ b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCssTestGwt.java @@ -1,12 +1,12 @@ /* * Copyright 2011, The gwtquery team. - * + * * 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 @@ -70,7 +70,7 @@ public class GQueryCssTestGwt extends GWTTestCase { public String getModuleName() { return "com.google.gwt.query.Query"; } - + public void gwtTearDown() { $(e).remove(); e = null; @@ -135,12 +135,12 @@ public class GQueryCssTestGwt extends GWTTestCase { assertTrue($("#test").css("backgroundImage").contains("image.jpg")); assertTrue($("#test").css(CSS.BACKGROUND_IMAGE).contains("image.jpg")); } - + void assertMatches(String regex, String test) { boolean b = test.matches("^(" + regex + ")$"); assertTrue("assertMatches error, expected:" + regex + ", actual:" + test, b); } - + public void testBackgroundPositionProperty() { $(e).html("
    Content
    "); @@ -209,7 +209,7 @@ public class GQueryCssTestGwt extends GWTTestCase { CSS.BACKGROUND.with(RGBColor.TRANSPARENT, UriValue.url("back.jpg"), BackgroundRepeat.NO_REPEAT, BackgroundAttachment.SCROLL, BackgroundPosition.CENTER)); - + assertMatches(".*back.jpg.*no-repeat scroll (center|center center|50% 50%).*", $("#test").css("background")); } @@ -448,7 +448,7 @@ public class GQueryCssTestGwt extends GWTTestCase { $("#test").css(CSS.COLOR.with(RGBColor.BLACK)); assertEquals("black", $("#test").css(CSS.COLOR, false)); - + $("#test").css(CSS.COLOR.with(RGBColor.BLUE)); assertEquals("blue", $("#test").css(CSS.COLOR, false)); @@ -457,7 +457,7 @@ public class GQueryCssTestGwt extends GWTTestCase { $("#test").css(CSS.COLOR.with(RGBColor.GRAY)); assertEquals("gray", $("#test").css(CSS.COLOR, false)); - + $("#test").css(CSS.COLOR.with(RGBColor.GREY)); assertMatches("grey|rgb\\(128, *128, *128\\)", $("#test").css(CSS.COLOR, false)); @@ -663,7 +663,7 @@ public class GQueryCssTestGwt extends GWTTestCase { $("#test").css(CSS.HEIGHT.with(Length.pt(10))); assertEquals("10pt", $("#test").css(CSS.HEIGHT, false)); - + $("#test").css(CSS.HEIGHT.with(Length.px(10.1))); assertEquals("10.1px", $("#test").css(CSS.HEIGHT, false)); @@ -714,7 +714,7 @@ public class GQueryCssTestGwt extends GWTTestCase { $("#test").css(CSS.LINE_HEIGHT.with(2)); assertEquals("2", $("#test").css("lineHeight", false)); assertEquals("2", $("#test").css(CSS.LINE_HEIGHT, false)); - + $("#test").css(CSS.LINE_HEIGHT.with(2.5)); assertEquals("2.5", $("#test").css("lineHeight", false)); assertEquals("2.5", $("#test").css(CSS.LINE_HEIGHT, false)); @@ -746,7 +746,7 @@ public class GQueryCssTestGwt extends GWTTestCase { public void testListStyleProperty() { $(e).html("
    • Content
    "); - + assertMatches("(disc |)(outside |)(none|)", $("#test").css("listStyle")); $("#test").css( @@ -754,7 +754,7 @@ public class GQueryCssTestGwt extends GWTTestCase { null)); assertMatches("disc outside( none|)", $("#test").css("listStyle")); assertMatches("disc outside( none|)", $("#test").css(CSS.LIST_STYLE)); - + $("#test").css( CSS.LIST_STYLE.with(ListStyleType.DISC, null, UriValue.url("square.jpg"))); assertMatches("disc (outside |)url\\(.*square.jpg.*\\)", $("#test").css("listStyle")); @@ -784,7 +784,7 @@ public class GQueryCssTestGwt extends GWTTestCase { assertEquals("10px 20px", $("#test").css("margin")); assertEquals("10px 20px", $("#test").css(CSS.MARGIN)); - + $("#test").css(CSS.MARGIN.with(Length.px(10), Length.px(20), Length.px(30))); assertEquals("10px 20px 30px", $("#test").css("margin")); @@ -1019,11 +1019,11 @@ public class GQueryCssTestGwt extends GWTTestCase { public void testVerticalAlignProperty() { $(e).html("
    Content
    "); - + $("#test").css(CSS.VERTICAL_ALIGN.with(Length.px(120))); assertEquals("120px", $("#test").css("verticalAlign")); assertEquals("120px", $("#test").css(CSS.VERTICAL_ALIGN)); - + $("#test").css(CSS.VERTICAL_ALIGN.with(VerticalAlign.BASELINE)); assertEquals("baseline", $("#test").css("verticalAlign")); assertEquals("baseline", $("#test").css(CSS.VERTICAL_ALIGN)); @@ -1127,7 +1127,7 @@ public class GQueryCssTestGwt extends GWTTestCase { $("#test").css(CSS.ZINDEX.with(1000)); assertEquals("1000", $("#test").css("zIndex", true)); assertEquals("1000", $("#test").css(CSS.ZINDEX, true)); - + $("#test").css(CSS.ZINDEX.with(null)); assertMatches("0|auto", $("#test").css("zIndex", true)); assertMatches("0|auto", $("#test").css(CSS.ZINDEX, true)); diff --git a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEffectsTestGwt.java b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEffectsTestGwt.java index 4ef2e86e..531f58c3 100644 --- a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEffectsTestGwt.java +++ b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEffectsTestGwt.java @@ -1,12 +1,12 @@ /* * Copyright 2011, The gwtquery team. - * + * * 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 @@ -64,10 +64,10 @@ public class GQueryEffectsTestGwt extends GWTTestCase { public void testClipAnimation() { $(e).html("

    Content 1

    "); - + final GQuery g = $("#idtest"); final int duration = 1000; - + // Clip effect places a relative div in the position of the original element // So check that there is not any div. GQuery back = $("div", e); @@ -78,10 +78,10 @@ public class GQueryEffectsTestGwt extends GWTTestCase { // Check that the back div has been created back = $("div", e); assertEquals(1, back.size()); - + // Configure the max duration for this test delayTestFinish(duration * 2); - + // each timer calls the next one //final Timer timer1 = new Timer() { //public void run() { @@ -102,24 +102,24 @@ public class GQueryEffectsTestGwt extends GWTTestCase { //timer1.schedule(duration/2 + 1); } }; - + // Start the first timer timer2.schedule(duration/2); - } + } public void testEffectsShouldBeQueued() { $(e).html("

    Content 1

    "); final GQuery g = $("#idtest").css("position", "absolute"); final Offset o = g.offset(); - + final int duration = 1000; g.as(Effects.Effects). animate($$("left: '+=100'"), duration, Easing.LINEAR). animate($$("top: '+=100'"), duration, Easing.LINEAR). animate($$("left: '-=100'"), duration, Easing.LINEAR). animate($$("top: '-=100'"), duration, Easing.LINEAR); - + // Configure the max duration for this test delayTestFinish(duration * 4); @@ -152,7 +152,7 @@ public class GQueryEffectsTestGwt extends GWTTestCase { // Start the first timer timer4.schedule(duration/2); } - + public void testFade() { $(e) .html( @@ -160,7 +160,7 @@ public class GQueryEffectsTestGwt extends GWTTestCase { final GQuery sectA = $("#id1"); final GQuery sectB = $("#id2"); - + // fadeIn() & fadeOut() are tested with delayed assertions sectA.hide(); sectA.fadeIn(2000); @@ -210,7 +210,7 @@ public class GQueryEffectsTestGwt extends GWTTestCase { // schedule the delayed assertions timerShortTime.schedule(200); timerMidTime.schedule(1200); - timerLongTime.schedule(2200); + timerLongTime.schedule(2200); } public void testPropertiesAnimationComputeEffects() { @@ -295,36 +295,36 @@ public class GQueryEffectsTestGwt extends GWTTestCase { PropertiesAnimation.computeFxProp(g.get(0), "padding", "20px", false) .toString()); } - + public void testColorEffectParsing(){ String html = "
    Test
    "; $(e).html(html); - + ColorFx effect = (ColorFx) PropertiesAnimation.computeFxProp($("#test",e).get(0), "color", "#ffffff", false); assertEquals(17, effect.getStartColor()[0]); //#11 assertEquals(34, effect.getStartColor()[1]); //#22 assertEquals(51, effect.getStartColor()[2]); //#33 - + assertEquals(255, effect.getEndColor()[0]); assertEquals(255, effect.getEndColor()[1]); assertEquals(255, effect.getEndColor()[2]); - + effect = (ColorFx) PropertiesAnimation.computeFxProp(e, "color", "rgb(255,255,255)", false); assertEquals(255, effect.getEndColor()[0]); assertEquals(255, effect.getEndColor()[1]); assertEquals(255, effect.getEndColor()[2]); - + effect = (ColorFx) PropertiesAnimation.computeFxProp(e, "color", "rgb(100%, 100%, 100%)", false); assertEquals(255, effect.getEndColor()[0]); assertEquals(255, effect.getEndColor()[1]); assertEquals(255, effect.getEndColor()[2]); - + effect = (ColorFx) PropertiesAnimation.computeFxProp(e, "color", "white", false); assertEquals(255, effect.getEndColor()[0]); assertEquals(255, effect.getEndColor()[1]); assertEquals(255, effect.getEndColor()[2]); } - + private void assertPosition(GQuery g, Offset min, Offset max) { int a = Math.min(min.top, max.top); int b = Math.max(min.top, max.top); @@ -342,21 +342,21 @@ public class GQueryEffectsTestGwt extends GWTTestCase { + " - " + b; assertTrue(msg, c); } - + public void testAttrEffect() { $(e).html("
    AB
    "); final GQuery g = $("#idtest").css("position", "absolute"); final int duration = 500; - - assertEquals("cssprop=$width attr=width value=+=100 start=440 end=540 unit=", + + assertEquals("cssprop=$width attr=width value=+=100 start=440 end=540 unit=", PropertiesAnimation.computeFxProp(g.get(0), "$width", "+=100", false).toString()); - + delayTestFinish(duration * 3); g.as(Effects.Effects). animate($$("$width: +=100; $border: +=4"), duration, Easing.LINEAR); - + final Timer timer = new Timer() { public void run() { assertEquals(540.0, Double.parseDouble(g.attr("width"))); @@ -366,7 +366,7 @@ public class GQueryEffectsTestGwt extends GWTTestCase { }; timer.schedule(duration * 2); } - + public void testStop() { $(e) .html( @@ -375,28 +375,28 @@ public class GQueryEffectsTestGwt extends GWTTestCase { final GQuery sectA = $("#id1"); final GQuery sectB = $("#id2"); final GQuery sectC = $("#id2"); - + sectA.hide(); sectA.fadeIn(2000); sectB.fadeOut(2000).delay(500).fadeIn(1000); sectC.fadeOut(2000).delay(500).fadeIn(1000); - // Call stop + // Call stop Timer timerMidTime = new Timer() { public void run() { sectA.stop(); sectB.stop(true, true); sectC.stop(false, false); - + Double o = Double.valueOf(sectA.css("opacity")); sectA.data("opacityA", o); assertTrue( "'sectA' opacity must be in the interval 0.5-1 but is: " + o, o > 0.5 && o < 1); - + //animation should jump to the end assertEquals("none", sectB.css("display")); - + o = Double.valueOf(sectC.css("opacity")); sectC.data("opacityC", o); assertTrue( @@ -404,16 +404,16 @@ public class GQueryEffectsTestGwt extends GWTTestCase { o > 0 && o < 0.5); } }; - - + + Timer timerLongTime = new Timer() { public void run() { Double midAOpacity = sectA.data("opacityA", Double.class); //animation was stopped, opacity should not change assertEquals(midAOpacity, Double.valueOf(sectA.css("opacity"))); //animation was stopped and jumped to the end, the queue was cleared so no change too. - assertEquals("none", sectB.css("display")); - + assertEquals("none", sectB.css("display")); + //fadeOut was stopped but fadeIn should continue Double midCOpacity = sectC.data("opacityC", Double.class); Double laterCOpacity = Double.valueOf(sectC.css("opacity")); @@ -427,24 +427,24 @@ public class GQueryEffectsTestGwt extends GWTTestCase { timerMidTime.schedule(1200); // schedule timer timerLongTime.schedule(2200); - + } - + // This test is used to demonstrate the issue, dont run it normally to avoid // problems during the testing phase int animationRunCounter = 0; public void ignore_testQueuesAndDataLeaks_issue132() { - + final Widget w = new Label("some animation"); w.setVisible(false); RootPanel.get().add(w); w.getElement().setId("e"); GQuery g = $(w); - + int test_duration = 1000; int fx_duration = 200; final int loops = test_duration / fx_duration; - + // Queue a set of effects which will use the data cache for (int i = 0; i < loops ; i++) { final char[] bulk = new char[5*1024*1024]; // let's leak 5MBs @@ -455,14 +455,14 @@ public class GQueryEffectsTestGwt extends GWTTestCase { } }); } - + // Testing delay as well g.delay(fx_duration, new Function(){ public void f() { animationRunCounter ++; } }); - + // We do the assertions after all effects have been run g.queue(new Function() { public void f() { @@ -471,20 +471,20 @@ public class GQueryEffectsTestGwt extends GWTTestCase { $(this).dequeue(); // Check that all animations and the delayed function has been run assertEquals(loops + 1, animationRunCounter); - + // Check that nothings is left in the dataCache object assertEquals(0, GQuery.dataCache.length()); - + // Check that getting queue size does not initialize the data // object for this object assertEquals(0, $(this).queue()); assertEquals(0, GQuery.dataCache.length()); - + // Mark the test as success and stop delay timer finishTest(); }; }); - + // delay the test enough to run all animations delayTestFinish(test_duration * 2); } diff --git a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEventsTestGwt.java b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEventsTestGwt.java index abe708bb..fbc4c3e8 100644 --- a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEventsTestGwt.java +++ b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEventsTestGwt.java @@ -1,11 +1,11 @@ /* * Copyright 2011, The gwtquery team. - * + * * 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 @@ -880,7 +880,7 @@ public class GQueryEventsTestGwt extends GWTTestCase { $("p", e, Events.Events).bind("click", "red",new Function() { public void f(Element elem) { $(elem).css(CSS.FONT_SIZE.with(Length.px(24))); - + assertEquals("red", getData()[0]); } }); @@ -958,7 +958,7 @@ public class GQueryEventsTestGwt extends GWTTestCase { finishTest(); } }); - + Window.resizeTo(w.width(), w.height() + 100); } diff --git a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryJsTestGwt.java b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryJsTestGwt.java index 3884286c..f89c7aaa 100644 --- a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryJsTestGwt.java +++ b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryJsTestGwt.java @@ -1,12 +1,12 @@ /* * Copyright 2011, The gwtquery team. - * + * * 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 @@ -55,7 +55,7 @@ public class GQueryJsTestGwt extends GWTTestCase { public void testJsCache() { String[] slist = new String[]{"A", "B", "C"}; - + JsCache c = JsCache.create(); assertTrue(c.isEmpty()); for (int i=0; i < slist.length; i++) { @@ -77,52 +77,52 @@ public class GQueryJsTestGwt extends GWTTestCase { assertEquals(7, c.length()); assertEquals(7, c.keys().length); assertEquals(7, c.elements().length); - + assertTrue(c.exists(2)); assertFalse(c.exists(3)); assertTrue(c.exists("X")); assertFalse(c.exists("V")); - + c.delete(2); c.delete("C"); assertEquals(5, c.length()); - + c.put(-1, "N"); assertEquals(6, c.length()); assertEquals("N", c.get(-1)); } - + public void testChrome__gwt_ObjectId() { JsCache a = JsCache.create(); assertEquals(0, a.length()); assertEquals(0, a.keys().length); assertEquals(0, a.elements().length); - + a.put("obj", new Long(21)); assertEquals(1, a.length()); assertEquals(1, a.keys().length); assertEquals(1, a.elements().length); - + JsNodeArray n = JsNodeArray.create(); assertEquals(0, n.getLength()); assertEquals(0, n.cast().keys().length); assertEquals(0, n.elements().length); - + n.addNode($("
    ").get(0)); assertEquals(1, n.getLength()); assertEquals(1, n.cast().keys().length); assertEquals(1, n.elements().length); } - + public void testProperties() { Properties p = $$("b: 'a'; c: 1, /*gg: aadf*/d: url('https://test.com');"); assertEquals(3, p.keys().length); assertEquals("url(https://test.com)", p.getStr("d")); - + p = $$("color: 'rgb(0, 0,139)', background: red"); assertEquals(2, p.keys().length); assertEquals("rgb(0,0,139)", p.getStr("color")); - + p = $$("a: 1, b: 0.5, c: null, d: whatever, e: true, f: false"); assertEquals(1, p.getInt("a")); assertEquals(0.5f, p.getFloat("b")); diff --git a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQuerySelectorsTestGwt.java b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQuerySelectorsTestGwt.java index 96cce2e4..efd8953d 100644 --- a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQuerySelectorsTestGwt.java +++ b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQuerySelectorsTestGwt.java @@ -1,12 +1,12 @@ /* * Copyright 2011, The gwtquery team. - * + * * 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 @@ -42,22 +42,22 @@ import com.google.gwt.user.client.ui.RootPanel; * Test for selectors */ public class GQuerySelectorsTestGwt extends GWTTestCase { - + boolean runSlow = false; protected interface ParentSelector extends Selectors { @Selector("#parent") GQuery parentSelector(); - + } - + protected interface ExtendedSelector extends ParentSelector { - + @Selector("#child") GQuery childSelector(); } - - + + protected interface AllSelectors extends Selectors { @Selector("h1[id]:contains(Selectors)") NodeList h1IdContainsSelectors(); @@ -160,7 +160,7 @@ public class GQuerySelectorsTestGwt extends GWTTestCase { GQuery branchB(); @Selector(".branchB") GQuery branchB(Node n); - + @Selector("div .target") GQuery divTarget(); @Selector("div .target") @@ -186,7 +186,7 @@ public class GQuerySelectorsTestGwt extends GWTTestCase { $(e).remove(); e = null; } - + public void gwtSetUp() { if (e == null) { testPanel = new HTML(); @@ -197,19 +197,19 @@ public class GQuerySelectorsTestGwt extends GWTTestCase { e.setInnerHTML(""); } } - + public void testInhiterance(){ final ExtendedSelector selector = GWT.create(ExtendedSelector.class); - + $(e).html("
    parent
    child
    "); - + assertEquals(1, selector.parentSelector().length()); assertEquals(1, selector.childSelector().length()); - + assertEquals("parentchild", selector.parentSelector().text()); assertEquals("child", selector.childSelector().text()); } - + public void testJQueryPseudoselectors() { $(e).html("
    A Text

    "); assertEquals(9, $("* ", e).size()); @@ -228,7 +228,7 @@ public class GQuerySelectorsTestGwt extends GWTTestCase { // TODO: fix these selectors // sel.divWithClassNotContainsMadeup().getLength() // sel.divCommaPA().getLength() - + // assertArrayContains(sel.title().getLength(), 1); assertEquals(1, sel.body().getLength()); assertArrayContains(sel.bodyDiv().getLength(), 53, 55); @@ -270,13 +270,13 @@ public class GQuerySelectorsTestGwt extends GWTTestCase { assertArrayContains(sel.ulTocline2().getLength(), 12); assertArrayContains(sel.ulTocLiTocLine2().getLength(), 12); } - + public void testIssue12() { $(e).html("

    1

    2
    "); executeSelectInAllImplementations(":checked", e, 1); executeSelectInAllImplementations(":disabled", e, 1); executeSelectInAllImplementations("input:enabled", e, 1); -// FIXME, these two selectors fails in prod with chrome when using both Xpath engines +// FIXME, these two selectors fails in prod with chrome when using both Xpath engines // executeSelectInAllImplementations("[myCustomAttr]", e, 2); // executeSelectInAllImplementations("*[myCustomAttr]", e, 2); executeSelectInAllImplementations("input[name=wantedName]", e, 1); @@ -325,7 +325,7 @@ public class GQuerySelectorsTestGwt extends GWTTestCase { SelectorEngineImpl selEng = new SelectorEngineXPath(); executeSelectorEngineTests(selEng); } - + public void testSelectorsGeneratorNative() { $(e).html( "1" @@ -334,17 +334,17 @@ public class GQuerySelectorsTestGwt extends GWTTestCase { TestSelectors selectors = GWT.create(TestSelectors.class); assertEquals(1, selectors.allChecked().size()); } - + public void testSelectorsInIframe() { $(e).html(""; - if (! shareIframes ) { - $(i.replaceAll("%ID%", "gwt")).appendTo(document).hide(); - for (Benchmark b : benchmarks) { - if (b instanceof IframeBenchmark) { - $(i.replaceAll("%ID%", b.getId())).appendTo(document).hide(); - } - } - } else { - $(i.replaceAll("%ID%", "iframe")).appendTo(document).hide(); - } - } - - /** - * Reset the result table - */ - private void initResultsTable(DeferredSelector[] dg, Benchmark... benchs) { - int numRows = dg.length; - grid = new FlexTable(); - grid.addStyleName("resultstable"); - RootPanel.get("results").clear(); - RootPanel.get("results").add(grid); - - grid.setText(0, 0, "Selector"); - for (int i=0; i < benchs.length; i++) { - grid.setText(0, i+1, benchs[i].getId()); - } - - for (int i = 0; i < numRows; i++) { - grid.setText(i+1, 0, dg[i].getSelector()); - for (int j = 0; j < benchs.length; j++) { - grid.setText(i+1, j+1, "-"); - } - } - } - - /** - * Initialize the selects to choose the benchmarks to run - */ - private void initSelects(Benchmark... benchs) { - String opt = "%ID%
    "; - selectPanel.add(new HTML("
    Make your selection
    ")); - selectPanel.show(); - GQuery g = $("#selectcontainer"); - for (Benchmark b : benchs) { - String select = opt; - for (String s : defaultBenchmarks) { - if (s.equals(b.getId())) { - select = select.replaceAll("%SEL%", "checked='checked'"); - } - } - g.append(select.replaceAll("%ID%", b.getId() + " " + b.getName()).replaceAll("%SEL", "")); - } - g.append("
    "); - $("#run").click(runBenchMarks); - selectPanel.hide(); - } - - /** - * Initialize the track with the horses - */ - private void initTrack(Benchmark... benchs) { - if (!useTrack) return; - String tpl = "
    %ID%
    "; - GQuery g = $("#racefield").html(""); - for (Benchmark b : benchs) { - String id = b.getId(); - String lg = id.contains("gwt") ? "gwt" : id; - String s = tpl.replaceAll("%ID%", id).replaceAll("%LG%", lg); - g.append($(s)); - } - - GQuery flag = $("").appendTo(document); - - // These values are set in the css. - int horseHeight = 35; - int horseWidth = 150; - int flagWidth = 35; - - int height = horseHeight * (benchs.length + 1); - $("#racetrack").css("height", height + "px"); - - trackWidth = g.width() - horseWidth - flagWidth; - flag.hide(); - } - - /** - * Update horse possition. - * Note that the calculated position is relative with the faster horse, - * so a horse could move back. - */ - private void moveHorses(Benchmark[] b, int row, double[] totalTimes) { - if (!useTrack) return; - double winnerTime = Double.MAX_VALUE; - for (double d : totalTimes) { - winnerTime = Math.min(winnerTime, d); - } - double winnerPos = row * (double) trackWidth / (double) ds.length; - for (int i = 0; i < b.length; i++) { - GQuery g = $("#" + b[i].getId() + "horse"); - double pos = winnerPos * winnerTime / totalTimes[i]; - g.css("left", (int)pos + "px"); - } - } - - private Benchmark[] readBenchmarkSelection() { - ArrayList bs = new ArrayList(); - for (Element e : $("input", selectPanel.getElement()).elements()) { - String val = $(e).val().replaceAll(" .*$", ""); - if ($(e).prop("checked")) { - for (Benchmark b : benchmarks) { - if (b.getId().equals(val)) { - bs.add(b); - } - } - } - } - return bs.toArray(new Benchmark[bs.size()]); - } - - private void setResultClass(int selNumber, int winNumber) { - Element e = grid.getCellFormatter().getElement(selNumber + 1, winNumber + 1); - $(e).addClass("win").siblings().attr("class", "").addClass("tie").eq(0).removeClass("tie"); - } - - /** - * This ugly method is used to initialize a huge html String - * plenty of html tags which will be used for the tests, - * because java 1.5 has a limitation in the size of static strings. - */ - private void writeTestContent(Element e) { - String ret = ""; - ret += "
    "; - ret += "
    "; - ret += "

    W3C

    "; - ret += "

    Selectors

    "; - ret += " ."; - ret += "

    W3C Working Draft 15 December 2005

    "; - ret += "
    "; - ret += "
    This version:
    "; - ret += "
    "; - ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215
    "; - ret += "
    Latest version:"; - ret += "
    "; - ret += " http://www.w3.org/TR/css3-selectors"; - ret += "
    Previous version:"; - ret += "
    "; - ret += " http://www.w3.org/TR/2001/CR-css3-selectors-20011113"; - ret += "
    Editors:"; - ret += "
    Daniel Glazman (Invited"; - ret += "
    "; - ret += "
    Tantek Çelik"; - ret += "
    Ian"; - ret += " Hickson (Google)"; - ret += "
    Peter Linss (former"; - ret += " editor, Netscape/AOL)"; - ret += "
    John Williams (former editor, Quark, Inc.)"; - ret += "
    "; - ret += "

    "; - ret += " Copyright © 2005 W3C®"; - ret += " (MIT, ERCIM, Keio), All Rights Reserved."; - ret += " liability,"; - ret += " trademark,"; - ret += " document"; - ret += " use rules apply."; - ret += "

    "; - ret += "
    "; - ret += "

    Abstract

    "; - ret += "

    Selectors are patterns that match against elements in a"; - ret += " tree. Selectors have been optimized for use with HTML and XML, and"; - ret += " are designed to be usable in performance-critical code.

    "; - ret += "

    CSS (Cascading"; - ret += " Style Sheets) is a language for describing the rendering of HTML and XML documents on"; - ret += " screen, on paper, in speech, etc. CSS uses Selectors for binding"; - ret += " describes extensions to the selectors defined in CSS level 2. These"; - ret += " extended selectors will be used by CSS level 3."; - ret += "

    Selectors define the following function:

    "; - ret += " 
    expression ∗ element → boolean
    "; - ret += "

    That is, given an element and a selector, this specification"; - ret += " defines whether that element matches the selector.

    "; - ret += "

    These expressions can also be used, for instance, to select a set"; - ret += " subtree. STTS (Simple Tree Transformation Sheets), a"; - ret += " language for transforming XML trees, uses this mechanism. [STTS]

    "; - ret += "

    Status of this document

    "; - ret += "

    This section describes the status of this document at the"; - ret += " of this technical report can be found in the W3C technical reports index at"; - ret += " http://www.w3.org/TR/.

    "; - ret += "

    This document describes the selectors that already exist in CSS1 and CSS2, and"; - ret += " also proposes new selectors for CSS3 and other languages that may need them.

    "; - ret += "

    The CSS Working Group doesn't expect that all implementations of"; - ret += " CSS3 will have to implement all selectors. Instead, there will"; - ret += " will include all of the selectors.

    "; - ret += "

    This specification is a last call working draft for the the CSS Working Group"; - ret += " (Style Activity). This"; - ret += " document is a revision of the Candidate"; - ret += " Recommendation dated 2001 November 13, and has incorporated"; - ret += " be demonstrable.

    "; - ret += "

    All persons are encouraged to review and implement this"; - ret += " specification and return comments to the (archived)"; - ret += " public mailing list www-style"; - ret += " (see instructions). W3C"; - ret += " The deadline for comments is 14 January 2006.

    "; - ret += "

    This is still a draft document and may be updated, replaced, or"; - ret += "

    This document may be available in translation."; - ret += "

    "; - ret += "

    Table of contents

    "; - ret += " "; - ret += "
    "; - ret += "

    1. Introduction

    "; - ret += "

    1.1. Dependencies

    "; - ret += "

    Some features of this specification are specific to CSS, or have"; - ret += " specification, these have been described in terms of CSS2.1. [CSS21]

    "; - ret += "

    1.2. Terminology

    "; - ret += "

    All of the text of this specification is normative except"; - ret += " non-normative.

    "; - ret += "

    1.3. Changes from CSS2

    "; - ret += "

    This section is non-normative.

    "; - ret += "

    The main differences between the selectors in CSS2 and those in"; - ret += " Selectors are:"; - ret += "

      "; - ret += "
    • the list of basic definitions (selector, group of selectors,"; - ret += " of simple selectors, and the term 'simple selector' is now used for"; - ret += "
      • "; - ret += "
    • an optional namespace component is now allowed in type element"; - ret += " selectors, the universal selector and attribute selectors"; - ret += "
      • "; - ret += "
    • a new combinator has been"; - ret += "
      • "; - ret += "
    • new simple selectors including substring matching attribute"; - ret += " selectors, and new pseudo-classes"; - ret += "
      • "; - ret += "
    • new pseudo-elements, and introduction of the '::' convention"; - ret += "
      • "; - ret += "
    • the grammar has been rewritten
      • "; - ret += "
    • profiles to be added to specifications integrating Selectors"; - ret += " and defining the set of selectors which is actually supported by"; - ret += "
      • "; - ret += "
    • Selectors are now a CSS3 Module and an independent"; - ret += "
      • "; - ret += "
    • the specification now has its own test suite
      • "; - ret += "
    "; - ret += "

    2. Selectors

    "; - ret += "

    This section is non-normative, as it merely summarizes the"; - ret += " following sections.

    "; - ret += "

    A Selector represents a structure. This structure can be used as a"; - ret += " HTML or XML fragment corresponding to that structure.

    "; - ret += "

    Selectors may range from simple element names to rich contextual"; - ret += " representations.

    "; - ret += "

    The following table summarizes the Selector syntax:

    "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
    PatternMeaningDescribed in sectionFirst defined in CSS level
    *any elementUniversal"; - ret += " selector2
    Ean element of type EType selector1
    E[foo]an E element with a 'foo' attributeAttribute"; - ret += " selectors2
    E[foo='bar']an E element whose 'foo' attribute value is exactly"; - ret += " Attribute"; - ret += " selectors2
    E[foo~='bar']an E element whose 'foo' attribute value is a list of"; - ret += " Attribute"; - ret += " selectors2
    E[foo^='bar']an E element whose 'foo' attribute value begins exactly"; - ret += " Attribute"; - ret += " selectors3
    E[foo$='bar']an E element whose 'foo' attribute value ends exactly"; - ret += " Attribute"; - ret += " selectors3
    E[foo*='bar']an E element whose 'foo' attribute value contains the"; - ret += " Attribute"; - ret += " selectors3
    E[hreflang|='en']an E element whose 'hreflang' attribute has a"; - ret += " Attribute"; - ret += " selectors2
    E:rootan E element, root of the documentStructural"; - ret += " pseudo-classes3
    E:nth-child(n)an E element, the n-th child of its parentStructural"; - ret += " pseudo-classes3
    E:nth-last-child(n)an E element, the n-th child of its parent, counting"; - ret += " Structural"; - ret += " pseudo-classes3
    E:nth-of-type(n)an E element, the n-th sibling of its typeStructural"; - ret += " pseudo-classes3
    E:nth-last-of-type(n)an E element, the n-th sibling of its type, counting"; - ret += " Structural"; - ret += " pseudo-classes3
    E:first-childan E element, first child of its parentStructural"; - ret += " pseudo-classes2
    E:last-childan E element, last child of its parentStructural"; - ret += " pseudo-classes3
    E:first-of-typean E element, first sibling of its typeStructural"; - ret += " pseudo-classes3
    E:last-of-typean E element, last sibling of its typeStructural"; - ret += " pseudo-classes3
    E:only-childan E element, only child of its parentStructural"; - ret += " pseudo-classes3
    E:only-of-typean E element, only sibling of its typeStructural"; - ret += " pseudo-classes3
    E:emptyan E element that has no children (including text"; - ret += " Structural"; - ret += " pseudo-classes3
    E:link
    E:visited    		an E element being the source anchor of a hyperlink of"; - ret += " The link"; - ret += " pseudo-classes1
    E:active
    E:hover
    E:focus    		an E element during certain user actionsThe user"; - ret += " action pseudo-classes1 and 2
    E:targetan E element being the target of the referring URIThe target"; - ret += " pseudo-class3
    E:lang(fr)an element of type E in language 'fr' (the document"; - ret += " The :lang()"; - ret += " pseudo-class2
    E:enabled
    E:disabled    		a user interface element E which is enabled or"; - ret += " The UI element states"; - ret += " pseudo-classes3
    E:checkeda user interface element E which is checked (for instance a radio-button or checkbox)"; - ret += " The UI element states"; - ret += " pseudo-classes3
    E::first-linethe first formatted line of an E elementThe ::first-line"; - ret += " pseudo-element1
    E::first-letterthe first formatted letter of an E elementThe ::first-letter"; - ret += " pseudo-element1
    E::selectionthe portion of an E element that is currently"; - ret += " The UI element"; - ret += " fragments pseudo-elements3
    E::beforegenerated content before an E elementThe ::before"; - ret += " pseudo-element2
    E::aftergenerated content after an E elementThe ::after"; - ret += " pseudo-element2
    E.warningan E element whose class is"; - ret += " Class"; - ret += " selectors1
    E#myidan E element with ID equal to 'myid'.ID"; - ret += " selectors1
    E:not(s)an E element that does not match simple selector sNegation"; - ret += " pseudo-class3
    E Fan F element descendant of an E elementDescendant"; - ret += " combinator1
    E > Fan F element child of an E elementChild"; - ret += " combinator2
    E + Fan F element immediately preceded by an E elementAdjacent sibling combinator"; - ret += " 2
    E ~ Fan F element preceded by an E elementGeneral sibling combinator"; - ret += " 3
    "; - ret += "

    The meaning of each selector is derived from the table above by"; - ret += " column.

    "; - ret += "

    3. Case sensitivity

    "; - ret += "

    The case sensitivity of document language element names, attribute"; - ret += " names, and attribute values in selectors depends on the document"; - ret += " but in XML, they are case-sensitive.

    "; - ret += "

    4. Selector syntax

    "; - ret += "

    A selector is a chain of one"; - ret += " or more sequences of simple selectors"; - ret += " separated by combinators.

    "; - ret += "

    A sequence of simple selectors"; - ret += " is a chain of simple selectors"; - ret += " that are not separated by a combinator. It"; - ret += " always begins with a type selector or a"; - ret += " universal selector. No other type"; - ret += " selector or universal selector is allowed in the sequence.

    "; - ret += "

    A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, content selector, or pseudo-class. One pseudo-element may be appended to the last"; - ret += " sequence of simple selectors.

    "; - ret += "

    Combinators are: white space, 'greater-than"; - ret += " sign' (U+003E, >), 'plus sign' (U+002B,"; - ret += " +) and 'tilde' (U+007E, ~). White"; - ret += " space may appear between a combinator and the simple selectors around"; - ret += " it. Only the characters 'space' (U+0020), 'tab'"; - ret += " never part of white space.

    "; - ret += "

    The elements of a document tree that are represented by a selector"; - ret += " are the subjects of the selector. A"; - ret += " selector consisting of a single sequence of simple selectors"; - ret += " sequence of simple selectors and a combinator to a sequence imposes"; - ret += " simple selectors.

    "; - ret += "

    An empty selector, containing no sequence of simple selectors and"; - ret += " no pseudo-element, is an invalid"; - ret += " selector.

    "; - ret += "

    5. Groups of selectors

    "; - ret += "

    When several selectors share the same declarations, they may be"; - ret += " grouped into a comma-separated list. (A comma is U+002C.)

    "; - ret += "
    "; - ret += "

    CSS examples:

    "; - ret += "

    In this example, we condense three rules with identical"; - ret += " declarations into one. Thus,

    "; - ret += " 
    h1 { font-family: sans-serif }";
-    ret += "      h3 { font-family: sans-serif }
    "; - ret += "

    is equivalent to:

    "; - ret += " 
    h1, h2, h3 { font-family: sans-serif }
    "; - ret += "
    "; - ret += "

    Warning: the equivalence is true in this example"; - ret += " because all the selectors are valid selectors. If just one of these"; - ret += " selectors were invalid, the entire group of selectors would be"; - ret += " heading rules would be invalidated.

    "; - ret += "

    6. Simple selectors

    "; - ret += "

    6.1. Type selector

    "; - ret += "

    A type selector is the name of a document language"; - ret += " type in the document tree.

    "; - ret += "
    "; - ret += "

    Example:

    "; - ret += "

    The following selector represents an h1 element in the"; - ret += " document tree:

    "; - ret += " 
    h1
    "; - ret += "
    "; - ret += "

    6.1.1. Type selectors and namespaces

    "; - ret += "

    Type selectors allow an optional namespace ([XMLNAMES]) component. A namespace prefix"; - ret += " (U+007C, |).

    "; - ret += "

    The namespace component may be left empty to indicate that the"; - ret += " selector is only to represent elements with no declared namespace.

    "; - ret += "

    An asterisk may be used for the namespace prefix, indicating that"; - ret += " with no namespace).

    "; - ret += "

    Element type selectors that have no namespace component (no"; - ret += " element's namespace (equivalent to '*|') unless a default"; - ret += " namespace.

    "; - ret += "

    A type selector containing a namespace prefix that has not been"; - ret += " previously declared is an invalid selector."; - ret += " language implementing Selectors. In CSS, such a mechanism is defined"; - ret += " in the General Syntax module.

    "; - ret += "

    In a namespace-aware client, element type selectors will only match"; - ret += " against the local"; - ret += " part"; - ret += " of the element's qualified"; - ret += " name. See below for notes about matching"; - ret += " behaviors in down-level clients.

    "; - ret += "

    In summary:

    "; - ret += "
    "; - ret += "
    ns|E
    "; - ret += "
    elements with name E in namespace ns
    "; - ret += "
    *|E
    "; - ret += "
    elements with name E in any namespace, including those without any"; - ret += "
    "; - ret += "
    |E
    "; - ret += "
    elements with name E without any declared namespace
    "; - ret += "
    E
    "; - ret += "
    if no default namespace has been specified, this is equivalent to *|E."; - ret += "
    "; - ret += "
    "; - ret += "
    "; - ret += "

    CSS examples:

    "; - ret += " 
    @namespace foo url(http://www.example.com);";
-    ret += "       h1 { color: green }
    "; - ret += "

    The first rule will match only h1 elements in the"; - ret += " 'http://www.example.com' namespace.

    "; - ret += "

    The second rule will match all elements in the"; - ret += " 'http://www.example.com' namespace.

    "; - ret += "

    The third rule will match only h1 elements without"; - ret += " any declared namespace.

    "; - ret += "

    The fourth rule will match h1 elements in any"; - ret += " namespace (including those without any declared namespace).

    "; - ret += "

    The last rule is equivalent to the fourth rule because no default"; - ret += " namespace has been defined.

    "; - ret += "
    "; - ret += "

    6.2. Universal selector

    "; - ret += "

    The universal selector, written 'asterisk'"; - ret += " (*), represents the qualified name of any element"; - ret += " specified, see Universal selector and"; - ret += " Namespaces below.

    "; - ret += "

    If the universal selector is not the only component of a sequence"; - ret += " of simple selectors, the * may be omitted.

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += "
      "; - ret += "
    • *[hreflang|=en] and [hreflang|=en] are"; - ret += "
      • "; - ret += "
    • *.warning and .warning are equivalent,"; - ret += "
      • "; - ret += "
    • *#myid and #myid are equivalent.
      • "; - ret += "
    "; - ret += "
    "; - ret += "

    Note: it is recommended that the"; - ret += " *, representing the universal selector, not be"; - ret += " omitted.

    "; - ret += "

    6.2.1. Universal selector and namespaces

    "; - ret += "

    The universal selector allows an optional namespace component. It"; - ret += " is used as follows:

    "; - ret += "
    "; - ret += "
    ns|*
    "; - ret += "
    all elements in namespace ns
    "; - ret += "
    *|*
    "; - ret += "
    all elements
    "; - ret += "
    |*
    "; - ret += "
    all elements without any declared namespace
    "; - ret += "
    *
    "; - ret += "
    if no default namespace has been specified, this is equivalent to *|*."; - ret += "
    "; - ret += "
    "; - ret += "

    A universal selector containing a namespace prefix that has not"; - ret += " been previously declared is an invalid"; - ret += " to the language implementing Selectors. In CSS, such a mechanism is"; - ret += " defined in the General Syntax module.

    "; - ret += "

    6.3. Attribute selectors

    "; - ret += "

    Selectors allow the representation of an element's attributes. When"; - ret += " attribute selectors must be considered to match an element if that"; - ret += " attribute selector.

    "; - ret += "

    6.3.1. Attribute presence and values"; - ret += " selectors

    "; - ret += "

    CSS2 introduced four attribute selectors:

    "; - ret += "
    "; - ret += "
    [att]"; - ret += "
    Represents an element with the att attribute, whatever the"; - ret += "
    "; - ret += "
    [att=val]
    "; - ret += "
    Represents an element with the att attribute whose value is"; - ret += "
    "; - ret += "
    [att~=val]
    "; - ret += "
    Represents an element with the att attribute whose value is"; - ret += " a whitespace-separated list of words, one"; - ret += " represent anything (since the words are separated by"; - ret += "
    "; - ret += "
    [att|=val]"; - ret += "
    Represents an element with the att attribute, its value"; - ret += " matches (e.g., the hreflang attribute on the"; - ret += " link element in HTML) as described in RFC 3066 ([RFC3066]). For lang (or"; - ret += " xml:lang) language subcode matching, please see the :lang pseudo-class."; - ret += "
    "; - ret += "
    "; - ret += "

    Attribute values must be identifiers or strings. The"; - ret += " case-sensitivity of attribute names and values in selectors depends on"; - ret += " the document language.

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += "

    The following attribute selector represents an h1"; - ret += " element that carries the title attribute, whatever its"; - ret += " value:

    "; - ret += " 
    h1[title]
    "; - ret += "

    In the following example, the selector represents a"; - ret += " span element whose class attribute has"; - ret += " exactly the value 'example':

    "; - ret += " 
    span[class='example']
    "; - ret += "

    Multiple attribute selectors can be used to represent several"; - ret += " attribute. Here, the selector represents a span element"; - ret += " whose hello attribute has exactly the value 'Cleveland'"; - ret += " and whose goodbye attribute has exactly the value"; - ret += " 'Columbus':

    "; - ret += " 
    span[hello='Cleveland'][goodbye='Columbus']
    "; - ret += "

    The following selectors illustrate the differences between '='"; - ret += " 'copyright copyleft copyeditor' on a rel attribute. The"; - ret += " second selector will only represent an a element with"; - ret += " an href attribute having the exact value"; - ret += " 'http://www.w3.org/'.

    "; - ret += " 
    a[rel~='copyright']";
-    ret += "      a[href='http://www.w3.org/']
    "; - ret += "

    The following selector represents a link element"; - ret += " whose hreflang attribute is exactly 'fr'.

    "; - ret += " 
    link[hreflang=fr]
    "; - ret += "

    The following selector represents a link element for"; - ret += " which the values of the hreflang attribute begins with"; - ret += " 'en', including 'en', 'en-US', and 'en-cockney':

    "; - ret += " 
    link[hreflang|='en']
    "; - ret += "

    Similarly, the following selectors represents a"; - ret += " DIALOGUE element whenever it has one of two different"; - ret += " values for an attribute character:

    "; - ret += " 
    DIALOGUE[character=romeo]";
-    ret += "      DIALOGUE[character=juliet]
    "; - ret += "
    "; - ret += "

    6.3.2. Substring matching attribute"; - ret += " selectors

    "; - ret += "

    Three additional attribute selectors are provided for matching"; - ret += " substrings in the value of an attribute:

    "; - ret += "
    "; - ret += "
    [att^=val]
    "; - ret += "
    Represents an element with the att attribute whose value"; - ret += "
    "; - ret += "
    [att$=val]"; - ret += "
    Represents an element with the att attribute whose value"; - ret += "
    "; - ret += "
    [att*=val]"; - ret += "
    Represents an element with the att attribute whose value"; - ret += "
    "; - ret += "
    "; - ret += "

    Attribute values must be identifiers or strings. The"; - ret += " case-sensitivity of attribute names in selectors depends on the"; - ret += " document language.

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += "

    The following selector represents an HTML object,"; - ret += " image:

    "; - ret += " 
    object[type^='image/']
    "; - ret += "

    The following selector represents an HTML anchor a with an"; - ret += " href attribute whose value ends with '.html'.

    "; - ret += " 
    a[href$='.html']
    "; - ret += "

    The following selector represents an HTML paragraph with a"; - ret += " title"; - ret += " attribute whose value contains the substring 'hello'

    "; - ret += " 
    p[title*='hello']
    "; - ret += "
    "; - ret += "

    6.3.3. Attribute selectors and namespaces

    "; - ret += "

    Attribute selectors allow an optional namespace component to the"; - ret += " separator 'vertical bar' (|). In keeping with"; - ret += " apply to attributes, therefore attribute selectors without a namespace"; - ret += " (equivalent to '|attr'). An asterisk may be used for the"; - ret += "

    An attribute selector with an attribute name containing a namespace"; - ret += " prefix that has not been previously declared is an invalid selector. The mechanism for"; - ret += " a namespace prefix is left up to the language implementing Selectors."; - ret += "

    "; - ret += "

    CSS examples:

    "; - ret += " 
    @namespace foo 'http://www.example.com';";
-    ret += "      [att] { color: green }
    "; - ret += "

    The first rule will match only elements with the attribute"; - ret += " att in the 'http://www.example.com' namespace with the"; - ret += " value 'val'.

    "; - ret += "

    The second rule will match only elements with the attribute"; - ret += " att regardless of the namespace of the attribute"; - ret += " (including no declared namespace).

    "; - ret += "

    The last two rules are equivalent and will match only elements"; - ret += " with the attribute att where the attribute is not"; - ret += " declared to be in a namespace.

    "; - ret += "
    "; - ret += "

    6.3.4. Default attribute values in DTDs

    "; - ret += "

    Attribute selectors represent explicitly set attribute values in"; - ret += " selectors. Selectors should be designed so that they work even if the"; - ret += " default values are not included in the document tree.

    "; - ret += "

    More precisely, a UA is not required to read an 'external"; - ret += " subset' of the DTD but is required to look for default"; - ret += " attribute values in the document's 'internal subset.' (See [XML10] for definitions of these subsets.)

    "; - ret += "

    A UA that recognizes an XML namespace [XMLNAMES] is not required to use its"; - ret += " required to use its built-in knowledge of the XHTML DTD.)

    "; - ret += "

    Note: Typically, implementations"; - ret += " choose to ignore external subsets.

    "; - ret += "
    "; - ret += "

    Example:

    "; - ret += "

    Consider an element EXAMPLE with an attribute 'notation' that has a"; - ret += " default value of 'decimal'. The DTD fragment might be

    "; - ret += " 
    <!ATTLIST EXAMPLE notation (decimal,octal) 'decimal'>
    "; - ret += "

    If the style sheet contains the rules

    "; - ret += " 
    EXAMPLE[notation=decimal] { /*... default property settings ...*/ }";
-    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }
    "; - ret += "

    the first rule will not match elements whose 'notation' attribute"; - ret += " attribute selector for the default value must be dropped:

    "; - ret += " 
    EXAMPLE                   { /*... default property settings ...*/ }";
-    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }
    "; - ret += "

    Here, because the selector EXAMPLE[notation=octal] is"; - ret += " cases' style rules.

    "; - ret += "
    "; - ret += "

    6.4. Class selectors

    "; - ret += "

    Working with HTML, authors may use the period (U+002E,"; - ret += " .) notation as an alternative to the ~="; - ret += " notation when representing the class attribute. Thus, for"; - ret += " HTML, div.value and div[class~=value] have"; - ret += " 'period' (.).

    "; - ret += "

    UAs may apply selectors using the period (.) notation in XML"; - ret += " 1.0 [SVG] describes the SVG"; - ret += " 'class' attribute and how a UA should interpret it, and"; - ret += " similarly MathML 1.01 [MATH] describes the MathML"; - ret += " 'class' attribute.)

    "; - ret += "
    "; - ret += "

    CSS examples:

    "; - ret += "

    We can assign style information to all elements with"; - ret += " class~='pastoral' as follows:

    "; - ret += " 
    *.pastoral { color: green }  /* all elements with class~=pastoral */
    "; - ret += "

    or just

    "; - ret += " 
    .pastoral { color: green }  /* all elements with class~=pastoral */
    "; - ret += "

    The following assigns style only to H1 elements with"; - ret += " class~='pastoral':

    "; - ret += " 
    H1.pastoral { color: green }  /* H1 elements with class~=pastoral */
    "; - ret += "

    Given these rules, the first H1 instance below would not have"; - ret += " green text, while the second would:

    "; - ret += " 
    <H1>Not green</H1>";
-    ret += "      <H1 class='pastoral'>Very green</H1>
    "; - ret += "
    "; - ret += "

    To represent a subset of 'class' values, each value must be preceded"; - ret += " by a '.', in any order.

    "; - ret += "
    "; - ret += "

    CSS example:

    "; - ret += "

    The following rule matches any P element whose 'class' attribute"; - ret += " has been assigned a list of whitespace-separated values that includes"; - ret += " 'pastoral' and 'marine':

    "; - ret += " 
    p.pastoral.marine { color: green }
    "; - ret += "

    This rule matches when class='pastoral blue aqua"; - ret += " marine' but does not match for class='pastoral"; - ret += " blue'.

    "; - ret += "
    "; - ret += "

    Note: Because CSS gives considerable"; - ret += " not.

    "; - ret += "

    Note: If an element has multiple"; - ret += " this specification.

    "; - ret += "

    6.5. ID selectors

    "; - ret += "

    Document languages may contain attributes that are declared to be"; - ret += " applies.

    "; - ret += "

    An ID-typed attribute of a document language allows authors to"; - ret += " ID selectors represent an element instance based on its identifier. An"; - ret += " #) immediately followed by the ID value, which must be an"; - ret += " identifier.

    "; - ret += "

    Selectors does not specify how a UA knows the ID-typed attribute of"; - ret += "

    "; - ret += "

    Examples:

    "; - ret += "

    The following ID selector represents an h1 element"; - ret += " whose ID-typed attribute has the value 'chapter1':

    "; - ret += " 
    h1#chapter1
    "; - ret += "

    The following ID selector represents any element whose ID-typed"; - ret += " attribute has the value 'chapter1':

    "; - ret += " 
    #chapter1
    "; - ret += "

    The following selector represents any element whose ID-typed"; - ret += " attribute has the value 'z98y'.

    "; - ret += " 
    *#z98y
    "; - ret += "
    "; - ret += "

    Note. In XML 1.0 [XML10], the information about which attribute"; - ret += " should use normal attribute selectors instead:"; - ret += " [name=p371] instead of #p371. Elements in"; - ret += " XML 1.0 documents without a DTD do not have IDs at all.

    "; - ret += "

    If an element has multiple ID attributes, all of them must be"; - ret += " DOM3 Core, XML DTDs, and namespace-specific knowledge.

    "; - ret += "

    6.6. Pseudo-classes

    "; - ret += "

    The pseudo-class concept is introduced to permit selection based on"; - ret += " expressed using the other simple selectors.

    "; - ret += "

    A pseudo-class always consists of a 'colon'"; - ret += " (:) followed by the name of the pseudo-class and"; - ret += " optionally by a value between parentheses.

    "; - ret += "

    Pseudo-classes are allowed in all sequences of simple selectors"; - ret += " sequences of simple selectors, after the leading type selector or"; - ret += " document.

    "; - ret += "

    6.6.1. Dynamic pseudo-classes

    "; - ret += "

    Dynamic pseudo-classes classify elements on characteristics other"; - ret += " that cannot be deduced from the document tree.

    "; - ret += "

    Dynamic pseudo-classes do not appear in the document source or"; - ret += " document tree.

    "; - ret += "
    The link pseudo-classes: :link and :visited
    "; - ret += "

    User agents commonly display unvisited links differently from"; - ret += " previously visited ones. Selectors"; - ret += " provides the pseudo-classes :link and"; - ret += " :visited to distinguish them:

    "; - ret += "
      "; - ret += "
    • The :link pseudo-class applies to links that have"; - ret += "
      • "; - ret += "
    • The :visited pseudo-class applies once the link has"; - ret += "
      • "; - ret += "
    "; - ret += "

    After some amount of time, user agents may choose to return a"; - ret += " visited link to the (unvisited) ':link' state.

    "; - ret += "

    The two states are mutually exclusive.

    "; - ret += "
    "; - ret += "

    Example:

    "; - ret += "

    The following selector represents links carrying class"; - ret += " external and already visited:

    "; - ret += " 
    a.external:visited
    "; - ret += "
    "; - ret += "

    Note: It is possible for style sheet"; - ret += "

    UAs may therefore treat all links as unvisited links, or implement"; - ret += " and unvisited links differently.

    "; - ret += "
    The user action pseudo-classes"; - ret += " :hover, :active, and :focus
    "; - ret += "

    Interactive user agents sometimes change the rendering in response"; - ret += " to user actions. Selectors provides"; - ret += " acting on.

    "; - ret += "
      "; - ret += "
    • The :hover pseudo-class applies while the user"; - ret += " element. User agents not that do not support interactive"; - ret += " media do not have to support this pseudo-class. Some conforming"; - ret += " user agents that support interactive"; - ret += " media may not be able to support this pseudo-class (e.g., a pen"; - ret += "
      • "; - ret += "
    • The :active pseudo-class applies while an element"; - ret += "
      • "; - ret += "
    • The :focus pseudo-class applies while an element"; - ret += "
      • "; - ret += "
    "; - ret += "

    There may be document language or implementation specific limits on"; - ret += " which elements can become :active or acquire"; - ret += " :focus.

    "; - ret += "

    These pseudo-classes are not mutually exclusive. An element may"; - ret += " match several pseudo-classes at the same time.

    "; - ret += "

    Selectors doesn't define if the parent of an element that is"; - ret += " ':active' or ':hover' is also in that state.

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += " 
    a:link    /* unvisited links */";
-    ret += "      a:active  /* active links */
    "; - ret += "

    An example of combining dynamic pseudo-classes:

    "; - ret += " 
    a:focus";
-    ret += "      a:focus:hover
    "; - ret += "

    The last selector matches a elements that are in"; - ret += " the pseudo-class :focus and in the pseudo-class :hover.

    "; - ret += "
    "; - ret += "

    Note: An element can be both ':visited'"; - ret += " and ':active' (or ':link' and ':active').

    "; - ret += "

    6.6.2. The target pseudo-class :target

    "; - ret += "

    Some URIs refer to a location within a resource. This kind of URI"; - ret += " identifier (called the fragment identifier).

    "; - ret += "

    URIs with fragment identifiers link to a certain element within the"; - ret += " pointing to an anchor named section_2 in an HTML"; - ret += " document:

    "; - ret += " 
    http://example.com/html/top.html#section_2
    "; - ret += "

    A target element can be represented by the :target"; - ret += " the document has no target element.

    "; - ret += "
    "; - ret += "

    Example:

    "; - ret += " 
    p.note:target
    "; - ret += "

    This selector represents a p element of class"; - ret += " note that is the target element of the referring"; - ret += " URI.

    "; - ret += "
    "; - ret += "
    "; - ret += "

    CSS example:

    "; - ret += "

    Here, the :target pseudo-class is used to make the"; - ret += " target element red and place an image before it, if there is one:

    "; - ret += " 
    *:target { color : red }";
-    ret += "      *:target::before { content : url(target.png) }
    "; - ret += "
    "; - ret += "

    6.6.3. The language pseudo-class :lang

    "; - ret += "

    If the document language specifies how the human language of an"; - ret += " element is determined, it is possible to write selectors that"; - ret += " represent an element based on its language. For example, in HTML [HTML4], the language is determined by a"; - ret += " combination of the lang attribute, the meta"; - ret += " headers). XML uses an attribute called xml:lang, and"; - ret += " the language.

    "; - ret += "

    The pseudo-class :lang(C) represents an element that"; - ret += " :lang() selector is based solely on the identifier C"; - ret += " element's language value, in the same way as if performed by the '|=' operator in attribute"; - ret += " selectors. The identifier C does not have to be a valid language"; - ret += " name.

    "; - ret += "

    C must not be empty. (If it is, the selector is invalid.)

    "; - ret += "

    Note: It is recommended that"; - ret += " documents and protocols indicate language using codes from RFC 3066 [RFC3066] or its successor, and by means of"; - ret += " 'xml:lang' attributes in the case of XML-based documents [XML10]. See "; - ret += " 'FAQ: Two-letter or three-letter language codes.'

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += "

    The two following selectors represent an HTML document that is in"; - ret += " Belgian, French, or German. The two next selectors represent"; - ret += " q quotations in an arbitrary element in Belgian, French,"; - ret += " or German.

    "; - ret += " 
    html:lang(fr-be)";
-    ret += "      :lang(de) > q
    "; - ret += "
    "; - ret += "

    6.6.4. The UI element states pseudo-classes

    "; - ret += "
    The :enabled and :disabled pseudo-classes
    "; - ret += "

    The :enabled pseudo-class allows authors to customize"; - ret += " an enabled input element without also specifying what it"; - ret += " would look like when it was disabled.

    "; - ret += "

    Similar to :enabled, :disabled allows the"; - ret += " element should look.

    "; - ret += "

    Most elements will be neither enabled nor disabled. An element is"; - ret += " presently activate it or transfer focus to it.

    "; - ret += "
    The :checked pseudo-class
    "; - ret += "

    Radio and checkbox elements can be toggled by the user. Some menu"; - ret += " toggled 'on' the :checked pseudo-class applies. The"; - ret += " :checked pseudo-class initially applies to such elements"; - ret += " that have the HTML4 selected and checked"; - ret += " attributes as described in Section"; - ret += " 17.2.1 of HTML4, but of course the user can toggle 'off' such"; - ret += " elements in which case the :checked pseudo-class would no"; - ret += " longer apply. While the :checked pseudo-class is dynamic"; - ret += " on the presence of the semantic HTML4 selected and"; - ret += " checked attributes, it applies to all media."; - ret += "

    The :indeterminate pseudo-class
    "; - ret += "
    "; - ret += "

    Radio and checkbox elements can be toggled by the user, but are"; - ret += " This can be due to an element attribute, or DOM manipulation.

    "; - ret += "

    A future version of this specification may introduce an"; - ret += " :indeterminate pseudo-class that applies to such elements."; - ret += "

    "; - ret += "
    "; - ret += "

    6.6.5. Structural pseudo-classes

    "; - ret += "

    Selectors introduces the concept of structural"; - ret += " pseudo-classes to permit selection based on extra information that"; - ret += " the document tree but cannot be represented by other simple selectors or"; - ret += "

    Note that standalone pieces of PCDATA (text nodes in the DOM) are"; - ret += "

    :root pseudo-class
    "; - ret += "

    The :root pseudo-class represents an element that is"; - ret += " HTML element."; - ret += "

    :nth-child() pseudo-class
    "; - ret += "

    The"; - ret += " :nth-child(an+b)"; - ret += " an+b-1 siblings"; - ret += " before it in the document tree, for a given positive"; - ret += " integer or zero value of n, and has a parent element. In"; - ret += " other words, this matches the bth child of an element after"; - ret += " all the children have been split into groups of a elements"; - ret += " each. For example, this allows the selectors to address every other"; - ret += " of paragraph text in a cycle of four. The a and"; - ret += " b values must be zero, negative integers or positive"; - ret += "

    In addition to this, :nth-child() can take"; - ret += " 'odd' and 'even' as arguments instead."; - ret += " 'odd' has the same signification as 2n+1,"; - ret += " and 'even' has the same signification as 2n."; - ret += "

    "; - ret += "

    Examples:

    "; - ret += " 
    tr:nth-child(2n+1) /* represents every odd row of an HTML table */";
-    ret += "      p:nth-child(4n+4) { color: purple; }
    "; - ret += "
    "; - ret += "

    When a=0, no repeating is used, so for example"; - ret += " :nth-child(0n+5) matches only the fifth child. When"; - ret += " a=0, the an part need not be"; - ret += " :nth-child(b) and the last example simplifies"; - ret += " to :nth-child(5)."; - ret += "

    "; - ret += "

    Examples:

    "; - ret += " 
    foo:nth-child(0n+1)   /* represents an element foo, first child of its parent element */";
-    ret += "      foo:nth-child(1)      /* same */
    "; - ret += "
    "; - ret += "

    When a=1, the number may be omitted from the rule."; - ret += "

    "; - ret += "

    Examples:

    "; - ret += "

    The following selectors are therefore equivalent:

    "; - ret += " 
    bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */";
-    ret += "      bar                   /* same but lower specificity (0,0,1) */
    "; - ret += "
    "; - ret += "

    If b=0, then every ath element is picked. In"; - ret += " such a case, the b part may be omitted."; - ret += "

    "; - ret += "

    Examples:

    "; - ret += " 
    tr:nth-child(2n+0) /* represents every even row of an HTML table */";
-    ret += "      tr:nth-child(2n) /* same */
    "; - ret += "
    "; - ret += "

    If both a and b are equal to zero, the"; - ret += " pseudo-class represents no element in the document tree.

    "; - ret += "

    The value a can be negative, but only the positive"; - ret += " values of an+b, for"; - ret += " n≥0, may represent an element in the document"; - ret += " tree.

    "; - ret += "
    "; - ret += "

    Example:

    "; - ret += " 
    html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */
    "; - ret += "
    "; - ret += "

    When the value b is negative, the '+' character in the"; - ret += " character indicating the negative value of b).

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += " 
    :nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */";
-    ret += "      :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */
    "; - ret += "
    "; - ret += "
    :nth-last-child() pseudo-class
    "; - ret += "

    The :nth-last-child(an+b)"; - ret += " an+b-1 siblings"; - ret += " after it in the document tree, for a given positive"; - ret += " integer or zero value of n, and has a parent element. See"; - ret += " :nth-child() pseudo-class for the syntax of its argument."; - ret += " It also accepts the 'even' and 'odd' values"; - ret += "

    "; - ret += "

    Examples:

    "; - ret += " 
    tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */";
-    ret += "                                    counting from the last one */
    "; - ret += "
    "; - ret += "
    :nth-of-type() pseudo-class
    "; - ret += "

    The :nth-of-type(an+b)"; - ret += " an+b-1 siblings with the same"; - ret += " element name before it in the document tree, for a"; - ret += " given zero or positive integer value of n, and has a"; - ret += " parent element. In other words, this matches the bth child"; - ret += " groups of a elements each. See :nth-child() pseudo-class"; - ret += " 'even' and 'odd' values."; - ret += "

    "; - ret += "

    CSS example:

    "; - ret += "

    This allows an author to alternate the position of floated images:

    "; - ret += " 
    img:nth-of-type(2n+1) { float: right; }";
-    ret += "      img:nth-of-type(2n) { float: left; }
    "; - ret += "
    "; - ret += "
    :nth-last-of-type() pseudo-class
    "; - ret += "

    The :nth-last-of-type(an+b)"; - ret += " an+b-1 siblings with the same"; - ret += " element name after it in the document tree, for a"; - ret += " given zero or positive integer value of n, and has a"; - ret += " parent element. See :nth-child() pseudo-class for the"; - ret += " syntax of its argument. It also accepts the 'even' and 'odd'"; - ret += "

    "; - ret += "

    Example:

    "; - ret += "

    To represent all h2 children of an XHTML"; - ret += " body except the first and last, one could use the"; - ret += " following selector:

    "; - ret += " 
    body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
    "; - ret += "

    In this case, one could also use :not(), although the"; - ret += " selector ends up being just as long:

    "; - ret += " 
    body > h2:not(:first-of-type):not(:last-of-type)
    "; - ret += "
    "; - ret += "
    :first-child pseudo-class
    "; - ret += "

    Same as :nth-child(1). The :first-child"; - ret += "

    "; - ret += "

    Examples:

    "; - ret += "

    The following selector represents a p element that is"; - ret += " the first child of a div element:

    "; - ret += " 
    div > p:first-child
    "; - ret += "

    This selector can represent the p inside the"; - ret += " div of the following fragment:

    "; - ret += " 
    <p> The last P before the note.</p>";
-    ret += "      </div>
    "; - ret += " but cannot represent the second p in the following"; - ret += " 
    <p> The last P before the note.</p>";
-    ret += "      </div>
    "; - ret += "

    The following two selectors are usually equivalent:

    "; - ret += " 
    * > a:first-child /* a is first child of any element */";
-    ret += "      a:first-child /* Same (assuming a is not the root element) */
    "; - ret += "
    "; - ret += "
    :last-child pseudo-class
    "; - ret += "

    Same as :nth-last-child(1). The :last-child"; - ret += "

    "; - ret += "

    Example:

    "; - ret += "

    The following selector represents a list item li that"; - ret += " is the last child of an ordered list ol."; - ret += " 

    ol > li:last-child
    "; - ret += "
    "; - ret += "
    :first-of-type pseudo-class
    "; - ret += "

    Same as :nth-of-type(1). The :first-of-type"; - ret += "

    "; - ret += "

    Example:

    "; - ret += "

    The following selector represents a definition title"; - ret += " dt inside a definition list dl, this"; - ret += " dt being the first of its type in the list of children of"; - ret += " its parent element.

    "; - ret += " 
    dl dt:first-of-type
    "; - ret += "

    It is a valid description for the first two dt"; - ret += " elements in the following example but not for the third one:

    "; - ret += " 
    <dl>";
-    ret += "      </dl>
    "; - ret += "
    "; - ret += "
    :last-of-type pseudo-class
    "; - ret += "

    Same as :nth-last-of-type(1). The"; - ret += " :last-of-type pseudo-class represents an element that is"; - ret += " element.

    "; - ret += "
    "; - ret += "

    Example:

    "; - ret += "

    The following selector represents the last data cell"; - ret += " td of a table row.

    "; - ret += " 
    tr > td:last-of-type
    "; - ret += "
    "; - ret += "
    :only-child pseudo-class
    "; - ret += "

    Represents an element that has a parent element and whose parent"; - ret += " :first-child:last-child or"; - ret += " :nth-child(1):nth-last-child(1), but with a lower"; - ret += " specificity.

    "; - ret += "
    :only-of-type pseudo-class
    "; - ret += "

    Represents an element that has a parent element and whose parent"; - ret += " as :first-of-type:last-of-type or"; - ret += " :nth-of-type(1):nth-last-of-type(1), but with a lower"; - ret += " specificity.

    "; - ret += "
    :empty pseudo-class
    "; - ret += "

    The :empty pseudo-class represents an element that has"; - ret += " empty or not.

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += "

    p:empty is a valid representation of the following fragment:"; - ret += "

    "; - ret += " 
    <p></p>
    "; - ret += "

    foo:empty is not a valid representation for the"; - ret += " following fragments:

    "; - ret += " 
    <foo>bar</foo>
    "; - ret += " 
    <foo><bar>bla</bar></foo>
    "; - ret += " 
    <foo>this is not <bar>:empty</bar></foo>
    "; - ret += "
    "; - ret += "

    6.6.6. Blank

    "; - ret += " "; - ret += "

    This section intentionally left blank.

    "; - ret += " "; - ret += "

    6.6.7. The negation pseudo-class

    "; - ret += "

    The negation pseudo-class, :not(X), is a"; - ret += " functional notation taking a simple"; - ret += " selector (excluding the negation pseudo-class itself and"; - ret += " "; - ret += "

    "; - ret += "

    Examples:

    "; - ret += "

    The following CSS selector matches all button"; - ret += " elements in an HTML document that are not disabled.

    "; - ret += " 
    button:not([DISABLED])
    "; - ret += "

    The following selector represents all but FOO"; - ret += " elements.

    "; - ret += " 
    *:not(FOO)
    "; - ret += "

    The following group of selectors represents all HTML elements"; - ret += " except links.

    "; - ret += " 
    html|*:not(:link):not(:visited)
    "; - ret += "
    "; - ret += "

    Default namespace declarations do not affect the argument of the"; - ret += " type selector.

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += "

    Assuming that the default namespace is bound to"; - ret += " elements that are not in that namespace:

    "; - ret += " 
    *|*:not(*)
    "; - ret += "

    The following CSS selector matches any element being hovered,"; - ret += " rule when they are being hovered.

    "; - ret += " 
    *|*:not(:hover)
    "; - ret += "
    "; - ret += "

    Note: the :not() pseudo allows"; - ret += " useless selectors to be written. For instance :not(*|*),"; - ret += " which represents no element at all, or foo:not(bar),"; - ret += " which is equivalent to foo but with a higher"; - ret += " specificity.

    "; - ret += "

    7. Pseudo-elements

    "; - ret += "

    Pseudo-elements create abstractions about the document tree beyond"; - ret += " source document (e.g., the ::before and"; - ret += " ::after pseudo-elements give access to generated"; - ret += " content).

    "; - ret += "

    A pseudo-element is made of two colons (::) followed"; - ret += " by the name of the pseudo-element.

    "; - ret += "

    This :: notation is introduced by the current document"; - ret += " :first-line, :first-letter,"; - ret += " :before and :after). This compatibility is"; - ret += " not allowed for the new pseudo-elements introduced in CSS level 3.

    "; - ret += "

    Only one pseudo-element may appear per selector, and if present it"; - ret += " must appear after the sequence of simple selectors that represents the"; - ret += " subjects of the selector. A"; - ret += " pesudo-elements per selector.

    "; - ret += "

    7.1. The ::first-line pseudo-element

    "; - ret += "

    The ::first-line pseudo-element describes the contents"; - ret += "

    "; - ret += "

    CSS example:

    "; - ret += " 
    p::first-line { text-transform: uppercase }
    "; - ret += "

    The above rule means 'change the letters of the first line of every"; - ret += " paragraph to uppercase'.

    "; - ret += "
    "; - ret += "

    The selector p::first-line does not match any real"; - ret += " agents will insert at the beginning of every paragraph.

    "; - ret += "

    Note that the length of the first line depends on a number of"; - ret += " an ordinary HTML paragraph such as:

    "; - ret += " 
          <P>This is a somewhat long HTML ";
-    ret += "
    "; - ret += "

    the lines of which happen to be broken as follows:"; - ret += " 

          THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT";
-    ret += "
    "; - ret += "

    This paragraph might be 'rewritten' by user agents to include the"; - ret += " fictional tag sequence for ::first-line. This"; - ret += " fictional tag sequence helps to show how properties are inherited.

    "; - ret += " 
          <P><P::first-line> This is a somewhat long HTML ";
-    ret += "      paragraph that </P::first-line> will be broken into several";
-    ret += "
    "; - ret += "

    If a pseudo-element breaks up a real element, the desired effect"; - ret += " with a span element:

    "; - ret += " 
          <P><SPAN class='test'> This is a somewhat long HTML";
-    ret += "      lines.</SPAN> The first line will be identified";
-    ret += "
    "; - ret += "

    the user agent could simulate start and end tags for"; - ret += " span when inserting the fictional tag sequence for"; - ret += " ::first-line."; - ret += " 

          <P><P::first-line><SPAN class='test'> This is a";
-    ret += "      paragraph that will </SPAN></P::first-line><SPAN";
-    ret += "          class='test'> be";
-    ret += "      lines.</SPAN> The first line will be identified";
-    ret += "
    "; - ret += "

    In CSS, the ::first-line pseudo-element can only be"; - ret += " or a table-cell.

    "; - ret += "

    The 'first formatted line' of an"; - ret += " line of the div in <DIV><P>This"; - ret += " line...</P></DIV> is the first line of the p"; - ret += " that both p and div are block-level)."; - ret += "

    The first line of a table-cell or inline-block cannot be the first"; - ret += " formatted line of an ancestor element. Thus, in <DIV><P"; - ret += " etcetera</DIV> the first formatted line of the"; - ret += " div is not the line 'Hello'."; - ret += "

    Note that the first line of the p in this"; - ret += " fragment: <p><br>First... doesn't contain any"; - ret += " letters (assuming the default style for br in HTML"; - ret += "

    A UA should act as if the fictional start tags of the"; - ret += " ::first-line pseudo-elements were nested just inside the"; - ret += " is an example. The fictional tag sequence for

    "; - ret += " 
          <DIV>";
-    ret += "
    "; - ret += "

    is

    "; - ret += " 
          <DIV>";
-    ret += "
    "; - ret += "

    The ::first-line pseudo-element is similar to an"; - ret += " following properties apply to a ::first-line"; - ret += " properties as well.

    "; - ret += "

    7.2. The ::first-letter pseudo-element

    "; - ret += "

    The ::first-letter pseudo-element represents the first"; - ret += " is 'none'; otherwise, it is similar to a floated element.

    "; - ret += "

    In CSS, these are the properties that apply to ::first-letter"; - ret += " of the letter, unlike for normal elements.

    "; - ret += "
    "; - ret += "

    Example:

    "; - ret += "

    This example shows a possible rendering of an initial cap. Note"; - ret += " ::first-letter"; - ret += " fictional start tag of the first letter is inside the span,"; - ret += " the font weight of the first letter is normal, not bold as the span:"; - ret += " 

          p { line-height: 1.1 }";
-    ret += "
    "; - ret += "
    "; - ret += "

    Image illustrating the ::first-letter pseudo-element"; - ret += "

    "; - ret += "
    "; - ret += "
    "; - ret += "

    The following CSS will make a drop cap initial letter span about two"; - ret += " lines:

    "; - ret += " 
          <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>";
-    ret += "
    "; - ret += "

    This example might be formatted as follows:

    "; - ret += "
    "; - ret += "

    Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements"; - ret += "

    "; - ret += "
    "; - ret += "

    The fictional tag sequence is:

    "; - ret += " 
          <P>";
-    ret += "
    "; - ret += "

    Note that the ::first-letter pseudo-element tags abut"; - ret += " block element.

    "; - ret += "

    In order to achieve traditional drop caps formatting, user agents"; - ret += " glyph outline may be taken into account when formatting.

    "; - ret += "

    Punctuation (i.e, characters defined in Unicode in the 'open' (Ps),"; - ret += " be included. [UNICODE]

    "; - ret += "
    "; - ret += "

    Quotes that precede the"; - ret += " first letter should be included.

    "; - ret += "
    "; - ret += "

    The ::first-letter also applies if the first letter is"; - ret += " money.'

    "; - ret += "

    In CSS, the ::first-letter pseudo-element applies to"; - ret += " elements. A future version of this specification"; - ret += " types.

    "; - ret += "

    The ::first-letter pseudo-element can be used with all"; - ret += " the element, even if that first text is in a descendant.

    "; - ret += "
    "; - ret += "

    Example:

    "; - ret += "

    The fictional tag sequence for this HTMLfragment:"; - ret += " 

    <div>";
-    ret += "      <p>The first text.
    "; - ret += "

    is:"; - ret += " 

    <div>";
-    ret += "      <p><div::first-letter><p::first-letter>T</...></...>he first text.
    "; - ret += "
    "; - ret += "

    The first letter of a table-cell or inline-block cannot be the"; - ret += " first letter of an ancestor element. Thus, in <DIV><P"; - ret += " etcetera</DIV> the first letter of the div is"; - ret += " letter 'H'. In fact, the div doesn't have a first letter."; - ret += "

    The first letter must occur on the first formatted line. For example, in"; - ret += " this fragment: <p><br>First... the first line"; - ret += " doesn't contain any letters and ::first-letter doesn't"; - ret += " match anything (assuming the default style for br in HTML"; - ret += "

    In CSS, if an element is a list item ('display: list-item'), the"; - ret += " ::first-letter applies to the first letter in the"; - ret += " ::first-letter on list items with 'list-style-position:"; - ret += " inside'. If an element has ::before or"; - ret += " ::after content, the ::first-letter applies"; - ret += " to the first letter of the element including that content."; - ret += "

    "; - ret += "

    Example:

    "; - ret += "

    After the rule 'p::before {content: 'Note: '}', the selector"; - ret += " 'p::first-letter' matches the 'N' of 'Note'.

    "; - ret += "
    "; - ret += "

    Some languages may have specific rules about how to treat certain"; - ret += " considered within the ::first-letter pseudo-element."; - ret += "

    If the letters that would form the ::first-letter are not in the"; - ret += " same element, such as ''T' in <p>'<em>T..., the UA"; - ret += " both elements, or simply not create a pseudo-element.

    "; - ret += "

    Similarly, if the first letter(s) of the block are not at the start"; - ret += "

    "; - ret += "

    Example:

    "; - ret += "

    The following example illustrates"; - ret += " paragraph will be 'red'.

    "; - ret += " 
    p { color: red; font-size: 12pt }";
-    ret += "      <P>Some text that ends up on two lines</P>
    "; - ret += "

    Assuming that a line break will occur before the word 'ends', the"; - ret += " fictional tag"; - ret += " sequence for this fragment might be:

    "; - ret += " 
    <P>";
-    ret += "      </P>
    "; - ret += "

    Note that the ::first-letter element is inside the ::first-line"; - ret += " element. Properties set on ::first-line are inherited by"; - ret += " ::first-letter, but are overridden if the same property is"; - ret += " ::first-letter.

    "; - ret += "
    "; - ret += "

    7.3. The ::selection"; - ret += " pseudo-element

    "; - ret += "

    The ::selection pseudo-element applies to the portion"; - ret += " field. This pseudo-element should not be confused with the :checked pseudo-class (which used to be"; - ret += " named :selected)"; - ret += "

    Although the ::selection pseudo-element is dynamic in"; - ret += " [CSS21]) which was originally rendered to a"; - ret += " ::selection state to that other medium, and have all the"; - ret += " required — UAs may omit the ::selection"; - ret += "

    These are the CSS properties that apply to ::selection"; - ret += " ::selection may be ignored."; - ret += "

    7.4. The ::before and ::after pseudo-elements

    "; - ret += "

    The ::before and ::after pseudo-elements"; - ret += " content. They are explained in CSS 2.1 [CSS21].

    "; - ret += "

    When the ::first-letter and ::first-line"; - ret += " pseudo-elements are combined with ::before and"; - ret += " ::after, they apply to the first letter or line of the"; - ret += " element including the inserted text.

    "; - ret += "

    8. Combinators

    "; - ret += "

    8.1. Descendant combinator

    "; - ret += "

    At times, authors may want selectors to describe an element that is"; - ret += " EM element that is contained within an H1"; - ret += " descendant combinator is white space that"; - ret += " separates two sequences of simple selectors. A selector of the form"; - ret += " 'A B' represents an element B that is an"; - ret += " arbitrary descendant of some ancestor element A."; - ret += "

    "; - ret += "

    Examples:

    "; - ret += "

    For example, consider the following selector:

    "; - ret += " 
    h1 em
    "; - ret += "

    It represents an em element being the descendant of"; - ret += " an h1 element. It is a correct and valid, but partial,"; - ret += " description of the following fragment:

    "; - ret += " 
    <h1>This <span class='myclass'>headline";
-    ret += "      is <em>very</em> important</span></h1>
    "; - ret += "

    The following selector:

    "; - ret += " 
    div * p
    "; - ret += "

    represents a p element that is a grandchild or later"; - ret += " descendant of a div element. Note the whitespace on"; - ret += " of the P.

    "; - ret += "

    The following selector, which combines descendant combinators and"; - ret += " attribute selectors, represents an"; - ret += " element that (1) has the href attribute set and (2) is"; - ret += " inside a p that is itself inside a div:

    "; - ret += " 
    div p *[href]
    "; - ret += "
    "; - ret += "

    8.2. Child combinators

    "; - ret += "

    A child combinator describes a childhood relationship"; - ret += " 'greater-than sign' (>) character and"; - ret += " separates two sequences of simple selectors."; - ret += "

    "; - ret += "

    Examples:

    "; - ret += "

    The following selector represents a p element that is"; - ret += " child of body:

    "; - ret += " 
    body > p
    "; - ret += "

    The following example combines descendant combinators and child"; - ret += " combinators.

    "; - ret += " 
    div ol>li p
    "; - ret += " "; - ret += "

    It represents a p element that is a descendant of an"; - ret += " li element; the li element must be the"; - ret += " child of an ol element; the ol element must"; - ret += " be a descendant of a div. Notice that the optional white"; - ret += " space around the '>' combinator has been left out.

    "; - ret += "
    "; - ret += "

    For information on selecting the first child of an element, please"; - ret += " see the section on the :first-child pseudo-class"; - ret += " above.

    "; - ret += "

    8.3. Sibling combinators

    "; - ret += "

    There are two different sibling combinators: the adjacent sibling"; - ret += " considering adjacency of elements.

    "; - ret += "

    8.3.1. Adjacent sibling combinator"; - ret += "

    "; - ret += "

    The adjacent sibling combinator is made of the 'plus"; - ret += " sign' (U+002B, +) character that separates two"; - ret += " sequences of simple selectors. The elements represented by the two"; - ret += " represented by the second one.

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += "

    The following selector represents a p element"; - ret += " immediately following a math element:

    "; - ret += " 
    math + p
    "; - ret += "

    The following selector is conceptually similar to the one in the"; - ret += " adds a constraint to the h1 element, that it must have"; - ret += " class='opener':

    "; - ret += " 
    h1.opener + h2
    "; - ret += "
    "; - ret += "

    8.3.2. General sibling combinator"; - ret += "

    "; - ret += "

    The general sibling combinator is made of the 'tilde'"; - ret += " (U+007E, ~) character that separates two sequences of"; - ret += " simple selectors. The elements represented by the two sequences share"; - ret += " represented by the second one.

    "; - ret += "
    "; - ret += "

    Example:

    "; - ret += " 
    h1 ~ pre
    "; - ret += "

    represents a pre element following an h1. It"; - ret += " is a correct and valid, but partial, description of:

    "; - ret += " 
    <h1>Definition of the function a</h1>";
-    ret += "      <pre>function a(x) = 12x/13.5</pre>
    "; - ret += "
    "; - ret += "

    9. Calculating a selector's specificity

    "; - ret += "

    A selector's specificity is calculated as follows:

    "; - ret += "
      "; - ret += "
    • count the number of ID selectors in the selector (= a)
      • "; - ret += "
    • count the number of class selectors, attributes selectors, and"; - ret += "
      • "; - ret += "
    • count the number of element names in the selector (= c)
      • "; - ret += "
    • ignore pseudo-elements
      • "; - ret += "
    "; - ret += "

    Selectors inside the negation pseudo-class"; - ret += " a pseudo-class.

    "; - ret += "

    Concatenating the three numbers a-b-c (in a number system with a"; - ret += " large base) gives the specificity.

    "; - ret += "
    "; - ret += "

    Examples:

    "; - ret += " 
    *               /* a=0 b=0 c=0 -> specificity =   0 */";
-    ret += "
    "; - ret += "
    "; - ret += "

    Note: the specificity of the styles"; - ret += " specified in an HTML style attribute is described in CSS"; - ret += " 2.1. [CSS21].

    "; - ret += "

    10. The grammar of Selectors

    "; - ret += "

    10.1. Grammar

    "; - ret += "

    The grammar below defines the syntax of Selectors. It is globally"; - ret += " shorthand notations beyond Yacc (see [YACC])"; - ret += " are used:

    "; - ret += "
      "; - ret += "
    • *: 0 or more"; - ret += "
    • +: 1 or more"; - ret += "
    • ?: 0 or 1"; - ret += "
    • |: separates alternatives"; - ret += "
    • [ ]: grouping
      • "; - ret += "
    "; - ret += "

    The productions are:

    "; - ret += " 
    selectors_group";
-    ret += "        ;
    "; - ret += "

    10.2. Lexical scanner

    "; - ret += "

    The following is the tokenizer, written in Flex (see"; - ret += " [FLEX]) notation. The tokenizer is"; - ret += " case-insensitive.

    "; - ret += "

    The two occurrences of '\377' represent the highest character"; - ret += " possible code point in Unicode/ISO-10646. [UNICODE]

    "; - ret += " 
    %option case-insensitive";
-    ret += "      .                return *yytext;
    "; - ret += "

    11. Namespaces and down-level clients

    "; - ret += "

    An important issue is the interaction of CSS selectors with XML"; - ret += " to construct a CSS style sheet which will properly match selectors in"; - ret += " is possible to construct a style sheet in which selectors would match"; - ret += " elements and attributes correctly.

    "; - ret += "

    It should be noted that a down-level CSS client will (if it"; - ret += " @namespace at-rules, as well as all style rules that make"; - ret += " use of namespace qualified element type or attribute selectors. The"; - ret += " than possibly match them incorrectly.

    "; - ret += "

    The use of default namespaces in CSS makes it possible to write"; - ret += " element type selectors that will function in both namespace aware CSS"; - ret += " down-level clients may incorrectly match selectors against XML"; - ret += " elements in other namespaces.

    "; - ret += "

    The following are scenarios and examples in which it is possible to"; - ret += " that do not implement this proposal.

    "; - ret += "
      "; - ret += "
    1. "; - ret += "

      The XML document does not use namespaces.

      "; - ret += "
        "; - ret += "
      • In this case, it is obviously not necessary to declare or use"; - ret += " attribute selectors will function adequately in a down-level"; - ret += "
        • "; - ret += "
      • In a CSS namespace aware client, the default behavior of"; - ret += " element selectors matching without regard to namespace will"; - ret += " present. However, the use of specific element type selectors"; - ret += " match only elements that have no namespace ('|name')"; - ret += " will guarantee that selectors will match only XML elements that"; - ret += "
        • "; - ret += "
      "; - ret += "
      2. "; - ret += "
    2. "; - ret += "

      The XML document defines a single, default namespace used"; - ret += " names.

      "; - ret += "
        "; - ret += "
      • In this case, a down-level client will function as if"; - ret += " element type and attribute selectors will match against all"; - ret += "
        • "; - ret += "
      "; - ret += "
      3. "; - ret += "
    3. "; - ret += "

      The XML document does not use a default namespace, all"; - ret += " to the same URI).

      "; - ret += "
        "; - ret += "
      • In this case, the down-level client will view and match"; - ret += " element type and attribute selectors based on their fully"; - ret += " qualified name, not the local part as outlined in the Type selectors and Namespaces"; - ret += " selectors may be declared using an escaped colon"; - ret += " '\\:'"; - ret += " 'html\\:h1' will match"; - ret += " <html:h1>. Selectors using the qualified name"; - ret += "
        • "; - ret += "
      • Note that selectors declared in this fashion will"; - ret += " only match in down-level clients. A CSS namespace aware"; - ret += " client will match element type and attribute selectors based on"; - ret += " the name's local part. Selectors declared with the fully"; - ret += "
        • "; - ret += "
      "; - ret += "
      4. "; - ret += "
    "; - ret += "

    In other scenarios: when the namespace prefixes used in the XML are"; - ret += " different namespace URIs within the same document, or in"; - ret += " a CSS and XML namespace aware client.

    "; - ret += "

    12. Profiles

    "; - ret += "

    Each specification using Selectors must define the subset of W3C"; - ret += " Selectors it allows and excludes, and describe the local meaning of"; - ret += " all the components of that subset.

    "; - ret += "

    Non normative examples:"; - ret += "

    "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
    Selectors profile
    SpecificationCSS level 1
    Acceptstype selectors
    class selectors
    ID selectors
    :link,"; - ret += " :visited and :active pseudo-classes
    descendant combinator"; - ret += "
    ::first-line and ::first-letter pseudo-elements"; - ret += "
    Excludes"; - ret += "

    universal selector
    attribute selectors
    :hover and"; - ret += " pseudo-classes
    :target pseudo-class
    :lang()"; - ret += " pseudo-class
    all UI"; - ret += " element states pseudo-classes
    all structural"; - ret += " pseudo-classes
    negation pseudo-class
    all"; - ret += " UI element fragments pseudo-elements
    ::before and ::after"; - ret += " pseudo-elements
    child combinators
    sibling combinators"; - ret += "

    namespaces

    Extra constraintsonly one class selector allowed per sequence of simple"; - ret += " selectors"; - ret += "
    "; - ret += "

    "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
    Selectors profile
    SpecificationCSS level 2
    Acceptstype selectors
    universal selector
    attribute presence and"; - ret += " values selectors
    class selectors
    ID selectors
    :link,"; - ret += "
    descendant combinator
    child combinator
    adjacent"; - ret += " combinator
    ::first-line and ::first-letter"; - ret += " pseudo-elements
    ::before"; - ret += "
    Excludes"; - ret += "

    content selectors
    substring matching attribute"; - ret += " selectors
    :target pseudo-classes
    all UI element"; - ret += " states pseudo-classes
    all structural pseudo-classes other"; - ret += " than :first-child
    negation pseudo-class
    all UI element"; - ret += " fragments pseudo-elements
    general sibling combinators"; - ret += "

    namespaces

    Extra constraintsmore than one class selector per sequence of simple selectors"; - ret += "
    "; - ret += "

    In CSS, selectors express pattern matching rules that determine which"; - ret += "

    The following selector (CSS level 2) will match all anchors a"; - ret += " with attribute name set inside a section 1 header"; - ret += " h1:"; - ret += " 

    h1 a[name]
    "; - ret += "

    All CSS declarations attached to such a selector are applied to elements"; - ret += " matching it.

    "; - ret += "
    "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
    Selectors profile
    SpecificationSTTS 3
    Accepts"; - ret += "

    type selectors
    universal selectors
    attribute"; - ret += " selectors
    class"; - ret += " selectors
    ID selectors
    all structural"; - ret += " pseudo-classes
    "; - ret += "

    namespaces

    Excludesnon-accepted pseudo-classes
    pseudo-elements
    Extra constraintssome selectors and combinators are not allowed in fragment"; - ret += "
    "; - ret += "

    Selectors can be used in STTS 3 in two different"; - ret += "

      "; - ret += "
    1. a selection mechanism equivalent to CSS selection mechanism:"; - ret += "
    2. fragment descriptions that appear on the right side of declarations."; - ret += "
      3. "; - ret += "
    "; - ret += "
    "; - ret += "

    13. Conformance and requirements

    "; - ret += "

    This section defines conformance with the present specification only."; - ret += "

    The inability of a user agent to implement part of this specification due to"; - ret += "

    All specifications reusing Selectors must contain a Profile listing the"; - ret += " subset of Selectors it accepts or excludes, and describing the constraints"; - ret += "

    Invalidity is caused by a parsing error, e.g. an unrecognized token or a"; - ret += "

    User agents must observe the rules for handling parsing errors:"; - ret += "

      "; - ret += "
    • a simple selector containing an undeclared namespace prefix is invalid"; - ret += "
      • "; - ret += "
    • a selector containing an invalid simple selector, an invalid combinator"; - ret += "
      • "; - ret += "
    • a group of selectors containing an invalid selector is invalid.
      • "; - ret += "
    "; - ret += "

    Specifications reusing Selectors must define how to handle parsing"; - ret += " used is dropped.)

    "; - ret += " "; - ret += "

    14. Tests

    "; - ret += "

    This specification has a test"; - ret += " suite allowing user agents to verify their basic conformance to"; - ret += " and does not cover all possible combined cases of Selectors.

    "; - ret += "

    15. Acknowledgements

    "; - ret += "

    The CSS working group would like to thank everyone who has sent"; - ret += " comments on this specification over the years.

    "; - ret += "

    The working group would like to extend special thanks to Donna"; - ret += " the final editorial review.

    "; - ret += "

    16. References

    "; - ret += "
    "; - ret += "
    [CSS1]"; - ret += "
    Bert Bos, HÃ¥kon Wium Lie; 'Cascading"; - ret += " Style Sheets, level 1', W3C Recommendation, 17 Dec 1996, revised"; - ret += "
    (http://www.w3.org/TR/REC-CSS1)"; - ret += "
    [CSS21]"; - ret += "
    Bert Bos, Tantek Çelik, Ian Hickson, Håkon"; - ret += " Wium Lie, editors; 'Cascading Style Sheets, level 2 revision"; - ret += " 1', W3C Working Draft, 13 June 2005"; - ret += "
    (http://www.w3.org/TR/CSS21)"; - ret += "
    [CWWW]"; - ret += "
    Martin J. Dürst, François Yergeau,"; - ret += " Misha Wolf, Asmus Freytag, Tex Texin, editors; 'Character Model"; - ret += " for the World Wide Web', W3C Recommendation, 15 February 2005"; - ret += "
    (http://www.w3.org/TR/charmod/)"; - ret += "
    [FLEX]"; - ret += "
    'Flex: The Lexical Scanner"; - ret += " Generator', Version 2.3.7, ISBN 1882114213"; - ret += "
    [HTML4]"; - ret += "
    Dave Ragget, Arnaud Le Hors, Ian Jacobs,"; - ret += " editors; 'HTML 4.01 Specification', W3C Recommendation, 24"; - ret += "
    "; - ret += " (http://www.w3.org/TR/html4/)"; - ret += "
    [MATH]"; - ret += "
    Patrick Ion, Robert Miner, editors; 'Mathematical"; - ret += " Markup Language (MathML) 1.01', W3C Recommendation, revision of 7"; - ret += "
    (http://www.w3.org/TR/REC-MathML/)"; - ret += "
    [RFC3066]"; - ret += "
    H. Alvestrand; 'Tags for the"; - ret += " Identification of Languages', Request for Comments 3066, January"; - ret += "
    (http://www.ietf.org/rfc/rfc3066.txt)"; - ret += "
    [STTS]"; - ret += "
    Daniel Glazman; 'Simple Tree Transformation"; - ret += " Sheets 3', Electricité de France, submission to the W3C,"; - ret += "
    (http://www.w3.org/TR/NOTE-STTS3)"; - ret += "
    [SVG]"; - ret += "
    Jon Ferraiolo, 藤沢 淳, Dean"; - ret += " Jackson, editors; 'Scalable Vector Graphics (SVG) 1.1"; - ret += " Specification', W3C Recommendation, 14 January 2003"; - ret += "
    (http://www.w3.org/TR/SVG/)"; - ret += "
    [UNICODE]
    "; - ret += "
    The Unicode"; - ret += " Standard, Version 4.1, The Unicode Consortium. Boston, MA,"; - ret += " Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by Unicode"; - ret += " 4.0.1 and Unicode"; - ret += " 4.1.0."; - ret += "
    (http://www.unicode.org/versions/)"; - ret += "
    "; - ret += "
    [XML10]"; - ret += "
    Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,"; - ret += " Eve Maler, François Yergeau, editors; 'Extensible Markup"; - ret += " Language (XML) 1.0 (Third Edition)', W3C Recommendation, 4"; - ret += "
    (http://www.w3.org/TR/REC-xml/)"; - ret += "
    [XMLNAMES]"; - ret += "
    Tim Bray, Dave Hollander, Andrew Layman,"; - ret += " editors; 'Namespaces in XML', W3C Recommendation, 14"; - ret += "
    (http://www.w3.org/TR/REC-xml-names/)"; - ret += "
    [YACC]"; - ret += "
    S. C. Johnson; 'YACC — Yet another"; - ret += " compiler compiler', Technical Report, Murray Hill, 1975"; - ret += "
    ';
    "; - ret += " 1"; - ret += " 2"; - $(e).html(ret); - } - -} +/* + * Copyright 2011, The gwtquery team. + * + * 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. + */ +package gwtquery.samples.client; + +import static com.google.gwt.query.client.GQuery.$; +import static com.google.gwt.query.client.GQuery.document; + +import java.util.ArrayList; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.core.client.GWT; +import com.google.gwt.core.client.Scheduler; +import com.google.gwt.core.client.Scheduler.RepeatingCommand; +import com.google.gwt.dom.client.Element; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.GQuery; +import com.google.gwt.query.client.Selectors.DeferredSelector; +import com.google.gwt.query.client.impl.SelectorEngineCssToXPath; +import com.google.gwt.query.client.impl.SelectorEngineImpl; +import com.google.gwt.query.client.impl.SelectorEngineNative; +import com.google.gwt.query.client.impl.SelectorEngineNativeIE8; +import com.google.gwt.query.client.impl.SelectorEngineNativeMin; +import com.google.gwt.query.client.impl.SelectorEngineNativeMinIE8; +import com.google.gwt.query.client.impl.SelectorEngineSizzle; +import com.google.gwt.query.client.impl.SelectorEngineSizzleIE; +import com.google.gwt.query.client.impl.research.SelectorEngineJS; +import com.google.gwt.query.client.impl.research.SelectorEngineSizzleGwt; +import com.google.gwt.query.client.impl.research.SelectorEngineXPath; +import com.google.gwt.user.client.DOM; +import com.google.gwt.user.client.Window; +import com.google.gwt.user.client.ui.FlexTable; +import com.google.gwt.user.client.ui.HTML; +import com.google.gwt.user.client.ui.PopupPanel; +import com.google.gwt.user.client.ui.RootPanel; + +/** + * Module to test and compare the performance of each Js-Library and + * each Gwt selector implementation. + * + * It is possible to select which benchmarks to run. Be aware that + * not all of them work in all browsers. + * By default selected options are gwt_compiled, gwt_dynamic, jquery and prototype. + * + * It uses iframes to avoid interferences when updating the document. + * By default the iframe is shared for all libraries, but you can use + * a different one for each benchmark appending the parameter share=false. + * + * Parameters available in the url + * share=false Use different iframes for each bench + * min=200 Minimum time running each selector + * track=false Don't draw the horse race + * ask=false Run default benchmarks, don't ask the user. + */ +public class GwtQueryBenchModule implements EntryPoint { + + public interface Benchmark { + String getId(); + String getName(); + int runSelector(DeferredSelector dq); + } + + /** + * Benchmark for dynamic selectors + */ + private class DynamicBenchmark implements Benchmark { + + protected SelectorEngineImpl engine; + private String id; + + DynamicBenchmark(SelectorEngineImpl engine, String name) { + this.id = name; + this.engine = engine; + } + + public String getId() { + return id; + } + + public String getName() { + String name = engine.getClass().getName().replaceAll("^.*\\.", ""); + return name; + } + + public int runSelector(DeferredSelector dq) { + return engine.select(dq.getSelector(), gwtiframe).getLength(); + } + } + + /** + * Benchmark for the compiled selectors + */ + private class GQueryCompiledBenchmark implements Benchmark { + + String id; + String name; + + GQueryCompiledBenchmark(String id) { + this.id = id; + } + + public String getId() { + return id; + } + + public String getName() { + if (name == null) { + MySelectors s = GWT.create(MySelectors.class); + s.body(document); + name = s.getClass().getName().replaceAll("^.*_", ""); + if (s.isDegradated()) { + name += " [degradated]"; + } + } + return name; + } + + public int runSelector(DeferredSelector dq) { + return dq.runSelector(gwtiframe).getLength(); + } + } + + /** + * Benchmark for external libraries + */ + private class IframeBenchmark implements Benchmark { + private String id; + + IframeBenchmark(String name) { + this.id = name; + } + + public String getId() { + return id; + } + + public String getName() { + return id; + } + + public int runSelector(DeferredSelector dq) { + return runSelector(id, dq.getSelector()); + } + + public native int runSelector(String id, String selector) /*-{ + return eval("$wnd." + id + "benchmark('" + selector + "')"); + }-*/; + } + + public static native void exportIframeReadyCallback(GwtQueryBenchModule bench) /*-{ + $wnd.iframebench_ready_callback = function() { + bench.@gwtquery.samples.client.GwtQueryBenchModule::iframeReadyCallback()(); + }; + }-*/; + + private boolean ask = true; + + private Function askBenchMarks = new Function(){ + public void f() { + if (!running && ask) { + selectPanel.center(); + } else { + runBenchMarks.f(); + } + } + }; + + /** + * List of available benchmarks. + */ + private final Benchmark[] benchmarks = new Benchmark[] { + new GQueryCompiledBenchmark("gwt_compiled"), + new DynamicBenchmark((SelectorEngineImpl)GWT.create(SelectorEngineImpl.class), "gwt_dynamic"), + new DynamicBenchmark(new SelectorEngineSizzle(), "gwt_sizzle_jsni"), + new DynamicBenchmark(new SelectorEngineSizzleIE(), "gwt_sizzle_ie_jsni"), + new DynamicBenchmark(new SelectorEngineSizzleGwt(), "gwt_sizzle_java"), + new DynamicBenchmark(new SelectorEngineJS(), "gwt_domassist_java"), + new DynamicBenchmark(new SelectorEngineXPath(), "gwt_xpath"), + new DynamicBenchmark(new SelectorEngineCssToXPath(), "gwt_css2xpath"), + new DynamicBenchmark(new SelectorEngineNative(), "gwt_native"), + new DynamicBenchmark(new SelectorEngineNativeIE8(), "gwt_nativeIE8"), + new DynamicBenchmark(new SelectorEngineNativeMin(), "gwt_native_min"), + new DynamicBenchmark(new SelectorEngineNativeMinIE8(), "gwt_native_minIE8"), + new IframeBenchmark("jquery"), + new IframeBenchmark("dojo"), + new IframeBenchmark("prototype"), + new IframeBenchmark("sizzle"), + new IframeBenchmark("domassistant") + }; + /** + * Pre-selected benchmarks + */ + private String[] defaultBenchmarks = {"gwt_compiled", "gwt_dynamic", "jquery", "prototype", "dojo"}; + + private DeferredSelector ds[]; + + private FlexTable grid = new FlexTable(); + + private Element gwtiframe; + private int min_time = 200; + private boolean running = false; + /** + * Main function to run all the selected benchmarks + */ + private Function runBenchMarks = new Function() { + public void f() { + + // Force to stop the race + if (running) { + running = false; + $("#startrace").text("Run Again"); + return; + } + running = true; + + selectedBenchmarks = readBenchmarkSelection(); + selectPanel.hide(); + $("#startrace").text("Stop the race"); + $("#results").show(); + + initResultsTable(ds, selectedBenchmarks); + initTrack(selectedBenchmarks); + + Scheduler.get().scheduleIncremental(new RepeatingCommand() { + int benchMarkNumber = 0; + int numCalls = 0; + int row = 0; + double runTimes[] = new double[selectedBenchmarks.length]; + int selectorNumber = 0; + double totalTimes[] = new double[selectedBenchmarks.length]; + int winner = -1; + double winTime = Double.MAX_VALUE; + + public boolean execute() { + // The race has been stopped + if (!running) { + return false; + } + if (benchMarkNumber >= selectedBenchmarks.length) { + benchMarkNumber = 0; + numCalls = 0; + row ++; + + moveHorses(selectedBenchmarks, row, totalTimes); + setResultClass(selectorNumber, winner); + + selectorNumber++; + winner = -1; + winTime = Double.MAX_VALUE; + if (selectorNumber >= ds.length) { + double min = Double.MAX_VALUE; + for (int i = 0; i < totalTimes.length; i++) { + if (totalTimes[i] < min) { + min = totalTimes[i]; + } + } + + d(selectorNumber, -1, "Total"); + for (int i = 0; i < totalTimes.length; i++) { + d(selectorNumber, i, (((int) (totalTimes[i] * 100)) / 100.0) + " ms"); + if (totalTimes[i] <= min) { + flagWinner(selectedBenchmarks[i].getId()); + $("#startrace").text("Run Again"); + setResultClass(selectorNumber, i); + } + } + return false; + } + } + DeferredSelector d = ds[selectorNumber]; + long start = System.currentTimeMillis(); + int num = 0; + long end = start; + Benchmark m = selectedBenchmarks[benchMarkNumber]; + double runtime = min_time; + int found = 0; + try { + do { + num += m.runSelector(d); + end = System.currentTimeMillis(); + numCalls++; + } while (end - start < min_time); + runtime = (double) (end - start) / numCalls; + if (runtime < winTime) { + winTime = runtime; + winner = benchMarkNumber; + } + found = num / numCalls; + } catch (Exception e) { + e.printStackTrace(); + found = -1; + } + runTimes[benchMarkNumber] = runtime; + d(selectorNumber, benchMarkNumber, runtime, found); + totalTimes[benchMarkNumber] += runtime; + numCalls = 0; + benchMarkNumber++; + return true; + } + }); + } + }; + private Benchmark[] selectedBenchmarks; + private PopupPanel selectPanel = new PopupPanel() {{ + addStyleName("spanel"); + }}; + private PopupPanel helpPanel = new PopupPanel() {{ + setAutoHideEnabled(true); + setWidget(new HTML($("#help").html())); + addStyleName("help"); + }}; + private boolean shareIframes = true; + + private double trackWidth; + + private boolean useTrack = true; + + public void iframeReadyCallback() { + writeTestContent($(".ibench").contents().find("body").get(0)); + gwtiframe = $(".ibench").eq(0).contents().get(0); + $("#startrace").text("Start the race"); + $("#startrace").click(ask ? askBenchMarks: runBenchMarks); + $("#about").click(new Function(){ + public void f() { + helpPanel.center(); + } + }); + } + + /** + * EntryPoint + */ + public void onModuleLoad() { + + final MySelectors m = GWT.create(MySelectors.class); + + ds = m.getAllSelectors(); + + String par = Window.Location.getParameter("min"); + if (par != null) { + min_time = Integer.parseInt(par); + } + par = Window.Location.getParameter("share"); + if (par != null && "false".equals(par)) { + shareIframes = false; + } + par = Window.Location.getParameter("track"); + if (par != null && "false".equals(par)) { + useTrack = false; + } + par = Window.Location.getParameter("ask"); + if (par != null && "false".equals(par)) { + ask = false; + } + + exportIframeReadyCallback(this); + initSelects(benchmarks); + initIFrames(); + $("#results").hide(); + + } + + private void d(int selnumber, int benchnumber, double time, int found) { + String text = found < 0 ? "Error" : "" + (((int) (time * 10)) / 10.0) + " ms | " + found + " found"; + d(selnumber, benchnumber, text); + } + + private void d(int selnumber, int benchnumber, String text) { + grid.setText(selnumber + 1, benchnumber + 1, text); + Element td = grid.getCellFormatter().getElement(selnumber + 1, benchnumber + 1); + DOM.scrollIntoView((com.google.gwt.user.client.Element) td); + } + + private void flagWinner(String idWinner) { + GQuery g = $("#" + idWinner + "horse" + " nobr"); + $(".flag").appendTo(g).show(); + } + + /** + * Insert the iframes for benchmarking. + * Depending on the parameter share, we will generate one iframe + * for each benchmark or we will share the same one. + */ + private void initIFrames() { + String i = ""; + if (! shareIframes ) { + $(i.replaceAll("%ID%", "gwt")).appendTo(document).hide(); + for (Benchmark b : benchmarks) { + if (b instanceof IframeBenchmark) { + $(i.replaceAll("%ID%", b.getId())).appendTo(document).hide(); + } + } + } else { + $(i.replaceAll("%ID%", "iframe")).appendTo(document).hide(); + } + } + + /** + * Reset the result table + */ + private void initResultsTable(DeferredSelector[] dg, Benchmark... benchs) { + int numRows = dg.length; + grid = new FlexTable(); + grid.addStyleName("resultstable"); + RootPanel.get("results").clear(); + RootPanel.get("results").add(grid); + + grid.setText(0, 0, "Selector"); + for (int i=0; i < benchs.length; i++) { + grid.setText(0, i+1, benchs[i].getId()); + } + + for (int i = 0; i < numRows; i++) { + grid.setText(i+1, 0, dg[i].getSelector()); + for (int j = 0; j < benchs.length; j++) { + grid.setText(i+1, j+1, "-"); + } + } + } + + /** + * Initialize the selects to choose the benchmarks to run + */ + private void initSelects(Benchmark... benchs) { + String opt = "%ID%
    "; + selectPanel.add(new HTML("
    Make your selection
    ")); + selectPanel.show(); + GQuery g = $("#selectcontainer"); + for (Benchmark b : benchs) { + String select = opt; + for (String s : defaultBenchmarks) { + if (s.equals(b.getId())) { + select = select.replaceAll("%SEL%", "checked='checked'"); + } + } + g.append(select.replaceAll("%ID%", b.getId() + " " + b.getName()).replaceAll("%SEL", "")); + } + g.append("
    "); + $("#run").click(runBenchMarks); + selectPanel.hide(); + } + + /** + * Initialize the track with the horses + */ + private void initTrack(Benchmark... benchs) { + if (!useTrack) return; + String tpl = "
    %ID%
    "; + GQuery g = $("#racefield").html(""); + for (Benchmark b : benchs) { + String id = b.getId(); + String lg = id.contains("gwt") ? "gwt" : id; + String s = tpl.replaceAll("%ID%", id).replaceAll("%LG%", lg); + g.append($(s)); + } + + GQuery flag = $("").appendTo(document); + + // These values are set in the css. + int horseHeight = 35; + int horseWidth = 150; + int flagWidth = 35; + + int height = horseHeight * (benchs.length + 1); + $("#racetrack").css("height", height + "px"); + + trackWidth = g.width() - horseWidth - flagWidth; + flag.hide(); + } + + /** + * Update horse possition. + * Note that the calculated position is relative with the faster horse, + * so a horse could move back. + */ + private void moveHorses(Benchmark[] b, int row, double[] totalTimes) { + if (!useTrack) return; + double winnerTime = Double.MAX_VALUE; + for (double d : totalTimes) { + winnerTime = Math.min(winnerTime, d); + } + double winnerPos = row * (double) trackWidth / (double) ds.length; + for (int i = 0; i < b.length; i++) { + GQuery g = $("#" + b[i].getId() + "horse"); + double pos = winnerPos * winnerTime / totalTimes[i]; + g.css("left", (int)pos + "px"); + } + } + + private Benchmark[] readBenchmarkSelection() { + ArrayList bs = new ArrayList(); + for (Element e : $("input", selectPanel.getElement()).elements()) { + String val = $(e).val().replaceAll(" .*$", ""); + if ($(e).prop("checked")) { + for (Benchmark b : benchmarks) { + if (b.getId().equals(val)) { + bs.add(b); + } + } + } + } + return bs.toArray(new Benchmark[bs.size()]); + } + + private void setResultClass(int selNumber, int winNumber) { + Element e = grid.getCellFormatter().getElement(selNumber + 1, winNumber + 1); + $(e).addClass("win").siblings().attr("class", "").addClass("tie").eq(0).removeClass("tie"); + } + + /** + * This ugly method is used to initialize a huge html String + * plenty of html tags which will be used for the tests, + * because java 1.5 has a limitation in the size of static strings. + */ + private void writeTestContent(Element e) { + String ret = ""; + ret += "
    "; + ret += "
    "; + ret += "

    W3C

    "; + ret += "

    Selectors

    "; + ret += " ."; + ret += "

    W3C Working Draft 15 December 2005

    "; + ret += "
    "; + ret += "
    This version:
    "; + ret += "
    "; + ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215
    "; + ret += "
    Latest version:"; + ret += "
    "; + ret += " http://www.w3.org/TR/css3-selectors"; + ret += "
    Previous version:"; + ret += "
    "; + ret += " http://www.w3.org/TR/2001/CR-css3-selectors-20011113"; + ret += "
    Editors:"; + ret += "
    Daniel Glazman (Invited"; + ret += "
    "; + ret += "
    Tantek Çelik"; + ret += "
    Ian"; + ret += " Hickson (Google)"; + ret += "
    Peter Linss (former"; + ret += " editor, Netscape/AOL)"; + ret += "
    John Williams (former editor, Quark, Inc.)"; + ret += "
    "; + ret += "

    "; + ret += " Copyright © 2005 W3C®"; + ret += " (MIT, ERCIM, Keio), All Rights Reserved."; + ret += " liability,"; + ret += " trademark,"; + ret += " document"; + ret += " use rules apply."; + ret += "

    "; + ret += "
    "; + ret += "

    Abstract

    "; + ret += "

    Selectors are patterns that match against elements in a"; + ret += " tree. Selectors have been optimized for use with HTML and XML, and"; + ret += " are designed to be usable in performance-critical code.

    "; + ret += "

    CSS (Cascading"; + ret += " Style Sheets) is a language for describing the rendering of HTML and XML documents on"; + ret += " screen, on paper, in speech, etc. CSS uses Selectors for binding"; + ret += " describes extensions to the selectors defined in CSS level 2. These"; + ret += " extended selectors will be used by CSS level 3."; + ret += "

    Selectors define the following function:

    "; + ret += " 
    expression ∗ element → boolean
    "; + ret += "

    That is, given an element and a selector, this specification"; + ret += " defines whether that element matches the selector.

    "; + ret += "

    These expressions can also be used, for instance, to select a set"; + ret += " subtree. STTS (Simple Tree Transformation Sheets), a"; + ret += " language for transforming XML trees, uses this mechanism. [STTS]

    "; + ret += "

    Status of this document

    "; + ret += "

    This section describes the status of this document at the"; + ret += " of this technical report can be found in the W3C technical reports index at"; + ret += " http://www.w3.org/TR/.

    "; + ret += "

    This document describes the selectors that already exist in CSS1 and CSS2, and"; + ret += " also proposes new selectors for CSS3 and other languages that may need them.

    "; + ret += "

    The CSS Working Group doesn't expect that all implementations of"; + ret += " CSS3 will have to implement all selectors. Instead, there will"; + ret += " will include all of the selectors.

    "; + ret += "

    This specification is a last call working draft for the the CSS Working Group"; + ret += " (Style Activity). This"; + ret += " document is a revision of the Candidate"; + ret += " Recommendation dated 2001 November 13, and has incorporated"; + ret += " be demonstrable.

    "; + ret += "

    All persons are encouraged to review and implement this"; + ret += " specification and return comments to the (archived)"; + ret += " public mailing list www-style"; + ret += " (see instructions). W3C"; + ret += " The deadline for comments is 14 January 2006.

    "; + ret += "

    This is still a draft document and may be updated, replaced, or"; + ret += "

    This document may be available in translation."; + ret += "

    "; + ret += "

    Table of contents

    "; + ret += " "; + ret += "
    "; + ret += "

    1. Introduction

    "; + ret += "

    1.1. Dependencies

    "; + ret += "

    Some features of this specification are specific to CSS, or have"; + ret += " specification, these have been described in terms of CSS2.1. [CSS21]

    "; + ret += "

    1.2. Terminology

    "; + ret += "

    All of the text of this specification is normative except"; + ret += " non-normative.

    "; + ret += "

    1.3. Changes from CSS2

    "; + ret += "

    This section is non-normative.

    "; + ret += "

    The main differences between the selectors in CSS2 and those in"; + ret += " Selectors are:"; + ret += "

      "; + ret += "
    • the list of basic definitions (selector, group of selectors,"; + ret += " of simple selectors, and the term 'simple selector' is now used for"; + ret += "
      • "; + ret += "
    • an optional namespace component is now allowed in type element"; + ret += " selectors, the universal selector and attribute selectors"; + ret += "
      • "; + ret += "
    • a new combinator has been"; + ret += "
      • "; + ret += "
    • new simple selectors including substring matching attribute"; + ret += " selectors, and new pseudo-classes"; + ret += "
      • "; + ret += "
    • new pseudo-elements, and introduction of the '::' convention"; + ret += "
      • "; + ret += "
    • the grammar has been rewritten
      • "; + ret += "
    • profiles to be added to specifications integrating Selectors"; + ret += " and defining the set of selectors which is actually supported by"; + ret += "
      • "; + ret += "
    • Selectors are now a CSS3 Module and an independent"; + ret += "
      • "; + ret += "
    • the specification now has its own test suite
      • "; + ret += "
    "; + ret += "

    2. Selectors

    "; + ret += "

    This section is non-normative, as it merely summarizes the"; + ret += " following sections.

    "; + ret += "

    A Selector represents a structure. This structure can be used as a"; + ret += " HTML or XML fragment corresponding to that structure.

    "; + ret += "

    Selectors may range from simple element names to rich contextual"; + ret += " representations.

    "; + ret += "

    The following table summarizes the Selector syntax:

    "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
    PatternMeaningDescribed in sectionFirst defined in CSS level
    *any elementUniversal"; + ret += " selector2
    Ean element of type EType selector1
    E[foo]an E element with a 'foo' attributeAttribute"; + ret += " selectors2
    E[foo='bar']an E element whose 'foo' attribute value is exactly"; + ret += " Attribute"; + ret += " selectors2
    E[foo~='bar']an E element whose 'foo' attribute value is a list of"; + ret += " Attribute"; + ret += " selectors2
    E[foo^='bar']an E element whose 'foo' attribute value begins exactly"; + ret += " Attribute"; + ret += " selectors3
    E[foo$='bar']an E element whose 'foo' attribute value ends exactly"; + ret += " Attribute"; + ret += " selectors3
    E[foo*='bar']an E element whose 'foo' attribute value contains the"; + ret += " Attribute"; + ret += " selectors3
    E[hreflang|='en']an E element whose 'hreflang' attribute has a"; + ret += " Attribute"; + ret += " selectors2
    E:rootan E element, root of the documentStructural"; + ret += " pseudo-classes3
    E:nth-child(n)an E element, the n-th child of its parentStructural"; + ret += " pseudo-classes3
    E:nth-last-child(n)an E element, the n-th child of its parent, counting"; + ret += " Structural"; + ret += " pseudo-classes3
    E:nth-of-type(n)an E element, the n-th sibling of its typeStructural"; + ret += " pseudo-classes3
    E:nth-last-of-type(n)an E element, the n-th sibling of its type, counting"; + ret += " Structural"; + ret += " pseudo-classes3
    E:first-childan E element, first child of its parentStructural"; + ret += " pseudo-classes2
    E:last-childan E element, last child of its parentStructural"; + ret += " pseudo-classes3
    E:first-of-typean E element, first sibling of its typeStructural"; + ret += " pseudo-classes3
    E:last-of-typean E element, last sibling of its typeStructural"; + ret += " pseudo-classes3
    E:only-childan E element, only child of its parentStructural"; + ret += " pseudo-classes3
    E:only-of-typean E element, only sibling of its typeStructural"; + ret += " pseudo-classes3
    E:emptyan E element that has no children (including text"; + ret += " Structural"; + ret += " pseudo-classes3
    E:link
    E:visited    		an E element being the source anchor of a hyperlink of"; + ret += " The link"; + ret += " pseudo-classes1
    E:active
    E:hover
    E:focus    		an E element during certain user actionsThe user"; + ret += " action pseudo-classes1 and 2
    E:targetan E element being the target of the referring URIThe target"; + ret += " pseudo-class3
    E:lang(fr)an element of type E in language 'fr' (the document"; + ret += " The :lang()"; + ret += " pseudo-class2
    E:enabled
    E:disabled    		a user interface element E which is enabled or"; + ret += " The UI element states"; + ret += " pseudo-classes3
    E:checkeda user interface element E which is checked (for instance a radio-button or checkbox)"; + ret += " The UI element states"; + ret += " pseudo-classes3
    E::first-linethe first formatted line of an E elementThe ::first-line"; + ret += " pseudo-element1
    E::first-letterthe first formatted letter of an E elementThe ::first-letter"; + ret += " pseudo-element1
    E::selectionthe portion of an E element that is currently"; + ret += " The UI element"; + ret += " fragments pseudo-elements3
    E::beforegenerated content before an E elementThe ::before"; + ret += " pseudo-element2
    E::aftergenerated content after an E elementThe ::after"; + ret += " pseudo-element2
    E.warningan E element whose class is"; + ret += " Class"; + ret += " selectors1
    E#myidan E element with ID equal to 'myid'.ID"; + ret += " selectors1
    E:not(s)an E element that does not match simple selector sNegation"; + ret += " pseudo-class3
    E Fan F element descendant of an E elementDescendant"; + ret += " combinator1
    E > Fan F element child of an E elementChild"; + ret += " combinator2
    E + Fan F element immediately preceded by an E elementAdjacent sibling combinator"; + ret += " 2
    E ~ Fan F element preceded by an E elementGeneral sibling combinator"; + ret += " 3
    "; + ret += "

    The meaning of each selector is derived from the table above by"; + ret += " column.

    "; + ret += "

    3. Case sensitivity

    "; + ret += "

    The case sensitivity of document language element names, attribute"; + ret += " names, and attribute values in selectors depends on the document"; + ret += " but in XML, they are case-sensitive.

    "; + ret += "

    4. Selector syntax

    "; + ret += "

    A selector is a chain of one"; + ret += " or more sequences of simple selectors"; + ret += " separated by combinators.

    "; + ret += "

    A sequence of simple selectors"; + ret += " is a chain of simple selectors"; + ret += " that are not separated by a combinator. It"; + ret += " always begins with a type selector or a"; + ret += " universal selector. No other type"; + ret += " selector or universal selector is allowed in the sequence.

    "; + ret += "

    A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, content selector, or pseudo-class. One pseudo-element may be appended to the last"; + ret += " sequence of simple selectors.

    "; + ret += "

    Combinators are: white space, 'greater-than"; + ret += " sign' (U+003E, >), 'plus sign' (U+002B,"; + ret += " +) and 'tilde' (U+007E, ~). White"; + ret += " space may appear between a combinator and the simple selectors around"; + ret += " it. Only the characters 'space' (U+0020), 'tab'"; + ret += " never part of white space.

    "; + ret += "

    The elements of a document tree that are represented by a selector"; + ret += " are the subjects of the selector. A"; + ret += " selector consisting of a single sequence of simple selectors"; + ret += " sequence of simple selectors and a combinator to a sequence imposes"; + ret += " simple selectors.

    "; + ret += "

    An empty selector, containing no sequence of simple selectors and"; + ret += " no pseudo-element, is an invalid"; + ret += " selector.

    "; + ret += "

    5. Groups of selectors

    "; + ret += "

    When several selectors share the same declarations, they may be"; + ret += " grouped into a comma-separated list. (A comma is U+002C.)

    "; + ret += "
    "; + ret += "

    CSS examples:

    "; + ret += "

    In this example, we condense three rules with identical"; + ret += " declarations into one. Thus,

    "; + ret += " 
    h1 { font-family: sans-serif }";
+    ret += "      h3 { font-family: sans-serif }
    "; + ret += "

    is equivalent to:

    "; + ret += " 
    h1, h2, h3 { font-family: sans-serif }
    "; + ret += "
    "; + ret += "

    Warning: the equivalence is true in this example"; + ret += " because all the selectors are valid selectors. If just one of these"; + ret += " selectors were invalid, the entire group of selectors would be"; + ret += " heading rules would be invalidated.

    "; + ret += "

    6. Simple selectors

    "; + ret += "

    6.1. Type selector

    "; + ret += "

    A type selector is the name of a document language"; + ret += " type in the document tree.

    "; + ret += "
    "; + ret += "

    Example:

    "; + ret += "

    The following selector represents an h1 element in the"; + ret += " document tree:

    "; + ret += " 
    h1
    "; + ret += "
    "; + ret += "

    6.1.1. Type selectors and namespaces

    "; + ret += "

    Type selectors allow an optional namespace ([XMLNAMES]) component. A namespace prefix"; + ret += " (U+007C, |).

    "; + ret += "

    The namespace component may be left empty to indicate that the"; + ret += " selector is only to represent elements with no declared namespace.

    "; + ret += "

    An asterisk may be used for the namespace prefix, indicating that"; + ret += " with no namespace).

    "; + ret += "

    Element type selectors that have no namespace component (no"; + ret += " element's namespace (equivalent to '*|') unless a default"; + ret += " namespace.

    "; + ret += "

    A type selector containing a namespace prefix that has not been"; + ret += " previously declared is an invalid selector."; + ret += " language implementing Selectors. In CSS, such a mechanism is defined"; + ret += " in the General Syntax module.

    "; + ret += "

    In a namespace-aware client, element type selectors will only match"; + ret += " against the local"; + ret += " part"; + ret += " of the element's qualified"; + ret += " name. See below for notes about matching"; + ret += " behaviors in down-level clients.

    "; + ret += "

    In summary:

    "; + ret += "
    "; + ret += "
    ns|E
    "; + ret += "
    elements with name E in namespace ns
    "; + ret += "
    *|E
    "; + ret += "
    elements with name E in any namespace, including those without any"; + ret += "
    "; + ret += "
    |E
    "; + ret += "
    elements with name E without any declared namespace
    "; + ret += "
    E
    "; + ret += "
    if no default namespace has been specified, this is equivalent to *|E."; + ret += "
    "; + ret += "
    "; + ret += "
    "; + ret += "

    CSS examples:

    "; + ret += " 
    @namespace foo url(http://www.example.com);";
+    ret += "       h1 { color: green }
    "; + ret += "

    The first rule will match only h1 elements in the"; + ret += " 'http://www.example.com' namespace.

    "; + ret += "

    The second rule will match all elements in the"; + ret += " 'http://www.example.com' namespace.

    "; + ret += "

    The third rule will match only h1 elements without"; + ret += " any declared namespace.

    "; + ret += "

    The fourth rule will match h1 elements in any"; + ret += " namespace (including those without any declared namespace).

    "; + ret += "

    The last rule is equivalent to the fourth rule because no default"; + ret += " namespace has been defined.

    "; + ret += "
    "; + ret += "

    6.2. Universal selector

    "; + ret += "

    The universal selector, written 'asterisk'"; + ret += " (*), represents the qualified name of any element"; + ret += " specified, see Universal selector and"; + ret += " Namespaces below.

    "; + ret += "

    If the universal selector is not the only component of a sequence"; + ret += " of simple selectors, the * may be omitted.

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += "
      "; + ret += "
    • *[hreflang|=en] and [hreflang|=en] are"; + ret += "
      • "; + ret += "
    • *.warning and .warning are equivalent,"; + ret += "
      • "; + ret += "
    • *#myid and #myid are equivalent.
      • "; + ret += "
    "; + ret += "
    "; + ret += "

    Note: it is recommended that the"; + ret += " *, representing the universal selector, not be"; + ret += " omitted.

    "; + ret += "

    6.2.1. Universal selector and namespaces

    "; + ret += "

    The universal selector allows an optional namespace component. It"; + ret += " is used as follows:

    "; + ret += "
    "; + ret += "
    ns|*
    "; + ret += "
    all elements in namespace ns
    "; + ret += "
    *|*
    "; + ret += "
    all elements
    "; + ret += "
    |*
    "; + ret += "
    all elements without any declared namespace
    "; + ret += "
    *
    "; + ret += "
    if no default namespace has been specified, this is equivalent to *|*."; + ret += "
    "; + ret += "
    "; + ret += "

    A universal selector containing a namespace prefix that has not"; + ret += " been previously declared is an invalid"; + ret += " to the language implementing Selectors. In CSS, such a mechanism is"; + ret += " defined in the General Syntax module.

    "; + ret += "

    6.3. Attribute selectors

    "; + ret += "

    Selectors allow the representation of an element's attributes. When"; + ret += " attribute selectors must be considered to match an element if that"; + ret += " attribute selector.

    "; + ret += "

    6.3.1. Attribute presence and values"; + ret += " selectors

    "; + ret += "

    CSS2 introduced four attribute selectors:

    "; + ret += "
    "; + ret += "
    [att]"; + ret += "
    Represents an element with the att attribute, whatever the"; + ret += "
    "; + ret += "
    [att=val]
    "; + ret += "
    Represents an element with the att attribute whose value is"; + ret += "
    "; + ret += "
    [att~=val]
    "; + ret += "
    Represents an element with the att attribute whose value is"; + ret += " a whitespace-separated list of words, one"; + ret += " represent anything (since the words are separated by"; + ret += "
    "; + ret += "
    [att|=val]"; + ret += "
    Represents an element with the att attribute, its value"; + ret += " matches (e.g., the hreflang attribute on the"; + ret += " link element in HTML) as described in RFC 3066 ([RFC3066]). For lang (or"; + ret += " xml:lang) language subcode matching, please see the :lang pseudo-class."; + ret += "
    "; + ret += "
    "; + ret += "

    Attribute values must be identifiers or strings. The"; + ret += " case-sensitivity of attribute names and values in selectors depends on"; + ret += " the document language.

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += "

    The following attribute selector represents an h1"; + ret += " element that carries the title attribute, whatever its"; + ret += " value:

    "; + ret += " 
    h1[title]
    "; + ret += "

    In the following example, the selector represents a"; + ret += " span element whose class attribute has"; + ret += " exactly the value 'example':

    "; + ret += " 
    span[class='example']
    "; + ret += "

    Multiple attribute selectors can be used to represent several"; + ret += " attribute. Here, the selector represents a span element"; + ret += " whose hello attribute has exactly the value 'Cleveland'"; + ret += " and whose goodbye attribute has exactly the value"; + ret += " 'Columbus':

    "; + ret += " 
    span[hello='Cleveland'][goodbye='Columbus']
    "; + ret += "

    The following selectors illustrate the differences between '='"; + ret += " 'copyright copyleft copyeditor' on a rel attribute. The"; + ret += " second selector will only represent an a element with"; + ret += " an href attribute having the exact value"; + ret += " 'http://www.w3.org/'.

    "; + ret += " 
    a[rel~='copyright']";
+    ret += "      a[href='http://www.w3.org/']
    "; + ret += "

    The following selector represents a link element"; + ret += " whose hreflang attribute is exactly 'fr'.

    "; + ret += " 
    link[hreflang=fr]
    "; + ret += "

    The following selector represents a link element for"; + ret += " which the values of the hreflang attribute begins with"; + ret += " 'en', including 'en', 'en-US', and 'en-cockney':

    "; + ret += " 
    link[hreflang|='en']
    "; + ret += "

    Similarly, the following selectors represents a"; + ret += " DIALOGUE element whenever it has one of two different"; + ret += " values for an attribute character:

    "; + ret += " 
    DIALOGUE[character=romeo]";
+    ret += "      DIALOGUE[character=juliet]
    "; + ret += "
    "; + ret += "

    6.3.2. Substring matching attribute"; + ret += " selectors

    "; + ret += "

    Three additional attribute selectors are provided for matching"; + ret += " substrings in the value of an attribute:

    "; + ret += "
    "; + ret += "
    [att^=val]
    "; + ret += "
    Represents an element with the att attribute whose value"; + ret += "
    "; + ret += "
    [att$=val]"; + ret += "
    Represents an element with the att attribute whose value"; + ret += "
    "; + ret += "
    [att*=val]"; + ret += "
    Represents an element with the att attribute whose value"; + ret += "
    "; + ret += "
    "; + ret += "

    Attribute values must be identifiers or strings. The"; + ret += " case-sensitivity of attribute names in selectors depends on the"; + ret += " document language.

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += "

    The following selector represents an HTML object,"; + ret += " image:

    "; + ret += " 
    object[type^='image/']
    "; + ret += "

    The following selector represents an HTML anchor a with an"; + ret += " href attribute whose value ends with '.html'.

    "; + ret += " 
    a[href$='.html']
    "; + ret += "

    The following selector represents an HTML paragraph with a"; + ret += " title"; + ret += " attribute whose value contains the substring 'hello'

    "; + ret += " 
    p[title*='hello']
    "; + ret += "
    "; + ret += "

    6.3.3. Attribute selectors and namespaces

    "; + ret += "

    Attribute selectors allow an optional namespace component to the"; + ret += " separator 'vertical bar' (|). In keeping with"; + ret += " apply to attributes, therefore attribute selectors without a namespace"; + ret += " (equivalent to '|attr'). An asterisk may be used for the"; + ret += "

    An attribute selector with an attribute name containing a namespace"; + ret += " prefix that has not been previously declared is an invalid selector. The mechanism for"; + ret += " a namespace prefix is left up to the language implementing Selectors."; + ret += "

    "; + ret += "

    CSS examples:

    "; + ret += " 
    @namespace foo 'http://www.example.com';";
+    ret += "      [att] { color: green }
    "; + ret += "

    The first rule will match only elements with the attribute"; + ret += " att in the 'http://www.example.com' namespace with the"; + ret += " value 'val'.

    "; + ret += "

    The second rule will match only elements with the attribute"; + ret += " att regardless of the namespace of the attribute"; + ret += " (including no declared namespace).

    "; + ret += "

    The last two rules are equivalent and will match only elements"; + ret += " with the attribute att where the attribute is not"; + ret += " declared to be in a namespace.

    "; + ret += "
    "; + ret += "

    6.3.4. Default attribute values in DTDs

    "; + ret += "

    Attribute selectors represent explicitly set attribute values in"; + ret += " selectors. Selectors should be designed so that they work even if the"; + ret += " default values are not included in the document tree.

    "; + ret += "

    More precisely, a UA is not required to read an 'external"; + ret += " subset' of the DTD but is required to look for default"; + ret += " attribute values in the document's 'internal subset.' (See [XML10] for definitions of these subsets.)

    "; + ret += "

    A UA that recognizes an XML namespace [XMLNAMES] is not required to use its"; + ret += " required to use its built-in knowledge of the XHTML DTD.)

    "; + ret += "

    Note: Typically, implementations"; + ret += " choose to ignore external subsets.

    "; + ret += "
    "; + ret += "

    Example:

    "; + ret += "

    Consider an element EXAMPLE with an attribute 'notation' that has a"; + ret += " default value of 'decimal'. The DTD fragment might be

    "; + ret += " 
    <!ATTLIST EXAMPLE notation (decimal,octal) 'decimal'>
    "; + ret += "

    If the style sheet contains the rules

    "; + ret += " 
    EXAMPLE[notation=decimal] { /*... default property settings ...*/ }";
+    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }
    "; + ret += "

    the first rule will not match elements whose 'notation' attribute"; + ret += " attribute selector for the default value must be dropped:

    "; + ret += " 
    EXAMPLE                   { /*... default property settings ...*/ }";
+    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }
    "; + ret += "

    Here, because the selector EXAMPLE[notation=octal] is"; + ret += " cases' style rules.

    "; + ret += "
    "; + ret += "

    6.4. Class selectors

    "; + ret += "

    Working with HTML, authors may use the period (U+002E,"; + ret += " .) notation as an alternative to the ~="; + ret += " notation when representing the class attribute. Thus, for"; + ret += " HTML, div.value and div[class~=value] have"; + ret += " 'period' (.).

    "; + ret += "

    UAs may apply selectors using the period (.) notation in XML"; + ret += " 1.0 [SVG] describes the SVG"; + ret += " 'class' attribute and how a UA should interpret it, and"; + ret += " similarly MathML 1.01 [MATH] describes the MathML"; + ret += " 'class' attribute.)

    "; + ret += "
    "; + ret += "

    CSS examples:

    "; + ret += "

    We can assign style information to all elements with"; + ret += " class~='pastoral' as follows:

    "; + ret += " 
    *.pastoral { color: green }  /* all elements with class~=pastoral */
    "; + ret += "

    or just

    "; + ret += " 
    .pastoral { color: green }  /* all elements with class~=pastoral */
    "; + ret += "

    The following assigns style only to H1 elements with"; + ret += " class~='pastoral':

    "; + ret += " 
    H1.pastoral { color: green }  /* H1 elements with class~=pastoral */
    "; + ret += "

    Given these rules, the first H1 instance below would not have"; + ret += " green text, while the second would:

    "; + ret += " 
    <H1>Not green</H1>";
+    ret += "      <H1 class='pastoral'>Very green</H1>
    "; + ret += "
    "; + ret += "

    To represent a subset of 'class' values, each value must be preceded"; + ret += " by a '.', in any order.

    "; + ret += "
    "; + ret += "

    CSS example:

    "; + ret += "

    The following rule matches any P element whose 'class' attribute"; + ret += " has been assigned a list of whitespace-separated values that includes"; + ret += " 'pastoral' and 'marine':

    "; + ret += " 
    p.pastoral.marine { color: green }
    "; + ret += "

    This rule matches when class='pastoral blue aqua"; + ret += " marine' but does not match for class='pastoral"; + ret += " blue'.

    "; + ret += "
    "; + ret += "

    Note: Because CSS gives considerable"; + ret += " not.

    "; + ret += "

    Note: If an element has multiple"; + ret += " this specification.

    "; + ret += "

    6.5. ID selectors

    "; + ret += "

    Document languages may contain attributes that are declared to be"; + ret += " applies.

    "; + ret += "

    An ID-typed attribute of a document language allows authors to"; + ret += " ID selectors represent an element instance based on its identifier. An"; + ret += " #) immediately followed by the ID value, which must be an"; + ret += " identifier.

    "; + ret += "

    Selectors does not specify how a UA knows the ID-typed attribute of"; + ret += "

    "; + ret += "

    Examples:

    "; + ret += "

    The following ID selector represents an h1 element"; + ret += " whose ID-typed attribute has the value 'chapter1':

    "; + ret += " 
    h1#chapter1
    "; + ret += "

    The following ID selector represents any element whose ID-typed"; + ret += " attribute has the value 'chapter1':

    "; + ret += " 
    #chapter1
    "; + ret += "

    The following selector represents any element whose ID-typed"; + ret += " attribute has the value 'z98y'.

    "; + ret += " 
    *#z98y
    "; + ret += "
    "; + ret += "

    Note. In XML 1.0 [XML10], the information about which attribute"; + ret += " should use normal attribute selectors instead:"; + ret += " [name=p371] instead of #p371. Elements in"; + ret += " XML 1.0 documents without a DTD do not have IDs at all.

    "; + ret += "

    If an element has multiple ID attributes, all of them must be"; + ret += " DOM3 Core, XML DTDs, and namespace-specific knowledge.

    "; + ret += "

    6.6. Pseudo-classes

    "; + ret += "

    The pseudo-class concept is introduced to permit selection based on"; + ret += " expressed using the other simple selectors.

    "; + ret += "

    A pseudo-class always consists of a 'colon'"; + ret += " (:) followed by the name of the pseudo-class and"; + ret += " optionally by a value between parentheses.

    "; + ret += "

    Pseudo-classes are allowed in all sequences of simple selectors"; + ret += " sequences of simple selectors, after the leading type selector or"; + ret += " document.

    "; + ret += "

    6.6.1. Dynamic pseudo-classes

    "; + ret += "

    Dynamic pseudo-classes classify elements on characteristics other"; + ret += " that cannot be deduced from the document tree.

    "; + ret += "

    Dynamic pseudo-classes do not appear in the document source or"; + ret += " document tree.

    "; + ret += "
    The link pseudo-classes: :link and :visited
    "; + ret += "

    User agents commonly display unvisited links differently from"; + ret += " previously visited ones. Selectors"; + ret += " provides the pseudo-classes :link and"; + ret += " :visited to distinguish them:

    "; + ret += "
      "; + ret += "
    • The :link pseudo-class applies to links that have"; + ret += "
      • "; + ret += "
    • The :visited pseudo-class applies once the link has"; + ret += "
      • "; + ret += "
    "; + ret += "

    After some amount of time, user agents may choose to return a"; + ret += " visited link to the (unvisited) ':link' state.

    "; + ret += "

    The two states are mutually exclusive.

    "; + ret += "
    "; + ret += "

    Example:

    "; + ret += "

    The following selector represents links carrying class"; + ret += " external and already visited:

    "; + ret += " 
    a.external:visited
    "; + ret += "
    "; + ret += "

    Note: It is possible for style sheet"; + ret += "

    UAs may therefore treat all links as unvisited links, or implement"; + ret += " and unvisited links differently.

    "; + ret += "
    The user action pseudo-classes"; + ret += " :hover, :active, and :focus
    "; + ret += "

    Interactive user agents sometimes change the rendering in response"; + ret += " to user actions. Selectors provides"; + ret += " acting on.

    "; + ret += "
      "; + ret += "
    • The :hover pseudo-class applies while the user"; + ret += " element. User agents not that do not support interactive"; + ret += " media do not have to support this pseudo-class. Some conforming"; + ret += " user agents that support interactive"; + ret += " media may not be able to support this pseudo-class (e.g., a pen"; + ret += "
      • "; + ret += "
    • The :active pseudo-class applies while an element"; + ret += "
      • "; + ret += "
    • The :focus pseudo-class applies while an element"; + ret += "
      • "; + ret += "
    "; + ret += "

    There may be document language or implementation specific limits on"; + ret += " which elements can become :active or acquire"; + ret += " :focus.

    "; + ret += "

    These pseudo-classes are not mutually exclusive. An element may"; + ret += " match several pseudo-classes at the same time.

    "; + ret += "

    Selectors doesn't define if the parent of an element that is"; + ret += " ':active' or ':hover' is also in that state.

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += " 
    a:link    /* unvisited links */";
+    ret += "      a:active  /* active links */
    "; + ret += "

    An example of combining dynamic pseudo-classes:

    "; + ret += " 
    a:focus";
+    ret += "      a:focus:hover
    "; + ret += "

    The last selector matches a elements that are in"; + ret += " the pseudo-class :focus and in the pseudo-class :hover.

    "; + ret += "
    "; + ret += "

    Note: An element can be both ':visited'"; + ret += " and ':active' (or ':link' and ':active').

    "; + ret += "

    6.6.2. The target pseudo-class :target

    "; + ret += "

    Some URIs refer to a location within a resource. This kind of URI"; + ret += " identifier (called the fragment identifier).

    "; + ret += "

    URIs with fragment identifiers link to a certain element within the"; + ret += " pointing to an anchor named section_2 in an HTML"; + ret += " document:

    "; + ret += " 
    http://example.com/html/top.html#section_2
    "; + ret += "

    A target element can be represented by the :target"; + ret += " the document has no target element.

    "; + ret += "
    "; + ret += "

    Example:

    "; + ret += " 
    p.note:target
    "; + ret += "

    This selector represents a p element of class"; + ret += " note that is the target element of the referring"; + ret += " URI.

    "; + ret += "
    "; + ret += "
    "; + ret += "

    CSS example:

    "; + ret += "

    Here, the :target pseudo-class is used to make the"; + ret += " target element red and place an image before it, if there is one:

    "; + ret += " 
    *:target { color : red }";
+    ret += "      *:target::before { content : url(target.png) }
    "; + ret += "
    "; + ret += "

    6.6.3. The language pseudo-class :lang

    "; + ret += "

    If the document language specifies how the human language of an"; + ret += " element is determined, it is possible to write selectors that"; + ret += " represent an element based on its language. For example, in HTML [HTML4], the language is determined by a"; + ret += " combination of the lang attribute, the meta"; + ret += " headers). XML uses an attribute called xml:lang, and"; + ret += " the language.

    "; + ret += "

    The pseudo-class :lang(C) represents an element that"; + ret += " :lang() selector is based solely on the identifier C"; + ret += " element's language value, in the same way as if performed by the '|=' operator in attribute"; + ret += " selectors. The identifier C does not have to be a valid language"; + ret += " name.

    "; + ret += "

    C must not be empty. (If it is, the selector is invalid.)

    "; + ret += "

    Note: It is recommended that"; + ret += " documents and protocols indicate language using codes from RFC 3066 [RFC3066] or its successor, and by means of"; + ret += " 'xml:lang' attributes in the case of XML-based documents [XML10]. See "; + ret += " 'FAQ: Two-letter or three-letter language codes.'

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += "

    The two following selectors represent an HTML document that is in"; + ret += " Belgian, French, or German. The two next selectors represent"; + ret += " q quotations in an arbitrary element in Belgian, French,"; + ret += " or German.

    "; + ret += " 
    html:lang(fr-be)";
+    ret += "      :lang(de) > q
    "; + ret += "
    "; + ret += "

    6.6.4. The UI element states pseudo-classes

    "; + ret += "
    The :enabled and :disabled pseudo-classes
    "; + ret += "

    The :enabled pseudo-class allows authors to customize"; + ret += " an enabled input element without also specifying what it"; + ret += " would look like when it was disabled.

    "; + ret += "

    Similar to :enabled, :disabled allows the"; + ret += " element should look.

    "; + ret += "

    Most elements will be neither enabled nor disabled. An element is"; + ret += " presently activate it or transfer focus to it.

    "; + ret += "
    The :checked pseudo-class
    "; + ret += "

    Radio and checkbox elements can be toggled by the user. Some menu"; + ret += " toggled 'on' the :checked pseudo-class applies. The"; + ret += " :checked pseudo-class initially applies to such elements"; + ret += " that have the HTML4 selected and checked"; + ret += " attributes as described in Section"; + ret += " 17.2.1 of HTML4, but of course the user can toggle 'off' such"; + ret += " elements in which case the :checked pseudo-class would no"; + ret += " longer apply. While the :checked pseudo-class is dynamic"; + ret += " on the presence of the semantic HTML4 selected and"; + ret += " checked attributes, it applies to all media."; + ret += "

    The :indeterminate pseudo-class
    "; + ret += "
    "; + ret += "

    Radio and checkbox elements can be toggled by the user, but are"; + ret += " This can be due to an element attribute, or DOM manipulation.

    "; + ret += "

    A future version of this specification may introduce an"; + ret += " :indeterminate pseudo-class that applies to such elements."; + ret += "

    "; + ret += "
    "; + ret += "

    6.6.5. Structural pseudo-classes

    "; + ret += "

    Selectors introduces the concept of structural"; + ret += " pseudo-classes to permit selection based on extra information that"; + ret += " the document tree but cannot be represented by other simple selectors or"; + ret += "

    Note that standalone pieces of PCDATA (text nodes in the DOM) are"; + ret += "

    :root pseudo-class
    "; + ret += "

    The :root pseudo-class represents an element that is"; + ret += " HTML element."; + ret += "

    :nth-child() pseudo-class
    "; + ret += "

    The"; + ret += " :nth-child(an+b)"; + ret += " an+b-1 siblings"; + ret += " before it in the document tree, for a given positive"; + ret += " integer or zero value of n, and has a parent element. In"; + ret += " other words, this matches the bth child of an element after"; + ret += " all the children have been split into groups of a elements"; + ret += " each. For example, this allows the selectors to address every other"; + ret += " of paragraph text in a cycle of four. The a and"; + ret += " b values must be zero, negative integers or positive"; + ret += "

    In addition to this, :nth-child() can take"; + ret += " 'odd' and 'even' as arguments instead."; + ret += " 'odd' has the same signification as 2n+1,"; + ret += " and 'even' has the same signification as 2n."; + ret += "

    "; + ret += "

    Examples:

    "; + ret += " 
    tr:nth-child(2n+1) /* represents every odd row of an HTML table */";
+    ret += "      p:nth-child(4n+4) { color: purple; }
    "; + ret += "
    "; + ret += "

    When a=0, no repeating is used, so for example"; + ret += " :nth-child(0n+5) matches only the fifth child. When"; + ret += " a=0, the an part need not be"; + ret += " :nth-child(b) and the last example simplifies"; + ret += " to :nth-child(5)."; + ret += "

    "; + ret += "

    Examples:

    "; + ret += " 
    foo:nth-child(0n+1)   /* represents an element foo, first child of its parent element */";
+    ret += "      foo:nth-child(1)      /* same */
    "; + ret += "
    "; + ret += "

    When a=1, the number may be omitted from the rule."; + ret += "

    "; + ret += "

    Examples:

    "; + ret += "

    The following selectors are therefore equivalent:

    "; + ret += " 
    bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */";
+    ret += "      bar                   /* same but lower specificity (0,0,1) */
    "; + ret += "
    "; + ret += "

    If b=0, then every ath element is picked. In"; + ret += " such a case, the b part may be omitted."; + ret += "

    "; + ret += "

    Examples:

    "; + ret += " 
    tr:nth-child(2n+0) /* represents every even row of an HTML table */";
+    ret += "      tr:nth-child(2n) /* same */
    "; + ret += "
    "; + ret += "

    If both a and b are equal to zero, the"; + ret += " pseudo-class represents no element in the document tree.

    "; + ret += "

    The value a can be negative, but only the positive"; + ret += " values of an+b, for"; + ret += " n≥0, may represent an element in the document"; + ret += " tree.

    "; + ret += "
    "; + ret += "

    Example:

    "; + ret += " 
    html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */
    "; + ret += "
    "; + ret += "

    When the value b is negative, the '+' character in the"; + ret += " character indicating the negative value of b).

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += " 
    :nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */";
+    ret += "      :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */
    "; + ret += "
    "; + ret += "
    :nth-last-child() pseudo-class
    "; + ret += "

    The :nth-last-child(an+b)"; + ret += " an+b-1 siblings"; + ret += " after it in the document tree, for a given positive"; + ret += " integer or zero value of n, and has a parent element. See"; + ret += " :nth-child() pseudo-class for the syntax of its argument."; + ret += " It also accepts the 'even' and 'odd' values"; + ret += "

    "; + ret += "

    Examples:

    "; + ret += " 
    tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */";
+    ret += "                                    counting from the last one */
    "; + ret += "
    "; + ret += "
    :nth-of-type() pseudo-class
    "; + ret += "

    The :nth-of-type(an+b)"; + ret += " an+b-1 siblings with the same"; + ret += " element name before it in the document tree, for a"; + ret += " given zero or positive integer value of n, and has a"; + ret += " parent element. In other words, this matches the bth child"; + ret += " groups of a elements each. See :nth-child() pseudo-class"; + ret += " 'even' and 'odd' values."; + ret += "

    "; + ret += "

    CSS example:

    "; + ret += "

    This allows an author to alternate the position of floated images:

    "; + ret += " 
    img:nth-of-type(2n+1) { float: right; }";
+    ret += "      img:nth-of-type(2n) { float: left; }
    "; + ret += "
    "; + ret += "
    :nth-last-of-type() pseudo-class
    "; + ret += "

    The :nth-last-of-type(an+b)"; + ret += " an+b-1 siblings with the same"; + ret += " element name after it in the document tree, for a"; + ret += " given zero or positive integer value of n, and has a"; + ret += " parent element. See :nth-child() pseudo-class for the"; + ret += " syntax of its argument. It also accepts the 'even' and 'odd'"; + ret += "

    "; + ret += "

    Example:

    "; + ret += "

    To represent all h2 children of an XHTML"; + ret += " body except the first and last, one could use the"; + ret += " following selector:

    "; + ret += " 
    body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
    "; + ret += "

    In this case, one could also use :not(), although the"; + ret += " selector ends up being just as long:

    "; + ret += " 
    body > h2:not(:first-of-type):not(:last-of-type)
    "; + ret += "
    "; + ret += "
    :first-child pseudo-class
    "; + ret += "

    Same as :nth-child(1). The :first-child"; + ret += "

    "; + ret += "

    Examples:

    "; + ret += "

    The following selector represents a p element that is"; + ret += " the first child of a div element:

    "; + ret += " 
    div > p:first-child
    "; + ret += "

    This selector can represent the p inside the"; + ret += " div of the following fragment:

    "; + ret += " 
    <p> The last P before the note.</p>";
+    ret += "      </div>
    "; + ret += " but cannot represent the second p in the following"; + ret += " 
    <p> The last P before the note.</p>";
+    ret += "      </div>
    "; + ret += "

    The following two selectors are usually equivalent:

    "; + ret += " 
    * > a:first-child /* a is first child of any element */";
+    ret += "      a:first-child /* Same (assuming a is not the root element) */
    "; + ret += "
    "; + ret += "
    :last-child pseudo-class
    "; + ret += "

    Same as :nth-last-child(1). The :last-child"; + ret += "

    "; + ret += "

    Example:

    "; + ret += "

    The following selector represents a list item li that"; + ret += " is the last child of an ordered list ol."; + ret += " 

    ol > li:last-child
    "; + ret += "
    "; + ret += "
    :first-of-type pseudo-class
    "; + ret += "

    Same as :nth-of-type(1). The :first-of-type"; + ret += "

    "; + ret += "

    Example:

    "; + ret += "

    The following selector represents a definition title"; + ret += " dt inside a definition list dl, this"; + ret += " dt being the first of its type in the list of children of"; + ret += " its parent element.

    "; + ret += " 
    dl dt:first-of-type
    "; + ret += "

    It is a valid description for the first two dt"; + ret += " elements in the following example but not for the third one:

    "; + ret += " 
    <dl>";
+    ret += "      </dl>
    "; + ret += "
    "; + ret += "
    :last-of-type pseudo-class
    "; + ret += "

    Same as :nth-last-of-type(1). The"; + ret += " :last-of-type pseudo-class represents an element that is"; + ret += " element.

    "; + ret += "
    "; + ret += "

    Example:

    "; + ret += "

    The following selector represents the last data cell"; + ret += " td of a table row.

    "; + ret += " 
    tr > td:last-of-type
    "; + ret += "
    "; + ret += "
    :only-child pseudo-class
    "; + ret += "

    Represents an element that has a parent element and whose parent"; + ret += " :first-child:last-child or"; + ret += " :nth-child(1):nth-last-child(1), but with a lower"; + ret += " specificity.

    "; + ret += "
    :only-of-type pseudo-class
    "; + ret += "

    Represents an element that has a parent element and whose parent"; + ret += " as :first-of-type:last-of-type or"; + ret += " :nth-of-type(1):nth-last-of-type(1), but with a lower"; + ret += " specificity.

    "; + ret += "
    :empty pseudo-class
    "; + ret += "

    The :empty pseudo-class represents an element that has"; + ret += " empty or not.

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += "

    p:empty is a valid representation of the following fragment:"; + ret += "

    "; + ret += " 
    <p></p>
    "; + ret += "

    foo:empty is not a valid representation for the"; + ret += " following fragments:

    "; + ret += " 
    <foo>bar</foo>
    "; + ret += " 
    <foo><bar>bla</bar></foo>
    "; + ret += " 
    <foo>this is not <bar>:empty</bar></foo>
    "; + ret += "
    "; + ret += "

    6.6.6. Blank

    "; + ret += " "; + ret += "

    This section intentionally left blank.

    "; + ret += " "; + ret += "

    6.6.7. The negation pseudo-class

    "; + ret += "

    The negation pseudo-class, :not(X), is a"; + ret += " functional notation taking a simple"; + ret += " selector (excluding the negation pseudo-class itself and"; + ret += " "; + ret += "

    "; + ret += "

    Examples:

    "; + ret += "

    The following CSS selector matches all button"; + ret += " elements in an HTML document that are not disabled.

    "; + ret += " 
    button:not([DISABLED])
    "; + ret += "

    The following selector represents all but FOO"; + ret += " elements.

    "; + ret += " 
    *:not(FOO)
    "; + ret += "

    The following group of selectors represents all HTML elements"; + ret += " except links.

    "; + ret += " 
    html|*:not(:link):not(:visited)
    "; + ret += "
    "; + ret += "

    Default namespace declarations do not affect the argument of the"; + ret += " type selector.

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += "

    Assuming that the default namespace is bound to"; + ret += " elements that are not in that namespace:

    "; + ret += " 
    *|*:not(*)
    "; + ret += "

    The following CSS selector matches any element being hovered,"; + ret += " rule when they are being hovered.

    "; + ret += " 
    *|*:not(:hover)
    "; + ret += "
    "; + ret += "

    Note: the :not() pseudo allows"; + ret += " useless selectors to be written. For instance :not(*|*),"; + ret += " which represents no element at all, or foo:not(bar),"; + ret += " which is equivalent to foo but with a higher"; + ret += " specificity.

    "; + ret += "

    7. Pseudo-elements

    "; + ret += "

    Pseudo-elements create abstractions about the document tree beyond"; + ret += " source document (e.g., the ::before and"; + ret += " ::after pseudo-elements give access to generated"; + ret += " content).

    "; + ret += "

    A pseudo-element is made of two colons (::) followed"; + ret += " by the name of the pseudo-element.

    "; + ret += "

    This :: notation is introduced by the current document"; + ret += " :first-line, :first-letter,"; + ret += " :before and :after). This compatibility is"; + ret += " not allowed for the new pseudo-elements introduced in CSS level 3.

    "; + ret += "

    Only one pseudo-element may appear per selector, and if present it"; + ret += " must appear after the sequence of simple selectors that represents the"; + ret += " subjects of the selector. A"; + ret += " pesudo-elements per selector.

    "; + ret += "

    7.1. The ::first-line pseudo-element

    "; + ret += "

    The ::first-line pseudo-element describes the contents"; + ret += "

    "; + ret += "

    CSS example:

    "; + ret += " 
    p::first-line { text-transform: uppercase }
    "; + ret += "

    The above rule means 'change the letters of the first line of every"; + ret += " paragraph to uppercase'.

    "; + ret += "
    "; + ret += "

    The selector p::first-line does not match any real"; + ret += " agents will insert at the beginning of every paragraph.

    "; + ret += "

    Note that the length of the first line depends on a number of"; + ret += " an ordinary HTML paragraph such as:

    "; + ret += " 
          <P>This is a somewhat long HTML ";
+    ret += "
    "; + ret += "

    the lines of which happen to be broken as follows:"; + ret += " 

          THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT";
+    ret += "
    "; + ret += "

    This paragraph might be 'rewritten' by user agents to include the"; + ret += " fictional tag sequence for ::first-line. This"; + ret += " fictional tag sequence helps to show how properties are inherited.

    "; + ret += " 
          <P><P::first-line> This is a somewhat long HTML ";
+    ret += "      paragraph that </P::first-line> will be broken into several";
+    ret += "
    "; + ret += "

    If a pseudo-element breaks up a real element, the desired effect"; + ret += " with a span element:

    "; + ret += " 
          <P><SPAN class='test'> This is a somewhat long HTML";
+    ret += "      lines.</SPAN> The first line will be identified";
+    ret += "
    "; + ret += "

    the user agent could simulate start and end tags for"; + ret += " span when inserting the fictional tag sequence for"; + ret += " ::first-line."; + ret += " 

          <P><P::first-line><SPAN class='test'> This is a";
+    ret += "      paragraph that will </SPAN></P::first-line><SPAN";
+    ret += "          class='test'> be";
+    ret += "      lines.</SPAN> The first line will be identified";
+    ret += "
    "; + ret += "

    In CSS, the ::first-line pseudo-element can only be"; + ret += " or a table-cell.

    "; + ret += "

    The 'first formatted line' of an"; + ret += " line of the div in <DIV><P>This"; + ret += " line...</P></DIV> is the first line of the p"; + ret += " that both p and div are block-level)."; + ret += "

    The first line of a table-cell or inline-block cannot be the first"; + ret += " formatted line of an ancestor element. Thus, in <DIV><P"; + ret += " etcetera</DIV> the first formatted line of the"; + ret += " div is not the line 'Hello'."; + ret += "

    Note that the first line of the p in this"; + ret += " fragment: <p><br>First... doesn't contain any"; + ret += " letters (assuming the default style for br in HTML"; + ret += "

    A UA should act as if the fictional start tags of the"; + ret += " ::first-line pseudo-elements were nested just inside the"; + ret += " is an example. The fictional tag sequence for

    "; + ret += " 
          <DIV>";
+    ret += "
    "; + ret += "

    is

    "; + ret += " 
          <DIV>";
+    ret += "
    "; + ret += "

    The ::first-line pseudo-element is similar to an"; + ret += " following properties apply to a ::first-line"; + ret += " properties as well.

    "; + ret += "

    7.2. The ::first-letter pseudo-element

    "; + ret += "

    The ::first-letter pseudo-element represents the first"; + ret += " is 'none'; otherwise, it is similar to a floated element.

    "; + ret += "

    In CSS, these are the properties that apply to ::first-letter"; + ret += " of the letter, unlike for normal elements.

    "; + ret += "
    "; + ret += "

    Example:

    "; + ret += "

    This example shows a possible rendering of an initial cap. Note"; + ret += " ::first-letter"; + ret += " fictional start tag of the first letter is inside the span,"; + ret += " the font weight of the first letter is normal, not bold as the span:"; + ret += " 

          p { line-height: 1.1 }";
+    ret += "
    "; + ret += "
    "; + ret += "

    Image illustrating the ::first-letter pseudo-element"; + ret += "

    "; + ret += "
    "; + ret += "
    "; + ret += "

    The following CSS will make a drop cap initial letter span about two"; + ret += " lines:

    "; + ret += " 
          <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>";
+    ret += "
    "; + ret += "

    This example might be formatted as follows:

    "; + ret += "
    "; + ret += "

    Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements"; + ret += "

    "; + ret += "
    "; + ret += "

    The fictional tag sequence is:

    "; + ret += " 
          <P>";
+    ret += "
    "; + ret += "

    Note that the ::first-letter pseudo-element tags abut"; + ret += " block element.

    "; + ret += "

    In order to achieve traditional drop caps formatting, user agents"; + ret += " glyph outline may be taken into account when formatting.

    "; + ret += "

    Punctuation (i.e, characters defined in Unicode in the 'open' (Ps),"; + ret += " be included. [UNICODE]

    "; + ret += "
    "; + ret += "

    Quotes that precede the"; + ret += " first letter should be included.

    "; + ret += "
    "; + ret += "

    The ::first-letter also applies if the first letter is"; + ret += " money.'

    "; + ret += "

    In CSS, the ::first-letter pseudo-element applies to"; + ret += " elements. A future version of this specification"; + ret += " types.

    "; + ret += "

    The ::first-letter pseudo-element can be used with all"; + ret += " the element, even if that first text is in a descendant.

    "; + ret += "
    "; + ret += "

    Example:

    "; + ret += "

    The fictional tag sequence for this HTMLfragment:"; + ret += " 

    <div>";
+    ret += "      <p>The first text.
    "; + ret += "

    is:"; + ret += " 

    <div>";
+    ret += "      <p><div::first-letter><p::first-letter>T</...></...>he first text.
    "; + ret += "
    "; + ret += "

    The first letter of a table-cell or inline-block cannot be the"; + ret += " first letter of an ancestor element. Thus, in <DIV><P"; + ret += " etcetera</DIV> the first letter of the div is"; + ret += " letter 'H'. In fact, the div doesn't have a first letter."; + ret += "

    The first letter must occur on the first formatted line. For example, in"; + ret += " this fragment: <p><br>First... the first line"; + ret += " doesn't contain any letters and ::first-letter doesn't"; + ret += " match anything (assuming the default style for br in HTML"; + ret += "

    In CSS, if an element is a list item ('display: list-item'), the"; + ret += " ::first-letter applies to the first letter in the"; + ret += " ::first-letter on list items with 'list-style-position:"; + ret += " inside'. If an element has ::before or"; + ret += " ::after content, the ::first-letter applies"; + ret += " to the first letter of the element including that content."; + ret += "

    "; + ret += "

    Example:

    "; + ret += "

    After the rule 'p::before {content: 'Note: '}', the selector"; + ret += " 'p::first-letter' matches the 'N' of 'Note'.

    "; + ret += "
    "; + ret += "

    Some languages may have specific rules about how to treat certain"; + ret += " considered within the ::first-letter pseudo-element."; + ret += "

    If the letters that would form the ::first-letter are not in the"; + ret += " same element, such as ''T' in <p>'<em>T..., the UA"; + ret += " both elements, or simply not create a pseudo-element.

    "; + ret += "

    Similarly, if the first letter(s) of the block are not at the start"; + ret += "

    "; + ret += "

    Example:

    "; + ret += "

    The following example illustrates"; + ret += " paragraph will be 'red'.

    "; + ret += " 
    p { color: red; font-size: 12pt }";
+    ret += "      <P>Some text that ends up on two lines</P>
    "; + ret += "

    Assuming that a line break will occur before the word 'ends', the"; + ret += " fictional tag"; + ret += " sequence for this fragment might be:

    "; + ret += " 
    <P>";
+    ret += "      </P>
    "; + ret += "

    Note that the ::first-letter element is inside the ::first-line"; + ret += " element. Properties set on ::first-line are inherited by"; + ret += " ::first-letter, but are overridden if the same property is"; + ret += " ::first-letter.

    "; + ret += "
    "; + ret += "

    7.3. The ::selection"; + ret += " pseudo-element

    "; + ret += "

    The ::selection pseudo-element applies to the portion"; + ret += " field. This pseudo-element should not be confused with the :checked pseudo-class (which used to be"; + ret += " named :selected)"; + ret += "

    Although the ::selection pseudo-element is dynamic in"; + ret += " [CSS21]) which was originally rendered to a"; + ret += " ::selection state to that other medium, and have all the"; + ret += " required — UAs may omit the ::selection"; + ret += "

    These are the CSS properties that apply to ::selection"; + ret += " ::selection may be ignored."; + ret += "

    7.4. The ::before and ::after pseudo-elements

    "; + ret += "

    The ::before and ::after pseudo-elements"; + ret += " content. They are explained in CSS 2.1 [CSS21].

    "; + ret += "

    When the ::first-letter and ::first-line"; + ret += " pseudo-elements are combined with ::before and"; + ret += " ::after, they apply to the first letter or line of the"; + ret += " element including the inserted text.

    "; + ret += "

    8. Combinators

    "; + ret += "

    8.1. Descendant combinator

    "; + ret += "

    At times, authors may want selectors to describe an element that is"; + ret += " EM element that is contained within an H1"; + ret += " descendant combinator is white space that"; + ret += " separates two sequences of simple selectors. A selector of the form"; + ret += " 'A B' represents an element B that is an"; + ret += " arbitrary descendant of some ancestor element A."; + ret += "

    "; + ret += "

    Examples:

    "; + ret += "

    For example, consider the following selector:

    "; + ret += " 
    h1 em
    "; + ret += "

    It represents an em element being the descendant of"; + ret += " an h1 element. It is a correct and valid, but partial,"; + ret += " description of the following fragment:

    "; + ret += " 
    <h1>This <span class='myclass'>headline";
+    ret += "      is <em>very</em> important</span></h1>
    "; + ret += "

    The following selector:

    "; + ret += " 
    div * p
    "; + ret += "

    represents a p element that is a grandchild or later"; + ret += " descendant of a div element. Note the whitespace on"; + ret += " of the P.

    "; + ret += "

    The following selector, which combines descendant combinators and"; + ret += " attribute selectors, represents an"; + ret += " element that (1) has the href attribute set and (2) is"; + ret += " inside a p that is itself inside a div:

    "; + ret += " 
    div p *[href]
    "; + ret += "
    "; + ret += "

    8.2. Child combinators

    "; + ret += "

    A child combinator describes a childhood relationship"; + ret += " 'greater-than sign' (>) character and"; + ret += " separates two sequences of simple selectors."; + ret += "

    "; + ret += "

    Examples:

    "; + ret += "

    The following selector represents a p element that is"; + ret += " child of body:

    "; + ret += " 
    body > p
    "; + ret += "

    The following example combines descendant combinators and child"; + ret += " combinators.

    "; + ret += " 
    div ol>li p
    "; + ret += " "; + ret += "

    It represents a p element that is a descendant of an"; + ret += " li element; the li element must be the"; + ret += " child of an ol element; the ol element must"; + ret += " be a descendant of a div. Notice that the optional white"; + ret += " space around the '>' combinator has been left out.

    "; + ret += "
    "; + ret += "

    For information on selecting the first child of an element, please"; + ret += " see the section on the :first-child pseudo-class"; + ret += " above.

    "; + ret += "

    8.3. Sibling combinators

    "; + ret += "

    There are two different sibling combinators: the adjacent sibling"; + ret += " considering adjacency of elements.

    "; + ret += "

    8.3.1. Adjacent sibling combinator"; + ret += "

    "; + ret += "

    The adjacent sibling combinator is made of the 'plus"; + ret += " sign' (U+002B, +) character that separates two"; + ret += " sequences of simple selectors. The elements represented by the two"; + ret += " represented by the second one.

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += "

    The following selector represents a p element"; + ret += " immediately following a math element:

    "; + ret += " 
    math + p
    "; + ret += "

    The following selector is conceptually similar to the one in the"; + ret += " adds a constraint to the h1 element, that it must have"; + ret += " class='opener':

    "; + ret += " 
    h1.opener + h2
    "; + ret += "
    "; + ret += "

    8.3.2. General sibling combinator"; + ret += "

    "; + ret += "

    The general sibling combinator is made of the 'tilde'"; + ret += " (U+007E, ~) character that separates two sequences of"; + ret += " simple selectors. The elements represented by the two sequences share"; + ret += " represented by the second one.

    "; + ret += "
    "; + ret += "

    Example:

    "; + ret += " 
    h1 ~ pre
    "; + ret += "

    represents a pre element following an h1. It"; + ret += " is a correct and valid, but partial, description of:

    "; + ret += " 
    <h1>Definition of the function a</h1>";
+    ret += "      <pre>function a(x) = 12x/13.5</pre>
    "; + ret += "
    "; + ret += "

    9. Calculating a selector's specificity

    "; + ret += "

    A selector's specificity is calculated as follows:

    "; + ret += "
      "; + ret += "
    • count the number of ID selectors in the selector (= a)
      • "; + ret += "
    • count the number of class selectors, attributes selectors, and"; + ret += "
      • "; + ret += "
    • count the number of element names in the selector (= c)
      • "; + ret += "
    • ignore pseudo-elements
      • "; + ret += "
    "; + ret += "

    Selectors inside the negation pseudo-class"; + ret += " a pseudo-class.

    "; + ret += "

    Concatenating the three numbers a-b-c (in a number system with a"; + ret += " large base) gives the specificity.

    "; + ret += "
    "; + ret += "

    Examples:

    "; + ret += " 
    *               /* a=0 b=0 c=0 -> specificity =   0 */";
+    ret += "
    "; + ret += "
    "; + ret += "

    Note: the specificity of the styles"; + ret += " specified in an HTML style attribute is described in CSS"; + ret += " 2.1. [CSS21].

    "; + ret += "

    10. The grammar of Selectors

    "; + ret += "

    10.1. Grammar

    "; + ret += "

    The grammar below defines the syntax of Selectors. It is globally"; + ret += " shorthand notations beyond Yacc (see [YACC])"; + ret += " are used:

    "; + ret += "
      "; + ret += "
    • *: 0 or more"; + ret += "
    • +: 1 or more"; + ret += "
    • ?: 0 or 1"; + ret += "
    • |: separates alternatives"; + ret += "
    • [ ]: grouping
      • "; + ret += "
    "; + ret += "

    The productions are:

    "; + ret += " 
    selectors_group";
+    ret += "        ;
    "; + ret += "

    10.2. Lexical scanner

    "; + ret += "

    The following is the tokenizer, written in Flex (see"; + ret += " [FLEX]) notation. The tokenizer is"; + ret += " case-insensitive.

    "; + ret += "

    The two occurrences of '\377' represent the highest character"; + ret += " possible code point in Unicode/ISO-10646. [UNICODE]

    "; + ret += " 
    %option case-insensitive";
+    ret += "      .                return *yytext;
    "; + ret += "

    11. Namespaces and down-level clients

    "; + ret += "

    An important issue is the interaction of CSS selectors with XML"; + ret += " to construct a CSS style sheet which will properly match selectors in"; + ret += " is possible to construct a style sheet in which selectors would match"; + ret += " elements and attributes correctly.

    "; + ret += "

    It should be noted that a down-level CSS client will (if it"; + ret += " @namespace at-rules, as well as all style rules that make"; + ret += " use of namespace qualified element type or attribute selectors. The"; + ret += " than possibly match them incorrectly.

    "; + ret += "

    The use of default namespaces in CSS makes it possible to write"; + ret += " element type selectors that will function in both namespace aware CSS"; + ret += " down-level clients may incorrectly match selectors against XML"; + ret += " elements in other namespaces.

    "; + ret += "

    The following are scenarios and examples in which it is possible to"; + ret += " that do not implement this proposal.

    "; + ret += "
      "; + ret += "
    1. "; + ret += "

      The XML document does not use namespaces.

      "; + ret += "
        "; + ret += "
      • In this case, it is obviously not necessary to declare or use"; + ret += " attribute selectors will function adequately in a down-level"; + ret += "
        • "; + ret += "
      • In a CSS namespace aware client, the default behavior of"; + ret += " element selectors matching without regard to namespace will"; + ret += " present. However, the use of specific element type selectors"; + ret += " match only elements that have no namespace ('|name')"; + ret += " will guarantee that selectors will match only XML elements that"; + ret += "
        • "; + ret += "
      "; + ret += "
      2. "; + ret += "
    2. "; + ret += "

      The XML document defines a single, default namespace used"; + ret += " names.

      "; + ret += "
        "; + ret += "
      • In this case, a down-level client will function as if"; + ret += " element type and attribute selectors will match against all"; + ret += "
        • "; + ret += "
      "; + ret += "
      3. "; + ret += "
    3. "; + ret += "

      The XML document does not use a default namespace, all"; + ret += " to the same URI).

      "; + ret += "
        "; + ret += "
      • In this case, the down-level client will view and match"; + ret += " element type and attribute selectors based on their fully"; + ret += " qualified name, not the local part as outlined in the Type selectors and Namespaces"; + ret += " selectors may be declared using an escaped colon"; + ret += " '\\:'"; + ret += " 'html\\:h1' will match"; + ret += " <html:h1>. Selectors using the qualified name"; + ret += "
        • "; + ret += "
      • Note that selectors declared in this fashion will"; + ret += " only match in down-level clients. A CSS namespace aware"; + ret += " client will match element type and attribute selectors based on"; + ret += " the name's local part. Selectors declared with the fully"; + ret += "
        • "; + ret += "
      "; + ret += "
      4. "; + ret += "
    "; + ret += "

    In other scenarios: when the namespace prefixes used in the XML are"; + ret += " different namespace URIs within the same document, or in"; + ret += " a CSS and XML namespace aware client.

    "; + ret += "

    12. Profiles

    "; + ret += "

    Each specification using Selectors must define the subset of W3C"; + ret += " Selectors it allows and excludes, and describe the local meaning of"; + ret += " all the components of that subset.

    "; + ret += "

    Non normative examples:"; + ret += "

    "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
    Selectors profile
    SpecificationCSS level 1
    Acceptstype selectors
    class selectors
    ID selectors
    :link,"; + ret += " :visited and :active pseudo-classes
    descendant combinator"; + ret += "
    ::first-line and ::first-letter pseudo-elements"; + ret += "
    Excludes"; + ret += "

    universal selector
    attribute selectors
    :hover and"; + ret += " pseudo-classes
    :target pseudo-class
    :lang()"; + ret += " pseudo-class
    all UI"; + ret += " element states pseudo-classes
    all structural"; + ret += " pseudo-classes
    negation pseudo-class
    all"; + ret += " UI element fragments pseudo-elements
    ::before and ::after"; + ret += " pseudo-elements
    child combinators
    sibling combinators"; + ret += "

    namespaces

    Extra constraintsonly one class selector allowed per sequence of simple"; + ret += " selectors"; + ret += "
    "; + ret += "

    "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
    Selectors profile
    SpecificationCSS level 2
    Acceptstype selectors
    universal selector
    attribute presence and"; + ret += " values selectors
    class selectors
    ID selectors
    :link,"; + ret += "
    descendant combinator
    child combinator
    adjacent"; + ret += " combinator
    ::first-line and ::first-letter"; + ret += " pseudo-elements
    ::before"; + ret += "
    Excludes"; + ret += "

    content selectors
    substring matching attribute"; + ret += " selectors
    :target pseudo-classes
    all UI element"; + ret += " states pseudo-classes
    all structural pseudo-classes other"; + ret += " than :first-child
    negation pseudo-class
    all UI element"; + ret += " fragments pseudo-elements
    general sibling combinators"; + ret += "

    namespaces

    Extra constraintsmore than one class selector per sequence of simple selectors"; + ret += "
    "; + ret += "

    In CSS, selectors express pattern matching rules that determine which"; + ret += "

    The following selector (CSS level 2) will match all anchors a"; + ret += " with attribute name set inside a section 1 header"; + ret += " h1:"; + ret += " 

    h1 a[name]
    "; + ret += "

    All CSS declarations attached to such a selector are applied to elements"; + ret += " matching it.

    "; + ret += "
    "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
    Selectors profile
    SpecificationSTTS 3
    Accepts"; + ret += "

    type selectors
    universal selectors
    attribute"; + ret += " selectors
    class"; + ret += " selectors
    ID selectors
    all structural"; + ret += " pseudo-classes
    "; + ret += "

    namespaces

    Excludesnon-accepted pseudo-classes
    pseudo-elements
    Extra constraintssome selectors and combinators are not allowed in fragment"; + ret += "
    "; + ret += "

    Selectors can be used in STTS 3 in two different"; + ret += "

      "; + ret += "
    1. a selection mechanism equivalent to CSS selection mechanism:"; + ret += "
    2. fragment descriptions that appear on the right side of declarations."; + ret += "
      3. "; + ret += "
    "; + ret += "
    "; + ret += "

    13. Conformance and requirements

    "; + ret += "

    This section defines conformance with the present specification only."; + ret += "

    The inability of a user agent to implement part of this specification due to"; + ret += "

    All specifications reusing Selectors must contain a Profile listing the"; + ret += " subset of Selectors it accepts or excludes, and describing the constraints"; + ret += "

    Invalidity is caused by a parsing error, e.g. an unrecognized token or a"; + ret += "

    User agents must observe the rules for handling parsing errors:"; + ret += "

      "; + ret += "
    • a simple selector containing an undeclared namespace prefix is invalid"; + ret += "
      • "; + ret += "
    • a selector containing an invalid simple selector, an invalid combinator"; + ret += "
      • "; + ret += "
    • a group of selectors containing an invalid selector is invalid.
      • "; + ret += "
    "; + ret += "

    Specifications reusing Selectors must define how to handle parsing"; + ret += " used is dropped.)

    "; + ret += " "; + ret += "

    14. Tests

    "; + ret += "

    This specification has a test"; + ret += " suite allowing user agents to verify their basic conformance to"; + ret += " and does not cover all possible combined cases of Selectors.

    "; + ret += "

    15. Acknowledgements

    "; + ret += "

    The CSS working group would like to thank everyone who has sent"; + ret += " comments on this specification over the years.

    "; + ret += "

    The working group would like to extend special thanks to Donna"; + ret += " the final editorial review.

    "; + ret += "

    16. References

    "; + ret += "
    "; + ret += "
    [CSS1]"; + ret += "
    Bert Bos, HÃ¥kon Wium Lie; 'Cascading"; + ret += " Style Sheets, level 1', W3C Recommendation, 17 Dec 1996, revised"; + ret += "
    (http://www.w3.org/TR/REC-CSS1)"; + ret += "
    [CSS21]"; + ret += "
    Bert Bos, Tantek Çelik, Ian Hickson, Håkon"; + ret += " Wium Lie, editors; 'Cascading Style Sheets, level 2 revision"; + ret += " 1', W3C Working Draft, 13 June 2005"; + ret += "
    (http://www.w3.org/TR/CSS21)"; + ret += "
    [CWWW]"; + ret += "
    Martin J. Dürst, François Yergeau,"; + ret += " Misha Wolf, Asmus Freytag, Tex Texin, editors; 'Character Model"; + ret += " for the World Wide Web', W3C Recommendation, 15 February 2005"; + ret += "
    (http://www.w3.org/TR/charmod/)"; + ret += "
    [FLEX]"; + ret += "
    'Flex: The Lexical Scanner"; + ret += " Generator', Version 2.3.7, ISBN 1882114213"; + ret += "
    [HTML4]"; + ret += "
    Dave Ragget, Arnaud Le Hors, Ian Jacobs,"; + ret += " editors; 'HTML 4.01 Specification', W3C Recommendation, 24"; + ret += "
    "; + ret += " (http://www.w3.org/TR/html4/)"; + ret += "
    [MATH]"; + ret += "
    Patrick Ion, Robert Miner, editors; 'Mathematical"; + ret += " Markup Language (MathML) 1.01', W3C Recommendation, revision of 7"; + ret += "
    (http://www.w3.org/TR/REC-MathML/)"; + ret += "
    [RFC3066]"; + ret += "
    H. Alvestrand; 'Tags for the"; + ret += " Identification of Languages', Request for Comments 3066, January"; + ret += "
    (http://www.ietf.org/rfc/rfc3066.txt)"; + ret += "
    [STTS]"; + ret += "
    Daniel Glazman; 'Simple Tree Transformation"; + ret += " Sheets 3', Electricité de France, submission to the W3C,"; + ret += "
    (http://www.w3.org/TR/NOTE-STTS3)"; + ret += "
    [SVG]"; + ret += "
    Jon Ferraiolo, 藤沢 淳, Dean"; + ret += " Jackson, editors; 'Scalable Vector Graphics (SVG) 1.1"; + ret += " Specification', W3C Recommendation, 14 January 2003"; + ret += "
    (http://www.w3.org/TR/SVG/)"; + ret += "
    [UNICODE]
    "; + ret += "
    The Unicode"; + ret += " Standard, Version 4.1, The Unicode Consortium. Boston, MA,"; + ret += " Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by Unicode"; + ret += " 4.0.1 and Unicode"; + ret += " 4.1.0."; + ret += "
    (http://www.unicode.org/versions/)"; + ret += "
    "; + ret += "
    [XML10]"; + ret += "
    Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,"; + ret += " Eve Maler, François Yergeau, editors; 'Extensible Markup"; + ret += " Language (XML) 1.0 (Third Edition)', W3C Recommendation, 4"; + ret += "
    (http://www.w3.org/TR/REC-xml/)"; + ret += "
    [XMLNAMES]"; + ret += "
    Tim Bray, Dave Hollander, Andrew Layman,"; + ret += " editors; 'Namespaces in XML', W3C Recommendation, 14"; + ret += "
    (http://www.w3.org/TR/REC-xml-names/)"; + ret += "
    [YACC]"; + ret += "
    S. C. Johnson; 'YACC — Yet another"; + ret += " compiler compiler', Technical Report, Murray Hill, 1975"; + ret += "
    ';
    "; + ret += " 1"; + ret += " 2"; + $(e).html(ret); + } + +} diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java index 5bc16db9..82b46944 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java @@ -1,103 +1,103 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package gwtquery.samples.client; - -import static com.google.gwt.query.client.GQuery.$; -import static com.google.gwt.query.client.plugins.Effects.Effects; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.core.client.GWT; -import com.google.gwt.dom.client.Element; -import com.google.gwt.dom.client.Node; -import com.google.gwt.dom.client.NodeList; -import com.google.gwt.query.client.Function; -import com.google.gwt.query.client.GQuery; -import com.google.gwt.query.client.Selector; -import com.google.gwt.query.client.Selectors; -import com.google.gwt.query.client.plugins.Effects.Speed; -import com.google.gwt.user.client.Event; - -/** - * - */ -public class GwtQueryDemoModule implements EntryPoint { - - // Compile-time Selectors! - public interface Slide extends Selectors { - - // find all LI elements in DIV.slide elements - @Selector("div.slide li") - NodeList allSlideBullets(); - - // Find all DIV elements with class 'slide' - @Selector("div.slide") - NodeList allSlides(); - - // find all LI elements rooted at ctx - @Selector("li") - NodeList slideBulletsCtx(Node ctx); - } - - public void onModuleLoad() { - // Ask GWT compiler to generate our interface - final Slide s = GWT.create(Slide.class); - final GQuery slides = $(s.allSlides()); - - // we initially hide all slides and bullets - slides.hide().eq(0).as(Effects).clipAppear(); - $(s.allSlideBullets()).hide(); - - - // add onclick handler to body element - $(slides).click(new Function() { - // two state variables to note current slide being shown - // and current bullet - int curSlide = 0; - int curBullets = 0; - - // query and store all bullets of current slide - GQuery bullets = $(s.slideBulletsCtx(slides.get(curSlide))); - - public boolean f(Event e) { - // onclick, if not all bullets shown, show a bullet and increment - if (curBullets < bullets.size()) { - bullets.eq(curBullets++).as(Effects).fadeIn(Speed.SLOW); - } else { - // all bullets shown, hide them and current slide - bullets.hide(); - - // move to next slide, checking for wrap around - int lastSlide = curSlide++; - if (curSlide == slides.size()) { - curSlide = 0; - } - - // query for new set of bullets, and show next slide - curBullets = 0; - bullets = $(s.slideBulletsCtx(slides.get(curSlide))); - - // Hide the last slide and show the next when the effects finishes - slides.eq(lastSlide).as(Effects).fadeOut(new Function() { - public void f(Element e) { - slides.eq(curSlide).as(Effects).clipAppear(); - } - }); - } - return true; - } - }); - } -} +/* + * Copyright 2011, The gwtquery team. + * + * 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. + */ +package gwtquery.samples.client; + +import static com.google.gwt.query.client.GQuery.$; +import static com.google.gwt.query.client.plugins.Effects.Effects; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.core.client.GWT; +import com.google.gwt.dom.client.Element; +import com.google.gwt.dom.client.Node; +import com.google.gwt.dom.client.NodeList; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.GQuery; +import com.google.gwt.query.client.Selector; +import com.google.gwt.query.client.Selectors; +import com.google.gwt.query.client.plugins.Effects.Speed; +import com.google.gwt.user.client.Event; + +/** + * + */ +public class GwtQueryDemoModule implements EntryPoint { + + // Compile-time Selectors! + public interface Slide extends Selectors { + + // find all LI elements in DIV.slide elements + @Selector("div.slide li") + NodeList allSlideBullets(); + + // Find all DIV elements with class 'slide' + @Selector("div.slide") + NodeList allSlides(); + + // find all LI elements rooted at ctx + @Selector("li") + NodeList slideBulletsCtx(Node ctx); + } + + public void onModuleLoad() { + // Ask GWT compiler to generate our interface + final Slide s = GWT.create(Slide.class); + final GQuery slides = $(s.allSlides()); + + // we initially hide all slides and bullets + slides.hide().eq(0).as(Effects).clipAppear(); + $(s.allSlideBullets()).hide(); + + + // add onclick handler to body element + $(slides).click(new Function() { + // two state variables to note current slide being shown + // and current bullet + int curSlide = 0; + int curBullets = 0; + + // query and store all bullets of current slide + GQuery bullets = $(s.slideBulletsCtx(slides.get(curSlide))); + + public boolean f(Event e) { + // onclick, if not all bullets shown, show a bullet and increment + if (curBullets < bullets.size()) { + bullets.eq(curBullets++).as(Effects).fadeIn(Speed.SLOW); + } else { + // all bullets shown, hide them and current slide + bullets.hide(); + + // move to next slide, checking for wrap around + int lastSlide = curSlide++; + if (curSlide == slides.size()) { + curSlide = 0; + } + + // query for new set of bullets, and show next slide + curBullets = 0; + bullets = $(s.slideBulletsCtx(slides.get(curSlide))); + + // Hide the last slide and show the next when the effects finishes + slides.eq(lastSlide).as(Effects).fadeOut(new Function() { + public void f(Element e) { + slides.eq(curSlide).as(Effects).clipAppear(); + } + }); + } + return true; + } + }); + } +} diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java index 8f5157ad..563f29e7 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java @@ -1,123 +1,123 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package gwtquery.samples.client; - -import static com.google.gwt.query.client.GQuery.$; -import static com.google.gwt.query.client.GQuery.$$; -import static com.google.gwt.query.client.GQuery.lazy; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.dom.client.Element; -import com.google.gwt.dom.client.Style.Position; -import com.google.gwt.query.client.Function; -import com.google.gwt.query.client.css.CSS; -import com.google.gwt.query.client.css.Length; -import com.google.gwt.query.client.css.RGBColor; -import com.google.gwt.query.client.plugins.Effects; -import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; -import com.google.gwt.user.client.Event; - -public class GwtQueryEffectsModule implements EntryPoint { - - public void onModuleLoad() { - $("div > div").css(CSS.COLOR.with(RGBColor.BLUE)) - .hover(lazy().css(CSS.COLOR.with(RGBColor.RED)).done(), - lazy().css(CSS.COLOR.with(RGBColor.BLUE)).done()); - - $("div.outer > div").css(CSS.POSITION.with(Position.RELATIVE)).dblclick(new Function() { - public boolean f(Event e) { - $("div.outer > div").as(Effects.Effects). - animate($$("left: '+=100'"), 400, Easing.LINEAR). - animate($$("top: '+=100'"), 400, Easing.LINEAR). - animate($$("left: '-=100'"), 400, Easing.LINEAR). - animate($$("top: '-=100'"), 400, Easing.LINEAR); - return true; - } - }); - $(".note").click(lazy().fadeOut().done()); - $(".note").append(" Hello"); - - final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects); - final Effects b = $(".b > div:nth-child(odd)").as(Effects.Effects); - - $("#b0").width(150).css(CSS.FONT_SIZE.with(Length.px(10))).toggle(new Function() { - public void f(Element e) { - $("#b0").as(Effects.Effects).animate(" width: '400', opacity: '0.4', marginLeft: '0.6in', fontSize: '24px'"); - } - }, new Function() { - public void f(Element e) { - $("#b0").as(Effects.Effects).animate(" width: '150', opacity: '1', marginLeft: '0', fontSize: '10px'"); - } - }); - - $("#b1").toggle(new Function() { - public void f(Element e) { - $(".a").toggle(); - } - }, new Function() { - public void f(Element e) { - a.fadeOut(); - } - }, new Function() { - public void f(Element e) { - a.fadeIn(); - } - }, new Function() { - public void f(Element e) { - a.slideUp(); - } - }, new Function() { - public void f(Element e) { - a.slideDown(); - } - }, new Function() { - public void f(Element e) { - a.slideLeft(); - } - }, new Function() { - public void f(Element e) { - a.slideRight(); - } - }, new Function() { - public void f(Element e) { - a.animate("left: '+=300', width: 'hide'"); - } - }, new Function() { - public void f(Element e) { - a.animate("left: '-=300', width: 'show'"); - } - }); - - $("#b2").toggle(new Function() { - public void f(Element e) { - b.as(Effects.Effects).clipUp(); - } - }, new Function() { - public void f(Element e) { - b.as(Effects.Effects).clipDown(); - } - }, new Function() { - public void f(Element e) { - b.as(Effects.Effects).clipDisappear(); - } - }, new Function() { - public void f(Element e) { - b.as(Effects.Effects).clipAppear(); - } - }); - - } -} +/* + * Copyright 2011, The gwtquery team. + * + * 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. + */ +package gwtquery.samples.client; + +import static com.google.gwt.query.client.GQuery.$; +import static com.google.gwt.query.client.GQuery.$$; +import static com.google.gwt.query.client.GQuery.lazy; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.dom.client.Element; +import com.google.gwt.dom.client.Style.Position; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.css.CSS; +import com.google.gwt.query.client.css.Length; +import com.google.gwt.query.client.css.RGBColor; +import com.google.gwt.query.client.plugins.Effects; +import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; +import com.google.gwt.user.client.Event; + +public class GwtQueryEffectsModule implements EntryPoint { + + public void onModuleLoad() { + $("div > div").css(CSS.COLOR.with(RGBColor.BLUE)) + .hover(lazy().css(CSS.COLOR.with(RGBColor.RED)).done(), + lazy().css(CSS.COLOR.with(RGBColor.BLUE)).done()); + + $("div.outer > div").css(CSS.POSITION.with(Position.RELATIVE)).dblclick(new Function() { + public boolean f(Event e) { + $("div.outer > div").as(Effects.Effects). + animate($$("left: '+=100'"), 400, Easing.LINEAR). + animate($$("top: '+=100'"), 400, Easing.LINEAR). + animate($$("left: '-=100'"), 400, Easing.LINEAR). + animate($$("top: '-=100'"), 400, Easing.LINEAR); + return true; + } + }); + $(".note").click(lazy().fadeOut().done()); + $(".note").append(" Hello"); + + final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects); + final Effects b = $(".b > div:nth-child(odd)").as(Effects.Effects); + + $("#b0").width(150).css(CSS.FONT_SIZE.with(Length.px(10))).toggle(new Function() { + public void f(Element e) { + $("#b0").as(Effects.Effects).animate(" width: '400', opacity: '0.4', marginLeft: '0.6in', fontSize: '24px'"); + } + }, new Function() { + public void f(Element e) { + $("#b0").as(Effects.Effects).animate(" width: '150', opacity: '1', marginLeft: '0', fontSize: '10px'"); + } + }); + + $("#b1").toggle(new Function() { + public void f(Element e) { + $(".a").toggle(); + } + }, new Function() { + public void f(Element e) { + a.fadeOut(); + } + }, new Function() { + public void f(Element e) { + a.fadeIn(); + } + }, new Function() { + public void f(Element e) { + a.slideUp(); + } + }, new Function() { + public void f(Element e) { + a.slideDown(); + } + }, new Function() { + public void f(Element e) { + a.slideLeft(); + } + }, new Function() { + public void f(Element e) { + a.slideRight(); + } + }, new Function() { + public void f(Element e) { + a.animate("left: '+=300', width: 'hide'"); + } + }, new Function() { + public void f(Element e) { + a.animate("left: '-=300', width: 'show'"); + } + }); + + $("#b2").toggle(new Function() { + public void f(Element e) { + b.as(Effects.Effects).clipUp(); + } + }, new Function() { + public void f(Element e) { + b.as(Effects.Effects).clipDown(); + } + }, new Function() { + public void f(Element e) { + b.as(Effects.Effects).clipDisappear(); + } + }, new Function() { + public void f(Element e) { + b.as(Effects.Effects).clipAppear(); + } + }); + + } +} diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java index 130ae116..95f55410 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java @@ -1,46 +1,46 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package gwtquery.samples.client; - -import static com.google.gwt.query.client.GQuery.$; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.dom.client.Element; -import com.google.gwt.query.client.Function; -import com.google.gwt.query.client.plugins.Effects; - -/** - * @author Manolo Carrasco - */ -public class GwtQueryImageZoom implements EntryPoint { - - public void onModuleLoad() { - // Fancy Thumbnail Hover Effect w/ jQuery - by Soh Tanaka - // http://www.sohtanaka.com/web-design/examples/image-zoom/ - $("ul.thumb li").hover(new Function() { - public void f(Element e) { - $(e).css("z-index", "10").find("img").addClass("hover") - .as(Effects.Effects).stop() - .animate("marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px'", 200); - }} , new Function() { - public void f(Element e) { - $(e).css("z-index", "0").find("img").removeClass("hover") - .as(Effects.Effects).stop() - .animate("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'", 600); - }}); - - } -} +/* + * Copyright 2011, The gwtquery team. + * + * 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. + */ +package gwtquery.samples.client; + +import static com.google.gwt.query.client.GQuery.$; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.dom.client.Element; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.plugins.Effects; + +/** + * @author Manolo Carrasco + */ +public class GwtQueryImageZoom implements EntryPoint { + + public void onModuleLoad() { + // Fancy Thumbnail Hover Effect w/ jQuery - by Soh Tanaka + // http://www.sohtanaka.com/web-design/examples/image-zoom/ + $("ul.thumb li").hover(new Function() { + public void f(Element e) { + $(e).css("z-index", "10").find("img").addClass("hover") + .as(Effects.Effects).stop() + .animate("marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px'", 200); + }} , new Function() { + public void f(Element e) { + $(e).css("z-index", "0").find("img").removeClass("hover") + .as(Effects.Effects).stop() + .animate("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'", 600); + }}); + + } +} diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java index 581d34ae..0d35c10e 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java @@ -1,80 +1,80 @@ -/* - * Copyright 2011, The gwtquery team. - * - * 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. - */ -package gwtquery.samples.client; - -import static com.google.gwt.query.client.GQuery.$; -import static com.google.gwt.query.client.GQuery.document; -import static com.google.gwt.query.client.GQuery.lazy; -import static com.google.gwt.query.client.plugins.Widgets.Widgets; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.core.client.GWT; -import com.google.gwt.dom.client.Element; -import com.google.gwt.dom.client.Style.Cursor; -import com.google.gwt.event.dom.client.ClickEvent; -import com.google.gwt.event.dom.client.ClickHandler; -import com.google.gwt.query.client.GQuery; -import com.google.gwt.query.client.Selector; -import com.google.gwt.query.client.Selectors; -import com.google.gwt.query.client.css.CSS; -import com.google.gwt.query.client.css.RGBColor; -import com.google.gwt.query.client.plugins.widgets.WidgetInitializer; -import com.google.gwt.user.client.Window; -import com.google.gwt.user.client.ui.Button; -import com.google.gwt.user.client.ui.Label; - -public class GwtQuerySampleModule implements EntryPoint { - - public interface Sample extends Selectors { - @Selector(".note") - GQuery allNotes(); - } - - public void onModuleLoad() { - // Use compiled selectors - Sample s = GWT.create(Sample.class); - - // Just a simple usage of dom manipulation, events, and lazy usage - s.allNotes().text("Hello Google I/O"). - css(CSS.CURSOR.with(Cursor.POINTER)). - toggle( - lazy().css(CSS.COLOR.with(RGBColor.RED)).done(), - lazy().css(CSS.COLOR.with(null)).done() - ); - // Cascade effects - $("
    Cascade Efects
    ").appendTo(document).hide().fadeIn(5000).fadeOut(3000); - - // Widgets - $(".btn").as(Widgets).button(new WidgetInitializer -
    -
    - -
    -
    - - + + + +GQuery Effects Sample + + + + +

    Animation, queue and delay methods

    +

    This example shows you how using gwtquery to make animation

    +
    + +
    +
    + +
    +
    + + diff --git a/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html b/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html index 9624dd03..fe55faa2 100644 --- a/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html +++ b/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html @@ -1,51 +1,51 @@ - - - -GQuery Effects Sample - - - - -

    Animate css color properties

    -

    This example shows you how using gwtquery to perform animation on -color css properties (backgroundColor, color, corderColor...). Have a look at the java code

    -
    - -
    -
    BANG !
    -
    - - -
    -
    GwtQuery
    - - + + + +GQuery Effects Sample + + + + +

    Animate css color properties

    +

    This example shows you how using gwtquery to perform animation on +color css properties (backgroundColor, color, corderColor...). Have a look at the java code

    +
    + +
    +
    BANG !
    +
    + + +
    +
    GwtQuery
    + + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html index ac758024..3cfced81 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html @@ -1,176 +1,176 @@ - - - - - GwtQuery Benchmarks - - - -

    - GwtQuery benchmarks -

    -
    About
    -
    Loading Javascript frameworks, please wait ...

    -
    -
    -
    -
    -
    - -
    - -
    -
    - - - - - - + + + + + GwtQuery Benchmarks + + + +

    + GwtQuery benchmarks +

    +
    About
    +
    Loading Javascript frameworks, please wait ...

    +
    +
    +
    +
    +
    + +
    + +
    +
    + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html index 211e3e0f..c9a78113 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html @@ -1,50 +1,50 @@ - - - GQuery Demo - - - - -

    - Short example of how to do progressively enhance DIV, UL, LI elements into - powerpoint-like slides -

    - -
    - Slide 1 -
      -
    • jQuery is
      • -
    • such a
      • -
    • Cool Library
      • -
    -
    -
    - Slide 2 -
      -
    • Now GWT
      • -
    • has a
      • -
    • jQuery-like API Too!
      • -
    • GwtQuery Rocks!
      • -
    -
    - - - - \ No newline at end of file + + + GQuery Demo + + + + +

    + Short example of how to do progressively enhance DIV, UL, LI elements into + powerpoint-like slides +

    + +
    + Slide 1 +
      +
    • jQuery is
      • +
    • such a
      • +
    • Cool Library
      • +
    +
    +
    + Slide 2 +
      +
    • Now GWT
      • +
    • has a
      • +
    • jQuery-like API Too!
      • +
    • GwtQuery Rocks!
      • +
    +
    + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html index e1bb5861..b0a2d8d4 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html @@ -1,65 +1,65 @@ - - - - - GQuery Demo - - - - -
    - Click or DblClick on these notes -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    -
    -
    - - -
    -
    -
    -Span 1 -Span 2 -Span 3 -
    -
    -
    -
    Div 1
    -
    Div 2
    -
    Div 3
    -
    Div 4
    -
    - - - \ No newline at end of file + + + + + GQuery Demo + + + + +
    + Click or DblClick on these notes +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    +
    +
    + + +
    +
    +
    +Span 1 +Span 2 +Span 3 +
    +
    +
    +
    Div 1
    +
    Div 2
    +
    Div 3
    +
    Div 4
    +
    + + + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffectsMin.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffectsMin.html index 021f6ef5..857e9fd3 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffectsMin.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffectsMin.html @@ -1,65 +1,65 @@ - - - - - GQuery Demo - - - - -
    - Click or DblClick on these notes -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    Foo bar baz
    -
    -
    -
    - - -
    -
    -
    -Span 1 -Span 2 -Span 3 -
    -
    -
    -
    Div 1
    -
    Div 2
    -
    Div 3
    -
    Div 4
    -
    - - - \ No newline at end of file + + + + + GQuery Demo + + + + +
    + Click or DblClick on these notes +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    Foo bar baz
    +
    +
    +
    + + +
    +
    +
    +Span 1 +Span 2 +Span 3 +
    +
    +
    +
    Div 1
    +
    Div 2
    +
    Div 3
    +
    Div 4
    +
    + + + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html index 9c01206d..659baad8 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html @@ -6,11 +6,11 @@ - - -

    Slide Effects Sample

    -

    This page lists and shows all slide effects available in GwtQuery

    - - - - - - - - - - - - - - - - - - -
    -

    SlideUp

    -
    -
    Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Vestibulum ultricies - nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed - vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam - venenatis dictum sem, eget euismod dui laoreet non. Morbi in - diam nibh.
    - - -
    -     		-

    SlideLeft

    -
    -
    Lorem - ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum - ultricies nulla condimentum diam viverra vitae hendrerit lorem - tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a - nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. - Morbi in diam nibh.
    - - -
    -
    -

    SlideDown

    -
    -
    Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Vestibulum ultricies - nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed - vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam - venenatis dictum sem, eget euismod dui laoreet non. Morbi in - diam nibh.
    - - -
    -     		-

    SlideRight

    -
    -
    Lorem - ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum - ultricies nulla condimentum diam viverra vitae hendrerit lorem - tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a - nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. - Morbi in diam nibh.
    - - -
    -
    -

    SlideToogle

    -
    -
    Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Vestibulum ultricies - nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed - vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam - venenatis dictum sem, eget euismod dui laoreet non. Morbi in - diam nibh.
    - -
    - - + + + +GQuery Effects Sample + + + + +

    Slide Effects Sample

    +

    This page lists and shows all slide effects available in GwtQuery

    + + + + + + + + + + + + + + + + + + +
    +

    SlideUp

    +
    +
    Lorem ipsum dolor + sit amet, consectetur adipiscing elit. Vestibulum ultricies + nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed + vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam + venenatis dictum sem, eget euismod dui laoreet non. Morbi in + diam nibh.
    + + +
    +     		+

    SlideLeft

    +
    +
    Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + ultricies nulla condimentum diam viverra vitae hendrerit lorem + tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a + nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. + Morbi in diam nibh.
    + + +
    +
    +

    SlideDown

    +
    +
    Lorem ipsum dolor + sit amet, consectetur adipiscing elit. Vestibulum ultricies + nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed + vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam + venenatis dictum sem, eget euismod dui laoreet non. Morbi in + diam nibh.
    + + +
    +     		+

    SlideRight

    +
    +
    Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + ultricies nulla condimentum diam viverra vitae hendrerit lorem + tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a + nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. + Morbi in diam nibh.
    + + +
    +
    +

    SlideToogle

    +
    +
    Lorem ipsum dolor + sit amet, consectetur adipiscing elit. Vestibulum ultricies + nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed + vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam + venenatis dictum sem, eget euismod dui laoreet non. Morbi in + diam nibh.
    + +
    + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/dojobench.html b/samples/src/main/java/gwtquery/samples/public/html/dojobench.html index 4f4e94db..6979a121 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/dojobench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/dojobench.html @@ -1,13 +1,13 @@ - - - Dojo - - - - - - + + + Dojo + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html b/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html index fc1dab7a..4e65be0c 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html @@ -1,13 +1,13 @@ - - - DomAssistant - - - - - - + + + DomAssistant + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html b/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html index 913ae711..dd32d1bd 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html @@ -4,7 +4,7 @@ + diff --git a/samples/src/main/java/gwtquery/samples/public/html/iframebench.html b/samples/src/main/java/gwtquery/samples/public/html/iframebench.html index 78962fe2..79e717dd 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/iframebench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/iframebench.html @@ -1,42 +1,42 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html b/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html index 45238eaa..9ad083f2 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html @@ -1,13 +1,13 @@ - - - JQuery - - - - - - + + + JQuery + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html b/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html index 448e031b..78855778 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html @@ -1,13 +1,13 @@ - - - Prototype - - - - - - + + + Prototype + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html b/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html index acc7c326..6b2be22e 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html @@ -1,13 +1,13 @@ - - - Sizzle - - - - - - + + + Sizzle + + + + + + -- 2.39.5