- From: Erik Dahlström <ed@opera.com>
- Date: Tue, 17 Mar 2009 13:21:53 +0100
- To: "Charles McCathieNevile" <chaals@opera.com>, "WebApps WG" <public-webapps@w3.org>
On Wed, 04 Mar 2009 11:00:43 +0100, Charles McCathieNevile <chaals@opera.com> wrote:
> Hi folks,
>
> as a result of the great work by many, it seems we have all the things in
> place to move the Selectors API specification directly to Proposed
> Recommendation. In order to do so, we need to demonstrate that we have
> implementations which prove the spec can be implemented in an
> interoperable way.
>
> Thanks to great work by John Resig, informative analysis by Travis, and
> implementatio work by many, it seems this is the case. To clarify that,
> this is a call for consensus on the following question:
>
> The test suite by John Resig, 2009-02-19 version[1] is a sufficiently
> complete test suite for the editor's draft version 1.97[2] of "Selectors
> API"
>
> [1]
> http://github.com/jeresig/selectortest/blob/4827dedddaea6fa0b70cfdaadeeafef0d732a753/index.html
> [2]
> http://dev.w3.org/cvsweb/~checkout~/2006/webapi/selectors-api/Overview.html?rev=1.97&content-type=text/html;%20charset=iso-8859-1
Here's a diff containing changes that makes the proposed testsuite file[1] be XML well-formed, and which adds some tests for SVG elements, and in particular for the <svg:use> element, which has special behaviour wrt CSS selectors[3]:
[[
For user agents that support Styling with CSS, the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade [CSS2-CASCADE] on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.
]]
I'd like to see the changes below in the final Selectors API testsuite, and that the testsuite covers the case where the main document is XHTML.
diff --git a/index.html b/index.html
index 11dee36..849cd36 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,4 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr" id="html" class="unitTest" title=":root selector">
+<html lang="en" dir="ltr" id="html" class="unitTest" title=":root selector" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectorTest</title>
@@ -222,7 +221,7 @@
.foo..quux { background: red; color: yellow; }
.bar. { background: red; color: yellow; }
</style>
- <script>
+ <script><![CDATA[
window.onload = function(){
document.getElementById("toggle").onclick = function(){
document.documentElement.className = this.checked ? "unitTest nopass" : "unitTest";
@@ -712,9 +711,13 @@
t( "Checked UI Element", "#form input:checked", ["radio2","check1"] );
t( "Element Preceded By", "p ~ div", ["foo","fx-queue","fx-tests", "moretests"] );
t( "Not", "a.blog:not(.link)", ["mark"] );
+ t( "Descendent selector on svg:use", "use g", [] );
+ t( "Child selector on svg:use", "g > use", [] );
+ t( "Empty svg:use", "use:empty", ["use1", "use2", "use3"] );
+ t( "Element selector on SVG", "svg#svg4 circle", ["circle4"] );
}
};
- </script>
+ ]]></script>
</head>
<body id="body" class="unitTest" title="childhood and element type selectors">
<h1><a href="http://www.w3.org/TR/selectors-api/">Selectors API</a> Test Suite</h1>
@@ -744,8 +747,8 @@
<div class="test attributeValue">
<div class="blox6 unitTest" align="center" title="attribute value selector"></div>
- <div class="blox6 unitTest" foo="é" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div>
- <div class="blox6 unitTest" _foo="é" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div>
+ <div class="blox6 unitTest" foo="É" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div>
+ <div class="blox6 unitTest" _foo="É" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div>
</div>
<div class="test attributeSpaceSeparatedValues">
@@ -759,21 +762,21 @@
<div class="unitTest t1" title="[^=] attribute selector"></div>
<div class="unitTest t2" title="[^=] attribute selector"></div>
<div class="unitTest t3" align="center" title="[^=] attribute selector looking for empty string"></div>
- <div class="unitTest t4" foo="étagada" title="[^=] attribute selector looking for é"></div>
+ <div class="unitTest t4" foo="Étagada" title="[^=] attribute selector looking for É"></div>
</div>
<div class="test attrEnd">
<div class="unitTest t1" title="[$=] attribute selector"></div>
<div class="unitTest t2" title="[$=] attribute selector"></div>
<div class="unitTest t3" align="center" title="[$=] attribute selector looking for empty string"></div>
- <div class="unitTest t4" foo="tagadaé" title="[$=] attribute selector looking for é"></div>
+ <div class="unitTest t4" foo="tagadaÉ" title="[$=] attribute selector looking for É"></div>
</div>
<div class="test attrMiddle">
<div class="unitTest t1" title="[*=] attribute selector"></div>
<div class="unitTest t2" title="[*=] attribute selector"></div>
<div class="unitTest t3" align="center" title="[*=] attribute selector looking for empty string"></div>
- <div class="unitTest t4" foo="tagadaéfoo" title="[*=] attribute selector looking for é"></div>
+ <div class="unitTest t4" foo="tagadaÉfoo" title="[*=] attribute selector looking for É"></div>
</div>
<div class="test firstChild">
@@ -852,7 +855,7 @@
<div class="test lastChild">
<p class="unitTest" title=":not(:last-child) selector"></p>
- <div class="unitTest" title=":last-child selector"></div>
+ <div class="unitTest" title=":last-child selector"></div> 
</div>
<div class="test firstOfType">
@@ -889,7 +892,7 @@
<div class="unitTest isNotEmpty" title=":empty but element contains a whitespace"> </div>
<div class="unitTest isEmpty" title=":empty and element contains an SGML comment"><!-- foo --></div>
<div class="unitTest isNotEmpty" title=":empty but element contains a SPAN element"><span></span></div>
- <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference"> </div>
+ <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference"> </div>
</div>
<div class="test lang">
@@ -953,8 +956,8 @@
<div class="test attributeValue">
<div class="blox6 unitTest" align="center" title="attribute value selector"></div>
- <div class="blox6 unitTest" foo="é" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div>
- <div class="blox6 unitTest" _foo="é" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div>
+ <div class="blox6 unitTest" foo="É" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div>
+ <div class="blox6 unitTest" _foo="É" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div>
</div>
<div class="test attributeSpaceSeparatedValues">
@@ -968,21 +971,21 @@
<div class="unitTest t1" title="[^=] attribute selector"></div>
<div class="unitTest t2" title="[^=] attribute selector"></div>
<div class="unitTest t3" align="center" title="[^=] attribute selector looking for empty string"></div>
- <div class="unitTest t4" foo="étagada" title="[^=] attribute selector looking for é"></div>
+ <div class="unitTest t4" foo="Étagada" title="[^=] attribute selector looking for É"></div>
</div>
<div class="test attrEnd">
<div class="unitTest t1" title="[$=] attribute selector"></div>
<div class="unitTest t2" title="[$=] attribute selector"></div>
<div class="unitTest t3" align="center" title="[$=] attribute selector looking for empty string"></div>
- <div class="unitTest t4" foo="tagadaé" title="[$=] attribute selector looking for é"></div>
+ <div class="unitTest t4" foo="tagadaÉ" title="[$=] attribute selector looking for É"></div>
</div>
<div class="test attrMiddle">
<div class="unitTest t1" title="[*=] attribute selector"></div>
<div class="unitTest t2" title="[*=] attribute selector"></div>
<div class="unitTest t3" align="center" title="[*=] attribute selector looking for empty string"></div>
- <div class="unitTest t4" foo="tagadaéfoo" title="[*=] attribute selector looking for é"></div>
+ <div class="unitTest t4" foo="tagadaÉfoo" title="[*=] attribute selector looking for É"></div>
</div>
<div class="test firstChild">
@@ -1061,7 +1064,7 @@
<div class="test lastChild">
<p class="unitTest" title=":not(:last-child) selector"></p>
- <div class="unitTest" title=":last-child selector"></div>
+ <div class="unitTest" title=":last-child selector"></div> 
</div>
<div class="test firstOfType">
@@ -1098,7 +1101,7 @@
<div class="unitTest isNotEmpty" title=":empty but element contains a whitespace"> </div>
<div class="unitTest isEmpty" title=":empty and element contains an SGML comment"><!-- foo --></div>
<div class="unitTest isNotEmpty" title=":empty but element contains a SPAN element"><span></span></div>
- <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference"> </div>
+ <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference"> </div>
</div>
<div class="test lang">
@@ -1151,7 +1154,7 @@
<circle id="circle1" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />
</svg>
<!-- svg elements using svg: -->
- <svg:svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" id="svg2">
+ <svg:svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg">
<svg:desc id="desc2">Example circle01 - circle filled with red and stroked with blue</svg:desc>
<svg:rect id="rect2" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/>
<svg:circle id="circle2" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />
@@ -1162,6 +1165,17 @@
<rect id="rect3" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/>
<circle id="circle3" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />
</svg>
+ <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg4">
+ <g id="svggroup4">
+ <desc id="desc4">Example circle01 - circle filled with red and stroked with blue</desc>
+ <rect id="rect4" x="450" y="50" width="300" height="300" fill="currentColor"/>
+ <circle id="circle4" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />
+ </g>
+
+ <use id="use1" xlink:href="#svggroup4" color="yellow"/>
+ <use id="use2" x="300" xlink:href="#svggroup4" color="green"/>
+ <use id="use3" x="-300" xlink:href="#svggroup4" color="purple"/>
+ </svg>
</div>
<h1 id="header">jQuery Test Suite</h1>
Cheers
/Erik
[3] http://www.w3.org/TR/SVG11/struct.html#UseElement
--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed
Received on Tuesday, 17 March 2009 12:24:37 UTC