webmproject · y-guyon · May 6, 2026 · May 6, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## v0.7.0
+
+- Upgrade to Material 3 Web Components (https://material-web.dev/).
+- Use Web Test Runner instead of Karma.
+
 ## v0.6.6
 
 - Add a scrollbar to the right panel of the Matches tab.

diff --git a/README.md b/README.md
@@ -15,7 +15,9 @@ page can understand what is shown, but also useful to experts, by offering a
 convenient interactive user interface with matcher, metric and filter settings.
 The presented data should be easily reproducible and up-to-date.
 
-In contrast to more traditional
+Codec-Compare is based on
+[Rate-Complexity Clouds](https://doi.org/10.1109/PCS65673.2025.11417613) rather
+than Rate-Distortion Curves. In contrast to more traditional
 [comparative benchmarks](https://storage.googleapis.com/avif-comparison/index.html),
 Codec-Compare aims to aggregate statistics after comparing pairs of two
 similarly encoded images, to avoid some of the bias brought by comparing already
@@ -82,7 +84,7 @@ Codec-Compare has:
     `npm run build`).
   - A `vite.config.js` Vite configuration file (used by `npm run dev` and `npm
     run build`).
-  - A `karma.conf.js` Karma configuration file (used by `npm run test`).
+  - A `web-test-runner.config.mjs` configuration file (used by `npm run test`).
 
 Note: See
 https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields

diff --git a/index.html b/index.html
@@ -20,19 +20,21 @@
 <head>
   <title>Codec Compare</title>
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
   <style>
     :root {
       font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
     }
 
     * {
-      /* For raised mwc-buttons and the left menu bar. */
-      --mdc-theme-primary: #6A67BB;
-      /* For mwc-fabs. */
-      --mdc-theme-secondary: #6A67BB;
-      --mdc-theme-surface: #F0F3FA;
-      --mdc-theme-background: #FFFFFF;
-      --mdc-theme-text: #0A101F;
+      /* See https://material-web.dev/theming/material-theming/. */
+      --md-sys-color-primary: #6A67BB;
+      --md-sys-color-secondary: #6A67BB;
+      --md-sys-color-tertiary: #6A67BB;
+      --md-sys-color-surface: #F0F3FA;
+      --md-sys-color-background: #FFFFFF;
+      --md-sys-color-text: #0A101F;
+      --md-menu-container-color: #FFFFFF;
     }
 
     html,
@@ -45,8 +47,8 @@
 
     @media (prefers-color-scheme: light) {
       :root {
-        color: var(--mdc-theme-text);
-        background: var(--mdc-theme-background);
+        color: var(--md-sys-color-text);
+        background: var(--md-sys-color-background);
       }
     }
 
@@ -74,8 +76,50 @@
       cursor: default;
     }
   </style>
+  <script>
+    // Disable animations and transitions for all Material 3 web components when running tests.
+    (function() {
+      const isTest = (function() {
+        try {
+          if (window.__karma__ || (window.parent && window.parent.__karma__) || (window.top && window.top.__karma__)) {
+            return true;
+          }
+        } catch (e) {}
+        try {
+          if (window.__wd_test_runner__ || (window.parent && window.parent.__wd_test_runner__) || (window.top && window.top.__wd_test_runner__)) {
+            return true;
+          }
+        } catch (e) {}
+        if (window.location.pathname.includes('/base/')) {
+          return true;
+        }
+        return false;
+      })();
+
+      if (!isTest) return;
+
+      const originalAttachShadow = Element.prototype.attachShadow;
+      Element.prototype.attachShadow = function(init) {
+        const shadowRoot = originalAttachShadow.call(this, init);
+        if (this.tagName.toLowerCase().startsWith('md-')) {
+          const style = document.createElement('style');
+          style.id = 'disable-m3-animations';
+          style.textContent = `
+            *, *::before, *::after {
+              transition: none !important;
+              animation: none !important;
+            }
+            md-ripple {
+              display: none;
+            }
+          `;
+          shadowRoot.appendChild(style);
+        }
+        return shadowRoot;
+      };
+    })();
+  </script>
   <script type="module" src="/src/codec_compare.ts"></script>
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 
 <body>

diff --git a/karma.conf.js b/karma.conf.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codec_compare",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "Codec performance comparison tool",
   "publisher": "Google LLC",
   "author": "Yannis Guyon",
@@ -10,37 +10,22 @@
     "build": "vite build",
     "postbuild": "./postbuild.sh",
     "preview": "vite preview --open",
-    "test": "karma start"
+    "test": "web-test-runner \"src/**/*_test.ts\" --node-resolve"
   },
   "devDependencies": {
-    "@types/jasmine": "^5.1.4",
-    "@types/node": "^20.10.4",
+    "@types/jasmine": "^5.1.5",
+    "@types/node": "^22.10.2",
     "@types/plotly.js-dist": "npm:@types/plotly.js@^2.12.30",
-    "jasmine-core": "^5.1.1",
-    "karma": "^6.4.2",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-jasmine": "^5.1.0",
-    "karma-spec-reporter": "^0.0.36",
-    "karma-typescript": "^5.5.4",
-    "karma-typescript-es6-transform": "^5.5.4",
-    "typescript": "^5.3.3",
-    "vite": "^6.3.2"
+    "@web/dev-server-esbuild": "^1.0.4",
+    "@web/test-runner": "^0.19.0",
+    "jasmine-core": "^5.5.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.3.2",
+    "web-test-runner-jasmine": "^0.0.6"
   },
   "dependencies": {
-    "@material/mwc-button": "^0.27.0",
-    "@material/mwc-checkbox": "^0.27.0",
-    "@material/mwc-fab": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@material/mwc-linear-progress": "^0.27.0",
-    "@material/mwc-menu": "^0.27.0",
-    "@material/mwc-slider": "^0.27.0",
-    "@material/mwc-snackbar": "^0.27.0",
-    "@material/mwc-switch": "^0.27.0",
-    "@material/mwc-tab": "^0.27.0",
-    "@material/mwc-tab-bar": "^0.27.0",
-    "@material/mwc-textfield": "^0.27.0",
-    "lit": "^3.1.0",
-    "plotly.js-dist": "^2.27.1"
+    "@material/web": "^1.4.1",
+    "lit": "^3.2.1",
+    "plotly.js-dist": "^2.35.3"
   }
 }
