Attachment 357018 Details for Bug 192335 – Patch

[patch] Patch

bug-192335-20181210164614.patch (text/plain), 22.35 KB, created by Justin Michaud on 2018-12-10 16:46:15 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Justin Michaud

Created: 2018-12-10 16:46:15 PST

Size: 22.35 KB

patch

obsolete

>Subversion Revision: 238970
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 15146b88a21c472a1ec835fbeae2d7c225de06a4..567ea3705d57a2492825598303b4ba3c9fbac257 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,33 @@
>+2018-12-10  Justin Michaud  <justin_michaud@apple.com>
>+
>+        CS Painting API should support multiple worklets.
>+        https://bugs.webkit.org/show_bug.cgi?id=192335
>+
>+        Reviewed by Dean Jackson.
>+
>+        Adds a new map to support separate paint worklet global scopes (one for each worklet). Also
>+        adds some tests and a fix for a repaint bug that this oncovered, where changing a custom property required
>+        for paint would not trigger a repaint if there had not been a valid value set before.
>+
>+        Test: fast/css-custom-paint/multiple-worklets.html
>+
>+        * css/CSSPaintImageValue.cpp:
>+        (WebCore::CSSPaintImageValue::image):
>+        * css/StyleResolver.cpp:
>+        (WebCore::StyleResolver::applyProperty):
>+        * dom/Document.cpp:
>+        (WebCore::Document::prepareForDestruction):
>+        (WebCore::Document::paintWorkletGlobalScope):
>+        (WebCore::Document::setPaintWorkletGlobalScope):
>+        * dom/Document.h:
>+        (WebCore::Document::paintWorkletGlobalScope): Deleted.
>+        * rendering/style/RenderStyle.cpp:
>+        (WebCore::changedCustomPaintWatchedProperty):
>+        * worklets/Worklet.cpp:
>+        (WebCore::Worklet::addModule):
>+        * worklets/WorkletGlobalScope.cpp:
>+        (WebCore::WorkletGlobalScope::prepareForDestruction):
>+
> 2018-12-07  Justin Michaud  <justin_michaud@apple.com>
> 
>         CSS Painting API code cleanup
>diff --git a/Source/WebCore/css/CSSPaintImageValue.cpp b/Source/WebCore/css/CSSPaintImageValue.cpp
>index 796846e6471f57e49c1f5bf9f6f762698bbfc152..8ca6e5e20c54e76c1e696ea28bed4401212413eb 100644
>--- a/Source/WebCore/css/CSSPaintImageValue.cpp
>+++ b/Source/WebCore/css/CSSPaintImageValue.cpp
>@@ -51,7 +51,7 @@ RefPtr<Image> CSSPaintImageValue::image(RenderElement& renderElement, const Floa
> {
>     if (size.isEmpty())
>         return nullptr;
>-    auto* selectedGlobalScope = renderElement.document().paintWorkletGlobalScope();
>+    auto* selectedGlobalScope = renderElement.document().paintWorkletGlobalScopeForName(m_name);
>     if (!selectedGlobalScope)
>         return nullptr;
>     auto locker = holdLock(selectedGlobalScope->paintDefinitionLock());
>diff --git a/Source/WebCore/css/StyleResolver.cpp b/Source/WebCore/css/StyleResolver.cpp
>index 6a1ce49d0c4079f990ab0f998be65572526e00e8..ecfa4c560fac3cc0d2e04b39f75e2163e7943123 100644
>--- a/Source/WebCore/css/StyleResolver.cpp
>+++ b/Source/WebCore/css/StyleResolver.cpp
>@@ -1720,13 +1720,14 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value, ApplyCascad
>         state.style()->setHasExplicitlyInheritedProperties();
> 
> #if ENABLE(CSS_PAINTING_API)
>-    if (is<CSSPaintImageValue>(*valueToApply) && document().paintWorkletGlobalScope()) {
>-        // FIXME: This should use the "document paint registration map" from the spec, once it is implemented.
>-        auto& paintWorklet = *document().paintWorkletGlobalScope();
>-        auto locker = holdLock(paintWorklet.paintDefinitionLock());
>-        if (auto* registration = paintWorklet.paintDefinitionMap().get(downcast<CSSPaintImageValue>(*valueToApply).name())) {
>-            for (auto& property : registration->inputProperties)
>-                state.style()->addCustomPaintWatchProperty(property);
>+    if (is<CSSPaintImageValue>(*valueToApply)) {
>+        auto& name = downcast<CSSPaintImageValue>(*valueToApply).name();
>+        if (auto* paintWorklet = document().paintWorkletGlobalScopeForName(name)) {
>+            auto locker = holdLock(paintWorklet->paintDefinitionLock());
>+            if (auto* registration = paintWorklet->paintDefinitionMap().get(name)) {
>+                for (auto& property : registration->inputProperties)
>+                    state.style()->addCustomPaintWatchProperty(property);
>+            }
>         }
>     }
> #endif
>diff --git a/Source/WebCore/dom/Document.cpp b/Source/WebCore/dom/Document.cpp
>index e334adbeaeb02add8a305829c9b6f2eeb4e5fae2..fbd5981b54e24536bf3196dc85574cb3bc9d5b48 100644
>--- a/Source/WebCore/dom/Document.cpp
>+++ b/Source/WebCore/dom/Document.cpp
>@@ -2564,10 +2564,9 @@ void Document::prepareForDestruction()
> #endif
> 
> #if ENABLE(CSS_PAINTING_API)
>-    if (m_paintWorkletGlobalScope) {
>-        m_paintWorkletGlobalScope->prepareForDestruction();
>-        m_paintWorkletGlobalScope = nullptr;
>-    }
>+    for (auto& scope : m_paintWorkletGlobalScopes.values())
>+        scope->prepareForDestruction();
>+    m_paintWorkletGlobalScopes.clear();
> #endif
> 
>     m_hasPreparedForDestruction = true;
>@@ -8519,9 +8518,15 @@ Worklet& Document::ensurePaintWorklet()
>     return *m_paintWorklet;
> }
> 
>-void Document::setPaintWorkletGlobalScope(Ref<PaintWorkletGlobalScope>&& scope)
>+PaintWorkletGlobalScope* Document::paintWorkletGlobalScopeForName(const String& name)
>+{
>+    return m_paintWorkletGlobalScopes.get(name);
>+}
>+
>+void Document::setPaintWorkletGlobalScopeForName(const String& name, Ref<PaintWorkletGlobalScope>&& scope)
> {
>-    m_paintWorkletGlobalScope = WTFMove(scope);
>+    auto addResult = m_paintWorkletGlobalScopes.add(name, WTFMove(scope));
>+    ASSERT_UNUSED(addResult, addResult);
> }
> #endif
> 
>diff --git a/Source/WebCore/dom/Document.h b/Source/WebCore/dom/Document.h
>index 5b5ff49b7f136c672245fe5bb924fafd8ae34e0b..ca6a76d6d34ddb02f9eae3222498f26d149fb6f3 100644
>--- a/Source/WebCore/dom/Document.h
>+++ b/Source/WebCore/dom/Document.h
>@@ -1522,8 +1522,8 @@ public:
> 
> #if ENABLE(CSS_PAINTING_API)
>     Worklet& ensurePaintWorklet();
>-    PaintWorkletGlobalScope* paintWorkletGlobalScope() { return m_paintWorkletGlobalScope.get(); }
>-    void setPaintWorkletGlobalScope(Ref<PaintWorkletGlobalScope>&&);
>+    PaintWorkletGlobalScope* paintWorkletGlobalScopeForName(const String& name);
>+    void setPaintWorkletGlobalScopeForName(const String& name, Ref<PaintWorkletGlobalScope>&&);
> #endif
> 
>     void setAsRunningUserScripts() { m_isRunningUserScripts = true; }
>@@ -2072,7 +2072,7 @@ private:
> 
> #if ENABLE(CSS_PAINTING_API)
>     RefPtr<Worklet> m_paintWorklet;
>-    RefPtr<PaintWorkletGlobalScope> m_paintWorkletGlobalScope;
>+    HashMap<String, Ref<PaintWorkletGlobalScope>> m_paintWorkletGlobalScopes;
> #endif
> 
>     bool m_isRunningUserScripts { false };
>diff --git a/Source/WebCore/rendering/style/RenderStyle.cpp b/Source/WebCore/rendering/style/RenderStyle.cpp
>index df39cb23845e73bf51ac2b061cf79c935f35b94a..552aafcd4394ef834698a415ccced67d2813cc2e 100644
>--- a/Source/WebCore/rendering/style/RenderStyle.cpp
>+++ b/Source/WebCore/rendering/style/RenderStyle.cpp
>@@ -989,9 +989,11 @@ inline static bool changedCustomPaintWatchedProperty(const RenderStyle& a, const
>             for (auto& name : *watchPropertiesMap) {
>                 RefPtr<CSSValue> valueA;
>                 RefPtr<CSSValue> valueB;
>-                if (isCustomPropertyName(name) && a.getCustomProperty(name) && b.getCustomProperty(name)) {
>-                    valueA = CSSCustomPropertyValue::create(*a.getCustomProperty(name));
>-                    valueB = CSSCustomPropertyValue::create(*b.getCustomProperty(name));
>+                if (isCustomPropertyName(name)) {
>+                    if (a.getCustomProperty(name))
>+                        valueA = CSSCustomPropertyValue::create(*a.getCustomProperty(name));
>+                    if (b.getCustomProperty(name))
>+                        valueB = CSSCustomPropertyValue::create(*b.getCustomProperty(name));
>                 } else {
>                     CSSPropertyID propertyID = cssPropertyID(name);
>                     if (!propertyID)
>diff --git a/Source/WebCore/worklets/Worklet.cpp b/Source/WebCore/worklets/Worklet.cpp
>index 38f2c5896f2cbd9ff86cd58001219e1894467772..f3b9af6dfaed7e866fc608de6b2877416f9525b7 100644
>--- a/Source/WebCore/worklets/Worklet.cpp
>+++ b/Source/WebCore/worklets/Worklet.cpp
>@@ -49,9 +49,10 @@ void Worklet::addModule(Document& document, const String& moduleURL)
>     // https://bugs.webkit.org/show_bug.cgi?id=191136
>     auto context = PaintWorkletGlobalScope::create(document, ScriptSourceCode(moduleURL));
>     context->evaluate();
>-    // FIXME: We should store multiple global scopes and choose between them
>-    // This will not function correctly if multiple modules are added.
>-    document.setPaintWorkletGlobalScope(WTFMove(context));
>+
>+    auto locker = holdLock(context->paintDefinitionLock());
>+    for (auto& name : context->paintDefinitionMap().keys())
>+        document.setPaintWorkletGlobalScopeForName(name, makeRef(context.get()));
> }
> 
> } // namespace WebCore
>diff --git a/Source/WebCore/worklets/WorkletGlobalScope.cpp b/Source/WebCore/worklets/WorkletGlobalScope.cpp
>index 3c56196803e1bcb42a89e20187728fe6a694108e..7234031570fe305e8e934c75a57d66d487e28853 100644
>--- a/Source/WebCore/worklets/WorkletGlobalScope.cpp
>+++ b/Source/WebCore/worklets/WorkletGlobalScope.cpp
>@@ -74,7 +74,8 @@ WorkletGlobalScope::~WorkletGlobalScope()
> 
> void WorkletGlobalScope::prepareForDestruction()
> {
>-    ASSERT(m_script);
>+    if (!m_script)
>+        return;
>     stopActiveDOMObjects();
>     removeRejectedPromiseTracker();
>     removeAllEventListeners();
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 4440b4e5643b31eb613a5f94205708d9595905d9..29b8e7e87a7ef5e354e3419fa407e875a58cebe6 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,19 @@
>+2018-12-10  Justin Michaud  <justin_michaud@apple.com>
>+
>+        CS Painting API should support multiple worklets.
>+        https://bugs.webkit.org/show_bug.cgi?id=192335
>+
>+        Reviewed by Dean Jackson.
>+
>+        * fast/css-custom-paint/animate-repaint-expected.txt:
>+        * fast/css-custom-paint/animate-repaint.html:
>+        * fast/css-custom-paint/delay-expected.html: Added.
>+        * fast/css-custom-paint/delay-repaint-expected.txt: Copied from LayoutTests/fast/css-custom-paint/animate-repaint-expected.txt.
>+        * fast/css-custom-paint/delay-repaint.html: Copied from LayoutTests/fast/css-custom-paint/animate-repaint.html.
>+        * fast/css-custom-paint/delay.html: Copied from LayoutTests/fast/css-custom-paint/animate-repaint.html.
>+        * fast/css-custom-paint/multiple-worklets-expected.html: Added.
>+        * fast/css-custom-paint/multiple-worklets.html: Added.
>+
> 2018-12-07  Truitt Savell  <tsavell@apple.com>
> 
>         [ MacOS Debug ] Layout Test webgl/2.0.0/conformance2/textures/misc/tex-unpack-params.html is flaky timeout
>diff --git a/LayoutTests/fast/css-custom-paint/animate-repaint-expected.txt b/LayoutTests/fast/css-custom-paint/animate-repaint-expected.txt
>index c410ce3296f5a70c172d53bbfb7e4344d0465f03..7616b644afecc2d3ed18b294db9f1893611558be 100644
>--- a/LayoutTests/fast/css-custom-paint/animate-repaint-expected.txt
>+++ b/LayoutTests/fast/css-custom-paint/animate-repaint-expected.txt
>@@ -1,8 +1,4 @@
> (repaint rects
>-  (rect 0 0 800 600)
>-  (rect 0 0 150 150)
>-  (rect 8 8 784 150)
>-  (rect 0 0 800 166)
>   (rect 0 0 800 600)
>   (rect 8 8 150 150)
>   (rect 8 8 150 150)
>diff --git a/LayoutTests/fast/css-custom-paint/animate-repaint.html b/LayoutTests/fast/css-custom-paint/animate-repaint.html
>index 3a326a5a3e3a0569f1515ac8b24c733284c48388..d95e88ec9efbf22e2ae5de6e3169b666457c0f46 100644
>--- a/LayoutTests/fast/css-custom-paint/animate-repaint.html
>+++ b/LayoutTests/fast/css-custom-paint/animate-repaint.html
>@@ -22,34 +22,32 @@
> </script>
> 
> <script type="text/javascript">
>-  if (window.testRunner && window.internals) {
>-    window.testRunner.dumpAsText(false);
>-    window.internals.startTrackingRepaints();
>-  }
>-  importWorklet(CSS.paintWorklet, document.getElementById('code').textContent);
>-
>-  // FIXME: Once importWorklet returns a promise, these setTimeouts should go away.
>-  setTimeout(function() {
>-    document.getElementById('paint').style.setProperty('--my-prop', 'goodbye');
>-  }, 500);
>-
>-  setTimeout(function() {
>-    var repaintRects = "No test runner";
>+  function onload() {
>     if (window.testRunner && window.internals) {
>+      window.testRunner.dumpAsText(false);
>       window.internals.startTrackingRepaints();
>+    }
>+    importWorklet(CSS.paintWorklet, document.getElementById('code').textContent);
> 
>-      // force a style recalc.
>-      var dummy = document.body.offsetTop;
>-
>-      repaintRects = window.internals.repaintRectsAsText();
>+    // FIXME: Once importWorklet returns a promise, these setTimeouts should go away.
>+    setTimeout(function() {
>+      document.getElementById('paint').style.setProperty('--my-prop', 'goodbye');
>+    }, 500);
> 
>-      window.internals.stopTrackingRepaints();
>-    }
>+    setTimeout(function() {
>+      var repaintRects = "No test runner";
>+      if (window.testRunner && window.internals) {
>+        // force a style recalc.
>+        var dummy = document.body.offsetTop;
>+        repaintRects = window.internals.repaintRectsAsText();
>+        window.internals.stopTrackingRepaints();
>+      }
> 
>-    var pre = document.createElement('pre');
>-    document.body.appendChild(pre);
>-    pre.innerHTML = repaintRects;
>-  }, 1000);
>+      var pre = document.createElement('pre');
>+      document.body.appendChild(pre);
>+      pre.innerHTML = repaintRects;
>+    }, 1000);
>+  }
> </script>
> 
> <style>
>@@ -61,6 +59,6 @@
>   }
> </style>
> 
>-<body>
>+<body onload="onload()">
>   <div id="paint"></div>
> </body>
>diff --git a/LayoutTests/fast/css-custom-paint/delay-expected.html b/LayoutTests/fast/css-custom-paint/delay-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..4048cd60cdfa6542e4695590e58ce98fa2d3300a
>--- /dev/null
>+++ b/LayoutTests/fast/css-custom-paint/delay-expected.html
>@@ -0,0 +1,2 @@
>+<!DOCTYPE html>
>+<div id="paint" style="width: 150px; height: 150px; background-color: green;" ></div>
>diff --git a/LayoutTests/fast/css-custom-paint/delay-repaint-expected.txt b/LayoutTests/fast/css-custom-paint/delay-repaint-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..7616b644afecc2d3ed18b294db9f1893611558be
>--- /dev/null
>+++ b/LayoutTests/fast/css-custom-paint/delay-repaint-expected.txt
>@@ -0,0 +1,7 @@
>+(repaint rects
>+  (rect 0 0 800 600)
>+  (rect 8 8 150 150)
>+  (rect 8 8 150 150)
>+  (rect 8 8 150 150)
>+)
>+
>diff --git a/LayoutTests/fast/css-custom-paint/delay-repaint.html b/LayoutTests/fast/css-custom-paint/delay-repaint.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..089999f11b86b3e278d0929eadf5766730a54ced
>--- /dev/null
>+++ b/LayoutTests/fast/css-custom-paint/delay-repaint.html
>@@ -0,0 +1,65 @@
>+<!DOCTYPE html>
>+<meta name="author" title="Justin Michaud" href="mailto:justin_michaud@webkit.org">
>+<meta name="assert" content="Test that paint worklets repaint when modules are added, and correctly watch properties">
>+<link rel="help" content="https://drafts.css-houdini.org/css-paint-api-1/">
>+<script src="resources/testharness.js"></script>
>+
>+<script id="code" type="text/worklet">
>+  class MyPaint {
>+    static get inputProperties() { return ['--my-prop']; }
>+
>+    paint(ctx, geom, properties) {
>+      if (properties.get('--my-prop') == 5) {
>+        ctx.fillStyle = "green";
>+      } else {
>+        ctx.fillStyle = "red";
>+      }
>+      ctx.fillRect(0, 0, geom.width, geom.height);
>+    }
>+  }
>+  registerPaint('my-paint', MyPaint);
>+</script>
>+
>+<script type="text/javascript">
>+function onload() {
>+  if (window.testRunner && window.internals) {
>+    window.testRunner.dumpAsText(false);
>+    window.internals.startTrackingRepaints();
>+  }
>+
>+  // FIXME: Once importWorklet returns a promise, these setTimeouts should go away.
>+  setTimeout(function() {
>+    importWorklet(CSS.paintWorklet, document.getElementById('code').textContent);
>+  }, 500);
>+
>+  setTimeout(function() {
>+    paint.style.setProperty('--my-prop', 5);
>+  }, 2000);
>+
>+  setTimeout(function() {
>+    var repaintRects = "No test runner";
>+    if (window.testRunner && window.internals) {
>+      // force a style recalc.
>+      var dummy = document.body.offsetTop;
>+      repaintRects = window.internals.repaintRectsAsText();
>+      window.internals.stopTrackingRepaints();
>+    }
>+
>+    var pre = document.createElement('pre');
>+    document.body.appendChild(pre);
>+    pre.innerHTML = repaintRects;
>+  }, 2500);
>+}
>+</script>
>+
>+<style>
>+  #paint {
>+    background-image: paint(my-paint);
>+    width: 150px;
>+    height: 150px;
>+  }
>+</style>
>+
>+<body onload="onload()">
>+  <div id="paint"></div>
>+</body>
>diff --git a/LayoutTests/fast/css-custom-paint/delay.html b/LayoutTests/fast/css-custom-paint/delay.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..0a0c8798b8a6c90fd1924813519ce2b809c0aba6
>--- /dev/null
>+++ b/LayoutTests/fast/css-custom-paint/delay.html
>@@ -0,0 +1,43 @@
>+<!DOCTYPE html>
>+<meta name="author" title="Justin Michaud" href="mailto:justin_michaud@webkit.org">
>+<meta name="assert" content="Test that paint worklets repaint when modules are added, and correctly watch properties">
>+<link rel="help" content="https://drafts.css-houdini.org/css-paint-api-1/">
>+<script src="resources/testharness.js"></script>
>+
>+<script id="code" type="text/worklet">
>+  class MyPaint {
>+    static get inputProperties() { return ['--my-prop']; }
>+
>+    paint(ctx, geom, properties) {
>+      if (properties.get('--my-prop') == 5) {
>+        ctx.fillStyle = "green";
>+      } else {
>+        ctx.fillStyle = "red";
>+      }
>+      ctx.fillRect(0, 0, geom.width, geom.height);
>+    }
>+  }
>+  registerPaint('my-paint', MyPaint);
>+</script>
>+
>+<script type="text/javascript">
>+  setTimeout(function() {
>+    importWorklet(CSS.paintWorklet, document.getElementById('code').textContent);
>+  }, 500);
>+  // FIXME: This should use a promise once addModule supports it.
>+  setTimeout(function() {
>+    paint.style.setProperty('--my-prop', 5);
>+  }, 2000);
>+</script>
>+
>+<style>
>+  #paint {
>+    background-image: paint(my-paint);
>+    width: 150px;
>+    height: 150px;
>+  }
>+</style>
>+
>+<body>
>+  <div id="paint"></div>
>+</body>
>diff --git a/LayoutTests/fast/css-custom-paint/multiple-worklets-expected.html b/LayoutTests/fast/css-custom-paint/multiple-worklets-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..e90e880b1d2e8b4e87ab4fbb555f81b18ec555cd
>--- /dev/null
>+++ b/LayoutTests/fast/css-custom-paint/multiple-worklets-expected.html
>@@ -0,0 +1,3 @@
>+<!DOCTYPE html>
>+<div id="paint" style="width: 150px; height: 150px; background-color: purple;" ></div>
>+<div id="paint2" style="width: 150px; height: 150px; background-color: green;" ></div>
>diff --git a/LayoutTests/fast/css-custom-paint/multiple-worklets-isolation-expected.html b/LayoutTests/fast/css-custom-paint/multiple-worklets-isolation-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..15ee96c71f19445378c0430964bf7d481fd06a98
>--- /dev/null
>+++ b/LayoutTests/fast/css-custom-paint/multiple-worklets-isolation-expected.html
>@@ -0,0 +1,3 @@
>+<!DOCTYPE html>
>+<div id="paint" style="width: 150px; height: 150px; background-color: green;" ></div>
>+<div id="paint2" style="width: 150px; height: 150px; background-color: green;" ></div>
>diff --git a/LayoutTests/fast/css-custom-paint/multiple-worklets-isolation.html b/LayoutTests/fast/css-custom-paint/multiple-worklets-isolation.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..9525d886ab34afb3a583418cd6f47a7936a9b0d3
>--- /dev/null
>+++ b/LayoutTests/fast/css-custom-paint/multiple-worklets-isolation.html
>@@ -0,0 +1,47 @@
>+<!DOCTYPE html>
>+<script src="resources/testharness.js"></script>
>+<meta name="author" title="Justin Michaud" href="mailto:justin_michaud@webkit.org">
>+<meta name="assert" content="test multiple modules being added to the paintWorklet are isolated">
>+<link rel="help" content="https://drafts.css-houdini.org/css-paint-api-1/">
>+
>+<style>
>+  #paint {
>+    background-image: paint(my-paint);
>+    width: 150px;
>+    height: 150px;
>+  }
>+
>+  #paint2 {
>+    background-image: paint(my-paint2);
>+    width: 150px;
>+    height: 150px;
>+  }
>+</style>
>+
>+<div id="paint"></div>
>+<div id="paint2"></div>
>+
>+<script id="code1" type="text/worklet">
>+function shouldOnlyBeInCode1() {}
>+
>+registerPaint('my-paint', class {
>+  paint(ctx, geom, properties) {
>+    ctx.fillStyle = typeof(shouldOnlyBeInCode1) == 'function' ? 'green' : 'red';
>+    ctx.fillRect(0, 0, geom.width, geom.height);
>+  }
>+});
>+</script>
>+
>+<script id="code2" type="text/worklet">
>+registerPaint('my-paint2', class {
>+  paint(ctx, geom, properties) {
>+    ctx.fillStyle = typeof(shouldOnlyBeInCode1) == 'undefined' ? 'green' : 'red';
>+    ctx.fillRect(0, 0, geom.width, geom.height);
>+  }
>+});
>+</script>
>+
>+<script>
>+importWorklet(CSS.paintWorklet, document.getElementById('code1').textContent);
>+importWorklet(CSS.paintWorklet, document.getElementById('code2').textContent);
>+</script>
>diff --git a/LayoutTests/fast/css-custom-paint/multiple-worklets.html b/LayoutTests/fast/css-custom-paint/multiple-worklets.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..b580de8b4928937c933cd6f8118c11880f68208f
>--- /dev/null
>+++ b/LayoutTests/fast/css-custom-paint/multiple-worklets.html
>@@ -0,0 +1,47 @@
>+<!DOCTYPE html>
>+<script src="resources/testharness.js"></script>
>+<meta name="author" title="Justin Michaud" href="mailto:justin_michaud@webkit.org">
>+<meta name="assert" content="test multiple modules being added to the paintWorklet">
>+<link rel="help" content="https://drafts.css-houdini.org/css-paint-api-1/">
>+
>+<style>
>+  #paint {
>+    background-image: paint(my-paint2);
>+    width: 150px;
>+    height: 150px;
>+  }
>+
>+  #paint2 {
>+    background-image: paint(my-paint);
>+    width: 150px;
>+    height: 150px;
>+  }
>+</style>
>+
>+<div id="paint"></div>
>+<div id="paint2"></div>
>+
>+<script id="code1" type="text/worklet">
>+registerPaint('my-paint', class {
>+  paint(ctx, geom, properties) {
>+    ctx.fillStyle = 'purple';
>+    ctx.fillRect(0, 0, geom.width, geom.height);
>+  }
>+});
>+</script>
>+
>+<script id="code2" type="text/worklet">
>+registerPaint('my-paint2', class {
>+  paint(ctx, geom, properties) {
>+    ctx.fillStyle = 'green';
>+    ctx.fillRect(0, 0, geom.width, geom.height);
>+  }
>+});
>+</script>
>+
>+<script>
>+importWorklet(CSS.paintWorklet, document.getElementById('code1').textContent);
>+importWorklet(CSS.paintWorklet, document.getElementById('code2').textContent);
>+paint.style.backgroundImage = "paint(my-paint)";
>+paint2.style.backgroundImage = "paint(my-paint2)";
>+</script>

Actions: View | Formatted Diff | Diff

Attachments on bug 192335: 356779 | 356973 | 357018