Safari JS reference

Safari DOM Additions ReferenceUser Experience

2010-05-19

Apple Inc.© 2010 Apple Inc.All rights reserved.

No part of this publication may be reproduced,stored in a retrieval system, or transmitted, inany form or by any means, mechanical,electronic, photocopying, recording, orotherwise, without prior written permission ofApple Inc., with the following exceptions: Anyperson is hereby authorized to storedocumentation on a single computer forpersonal use only and to print copies ofdocumentation for personal use provided thatthe documentation contains Apple’s copyrightnotice.

The Apple logo is a trademark of Apple Inc.

Use of the “keyboard” Apple logo(Option-Shift-K) for commercial purposeswithout the prior written consent of Apple mayconstitute trademark infringement and unfaircompetition in violation of federal and statelaws.

No licenses, express or implied, are grantedwith respect to any of the technology describedin this document. Apple retains all intellectualproperty rights associated with the technologydescribed in this document. This document isintended to assist application developers todevelop applications only for Apple-labeledcomputers.

Every effort has been made to ensure that theinformation in this document is accurate. Appleis not responsible for typographical errors.

Apple Inc.1 Infinite LoopCupertino, CA 95014408-996-1010

Apple, the Apple logo, iPhone, QuickTime, andSafari are trademarks of Apple Inc., registeredin the United States and other countries.

Java is a registered trademark of Oracle and/orits affiliates

IOS is a trademark or registered trademark ofCisco in the U.S. and other countries and is usedunder license.

SPEC is a registered trademark of the StandardPerformance Evaluation Corporation (SPEC).

Simultaneously published in the United Statesand Canada.

Even though Apple has reviewed this document,APPLE MAKES NO WARRANTY OR REPRESENTATION,

EITHER EXPRESS OR IMPLIED, WITH RESPECT TOTHIS DOCUMENT, ITS QUALITY, ACCURACY,MERCHANTABILITY, OR FITNESS FOR A PARTICULARPURPOSE. AS A RESULT, THIS DOCUMENT ISPROVIDED “AS IS,” AND YOU, THE READER, AREASSUMING THE ENTIRE RISK AS TO ITS QUALITYAND ACCURACY.

IN NO EVENT WILL APPLE BE LIABLE FOR DIRECT,INDIRECT, SPECIAL, INCIDENTAL, ORCONSEQUENTIAL DAMAGES RESULTING FROM ANYDEFECT OR INACCURACY IN THIS DOCUMENT, evenif advised of the possibility of such damages.

THE WARRANTY AND REMEDIES SET FORTH ABOVEARE EXCLUSIVE AND IN LIEU OF ALL OTHERS, ORALOR WRITTEN, EXPRESS OR IMPLIED. No Appledealer, agent, or employee is authorized to makeany modification, extension, or addition to thiswarranty.

Some states do not allow the exclusion or limitationof implied warranties or liability for incidental orconsequential damages, so the above limitation orexclusion may not apply to you. This warranty givesyou specific legal rights, and you may also haveother rights which vary from state to state.

Contents

Introduction Safari DOM Additions Reference 9

See Also 9

Part I Classes 11

Chapter 1 CSSRule Additions Reference 13

Overview 13Constants 13

Chapter 2 Document Additions Reference 15

Overview 15Tasks 15Methods 15

Chapter 3 DOMApplicationCache Class Reference 17

Overview 17Tasks 17Properties 18Methods 20Constants 20

Chapter 4 DOMWindow Additions Reference 23

Overview 23Tasks 23Properties 23Methods 24

Chapter 5 GestureEvent Class Reference 27

Overview 27

Chapter 6 HTMLAudioElement Class Reference 29

Overview 29

32010-05-19 | © 2010 Apple Inc. All Rights Reserved.

Chapter 7 HTMLMediaElement Class Reference 31

Overview 31Tasks 32Properties 34Methods 39Constants 40

Chapter 8 HTMLVideoElement Class Reference 43

Overview 43Tasks 43Properties 43

Chapter 9 Touch Class Reference 47


Chapter 10 TouchEvent Class Reference 51


Chapter 11 TouchList Class Reference 55


Chapter 12 WebKitAnimationEvent Class Reference 57


Chapter 13 WebKitCSSKeyframeRule Class Reference 61



CONTENTS

Chapter 14 WebKitCSSKeyframesRule Class Reference 63


Chapter 15 WebKitCSSMatrix Class Reference 67


Chapter 16 WebKitCSSTransformValue Class Reference 79

Overview 79Tasks 79Properties 79Constants 80

Chapter 17 WebKitPoint Class Reference 83


Chapter 18 WebKitTransitionEvent Class Reference 85


Document Revision History 89


CONTENTS


CONTENTS

Tables

Chapter 4 DOMWindow Additions Reference 23

Table 4-1 Window orientation values 24

Chapter 7 HTMLMediaElement Class Reference 31

Table 7-1 Media element events 31



TABLES

Note: This document was previously titled Safari DOM Extensions Reference.

This covers miscellaneous DOM extensions used by Safari on the desktop and Safari on iOS. These extensionsinclude DOM touch events for processing gestures for devices that have a touch screen and visual effectsthat support 2D and 3D transforms, animation, and transitions. Most of the classes described in this referenceare Apple extensions that may also be proposed W3C standards.

See Also

There are a variety of other resources for Safari web content developers using JavaScript.

If you are using DOM touch events, you should also read:

■ Safari Web Content Guide, which describes how to create web content and applications for Safari on allplatforms.

If you are using visual effects, you should read:

■ Safari CSS Visual Effects Guide, which describes how to use the CSS transition, animation, and transformproperties.

If you want to use the JavaScript database classes, you should read:

■ Safari Client-Side Storage andOffline Applications ProgrammingGuide, which describes a simple relationaldatabase that you can use to store persistent data in JavaScript that cannot be stored in cookies.

If you want to use the JavaScript media APIs, then you should read:

■ JavaScript Scripting Guide for QuickTime, which describes how to use JavaScript to query and control theQuickTime plug-in directly.

If you want access to the DOM or use the canvas object, then read:

■ WebKitDOMProgrammingTopics, which describes how to use JavaScript in web content for WebKit-basedapplications.

■ WebKit DOM Reference, which describes the API for accessing the WebKit Document Object Model.

If you want to read the WebKit W3C proposals then go to: http://www.webkit.org/specs.

See Also 92010-05-19 | © 2010 Apple Inc. All Rights Reserved.

INTRODUCTION

Safari DOM Additions Reference

http://www.webkit.org/specs

10 See Also2010-05-19 | © 2010 Apple Inc. All Rights Reserved.

