<!DOCTYPE html>
<html>
<!--
Clears a WebGL canvas to the value (0.91749, 0.20029, 0.13856, 1.0). When
interpreted in Display P3, this appears the same as rgb(100% 0% 0%). Display
the canvas next to the correct color and a likely incorrect color.
-->
<head>
<style type="text/css">
.nomargin {
margin: 0;
}
</style>
<script type="text/javascript">
var g_swapsBeforeAck = 15;
function waitForFinish() {
if (g_swapsBeforeAck == 0) {
sendResult("SUCCESS");
} else {
g_swapsBeforeAck--;
window.requestAnimationFrame(waitForFinish);
}
}
function sendResult(status) {
if (window.domAutomationController) {
window.domAutomationController.send(status);
} else {
console.log(status);
}
}
var g_swapsBeforeAck = 15;
function waitForFinish() {
if (g_swapsBeforeAck == 0) {
sendResult("SUCCESS");
} else {
g_swapsBeforeAck--;
window.requestAnimationFrame(waitForFinish);
}
}
async function main() {
const canvas = document.getElementById('canvas_gl');
const context = canvas.getContext('webgl');
if (!context) {
console.error("Failed to initialize WebGL");
sendResult("FAILURE");
}
context.drawingBufferColorSpace = 'display-p3';
context.clearColor(0.91749, 0.20029, 0.13856, 1.0);
context.clear(context.COLOR_BUFFER_BIT);
waitForFinish();
}
</script>
</head>
<body onload="main()" style="background:white;">
<canvas id="canvas_gl" style="width:150px; height:150px; position:absolute; top:0px; left:0px; background: rgb(0% 100% 0%);"></canvas>
<div style="width:150px; height:150px; position:absolute; top:150px; left:0px; background: rgb(91.749% 20.029% 13.856%);">
<p>The canvas above SHOULD NOT match this color</p>
</div>
<div style="width:150px; height:150px; position:absolute; top:0px; left:150px; background: rgb(100% 0% 0%);">
<p>The canvas to the left SHOULD match this color</p>
</div>
</body>
</html>