diff --git a/src/lib/components/coverage/Coverage.spec.ts b/src/lib/components/coverage/Coverage.spec.ts
index 8400626..a34339c 100644
--- a/src/lib/components/coverage/Coverage.spec.ts
+++ b/src/lib/components/coverage/Coverage.spec.ts
@@ -43,15 +43,21 @@ test.describe('loading example file', () => {
 		let size_column = header.getByRole('columnheader').nth(1)
 		await expect.soft(size_column).toHaveAccessibleName('Total size')
 		await expect.soft(size_column).not.toHaveAttribute('aria-sort')
-		let coverage_column = header.getByRole('columnheader').nth(2)
+		let line_count_column = header.getByRole('columnheader').nth(2)
+		await expect.soft(line_count_column).toHaveAccessibleName('Lines')
+		await expect.soft(line_count_column).not.toHaveAttribute('aria-sort')
+		let coverage_column = header.getByRole('columnheader').nth(3)
 		await expect.soft(coverage_column).toHaveAccessibleName('Coverage')
 		await expect.soft(coverage_column).not.toHaveAttribute('aria-sort')
 
 		// Row contents:
 		let first_row = table.getByRole('row').nth(1)
-		await expect.soft(first_row.getByRole('cell').nth(0)).toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/0.BBE7cspC.css')
+		await expect
+			.soft(first_row.getByRole('cell').nth(0))
+			.toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/0.BBE7cspC.css')
 		await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('38 kB')
-		await expect.soft(first_row.getByRole('cell').nth(2)).toHaveAccessibleName('72.16%')
+		await expect.soft(first_row.getByRole('cell').nth(2)).toHaveAccessibleName('2,619')
+		await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('72.16%')
 
 		// Elements in correct state:
 		await expect.soft(table.getByRole('row').nth(1)).toHaveAttribute('aria-selected', 'true')
@@ -87,9 +93,11 @@ test.describe('loading example file', () => {
 		await expect.soft(url_header).toHaveAttribute('aria-sort', 'descending')
 		let first_row = table.getByRole('row').nth(1)
 		await expect.soft(first_row).toHaveAttribute('aria-selected', 'true')
-		await expect.soft(first_row.getByRole('cell').nth(0)).toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/Textarea.D3Oc5lUl.css')
+		await expect
+			.soft(first_row.getByRole('cell').nth(0))
+			.toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/Textarea.D3Oc5lUl.css')
 		await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('238 B')
-		await expect.soft(first_row.getByRole('cell').nth(2)).toHaveAccessibleName('100%')
+		await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('100%')
 		let css_content = await page.getByTestId('pre-css').textContent()
 		expect.soft(css_content).toContain('textarea.svelte-g7hyhb {')
 
@@ -97,9 +105,11 @@ test.describe('loading example file', () => {
 		await url_header.click()
 		await expect.soft(url_header).toHaveAttribute('aria-sort', 'ascending')
 		await expect.soft(first_row).toHaveAttribute('aria-selected', 'true')
-		await expect.soft(first_row.getByRole('cell').nth(0)).toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/0.BBE7cspC.css')
+		await expect
+			.soft(first_row.getByRole('cell').nth(0))
+			.toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/0.BBE7cspC.css')
 		await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('38 kB')
-		await expect.soft(first_row.getByRole('cell').nth(2)).toHaveAccessibleName('72.16%')
+		await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('72.16%')
 	})
 
 	test('sorting by total size', async ({ page }) => {
@@ -109,9 +119,11 @@ test.describe('loading example file', () => {
 		await expect.soft(size_header).toHaveAttribute('aria-sort', 'descending')
 		let first_row = table.getByRole('row').nth(1)
 		await expect.soft(first_row).toHaveAttribute('aria-selected', 'true')
-		await expect.soft(first_row.getByRole('cell').nth(0)).toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/0.BBE7cspC.css')
+		await expect
+			.soft(first_row.getByRole('cell').nth(0))
+			.toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/0.BBE7cspC.css')
 		await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('38 kB')
-		await expect.soft(first_row.getByRole('cell').nth(2)).toHaveAccessibleName('72.16%')
+		await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('72.16%')
 		let css_content = await page.getByTestId('pre-css').textContent()
 		expect.soft(css_content).toContain('.logo.svelte-1jiwtxp {')
 
@@ -119,23 +131,27 @@ test.describe('loading example file', () => {
 		await size_header.click()
 		await expect.soft(size_header).toHaveAttribute('aria-sort', 'ascending')
 		await expect.soft(first_row).toHaveAttribute('aria-selected', 'true')
-		await expect.soft(first_row.getByRole('cell').nth(0)).toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/FormattedDate.JHv9Zh3p.css')
+		await expect
+			.soft(first_row.getByRole('cell').nth(0))
+			.toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/FormattedDate.JHv9Zh3p.css')
 		await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('69 B')
-		await expect.soft(first_row.getByRole('cell').nth(2)).toHaveAccessibleName('100%')
+		await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('100%')
 		css_content = await page.getByTestId('pre-css').textContent()
 		expect.soft(css_content).toContain('time.svelte-60ldmz {')
 	})
 
 	test('sorting by coverage', async ({ page }) => {
 		let header = table.getByRole('row').first()
-		let coverage_header = header.getByRole('columnheader').nth(2)
+		let coverage_header = header.getByRole('columnheader').nth(3)
 		await coverage_header.click()
 		await expect.soft(coverage_header).toHaveAttribute('aria-sort', 'descending')
 		let first_row = table.getByRole('row').nth(1)
 		await expect.soft(first_row).toHaveAttribute('aria-selected', 'true')
-		await expect.soft(first_row.getByRole('cell').nth(0)).toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/23.lTvFD_l9.css')
+		await expect
+			.soft(first_row.getByRole('cell').nth(0))
+			.toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/23.lTvFD_l9.css')
 		await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('405 B')
-		await expect.soft(first_row.getByRole('cell').nth(2)).toHaveAccessibleName('100%')
+		await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('100%')
 		let css_content = await page.getByTestId('pre-css').textContent()
 		expect.soft(css_content).toContain('.form.svelte-148ca8f {')
 
@@ -143,10 +159,12 @@ test.describe('loading example file', () => {
 		await coverage_header.click()
 		await expect.soft(coverage_header).toHaveAttribute('aria-sort', 'ascending')
 		await expect.soft(first_row).toHaveAttribute('aria-selected', 'true')
-		await expect.soft(first_row.getByRole('cell').nth(0)).toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/25.C4edrrKC.css')
+		await expect
+			.soft(first_row.getByRole('cell').nth(0))
+			.toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/25.C4edrrKC.css')
 		await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('780 B')
-		await expect.soft(first_row.getByRole('cell').nth(2)).toHaveAccessibleName('0%')
+		await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('0%')
 		css_content = await page.getByTestId('pre-css').textContent()
 		expect.soft(css_content).toContain('.page.svelte-1b1m7j9 {')
 	})
-})
\ No newline at end of file
+})
diff --git a/src/lib/components/coverage/Coverage.svelte b/src/lib/components/coverage/Coverage.svelte
index dda312d..e2faedd 100644
--- a/src/lib/components/coverage/Coverage.svelte
+++ b/src/lib/components/coverage/Coverage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { PaneGroup, Pane, PaneResizer } from 'paneforge'
 	import { format_filesize } from '$lib/format-filesize'
-	import { format_percentage } from '$lib/format-number'
+	import { format_number, format_percentage } from '$lib/format-number'
 	import { create_keyboard_list } from '$components/use-keyboard-list.svelte'
 	import Panel from '$components/Panel.svelte'
 	import Meter from '$components/Meter.svelte'
@@ -23,7 +23,12 @@
 	} = create_keyboard_list()
 	let selected_index = $state(0)
 
-	let calculated = $derived(calculate_coverage(browser_coverage))
+	function parse_html(html: string) {
+		let parser = new DOMParser()
+		return parser.parseFromString(html, 'text/html')
+	}
+
+	let calculated = $derived(calculate_coverage(browser_coverage, parse_html))
 
 	let max_lines = $derived.by(() => {
 		let max = 0
@@ -39,7 +44,7 @@
 		selected_index = active_index
 	}
 
-	let sort_by = $state<'bytes' | 'coverage' | 'name' | undefined>(undefined)
+	let sort_by = $state<'bytes' | 'coverage' | 'name' | 'lines' | undefined>(undefined)
 	let sort_direction = $state<'asc' | 'desc'>('asc')
 
 	let sorted_items = $derived.by(() => {
@@ -60,6 +65,9 @@
 			if (sort_by === 'name') {
 				return sort_direction === 'asc' ? string_sort(a.url, b.url) : string_sort(b.url, a.url)
 			}
+			if (sort_by === 'lines') {
+				return sort_direction === 'asc' ? a.covered_lines - b.covered_lines : b.covered_lines - a.covered_lines
+			}
 			return 0
 		})
 	})
@@ -76,7 +84,7 @@
 	})
 </script>
 
-{#snippet sorted_th(name: 'bytes' | 'coverage' | 'name', label: string)}
+{#snippet sorted_th(name: 'bytes' | 'coverage' | 'name' | 'lines', label: string)}
 	{@const sort_by_attr = sort_by === name ? (sort_direction === 'asc' ? 'ascending' : 'descending') : undefined}
 	<th scope="col" aria-sort={sort_by_attr}>
 		<button
@@ -103,18 +111,22 @@
 			<div>
 				<dt>Coverage</dt>
 				<dd>{format_percentage(calculated.coverage_ratio)}</dd>
+				<dd>{format_percentage(calculated.line_coverage)} of lines</dd>
 			</div>
 			<div>
-				<dt>Total size</dt>
+				<dt>Total</dt>
 				<dd>{format_filesize(calculated.used_bytes + calculated.unused_bytes)}</dd>
+				<dd>{format_number(calculated.total_lines)} lines</dd>
 			</div>
 			<div>
 				<dt>Used</dt>
 				<dd>{format_filesize(calculated.used_bytes)}</dd>
+				<dd>{format_number(calculated.covered_lines)} lines</dd>
 			</div>
 			<div>
 				<dt>Unused</dt>
 				<dd>{format_filesize(calculated.unused_bytes)}</dd>
+				<dd>{format_number(calculated.uncovered_lines)} lines</dd>
 			</div>
 		</div>
 	</Panel>
@@ -123,7 +135,7 @@
 <h2 class="sr-only">Coverage per stylesheet</h2>
 <div class="devtools" data-empty={calculated.coverage_per_stylesheet.length === 0 ? 'true' : 'false'}>
 	{#if calculated.coverage_per_stylesheet.length > 0}
-		<PaneGroup direction="horizontal">
+		<PaneGroup direction="horizontal" autoSaveId="css-coverage">
 			<Pane defaultSize={50} minSize={20}>
 				<Table>
 					<caption class="sr-only">Coverage per origin</caption>
@@ -131,6 +143,7 @@
 						<tr>
 							{@render sorted_th('name', 'URL')}
 							{@render sorted_th('bytes', 'Total size')}
+							{@render sorted_th('lines', 'Lines')}
 							{@render sorted_th('coverage', 'Coverage')}
 							<th scope="col">Coverage visualized</th>
 						</tr>
@@ -139,12 +152,13 @@
 						<tbody use:root={{ onchange }} style:--meter-height="0.5rem">
 							{#each sorted_items as item_index, index}
 								{@const stylesheet = calculated.coverage_per_stylesheet[item_index]}
-								{@const { url, total_bytes, coverage_ratio } = stylesheet}
-								<tr use:item={{ value: index.toString() }} aria-selected={selected_index === index ? 'true': 'false'}>
+								{@const { url, total_bytes, total_lines, coverage_ratio, covered_lines } = stylesheet}
+								<tr use:item={{ value: index.toString() }} aria-selected={selected_index === index ? 'true' : 'false'}>
 									<td class="url">
 										{url}
 									</td>
 									<td class="numeric">{format_filesize(total_bytes)}</td>
+									<td class="numeric">{format_number(total_lines)}</td>
 									<td class="numeric">{format_percentage(coverage_ratio)}</td>
 									<td>
 										<div style:width={(stylesheet.total_lines / max_lines) * 100 + '%'}>
@@ -223,6 +237,11 @@
 			flex-direction: row;
 			justify-content: space-between;
 		}
+
+		& > div {
+			display: grid;
+			row-gap: var(--space-2);
+		}
 	}
 
 	.css-slide {
@@ -231,15 +250,16 @@
 		border-inline-start: 1px solid var(--fg-450);
 	}
 
-	dt {
+	dt,
+	dd:last-of-type {
 		text-transform: uppercase;
 		color: var(--fg-300);
 		font-weight: var(--font-bold);
 		font-size: var(--size-sm);
 	}
 
-	dd {
-		font-size: var(--size-5xl);
+	dd:first-of-type {
+		font-size: var(--size-4xl);
 		line-height: var(--leading-none);
 		font-weight: var(--font-ultrabold);
 		color: var(--fg-0);
@@ -263,7 +283,13 @@
 	}
 
 	tr {
-		--meter-bg: var(--bg-500);
+		--meter-bg: repeating-linear-gradient(
+			-45deg,
+			var(--error-400),
+			var(--error-400) 3px,
+			var(--error-200) 3px,
+			var(--error-200) 6px
+		);
 	}
 
 	.sort-button {
diff --git a/src/lib/components/coverage/calculate-coverage.spec.ts b/src/lib/components/coverage/calculate-coverage.spec.ts
new file mode 100644
index 0000000..7059796
--- /dev/null
+++ b/src/lib/components/coverage/calculate-coverage.spec.ts
@@ -0,0 +1,332 @@
+// The only reason this is a .spec file and not a .test is because we need playwright installed
+// import { test, expect, describe, beforeAll } from 'vitest'
+import { chromium, test, expect } from '@playwright/test'
+import { calculate_coverage } from './calculate-coverage'
+import { DOMParser } from 'linkedom'
+import type { Coverage } from './types'
+import { format } from '@projectwallace/format-css'
+
+function html_parser(html: string) {
+	return new DOMParser().parseFromString(html, 'text/html')
+}
+
+async function collect_coverage(html: string, { link_css }: { link_css?: string } = {}) {
+	let browser = await chromium.launch({ headless: true })
+	let page = await browser.newPage()
+	await page.route('**/test.html', (route) => {
+		route.fulfill({
+			status: 200,
+			contentType: 'text/html',
+			body: html
+		})
+	})
+	await page.route('**/style.css', (route) => {
+		route.fulfill({
+			status: 200,
+			contentType: 'text/css',
+			body: link_css || ''
+		})
+	})
+	await page.coverage.startCSSCoverage()
+	await page.goto('http://localhost/test.html', { waitUntil: 'domcontentloaded' })
+	await page.evaluate(() => getComputedStyle(document.body)) // force CSS evaluation
+	let coverage = await page.coverage.stopCSSCoverage()
+	await browser.close()
+	return coverage
+}
+
+test.describe('collect coverage', () => {
+	test('collects coverage from html <style> tag', async () => {
+		let html = `
+		<!doctype html>
+		<html>
+			<head>
+				<title>test document</title>
+				<style>
+					body { margin: 0; }
+					p { color: green } /* not covered */
+					h1 { color: red; }
+				</style>
+			</head>
+			<body>
+				<h1>Hello world</h1>
+			</body>
+		</html>
+		`
+		let coverage = await collect_coverage(html)
+		expect.soft(coverage).toHaveLength(1)
+		expect.soft(coverage.at(0)).toEqual({
+			url: 'http://localhost/test.html',
+			text: '\n\t\t\t\t\tbody { margin: 0; }\n\t\t\t\t\tp { color: green } /* not covered */\n\t\t\t\t\th1 { color: red; }\n\t\t\t\t',
+			ranges: [
+				{ start: 6, end: 25 },
+				{ start: 73, end: 91 }
+			]
+		})
+	})
+
+	test('collects coverage from <link rel="stylesheet">', async () => {
+		let html = `
+		<!doctype html>
+		<html>
+			<head>
+				<title>test document</title>
+				<link rel="stylesheet" href="http://localhost/style.css">
+			</head>
+			<body>
+				<h1>Hello world</h1>
+			</body>
+		</html>
+		`
+		let css = `
+			body { margin: 0; }
+			p { color: green } /* not covered */
+			h1 { color: red; }
+		`
+		let coverage = await collect_coverage(html, { link_css: css })
+		expect.soft(coverage).toHaveLength(1)
+		expect.soft(coverage.at(0)).toEqual({
+			url: 'http://localhost/style.css',
+			text: '\n\t\t\tbody { margin: 0; }\n\t\t\tp { color: green } /* not covered */\n\t\t\th1 { color: red; }\n\t\t',
+			ranges: [
+				{ start: 4, end: 23 },
+				{ start: 67, end: 85 }
+			]
+		})
+	})
+
+	// test.todo('collects coverage from <style> and <link rel="stylesheet">')
+
+	test.describe('coverage quirks', () => {
+		test('coverage does not include the prelude and name of an atrule', async () => {
+			let html = `
+				<!doctype html>
+				<html>
+					<head>
+						<title>test document</title>
+						<link rel="stylesheet" href="http://localhost/style.css">
+					</head>
+					<body>
+						<h1>Hello world</h1>
+					</body>
+				</html>
+				`
+			let css = `
+				@media all {
+					h1 {
+						color: green;
+					}
+				}
+				@supports (display: grid) {
+					h1 {
+						font-size: 24px;
+					}
+				}
+			`
+			let coverage = await collect_coverage(html, { link_css: css })
+			expect.soft(coverage).toHaveLength(1)
+			let sheet = coverage.at(0)!
+			expect.soft(sheet?.ranges).toEqual([
+				{ start: 12, end: 16 },
+				{ start: 23, end: 54 },
+				{ start: 75, end: 91 },
+				{ start: 98, end: 132 }
+			])
+			// Browser coverage data always skips the `@` symbol with the atrule name
+			// as well as the opening `{` and closing `}` of the atrule.
+			expect.soft(sheet.text!.substring(12, 16)).toBe('all ')
+			expect.soft(sheet.text!.substring(23, 54)).toBe('h1 {\n\t\t\t\t\t\tcolor: green;\n\t\t\t\t\t}')
+			expect.soft(sheet.text!.substring(75, 91)).toBe('(display: grid) ')
+			expect.soft(sheet.text!.substring(98, 132)).toBe('h1 {\n\t\t\t\t\t\tfont-size: 24px;\n\t\t\t\t\t}')
+		})
+	})
+})
+
+test.describe('calculates coverage', () => {
+	test.describe('from <style> tag', async () => {
+		let coverage: Coverage[]
+
+		test.beforeAll(async () => {
+			let html = `
+			<!doctype html>
+				<html>
+					<head>
+						<title>test document</title>
+						<style>
+							body { margin: 0; }
+							p { color: green } /* not covered */
+							h1 { color: red; }
+						</style>
+					</head>
+					<body>
+						<h1>Hello world</h1>
+					</body>
+				</html>
+			`
+			coverage = await collect_coverage(html)
+		})
+
+		test('counts totals', () => {
+			let result = calculate_coverage(coverage, html_parser)
+			expect.soft(result.files_found).toBe(1)
+			expect.soft(result.total_bytes).toBe(80)
+			expect.soft(result.used_bytes).toBe(37)
+			expect.soft(result.unused_bytes).toBe(41)
+			expect.soft(result.total_lines).toBe(11)
+			expect.soft(result.covered_lines).toBe(7)
+			expect.soft(result.uncovered_lines).toBe(11 - 7)
+			expect.soft(result.line_coverage).toBe(7 / 11)
+		})
+
+		test('calculates stats per stylesheet', () => {
+			let result = calculate_coverage(coverage, html_parser)
+			let sheet = result.coverage_per_stylesheet.at(0)!
+			expect.soft(sheet.url).toBe('http://localhost/test.html')
+			expect.soft(sheet.ranges).toEqual([
+				{ start: 0, end: 20 },
+				{ start: 61, end: 80 }
+			])
+			expect.soft(sheet.total_lines).toBe(11)
+			expect.soft(sheet.covered_lines).toBe(7)
+			expect.soft(sheet.uncovered_lines).toBe(4)
+			expect.soft(sheet.coverage_ratio).toBe(7 / 11)
+			expect.soft(sheet.line_coverage).toEqual(new Uint8Array([1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1]))
+		})
+	})
+
+	test.describe('from <link rel="stylesheet">', () => {
+		let coverage: Coverage[]
+		let css = `
+			body { margin: 0; }
+			p { color: green } /* not covered */
+			h1 { color: red; }
+			p { color: green } /* not covered */
+			@media (width > 40em) {
+				h1 { font-size: 24px; }
+			}
+		`
+
+		test.beforeAll(async () => {
+			let html = `
+				<!doctype html>
+				<html>
+					<head>
+						<title>test document</title>
+						<link rel="stylesheet" href="http://localhost/style.css">
+					</head>
+					<body>
+						<h1>Hello world</h1>
+					</body>
+				</html>
+			`
+			coverage = await collect_coverage(html, { link_css: css })
+		})
+
+		test('counts totals', () => {
+			let result = calculate_coverage(coverage, html_parser)
+			expect.soft(result.files_found).toBe(1)
+			expect.soft(result.total_bytes).toBe(174)
+			expect.soft(result.used_bytes).toBe(75)
+			expect.soft(result.unused_bytes).toBe(93)
+			expect.soft(result.total_lines).toBe(21)
+			expect.soft(result.covered_lines).toBe(12)
+			expect.soft(result.uncovered_lines).toBe(21 - 12)
+			expect.soft(result.line_coverage).toBe(12 / 21)
+		})
+
+		test('calculates stats per stylesheet', () => {
+			let result = calculate_coverage(coverage, html_parser)
+			let sheet = result.coverage_per_stylesheet.at(0)!
+			expect.soft(sheet.url).toBe('http://localhost/style.css')
+			expect.soft(sheet.ranges).toEqual([
+				{ start: 0, end: 20 },
+				{ start: 61, end: 80 },
+				{ start: 128, end: 142 },
+				{ start: 146, end: 172 }
+			])
+			expect.soft(sheet.total_lines).toBe(21)
+			expect.soft(sheet.covered_lines).toBe(12)
+			expect.soft(sheet.uncovered_lines).toBe(21 - 12)
+			expect.soft(sheet.coverage_ratio).toBe(12 / 21)
+			expect
+				.soft(sheet.line_coverage)
+				.toEqual(new Uint8Array([1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1, 1]))
+			expect.soft(sheet.text).toEqual(format(css))
+		})
+	})
+
+	test.describe('from coverage data downloaded directly from the browser as JSON', () => {
+		// This coverage was taken from Edge devtools
+		let coverage = [
+			{
+				url: 'https://example.com',
+				ranges: [
+					{
+						start: 230,
+						end: 271
+					},
+					{
+						start: 323,
+						end: 338
+					},
+					{
+						start: 342,
+						end: 367
+					},
+					{
+						start: 389,
+						end: 423
+					}
+				],
+				text: '<!DOCTYPE html>\n<html lang="en" >\n\n<head>\n  <meta charset="UTF-8">\n  \n  \n  \n\n  <title>Untitled</title>\n\n    <link rel="canonical" href="https://codepen.io/bartveneman/pen/QwydYVy">\n  \n  \n  \n  \n\n  \n  \n  \n</head>\n\n<body>\n  <style>\n\th1 {\n\t\tcolor: blue;\n\t\tfont-size: 24px;\n\t}\n\n\t/* not covered */\n\tp {\n\t\tcolor: red;\n\t}\n\n\t@media (width > 30em) {\n\t\th1 {\n\t\t\tcolor: green;\n\t\t}\n\t}\n</style>\n\n<script>\n\tconsole.log(`I\'m 100% covered`)\n</script>\n\n<h1>Hello world</h1>\n  \n  \n  \n</body>\n\n</html>\n'
+			}
+		]
+
+		test('counts totals', () => {
+			let result = calculate_coverage(coverage, html_parser)
+			expect.soft(result.covered_lines).toBe(8)
+			expect.soft(result.uncovered_lines).toBe(6)
+			expect.soft(result.total_lines).toBe(14)
+			expect.soft(result.line_coverage).toBe(8 / 14)
+		})
+
+		test('extracts and formats css', () => {
+			let result = calculate_coverage(coverage, html_parser)
+			expect(result.coverage_per_stylesheet.at(0)?.text).toEqual(
+				format(`h1 {
+					color: blue;
+					font-size: 24px;
+				}
+
+				/* not covered */
+				p {
+					color: red;
+				}
+
+				@media (width > 30em) {
+					h1 {
+						color: green;
+					}
+				}`)
+			)
+		})
+
+		test('calculates line coverage', () => {
+			let result = calculate_coverage(coverage, html_parser)
+			expect(result.coverage_per_stylesheet.at(0)?.line_coverage).toEqual(
+				new Uint8Array([
+					// h1 {}
+					1, 1, 1, 1,
+					// comment + p {}
+					0, 0, 0, 0, 0,
+					// @media
+					1,
+					// h1 {
+					0,
+					// color: green; }
+					1, 1, 1
+				])
+			)
+		})
+	})
+})
diff --git a/src/lib/components/coverage/calculate-coverage.ts b/src/lib/components/coverage/calculate-coverage.ts
index ddcb54a..385e79c 100644
--- a/src/lib/components/coverage/calculate-coverage.ts
+++ b/src/lib/components/coverage/calculate-coverage.ts
@@ -1,19 +1,14 @@
 import type { Coverage, Range } from './types'
 import { prettify } from './prettify'
+import { ext } from './ext'
+import type { HTMLDocument } from 'linkedom/types/html/document'
 
-export function ext(url: string) {
-	try {
-		let parsed_url = new URL(url)
-		return parsed_url.pathname.slice(parsed_url.pathname.lastIndexOf('.') + 1)
-	} catch (error) {
-		let ext_index = url.lastIndexOf('.')
-		return url.slice(ext_index, url.indexOf('/', ext_index) + 1)
-	}
+interface HtmlParser {
+	(html: string): Document | HTMLDocument
 }
 
-function get_css_and_ranges_from_html(html: string, old_ranges: Range[]) {
-	let parser = new DOMParser()
-	let doc = parser.parseFromString(html, 'text/html')
+export function get_css_and_ranges_from_html(parse_html: HtmlParser, html: string, old_ranges: Range[]) {
+	let doc = parse_html(html)
 	let combined_css = ''
 	let new_ranges = []
 	let current_offset = 0
@@ -21,7 +16,7 @@ function get_css_and_ranges_from_html(html: string, old_ranges: Range[]) {
 
 	for (let style_element of style_elements) {
 		let style_content = style_element.textContent
-		if (!style_content) continue
+		if (!style_content.trim()) continue
 
 		// Append the style content directly to the combined CSS
 		combined_css += style_content
@@ -35,7 +30,7 @@ function get_css_and_ranges_from_html(html: string, old_ranges: Range[]) {
 			if (range.start >= start_index && range.end <= end_index) {
 				new_ranges.push({
 					start: current_offset + (range.start - start_index),
-					end: current_offset + (range.end - start_index),
+					end: current_offset + (range.end - start_index)
 				})
 			}
 		}
@@ -47,51 +42,62 @@ function get_css_and_ranges_from_html(html: string, old_ranges: Range[]) {
 	return {
 		css: combined_css,
 		ranges: new_ranges
-	};
+	}
 }
 
-export function calculate_coverage(browser_coverage: Coverage[]) {
-	let total_bytes = 0
-	let used_bytes = 0
-	let unused_bytes = 0
-	let files_found = browser_coverage.length
-	let filtered_coverage = []
+function is_html(text: string): boolean {
+	return /<\/?(html|body|head|div|span|script|style)/i.test(text)
+}
+
+export function filter_coverage(coverage: Coverage[], parse_html: HtmlParser): Coverage[] {
+	let result = []
 
-	for (let entry of browser_coverage) {
+	for (let entry of coverage) {
 		if (!entry.text) continue
 		let extension = ext(entry.url).toLowerCase()
 		if (extension === 'js') continue
 
 		// Always include CSS files
 		if (extension === 'css') {
-			filtered_coverage.push(entry)
+			result.push(entry)
 			continue
 		}
 
-		// At this point it's almost certainly an inline HTML style tag
-		// TODO
-		// But!!! in case of running Playwright on localhost we still end
-		// up here because all CSS is reported as { url: 'http://localhost/my-page', text: '.my-css {}' }
-		// which is not HTML but pure CSS
-		let { css, ranges } = get_css_and_ranges_from_html(entry.text, entry.ranges)
-		filtered_coverage.push({
+		if (is_html(entry.text)) {
+			let { css, ranges } = get_css_and_ranges_from_html(parse_html, entry.text, entry.ranges)
+			result.push({
+				url: entry.url,
+				text: css,
+				ranges
+			})
+			continue
+		}
+
+		// At this point it can only be CSS
+		result.push({
 			url: entry.url,
-			text: css,
-			ranges,
+			text: entry.text,
+			ranges: entry.ranges
 		})
 	}
 
-	let prettified_coverage = prettify(filtered_coverage)
-
-	// prerequisites
-	// - we check each stylesheet content only once (to avoid counting the same content multiple times)
-	// - if a duplicate stylesheet enters the room, we add it's ranges to the existing stylesheet's ranges
-	// - only bytes of deduplicated stylesheets are counted
-	// - after all entries have been processed, we calculate the total bytes, used bytes, and unused bytes
+	return result
+}
 
-	let checked_stylesheets = new Map<string, { url: string, ranges: { start: number, end: number }[] }>()
+/**
+ * @description
+ * prerequisites
+ * - we check each stylesheet content only once (to avoid counting the same content multiple times)
+ * - if a duplicate stylesheet enters the room, we add it's ranges to the existing stylesheet's ranges
+ * - only bytes of deduplicated stylesheets are counted
+ * - after all entries have been processed, we calculate the total bytes, used bytes, and unused bytes
+ */
+export function deduplicate_entries(
+	entries: Coverage[]
+): Map<NonNullable<Coverage['text']>, Pick<Coverage, 'ranges' | 'url'>> {
+	let checked_stylesheets = new Map<string, { url: string; ranges: Range[] }>()
 
-	for (let entry of prettified_coverage) {
+	for (let entry of entries) {
 		let text = entry.text || ''
 		if (checked_stylesheets.has(text)) {
 			let sheet = checked_stylesheets.get(text)!
@@ -111,37 +117,69 @@ export function calculate_coverage(browser_coverage: Coverage[]) {
 				}
 			}
 		} else {
-			total_bytes += text.length
 			checked_stylesheets.set(text, {
 				url: entry.url,
-				ranges: entry.ranges,
+				ranges: entry.ranges
 			})
 		}
 	}
 
+	return checked_stylesheets
+}
+
+/**
+ * @description
+ * CSS Code Coverage calculation
+ *
+ * These are the steps performed to calculate coverage:
+ * 1. Filter eligible files
+ * 2. Prettify the CSS dicovered in each Coverage and update their ranges
+ * 3. De-duplicate Coverages: merge all ranges for CSS sources occurring multiple times
+ * 4. Calculate used/unused CSS bytes (fastest path, no inspection of the actual CSS needed)
+ * 5. Calculate line-coverage, byte-coverage per stylesheet
+ */
+
+// TODO: add flag for prettification on/off
+// When disabled we can skip the prettify step as well as recalculating the ranges in HTML (get_css_and_ranges_from_html)
+// This also means that when pretty=true, parse_html MUST also be included. parse_html is optional when pretty=false
+export function calculate_coverage(browser_coverage: Coverage[], parse_html: HtmlParser) {
+	let total_bytes = 0
+	let used_bytes = 0
+	let unused_bytes = 0
+	let total_lines = 0
+	let covered_lines = 0
+	let uncovered_lines = 0
+	let files_found = browser_coverage.length
+	let filtered_coverage = filter_coverage(browser_coverage, parse_html)
+	let prettified_coverage = prettify(filtered_coverage)
+	let deduplicated = deduplicate_entries(prettified_coverage)
+
+	// SECTION: calculate used vs. unused bytes
 	// We sort the ranges by their start position
 	// Then we iterate over the ranges and calculate the used bytes
-	// Unused pieces of the stylesheet are stored in the unused_parts array
-	for (let [text, { ranges }] of checked_stylesheets) {
+	for (let [text, { ranges }] of deduplicated) {
+		total_bytes += text.length
 		let last_position = 0
 		ranges.sort((a, b) => a.start - b.start)
 		for (let range of ranges) {
 			if (range.start > last_position) {
 				let unused_text = text.slice(last_position, range.start)
-				unused_bytes += unused_text.trim().length
+				unused_bytes += unused_text.length
 			}
 			used_bytes += range.end - range.start - 1
 			last_position = range.end
 		}
 	}
 
-	let coverage_per_stylesheet = Array.from(checked_stylesheets).map(([text, { url, ranges }]) => {
-		let used = ranges.reduce((acc, range) => acc + (range.end - range.start), 0)
+	// SECTION: calculate coverage for each individual stylesheet we found
+	let coverage_per_stylesheet = Array.from(deduplicated).map(([text, { url, ranges }]) => {
+		let file_used_bytes = ranges.reduce((acc, range) => acc + (range.end - range.start), 0)
 		let trimmed_text = text.trim()
 
 		let lines = trimmed_text.split('\n')
-		let line_coverage = new Uint8Array(lines.length)
-		let lines_covered = 0
+		let total_file_lines = lines.length
+		let line_coverage = new Uint8Array(total_file_lines)
+		let file_lines_covered = 0
 		let offset = 0
 		let index = 0
 		for (let line of lines) {
@@ -149,62 +187,70 @@ export function calculate_coverage(browser_coverage: Coverage[]) {
 			let end = offset + line.length
 			let next_offset = end + 1 // +1 for the newline character
 			let is_in_range = false
+			let trimmed_line = line.trim()
+			let is_empty = trimmed_line.length === 0
+			let is_closing_brace = !is_empty && trimmed_line === '}'
 
-			for (let range of ranges) {
-				if (range.start <= start && range.end >= end) {
-					is_in_range = true
-					break
-				} else if (line.startsWith('@') && range.start > start && range.start < next_offset) {
-					is_in_range = true
-					break
+			if (!is_empty && !is_closing_brace) {
+				for (let range of ranges) {
+					if (range.start <= start && range.end >= end) {
+						is_in_range = true
+						break
+					} else if (trimmed_line.startsWith('@') && range.start > start && range.start < next_offset) {
+						is_in_range = true
+						break
+					}
 				}
 			}
 
-			let trimmed_line = line.trim()
-			let is_empty = trimmed_line.length === 0
-			let is_closing_brace = trimmed_line === '}'
 			let prev_is_covered = index > 0 ? line_coverage[index - 1] === 1 : false
 
 			if (is_in_range && !is_closing_brace && !is_empty) {
-				lines_covered++
+				file_lines_covered++
 				line_coverage[index] = 1
-			}
-			else if ((is_empty || is_closing_brace) && prev_is_covered) {
-				lines_covered++
+			} else if ((is_empty || is_closing_brace) && prev_is_covered) {
+				file_lines_covered++
 				line_coverage[index] = 1
-			}
-			else if (is_empty && line_coverage[index - 1] === 0) {
+			} else if (is_empty && line_coverage[index - 1] === 0) {
 				line_coverage[index] = 0
-			}
-			else {
+			} else {
 				line_coverage[index] = 0
 			}
 			offset = next_offset
 			index++
 		}
 
+		total_lines += total_file_lines
+		covered_lines += file_lines_covered
+		uncovered_lines += total_file_lines - file_lines_covered
+
 		return {
 			url,
 			text: trimmed_text,
 			ranges,
-			used_bytes: used,
+			used_bytes: file_used_bytes,
 			total_bytes: trimmed_text.length,
-			coverage_ratio: lines_covered / line_coverage.length,
+			coverage_ratio: file_lines_covered / total_file_lines,
 			line_coverage,
-			total_lines: line_coverage.length,
-			covered_lines: lines_covered,
-			uncovered_lines: line_coverage.length - lines_covered,
+			total_lines: total_file_lines,
+			covered_lines: file_lines_covered,
+			uncovered_lines: total_file_lines - file_lines_covered
 		}
 	})
 
-	let coverage_ratio = coverage_per_stylesheet.reduce((acc, sheet) => acc + sheet.coverage_ratio, 0) / coverage_per_stylesheet.length
+	let coverage_ratio =
+		coverage_per_stylesheet.reduce((acc, sheet) => acc + sheet.coverage_ratio, 0) / coverage_per_stylesheet.length
 
 	return {
 		files_found,
 		total_bytes,
+		total_lines,
 		used_bytes,
+		covered_lines,
 		unused_bytes,
+		uncovered_lines,
 		coverage_ratio,
-		coverage_per_stylesheet,
+		line_coverage: covered_lines / total_lines,
+		coverage_per_stylesheet
 	}
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/coverage/deduplicate-entries.test.ts b/src/lib/components/coverage/deduplicate-entries.test.ts
new file mode 100644
index 0000000..e0690dc
--- /dev/null
+++ b/src/lib/components/coverage/deduplicate-entries.test.ts
@@ -0,0 +1,116 @@
+import { test, expect } from 'vitest'
+import { deduplicate_entries } from './calculate-coverage'
+
+test('handles a single entry', () => {
+	let entry = {
+		text: 'a {}',
+		ranges: [{ start: 0, end: 4 }],
+		url: 'example.com'
+	}
+	expect(deduplicate_entries([entry])).toEqual(new Map([[entry.text, { url: entry.url, ranges: entry.ranges }]]))
+})
+
+test('deduplicats a simple duplicate entry', () => {
+	let entry = {
+		text: 'a {}',
+		ranges: [{ start: 0, end: 4 }],
+		url: 'example.com'
+	}
+	expect(deduplicate_entries([entry, entry])).toEqual(new Map([[entry.text, { url: entry.url, ranges: entry.ranges }]]))
+})
+
+test('merges two identical texts with different URLs and identical ranges', () => {
+	let entries = [
+		{
+			text: 'a {}',
+			ranges: [{ start: 0, end: 4 }],
+			url: 'example.com/a'
+		},
+		{
+			text: 'a {}',
+			ranges: [{ start: 0, end: 4 }],
+			url: 'example.com/b'
+		}
+	]
+	expect(deduplicate_entries(entries)).toEqual(
+		new Map([[entries[0].text, { url: entries[0].url, ranges: entries[0].ranges }]])
+	)
+})
+
+test('merges different ranges on identical CSS, different URLs', () => {
+	let entries = [
+		{
+			text: 'a {} b {}',
+			ranges: [{ start: 0, end: 4 }],
+			url: 'example.com/a'
+		},
+		{
+			text: 'a {} b {}',
+			ranges: [{ start: 5, end: 9 }],
+			url: 'example.com/b'
+		}
+	]
+	expect(deduplicate_entries(entries)).toEqual(
+		new Map([[entries[0].text, { url: entries[0].url, ranges: [entries[0].ranges[0], entries[1].ranges[0]] }]])
+	)
+})
+
+test('merges different ranges on identical CSS, identical URLs', () => {
+	let entries = [
+		{
+			text: 'a {} b {}',
+			ranges: [{ start: 0, end: 4 }],
+			url: 'example.com'
+		},
+		{
+			text: 'a {} b {}',
+			ranges: [{ start: 5, end: 9 }],
+			url: 'example.com'
+		}
+	]
+	expect(deduplicate_entries(entries)).toEqual(
+		new Map([[entries[0].text, { url: entries[0].url, ranges: [entries[0].ranges[0], entries[1].ranges[0]] }]])
+	)
+})
+
+test('does not merge different CSS with different URLs and identical ranges', () => {
+	let entries = [
+		{
+			text: 'a {}',
+			ranges: [{ start: 0, end: 4 }],
+			url: 'example.com/a'
+		},
+		{
+			text: 'b {}',
+			ranges: [{ start: 0, end: 4 }],
+			url: 'example.com/b'
+		}
+	]
+	expect(deduplicate_entries(entries)).toEqual(
+		new Map([
+			[entries[0].text, { url: entries[0].url, ranges: entries[0].ranges }],
+			[entries[1].text, { url: entries[1].url, ranges: entries[1].ranges }]
+		])
+	)
+})
+
+test('does not merge different CSS with same URLs and identical ranges', () => {
+	let entries = [
+		{
+			text: 'a {}',
+			ranges: [{ start: 0, end: 4 }],
+			url: 'example.com'
+		},
+		{
+			text: 'b {}',
+			ranges: [{ start: 0, end: 4 }],
+			url: 'example.com'
+		}
+	]
+	expect(deduplicate_entries(entries)).toEqual(
+		new Map([
+			[entries[0].text, { url: entries[0].url, ranges: entries[0].ranges }],
+			[entries[1].text, { url: entries[1].url, ranges: entries[1].ranges }]
+		])
+	)
+})
diff --git a/src/lib/components/coverage/ext.test.ts b/src/lib/components/coverage/ext.test.ts
index 8a2655d..4e02b6d 100644
--- a/src/lib/components/coverage/ext.test.ts
+++ b/src/lib/components/coverage/ext.test.ts
@@ -1,5 +1,5 @@
 import { test, expect } from 'vitest'
-import { ext } from './calculate-coverage'
+import { ext } from './ext'
 
 let valid = [
 	'https://example.com/style.css',
diff --git a/src/lib/components/coverage/ext.ts b/src/lib/components/coverage/ext.ts
new file mode 100644
index 0000000..4644413
--- /dev/null
+++ b/src/lib/components/coverage/ext.ts
@@ -0,0 +1,9 @@
+export function ext(url: string) {
+	try {
+		let parsed_url = new URL(url)
+		return parsed_url.pathname.slice(parsed_url.pathname.lastIndexOf('.') + 1)
+	} catch {
+		let ext_index = url.lastIndexOf('.')
+		return url.slice(ext_index, url.indexOf('/', ext_index) + 1)
+	}
+}
diff --git a/src/lib/components/coverage/filter-coverage.test.ts b/src/lib/components/coverage/filter-coverage.test.ts
new file mode 100644
index 0000000..24bcf14
--- /dev/null
+++ b/src/lib/components/coverage/filter-coverage.test.ts
@@ -0,0 +1,33 @@
+import { expect, test } from 'vitest'
+import { filter_coverage } from './calculate-coverage'
+
+// oxlint-disable-next-line no-unused-vars
+function mock_html_parser(html: string): Document {
+	// @ts-expect-error we do not expect this function to be called during these tests
+	return
+}
+
+test('skips .js files', () => {
+	let input = [{ url: 'https://example.com/main.js', ranges: [], text: 'console.log(0);' }]
+	expect(filter_coverage(input, mock_html_parser)).toHaveLength(0)
+})
+
+test('skips .js files w/o text', () => {
+	let input = [{ url: 'https://example.com/main.js', ranges: [] }]
+	expect(filter_coverage(input, mock_html_parser)).toHaveLength(0)
+})
+
+test('keeps .css files', () => {
+	let input = [{ url: 'https://example.com/style.css', ranges: [], text: 'a {}' }]
+	expect(filter_coverage(input, mock_html_parser)).toHaveLength(1)
+})
+
+test('skips .css files without text', () => {
+	let input = [{ url: 'https://example.com/style.css', ranges: [] }]
+	expect(filter_coverage(input, mock_html_parser)).toHaveLength(0)
+})
+
+test('does not skip .css files with empty ranges', () => {
+	let input = [{ url: 'https://example.com/style.css', ranges: [], text: 'a {}' }]
+	expect(filter_coverage(input, mock_html_parser)).toHaveLength(1)
+})
diff --git a/src/lib/components/coverage/prettify.test.ts b/src/lib/components/coverage/prettify.test.ts
new file mode 100644
index 0000000..5472f6c
--- /dev/null
+++ b/src/lib/components/coverage/prettify.test.ts
@@ -0,0 +1,56 @@
+import { test, expect } from 'vitest'
+import { prettify } from './prettify'
+
+test('simple rule prettification', () => {
+	let entries = [
+		{
+			url: 'example.com',
+			text: 'a+b{color:red}',
+			ranges: [{ start: 0, end: 14 }]
+		}
+	]
+	let prettified = [
+		{
+			url: 'example.com',
+			text: `a + b {\n\tcolor: red;\n}`,
+			ranges: [{ start: 0, end: 22 }]
+		}
+	]
+	expect(prettify(entries)).toEqual(prettified)
+})
+
+test('Handles new tokens added by css formatter', () => {
+	let entries = [
+		{
+			url: 'example.com',
+			text: 'a{color:red}b{color:green}',
+			ranges: [{ start: 0, end: 26 }]
+		}
+	]
+	let prettified = [
+		{
+			url: 'example.com',
+			text: `a {\n\tcolor: red;\n}\n\nb {\n\tcolor: green;\n}`,
+			ranges: [{ start: 0, end: 40 }]
+		}
+	]
+	expect(prettify(entries)).toEqual(prettified)
+})
+
+test('atrule prettification', () => {
+	let entries = [
+		{
+			url: 'example.com',
+			text: '@supports (display:grid){a+b{color:red}}',
+			ranges: [{ start: 0, end: 40 }]
+		}
+	]
+	let prettified = [
+		{
+			url: 'example.com',
+			text: `@supports (display: grid) {\n\ta + b {\n\t\tcolor: red;\n\t}\n}`,
+			ranges: [{ start: 0, end: 55 }]
+		}
+	]
+	expect(prettify(entries)).toEqual(prettified)
+})
diff --git a/src/lib/components/coverage/prettify.ts b/src/lib/components/coverage/prettify.ts
index c056471..71ee73d 100644
--- a/src/lib/components/coverage/prettify.ts
+++ b/src/lib/components/coverage/prettify.ts
@@ -16,7 +16,7 @@ export function prettify(coverage: Coverage[]): Coverage[] {
 			tokenTypes.WhiteSpace,
 			tokenTypes.Semicolon,
 			tokenTypes.Comment,
-			tokenTypes.Colon,
+			tokenTypes.Colon
 		])
 
 		// Initialize the ranges with an empty array of token indexes
@@ -34,7 +34,6 @@ export function prettify(coverage: Coverage[]): Coverage[] {
 			return -1
 		}
 
-
 		let index = 0
 
 		tokenize(text, (type, start, end) => {
@@ -53,8 +52,7 @@ export function prettify(coverage: Coverage[]): Coverage[] {
 			}
 		})
 
-
-		let new_tokens: { index: number, start: number, end: number }[] = []
+		let new_tokens: { index: number; start: number; end: number }[] = []
 		index = 0
 
 		tokenize(formatted, (type, start, end) => {
@@ -73,8 +71,8 @@ export function prettify(coverage: Coverage[]): Coverage[] {
 		let new_ranges: Range[] = []
 
 		for (let range of ext_ranges) {
-			let start_token = new_tokens.find(token => token.index === range.tokens.at(0))
-			let end_token = new_tokens.find(token => token.index === range.tokens.at(-1))
+			let start_token = new_tokens.find((token) => token.index === range.tokens.at(0))
+			let end_token = new_tokens.find((token) => token.index === range.tokens.at(-1))
 			if (start_token !== undefined && end_token !== undefined) {
 				new_ranges.push({
 					start: start_token?.start,
@@ -83,7 +81,6 @@ export function prettify(coverage: Coverage[]): Coverage[] {
 			}
 		}
 
-
 		return { url, text: formatted, ranges: new_ranges }
 	})
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/coverage/remap-html.test.ts b/src/lib/components/coverage/remap-html.test.ts
new file mode 100644
index 0000000..ca0a675
--- /dev/null
+++ b/src/lib/components/coverage/remap-html.test.ts
@@ -0,0 +1,80 @@
+import { test, expect } from 'vitest'
+import { get_css_and_ranges_from_html as remap } from './calculate-coverage'
+import { DOMParser } from 'linkedom'
+
+function html_parser(html: string) {
+	return new DOMParser().parseFromString(html, 'text/html')
+}
+
+function create_html(head?: string, body?: string) {
+	return `
+		<!doctype html>
+		<html>
+			<head>
+				${head ?? ''}
+			</head>
+			<body>
+				${body ?? ''}
+			</body>
+		</html>
+	`
+}
+
+test('skips empty style block', () => {
+	let html = create_html()
+	let result = remap(html_parser, html, [{ start: 1, end: 2 }])
+	expect(result).toEqual({
+		css: '',
+		ranges: []
+	})
+})
+
+test('skips white-space-only style block', () => {
+	let html = create_html(`<style>\t\t\t\n\n</style>`)
+	let result = remap(html_parser, html, [{ start: 1, end: 2 }])
+	expect(result).toEqual({
+		css: '',
+		ranges: []
+	})
+})
+
+test('remaps a single style block', () => {
+	let css = `h1 { color: red; }`
+	let html = create_html(`<style>${css}</style>`, `<h1>Hello world</h1>`)
+	let range = { start: html.indexOf(css), end: html.indexOf(css) + css.length }
+	let result = remap(html_parser, html, [range])
+	expect(result).toEqual({
+		css,
+		ranges: [{ start: 0, end: css.length }]
+	})
+})
+
+test('remaps multiple style blocks', () => {
+	let css_head = `h1 { color: red; }`
+	let css_body = `h2 { font-size: 24px; }`
+	let html = create_html(`<style>${css_head}</style>`, `<style>${css_body}</style>`)
+	let range_head = { start: html.indexOf(css_head), end: html.indexOf(css_head) + css_head.length }
+	let range_body = { start: html.indexOf(css_body), end: html.indexOf(css_body) + css_body.length }
+	let result = remap(html_parser, html, [range_head, range_body])
+	expect(result).toEqual({
+		css: css_head + css_body,
+		ranges: [
+			{ start: 0, end: css_head.length },
+			{ start: css_head.length, end: css_head.length + css_body.length }
+		]
+	})
+})
+
+test.skip('strips whitespace from a style block', () => {
+	let css = `h1 { color: red; }`
+	let html = create_html(`
+		<style>
+			${css}
+		</style>`)
+	let range = { start: html.indexOf(css), end: html.indexOf(css) + css.length }
+	let result = remap(html_parser, html, [range])
+	expect(result).toEqual({
+		css,
+		ranges: [{ start: 0, end: css.length }]
+	})
+})
diff --git a/src/lib/components/coverage/types.ts b/src/lib/components/coverage/types.ts
index 06d7f4d..4a84828 100644
--- a/src/lib/components/coverage/types.ts
+++ b/src/lib/components/coverage/types.ts
@@ -1,10 +1,10 @@
 export type Range = {
-	start: number;
-	end: number;
+	start: number
+	end: number
 }
 
 export type Coverage = {
-	url: string;
-	text?: string;
-	ranges: Range[];
+	url: string
+	text?: string
+	ranges: Range[]
 }
diff --git a/src/routes/(public)/css-coverage/+page.svelte b/src/routes/(public)/css-coverage/+page.svelte
index 0398c16..bcedb80 100644
--- a/src/routes/(public)/css-coverage/+page.svelte
+++ b/src/routes/(public)/css-coverage/+page.svelte
@@ -84,27 +84,27 @@
 			ondrop={() => (drag_state = 'idle')}
 			data-drag-state={drag_state}
 		/>
-		<Container size="2xl">
-			<Markdown>
-				<p>
-					How to <a
-						href="https://developer.chrome.com/docs/devtools/coverage/"
-						rel="noreferrer external"
-						target="_blank">record CSS coverage</a
-					>
-					<Icon name="external" size={16} /> in your browser. After that, export the data as JSON and select or drop the
-					file here. Or
-					<button type="button" class="example" onclick={load_example}>load an example file</button>.
-				</p>
-			</Markdown>
-		</Container>
 	</form>
 
 	{#if data.length > 0}
-		<hr />
 		<CoverageReport browser_coverage={data} />
+		<hr />
 	{/if}
 
+	<Container size="2xl">
+		<Markdown>
+			<p>
+				How to
+				<a href="https://developer.chrome.com/docs/devtools/coverage/" rel="noreferrer external" target="_blank">
+					record CSS coverage
+				</a>
+				<Icon name="external" size={16} /> in your browser. After that, export the data as JSON and select or drop the file
+				here. Or
+				<button type="button" class="example" onclick={load_example}>load an example file</button>.
+			</p>
+		</Markdown>
+	</Container>
+
 	<Container size="2xl" class="text-center">
 		<Heading element="h1">CSS Code Coverage inspector</Heading>
 	</Container>