INTRODUCTION

Safari DOM Additions Reference


PART I

Classes

Availability Available in Safari 4.0 and later.Available in iOS 2.0 and later.

Companion guide Safari CSS Visual Effects Guide

Overview

These extensions to the CSSRule class are used to access animation keyframe and keyframes rules.

Constants

DescriptionConstant

Keyframes rule type. Read WebKitCSSKeyframesRule for details.const unsigned short WEBKIT_KEYFRAMES_RULE = 7;

Safari Note: In Safari 4.0 and later, the value is 8.

Available in Safari 4.0 and later.Available in iOS 2.0 and later.

WEBKIT_KEYFRAMES_-RULE

Keyframe rule type. Read WebKitCSSKeyframeRule for details.const unsigned short WEBKIT_KEYFRAME_RULE = 8;

Safari Note: In Safari 4.0 and later, the value is 9.


WEBKIT_KEYFRAME_RULE

Overview 132010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 1

CSSRule Additions Reference

14 Constants2010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 1

CSSRule Additions Reference

Availability Available in iOS 2.0 and later.

Companion guide Safari Web Content Guide

Overview

These additions to the Document class are used to create touch event objects.

Tasks

Creating Touches

createTouch (page 15)Creates a new Touch object.

createTouchList (page 16)Creates a new TouchList object.

Methods

createTouchCreates a new Touch object.

Touch createTouch(in DOMWindow view, in EventTarget target, in long identifier, in long pageX, in long pageY, in long screenX, in long screenY) raises (

DOMException);

Parametersview

The view (DOM window) in which the event occurred.


CHAPTER 2

Document Additions Reference

targetThe target of this gesture.

identifierThe unique identifier for this touch object.

pageXThe x-coordinate of the touch’s location, in page coordinates.

pageYThe y-coordinate of the touch’s location, in page coordinates.

screenXThe x-coordinate of the event’s location, in screen coordinates.

screenYThe y-coordinate of the event’s location, in screen coordinates.

AvailabilityAvailable in iOS 2.0 and later.

createTouchListCreates a new TouchList object.

TouchList createTouchList() raises ( DOMException);


16 Methods2010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 2

Document Additions Reference



Overview

A DOMApplicationCache object is used to store resources—such as, HTML, JavaScript, CSS, andimages—locally. This allows your web application to continue running offline when there is no networkconnection. The cache persists after Safari exits, so it can be used by multiple browser sessions. There is oneapplication cache per browsing context.

Tasks

Accessing Properties

status (page 19)The current status of the application cache. One of the values described in "Constants.”

Handling Events

onchecking (page 18)Sent when the cache update process begins.

onerror (page 19)Sent when an error occurs.

onnoupdate (page 19)Sent when the update process finishes but the manifest file does not change.

ondownloading (page 18)Sent when the update process begins downloading resources in the manifest file.

onprogress (page 19)Sent when each resource in the manifest file begins to download.

onupdateready (page 19)Sent when there is an existing application cache, the update process finishes, and there is a newapplication cache ready for use.


CHAPTER 3

DOMApplicationCache Class Reference

oncached (page 18)Sent when the update process finishes for the first time—that is, the first time an application cacheis saved.

Updating the Cache

add (page 20)Forthcoming

update (page 20)Manually triggers the update process.

swapCache (page 20)Replaces the active cache with the latest version.

Properties

oncachedSent when the update process finishes for the first time—that is, the first time an application cache is saved.

attribute EventListener oncached;

AvailabilityAvailable in Safari 4.0 and later.Available in iOS 2.2 and later.

oncheckingSent when the cache update process begins.

attribute EventListener onchecking;


ondownloadingSent when the update process begins downloading resources in the manifest file.

attribute EventListener ondownloading;


18 Properties2010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 3


onerrorSent when an error occurs.

attribute EventListener onerror;


onnoupdateSent when the update process finishes but the manifest file does not change.

attribute EventListener onnoupdate;


onprogressSent when each resource in the manifest file begins to download.

attribute EventListener onprogress;


onupdatereadySent when there is an existing application cache, the update process finishes, and there is a new applicationcache ready for use.

attribute EventListener onupdateready;


statusThe current status of the application cache. One of the values described in "Constants.”

readonly attribute unsigned short status;


Properties 192010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 3


Methods

addForthcoming

void add(in DOMString uri) raises(DOMException);

DiscussionForthcoming

AvailabilityAvailable in Safari 4.0 through Safari 4.0.2.

swapCacheReplaces the active cache with the latest version.

void swapCache() raises(DOMException);


updateManually triggers the update process.

void update() raises(DOMException);


Constants

Constants that indicate the status of the application cache.

DescriptionConstant

The object isn’t associated with an application cache. This can occur if the update processfails and there is no previous cache to revert to, or if there is no manifest file.

const unsigned short UNCACHED = 0;


UNCACHED


CHAPTER 3


DescriptionConstant

The cache is idle.const unsigned short IDLE = 1;


IDLE

The update has started but the resources are not downloaded yet—for example, this canhappen when the manifest file is fetched.

const unsigned short CHECKING = 2;


CHECKING

The resources are being downloaded into the cache.const unsigned short DOWNLOADING = 3;


DOWNLOADING

Resources have finished downloading and the new cache is ready to be used.const unsigned short UPDATEREADY = 4;


UPDATEREADY

Constants 212010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 3



CHAPTER 3


Availability Available in Safari 4.0 and later.Available in iOS 1.1.1 and later.

Companion guides Safari Web Content GuideSafari CSS Visual Effects Guide

Overview

DOMWindow additions allow conversion of points from page- and node-coordinate systems for transitions.

Tasks


applicationCache (page 23)The application cache associated with the current document.

orientation (page 24)Specifies the orientation of the device.

Converting Points

webkitConvertPointFromPageToNode (page 25)Converts a point from page coordinates to a given node’s coordinates.

webkitConvertPointFromNodeToPage (page 24)Converts a point from a given node’s coordinates to page coordinates.

Properties

applicationCacheThe application cache associated with the current document.


CHAPTER 4

DOMWindow Additions Reference

readonly attribute DOMApplicationCache applicationCache;


orientationSpecifies the orientation of the device.

readonly attribute long orientation;

DiscussionThis property is set to one of the values in Table 4-1 (page 24). For example, if the user starts with the devicein portrait orientation and then changes to landscape orientation by turning the device to the right, thewindow’s orientation property is set to -90. If the user instead changes to landscape by turning the deviceto the left, the window’s orientation property is set to 90. The default value is 0.

Table 4-1 Window orientation values

DescriptionValue

