summaryrefslogtreecommitdiffstats
path: root/WebCore/manual-tests
diff options
context:
space:
mode:
Diffstat (limited to 'WebCore/manual-tests')
-rw-r--r--WebCore/manual-tests/NPN_Invoke/NPN_Invoke.xcodeproj/project.pbxproj40
-rw-r--r--WebCore/manual-tests/animate-duration.html65
-rw-r--r--WebCore/manual-tests/animate-left.html43
-rw-r--r--WebCore/manual-tests/animate-none.html207
-rw-r--r--WebCore/manual-tests/applet-finish-parsing-children.html11
-rw-r--r--WebCore/manual-tests/array-out-of-memory.html42
-rw-r--r--WebCore/manual-tests/canvas-mask-redraw.html65
-rw-r--r--WebCore/manual-tests/computed-transform-value.html49
-rw-r--r--WebCore/manual-tests/cursor-max-size.html25
-rw-r--r--WebCore/manual-tests/cursor.html4
-rw-r--r--WebCore/manual-tests/hash-ref.html25
-rw-r--r--WebCore/manual-tests/inspector-wrappers/console-alert-document-body.html14
-rw-r--r--WebCore/manual-tests/inspector-wrappers/console-alert-object.html14
-rw-r--r--WebCore/manual-tests/inspector-wrappers/console-alert-this.html17
-rw-r--r--WebCore/manual-tests/inspector-wrappers/console-eval.html11
-rw-r--r--WebCore/manual-tests/inspector-wrappers/console-str-alert-object.html15
-rw-r--r--WebCore/manual-tests/inspector-wrappers/console-str-getter.html12
-rw-r--r--WebCore/manual-tests/inspector-wrappers/inspector-evaluate.html11
-rw-r--r--WebCore/manual-tests/inspector-wrappers/inspector-hasAttributes.html18
-rw-r--r--WebCore/manual-tests/inspector-wrappers/inspector-treeElementIdentifier.html17
-rw-r--r--WebCore/manual-tests/inspector-wrappers/inspector-wrappers-test-utils.js46
-rw-r--r--WebCore/manual-tests/inspector/command-line-api.html6
-rw-r--r--WebCore/manual-tests/inspector/console-assert.html37
-rw-r--r--WebCore/manual-tests/inspector/console-call-line-numbers.html14
-rw-r--r--WebCore/manual-tests/inspector/console-log-formatting.html68
-rw-r--r--WebCore/manual-tests/inspector/console-time.html33
-rw-r--r--WebCore/manual-tests/inspector/debugger-execution-while-paused.html15
-rw-r--r--WebCore/manual-tests/inspector/debugger-pause-during-load.html5
-rw-r--r--WebCore/manual-tests/inspector/debugger-pause-on-else-statements.html18
-rw-r--r--WebCore/manual-tests/inspector/debugger-pause-on-for-in-statements.html18
-rw-r--r--WebCore/manual-tests/inspector/debugger-pause-on-for-statements.html16
-rw-r--r--WebCore/manual-tests/inspector/debugger-status-bar-buttons-state.html2
-rw-r--r--WebCore/manual-tests/inspector/display-sql-null.html21
-rw-r--r--WebCore/manual-tests/inspector/display-sql-transaction-error.html24
-rw-r--r--WebCore/manual-tests/inspector/dom-mutation.html31
-rw-r--r--WebCore/manual-tests/inspector/error-warning-count.html60
-rw-r--r--WebCore/manual-tests/inspector/errors-with-space in-url.html7
-rw-r--r--WebCore/manual-tests/inspector/escape-links.html1
-rw-r--r--WebCore/manual-tests/inspector/forzen-ui-while-paused.html11
-rw-r--r--WebCore/manual-tests/inspector/highlight-source-line.html4
-rw-r--r--WebCore/manual-tests/inspector/multiple-console-messages.html86
-rw-r--r--WebCore/manual-tests/inspector/profiler-test-call.html35
-rw-r--r--WebCore/manual-tests/inspector/profiler-test-many-calls-in-the-same-scope.html42
-rw-r--r--WebCore/manual-tests/inspector/resources/mutate-frame-2.html12
-rw-r--r--WebCore/manual-tests/inspector/resources/mutate-frame.html10
-rw-r--r--WebCore/manual-tests/inspector/resources/script-console-calls.js8
-rw-r--r--WebCore/manual-tests/inspector/resources/script-error.js6
-rw-r--r--WebCore/manual-tests/inspector/returnEvent-crash.html17
-rw-r--r--WebCore/manual-tests/inspector/styled-error-bubbles-in-scripts.html6
-rw-r--r--WebCore/manual-tests/panScroll.html32
-rw-r--r--WebCore/manual-tests/post-multi-file-upload.html35
-rw-r--r--WebCore/manual-tests/qt/main.html10
-rw-r--r--WebCore/manual-tests/qt/qtplugin.html17
-rw-r--r--WebCore/manual-tests/remove-on-drop-crash.html10
-rw-r--r--WebCore/manual-tests/resources/DrawMessage.classbin0 -> 1219 bytes
-rw-r--r--WebCore/manual-tests/resources/big-page.html2
-rw-r--r--WebCore/manual-tests/resources/hash-ref-test.html24
-rwxr-xr-xWebCore/manual-tests/resources/multiFileResources/post-echo-and-notify-done.cgi12
-rw-r--r--WebCore/manual-tests/resources/multiFileResources/testFile1.html4
-rw-r--r--WebCore/manual-tests/resources/multiFileResources/testFile2.html4
-rw-r--r--WebCore/manual-tests/resources/multiFileResources/testFile3.html5
-rw-r--r--WebCore/manual-tests/scrollbar-hover-active.html76
-rw-r--r--WebCore/manual-tests/svg-cursor-changes.svg29
-rw-r--r--WebCore/manual-tests/timeout-test.html13
-rw-r--r--WebCore/manual-tests/timeout-test.php3
-rw-r--r--WebCore/manual-tests/transition-delay.html59
-rw-r--r--WebCore/manual-tests/transition-events.html90
-rw-r--r--WebCore/manual-tests/transition-left.html46
-rw-r--r--WebCore/manual-tests/transition-timing-functions.html122
-rw-r--r--WebCore/manual-tests/transitions.html54
-rw-r--r--WebCore/manual-tests/transitions2.html52
71 files changed, 2025 insertions, 38 deletions
diff --git a/WebCore/manual-tests/NPN_Invoke/NPN_Invoke.xcodeproj/project.pbxproj b/WebCore/manual-tests/NPN_Invoke/NPN_Invoke.xcodeproj/project.pbxproj
index be7bda7..f89106f 100644
--- a/WebCore/manual-tests/NPN_Invoke/NPN_Invoke.xcodeproj/project.pbxproj
+++ b/WebCore/manual-tests/NPN_Invoke/NPN_Invoke.xcodeproj/project.pbxproj
@@ -14,29 +14,6 @@
8D576314048677EA00EA77CD /* CoreFoundation.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 0AA1909FFE8422F4C02AAC07 /* CoreFoundation.framework */; };
/* End PBXBuildFile section */
-/* Begin PBXBuildStyle section */
- 014CEA3F0018CDD111CA2923 /* Development */ = {
- isa = PBXBuildStyle;
- buildSettings = {
- GCC_DYNAMIC_NO_PIC = NO;
- GCC_ENABLE_FIX_AND_CONTINUE = YES;
- GCC_GENERATE_DEBUGGING_SYMBOLS = YES;
- GCC_OPTIMIZATION_LEVEL = 0;
- ZERO_LINK = YES;
- };
- name = Development;
- };
- 014CEA400018CDD111CA2923 /* Deployment */ = {
- isa = PBXBuildStyle;
- buildSettings = {
- COPY_PHASE_STRIP = YES;
- GCC_ENABLE_FIX_AND_CONTINUE = NO;
- ZERO_LINK = NO;
- };
- name = Deployment;
- };
-/* End PBXBuildStyle section */
-
/* Begin PBXFileReference section */
0AA1909FFE8422F4C02AAC07 /* CoreFoundation.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreFoundation.framework; path = /System/Library/Frameworks/CoreFoundation.framework; sourceTree = "<absolute>"; };
2220AF6009A447200030077C /* WebKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = WebKit.framework; path = /System/Library/Frameworks/WebKit.framework; sourceTree = "<absolute>"; };
@@ -121,15 +98,6 @@
);
buildRules = (
);
- buildSettings = {
- GCC_DEBUGGING_SYMBOLS = full;
- GCC_GENERATE_DEBUGGING_SYMBOLS = YES;
- GCC_OPTIMIZATION_LEVEL = 0;
- INFOPLIST_FILE = Info.plist;
- INSTALL_PATH = "$(HOME)/Library/Bundles";
- PRODUCT_NAME = NetscapeMoviePlugIn;
- WRAPPER_EXTENSION = plugin;
- };
dependencies = (
);
name = NPN_Invoke;
@@ -144,15 +112,11 @@
089C1669FE841209C02AAC07 /* Project object */ = {
isa = PBXProject;
buildConfigurationList = 149C298708902C53008A9EFC /* Build configuration list for PBXProject "NPN_Invoke" */;
- buildSettings = {
- };
- buildStyles = (
- 014CEA3F0018CDD111CA2923 /* Development */,
- 014CEA400018CDD111CA2923 /* Deployment */,
- );
+ compatibilityVersion = "Xcode 2.4";
hasScannedForEncodings = 1;
mainGroup = 089C166AFE841209C02AAC07 /* NetscapeMoviePlugIn */;
projectDirPath = "";
+ projectRoot = "";
targets = (
8D57630D048677EA00EA77CD /* NPN_Invoke */,
);
diff --git a/WebCore/manual-tests/animate-duration.html b/WebCore/manual-tests/animate-duration.html
new file mode 100644
index 0000000..d8bf81e
--- /dev/null
+++ b/WebCore/manual-tests/animate-duration.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Overriding Animations</title>
+ <script src="../../shared/javascript/utils.js" type="text/javascript" charset="utf-8"></script>
+ <style type="text/css" media="screen">
+
+ .container {
+ position: relative;
+ width: 400px;
+ height: 120px;
+ border: 1px solid black;
+ margin: 10px;
+ }
+ .box {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ background-color: blue;
+ z-index: 0;
+ -webkit-animation-name: "slide";
+ -webkit-animation-duration: 1s;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
+ -webkit-animation-iteration-count: infinite;
+ }
+
+ .one {
+ -webkit-animation-duration: 0s;
+ }
+
+ .two {
+ -webkit-animation-duration: 0;
+ }
+
+ @-webkit-keyframes slide {
+ from { -webkit-transform: translateX(0); }
+ to { -webkit-transform: translateX(280px); }
+ }
+
+ </style>
+</head>
+<body>
+ <p>Single anim (should keep animating)</p>
+ <div class="container" onclick="toggleClassName(this, 'highlighted')">
+ <div class="box none">
+ </div>
+ </div>
+ <p>duration: "0s" (should not animate)</p>
+ <div class="container" onclick="toggleClassName(this, 'highlighted')">
+ <div class="box one">
+ </div>
+ </div>
+ <p>duration: "0" (should animate since inherits valid duration)</p>
+ <div class="container" onclick="toggleClassName(this, 'highlighted')">
+ <div class="box two">
+ </div>
+ </div>
+
+</body>
+</html> \ No newline at end of file
diff --git a/WebCore/manual-tests/animate-left.html b/WebCore/manual-tests/animate-left.html
new file mode 100644
index 0000000..3ced2ec
--- /dev/null
+++ b/WebCore/manual-tests/animate-left.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Animation of left property</title>
+ <style>
+ div {
+ position: relative;
+ left: 100px;
+ height: 200px;
+ width: 200px;
+ background-color: #9bb;
+ -webkit-animation-name: bounce;
+ -webkit-animation-duration: 2s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
+ }
+
+ @-webkit-keyframes bounce {
+ from {
+ left: 100px;
+ }
+ to {
+ left: 300px;
+ }
+ }
+
+ </style>
+</head>
+<body>
+ <h1>Animation of 'left' property</h1>
+
+ <p>The element below should bounce 200 pixels left and right continuously</p>
+
+ <div id="target">
+ This element should animate.
+ </div>
+
+</body>
+</html> \ No newline at end of file
diff --git a/WebCore/manual-tests/animate-none.html b/WebCore/manual-tests/animate-none.html
new file mode 100644
index 0000000..4cb2c8b
--- /dev/null
+++ b/WebCore/manual-tests/animate-none.html
@@ -0,0 +1,207 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Testing animation-name: none</title>
+
+ <style type="text/css" media="screen">
+ div {
+ width: 300px;
+ height: 100px;
+ margin: 10px;
+ -webkit-animation-name: 'fail';
+ -webkit-animation-duration: 3.5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'fail' {
+ from {
+ -webkit-transform: rotate(-90deg);
+ }
+ to {
+ -webkit-transform: rotate(90deg);
+ }
+ }
+
+ #box1 {
+ position: relative;
+ background-color: blue;
+ -webkit-animation-name: 'sway1';
+ -webkit-animation-duration: 2.5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'sway1' {
+ from {
+ -webkit-transform: translate(0, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ #box2 {
+ position: relative;
+ background-color: red;
+ -webkit-animation-name: 'sway2';
+ -webkit-animation-duration: 3s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'sway2' {
+ from {
+ -webkit-transform: translate(0px, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ #box3 {
+ position: relative;
+ background-color: green;
+ -webkit-animation-name: 'sway3';
+ -webkit-animation-duration: 3.5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'sway3' {
+ from {
+ -webkit-transform: translate(0px, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ #box4 {
+ position: relative;
+ background-color: orange;
+ -webkit-animation-name: 'none';
+ -webkit-animation-duration: 3s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ #box5 {
+ position: relative;
+ background-color: purple;
+ -webkit-animation-name: 'none';
+ -webkit-animation-duration: 3s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ #box6 {
+ position: relative;
+ background-color: blue;
+ -webkit-animation-name: 'fade', 'sway6';
+ -webkit-animation-duration: 3s, 4s;
+ -webkit-animation-iteration-count: infinite, infinite;
+ -webkit-animation-direction: alternate, alternate;
+ -webkit-animation-timing-function: linear, linear;
+ }
+
+ @-webkit-keyframes 'sway6' {
+ from {
+ -webkit-transform: translate(0px, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ @-webkit-keyframes 'fade' {
+ from {
+ opacity: 1.0;
+ }
+ to {
+ opacity: 0.1;
+ }
+ }
+
+ /* set up animation that should never be run */
+ @-webkit-keyframes none {
+ from {
+ -webkit-transform: translate(200px, 0) rotate(-90deg);
+ }
+ to {
+ -webkit-transform: translate(0px, 0) rotate(90deg);
+ }
+ }
+
+ </style>
+ <script type="text/javascript" charset="utf-8">
+ function killanims() {
+ console.log("click");
+ var box1 = document.getElementById("box1");
+ box1.style.webkitAnimationName = '';
+ var box2 = document.getElementById("box2");
+ box2.style.webkitAnimationName = 'none';
+ var box3 = document.getElementById("box3");
+ box3.style.webkitAnimationName = "'none'";
+ var box6 = document.getElementById("box6");
+ box6.style.webkitAnimationName = "none, 'sway6'";
+ }
+
+ setTimeout(killanims, 2000);
+ </script>
+ </head>
+ <body>
+
+ <h2>Testing animation: none</h2>
+
+ <p>
+ After 2 seconds only the blue rectangles should be
+ animating.
+ Any resulting animation
+ that involves rotation or fading means that this test has FAILED.</p>
+
+ <div id="box1">
+ This rectangle starts with an animation. After 2 seconds a timer
+ will set the animation-name on the element to '' (the empty string).
+ The CSS rule should cause the animation to continue.
+ </div>
+
+ <div id="box2">
+ This rectangle starts with an animation. After 2 seconds a timer
+ will set the animation-name on the element to 'none' (as an identifier).
+ This should cause the animation to stop.
+ </div>
+
+ <div id="box3">
+ This rectangle starts with an animation. After 2 seconds a timer
+ will set the animation-name on the element to 'none' (as a string).
+ This should cause the animation to stop.
+ </div>
+
+ <div id="box4">
+ This rectangle starts with an animation, but animation-name is
+ set to 'none' (as an identifier). No animation should run.
+ </div>
+
+ <div id="box5">
+ This rectangle starts with an animation, but animation-name is
+ set to 'none' (as a string). No animation should run.
+ </div>
+
+ <div id="box6">
+ This rectangle starts with two animations. After 2 seconds a timer
+ will set the animation-name on the fade to 'none'. The other
+ animation (horizontal) should continue.
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/WebCore/manual-tests/applet-finish-parsing-children.html b/WebCore/manual-tests/applet-finish-parsing-children.html
new file mode 100644
index 0000000..842fd85
--- /dev/null
+++ b/WebCore/manual-tests/applet-finish-parsing-children.html
@@ -0,0 +1,11 @@
+<p>
+ Test for <i><a href="rdar://problem/5816522">Bug 5816522</a> REGRESSION (r30111-30112): Tahoe web cam website has some text in Chinese or japanese</i>.
+</p>
+<p>
+ You should see the word PASS below.
+</p>
+<applet codebase="resources" code="DrawMessage.class" width=534 height=50>
+<param name=text value="FAIL">
+<script src="data:text/javascript,document.body.offsetTop;"/>
+<param name=text value="PASS">
+</applet>
diff --git a/WebCore/manual-tests/array-out-of-memory.html b/WebCore/manual-tests/array-out-of-memory.html
new file mode 100644
index 0000000..486e200
--- /dev/null
+++ b/WebCore/manual-tests/array-out-of-memory.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script>
+
+function runArrayOOMTest() {
+ document.write("<p>Starting test...</p>");
+
+ // The index 'target' is the location in the array we expect to fault on access, should the size calculation of the realloc of the vector be allowed
+ // to overflow. The vector needs to be ((target + 1) * sizeof(JSValue*)) bytes long to hold 'target', or approximately 2/3 UINT32_MAX. Upon growing
+ // the array an additional 50% capacity will be allocated, plus the storage object header, taking the size of the allocation over UINT32_MAX.
+ var target = Math.floor(0xFFFFFFFF / 6);
+ // In order to force arr[target] to be stored in the vector, rather than the sparse map, we need ensure the vector is sufficiently densely populated.
+ var populate = Math.floor(target / 8 + 1);
+
+ try {
+ var arr = new Array();
+ for (i=0; i < populate; ++i)
+ arr[i] = 0;
+ arr[target] = 0;
+ } catch(e) {
+ var expect_name = "Error";
+ var expect_message = "Out of memory";
+ if ((e.name == expect_name) && (e.message == expect_message))
+ document.write("<p>SUCCESS</p>");
+ else
+ document.write("<p>FAIL - Expected \"" + expect_name + "/" + expect_message + "\", got \"" + e.name + "/" + e.message + "\".</p>");
+
+ return;
+ }
+
+ document.write("<p>FAIL - Expected exception.</p>");
+}
+
+</script>
+</head>
+<body>
+<p>This test checks that Array objects fail gracefully (throw exception) when array length grows large.</p>
+<p>This test may run for over 20 seconds on a fast machine, and will consume hundereds of MB of memory.</p>
+<input type="button" onclick="runArrayOOMTest()" value="Start">
+</body>
+</html>
diff --git a/WebCore/manual-tests/canvas-mask-redraw.html b/WebCore/manual-tests/canvas-mask-redraw.html
new file mode 100644
index 0000000..f166b3a
--- /dev/null
+++ b/WebCore/manual-tests/canvas-mask-redraw.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Canvas Mask</title>
+ <style type="text/css" media="screen">
+ #canvas1 {
+ height: 300px;
+ width: 400px;
+ border: 1px solid black;
+ }
+
+ .masked {
+/* -webkit-transform: rotate(10deg);*/
+ -webkit-mask: -webkit-canvas(canvas1);
+ }
+ </style>
+ <script type="text/javascript" charset="utf-8">
+
+ var gPageWidth = 320;
+ var gPageHeight = 200;
+
+ function drawPageShadow(shadowWidth)
+ {
+ var ctx = document.getCSSCanvasContext('2d', 'canvas1', gPageWidth, gPageHeight);
+ ctx.clearRect (0, 0, gPageWidth, gPageHeight);
+
+ var gradient = ctx.createLinearGradient(0, 0, shadowWidth, 0);
+ gradient.addColorStop(0, 'rgba(0,0,0,1)');
+ gradient.addColorStop(1, 'rgba(0,0,0,0)');
+ ctx.fillStyle = gradient;
+ ctx.fillRect (0, 0, shadowWidth, gPageHeight);
+ }
+
+ function redrawCanvas(event)
+ {
+ drawPageShadow(event.pageX);
+ }
+
+ function onPageLoad()
+ {
+ drawPageShadow(640);
+ }
+
+ window.addEventListener('load', onPageLoad, false);
+
+ </script>
+</head>
+<body>
+
+ <p>Hovering over the image or text should cause the element to be redrawn with a new mask</p>
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=19954">https://bugs.webkit.org/show_bug.cgi?id=19954</a>
+ <h2>Image with mask</h2>
+ <img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="320" height="200" alt="Clown Fish" class="masked"
+ onmousemove="redrawCanvas(event)">
+
+ <h2>Div with mask</h2>
+ <div class="masked" style="width: 640px" onmousemove="redrawCanvas(event)">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </div>
+
+</body>
+</html>
diff --git a/WebCore/manual-tests/computed-transform-value.html b/WebCore/manual-tests/computed-transform-value.html
new file mode 100644
index 0000000..5d7e622
--- /dev/null
+++ b/WebCore/manual-tests/computed-transform-value.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Get Computed Transform</title>
+ <style type="text/css" media="screen">
+ .box {
+ height: 200px;
+ width: 200px;
+ background-color: #00a0a0;
+ }
+ </style>
+ <script type="text/javascript" charset="utf-8">
+ function printTransform(event)
+ {
+ var box = event.target;
+ var computedTransform = window.getComputedStyle(box).webkitTransform;
+ document.getElementById("output").innerHTML = 'Computed transform is ' + computedTransform;
+ }
+
+ </script>
+</head>
+<body onclick="printTransform(event)">
+
+<h1>Testing transform computed style</h1>
+<p>All boxes are 200x200 pixels. When you click on an element, the computed transform style will be displayed below</p>
+<p id="output">Computed style for -webkit-transform displayed here</p>
+
+
+<div class="box" style="position: absolute; left: 100px; top: 200px; -webkit-transform: scale(1.5, 0.75)">
+ scale(1.5, 0.75)
+</div>
+
+<div class="box" style="position: absolute; left: 400px; top: 200px; -webkit-transform: rotate(30deg)">
+ rotate(30deg)
+</div>
+
+<div class="box" style="position: absolute; left: 100px; top: 400px; -webkit-transform: translate(50px, 80px)">
+ translate(50px, 80px)
+</div>
+
+<div class="box" style="position: absolute; left: 400px; top: 400px; -webkit-transform: translate(10px, 50px) scale(0.8) rotate(-10deg)">
+ translate(10px, 50px) scale(0.8) rotate(-10deg)
+</div>
+
+</body>
+</html>
diff --git a/WebCore/manual-tests/cursor-max-size.html b/WebCore/manual-tests/cursor-max-size.html
new file mode 100644
index 0000000..a112a70
--- /dev/null
+++ b/WebCore/manual-tests/cursor-max-size.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
+<html>
+<head>
+<style>
+html, body
+{
+ height: 100%; width: 100%; overflow: hidden; position: relative;
+ cursor: url("resources/apple.jpg"), /* bigger than 128px x 128px */
+ url("resources/helpCursor.tiff") -10 10, /* negative x in hotspot */
+ url("resources/helpCursor.tiff") 10 -10, /* negative y in hotspot */
+ url("resources/helpCursor.tiff") -10 -10, /* negative x and y in hotspot */
+ url("resources/helpCursor.tiff") 20 10, /* x hotspot outside image (image is 16px x 16px) */
+ url("resources/helpCursor.tiff") 10 20, /* y hotspot outside image (image is 16px x 16px) */
+ url("resources/helpCursor.tiff") 20 20, /* both x and y hotspot outside image (image is 16px x 16px) */
+ auto;
+}
+</style>
+</head>
+<body>
+ <p>
+ If there is a custom cursor, the test has failed. This tests that images larger than 128x128 cannot be used
+ as cursors and that hotspots cannot be outside of the cursors bounds box.
+ </p>
+</body>
+</html>
diff --git a/WebCore/manual-tests/cursor.html b/WebCore/manual-tests/cursor.html
index f4e0bc4..206cfe0 100644
--- a/WebCore/manual-tests/cursor.html
+++ b/WebCore/manual-tests/cursor.html
@@ -32,3 +32,7 @@
<div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: cell">cell</div>
<div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: copy">copy</div>
<div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: none">none</div>
+<div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: -webkit-zoom-in">zoom in</div>
+<div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: -webkit-zoom-out">zoom out</div>
+<div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: -webkit-grab">grab</div>
+<div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: -webkit-grabbing">grabbing</div>
diff --git a/WebCore/manual-tests/hash-ref.html b/WebCore/manual-tests/hash-ref.html
new file mode 100644
index 0000000..ed15fdb
--- /dev/null
+++ b/WebCore/manual-tests/hash-ref.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+<title>Manual Test for Bug 13067: Manually adding #hash to URL reloads entire page instead of jumping to #hash location in cached page</title>
+<style>
+li { padding-bottom: 12px; }
+</style>
+</head>
+<body>
+<h3>Manual Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=13067">Bug 13067: Manually adding #hash to URL reloads entire page instead of jumping to #hash location in cached page</a></h3>
+<div>
+<p>Instructions</p>
+<ol>
+<li>Click link to <a href="resources/hash-ref-test.html" target="_blank">open test page in new window</a>.</li>
+<li>Set hash ref to "#div5" on the URL and hit <kbd>Enter</kbd>.<br> This should take you to the top of the div5 box <em>without</em> reloading the page.</li>
+<li>Set hash ref to "#" on the URL and hit <kbd>Enter</kbd>.<br> This should take you to the top of the page <em>without</em> reloading.</li>
+<li>Set hash ref to "#div3" on the URL and hit <kbd>Enter</kbd>.<br> This should take you to the top of the div3 box <em>without</em> reloading.</li>
+<li>Hit <kbd>Enter</kbd> in the address bar without chainging the "#div3" hash.<br> This <em>should</em> reload the page.</li>
+<li>Set hash ref to "#" on the URL and hit <kbd>Enter</kbd>.<br> This should take you to the top of the page <em>without</em> reloading.</li>
+<li>Hit <kbd>Enter</kbd> in the address bar without chainging the "#" hash.<br> This <em>should</em> reload the page.</li>
+<li>Delete the hash ref on the URL and hit <kbd>Enter</kbd>.<br> This <em>should</em> reload the page.</li>
+<li>Go back in history 5 times to the first URL.<br> <em>None</em> of the pages should be reloaded.</li>
+<li>Go forward in history 5 times to the last URL.<br> <em>None</em> of the pages should be reloaded.</li>
+</div>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/console-alert-document-body.html b/WebCore/manual-tests/inspector-wrappers/console-alert-document-body.html
new file mode 100644
index 0000000..a177834
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/console-alert-document-body.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+<script src="inspector-wrappers-test-utils.js"></script>
+<script>
+window.alert = function(msg) {
+ msg.titleInfo = doAttack;
+ return msg;
+}
+</script>
+</head>
+<body>
+<script>instructions({console: true, trigger: "alert(document.body)"});</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/console-alert-object.html b/WebCore/manual-tests/inspector-wrappers/console-alert-object.html
new file mode 100644
index 0000000..5caab2b
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/console-alert-object.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+<script src="inspector-wrappers-test-utils.js"></script>
+<script>
+window.alert = function(msg) {
+ msg.__proto__.toString = doAttack;
+ return msg;
+}
+</script>
+</head>
+<body>
+<script>instructions({console: true, trigger: "alert({})"});</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/console-alert-this.html b/WebCore/manual-tests/inspector-wrappers/console-alert-this.html
new file mode 100644
index 0000000..4b80326
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/console-alert-this.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+<script src="inspector-wrappers-test-utils.js"></script>
+<script>
+window.alert = function(consolePanel) {
+ var _addMessage = consolePanel.addMessage;
+ consolePanel.addMessage = function() {
+ doAttack(consolePanel.addMessage);
+ consolePanel.addMessage = _addMessage;
+ }
+}
+</script>
+</head>
+<body>
+<script>instructions({console: true, trigger: "alert(this)"});</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/console-eval.html b/WebCore/manual-tests/inspector-wrappers/console-eval.html
new file mode 100644
index 0000000..9274cea
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/console-eval.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+<script src="inspector-wrappers-test-utils.js"></script>
+<script>
+window.eval = function() { doAttack(eval); }
+</script>
+</head>
+<body>
+<script>instructions({console: true, trigger: "something"});</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/console-str-alert-object.html b/WebCore/manual-tests/inspector-wrappers/console-str-alert-object.html
new file mode 100644
index 0000000..d146663
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/console-str-alert-object.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+<script src="inspector-wrappers-test-utils.js"></script>
+<script>
+window.str = window.expression = "alert({})";
+window.alert = function(msg) {
+ msg.__proto__.toString = doAttack;
+ return msg;
+}
+</script>
+</head>
+<body>
+<script>instructions({console: true, trigger: "something"});</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/console-str-getter.html b/WebCore/manual-tests/inspector-wrappers/console-str-getter.html
new file mode 100644
index 0000000..31f8907
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/console-str-getter.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+<script src="inspector-wrappers-test-utils.js"></script>
+<script>
+window.__defineGetter__("str", doAttack);
+window.__defineGetter__("expression", doAttack);
+</script>
+</head>
+<body>
+<script>instructions({console: true, trigger: "something"});</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/inspector-evaluate.html b/WebCore/manual-tests/inspector-wrappers/inspector-evaluate.html
new file mode 100644
index 0000000..cc00c3b
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/inspector-evaluate.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+<script src="inspector-wrappers-test-utils.js"></script>
+<script>
+document.evaluate = doAttack;
+</script>
+</head>
+<body>
+<script>instructions({trigger: "Type something into the search box"});</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/inspector-hasAttributes.html b/WebCore/manual-tests/inspector-wrappers/inspector-hasAttributes.html
new file mode 100644
index 0000000..1fdf51a
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/inspector-hasAttributes.html
@@ -0,0 +1,18 @@
+<html>
+<head>
+<script src="inspector-wrappers-test-utils.js"></script>
+</head>
+<body>
+<script>instructions({trigger: "Collapse and expand the &lt;body/&gt; tag"});</script>
+<script>
+ _hasAttributes = document.body.hasAttributes;
+ attackfunc = function() {
+ try { doAttack(); } catch(ex) { }
+ return _hasAttributes.call(this);
+ }
+ document.body.firstChild.hasAttributes = attackfunc;
+ document.body.hasAttributes = attackfunc;
+ document.body.parentNode.hasAttributes = attackfunc;
+</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/inspector-treeElementIdentifier.html b/WebCore/manual-tests/inspector-wrappers/inspector-treeElementIdentifier.html
new file mode 100644
index 0000000..288edc7
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/inspector-treeElementIdentifier.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+<script src="inspector-wrappers-test-utils.js"></script>
+</head>
+<body>
+<script>
+ document.body.__defineGetter__("__treeElementIdentifier", function() {
+ try { doAttack(); } catch(ex) { }
+ return this.___treeElementIdentifier;
+ });
+ document.body.__defineSetter__("__treeElementIdentifier", function(val) {
+ this.___treeElementIdentifier = val;
+ });
+</script>
+<script>instructions({trigger: "Collapse and expand the &lt;body/&gt; tag"});</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector-wrappers/inspector-wrappers-test-utils.js b/WebCore/manual-tests/inspector-wrappers/inspector-wrappers-test-utils.js
new file mode 100644
index 0000000..2666167
--- /dev/null
+++ b/WebCore/manual-tests/inspector-wrappers/inspector-wrappers-test-utils.js
@@ -0,0 +1,46 @@
+var truealert = window.alert; // we overwrite window.alert sometimes
+
+// Walk up the caller chain and try to find a reference to the Inspector's window
+function doAttack() {
+ var obj = doAttack.caller;
+ for (var i = 0;
+ i < 1000 && (obj.arguments.length == 0 || !obj.arguments[0].target);
+ i++) {
+ obj = obj.caller;
+ }
+ if (i == 1000) return;
+ var win = obj.arguments[0].target.ownerDocument.defaultView;
+ xhr(win);
+}
+
+function xhr(win) {
+ var xhr = new win.XMLHttpRequest();
+ var url = prompt("Test failed. To prove it, I'm going " +
+ "to make a cross-domain XMLHttpRequest. Where " +
+ "would you like me to send it?\n\nHint: You can " +
+ "also try a file:// URL.", "http://www.example.com/");
+ xhr.open("GET", url, false);
+ xhr.send();
+ truealert("Result:\n\n" + xhr.responseText);
+}
+
+function instructions(params) {
+ var str = "<p>This test tries to make a cross-domain XMLHttpRequest to " +
+ "check whether JavaScript object wrappers are working (bug 16837, bug 16011).</p>" +
+ "<p>View this page from an http:// URL to ensure that it's in a different " +
+ "origin from the Inspector.</p>" +
+ "<p>Instructions:</p>" +
+ "<ol>" +
+ "<li>Right click the box" +
+ "<img id=logo src='../resources/webkit-background.png'" +
+ "style='border: 1px solid black; display: block; margin: 1em;'>" +
+ "<li>Choose \"Inspect Element\" from the context menu";
+ if (params.console) {
+ str += "<li>Select the Console";
+ str += "<li>Type " + params.trigger + " into the console and hit Enter";
+ } else {
+ str += "<li>" + params.trigger;
+ }
+ str += "<li>If the test failed, a prompt will appear.</ol>";
+ document.write(str);
+}
diff --git a/WebCore/manual-tests/inspector/command-line-api.html b/WebCore/manual-tests/inspector/command-line-api.html
new file mode 100644
index 0000000..8b9a153
--- /dev/null
+++ b/WebCore/manual-tests/inspector/command-line-api.html
@@ -0,0 +1,6 @@
+<script type="text/javascript" charset="utf-8">
+ var $ = function() { console.log("OK") };
+</script>
+
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=20385">Bug 20385: Firebug command line extensions interfere with existing objects</a>.</p>
+<p>To test, execute "$()" in the Inspector's Console. Also trying setting $.</p>
diff --git a/WebCore/manual-tests/inspector/console-assert.html b/WebCore/manual-tests/inspector/console-assert.html
new file mode 100644
index 0000000..df2c4cc
--- /dev/null
+++ b/WebCore/manual-tests/inspector/console-assert.html
@@ -0,0 +1,37 @@
+<script>
+ function createClickHandler(result, str) {
+ return function() {
+ console.assert(result, "%s", str);
+ }
+ }
+
+ function load() {
+ var tests = [
+ "",
+ "false",
+ "null",
+ "document.body",
+ "!document.body",
+ "true"
+ ];
+
+ for (var i = 0; i < tests.length; ++i) {
+ var test = tests[i];
+ var result;
+ try {
+ result = eval(test);
+ } catch(e) {
+ result = false;
+ }
+ var button = document.createElement("button");
+ button.innerText = "console.assert(" + test + "): should" + (result ? " not" : "") + " assert";
+ button.onclick = createClickHandler(result, test);
+ var p = document.createElement("p");
+ p.appendChild(button);
+ document.body.appendChild(p);
+ }
+ }
+</script>
+<body onload="load()">
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=19134">Bug 19134: Inspector should support console.assert</a>.</p>
+<p>To test, click the buttons below and look at the Inspector's Console.</p>
diff --git a/WebCore/manual-tests/inspector/console-call-line-numbers.html b/WebCore/manual-tests/inspector/console-call-line-numbers.html
new file mode 100644
index 0000000..ae831c5
--- /dev/null
+++ b/WebCore/manual-tests/inspector/console-call-line-numbers.html
@@ -0,0 +1,14 @@
+<script>
+ console.info("Test console.info");
+ console.log("Test console.log");
+ console.warn("Test console.warn");
+ console.error("Test console.error");
+ console.time("Test console.time");
+ console.timeEnd("Test console.time");
+ console.count("Test console.count");
+ console.assert(false, "Test console.assert");
+</script>
+<script src="resources/script-console-calls.js"></script>
+<body>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=17234">Bug 17234: Inspector should link console.{log,warn,info,error} back to call site</a>.</p>
+<p>To test, open the Inspector's Console and verify that all console messages have correct resource URLs and line numbers. Also verify that errors and warnings show up inline as bubbles in the resource source view.</p>
diff --git a/WebCore/manual-tests/inspector/console-log-formatting.html b/WebCore/manual-tests/inspector/console-log-formatting.html
new file mode 100644
index 0000000..d59ebc9
--- /dev/null
+++ b/WebCore/manual-tests/inspector/console-log-formatting.html
@@ -0,0 +1,68 @@
+<script>
+ var s = "this is a string";
+ var i = 5;
+ var ni = -5;
+ var f = 3.14159;
+ var o = { prop1: 1, prop2: 2 };
+ var specifiers = {
+ s: "string",
+ i: "integer",
+ d: "integer",
+ f: "float",
+ "0.3f": "float with precision",
+ o: "object",
+ z: "unsupported",
+ };
+
+ function test(args) {
+ var functions = ["log", "debug"];
+ for (var i = 0; i < functions.length; ++i) {
+ console.info("console." + functions[i] + "(%s)", args);
+ try {
+ eval("console." + functions[i] + "(" + args + ")");
+ } catch (e) {
+ console.error(e);
+ }
+ }
+ }
+
+ function testAllSpecifiers(value, description) {
+ for (var specifier in specifiers)
+ test("'Format " + description + " as " + specifiers[specifier] + ": %" + specifier + "', " + value + "");
+ }
+
+ function runTests() {
+ var values = [
+ { value: "window.noSuchVariable", description: "undefined" },
+ { value: "s", description: "string" },
+ { value: "i", description: "positive integer" },
+ { value: "ni", description: "negative integer" },
+ { value: "f", description: "float" },
+ { value: "o", description: "object" },
+ { value: "document.body", description: "body" },
+ { value: "/test/", description: "RegExp" },
+ { value: "true", description: "boolean" },
+ { value: "null", description: "null" },
+ ];
+
+ for (var i = 0; i < values.length; ++i)
+ testAllSpecifiers(values[i].value, values[i].description);
+
+ var tests = [
+ "'simple test'",
+ "'multiple', 'parameters', 'should', 'be', 'concatenated'",
+ "document",
+ "document, document.body, window, window.location",
+ "document, document.body, 'hello', 'goodbye', window.location",
+ "'Format string with fewer specifiers than parameters: %o %i %f', document.body, i, f, ni, o",
+ "'Format string with more specifiers than parameters: %o %i %f %i %o', document.body, i, f",
+ ];
+
+ for (var i = 0; i < tests.length; ++i)
+ test(tests[i]);
+
+ }
+</script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=17228">Bug 17228: console.{log,warn,info,error} should support format strings, variable arguments</a>.</p>
+<p>Open the Inspector (right-click and choose "Inspect Element"), then click the "Run Tests" button.</p>
+<button onclick="runTests()">Run Tests</button>
diff --git a/WebCore/manual-tests/inspector/console-time.html b/WebCore/manual-tests/inspector/console-time.html
new file mode 100644
index 0000000..6c24373
--- /dev/null
+++ b/WebCore/manual-tests/inspector/console-time.html
@@ -0,0 +1,33 @@
+<script>
+function test() {
+ // Test 1: call timeEnd before time
+ console.log(">>>console.timeEnd(\"1\")");
+ console.timeEnd("1");
+ // Test 2: call time two times before timeEnd
+ console.log(">>>console.time(\"2\")");
+ console.time("2");
+ setTimeout(function() {
+ console.log(">>>console.time(\"2\")");
+ console.time("2");
+ console.log(">>>console.timeEnd(\"2\")");
+ console.timeEnd("2");
+ console.log("2: If it says ~1000ms the first time is not overwritten.");
+ }, 1000);
+ // Test 3: call timeEnd two times
+ console.log(">>>console.time(\"3\")");
+ console.time("3");
+ console.log(">>>console.timeEnd(\"3\")");
+ console.timeEnd("3");
+ console.log(">>>console.timeEnd(\"3\")");
+ console.timeEnd("3");
+ // Test 4: call time/timeEnd without title parameter
+ console.log(">>>console.time()");
+ console.time();
+ console.log(">>>console.timeEnd()");
+ console.timeEnd();
+};
+
+</script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=19159">Bug 19159: Inspector should support console.time/console.timeEnd</a>.</p>
+<p>Open the Inspector (right-click and choose "Inspect Element"), then click the "Run Tests" button.</p>
+<button onclick="test()">Run Tests</button> \ No newline at end of file
diff --git a/WebCore/manual-tests/inspector/debugger-execution-while-paused.html b/WebCore/manual-tests/inspector/debugger-execution-while-paused.html
new file mode 100644
index 0000000..67446d4
--- /dev/null
+++ b/WebCore/manual-tests/inspector/debugger-execution-while-paused.html
@@ -0,0 +1,15 @@
+<script>
+function stepOne()
+{
+ var x = 1;
+}
+
+function stepTwo()
+{
+ alert("Test failed. The second button event still fired.");
+}
+</script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=20284">Bug 20284: JavaScript can be executed even though debugger is running and at a break point</a>.</p>
+<p>To test, open the Inspector and start a debugging session. Set a break point inside the stepOne() function. Now click the Step One button in the page. The breakpoint should be hit. While paused at the breakpoint click on the Step Two button. You should not see an alert dialog.</p>
+<button onclick="stepOne()">Step One</button><br><br>
+<button onclick="stepTwo()">Step Two</button><br><br>
diff --git a/WebCore/manual-tests/inspector/debugger-pause-during-load.html b/WebCore/manual-tests/inspector/debugger-pause-during-load.html
new file mode 100644
index 0000000..631cafc
--- /dev/null
+++ b/WebCore/manual-tests/inspector/debugger-pause-during-load.html
@@ -0,0 +1,5 @@
+<script>
+debugger; // You should see this code and execution line in the Scripts panel.
+</script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=19053">Bug 19053: Source code not visible when script is paused before onload fires</a>.</p>
+<p>To test, open the Inspector and start a debugging session. You should see this file and execution line in the Scripts panel.</p>
diff --git a/WebCore/manual-tests/inspector/debugger-pause-on-else-statements.html b/WebCore/manual-tests/inspector/debugger-pause-on-else-statements.html
new file mode 100644
index 0000000..424fb7e
--- /dev/null
+++ b/WebCore/manual-tests/inspector/debugger-pause-on-else-statements.html
@@ -0,0 +1,18 @@
+<script>
+function test()
+{
+ debugger;
+}
+
+if (false)
+ debugger; // This should not be hit.
+else
+ test();
+</script>
+
+Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=21944">Bug 21944: Can't set a breakpoint on the statement after a single line "else"</a>.
+<br><br>
+Start a debugging session in the Web Inspector and open this file. When the debugger breaks, select the (program) node
+in the call stack, you should see the execution line on the call to test().
+<br><br>
+Also set a breakpoint on the call to test(), and reload. It should break before the test() function is called.
diff --git a/WebCore/manual-tests/inspector/debugger-pause-on-for-in-statements.html b/WebCore/manual-tests/inspector/debugger-pause-on-for-in-statements.html
new file mode 100644
index 0000000..c0c24e0
--- /dev/null
+++ b/WebCore/manual-tests/inspector/debugger-pause-on-for-in-statements.html
@@ -0,0 +1,18 @@
+<script>
+function test()
+{
+ debugger;
+}
+
+var object = { test: 1 };
+
+for (var property in object)
+ test();
+</script>
+
+Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=22004">Bug 22004: Can't set a breakpoint on the statement after a single line "for"</a>.
+<br><br>
+Start a debugging session in the Web Inspector and open this file. When the debugger breaks, select the (program) node
+in the call stack, you should see the execution line on the call to test().
+<br><br>
+Also set a breakpoint on the call to test(), and reload. It should break before the test() function is called.
diff --git a/WebCore/manual-tests/inspector/debugger-pause-on-for-statements.html b/WebCore/manual-tests/inspector/debugger-pause-on-for-statements.html
new file mode 100644
index 0000000..43a63e2
--- /dev/null
+++ b/WebCore/manual-tests/inspector/debugger-pause-on-for-statements.html
@@ -0,0 +1,16 @@
+<script>
+function test()
+{
+ debugger;
+}
+
+for (var i = 0; i < 1; ++i)
+ test();
+</script>
+
+Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=22004">Bug 22004: Can't set a breakpoint on the statement after a single line "for"</a>.
+<br><br>
+Start a debugging session in the Web Inspector and open this file. When the debugger breaks, select the (program) node
+in the call stack, you should see the execution line on the call to test().
+<br><br>
+Also set a breakpoint on the call to test(), and reload. It should break before the test() function is called.
diff --git a/WebCore/manual-tests/inspector/debugger-status-bar-buttons-state.html b/WebCore/manual-tests/inspector/debugger-status-bar-buttons-state.html
new file mode 100644
index 0000000..31ca3b1
--- /dev/null
+++ b/WebCore/manual-tests/inspector/debugger-status-bar-buttons-state.html
@@ -0,0 +1,2 @@
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=19173">Bug 19173: Tool tips for Inspector debugger status bar buttons are wrong/missing</a>.</p>
+<p>To test, open the Inspector and go to the Scripts panel. Check that the tool tips for the debugger's two status bar buttons make sense when each button is toggled on and off.</p>
diff --git a/WebCore/manual-tests/inspector/display-sql-null.html b/WebCore/manual-tests/inspector/display-sql-null.html
new file mode 100644
index 0000000..1d1403b
--- /dev/null
+++ b/WebCore/manual-tests/inspector/display-sql-null.html
@@ -0,0 +1,21 @@
+<script>
+ try {
+ var db = openDatabase("InspectorTest", "0.1", "Database for Inspector tests", 200000);
+ db.transaction(function(tx) {
+ tx.executeSql("CREATE TABLE DisplaySQLNull (test TEXT)", [], function(tx) {
+ tx.executeSql("INSERT INTO DisplaySQLNull (test) VALUES (NULL)");
+ })
+ });
+ } catch (e) {
+ }
+</script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=18837">Bug 18837: Database panel fails to display tables if any value is NULL</a>.</p>
+<p>To test:</p>
+<ol>
+ <li>Open the Inspector</li>
+ <li>Go to the Databases panel</li>
+ <li>Click on the <code>DisplaySQLNull</code> table inside the <code>InspectorTest</code> database</li>
+</ol>
+<p>If the contents of the table appear (a single row with the value
+"<code>null</code>" in the <code>test</code> column), you have passed the
+test.</p>
diff --git a/WebCore/manual-tests/inspector/display-sql-transaction-error.html b/WebCore/manual-tests/inspector/display-sql-transaction-error.html
new file mode 100644
index 0000000..da2d310
--- /dev/null
+++ b/WebCore/manual-tests/inspector/display-sql-transaction-error.html
@@ -0,0 +1,24 @@
+<script>
+ try {
+ var db = openDatabase("InspectorTest", "0.1", "Database for Inspector tests", 200000);
+ db.transaction(function(tx) {
+ tx.executeSql("CREATE TABLE DisplaySQLTransactionError (test TEXT)", []);
+ });
+ } catch (e) {
+ }
+</script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=19438">Bug 19438: Transaction errors are never displayed in database query view</a>.</p>
+<p>To test:</p>
+<ol>
+ <li>Open the Inspector</li>
+ <li>Go to the Databases panel</li>
+ <li>Click on the <code>InspectorTest</code> database</li>
+ <li>Enter the following text on the query input line: <code>INSERT INTO DisplaySQLTransactionError (test) VALUES (NULL)</code></li>
+</ol>
+<p>If the line of text you entered remains and an error line is output below
+it, you have passed the test.</p>
+<p>If the line of text you entered disappears and no error line is output, you
+have failed the test.</p>
+<p>If the line of text you entered remains and no error line is output, then
+the test has become invalid and needs to be modified to cause the error
+callback passed by the Inspector to <code>db.transaction</code> to be called.</p>
diff --git a/WebCore/manual-tests/inspector/dom-mutation.html b/WebCore/manual-tests/inspector/dom-mutation.html
new file mode 100644
index 0000000..33e8333
--- /dev/null
+++ b/WebCore/manual-tests/inspector/dom-mutation.html
@@ -0,0 +1,31 @@
+<script>
+function test1() {
+ document.getElementById("test").src = "resources/mutate-frame.html";
+}
+
+function test2() {
+ document.getElementById("test").src = "resources/mutate-frame-2.html";
+}
+
+var count = 1;
+function run() {
+ var container = document.getElementById("test2");
+ var div = document.createElement("div");
+ div.textContent = "Testing " + (count++);
+ container.appendChild(div);
+ if (count > 10)
+ container.removeChild(container.firstChild);
+}
+
+setInterval(run, 1000);
+</script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=6590">Bug 6590: Web Inspector shows stale DOM tree if the DOM changes after the inspector has loaded</a>.</p>
+<p>To test, open the Inspector and watch the DOM change to match the page. Clicking the buttons will navigate the subframe, and the all the subframe child nodes should change.</p>
+<div style="clear: both">
+<button onclick="test1()">Test Frame 1</button>
+<button onclick="test2()">Test Frame 2</button>
+</div>
+<div style="float: left">
+<iframe id="test" src="resources/mutate-frame.html" width="200" height="300"></iframe>
+</div>
+<div style="float: left; margin-left: 10px;" id="test2"></div>
diff --git a/WebCore/manual-tests/inspector/error-warning-count.html b/WebCore/manual-tests/inspector/error-warning-count.html
new file mode 100644
index 0000000..9f6b9c2
--- /dev/null
+++ b/WebCore/manual-tests/inspector/error-warning-count.html
@@ -0,0 +1,60 @@
+<script>
+ function clickHandler(errors, warnings)
+ {
+ return function()
+ {
+ for (var i = 0; i < errors; ++i)
+ console.error("Error " + (i + 1));
+ for (var i = 0; i < warnings; ++i)
+ console.warn("Warning " + (i + 1));
+ }
+ }
+
+ function loaded()
+ {
+ var tests = [
+ { errors: 0, warnings: 0 },
+ { errors: 1, warnings: 0 },
+ { errors: 2, warnings: 0 },
+ { errors: 0, warnings: 1 },
+ { errors: 0, warnings: 2 },
+ { errors: 1, warnings: 1 },
+ { errors: 1, warnings: 2 },
+ { errors: 2, warnings: 1 },
+ { errors: 2, warnings: 2 },
+ { errors: 100, warnings: 100 },
+ ];
+
+ for (var i in tests) {
+ var test = tests[i];
+
+ var button = document.createElement("button");
+ var content = "";
+ if (!test.errors && !test.warnings)
+ content = "(nothing)";
+ else {
+ if (test.errors > 0)
+ content += test.errors + " error" + (test.errors != 1 ? "s" : "");
+ if (test.warnings > 0) {
+ if (content.length)
+ content += ", ";
+ content += test.warnings + " warning" + (test.warnings != 1 ? "s" : "")
+ }
+ }
+ button.innerText = content;
+ button.onclick = clickHandler(test.errors, test.warnings);
+ var p = document.createElement("p");
+ p.appendChild(button);
+ document.body.appendChild(p);
+ }
+ }
+</script>
+<body onload="loaded()">
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=18650">Bug 18650:
+Errors/warnings in Inspector should be visible outside of Resources</a>.</p>
+<p>To test, open the Inspector and click one of the buttons below. You should
+see an error and/or warning count in the Inspector's status bar. Clicking on
+the error/warning count should open the Console. Hovering over the
+error/warning count should show you a tooltip that matches the text in the
+button you clicked.</p>
+<p>Note: You must reload the page between each button press.</p>
diff --git a/WebCore/manual-tests/inspector/errors-with-space in-url.html b/WebCore/manual-tests/inspector/errors-with-space in-url.html
new file mode 100644
index 0000000..07e8ee0
--- /dev/null
+++ b/WebCore/manual-tests/inspector/errors-with-space in-url.html
@@ -0,0 +1,7 @@
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=19065">Bug 19065:
+Resources with a space in their URL don't get error/warning bubbles</a>.</p>
+<p>To test, open the Inspector and refresh this page. There should be a red
+bubble with the number "1" in it next to the main resource in the Resources
+panel. Clicking the button below should change the "1" to a "2".</p>
+<p></p></p>
+<button onclick="console.error('hi')">click me</button>
diff --git a/WebCore/manual-tests/inspector/escape-links.html b/WebCore/manual-tests/inspector/escape-links.html
new file mode 100644
index 0000000..5c5f6c0
--- /dev/null
+++ b/WebCore/manual-tests/inspector/escape-links.html
@@ -0,0 +1 @@
+<html>
diff --git a/WebCore/manual-tests/inspector/forzen-ui-while-paused.html b/WebCore/manual-tests/inspector/forzen-ui-while-paused.html
new file mode 100644
index 0000000..b8d50b0
--- /dev/null
+++ b/WebCore/manual-tests/inspector/forzen-ui-while-paused.html
@@ -0,0 +1,11 @@
+<script>
+function foo() {
+ var timeout = setTimeout(function() { alert("This should not happen. If you do see this alert, then timers on the page are firing while paused!") }, 0);
+ debugger;
+ clearTimeout(timeout);
+}
+
+setTimeout(foo, 100);
+</script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=20042">Bug 20042: UI frozen when the debugger is paused</a>.</p>
+<p>Open the inspector and start debugging in the Scripts panel. While paused, try to open the Console. The Console should animate open fully.</p>
diff --git a/WebCore/manual-tests/inspector/highlight-source-line.html b/WebCore/manual-tests/inspector/highlight-source-line.html
new file mode 100644
index 0000000..2520485
--- /dev/null
+++ b/WebCore/manual-tests/inspector/highlight-source-line.html
@@ -0,0 +1,4 @@
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=19204">Bug 19204: Inspector should highlight source lines when following links to them</a>.</p>
+<p>To test, open the Inspector and reload this page. Then open the Inspector's Console and click the link for the markup error. You should see the line containing the error briefly highlighted in the source view.</p>
+
+<p>This line contains a markup error</i>.</p>
diff --git a/WebCore/manual-tests/inspector/multiple-console-messages.html b/WebCore/manual-tests/inspector/multiple-console-messages.html
new file mode 100644
index 0000000..842e6aa
--- /dev/null
+++ b/WebCore/manual-tests/inspector/multiple-console-messages.html
@@ -0,0 +1,86 @@
+<html>
+<head>
+ <script>
+ function generateErrors(number)
+ {
+ for (var i = 0; i < number; ++i)
+ console.error("This is an error.");
+ }
+
+ function generateLogs(number)
+ {
+ for (var i = 0; i < number; ++i)
+ console.log("This is a log.");
+ }
+
+ function generateWarnings(number)
+ {
+ for (var i = 0; i < number; ++i)
+ console.warn("This is a warning.");
+ }
+
+ function generateInfos(number)
+ {
+ for (var i = 0; i < number; ++i)
+ console.info("This is an info.");
+ }
+
+ function startTest()
+ {
+ generateErrors(3);
+ generateLogs(3);
+ generateWarnings(3);
+
+ console.group();
+
+ generateErrors(2);
+ generateLogs(1);
+ generateErrors(2);
+
+ generateLogs(2);
+ generateWarnings(1);
+ generateLogs(2);
+
+ generateWarnings(2);
+ generateErrors(1);
+ generateWarnings(2);
+
+ console.groupEnd();
+
+ generateErrors(1);
+ console.group();
+ generateErrors(1);
+ console.group();
+ generateErrors(1);
+ console.groupEnd();
+ generateErrors(1);
+ console.groupEnd();
+ generateErrors(1);
+
+ console.warn("Same message, different level");
+ console.error("Same message, different level");
+ console.log("Same message, different level");
+ console.info("Same message, different level");
+
+ console.log("Variadic message: %s", "message 1");
+ console.log("Variadic message: %s", "message 2");
+ console.log("Variadic message: %s", "message 3");
+ console.log("Variadic message: %s", "message 4");
+
+ console.warn("Warning and error on same line."); console.error("Warning and error on same line."); console.warn("Warning and error on same line."); console.error("Warning and error on same line.");
+
+ }
+ </script>
+</head>
+<body onload="startTest()">
+This test generates warnings, errors, and logs to test the grouping of repeated
+messages in the Web Inspector. To check this test open the Web Inspector and see
+that there are never any repeated messages that don't have a number next to them.
+<br>
+<br>
+<input type="button" onclick="generateErrors(1)" value="Put Error in Console"></input>
+<br>
+<input type="button" onclick="generateLogs(1)" value="Put Log in Console"></input>
+<br>
+<input type="button" onclick="generateWarnings(1)" value="Put Warning in Console"></input>
+</body>
diff --git a/WebCore/manual-tests/inspector/profiler-test-call.html b/WebCore/manual-tests/inspector/profiler-test-call.html
new file mode 100644
index 0000000..572a2e9
--- /dev/null
+++ b/WebCore/manual-tests/inspector/profiler-test-call.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+<script src="resources/profiler-test-JS-resources.js"></script>
+<script>
+console.profile("Using the call() method");
+function startTest()
+{
+ var myObject = new fakeObject(1, 2);
+ endTest();
+}
+
+function fakeObject (x, y)
+{
+ this.x = x;
+ fakeInteriorFunction.call(this, y);
+}
+
+function fakeInteriorFunction(y)
+{
+ this.y = y;
+}
+
+</script>
+</head>
+
+<body onload="startTest()">
+This page's JavaScript has a call to call() in it.
+<br>
+<br>
+To use this test, load it in the browser then load the WebInspector and look at
+the profile. In the profile there should be a call to fakeObject() with call() as
+its child and a fakeInteriorFunction() as call()'s child.
+<div id="output"></div>
+</body>
+</html>
diff --git a/WebCore/manual-tests/inspector/profiler-test-many-calls-in-the-same-scope.html b/WebCore/manual-tests/inspector/profiler-test-many-calls-in-the-same-scope.html
new file mode 100644
index 0000000..da5be42
--- /dev/null
+++ b/WebCore/manual-tests/inspector/profiler-test-many-calls-in-the-same-scope.html
@@ -0,0 +1,42 @@
+<html>
+<head>
+<script src="resources/profiler-test-JS-resources.js"></script>
+<script>
+console.profile("Many Calls In The Same Scope");
+function startTest()
+{
+ insertNewText();
+ insertGivenText("This was a triumph.");
+ arrayOperatorFunction(7);
+ intermediaryFunction();
+ anonymousFunction();
+ end()
+ endT();
+ endT();
+ endTest();
+}
+
+function end()
+{
+ var x = 0;
+}
+
+function endT()
+{
+ var y = 1;
+}
+
+</script>
+</head>
+
+<body onload="startTest()">
+This page's JavaScript has many function calls in the same scope.
+<br>
+<br>
+To use this test, load it in the browser then load the WebInspector and look at
+the profile. In the profile many functions should be the children of startTest.
+Use the sorting capabilites to make sure the similarly named functions are sorted
+correctly.
+<div id="output"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/WebCore/manual-tests/inspector/resources/mutate-frame-2.html b/WebCore/manual-tests/inspector/resources/mutate-frame-2.html
new file mode 100644
index 0000000..9d413b9
--- /dev/null
+++ b/WebCore/manual-tests/inspector/resources/mutate-frame-2.html
@@ -0,0 +1,12 @@
+<script>
+var count = 1;
+function run() {
+ var div = document.createElement("div");
+ div.textContent = "Testing " + (count++);
+ document.body.appendChild(div);
+ if (count > 10)
+ document.body.removeChild(document.body.firstChild);
+}
+
+setInterval(run, 1000);
+</script>
diff --git a/WebCore/manual-tests/inspector/resources/mutate-frame.html b/WebCore/manual-tests/inspector/resources/mutate-frame.html
new file mode 100644
index 0000000..08fc656
--- /dev/null
+++ b/WebCore/manual-tests/inspector/resources/mutate-frame.html
@@ -0,0 +1,10 @@
+<script>
+var count = 1;
+function run() {
+ var div = document.createElement("div");
+ div.textContent = "Testing " + (count++);
+ document.body.appendChild(div);
+}
+
+setInterval(run, 1000);
+</script>
diff --git a/WebCore/manual-tests/inspector/resources/script-console-calls.js b/WebCore/manual-tests/inspector/resources/script-console-calls.js
new file mode 100644
index 0000000..9c7bc35
--- /dev/null
+++ b/WebCore/manual-tests/inspector/resources/script-console-calls.js
@@ -0,0 +1,8 @@
+console.info("Test console.info");
+console.log("Test console.log");
+console.warn("Test console.warn");
+console.error("Test console.error");
+console.time("Test console.time");
+console.timeEnd("Test console.time");
+console.count("Test console.count");
+console.assert(false, "Test console.assert");
diff --git a/WebCore/manual-tests/inspector/resources/script-error.js b/WebCore/manual-tests/inspector/resources/script-error.js
new file mode 100644
index 0000000..c8be5ea
--- /dev/null
+++ b/WebCore/manual-tests/inspector/resources/script-error.js
@@ -0,0 +1,6 @@
+var test = document.body;
+this.will.be.an.error = 1;
+
+function test() {
+ return 42;
+}
diff --git a/WebCore/manual-tests/inspector/returnEvent-crash.html b/WebCore/manual-tests/inspector/returnEvent-crash.html
new file mode 100644
index 0000000..5dd1119
--- /dev/null
+++ b/WebCore/manual-tests/inspector/returnEvent-crash.html
@@ -0,0 +1,17 @@
+<script>
+ function test2() {
+ var y = 6;
+ y += 3;
+ return y;
+ }
+
+ function test() {
+ var x = 5;
+ eval("test2()");
+ x += 6;
+ return x;
+ }
+</script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=19038">Bug 19038: Crash in JavaScriptDebugServer::returnEvent when inspecting an attached Inspector</a>.</p>
+<p>To test, open and attach the Inspector's debugger, then click the button below. If you don't crash, you have passed the test.</p>
+<button onclick="test()">click me</button>
diff --git a/WebCore/manual-tests/inspector/styled-error-bubbles-in-scripts.html b/WebCore/manual-tests/inspector/styled-error-bubbles-in-scripts.html
new file mode 100644
index 0000000..0049cef
--- /dev/null
+++ b/WebCore/manual-tests/inspector/styled-error-bubbles-in-scripts.html
@@ -0,0 +1,6 @@
+<script src="resources/script-error.js"></script>
+<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=20345">Bug 19065:
+Error bubbles are clobbered when syntax highlighting JavaScript resources</a>.</p>
+<p>To test, open the Inspector. There should be a red bubble with the number "1"
+in it next to the the only script resource in the Resources panel. Clicking the
+resource should show syntax highlighted JavaScript with a red error bubble.</p>
diff --git a/WebCore/manual-tests/panScroll.html b/WebCore/manual-tests/panScroll.html
new file mode 100644
index 0000000..726755b
--- /dev/null
+++ b/WebCore/manual-tests/panScroll.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+<head>
+</head>
+<body>
+ <p><b>BUG ID:</b> <a href="https://bugs.webkit.org/show_bug.cgi?id=16424">Bugzilla Bug 16424</a> Enable auto-scroll in page by mouse middle click</p>
+
+ <p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b>
+ For each iframe : Middle-click within the iframe and then move your mouse.</p>
+
+ <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
+ For each iframe (except the 6th one which explicitly refuses scroll), you should see the scroll bars follow your moves and even reach the end of the page included in the iframe. You should also see an 4 arrow designed icon on the initial click location.
+ </p>
+
+ <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
+ The scroll doesn't follow the mouse moves or doesn't get activated (except the 6th one which explicitly refuses scroll).
+ </p>
+
+ <div style="height=2000px;width=2000px">
+ <iframe src="resources/big-page.html"></iframe>
+ <iframe src="resources/big-page.html" scrolling></iframe>
+ <iframe src="resources/big-page.html" scrolling=""></iframe>
+ <iframe src="resources/big-page.html" scrolling="auto"></iframe>
+ <iframe src="resources/big-page.html" scrolling="yes"></iframe>
+ <iframe src="resources/big-page.html" scrolling="no"></iframe>
+ <iframe src="resources/big-page.html" scrolling="bogus"></iframe>
+ <iframe src="resources/big-page.html" scrolling="1234"></iframe>
+ </div>
+
+ </body>
+ </html>
diff --git a/WebCore/manual-tests/post-multi-file-upload.html b/WebCore/manual-tests/post-multi-file-upload.html
new file mode 100644
index 0000000..18f3039
--- /dev/null
+++ b/WebCore/manual-tests/post-multi-file-upload.html
@@ -0,0 +1,35 @@
+<html>
+ <head>
+ <script type="text/javascript">
+ var submittedFiles = 0;
+
+ function log(message)
+ {
+ document.getElementById('console').appendChild(document.createTextNode(message + "\n"));
+ }
+
+ function verifyResults()
+ {
+ if (submittedFiles == 3) {
+ var frame = document.getElementById('fr');
+ frame.parentNode.removeChild(frame);
+ log("Test Passed");
+ } else
+ log("Test Failed");
+ }
+ </script>
+ </head>
+ <body onload="test()">
+ <p>
+ This tests that the multi-file upload control works correctly. This test and the resources/multiFileResources must be placed on a web server so the test can be run manually.<br>
+ Choose "testFile1.html" "testFile2.html" and "testFile3.html" and submit the form. <br>
+ You should see a "Test Passed" or a "Test Failed" message after submitting the form.<br>
+ </p>
+ <form method="post" enctype="multipart/form-data" action="resources/multiFileResources/post-echo-and-notify-done.cgi" id="myForm" target="targetFrame">
+ <input type="file" id="target" multiple name="multiFileInput"></input>
+ <input type="submit" value="Submit">
+ </form>
+ <iframe name="targetFrame" id="fr"></iframe>
+ <pre id='console'></pre>
+ </body>
+</html>
diff --git a/WebCore/manual-tests/qt/main.html b/WebCore/manual-tests/qt/main.html
new file mode 100644
index 0000000..48c103a
--- /dev/null
+++ b/WebCore/manual-tests/qt/main.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+<div>
+Plugin test within an iframe:
+</div>
+<div style="float:right;">
+<IFRAME SRC="qtplugin.html" FRAMEBORDER="0" width="100%" height="100%" ></IFRAME>
+ </div>
+</body>
+</html>
diff --git a/WebCore/manual-tests/qt/qtplugin.html b/WebCore/manual-tests/qt/qtplugin.html
new file mode 100644
index 0000000..b2dbf3c
--- /dev/null
+++ b/WebCore/manual-tests/qt/qtplugin.html
@@ -0,0 +1,17 @@
+<html>
+<body>
+Image:<br/>
+ <img src="http://labs.trolltech.com/skins/trolltech_labs/categories/internet.png" width="80" height="80"/>
+ <br/>
+QT progress bar:
+<br/>
+<object type="application/x-qt-plugin" classid="QProgressBar" name="progressbar" height=30></object>
+<script>
+function display(){
+ if (++document.progressbar.value != 100)
+setTimeout("display()", 50)
+}
+display();
+</script>
+</body>
+</html>
diff --git a/WebCore/manual-tests/remove-on-drop-crash.html b/WebCore/manual-tests/remove-on-drop-crash.html
new file mode 100644
index 0000000..c50adba
--- /dev/null
+++ b/WebCore/manual-tests/remove-on-drop-crash.html
@@ -0,0 +1,10 @@
+<body>
+Load <a href="http://www.google.com/">Google</a> and drag the logo onto this page. The second time you drag it on, Safari will crash.
+<script>
+function deleteSelection() {
+ document.execCommand("delete");
+}
+document.designMode="on";
+document.body.addEventListener("DOMNodeInserted", deleteSelection, false);
+</script>
+</body>
diff --git a/WebCore/manual-tests/resources/DrawMessage.class b/WebCore/manual-tests/resources/DrawMessage.class
new file mode 100644
index 0000000..6de7afc
--- /dev/null
+++ b/WebCore/manual-tests/resources/DrawMessage.class
Binary files differ
diff --git a/WebCore/manual-tests/resources/big-page.html b/WebCore/manual-tests/resources/big-page.html
new file mode 100644
index 0000000..987ea75
--- /dev/null
+++ b/WebCore/manual-tests/resources/big-page.html
@@ -0,0 +1,2 @@
+<p>This page is large enough to need to be scrolled in a 200x200 frame.</p>
+<div style="width: 400px; height: 400px; background-color: blue"></div>
diff --git a/WebCore/manual-tests/resources/hash-ref-test.html b/WebCore/manual-tests/resources/hash-ref-test.html
new file mode 100644
index 0000000..ed45778
--- /dev/null
+++ b/WebCore/manual-tests/resources/hash-ref-test.html
@@ -0,0 +1,24 @@
+<html>
+<head>
+<title>Test Case for Bug 13067: Manually adding #hash to URL reloads entire page instead of jumping to #hash location in cached page</title>
+<style>
+body {
+ min-height: 10000px;
+ margin-top: 0px;
+ padding-top: 0px;
+}
+div {
+ min-height: 100px;
+ border: 1px solid black;
+}
+</style>
+</head>
+<body>
+top
+<div id="div1">div1</div>
+<div id="div2">div2</div>
+<div id="div3">div3</div>
+<div id="div4">div4</div>
+<div id="div5">div5</div>
+</body>
+</html>
diff --git a/WebCore/manual-tests/resources/multiFileResources/post-echo-and-notify-done.cgi b/WebCore/manual-tests/resources/multiFileResources/post-echo-and-notify-done.cgi
new file mode 100755
index 0000000..2c523dc
--- /dev/null
+++ b/WebCore/manual-tests/resources/multiFileResources/post-echo-and-notify-done.cgi
@@ -0,0 +1,12 @@
+#!/usr/bin/perl -w
+
+print "Content-type: text/html\n\n";
+
+if ($ENV{'REQUEST_METHOD'} eq "POST") {
+ read(STDIN, $request, $ENV{'CONTENT_LENGTH'})
+ || die "Could not get query\n";
+ print "<pre>$request</pre>";
+ print "<script>if (window.layoutTestController) layoutTestController.notifyDone();</script>";
+} else {
+ print "Wrong method: " . $ENV{'REQUEST_METHOD'} . "\n";
+}
diff --git a/WebCore/manual-tests/resources/multiFileResources/testFile1.html b/WebCore/manual-tests/resources/multiFileResources/testFile1.html
new file mode 100644
index 0000000..4313554
--- /dev/null
+++ b/WebCore/manual-tests/resources/multiFileResources/testFile1.html
@@ -0,0 +1,4 @@
+<script>
+parent.log('test file 1 submitted');
+parent.submittedFiles++;
+</script> \ No newline at end of file
diff --git a/WebCore/manual-tests/resources/multiFileResources/testFile2.html b/WebCore/manual-tests/resources/multiFileResources/testFile2.html
new file mode 100644
index 0000000..90167f7
--- /dev/null
+++ b/WebCore/manual-tests/resources/multiFileResources/testFile2.html
@@ -0,0 +1,4 @@
+<script>
+parent.log('test file 2 submitted');
+parent.submittedFiles++;
+</script> \ No newline at end of file
diff --git a/WebCore/manual-tests/resources/multiFileResources/testFile3.html b/WebCore/manual-tests/resources/multiFileResources/testFile3.html
new file mode 100644
index 0000000..f89ddf3
--- /dev/null
+++ b/WebCore/manual-tests/resources/multiFileResources/testFile3.html
@@ -0,0 +1,5 @@
+<script>
+parent.log('test file 3 submitted');
+parent.submittedFiles++;
+parent.verifyResults();
+</script> \ No newline at end of file
diff --git a/WebCore/manual-tests/scrollbar-hover-active.html b/WebCore/manual-tests/scrollbar-hover-active.html
new file mode 100644
index 0000000..e7646ca
--- /dev/null
+++ b/WebCore/manual-tests/scrollbar-hover-active.html
@@ -0,0 +1,76 @@
+<head>
+<style>
+div::-webkit-scrollbar {
+ width:17px;
+ height:17px;
+}
+
+div::-webkit-scrollbar-button {
+ display: block;
+ width: 17px;
+ height: 17px;
+}
+
+div::-webkit-scrollbar-button:-webkit-decrement:-webkit-start {
+ background-color:lightblue;
+ border:2px solid black;
+}
+
+div::-webkit-scrollbar-button:-webkit-increment:-webkit-start {
+ background-color:lightgreen;
+ border:2px solid black;
+}
+
+div::-webkit-scrollbar-button:-webkit-decrement:-webkit-end {
+ background-color:orange;
+ border:2px solid black;
+}
+
+div::-webkit-scrollbar-button:-webkit-increment:-webkit-end {
+ background-color:brown;
+ border:2px solid black;
+}
+
+div::-webkit-scrollbar-button:hover {
+ background-color:black !important;
+}
+
+div::-webkit-scrollbar-thumb {
+ min-width:20px;
+ min-height:20px;
+ background-color: navy;
+ border:2px solid #cccccc;
+}
+
+div::-webkit-scrollbar-track {
+ background-color: pink;
+}
+
+div::-webkit-scrollbar-thumb:hover {
+ background-color: green;
+}
+
+div::-webkit-scrollbar-thumb:active {
+ border:3px dotted white;
+}
+
+div::-webkit-scrollbar-track:hover {
+ background-color: maroon;
+}
+
+</style>
+</head>
+<body>
+<div style="width:200px; height:200px; overflow-y:scroll; overflow-x:hidden">
+Hello<br>
+Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
+Hello<br>Hello<br>Hello<br>Hello<br>
+Hello<br>Hello<br>Hello<br>Hello<br>
+<span style="white-space:nowrap">Hello world this is a long string and will not wrap.</span>
+Hello<br>Hello<br>Hello<br>Hello<br>
+Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
+Hello<br>Hello<br>Hello<br>Hello<br>
+Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
+Hello<br>Hello<br>Hello<br>Hello<br>
+Hello<br>Hello<br>Hello<br>
+</div>
diff --git a/WebCore/manual-tests/svg-cursor-changes.svg b/WebCore/manual-tests/svg-cursor-changes.svg
new file mode 100644
index 0000000..ba7b546
--- /dev/null
+++ b/WebCore/manual-tests/svg-cursor-changes.svg
@@ -0,0 +1,29 @@
+<svg width="100%" height="100%" viewBox="0 0 300 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<cursor id="mycursor" x="10" y="10" xlink:href="resources/webkit-background.png"/>
+
+<!-- Clicking this circle should result in an instant update of the cursor location of this and the next circle (tested using DOM) -->
+<circle onclick="document.getElementById('mycursor').setAttribute('x', '100');" cx="80" cy="150" r="70" fill="green" cursor="url(#mycursor)"/>
+
+<!-- Clicking this circle should result in an instant update of the cursor location of this and the previous circle (tested using SVG DOM) -->
+<circle onclick="document.getElementById('mycursor').x.baseVal.value = 100;" cx="230" cy="150" r="70" fill="green" cursor="url(#mycursor)"/>
+
+<cursor id="mycursor2" x="10" y="10" xlink:href="resources/webkit-background.png"/>
+<cursor id="mycursor3" x="10" y="10" xlink:href="resources/webkit-background.png"/>
+
+<!-- Clicking this circle should result in an instant update of the cursor location (tested using DOM) -->
+<circle onclick="document.getElementById('mycursor2').setAttribute('x', '100');" cx="80" cy="310" r="70" fill="green" cursor="url(#mycursor2)"/>
+
+<!-- Clicking this circle should result in an instant update of the cursor location (tested using SVG DOM) -->
+<circle onclick="document.getElementById('mycursor3').x.baseVal.value = 100;" cx="230" cy="310" r="70" fill="green" cursor="url(#mycursor3)"/>
+
+<cursor id="mycursor4" x="10" y="10" xlink:href="resources/apple.jpg"/>
+
+<!-- Clicking this circle should result in an instant update of the cursor image (tested using DOM) -->
+<circle onclick="document.getElementById('mycursor4').setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'resources/webkit-background.png');" cx="80" cy="470" r="70" fill="green" cursor="url(#mycursor4)"/>
+
+<cursor id="mycursor5" x="10" y="10" xlink:href="resources/apple.jpg"/>
+
+<!-- Clicking this circle should result in an instant update of the cursor image (tested using SVG DOM) -->
+<circle onclick="document.getElementById('mycursor5').href.baseVal = 'resources/webkit-background.png';" cx="230" cy="470" r="70" fill="green" cursor="url(#mycursor5)"/>
+
+</svg>
diff --git a/WebCore/manual-tests/timeout-test.html b/WebCore/manual-tests/timeout-test.html
new file mode 100644
index 0000000..2da94a2
--- /dev/null
+++ b/WebCore/manual-tests/timeout-test.html
@@ -0,0 +1,13 @@
+<html>
+<head>
+<title>10m10s Timeout Test</title>
+</head>
+<body>
+To run this test, both timeout-test.html and timeout-test.php must be served over http.<br>
+And you must be patient.<br>
+Clicking on this button will post a form that takes over 10 minutes for the server to respond. The connection should not time out!<br>
+<form action="timeout-test.php" method="post">
+<input type="submit" value="Run Test">
+</form>
+</body>
+</html>
diff --git a/WebCore/manual-tests/timeout-test.php b/WebCore/manual-tests/timeout-test.php
new file mode 100644
index 0000000..3c546fe
--- /dev/null
+++ b/WebCore/manual-tests/timeout-test.php
@@ -0,0 +1,3 @@
+<?php
+sleep(610)
+?>This content took 10m10s to deliver. Congratulations, you didn't time out!
diff --git a/WebCore/manual-tests/transition-delay.html b/WebCore/manual-tests/transition-delay.html
new file mode 100644
index 0000000..006c798
--- /dev/null
+++ b/WebCore/manual-tests/transition-delay.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Transition Delay</title>
+ <style>
+ #container {
+ position: absolute;
+ width: 500px;
+ height: 340px;
+ border: 1px solid black;
+ }
+
+ .box {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ background-color: #66F;
+ z-index: 0;
+ }
+
+ #container.slide > .box {
+ -webkit-transform: translateX(380px);
+ -webkit-transition-property: -webkit-transform;
+ -webkit-transition-duration: 2s;
+ }
+
+ #box1 {
+ -webkit-transition-delay: 200ms;
+ }
+
+ #box2 {
+ -webkit-transition-delay: 2s;
+ }
+
+ #box3 {
+ -webkit-transition-delay: 4s;
+ }
+ </style>
+
+</head>
+<body>
+<p>Click to animate</p>
+<div id="container" onclick="this.className = 'slide'">
+ <div class="box" id="box1">
+ Delay: 200ms
+ </div>
+ <div class="box" id="box2">
+ Delay: 2s
+ </div>
+ <div class="box" id="box3">
+ Delay: 4s
+ </div>
+</div>
+</body>
+</html> \ No newline at end of file
diff --git a/WebCore/manual-tests/transition-events.html b/WebCore/manual-tests/transition-events.html
new file mode 100644
index 0000000..36cf940
--- /dev/null
+++ b/WebCore/manual-tests/transition-events.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Transition Events</title>
+ <style type="text/css" media="screen">
+ #box1 {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ background-color: blue;
+ z-index: 0;
+ -webkit-transition-property: left;
+ -webkit-transition-duration: 2s;
+ left: 0px;
+ }
+
+ #box2 {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ background-color: red;
+ z-index: 0;
+ -webkit-transition-property: left;
+ -webkit-transition-duration: 2s;
+ left: 0px;
+ }
+
+ #log {
+ position: absolute;
+ width: 90%;
+ height: 200px;
+ overflow: scroll;
+ border: 1px solid black;
+ }
+ </style>
+ <script type="text/javascript" charset="utf-8">
+
+ var switch1 = true;
+ var switch2 = false;
+
+ document.addEventListener('webkitTransitionEnd', function(e) {
+ var id = "1";
+ if (switch1) {
+ id = "2";
+ }
+ var offset = 200;
+ if (switch2) {
+ offset = 0;
+ }
+ var box = document.getElementById("box" + id);
+ box.style.left = "" + offset + "px";
+ switch1 = !switch1;
+ if (!switch1) switch2 = !switch2;
+ logTransition(event);
+ }, false);
+
+ function doClick(obj)
+ {
+ var box1 = document.getElementById("box1");
+ box1.style.left = "200px";
+ }
+
+ function logTransition(event)
+ {
+ var log = document.getElementById('log');
+ log.innerHTML = log.innerHTML + '<br>Property: ' + event.propertyName + ' Time: ' + event.elapsedTime;
+ }
+ </script>
+</head>
+<body>
+ <h2>Transition Events</h2>
+ <p>Click to start transitions. Once started, transition end events should keep
+ things moving forever.</p>
+ <div id="container" onclick="doClick(this)">
+ <div id="box1">
+ </div>
+ <div id="box2">
+ </div>
+ </div>
+
+ <div id="log">
+
+ </div>
+</body>
+</html>
diff --git a/WebCore/manual-tests/transition-left.html b/WebCore/manual-tests/transition-left.html
new file mode 100644
index 0000000..492e306
--- /dev/null
+++ b/WebCore/manual-tests/transition-left.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Transition of left property</title>
+ <style>
+ div {
+ position: relative;
+ left: 100px;
+ height: 200px;
+ width: 300px;
+ background-color: #9bb;
+ -webkit-transition-property: left;
+ -webkit-transition-duration: 1s;
+ }
+ </style>
+ <script type="text/javascript" charset="utf-8">
+
+ var flag = true;
+
+ function init() {
+ document.getElementById("target").addEventListener("click", function(evt) {
+ if (flag)
+ evt.target.style.left = "300px";
+ else
+ evt.target.style.left = "100px";
+ flag = !flag;
+ }, false);
+ }
+
+ window.addEventListener("load", init, false);
+ </script>
+</head>
+<body>
+ <h1>Transition of 'left' property</h1>
+
+ <p>The element below should move 200 pixels left or right when clicked</p>
+
+ <div id="target">
+ This element should transition.
+ </div>
+
+</body>
+</html> \ No newline at end of file
diff --git a/WebCore/manual-tests/transition-timing-functions.html b/WebCore/manual-tests/transition-timing-functions.html
new file mode 100644
index 0000000..ed1e4d1
--- /dev/null
+++ b/WebCore/manual-tests/transition-timing-functions.html
@@ -0,0 +1,122 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Timing Functions for Transitions</title>
+ <style type="text/css" media="screen">
+
+ body {
+ margin: 10px;
+ padding: 0;
+ }
+
+ .container div {
+ position: relative;
+ width: 250px;
+ height: 50px;
+ background: #99c;
+ -webkit-transition-property: left;
+ -webkit-transition-duration: 5s;
+ margin-bottom: 10px;
+ }
+
+ .container:hover .default,
+ .container:hover .ease,
+ .container:hover .linear,
+ .container:hover .ease-in,
+ .container:hover .ease-out,
+ .container:hover .ease-in-out,
+ .container:hover .cubic,
+ .container:hover .error {
+ left: 400px;
+ }
+
+ .container .ease {
+ -webkit-transition-timing-function: ease;
+ }
+
+ .container .linear {
+ -webkit-transition-timing-function: linear;
+ }
+
+ .container .ease-in {
+ -webkit-transition-timing-function: ease-in;
+ }
+
+ .container .ease-out {
+ -webkit-transition-timing-function: ease-out;
+ }
+
+ .container .ease-in-out {
+ -webkit-transition-timing-function: ease-in-out;
+ }
+
+ .container .cubic {
+ -webkit-transition-timing-function: cubic-bezier(.42, .0, .58, 1.0)
+ }
+
+ .container .error {
+ -webkit-transition-timing-function: bananas;
+ }
+
+ #endmarker {
+ position: absolute;
+ width: 10px;
+ left: 400px;
+ top: 100px;
+ height: 500px;
+ background-color: red;
+ }
+
+
+ </style>
+ </head>
+ <body>
+ <div id="endmarker">
+ </div>
+
+ <h1>Timing functions for transitions</h1>
+ <p>On hover, the elements below should transition using the
+ described timing functions</p>
+
+ <div class="container">
+
+ <div class="default">
+ Default (no timing function specified, should be the same as Ease)
+ </div>
+
+ <div class="ease">
+ Ease (the default ease function)
+ </div>
+
+ <div class="linear">
+ Linear
+ </div>
+
+ <div class="ease-in">
+ Ease In
+ </div>
+
+ <div class="ease-out">
+ Ease Out
+ </div>
+
+ <div class="ease-in-out">
+ Ease In Out
+ </div>
+
+ <div class="cubic">
+ Cubic bezier specified the same as Ease In Out
+ </div>
+
+ <div class="error">
+ Bogus definition, should become default of Ease
+ </div>
+
+ </div>
+
+
+
+ </body>
+</html> \ No newline at end of file
diff --git a/WebCore/manual-tests/transitions.html b/WebCore/manual-tests/transitions.html
new file mode 100644
index 0000000..33a9cff
--- /dev/null
+++ b/WebCore/manual-tests/transitions.html
@@ -0,0 +1,54 @@
+<style>
+ div {
+ width: 50px;
+ height: 50px;
+ background-color: yellow;
+ }
+
+ div.green {
+ width: 100px;
+ background-color: green;
+ -webkit-transition-property: background-color;
+ -webkit-transition-duration: 5s;
+ }
+
+ div.square {
+ width: 100px;
+ height: 100px;
+ -webkit-transition-property: height;
+ -webkit-transition-duration: 2s;
+ }
+</style>
+<p id="instructions">
+ When you click the Change button, the shape will
+ <span id="description"></span>.
+ <button style="display: block;" onclick="transition()">Change</button>
+</p>
+<div id="target"></div>
+<script>
+ var state = 0;
+ var transitions = [
+ {className:"green", description:"instantly change into a rectangle and fade from yellow to green over 5 seconds"},
+ {className:"", description:"instantly change into a small yellow square"},
+ {className:"square", description:"instantly change into a yellow rectangle and then animate into a big yellow square over 2 seconds"},
+ {className:"green", description:"instantly change into a yellow rectangle and then animate to a green rectangle over 5 seconds"},
+ {className:"", description:"instantly change into a small yellow square"},
+ {className:"green", description:"instantly change into a yellow rectangle and fade from yellow to green over 5 seconds"},
+ {className:"square", description:"instantly change to a yellow rectangle and then animate into a large yellow square over 2 seconds"},
+ {className:"", description:"instantly change into a small yellow square"}
+ ];
+
+ document.getElementById("description").innerText = transitions[0].description;
+
+ function transition()
+ {
+ var target = document.getElementById("target");
+ target.className = transitions[state].className;
+ state++;
+ if (state < transitions.length)
+ document.getElementById("description").innerText = transitions[state].description;
+ else {
+ document.getElementById("instructions").innerText = "Done.";
+ }
+ }
+</script>
diff --git a/WebCore/manual-tests/transitions2.html b/WebCore/manual-tests/transitions2.html
new file mode 100644
index 0000000..6515a79
--- /dev/null
+++ b/WebCore/manual-tests/transitions2.html
@@ -0,0 +1,52 @@
+<style>
+ div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ }
+
+ div.square {
+ width: 100px;
+ height: 100px;
+ -webkit-transition-property: height;
+ -webkit-transition-duration: 2s;
+ }
+
+ div.rectangle {
+ width: 100px;
+ height: 200px;
+ -webkit-transition-property: width, height;
+ -webkit-transition-duration: 5s;
+ }
+</style>
+<p id="instructions">
+ When you click the Change button, the shape will
+ <span id="description"></span>.
+ <button style="display: block;" onclick="transition()">Change</button>
+</p>
+<div id="target"></div>
+<script>
+ var state = 0;
+ var transitions = [
+ {className:"rectangle", description:"animate to a large rectangle over 5 seconds."},
+ {className:"square", description:"animate to a square over 2 seconds. Try clicking before the first animation finishes and make sure the width doesn't do an ugly jump."},
+ {className:"", description:"instantly change to a small square"},
+ {className:"square", description:"instantly change into a small rectangle and then animate into a large square over 2 seconds"},
+ {className:"rectangle", description:"animate to a large rectangle over 5 seconds"},
+ {className:"", description:"instantly change to a small square"}
+ ];
+
+ document.getElementById("description").innerText = transitions[0].description;
+
+ function transition()
+ {
+ var target = document.getElementById("target");
+ target.className = transitions[state].className;
+ state++;
+ if (state < transitions.length)
+ document.getElementById("description").innerText = transitions[state].description;
+ else {
+ document.getElementById("instructions").innerText = "Done.";
+ }
+ }
+</script>