wpt / css / filter-effects / fecomponenttransfer-display-p3.html

Status: FAIL | Duration: 12ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/filter-effects/fecomponenttransfer-display-p3.html

<!DOCTYPE html>
<html class="reftest-wait">
<head>
	<title>Filter Effects: Test feComponentTransfer with type discrete on a Display P3 canvas</title>
	<link rel="author" title="Hans Otto Wirtz" href="mailto:hansottowirtz@gmail.com">
	<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#feColorMatrixElement">
	<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#element-attrdef-fecolormatrix-type">
	<link rel="match" href="fecolormatrix-display-p3-ref.html">
	<meta name="assert" content="If the test runs, you should see three red squares.">
	<meta name=fuzzy content="maxDifference=0-2;totalPixels=0-19200">
	<style type="text/css">
		svg {
			vertical-align: top;
		}
		div {
			font-size: 0;
		}
	</style>
</head>
<body>
	<p>You should see three red squares.</p>
	<div>
		<svg width="100" height="100">
			<defs>
				<filter id="filter" color-interpolation-filters="sRGB">
					<feComponentTransfer>
						<feFuncR type='discrete' tableValues='0 1'/>
					</feComponentTransfer>
				</filter>
			</defs>
			<rect width="80" height="80" fill="#800000" filter="url(#filter)"/>
		</svg>
		<img width="100" height="100"/>
		<canvas width="100" height="100"></canvas>
	</div>
	<script>
		const canvas = document.querySelector('canvas');
		const svg = document.querySelector('svg');
		const img = document.querySelector('img');
		const svgString = new XMLSerializer().serializeToString(svg);
		const ctx = canvas.getContext('2d', { colorSpace: 'display-p3' });
		img.src = "data:image/svg+xml," + encodeURIComponent(svgString);
		img.onload = () => {
			ctx.drawImage(img, 0, 0);
			document.documentElement.classList.remove('reftest-wait');
		};
	</script>
</body>
</html>

/css/filter-effects/fecolormatrix-display-p3-ref.html

<!DOCTYPE html>
<html>
<head>
    <title>Filter Effects: Test feColorMatrix with type matrix on a Display P3 canvas</title>
    <link rel="author" title="Hans Otto Wirtz" href="mailto:hansottowirtz@gmail.com">
</head>
<body>
	<p>You should see three yellow squares.</p>
	<svg width="300" height="100">
		<rect width="80" height="80" fill="#ffff89" />
		<rect x="100" width="80" height="80" fill="#ffff89" />
		<rect x="200" width="80" height="80" fill="#ffff89" />
	</svg>
</body>
</html>