Portrait orientation. This is the default value.0

Landscape orientation with the screen turned clockwise.-90

Landscape orientation with the screen turned counterclockwise.90

Portrait orientation with the screen turned upside down. This value is currently not supported oniPhone.

180

AvailabilityAvailable in iPhone 1.1.1 and later.

Methods

webkitConvertPointFromNodeToPageConverts a point from a given node’s coordinates to page coordinates.

WebKitPoint webkitConvertPointFromNodeToPage(in Node node, in WebKitPoint p);

Parametersnode

The coordinate space for p.

pA point in node’s coordinates to convert to page coordinates.

Return ValueA point that is at the same location as p but in the page coordinates.


CHAPTER 4



webkitConvertPointFromPageToNodeConverts a point from page coordinates to a given node’s coordinates.

WebKitPoint webkitConvertPointFromPageToNode(in Node node, in WebKitPoint p);

Parametersnode

The coordinate space to convert the given point to.

pA point in page coordinates to convert to node’s coordinates.

Return ValueA point that is at the same location as p but in the node’s coordinates.


Methods 252010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 4



CHAPTER 4


Inherits from UIEvent



Overview

The GestureEvent class encapsulates information about a multi-touch gesture.

GestureEvent objects are high-level events that encapsulate the low-level TouchEvent objects. BothGestureEvent and TouchEvent events are sent during a multi-touch sequence. Gesture events containscaling and rotation information allowing gestures to be combined, if supported by the platform. If notsupported, one gesture ends before another starts. Listen for GestureEvent events if you want to respondto gestures only, not process the low-level TouchEvent objects.

The different types of GestureEvent objects that can occur are:

gesturestartSent when two or more fingers touch the surface.

gesturechangeSent when fingers are moved during a gesture.

gestureendSent when the gesture ends (when there are 1 or 0 fingers touching the surface).

For example, for a two finger multi-touch gesture, the events occur in the following sequence:

1. touchstart for finger 1. Sent when the first finger touches the surface.

2. gesturestart. Sent when the second finger touches the surface.

3. touchstart for finger 2. Sent immediately after gesturestart when the second finger touches thesurface.

4. gesturechange for current gesture. Sent when both fingers move while still touching the surface.

5. gestureend. Sent when the second finger lifts from the surface.

6. touchend for finger 2. Sent immediately after gestureendwhen the second finger lifts from the surface.

7. touchend for finger 1. Sent when the first finger lifts from the surface.

See TouchEvent Class Reference if you want to process just low-level TouchEvent objects.


CHAPTER 5

GestureEvent Class Reference

28 Overview2010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 5

GestureEvent Class Reference

Inherits from HTMLMediaElement


Overview

A class representing the HTML audio element that plays a sound or audio stream in a webpage. All of themethods and properties in this class are inherited from HTMLMediaElement.


CHAPTER 6

HTMLAudioElement Class Reference

30 Overview2010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 6

HTMLAudioElement Class Reference


Overview

An abstract superclass for media classes that display audio or video in webpages. This class defines commonproperties and methods inherited by the HTMLAudioElement and HTMLVideoElement classes representingthe HTML audio and video elements.

The different types of media events that can occur are described in Table 7-1.

Table 7-1 Media element events

DescriptionEvent

Sent when the browser stops fetching the media data before the media resource wascompletely downloaded.

abort

Sent when the browser can resume playback of the media data, but estimates that ifplayback is started now, the media resource could not be rendered at the currentplayback rate up to its end without having to stop for further buffering of content.

canplay

Sent when the browser estimates that if playback is started now, the media resourcecould be rendered at the current playback rate all the way to its end without havingto stop for further buffering.

canplaythrough

Sent when the duration (page 36) property changes.durationchange

Sent when the media element network state changes to the NETWORK_EMPTY (page41) state.

emptied

Sent when playback has stopped at the end of the media resource and the ended (page36) property is set to true.

ended

Sent when an error occurs while fetching the media data. Use the error (page 36)property to get the current error.

error

Sent when the browser can render the media data at the current playback positionfor the first time.

loadeddata

Sent when the browser knows the duration and dimensions of the media resource.loadedmetadata

Sent when the browser begins loading the media data.loadstart


CHAPTER 7

HTMLMediaElement Class Reference

DescriptionEvent

Sent when playback pauses after the pause (page 40) method returns.pause

Sent when playback starts after the play (page 40) method returns.play

Sent when playback starts.playing

Sent when the browser is fetching the media data.progress

Sent when either the defaultPlaybackRate (page 35) or the playbackRate (page37) property changes.

ratechange

Sent when the seeking (page 38) property is set to falseseeked

Sent when the seeking (page 38) property is set to true and there is time to sendthis event.

seeking

Sent when the browser is fetching media data but it has stopped arriving.stalled

Sent when the browser suspends loading the media data and does not have the entiremedia resource downloaded.

suspend

Sent when the currentTime (page 35) property changes as part of normal playbackor because of some other condition.

timeupdate

Sent when either the volume (page 39) property or the muted (page 37) propertychanges.

volumechange

Sent when the browser stops playback because it is waiting for the next frame.waiting

Tasks

Getting and Setting Properties

autobuffer (page 34)A Boolean value that gives a hint to the browser that it should automatically buffer media when thewebpage is loaded.

autoplay (page 34)A Boolean value that determines whether the media resource plays automatically when available.

controls (page 34)A Boolean value that determines whether the playback controls appear.

currentTime (page 35)The current playback position in seconds.

defaultPlaybackRate (page 35)The default rate used to play the media resource.

loop (page 36)A Boolean value that determines whether the playback should loop.

32 Tasks2010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 7


muted (page 37)A Boolean value that determines whether the audio content should be muted.

playbackRate (page 37)The speed that the media resource is playing.

src (page 38)The URI address of the media resource to play.

volume (page 39)The volume of the audio portion of the media element.

Getting State

buffered (page 34)The time ranges of the media resource that have been downloaded. (read-only)

currentSrc (page 35)The absolute URL of the media resource. (read-only)

duration (page 36)The length of the media resource in seconds. (read-only)

ended (page 36)A Boolean value that indicates whether the media played to the end. (read-only)

error (page 36)The last error that occurred for this element. (read-only)

networkState (page 37)The state of downloading the media resource. (read-only)

paused (page 37)A Boolean value that indicates whether the media is paused. (read-only)

played (page 38)The ranges of the media resource that was played. (read-only)

readyState (page 38)The ready state of the media resource. (read-only)

seekable (page 38)The ranges that can be played in a nonlinear fashion. (read-only)

