Merge remote-tracking branch 'origin/4.7' into qt-master-from-4.7

Conflicts:
	src/gui/text/qfontengine_mac.mm
	tests/auto/qdiriterator/tst_qdiriterator.cpp

4 files changed, 3534 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..fcfd208
--- /dev/null
+++ b/doc/src/webkit/guide/chapter_cache.qdoc
@@ -0,0 +1,511 @@
+/****************************************************************************
+**
+** 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 module of the Qt Toolkit.
+**
+** $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 QtWebKit Guide - Client Storage
+\chapter Client Storage
+
+This section of the \l{QtWebKit Guide} serves as an introduction to the
+\l{HTML5 Web Storage} features of QtWebKit.
+
+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 \l{HTML5 Web Storage}{Web 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
+\c{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 \c{true} and \c{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{HTML5 Doctor: Introducing Web SQL Databases}
+
+\list
+\o \l{QtWebKit Guide} -back to the main page
+\endlist
+*/
+
+*/
diff --git a/doc/src/webkit/guide/chapter_canvas.qdoc b/doc/src/webkit/guide/chapter_canvas.qdoc
new file mode 100644
index 0000000..eea2236
--- /dev/null
+++ b/doc/src/webkit/guide/chapter_canvas.qdoc
@@ -0,0 +1,1016 @@
+/****************************************************************************
+**
+** 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 module of the Qt Toolkit.
+**
+** $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 QtWebKit Guide - Canvas Graphics
+
+\chapter Canvas Graphics
+This section of the \l{QtWebKit Guide} serves as an introduction to the
+\l{HTML5 Canvas API} features of QtWebKit.
+
+The \l{HTML5 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 \e{"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 Cartesian point \c{(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 \e{pencil} to actually draw on the canvas, first use the
+    \c{strokeStyle} property to set the color to a value such as black
+    (\c{#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 commands, if coded fully, would create the shape below:
+
+    \image webkit-guide/canvas_closepath.gif
+
+    \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 \c 0. For example, \c{context.lineWidth = 10} sets
+    the line thickness to \c 10 units. The default value is \c 1 unit, which is
+    not the same as \c 1 \e 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 \e{miter limit ratio}. The value can be any
+    number greater than \c 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 \c 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 \e{"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 \c 360 degrees, or 2\pi radians. A semicircle is \c 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
+
+    \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 \e{"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 \e{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 \e{destination} shape. The shape drawn on the canvas afterwards to
+create the composite image is called the \e{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{HTML5 Canvas API}, 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 \c{"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
+\c dw, height \c dh, and upper left corner at coordinates \c{(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
+        \list
+        \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
+        \endlist
+    \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{CSS Color Value}{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{CSS Color
+Value}{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{CSS3 Color Module specification} extends both RGB and HSL color models to
+include a color's opacity, referred to as its \e{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 \e{color stops}, representing color
+    shifts positioned from \c 0 to \c 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 \c 0
+    to \c 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
+
+    \note A canvas gradient's color stops behave slightly differently than those
+    used within non-canvas \l{Gradients}{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 \e{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 \l{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 \c angle of rotation is in radians.
+
+    \bold{See Also:}
+    \l{http://www.senocular.com/flash/tutorials/transformmatrix/}{senocular.com}
+    for a good explanation of how transformation matrices are used
+    identically within Adobe 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:
+\list
+\o\c{strokeStyle}
+\o\c{fillStyle}
+\o\c{globalAlpha}
+\o\c{lineWidth}
+\o\c{lineCap}
+\o\c{lineJoin}
+\o\c{miterLimit}
+\o\c{shadowOffsetX}
+\o\c{shadowOffsetY}
+\o\c{shadowBlur}
+\o\c{shadowColor}
+\o\c{globalCompositeOperation}
+\o\c{font}
+\o\c{textAlign}
+\o\c{textBaseline}
+\endlist
+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 \c 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}
+
+\o \l{QtWebKit Guide} -back to the main page
+\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..71005fc
--- /dev/null
+++ b/doc/src/webkit/guide/chapter_css.qdoc
@@ -0,0 +1,1519 @@
+/****************************************************************************
+**
+** 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 module of the Qt Toolkit.
+**
+** $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 QtWebKit Guide - Level 3 CSS
+
+\chapter Level 3 CSS
+This section of the \l{QtWebKit Guide} 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 \e{media queries} extend \e{media 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 \e{Mobile-specific domains}. Content providers might provide a separate
+access points for default content at \c{www.website.com}, with mobile content
+available at \c{m.website.com} or \c{website.mobi}. There might also be an
+additional \c{touch.website.com} access point targeted for higher-end
+touch-screen browsers.
+
+\o \e{Dynamic Server-based Adaptation}. In this case, there is a single access
+point, but the server sends different content, typically depending on the
+\e{User-Agent} header included in all browsers' HTTP requests.
+This approach may leverage databases of device characteristics such as
+\l{WURFL} or \l{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 \e{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
+    \c{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 \c{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
+    }
+
+    \e{Click on the image to view the example live in a browser or click on the
+    following links to view the CSS files.}
+
+    \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
+
+    \section2 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 \e{selectors} that make it easier to apply
+formatting to page elements. In addition, the \l{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
+
+    \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 visual 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 \e{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 \e{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 \e{HSL}. Colors defined with the HSL model specify the \e{hue} as a
+    radial or degree coordinate, then its \e{saturation} and \e{luminence}
+    as percentages. The following example specifies red and green values:
+
+    \code
+    background: hsl(0  , 100%, 60%);
+    background: hsl(128, 75% , 33%);
+    \endcode
+
+    \o \e{HSLA}.
+    Same as HSL,
+    but specifying an additional decimal \e{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 \e{RGBA}.
+    Same as RGB,
+    but specifying an additional decimal \e{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 \e{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 that 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 linear 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}, \c{to} values and \c{color-stop} in radial gradients
+    are the 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 \c 1 to \c 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 these:
+
+    \inlineimage webkit-guide/mask0.png
+    \inlineimage 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 Adobe 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 \e{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 \e{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 \e{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 \e{scale}, \e{rotate}, \e{skew}, or \e{translate} (move) objects.
+
+    The \c{translate} function moves an element from its default location, and
+    accepts \c{x} and \c{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 \c{block} or \c{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 of 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 shorthand 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 \c{name} for the animation that corresponds to a
+    \c{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
+    \c{in} or \c{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.
+
+
+\list
+\o \l{QtWebKit Guide} -back to the main page
+\endlist
+*/
+
+/*!
+\example webkit/webkit-guide
+\title QtWebKit Guide Files
+This is a listing of \l{QtWebKit Guide} code.
+\note The links to the HTML5 code is found within the guide.
+*/
+
diff --git a/doc/src/webkit/guide/guidelinks.qdoc b/doc/src/webkit/guide/guidelinks.qdoc
new file mode 100644
index 0000000..b4f7f98
--- /dev/null
+++ b/doc/src/webkit/guide/guidelinks.qdoc
@@ -0,0 +1,488 @@
+/****************************************************************************
+**
+** 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 module of the Qt Toolkit.
+**
+** $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-webkit-guide-css-storage-css.html
+\title storage_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-js-storage-js.html
+\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-webkit-guide-css-anim-accord-css.html
+\title anim_accord_css
+*/
+
+/*!
+\externalpage wwebkit-webkit-guide-js-anim-accord-js.html
+\title anim_accord_js
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-anim-demo-rotate-css.html
+\title anim_demo-rotate_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-anim-demo-scale-css.html
+\title anim_demo-scale_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-anim-demo-skew-css.html
+\title anim_demo-skew_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-anim-gallery-css.html
+\title anim_gallery_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-js-anim-gallery-js.html
+\title anim_gallery_js
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-anim-panel-css.html
+\title anim_panel_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-js-anim-panel-js.html
+\title anim_panel_js
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-anim-pulse-css.html
+\title anim_pulse_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-anim-skew-css.html
+\title anim_skew_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-js-anim-skew-js.html
+\title anim_skew_js
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-anim-slide-css.html
+\title anim_slide_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-anim-tabbedskew-css.html
+\title anim_tabbedSkew_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-form-tapper-css.html
+\title form_tapper_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-form-toggler-css.html
+\title form_toggler_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-layout-link-fmt-css.html
+\title layout_link-fmt_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-layout-tbl-keyhole-css.html
+\title layout_tbl-keyhole_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-backgrounds-css.html
+\title css3_backgrounds_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-js-css3-backgrounds-js.html
+\title css3_backgrounds_js
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-border-img-css.html
+\title css3_border-img_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-grad-radial-css.html
+\title css3_grad-radial_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-js-css3-grad-radial-js.html
+\title css3_grad-radial_js
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-gradientback-css.html
+\title css3_gradientBack_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-gradientbackstop-css.html
+\title css3_gradientBackStop_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-gradientbutton-css.html
+\title css3_gradientButton_css
+*/
+
+/*!
+\externalpage webkit-guide/css/webkit-webkit-guide-css-css3-mask-grad-css.html
+\title css3_mask-grad_css
+*/
+
+/*!
+\externalpage webkit-guide/js/webkit-webkit-guide-js-css3-mask-grad-js.html
+\title css3_mask-grad_js
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-mask-img-css.html
+\title css3_mask-img_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-multicol-css.html
+\title css3_multicol_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-reflect-css.html
+\title css3_reflect_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-scroll-css.html
+\title css3_scroll_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-sel-nth-css.html
+\title css3_sel-nth_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-text-overflow-css.html
+\title css3_text-overflow_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-js-css3-text-overflow-js.html
+\title css3_text-overflow_js
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-text-shadow-css.html
+\title css3_text-shadow_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-css3-text-stroke-css.html
+\title css3_text-stroke_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-mob-condjs-css.html
+\title mob_condjs_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-js-mob-condjs-js.html
+\title mob_condjs_js
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-mqlayout-desktop-css.html
+\title mqlayout_desktop_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-mqlayout-touch-css.html
+\title mqlayout_touch_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-mqlayout-mobile-css.html
+\title mqlayout_mobile_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-mq-desktop-css.html
+\title mq_desktop_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-mq-touch-css.html
+\title mq_touch_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-mq-mobile-css.html
+\title mq_mobile_css
+*/
+
+/*!
+\externalpage webkit-webkit-guide-css-mob-mediaquery-css.html
+\title mob_mediaquery_css
+*/
+
+/*!
+\externalpage http://deviceatlas.com/
+\title DeviceAtlas
+*/
+
+/*!
+\externalpage http://wurfl.sourceforge.net/
+\title WURFL
+*/
+
+/*!
+\externalpage http://www.w3.org/TR/selectors-api/
+\title Selectors API
+*/
+
+/*!
+\externalpage http://dev.w3.org/html5/webstorage/
+\title HTML5 Web Storage
+*/
+
+/*!
+\externalpage http://html5doctor.com/introducing-web-sql-databases
+\title HTML5 Doctor: Introducing Web SQL Databases
+*/
+
+/*!
+\externalpage http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
+\title HTML5 Canvas API
+*/
+
+/*!
+\externalpage http://www.w3schools.com/css/css_colors.asp
+\title CSS Color Value
+*/
+
+/*!
+\externalpage http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical
+\title CSS3 Color Module specification
+*/
+
+/*!
+\externalpage http://www.canvasdemos.com/2009/10/09/html-5-canvas-animation
+\title CanvasDemos.com: animated cartoon
+*/