LayoutTests/inspector/canvas/recording-html-2d-expected.txt - WebKit - Git at Google

 Tests for Recording.prototype.toHTML.


 == Running test suite: Recording.prototype.toHTML
 -- Running test case: Recording.prototype.toHTML.2D
 ++++++++++ HTML ++++++++++
 <!DOCTYPE html>
 <head>
 <title>Recording 1</title>
 <style>
     body {
         margin: 0;
     }
     canvas {
         max-width: calc(100% - 40px);
         max-height: calc(100% - 40px);
         padding: 20px;
     }
 </style>
 </head>
 <body>
 <script>
 "use strict";

 let promises = [];
 let objects = {};

 let canvas = document.body.appendChild(document.createElement("canvas"));
 canvas.width = 2;
 canvas.height = 2;

 let context = canvas.getContext("2d", objects[0]);

 let frames = [
     function initialState() {
         context.drawImage(objects[1], 0, 0);

         context.direction = "ltr";
         context.fillStyle = "#000000";
         context.font = "10px sans-serif";
         context.globalAlpha = 1;
         context.globalCompositeOperation = "source-over";
         context.imageSmoothingEnabled = true;
         context.imageSmoothingQuality = "low";
         context.lineCap = "butt";
         context.lineDash = [];
         context.lineDashOffset = 0;
         context.lineJoin = "miter";
         context.lineWidth = 1;
         context.miterLimit = 10;
         context.shadowBlur = 0;
         context.shadowColor = "rgba(0, 0, 0, 0)";
         context.shadowOffsetX = 0;
         context.shadowOffsetY = 0;
         context.strokeStyle = "#ff0000";
         context.textAlign = "start";
         context.textBaseline = "alphabetic";
         context.transform(1, 0, 0, 1, 0, 0);
         context.webkitImageSmoothingEnabled = true;
         context.webkitLineDash = [];
         context.webkitLineDashOffset = 0;
         if ("setPath" in context)
             context.setPath(objects[2]);
         context.save();

         context.direction = "ltr";
         context.fillStyle = "#000000";
         context.font = "10px sans-serif";
         context.globalAlpha = 1;
         context.globalCompositeOperation = "source-over";
         context.imageSmoothingEnabled = true;
         context.imageSmoothingQuality = "low";
         context.lineCap = "butt";
         context.lineDash = [];
         context.lineDashOffset = 0;
         context.lineJoin = "miter";
         context.lineWidth = 1;
         context.miterLimit = 10;
         context.shadowBlur = 0;
         context.shadowColor = "rgba(0, 0, 0, 0)";
         context.shadowOffsetX = 0;
         context.shadowOffsetY = 0;
         context.strokeStyle = "#0000ff";
         context.textAlign = "start";
         context.textBaseline = "alphabetic";
         context.transform(1, 0, 0, 1, 0, 0);
         context.webkitImageSmoothingEnabled = true;
         context.webkitLineDash = [];
         context.webkitLineDashOffset = 0;
         if ("setPath" in context)
             context.setPath(objects[3]);
         context.save();

         context.direction = "ltr";
         context.fillStyle = "#000000";
         context.font = "10px sans-serif";
         context.globalAlpha = 1;
         context.globalCompositeOperation = "source-over";
         context.imageSmoothingEnabled = true;
         context.imageSmoothingQuality = "low";
         context.lineCap = "butt";
         context.lineDash = [];
         context.lineDashOffset = 0;
         context.lineJoin = "miter";
         context.lineWidth = 1;
         context.miterLimit = 10;
         context.shadowBlur = 0;
         context.shadowColor = "rgba(0, 0, 0, 0)";
         context.shadowOffsetX = 0;
         context.shadowOffsetY = 0;
         context.strokeStyle = "#008000";
         context.textAlign = "start";
         context.textBaseline = "alphabetic";
         context.transform(1, 0, 0, 1, 0, 0);
         context.webkitImageSmoothingEnabled = true;
         context.webkitLineDash = [];
         context.webkitLineDashOffset = 0;
         if ("setPath" in context)
             context.setPath(objects[4]);
     },
     function startRecording() {
         if (typeof console.record === "function")
             console.record(context, {name: "Recording 1"});
     },
     function frame1() {
         context.fillStyle;
         context.fillStyle = "test";
         context.fillStyle = objects[5];
         context.fillStyle = objects[6];
         context.fillStyle = objects[7];
         context.fillStyle = objects[8];
     },
     function frame2() {
         context.beginPath();
     },
     function frame3() {
         context.moveTo(1, 2);
     },
     function frame4() {
         context.drawImage(objects[9], 11, 12);
     },
     function frame5() {
         context.createImageData(objects[10]);
     },
     function frame6() {
         context.drawImage(objects[11], 11, 12);
     },
     function frame7() {
         context.setTransform(objects[12]);
     },
     function frame8() {
         // context.drawFocusIfNeeded(objects[13], "Element");
     },
     function stopRecording() {
         if (typeof console.recordEnd === "function")
             console.recordEnd(context);
     },
 ];

 function rebuildCanvasGradient(key, data) {
     let gradient = null;
     if (data.type === "radial-gradient")
         gradient = context.createRadialGradient(data.points[0], data.points[1], data.points[2], data.points[3], data.points[4], data.points[5]);
     else if (data.type === "linear-gradient")
         gradient = context.createLinearGradient(data.points[0], data.points[1], data.points[2], data.points[3]);
     else
         gradient = context.createConicGradient(data.points[0], data.points[1], data.points[2]);
     for (let stop of data.stops)
         gradient.addColorStop(stop.offset, stop.color);
     objects[key] = gradient;
 }
 function rebuildCanvasPattern(key, data) {
     promises.push(new Promise(function(resolve, reject) {
         let image = new Image;
         function resolveWithImage(event) {
             objects[key] = context.createPattern(image, data.repeat);
             resolve();
         }
         image.addEventListener("load", resolveWithImage);
         image.addEventListener("error", resolveWithImage);
         image.src = data.image;
     }));
 }
 function rebuildDOMMatrix(key, data) {
     objects[key] = new DOMMatrix(data);
 }
 function rebuildImage(key, data) {
     promises.push(new Promise(function(resolve, reject) {
         let image = new Image;
         function resolveWithImage(event) {
             objects[key] = image;
             resolve();
         }
         image.addEventListener("load", resolveWithImage);
         image.addEventListener("error", resolveWithImage);
         image.src = data;
     }));
 }
 function rebuildImageBitmap(key, data) {
     promises.push(new Promise(function(resolve, reject) {
         let image = new Image;
         function resolveWithImage(event) {
             createImageBitmap(image).then(function(imageBitmap) {
                 objects[key] = imageBitmap;
                 resolve();
             });
         }
         image.addEventListener("load", resolveWithImage);
         image.addEventListener("error", resolveWithImage);
         image.src = data;
     }));
 }
 function rebuildImageData(key, data) {
     objects[key] = new ImageData(new Uint8ClampedArray(data.data), parseInt(data.width), parseInt(data.height));
 }
 function rebuildPath2D(key, data) {
     objects[key] = new Path2D(data);
 }

 rebuildImage(1, <filtered>);
 rebuildPath2D(2, "");
 rebuildPath2D(3, "");
 rebuildPath2D(4, "");
 rebuildCanvasGradient(5, {"type":"linear-gradient","points":[1,2,3,4],"stops":[{"offset":1,"color":"rgb(255, 0, 0)"},{"offset":1,"color":"rgb(0, 0, 255)"}]});
 rebuildCanvasGradient(6, {"type":"radial-gradient","points":[1,2,3,4,5,6],"stops":[]});
 rebuildCanvasGradient(7, {"type":"conic-gradient","points":[2,3,1],"stops":[{"offset":1,"color":"rgb(0, 128, 0)"}]});
 rebuildCanvasPattern(8, {"image":<filtered>,"repeat":"no-repeat"});
 rebuildImage(9, <filtered>);
 rebuildImageData(10, {"data":[0,0,0,0,0,0,0,0],"width":1,"height":2});
 rebuildImageBitmap(11, <filtered>);
 rebuildDOMMatrix(12, "matrix(1, 2, 3, 4, 5, 6)");
 rebuildPath2D(13, "M1 2");

 Promise.all(promises).then(function() {
     window.requestAnimationFrame(function executeFrame() {
         frames.shift()();
         if (frames.length)
             window.requestAnimationFrame(executeFrame);
     });
 });
 </script>
 </body>
 ++++++++++ HTML ++++++++++
	Tests for Recording.prototype.toHTML.


	== Running test suite: Recording.prototype.toHTML
	-- Running test case: Recording.prototype.toHTML.2D
	++++++++++ HTML ++++++++++
	<!DOCTYPE html>
	<head>
	<title>Recording 1</title>
	<style>
	body {
	margin: 0;
	}
	canvas {
	max-width: calc(100% - 40px);
	max-height: calc(100% - 40px);
	padding: 20px;
	}
	</style>
	</head>
	<body>
	<script>
	"use strict";

	let promises = [];
	let objects = {};

	let canvas = document.body.appendChild(document.createElement("canvas"));
	canvas.width = 2;
	canvas.height = 2;

	let context = canvas.getContext("2d", objects[0]);

	let frames = [
	function initialState() {
	context.drawImage(objects[1], 0, 0);

	context.direction = "ltr";
	context.fillStyle = "#000000";
	context.font = "10px sans-serif";
	context.globalAlpha = 1;
	context.globalCompositeOperation = "source-over";
	context.imageSmoothingEnabled = true;
	context.imageSmoothingQuality = "low";
	context.lineCap = "butt";
	context.lineDash = [];
	context.lineDashOffset = 0;
	context.lineJoin = "miter";
	context.lineWidth = 1;
	context.miterLimit = 10;
	context.shadowBlur = 0;
	context.shadowColor = "rgba(0, 0, 0, 0)";
	context.shadowOffsetX = 0;
	context.shadowOffsetY = 0;
	context.strokeStyle = "#ff0000";
	context.textAlign = "start";
	context.textBaseline = "alphabetic";
	context.transform(1, 0, 0, 1, 0, 0);
	context.webkitImageSmoothingEnabled = true;
	context.webkitLineDash = [];
	context.webkitLineDashOffset = 0;
	if ("setPath" in context)
	context.setPath(objects[2]);
	context.save();

	context.direction = "ltr";
	context.fillStyle = "#000000";
	context.font = "10px sans-serif";
	context.globalAlpha = 1;
	context.globalCompositeOperation = "source-over";
	context.imageSmoothingEnabled = true;
	context.imageSmoothingQuality = "low";
	context.lineCap = "butt";
	context.lineDash = [];
	context.lineDashOffset = 0;
	context.lineJoin = "miter";
	context.lineWidth = 1;
	context.miterLimit = 10;
	context.shadowBlur = 0;
	context.shadowColor = "rgba(0, 0, 0, 0)";
	context.shadowOffsetX = 0;
	context.shadowOffsetY = 0;
	context.strokeStyle = "#0000ff";
	context.textAlign = "start";
	context.textBaseline = "alphabetic";
	context.transform(1, 0, 0, 1, 0, 0);
	context.webkitImageSmoothingEnabled = true;
	context.webkitLineDash = [];
	context.webkitLineDashOffset = 0;
	if ("setPath" in context)
	context.setPath(objects[3]);
	context.save();

	context.direction = "ltr";
	context.fillStyle = "#000000";
	context.font = "10px sans-serif";
	context.globalAlpha = 1;
	context.globalCompositeOperation = "source-over";
	context.imageSmoothingEnabled = true;
	context.imageSmoothingQuality = "low";
	context.lineCap = "butt";
	context.lineDash = [];
	context.lineDashOffset = 0;
	context.lineJoin = "miter";
	context.lineWidth = 1;
	context.miterLimit = 10;
	context.shadowBlur = 0;
	context.shadowColor = "rgba(0, 0, 0, 0)";
	context.shadowOffsetX = 0;
	context.shadowOffsetY = 0;
	context.strokeStyle = "#008000";
	context.textAlign = "start";
	context.textBaseline = "alphabetic";
	context.transform(1, 0, 0, 1, 0, 0);
	context.webkitImageSmoothingEnabled = true;
	context.webkitLineDash = [];
	context.webkitLineDashOffset = 0;
	if ("setPath" in context)
	context.setPath(objects[4]);
	},
	function startRecording() {
	if (typeof console.record === "function")
	console.record(context, {name: "Recording 1"});
	},
	function frame1() {
	context.fillStyle;
	context.fillStyle = "test";
	context.fillStyle = objects[5];
	context.fillStyle = objects[6];
	context.fillStyle = objects[7];
	context.fillStyle = objects[8];
	},
	function frame2() {
	context.beginPath();
	},
	function frame3() {
	context.moveTo(1, 2);
	},
	function frame4() {
	context.drawImage(objects[9], 11, 12);
	},
	function frame5() {
	context.createImageData(objects[10]);
	},
	function frame6() {
	context.drawImage(objects[11], 11, 12);
	},
	function frame7() {
	context.setTransform(objects[12]);
	},
	function frame8() {
	// context.drawFocusIfNeeded(objects[13], "Element");
	},
	function stopRecording() {
	if (typeof console.recordEnd === "function")
	console.recordEnd(context);
	},
	];

	function rebuildCanvasGradient(key, data) {
	let gradient = null;
	if (data.type === "radial-gradient")
	gradient = context.createRadialGradient(data.points[0], data.points[1], data.points[2], data.points[3], data.points[4], data.points[5]);
	else if (data.type === "linear-gradient")
	gradient = context.createLinearGradient(data.points[0], data.points[1], data.points[2], data.points[3]);
	else
	gradient = context.createConicGradient(data.points[0], data.points[1], data.points[2]);
	for (let stop of data.stops)
	gradient.addColorStop(stop.offset, stop.color);
	objects[key] = gradient;
	}
	function rebuildCanvasPattern(key, data) {
	promises.push(new Promise(function(resolve, reject) {
	let image = new Image;
	function resolveWithImage(event) {
	objects[key] = context.createPattern(image, data.repeat);
	resolve();
	}
	image.addEventListener("load", resolveWithImage);
	image.addEventListener("error", resolveWithImage);
	image.src = data.image;
	}));
	}
	function rebuildDOMMatrix(key, data) {
	objects[key] = new DOMMatrix(data);
	}
	function rebuildImage(key, data) {
	promises.push(new Promise(function(resolve, reject) {
	let image = new Image;
	function resolveWithImage(event) {
	objects[key] = image;
	resolve();
	}
	image.addEventListener("load", resolveWithImage);
	image.addEventListener("error", resolveWithImage);
	image.src = data;
	}));
	}
	function rebuildImageBitmap(key, data) {
	promises.push(new Promise(function(resolve, reject) {
	let image = new Image;
	function resolveWithImage(event) {
	createImageBitmap(image).then(function(imageBitmap) {
	objects[key] = imageBitmap;
	resolve();
	});
	}
	image.addEventListener("load", resolveWithImage);
	image.addEventListener("error", resolveWithImage);
	image.src = data;
	}));
	}
	function rebuildImageData(key, data) {
	objects[key] = new ImageData(new Uint8ClampedArray(data.data), parseInt(data.width), parseInt(data.height));
	}
	function rebuildPath2D(key, data) {
	objects[key] = new Path2D(data);
	}

	rebuildImage(1, <filtered>);
	rebuildPath2D(2, "");
	rebuildPath2D(3, "");
	rebuildPath2D(4, "");
	rebuildCanvasGradient(5, {"type":"linear-gradient","points":[1,2,3,4],"stops":[{"offset":1,"color":"rgb(255, 0, 0)"},{"offset":1,"color":"rgb(0, 0, 255)"}]});
	rebuildCanvasGradient(6, {"type":"radial-gradient","points":[1,2,3,4,5,6],"stops":[]});
	rebuildCanvasGradient(7, {"type":"conic-gradient","points":[2,3,1],"stops":[{"offset":1,"color":"rgb(0, 128, 0)"}]});
	rebuildCanvasPattern(8, {"image":<filtered>,"repeat":"no-repeat"});
	rebuildImage(9, <filtered>);
	rebuildImageData(10, {"data":[0,0,0,0,0,0,0,0],"width":1,"height":2});
	rebuildImageBitmap(11, <filtered>);
	rebuildDOMMatrix(12, "matrix(1, 2, 3, 4, 5, 6)");
	rebuildPath2D(13, "M1 2");

	Promise.all(promises).then(function() {
	window.requestAnimationFrame(function executeFrame() {
	frames.shift()();
	if (frames.length)
	window.requestAnimationFrame(executeFrame);
	});
	});
	</script>
	</body>
	++++++++++ HTML ++++++++++