seeking (page 38)A Boolean value that indicates whether the element is seeking. (read-only)

startTime (page 39)The earliest possible time in seconds to start playback. (read-only)

Controlling Playback

canPlayType (page 39)Returns whether the media element supports the specified MIME type.

load (page 39)Starts loading the media resource.

Tasks 332010-05-19 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 7


pause (page 40)Pauses the media playback if in progress.

play (page 40)Begins playing the media resource.

Properties

autobufferA Boolean value that gives a hint to the browser that it should automatically buffer media when the webpageis loaded.

attribute boolean autobuffer;

DiscussionIf true (the default), the media data is automatically buffered; otherwise, it is not.


autoplayA Boolean value that determines whether the media resource plays automatically when available.

attribute boolean autoplay;

DiscussionIf false (the default), the media resource does not automatically play when loaded; otherwise, it does.


bufferedThe time ranges of the media resource that have been downloaded. (read-only)

readonly attribute TimeRanges buffered;


controlsA Boolean value that determines whether the playback controls appear.


CHAPTER 7


attribute boolean controls;

DiscussionOn the desktop, if false (the default), the playback controls do not appear; otherwise, they do appear. OniOS, a native application is used to playback video in full screen; therefore, this property is ignored.


currentSrcThe absolute URL of the media resource. (read-only)

readonly attribute DOMString currentSrc;

DiscussionThis property is an empty string if the networkState (page 37) property is NETWORK_EMPTY (page 41).


currentTimeThe current playback position in seconds.

attribute float currentTime setter raises (DOMException);

DiscussionWhen you set this property, the media play head moves to the new location. An INVALID_STATE_ERR DOMexception is raised if there is no selected media resource when you set this property. An INDEX_SIZE_ERRDOM exception is raised if the specified time is not within the start and end times.


defaultPlaybackRateThe default rate used to play the media resource.

attribute float defaultPlaybackRate;

DiscussionThe value of this property is a multiple of the media resource’s intrinsic speed. The default value is 1.0.



CHAPTER 7


durationThe length of the media resource in seconds. (read-only)

readonly attribute float duration;

DiscussionThis property is 0 if there is no media data available. This property is NaN if the duration is unknown. Thevalue is positive infinity if the duration is known but is indefinite—for example, a live stream.


endedA Boolean value that indicates whether the media played to the end. (read-only)

readonly attribute boolean ended;

DiscussionIf true, the video played to the end; otherwise, it did not.


errorThe last error that occurred for this element. (read-only)

readonly attribute MediaError error;


loopA Boolean value that determines whether the playback should loop.

attribute boolean loop;

DiscussionIf true, the playback should loop; otherwise, it should not.



CHAPTER 7


mutedA Boolean value that determines whether the audio content should be muted.

attribute boolean muted;

DiscussionIf true, the audio track is muted; otherwise, it is not.


networkStateThe state of downloading the media resource. (read-only)

readonly attribute unsigned short networkState;

DiscussionPossible values are described in “Constants.”


pausedA Boolean value that indicates whether the media is paused. (read-only)

readonly attribute boolean paused;

DiscussionIf true, the video is paused; otherwise, it is not.


playbackRateThe speed that the media resource is playing.

attribute float playbackRate;

DiscussionThe value of this property is a multiple of the media resource’s intrinsic speed. If set to 0.0, aNOT_SUPPORTED_ERR DOM exception is raised. The default value is 1.0.



CHAPTER 7


playedThe ranges of the media resource that was played. (read-only)

readonly attribute TimeRanges played;


readyStateThe ready state of the media resource. (read-only)

readonly attribute unsigned short readyState;

DiscussionPossible values are described in “Constants.”


seekableThe ranges that can be played in a nonlinear fashion. (read-only)

readonly attribute TimeRanges seekable;


seekingA Boolean value that indicates whether the element is seeking. (read-only)

readonly attribute boolean seeking;

DiscussionIf true, the media resource is playing in a nonlinear fashion; otherwise, it is not.


srcThe URI address of the media resource to play.


CHAPTER 7


attribute DOMString src;


startTimeThe earliest possible time in seconds to start playback. (read-only)

readonly attribute float startTime;


volumeThe volume of the audio portion of the media element.

attribute float volume setter raises (DOMException);

DiscussionThe value of this property must be in the range from 0.0 (silent) to 1.0 (loudest); otherwise, aINDEX_SIZE_ERR DOM exception is raised. The default value is 1.0.


Methods

canPlayTypeReturns whether the media element supports the specified MIME type.

DOMString canPlayType(in DOMString type);

Return ValueThe possible string values are: “no”, “probably” and “maybe”.


loadStarts loading the media resource.


CHAPTER 7


void load() raises (DOMException);


pausePauses the media playback if in progress.

void pause();


playBegins playing the media resource.

void play();

DiscussionIf the media resource is not available for playback, this method loads it.


Constants

Possible values for the readyState (page 38) property.

DescriptionConstant

No media data is available for playback at the current time.const unsigned short HAVE_NOTHING = 0;


HAVE_NOTHING

Enough of the media resource has been loaded to know the duration, and in thecase of a video element, the dimensions.

const unsigned short HAVE_METADATA = 1;


HAVE_METADATA


CHAPTER 7


DescriptionConstant

Data for the current playback position is available, but not enough to beginplayback.

const unsigned short HAVE_CURRENT_DATA = 2;


HAVE_CURRENT_DATA

Enough data is available to begin playback.const unsigned short HAVE_FUTURE_DATA = 3;


HAVE_FUTURE_DATA

Enough data is available to play at the default playback rate to the end of themedia resource without having to pause to rebuffer.

const unsigned short HAVE_ENOUGH_DATA = 4;


HAVE_ENOUGH_DATA

Possible values for the networkState (page 37) property.

DescriptionConstant

The element is not initialized.const unsigned short NETWORK_EMPTY = 0;


NETWORK_EMPTY

The network connection is idle.const unsigned short NETWORK_IDLE = 1;


NETWORK_IDLE

The media resource is loading.const unsigned short NETWORK_LOADING = 2;


NETWORK_LOADING

The media source finished loading.const unsigned short NETWORK_LOADED = 3;


NETWORK_LOADED


CHAPTER 7


DescriptionConstant

No media resource was found.const unsigned short NETWORK_NO_SOURCE = 4;


NETWORK_NO_SOURCE


CHAPTER 7


Inherits from HTMLMediaElement


Overview

A class representing the HTML video element that plays a video or movie in a webpage. Use theHTMLAudioElement class for the HTML audio element.

Tasks

Getting and Setting Properties

width (page 44)The width of the video element in CSS pixels.

