From 7cd9f9ac0e7b691baadc50653934f14381503c11 Mon Sep 17 00:00:00 2001
From: Andrew Stephens <andrew.stephens75@gmail.com>
Date: Mon, 2 Jan 2023 12:05:14 -0500
Subject: [PATCH] Test page

---
 as-dithered-image.js |  4 +++-
 test.html            | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/as-dithered-image.js b/as-dithered-image.js
index f3a05dd..e8738c6 100644
--- a/as-dithered-image.js
+++ b/as-dithered-image.js
@@ -87,6 +87,7 @@ class ASDitheredImage extends HTMLElement {
         if (oldValue === newValue) return
 
         if ((name === "src")) {
+            this.force_refresh_ = true
             this.requestUpdate()
         } else if (name === "crunch") {
             if (newValue === "auto") {
@@ -95,10 +96,11 @@ class ASDitheredImage extends HTMLElement {
                 this.crunchFactor_ = 1.0 / this.getDevicePixelRatio()
             } else {
                 this.crunchFactor_ = parseInt(newValue, 10)
-                if (isNaN(this.crunchFactor)) {
+                if (isNaN(this.crunchFactor_)) {
                     this.crunchFactor_ = this.getAutoCrunchFactor()
                 }
             }
+            this.force_refresh_ = true
             this.requestUpdate()
         } else if (name === "alt") {
             this.altText = newValue;
diff --git a/test.html b/test.html
index 913e238..da5aef7 100644
--- a/test.html
+++ b/test.html
@@ -14,13 +14,27 @@
         }
     </style>
 
-    <as-dithered-image class="setSize" src="Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg"></as-dithered-image>
+    <as-dithered-image class="setSize" id="picture"
+        src="Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg"></as-dithered-image>
 
     <p>devicePixelRatio = <span id=dpr>0</span></p>
+    <p><select id="crunchselect">
+            <option value="auto">Automatic</option>
+            <option value="pixel">Pixel</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+        </select></p>
 </body>
 
 <script>
     document.getElementById("dpr").innerText = window.devicePixelRatio
+    let select = document.getElementById("crunchselect")
+    select.addEventListener("change", e => {
+        console.log("Crunch = ", e.target.value)
+        document.getElementById("picture").setAttribute("crunch", e.target.value)
+    })
 </script>
 
 </html>
\ No newline at end of file