SSL test_canvas_path.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/dom/canvas/test/test_canvas_path.html

<!DOCTYPE HTML>
<title>Canvas Tests</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<body>
<script>

SimpleTest.waitForExplicitFinish();
const Cc = SpecialPowers.Cc;
const Cr = SpecialPowers.Cr;

function isPixel(ctx, x,y, c, d) {
  var pos = x + "," + y;
  var color = c[0] + "," + c[1] + "," + c[2] + "," + c[3];
    var pixel = ctx.getImageData(x, y, 1, 1);
    var pr = pixel.data[0],
        pg = pixel.data[1],
        pb = pixel.data[2],
        pa = pixel.data[3];
    ok(c[0]-d <= pr && pr <= c[0]+d &&
       c[1]-d <= pg && pg <= c[1]+d &&
       c[2]-d <= pb && pb <= c[2]+d &&
       c[3]-d <= pa && pa <= c[3]+d,
       "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+"; expected "+color+" +/- "+d);
}
</script>

<p>Canvas test: test_drawClipPath_canvas</p>
<canvas id="c1" class="output" width="100" height="100">+
</canvas>
<script type="text/javascript">
function test_drawClipPath_canvas() {
  var c = document.getElementById("c1");
  var ctx = c.getContext("2d");

  var path = new Path2D();
  path.rect(0, 0, 100, 100);
  path.rect(25, 25, 50, 50);

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.beginPath();
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'rgb(0,255,0)';
  ctx.save();
  ctx.clip(path);

  ctx.fillRect(0, 0, 100, 100);
  isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
  ctx.restore();

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.beginPath();
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'rgb(0,255,0)';
  ctx.save();
  ctx.clip(path, 'nonzero');

  ctx.fillRect(0, 0, 100, 100);
  isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
  ctx.restore();

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.beginPath();
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'rgb(0,255,0)';
  ctx.save();
  ctx.clip(path, 'evenodd');

  ctx.fillRect(0, 0, 100, 100);
  isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
  ctx.restore();
}
</script>

<p>Canvas test: test_drawFillPath_canvas</p>
<canvas id="c2" class="output" width="100" height="100">+
</canvas>
<script type="text/javascript">
function test_drawFillPath_canvas() {
  var c = document.getElementById("c2");
  var ctx = c.getContext("2d");

  var path = new Path2D();
  path.rect(0, 0, 100, 100);
  path.rect(25, 25, 50, 50);

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'rgb(0,255,0)';
  ctx.fill(path);
  isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'rgb(0,255,0)';
  ctx.fill(path, 'nonzero');
  isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'rgb(0,255,0)';
  ctx.fill(path, 'evenodd');
  isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
}
</script>

<p>Canvas test: test_drawStrokePath_canvas</p>
<canvas id="c3" class="output" width="100" height="100">+
</canvas>
<script type="text/javascript">
function test_drawStrokePath_canvas() {
  var c = document.getElementById("c3");
  var ctx = c.getContext("2d");

  var path = new Path2D();
  path.rect(0, 0, 100, 100);
  path.rect(25, 25, 50, 50);

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.fillRect(0, 0, 100, 100);
  ctx.strokeStyle = 'rgb(0,255,0)';
  ctx.lineWidth = 5;
  ctx.stroke(path);
  isPixel(ctx, 0, 0, [0, 255, 0, 255], 5);
  isPixel(ctx, 25, 25, [0, 255, 0, 255], 5);
  isPixel(ctx, 10, 10, [255, 0, 0, 255], 5);
}
</script>

<p>Canvas test: test_large_canvas</p>
<canvas id="c4" class="output" width="10000" height="100">+
</canvas>
<script type="text/javascript">
function test_large_canvas() {
  // test paths on large canvases. On certain platforms this will
  // trigger retargeting of the backend
  var c = document.getElementById("c4");
  var ctx = c.getContext("2d");

  var path = new Path2D();
  path.rect(0, 0, 100, 100);
  path.rect(25, 25, 50, 50);

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'rgb(0,255,0)';
  ctx.fill(path);
  isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'rgb(0,255,0)';
  ctx.fill(path, 'nonzero');
  isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);

  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'rgb(0,255,0)';
  ctx.fill(path, 'evenodd');
  isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
}
</script>

<p>Canvas test: test_isPointInPath_canvas</p>
<canvas id="c5" class="output" width="100" height="100">+
</canvas>
<script type="text/javascript">

