fix(qti3): isolate stimulus styles and catalogs

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: chillenious

docs/certification/public-coverage-matrix.json

@@ -44,6 +44,7 @@
 				"packages/item-player/tests/core/pnp.test.ts",
 				"packages/item-player/tests/core/delivery-context.test.ts",
 				"packages/item-player/tests/core/stimulusRender.test.ts",
+				"packages/item-player/tests/core/stylesheetRender.test.ts",
 				"packages/item-player/tests/core/glossaryTriggers.test.ts"
 			]
 		},
@@ -335,11 +336,11 @@
 			"level": "Advanced",
 			"feature": "I4 Shared Stimulus",
 			"officialPath": "qti3.0/Advanced/I4 Shared Stimulus/",
-			"publicTests": ["packages/item-player/src/extraction/extractors/conformance-qti3-advanced.test.ts", "packages/ims-cp-core/tests/qti3-shared-content.test.ts", "packages/item-player/tests/core/delivery-context.test.ts", "packages/item-player/tests/core/stimulusRender.test.ts", "apps/demo/tests/playwright/public-certification.pw.ts"],
+			"publicTests": ["packages/item-player/src/extraction/extractors/conformance-qti3-advanced.test.ts", "packages/ims-cp-core/tests/qti3-shared-content.test.ts", "packages/item-player/tests/core/delivery-context.test.ts", "packages/item-player/tests/core/stimulusRender.test.ts", "packages/item-player/tests/core/stylesheetRender.test.ts", "apps/demo/tests/playwright/public-certification.pw.ts"],
 			"fixturePackages": [],
 			"e2eRequired": true,
 			"commandIds": ["item-clean-room", "package-clean-room", "item-runtime-clean-room", "browser-visible"],