height (page 43)The height of the video element in CSS pixels.

poster (page 44)The URI address of an image file that is shown when no video data is available.

Getting State

videoWidth (page 44)The native width of the video in CSS pixels. (read-only)

videoHeight (page 44)The native height of the video in CSS pixels. (read-only)

Properties

heightThe height of the video element in CSS pixels.


CHAPTER 8

HTMLVideoElement Class Reference

attribute unsigned long height;


posterThe URI address of an image file that is shown when no video data is available.

attribute [ConvertNullToNullString] DOMString poster;


videoHeightThe native height of the video in CSS pixels. (read-only)

readonly attribute unsigned long videoHeight;

DiscussionIf no video data is available, this property is 0.


videoWidthThe native width of the video in CSS pixels. (read-only)

readonly attribute unsigned long videoWidth;

DiscussionIf no video data is available, this property is 0.


widthThe width of the video element in CSS pixels.

attribute unsigned long width;

AvailabilityAvailable in Safari 3.1 and later.


CHAPTER 8


Available in iOS 3.0 and later.


CHAPTER 8



CHAPTER 8




Overview

The Touch class represents a single touch on the surface. A touch is the presence or movement of a fingerthat is part of a unique multi-touch sequence. Use the changedTouches (page 52) method to get all thetouch objects that changed in a TouchEvent object.

Tasks


clientX (page 48)The x-coordinate of the touch’s location relative to the window’s viewport.

clientY (page 48)The y-coordinate of the touch’s location relative to the window’s viewport.

identifier (page 48)The unique identifier for this touch object.

pageX (page 48)The x-coordinate of the touch’s location in page coordinates.

pageY (page 48)The y-coordinate of the touch’s location in page coordinates.

screenX (page 49)The x-coordinate of the touch’s location in screen coordinates.

screenY (page 49)The y-coordinate of the touch’s location in screen coordinates.

target (page 49)The target of this touch.


CHAPTER 9

Touch Class Reference

Properties

clientXThe x-coordinate of the touch’s location relative to the window’s viewport.

readonly attribute long clientX;


clientYThe y-coordinate of the touch’s location relative to the window’s viewport.

readonly attribute long clientY;


identifierThe unique identifier for this touch object.

readonly attribute unsigned long identifier;


pageXThe x-coordinate of the touch’s location in page coordinates.

readonly attribute long pageX;


pageYThe y-coordinate of the touch’s location in page coordinates.

readonly attribute long pageY;



CHAPTER 9


screenXThe x-coordinate of the touch’s location in screen coordinates.

readonly attribute long screenX;


screenYThe y-coordinate of the touch’s location in screen coordinates.

readonly attribute long screenY;


targetThe target of this touch.

readonly attribute EventTarget target;



CHAPTER 9



CHAPTER 9


Inherits from UIEvent



Overview

The TouchEvent class encapsulates information about a touch event.

The system continually sends TouchEvent objects to an application as fingers touch and move across asurface. A touch event provides a snapshot of all touches during a multi-touch sequence, most importantlythe touches that are new or have changed for a particular target. A multi-touch sequence begins when afinger first touches the surface. Other fingers may subsequently touch the surface, and all fingers may moveacross the surface. The sequence ends when the last of these fingers is lifted from the surface. An applicationreceives touch event objects during each phase of any touch.

The different types of TouchEvent objects that can occur are:

touchstartSent when a finger for a given event touches the surface.

touchmoveSent when a given event moves on the surface.

touchendSent when a given event lifts from the surface.

touchcancelSent when the system cancels tracking for the touch.

TouchEvent objects are combined together to form high-level GestureEvent objects that are also sentduring a multi-touch sequence. See GestureEvent for details on GestureEvent objects and an exampleof the events sent for a two finger multi-touch gesture.

Tasks


altKey (page 52)If true, the alt key is pressed; otherwise, it is not. If there is no keyboard, this value is false.


CHAPTER 10

TouchEvent Class Reference

changedTouches (page 52)A collection of Touch objects representing all touches that changed in this event.

Initializing

initTouchEvent (page 52)Initializes a newly created TouchEvent object.

Properties

altKeyIf true, the alt key is pressed; otherwise, it is not. If there is no keyboard, this value is false.

readonly attribute boolean altKey;


changedTouchesA collection of Touch objects representing all touches that changed in this event.

readonly attribute TouchList changedTouches;

DiscussionYou manipulate this collection using TouchList methods.


Methods

initTouchEventInitializes a newly created TouchEvent object.


CHAPTER 10


void initTouchEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in DOMWindow view, in long detail, in long screenX, in long screenY, in long clientX, in long clientY, in boolean ctrlKey, in boolean altKey, in boolean shiftKey, in boolean metaKey, in TouchList touches, in TouchList targetTouches, in TouchList changedTouches, in float scale, in float rotation);

Parameterstype

The type of event that occurred.

canBubbleIndicates whether an event can bubble. If true, the event can bubble; otherwise, it cannot.

cancelableIndicates whether an event can have its default action prevented. If true, the default action can beprevented; otherwise, it cannot.

viewThe view (DOM window) in which the event occurred.

detailSpecifies some detail information about the event depending on the type of event.

screenXThe x-coordinate of the event’s location in screen coordinates.

screenYThe y-coordinate of the event’s location in screen coordinates.

clientXThe x-coordinate of the event’s location relative to the window’s viewport.

clientYThe y-coordinate of the event’s location relative to the window’s viewport.

ctrlKeyIf true, the control key is pressed; otherwise, it is not.

altKeyIf true, the alt key is pressed; otherwise, it is not.

shiftKeyIf true, the shift key is pressed; otherwise, it is not.

metaKeyIf true, the meta key is pressed; otherwise, it is not.


CHAPTER 10


touchesA collection of Touch objects representing all touches associated with this event.

targetTouchesA collection of Touch objects representing all touches associated with this target.

changedTouchesA collection of Touch objects representing all touches that changed in this event.

scaleThe distance between two fingers since the start of an event as a multiplier of the initial distance. Theinitial value is 1.0. If less than 1.0, the gesture is pinch close (to zoom out). If greater than 1.0, thegesture is pinch open (to zoom in).

rotationThe delta rotation since the start of an event, in degrees, where clockwise is positive andcounter-clockwise is negative. The initial value is 0.0.

DiscussionUse this method to programmatically create a TouchEvent object.



CHAPTER 10




Overview

The TouchList class is used to represent a collection of Touch objects. For example, thechangedTouches (page 52) method in TouchEvent returns a TouchList object.

Tasks


length (page 55)The number of Touch objects in this TouchList object.