function shouldThrow(ctx, s) {
  var _ok = false;
  try {
    // eslint-disable-next-line no-eval
    eval(s);
  } catch(e) {
    _ok = true;
  }
  ok(_ok, s);
}

function shouldBeTrue(ctx, path, s) {
  // eslint-disable-next-line no-eval
  var _ok = eval(s);
  ok(_ok, s);
}
function shouldBeFalse(ctx, path, s) {
  // eslint-disable-next-line no-eval
  var _ok = !eval(s);
  ok(_ok, s);
}

function test_isPointInPath_canvas() {
  var c = document.getElementById("c5");
  var ctx = c.getContext("2d");

  var path = new Path2D();
  path.rect(0, 0, 100, 100);
  path.rect(25, 25, 50, 50);
  shouldBeTrue(ctx, path, "ctx.isPointInPath(path, 50, 50)");
  shouldBeFalse(ctx, path, "ctx.isPointInPath(path, NaN, 50)");
  shouldBeFalse(ctx, path, "ctx.isPointInPath(path, 50, NaN)");

  path = new Path2D();
  path.rect(0, 0, 100, 100);
  path.rect(25, 25, 50, 50);
  shouldBeTrue(ctx, path, "ctx.isPointInPath(path, 50, 50, 'nonzero')");

  path = new Path2D();
  path.rect(0, 0, 100, 100);
  path.rect(25, 25, 50, 50);
  shouldBeFalse(ctx, path, "ctx.isPointInPath(path, 50, 50, 'evenodd')");

  shouldThrow(ctx, "ctx.isPointInPath(null, 50, 50)");
  shouldThrow(ctx, "ctx.isPointInPath(null, 50, 50, 'nonzero')");
  shouldThrow(ctx, "ctx.isPointInPath(null, 50, 50, 'evenodd')");
  shouldThrow(ctx, "ctx.isPointInPath(path, 50, 50)");
  shouldThrow(ctx, "ctx.isPointInPath(path, 50, 50, 'nonzero')");
  shouldThrow(ctx, "ctx.isPointInPath(path, 50, 50, 'evenodd')");

  shouldThrow(ctx, "ctx.isPointInPath([], 50, 50)");
  shouldThrow(ctx, "ctx.isPointInPath([], 50, 50, 'nonzero')");
  shouldThrow(ctx, "ctx.isPointInPath([], 50, 50, 'evenodd')");
  shouldThrow(ctx, "ctx.isPointInPath({}, 50, 50)");
  shouldThrow(ctx, "ctx.isPointInPath({}, 50, 50, 'nonzero')");
  shouldThrow(ctx, "ctx.isPointInPath({}, 50, 50, 'evenodd')");
}
</script>

<p>Canvas test: test_isPointInStroke_canvas</p>
<canvas id="c6" class="output" width="100" height="100">+
</canvas>
<script type="text/javascript">

function test_isPointInStroke_canvas() {
  var c = document.getElementById("c6");
  var ctx = c.getContext("2d");

  ctx.strokeStyle = '#0ff';

  var path = new Path2D();
  path.rect(20,20,100,100);

  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,20,20)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,120,20)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,20,120)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,120,120)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,20)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,20,70)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,120,70)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,120)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,22,22)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,118,22)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,22,118)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,118,118)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,18)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,122,70)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,122)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,18,70)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,NaN,122)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,18,NaN)");

  shouldThrow(ctx, "ctx.isPointInStroke(null,70,20)");
  shouldThrow(ctx, "ctx.isPointInStroke([],20,70)");
  shouldThrow(ctx, "ctx.isPointInStroke({},120,70)");

  ctx.lineWidth = 10;
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,22,22)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,118,22)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,22,118)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,118,118)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,18)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,122,70)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,122)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,18,70)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,26,70)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,26)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,114)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,114,70)");

  path = new Path2D();
  path.moveTo(10,10);
  path.lineTo(110,20);
  path.lineTo(10,30);
  ctx.lineJoin = "bevel";
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,113,20)");

  ctx.miterLimit = 40.0;
  ctx.lineJoin = "miter";
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,113,20)");

  ctx.miterLimit = 2.0;
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,113,20)");

  path = new Path2D();
  path.moveTo(10,10);
  path.lineTo(110,10);
  ctx.lineCap = "butt";
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,112,10)");

  ctx.lineCap = "round";
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,112,10)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,117,10)");

  ctx.lineCap = "square";
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,112,10)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,117,10)");

  ctx.lineCap = "butt";
  ctx.setLineDash([10,10]);
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,15,10)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,25,10)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,35,10)");

  ctx.lineDashOffset = 10;
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,15,10)");
  shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,25,10)");
  shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,35,10)");
}
</script>

