This specification is an HTML specification. All the conformance --- 513,523 ----
This specification is an HTML specification. All the conformance *************** *** 594,601 **** boolean isPointInPath(in double x, in double y); // Focus management ! boolean drawSystemFocusRing(in Element element); ! boolean drawCustomFocusRing(in Element element); // Caret and selection management long caretBlinkRate(); --- 593,599 ---- boolean isPointInPath(in double x, in double y); // Focus management ! boolean drawFocusRing(in Element element, in optional boolean canDrawCustom); // Caret and selection management long caretBlinkRate(); *************** *** 637,643 **** interface TextMetrics { readonly attribute double width; - readonly attribute double baseline; }; interface ImageData { --- 635,640 ---- *************** *** 1955,2021 **** must return false.
When a canvas is interactive, authors should include focusable ! elements in the element's fallback content corresponding to each focusable part of the canvas.
To indicate which focusable part of the canvas is currently
! focused, authors should use either the drawSystemFocusRing() method or the drawCustomFocusRing() method,
passing it the element for which a ring is being drawn.
This method
only draws the focus ring if the element is focused or is a descendant
! of the element with focus.
-
drawSystemFocusRing(element)If the given element is neither focused or a descendant of an element with focus return false. Otherwise, draws a focus ring around the current path, following the platform conventions for focus rings.
If no such convention exists, draw a focus ring using the custom styling applied to the path. Return true.
!drawCustomFocusRing(element)If the given element is neither focused or a descendant of an element with focus return false.
!Otherwise, draw a custom focus ring, using the current applied path styling, along the path. (see the ! example below). Return true.
!The drawSystemFocusRing(element)
method, when invoked, must run the following steps:
If the element is not focused or is not a descendant of the element with focus, then return false and abort these steps.
If supporting accessibility, inform the user that the focus ring is at the location computed from the bounds of the path. User agents may wait ! until the next time the event loop reaches its "update the rendering" step to inform the user.
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 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 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.
--- 1952,2011 ---- must return false.When a canvas is interactive, authors should include focusable ! elements in the element's fallback content corresponding to each ! focusable part of the canvas.
To indicate which focusable part of the canvas is currently
! focused, authors should use the drawFocusRing() method,
passing it the element for which a ring is being drawn.
This method
only draws the focus ring if the element is focused or is a descendant
! of the element with focus.
drawFocusRing(element, [ canDrawCustom ])If the given element is focused or a descendant of the element with focus, draws a focus ring around the ! current path, following the platform conventions for focus ! rings.
!If the canDrawCustom argument is true, then ! the focus ring is only drawn if the user has configured his system ! to draw focus rings in a particular manner. (For example, high ! contrast focus rings.)
!Returns true if the given element is focused, the canDrawCustom argument is true, and the user has ! not configured his system to draw focus rings in a particular ! manner. Otherwise, returns false.
!When the method returns true, the author is expected to ! manually draw a focus ring.
+The drawing path is used to form the focus ring provided that ! drawing path contains a closed path. The drawing path is used to ! form a best fit bounding rectangle in screen coordinates. The ! bounding rectangle and drawing path may be used to enhance ! accessibility properties [ARIA] for the ! targeted element.
! !The drawFocusRing(element, [canDrawCustom])
method, when invoked, must run the following steps:
If the 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.
If supporting an accessibility API, implementors may use the drawing path to form a best fit rectangle in screen coordinates and apply it to the bounding rectangle of the associated accessible object.
If the user has requested the use of particular focus rings ! (e.g. high-contrast focus rings), or if the canDrawCustom argument is absent or false, then ! draw a focus ring of the appropriate style along the path, ! following platform conventions, return false, and abort these ! steps.
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.
*************** *** 2025,2067 ****Return true.
-
The drawCustomFocusRing(element)
- method, when invoked, must run the following steps:
If the element is not focused or is not a - descendant of the element with focus, then return false and abort these steps.
If supporting accessibility, inform the user that the focus ring is at the location computed from the bounds of the path. User agents may wait - until the next time the event loop reaches its - "update the rendering" step to inform the user.
Draw a focus ring using the style applied to the current path.
- -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.
- - -Return true.
"Inform the user", as used in this - section, could mean calling a system accessibility API, which would - notify assistive technologies such as magnification tools as to the location of the focus ring. To - properly drive magnification based on a focus change, a system - accessibility API driving a screen magnifier needs the bounds for - the newly focused object. The methods above are intended to enable - this by allowing the user agent to report the bounding box of the - path used to render the focus ring as the bounds of the element element passed as an argument, if that - element is focused, and the bounding box of the area to which the - user agent is scrolling as the bounding box of the current - selection.
- - ---- 2015,2020 ---- *************** *** 2232,2251 **** context.fillText(label.textContent, x+5, y); // Draw the Focus Ring ! var drawInvalidFocus = false; ! context.beginPath(); context.rect(x-7, y-7, 12 + metrics.width+2, 14); context.strokeStyle = 'silver'; - - //Draw a custom silver focus ring unless the focus ring conditions are invalid - - drawInvalidFocus = context.drawCustomFocusRing(element); - - // If the conditions are invalid for drawing a Custom Focus Ring draw red ring, using the same coordiantes, to indicate the element was an invalid element for rendering focus - - if (drawInvalidFocus) { - context.strokeStyle = 'red'; context.stroke(); } context.restore(); --- 2185,2202 ---- context.fillText(label.textContent, x+5, y); // Draw the Focus Ring ! var drawFocusManually = false; ! if (document.activeElement == element || document.activeElementFocus == element && document.activeElement == context.canvas) { ! try { ! drawFocusManually = !context.drawFocusRing(element); ! } catch(e) { ! drawFocusManually = true; ! } ! } ! if(drawFocusManually) { context.beginPath(); context.rect(x-7, y-7, 12 + metrics.width+2, 14); context.strokeStyle = 'silver'; context.stroke(); } context.restore(); *************** *** 2336,2342 **** The caret position is the rectangular left edge of the caret position within an element having focus. The selection position is the rectangular left or right edge of the highlighted position that moves in response to a users selection of content such as when dragging a pointing device during a content selection operation. The right edge is used when moving the selection position to the right and the left edge is used when moving the position to the left.
!font [ = value ]font [ = value ]baselineReturns the vertical offset of the anchor point for the text that was passed to the
- measureText()
-
- method.
The font IDL
--- 2355,2360 ----
***************
*** 2662,2674 ****
the font attribute, and
must then return a new TextMetrics object with its
width attribute set to
! the width of that inline box, in CSS pixels and its baseline attribute
! set to the anchor point's vertical position as determined by the current textBaseline value,
! in CSS pixels. [CSS]
The TextMetrics interface is used for the objects
! returned from measureText(). It has two
! attributes, width and baseline, which are set
by the measureText()
method.
font attribute, and
must then return a new TextMetrics object with its
width attribute set to
! the width of that inline box, in CSS pixels. [CSS]
The TextMetrics interface is used for the objects
! returned from measureText(). It has one
! attribute, width, which is set
by the measureText()
method.
A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas. This would be provided in preference to a dedicated ! way of doing multiline layout.
To draw images onto the canvas, the drawImage method
can be used.
This method can be invoked with three different sets of arguments:
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
--- 2627,2633 ----
A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas. This would be provided in preference to a dedicated ! way of doing multiline layout.
To draw images onto the canvas, the drawImage method
can be used.
This method can be invoked with three different sets of arguments:
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
***************
*** 2809,2815 ****
subject to shadow effects, global alpha, the clipping region, and global composition
operators.
! createImageData(sw, sh)createImageData(sw, sh)When a shape or image is painted, user agents must follow these steps, in the order given (or act as if they do):
--- 3097,3103 ----When a shape or image is painted, user agents must follow these steps, in the order given (or act as if they do):
*************** *** 3187,3193 **** region over the current canvas bitmap using the current composition operator. !This section is non-normative.
Here is an example of a script that uses canvas to draw pretty glowing lines.
--- 3125,3131 ---- region over the current canvas bitmap using the current composition operator. !This section is non-normative.
Here is an example of a script that uses canvas to draw pretty glowing lines.