Re: drawsystemfocusring/drawcustomfocusring from Rik Cabanier on 2013-12-11 (public-canvas-api@w3.org from October to December 2013)

From: Rik Cabanier <cabanier@gmail.com>
Date: Tue, 10 Dec 2013 20:56:50 -0800
To: Richard Schwerdtfeger <schwer@us.ibm.com>
Cc: Dominic Mazzoni <dmazzoni@google.com>, Canvas <public-canvas-api@w3.org>, Jatinder Mann <jmann@microsoft.com>, "Edward O'Connor" <eoconnor@apple.com>
Message-ID: <CAGN7qDDqVdpk+EydvwwnnBpeWwWYEzdU8KAgdADA-O6kO8VVuw@mail.gmail.com>
On Mon, Dec 9, 2013 at 5:11 PM, Richard Schwerdtfeger <schwer@us.ibm.com>wrote:

> Hi Rik,
>
> I am working on updated text for the Canvas 2D API spec. for the
> discussion later this week. I have text changes I am working on that could
> be added as marked *<rss> this pen </rss>. *
>
> Apple had a concern over what happens to the focus ring when the ring
> extends outside the canvas element width and height. The text for these
> methods should be subhect to the clipping region. Should we make this a
> *must* to ensure that the drawing object is clipped to the associated
> canvas and should we further state that clipping includes the bounding
> rectangle for the canvas element? The spec. is not clear here.
>
Yeah, for the a11y regions, we need to specify that they can't be outside
of the canvas region.

