+Note that the root element has a different background painting area, and thus the '-webkit-background-clip' property has no effect when specified on it. See the backgrounds of special elements.
+
+
+-
+
- border-box +
- The background is painted within (clipped to) the border box. + +
- padding-box +
- The background is painted within (clipped to) the padding box. + +
- content-box +
- The background is painted within (clipped to) the content box. + +
- text +
- Indicates that the background image should clip to the foreground text +
+ +
+Here's an example showing how to use
+
+'-webkit-background-clip': text together with
+-webkit-text-fill-color: transparent to achieve text with a gradient color effect.
+
+p {
+ background: linear-gradient(90deg, red, blue);
+ color: #fff;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+Browsers that don't support '-webkit-background-clip' or '-webkit-text-fill-color' will use the color declaration as a fallback color.
+Text Fill and Stroking
+ +Foreground Text Color: the
+'-webkit-text-fill-color' property
+
++Name: -webkit-text-fill-color +Value: <+ +The '-webkit-text-fill-color' property defines the foreground fill color of an element's text +content. + +> +Initial: ''currentcolor'' +Applies to: all elements +Inherited: yes +Computed value: an RGBA color +Percentages: N/A +Media: visual +Animation type: as color +
+Here's an example showing
+
+'-webkit-text-fill-color' will always determine the
+foreground fill color of an element's text.
+
+.one {
+ color: blue;
+ /* the following can be omitted because it's the initial value:
+ -webkit-text-fill-color: currentcolor; */
+}
+
+.two {
+ color: red;
+ -webkit-text-fill-color: blue;
+}
+
+
+Elements with the one or two classes will have blue text.
+Text Stroke Color: the
+'-webkit-text-stroke-color' property
+
++Name: -webkit-text-stroke-color +Value: <+ +The '-webkit-text-stroke-color' property specifies a stroke color for an element's text. + +> +Initial: ''currentcolor'' +Applies to: all elements +Inherited: yes +Computed value: an RGBA color +Percentages: N/A +Media: visual +Animation type: as color +
Text Stroke Thickness: the
+'-webkit-text-stroke-width' property
+
++Name: -webkit-text-stroke-width +Value: <+ +The '-webkit-text-stroke-width' property specifies the width of the stroke drawn at the edge of each +glyph of an element's text. A zero value results in no stroke being painted. A negative value is +invalid. + +> +Initial: 0 +Applies to: all elements +Inherited: yes +Computed value: absolute length +Percentages: N/A +Media: visual +Animation type: discrete +
Text Stroke Shorthand: the
+'-webkit-text-stroke' property
+
++Name: -webkit-text-stroke +Value: <+ +The '-webkit-text-stroke' property is a shorthand property for setting the stroke width and stroke +color of an element's text. + +> || < > +Initial: See individual properties +Applies to: See individual properties +Inherited: yes +Computed value: See individual properties +Percentages: N/A +Media: visual +Animation type: See individual properties +
+Here are two examples showing how to use the longhand and shorthand 
+
+
+'-webkit-text-stroke'
+properties to achieve white text with a black stroked text effect.
+
+.stroked-text-longhand {
+ color: #fff;
+ -webkit-text-stroke-color: #000;
+ -webkit-text-stroke-width: 1px;
+}
+
+.stroked-text-shorthand {
+ -webkit-text-fill-color: #fff;
+ -webkit-text-stroke: thin #000;
+}
+
+
+The element <p class="stroked-text-longhand">Serious typography</p>would be +rendered as follows: + +
+CSS Property values
+ +Additional touch-action values
+
+This section augments the
+definition of touch-action from [[!pointerevents2]] to
+add the pinch-zoom value.
+
++Name: touch-action +Value: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation +Initial: auto +Applies to: all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups. +Inherited: no +Computed value: Same as specified value +Percentages: N/A +Media: visual +Animation type: not animatable ++ +When specified, the
pinch-zoom token enables multi-finger panning and zooming of the page.
+For zooming to occur, all fingers must start on an element that has the pinch-zoom behavior enabled
+(via one of the pinch-zoom, manipulation, or auto values on itself
+or an ancestor).
+
+Scenarios like image carousels which wish to disable only horizontal panning can use "
+
+touch-action: pan-y pinch-zoom"
+to avoid disabling zooming unnecessarily.manipulation is an alias for "pan-x pan-y pinch-zoom".
+
+DOM Compatibility
+ +The WebKitCSSMatrix interface
+ +{{WebKitCSSMatrix}} is now defined by the DOM Geometry specification. [[!geometry-1]].
+
+window.orientation API
+
+
+partial interface Window {
+ readonly attribute short orientation;
+ attribute EventHandler onorientationchange;
+};
+
+partial interface HTMLBodyElement {
+ attribute EventHandler onorientationchange;
+};
+
+
+When getting the orientation attribute, the user agent must run the following steps:
+
+1. Return the responsible document's current window.orientation angle.
+
+Whenever the viewport is drawn at a different angle compared to the device's natural orientation, the user agent must run the following steps:
+
+1. Fire an event named orientationchange at the {{Window}} object of the active document.
+
+User agents implementing the window.orientation attribute and its associated orientationchange event must not expose them on Desktop platforms.
+
+iOS Safari also fires an
+
+orientationchange event on the <{body}> element, but other implementations do not, suggesting it's not necessary for compatibility with the web.window.orientation angle
+
+The possible values for the window.orientation angle are: -90, 0, 90, 180. User agents must support the -90, 0 and 90 values and may optionally support 180.
+
+0 represents the natural orientation. -90 represents a rotation 90 degrees clockwise from the natural orientation. 90 represents a rotation 90 degrees counterclockwise from the natural orientation. 180 represents a rotation 180 degrees from the natural orientation.
+
window.orientation angle, the user agent must run the following steps:
+
+-
+
- Return the result of step 3 of the {{ScreenOrientation}}'s update the orientation information algorithm with the following changes:
+
-
+
- If the orientation angle is less than or equal to 180, return the orientation angle +
- If the orientation angle is greater than 180, return the orientation angle - 360. +
- If the resulting orientation angle is 180 and the user agent does not support that value, return 0. + +
+
Event Handlers on {{Window}} objects and <{body}> elements
+
+The following are the event handlers and their corresponding event handler event types that must be supported on all {{Window}} objects and <{body}> elements as attributes:
+
+| event handler | +event handler event type | +
|---|---|
+ {{Window/onorientationchange}}
+ |
+
+ orientationchange
+ |
+
+WebKit also has this on HTMLFrameSetElement. It's unclear if this is needed for compatibility.
+
+
+