I wrote 187 tests for a Chrome extension. The three bugs that mattered were invisible to all of them.
My unit tests were green. My integration tests were green. The feature was broken in a way that produced no error, no warning, and no visual clue that anything was wrong. The feature was a CSS difference blend mode, used to compare a design mockup against a live page: matching pixels turn black, so only the differences light up. Mine turned nothing black. It looked exactly like normal mode, and I…
The reporter meticulously examined 187 tests for a Chrome extension, yet three critical bugs remained unseen by all tests. The extension utilized a CSS blend mode called "difference" to compare a design mockup against a live page. When the blend mode produced no visual difference, the feature appeared normal, allowing the bugs to remain undetected.
The first bug was an invisible CSS issue in a "closed shadow root," which held an image positioned over the live page. The `mix-blend-mode: difference;` property blended the image against the empty space inside the sealed stacking context, rather than the actual page underneath. This resulted in the image rendering normally, as if the property had never been set. The same applied to other CSS properties like `opacity`, `filter`, `transform`, `isolation`, `backdrop-filter`, `mask`, `contain: paint`, and `will-change`.
The second bug was related to a license validation process within the extension. The success path wrote to storage when the key was valid, while the failure path returned an error object without making any changes. This meant that when a subscription lapsed and the key became invalid, pressing "Re-check" in the UI displayed the message "This license key is disabled," but the customer still retained Pro features because the `isPro` property remained `true` in storage.
The only way for access to be revoked was through a once-per-24-hours background revalidation, causing a cancelled subscriber to keep Pro access until their browser checked again.
Lastly, the reporter discovered an SVG rendering issue where the SVG mockup rendered at 240×150 instead of its intended size. SVGs without width and height attributes or a specified viewBox had no intrinsic size, leading to unexpected dimensions. When an SVG with a viewBox was loaded into an `<img>` element, the browser used the default object size of 300×150, resulting in the image being displayed at a quarter of its actual size.
This issue arose because CSS defined a default fallback size for replaced elements with no intrinsic dimensions, but the presence of a viewBox caused the browser to keep the 150 height and calculate the width based on the viewBox's aspect ratio.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