diff --git a/readme_preview.png b/readme_preview.png
diff --git a/src/batch_name_ui.ts b/src/batch_name_ui.ts
@@ -42,7 +42,7 @@ export class BatchNameUi extends LitElement {
       vertical-align: middle;
     }
     .mono {
-      background: var(--mdc-theme-background);
+      background: var(--md-sys-color-background);
       font-family: monospace;
       vertical-align: middle;
     }

diff --git a/src/batch_selection_actions_ui.ts b/src/batch_selection_actions_ui.ts
@@ -12,7 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import '@material/mwc-icon-button';
+import '@material/web/iconbutton/icon-button';
+import '@material/web/icon/icon';
 
 import {css, html, LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
@@ -36,26 +37,27 @@ export class BatchSelectionActionsUi extends LitElement {
     const batchSelection = this.state.batchSelections[this.batchSelectionIndex];
     return html`
       <span title="${batchSelection.isDisplayed ? 'Hide' : 'Show'}">
-        <mwc-icon-button
-          icon=${batchSelection.isDisplayed ? 'visibility' : 'visibility_off'}
+        <md-icon-button
           @click=${() => {
       batchSelection.isDisplayed = !batchSelection.isDisplayed;
       dispatch(EventType.MATCHED_DATA_POINTS_CHANGED);
       this.requestUpdate();
     }}>
-        </mwc-icon-button>
+          <md-icon>${
+        batchSelection.isDisplayed ? 'visibility' : 'visibility_off'}</md-icon>
+        </md-icon-button>
       </span>
         `;
   }
 
   static override styles = css`
-    mwc-icon-button {
-      color: var(--mdc-theme-text);
-      /* Make the background disk that appears when hovered slightly bigger
-       * than the icon itself, which is 24px. */
-      --mdc-icon-button-size: 28px;
-      /* Tighten the buttons to save space. */
-      margin: -2px;
+    md-icon-button {
+      color: var(--md-sys-color-text);
+      --md-icon-button-icon-size: 20px;
+      --md-icon-button-state-layer-width: 24px;
+      --md-icon-button-state-layer-height: 24px;
+      /* The touch area is hardcoded as at least 48px by 48px. */
+      overflow: hidden;
     }
   `;
 }
