Attachment 340475 Details for Bug 185675 – Test

Test

test.html (text/html), 2.65 KB, created by Jon Lee on 2018-05-16 01:11:10 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Jon Lee

Created: 2018-05-16 01:11:10 PDT

Size: 2.65 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>	<meta charset="utf-8">
><style>
>div {
>	position: relative;
>	width: 300px;
>	height: 200px;
>}
>
>canvas {
>	position: absolute;
>	left: 0;
>	top: 0;
>	width: 100%;
>	height: 100%;
>}
>
>table {
>	position: relative;
>	width: 100%;
>	height: 100%;
>	font: 52px Helvetica;
>	text-align: center;
>	color: green;
>}
></style>
></head>
><body>
><h1>Pick a language</h1>
><form>
>	<label><input type="radio" name="language" value="0">English</label><br/>
>	<label><input type="radio" name="language" value="1">Cyrillic</label><br/>
>	<label><input type="radio" name="language" value="2">Korean</label><br/>
>	<label><input type="radio" name="language" value="3">Chinese</label><br/>
>	<label><input type="radio" name="language" value="4">Japanese</label><br/>
>	<label><input type="radio" name="language" value="5">Hebrew</label><br/>
>	<label><input type="radio" name="language" value="6">Arabic</label><br/>
>	<label><input type="radio" name="language" value="7">Tamil</label><br/>
></form>
>
><h2>1x</h2>
><div style="background-color:pink">
>	<table><tr><td>Ð´Ð¸Ð·Ð°Ð¹Ð½</td></tr></table>
>	<canvas id="a"></canvas>
></div>
><h2>2x</h2>
><div style="background-color:lightblue">
>	<table><tr><td>Ð´Ð¸Ð·Ð°Ð¹Ð½</td></tr></table>
>	<canvas id="b"></canvas>
></div>
>
><script>
>w = 300;
>h = 200;
>
>["a", "b"].forEach(function(id) {
>	var canvas = document.getElementById(id);
>	var context = window[id] = canvas.getContext("2d");
>
>	if (id == "b") {
>		canvas.width = w * window.devicePixelRatio;
>		canvas.height = h * window.devicePixelRatio;
>		context.scale(window.devicePixelRatio, window.devicePixelRatio);
>	} else {
>		canvas.width = w;
>		canvas.height = h;
>	}
>
>    canvas.style.width = w + "px";
>    canvas.style.height = h + "px";
>
>	context.font = "52px Helvetica";
>	context.textAlign = "center";
>	context.textBaseline = "middle";
>	context.fillStyle = "white";
>});
>
>function animate() {
>	[a, b].forEach(function(context) {
>        var angle = Date.now() / 612;
>
>        context.clearRect(0, 0, w, h);
>
>        var stepX = Math.sin(angle) * 1.5;
>        var x = -stepX * 2;
>        context.fillText(renderString, Math.floor(w/2 + x), h/2);
>	});
>	requestAnimationFrame(animate);
>}
>
>
>requestAnimationFrame(animate);
>
>var strings = [
>	"english",
>	"Ð´Ð¸Ð·Ð°Ð¹Ð½",
>	"ëìì¸",
>	"è®¾è®¡",
>    "ãã¶ã¤ã³",
>    "×Ö°×¢Ö·×¦Öµ×",
>	"ØªØµÙÙÙ",
>	"à®µà®à®¿à®µà®®à¯à®ªà¯à®ªà¯"
>]
>window.onchange = function(e) {
>	var elements = document.querySelectorAll("td");
>	renderString = strings[+e.target.value];
>	for (var i = 0; i < elements.length; ++i)
>		elements[i].innerText = renderString;
>}
>aaa = document.forms[0].language[0];
>aaa.checked = true;
>eee = new Event('change', {bubbles: true});
>aaa.dispatchEvent(eee);
>
></script>
>
></body>
>
></html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<style>
div {
	position: relative;
	width: 300px;
	height: 200px;
}

canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

table {
	position: relative;
	width: 100%;
	height: 100%;
	font: 52px Helvetica;
	text-align: center;
	color: green;
}
</style>
</head>
<body>
<h1>Pick a language</h1>
<form>
	<label><input type="radio" name="language" value="0">English</label><br/>
	<label><input type="radio" name="language" value="1">Cyrillic</label><br/>
	<label><input type="radio" name="language" value="2">Korean</label><br/>
	<label><input type="radio" name="language" value="3">Chinese</label><br/>
	<label><input type="radio" name="language" value="4">Japanese</label><br/>
	<label><input type="radio" name="language" value="5">Hebrew</label><br/>
	<label><input type="radio" name="language" value="6">Arabic</label><br/>
	<label><input type="radio" name="language" value="7">Tamil</label><br/>
</form>

<h2>1x</h2>
<div style="background-color:pink">
	<table><tr><td>Ð´Ð¸Ð·Ð°Ð¹Ð½</td></tr></table>
	<canvas id="a"></canvas>
</div>
<h2>2x</h2>
<div style="background-color:lightblue">
	<table><tr><td>Ð´Ð¸Ð·Ð°Ð¹Ð½</td></tr></table>
	<canvas id="b"></canvas>
</div>

<script>
w = 300;
h = 200;

["a", "b"].forEach(function(id) {
	var canvas = document.getElementById(id);
	var context = window[id] = canvas.getContext("2d");

	if (id == "b") {
		canvas.width = w * window.devicePixelRatio;
		canvas.height = h * window.devicePixelRatio;
		context.scale(window.devicePixelRatio, window.devicePixelRatio);
	} else {
		canvas.width = w;
		canvas.height = h;
	}

    canvas.style.width = w + "px";
    canvas.style.height = h + "px";

	context.font = "52px Helvetica";
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillStyle = "white";
});

function animate() {
	[a, b].forEach(function(context) {
        var angle = Date.now() / 612;

        context.clearRect(0, 0, w, h);

        var stepX = Math.sin(angle) * 1.5;
        var x = -stepX * 2;
        context.fillText(renderString, Math.floor(w/2 + x), h/2);
	});
	requestAnimationFrame(animate);
}


requestAnimationFrame(animate);

var strings = [
	"english",
	"Ð´Ð¸Ð·Ð°Ð¹Ð½",
	"ëìì¸",
	"è®¾è®¡",
    "ãã¶ã¤ã³",
    "×Ö°×¢Ö·×¦Öµ×",
	"ØªØµÙÙÙ",
	"à®µà®à®¿à®µà®®à¯à®ªà¯à®ªà¯"
]
window.onchange = function(e) {
	var elements = document.querySelectorAll("td");
	renderString = strings[+e.target.value];
	for (var i = 0; i < elements.length; ++i)
		elements[i].innerText = renderString;
}
aaa = document.forms[0].language[0];
aaa.checked = true;
eee = new Event('change', {bubbles: true});
aaa.dispatchEvent(eee);

</script>

</body>

</html>

Actions: View

Attachments on bug 185675: 340475