>
> The *drawSystemFocusRing(**element**)* method, when invoked, must run the
> following steps:
>
>    1. If *element* is not focused or is not a descendant of the element
>    with whose context the method is associated, then abort these steps.
>    2. If the user has requested the use of particular focus rings (e.g.
>    high-contrast focus rings), or if the *element* would have a focus
>    ring drawn around it, then draw a focus ring of the appropriate style along
>    the intended path, following platform conventions.
>
>       Some platforms only draw focus rings around elements that have been
>       focused from the keyboard, and not those focused from the mouse. Other
>       platforms simply don't draw focus rings around some elements at all unless
>       relevant accessibility features are enabled. This API is intended to follow
>       these conventions. User agents that implement distinctions based on the
>       manner in which the element was focused are encouraged to classify focus
>       driven by the focus() method based on the kind of user interaction
>       event from which the call was triggered (if any).
>
>       The focus ring should not be subject to the *shadow effects*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#shadows>,
>       the *global alpha*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#dom-context-2d-globalalpha>,
>       or the *global composition operators*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#dom-context-2d-globalcompositeoperation>,
>       but *should* be subject to the *clipping region*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#clipping-region>.
>       (The effect of transformations is described above and varies based on which
>       path is being used.)
>        3. Optionally, *inform the user*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#inform> that
>    the focus is at the location given by the intended path. User agents may
>    wait until the next time the event loop reaches its "update the rendering"
>    step to optionally inform the user.
>
>
> The *drawCustomFocusRing(**element**)* method, when invoked, must run the
> following steps:
>
>    1. If *element* is not focused or is not a descendant of the element
>    with whose context the method is associated, then return false and abort
>    these steps.
>    2. Let *result* be true.
>    3. If the user has requested the use of particular focus rings (e.g.
>    high-contrast focus rings), then draw a focus ring of the appropriate style
>    along the intended path, and set *result* to false.
>
>       The focus ring should not be subject to the *shadow effects*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#shadows>,
>       the *global alpha*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#dom-context-2d-globalalpha>,
>       or the *global composition operators*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#dom-context-2d-globalcompositeoperation>,
>       but *should* be subject to the *clipping region*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#clipping-region>.
>       (The effect of transformations is described above and varies based on which
>       path is being used.)
>    4. Optionally, *inform the user*<http://www.w3.org/TR/2012/CR-2dcontext-20121217/#inform> that
>    the focus is at the location given by the intended path. User agents may
>    wait until the next time the event loop reaches its "update the rendering"
>    step to optionally inform the user.
>    5. Return *result*.
>
>       *<rss>*
>       *drawSystemFocusRing() and drawCustomFocusRing() refer to a
>       descendant of the canvas element. These descendants are each considered **a
>       notional child**. Notional children are hypothetical elements that
>       are rendered children of the canvas element and their dimensions are those
>       of the bounding box of the specifed path. *
>
>       *When tabbing to a notional child, having an assigned location
>       through the use of drawSystemFocusRing or drawCustomFocusRing, scroll the
>       notional child into view following the steps defined by scrollPathIntoView.
>        *
>
>       *When a canvas elements is scrolled as a result of being contained
>       within an element having CSS stylle overscroll:scroll, notional children
>       having an assigned location through the use of drawSystemFocusRing or
>       drawCustomFocusRing, scroll the notional children bounds by the same change
>       in position as the corresponding canvas element.   *
>
>       *</rss>*
>
>
>       I could start including a copy of the scrolling algorithms from CSS
>       but I believe that would be overkill as we don't do that elsewhere in the
>       HTML specification.
>
> Yes, it would be best if we can refer to CSS UI. This is what is done for
scrollPathIntoView (It's still part of our spec so you could copy that).
Given that, I think the last paragraph is not neccessary.


>
>
> So you want me to include a detailed version of this procedure in the
> document to cover page scrolling?
>

no

>  To *scroll an element into view* *element*, optionally with an *align to
> top flag* set, and optionally with a scroll behavior *behavior* (which is
> auto if omitted), means to run these steps for each ancestor element or
> *viewport* <http://dev.w3.org/csswg/cssom-view/#viewport> that
> establishes a *scrolling box*<http://dev.w3.org/csswg/cssom-view/#scrolling-box>
>  *scrolling box*, in order of innermost to outermost *scrolling box*<http://dev.w3.org/csswg/cssom-view/#scrolling-box>
> :
>
>    1. If the *Document* <http://dom.spec.whatwg.org/#document> associated
>    with *element* is not *same origin*<http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#same-origin> with
>    the *Document* <http://dom.spec.whatwg.org/#document> associated with
>    the element or *viewport*<http://dev.w3.org/csswg/cssom-view/#viewport> associated
>    with *box*, terminate these steps.
>    2. Let *element bounding border box* be the box that the return value
>    of invoking *getBoundingClientRect()*<http://dev.w3.org/csswg/cssom-view/#dom-element-getboundingclientrect> on
>    *element* represents.
>    3. Let *scrolling box edge A* be the *beginning edge*<http://dev.w3.org/csswg/cssom-view/#beginning-edges> in
>    the *block flow direction*<http://dev.w3.org/csswg/cssom-view/#block-flow-direction> of
>    *scrolling box*, and let *element edge A* be *element bounding border
>    box*'s edge on the same physical side as that of *scrolling box edge A*.
>
>    4. Let *scrolling box edge B* be the *ending edge*<http://dev.w3.org/csswg/cssom-view/#ending-edges> in
>    the *block flow direction*<http://dev.w3.org/csswg/cssom-view/#block-flow-direction> of
>    *scrolling box*, and let *element edge B* be *element bounding border
>    box*'s edge on the same physical side as that of *scrolling box edge B*.
>
>    5. Let *scrolling box edge C* be the *beginning edge*<http://dev.w3.org/csswg/cssom-view/#beginning-edges> in
>    the *inline base direction*<http://dev.w3.org/csswg/cssom-view/#inline-base-direction> of
>    *scrolling box*, and let *element edge C* be *element bounding border
>    box*'s edge on the same physical side as that of *scrolling box edge C*.
>
>    6. Let *scrolling box edge D* be the *ending edge*<http://dev.w3.org/csswg/cssom-view/#ending-edges> in
>    the *inline base direction*<http://dev.w3.org/csswg/cssom-view/#inline-base-direction> of
>    *scrolling box*, and let *element edge D* be *element bounding border
>    box*'s edge on the same physical side as that of *box edge D*.
>    7. Let *element width* be the distance between *element edge C* and *element
>    edge D*.
>    8. Let *scrolling box width* be the distance between *scrolling box
>    edge C* and *scrolling box edge D*.
>    9. Let *position* be the scroll position *scrolling box* would have by
>    following these steps:
>       1. If the *align to top flag* is set align *element edge A* with *scrolling
>       box edge A*.
>       2. Otherwise, the *align to top flag* is not set; align *element
>       edge B* with *scrolling box edge B*.
>       3. If *element edge C* and *element edge D* are both outside *scrolling
>       box edge C* and *scrolling box edge D*
>          Do nothing.
>       If *element edge C* is outside *scrolling box edge C* and *element
>          width* is less than *scrolling box width*
>          If *element edge D* is outside *scrolling box edge D* and *element
>          width* is greater than *scrolling box width*
>             Align *element edge C* with *scrolling box edge C*.
>
>          If *element edge C* is outside *scrolling box edge C* and *element
>          width* is greater than *scrolling box width*
>          If *element edge D* is outside *scrolling box edge D* and *element
>          width* is less than *scrolling box width*
>             Align *element edge D* with *scrolling box edge D*.
>           10. If *position* is the same as *scrolling box*'s current
>    scroll position, and *scrolling box* does not have an ongoing *smooth
>    scroll* <http://dev.w3.org/csswg/cssom-view/#concept-smooth-scroll>,
>    abort these steps.
>    11. If *scrolling box* is associated with an element
>       Let *associated element* be the element.
>
>       Let *task* be these steps:
>       1. *Fire an event* <http://dom.spec.whatwg.org/#concept-event-fire> named
>          scroll at *associated element*.
>
>       If *scrolling box* is associated with a *viewport*<http://dev.w3.org/csswg/cssom-view/#viewport>
>          Let *associated element* be the *Document*<http://dom.spec.whatwg.org/#document>'s
>          root element, if there is one, or null otherwise.
>
>          Let *task* be these steps:
>          1. *Fire an event*<http://dom.spec.whatwg.org/#concept-event-fire> named
>             scroll that bubbles at the *Document*<http://dom.spec.whatwg.org/#document> object
>             associated with the *viewport*<http://dev.w3.org/csswg/cssom-view/#viewport>
>             .
>
>           12. *Perform a scroll*<http://dev.w3.org/csswg/cssom-view/#perform-a-scroll> of
>    *scrolling box* to *position*, with the set of steps *task*, *associated
>    element* as the associated element and *behavior* as the scroll
>    behavior.
>
>
> To *scroll an element* *element* to *x*,*y* optionally with a scroll
> behavior *behavior* (which is auto if omitted) means to:
>
>    1. Let *box* be *element*'s associated *scrolling box*<http://dev.w3.org/csswg/cssom-view/#scrolling-box>.
>
>    2. If *box* has rightward *overflow direction*<http://dev.w3.org/csswg/cssom-view/#overflow-directions>
>       Let *x* be max(0, min(*x*, *element* *scrolling area*<http://dev.w3.org/csswg/cssom-view/#scrolling-area> width
>       - *element* *padding edge*<http://dev.w3.org/csswg/cssom-view/#padding-edge>
>        width)).
>    If *box* has leftward *overflow direction*<http://dev.w3.org/csswg/cssom-view/#overflow-directions>
>          Let *x* be min(0, max(*x*, *element* *padding edge*<http://dev.w3.org/csswg/cssom-view/#padding-edge> width
>          - *element* *scrolling area*<http://dev.w3.org/csswg/cssom-view/#scrolling-area>
>           width)).
>        3. If *box* has downward *overflow direction*<http://dev.w3.org/csswg/cssom-view/#overflow-directions>
>       Let *y* be max(0, min(*y*, *element* *scrolling area*<http://dev.w3.org/csswg/cssom-view/#scrolling-area> height
>       - *element* *padding edge*<http://dev.w3.org/csswg/cssom-view/#padding-edge>
>        height)).
>    If *box* has upward *overflow direction*<http://dev.w3.org/csswg/cssom-view/#overflow-directions>
>          Let *y* be min(0, max(*y*, *element* *padding edge*<http://dev.w3.org/csswg/cssom-view/#padding-edge> height
>          - *element* *scrolling area*<http://dev.w3.org/csswg/cssom-view/#scrolling-area>
>           height)).
>        4. Let *position* be the scroll position *box* would have by
>    aligning *scrolling area*<http://dev.w3.org/csswg/cssom-view/#scrolling-area> x-coordinate
>    *x* with the left of *box* and aligning *scrolling area*<http://dev.w3.org/csswg/cssom-view/#scrolling-area> y-coordinate
>    *y* with the top of *box*.
>    5. If *position* is the same as *box*'s current scroll position, and
>    *box* does not have an ongoing *smooth scroll*<http://dev.w3.org/csswg/cssom-view/#concept-smooth-scroll>,
>    abort these steps.
>    6. Let *task* be these steps:
>       1. *Fire an event* <http://dom.spec.whatwg.org/#concept-event-fire> named
>       scroll at the element.
>    7. *Perform a scroll*<http://dev.w3.org/csswg/cssom-view/#perform-a-scroll> of
>    *box* to *position*, with the set of steps *task*, *element* as the
>    associated element and *behavior* as the scroll behavior.
>
>
>       Let *notional child* be a hypothetical element that is a rendered
>       child of the *canvas*<http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element> element
>       whose dimensions are those of *the specified rectangle*.
>
>
>
> Rich Schwerdtfeger
>
>
Received on Wednesday, 11 December 2013 04:57:20 UTC