Getting Touch Objects

item (page 56)Returns the Touch object at the given index.

Properties

lengthThe number of Touch objects in this TouchList object.

readonly attribute unsigned long length;



CHAPTER 11

TouchList Class Reference

Methods

itemReturns the Touch object at the given index.

Touch item(in unsigned long index);

Parametersindex

The index of the item to return.



CHAPTER 11

TouchList Class Reference

Inherits from Event



Overview

WebKitAnimationEvent objects encapsulate information about running animations.

Several animation related events are available through the DOM Event system. The start and end of ananimation, and the end of each iteration of an animation all generate DOM events. An element can havemultiple properties that are animated simultaneously. This simultaneous animation can occur either by settinga single -webkit-animation-name value with keyframes containing multiple properties, or by settingmultiple -webkit-animation-name values. For the purposes of event dispatching, each CSS-webkit-animation-name property specifies a single animation. Therefore, an event is sent for each-webkit-animation-name property, not necessarily for each CSS property that is animated.

Each event contains the duration of the animation. This allows the event handler to determine the currentiteration of a looping animation or the current position of an alternating animation. This duration does notinclude time the animation was in the paused play state.

Types of Animation Events

The type property of an animation event can have the following string values:

webkitAnimationStartOccurs at the start of an animation. It can bubble and be canceled. Its animationName property isset.

webkitAnimationEndOccurs when the animation finishes. It can bubble and be canceled. Its animationName andelapsedTime properties are set.

webkitAnimationIterationOccurs at the end of each iteration of an animation when the-webkit-animation-iteration-count is greater than 1. It does not occur for animations withan iteration count of 1. It can bubble and be canceled. Its animationName and elapsedTimeproperties are set.


CHAPTER 12

WebKitAnimationEvent Class Reference

Tasks


animationName (page 58)The name of the animation. The value of the CSS -webkit-animation-name property of theanimation that caused the event.

elapsedTime (page 58)The duration of the animation, in seconds, since this event was sent, excluding any time the animationis paused. This value is not affected by the value of the CSS -webkit-animation-delay property.If the type of the event is webkitAnimationStart, elapsedTime is 0.

Initializing Objects

initWebKitAnimationEvent (page 59)Initializes a new animation event object.

Properties

animationNameThe name of the animation. The value of the CSS -webkit-animation-name property of the animationthat caused the event.

readonly attribute DOMString animationName;


elapsedTimeThe duration of the animation, in seconds, since this event was sent, excluding any time the animation ispaused. This value is not affected by the value of the CSS -webkit-animation-delay property. If the typeof the event is webkitAnimationStart, elapsedTime is 0.

readonly attribute double elapsedTime;



CHAPTER 12


Methods

initWebKitAnimationEventInitializes a new animation event object.

void initWebKitAnimationEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString animationNameArg, in doubleelapsedTimeArg);

ParameterstypeArg

The type of event. See “Types of Animation Events” (page 57) for possible values.

canBubbleArgDetermines whether the event can bubble. Pass true if it can bubble; otherwise, false.

cancelableArgDetermines whether the event’s default action can be prevented. Pass true if it can be prevented;otherwise, false.

animationNameArgThe name of the animation associated with this event.

elapsedTimeArgThe duration of the animation, in seconds, since the event was sent.

DiscussionYou use this method to initialize the value of a WebKitTransitionEvent object that is created throughthe DocumentEvent interface. This method can only be invoked before the WebKitTransitionEventobject is dispatched via the dispatchEvent method (although it can be invoked multiple times during thatphase, if necessary). If it is invoked multiple times, the final invocation takes precedence.



CHAPTER 12



CHAPTER 12


Inherits from CSSRule



Overview

WebKitCSSKeyframeRule objects represent the style rule for a single keyframe in the @-webkit-keyframesCSS rule used in animations. The WebKitAnimationEvent class encapsulate information about runninganimations.

Tasks


keyText (page 61)A keyframe selector.

style (page 62)The style associated with this keyframe.

Properties

keyTextA keyframe selector.

attribute DOMString keyText;

DiscussionA keyframe selector represented as a percentage value or the keyword from or to. The selector is used tospecify the percentage along the duration of the animation. The keyframe is specified by the block of propertyvalues declared for the selector. The keyword from is equivalent to 0 percent and to is equivalent to 100percent.


CHAPTER 13

WebKitCSSKeyframeRule Class Reference


styleThe style associated with this keyframe.

readonly attribute CSSStyleDeclaration style;



CHAPTER 13

WebKitCSSKeyframeRule Class Reference

Inherits from CSSRule



Overview

WebKitCSSKeyframesRule objects represent the keyframes for a single animation, that is, the contents ofan @-webkit-keyframes CSS rule used in animations. The WebKitAnimationEvent class encapsulateinformation about running animations.

Tasks


name (page 64)The name of the target animation that is set using the -webkit-animation-name property.

cssRules (page 64)The set of style rules that define the keyframes following the animation name.

Changing Rules

insertRule (page 65)Adds a keyframe rule to the collection of keyframes.

deleteRule (page 64)Removes a keyframe rule from the collection of keyframes.

findRule (page 64)Returns the keyframe rule for the specified selector.


CHAPTER 14

WebKitCSSKeyframesRule Class Reference

Properties

cssRulesThe set of style rules that define the keyframes following the animation name.

readonly attribute CSSRuleList cssRules;


nameThe name of the target animation that is set using the -webkit-animation-name property.

attribute DOMString name;


Methods

deleteRuleRemoves a keyframe rule from the collection of keyframes.

void deleteRule(in DOMString key);

Parameterskey

A selector for the rule that is either a percentage or the keyword from or to.


findRuleReturns the keyframe rule for the specified selector.

WebKitCSSKeyframeRule findRule(in DOMString key);

Parameterskey

A selector for the rule that is either a percentage or the keyword from or to.


CHAPTER 14


Return ValueReturns the keyframe rule corresponding to the given selector if it exists.


insertRuleAdds a keyframe rule to the collection of keyframes.

void insertRule(in DOMString rule);

Parametersrule

A string representing a selector and keyframe, where the selector is a percentage or keyword and thekeyframe is a block. The string must follow the format for keyframe blocks in the @-webkit-keyframesCSS rule.



CHAPTER 14



CHAPTER 14




Overview

WebKitCSSMatrix objects represent a 4x4 homogeneous matrix for 3D transforms or a vector for 2Dtransforms. You can use these objects to manipulate matrices in JavaScript. For example, you can multiply,translate, and scale matrices.