diff --git a/src/batch_selection_test.ts b/src/batch_selection_test.ts
@@ -12,8 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import 'jasmine';
-
 import {BatchSelection} from './batch_selection';
 import {Batch, Field} from './entry';
 import {dispatch, EventType} from './events';

diff --git a/src/batch_selection_ui.ts b/src/batch_selection_ui.ts
@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import '@material/mwc-button';
 import './filtered_images_ui';
 import './filters_ui';
 

diff --git a/src/batch_selections_ui.ts b/src/batch_selections_ui.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import '@material/mwc-icon';
+import '@material/web/icon/icon';
 import './batch_selection_actions_ui';
 
 import {css, html, LitElement} from 'lit';
@@ -111,7 +111,7 @@ export class BatchSelectionsUi extends LitElement {
           EventType.FILTERED_DATA_INFO_REQUEST,
           {batchIndex: batchSelection.batch.index});
     }}>
-        <mwc-icon>filter_alt</mwc-icon>
+        <md-icon>filter_alt</md-icon>
         ${field.displayName}=${this.filterChipText(field, fieldFilter)}
       </div>`;
   }
@@ -187,14 +187,14 @@ export class BatchSelectionsUi extends LitElement {
   static override styles = css`
     :host {
       box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 6px 0px;
-      /* Necessary for mwc-menus to work properly without hacks. */
+      /* Necessary for md-menus to work properly without hacks. */
       overflow: visible;
       /* Does not work without overflow: hidden; */
       border-radius: 5px;
     }
 
     table {
-      color: var(--mdc-theme-text);
+      color: var(--md-sys-color-text);
       width: 100%;
       white-space: nowrap;
       border-collapse: collapse;
@@ -206,21 +206,21 @@ export class BatchSelectionsUi extends LitElement {
       border-style: solid;
     }
     th {
-      border-color: var(--mdc-theme-background);
-      background: var(--mdc-theme-surface);
+      border-color: var(--md-sys-color-background);
+      background: var(--md-sys-color-surface);
       font-size: 20px;
     }
     td {
-      border-color: var(--mdc-theme-surface);
+      border-color: var(--md-sys-color-surface);
       font-family: monospace;
       font-size: 16px;
     }
 
     tr {
-      background: var(--mdc-theme-background);
+      background: var(--md-sys-color-background);
     }
     tr:hover {
-      box-shadow: inset 0 0 8px 4px var(--mdc-theme-surface);
+      box-shadow: inset 0 0 8px 4px var(--md-sys-color-surface);
     }
     tr:not(:hover) batch-selection-actions-ui {
       /* Dim the action buttons when the table row is not hovered. */
@@ -249,12 +249,12 @@ export class BatchSelectionsUi extends LitElement {
     }
 
     #filterChip {
-      --mdc-icon-size: 12px;
+      --md-icon-size: 12px;
       font-size: 10px;
       padding: 2px 4px;
       border-radius: 30px;
-      background: var(--mdc-theme-primary);
-      color: var(--mdc-theme-background);
+      background: var(--md-sys-color-primary);
+      color: var(--md-sys-color-background);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -265,8 +265,8 @@ export class BatchSelectionsUi extends LitElement {
     }
 
     .referenceBatchChip {
-      background: var(--mdc-theme-primary);
-      color: var(--mdc-theme-background);
+      background: var(--md-sys-color-primary);
+      color: var(--md-sys-color-background);
       border-radius: 16px;
       padding: 2px 8px;
       font-size: 12px;