Adding QtWebKit Guide (BETA).

Added images, new doc build configurations, and example code.

4 files changed, 3946 insertions, 0 deletions

diff --git a/doc/src/webkit/guide/chapter_cache.qdoc b/doc/src/webkit/guide/chapter_cache.qdoc
new file mode 100644
index 0000000..2f46784
--- /dev/null
+++ b/doc/src/webkit/guide/chapter_cache.qdoc
@@ -0,0 +1,556 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit documentation.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\page qtwebkit-guide-cache.html
+\title Client Storage (BETA)
+\chapter Client Storage
+
+Traditional mobile web development centered around the limitations of
+client handsets,
+which had very little storage for applications.
+As handsets become more powerful,
+however,
+this assumption is no longer valid.
+HTML5\'s newly introduced Storage features expand application storage
+on the client.
+
+HTML 5 standardizes access to an application\'s local data via
+\c{LocalStorage} and \c{SessionStorage} APIs.
+These APIs boost the amount of client storage available to web
+applications.
+They also can effectively replace cookies as a means to maintain
+application state and track user preferences.
+
+Local storage persists indefinitely,
+while session storage lasts only for the duration of a window session.
+Local storage is available from any page or window from the same site,
+while session storage is local to each window.
+Both local and session storage rely on simple key/value pairs,
+with keys and values both stored as strings.
+
+Local and session storage are not the only client storage available.
+HTML 5 WebSQL serves as a more full-featured,
+client-side database.
+WebSQL brings SQLite-based structured database functionality,
+typically deployed on servers,
+to client browser applications.
+WebSQL is appropriate for data-intensive applications requiring
+complex queries rather than simple key/value access.
+WebSQL database transaction calls help avoid interfaces from locking
+up,
+facilitate rollback and error handling,
+and protect against SQL injection.
+Database versioning allows you to manage schema changes incrementally.
+
+
+\section1 Simple Data Storage
+
+The \c{localStorage} and \c{sessionStorage} APIs offer applications
+up to 5MB of data storage. They both share the same simple key/value
+interface, but have different namespaces and also differ in the extent
+to which data is available. Local storage persists indefinitely, while
+session storage only lasts for the duration of a window session. Local
+storage is available from any page or window from the same site, while
+session storage is local to each window.
+
+The following examples demonstrate the API interface.  While these use
+\c{localStorage} as an example, the same set of API calls work for
+\c{sessionStorage}, which is also available within the \c{window}
+object.
+
+The following performs an initial check for support of browser-based
+storage and assigns the database to a variable:
+
+\code
+if (window.localStorage) {
+    var db = window.localStorage;
+    // storage functionality here
+}
+else {
+    // store data remotely?
+}
+\endcode
+
+The \c{getItem()} method retrieves the value of a database field named
+\bold{key}:
+
+\code
+var value = db.getItem("key");
+\endcode
+
+Note that both keys and values are represented as strings.
+If you specify any other type of data,
+it is converted silently to a string representation.
+(See \l{Storing Non-String Data} for ways around this limitation.)
+If \c{getItem()} returns \c{null} rather than a string value,
+it means the specified key does not exist.
+
+The \c{setItem()} method establishes a new value.
+When adding data,
+it is a good idea to check to make sure you haven\'t exceeded the
+allotted storage space:
+
+\code
+try {
+    db.setItem("key", "string");
+}
+catch(err) {
+    if (err.QUOTA_EXCEEDED_ERR) {
+        // storage space is exceeded
+    }
+}
+\endcode
+
+The \c{removeItem()} method deletes database fields:
+
+\code
+db.removeItem("key");
+\endcode
+
+The \c{clear()} method deletes all key/value pairs within the
+database, either for an entire site in the case of \c{localStorage},
+or for an individual window session in the case of \c{sessionStorage}:
+
+\code
+db.clear();
+\endcode
+
+Databases can be accessed as arrays using index notation, useful in
+cases where you may not know all the field names.  The \c{length}
+property returns the number of fields in the database, and the
+\c{key()} method returns the name of the key corresponding to a given
+index. The following reflects the contents of a database in a
+JavaScript object:
+
+\code
+var obj = {};
+for ( var i = 0, l = db.length ; i < l ; i++ ) {
+    obj[ db.key(i) ] = db.getItem( db.key(i) );
+}
+\endcode
+
+Since keys correspond to array indexes, you should not add or remove
+keys during any operation that iterates over the full set of key/value
+pairs. Newly introduced keys are introduced randomly into the array\'s
+sequence.
+
+The following displays simple storage functionality. The application
+prompts for a login and password if they are unavailable. This locally
+stored data is available the next time users open the browser.
+However, the contents of the credit card field is stored only for the
+duration of the browing session.
+
+\l{ex_storage}{\inlineimage webkit-guide/scr_storage.png
+}
+
+\l{storage_css}{(CSS)}
+\l{storage_js}{(JavaScript)}
+
+
+    \section2 Storing Non-String Data
+
+    Since local and session storage APIs only support string values, you
+    need to be careful not to allow errors that result from passive
+    conversions from other data types. The following sample shows how
+    such an error might come about:
+
+    \code
+    var db = window.localStorage;
+    var saveCardInfo;
+        // user expresses preference NOT to save credit card info:
+    saveCardInfo = false;
+        // BUG happens here...
+    db.setItem("save_card_info", saveCardInfo);
+        // variable is now a string, not a boolean:
+    saveCardInfo = db.getItem("save_card_info");
+        // both "true" and "false" strings evaluate as true...
+    if ( saveCardInfo ) {
+        // ...so this code always executes...
+    }
+    else {
+        // ...and this code never executes.
+    }
+    \endcode
+
+    The user\'s preference to retain credit card information is expressed
+    within the application as a \c{true} or \c{false} boolean value. When
+    each value is passed to storage, however, it is passively converted to
+    a string. When reassigned to a JavaScript variable, it no longer
+    serves as a valid boolean test. The application falsely assumes users
+    want to save credit card information, regardless of their expressed
+    preference.
+
+    The following sample fixes the problem. Instead of using \c{true} and
+    \c{false} boolean values, it converts \c{1} and \c{0} strings to
+    numbers:
+
+    \code
+    var db = window.localStorage;
+    var saveCardInfo = 0;
+    db.setItem("save_card_info", saveCardInfo);
+    // multiplying forces numeric output:
+    saveCardInfo = db.getItem("save_card_info") * 1;
+    \endcode
+
+    For a more reliable alternative, store values as JSON strings and rely
+    on automatic type conversion when subsequently parsing them.  The
+    following sample shows how parsing JSON preserves both boolean and
+    numeric data:
+
+    \code
+    var saveCardInfo = true;					// boolean
+    var shipMethod = 2;						// number
+    var db = window.localStorage;
+
+    db.setItem("save_card_info", JSON.stringify(saveCardInfo));
+    db.setItem("ship_method", JSON.stringify(shipMethod));
+
+    saveCardInfo = JSON.parse(db.getItem("save_card_info"));	// boolean
+    shipMethod = JSON.parse(db.getItem("ship_method"));		// number
+    \endcode
+
+    Note that this simple approach may cause problems of its own. For
+    example, perhaps the words \bold{true} and \bold{false} really should
+    be represented as strings. Encapsulating data within objects accounts
+    for such variability:
+
+    \code
+    var db = window.localStorage;
+    var obj = {
+        bool	: true,
+        str		: "true",
+        num		: 1
+    };
+    db.setItem("appState", JSON.stringify(obj));	// to database...
+    // "appState" is "{'bool':true,'num':1,'str':'true'}"
+    obj = JSON.parse(db.getItem("appState"));	// ...and back
+    // obj is same as initially defined.
+    \endcode
+
+    The ability to save objects as JSON strings means that you can save an
+    application\'s state within a single database field.  For example, you
+    might use the following approach to save the entire contents of a
+    shopping cart in a single field for later use:
+
+    \code
+    var db = window.localStorage;
+    var cart = { items: [] };
+
+    cart.message = "From your loving uncle";
+
+    cart.items.push({
+        description	: "Floor to Ceiling Shoe Rack",
+        id		: 203174676,
+        price	: 99.95,
+        quantity	: 1,
+        weight	: 20,
+    });
+
+    cart.items.push({
+        description	: "Automatic Laser Toy for Cats",
+        id		: 203345371,
+        price	: 19.95,
+        quantity	: 2,
+        weight	: 0.5,
+    });
+
+    // save all cumulative items:
+    db.setItem("cart", JSON.stringify(cart));
+
+    // extract items from storage:
+    cart = JSON.parse(db.getItem("cart"));
+    \endcode
+
+    JSON allows you to store data types, but functions are ignored.  That
+    makes it more difficult to preserve objects representing fully
+    functional applications.
+
+    \section2 Storage Events
+
+    The \c{storage} event allows applications to respond indirectly to
+    modified data resulting from calls to \c{setItem()}, \c{removeItem()},
+    or \c{clear()}. This may be useful in providing users with visual
+    feedback notifying them of data that is modified locally, perhaps
+    rather than being sent to a remote server:
+
+    \code
+    window.addEventListener("storage", function(event){
+        var icon = document.querySelector("#indicator");
+        if (event.storageArea.length) {
+            icon.className = "writing";
+        }
+        else {
+            icon.className = "empty";
+        }
+    }, false);
+    \endcode
+
+    The \c{storage} event\'s \c{storageArea} attribute returns the
+    \c{localStorage} or \c{sessionStorage} object being modified. The
+    \c{key} is the name of the field being modified, and \c{oldValue} and
+    \c{newValue} are its values before and after the event. The \c{url} is
+    the page that called the method triggering the change.
+
+
+\section1 WebSQL Databases
+
+While common local- or session-based databases are capable of storing
+complex data structures, QtWebKit-based browsers can also rely upon
+the WebSQL standard, which brings SQLite-based structured database
+functionality, typically deployed on servers, to client browser
+applications. Based on SQLite version 3.6.19, WebSQL is appropriate
+for data-intensive applications requring complex queries rather than
+simple key/value access.
+
+The following test confirms support for WebSQL:
+
+\code
+if (!!window.openDatabase) {
+    // supports WebSQL
+}
+\endcode
+
+Calls to databases made via the WebSQL API are made asynchronously via
+transactions to avoid the user interface from locking up, as database
+interaction may occur from several windows at a time.
+
+The three core API methods are:
+
+\list
+
+\o \c{openDatabase()}
+
+\o \c{transaction()}
+
+\o \c{executeSql()}
+
+\endlist
+
+    \section2 Creating and Opening a New Database
+
+    To create and open a database, use \c{openDatabase()}on the Window object,
+    for example:
+
+    \code
+    var db = openDatabase('mydb', '1.0', 'my first database', 2*1024*1024);
+    var db = openDatabase('notes', '', 'The Example Notes App!', 1048576);
+    \endcode
+
+    The four required arguments are the database name, version, display
+    name, and estimated size in bytes.  You can supply a function as an
+    optional fifth argument to serve as a callback when a database is
+    created.  It may be used to call the \c{changeversion()} method, in
+    which case the callback is invoked with an empty string for the
+    database version.
+
+    The second example above specifies an empty string for the version. In
+    this case the database opens no matter what the database version
+    is. (An \c{openDatabase()} call specifying the wrong version for an
+    existing database throws an \c{INVALID_STATE_ERR} exception.) You can
+    then query the version by examining the database object's version
+    property, for example:
+
+    \code
+    var version = db.version;
+    \endcode
+
+    Note that you don\'t need to close a client-side Web SQL database when
+    you\'re done working with it.
+
+    \section2 Transaction Calls and ExecuteSQL Method
+
+    Performing database transactions is superior to running SQL statements
+    directly because transactions are not committed if they fail and you
+    can undo them if needed. Transactions also allow you to handle errors
+    using a callback. To implement a transaction, specify a callback
+    function such as the following:
+
+    \code
+    db.transaction(function (tx) {
+      // SQL details on the tx object go here
+    }
+    \endcode
+
+    The \c{transaction()} method takes one to three arguments:
+
+    \list
+
+    \o a required transaction callback, in which \c{executeSQL()} calls
+    belong
+
+    \o an optional transaction error object
+
+    \o an optional success callback.
+
+    \endlist
+
+    Use the \c{executeSQL()} method to specify SQL statements for read and
+    write operations. The method protects against SQL injection and
+    provides a callback method to process the results of any SQL queries
+    you specify. The \c{executeSQL()} method takes from one to four
+    arguments:
+
+    \list
+
+    \o a required SQL statement
+
+    \o an optional object array of arguments
+
+    \o an optional SQL statement callback
+
+    \o an optional SQL statement error callback
+
+    \endlist
+
+    The example below creates the database if it doesn\'t exist, adds a
+    two-column table to the database, and adds a row of data to the table:
+
+    \code
+    var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);
+    db.transaction(function (tx) {
+        tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
+        tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
+    });
+    \endcode
+
+    To capture data from the user or an external source, use \c{?}
+    placeholders to map that data into the SQL query. This ensures the
+    data doesn\'t compromise database security, for example from SQL
+    injection:
+
+    \code
+    tx.executeSql('INSERT INTO foo (id, text) VALUES (?, ?)', [id, value]);
+    \endcode
+
+    \c{id} and \c{value} are external variables, and \c{executeSql} maps
+    the items in the array to the \c{?}s.
+
+    To select values from the table, use a callback to capture the
+    results:
+
+    \code
+    tx.executeSql('SELECT * FROM foo', [], function(tx, results) {
+        for (var i = 0 , len = results.rows.length; i < len; i++) {
+            // do something with results.rows.item(i).text
+        }
+    });
+    \endcode
+
+    No fields are mapped in the above query, but to use the third argument
+    you need to pass in an empty array as the second argument.
+
+    The SQL statement callback for \c{executeSQL()} is called with the
+    \c{transaction} object and a SQL statement \c{result} object. The
+    \c{result} gives access to the ID of the last inserted row, the number
+    of rows affected, and an indexed list representing the rows returned,
+    in the order returned.
+
+    The \c{result} object contains an array-like \c{rows} object. It has a
+    length, but to access individual rows you need to use
+    \c{results.rows.item(i)}, where \c{i} is the index of the row.  This
+    returns an object representation of each row.  For example, if your
+    database has a \c{name} and an \c{age} field, the \c{row} contains a
+    \c{name} and an \c{age} property. The value of the \c{age} field can
+    be accessed using \c{results.rows.item(i).age}.
+
+    \section2 Changing Database Versions
+
+    Each database has one version at a time and multiple versions cannot
+    exist at one time. Versions allow you to manage schema changes
+    incrementally.
+
+    You can change the version of a client-side Web SQL database using the
+    \c{changeversion()} method:
+
+    \code
+    if (db.version == "1.0") {
+        try {
+            // comment out for crash recovery.
+            db.changeVersion("1.0", "2.0", cv_1_0_2_0, oops_1_0_2_0, success_1_0_2_0);
+        } catch(e) {
+            alert('changeversion 1.0 -> 2.0 failed');
+            alert('DB Version: '+db.version);
+        }
+    }
+    \endcode
+
+    \c{changeversion()} takes the following arguments: required old and
+    new version numbers, optional SQL transaction callback, optional SQL
+    transaction error callback, and optional success callback.
+
+    \section2 Errors
+
+    Asynchronous API errors are reported using callbacks that have a
+    \c{SQLError} object as one of their arguments. \c{SQLError} contains a
+    code from the table below and a localized message string.
+
+    Error codes are:
+
+    \list
+
+    \o 0 \c{UNKNOWN_ERROR} Transaction failed for reasons unrelated to the DB
+
+    \o 1 \c{DATABASE_ERROR} Statement failed for DB reasons not covered by other
+    code
+
+    \o 2 \c{VERSION_ERROR} DB version doesn\'t match expected version
+
+    \o 3 \c{TOO_LARGE_ERROR} Data returned from DB was too large. Try the
+    \c{SQL LIMIT} modifier.
+
+    \o 4 \c{QUOTA_ERROR} Insufficient remaining storage
+
+    \o 5 \c{SYNTAX_ERROR} Syntax error, argument mismatch, or unallowed
+    statement
+
+    \o 6 \c{CONSTRAINT_ERROR} An \c{INSERT}, \c{UPDATE}, or \c{REPLACE}
+    statement failed due to a constraint error
+
+    \o 7 \c{TIMEOUT_ERROR} Timeout waiting for transaction lock
+
+    \endlist
+
+    \bold{See Also:}
+    \l{http://html5doctor.com/introducing-web-sql-databases/}{HTML5
+    Doctor: Introducing Web SQL Databases}
+
+*/
diff --git a/doc/src/webkit/guide/chapter_canvas.qdoc b/doc/src/webkit/guide/chapter_canvas.qdoc
new file mode 100644
index 0000000..a5a95f2
--- /dev/null
+++ b/doc/src/webkit/guide/chapter_canvas.qdoc
@@ -0,0 +1,1209 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit documentation.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+/*!
+
+\page qtwebkit-guide-canvas.html
+\title Canvas Graphics (BETA)
+
+\chapter Canvas Graphics
+
+HTML5\'s Canvas API enables you to draw within a Web page or Web App
+using JavaScript. After you define a rectangle that serves as your
+drawing canvas, you can draw straight and curved lines, simple
+and complex shapes, graphs, and referenced graphic images. You can add
+text, color, shadows, gradients, and patterns. The canvas API also enables
+you to save or export the canvas as a .png or .jpeg image file.
+
+To define the drawing area, set the \c{width} and \c{height} of a
+\c{<canvas>} element. For example, the following sets a drawing area
+with a height of 100 pixels and width of 200 pixels:
+
+\code
+<canvas id="mycanvas" width="100" height="200"></canvas>
+\endcode
+
+By default, \c{canvas} elements are sized 150 pixels high and 300
+pixels wide.  You can also set the size of the canvas using CSS:
+
+\code
+canvas { height : 200px; width : 100px; }
+\endcode
+
+The \c{canvas} element is transparent and has no visible borders until
+you \l{Accessing the Rendering Context}{access the 2D rendering
+context}.
+
+Resetting the width or height of an existing canvas erases its
+contents and resets all the context properties of the canvas to their
+default values.
+
+\section1 Accessing the Rendering Context
+
+The rendering \bold{context} defines the methods and attributes needed
+to draw on the canvas. QtWebKit currently supports the two-dimensional
+rendering context. The following assigns the canvas rendering context
+to a \c{context} variable:
+
+\code
+var context = canvas.getContext("2d")
+\endcode
+
+The 2d context renders the canvas as a coordinate system whose origin
+(0,0) is at the top left corner, as shown in the figure below.
+Coordinates increase along the \c{x} axis from left to right and along
+the \c{y} axis from top to bottom of the canvas.
+
+\image webkit-guide/canvas_context.gif
+
+\section1 Drawing Shapes
+
+The 2D rendering context supports rectangles, lines, and arcs, which
+you can combine to build complex shapes and graphic images.
+    \section2 Drawing Rectangles
+
+    The rectangle is the only geometric shape that is built in to the
+    canvas API. You can draw an outline of a rectangle, a filled
+    rectangle, and a filled rectangle with clear parts. You do not have to
+    create a path to draw a rectangle.
+
+    To draw an outline of a rectangle, use the \c{strokeRect()} method.
+
+    To draw a filled rectangle, use the \c{fillRect()} method. The default
+    fill color is black.
+
+    To clear part of a filled rectangle, use the \c{clearRect()} method.
+
+    Each method accepts the following series of arguments:
+
+    \list
+
+    \o \c{x} is the position on the canvas to the right of the origin
+    (0,0) of the top left corner of the rectangle
+
+    \o \c{y} is the position on the canvas below the origin of the top
+    left corner of the rectangle
+
+    \o \c{width} is the width of the rectangle to be drawn
+
+    \o \c{height} is the height of the rectangle to be drawn
+
+    \endlist
+
+    For example, the following code draws concentric rectangles:
+
+    \code
+    var context = canvas.getContext("2d");
+    canvas.strokeRect(50,50,50,50);
+    canvas.fillRect(60,60,30,30);
+    canvas.clearRect(70,70,10,10);
+    \endcode
+
+    \image webkit-guide/canvas_rectangles.gif
+
+    \section2 Drawing Lines
+
+    To draw a line, you first have to "put your pencil down" on the canvas
+    by creating a path. The \c{context.beginPath()} method sets a new path
+    in the canvas. Each line that you draw is stored as a sub-path.
+    Sub-paths can be closed to form a shape, or they can be left open.
+    Each time you want to draw a new shape, you have to call the
+    \c{beginPath()} method to reset the current path.
+
+    After calling \c{beginPath()}, you set your starting position on the
+    canvas by calling the \c{context.moveTo(x,y)} method. The
+    \c{moveTo(x,y)} method creates a new subpath on the canvas that begins
+    at the point (x,y).
+
+    To draw a straight line, call the \c{context.lineTo(x,y)} method. This
+    adds the point (x,y) to the current subpath and connects it to the
+    previous subpath by a straight line. In other words, (x,y) are the
+    coordinates of the line\'s endpoint. For example:
+
+    \code
+    context.beginPath();
+    context.moveTo(10,10);
+    context.lineTo(30,30);
+    \endcode
+
+    To get the "pencil" to actually draw on the canvas, first use the
+    \c{strokeStyle} property to set the color to a value such as black
+    (#000):
+
+    \code
+    context.strokeStyle(#000);
+    \endcode
+
+    (The \c{strokeStyle} property can be a CSS color, a pattern, or a
+    gradient.)  Then use the \c{context.stroke()} method to actually draw
+    the line on the canvas:
+
+    \code
+    context.stroke();
+    \endcode
+
+    This produces the image below. The numeric coordinates are added for
+    clarity but are not part of the image drawn by the code:
+
+    \image webkit-guide/canvas_lineStrokeTo.gif
+
+    To create a shape, call the \c{context.closePath()} method:
+
+    \code
+    context.closePath();
+    context.moveTo(10,10);		// starting point
+    context.lineTo(30,30);		// specify first line
+    context.moveTo(30,30);		// move to end of first line
+    context.lineTo(60,10);		// specify second line
+    context.moveTo(60,10);		// move to end of second line
+    context.lineTo(10,10);		// specify third line to close triangle
+    context.strokeStyle("#000");	// use black color for lines
+    context.stroke();		// draws the triangle lines on the canvas
+    \endcode
+
+    To fill the shape, use the \c{fillstyle} property and the \c{fill()}
+    method:
+
+    \code
+    context.fillStyle("#FF0000"); // use red color for fill
+    context.fill(); // fill the triangle
+    \endcode
+
+    The above commands, if coded fully, would create the shape below:
+
+    \image webkit-guide/canvas_closepath.gif
+
+    \bold{NOTE:} It is not necessary to close the path when calling the
+    \c{fill()} method. Calling \c{fill()} closes the path and creates the
+    completed shape.
+
+    You can draw lines of various widths, endcap types, and joining
+    options by configuring the following attributes:
+
+    \list
+
+    \o \c{lineWidth} sets the thickness of the current line. The value can
+    be any number greater than 0. For example, \c{context.lineWidth = 10}
+    sets the line thickness to 10 units. The default value is 1 unit,
+    which is not the same as 1 pixel. Instead, the line is centered on the
+    current path, with half its thickness on each side of the path.
+
+    \o \c{lineCap} sets the type of endpoint of the current line. The
+    value can be either \c{butt}, \c{square}, or \c{round}. (The
+    default value is \c{butt}.)
+
+    \list
+
+    \o \c{butt}- the ends of the line abutt the line guide.
+
+    \o \c{square} adds a box at both ends of the line.
+
+    \o \c{round} adds a semicircle at both ends of the line.
+
+    \endlist
+
+    \o \c{lineJoin} sets the style with which lines are joined. The value
+    can be either \c{bevel}, \c{round}, or \c{miter}. (The default value
+    is \c{miter}.)
+
+    \list
+
+    \o \c{bevel} flattens the corners at which the lines join
+
+    \o \c{round} rounds the corners at which the lines join
+
+    \o \c{miter}  joins the lines at a single point
+
+    \endlist
+
+    \o \c{miterLimit} sets the miter limit ratio. The value can be any
+    number greater than 0. The miter limit ratio determines how far the
+    connection point of the outside of the lines can be from the
+    connection point of the inside of the lines. (The default value is
+    10.)
+
+    \endlist
+
+    \image webkit-guide/canvas_linecap.png
+
+    \section2 Drawing Arcs
+
+    To draw an arc, you begin with the same steps your followed to create
+    a line:
+
+    \list 1
+
+    \o Call the \c{context.beginPath()} method to "put your pencil down" on the
+    canvas and set a new path.
+
+    \o Call the \c{context.moveTo(x,y)} method to set your starting
+    position on the canvas at the point (x,y).
+
+    \o To draw an arc or circle, call the
+    \c{context.arcTo(x1,y1,x2,y2,radius)} method. This adds an arc with
+    starting point \c{(x1,y1)}, ending point \c{(x2,y2)}, and radius \c{radius} to the
+    current subpath and connects it to the previous subpath by a straight
+    line.
+
+    \image webkit-guide/canvas_arcTo.png
+
+    \o An alternative way to draw an arc or circle is to call the
+    \c{context.arc(x,y,radius,startAngle,endAngle,anticlockwise)}
+    method. This adds an arc to the current subpath that lies on the
+    circumference of the circle whose center is at the point (x,y) and
+    whose radius is \c{radius}.
+
+    \image webkit-guide/canvas_arcTo2.png
+
+    Both \c{startAngle} and \c{endAngle} are measured from the x axis in
+    units of radians.
+
+    A complete circle is 360 degrees, or 2\pi radians. A semicircle is 180
+    degrees, or \pi radians. The number of radians is the number of
+    degrees multiplied by \pi/180, expressed in JavaScript as:
+
+    \code
+    var radians = (Math.PI/180)*degrees;
+    \endcode
+
+    \image webkit-guide/canvas_startAngle.png
+
+    \c{anticlockwise} has the value \c{TRUE} for each arc in the figure
+    above because they are all drawn in the counterclockwise direction.
+
+    \o To create a shape, call the \c{context.closePath()} method. This
+    marks the current subpath as closed and draws a straight line from the
+    current point to the first point in the path.
+
+    \o To draw only the outline of the shape, call the \c{context.stroke()}
+    method.
+
+    \o To fill in the shape, call the \c{context.fill()} method.
+
+    \o To set the color of the fill, set the \c{strokeStyle}. For example,
+    the code
+
+    \code
+    context.strokeStyle = "#FF0000";
+    \endcode
+
+    sets the fill color to red.
+
+    \endlist
+
+    \bold{NOTE:} It is not necessary to close the path if you are going to call
+    the \c{fill()} method. The fill closes the path and creates the completed
+    shape.
+
+    To create complex shapes, combine lines and arcs:
+
+    \list 1
+
+    \o Call the \c{context.beginPath()} method to "put your pencil down"
+    on the canvas and set a new path.
+
+    \o Call the \c{context.moveTo(x,y)} method to set your starting
+    position on the canvas at the point (x,y).
+
+    \o Draw any combination of lines and arcs by calling the \c{lineTo},
+    \c{arcTo}, \c{arc}, \c{moveTo}, \c{closePath}, \c{stroke}, and
+    \c{fill} methods and setting the line attributes and fill colors as
+    described above.
+
+    \endlist
+
+    You can also create complex shapes by removing portions of the shapes
+    you draw. The \c{clip()} method creates a clipping path that defines
+    the area along which your "scissor" will cut. Any parts of the shape
+    outside the clipping path are not displayed. To create a complex shape
+    using the \c{clip()} method:
+
+    \list 1
+
+    \o Call the \c{context.beginPath()} method to set the clipping path.
+
+    \o Define the clipping path by calling any combination of the
+    \c{lineTo}, \c{arcTo}, \c{arc}, \c{moveTo}, and \c{closePath} methods.
+
+    \o Call the \c{context.clip()} method.
+
+    \endlist
+
+    The new shape displays.  The following shows how a clipping path can
+    modify how an image displays:
+
+    \image webkit-guide/canvas_clip-complex.png
+
+\section1 Compositing
+
+You can build complex shapes by drawing shapes on top of each
+other. It is also possible to draw shapes behind existing shapes and
+to mask parts of shapes by using compositing operations. The
+\c{globalCompositeOperation} attribute sets the way shapes can be
+combined.
+
+The first shape drawn on the canvas to which additional shapes are
+added is called the destination shape. The shape drawn on the canvas
+afterwards to create the composite image is called the source shape.
+The value of the \c{globalCompositeOperation} attribute must be set to
+one of the following:
+
+\list
+
+\o \c{source-over} displays the source (newer) shape over the
+destination (older) shape unless the source shape is transparent.
+(This is the default value)
+
+\o \c{source-in} displays only the portion of the source shape that is
+opaque and overlaps the destination shape. Everything else is
+transparent.
+
+\o \c{source-out} displays only the portion of the source shape that
+does not overlap the destination shape.
+
+\o \c{source-atop} displays only the portion of the opaque source
+shape that overlaps the destination shape and the portion of the
+destination shape that is not covered by the opaque source shape.
+
+\o \c{destination-over} displays the destination shape over the source
+shape. In areas where both shapes are opaque and overlap, the older
+shape displays.
+
+\o \c{destination-in} displays only the portion of the destination
+shape that is opaque and overlaps the source shape. Everything else is
+transparent. The source (newer) shape is not visible.
+
+\o \c{destination-out} displays only the portion of the destination
+shape that does not overlap the source shape. The source shape is not
+visible.
+
+\o \c{destination-atop} displays only the portion of the opaque
+destination shape that overlaps the source shape and the portion of
+the source shape that is not covered by the opaque destination shape.
+
+\o \c{lighter} displays both the source and destination shapes. Where
+the shapes overlap, the their color values are added, producing a
+lighter color.
+
+\o \c{copy} displays only the source shape. The destination shape is
+ignored.
+
+\o \c{xor} displays both the source and the destination shapes except
+the areas of overlap, in which both shapes are completely transparent.
+
+\endlist
+
+The following figure shows the various compositing effects:
+
+\image webkit-guide/canvas_composite.png
+
+\section1 Saving and Exporting Canvas Drawings as Image Files
+
+You can save or export your canvas drawings as .png or .jpeg image
+files by calling the \c{toDataURL()} method:
+
+\code
+canvas.toDataURL([type, ...])
+\endcode
+
+where:
+
+\list
+
+\o \c{type} is the MIME type to which you want to save or export your
+canvas. Possible values are:
+
+\list
+
+\o \c{"image\png"} (Default value)
+\o \c{"image\jpeg"}
+
+\endlist
+
+\o\c{...} represents additional arguments that depend on the MIME type.
+
+\list
+
+\o If \c{type} is \c{png}, this argument is \c{" "}
+\o If \c{type} is \c{jpeg}, this argument is the desired quality level of the image. The value is a number in the range 0.0 to 1.0, inclusive.
+
+\endlist
+\endlist
+
+\section1 Drawing Text
+
+You can draw text on your canvas by setting the following font
+attributes on the 2d drawing context:
+
+\list
+
+\o \c{font} refers to any font, expressed the same way as in CSS
+properties. This attribute\'s value can include any font style,
+variant, weight, size, height, and family. For example:
+
+\code
+context.font = "12pt Arial";
+\endcode
+
+The default value is \c{10px sans-serif}.
+
+If you set the \c{font} attribute to a relative font size, the browser
+multiplies it by the computed font size of the \c{<canvas>} element
+itself. For example:
+
+\code
+context.font = "200%";
+\endcode
+
+\o \c{textAlign} specifies the alignment of the text. The values can
+be one of the following:
+
+\list
+
+\o \c{left} for left-aligned text
+
+\o \c{right} for right-aligned text
+
+\o \c{center} for text that is centered within each line
+
+\o \c{start} (default) - the text is aligned at the beginning of the
+line. Text is left- or right-justified based on locale-specific
+writing method: left when text is left-to-right, right when text is
+right-to-left.
+
+\o \c{end} - the text is aligned at the end of the line, either left or
+right depending on locale-specific writing method.
+
+\endlist
+
+\o \c{textBaseline} specifies the position at which text is drawn
+relative to a baseline. The figure below, from
+\l{http://dev.w3.org/html5/canvas-api/canvas-2d-api.html}{the World
+Wide Web Consortium}, illustrates the possible values for the
+\c{textBaseline} attribute:
+
+\list
+
+\o \c{top} is the top of the em square, which approximates the top of the
+glyphs in a font
+
+\o \c{hanging} specifies a hanging baseline, where the tops of some
+glyphs are anchored.
+
+\o \c{middle} is the mid-point of the em square
+
+\o \c{alphabetic} (default) is the anchor point of many alphabetic
+characters
+
+\o \c{ideographic} is the anchor point of many ideograms, such as the
+characters used in the writing systems of many Asian languages
+
+\o \c{bottom} is the bottom of the em square
+
+\endlist
+
+\endlist
+
+\image webkit-guide/canvas_text.png
+
+To draw text on a canvas:
+
+\list 1
+
+\o Set the \c{font} attribute on the drawing context. For example:
+
+\code
+context.font = "bold 11px arial"
+\endcode
+
+\o Measure the text that you want to draw by calling the \c{measureText}
+method:
+
+\code
+TextMetrics measureText("Text to draw");
+\endcode
+
+where \c{TextMetrics} is the object returned. Its \c{width} attribute
+is the width, in pixels, that the "Text to draw" would be when drawn
+with the font specified by the \c{font} attribute.
+
+\o Call either of the following methods:
+
+\list
+
+\o \c{fillText} draws the text with the font style specified by the
+\c{font} attribute, the alignment specified by the \c{textAlign} attribute,
+and the baseline specified by the \c{textBaseline} attribute. For example:
+
+\code
+context.fillText("Text to draw",x,y,maximumWidth);
+\endcode
+
+where \c{x} and \c{y} are the coordinates at which the drawing begins
+(the anchor point), and \c{maximumWidth} is the maximum width of the
+text string (optional). If the \c{width} returned in step 2 is larger
+than the \c{maximumWidth}, the font is scaled down until the width of
+the text string is less than the \c{maximumWidth} specified.
+
+If you don\'t specify the \c{font} attribute, the text inherits the
+font size and style of the \c{<canvas>} element itself.
+
+\o \c{strokeText} is the same as the \c{fillText} method, except that
+a stroke style is applied to the text instead of a fill style,
+creating outlines of glyphs. For example:
+
+\code
+context.fillText("Text to stroke",x,y,maximumWidth);
+\endcode
+
+\endlist
+
+\endlist
+
+\section1 Working with Images
+
+You can insert existing images onto your canvas, you can scale or crop
+them, and you can combine them to create composite images. You can
+also draw new images by creating an \c{Image()} object with JavaScript.
+
+To insert an existing image onto a canvas, call the \c{drawImage} method:
+
+\code
+context.drawImage(image, dx, dy, dw, dh)
+\endcode
+
+where:
+
+\list
+
+\o \c{image} is a reference to an HTML \c{<image>} or \c{<canvas>}
+element. The image must be fully loaded before you can draw it on the
+canvas. The reference cannot be a URL. Instead, it should be
+referenced using standard DOM methods such as \c{document.images()} or
+\c{document.getElementById()}.  For example:
+
+\code
+<canvas id="demo1" width="100" height="150"></canvas>
+
+var canvas = document.getElementById("demo1");
+var context = canvas.getContext("2d");
+\endcode
+
+
+\o \c{dx} is the x coordinate of the upper left corner of the image to be
+drawn on the canvas (the destination image)
+
+\o \c{dy} is the y coordinate of the upper left corner of the destination
+image
+
+\o \c{dw} is the width of the destination image (optional)
+
+\o \c{dh} is the height of the destination image (optional)
+
+\endlist
+
+If \c{dw} and \c{dh} are not specified, the image retains its source
+dimensions when drawn on the canvas. When \c{dw} and \c{dh} are
+specified, the image is scaled to width \c{dw} and height \c{dh} when
+drawn on the canvas.
+
+If you want to crop the source image, the \c{drawImage} method can be
+overloaded with the following arguments:
+
+\code
+context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
+\endcode
+
+where:
+
+\list
+
+\o \c{sx} is the x coordinate of the upper left corner of the cropped
+source image
+
+\o \c{sy} is the y coordinate of the upper left corner of the cropped
+source image
+
+\o \c{sw} is the width of the cropped source image
+
+\o \c{sh} is the height of the cropped source image
+
+\endlist
+
+Use this method if you want to crop the source image to the rectangle
+(sx, sy, sw, sh) before drawing it on the canvas. The destination
+image will have width dw, height dh, and upper left corner at
+coordinates (dx,dy) on the canvas.
+
+To create a new image using JavaScript, create an \c{Image} object and
+define its source. Use an \c{onload} event handler to ensure that the
+\c{drawImage} method is not called until the image has finished loading.
+For example:
+
+\code
+var graphic = new Image();
+graphic.src = "clipart/graphic.png";
+\endcode
+
+The image begins to load.
+
+\code
+graphic.onload = function(){
+    context.drawImage(graphic,x,y);
+};
+\endcode
+
+    \section2 Creating Patterns with Images
+
+    You can create patterns with an image by repeating it horizontally,
+    vertically, or both. The top left corner of the first image must be
+    anchored at the origin of the coordinate space. To repeat an image,
+    call the \c{createPattern} method:
+
+    \code
+    context.createPattern(image, repetition);
+    \endcode
+
+    where:
+
+    \list
+
+    \o \c{image} is a reference to an HTML \c{<image>} or \c{<canvas>}element
+    that is repeated to form a pattern. The image must
+    be fully loaded before you can draw it on the canvas. The reference
+    cannot be a URL. Instead, it should be referenced via standard DOM
+    methods such as \o \c{document.images} and \o
+    \c{document.getElementById}.  For example:
+
+    \code
+    <canvas id="demo1" width="100" height="150"></canvas>
+
+    var canvas = document.getElementById("demo1");
+    var context = canvas.getContext("2d");
+    \endcode
+
+    \o \c{repetition} is the direction in which the image repeats to form
+    the pattern. Possible values are:
+
+    \list
+
+    \o \c{repeat} (default) the image repeats both horizontally and
+    vertically
+
+    \o \c{repeat-x} the image repeats horizontally
+
+    \o \c{repeat-y} the image repeats vertically
+
+    \endlist
+
+    \endlist
+
+    The repeated images are the same size as the source image. The
+    \c{createPattern} method does not scale the images.
+
+    For example, to create a horizontal pattern of roses, create an
+    \c{Image} object to use as a pattern and define its source. Use an
+    \c{onload} event handler to ensure that the \c{createPattern} method
+    is not called until the image has finished loading. For example:
+
+    \code
+    var roses = new Image();
+    roses.src = "clipart/roses.jpg";
+    \endcode
+
+    The image begins to load.
+
+    \code
+    roses.onload = function(){
+        var pattern = context.createPattern(roses,repeat-x);
+    };
+    \endcode
+
+    \image webkit-guide/canvas_pattern.png
+
+\section1 Applying Colors
+
+To draw the outline of a shape in color,
+set the \c{strokeStyle} attribute to any valid
+\l{http://www.w3schools.com/css/css_colors.asp}{CSS color value}.
+The color value can be in hexadecimal notation or in RGB/HSL notation,
+as described in \l{Specifying Color and Opacity}.
+For example,
+either of the following sets a shape\'s outline to red:
+
+\code
+context.strokeStyle = "#FF0000"
+context.strokeStyle = "rgb(255,0,0)"
+\endcode
+
+To fill a shape with color,
+set the \c{fillStyle} attribute to a
+\l{http://www.w3schools.com/css/css_colors.asp}{CSS color value}.
+The color value can be in hexadecimal notation or in RGB/HSL
+notation.
+For example, either of the following colors a shape\'s interior as
+blue:
+
+\code
+context.fillStyle = "#0000FF"
+context.fillStyle = "rgb(0,0,255)"
+\endcode
+
+The
+\l{http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical}{CSS3
+Color Module specification} extends both RGB and HSL color models to
+include a color\'s opacity,
+referred to as its \bold{alpha}.
+These extended models are known as RGBA and HSLA.
+There are no hexadecimal notations for RGBA and HSLA values.
+The following specifies varying levels of opacity for a blue shape:
+
+\code
+context.fillStyle = rgba(0, 0, 255, 0)		// transparent
+context.fillStyle = rgba(0, 0, 255, 0.5)	// semi-transparent
+context.fillStyle = rgba(0, 0, 255, 1)		// opaque
+\endcode
+
+When you set the \c{context.strokeStyle} or \c{context.fillStyle}
+attributes,
+whatever value you set becomes the default value for all subsequently
+drawn shapes,
+until you set a new value.
+
+    \section2 Applying Gradients
+
+    A gradient is a smooth transition between colors. There are two types
+    of gradients: linear and radial.
+
+    A linear gradient transitions the color along a line between two
+    points. To create a linear gradient, call the \c{createLinearGradient}
+    method:
+
+    \code
+    createLinearGradient(x0, y0, x1, y1)
+    \endcode
+
+    where \c{(x0, y0)} is the starting point and \c{(x1, y1)} is the ending point
+    for the linear gradient.
+
+    A radial gradient transitions the color along a cone between two
+    circles. To create a radial gradient, call the \c{createRadialGradient}
+    method:
+
+    \code
+    createRadialGradient(x0, y0, r0, x1, y1, r1)
+    \endcode
+
+    where:
+
+    \list
+
+    \o \c{(x0, y0, r0)} represents the starting circle, whose origin is \c{(x0,
+    y0)} and whose radius is \c{r0}.
+
+    \o \c{(x1, y1, r1)} represents the ending circle, whose origin is \c{(x1, y1)}
+    and whose radius is \c{r1}.
+
+    \endlist
+
+    Gradients must have two or more \bold{color stops}, representing color
+    shifts positioned from 0 to 1 between to the gradient\'s starting and
+    end points or circles:
+
+    \code
+    addColorStop(position,color)
+    \endcode
+
+    where:
+
+    \list
+
+    \o \c{position} specifies the position of the color within the already
+    defined starting and end points or circles, expressed as a number
+    from 0 to 1.
+
+    \o \c{color} specifies the CSS color at that position.
+
+    \endlist
+
+    For example, to define a gradient that varies from red to blue
+    horizontally along a rectangular area:
+
+    \list 1
+
+    \o Create a gradient object:
+
+    \code
+    var redbluegradient = context.createLinearGradient(0,0,100,0);
+    \endcode
+
+    \o Define the color stops:
+
+    \code
+    redbluegradient.addColorStop(0, "rgb(255,0,0)"); // red at the left side of the rectangle
+    redbluegradient.addColorStop(1, "rgb(0,0,255)"); // blue at the right side of the rectangle
+    \endcode
+
+    \o Draw the shape and set a \c{fillStyle} or \c{strokeStyle}:
+
+    \code
+    context.fillStyle = redbluegradient;
+    context.fillRect(0,0,100,150);
+    \endcode
+
+    \endlist
+
+    To define a gradient that varies from red to blue vertically along a
+    rectangle:
+
+    \list 1
+
+    \o Create a gradient object:
+
+    \code
+    var redbluegradient = context.createLinearGradient(0,0,0,150);
+    \endcode
+
+    \o Define the color stops:
+
+    \code
+    redbluegradient.addColorStop(0, "rgb(255,0,0)"); // red at the top of the rectangle
+    redbluegradient.addColorStop(1, "rgb(0,0,255)"); // blue at the bottom of the rectangle
+    \endcode
+
+    \o Draw the shape and set a \c{fillStyle} or \c{strokeStyle}:
+
+    \code
+    context.fillStyle = redbluegradient;
+    context.fillRect(0,0,100,150);
+    \endcode
+
+    \endlist
+
+    \bold{NOTE:} A canvas gradient\'s color stops behave slightly
+    differently than those used within non-canvas \l{Gradients}{CSS3
+    Webkit gradients}.  Webkit gradients specify mandatory \c{from} and
+    \c{to} colors, with optional \c{color-stop} values for additional
+    color shifts within the overall range of the gradient. For canvas
+    gradients, even the initial and final colors are defined as color
+    stops.
+
+    \section2 Applying Shadows
+
+    To add a shadow effect to a drawing on a canvas, set the following
+    attributes:
+
+    \list
+
+    \o \c{shadowColor} sets the color of the shadow. The value can be any
+    CSS color value. The default value is transparent black (\c{"rgba(0,0,0,0)"}).
+
+    \o \c{shadowBlur} sets the amount of blur in the shadow, in
+    pixels. The value can be any positive number or 0. A value of 0
+    produces a sharp shadow with no blur.
+
+    \o \c{shadowOffsetX} sets the number of pixels the shadow extends
+    horizontally from the object drawn. If this value is a positive
+    number, the shadow extends to the right of the object. If negative,
+    the shadow extends to the left of the object. The default value is 0
+    pixels.
+
+    \o \c{shadowOffsetY} sets the number of pixels the shadow extends
+    vertically from the object drawn. If this value is a positive number,
+    the shadow extends below the object. If negative, the shadow extends
+    above the object. The default value is 0 pixels.
+
+    \endlist
+
+    The following example code adds a semi-transparent black shadow to the
+    bottom right of a blue rectangle:
+
+    \code
+    var context		= canvas.getContext("2d");
+    context.shadowOffsetX	= 5;
+    context.shadowOffsetY	= 5;
+    context.shadowBlur	= 10;
+    context.shadowColor	= "rgba(0,0,0,0.5)";
+    context.fillStyle	= "#0000FF";
+    context.fillRect	= (0,0,100,50)
+    \endcode
+
+\section1 Transforming Graphics
+
+When drawing shapes and paths, you can translate the canvas\'s origin,
+rotate the canvas around the origin, scale the units in the canvas
+grid, and modify the transformation matrix directly.
+
+    \section2 Translating the Canvas Origin
+
+    Translating the origin enables you to draw patterns of different
+    objects on the canvas without having to measure the coordinates
+    manually for each shape. To translate the origin of the canvas, use
+    the \c{translate} method:
+
+    \code
+    context.translate(x,y);
+    \endcode
+
+    where:
+
+    \list
+
+    \o \c{x} is the horizontal distance that the origin is translated, in
+    coordinate space units
+
+    \o \c{y} is the vertical distance that the origin is translated, in
+    coordinate space units
+
+    \endlist
+
+    \section2 Rotating the Canvas
+
+    To rotate the canvas around the current origin, call the \c{rotate()}
+    method:
+
+    \code
+    context.rotate(angle);
+    \endcode
+
+    where \c{angle} is the clockwise rotation angle in radians.
+
+    The number of radians is the number of degrees multiplied by \pi/180,
+    expressed in JavaScript as:
+
+    \code
+    var radians = (Math.PI/180)*degrees;
+    \endcode
+
+    \image webkit-guide/canvas_rotate.png
+
+    \section2 Scaling the Canvas Grid
+
+    To increase or decrease the size of each unit in the canvas grid, call
+    the \c{scale} method:
+
+    \code
+    context.scale(x,y);
+    \endcode
+
+    where:
+
+    \list
+
+    \o \c{x} is the scale factor in the horizontal direction
+
+    \o \c{y} is the scale factor in the vertical direction
+
+    \endlist
+
+    The scale factors are in multiples. For example, \c{scale(2.0, 0.5)} would
+    double the horizontal size of an object drawn on the canvas and half
+    its vertical size, as shown below:
+
+    \image webkit-guide/canvas_scale.png
+
+    \section2 Manipulating the Transformation Matrix
+
+    Modifying the transformation matrix directly enables you to perform
+    scaling, rotating, and translating transformations in a single step.
+
+    The transformation matrix is an affine transformation matrix from
+    linear algebra. Affine transformations preserve colinearity and
+    relative distance in the transformed coordinate space. This means that
+    points in a line remain in a line, parallel lines remain parallel, and
+    the distance between lines and objects maintains the same ratio, even
+    if a scale factor is applied. Repositioning by translation, rotation,
+    or skewing is also possible.
+
+    Each point on the canvas is multiplied by the matrix before anything
+    is drawn. The HTML5 canvas API defines the transformation matrix as:
+
+    \image webkit-guide/canvas_math.png
+
+    where:
+
+    \list
+
+    \o \c{a} is the scale factor in the horizontal (x) direction
+
+    \image webkit-guide/canvas_scalex.png
+
+    \o \c{c} is the skew factor in the x direction
+
+    \image webkit-guide/canvas_skewx.png
+
+    \o \c{e} is the translation in the x direction
+
+    \image webkit-guide/canvas_translate.png
+
+    \o \c{b} is the skew factor in the y (vertical) direction
+
+    \image webkit-guide/canvas_skewy.png
+
+    \o \c{d} is the scale factor in the y direction
+
+    \image webkit-guide/canvas_scaley.png
+
+    \o \c{f} is the translation in the y direction
+
+    \image webkit-guide/canvas_translatey.png
+
+    \o the last row remains constant
+
+    \endlist
+
+    The scale factors and skew factors are multiples; \c{e} and \c{f} are
+    coordinate space units, just like the units in the \c{translate(x,y)}
+    method.
+
+    The rotation transformation matrix is as follows:
+
+    \image webkit-guide/canvas_math_rotate.png
+
+    where the angle of rotation is in radians.
+
+    \sa
+    \l{http://www.senocular.com/flash/tutorials/transformmatrix/}{senocular.com}
+    for a good explanation of how transformation matrices are used
+    identically within Flash.
+
+\section1 Canvas Animations
+
+You can animate a canvas drawing by repeatedly redrawing the canvas
+for each frame and translating,
+rotating,
+skewing,
+and scaling the drawn objects.
+
+To draw each frame by employing the HTML5 canvas API,
+you should define the original canvas state and save it for future
+reference.
+The drawing context maintains a stack of drawing states.
+Each state consists of the current transformation matrix,
+current clipping region,
+and current values of the following attributes:
+\c{strokeStyle},
+\c{fillStyle},
+\c{globalAlpha},
+\c{lineWidth},
+\c{lineCap},
+\c{lineJoin},
+\c{miterLimit},
+\c{shadowOffsetX},
+\c{shadowOffsetY},
+\c{shadowBlur},
+\c{shadowColor},
+\c{globalCompositeOperation},
+\c{font},
+\c{textAlign},
+and
+\c{textBaseline}.
+The current path and the current bitmap are NOT part of the drawing
+state.
+The path can be reset only by invoking the \c{beginPath()} method.
+The current bitmap is a property of the canvas,
+not of the context.
+
+To save the original canvas state,
+call the \c{save()} method:
+
+\code
+context.save();
+\endcode
+
+Before drawing each new frame,
+you must clear the canvas:
+
+\code
+canvas.clearRect(x,y,width,height);
+\endcode
+
+where:
+
+\list
+
+\o \c{x} is the position of the top left corner of the canvas on the
+horizontal axis
+
+\o \c{y} is the position of the top left corner of the canvas on the
+vertical axis
+
+\o \c{width} is the width of the canvas
+
+\o \c{height} is the height of the canvas
+
+\endlist
+
+Draw the new frame using any of the methods provided by the canvas
+API.
+Then save it by calling the \c{save()} method.
+
+If you wish to return to the state of the original frame as the basis
+for each new frame that you draw,
+call the \c{context.restore()} method.
+
+To execute the drawing methods repeatedly,
+use the standard JavaScript-based animation technique,
+calling the \c{setInterval()} and \c{clearInterval()} methods.
+The following shows how to execute an animation function every 50
+milliseconds (corresponding to 20 times per second,
+a typical animation frame rate),
+then subsequently halt the animation:
+
+\code
+var id = setInterval(functionName, 50);
+clearInterval(id);
+\endcode
+
+\bold{See Also:}
+
+\list
+
+\o
+\l{http://www.canvasdemos.com/2009/10/09/html-5-canvas-animation/}{CanvasDemos.com:
+animated cartoon},
+which discusses how to use Canvas as an animation framework.
+
+\o
+\l{http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html}{nihilogic.dk:
+HTML5 Canvas Cheat Sheet}
+
+\endlist
+
+*/
diff --git a/doc/src/webkit/guide/chapter_css.qdoc b/doc/src/webkit/guide/chapter_css.qdoc
new file mode 100644
index 0000000..fcabdab
--- /dev/null
+++ b/doc/src/webkit/guide/chapter_css.qdoc
@@ -0,0 +1,1737 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit documentation.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\page qtwebkit-guide-css.html
+
+\title Level 3 CSS (BETA)
+
+\chapter Level 3 CSS
+This section serves as an introduction to various Level 3 CSS features
+supported by QtWebKit:
+
+\list
+
+\o The \l{Media Queries} section discusses a simple client-based
+technique to present different interfaces and functionality from a
+single source of content to different classes of mobile device.
+
+\o The \l{Selectors} section concentrates on recently introduced
+syntax elements that make applying formatting and gathering DOM
+elements more flexible.
+
+\o The \l{Visual Effects} section surveys numerous formatting
+properties,
+including new color models and advanced WebKit effects.
+
+\o Finally,
+the \l{Dynamic CSS} section discusses 2D transforms,
+transitions,
+and keyframe animations.
+
+\endlist
+
+This section features links to numerous sample pages that demonstrate
+how various CSS3 features may be applied within a mobile interface.
+For best results,
+view these samples with a modern Webkit-based browser such as Apple
+Safari or Google Chrome.
+Resize the window in which the sample appears to roughly match the
+dimensions of a touch-screen mobile device.
+
+\section1 Media Queries
+
+CSS media \bold{queries} extend media \bold{types} with more detailed
+capabilities.
+Media Queries offer a simple client-side mechanism to customize
+interfaces comprehensively via CSS.
+
+Media queries are especially useful when extending a body of content
+for presentation on mobile browsers.
+Prior to support for this feature,
+there were two basic approaches to provisioning mobile web content,
+both server-based:
+
+\list
+
+\o \bold{Mobile-specific domains}.
+Content providers might provide a separate access points for default
+content at \bold{www.website.com},
+with mobile content available at \bold{m.website.com} or
+\bold{website.mobi}.
+There might also be an additional \bold{touch.website.com} access
+point targeted for higher-end touch-screen browsers.
+
+\o \bold{Dynamic Server-based Adaptation}.
+In this case,
+there is a single access point,
+but the server sends different content,
+typically depending on the \bold{User-Agent} header included in all
+browsers\' HTTP requests.
+This approach may leverage databases of device characteristics such as
+\bold{WURFL} or \bold{DeviceAtlas}.
+
+\endlist
+
+This section describes how to provision CSS entirely on the mobile
+client.
+
+    \section2 Media Types and Media Queries
+
+    If you only want to serve interfaces for desktop browsers and low-end
+    mobile browsers,
+    specify external CSS files within your HTML\'s \c{head} region using
+    media types:
+
+    \code
+    <link media="screen" href="/path/to/desktop.css" type="text/css" rel="stylesheet"/>
+    <link media="handheld" href="/path/to/mobile.css" type="text/css" rel="stylesheet"/>
+    \endcode
+
+    The \c{media} attribute specifies different \bold{types} of browser:
+    \c{screen} for large-screen desktop browsers,
+    and \c{handheld} for mobile browsers.
+    Browsers identifying themselves as \c{handheld} are served the
+    \bold{mobile.css} file,
+    which should specify a dramatically simplified mobile interface.
+
+    A problem arises,
+    however,
+    when the majority of higher-end touch browsers identify themselves as
+    the \c{screen} media type,
+    to avoid being served overly simplified content that is beneath their
+    capabilities.
+    The example above serves a desktop-oriented design to later-generation
+    mobile browsers.
+    To target a higher-end mobile design to these browsers,
+    you need to specify additional media \bold{queries}:
+
+    \code
+    <link media="only screen and (min-device-width: 481px)" href="/path/to/desktop.css" type="text/css" rel="stylesheet"/>
+    <link media="only screen and (max-device-width: 480px)" href="/path/to/touch.css" type="text/css" rel="stylesheet"/>
+    <link media="handheld" href="/path/to/mobile.css" type="text/css" rel="stylesheet"/>
+    \endcode
+
+    The first two lines specify any \c{screen}-typed browser whose window
+    is wider or narrower than 480 pixels.
+
+    Regions of content that are inappropriate for presentation within
+    either the touch-based or lower-end mobile design can then be easily
+    removed within the corresponding CSS files:
+
+    \code
+    .widget, .nested_nav, .sidebar, .video_ad, .related_items {
+        display: none;
+    }
+    \endcode
+
+    The following example demonstrates a simple message identifying your
+    class of browser,
+    which appears dynamically based on CSS that is linked using media
+    types and media query syntax:
+
+    \l{mob_mediaquery}{\inlineimage webkit-guide/scr_mob_mediaquery.png
+    }
+
+    \l{mq_desktop_css}{(Desktop CSS)}
+    \l{mq_touch_css}{(Touch-Screen CSS)}
+    \l{mq_mobile_css}{(Low-end Mobile CSS)}
+
+    The following example shows a skeletal interface that appears
+    differently based on the type of browser viewing it.
+    The image below shows how it appears when viewed on a touch-based
+    browser,
+    but a desktop browser renders a more elaborate three-column layout:
+
+    \l{mob_layout}{\inlineimage webkit-guide/scr_mob_layout.png
+    }
+
+    \l{mqlayout_desktop_css}{(Desktop CSS)}
+    \l{mqlayout_touch_css}{(Touch-Screen CSS)}
+    \l{mqlayout_mobile_css}{(Low-end Mobile CSS)}
+
+    When viewed with a desktop browser,
+    the page displays a typical desktop-style layout:
+    a main content column surrounded by navigation and sidebar columns,
+    with banner headers and footers that straddle the top and bottom of
+    the screen.
+    When viewed with a touch-based browser,
+    the sidebar element does not appear.
+    The main content extends to the full width of the screen,
+    while header and navigation elements share the top of the screen.
+    When viewed with other mobile browsers,
+    even the top of the screen is simplified to replace header information
+    with a simple icon.
+
+    Note that you can also use media queries to customize interfaces for
+    tablet devices such as the Apple iPad:
+
+    \code
+    <link rel="stylesheet" media="all and (min-device-width: 481px)
+        and (max-device-width: 1024px)" href="/path/to/ipad.css"/>
+    \endcode
+
+        \section3 In-line Media Queries
+
+        While it\'s generally good practice to keep CSS for different designs
+        within separate files,
+        you can also consolidate them.
+        The following example provides a default san-serif font styling for
+        \c{h1} elements,
+        then different sets of style sheets for three browser categories:
+
+        \code
+        h1 { font-family : Arial, sans-serif }
+        @media screen {
+          h1 { color: #00008B; }
+        }
+        @media only screen and (max-device-width: 480px) {
+          h1 { color: #00008B; font-size: medium; }
+        }
+        @media handheld {
+          h1 { font-size: medium; font-weight: bold }
+        }
+        \endcode
+
+        Consolidating style sheets in this manner may reduce the number of
+        separate HTTP requests,
+        help web designers to keep track of variations among designs,
+        and reduce style sheet properties defined redundantly in more than
+        one file.
+
+    \section2 Media Queries via JavaScript
+
+    Browsers that support media queries also support APIs to test them
+    from within JavaScript.
+    Browsers based on QtWebKit use the \c{matchMedia} API.
+    Some other browsers use a slightly different (and older)
+    \c{styleMedia} API,
+    which itself used to be called the \c{media} API.
+    Each can be called from the \c{window} object.
+    The following function accounts for all three cases:
+
+    \code
+    function matchesMediaQuery(query) {
+        if (!!window.matchMedia)
+            return window.matchMedia(query).matches;
+        if (!!window.styleMedia && !!window.styleMedia.matchMedium)
+            return window.styleMedia.matchMedium(query);
+        if (!!window.media && window.media.matchMedium)
+            return window.media.matchMedium(query);
+        return false;
+    }
+    \endcode
+
+    The \c{query} argument corresponds to the media query string used to
+    activate the CSS.
+    For example,
+    the following higher-level function tests whether the browser matches
+    design categories provided simple labels such as
+    \c{desktop},
+    \c{touch},
+    or \c{mobile}:
+
+    \code
+    function isDesign(str) {
+        var design;
+        if (matchesMediaQuery('only screen and (min-device-width: 481px)')) {
+            design = 'desktop';
+        }
+        else if (matchesMediaQuery('only screen and (max-device-width: 480px)')) {
+            design = 'touch';
+        }
+        else if (matchesMediaQuery('handheld')) {
+            design = 'mobile';
+        }
+        return str == design;
+    }
+    \endcode
+
+    You can then use the test whenever there is a need to assign
+    functionality for a specific design.
+    The following gathers a series of images and assigns different
+    panel-viewing functions for \c{desktop} and \c{touch} designs,
+    with no functionality assigned to the lower-end \c{mobile} design:
+
+    \code
+    var imgs = document.querySelectorAll("img.panel");
+    for ( var i = 0, len = imgs.length ; i < len ; i++ ) {
+        el = imgs[i];
+        if ( isDesign("desktop") ) {
+            imgs[i].addEventListener("mouseover", showHoverPanel);
+            imgs[i].addEventListener("mouseout", hideHoverPanel);
+        }
+        else if ( isDesign("touch") ) {
+            imgs[i].addEventListener("click", showTouchPanel);
+        }
+    }
+    \endcode
+
+    The following example uses this technique to produce a simple message,
+    dynamically generated by JavaScript,
+    that corresponds to the message generated by CSS:
+
+    \l{mob_condjs}{\inlineimage webkit-guide/scr_mob_condjs.png
+    }
+
+    \l{mob_condjs_css}{(CSS)}
+    \l{mob_condjs_js}{(JavaScript)}
+
+\section1 Selectors
+
+Level 3 CSS provides many useful new \bold{selectors} that make it
+easier to apply formatting to page elements.
+In addition,
+the \bold{Selectors API} makes DOM elements accessible using the same
+CSS expressions you use to apply formatting to them.
+The following show alternate ways to access elements:
+
+\code
+var element = document.getElementById('map');
+var element = document.querySelector('#map');
+
+var elements = document.getElementByClassName('active');
+var elements = document.querySelectorAll('ul > li.active');
+\endcode
+
+This section provides examples of how different kinds of Level 3
+selectors might be applied when formatting mobile interfaces.
+
+    \section2 Attribute Matching
+
+    It is often useful to offer visual hints marking different kinds of
+    link.
+    Users might want to know the difference between a link to a page on
+    the same website and one on an external site.
+    Links to non-HTML file types might pose special challenges to mobile
+    users.
+    Alternately,
+    mobile users might get special benefit from telephone links.
+
+    You can automate this by using the CSS attribute prefix and suffix
+    matching selectors.
+    The following uses \c{^=} to mark external HTTP links,
+    email,
+    SMS,
+    and telephone links,
+    by inserting an icon after the text of the link:
+
+    \code
+    a[href^="http://"]:after, a[href^="https://"]:after
+                             { content : url(icon/external.png); }
+    a[href^="mailto:"]:after { content : url(icon/email.png); }
+    a[href^="sms:"]:after    { content : url(icon/sms.png); }
+    a[href^="tel:"]:after    { content : url(icon/tel.gif); }
+    \endcode
+
+    The following uses \c{$=} to identify various file types by common
+    suffixes:
+
+    \code
+    a[href$=".doc"]:after { content : url(icon/ms_word.gif) }
+    a[href$=".ppt"]:after { content : url(icon/powerpoint.gif) }
+    a[href$=".rss"]:after, a[href$=".xml"]:after
+                          { content : url(icon/feed.gif) }
+    a[href$=".pdf"]:after { content : url(icon/pdf.jpg) }
+    a[href$=".xls"]:after { content : url(icon/excel.jpg) }
+    \endcode
+
+    You can also use \c{*=} to freely match substrings within any
+    attribute value.
+    The following might distinguish links to a site\'s blog area based on
+    how the URL is organized:
+
+    \code
+    a[href*="/blog/"]:after { content : url(icon/blog.jpg )}
+    \endcode
+
+    The following example demonstrates links identified by dynamically
+    generated icons:
+
+    \l{layout_link-fmt}{\inlineimage webkit-guide/scr_layout_link-fmt.png
+    }
+
+    \l{layout_link-fmt_css}{(CSS)}
+
+    \section2 Form Input State
+
+    The \c{:checked} dynamic class allows you to style radio and checkbox
+    inputs based on their selection state:
+
+    \code
+    input[type=radio],
+    input[type=checkbox]
+    { text-align : right }
+
+    input[type=radio]:checked,
+    input[type=checkbox]:checked
+    { text-align : left }
+    \endcode
+
+    This enables the following mobile-friendly interface,
+    which converts small radio and check boxes to much more accessible
+    toggle buttons:
+
+    \l{form_toggler}{\inlineimage webkit-guide/scr_form_toggler.png
+    }
+
+    \l{form_toggler_css}{(CSS)}
+
+    Using the dynamic \c{:checked} CSS class,
+    the \c{text-align} property toggles from \c{left} to \c{right}
+    depending on whether the \c{input} is checked or not.
+    Note that to display button text,
+    dynamic classes can be chained together to form complex expressions:
+    \c{input[type=radio]:checked:before}.
+
+    The example also relies on the \c{-webkit-appearance} property,
+    which allows you to override the default visual presentation of
+    specialized interface elements such as radio and checkbox inputs.
+
+    The following example provides alternate styling for radio and
+    checkbox inputs,
+    presenting them as tappable buttons:
+
+    \l{form_tapper}{\inlineimage webkit-guide/scr_form_tapper.png
+    }
+
+    \l{form_tapper_css}{(CSS)}
+
+    Form elements may also be re-styled based on whether they are
+    \c{:enabled} or \c{:disabled}.
+    In addition,
+    the \c{:focus} dynamic class allows you to style text form inputs or
+    other editable content regions that users have currently selected for
+    editing.
+
+    \section2 Navigational Selectors
+
+    Elements within a page that are the target of navigation can receive
+    distinct styling using the \c{:target} dynamic class.
+    The act of navigating to an element can alter its appearance,
+    or even determine if it is to appear at all.
+
+    The following example relies on anchor navigation to display
+    successive rows of a table within a mobile interface:
+
+    \l{layout_tbl-keyhole}{\inlineimage webkit-guide/scr_layout_tbl-keyhole.png
+    }
+
+    \l{layout_tbl-keyhole_css}{(CSS)}
+
+    While the example relies on table-related tags,
+    they are re-styled with block formatting to confine each row of
+    information within the screen.
+    Each row features links to other rows,
+    triggering their display.
+    Other links navigate away from the table,
+    which suppresses its display altogether.
+    This is the main CSS driving the interface:
+
+    \code
+    .mobile > tbody > tr        { display : none  }
+    .mobile > tbody > tr:target { display : block }
+    \endcode
+
+    The same technique may be used to display or dismiss optional
+    interface elements such as panels,
+    simply by providing navigation links to them within the page.
+
+    \section2 Indirect Sibling Selector
+
+    The Level 2 \c{+} selector allows you to style elements that
+    immediately follow other specified elements.
+    For example,
+    the following refers to a paragraph that immediately
+    follows a heading at the same level of markup:
+
+    \code
+    h1 + p { font-weight: bold }
+    \endcode
+
+    In contrast,
+    the Level 3 \c{~} indirect sibling selector allows you to style any
+    subsequent element at the same level within the markup.
+    The following example styles any element that follows an \c{h2} that
+    is classed \c{pullquote}:
+
+    \code
+    h2 ~ .pullquote { font-size: 90% }
+    \endcode
+
+    \bold{NOTE:} Webkit-based browsers do not yet allow you to style
+    elements dynamically via indirect sibling selectors.
+
+    \section2 Positional Selectors
+
+    Various dynamic classes allow you to style elements depending on their
+    position with a series of elements: either elements of the same type,
+    or other child elements of the same parent.
+    The following example aligns a series of icons to a grid:
+
+    \l{css3_sel-nth}{\inlineimage webkit-guide/scr_css3_sel-nth.png
+    }
+
+    \l{css3_sel-nth_css}{(CSS)}
+
+    Columns are specified with the \c{:nth-of-type()} selector,
+    which accepts numeric expressions as arguments.
+    The following selectors refer to every fourth \c{img} element,
+    but offset by a specified number:
+
+    \code
+    img			{ position: absolute }
+    img:nth-of-type(4n-3)	{ left: 2% }
+    img:nth-of-type(4n-2)	{ left: 27% }
+    img:nth-of-type(4n-1)	{ left: 52% }
+    img:nth-of-type(4n-0)	{ left: 77% }
+    \endcode
+
+    Alternately,
+    keywords \c{odd} and \c{even} correspond to \c{2n-1} and
+    \c{2n} expressions.
+    These are useful,
+    for example,
+    when styling table rows with alternating background colors.
+
+    Rows are represented as the number of the element within the series,
+    plus a fixed number.
+    Each selector redefines the previous selector\'s upper range of
+    values:
+
+    \code
+    img:nth-of-type(n)	{ top: 5% }
+    img:nth-of-type(n+5)	{ top: 20% }
+    img:nth-of-type(n+9)	{ top: 35% }
+    img:nth-of-type(n+13)	{ top: 50% }
+    img:nth-of-type(n+17)	{ top: 65% }
+    img:nth-of-type(n+21)	{ top: 80% }
+    \endcode
+
+    Level 3 CSS defines the following positional selectors:
+
+    \list
+
+    \o \c{:first-child},
+    \c{:last-child},
+    and \c{:only-child} refer to the first or last child element within a
+    series,
+    or when it is the only one.
+
+    \o \c{:first-of-type},
+    \c{:last-of-type},
+    and \c{:only-of-type} refer to the first or last specified element
+    within a series,
+    or when it is the only one.
+
+    \o \c{:nth-first-child()} and \c{:nth-last-child()} refer to the
+    specified child element positioned from the start or end of the
+    series.
+
+    \o \c{:nth-first-of-type()} and \c{:nth-last-of-type()} refer to the
+    specified element positioned from the start or end of the series.
+
+    \o \c{:nth-of-type()} refers to any series of specified elements.
+
+    \o \c{:nth-child()} refers to any series of child elements.
+
+    \endlist
+
+    \section2 Other Selectors
+
+    Level 3 CSS specifies several other potentially useful dynamic
+    classes that can be added to selectors:
+
+    \list
+
+    \o \c{:empty} refers to an element that contains no child elements,
+    including text nodes.
+
+    \o \c{:root} is a markup-independent way to refer to elements that are
+    postioned at the root of the document,
+    in most cases the \c{html} tag.
+
+    \o The \c{:not()} dynamic class allows you to narrow a range of
+    selectors.
+    This may be more useful when gathering elements via the Selectors API.
+    For example,
+    the following JavaScript gathers form inputs,
+    but not including submit buttons:
+
+    \code
+    var inputs = document.querySelectorAll("input:not([type=submit])");
+    \endcode
+
+    \endlist
+
+\section1 Visual Effects
+
+QtWebKit supports numerous Level 3 CSS features.
+This section briefly demonstrates how many of these recently available
+visual features may be used to refine mobile web designs.
+
+These more advanced CSS3 effects tend to be available only on the
+latest generation of mobile browsers.
+Still,
+it is safe to use them,
+even if the design degrades somewhat for devices that don\'t support
+them.
+When a browser encounters CSS properties or values it can\'t
+interpret,
+it simply ignores them.
+Designers can respond by providing fallback options to allow for
+\bold{graceful degradation}.
+For example,
+the following CSS specifies a plain gray background in case the
+browser does not support gradients:
+
+\code
+background: #aaaaaa;
+background: -webkit-gradient(linear, center top, center bottom,
+	    from(#777777), color-stop(50%,#dddddd), to(#777777) );
+\endcode
+
+Note that many of the CSS properties discussed in this section were
+implemented relatively recently,
+and vendors of browser rendering engines (such as WebKit) may still be
+in the process of testing and standardizing their behavior.
+These property names feature \bold{vendor prefixes} such as
+\c{-webkit-} for WebKit,
+\c{-moz-} for Mozilla,
+and \c{-o-} for Opera.
+
+It may be possible to extend CSS properties to these various browsers
+by providing vendor-specific syntax.
+The following example shows how to extend the \c{border-image}
+property to the Opera browser or Mozilla-based Fennec or the Maemo
+Browser for Nokia N900.
+It also shows the property\'s final name following the process of
+standardization:
+
+\code
+-webkit-border-image	 : url(img/border-frame.gif) 10 stretch stretch;
+-moz-border-image	 : url(img/border-frame.gif) 10 stretch stretch;
+-o-border-image		 : url(img/border-frame.gif) 10 stretch stretch;
+border-image		 : url(img/border-frame.gif) 10 stretch stretch;
+\endcode
+
+In some cases,
+there are slight variations in the syntax each vendor expects as
+property values.
+
+    \section2 Specifying Color and Opacity
+
+    Prior to CSS3,
+    there were three options when specifying color values:
+    named colors,
+    hexadecimal color values,
+    or RGB values.
+    CSS3 provides additional ways to specify colors:
+
+    \list
+
+    \o \bold{HSL}.
+    Colors defined with the HSL model specify the
+    \bold{hue} as a radial or degree coordinate,
+    then its
+    \bold{saturation} and \bold{luminence} as percentages.
+    The following example specifies red and green values:
+
+    \code
+    background: hsl(0  , 100%, 60%);
+    background: hsl(128, 75% , 33%);
+    \endcode
+
+    \o \bold{HSLA}.
+    Same as HSL,
+    but specifying an additional decimal \bold{alpha} value that
+    corresponds to opacity.
+    The following specifies a fully opaque red,
+    followed by a partial transparency:
+
+    \code
+    background: hsla(0, 100%, 60%, 1.0);
+    background: hsla(0, 100%, 60%, 0.5);
+    \endcode
+
+    \o \bold{RGBA}.
+    Same as RGB,
+    but specifying an additional decimal \bold{alpha} value that
+    corresponds to opacity.
+    The following the same transition from opaque to transparent as shown
+    above:
+
+    \code
+    background: rgba(100%, 0%, 0%, 1.0);
+    background: rgba(100%, 0%, 0%, 0.5);
+    \endcode
+
+    \endlist
+
+    With the addition of opacity to color definitions,
+    you can now also specify \c{transparent} as a color name.
+    Note that while RGBA and HSLA options are now available,
+    you can still use the familiar \c{opacity} property independently of
+    color definitions.
+
+    \section2 Rounded Corners
+
+    In addition to removing harsh edges,
+    rounded corners often help distinguish active items from static
+    background elements.
+    Rounded corners are implemented using the \c{border-radius} property.
+    The following rounds off an edge to the same extent that interior
+    elements are offset:
+
+    \code
+    .rounded {
+        border-radius	: 1em;
+        padding		: 1em;
+    }
+    \endcode
+
+    The following example demonstrates how rounded corners can enhance a
+    mobile design,
+    by marking the start and end of large regions of content,
+    such as a list of links:
+
+    \l{layout_link-fmt}{\inlineimage webkit-guide/scr_layout_link-fmt.png
+    }
+
+    \l{layout_link-fmt_css}{(CSS)}
+
+    The greater the measurement applied to an element\'s \c{border-radius},
+    the more dramatically rounded are its corners.
+    For example,
+    applying a \c{border-radius} that is half an element\'s overall
+    dimensions results in a circle:
+
+    \code
+    .circle {
+        width              : 4em;
+        height             : 4em;
+        border-radius      : 2em;
+    }
+    \endcode
+
+    You can also set each corner individually,
+    and specify a pair of values to achieve oval-shaped borders:
+
+    \code
+    border-top-left-radius : 2em/1em;
+    \endcode
+
+    \section2 Border Images
+
+    Border images allow you to apply customized marquee effects,
+    as in the following example:
+
+    \l{css3_border-img}{\inlineimage webkit-guide/scr_css3_border-img.png
+    }
+
+    \l{css3_border-img_css}{(CSS)}
+
+    In this case,
+    the image stretches to fit an element\'s dimensions:
+
+    \code
+    -webkit-border-image : url(img/border-frame.gif) 10 stretch stretch;
+    \endcode
+
+    As is true of the \c{border} property,
+    a single numeric argument specifies the width of the border as a
+    whole,
+    or up to four values to modify the width of each side.
+
+    Any border image you specify substitutes some or all of an element\'s
+    normal border.
+    The \c{border-image} and \c{border-corner-image} each collectively
+    represent four more specific properties.
+    For \c{border-image},
+    these properties are:
+
+    \list
+
+    \o \c{border-top-image}
+    \o \c{border-right-image}
+    \o \c{border-bottom-image}
+    \o \c{border-left-image}
+
+    \endlist
+
+    For \c{border-corner-image},
+    these properties are:
+
+    \list
+
+    \o \c{border-top-left-image}
+    \o \c{border-top-right-image}
+    \o \c{border-bottom-right-image}
+    \o \c{border-bottom-left-image}
+
+    \endlist
+
+    The \c{border-image} property specifies a single image for all four
+    edge borders.
+    The \c{border-corner-image} property specifies an image for all four
+    corner borders.
+    To specify images individually for any of the edge or corner borders,
+    use any of the eight individual properties.
+
+    When specifying any border edge or corner image values:
+
+    \list
+
+    \o A \c{stretch} value stretches one image to fill the element border
+    area,
+    as shown in the example above.
+
+    \o A \c{repeat} value repeats one image until it fills the element
+    border area and clips any overflow,
+    for example:
+
+    \code
+    -webkit-border-image : url(img/border-frame.gif) 10 repeat repeat;
+    \endcode
+
+    In this case the first \c{repeat} applies to top and bottom edge
+    borders,
+    and the second applies to left and right edge borders.
+
+    \endlist
+
+    \section2 Backgrounds
+
+    CSS3 allows you to specify more than one background image at a time.
+    The following example shows an accordion-style tabbed interface:
+
+    \l{css3_backgrounds}{\inlineimage webkit-guide/scr_css3_backgrounds.png
+    }
+
+    \l{css3_backgrounds_css}{(CSS)}
+    \l{css3_backgrounds_js}{(JavaScript)}
+
+    By default,
+    tabs display a single icon image,
+    but when selected feature an additional gradient background image.
+    The following CSS shows how both icon and background can receive their
+    own series of specifications,
+    affecting their offset or whether each image repeats:
+
+    \code
+    background-image	: url(img/select.png)	, url(img/gradient.jpg);
+    background-repeat	: no-repeat		, repeat-x;
+    background-position	: 12px 12px		, 0 0;
+    \endcode
+
+    In addition,
+    you may set the \c{background-size} property to
+    \c{contain} to scale images to the size of the containing element.
+    (Level 2 CSS allowed only specific measurements or percentages of the
+    image's size.)
+
+    \section2 Text Shadow and Stroke
+
+    Shadows can be applied to text.
+    As the following example shows,
+    text shadows may interfere with the legibility of text,
+    and are seldom appropriate unless they\'re used for large,
+    sans-serif display headings:
+
+    \l{css3_text-shadow}{\inlineimage webkit-guide/scr_css3_text-shadow.png
+    }
+
+    \l{css3_text-shadow_css}{(CSS)}
+
+    In addition to the shadow\'s color,
+    the property accepts two measurements to represent its offset from the
+    text,
+    while the third specifies the extent to which the shadow is blurred:
+
+    \code
+    h1,h2,h3,h4 { text-shadow : 0.25em 0.25em 0.25em #aaaaaa; }
+    \endcode
+
+    CSS3 also allows you to apply a different colored fill to characters,
+    suitable mainly for larger display type or subtle animations:
+
+    \l{css3_text-stroke}{\inlineimage webkit-guide/scr_css3_text-stroke.png
+    }
+
+    \l{css3_text-stroke_css}{(CSS)}
+
+    In the following CSS,
+    \c{-webkit-text-fill-color} is synonymous with the standard \c{color}
+    property:
+
+    \code
+    -webkit-text-stroke-color	: #000000;
+    -webkit-text-stroke-width	: 1px;
+    -webkit-text-fill-color		: purple;
+    \endcode
+
+    \section2 Text Overflow
+
+    Web developers are familiar with the \c{overflow} property,
+    which can be used to hide content that exceeds an element\'s dimensions,
+    or else to make it accessible via scrolling.
+    CSS3 specifies an additional \c{text-overflow} property that allows
+    you to add ellipses as a suffix to any text that overflows the
+    element,
+    to indicate the presence of additional text.
+
+    The following example shows how the \c{text-overflow} property allows
+    you to present user-selectable links to expanded regions of text
+    within a page:
+
+    \l{css3_text-overflow}{\inlineimage webkit-guide/scr_css3_text-overflow.png
+    }
+
+    \l{css3_text-overflow_css}{(CSS)}
+    \l{css3_text-overflow_js}{(JavaScript)}
+
+    Use the \c{text-overflow} property in conjunction with \c{overflow}
+    and \c{white-space}:
+
+    \code
+    text-overflow	: ellipsis;
+    overflow	: hidden;
+    white-space	: nowrap;
+    \endcode
+
+    For \c{text-overflow} to work,
+    the element\'s \c{white-space} must be set to \c{nowrap},
+    overriding the default \c{normal} value.
+    This prevents words from wrapping onto another line as is standard
+    behavior outside the \c{pre} tag,
+    and forces text past the right edge of the element.
+
+    (The element\'s \c{text-overflow} may specify both \c{ellipsis} and
+    \c{ellipsis-word},
+    the latter of which is not as widely implemented.)
+
+    \section2 Custom Scrollbars
+
+    In general,
+    scrollable elements should be avoided wherever possible
+    within mobile interfaces.
+    Drag gestures already allow users to scroll windows vertically,
+    and narrow mobile screens are not suitable for overly wide content.
+
+    In cases where content can only be viewed within a scrolling window,
+    scrollbars can be reformatted to make them more accessible to mobile
+    users.
+    The following example presents a block of code within a touch-enabled
+    mobile interface:
+
+    \l{css3_scroll}{\inlineimage webkit-guide/scr_css3_scroll.png
+    }
+
+    \l{css3_scroll_css}{(CSS)}
+
+    This interface uses standard scrollbars,
+    but their appearance is enhanced using low-level \bold{pseudo-element}
+    CSS classes that refer to individual components within the scrollbar.
+
+    Simply by invoking the following CSS selector,
+    you disable scrollbars\' default appearance:
+
+    \code
+    pre::-webkit-scrollbar { height : 3em }
+    \endcode
+
+    In this case,
+    the specified property increases the scrollbar\'s default \c{height}
+    to make it easier for mobile users to tap it with their fingers.
+
+    Each additional scrollbar component must then be explicitly defined,
+    otherwise it does not render.
+    The following CSS provides custom styling for the horizontal panning
+    buttons:
+
+    \code
+    ::-webkit-scrollbar-button:increment {
+        background-image	: url(img/arrow_right.png);
+        background-size	: contain;
+        background-repeat	: no-repeat;
+        width		: 3em;
+        height		: 3em;
+    }
+    ::-webkit-scrollbar-button:decrement {
+        background-image	: url(img/arrow_left.png);
+        background-size	: contain;
+        background-repeat	: no-repeat;
+        width		: 3em;
+        height		: 3em;
+    }
+    \endcode
+
+    In this case,
+    the scrollbar region between the two navigation icons is still active,
+    but not obviously so since its visual formatting has been overridden.
+    The simpler set of controls is far more suitable for a mobile
+    interface.
+
+    Webkit provides pseudo-elements for the following components:
+
+    \list
+
+    \o \c{scrollbar} refers to scrollbar as a whole.
+    Additional dynamic classes can be appended to specify \c{:vertical}
+    and \c{:horizontal} scrollbars.
+    The \c{:corner-present} dynamic class activates when both scrollbars
+    are present.
+
+    \o \c{scrollbar-button} refers to incremental navigation buttons.
+    Each button can be styled separately with \c{:increment} and
+    \c{:decrement} dynamic classes.
+
+    \o \c{scrollbar-thumb} refers to the scrollbar\'s slider control.
+
+    \o \c{scrollbar-track} refers to the active navigation region between
+    buttons.
+
+    \o \c{scrollbar-track-piece} refers to each portion of the track on
+    either side of the thumb control.
+    These can be styled separately using \c{:start} and \c{:end} dynamic
+    classes.
+
+    \o \c{scrollbar-corner} refers to the corner where scrollbar tracks
+    meet.
+    The \c{resizer} pseudo-element also refers to this corner,
+    but for resizable elements such as \c{textarea}.
+
+    \o The \c{:double-button} and \c{:single-button} dynamic classes refer
+    to whether incrementor and decrementors are paired together
+    redundantly at each end of the track,
+    while \c{:no-button} refers to whether they display at all.
+
+    \endlist
+
+    \bold{See Also:}
+    \l{http://webkit.org/blog/363/styling-scrollbars/}{Surfin' Safari:
+    Styling Scrollbars}
+
+    \section2 Gradients
+
+    Gradients provide a graduated shading effect that can add subtle
+    texture to background elements,
+    and can provide buttons a three-dimensional,
+    beveled appearance.
+    Explicit support for gradients means there's no longer a need to
+    implement them as repeating background images.
+
+    Specify gradients using CSS properties such as the following:
+
+    \code
+    background: #aaaaaa;
+    background: -webkit-gradient(linear, center top, center bottom,
+                    from(#dddddd), to(#777777) );
+    \endcode
+
+    Note the pair of \c{background} statements.
+    The first specifies a monochrome fallback color for browsers that do
+    not support gradients.
+
+    The function specifies a simple \c{linear} gradient from the top to
+    the bottom of the element,
+    shifting from a light to a darker gray.
+
+    The following example shows how this gradient can be applied to a
+    background element:
+
+    \l{css3_gradientBack}{\inlineimage webkit-guide/scr_css3_gradientBack.png
+    }
+
+    \l{css3_gradientBack_css}{(CSS)}
+
+    Gradients cannot be applied to the \c{body} element.
+    Instead,
+    they are here applied to an element covers the background.
+
+    You can specify more than one gradient for the same element.
+    The following shifts from a dark to a light gray halfway down the
+    element,
+    then back to dark:
+
+    \code
+    background: -webkit-gradient(linear, center top, center bottom,
+	        from(#777777), color-stop(50%, #dddddd), to(#777777) );
+    \endcode
+
+    Here is how the additional \c{color-stop} appears when applied to the
+    same background element:
+
+    \l{css3_gradientBackStop}{\inlineimage webkit-guide/scr_css3_gradientBackStop.png
+    }
+
+    \l{css3_gradientBackStop_css}{(CSS)}
+
+    Gradients can also provide a textured,
+    three-dimensional appearance for buttons.
+    In the following example,
+    the gradient is inverted and darkened when each button is pressed:
+
+    \l{css3_gradientButton}{\inlineimage webkit-guide/scr_css3_gradientButton.png
+    }
+
+    \l{css3_gradientButton_css}{(CSS)}
+
+    In addition to linear gradients,
+    CSS3 also specifies \bold{radial} gradients that emanate from a single
+    point.
+    The following example demonstrates a colorful radial gradient used to
+    mark where users touch the screen:
+
+    \l{css3_grad-radial}{\inlineimage webkit-guide/scr_css3_grad-radial.png
+    }
+
+    \l{css3_grad-radial_css}{(CSS)}
+    \l{css3_grad-radial_js}{(JavaScript)}
+
+    The syntax is slightly different than for lineal gradients.
+    The first two comma-separated arguments after the \c{radial} statement
+    specify the coordinates of the inner circle,
+    and its radius.
+    The next two arguments specify the coordinates and radius of the outer
+    circle:
+
+    \code
+    background: -webkit-gradient(radial, 90 120, 5, 100 130, 48,
+	        from(#777777), color-stop(50%, #dddddd), to(#777777) );
+    \endcode
+
+    The use of \c{from} and \c{to} values and \c{color-stop} are same as
+    for linear gradients.
+
+    \section2 Reflections
+
+    Reflections offer a mirror-like effect which,
+    in the following example,
+    adds a sense of weight to headings and images:
+
+    \l{css3_reflect}{\inlineimage webkit-guide/scr_css3_reflect.png
+    }
+
+    \l{css3_reflect_css}{(CSS)}
+
+    The property's syntax specifies the edge of the element at which to
+    reflect,
+    the offset,
+    and an overlay color.
+    In this case,
+    the color is a gradient,
+    which causes the reflection to gradually fade:
+
+    \code
+    -webkit-box-reflect : below -0.25em -webkit-gradient(linear, center
+                top, center bottom, from(transparent), color-stop(0.25,
+                transparent), to(black));
+    \endcode
+
+    \section2 Masks
+
+    Masks offer a way to modify an image by overlaying either another
+    image,
+    or a gradient.
+    The following example shows a series of thumbnail images that appear
+    faded at their bottom edge until selected:
+
+    \l{css3_mask-grad}{\inlineimage webkit-guide/scr_css3_mask-grad.png
+    }
+
+    \l{css3_mask-grad_css}{(CSS)}
+    \l{css3_mask-grad_js}{(JavaScript)}
+
+    The gradient\'s opacity shifts from 1 to 0,
+    an effect that translates to the image:
+
+    \code
+    -webkit-mask-box-image : -webkit-gradient(linear, left top, left
+       bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+    \endcode
+
+    The following example demonstrates an image used as a mask to frame
+    another image:
+
+    \l{css3_mask-img}{\inlineimage webkit-guide/scr_css3_mask-img.png
+    }
+
+    \l{css3_mask-img_css}{(CSS)}
+
+    Separately,
+    the component images look like this:
+
+    \image webkit-guide/mask0.png
+    \image webkit-guide/mask1.png
+
+    The syntax is the same for border images,
+    and allows you to stretch one image over the other:
+
+    \code
+    -webkit-mask-box-image : url(img/mask.png) 5% stretch;
+    \endcode
+
+\section1 Dynamic CSS
+
+Animations help enhance touch-based mobile interfaces in many ways.
+They help ease transitions from one display state to another that
+might otherwise appear jarring.
+They help provide a sense of navigational orientation.
+They also often simulate tactile feedback as users\' touches result in
+a tangible visual effect.
+Overall,
+they add a sense of vibrancy that increases users\'
+engagement with the content on display.
+
+Support by QtWebKit for HTML5 allows you to choose from among several
+flavors of web-based animation:
+Canvas,
+SVG,
+and Level 3 CSS.
+Web developers may also be familiar with lower-level JavaScript-based
+animation techniques,
+which form the basis of many popular JavaScript libraries such as
+jQuery and Prototype.
+This section focuses on CSS-based animations,
+since they are more appropriate to integrate throughout a web design,
+without the additional overhead JavaScript libraries require.
+Like Flash,
+SVG and Canvas offer more specialized,
+low-level graphics frameworks whose animation features
+are more appropriate for generating standalone effects.
+
+This section demonstrates animation techniques by offering a series of
+examples that apply to common mobile design tasks.
+While some of these tasks are addressed by existing JavaScript
+frameworks such as jQuery and Prototype,
+the examples provided here illustrate some CSS-only alternatives.
+
+    \section2 CSS Animation Concepts
+
+    Level 3 CSS introduces three distinct concepts that are relevant when
+    crafting dynamic effects,
+    which are discussed in the following sections:
+
+    \list
+
+    \o \bold{Transforms} offer a series of manipulations to screen
+    elements.
+    By themselves,
+    transforms present only static visual effects,
+    but they become especially useful as part of dynamic transitions and
+    animations.
+    Simple transforms are two-dimensional,
+    with three-dimensional transforms gaining gradual support.
+
+    \o \bold{Transitions} entail a graduated shift from one explicit
+    display state to another.
+    Transitional shifts apply to any CSS property that specifies numeric
+    or color values.
+
+    \o \bold{Animations} offer more complex sequences of transitions that
+    can specify many intermediate display states.
+    Unlike simple transitions,
+    animations can also be initiated more freely.
+
+    \endlist
+
+    \section2 2D Transforms
+
+    Transforms allow you to freely displace box elements from where they
+    would ordinarily appear.
+    Several transform functions are available,
+    allowing you to \bold{scale},
+    \bold{rotate},
+    \bold{skew},
+    or \bold{translate} (move) objects.
+
+    The \c{translate} function moves an element from its default location,
+    and accepts \bold{x} and \bold{y} measurements as arguments.
+    The following moves an element off the right edge of the screen:
+
+    \code
+    -webkit-transform: translate(120%, 0);
+    \endcode
+
+    Alternately,
+    \c{translateX} and \c{translateY} functions allow you to specify each
+    axis independently.
+    This moves the element off the top of the screen:
+
+    \code
+    -webkit-transform: translateX(0.0) translateY(-120%);
+    \endcode
+
+    Scale transforms allow you enlarge or shrink an element,
+    with the scale expressed as a decimal.
+    By itself,
+    \c{scale} modifies height and width proportionately,
+    but the alternative \c{scaleX} and \c{scaleY} functions allow you to
+    constrain scaling to a single axis.
+
+    The following animation demonstrates a \c{translate} function,
+    which moves the element from off the screen,
+    followed by series of \c{scale},
+    \c{scaleX},
+    and \c{scaleY} functions:
+
+    \l{anim_demo-scale}{\inlineimage webkit-guide/scr_anim_demo-scale.png
+    }
+
+    \l{anim_demo-scale_css}{(CSS)}
+
+    By default,
+    transforms originate from the center of the element,
+    but you can specify any edge using the \c{-webkit-transform-origin}
+    property.
+    The following reduces an element to 75% of its original size,
+    while keeping it at its original bottom edge:
+
+    \code
+    -webkit-transform		: scale(0.75);
+    -webkit-transform-origin	: bottom;
+    \endcode
+
+    The following example uses this scale transform to shrink icons that
+    are assigned to in-line links,
+    with icons aligning to the text\'s baseline:
+
+    \l{layout_link-fmt}{\inlineimage webkit-guide/scr_layout_link-fmt.png
+    }
+
+    \l{layout_link-fmt_css}{(CSS)}
+
+    The \c{rotate} function accepts degree or radian arguments,
+    with negative arguments specifying counter-clockwise motion.
+    The following animation demonstrates two rotations: the first clockwise around the
+    element\'s center point,
+    and the second counter-clockwise around the top left corner:
+
+    \l{anim_demo-rotate}{\inlineimage webkit-guide/scr_anim_demo-rotate.png
+    }
+
+    \l{anim_demo-rotate_css}{(CSS)}
+
+    The \c{skew} function also accepts positive or negative degree
+    arguments,
+    specifying the extent to which to modify the bottom left corner\'s
+    90-degree angle.
+    The \c{skew} and \c{skewX} functions shift the element horizontally,
+    but the alternative \c{skewY} function shifts the element vertically.
+    The following animation demonstrates a \c{skewX} followed by a
+    \c{skewY}:
+
+    \l{anim_demo-skew}{\inlineimage webkit-guide/scr_anim_demo-skew.png
+    }
+
+    \l{anim_demo-skew_css}{(CSS)}
+
+    In the following example,
+    a variety of transforms make a set of three navigational tab icons
+    appear to be part of a cube:
+
+    \l{anim_tabbedSkew}{\inlineimage webkit-guide/scr_anim_tabbedSkew.png
+    }
+
+    \l{anim_tabbedSkew_css}{(CSS)}
+
+    The example also implements the tab icons as internal links that
+    activate display of content using the \c{:target} dynamic class.
+    See the \l{Navigational Selectors} section for more information.
+
+    Note that transforms can include any combination of the functions
+    described above:
+
+    \code
+    nav > a:nth-of-type(3) {
+        background-image	: url(img/S_google.jpg);
+        -webkit-transform	: rotate(-60deg) skew(-30deg) translate(1.7em, 0em);
+    }
+    \endcode
+
+    \section2 Transitions
+
+    Transitions allow you to gradually shift from one defined CSS state to
+    another.
+    Any CSS property expressed as a numeric or color value (including a
+    color name or hex value) can be transitioned between two style
+    sheets.
+    Properties such as \c{display} that have discrete sets of named
+    values,
+    such as the \c{display} property's \bold{block} or \bold{none} values,
+    cannot be transitioned.
+    In cases where named values translate internally to numeric values,
+    such as the \c{border-width} property's \c{thin} and \c{thick} values,
+    they can be transitioned.
+
+    The following example shows a series of transitions from a collapsed
+    icon state to an expanded panel:
+
+    \l{anim_panel}{\inlineimage webkit-guide/scr_anim_panel.png
+    }
+
+    \l{anim_panel_css}{(CSS)}
+    \l{anim_panel_js}{(JavaScript)}
+
+    Each style sheet specifies a different \c{max-width} value,
+    and each accompanying transition,
+    defined separately for each state,
+    allows the value to shift over the course of half a second:
+
+    \code
+    nav.expanded {
+        max-width		: 95%;
+        -webkit-transition	: max-width 0.5s ease-in-out;
+    }
+    nav.collapsed {
+        max-width		: 10%;
+        -webkit-transition	: max-width 0.5s ease-in-out;
+    }
+    \endcode
+
+    That appreviated syntax can be expanded to several different
+    properties:
+
+    \code
+    nav.expanded {
+        max-width				: 95%;
+        -webkit-transition-property		: max-width;
+        -webkit-transition-duration		: 0.5s;
+        -webkit-transition-timing-function	: ease-in-out;
+    }
+    nav.collapsed {
+        max-width				: 10%;
+        -webkit-transition-property		: max-width;
+        -webkit-transition-duration		: 0.5s;
+        -webkit-transition-timing-function	: ease-in-out;
+    }
+    \endcode
+
+    Available transition functions include \c{linear},
+    \c{ease-in},
+    \c{ease-out},
+    \c{ease-in-out} and \c{cubic-bezier}.
+
+    Note that the \c{max-width} properties in both style sheets both use
+    percentages to specify measurements.
+    Transitions may not work properly if you shift from one unit to another.
+
+    The example above specifies an additional set of transitions affecting
+    the icons nested within the navigation panel:
+
+    \code
+    nav.expanded > .option {
+        opacity		: 1;
+        -webkit-transform	: scale(1.0);
+        -webkit-transition	: all 0.5s linear;
+    }
+    nav.collapsed > .option {
+        opacity		: 0;
+        -webkit-transform	: scale(0.0);
+        -webkit-transition	: all 0.5s linear;
+    }
+    \endcode
+
+    The shifting \c{scale} transform makes icons appear to zoom in to fill
+    the space,
+    while \c{opacity} makes them fade in.
+    Specifying \c{all} as the transition property applies to any valid
+    property that differs between the two states.
+
+    These nested transitions execute at the same time as those assigned to
+    the parent \c{nav} element.
+    The combined effect appears to be a single transition.
+
+    \section2 Transitional Sequences
+
+    The prior example showed a single transition,
+    but transitions can also be run in sequence to form more complex
+    animations.
+    The following example demonstrates an embedded navigation panel that,
+    when pressed,
+    expands horizontally,
+    then vertically to reveal numerous navigation options:
+
+    \l{anim_accord}{\inlineimage webkit-guide/scr_anim_accord.png
+    }
+
+    \l{anim_accord_css}{(CSS)}
+    \l{anim_accord_js}{(JavaScript)}
+
+    The style sheets specify separate,
+    comma-separated transitions for \c{width} and \c{height} properties:
+
+    \code
+    #accordion.expanded {
+        width: 80%;
+        height: 90%;
+        -webkit-transition:
+            width 0.5s ease-in-out 0.0s,
+            height 0.5s ease-in-out 0.5s
+        ;
+    }
+    #accordion.collapsed {
+        width: 10%;
+        height: 7%;
+        -webkit-transition:
+            height 0.5s ease-in-out 0.0s,
+            width 0.5s ease-in-out 0.5s
+        ;
+    }
+    \endcode
+
+    Each transition\'s additional time measurement specifies a delay.
+    The long-form syntax may make this clearer:
+
+    \code
+    #accordion.expanded {
+        width: 80%;
+        height: 90%;
+        -webkit-transition-property		: width		, height;
+        -webkit-transition-duration		: 0.5s		, 0.5s;
+        -webkit-transition-timing-function	: ease-in-out	, ease-in-out;
+        -webkit-transition-delay		: 0.0s		, 0.5s;
+    }
+    #accordion.collapsed {
+        width				: 10%;
+        height				: 7%;
+        -webkit-transition-property		: height	, width;
+        -webkit-transition-duration		: 0.5s		, 0.5s;
+        -webkit-transition-timing-function	: ease-in-out	, ease-in-out;
+        -webkit-transition-delay		: 0.0s		, 0.5s;
+    }
+    \endcode
+
+    The shift to the \c{expanded} state involves two transitions,
+    each of which lasts half a second and relies on the same
+    \c{ease-in-out} function.
+    The first takes place immediately and affects the \c{width} property.
+    The second,
+    affecting the \c{height} property,
+    takes place after a delay that matches the first transition\'s
+    duration.
+    The reverse transition is much the same,
+    only the \c{height} property transitions before the \c{width} to
+    reverse the effect.
+
+    In addition to the navigation element\'s sequence of transitions,
+    nested accordion-style animations activate when users expand top-level
+    headings.
+    Subheadings are revealed using a \c{scaleY} transform,
+    which makes them appear as if they are flipping upwards.
+
+    The following example shows a photo gallery interface that uses the
+    same techniques.
+    (Size the window to emulate a smaller mobile screen.)
+
+    \l{anim_gallery}{\inlineimage webkit-guide/scr_anim_gallery.png
+    }
+
+    \l{anim_gallery_css}{(CSS)}
+    \l{anim_gallery_js}{(JavaScript)}
+
+    The main interface uses simple transitions affecting \c{opacity},
+    along with \c{scale} and \c{translate} transforms,
+    which combined make queued images appear dimmer,
+    smaller,
+    and horizontally offset from the main image.
+
+    A separate sequence of transitions activates when users tap selected
+    images.
+    The first transition uses a \c{scaleX} transform to flip the image
+    towards the center.
+    The second then flips out a panel featuring details on the photo.
+    When users navigate away to adjacent photos,
+    the panel automatically flips back to its original state as it is
+    moved to the side.
+
+    Another example shows an interface featuring a simple list of items:
+
+    \l{anim_skew}{\inlineimage webkit-guide/scr_anim_skew.png
+    }
+
+    \l{anim_skew_css}{(CSS)}
+    \l{anim_skew_js}{(JavaScript)}
+
+    When dismissed,
+    items are wiped off the screen using a \c{skew} transform that
+    provides the illusion of speed.
+    Remaining items move upwards to fill the space vacated by items that
+    have been removed.
+
+    This example uses the same technique of sequential transitions.
+    The first transition applies to the combined \c{translate}/\c{skew}
+    transform.
+    The second,
+    delayed transition modifies the \c{top} property to align remaining
+    items to a grid.
+
+    Note that for items to reposition themselves in this example,
+    a vertical grid must be explicitly specified.
+    You can only apply transitions between properties you explicitly
+    define and activate,
+    not between values the browser assigns internally to automatically
+    position elements relative to each other.
+
+    \section2 Keyframe Animations
+
+    The previous section showed how you can chain sequences of transitions
+    to produce complex effects.
+    Animations also allow you to define many intermediary interface states,
+    but using a far simpler syntax,
+    and not assigned to transitions between CSS states.
+
+    The following example shows a simple animation of icons that pulse
+    when selected:
+
+    \l{anim_pulse}{\inlineimage webkit-guide/scr_anim_pulse.png
+    }
+
+    \l{anim_pulse_css}{(CSS)}
+
+    It uses the following CSS,
+    shown here in both abbreviated and long form:
+
+    \code
+    nav > a:target { -webkit-animation : pulse 1s infinite; }
+
+    nav > a:target {
+        -webkit-animation-name		: pulse;
+        -webkit-animation-duration		: 1s;
+        -webkit-animation-iteration-count	: infinite;
+    }
+    \endcode
+
+    You supply a \bold{name} for the animation that corresponds to a
+    \bold{keyframes} rule defined separately within your CSS:
+
+    \code
+    @-webkit-keyframes pulse {
+        0% { opacity : 1.0 }
+        50% { opacity : 0.7 }
+    }
+    \endcode
+
+    Percentages mark new animation states within the course of the
+    animation,
+    and behave much like CSS selectors.
+    In this case,
+    the animation shifts between two separate states over
+    the course of a second:
+    opaque and slightly dimmed.
+    With its \c{iteration-count} set to \c{infinite} rather than a set
+    number,
+    the animation only stops when the link is no longer selected.
+
+    The following example demonstrates a popular mobile design pattern
+    implemented with CSS.
+    Navigation to nested subheads appears to wipe to the right,
+    while navigating upwards in the hierarchy appears to wipe to the left:
+
+    \l{anim_slide1}{\inlineimage webkit-guide/scr_anim_slide1.png
+    }
+
+    \l{anim_slide_css}{(CSS)}
+
+    It relies on keyframes rules such as the following,
+    which define a simple start and end state:
+
+    \code
+    @-webkit-keyframes slide_in {
+      from {
+        left            : 80%;
+        right           : -80%;
+      }
+      to {
+        left            : 0em;
+        right           : 0em;
+      }
+    }
+    \endcode
+
+    Unlike a transition,
+    the animation is triggered immediately when the page loads,
+    but only if the target of navigation is an anchor whose ID
+    is \bold{in} or \bold{out}.
+    If you navigate to the page itself,
+    no animation occurs.
+
+    The following example uses a keyframe animation to scroll through
+    banner options at the top of the screen:
+
+    \l{css3_multicol}{\inlineimage webkit-guide/scr_css3_multicol.png
+    }
+
+    \l{css3_multicol_css}{(CSS)}
+
+    The animation defines a set of rapid shifts alternating with long
+    static phases.
+    It modifies the left offset of an element that is five times the width
+    of the window.
+
+    \code
+    @-webkit-keyframes banner_scroll {
+        0% { left	: 0%; }
+        18% { left	: 0%; }
+        20% { left	: -100%; }
+        38% { left	: -100%; }
+        40% { left	: -200%; }
+        58% { left	: -200%; }
+        60% { left	: -300%; }
+        78% { left	: -300%; }
+        80% { left	: -400%; }
+        95% { left	: -400%; }
+        100% { left : 0%; }
+    }
+    \endcode
+
+    Finally,
+    the demonstrations of \l{anim_demo-rotate}{rotate},
+    \l{anim_demo-scale}{scale},
+    and \l{anim_demo-skew}{skew} 2D transforms that opened this section
+    all rely on separate keyframe animations to slide in and manipulate a
+    series of panels.
+    Separate \c{-webkit-animation-delay} settings for each panel control
+    the sequence of each presentation.
+
+*/
+
diff --git a/doc/src/webkit/guide/guidelinks.qdoc b/doc/src/webkit/guide/guidelinks.qdoc
new file mode 100644
index 0000000..6ecfce9
--- /dev/null
+++ b/doc/src/webkit/guide/guidelinks.qdoc
@@ -0,0 +1,444 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit documentation.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+/*!
+\externalpage webkit-guide/storage.htm
+\title ex_storage
+*/
+
+/*!
+\externalpage webkit-guide/css/storage.css
+\title storage_css
+*/
+
+/*!
+\externalpage webkit-guide/js/storage.js
+\title storage_js
+*/
+
+/*!
+\externalpage webkit-guide/anim_accord.htm
+\title anim_accord
+*/
+
+/*!
+\externalpage webkit-guide/anim_demo-rotate.htm
+\title anim_demo-rotate
+*/
+
+/*!
+\externalpage webkit-guide/anim_demo-scale.htm
+\title anim_demo-scale
+*/
+
+/*!
+\externalpage webkit-guide/anim_demo-skew.htm
+\title anim_demo-skew
+*/
+
+/*!
+\externalpage webkit-guide/anim_gallery.htm
+\title anim_gallery
+*/
+
+/*!
+\externalpage webkit-guide/anim_panel.htm
+\title anim_panel
+*/
+
+/*!
+\externalpage webkit-guide/anim_pulse.htm
+\title anim_pulse
+*/
+
+/*!
+\externalpage webkit-guide/anim_skew.htm
+\title anim_skew
+*/
+
+/*!
+\externalpage webkit-guide/anim_slide1.htm
+\title anim_slide1
+*/
+
+/*!
+\externalpage webkit-guide/anim_tabbedSkew.htm
+\title anim_tabbedSkew
+*/
+
+/*!
+\externalpage webkit-guide/css3_backgrounds.htm
+\title css3_backgrounds
+*/
+
+/*!
+\externalpage webkit-guide/css3_border-img.htm
+\title css3_border-img
+*/
+
+/*!
+\externalpage webkit-guide/css3_grad-radial.htm
+\title css3_grad-radial
+*/
+
+/*!
+\externalpage webkit-guide/css3_gradientBack.htm
+\title css3_gradientBack
+*/
+
+/*!
+\externalpage webkit-guide/css3_gradientBackStop.htm
+\title css3_gradientBackStop
+*/
+
+/*!
+\externalpage webkit-guide/css3_gradientButton.htm
+\title css3_gradientButton
+*/
+
+/*!
+\externalpage webkit-guide/css3_mask-grad.htm
+\title css3_mask-grad
+*/
+
+/*!
+\externalpage webkit-guide/css3_mask-img.htm
+\title css3_mask-img
+*/
+
+/*!
+\externalpage webkit-guide/css3_multicol.htm
+\title css3_multicol
+*/
+
+/*!
+\externalpage webkit-guide/css3_reflect.htm
+\title css3_reflect
+*/
+
+/*!
+\externalpage webkit-guide/css3_scroll.htm
+\title css3_scroll
+*/
+
+/*!
+\externalpage webkit-guide/css3_sel-nth.htm
+\title css3_sel-nth
+*/
+
+/*!
+\externalpage webkit-guide/css3_text-overflow.htm
+\title css3_text-overflow
+*/
+
+/*!
+\externalpage webkit-guide/css3_text-shadow.htm
+\title css3_text-shadow
+*/
+
+/*!
+\externalpage webkit-guide/css3_text-stroke.htm
+\title css3_text-stroke
+*/
+
+/*!
+\externalpage webkit-guide/form_tapper.htm
+\title form_tapper
+*/
+
+/*!
+\externalpage webkit-guide/form_toggler.htm
+\title form_toggler
+*/
+
+/*!
+\externalpage webkit-guide/layout_link-fmt.htm
+\title layout_link-fmt
+*/
+
+/*!
+\externalpage webkit-guide/layout_tbl-keyhole.htm
+\title layout_tbl-keyhole
+*/
+
+/*!
+\externalpage webkit-guide/mob_condjs.htm
+\title mob_condjs
+*/
+
+/*!
+\externalpage webkit-guide/mob_layout.htm
+\title mob_layout
+*/
+
+/*!
+\externalpage webkit-guide/mob_mediaquery.htm
+\title mob_mediaquery
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_accord.css
+\title anim_accord_css
+*/
+
+/*!
+\externalpage webkit-guide/js/anim_accord.js
+\title anim_accord_js
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_demo-rotate.css
+\title anim_demo-rotate_css
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_demo-scale.css
+\title anim_demo-scale_css
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_demo-skew.css
+\title anim_demo-skew_css
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_gallery.css
+\title anim_gallery_css
+*/
+
+/*!
+\externalpage webkit-guide/js/anim_gallery.js
+\title anim_gallery_js
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_panel.css
+\title anim_panel_css
+*/
+
+/*!
+\externalpage webkit-guide/js/anim_panel.js
+\title anim_panel_js
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_pulse.css
+\title anim_pulse_css
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_skew.css
+\title anim_skew_css
+*/
+
+/*!
+\externalpage webkit-guide/js/anim_skew.js
+\title anim_skew_js
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_slide.css
+\title anim_slide_css
+*/
+
+/*!
+\externalpage webkit-guide/css/anim_tabbedSkew.css
+\title anim_tabbedSkew_css
+*/
+
+/*!
+\externalpage webkit-guide/css/form_tapper.css
+\title form_tapper_css
+*/
+
+/*!
+\externalpage webkit-guide/css/form_toggler.css
+\title form_toggler_css
+*/
+
+/*!
+\externalpage webkit-guide/css/layout_link-fmt.css
+\title layout_link-fmt_css
+*/
+
+/*!
+\externalpage webkit-guide/css/layout_tbl-keyhole.css
+\title layout_tbl-keyhole_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_backgrounds.css
+\title css3_backgrounds_css
+*/
+
+/*!
+\externalpage webkit-guide/js/css3_backgrounds.js
+\title css3_backgrounds_js
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_border-img.css
+\title css3_border-img_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_grad-radial.css
+\title css3_grad-radial_css
+*/
+
+/*!
+\externalpage webkit-guide/js/css3_grad-radial.js
+\title css3_grad-radial_js
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_gradientBack.css
+\title css3_gradientBack_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_gradientBackStop.css
+\title css3_gradientBackStop_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_gradientButton.css
+\title css3_gradientButton_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_mask-grad.css
+\title css3_mask-grad_css
+*/
+
+/*!
+\externalpage webkit-guide/js/css3_mask-grad.js
+\title css3_mask-grad_js
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_mask-img.css
+\title css3_mask-img_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_multicol.css
+\title css3_multicol_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_reflect.css
+\title css3_reflect_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_scroll.css
+\title css3_scroll_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_sel-nth.css
+\title css3_sel-nth_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_text-overflow.css
+\title css3_text-overflow_css
+*/
+
+/*!
+\externalpage webkit-guide/js/css3_text-overflow.js
+\title css3_text-overflow_js
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_text-shadow.css
+\title css3_text-shadow_css
+*/
+
+/*!
+\externalpage webkit-guide/css/css3_text-stroke.css
+\title css3_text-stroke_css
+*/
+
+/*!
+\externalpage webkit-guide/css/mob_condjs.css
+\title mob_condjs_css
+*/
+
+/*!
+\externalpage webkit-guide/js/mob_condjs.js
+\title mob_condjs_js
+*/
+
+/*!
+\externalpage webkit-guide/css/mqlayout_desktop.css
+\title mqlayout_desktop_css
+*/
+
+/*!
+\externalpage webkit-guide/css/mqlayout_touch.css
+\title mqlayout_touch_css
+*/
+
+/*!
+\externalpage webkit-guide/css/mqlayout_mobile.css
+\title mqlayout_mobile_css
+*/
+
+/*!
+\externalpage webkit-guide/css/mq_desktop.css
+\title mq_desktop_css
+*/
+
+/*!
+\externalpage webkit-guide/css/mq_touch.css
+\title mq_touch_css
+*/
+
+/*!
+\externalpage webkit-guide/css/mq_mobile.css
+\title mq_mobile_css
+*/
+
+/*!
+\externalpage webkit-guide/css/mob_mediaquery.css
+\title mob_mediaquery_css
+*/
+