-			"notes": "Covers stimulus reference preservation, structured qti-assessment-stimulus parsing, stylesheet/catalog extraction, package-relative stylesheet/stimulus path gates, unsafe relative asset/catalog file-href removal, item-runtime consumption of resolved stimulus/catalog context, and tested stimulus insertion/override behavior. Browser-visible shared stimulus rendering and runtime CSS scoping evidence is tracked in docs/certification/qti3-remaining-parity-evidence.md."
+			"notes": "Covers stimulus reference preservation, structured qti-assessment-stimulus parsing, stylesheet/catalog extraction, package-relative stylesheet/stimulus path gates, unsafe relative asset/catalog file-href removal, item-runtime consumption of resolved stimulus/catalog context, tested stimulus insertion/override behavior, scoped catalog lookup for stimulus ID collisions, and instance-isolated/stimulus-local scoped runtime stylesheet CSS. Browser-visible shared stimulus rendering evidence is tracked in docs/certification/qti3-remaining-parity-evidence.md."
 		},
 		{
 			"id": "qti30-advanced-i17",

docs/certification/qti3-remaining-parity-evidence.md

@@ -63,9 +63,9 @@ and private conformance evidence remain the gates.
 | PNP/access-for-all display and content supports | `item-player` parses and applies PNP; host handles platform supports emitted by user action | Additive `PnpProfile` fields and `Player.updatePnp()` behavior | Parser/apply tests for canonical aliases, display/text preferences, magnification, host-routed supports, host-defined catalog usages, optional language preference, reserved-usage filtering, documented `html` event payloads, and dynamic rebinding cleanup | Verify expanded PNP support behavior without leaking vendor fixture names | First code pass; review findings fixed; focused tests pass |
 | Effective time limits and itemSessionControl precedence | `assessment-player` resolves effective controls; backend adapter validates final timing decisions | Additive optional backend API timing state, expiry scope, and effective item control snapshots | Unit/integration tests for assessment/testPart/section/item-ref precedence, restore, expiry, late submission, and extended time | Verify published backend adapter contract honors official timing cases | Planned |
 | Backend-authoritative timing enforcement | `assessment-player` sends timing evidence; backend adapter accepts, rejects, or finalizes | Additive optional `BackendAdapter`, submit/finalize request, and session timing fields with defaults for existing adapters | Adapter contract tests for server-side accept/reject/finalize decisions and persisted elapsed time | Verify private conformance runs against published package behavior, not local state | Planned |
-| Shared stimulus runtime delivery | `ims-cp-core` extracts stimulus metadata, `ims-cp-browser` resolves resources, `assessment-player` passes resolved context, `item-player` renders | Additive resolved stimulus body/style/catalog inputs | Parser and renderer tests for multiple stimuli, docking order, undocked content, validation messages, explicit compatibility overrides, class merging, and asset resolution | Verify shared stimulus delivery with published packages | First code pass for body insertion and package-reference gates; browser rendering and stylesheet application remain |
-| Stylesheet and asset scoping | `ims-cp-browser` resolves and classifies URLs, `item-player` enforces render policy | Additive security policy configuration for package styles/assets | Tests for package-relative styles, blocked remote/unsafe URLs, path traversal, CSS escaping, and scoped stylesheet application | Verify official stylesheets do not require unsafe public defaults | First code pass for package-relative path gates and unsafe stylesheet/stimulus refs; runtime CSS scoping remains Stage 4 |
-| Scoped catalog delivery | `ims-cp-core` extracts catalog XML, `item-player` scopes and resolves catalog entries | Additive rich catalog source model and host catalog event detail | Tests for item-local precedence, shared stimulus catalog fallback, language fallback, duplicate ID scoping, inactive PNP gating, sanitized host event content, unsafe usage-name rejection, and unsafe relative `qti-file-href` removal | Verify official catalog/glossary cases with published packages | First code pass for host-event details and package-relative catalog file gates; scoped stimulus catalog runtime remains Stage 4 |
+| Shared stimulus runtime delivery | `ims-cp-core` extracts stimulus metadata, `ims-cp-browser` resolves resources, `assessment-player` passes resolved context, `item-player` renders | Additive resolved stimulus body/style/catalog inputs | Parser and renderer tests for multiple stimuli, docking order, undocked content, validation messages, explicit compatibility overrides, class merging, scoped catalog lookup, stylesheet scoping, and asset resolution | Verify shared stimulus delivery with published packages | First code pass plus review fixes for body insertion, stylesheet application, scoped catalog lookup, and package-reference gates; browser rendering evidence remains |
+| Stylesheet and asset scoping | `ims-cp-browser` resolves and classifies URLs, `item-player` enforces render policy | Additive security policy configuration for package styles/assets | Tests for package-relative styles, blocked remote/unsafe URLs, path traversal, CSS escaping, instance-isolated scoping, stimulus-local scoping, and scoped stylesheet application | Verify official stylesheets do not require unsafe public defaults | Runtime scoped stylesheet application has focused unit coverage; browser-visible CSS evidence remains Stage 5 |
+| Scoped catalog delivery | `ims-cp-core` extracts catalog XML, `item-player` scopes and resolves catalog entries | Additive rich catalog source model and host catalog event detail | Tests for item-local precedence, shared stimulus catalog fallback, language fallback, duplicate ID scoping, inactive PNP gating, sanitized host event content, unsafe usage-name rejection, and unsafe relative `qti-file-href` removal | Verify official catalog/glossary cases with published packages | Stimulus-scoped lookup now has focused runtime coverage; browser evidence remains Stage 5 |
 | Browser-visible PNP/catalog UI | `item-player` emits accessible UI/events, `apps/demo` exercises candidate-facing behavior | Component events and accessible names | Playwright tests for keyboard operation, Escape/focus return, distinct labels, dynamic PNP toggles, host events, no answer-key leakage, and target size | Manual AT signoff after private conformance stability | Planned |
 | Accessible timer UI | `assessment-player` emits warning/expiry state, `apps/demo` renders accessible status | Time warning/expiry events and shell rendering | Browser tests for localized warnings, live regions, no involuntary focus movement, disabled/late state, reduced motion, zoom/reflow, and contrast | Verify no timing conformance behavior depends on inaccessible UI-only state | Planned |
 | Final qti3 package parity checklist | docs/certification | No runtime API | Checklist comparing each `qti3-*` package feature area to public evidence, intentional divergences, private status, and residual risk | Completed only after private conformance against published versions | Planned |
@@ -92,8 +92,10 @@ answer keys are not exposed through:
   stylesheet/catalog scoping, and runtime renderer consumption. Unit coverage now
   includes package-relative stylesheet/stimulus path gates and unsafe relative
   asset/catalog file-reference removal, plus item-runtime stimulus insertion,
-  explicit override precedence, class merging, and undocked stimulus ordering.
-  Browser-visible runtime rendering and stylesheet application remain Stage 4/5.
+  explicit override precedence, class merging, undocked stimulus ordering, and
+  instance-isolated and stimulus-local runtime stylesheet CSS, plus scoped catalog
+  lookup for item/stimulus ID collisions. Browser-visible rendering evidence remains
+  Stage 5.
 - `qti30-advanced-t5`: expand for effective itemSessionControl precedence
   across testPart, section, and item-ref scopes.
 - `qti30-advanced-t12`: expand for item/section/test time-limit precedence,

packages/ims-cp-core/src/qti3-shared-content.ts

@@ -29,6 +29,8 @@ export interface ResolvedQtiStylesheetRef extends QtiStylesheetRef {
 	/** Source scope for precedence and diagnostics. */
 	source: 'item' | 'stimulus';
 	stimulusIdentifier?: string;
+	/** Sanitized stylesheet text when the package stylesheet was readable and safe. */
+	cssText?: string;
 }
 
 export interface ResolvedQtiCatalogSource {
@@ -146,7 +148,8 @@ export function createResolvedItemDeliveryContext(
 		extractQtiStylesheets(options.itemXml),
 		itemHref,
 		'item',
-		validationMessages
+		validationMessages,
+		options.readText
 	);
 
 	for (const itemCatalogXml of extractCatalogInfoXml(options.itemXml)) {
@@ -173,6 +176,7 @@ export function createResolvedItemDeliveryContext(
 			resolvedHref,
 			'stimulus',
 			validationMessages,
+			options.readText,
 			ref.identifier
 		);
 		const catalogSource = parsed.catalogInfoXml
@@ -279,6 +283,7 @@ function resolveStylesheetRefs(
 	baseHref: string,
 	source: 'item' | 'stimulus',
 	validationMessages: string[],
+	readText?: ResolveItemDeliveryContextOptions['readText'],
 	stimulusIdentifier?: string
 ): ResolvedQtiStylesheetRef[] {
 	const resolved: ResolvedQtiStylesheetRef[] = [];
@@ -290,16 +295,31 @@ function resolveStylesheetRefs(
 			`${source === 'item' ? 'Item' : `Stimulus ${stimulusIdentifier ?? ''}`} stylesheet`
 		);
 		if (!resolvedHref) continue;
+		const cssText = readText ? readText(resolvedHref) : undefined;
+		const safeCssText = cssText === undefined || cssText === null
+			? undefined
+			: sanitizeStylesheetCss(cssText, validationMessages, resolvedHref);
 		resolved.push({
 			...style,
 			resolvedHref,
 			source,
 			stimulusIdentifier,
+			...(safeCssText ? { cssText: safeCssText } : {}),
 		});
 	}
 	return resolved;
 }
 
+function sanitizeStylesheetCss(css: string, validationMessages: string[], resolvedHref: string): string | null {
+	if (!css.trim()) return '';
+	const blockedPattern = /@import\b|url\s*\(|<\/style|expression\s*\(|javascript\s*:|vbscript\s*:|data\s*:/i;
+	if (blockedPattern.test(css)) {
+		validationMessages.push(`Stylesheet blocked by policy: ${resolvedHref}.`);
+		return null;
+	}
+	return css;
+}
+
 function isPackageRelativeHref(href: string): boolean {
 	const value = href.trim();
 	return Boolean(value) && !value.startsWith('/') && !value.startsWith('//') && !/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(value);

packages/ims-cp-core/tests/qti3-shared-content.test.ts

@@ -113,7 +113,12 @@ describe('QTI 3 shared content parsing', () => {
 		const context = createResolvedItemDeliveryContext({
 			itemXml,
 			itemHref: 'items/unit/item.xml',
-			readText: (path) => (path === 'items/stimuli/passage.xml' ? stimulusXml : null),
+			readText: (path) => {
+				if (path === 'items/stimuli/passage.xml') return stimulusXml;
+				if (path === 'items/unit/item.css') return '.item-term { font-weight: bold; }';
+				if (path === 'items/stimuli/passage.css') return '.stimulus-term { color: blue; }';
+				return null;
+			},
 			resolveAssetUrl: (path) => `asset://${path}`,
 		});
 
@@ -123,10 +128,40 @@ describe('QTI 3 shared content parsing', () => {
 			'items/unit/item.css',
 			'items/stimuli/passage.css',
 		]);
+		expect(context.stylesheets.map((style) => style.cssText)).toEqual([
+			'.item-term { font-weight: bold; }',
+			'.stimulus-term { color: blue; }',
+		]);
 		expect(context.catalogSources.map((source) => source.scope)).toEqual(['item', 'stimulus']);
 		expect(context.validationMessages).toEqual([]);
 	});
 
+	test('blocks unsafe stylesheet CSS text while preserving safe stylesheet metadata', () => {
+		const itemXml = `<qti-assessment-item identifier="item-1">
+  <qti-stylesheet href="safe.css"/>
+  <qti-stylesheet href="unsafe.css"/>
+  <qti-item-body><p>Question body.</p></qti-item-body>
+</qti-assessment-item>`;
+
+		const context = createResolvedItemDeliveryContext({
+			itemXml,
+			itemHref: 'items/unit/item.xml',
+			readText: (path) => {
+				if (path === 'items/unit/safe.css') return '.term { color: #123456; }';
+				if (path === 'items/unit/unsafe.css') return '@import "https://evil.example/unsafe.css"; .term { color: red; }';
+				return null;
+			},
+		});
+
+		expect(context.stylesheets.map((style) => style.resolvedHref)).toEqual([
+			'items/unit/safe.css',
+			'items/unit/unsafe.css',
+		]);
+		expect(context.stylesheets[0].cssText).toBe('.term { color: #123456; }');
+		expect(context.stylesheets[1].cssText).toBeUndefined();
+		expect(context.validationMessages.join(' ')).toContain('Stylesheet blocked by policy: items/unit/unsafe.css');
+	});
+
 	test('blocks unsafe stimulus and stylesheet package references', () => {
 		const itemXml = `<qti-assessment-item identifier="item-1">
   <qti-stylesheet href="javascript:alert"/>

packages/item-player/src/catalog/applyGlossaryTriggers.ts

@@ -61,6 +61,7 @@ export function applyGlossaryTriggers(container: HTMLElement, player: Player): (
 	for (const termEl of Array.from(terms)) {
 		const idref = termEl.getAttribute('data-catalog-idref');
 		if (!idref) continue;
+		const stimulusIdentifier = getStimulusIdentifier(termEl);
 
 		// Wrap term in a relative-positioned span so we can position popup against it
 		const wrapper = document.createElement('span');
@@ -80,7 +81,7 @@ export function applyGlossaryTriggers(container: HTMLElement, player: Player): (
 					currentCleanup = null;
 					return;
 				}
-				const html = player.getCatalogEntry(idref, 'glossary-on-screen');
+				const html = player.getCatalogEntry(idref, 'glossary-on-screen', undefined, { stimulusIdentifier });
 				if (html !== null) {
 					currentCleanup = mountPopup(wrapper, termEl.textContent ?? idref, html, btn, player, () => {
 						currentCleanup = null;
@@ -100,7 +101,7 @@ export function applyGlossaryTriggers(container: HTMLElement, player: Player): (
 					currentCleanup = null;
 					return;
 				}
-				const html = player.getCatalogEntry(idref, 'keyword-translation', lang);
+				const html = player.getCatalogEntry(idref, 'keyword-translation', lang, { stimulusIdentifier });
 				if (html !== null) {
 					currentCleanup = mountPopup(wrapper, termEl.textContent ?? idref, html, btn, player, () => {
 						currentCleanup = null;
@@ -119,7 +120,7 @@ export function applyGlossaryTriggers(container: HTMLElement, player: Player): (
 					currentCleanup = null;
 					return;
 				}
-				const html = player.getCatalogEntry(idref, ILLUSTRATED_GLOSSARY_USAGE);
+				const html = player.getCatalogEntry(idref, ILLUSTRATED_GLOSSARY_USAGE, undefined, { stimulusIdentifier });
 				if (html !== null) {
 					currentCleanup = mountPopup(wrapper, termEl.textContent ?? idref, html, btn, player, () => {
 						currentCleanup = null;
@@ -134,11 +135,11 @@ export function applyGlossaryTriggers(container: HTMLElement, player: Player): (
 			addHostCatalogSupportButton(wrapper, termEl, idref, {
 				...support,
 				languageCode: getSupportLanguageCode(preference),
-			}, player);
+			}, player, stimulusIdentifier);
 		}
 
 		for (const support of hostSupports) {
-			addHostCatalogSupportButton(wrapper, termEl, idref, support, player);
+			addHostCatalogSupportButton(wrapper, termEl, idref, support, player, stimulusIdentifier);
 		}
 	}
 
@@ -175,9 +176,10 @@ function addHostCatalogSupportButton(
 	termEl: HTMLElement,
 	idref: string,
 	support: HostCatalogSupport,
-	player: Player
+	player: Player,
+	stimulusIdentifier?: string
 ): void {
-	const html = player.getCatalogEntry(idref, support.usage, support.languageCode);
+	const html = player.getCatalogEntry(idref, support.usage, support.languageCode, { stimulusIdentifier });
 	if (html === null) return;
 	const btn = createTriggerButton(termEl.textContent ?? idref, support.usage, support.label, support.text);
 	wrapper.appendChild(btn);
@@ -192,6 +194,12 @@ function addHostCatalogSupportButton(
 	});
 }
 
+function getStimulusIdentifier(termEl: HTMLElement): string | undefined {
+	const scopeEl = termEl.closest?.('[data-stimulus-idref]');
+	const identifier = scopeEl?.getAttribute?.('data-stimulus-idref')?.trim();
+	return identifier || undefined;
+}
+
 function getHostCatalogSupports(platformSupports: Record<string, CatalogSupportPreference | undefined>): HostCatalogSupport[] {
 	return Object.entries(platformSupports)
 		.map(([usage, preference]) => ({ usage: normalizeCatalogUsage(usage), preference }))

packages/item-player/src/components/ItemBody.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>
+	let nextItemBodyScopeId = 0;
+</script>
+
 <script lang="ts">
 	import type { InteractionData } from '../types';
 	import type { Player } from '../core/Player';
@@ -12,6 +16,7 @@
 	import { typesetAction } from './actions/typesetAction';
 	import { glossaryAction } from '../catalog/glossaryAction';
 	import { assignProps } from './utils/assignProps';
+	import { buildScopedStylesheetCss } from './utils/stylesheetRender';
 	import { buildEffectiveStimulusContent, injectStimulusContent } from './utils/stimulusRender';
 	import { getRoleCapabilities } from '../core/rolePolicy';
 	import InlineChoice from '../interactions/inline-choice/InlineChoice.svelte';
@@ -51,6 +56,8 @@
 		stimulusContent = {},
 		deliveryContext,
 	}: Props = $props();
+	const itemBodyScope = `qti-item-body-${++nextItemBodyScopeId}`;
+	const itemBodyScopeSelector = `[data-qti-item-body-scope="${itemBodyScope}"]`;
 
 	// Normalize heuristics configuration with defaults
 	const heuristics = $derived(normalizeHeuristicsConfig(heuristicsConfig));
@@ -98,13 +105,17 @@
 	const itemBodyHtml = $derived.by(() => {
 		let html = player.getItemBodyHtml();
 		const resolvedDeliveryContext = deliveryContext ?? player.getDeliveryContext();
+		const stylesheetCss = buildScopedStylesheetCss(resolvedDeliveryContext, itemBodyScopeSelector);
 		const effectiveStimulusContent = buildEffectiveStimulusContent(
 			resolvedDeliveryContext,
 			stimulusContent,
 			(content) => player.sanitizeHtmlContent(content)
 		);
 
 		html = injectStimulusContent(html, effectiveStimulusContent);
+		if (stylesheetCss) {
+			html = `<style data-qti-stylesheets="resolved">${stylesheetCss}</style>${html}`;
+		}
 
 		// Process feedbackInline elements - conditionally show/hide based on outcome values
 		html = processFeedbackInline(html, {
@@ -205,7 +216,13 @@
 	}
 </script>
 
-<div bind:this={rootEl} class="qti-item-body" use:typesetAction={{ typeset }} use:glossaryAction={{ player }}>
+<div
+	bind:this={rootEl}
+	class="qti-item-body"
+	data-qti-item-body-scope={itemBodyScope}
+	use:typesetAction={{ typeset }}
+	use:glossaryAction={{ player }}
+>
 	<!-- Item body with inline interactions -->
 	<div class="prose max-w-none mb-4">
 		<div class="inline-interaction-container">