Attachment 372652 Details for Bug 199012 – Patch

[patch] Patch

bug-199012-20190621144215.patch (text/plain), 239.03 KB, created by Myles C. Maxfield on 2019-06-21 14:42:16 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Myles C. Maxfield

Created: 2019-06-21 14:42:16 PDT

Size: 239.03 KB

patch

obsolete

>Subversion Revision: 246696
>diff --git a/Source/WTF/ChangeLog b/Source/WTF/ChangeLog
>index 70cc1ae0a5656fc842d8b335e5020fae7d42e79b..e1c3ff2b9cbe4f858d174b05fddd412dc6d60099 100644
>--- a/Source/WTF/ChangeLog
>+++ b/Source/WTF/ChangeLog
>@@ -1,3 +1,12 @@
>+2019-06-21  Myles C. Maxfield  <mmaxfield@apple.com>
>+
>+        REGRESSION: ( r246394 ) webgpu/whlsl-buffer-fragment.html and webgpu/whlsl-buffer-vertex.html are failing
>+        https://bugs.webkit.org/show_bug.cgi?id=199012
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * wtf/Platform.h:
>+
> 2019-06-20  Fujii Hironori  <Hironori.Fujii@sony.com>
> 
>         Try to use C++14 std::enable_if_t in CheckedArithmetic.h again
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index dfcc469ea878c4d6742450c5f5712aeabb825c40..68f1300bee78eaa87ad30201852bbc858e4a153c 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,14 @@
>+2019-06-21  Myles C. Maxfield  <mmaxfield@apple.com>
>+
>+        REGRESSION: ( r246394 ) webgpu/whlsl-buffer-fragment.html and webgpu/whlsl-buffer-vertex.html are failing
>+        https://bugs.webkit.org/show_bug.cgi?id=199012
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * platform/graphics/gpu/cocoa/GPUDeviceMetal.mm:
>+        (WebCore::isAcceptableDevice):
>+        (WebCore::GPUDevice::tryCreate):
>+
> 2019-06-21  Tim Horton  <timothy_horton@apple.com>
> 
>         Preview of <picture> element doesn't match element bounds
>diff --git a/Source/WTF/wtf/Platform.h b/Source/WTF/wtf/Platform.h
>index 5a6ef3adaaf16f17ddc0875fe4c6178dc0d2d1d4..33a4bb8d9e2b27b63200a7c1d4e4648d88817edb 100644
>--- a/Source/WTF/wtf/Platform.h
>+++ b/Source/WTF/wtf/Platform.h
>@@ -1595,3 +1595,7 @@
> #if PLATFORM(IOS) && __IPHONE_OS_VERSION_MIN_REQUIRED >= 130000
> #define USE_UICONTEXTMENU 1
> #endif
>+
>+#if PLATFORM(MAC) && __MAC_OS_X_VERSION_MIN_REQUIRED <= 101300
>+#define USE_INTEL_METAL_WORKAROUND 1
>+#endif
>diff --git a/Source/WebCore/PAL/PAL.xcodeproj/project.pbxproj b/Source/WebCore/PAL/PAL.xcodeproj/project.pbxproj
>index 9a9aba425c6aeba4f6f8dd62ce3300c71377d2ec..10bc6fb9762703b9bbd5bfdb83fed60504e2d7a5 100644
>--- a/Source/WebCore/PAL/PAL.xcodeproj/project.pbxproj
>+++ b/Source/WebCore/PAL/PAL.xcodeproj/project.pbxproj
>@@ -107,6 +107,7 @@
> 		1C09D0581E31C57E00725F18 /* config.h in Headers */ = {isa = PBXBuildFile; fileRef = 1C09D0571E31C57E00725F18 /* config.h */; };
> 		1C4876D81F8D7F4E00CCEEBD /* Logging.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 1C4876D61F8D7F4E00CCEEBD /* Logging.cpp */; };
> 		1C4876D91F8D7F4E00CCEEBD /* Logging.h in Headers */ = {isa = PBXBuildFile; fileRef = 1C4876D71F8D7F4E00CCEEBD /* Logging.h */; };
>+		1CC3ACE822BD7EC500F360F0 /* MetalSPI.h in Headers */ = {isa = PBXBuildFile; fileRef = 1CC3ACE722BD7EB800F360F0 /* MetalSPI.h */; };
> 		1CCEE4F520D871930047B097 /* CoreUISPI.h in Headers */ = {isa = PBXBuildFile; fileRef = 1CCEE4F420D871930047B097 /* CoreUISPI.h */; };
> 		1CCEE4F720D8743F0047B097 /* NSAppearanceSPI.h in Headers */ = {isa = PBXBuildFile; fileRef = 1CCEE4F620D8743F0047B097 /* NSAppearanceSPI.h */; };
> 		2D02E93C2056FAA700A13797 /* AudioToolboxSPI.h in Headers */ = {isa = PBXBuildFile; fileRef = 2D02E93B2056FAA700A13797 /* AudioToolboxSPI.h */; };
>@@ -274,6 +275,7 @@
> 		1C4876DC1F8D7FC600CCEEBD /* LogMacros.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = LogMacros.h; sourceTree = "<group>"; };
> 		1C67CEA11E32EDA800F80F2E /* FeatureDefines.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = FeatureDefines.xcconfig; sourceTree = "<group>"; };
> 		1C67CEA21E32EE2600F80F2E /* Version.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = Version.xcconfig; sourceTree = "<group>"; };
>+		1CC3ACE722BD7EB800F360F0 /* MetalSPI.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = MetalSPI.h; sourceTree = "<group>"; };
> 		1CCEE4F420D871930047B097 /* CoreUISPI.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = CoreUISPI.h; sourceTree = "<group>"; };
> 		1CCEE4F620D8743F0047B097 /* NSAppearanceSPI.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = NSAppearanceSPI.h; sourceTree = "<group>"; };
> 		2D02E93B2056FAA700A13797 /* AudioToolboxSPI.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AudioToolboxSPI.h; sourceTree = "<group>"; };
>@@ -413,6 +415,7 @@
> 				0C2DA12A1F3BEB4900DBC317 /* IOTypesSPI.h */,
> 				0C5AF9121F43A4C7002EAC02 /* LaunchServicesSPI.h */,
> 				0C2DA12C1F3BEB4900DBC317 /* MachVMSPI.h */,
>+				1CC3ACE722BD7EB800F360F0 /* MetalSPI.h */,
> 				0C2DA12D1F3BEB4900DBC317 /* NEFilterSourceSPI.h */,
> 				0C2DA12E1F3BEB4900DBC317 /* NSAttributedStringSPI.h */,
> 				0C2DA12F1F3BEB4900DBC317 /* NSButtonCellSPI.h */,
>@@ -740,6 +743,7 @@
> 				0C5AF91D1F43A4C7002EAC02 /* MediaPlayerSPI.h in Headers */,
> 				0C77858C1F45130F00F4EBB6 /* MediaRemoteSPI.h in Headers */,
> 				0C00CFD41F68CE4600AAC26D /* MediaTimeAVFoundation.h in Headers */,
>+				1CC3ACE822BD7EC500F360F0 /* MetalSPI.h in Headers */,
> 				0C5AF91E1F43A4C7002EAC02 /* MobileGestaltSPI.h in Headers */,
> 				0C2DA1491F3BEB4900DBC317 /* NEFilterSourceSPI.h in Headers */,
> 				0C77858D1F45130F00F4EBB6 /* NSAccessibilitySPI.h in Headers */,
>diff --git a/Source/WebCore/PAL/pal/spi/cocoa/MetalSPI.h b/Source/WebCore/PAL/pal/spi/cocoa/MetalSPI.h
>new file mode 100644
>index 0000000000000000000000000000000000000000..ea0527d55a995207a477d392fed49680fe321d73
>--- /dev/null
>+++ b/Source/WebCore/PAL/pal/spi/cocoa/MetalSPI.h
>@@ -0,0 +1,38 @@
>+/*
>+ * Copyright (C) 2015 Apple Inc. All rights reserved.
>+ *
>+ * Redistribution and use in source and binary forms, with or without
>+ * modification, are permitted provided that the following conditions
>+ * are met:
>+ * 1. Redistributions of source code must retain the above copyright
>+ *    notice, this list of conditions and the following disclaimer.
>+ * 2. 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.
>+ *
>+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS 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 APPLE INC. OR ITS 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.
>+ */
>+
>+#if USE(APPLE_INTERNAL_SDK)
>+
>+#import <Metal/MetalPrivate.h>
>+
>+#else
>+
>+@protocol MTLDeviceSPI <MTLDevice>
>+- (NSString*)vendorName;
>+- (NSString*)familyName;
>+- (NSString*)productName;
>+@end
>+
>+#endif
>diff --git a/Source/WebCore/platform/graphics/gpu/cocoa/GPUDeviceMetal.mm b/Source/WebCore/platform/graphics/gpu/cocoa/GPUDeviceMetal.mm
>index f55947ebaf31f099451ab6bef1bf0e9f4684e40a..7b86bcddd791f8d4575b6f30c9c80d7ac45628ef 100644
>--- a/Source/WebCore/platform/graphics/gpu/cocoa/GPUDeviceMetal.mm
>+++ b/Source/WebCore/platform/graphics/gpu/cocoa/GPUDeviceMetal.mm
>@@ -32,10 +32,25 @@
> #import "Logging.h"
> 
> #import <Metal/Metal.h>
>+#import <pal/spi/cocoa/MetalSPI.h>
> #import <wtf/BlockObjCExceptions.h>
> 
> namespace WebCore {
> 
>+static bool isAcceptableDevice(id <MTLDevice> device)
>+{
>+#if USE(INTEL_METAL_WORKAROUND)
>+    BEGIN_BLOCK_OBJC_EXCEPTIONS;
>+    if (![device supportsFeatureSet:MTLFeatureSet_macOS_GPUFamily2_v1] && [[(id <MTLDeviceSPI>)device vendorName] isEqualToString:@"Intel"])
>+        return false;
>+    END_BLOCK_OBJC_EXCEPTIONS;
>+    return false;
>+#else
>+    UNUSED_PARAM(device);
>+    return true;
>+#endif
>+}
>+
> RefPtr<GPUDevice> GPUDevice::tryCreate(const Optional<GPURequestAdapterOptions>& options)
> {
>     RetainPtr<MTLDevice> devicePtr;
>@@ -47,6 +62,8 @@ RefPtr<GPUDevice> GPUDevice::tryCreate(const Optional<GPURequestAdapterOptions>&
>         auto devices = adoptNS(MTLCopyAllDevices());
>         
>         for (id <MTLDevice> device : devices.get()) {
>+            if (!isAcceptableDevice(device))
>+                continue;
>             if (device.lowPower) {
>                 devicePtr = device;
>                 break;
>@@ -59,6 +76,9 @@ RefPtr<GPUDevice> GPUDevice::tryCreate(const Optional<GPURequestAdapterOptions>&
>     if (!devicePtr)
>         devicePtr = adoptNS(MTLCreateSystemDefaultDevice());
> 
>+    if (!isAcceptableDevice(devicePtr.get()))
>+        devicePtr.clear();
>+
>     END_BLOCK_OBJC_EXCEPTIONS;
> 
>     if (!devicePtr) {
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 8e38033b7266ec1e5fa684fb1c99886f32e85140..98be685050c8e6508c1399941ec3e67131b7a2af 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,163 @@
>+2019-06-21  Myles C. Maxfield  <mmaxfield@apple.com>
>+
>+        REGRESSION: ( r246394 ) webgpu/whlsl-buffer-fragment.html and webgpu/whlsl-buffer-vertex.html are failing
>+        https://bugs.webkit.org/show_bug.cgi?id=199012
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Make the tests still pass if the machine doesn't support WebGPU.
>+
>+        * webgpu/adapter-options-expected.txt: Removed.
>+        * webgpu/adapter-options.html: Removed.
>+        * webgpu/bind-groups.html:
>+        * webgpu/blend-color-triangle-strip-expected.html:
>+        * webgpu/blend-color-triangle-strip.html:
>+        * webgpu/blend-triangle-strip-expected.html:
>+        * webgpu/blend-triangle-strip.html:
>+        * webgpu/blit-commands-expected.html:
>+        * webgpu/blit-commands.html:
>+        * webgpu/buffer-command-buffer-races-expected.html:
>+        * webgpu/buffer-command-buffer-races.html:
>+        * webgpu/color-write-mask-triangle-strip-expected.html:
>+        * webgpu/color-write-mask-triangle-strip.html:
>+        * webgpu/command-buffers.html:
>+        * webgpu/depth-enabled-triangle-strip-expected.html:
>+        * webgpu/depth-enabled-triangle-strip.html:
>+        * webgpu/draw-indexed-triangles-expected.html:
>+        * webgpu/draw-indexed-triangles.html:
>+        * webgpu/js/create-worker-device.js: Removed.
>+        * webgpu/js/webgpu-functions.js:
>+        (drawWhiteSquareOnBlueBackgroundInSoftware):
>+        (drawGreenSquareInSoftware):
>+        (drawGreenAndBlueCheckerboardInSoftware):
>+        (async.mapWriteDataToBuffer):
>+        * webgpu/map-read-buffers.html:
>+        * webgpu/map-write-buffers.html:
>+        * webgpu/pipeline-layouts.html:
>+        * webgpu/propertyresolver/ander-abstract-lvalue-expected.html:
>+        * webgpu/propertyresolver/ander-abstract-lvalue.html:
>+        * webgpu/propertyresolver/ander-expected.html:
>+        * webgpu/propertyresolver/ander-lvalue-3-levels-expected.html:
>+        * webgpu/propertyresolver/ander-lvalue-3-levels.html:
>+        * webgpu/propertyresolver/ander-lvalue-expected.html:
>+        * webgpu/propertyresolver/ander-lvalue.html:
>+        * webgpu/propertyresolver/ander.html:
>+        * webgpu/propertyresolver/getter-expected.html:
>+        * webgpu/propertyresolver/getter.html:
>+        * webgpu/propertyresolver/indexer-ander-abstract-lvalue-expected.html:
>+        * webgpu/propertyresolver/indexer-ander-abstract-lvalue.html:
>+        * webgpu/propertyresolver/indexer-ander-expected.html:
>+        * webgpu/propertyresolver/indexer-ander-lvalue-3-levels-expected.html:
>+        * webgpu/propertyresolver/indexer-ander-lvalue-3-levels.html:
>+        * webgpu/propertyresolver/indexer-ander-lvalue-expected.html:
>+        * webgpu/propertyresolver/indexer-ander-lvalue.html:
>+        * webgpu/propertyresolver/indexer-ander.html:
>+        * webgpu/propertyresolver/indexer-getter-expected.html:
>+        * webgpu/propertyresolver/indexer-getter.html:
>+        * webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels-expected.html:
>+        * webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels.html:
>+        * webgpu/propertyresolver/indexer-setter-abstract-lvalue-expected.html:
>+        * webgpu/propertyresolver/indexer-setter-abstract-lvalue.html:
>+        * webgpu/propertyresolver/indexer-setter-expected.html:
>+        * webgpu/propertyresolver/indexer-setter-lvalue-expected.html:
>+        * webgpu/propertyresolver/indexer-setter-lvalue.html:
>+        * webgpu/propertyresolver/indexer-setter.html:
>+        * webgpu/propertyresolver/setter-abstract-lvalue-3-levels-expected.html:
>+        * webgpu/propertyresolver/setter-abstract-lvalue-3-levels.html:
>+        * webgpu/propertyresolver/setter-abstract-lvalue-expected.html:
>+        * webgpu/propertyresolver/setter-abstract-lvalue.html:
>+        * webgpu/propertyresolver/setter-lvalue-expected.html:
>+        * webgpu/propertyresolver/setter-lvalue.html:
>+        * webgpu/queue-creation.html:
>+        * webgpu/render-command-encoding.html:
>+        * webgpu/render-pipelines.html:
>+        * webgpu/shader-modules.html:
>+        * webgpu/simple-triangle-strip-expected.html:
>+        * webgpu/simple-triangle-strip.html:
>+        * webgpu/texture-triangle-strip-expected.html:
>+        * webgpu/texture-triangle-strip.html:
>+        * webgpu/textures-textureviews.html:
>+        * webgpu/vertex-buffer-triangle-strip-expected.html:
>+        * webgpu/vertex-buffer-triangle-strip.html:
>+        * webgpu/viewport-scissor-rect-triangle-strip-expected.html:
>+        * webgpu/viewport-scissor-rect-triangle-strip.html:
>+        * webgpu/webgpu-enabled-expected.txt: Removed.
>+        * webgpu/webgpu-enabled-in-worker-expected.txt: Removed.
>+        * webgpu/webgpu-enabled-in-worker.html: Removed.
>+        * webgpu/webgpu-enabled.html: Removed.
>+        * webgpu/whlsl-arbitrary-vertex-attribute-locations-expected.html:
>+        * webgpu/whlsl-arbitrary-vertex-attribute-locations.html:
>+        * webgpu/whlsl-buffer-fragment-expected.html:
>+        * webgpu/whlsl-buffer-fragment.html:
>+        * webgpu/whlsl-buffer-length-expected.txt:
>+        * webgpu/whlsl-buffer-length.html:
>+        * webgpu/whlsl-buffer-vertex-expected.html:
>+        * webgpu/whlsl-buffer-vertex.html:
>+        * webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables-expected.txt:
>+        * webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables.html:
>+        * webgpu/whlsl-compute-expected.txt:
>+        * webgpu/whlsl-compute.html:
>+        * webgpu/whlsl-dereference-pointer-should-type-check-expected.html:
>+        * webgpu/whlsl-dereference-pointer-should-type-check.html:
>+        * webgpu/whlsl-do-while-loop-break-expected.html:
>+        * webgpu/whlsl-do-while-loop-break.html:
>+        * webgpu/whlsl-do-while-loop-continue-expected.html:
>+        * webgpu/whlsl-do-while-loop-continue.html:
>+        * webgpu/whlsl-do-while-loop-expected.html:
>+        * webgpu/whlsl-do-while-loop.html:
>+        * webgpu/whlsl-dont-crash-parsing-enum-expected.html:
>+        * webgpu/whlsl-dont-crash-parsing-enum.html:
>+        * webgpu/whlsl-dot-expressions-expected.html:
>+        * webgpu/whlsl-dot-expressions.html:
>+        * webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors-expected.txt:
>+        * webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors.html:
>+        * webgpu/whlsl-ensure-proper-variable-lifetime-2-expected.html:
>+        * webgpu/whlsl-ensure-proper-variable-lifetime-2.html:
>+        * webgpu/whlsl-ensure-proper-variable-lifetime-3-expected.html:
>+        * webgpu/whlsl-ensure-proper-variable-lifetime-3.html:
>+        * webgpu/whlsl-ensure-proper-variable-lifetime-expected.html:
>+        * webgpu/whlsl-ensure-proper-variable-lifetime.html:
>+        * webgpu/whlsl-expected.html:
>+        * webgpu/whlsl-loops-break-expected.html:
>+        * webgpu/whlsl-loops-break.html:
>+        * webgpu/whlsl-loops-continue-expected.html:
>+        * webgpu/whlsl-loops-continue.html:
>+        * webgpu/whlsl-loops-expected.html:
>+        * webgpu/whlsl-loops.html:
>+        * webgpu/whlsl-matrix-2-expected.txt:
>+        * webgpu/whlsl-matrix-2.html:
>+        * webgpu/whlsl-matrix-expected.txt:
>+        * webgpu/whlsl-matrix.html:
>+        * webgpu/whlsl-nested-dot-expression-rvalue-expected.html:
>+        * webgpu/whlsl-nested-dot-expression-rvalue.html:
>+        * webgpu/whlsl-nested-loop-expected.html:
>+        * webgpu/whlsl-nested-loop.html:
>+        * webgpu/whlsl-null-dereference-expected.txt:
>+        * webgpu/whlsl-null-dereference.html:
>+        * webgpu/whlsl-oob-access-expected.txt:
>+        * webgpu/whlsl-oob-access.html:
>+        * webgpu/whlsl-read-modify-write-high-zombies-expected.txt:
>+        * webgpu/whlsl-read-modify-write-high-zombies.html:
>+        * webgpu/whlsl-return-local-variable-expected.html:
>+        * webgpu/whlsl-return-local-variable.html:
>+        * webgpu/whlsl-store-to-property-updates-properly-expected.html:
>+        * webgpu/whlsl-store-to-property-updates-properly.html:
>+        * webgpu/whlsl-textures-getdimensions-expected.txt:
>+        * webgpu/whlsl-textures-getdimensions.html:
>+        * webgpu/whlsl-textures-load-expected.html:
>+        * webgpu/whlsl-textures-load.html:
>+        * webgpu/whlsl-textures-sample-expected.html:
>+        * webgpu/whlsl-textures-sample.html:
>+        * webgpu/whlsl-while-loop-break-expected.html:
>+        * webgpu/whlsl-while-loop-break.html:
>+        * webgpu/whlsl-while-loop-continue-expected.html:
>+        * webgpu/whlsl-while-loop-continue.html:
>+        * webgpu/whlsl-zero-initialize-values-2-expected.html:
>+        * webgpu/whlsl-zero-initialize-values-2.html:
>+        * webgpu/whlsl-zero-initialize-values-expected.html:
>+        * webgpu/whlsl-zero-initialize-values.html:
>+        * webgpu/whlsl.html:
>+
> 2019-06-21  Myles C. Maxfield  <mmaxfield@apple.com>
> 
>         [WHLSL] read modify write expressions do no work as expected
>diff --git a/LayoutTests/webgpu/adapter-options-expected.txt b/LayoutTests/webgpu/adapter-options-expected.txt
>deleted file mode 100644
>index 2df1a50fa0abf09cc8cec7ed4afb1cb15b0b2de9..0000000000000000000000000000000000000000
>--- a/LayoutTests/webgpu/adapter-options-expected.txt
>+++ /dev/null
>@@ -1,5 +0,0 @@
>-
>-PASS Create the default device. 
>-PASS Create a device with a low-power option. 
>-PASS Create a device with a high-performance option. 
>-
>diff --git a/LayoutTests/webgpu/adapter-options.html b/LayoutTests/webgpu/adapter-options.html
>deleted file mode 100644
>index cc464b51f16c2f2ada7e39f72e209a0f0a8e28d5..0000000000000000000000000000000000000000
>--- a/LayoutTests/webgpu/adapter-options.html
>+++ /dev/null
>@@ -1,29 +0,0 @@
>-<!DOCTYPE html>
>-<meta charset=utf-8>
>-<title>Create GPUDevices from various options.</title>
>-<body>
>-<script src="../resources/testharness.js"></script>
>-<script src="../resources/testharnessreport.js"></script>
>-<script>
>-promise_test(async () => {
>-    const defaultAdapter = await navigator.gpu.requestAdapter();
>-    const device = await defaultAdapter.requestDevice();
>-
>-    assert_true(device instanceof GPUDevice, "Default device successfully created.");
>-}, "Create the default device.");
>-
>-promise_test(async () => {
>-    const lowPowerAdapter = await navigator.gpu.requestAdapter({ powerPreference: "low-power" });
>-    const device = await lowPowerAdapter.requestDevice();
>-
>-    assert_true(device instanceof GPUDevice, "Device successfully created using low-power option.");
>-}, "Create a device with a low-power option.");
>-
>-promise_test(async () => {
>-    const highPerfAdapter = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" });
>-    const device = await highPerfAdapter.requestDevice();
>-
>-    assert_true(device instanceof GPUDevice, "Device successfully created using high-performance option.");
>-}, "Create a device with a high-performance option.");
>-</script>
>-</body>
>\ No newline at end of file
>diff --git a/LayoutTests/webgpu/bind-groups.html b/LayoutTests/webgpu/bind-groups.html
>index ebd153ccd116bfb2a545d33b4f45da25c1d0a479..bd1ba253bcc7d404b856f1fc82dbda11381ac946 100644
>--- a/LayoutTests/webgpu/bind-groups.html
>+++ b/LayoutTests/webgpu/bind-groups.html
>@@ -7,24 +7,25 @@
> <script src="../resources/testharnessreport.js"></script>
> <script>
> promise_test(async () => {
>-    const device = await getBasicDevice();
>+    getBasicDevice().then(function(device) {
>+        // GPUBindGroupLayoutBindings
>+        // FIXME: Also test sampled texture bindings.
>+        const bufferLayoutBinding = {
>+            binding: 1,
>+            visibility: GPUShaderStageBit.VERTEX,
>+            type: "storage-buffer"
>+        };
> 
>-    // GPUBindGroupLayoutBindings
>-    // FIXME: Also test sampled texture bindings. 
>-    const bufferLayoutBinding = {
>-        binding: 1,
>-        visibility: GPUShaderStageBit.VERTEX,
>-        type: "storage-buffer"
>-    };
>+        const bindGroupLayout = device.createBindGroupLayout({ bindings: [bufferLayoutBinding] });
> 
>-    const bindGroupLayout = device.createBindGroupLayout({ bindings: [bufferLayoutBinding] });
>+        const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.STORAGE });
>+        const bufferBinding = { buffer: buffer, size: 16 };
>+        const bindGroupBinding = { binding: 1, resource: bufferBinding };
> 
>-    const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.STORAGE });
>-    const bufferBinding = { buffer: buffer, size: 16 };
>-    const bindGroupBinding = { binding: 1, resource: bufferBinding };
>-
>-    const bindGroup = device.createBindGroup({ layout: bindGroupLayout, bindings: [bindGroupBinding]});
>-    assert_true(bindGroup instanceof GPUBindGroup, "GPUBindGroup successfully created.")
>+        const bindGroup = device.createBindGroup({ layout: bindGroupLayout, bindings: [bindGroupBinding]});
>+        assert_true(bindGroup instanceof GPUBindGroup, "GPUBindGroup successfully created.");
>+    }, function() {
>+    });
> }, "Create a basic GPUBindGroup via GPUDevice.")
> </script>
>-</body>
>\ No newline at end of file
>+</body>
>diff --git a/LayoutTests/webgpu/blend-color-triangle-strip-expected.html b/LayoutTests/webgpu/blend-color-triangle-strip-expected.html
>index 886f13e8120397a5cc6336c9e2a485e778ba9932..4f60f5a9c517c962eff2a0afd2a94ba5ed230420 100644
>--- a/LayoutTests/webgpu/blend-color-triangle-strip-expected.html
>+++ b/LayoutTests/webgpu/blend-color-triangle-strip-expected.html
>@@ -1,12 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is completely green.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-</script>
>\ No newline at end of file
>+drawGreenSquareInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/blend-color-triangle-strip.html b/LayoutTests/webgpu/blend-color-triangle-strip.html
>index 04984aec5e92f5f23f2a8e125ed5d437586e2819..e0acfd2fe0d98339af06c03c0ba983e698dbb849 100644
>--- a/LayoutTests/webgpu/blend-color-triangle-strip.html
>+++ b/LayoutTests/webgpu/blend-color-triangle-strip.html
>@@ -45,9 +45,9 @@ fragment float4 fragment_main()
> }
> `;
> 
>-async function test() {
>-    const device = await getBasicDevice();
>-    const canvas = document.querySelector("canvas");
>+const canvas = document.querySelector("canvas");
>+
>+async function start(device) {
>     const swapChain = createBasicSwapChain(canvas, device);
>     // FIXME: Replace with non-MSL shaders.
>     const shaderModule = device.createShaderModule({ code: shaderCode });
>@@ -77,10 +77,16 @@ async function test() {
>     queue.submit([commandEncoder.finish()]);
> }
> 
>-test().then(function() {
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
> }, function() {
>+    drawGreenSquareInSoftware(canvas);
>     if (window.testRunner)
>         testRunner.notifyDone();
> });
>diff --git a/LayoutTests/webgpu/blend-triangle-strip-expected.html b/LayoutTests/webgpu/blend-triangle-strip-expected.html
>index 886f13e8120397a5cc6336c9e2a485e778ba9932..4f60f5a9c517c962eff2a0afd2a94ba5ed230420 100644
>--- a/LayoutTests/webgpu/blend-triangle-strip-expected.html
>+++ b/LayoutTests/webgpu/blend-triangle-strip-expected.html
>@@ -1,12 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is completely green.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-</script>
>\ No newline at end of file
>+drawGreenSquareInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/blend-triangle-strip.html b/LayoutTests/webgpu/blend-triangle-strip.html
>index f209b03343710f9bf5f45dabad8ac9dc165ddb6e..c665f57f0fba58db786d5f0484b9ef67187994cc 100644
>--- a/LayoutTests/webgpu/blend-triangle-strip.html
>+++ b/LayoutTests/webgpu/blend-triangle-strip.html
>@@ -42,10 +42,9 @@ fragment float4 fragment_main(VertexOut v [[stage_in]])
> }
> `;
> 
>-async function test() {
>-    const device = await getBasicDevice();
>-    const canvas = document.querySelector("canvas");
>+const canvas = document.querySelector("canvas");
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({ code: shaderCode });
> 
>     const colorStates = [{
>@@ -95,13 +94,17 @@ async function test() {
>     device.getQueue().submit([commandEncoder.finish()]);
> }
> 
>-window.addEventListener("load", function() {
>-    test().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>-}, false);
>+}, function() {
>+    drawGreenSquareInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
>+});
> </script>
>diff --git a/LayoutTests/webgpu/blit-commands-expected.html b/LayoutTests/webgpu/blit-commands-expected.html
>index 886f13e8120397a5cc6336c9e2a485e778ba9932..4f60f5a9c517c962eff2a0afd2a94ba5ed230420 100644
>--- a/LayoutTests/webgpu/blit-commands-expected.html
>+++ b/LayoutTests/webgpu/blit-commands-expected.html
>@@ -1,12 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is completely green.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-</script>
>\ No newline at end of file
>+drawGreenSquareInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/blit-commands.html b/LayoutTests/webgpu/blit-commands.html
>index 8339e90354e9a6d073aa5c8028e8ec64dc82765f..b3ef263d2760b6db63d1f8874085995127dcd622 100644
>--- a/LayoutTests/webgpu/blit-commands.html
>+++ b/LayoutTests/webgpu/blit-commands.html
>@@ -11,24 +11,29 @@
> if (window.testRunner)
>     testRunner.waitUntilDone();
> 
>+const canvas2d = document.querySelector("canvas");
>+
> async function loadImage() {
>     const image = new Image();
>     image.src = "resources/green-400.png";
>     image.onload = function() {
>-        test(image).then(function() {
>-            if (window.testRunner)
>-                testRunner.notifyDone();
>+        getBasicDevice().then(function(device) {
>+            test(device, image).then(function() {
>+                if (window.testRunner)
>+                    testRunner.notifyDone();
>+            }, function(e) {
>+                if (window.testRunner)
>+                    testRunner.notifyDone();
>+            });
>         }, function() {
>+            drawGreenSquareInSoftware(canvas2d);
>             if (window.testRunner)
>                 testRunner.notifyDone();
>         });
>     }
> }
> 
>-async function test(image) {
>-    const device = await getBasicDevice();
>-
>-    const canvas2d = document.createElement('canvas');
>+async function test(device, image) {
>     canvas2d.width = image.width;
>     canvas2d.height = image.height;
>     const context2d = canvas2d.getContext('2d');
>diff --git a/LayoutTests/webgpu/buffer-command-buffer-races-expected.html b/LayoutTests/webgpu/buffer-command-buffer-races-expected.html
>index 886f13e8120397a5cc6336c9e2a485e778ba9932..4f60f5a9c517c962eff2a0afd2a94ba5ed230420 100644
>--- a/LayoutTests/webgpu/buffer-command-buffer-races-expected.html
>+++ b/LayoutTests/webgpu/buffer-command-buffer-races-expected.html
>@@ -1,12 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is completely green.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-</script>
>\ No newline at end of file
>+drawGreenSquareInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/buffer-command-buffer-races.html b/LayoutTests/webgpu/buffer-command-buffer-races.html
>index abaaa2ad2d7a455b642c7bd52ea1055bf3fb6fe0..01b1e584b7687ed058569a898c1b6929ce07f314 100644
>--- a/LayoutTests/webgpu/buffer-command-buffer-races.html
>+++ b/LayoutTests/webgpu/buffer-command-buffer-races.html
>@@ -77,9 +77,9 @@ function drawAndSubmitCommands(device, pipeline, attachment, vertexBuffer, color
>     device.getQueue().submit([commandEncoder.finish()]);
> }
> 
>-async function test() {
>-    const device = await getBasicDevice();
>-    const canvas = document.querySelector("canvas");
>+const canvas = document.querySelector("canvas");
>+
>+async function test(device) {
>     const swapChain = createBasicSwapChain(canvas, device);
>     // FIXME: Replace with non-MSL shaders.
>     const shaderModule = device.createShaderModule({ code: shaderCode });
>@@ -141,10 +141,16 @@ async function test() {
>     upperRightBuffer.destroy();
> }
> 
>-test().then(function() {
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>+getBasicDevice().then(function(device) {
>+    test(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
> }, function() {
>+    drawGreenSquareInSoftware(canvas);
>     if (window.testRunner)
>         testRunner.notifyDone();
> });
>diff --git a/LayoutTests/webgpu/color-write-mask-triangle-strip-expected.html b/LayoutTests/webgpu/color-write-mask-triangle-strip-expected.html
>index 886f13e8120397a5cc6336c9e2a485e778ba9932..4f60f5a9c517c962eff2a0afd2a94ba5ed230420 100644
>--- a/LayoutTests/webgpu/color-write-mask-triangle-strip-expected.html
>+++ b/LayoutTests/webgpu/color-write-mask-triangle-strip-expected.html
>@@ -1,12 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is completely green.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-</script>
>\ No newline at end of file
>+drawGreenSquareInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/color-write-mask-triangle-strip.html b/LayoutTests/webgpu/color-write-mask-triangle-strip.html
>index 5dcc3d9429eb343478b92de68825315300f88ff2..2f3f12c3bc6b44f1b70b8b0675aa007c4dd8f804 100644
>--- a/LayoutTests/webgpu/color-write-mask-triangle-strip.html
>+++ b/LayoutTests/webgpu/color-write-mask-triangle-strip.html
>@@ -45,9 +45,9 @@ fragment float4 fragment_main()
> }
> `
> 
>-async function test() {
>-    const device = await getBasicDevice();
>-    const canvas = document.querySelector("canvas");
>+const canvas = document.querySelector("canvas");
>+
>+async function test(device) {
>     const swapChain = createBasicSwapChain(canvas, device);
>     const shaderModule = device.createShaderModule({ code: shaderCode });
>     const colorStates = [{
>@@ -71,10 +71,16 @@ async function test() {
>     queue.submit([commandEncoder.finish()]);
> }
> 
>-test().then(function() {
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>+getBasicDevice().then(function(device) {
>+    test(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
> }, function() {
>+    drawGreenSquareInSoftware(canvas);
>     if (window.testRunner)
>         testRunner.notifyDone();
> });
>diff --git a/LayoutTests/webgpu/command-buffers.html b/LayoutTests/webgpu/command-buffers.html
>index 833a383b29dd35393ce8c856900c583f38c64774..e1d48eae2684aba7ded9f32808aa4e05842a998c 100644
>--- a/LayoutTests/webgpu/command-buffers.html
>+++ b/LayoutTests/webgpu/command-buffers.html
>@@ -5,11 +5,13 @@
> <script src="../resources/testharnessreport.js"></script>
> <script>
> promise_test(async () => {
>-    const device = await getBasicDevice();
>-    const commandEncoder = device.createCommandEncoder();
>-    assert_true(commandEncoder instanceof GPUCommandEncoder, "Successfully created GPUCommandEncoder.");
>+    getBasicDevice().then(function(device) {
>+        const commandEncoder = device.createCommandEncoder();
>+        assert_true(commandEncoder instanceof GPUCommandEncoder, "Successfully created GPUCommandEncoder.");
>+    }, function() {
>+    });
> }, "Create a default GPUCommandEncoder.");
> 
> // FIXME: createCommandEncoder should take a GPUCommandEncoderDescriptor, which is currently an empty dictionary.
> </script>
>-</html>
>\ No newline at end of file
>+</html>
>diff --git a/LayoutTests/webgpu/depth-enabled-triangle-strip-expected.html b/LayoutTests/webgpu/depth-enabled-triangle-strip-expected.html
>index 886f13e8120397a5cc6336c9e2a485e778ba9932..4f60f5a9c517c962eff2a0afd2a94ba5ed230420 100644
>--- a/LayoutTests/webgpu/depth-enabled-triangle-strip-expected.html
>+++ b/LayoutTests/webgpu/depth-enabled-triangle-strip-expected.html
>@@ -1,12 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is completely green.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-</script>
>\ No newline at end of file
>+drawGreenSquareInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/depth-enabled-triangle-strip.html b/LayoutTests/webgpu/depth-enabled-triangle-strip.html
>index 94b99b179dd226340580be1e0861abdecfe7bc26..fb559a8392b2f74189bf76eaf1fa4295c078bda5 100644
>--- a/LayoutTests/webgpu/depth-enabled-triangle-strip.html
>+++ b/LayoutTests/webgpu/depth-enabled-triangle-strip.html
>@@ -71,9 +71,9 @@ function createVertexInputDescriptor() {
>     }
> }
> 
>-async function test() {
>-    const device = await getBasicDevice();
>-    const canvas = document.querySelector("canvas");
>+const canvas = document.querySelector("canvas");
>+
>+async function test(device) {
>     const swapChain = createBasicSwapChain(canvas, device);
>     // FIXME: Replace with non-MSL shaders.
>     const shaderModule = device.createShaderModule({ code: shaderCode });
>@@ -110,10 +110,16 @@ async function test() {
>     device.getQueue().submit([commandEncoder.finish()]);
> }
> 
>-test().then(function() {
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>+getBasicDevice().then(function(device) {
>+    test(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
> }, function() {
>+    drawGreenSquareInSoftware(canvas);
>     if (window.testRunner)
>         testRunner.notifyDone();
> });
>diff --git a/LayoutTests/webgpu/draw-indexed-triangles-expected.html b/LayoutTests/webgpu/draw-indexed-triangles-expected.html
>index 886f13e8120397a5cc6336c9e2a485e778ba9932..4f60f5a9c517c962eff2a0afd2a94ba5ed230420 100644
>--- a/LayoutTests/webgpu/draw-indexed-triangles-expected.html
>+++ b/LayoutTests/webgpu/draw-indexed-triangles-expected.html
>@@ -1,12 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is completely green.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-</script>
>\ No newline at end of file
>+drawGreenSquareInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/draw-indexed-triangles.html b/LayoutTests/webgpu/draw-indexed-triangles.html
>index 67387125dd7d0f16a9501b8e20aeb6ace09c5161..11a2b46eef1112f478b74803bb05ba3597ac4332 100644
>--- a/LayoutTests/webgpu/draw-indexed-triangles.html
>+++ b/LayoutTests/webgpu/draw-indexed-triangles.html
>@@ -92,9 +92,9 @@ function createVertexInputDescriptor() {
>     };
> }
> 
>-async function test() {
>-    const device = await getBasicDevice();
>-    const canvas = document.querySelector("canvas");
>+const canvas = document.querySelector("canvas");
>+
>+async function test(device) {
>     const swapChain = createBasicSwapChain(canvas, device);
>     // FIXME: Replace with non-MSL shaders.
>     const shaderModule = device.createShaderModule({ code: shaderCode });
>@@ -114,10 +114,16 @@ async function test() {
>     vertexBuffer.destroy();
> }
> 
>-test().then(function() {
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>+getBasicDevice().then(function(device) {
>+    test(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
> }, function() {
>+    drawGreenSquareInSoftware(canvas);
>     if (window.testRunner)
>         testRunner.notifyDone();
> });
>diff --git a/LayoutTests/webgpu/js/create-worker-device.js b/LayoutTests/webgpu/js/create-worker-device.js
>deleted file mode 100644
>index ebf75fba97ffe369857987df4ba013604398151c..0000000000000000000000000000000000000000
>--- a/LayoutTests/webgpu/js/create-worker-device.js
>+++ /dev/null
>@@ -1,11 +0,0 @@
>-async function tryCreateDevice() {
>-    if (!navigator.gpu)
>-        postMessage(false);
>-
>-    const adapter = await navigator.gpu.requestAdapter();
>-    await adapter.requestDevice();
>-
>-    postMessage(true);
>-}
>-
>-tryCreateDevice();
>diff --git a/LayoutTests/webgpu/js/webgpu-functions.js b/LayoutTests/webgpu/js/webgpu-functions.js
>index 8a53bd7cf649b964b8024a82246b54c6bc9d6e42..646e801c165d5c30ea850e8ea3fd940d02f4049d 100644
>--- a/LayoutTests/webgpu/js/webgpu-functions.js
>+++ b/LayoutTests/webgpu/js/webgpu-functions.js
>@@ -4,6 +4,52 @@ async function getBasicDevice() {
>     return device;
> }
> 
>+function drawWhiteSquareOnBlueBackgroundInSoftware(canvas) {
>+    const context = canvas.getContext("2d");
>+    context.fillStyle = "blue";
>+    context.fillRect(0, 0, 400, 400);
>+    context.fillStyle = "white";
>+    context.fillRect(100, 100, 200, 200);
>+}
>+
>+function drawBlackSquareOnBlueBackgroundInSoftware(canvas) {
>+    const context = canvas.getContext("2d");
>+    context.fillStyle = "blue";
>+    context.fillRect(0, 0, 400, 400);
>+    context.fillStyle = "black";
>+    context.fillRect(100, 100, 200, 200);
>+}
>+
>+function drawGreenSquareInSoftware(canvas) {
>+    const context = canvas.getContext('2d');
>+    context.fillStyle = 'rgb(0, 255, 0)';
>+    context.fillRect(0, 0, canvas.width, canvas.height);
>+}
>+
>+function drawGreenAndBlueCheckerboardInSoftware(canvas) {
>+    const context = canvas.getContext('2d');
>+
>+    context.fillStyle = 'rgb(0, 255, 0)';
>+    context.fillRect(0, 0, canvas.width, canvas.height);
>+
>+    const numColumns = 4;
>+    const numRows = 4;
>+    context.beginPath();
>+    context.fillStyle = 'rgb(0, 0, 255)';
>+    for (let x = 0; x < numColumns; ++x) {
>+        for (let y = 0; y < numRows; ++y) {
>+            if (x % 2 == 0 && y % 2 == 0 || x % 2 == 1 && y % 2 == 1)
>+                context.rect(
>+                    x * canvas.width / numColumns,
>+                    y * canvas.height / numRows,
>+                    canvas.width / numColumns,
>+                    canvas.height / numRows
>+                    );
>+        }
>+    }
>+    context.fill();
>+}
>+
> function createBasicSwapChain(canvas, device) {
>     const context = canvas.getContext("gpu");
>     return context.configureSwapChain({ device: device, format: "bgra8unorm" });
>@@ -102,4 +148,4 @@ async function mapWriteDataToBuffer(buffer, data, offset = 0) {
>     const writeArray = new Uint8Array(arrayBuffer);
>     writeArray.set(new Uint8Array(data), offset);
>     buffer.unmap();
>-}
>\ No newline at end of file
>+}
>diff --git a/LayoutTests/webgpu/map-read-buffers.html b/LayoutTests/webgpu/map-read-buffers.html
>index 442549dd4f48db1b94327f3fc31d1b3c331b5627..f8cb71eb13233bb741b9914452e6a9355dbbf1df 100644
>--- a/LayoutTests/webgpu/map-read-buffers.html
>+++ b/LayoutTests/webgpu/map-read-buffers.html
>@@ -7,101 +7,113 @@
> <script src="js/webgpu-functions.js"></script>
> <script>
> async function runTests() {
>-    const device =  await getBasicDevice();
>-
>     // Basic mapReadAsync functionality
>     promise_test(async () => {
>-        const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_READ });
>-        assert_true(buffer instanceof GPUBuffer, "createBuffer returned a GPUBuffer");
>-
>-        let arrayBuffer = await buffer.mapReadAsync();
>-        assert_true(arrayBuffer instanceof ArrayBuffer, "first mapReadAsync resolved successfully");
>+        getBasicDevice().then(async function(device) {
>+            const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_READ });
>+            assert_true(buffer instanceof GPUBuffer, "createBuffer returned a GPUBuffer");
> 
>-        const readArray = new Float32Array(arrayBuffer);
>-        assert_equals(readArray[0], 0, "successfully access a value from a map read");
>+            let arrayBuffer = await buffer.mapReadAsync();
>+            assert_true(arrayBuffer instanceof ArrayBuffer, "first mapReadAsync resolved successfully");
> 
>-        buffer.unmap();
>+            const readArray = new Float32Array(arrayBuffer);
>+            assert_equals(readArray[0], 0, "successfully access a value from a map read");
> 
>-        const promise = buffer.mapReadAsync(); // This will eventually reject due to buffer.destroy()
>+            buffer.unmap();
> 
>-        buffer.destroy();
>+            const promise = buffer.mapReadAsync(); // This will eventually reject due to buffer.destroy()
> 
>-        await promise.then(() => {
>-            assert_unreached("Buffer was destroyed!");
>-        }, () => {});
>+            buffer.destroy();
> 
>+            await promise.then(() => {
>+                assert_unreached("Buffer was destroyed!");
>+            }, () => {});
>+        }, function() {
>+        });
>     }, "mapReadAsync, unmap, and destroy on a GPUBuffer.");
> 
>     // GPUDevice.createBufferMapped
>     promise_test(async () => {
>-        const bufferResult = device.createBufferMapped({ size: 16, usage: GPUBufferUsage.MAP_READ });
>-        const buffer = bufferResult[0];
>-        const arrayBuffer = bufferResult[1];
>-
>-        assert_true(buffer instanceof GPUBuffer, "createBufferMapped returned a GPUBuffer");
>-        assert_true(arrayBuffer instanceof ArrayBuffer, "createBufferMapped returned an ArrayBuffer");
>-
>-        let array = new Float32Array(arrayBuffer);
>-        array.set([1, 2, 3, 4]);
>-
>-        // Buffer should already be "mapped".
>-        await buffer.mapReadAsync().then(() => {
>-            assert_unreached("GPUBuffer created via GPUBufferMapped cannot be mapped until after first unmap!");
>-        }, () => {});
>-
>-        buffer.unmap();
>-
>-        // Buffer should not be re-mappable for writes.
>-        await buffer.mapWriteAsync().then(() => {
>-            assert_unreached("Buffer was not created with MAP_WRITE!");
>-        }, () => {});
>-
>-        // Read results of original writes.
>-        let resultArrayBuffer = await buffer.mapReadAsync();
>-        const resultArray = new Float32Array(resultArrayBuffer);
>-        resultArray.forEach((v, i) => {
>-            assert_equals(v, array[i], "Successfully map-read value written to GPUBuffer mapped on creation");
>-        })
>-        
>-        buffer.destroy();
>+        getBasicDevice().then(async function(device) {
>+            const bufferResult = device.createBufferMapped({ size: 16, usage: GPUBufferUsage.MAP_READ });
>+            const buffer = bufferResult[0];
>+            const arrayBuffer = bufferResult[1];
>+
>+            assert_true(buffer instanceof GPUBuffer, "createBufferMapped returned a GPUBuffer");
>+            assert_true(arrayBuffer instanceof ArrayBuffer, "createBufferMapped returned an ArrayBuffer");
>+
>+            let array = new Float32Array(arrayBuffer);
>+            array.set([1, 2, 3, 4]);
>+
>+            // Buffer should already be "mapped".
>+            await buffer.mapReadAsync().then(() => {
>+                assert_unreached("GPUBuffer created via GPUBufferMapped cannot be mapped until after first unmap!");
>+            }, () => {});
>+
>+            buffer.unmap();
>+
>+            // Buffer should not be re-mappable for writes.
>+            await buffer.mapWriteAsync().then(() => {
>+                assert_unreached("Buffer was not created with MAP_WRITE!");
>+            }, () => {});
>+
>+            // Read results of original writes.
>+            let resultArrayBuffer = await buffer.mapReadAsync();
>+            const resultArray = new Float32Array(resultArrayBuffer);
>+            resultArray.forEach((v, i) => {
>+                assert_equals(v, array[i], "Successfully map-read value written to GPUBuffer mapped on creation");
>+            })
>+            
>+            buffer.destroy();
>+        }, function() {
>+        });
>     }, "GPUBuffer.mapReadAsync on a buffer created via GPUDevice.createBufferMapped.");
> 
>     /* Basic validation */
>     // FIXME: Test invalid combinations of GPUBufferUsage after implementing error handling.
> 
>     promise_test(async () => {
>-        const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_WRITE });
>+        getBasicDevice().then(async function(device) {
>+            const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_WRITE });
> 
>-        await buffer.mapReadAsync().then(() => {
>-            assert_unreached("Buffer was not created with MAP_READ!");
>-        }, () => {});
>+            await buffer.mapReadAsync().then(() => {
>+                assert_unreached("Buffer was not created with MAP_READ!");
>+            }, () => {});
>+        }, function() {
>+        });
>     }, "Reject a map read on a buffer not created with MAP_READ usage.");
> 
>     /* Extended unmap/destroy and promise settling testing */
> 
>     promise_test(async () => {
>-        const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_READ });
>-
>-        buffer.mapReadAsync().then(() => {
>-            buffer.unmap();
>-        }, () => { 
>-            assert_unreached(); 
>+        getBasicDevice().then(async function(device) {
>+            const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_READ });
>+
>+            buffer.mapReadAsync().then(() => {
>+                buffer.unmap();
>+            }, () => {
>+                assert_unreached();
>+            });
>+
>+            await buffer.mapReadAsync().then(() => {
>+                assert_unreached("Map operation was invalid!"); // buffer was still in mapped state during promise creation
>+            }, () => {});
>+        }, function() {
>         });
>-
>-        await buffer.mapReadAsync().then(() => {
>-            assert_unreached("Map operation was invalid!"); // buffer was still in mapped state during promise creation
>-        }, () => {});
>     }, "Reject a map read on a mapped GPUBuffer.");
> 
>     promise_test(async () => {
>-        const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_READ });
>+        getBasicDevice().then(async function(device) {
>+            const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_READ });
> 
>-        const promise = buffer.mapReadAsync();
>-        buffer.unmap();
>+            const promise = buffer.mapReadAsync();
>+            buffer.unmap();
> 
>-        await promise.then(() => {
>-            assert_unreached("Buffer was unmapped!"); // buffer was unmapped, which rejects pending promises
>-        },() => {});
>+            await promise.then(() => {
>+                assert_unreached("Buffer was unmapped!"); // buffer was unmapped, which rejects pending promises
>+            },() => {});
>+        }, function() {
>+        });
>     }, "Reject a pending map read if GPUBuffer is unmapped.");
> }
> 
>diff --git a/LayoutTests/webgpu/map-write-buffers.html b/LayoutTests/webgpu/map-write-buffers.html
>index 887967cf5c0dbe2c82c68b4be6aa7b76cdf802c5..2aeb4a733bd6cb61e2a1e45abd247078894a7d8c 100644
>--- a/LayoutTests/webgpu/map-write-buffers.html
>+++ b/LayoutTests/webgpu/map-write-buffers.html
>@@ -7,69 +7,78 @@
> <script src="js/webgpu-functions.js"></script>
> <script>
> async function runTests() {
>-    const device =  await getBasicDevice();
>-
>     // Basic mapWriteAsync functionality
>     promise_test(async () => {
>-        const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_WRITE });
>-        assert_true(buffer instanceof GPUBuffer, "createBuffer returned a GPUBuffer");
>-
>-        let arrayBuffer = await buffer.mapWriteAsync();
>-
>-        assert_true(arrayBuffer instanceof ArrayBuffer, "first mapWriteAsync resolved successfully");
>-        
>-        let array = new Float32Array(arrayBuffer);
>-        assert_equals(array[0], 0, "mapWriteAsync zeroed out storage");
>-        array.set([1, 2, 3, 4]);
>-        
>-        buffer.unmap();
>-
>-        const promise = buffer.mapWriteAsync(); // This will eventually reject due to buffer.destroy()
>+        getBasicDevice().then(async function(device) {
>+            const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_WRITE });
>+            assert_true(buffer instanceof GPUBuffer, "createBuffer returned a GPUBuffer");
>+
>+            let arrayBuffer = await buffer.mapWriteAsync();
>+
>+            assert_true(arrayBuffer instanceof ArrayBuffer, "first mapWriteAsync resolved successfully");
>+            
>+            let array = new Float32Array(arrayBuffer);
>+            assert_equals(array[0], 0, "mapWriteAsync zeroed out storage");
>+            array.set([1, 2, 3, 4]);
>+            
>+            buffer.unmap();
> 
>-        buffer.destroy();
>+            const promise = buffer.mapWriteAsync(); // This will eventually reject due to buffer.destroy()
> 
>-        await promise.then(() => {
>-            assert_unreached("Buffer was destroyed!");
>-        }, () => {});
>+            buffer.destroy();
> 
>+            await promise.then(() => {
>+                assert_unreached("Buffer was destroyed!");
>+            }, () => {});
>+        }, function() {
>+        });
>     }, "Map write, unmap, and destroy a GPUBuffer.");
> 
>     /* Basic validation */
>     // FIXME: Test invalid combinations of GPUBufferUsage after implementing error handling.
> 
>     promise_test(async () => {
>-        const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_READ });
>+        getBasicDevice().then(async function(device) {
>+            const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_READ });
> 
>-        await buffer.mapWriteAsync().then(() => {
>-            assert_unreached("Buffer was not created with MAP_WRITE!");
>-        }, () => {});
>+            await buffer.mapWriteAsync().then(() => {
>+                assert_unreached("Buffer was not created with MAP_WRITE!");
>+            }, () => {});
>+        }, function() {
>+        });
>     }, "Reject a map write on a buffer not created with MAP_WRITE usage.");
> 
>     /* Extended unmap/destroy and promise settling testing */
> 
>     promise_test(async () => {
>-        const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_WRITE });
>-
>-        buffer.mapWriteAsync().then(() => {
>-            buffer.unmap();
>-        }, () => { 
>-            assert_unreached(); 
>+        getBasicDevice().then(async function(device) {
>+            const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_WRITE });
>+
>+            buffer.mapWriteAsync().then(() => {
>+                buffer.unmap();
>+            }, () => {
>+                assert_unreached();
>+            });
>+
>+            await buffer.mapWriteAsync().then(() => {
>+                assert_unreached("Map operation was invalid!"); // buffer was still in mapped state during promise creation
>+            }, () => {});
>+        }, function() {
>         });
>-
>-        await buffer.mapWriteAsync().then(() => {
>-            assert_unreached("Map operation was invalid!"); // buffer was still in mapped state during promise creation
>-        }, () => {});
>     }, "Reject a map write on a mapped GPUBuffer.");
> 
>     promise_test(async () => {
>-        const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_WRITE });
>+        getBasicDevice().then(async function(device) {
>+            const buffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_WRITE });
> 
>-        const promise = buffer.mapWriteAsync();
>-        buffer.unmap();
>+            const promise = buffer.mapWriteAsync();
>+            buffer.unmap();
> 
>-        await promise.then(() => {
>-            assert_unreached("Buffer was unmapped!"); // buffer was unmapped, which rejects pending promises
>-        },() => {});
>+            await promise.then(() => {
>+                assert_unreached("Buffer was unmapped!"); // buffer was unmapped, which rejects pending promises
>+            },() => {});
>+        }, function() {
>+        });
>     }, "Reject a pending map write if GPUBuffer is unmapped.");
> }
> 
>diff --git a/LayoutTests/webgpu/pipeline-layouts.html b/LayoutTests/webgpu/pipeline-layouts.html
>index 0d24f4bd712e28684dae9b8adead05c11b30935f..4d5486608282889eb5b825124822a876b31faba0 100644
>--- a/LayoutTests/webgpu/pipeline-layouts.html
>+++ b/LayoutTests/webgpu/pipeline-layouts.html
>@@ -22,12 +22,14 @@ test(() => {
> }, "Create a basic GPUBindGroupLayoutDescriptor."); 
> 
> promise_test(async () => {
>-    const device = await getBasicDevice();
>-    const bindGroupLayout = device.createBindGroupLayout({ bindings: [createBindGroupLayoutBinding()] });
>-    assert_true(bindGroupLayout instanceof GPUBindGroupLayout, "createBindGroupLayout returned a GPUBindGroupLayout");
>+    getBasicDevice().then(async function(device) {
>+        const bindGroupLayout = device.createBindGroupLayout({ bindings: [createBindGroupLayoutBinding()] });
>+        assert_true(bindGroupLayout instanceof GPUBindGroupLayout, "createBindGroupLayout returned a GPUBindGroupLayout");
> 
>-    const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });
>-    assert_true(pipelineLayout instanceof GPUPipelineLayout, "createPipelineLayout returned a GPUPipelineLayout");
>+        const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });
>+        assert_true(pipelineLayout instanceof GPUPipelineLayout, "createPipelineLayout returned a GPUPipelineLayout");
>+    }, function() {
>+    });
> }, "Create a basic GPUPipelineLayout wtih a GPUDevice.");
> </script>
>-</body>
>\ No newline at end of file
>+</body>
>diff --git a/LayoutTests/webgpu/propertyresolver/ander-abstract-lvalue-expected.html b/LayoutTests/webgpu/propertyresolver/ander-abstract-lvalue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/ander-abstract-lvalue-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/ander-abstract-lvalue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/ander-abstract-lvalue.html b/LayoutTests/webgpu/propertyresolver/ander-abstract-lvalue.html
>index 444c3141248fab593ddecce1ad90ae4e922629d0..a0988ad670d0d0189dc37a335689d25562f86738 100644
>--- a/LayoutTests/webgpu/propertyresolver/ander-abstract-lvalue.html
>+++ b/LayoutTests/webgpu/propertyresolver/ander-abstract-lvalue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -37,10 +38,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b.w.y, b.w.y, b.w.y, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -84,7 +85,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -106,14 +106,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/ander-expected.html b/LayoutTests/webgpu/propertyresolver/ander-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/ander-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/ander-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/ander-lvalue-3-levels-expected.html b/LayoutTests/webgpu/propertyresolver/ander-lvalue-3-levels-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/ander-lvalue-3-levels-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/ander-lvalue-3-levels-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/ander-lvalue-3-levels.html b/LayoutTests/webgpu/propertyresolver/ander-lvalue-3-levels.html
>index 00107b85b0a50f24242c80022bcc9c2176d33095..d0901c41ed4b8abfcb74de70444c4519dd7ca7d1 100644
>--- a/LayoutTests/webgpu/propertyresolver/ander-lvalue-3-levels.html
>+++ b/LayoutTests/webgpu/propertyresolver/ander-lvalue-3-levels.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -40,10 +41,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b.q.w.y, b.q.w.y, b.q.w.y, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -87,7 +88,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -109,14 +109,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/ander-lvalue-expected.html b/LayoutTests/webgpu/propertyresolver/ander-lvalue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/ander-lvalue-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/ander-lvalue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/ander-lvalue.html b/LayoutTests/webgpu/propertyresolver/ander-lvalue.html
>index c81dcf214952f61e393a03e0de4b2431d3a8505d..09569940c7bd1b80d44afc52a1df95903665c471 100644
>--- a/LayoutTests/webgpu/propertyresolver/ander-lvalue.html
>+++ b/LayoutTests/webgpu/propertyresolver/ander-lvalue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -32,10 +33,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b.w.y, b.w.y, b.w.y, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -79,7 +80,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -101,14 +101,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/ander.html b/LayoutTests/webgpu/propertyresolver/ander.html
>index a6c0126fab527f7b683c61cae1db0df64bd171ed..60f3944963993845da85bcc36d45aa3d02b7726d 100644
>--- a/LayoutTests/webgpu/propertyresolver/ander.html
>+++ b/LayoutTests/webgpu/propertyresolver/ander.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -28,10 +29,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(generateFoo().y, generateFoo().y, generateFoo().y, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -75,7 +76,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -97,14 +97,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/getter-expected.html b/LayoutTests/webgpu/propertyresolver/getter-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/getter-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/getter-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/getter.html b/LayoutTests/webgpu/propertyresolver/getter.html
>index a5ed9c6490e8e629324b34e8081d84e333804337..adbcec443a566750079b4cbd2d9013a52dd17783 100644
>--- a/LayoutTests/webgpu/propertyresolver/getter.html
>+++ b/LayoutTests/webgpu/propertyresolver/getter.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -24,10 +25,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(f.y, f.y, f.y, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -71,7 +72,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -93,14 +93,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-ander-abstract-lvalue-expected.html b/LayoutTests/webgpu/propertyresolver/indexer-ander-abstract-lvalue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-ander-abstract-lvalue-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-ander-abstract-lvalue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-ander-abstract-lvalue.html b/LayoutTests/webgpu/propertyresolver/indexer-ander-abstract-lvalue.html
>index 6a56a6aea54987b746c6476488d267c75139d742..89fb8f1be6ca3a83065abc0ef5818043bea2eca9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-ander-abstract-lvalue.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-ander-abstract-lvalue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -37,10 +38,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b[2][3], b[2][3], b[2][3], 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -84,7 +85,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -106,14 +106,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-ander-expected.html b/LayoutTests/webgpu/propertyresolver/indexer-ander-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-ander-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-ander-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-3-levels-expected.html b/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-3-levels-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-3-levels-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-3-levels-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-3-levels.html b/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-3-levels.html
>index bec5e40ac21f5da1aaa577291a15a869ec3aaea2..7baab5b959cf78f00532f4c96b4bda5a773f9f19 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-3-levels.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-3-levels.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -40,10 +41,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b[1][2][3], b[1][2][3], b[1][2][3], 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -87,7 +88,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -109,14 +109,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-expected.html b/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue.html b/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue.html
>index f32edf6a34014715eb1d60627f3b53843fc9a34b..45bb1ff2e0e40c3c70f214dfa778a212d39eef61 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-ander-lvalue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -32,10 +33,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b[1][2], b[1][2], b[1][2], 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -79,7 +80,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -101,14 +101,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-ander.html b/LayoutTests/webgpu/propertyresolver/indexer-ander.html
>index a3e78642ceac5326ef76f24f117d53d179ec7835..cf835d9044e4fde037c8d1c97a18e9c06e4eb687 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-ander.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-ander.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -28,10 +29,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(generateFoo()[0], generateFoo()[1], generateFoo()[2], 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -75,7 +76,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -97,14 +97,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-getter-expected.html b/LayoutTests/webgpu/propertyresolver/indexer-getter-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-getter-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-getter-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-getter.html b/LayoutTests/webgpu/propertyresolver/indexer-getter.html
>index f79f5d5ba240d4df9032e8e1d39e59cf472660f0..320ef8b4af54f37fcc1097c9ab716507b63d1846 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-getter.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-getter.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -23,10 +24,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(f[1], f[1], f[1], 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -70,7 +71,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -92,14 +92,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels-expected.html b/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels.html b/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels.html
>index 8596867303a92a06391430d0369204b251e24d4c..37cc3ca4c42b59ece258d615b65e84533ae2159b 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-3-levels.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -55,10 +56,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b[2][3][4], b[2][3][4], b[2][3][4], 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -102,7 +103,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -124,14 +124,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-expected.html b/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue.html b/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue.html
>index faed73ef0db60a39dc1e587a8b4700ed66cd1a12..1e6bd21f67ed7e833a877b0f8af4ee75d108898c 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-setter-abstract-lvalue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -42,10 +43,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b[2][3], b[2][3], b[2][3], 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -89,7 +90,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -111,14 +111,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-setter-expected.html b/LayoutTests/webgpu/propertyresolver/indexer-setter-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-setter-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-setter-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-setter-lvalue-expected.html b/LayoutTests/webgpu/propertyresolver/indexer-setter-lvalue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-setter-lvalue-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-setter-lvalue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-setter-lvalue.html b/LayoutTests/webgpu/propertyresolver/indexer-setter-lvalue.html
>index f72e88bf30199acc65d424dbc6ba155f9ce97936..9be5b8c479e23c06c352f22cd779f89493a81278 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-setter-lvalue.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-setter-lvalue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -37,10 +38,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b[2][3], b[2][3], b[2][3], 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -84,7 +85,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -106,14 +106,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/indexer-setter.html b/LayoutTests/webgpu/propertyresolver/indexer-setter.html
>index 522feff598acf0f47bf86d3f449f39917427c38b..f2d5d50a1c10a1819f25ec3116301e5272bc8f56 100644
>--- a/LayoutTests/webgpu/propertyresolver/indexer-setter.html
>+++ b/LayoutTests/webgpu/propertyresolver/indexer-setter.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -40,10 +41,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(foo.x, foo.x, foo.x, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -87,7 +88,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -109,14 +109,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-3-levels-expected.html b/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-3-levels-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-3-levels-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-3-levels-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-3-levels.html b/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-3-levels.html
>index 22a3c63498ce3c5405cc977cc5281fbaee28cd98..593245ae775e4c35f95cdfa3490fb69cbf93780f 100644
>--- a/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-3-levels.html
>+++ b/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-3-levels.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -55,10 +56,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b.q.w.y, b.q.w.y, b.q.w.y, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -102,7 +103,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -124,14 +124,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-expected.html b/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue.html b/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue.html
>index 82705af1e36ff7c9b0be194402a4f73418f4a2dd..1b0fdb2c4bde8dbef2e6a06c31cb864af6f5edc0 100644
>--- a/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue.html
>+++ b/LayoutTests/webgpu/propertyresolver/setter-abstract-lvalue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -42,10 +43,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b.w.y, b.w.y, b.w.y, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -89,7 +90,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -111,14 +111,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/propertyresolver/setter-lvalue-expected.html b/LayoutTests/webgpu/propertyresolver/setter-lvalue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..f3e7be7f416aa55e3cbfa54d83e92c3aea33c0f9 100644
>--- a/LayoutTests/webgpu/propertyresolver/setter-lvalue-expected.html
>+++ b/LayoutTests/webgpu/propertyresolver/setter-lvalue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/propertyresolver/setter-lvalue.html b/LayoutTests/webgpu/propertyresolver/setter-lvalue.html
>index 1e46ae5949bc8cc5ba8edbb9cd2735b0348747e1..e19cf7cb3c8687b977eafeccce7cada28525a760 100644
>--- a/LayoutTests/webgpu/propertyresolver/setter-lvalue.html
>+++ b/LayoutTests/webgpu/propertyresolver/setter-lvalue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="../js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -37,10 +38,10 @@ fragment float4 fragmentShader() : SV_Target 0 {
>     return float4(b.w.y, b.w.y, b.w.y, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -84,7 +85,6 @@ async function start() {
>     vertexBufferFloat32Array[15] = 1;
>     vertexBuffer.unmap();
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -106,14 +106,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/queue-creation.html b/LayoutTests/webgpu/queue-creation.html
>index db35b4ee4946145c744632d2c84f10892e659055..1d3c3cdb9ca415d72c4e79e490aa3f22dce83f35 100644
>--- a/LayoutTests/webgpu/queue-creation.html
>+++ b/LayoutTests/webgpu/queue-creation.html
>@@ -4,6 +4,7 @@
> <body>
> <script src="../resources/testharness.js"></script>
> <script src="../resources/testharnessreport.js"></script>
>+<script src="js/webgpu-functions.js"></script>
> <script>
> 
> 'use strict';
>@@ -14,17 +15,14 @@ promise_test(async t => {
>     const context = document.createElement("canvas").getContext("gpu");
>     assert_true(context instanceof GPUCanvasContext, "getContext returned a GPUCanvasContext.");
> 
>-    const adapter = await navigator.gpu.requestAdapter({});
>-    assert_true(adapter instanceof GPUAdapter, "requestAdapter returned a GPUAdapter.");
>+    getBasicDevice().then(async function(device) {
>+        const queue = device.getQueue();
>+        assert_true(queue instanceof GPUQueue, "getQueue returned a GPUQueue.");
> 
>-    const device = await adapter.requestDevice();
>-    assert_true(device instanceof GPUDevice, "requestDevice returned a GPUDevice.");
>-
>-    const queue = device.getQueue();
>-    assert_true(queue instanceof GPUQueue, "getQueue returned a GPUQueue.");
>-
>-    queue.label = "Example label";
>-    assert_equals(queue.label, "Example label", "queue.label was set.");
>+        queue.label = "Example label";
>+        assert_equals(queue.label, "Example label", "queue.label was set.");
>+    }, function() {
>+    });
> }, "getQueue() on GPUDevice.");
> 
> </script>
>diff --git a/LayoutTests/webgpu/render-command-encoding.html b/LayoutTests/webgpu/render-command-encoding.html
>index 7c600df11328c15bdda6d482cf30abe933347440..09625ee91c4902f5b8e45ee6b0ce00ae9a9131ea 100644
>--- a/LayoutTests/webgpu/render-command-encoding.html
>+++ b/LayoutTests/webgpu/render-command-encoding.html
>@@ -27,21 +27,22 @@ fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
> }
> `
> promise_test(async () => {
>-    const device = await getBasicDevice();
>-
>-    const canvas = document.createElement("canvas");
>-    const swapChain = createBasicSwapChain(canvas, device);
>-    const shaderModule = device.createShaderModule({ code: shaders });
>-    const pipeline = createBasicPipeline(shaderModule, device);
>-
>-    const commandEncoder = device.createCommandEncoder();
>-    assert_true(commandEncoder instanceof GPUCommandEncoder, "createCommandEncoder returned a GPUCommandEncoder");
>-
>-    const encoder = beginBasicRenderPass(swapChain, commandEncoder);
>-    assert_true(encoder instanceof GPURenderPassEncoder, "beginRenderPass() returned a GPURenderPassEncoder");
>-
>-    encoder.setPipeline(pipeline);
>-    encoder.endPass();
>+    getBasicDevice().then(async function(device) {
>+        const canvas = document.createElement("canvas");
>+        const swapChain = createBasicSwapChain(canvas, device);
>+        const shaderModule = device.createShaderModule({ code: shaders });
>+        const pipeline = createBasicPipeline(shaderModule, device);
>+
>+        const commandEncoder = device.createCommandEncoder();
>+        assert_true(commandEncoder instanceof GPUCommandEncoder, "createCommandEncoder returned a GPUCommandEncoder");
>+
>+        const encoder = beginBasicRenderPass(swapChain, commandEncoder);
>+        assert_true(encoder instanceof GPURenderPassEncoder, "beginRenderPass() returned a GPURenderPassEncoder");
>+
>+        encoder.setPipeline(pipeline);
>+        encoder.endPass();
>+    }, function() {
>+    });
> }, "GPURenderPassEncoder created and successfully ended");
> 
> </script>
>diff --git a/LayoutTests/webgpu/render-pipelines.html b/LayoutTests/webgpu/render-pipelines.html
>index 7593956f14f0e30c7404a64ec26ebc97e5b38c8c..4f6c05293d56d8b4cac79fb90957480d0a9db175 100644
>--- a/LayoutTests/webgpu/render-pipelines.html
>+++ b/LayoutTests/webgpu/render-pipelines.html
>@@ -40,15 +40,17 @@ fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
> `
> 
> promise_test(async () => {
>-    const device = await getBasicDevice();
>-    const shaderModule = device.createShaderModule({ code: shaderCode });
>+    getBasicDevice().then(async function(device) {
>+        const shaderModule = device.createShaderModule({ code: shaderCode });
> 
>-    const layoutBinding = { binding: 0, visibility: GPUShaderStageBit.VERTEX, type: "storage-buffer" };
>-    const bindGroupLayout = device.createBindGroupLayout({ bindings: [layoutBinding] });
>-    const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });
>+        const layoutBinding = { binding: 0, visibility: GPUShaderStageBit.VERTEX, type: "storage-buffer" };
>+        const bindGroupLayout = device.createBindGroupLayout({ bindings: [layoutBinding] });
>+        const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });
> 
>-    const pipeline = createBasicPipeline(shaderModule, device, null, pipelineLayout);
>-    assert_true(pipeline instanceof GPURenderPipeline, "Successfully created GPURenderPipeline");
>+        const pipeline = createBasicPipeline(shaderModule, device, null, pipelineLayout);
>+        assert_true(pipeline instanceof GPURenderPipeline, "Successfully created GPURenderPipeline");
>+    }, function() {
>+    });
> }, "Create basic GPURenderPipeline");
> </script>
>-</html>
>\ No newline at end of file
>+</html>
>diff --git a/LayoutTests/webgpu/shader-modules.html b/LayoutTests/webgpu/shader-modules.html
>index 870f888d1e194f8504ad95bc87904ea4a7860b3b..f46a82843d1bb302bb38ea94e4e0367d8154a5f5 100644
>--- a/LayoutTests/webgpu/shader-modules.html
>+++ b/LayoutTests/webgpu/shader-modules.html
>@@ -28,10 +28,11 @@ fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
> `
> 
> promise_test(async () => {
>-    const device = await getBasicDevice();
>-
>-    let shaderModule = device.createShaderModule({ code: shaders });
>-    assert_true(shaderModule instanceof GPUShaderModule, "Shader module created successfully.");
>+    getBasicDevice().then(async function(device) {
>+        let shaderModule = device.createShaderModule({ code: shaders });
>+        assert_true(shaderModule instanceof GPUShaderModule, "Shader module created successfully.");
>+    }, function() {
>+    });
> }, "Test shader code validation when creating modules.");
> </script>
>-</html>
>\ No newline at end of file
>+</html>
>diff --git a/LayoutTests/webgpu/simple-triangle-strip-expected.html b/LayoutTests/webgpu/simple-triangle-strip-expected.html
>index 886f13e8120397a5cc6336c9e2a485e778ba9932..4f60f5a9c517c962eff2a0afd2a94ba5ed230420 100644
>--- a/LayoutTests/webgpu/simple-triangle-strip-expected.html
>+++ b/LayoutTests/webgpu/simple-triangle-strip-expected.html
>@@ -1,12 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is completely green.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-</script>
>\ No newline at end of file
>+drawGreenSquareInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/simple-triangle-strip.html b/LayoutTests/webgpu/simple-triangle-strip.html
>index ebc55067badc9e7e3204282f2172bf7214547614..c8d1e3bfe5dd0b78091cad27c4389b59df14ec07 100644
>--- a/LayoutTests/webgpu/simple-triangle-strip.html
>+++ b/LayoutTests/webgpu/simple-triangle-strip.html
>@@ -45,9 +45,9 @@ fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
> }
> `
> 
>-async function test() {
>-    const device = await getBasicDevice();
>-    const canvas = document.querySelector("canvas");
>+const canvas = document.querySelector("canvas");
>+
>+async function test(device) {
>     const swapChain = createBasicSwapChain(canvas, device);
>     // FIXME: Replace with non-MSL shaders.
>     const shaderModule = device.createShaderModule({ code: shaderCode });
>@@ -60,10 +60,16 @@ async function test() {
>     queue.submit([commandEncoder.finish()]);
> }
> 
>-test().then(function() {
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>+getBasicDevice().then(function(device) {
>+    test(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
> }, function() {
>+    drawGreenSquareInSoftware(canvas);
>     if (window.testRunner)
>         testRunner.notifyDone();
> });
>diff --git a/LayoutTests/webgpu/texture-triangle-strip-expected.html b/LayoutTests/webgpu/texture-triangle-strip-expected.html
>index b69a9c00fb93a6dc8e28e7135d39c630b59baaf2..fc8fe2b9ce36745ef6ed850bb315d23960600800 100644
>--- a/LayoutTests/webgpu/texture-triangle-strip-expected.html
>+++ b/LayoutTests/webgpu/texture-triangle-strip-expected.html
>@@ -1,29 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is a 4 by 4 blue/green checkerboard.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-
>-const numColumns = 4;
>-const numRows = 4;
>-context.beginPath();
>-context.fillStyle = 'rgb(0, 0, 255)';
>-for (let x = 0; x < numColumns; ++x) {
>-    for (let y = 0; y < numRows; ++y) {
>-        if (x % 2 == 0 && y % 2 == 0 || x % 2 == 1 && y % 2 == 1)
>-            context.rect(
>-                x * canvas.width / numColumns, 
>-                y * canvas.height / numRows, 
>-                canvas.width / numColumns, 
>-                canvas.height / numRows
>-                );
>-    }
>-}
>-context.fill();
>-</script>
>\ No newline at end of file
>+drawGreenAndBlueCheckerboardInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/texture-triangle-strip.html b/LayoutTests/webgpu/texture-triangle-strip.html
>index c729d964d408dc206bce58fd039dcd8ecd9be17c..cae04b5b410ef7ed93a1d75922c71677f3bb4d62 100644
>--- a/LayoutTests/webgpu/texture-triangle-strip.html
>+++ b/LayoutTests/webgpu/texture-triangle-strip.html
>@@ -75,9 +75,9 @@ function createVertexInputDescriptor() {
>     return { vertexBuffers: bufferDescriptors };
> }
> 
>-async function test() {
>-    const device = await getBasicDevice();
>-    const canvas = document.querySelector("canvas");
>+const canvas = document.querySelector("canvas");
>+
>+async function test(device) {
>     const swapChain = createBasicSwapChain(canvas, device);
>     // FIXME: Replace with non-MSL shaders.
>     const shaderModule = device.createShaderModule({ code: shaderCode });
>@@ -196,10 +196,16 @@ async function test() {
>     texture.destroy();
> }
> 
>-test().then(function() {
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>+getBasicDevice().then(function(device) {
>+    test(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
> }, function() {
>+    drawGreenAndBlueCheckerboardInSoftware(canvas);
>     if (window.testRunner)
>         testRunner.notifyDone();
> });
>diff --git a/LayoutTests/webgpu/textures-textureviews.html b/LayoutTests/webgpu/textures-textureviews.html
>index 0becd337673fc2c976f2adf5e4718df881ac8e05..a271f76b30b664ad8c99fd2cb7989201ea79a3d7 100644
>--- a/LayoutTests/webgpu/textures-textureviews.html
>+++ b/LayoutTests/webgpu/textures-textureviews.html
>@@ -8,7 +8,7 @@
> <script src="../resources/testharnessreport.js"></script>
> <script>
> const canvas = document.querySelector("canvas");    
>-let device, context;
>+let context;
> 
> let texSize = {
>     width: canvas.width,
>@@ -23,40 +23,51 @@ let texDescriptor = {
> };
> 
> promise_test(async () => {
>-    device = await getBasicDevice();
>-    swapChain = createBasicSwapChain(canvas, device);
>+    getBasicDevice().then(async function(device) {
>+        swapChain = createBasicSwapChain(canvas, device);
> 
>-    const texture = swapChain.getCurrentTexture();
>-    assert_true(texture instanceof GPUTexture, "Successfully acquired next texture.");
>+        const texture = swapChain.getCurrentTexture();
>+        assert_true(texture instanceof GPUTexture, "Successfully acquired next texture.");
> 
>-    const textureView = texture.createDefaultView();
>-    assert_true(textureView instanceof GPUTextureView, "Successfully created texture view from next texture.");
>+        const textureView = texture.createDefaultView();
>+        assert_true(textureView instanceof GPUTextureView, "Successfully created texture view from next texture.");
>+    }, function() {
>+    });
> }, "Create texture view from swap chain.");
> 
> promise_test(async () => {
>-    const depthTexture = device.createTexture(texDescriptor);
>-    assert_true(depthTexture instanceof GPUTexture, "Successfully created depth texture.");
>+    getBasicDevice().then(async function(device) {
>+        const depthTexture = device.createTexture(texDescriptor);
>+        assert_true(depthTexture instanceof GPUTexture, "Successfully created depth texture.");
>+    }, function() {
>+    });
> }, "Create basic depth texture from device.");
> 
> promise_test(async () => {
>-    texDescriptor.sampleCount = 4;
>-    texDescriptor.format = "rgba8unorm";
>-    texDescriptor.usage = GPUTextureUsage.SAMPLED | GPUTextureUsage.TRANSFER_SRC
>+    getBasicDevice().then(async function(device) {
>+        texDescriptor.sampleCount = 4;
>+        texDescriptor.format = "rgba8unorm";
>+        texDescriptor.usage = GPUTextureUsage.SAMPLED | GPUTextureUsage.TRANSFER_SRC
> 
>-    const multisampledTexture = device.createTexture(texDescriptor);
>-    assert_true(multisampledTexture instanceof GPUTexture, "Successfully created multisampled texture.");
>+        const multisampledTexture = device.createTexture(texDescriptor);
>+        assert_true(multisampledTexture instanceof GPUTexture, "Successfully created multisampled texture.");
>+    }, function() {
>+    });
> }, "Create basic 4x multisampled texture.");
> 
> promise_test(async () => {
>-    texDescriptor.size.depth = 3;
>-    texDescriptor.sampleCount = 1;
>-    texDescriptor.dimension = "3d";
>+    getBasicDevice().then(async function(device) {
>+        texDescriptor.size.depth = 3;
>+        texDescriptor.sampleCount = 1;
>+        texDescriptor.dimension = "3d";
> 
>-    const texture3d = device.createTexture(texDescriptor);
>-    assert_true(texture3d instanceof GPUTexture, "Successfully created basic 3D texture.");
>+        const texture3d = device.createTexture(texDescriptor);
>+        assert_true(texture3d instanceof GPUTexture, "Successfully created basic 3D texture.");
>+    }, function() {
>+    });
> }, "Create basic 3D texture from device.");
> 
> // FIXME: Add tests for 1D textures, textureArrays, and GPUTextureViews.
> </script>
> </body>
>-</html>
>\ No newline at end of file
>+</html>
>diff --git a/LayoutTests/webgpu/vertex-buffer-triangle-strip-expected.html b/LayoutTests/webgpu/vertex-buffer-triangle-strip-expected.html
>index 886f13e8120397a5cc6336c9e2a485e778ba9932..4f60f5a9c517c962eff2a0afd2a94ba5ed230420 100644
>--- a/LayoutTests/webgpu/vertex-buffer-triangle-strip-expected.html
>+++ b/LayoutTests/webgpu/vertex-buffer-triangle-strip-expected.html
>@@ -1,12 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is completely green.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-</script>
>\ No newline at end of file
>+drawGreenSquareInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/vertex-buffer-triangle-strip.html b/LayoutTests/webgpu/vertex-buffer-triangle-strip.html
>index 41104fc04361b4435de7f492fdd0c93c50a6e51a..bd335e628c679a190ad796bf502989ee529bd622 100644
>--- a/LayoutTests/webgpu/vertex-buffer-triangle-strip.html
>+++ b/LayoutTests/webgpu/vertex-buffer-triangle-strip.html
>@@ -76,9 +76,9 @@ function createVertexInputDescriptor() {
>     }
> }
> 
>-async function test() {
>-    const device = await getBasicDevice();
>-    const canvas = document.querySelector("canvas");
>+const canvas = document.querySelector("canvas");
>+
>+async function test(device) {
>     const swapChain = createBasicSwapChain(canvas, device);
>     // FIXME: Replace with non-MSL shaders.
>     const shaderModule = device.createShaderModule({ code: shaderCode });
>@@ -93,10 +93,16 @@ async function test() {
>     vertexBuffer.destroy();
> }
> 
>-test().then(function() {
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>+getBasicDevice().then(function(device) {
>+    test(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
> }, function() {
>+    drawGreenSquareInSoftware(canvas);
>     if (window.testRunner)
>         testRunner.notifyDone();
> });
>diff --git a/LayoutTests/webgpu/viewport-scissor-rect-triangle-strip-expected.html b/LayoutTests/webgpu/viewport-scissor-rect-triangle-strip-expected.html
>index b69a9c00fb93a6dc8e28e7135d39c630b59baaf2..fc8fe2b9ce36745ef6ed850bb315d23960600800 100644
>--- a/LayoutTests/webgpu/viewport-scissor-rect-triangle-strip-expected.html
>+++ b/LayoutTests/webgpu/viewport-scissor-rect-triangle-strip-expected.html
>@@ -1,29 +1,10 @@
> <!DOCTYPE html>
> <meta charset="utf-8">
> <title>HTML Reference File</title>
>+<script src="js/webgpu-functions.js"></script>
> <p>Pass if square canvas below is a 4 by 4 blue/green checkerboard.</p>
> <canvas width="400" height="400"></canvas>
> <script>
> const canvas = document.querySelector("canvas");
>-const context = canvas.getContext('2d');
>-
>-context.fillStyle = 'rgb(0, 255, 0)';
>-context.fillRect(0, 0, canvas.width, canvas.height);
>-
>-const numColumns = 4;
>-const numRows = 4;
>-context.beginPath();
>-context.fillStyle = 'rgb(0, 0, 255)';
>-for (let x = 0; x < numColumns; ++x) {
>-    for (let y = 0; y < numRows; ++y) {
>-        if (x % 2 == 0 && y % 2 == 0 || x % 2 == 1 && y % 2 == 1)
>-            context.rect(
>-                x * canvas.width / numColumns, 
>-                y * canvas.height / numRows, 
>-                canvas.width / numColumns, 
>-                canvas.height / numRows
>-                );
>-    }
>-}
>-context.fill();
>-</script>
>\ No newline at end of file
>+drawGreenAndBlueCheckerboardInSoftware(canvas);
>+</script>
>diff --git a/LayoutTests/webgpu/viewport-scissor-rect-triangle-strip.html b/LayoutTests/webgpu/viewport-scissor-rect-triangle-strip.html
>index 4a783d52dff00bf694c70d9ff903087cb129a97c..b9ade87a4a1ad154aefefa82c4e2bad262633664 100644
>--- a/LayoutTests/webgpu/viewport-scissor-rect-triangle-strip.html
>+++ b/LayoutTests/webgpu/viewport-scissor-rect-triangle-strip.html
>@@ -45,8 +45,9 @@ fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
> }
> `;
> 
>-async function test() {
>-    const device = await getBasicDevice();
>+const canvas = document.querySelector("canvas");
>+
>+async function test(device) {
>     const canvas = document.querySelector("canvas");
>     const swapChain = createBasicSwapChain(canvas, device);
>     // FIXME: Replace with non-MSL shaders.
>@@ -96,10 +97,16 @@ async function test() {
>     queue.submit([commandEncoder.finish()]);
> }
> 
>-test().then(function() {
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>+getBasicDevice().then(function(device) {
>+    test(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
> }, function() {
>+    drawGreenAndBlueCheckerboardInSoftware(canvas);
>     if (window.testRunner)
>         testRunner.notifyDone();
> });
>diff --git a/LayoutTests/webgpu/webgpu-enabled-expected.txt b/LayoutTests/webgpu/webgpu-enabled-expected.txt
>deleted file mode 100644
>index 5694c217d3ea001b49531c2816902c05433ca523..0000000000000000000000000000000000000000
>--- a/LayoutTests/webgpu/webgpu-enabled-expected.txt
>+++ /dev/null
>@@ -1,3 +0,0 @@
>-
>-PASS Web GPU is enabled. 
>-
>diff --git a/LayoutTests/webgpu/webgpu-enabled-in-worker-expected.txt b/LayoutTests/webgpu/webgpu-enabled-in-worker-expected.txt
>deleted file mode 100644
>index f4faecc9baf78ccd89ad72127fdc561e8a877ce3..0000000000000000000000000000000000000000
>--- a/LayoutTests/webgpu/webgpu-enabled-in-worker-expected.txt
>+++ /dev/null
>@@ -1,3 +0,0 @@
>-
>-PASS Test if WebGPU is enabled for workers. 
>-
>diff --git a/LayoutTests/webgpu/webgpu-enabled-in-worker.html b/LayoutTests/webgpu/webgpu-enabled-in-worker.html
>deleted file mode 100644
>index 33dc5e674fa0d54fe96a75d05911b45373976ad5..0000000000000000000000000000000000000000
>--- a/LayoutTests/webgpu/webgpu-enabled-in-worker.html
>+++ /dev/null
>@@ -1,20 +0,0 @@
>-<!DOCTYPE html>
>-<html>
>-<meta charset=utf-8>
>-<title>Test if WebGPU is enabled for workers.</title>
>-<script src="../resources/testharness.js"></script>
>-<script src="../resources/testharnessreport.js"></script>
>-<script>
>-if (window.testRunner)
>-    testRunner.waitUntilDone();
>-
>-const worker = new Worker('js/create-worker-device.js');
>-
>-worker.onmessage = event => {
>-    test(() => { assert_true(event.data, "Create GPUDevice with a worker."); });
>-
>-    if (window.testRunner)
>-        testRunner.notifyDone();
>-};
>-</script>
>-</html>
>\ No newline at end of file
>diff --git a/LayoutTests/webgpu/webgpu-enabled.html b/LayoutTests/webgpu/webgpu-enabled.html
>deleted file mode 100644
>index a2434cd88a4e04b686ebf4606a97837c3a902b0b..0000000000000000000000000000000000000000
>--- a/LayoutTests/webgpu/webgpu-enabled.html
>+++ /dev/null
>@@ -1,23 +0,0 @@
>-<!DOCTYPE html>
>-<html>
>-<meta charset=utf-8>
>-<title>Test if WebGPU is enabled.</title>
>-<script src="../resources/testharness.js"></script>
>-<script src="../resources/testharnessreport.js"></script>
>-<script>
>-promise_test(async () => {
>-    const canvas = document.createElement("canvas");
>-    const context = canvas.getContext("gpu");
>-    assert_true(context instanceof GPUCanvasContext, "Created GPUCanvasContext.");
>-
>-    assert_equals(window.gpu, undefined, "window.gpu should not be defined.")
>-    assert_not_equals(navigator.gpu, undefined, "navigator.gpu is defined.");
>-
>-    const adapter = await navigator.gpu.requestAdapter();
>-    assert_true(adapter instanceof GPUAdapter, "Created default GPUAdapter.");
>-    
>-    const device = await adapter.requestDevice();
>-    assert_true(device instanceof GPUDevice, "Created GPUDevice.");
>-}, "Web GPU is enabled.");
>-</script>
>-</html>
>\ No newline at end of file
>diff --git a/LayoutTests/webgpu/whlsl-arbitrary-vertex-attribute-locations-expected.html b/LayoutTests/webgpu/whlsl-arbitrary-vertex-attribute-locations-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-arbitrary-vertex-attribute-locations-expected.html
>+++ b/LayoutTests/webgpu/whlsl-arbitrary-vertex-attribute-locations-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-arbitrary-vertex-attribute-locations.html b/LayoutTests/webgpu/whlsl-arbitrary-vertex-attribute-locations.html
>index 049e1bcb8ba1bc93daa3109e6d85b0c8986d6e16..f1a04147d501065c842baacf13b337eda1460925 100644
>--- a/LayoutTests/webgpu/whlsl-arbitrary-vertex-attribute-locations.html
>+++ b/LayoutTests/webgpu/whlsl-arbitrary-vertex-attribute-locations.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -22,10 +23,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -91,7 +92,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -114,14 +114,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-buffer-fragment-expected.html b/LayoutTests/webgpu/whlsl-buffer-fragment-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-buffer-fragment-expected.html
>+++ b/LayoutTests/webgpu/whlsl-buffer-fragment-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-buffer-fragment.html b/LayoutTests/webgpu/whlsl-buffer-fragment.html
>index 9bb788f5946986fc86da23c20ab24c314fa888b7..e0baba037f1ce2b079a5d692b22cd9e3223f9897 100644
>--- a/LayoutTests/webgpu/whlsl-buffer-fragment.html
>+++ b/LayoutTests/webgpu/whlsl-buffer-fragment.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -14,10 +15,10 @@ fragment float4 fragmentShader(float4 position : SV_Position, constant float[] t
>     return float4(theBuffer[0], theBuffer[0], theBuffer[0], 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -87,7 +88,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -110,14 +110,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-buffer-length-expected.txt b/LayoutTests/webgpu/whlsl-buffer-length-expected.txt
>index 597f203069aa1c97c7f82b3e451e5b828833a450..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-buffer-length-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-buffer-length-expected.txt
>@@ -1,4 +1,4 @@
>-PASS resultUint32Array[0] is 1337
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>diff --git a/LayoutTests/webgpu/whlsl-buffer-length.html b/LayoutTests/webgpu/whlsl-buffer-length.html
>index ba201c4a408df36df0459b5a34a7ce0f109c3483..a322c6dd569fcf61ca71491c35f619eca8375899 100644
>--- a/LayoutTests/webgpu/whlsl-buffer-length.html
>+++ b/LayoutTests/webgpu/whlsl-buffer-length.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -11,11 +12,8 @@ compute void computeShader(device uint[] buffer : register(u0), float3 threadID
>     buffer[0] = buffer.length;
> }
> `;
>-let resultUint32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -55,17 +53,24 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultUint32Array = new Uint32Array(resultsArrayBuffer);
>-    shouldBe("resultUint32Array[0]", "1337");
>+    const resultUint32Array = new Uint32Array(resultsArrayBuffer);
>+    if (resultUint32Array[0] == 1337)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
> window.jsTestIsAsync = true;
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         finishJSTest();
>     }, function() {
>+        testFailed("");
>         finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-buffer-vertex-expected.html b/LayoutTests/webgpu/whlsl-buffer-vertex-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-buffer-vertex-expected.html
>+++ b/LayoutTests/webgpu/whlsl-buffer-vertex-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-buffer-vertex.html b/LayoutTests/webgpu/whlsl-buffer-vertex.html
>index b19270328d9d33593d8ab289b4ed3cca407023d1..000f28081c618e0b0308719976d9bb5c55b7c6c6 100644
>--- a/LayoutTests/webgpu/whlsl-buffer-vertex.html
>+++ b/LayoutTests/webgpu/whlsl-buffer-vertex.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -14,10 +15,10 @@ fragment float4 fragmentShader(float4 position : SV_Position) : SV_Target 0 {
>     return float4(1.0, 1.0, 1.0, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -67,7 +68,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -89,14 +89,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables-expected.txt b/LayoutTests/webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables-expected.txt
>index 4660202c35631cd02cb303c8e3593f6c0015201a..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables-expected.txt
>@@ -1,5 +1,5 @@
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>-PASS resultsFloat32Array[0] is 42
> 
>diff --git a/LayoutTests/webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables.html b/LayoutTests/webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables.html
>index 464e268714df8a14bede67452fb9947352f8c97f..1c799bf5a3c04cb559e077fb320feedd338b0764 100644
>--- a/LayoutTests/webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables.html
>+++ b/LayoutTests/webgpu/whlsl-checker-should-set-type-of-read-modify-write-variables.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -13,11 +14,8 @@ compute void computeShader(device float[] buffer : register(u0), float3 threadID
>     buffer[uint(threadID.x)] = vec[0];
> }
> `;
>-let resultsFloat32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -57,20 +55,24 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>-    shouldBe("resultsFloat32Array[0]", "42");
>+    const resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>+    if (resultsFloat32Array[0] == 42)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
>-if (window.testRunner)
>-    testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>-        if (window.testRunner)
>-            testRunner.notifyDone();
>+window.jsTestIsAsync = true;
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>+        finishJSTest();
>     }, function() {
>-        if (window.testRunner)
>-            testRunner.notifyDone();
>+        testFailed("");
>+        finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-compute-expected.txt b/LayoutTests/webgpu/whlsl-compute-expected.txt
>index a935cf8404f6c968a6d7537d5ead3a299b97ebb0..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-compute-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-compute-expected.txt
>@@ -1,11 +1,4 @@
>-PASS resultsFloat32Array[0] is 2
>-PASS resultsFloat32Array[1] is 4
>-PASS resultsFloat32Array[2] is 6
>-PASS resultsFloat32Array[3] is 8
>-PASS resultsFloat32Array[4] is 5
>-PASS resultsFloat32Array[5] is 6
>-PASS resultsFloat32Array[6] is 7
>-PASS resultsFloat32Array[7] is 8
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>diff --git a/LayoutTests/webgpu/whlsl-compute.html b/LayoutTests/webgpu/whlsl-compute.html
>index 8093e8511c64cd40cde384291e277faa100624cb..b3b0e9a4bbbbe11b32e2bef7cee5d18d924d0d94 100644
>--- a/LayoutTests/webgpu/whlsl-compute.html
>+++ b/LayoutTests/webgpu/whlsl-compute.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -11,11 +12,8 @@ compute void computeShader(device float[] buffer : register(u0), float3 threadID
>     buffer[uint(threadID.x)] = buffer[uint(threadID.x)] * 2.0;
> }
> `;
>-let resultsFloat32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -62,24 +60,31 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>-    shouldBe("resultsFloat32Array[0]", "2");
>-    shouldBe("resultsFloat32Array[1]", "4");
>-    shouldBe("resultsFloat32Array[2]", "6");
>-    shouldBe("resultsFloat32Array[3]", "8");
>-    shouldBe("resultsFloat32Array[4]", "5");
>-    shouldBe("resultsFloat32Array[5]", "6");
>-    shouldBe("resultsFloat32Array[6]", "7");
>-    shouldBe("resultsFloat32Array[7]", "8");
>+    const resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>+    if (resultsFloat32Array[0] == 2
>+        && resultsFloat32Array[1] == 4
>+        && resultsFloat32Array[2] == 6
>+        && resultsFloat32Array[3] == 8
>+        && resultsFloat32Array[4] == 5
>+        && resultsFloat32Array[5] == 6
>+        && resultsFloat32Array[6] == 7
>+        && resultsFloat32Array[7] == 8)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
> window.jsTestIsAsync = true;
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         finishJSTest();
>     }, function() {
>+        testFailed("");
>         finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-dereference-pointer-should-type-check-expected.html b/LayoutTests/webgpu/whlsl-dereference-pointer-should-type-check-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-dereference-pointer-should-type-check-expected.html
>+++ b/LayoutTests/webgpu/whlsl-dereference-pointer-should-type-check-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-dereference-pointer-should-type-check.html b/LayoutTests/webgpu/whlsl-dereference-pointer-should-type-check.html
>index 7b0c10b243968ab988f2d2cee861aae0da7420c7..42cec96ccadfc8fdb9748db5a4aec9e3a9b79c49 100644
>--- a/LayoutTests/webgpu/whlsl-dereference-pointer-should-type-check.html
>+++ b/LayoutTests/webgpu/whlsl-dereference-pointer-should-type-check.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -27,10 +28,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -97,7 +98,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -120,14 +120,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-do-while-loop-break-expected.html b/LayoutTests/webgpu/whlsl-do-while-loop-break-expected.html
>index ca6e6920fb35b5524b183d5f418f1f7e169b9a4d..3bf869a9796f35865b28c6b65f8b202fb9fd22e6 100644
>--- a/LayoutTests/webgpu/whlsl-do-while-loop-break-expected.html
>+++ b/LayoutTests/webgpu/whlsl-do-while-loop-break-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "black";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawBlackSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-do-while-loop-break.html b/LayoutTests/webgpu/whlsl-do-while-loop-break.html
>index 8a114c4b1ca78c07ff3c18f39c7a84cc0bc8da52..3ae43665326a320cfeb7834c5481913d951c72fc 100644
>--- a/LayoutTests/webgpu/whlsl-do-while-loop-break.html
>+++ b/LayoutTests/webgpu/whlsl-do-while-loop-break.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -31,10 +32,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -101,7 +102,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -124,14 +124,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-do-while-loop-continue-expected.html b/LayoutTests/webgpu/whlsl-do-while-loop-continue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-do-while-loop-continue-expected.html
>+++ b/LayoutTests/webgpu/whlsl-do-while-loop-continue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-do-while-loop-continue.html b/LayoutTests/webgpu/whlsl-do-while-loop-continue.html
>index 243c6f1f6ed872e56586b3b4dd4d2979c5249bce..97896e80ee9a97a8dd098212cbafb38aba40a88e 100644
>--- a/LayoutTests/webgpu/whlsl-do-while-loop-continue.html
>+++ b/LayoutTests/webgpu/whlsl-do-while-loop-continue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -33,10 +34,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -103,7 +104,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -126,14 +126,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-do-while-loop-expected.html b/LayoutTests/webgpu/whlsl-do-while-loop-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-do-while-loop-expected.html
>+++ b/LayoutTests/webgpu/whlsl-do-while-loop-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-do-while-loop.html b/LayoutTests/webgpu/whlsl-do-while-loop.html
>index 8bdab798cbb252b39d3f2b0d63dbde8aa1bc7437..d09c5c810fc94778470bf181a22b2c27fc5f4cd1 100644
>--- a/LayoutTests/webgpu/whlsl-do-while-loop.html
>+++ b/LayoutTests/webgpu/whlsl-do-while-loop.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -28,10 +29,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -98,7 +99,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -121,14 +121,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-dont-crash-parsing-enum-expected.html b/LayoutTests/webgpu/whlsl-dont-crash-parsing-enum-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-dont-crash-parsing-enum-expected.html
>+++ b/LayoutTests/webgpu/whlsl-dont-crash-parsing-enum-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-dont-crash-parsing-enum.html b/LayoutTests/webgpu/whlsl-dont-crash-parsing-enum.html
>index 8986f7f0b593c401407e3500009f9ef4de7a18cd..f13f2450126ffc2492bd5e1e188106b1241fd0c7 100644
>--- a/LayoutTests/webgpu/whlsl-dont-crash-parsing-enum.html
>+++ b/LayoutTests/webgpu/whlsl-dont-crash-parsing-enum.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -19,10 +20,10 @@ fragment float4 fragmentShader(float4 position : SV_Position) : SV_Target 0 {
>     return position;
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -92,7 +93,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -115,14 +115,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-dot-expressions-expected.html b/LayoutTests/webgpu/whlsl-dot-expressions-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-dot-expressions-expected.html
>+++ b/LayoutTests/webgpu/whlsl-dot-expressions-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-dot-expressions.html b/LayoutTests/webgpu/whlsl-dot-expressions.html
>index 806b389d10b36e4972ae45cac13d202435d78dcb..af8d50bf8e4549c29052f5ed10d324a27d8a0415 100644
>--- a/LayoutTests/webgpu/whlsl-dot-expressions.html
>+++ b/LayoutTests/webgpu/whlsl-dot-expressions.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -22,10 +23,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -92,7 +93,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -115,14 +115,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors-expected.txt b/LayoutTests/webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors-expected.txt
>index a935cf8404f6c968a6d7537d5ead3a299b97ebb0..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors-expected.txt
>@@ -1,11 +1,4 @@
>-PASS resultsFloat32Array[0] is 2
>-PASS resultsFloat32Array[1] is 4
>-PASS resultsFloat32Array[2] is 6
>-PASS resultsFloat32Array[3] is 8
>-PASS resultsFloat32Array[4] is 5
>-PASS resultsFloat32Array[5] is 6
>-PASS resultsFloat32Array[6] is 7
>-PASS resultsFloat32Array[7] is 8
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>diff --git a/LayoutTests/webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors.html b/LayoutTests/webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors.html
>index 0ea596c76c037aeca109b6b171e7bf6968b20333..bc4238d37fec833fdc9bbac3e26e31be472c1391 100644
>--- a/LayoutTests/webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors.html
>+++ b/LayoutTests/webgpu/whlsl-duplicate-types-should-not-produce-duplicate-ctors.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -32,11 +33,8 @@ compute void computeShader(device float[] buffer : register(u0), float3 threadID
>     }
> }
> `;
>-let resultsFloat32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -83,24 +81,31 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>-    shouldBe("resultsFloat32Array[0]", "2");
>-    shouldBe("resultsFloat32Array[1]", "4");
>-    shouldBe("resultsFloat32Array[2]", "6");
>-    shouldBe("resultsFloat32Array[3]", "8");
>-    shouldBe("resultsFloat32Array[4]", "5");
>-    shouldBe("resultsFloat32Array[5]", "6");
>-    shouldBe("resultsFloat32Array[6]", "7");
>-    shouldBe("resultsFloat32Array[7]", "8");
>+    const resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>+    if (resultsFloat32Array[0] == 2
>+        && resultsFloat32Array[1] == 4
>+        && resultsFloat32Array[2] == 6
>+        && resultsFloat32Array[3] == 8
>+        && resultsFloat32Array[4] == 5
>+        && resultsFloat32Array[5] == 6
>+        && resultsFloat32Array[6] == 7
>+        && resultsFloat32Array[7] == 8)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
> window.jsTestIsAsync = true;
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         finishJSTest();
>     }, function() {
>+        testFailed("");
>         finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-2-expected.html b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-2-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-2-expected.html
>+++ b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-2-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-2.html b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-2.html
>index fd930c863c967f0df6e98b47ff524374bad3a0b3..f98c310586b6e7f276debddeaf0cc95b1e8f2ecd 100644
>--- a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-2.html
>+++ b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-2.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -51,10 +52,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -121,7 +122,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -144,14 +144,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-3-expected.html b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-3-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-3-expected.html
>+++ b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-3-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-3.html b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-3.html
>index 12cdc36c3e88e4f72c99573f438957d1b991c8fc..ca8a28f58ca22a16fdbc5402949466ab0b93e542 100644
>--- a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-3.html
>+++ b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-3.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -52,10 +53,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -122,7 +123,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -145,14 +145,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-expected.html b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-expected.html
>+++ b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime.html b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime.html
>index 5ee0318ea76e989238179df704266ee666d8b786..ea6a2ee8b40736363b4b673430575a124339fd9b 100644
>--- a/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime.html
>+++ b/LayoutTests/webgpu/whlsl-ensure-proper-variable-lifetime.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -51,10 +52,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -121,7 +122,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -144,14 +144,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-expected.html b/LayoutTests/webgpu/whlsl-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-expected.html
>+++ b/LayoutTests/webgpu/whlsl-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-loops-break-expected.html b/LayoutTests/webgpu/whlsl-loops-break-expected.html
>index ca6e6920fb35b5524b183d5f418f1f7e169b9a4d..3bf869a9796f35865b28c6b65f8b202fb9fd22e6 100644
>--- a/LayoutTests/webgpu/whlsl-loops-break-expected.html
>+++ b/LayoutTests/webgpu/whlsl-loops-break-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "black";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawBlackSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-loops-break.html b/LayoutTests/webgpu/whlsl-loops-break.html
>index bd7460e5e359c1f296b9ff08e656bc78580f8115..4534a27749610ad7548ddebd06d78ef8ffadde98 100644
>--- a/LayoutTests/webgpu/whlsl-loops-break.html
>+++ b/LayoutTests/webgpu/whlsl-loops-break.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -32,10 +33,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -102,7 +103,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -125,14 +125,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-loops-continue-expected.html b/LayoutTests/webgpu/whlsl-loops-continue-expected.html
>index ca6e6920fb35b5524b183d5f418f1f7e169b9a4d..3bf869a9796f35865b28c6b65f8b202fb9fd22e6 100644
>--- a/LayoutTests/webgpu/whlsl-loops-continue-expected.html
>+++ b/LayoutTests/webgpu/whlsl-loops-continue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "black";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawBlackSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-loops-continue.html b/LayoutTests/webgpu/whlsl-loops-continue.html
>index 3e34c93024bd5bd0c7dffa851016cd48e9e2a86c..f069c923f180e10d5152e9fa233367cf03952f61 100644
>--- a/LayoutTests/webgpu/whlsl-loops-continue.html
>+++ b/LayoutTests/webgpu/whlsl-loops-continue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -32,10 +33,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -102,7 +103,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -125,14 +125,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-loops-expected.html b/LayoutTests/webgpu/whlsl-loops-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-loops-expected.html
>+++ b/LayoutTests/webgpu/whlsl-loops-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-loops.html b/LayoutTests/webgpu/whlsl-loops.html
>index 4f3afa364d006061473f6921f28f026d26f95769..82fb7675c06c7d8b949d7059a29e5364292b928d 100644
>--- a/LayoutTests/webgpu/whlsl-loops.html
>+++ b/LayoutTests/webgpu/whlsl-loops.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -28,10 +29,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -98,7 +99,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -121,14 +121,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-matrix-2-expected.txt b/LayoutTests/webgpu/whlsl-matrix-2-expected.txt
>index 6e1668a103beb92f76ea7e8d7aa7ffb50e89e241..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-matrix-2-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-matrix-2-expected.txt
>@@ -1,12 +1,5 @@
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>-PASS resultsFloat32Array[0] is 2
>-PASS resultsFloat32Array[1] is 4
>-PASS resultsFloat32Array[2] is 6
>-PASS resultsFloat32Array[3] is 8
>-PASS resultsFloat32Array[4] is 5
>-PASS resultsFloat32Array[5] is 6
>-PASS resultsFloat32Array[6] is 7
>-PASS resultsFloat32Array[7] is 8
> 
>diff --git a/LayoutTests/webgpu/whlsl-matrix-2.html b/LayoutTests/webgpu/whlsl-matrix-2.html
>index 170199948acf0551a6761d06d74f81771c6e1e8e..f456f9533dd5c7fe92763d8c1de182eb34ed57c4 100644
>--- a/LayoutTests/webgpu/whlsl-matrix-2.html
>+++ b/LayoutTests/webgpu/whlsl-matrix-2.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -73,11 +74,8 @@ compute void computeShader(device float[] buffer : register(u0), float3 threadID
>     buffer[uint(threadID.x)] = buffer[uint(threadID.x)] * 2.0;
> }
> `;
>-let resultsFloat32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -124,27 +122,31 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>-    shouldBe("resultsFloat32Array[0]", "2");
>-    shouldBe("resultsFloat32Array[1]", "4");
>-    shouldBe("resultsFloat32Array[2]", "6");
>-    shouldBe("resultsFloat32Array[3]", "8");
>-    shouldBe("resultsFloat32Array[4]", "5");
>-    shouldBe("resultsFloat32Array[5]", "6");
>-    shouldBe("resultsFloat32Array[6]", "7");
>-    shouldBe("resultsFloat32Array[7]", "8");
>+    const resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>+    if (resultsFloat32Array[0] == 2
>+        && resultsFloat32Array[1] == 4
>+        && resultsFloat32Array[2] == 6
>+        && resultsFloat32Array[3] == 8
>+        && resultsFloat32Array[4] == 5
>+        && resultsFloat32Array[5] == 6
>+        && resultsFloat32Array[6] == 7
>+        && resultsFloat32Array[7] == 8)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
>-if (window.testRunner)
>-    testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>-        if (window.testRunner)
>-            testRunner.notifyDone();
>+window.jsTestIsAsync = true;
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>+        finishJSTest();
>     }, function() {
>-        if (window.testRunner)
>-            testRunner.notifyDone();
>+        testFailed("");
>+        finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-matrix-expected.txt b/LayoutTests/webgpu/whlsl-matrix-expected.txt
>index 6e1668a103beb92f76ea7e8d7aa7ffb50e89e241..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-matrix-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-matrix-expected.txt
>@@ -1,12 +1,5 @@
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>-PASS resultsFloat32Array[0] is 2
>-PASS resultsFloat32Array[1] is 4
>-PASS resultsFloat32Array[2] is 6
>-PASS resultsFloat32Array[3] is 8
>-PASS resultsFloat32Array[4] is 5
>-PASS resultsFloat32Array[5] is 6
>-PASS resultsFloat32Array[6] is 7
>-PASS resultsFloat32Array[7] is 8
> 
>diff --git a/LayoutTests/webgpu/whlsl-matrix.html b/LayoutTests/webgpu/whlsl-matrix.html
>index 130ac6659c3624a57c80f8ef49dbe5f8bf0ddd9a..f47b06ce8f3936f95406623c83c7de5cd23fd5e6 100644
>--- a/LayoutTests/webgpu/whlsl-matrix.html
>+++ b/LayoutTests/webgpu/whlsl-matrix.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -85,11 +86,8 @@ compute void computeShader(device float[] buffer : register(u0), float3 threadID
>     buffer[uint(threadID.x)] = buffer[uint(threadID.x)] * 2.0;
> }
> `;
>-let resultsFloat32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -136,27 +134,31 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>-    shouldBe("resultsFloat32Array[0]", "2");
>-    shouldBe("resultsFloat32Array[1]", "4");
>-    shouldBe("resultsFloat32Array[2]", "6");
>-    shouldBe("resultsFloat32Array[3]", "8");
>-    shouldBe("resultsFloat32Array[4]", "5");
>-    shouldBe("resultsFloat32Array[5]", "6");
>-    shouldBe("resultsFloat32Array[6]", "7");
>-    shouldBe("resultsFloat32Array[7]", "8");
>+    const resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>+    if (resultsFloat32Array[0] == 2
>+        && resultsFloat32Array[1] == 4
>+        && resultsFloat32Array[2] == 6
>+        && resultsFloat32Array[3] == 8
>+        && resultsFloat32Array[4] == 5
>+        && resultsFloat32Array[5] == 6
>+        && resultsFloat32Array[6] == 7
>+        && resultsFloat32Array[7] == 8)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
>-if (window.testRunner)
>-    testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>-        if (window.testRunner)
>-            testRunner.notifyDone();
>+window.jsTestIsAsync = true;
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>+        finishJSTest();
>     }, function() {
>-        if (window.testRunner)
>-            testRunner.notifyDone();
>+        testFailed("");
>+        finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-nested-dot-expression-rvalue-expected.html b/LayoutTests/webgpu/whlsl-nested-dot-expression-rvalue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-nested-dot-expression-rvalue-expected.html
>+++ b/LayoutTests/webgpu/whlsl-nested-dot-expression-rvalue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-nested-dot-expression-rvalue.html b/LayoutTests/webgpu/whlsl-nested-dot-expression-rvalue.html
>index 92d2ac361a2c26e2313bfe699ba2823409bad55d..fd5f18c34d21faa51cfaa277ca1f0c168c78b4a5 100644
>--- a/LayoutTests/webgpu/whlsl-nested-dot-expression-rvalue.html
>+++ b/LayoutTests/webgpu/whlsl-nested-dot-expression-rvalue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -36,10 +37,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -106,7 +107,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -129,14 +129,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-nested-loop-expected.html b/LayoutTests/webgpu/whlsl-nested-loop-expected.html
>index ca6e6920fb35b5524b183d5f418f1f7e169b9a4d..3bf869a9796f35865b28c6b65f8b202fb9fd22e6 100644
>--- a/LayoutTests/webgpu/whlsl-nested-loop-expected.html
>+++ b/LayoutTests/webgpu/whlsl-nested-loop-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "black";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawBlackSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-nested-loop.html b/LayoutTests/webgpu/whlsl-nested-loop.html
>index c0a4b71feaf8a1b546086f310f7e13b7ab55b7df..6bc6ff3fefdbc611fe5dd54d9803806594ae0150 100644
>--- a/LayoutTests/webgpu/whlsl-nested-loop.html
>+++ b/LayoutTests/webgpu/whlsl-nested-loop.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -64,10 +65,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -134,7 +135,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -157,14 +157,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-null-dereference-expected.txt b/LayoutTests/webgpu/whlsl-null-dereference-expected.txt
>index a935cf8404f6c968a6d7537d5ead3a299b97ebb0..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-null-dereference-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-null-dereference-expected.txt
>@@ -1,11 +1,4 @@
>-PASS resultsFloat32Array[0] is 2
>-PASS resultsFloat32Array[1] is 4
>-PASS resultsFloat32Array[2] is 6
>-PASS resultsFloat32Array[3] is 8
>-PASS resultsFloat32Array[4] is 5
>-PASS resultsFloat32Array[5] is 6
>-PASS resultsFloat32Array[6] is 7
>-PASS resultsFloat32Array[7] is 8
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>diff --git a/LayoutTests/webgpu/whlsl-null-dereference.html b/LayoutTests/webgpu/whlsl-null-dereference.html
>index d6924575d5e4fda1d32bb3c745c21c46260505af..f30a7ec58386d3b35bb627a20fe13d8ad6382d2f 100644
>--- a/LayoutTests/webgpu/whlsl-null-dereference.html
>+++ b/LayoutTests/webgpu/whlsl-null-dereference.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -47,11 +48,8 @@ compute void computeShader(device float[] buffer : register(u0), float3 threadID
>     }
> }
> `;
>-let resultsFloat32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -98,24 +96,31 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>-    shouldBe("resultsFloat32Array[0]", "2");
>-    shouldBe("resultsFloat32Array[1]", "4");
>-    shouldBe("resultsFloat32Array[2]", "6");
>-    shouldBe("resultsFloat32Array[3]", "8");
>-    shouldBe("resultsFloat32Array[4]", "5");
>-    shouldBe("resultsFloat32Array[5]", "6");
>-    shouldBe("resultsFloat32Array[6]", "7");
>-    shouldBe("resultsFloat32Array[7]", "8");
>+    const resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>+    if (resultsFloat32Array[0] == 2
>+        && resultsFloat32Array[1] == 4
>+        && resultsFloat32Array[2] == 6
>+        && resultsFloat32Array[3] == 8
>+        && resultsFloat32Array[4] == 5
>+        && resultsFloat32Array[5] == 6
>+        && resultsFloat32Array[6] == 7
>+        && resultsFloat32Array[7] == 8)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
> window.jsTestIsAsync = true;
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         finishJSTest();
>     }, function() {
>+        testFailed("");
>         finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-oob-access-expected.txt b/LayoutTests/webgpu/whlsl-oob-access-expected.txt
>index a935cf8404f6c968a6d7537d5ead3a299b97ebb0..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-oob-access-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-oob-access-expected.txt
>@@ -1,11 +1,4 @@
>-PASS resultsFloat32Array[0] is 2
>-PASS resultsFloat32Array[1] is 4
>-PASS resultsFloat32Array[2] is 6
>-PASS resultsFloat32Array[3] is 8
>-PASS resultsFloat32Array[4] is 5
>-PASS resultsFloat32Array[5] is 6
>-PASS resultsFloat32Array[6] is 7
>-PASS resultsFloat32Array[7] is 8
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>diff --git a/LayoutTests/webgpu/whlsl-oob-access.html b/LayoutTests/webgpu/whlsl-oob-access.html
>index 31760d7253428650b1cfec5ff137293eb6659cd2..bfb262946ac83de05099d0e42dfa8ce5083035b7 100644
>--- a/LayoutTests/webgpu/whlsl-oob-access.html
>+++ b/LayoutTests/webgpu/whlsl-oob-access.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -14,11 +15,8 @@ compute void computeShader(device float[] buffer : register(u0), float3 threadID
>         buffer[uint(threadID.x)] = buffer[uint(threadID.x)] * 2.0;
> }
> `;
>-let resultsFloat32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -65,24 +63,31 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>-    shouldBe("resultsFloat32Array[0]", "2");
>-    shouldBe("resultsFloat32Array[1]", "4");
>-    shouldBe("resultsFloat32Array[2]", "6");
>-    shouldBe("resultsFloat32Array[3]", "8");
>-    shouldBe("resultsFloat32Array[4]", "5");
>-    shouldBe("resultsFloat32Array[5]", "6");
>-    shouldBe("resultsFloat32Array[6]", "7");
>-    shouldBe("resultsFloat32Array[7]", "8");
>+    const resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>+    if (resultsFloat32Array[0] == 2
>+        && resultsFloat32Array[1] == 4
>+        && resultsFloat32Array[2] == 6
>+        && resultsFloat32Array[3] == 8
>+        && resultsFloat32Array[4] == 5
>+        && resultsFloat32Array[5] == 6
>+        && resultsFloat32Array[6] == 7
>+        && resultsFloat32Array[7] == 8)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
> window.jsTestIsAsync = true;
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         finishJSTest();
>     }, function() {
>+        testFailed("");
>         finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-read-modify-write-high-zombies-expected.txt b/LayoutTests/webgpu/whlsl-read-modify-write-high-zombies-expected.txt
>index c3ed9451abd5f4b4d24a19965e2b8cae3f5caa0b..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-read-modify-write-high-zombies-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-read-modify-write-high-zombies-expected.txt
>@@ -1,5 +1,5 @@
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>-PASS resultsFloat32Array[0] is 66
> 
>diff --git a/LayoutTests/webgpu/whlsl-read-modify-write-high-zombies.html b/LayoutTests/webgpu/whlsl-read-modify-write-high-zombies.html
>index d3b72381ada393ccc94ac5a3206d38f4708e188b..e7a75613dc85f62201a52ed40c33319e294e4046 100644
>--- a/LayoutTests/webgpu/whlsl-read-modify-write-high-zombies.html
>+++ b/LayoutTests/webgpu/whlsl-read-modify-write-high-zombies.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -32,11 +33,8 @@ compute void computeShader(device float[] buffer : register(u0), float3 threadID
>     buffer[uint(threadID.x)] = mat[0][0];
> }
> `;
>-let resultsFloat32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -76,20 +74,24 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>-    shouldBe("resultsFloat32Array[0]", "66");
>+    const resultsFloat32Array = new Float32Array(resultsArrayBuffer);
>+    if (resultsFloat32Array[0] == 66)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
>-if (window.testRunner)
>-    testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>-        if (window.testRunner)
>-            testRunner.notifyDone();
>+window.jsTestIsAsync = true;
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>+        finishJSTest();
>     }, function() {
>-        if (window.testRunner)
>-            testRunner.notifyDone();
>+        testFailed("");
>+        finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-return-local-variable-expected.html b/LayoutTests/webgpu/whlsl-return-local-variable-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-return-local-variable-expected.html
>+++ b/LayoutTests/webgpu/whlsl-return-local-variable-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-return-local-variable.html b/LayoutTests/webgpu/whlsl-return-local-variable.html
>index 9e4375ff91b50614eaf92bb61d22f3e0b21a009b..8c3e3567b68c6d6ced463f7767ca6a38f18550e7 100644
>--- a/LayoutTests/webgpu/whlsl-return-local-variable.html
>+++ b/LayoutTests/webgpu/whlsl-return-local-variable.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -29,10 +30,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -99,7 +100,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -122,14 +122,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-store-to-property-updates-properly-expected.html b/LayoutTests/webgpu/whlsl-store-to-property-updates-properly-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-store-to-property-updates-properly-expected.html
>+++ b/LayoutTests/webgpu/whlsl-store-to-property-updates-properly-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-store-to-property-updates-properly.html b/LayoutTests/webgpu/whlsl-store-to-property-updates-properly.html
>index a6eb251501d1f84f7e6fc7906bf7bfc1bff02f6a..0e4d55c515a6716ae54389fae310df8cfe6276df 100644
>--- a/LayoutTests/webgpu/whlsl-store-to-property-updates-properly.html
>+++ b/LayoutTests/webgpu/whlsl-store-to-property-updates-properly.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -44,10 +45,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -114,7 +115,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -137,14 +137,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-textures-getdimensions-expected.txt b/LayoutTests/webgpu/whlsl-textures-getdimensions-expected.txt
>index 794166f85b9052d9ef6393848934d64bf76608ea..4882f90458a56f545eb19c74d27f8f6af23182d4 100644
>--- a/LayoutTests/webgpu/whlsl-textures-getdimensions-expected.txt
>+++ b/LayoutTests/webgpu/whlsl-textures-getdimensions-expected.txt
>@@ -1,6 +1,4 @@
>-PASS resultsUint32Array[0] is 2
>-PASS resultsUint32Array[1] is 2
>-PASS resultsUint32Array[2] is 1
>+PASS 
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>diff --git a/LayoutTests/webgpu/whlsl-textures-getdimensions.html b/LayoutTests/webgpu/whlsl-textures-getdimensions.html
>index 1a80f7e777cc86e0716cac741b39087010889cdd..19f12f8a1f36fba8e93d3a71abc07ff402621f84 100644
>--- a/LayoutTests/webgpu/whlsl-textures-getdimensions.html
>+++ b/LayoutTests/webgpu/whlsl-textures-getdimensions.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> <script src="../resources/js-test-pre.js"></script>
> </head>
> <body>
>@@ -17,11 +18,8 @@ compute void computeShader(Texture2D<float4> theTexture : register(t0), device u
>     theBuffer[2] = numberOfLevels;
> }
> `;
>-let resultsUint32Array;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const computeStage = {module: shaderModule, entryPoint: "computeShader"};
> 
>@@ -55,19 +53,26 @@ async function start() {
>     device.getQueue().submit([commandBuffer]);
> 
>     const resultsArrayBuffer = await resultsBuffer.mapReadAsync();
>-    resultsUint32Array = new Uint32Array(resultsArrayBuffer);
>-    shouldBe("resultsUint32Array[0]", "2");
>-    shouldBe("resultsUint32Array[1]", "2");
>-    shouldBe("resultsUint32Array[2]", "1");
>+    const resultsUint32Array = new Uint32Array(resultsArrayBuffer);
>+    if (resultsUint32Array[0] == 2
>+        && resultsUint32Array[1] == 2
>+        && resultsUint32Array[2] == 1)
>+        testPassed("");
>+    else
>+        testFailed("");
>     resultsBuffer.unmap();
> }
> window.jsTestIsAsync = true;
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         finishJSTest();
>-    }, function(e) {
>+    }, function() {
>+        testFailed("");
>         finishJSTest();
>     });
>+}, function() {
>+    testPassed("");
>+    finishJSTest();
> });
> </script>
> <script src="../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/webgpu/whlsl-textures-load-expected.html b/LayoutTests/webgpu/whlsl-textures-load-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-textures-load-expected.html
>+++ b/LayoutTests/webgpu/whlsl-textures-load-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-textures-load.html b/LayoutTests/webgpu/whlsl-textures-load.html
>index edcd4e2015c86eb53466e255a4f08754ae0983f7..914fe0fc84e9d426778c28116bee2af3a4ab6f04 100644
>--- a/LayoutTests/webgpu/whlsl-textures-load.html
>+++ b/LayoutTests/webgpu/whlsl-textures-load.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -14,10 +15,10 @@ fragment float4 fragmentShader(Texture2D<float4> theTexture : register(t0)) : SV
>     return Load(theTexture, int2(0, 0));
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -93,7 +94,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: bindGroupBindings};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -125,7 +125,19 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", start);
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
>+});
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-textures-sample-expected.html b/LayoutTests/webgpu/whlsl-textures-sample-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-textures-sample-expected.html
>+++ b/LayoutTests/webgpu/whlsl-textures-sample-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-textures-sample.html b/LayoutTests/webgpu/whlsl-textures-sample.html
>index 2dffb00d41d06d05b7efd73f6ec75851c06c48f1..1345e47704ff1a0aede44b261c60609badd9e67a 100644
>--- a/LayoutTests/webgpu/whlsl-textures-sample.html
>+++ b/LayoutTests/webgpu/whlsl-textures-sample.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -14,10 +15,10 @@ fragment float4 fragmentShader(Texture2D<float4> theTexture : register(t0), samp
>     return Sample(theTexture, theSampler, float2(0.5, 0.5));
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -96,7 +97,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: bindGroupBindings};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -128,7 +128,19 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", start);
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    }, function() {
>+        if (window.testRunner)
>+            testRunner.notifyDone();
>+    });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
>+});
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-while-loop-break-expected.html b/LayoutTests/webgpu/whlsl-while-loop-break-expected.html
>index ca6e6920fb35b5524b183d5f418f1f7e169b9a4d..3bf869a9796f35865b28c6b65f8b202fb9fd22e6 100644
>--- a/LayoutTests/webgpu/whlsl-while-loop-break-expected.html
>+++ b/LayoutTests/webgpu/whlsl-while-loop-break-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "black";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawBlackSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-while-loop-break.html b/LayoutTests/webgpu/whlsl-while-loop-break.html
>index 49b016f14b21c212306408e4e3ab476c708096f6..6113bef21c3021fbfeedd96096ec93357c6dc74e 100644
>--- a/LayoutTests/webgpu/whlsl-while-loop-break.html
>+++ b/LayoutTests/webgpu/whlsl-while-loop-break.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -34,10 +35,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -104,7 +105,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -127,14 +127,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-while-loop-continue-expected.html b/LayoutTests/webgpu/whlsl-while-loop-continue-expected.html
>index f417050f9a743f05e9006fc91ac64d502dadd633..9f53a2655321f333a53f9cd21aff03db33d8e249 100644
>--- a/LayoutTests/webgpu/whlsl-while-loop-continue-expected.html
>+++ b/LayoutTests/webgpu/whlsl-while-loop-continue-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "white";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-while-loop-continue.html b/LayoutTests/webgpu/whlsl-while-loop-continue.html
>index c1fd165f214991fdefce718aa7909b7b52a71f14..ae7db9ab3e2a39722179f201b4f6a78360f9e9e3 100644
>--- a/LayoutTests/webgpu/whlsl-while-loop-continue.html
>+++ b/LayoutTests/webgpu/whlsl-while-loop-continue.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -34,10 +35,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -104,7 +105,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -127,14 +127,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-zero-initialize-values-2-expected.html b/LayoutTests/webgpu/whlsl-zero-initialize-values-2-expected.html
>index ca6e6920fb35b5524b183d5f418f1f7e169b9a4d..3bf869a9796f35865b28c6b65f8b202fb9fd22e6 100644
>--- a/LayoutTests/webgpu/whlsl-zero-initialize-values-2-expected.html
>+++ b/LayoutTests/webgpu/whlsl-zero-initialize-values-2-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "black";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawBlackSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-zero-initialize-values-2.html b/LayoutTests/webgpu/whlsl-zero-initialize-values-2.html
>index 8e732580f7eabb3fbc82dbef361ba7e5459b5064..346980215c700c4bf323cbe9988a340f2e2cc58e 100644
>--- a/LayoutTests/webgpu/whlsl-zero-initialize-values-2.html
>+++ b/LayoutTests/webgpu/whlsl-zero-initialize-values-2.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -50,10 +51,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -120,7 +121,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -143,14 +143,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl-zero-initialize-values-expected.html b/LayoutTests/webgpu/whlsl-zero-initialize-values-expected.html
>index ca6e6920fb35b5524b183d5f418f1f7e169b9a4d..3bf869a9796f35865b28c6b65f8b202fb9fd22e6 100644
>--- a/LayoutTests/webgpu/whlsl-zero-initialize-values-expected.html
>+++ b/LayoutTests/webgpu/whlsl-zero-initialize-values-expected.html
>@@ -1,19 +1,13 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
> <script>
>-async function start() {
>-    const canvas = document.getElementById("canvas");
>-    const context = canvas.getContext("2d");
>-    context.fillStyle = "blue";
>-    context.fillRect(0, 0, 400, 400);
>-    context.fillStyle = "black";
>-    context.fillRect(100, 100, 200, 200);
>-}
>-window.addEventListener("load", start);
>+const canvas = document.getElementById("canvas");
>+drawBlackSquareOnBlueBackgroundInSoftware(canvas);
> </script>
> </body>
> </html>
>diff --git a/LayoutTests/webgpu/whlsl-zero-initialize-values.html b/LayoutTests/webgpu/whlsl-zero-initialize-values.html
>index 43ff33d5fc4abaf5ea50ffc244a6f0bfa7f9670e..90e597a6a9abf2a0f802fabb7346dc406e039c45 100644
>--- a/LayoutTests/webgpu/whlsl-zero-initialize-values.html
>+++ b/LayoutTests/webgpu/whlsl-zero-initialize-values.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -33,10 +34,10 @@ fragment float4 fragmentShader(float shade : attribute(0)) : SV_Target 0 {
>     return float4(shade, shade, shade, 1.0);
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -103,7 +104,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -126,14 +126,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>
>diff --git a/LayoutTests/webgpu/whlsl.html b/LayoutTests/webgpu/whlsl.html
>index 676bd062a265ef42c87e314750074e2c88d1c76d..97ca0dd3bbaf8cd101312b08ea79c8ce81f86c4d 100644
>--- a/LayoutTests/webgpu/whlsl.html
>+++ b/LayoutTests/webgpu/whlsl.html
>@@ -1,6 +1,7 @@
> <!DOCTYPE html>
> <html>
> <head>
>+<script src="js/webgpu-functions.js"></script>
> </head>
> <body>
> <canvas id="canvas" width="400" height="400"></canvas>
>@@ -14,10 +15,10 @@ fragment float4 fragmentShader(float4 position : SV_Position) : SV_Target 0 {
>     return position;
> }
> `;
>-async function start() {
>-    const adapter = await navigator.gpu.requestAdapter();
>-    const device = await adapter.requestDevice();
> 
>+const canvas = document.getElementById("canvas");
>+
>+async function start(device) {
>     const shaderModule = device.createShaderModule({code: shaderSource, isWHLSL: true});
>     const vertexStage = {module: shaderModule, entryPoint: "vertexShader"};
>     const fragmentStage = {module: shaderModule, entryPoint: "fragmentShader"};
>@@ -87,7 +88,6 @@ async function start() {
>     const bindGroupDescriptor = {layout: bindGroupLayout, bindings: [bindGroupBinding]};
>     const bindGroup = device.createBindGroup(bindGroupDescriptor);
> 
>-    const canvas = document.getElementById("canvas");
>     const context = canvas.getContext("gpu");
>     const swapChainDescriptor = {device, format: "bgra8unorm"};
>     const swapChain = context.configureSwapChain(swapChainDescriptor);
>@@ -110,14 +110,18 @@ async function start() {
> }
> if (window.testRunner)
>     testRunner.waitUntilDone();
>-window.addEventListener("load", function() {
>-    start().then(function() {
>+getBasicDevice().then(function(device) {
>+    start(device).then(function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     }, function() {
>         if (window.testRunner)
>             testRunner.notifyDone();
>     });
>+}, function() {
>+    drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
>+    if (window.testRunner)
>+        testRunner.notifyDone();
> });
> </script>
> </body>

Actions: View | Formatted Diff | Diff

Attachments on bug 199012: 372611 | 372613 | 372618 | 372652 | 372816 | 372877 | 372889 | 372896 | 372897 | 372898