diff --git a/index.html b/index.html
index 71ef44a..29b8d91 100644
--- a/index.html
+++ b/index.html
@@ -162,6 +162,8 @@
.different-better {
color: var(--different-text-color);
}
+.default-zero,
+.different-zero,
.different-worse {
color: var(--error-text-color);
}
diff --git a/index.js b/index.js
index fbacc7e..9c4b2ab 100644
--- a/index.js
+++ b/index.js
@@ -255,18 +255,25 @@ function markDifferencesInLimits(adapter, device) {
mapLikeToKeyValueArray(adapter.limits)
.map(([k, v]) => {
const defaultLimit = defaultLimits[k];
+ const defaultClass = defaultLimit > 0
+ ? 'nowrap default-limit'
+ : 'nowrap default-limit default-zero';
const info = kLimitInfo[k];
const isDiff = defaultLimit !== undefined && defaultLimit !== v;
- const diffClass = defaultLimit !== undefined
- ? (isDiff
- ? differenceWorse(k, defaultLimit, v) ? 'different-worse' : 'different-better'
- : 'different-none')
- : 'unknown';
+ const diffClass = defaultLimit === undefined
+ ? 'unknown'
+ : (isDiff
+ ? differenceWorse(k, defaultLimit, v) ? 'different-worse' : 'different-better'
+ : (v === 0
+ ? 'different-zero'
+ : 'different-none'
+ )
+ );
const shortSize = shortSizeByType(v, info?.type ?? 'count');
const defaultSize = shortSizeByType(defaultLimit, info?.type ?? 'count');
const value = v > 1024 ? `${v} (${shortSize})` : shortSize;
const defaultValue = defaultLimit > 1024 ? `${defaultLimit} (${defaultSize})` : defaultSize;
- const defaultElem = el('span', {className: 'nowrap default-limit', textContent: defaultValue})
+ const defaultElem = el('span', {className: defaultClass, textContent: defaultValue})
const title = isDiff
? `default: ${defaultSize}\n${requestHint}`
: 'same as default'