The values of a 3D matrix can be initialized from the matrix3d transform function returned bywindow.getComputedStyle(element).webkitTransform(). To apply the final matrix to an element,construct a string using the matrix3d transform function passing the 16 values, and assign it toelement.style.webkitTransform. Similarly, you can construct a matrix for 2D transforms by setting 6values, represented by the a-f properties.

Tasks


a (page 69)The first 2D vector value.

b (page 69)The second 2D vector value.

c (page 69)The third 2D vector value.

d (page 70)The fourth 2D vector value.

e (page 70)The fifth 2D vector value.

f (page 70)The sixth 2D vector value.

m11 (page 70)The 3D matrix value in the first row and first column.


CHAPTER 15

WebKitCSSMatrix Class Reference

m12 (page 70)The 3D matrix value in the first row and second column.

m13 (page 71)The 3D matrix value in the first row and third column.

m14 (page 71)The 3D matrix value in the first row and fourth column.

m21 (page 71)The 3D matrix value in the second row and first column.

m22 (page 72)The 3D matrix value in the second row and second column.

m23 (page 72)The 3D matrix value in the second row and third column.

m24 (page 72)The 3D matrix value in the second row and fourth column.

m31 (page 72)The 3D matrix value in the third row and first column.

m32 (page 73)The 3D matrix value in the third row and second column.

m33 (page 73)The 3D matrix value in the third row and third column.

m34 (page 73)The 3D matrix value in the third row and fourth column.

m41 (page 73)The 3D matrix value in the fourth row and first column.

m42 (page 74)The 3D matrix value in the fourth row and second column.

m43 (page 74)The 3D matrix value in the fourth row and third column.

m44 (page 74)The 3D matrix value in the fourth row and fourth column.

Setting the Matrix

setMatrixValue (page 77)Sets the matrix values using a string representation.

Applying Operations

multiply (page 75)Returns the result of multiplying this matrix by a given matrix that is on the right.

inverse (page 75)Returns the inverse of this matrix.


CHAPTER 15


translate (page 77)Returns the result of translating this matrix by a given vector.

scale (page 76)Returns the result of scaling this matrix by a given vector.

rotate (page 75)Returns the result of rotating this matrix by a given vector.

rotateAxisAngle (page 76)Returns the result of rotating this matrix by a given vector and angle.

Converting the Matrix

toString (page 77)Returns a string representation of the matrix.

Properties

aThe first 2D vector value.

attribute float a;


bThe second 2D vector value.

attribute float b;


cThe third 2D vector value.

attribute float c;



CHAPTER 15


dThe fourth 2D vector value.

attribute float d;


eThe fifth 2D vector value.

attribute float e;


fThe sixth 2D vector value.

attribute float f;


m11The 3D matrix value in the first row and first column.

attribute float m11;

DiscussionOne of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first rowand the second column.

AvailabilityAvailable in Safari 4.0.3 and later.Available in iOS 2.0 and later.

m12The 3D matrix value in the first row and second column.


CHAPTER 15





m13The 3D matrix value in the first row and third column.




m14The 3D matrix value in the first row and fourth column.




m21The 3D matrix value in the second row and first column.





CHAPTER 15


m22The 3D matrix value in the second row and second column.




m23The 3D matrix value in the second row and third column.




m24The 3D matrix value in the second row and fourth column.




m31The 3D matrix value in the third row and first column.




CHAPTER 15



m32The 3D matrix value in the third row and second column.




m33The 3D matrix value in the third row and third column.




m34The 3D matrix value in the third row and fourth column.




m41The 3D matrix value in the fourth row and first column.


CHAPTER 15





m42The 3D matrix value in the fourth row and second column.




m43The 3D matrix value in the fourth row and third column.




m44The 3D matrix value in the fourth row and fourth column.





CHAPTER 15


Methods

inverseReturns the inverse of this matrix.

WebKitCSSMatrix inverse() raises CSSException;

Return ValueA new matrix that is the inverse of this matrix.

DiscussionThis matrix is not modified by this method.


multiplyReturns the result of multiplying this matrix by a given matrix that is on the right.

WebKitCSSMatrix multiply(in WebKitCSSMatrix secondMatrix) raises CSSException;

ParameterssecondMatrix

The matrix to multiply.

Return ValueA new matrix that is the result of multiplying this matrix by the given matrix.

DiscussionThe given matrix is on the right of the multiplication. This matrix is not modified by this method.


rotateReturns the result of rotating this matrix by a given vector.

WebKitCSSMatrix rotate(in float rotX, in float rotY, in float rotZ);

ParametersrotX

The x component in the vector, in degrees.

rotYThe y component in the vector, in degrees. If undefined, the x component is used.


CHAPTER 15


rotZThe z component in the vector, in degrees. If undefined, the x component is used.

Return ValueA new matrix that is the result of rotating this matrix by each of the three rotation matrices about the majoraxes, first the x axes, y axes, and then z axes.



rotateAxisAngleReturns the result of rotating this matrix by a given vector and angle.

WebKitCSSMatrix rotateAxisAngle(in float x, in float y, in float z, in float angle);

Parametersx

The x component in the vector, in degrees.

yThe y component in the vector, in degrees. If undefined, the x component is used.

zThe z component in the vector, in degrees. If undefined, the x component is used.

angleThe angle of rotation about the axis vector, in degrees.

Return ValueA new matrix that is the result of rotating this matrix by each of the three rotation matrices about the majoraxes and angle. The right-hand rule is used to determine the direction of rotation.



scaleReturns the result of scaling this matrix by a given vector.

WebKitCSSMatrix scale(in float scaleX, in float scaleY, in float scaleZ);

ParametersscaleX

The x component in the vector.

scaleYThe y component in the vector. If undefined, the x component is used.


CHAPTER 15


scaleZThe z component in the vector. If undefined, 1 is used.

Return ValueA new matrix that is the result of scaling this matrix.



setMatrixValueSets the matrix values using a string representation.

void setMatrixValue(in DOMString string);

Parametersstring

A string returned by the matrix3d transform function—typically returned bywindow.getComputedStyle(element).webkitTransform().


toStringReturns a string representation of the matrix.

DOMString toString();

Return ValueA string representation of the matrix’s values.


translateReturns the result of translating this matrix by a given vector.

WebKitCSSMatrix translate(in float x, in float y, in float z);

Parametersx

The x component in the vector.

yThe y component in the vector.


CHAPTER 15


zThe z component in the vector. If undefined, 0 is used.

Return ValueA new matrix that is the result of translating this matrix.




CHAPTER 15


Inherits from CSSValueList



Overview

