css3-ui.txt

====== css3-ui faq ======

===== text-overflow for non-latin scripts =====
Q: Many non latin scripts use something else than 3 dots for the same effect as an ellipsis. How does this work?

A: The current editor's draft allows implementations to use something other than 3 dots:

"Implementations may substitute a more language/script-appropriate ellipsis character."

from http://dev.w3.org/csswg/css3-ui/#text-overflow

===== text-overflow atomic inlines that would overlap the ellipsis =====

Q: What should an implementation do when an atomic inline element would overlap the ellipsis marker?

A: Remove it (the atomic inline element(s)) to make room for the ellipsis marker per the CSS3-UI spec (and Opera and IE9 appear to do this already).


====== css3-ui issues list ======

The [[http://www.w3.org/TR/css3-ui/|CSS Basic User Interface Module Level 3]] (CSS3-UI, latest public TR version) defines user interface related selectors, properties and values.

===== Current Issues =====

The following are known problems in/with the [[http://www.w3.org/TR/2004/CR-css3-ui-20040511/|11 May 2004 CSS3-UI Candidate Recommendation]].

For latest edits/resolutions, see the editors draft:
  * http://dev.w3.org/csswg/css3-ui/

==== Issue 1 ====
  ; Summary : css3-ui should have a test suite
  ; Raised by : Tantek Çelik
  ; URL : eventually http://www.w3.org/Style/CSS/Test/#css3-ui
  ; Proposed Resolution : create at least one test case per feature, update "Current Issues" section above to add the text <code>See the [[http://www.w3.org/Style/CSS/Test/#css3-ui|released]] and 
  [[http://dev.w3.org/CSS/css3-ui-test-suite/src/|development]] versions 
  of the test suite for the "Tests" references.</code>
  ; Status : Resolved. LCWD has link to CSS Tests page. Update this to link to specific test suite page for CSS3-UI for the next CR. Pending contributions to test suite.


==== Issue 2 ====
  ; Summary : Change name/title of spec to be consistent with other CSS3 modules
  ; Raised by : Tantek Çelik
  ; URL : n/a
  ; Proposed Resolution : Change name/title of CSS3-ui from "CSS3 Basic User Interface Module" to "CSS Basic User Interface Module Level 3"
  ; Status : resolved in editor's draft. pending publication of public draft.

==== Issue 3 ====
  ; Summary : ::value needs to specify which properties are allowed on that pseudo-element
  ; Raised by : Tab Atkins
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Mar/0158.html
  ; URL : http://www.w3.org/TR/css3-selectors/#first-line
  ; Proposed Resolution : specify the same properties (by listing them explicitly) that apply to ::first-line as applying to ::value: 'font-*', 'color', 'background-*', ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘vertical-align’, ‘text-transform’, ‘line-height’. 
  ; Status : resolved in editor's draft. pending publication of public draft. 

==== Issue 4 ====
  ; Summary : computed value of 'pointer-events' vs initial value vs SVG vs CSS3-UI conflict. A quick test shows that IE9 and Opera return 'visiblePainted', while WebKit and Firefox return 'auto'.
  ; Raised by: Erik Dahlstrom
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
  ; URL : https://wiki.mozilla.org/Tantek-Mozilla-projects#pointer-events
  ; Proposed Resolution : informative UA style sheet addition to explicitly set an SVG-specific value.
  ; Status : editors draft updated with style sheet additions, awaiting input from Jonathan Watt, implementer of pointer-events in Firefox.

==== Issue 5 ====
  ; Summary : In SVG 1.1 the 'pointer-events' property only applies to 'graphics elements', but in css3-ui it applies to all elements. Why? (Details raised by Kevin Ar18: "svg tag should not trigger pointer events like the SVG spec states and as noted here: http://www.w3.org/2010/09/27-fx-minutes.html#item03 Originally, the plan was to include this explanation in an SVG spec, but it was concluded that it should be in the CSS specs instead." )
  ; Raised by: Erik Dahlstrom, Kevin Ar18
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Nov/0268.html
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Nov/0304.html
  ; URL : http://www.w3.org/2010/09/27-fx-minutes.html#item03
  ; Proposed Resolution : 1: Add whatever default style sheet rules are necessary to implement SVG's "applies only" special cases and then 2: add a new FAQ: Any element can be given dimensions with CSS and thus can potentially receive events. In general property dependence on specific elements or classes of elements (e.g. "graphics elements") is bad design (for specification of properties). Much better to simply say "applies to all" (especially for inherited properties) and then use default style sheet rules and/or a computed abstraction like "has dimension" or "has a geometry".
  ; Status : resolved in editor's draft, awaiting public draft. proposed - add a default style sheet rule for the 'svg' pointer-events:none for SVG spec compat, and then move the "pointer-events: visiblePainted" declaration to a new rule for 'svg>*' elements. add more rules as necessary to mimic SVG's notion of "applies to 'graphics elements'".

==== Issue 6 ====
  ; Summary : Normatively reference SVG 1.1 for 'fill' and 'stroke' property definitions.
  ; Raised by: Erik Dahlstrom
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
  ; Proposed Resolution : inline links to SVG 1.1 property definitions
  ; Status : **Open.** Proposed resolution incomplete - awaiting URLs

==== Issue 7 ====
  ; Summary :  The note about how 'fill' and 'stroke' don't affect the result for 'all' is missing (compare with the SVG 1.1 pointer-events definition. http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
  ; Raised by: Erik Dahlstrom
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
  ; Proposed Resolution : state how 'all' is applied in svg separately from how it's applied otherwise. The same also applies to all the other pointer-event values, where svg is mentioned in parenthesis.
  ; Status : **Open.** Proposed resolution incomplete.
  
==== Issue 8 ====
  ; Summary : pointer-events definition lacks many of the details from the SVG 1.1 specification http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty, e.g how 'clip-path' and 'mask' affects pointer-events, how text elements are handled etc.
  ; Raised by: Erik Dahlstrom
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
  ; Proposed resolution : incorporate such details as necessary, as part of the goal here is not to not normatively depend on SVG 1.1 for the property definition itself.  This is similar to how CSS3 color incorporates and defines the full set of color keywords instead of normatively depending on SVG.
  ; Status : **Open.** Proposed resolution incomplete.
  
==== Issue 9 ====
  ; Summary : How opacity (and other forms of alpha, e.g rgba, fill-opacity, stroke-opacity etc) affects 'pointer-events' is undefined.  
  ; Raised by: Erik Dahlstrom
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
  ; Proposed resolution : incorporate such details as necessary
  ; Status : **Open.** Proposed resolution incomplete.
  
==== Issue 10 ====
  ; Summary : How 'clip-path', 'mask' and 'filter' affect 'pointer-events' is undefined.  
  ; Raised by: Erik Dahlstrom
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
  ; Proposed resolution : incorporate such details as necessary.
  ; Status : **Open.** Proposed resolution incomplete.


==== Issue 11 ====
  ; Summary : multiple issues from Kevin Ar18 2010-11-17
  ; Raised by : Kevin Ar18
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Nov/0257.html
  ; Proposed Resolution : itemize and split into multiple sub-issues here. some may be merely details on Issue 5.
  ; Status : **Open.** Collected.
  

==== Issue 12 ====
  ; Summary : what are effects of 'pointer-events' with regards to keyboard navigation?
  ; Raised by : Doug Schepers
  ; URL : http://lists.w3.org/Archives/Public/public-fx/2010OctDec/0106.html
  ; URL : http://dev.w3.org/csswg/css3-ui/#pointer-events
  ; Proposed resolution : informative note in the definition of the 'pointer-events' property would help steer authors to think about how they are using this (such as a suggestion that if pointer-events are turned off, authors should also consider making the element not 
focusable, as well).
  ; Status : resolved, informative note added to editor's draft. awaiting public draft.
  
==== Issue 13 ====
  ; Summary : should CSS3 UI (or some future version) incorporate a 'focusable' property (like in SVG)
  ; Raised by : Tantek Çelik
  ; URL : http://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr
  ; Proposed resolution : postpone til CSS4-UI.
  ; Status : Resolved. Added to http://wiki.csswg.org/spec/css4-ui#focusable-property

==== Issue 14 ====
  ; Summary : example for 'appearance' values 'pop-up-menu' and 'radio-group' and 'list-menu' should use same content to illustrate different visualizations for same semantics.
  ; Raised by : Charles Belov
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Nov/0189.html
  ; URL : http://lists.w3.org/Archives/Public/www-style/2011Jan/0224.html
  ; Proposed resolution : rewrite example accordingly.
  ; Status : **OPEN.** Collected.

==== Issue 15 ====
  ; Summary : add second 'list-menu' example that shows multiselect behavior and use same content as 'checkbox-group'
  ; Raised by : Charles Belov
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Nov/0189.html
  ; URL : http://lists.w3.org/Archives/Public/www-style/2011Jan/0224.html
  ; Proposed resolution : write new example accordingly.
  ; Status : **OPEN.** Collected.

==== Issue 16 ====
  ; Summary : What happens if a semantic single-select element is styled as appearance 'checkbox-group'?
  ; Raised by : Charles Belov
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Nov/0189.html
  ; URL : http://lists.w3.org/Archives/Public/www-style/2011Jan/0224.html
  ; Proposed resolution : add note discouraging authors from doing this.
  ; Status : **OPEN.** Collected.

==== Issue 17 ====
  ; Summary : What happens if a semantic multi-select element is styled as appearance 'radio-group' or 'pop-up-menu'?
  ; Raised by : Charles Belov
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Nov/0189.html
  ; URL : http://lists.w3.org/Archives/Public/www-style/2011Jan/0224.html
  ; Proposed resolution : add note discouraging authors from doing this.
  ; Status : **OPEN.** Collected.

==== Issue 18 ====
  ; Summary : How does text-overflow:ellipsis work with overflow-style: marquee-line? 
  ; Dependency: Since CSS3 Marquee is already in CR and text-overflow is the "new" feature, it is up to text-overflow to define the interaction.
  ; Raised by : Andrew Fedoniouk
  ; URL : http://lists.w3.org/Archives/Public/www-style/2008Dec/0109.html
  ; URL : http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#overflow-style
  ; Proposed Resolution : Render same as user controlled scrolling. Add mention of overflow-style to parenthetical examples listed after "When an element is scrolled".
  ; Status : resolution going into editor's draft, awaiting public draft.

==== Issue 19 ====
  ; Summary : CSS3-UI should define 'overflow-x' and 'overflow-y' properties
  ; Raised by : David Hyatt / Tantek Çelik
  ; URL : http://lists.w3.org/Archives/Public/www-style/2010Nov/0049.html
  ; URL : https://developer.mozilla.org/En/CSS/Overflow-x
  ; URL : https://developer.mozilla.org/En/CSS/Overflow-y
  ; URL : http://www.w3.org/Style/Group/css3-src/css3-box/#overflow
  ; URL : http://www.w3.org/Style/Group/css2-src/visufx.html#overflow 
  ; URL : http://www.w3.org/TR/css3-marquee/#the-overflow-style
  ; Proposed Resolution : Postpone this to CSS4-UI or preferably CSS3-Box - whichever gets drafted/updated first: Define 'overflow-x' and 'overflow-y' properties already interoperably implemented by various browsers. Pull in entirety of [[http://www.w3.org/Style/Group/css3-src/css3-box/#overflow|section 16 from CSS3 Box draft]]. Sync (incorporate) any updates/changes [[http://www.w3.org/Style/Group/css2-src/visufx.html#overflow|in CSS 2.1 overflow definition]]. Check that [[http://www.w3.org/TR/css3-marquee/#the-overflow-style|css3-marquee overflow-style]] implicitly deals with overflow-x and overflow-y correctly. Clarify: box-shadow should never trigger overflow/scrollbars. Clarify: do margins trigger overflow/scrollbars? Maybe they don't trigger overflow but if there is overflow anyways (something else triggers scrollbars), then margins influence the dimensions of the scrollable area. Consider: define baseline behavior as depending only on overflow-y per [[http://lists.w3.org/Archives/Public/www-style/2010Nov/0049.html|Robert O'Callahan / David Hyatt emails]]. 
  ; Status : Resolved postponed to CSS3-Box or CSS4-UI.

==== Issue 20 ====
  ; Summary : text-overflow definition is ambiguous as to whether it applies to vertical overflow of text
  ; Raised by : Alan Hogan in private email to Tantek Çelik
  ; URL : http://dev.w3.org/csswg/css3-ui/#text-overflow0
  ; URL : http://dl.dropbox.com/u/105727/web/text-wrap-ellipsis.html 
  ; Proposed Resolution : No one has implemented text-overflow for anything other than inline progress. Therefore we should explicitly clarify this deatil. Insert "in its inline progression direction and " into "when text overflows its block container element that has ‘overflow’ other than ‘visible’" just after "element". 
  ; Status : Resolved. Editor's draft edited accordingly. Awaiting public draft.

==== Issue 21 ====
  ; Summary : text-overflow definition must include <string> value and 2 values option, but with both explicitly at-risk.
  ; Raised by : CSS WG
  ; URL : http://dev.w3.org/csswg/css3-ui/#text-overflow0
  ; URL : http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html
  ; Proposed Resolution : Update text-overflow definition to include <string> value and {1,2} values option as described below.
  ; Status : Resolved. Editor's draft edited accordingly. Awaiting public draft.

=== text-overflow string ===
text-overflow: <string>. consider incorporating dropped <string> value. 

Originally text-overflow: <string> was [[http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-overflow-ellipsis|defined in CSS3 Text CR 2003-05-14]] - but no one implemented it. Thus any request for including this MUST include some justification as to why/how implementations would consider it differently than they did (and reject) for CSS3 Text CR 2003.

Real-world use-cases:
  * none.

Theoretical use-cases:
  * text-overflow:"" can be used to clip inline content on whole characters (grapheme clusters) / atomic elements rather than clipping them at a pixel boundary. (is there any evidence of designers wanting such an effect?)
  * multilingual (need specific examples here. which languages and which characters?)
  * author might wish to use "(...)" for instance in citations (need a reference to this style of ellipsing in citations)
  * vertical ellipsis in maths (need a reference to this style of ellipsing in math)
  * a line that has nothing but images on it. Having two markers also motivates having a <string> value to be able to specify different symbols on each side.

CSSWG resolution: http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html - in particular:
  * syntax: "RESOLVED: Add the two-value syntax to text-overflow in css3-ui, marked at-risk"
  * semantic: "two strings (left and right) in addition to one string (both)."
  * unprefixed: "[FF is] implementing it unprefixed, because everyone else already has."

Possible spec markup:

<code>
<td>( clip | ellipsis | 
   <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string">
     <span class="value-inst-string">&lt;string&gt;</span></a> ){1,2}
</td>
...
      <dt><dfn title="text-overflow:&lt;string&gt;">
           <var>&lt;string&gt;</var></dfn></dt>
        <dd>
        Render the given string to represent clipped text. 
        The string is treated as an independent paragraph for bidi purposes.
        </dd>
...
<p>
[At risk]. If there is one value, use it for both the left and right line edges. 
If there are two values, use the first value for the right edge, 
and the second value for the left edge.
</p>
</code>

...

==== Issue n ====
  ; Summary : 
  ; Raised by : Tantek Çelik
  ; URL : 
  ; Proposed Resolution : 
  ; Status :