<p>Canvas test: test_pathconstructor_canvas</p>
<canvas id="c7" class="output" width="200" height="100">+
</canvas>
<script type="text/javascript">

function test_pathconstructor_canvas() {
  var c = document.getElementById("c7");
  var ctx = c.getContext("2d");

  var p = new Path2D("M100,0L200,0L200,100L100,100z");
  ctx.fillStyle = 'blue';
  ctx.fill(p);
  isPixel(ctx, 105, 5, [0, 0, 255, 255], 0);
  isPixel(ctx, 5, 5, [0, 0, 0, 0], 0);

  // copy constructor. This should not crash.
  var p1 = new Path2D();
  var _p2 = new Path2D(p1);
  p1.arcTo(0, 0, 1, 1, 2);
}
</script>

<p>Canvas test: test_addpath_canvas</p>
<canvas id="c8" class="output" width="200" height="200">+
</canvas>
<script type="text/javascript">

function test_addpath_canvas() {
  var c = document.getElementById("c8");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  var p1 = new Path2D();
  p1.rect(0,0,100,100);
  var p2 = new Path2D();
  p2.rect(0,100,100,100);
  var m = ctx.currentTransform;
  p1.addPath(p2, m);
  ctx.fillStyle = 'yellow';
  ctx.fill(p1);
  isPixel(ctx, 0, 100, [255, 255, 0, 255], 0);

  ctx.clearRect(0,0,200,200);

  ctx.beginPath();
  var p3 = new Path2D();
  p3.rect(0,0,100,100);
  var p4 = new Path2D();
  p4.rect(0,100,100,100);
  var m = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();
  m.a = 1; m.b = 0;
  m.c = 0; m.d = 1;
  m.e = 100; m.f = -100;
  p3.addPath(p4, m);
  ctx.fillStyle = 'yellow';
  ctx.fill(p3);
  isPixel(ctx, 50, 50, [255, 255, 0, 255], 0);
  isPixel(ctx, 150, 150, [0, 0, 0, 0], 0);

  var p5 = new Path2D();
  p5.rect(0,0,100,100);
  shouldThrow(ctx, "p5.addPath(null, m)");
  shouldThrow(ctx, "p5.addPath([], m)");
  shouldThrow(ctx, "p5.addPath({}, m)");

  p5 = p5.addPath(p5);
}
</script>

<script>

function runTests() {
try {
  test_drawClipPath_canvas();
} catch(e) {
  ok(false, "unexpected exception thrown in: test_drawClipPath_canvas");
  throw e;
}
try {
  test_drawFillPath_canvas();
} catch(e) {
  ok(false, "unexpected exception thrown in: test_drawFillPath_canvas");
  throw e;
}
try {
  test_drawStrokePath_canvas();
} catch(e) {
  ok(false, "unexpected exception thrown in: test_drawStrokePath_canvas");
  throw e;
}
try {
  test_large_canvas();
} catch(e) {
  ok(false, "unexpected exception thrown in: test_large_canvas");
  throw e;
}
try {
  test_isPointInPath_canvas();
} catch(e) {
  ok(false, "unexpected exception thrown in: test_isPointInPath_canvas");
  throw e;
}
try {
  test_isPointInStroke_canvas();
} catch(e) {
  ok(false, "unexpected exception thrown in: test_isPointInStroke_canvas");
  throw e;
}
try {
  test_pathconstructor_canvas();
} catch(e) {
  ok(false, "unexpected exception thrown in: test_pathconstructor_canvas");
  throw e;
}
try {
  test_addpath_canvas();
} catch(e) {
  ok(false, "unexpected exception thrown in: test_addpath_canvas");
  throw e;
}
SimpleTest.finish();
}

addLoadEvent(function() {
  SpecialPowers.pushPrefEnv({"set":[["canvas.path.enabled", true]]}, runTests);
});

// Don't leak the world via the Path2D reference to its window.
document.all;
window.p = new Path2D();

</script>

Messung V0.5 in Prozent

¤ Dauer der Verarbeitung: 0.18 Sekunden (vorverarbeitet am 2026-06-09) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.