drawsystemfocusring/drawcustomfocusring

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.


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, the
      global alpha, or the global composition operators, but should be
      subject to the clipping region. (The effect of transformations is
      described above and varies based on which path is being used.)
   3.	Optionally, inform the user 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, the
      global alpha, or the global composition operators, but should be
      subject to the clipping region. (The effect of transformations is
      described above and varies based on which path is being used.)
   4.	Optionally, inform the user 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.


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


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
that establishes a scrolling box scrolling box, in order of innermost to
outermost scrolling box:
   1.	If the Document associated with element is not same origin with the
      Document associated with the element or viewport associated with box,
      terminate these steps.
   2.	Let element bounding border box be the box that the return value of
      invoking getBoundingClientRect() on element represents.
   3.	Let scrolling box edge A be the beginning edge in the 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 in the 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 in the 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 in the 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,
      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 named scroll at associated element.


      If scrolling box is associated with a viewport
            Let associated element be the Document's root element, if there
            is one, or null otherwise.


            Let task be these steps:
               1.	Fire an event named scroll that bubbles at the Document
                  object associated with the viewport.
   12.	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.
   2.	If box has rightward overflow direction
            Let x be max(0, min(x, element scrolling area width - element
            padding edge width)).


      If box has leftward overflow direction
            Let x be min(0, max(x, element padding edge width - element
            scrolling area width)).
   3.	If box has downward overflow direction
            Let y be max(0, min(y, element scrolling area height - element
            padding edge height)).


      If box has upward overflow direction
            Let y be min(0, max(y, element padding edge height - element
            scrolling area height)).
   4.	Let position be the scroll position box would have by aligning
      scrolling area x-coordinate x with the left of box and aligning
      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, abort these steps.
   6.	Let task be these steps:
         1.	Fire an event named scroll at the element.
   7.	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 element whose dimensions are those of the specified
     rectangle.

Received on Tuesday, 10 December 2013 01:12:18 UTC