text: import { Color } from "../Source/Cesium.js";
  import { writeTextToCanvas } from "../Source/Cesium.js";
  
  describe("Core/writeTextToCanvas", function () {
    it("returns undefined when text is blank", function () {
      var canvas = writeTextToCanvas("");
  
      expect(canvas).toBeUndefined();
    });
  
    it("throws when text is undefined", function () {
      expect(function () {
        writeTextToCanvas();
      }).toThrowDeveloperError();
    });
  
    it("sizes the canvas to fit the text", function () {
      var canvas1 = writeTextToCanvas("m");
      var canvas2 = writeTextToCanvas("mm");
  
      expect(canvas1.width).not.toEqual(canvas2.width);
      expect(canvas1.height).toEqual(canvas2.height);
    });
  
    it("allows the text to be either stroked or filled", function () {
      var row = 20;
  
      // exact pixel checks are problematic due to browser differences in how text is drawn
      // so walk pixels left-to-right and check the number of times that the pixel value changes
      // color, ignoring alpha.
  
      function getColorChangeCount(canvas) {
        var colorChangeCount = 0;
  
        var context = canvas.getContext("2d");
  
        var pixel = context.getImageData(0, row, 1, 1).data;
  
        var lastRed = pixel[0];
        var lastGreen = pixel[1];
        var lastBlue = pixel[2];
  
        for (var column = 0; column < canvas.width; ++column) {
          pixel = context.getImageData(column, row, 1, 1).data;
  
          var red = pixel[0];
          var green = pixel[1];
          var blue = pixel[2];
  
          // round up pixels that have been subpixel anti-aliased
          if (red > 0 && red !== 255) {
            red = 255;
          }
          if (green > 0 && green !== 255) {
            green = 255;
          }
          if (blue > 0 && blue !== 255) {
            blue = 255;
          }
  
          if (red !== lastRed || green !== lastGreen || blue !== lastBlue) {
            ++colorChangeCount;
          }
          lastRed = red;
          lastGreen = green;
          lastBlue = blue;
        }
        return colorChangeCount;
      }
  
      var canvas1 = writeTextToCanvas("I", {
        font: '90px "Open Sans"',
        fill: true,
        fillColor: Color.RED,
        stroke: false,
      });
  
      // canvas1 is filled, completely by the I on the left
      // and then has empty space on the right, so there
      // should only be one "edge": fill -> outside
      var count = getColorChangeCount(canvas1);
      expect(count === 1 || count === 2).toEqual(true);
  
      var canvas2 = writeTextToCanvas("I", {
        font: '90px "Open Sans"',
        fill: false,
        stroke: true,
        strokeColor: Color.BLUE,
      });
  
      // canvas2 is stroked, so there should be three "edges": outline -> inside -> outline -> outside
      count = getColorChangeCount(canvas2);
      expect(count === 3 || count === 4).toEqual(true);
    });
  
    it("background color defaults to transparent", function () {
      var canvas = writeTextToCanvas("a", {
        font: '90px "Open Sans"',
      });
  
      var context = canvas.getContext("2d");
      var pixel = context.getImageData(0, 0, 1, 1).data;
      expect(pixel).toEqual([0, 0, 0, 0]);
    });
  
    it("background can be set", function () {
      var canvas = writeTextToCanvas("a", {
        font: '90px "Open Sans"',
        backgroundColor: Color.RED,
      });
  
      var context = canvas.getContext("2d");
      var pixel = context.getImageData(0, 0, 1, 1).data;
      expect(pixel).toEqual([255, 0, 0, 255]);
    });
  
    it("border can be set", function () {
      var canvas1 = writeTextToCanvas("a", {
        font: '90px "Open Sans"',
        backgroundColor: Color.RED,
      });
  
      var canvas2 = writeTextToCanvas("a", {
        font: '90px "Open Sans"',
        backgroundColor: Color.RED,
        padding: 2,
      });
  
      expect(canvas2.width).toEqual(canvas1.width + 4);
      expect(canvas2.height).toEqual(canvas1.height + 4);
    });
  });
  