WebKitCSSTransformValue objects represent one transform function in a CSS transform specified usingthe -webkit-transform property. The operationType (page 79) property in this class specifies whichfunction is used. The objects also contain a list of values which are the parameters to the function. Theparameters appear in the same order as they appear in the function.

Tasks


operationType (page 79)The transform function used. Possible values are described in CSS_MATRIX (page 80).

Properties

operationTypeThe transform function used. Possible values are described in CSS_MATRIX (page 80).

readonly attribute unsigned short operationType;



CHAPTER 16

WebKitCSSTransformValue Class Reference

Constants

DescriptionConstant

Specifies the matrix transform function.const unsigned short CSS_MATRIX = 1;


CSS_MATRIX

Specifies the matrix3d transform function.const unsigned short CSS_MATRIX3D = 2;

Available in Safari 4.0.3 and later.Available in iOS 2.0 and later.

CSS_MATRIX3D

Specifies the perspective transform function.const unsigned short CSS_PERSPECTIVE = 12;


CSS_PERSPECTIVE

Specifies the rotate transform function.const unsigned short CSS_ROTATE = 3;


CSS_ROTATE

Specifies the rotate3d transform function.const unsigned short CSS_ROTATE3D = 4;


CSS_ROTATE3D

Specifies the rotateX transform function.const unsigned short CSS_ROTATEX = 13;


CSS_ROTATEX

Specifies the rotateY transform function.const unsigned short CSS_ROTATEY = 14;


CSS_ROTATEY


CHAPTER 16


DescriptionConstant

Specifies the rotateZ transform transform function.const unsigned short CSS_ROTATEZ = 15;


CSS_ROTATEZ

Specifies the scale transform function.const unsigned short CSS_SCALE = 7;


CSS_SCALE

Specifies the scale3d transform function.const unsigned short CSS_SCALE3D = 8;


CSS_SCALE3D

Specifies the scaleX transform function.const unsigned short CSS_SCALEX = 19;


CSS_SCALEX

Specifies the scaleY transform function.const unsigned short CSS_SCALEY = 20;


CSS_SCALEY

Specifies the scaleZ transform function.const unsigned short CSS_SCALEZ = 21;

Available in iOS 2.0 and later.

CSS_SCALEZ

Specifies the skew transform function.const unsigned short CSS_SKEW = 8;

Available in Safari 4.0 and later.

CSS_SKEW

Specifies the skewX transform function.const unsigned short CSS_SKEWX = 9;


CSS_SKEWX


CHAPTER 16


DescriptionConstant

Specifies the skewY transform function.const unsigned short CSS_SKEWY = 10;


CSS_SKEWY

Specifies the translate transform function.const unsigned short CSS_TRANSLATE = 5;


CSS_TRANSLATE

Specifies the translate3d transform function.const unsigned short CSS_TRANSLATE3D = 6;


CSS_TRANSLATE3D

Specifies the translateX transform function.const unsigned short CSS_TRANSLATEX = 16;


CSS_TRANSLATEX

Specifies the translateY transform function.const unsigned short CSS_TRANSLATEY = 17;


CSS_TRANSLATEY

Specifies the translateZ transform function.const unsigned short CSS_TRANSLATEZ = 18;


CSS_TRANSLATEZ

An unknown function.const unsigned short CSS_UNKNOWN = 0;


CSS_UNKNOWN


CHAPTER 16




Overview

WebKitPoint objects represent a point in two-dimensional space used by CSS transitions specified usingthe -webkit-transition property.

Tasks


x (page 83)The x coordinate for the point.

y (page 83)The y coordinate for the point.

Properties

xThe x coordinate for the point.

attribute float x;


yThe y coordinate for the point.


CHAPTER 17

WebKitPoint Class Reference

attribute float y;



CHAPTER 17

WebKitPoint Class Reference

Inherits from Event



Overview

WebKitTransitionEvent objects provide information about CSS transitions specified using the-webkit-transition property. An event is sent at the end of a transition for each CSS property in thetransition. Each event contains the name of the CSS property and duration of the transition. You can usethese events to perform some action that starts at the end of a transition.

Types of Transition Events

The only possible string value for a transition event’s type property is:

webKitTransitionEndSent when a transition completes.

Tasks


propertyName (page 86)The name of the CSS property associated with the transition.

elapsedTime (page 86)The duration of the transition, in seconds, since this event was sent. This value is not affected by thevalue of the CSS -webkit-transition-delay property.


CHAPTER 18

WebKitTransitionEvent Class Reference

Initializing

initWebKitTransitionEvent (page 86)Initializes a new transition event object.

Properties

elapsedTimeThe duration of the transition, in seconds, since this event was sent. This value is not affected by the valueof the CSS -webkit-transition-delay property.

readonly attribute double elapsedTime;


propertyNameThe name of the CSS property associated with the transition.

readonly attribute DOMString propertyName;


Methods

initWebKitTransitionEventInitializes a new transition event object.

void initWebKitTransitionEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString propertyNameArg, in doubleelapsedTimeArg);

ParameterstypeArg

The type of event.

Possible values for this argument are described in “Types of Transition Events” (page 85). This typeof event can bubble and be canceled. Its propertyName property is always set.

canBubbleArgDetermines whether the event can bubble. Pass true if it can bubble; otherwise, false.


CHAPTER 18


cancelableArgDetermines whether the event’s default action can be prevented. Pass true if it can be prevented;otherwise, false.

propertyNameArgThe name of the CSS property associated with this event.

elapsedTimeArgThe duration of the transition, in seconds, since the event was sent.

DiscussionYou use this method to initialize the value of a WebKitTransitionEvent object that is created throughthe DocumentEvent interface. This method can only be invoked before the WebKitTransitionEventobject is dispatched via the dispatchEvent method (although, it can be invoked multiple times duringthat phase, if necessary). If it is invoked multiple times, the final invocation takes precedence.



CHAPTER 18



CHAPTER 18


This table describes the changes to Safari DOM Additions Reference.

NotesDate

Changed title from Safari DOM Extensions Reference.2010-05-19

First revision as a collection document.2010-02-24

Minor edits throughout.2009-08-03

Minor edits throughout.2009-07-28

Added HTML 5 media classes and made other minor edits throughout.2009-06-08

Updated per Safari 4.0 changes.2009-01-30

Added the DOMApplicationCache class.2008-11-21

Changed the title from "Safari DOM Touch Reference for iPhone OS" and addedvisual effects reference.

2008-10-15

Revised document that describes Safari on iPhone-only JavaScript functionsand properties.

2008-07-11


REVISION HISTORY

Document Revision History


REVISION HISTORY

Document Revision History

Safari JS reference

Documents

Transcript of Safari JS reference