tor-browser

test_shapes_highlighter_helpers.js (5761B)

---

/* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */

/**
* Test the helper functions of the shapes highlighter.
*/

"use strict";

const {
 splitCoords,
 coordToPercent,
 evalCalcExpression,
 shapeModeToCssPropertyName,
 getCirclePath,
 getDecimalPrecision,
 getUnit,
} = require("resource://devtools/server/actors/highlighters/shapes.js");

function run_test() {
 test_split_coords();
 test_coord_to_percent();
 test_eval_calc_expression();
 test_shape_mode_to_css_property_name();
 test_get_circle_path();
 test_get_decimal_precision();
 test_get_unit();
 run_next_test();
}

function test_split_coords() {
 const tests = [
   {
     desc: "splitCoords for basic coordinate pair",
     expr: "30% 20%",
     expected: ["30%", "20%"],
   },
   {
     desc: "splitCoords for coord pair with calc()",
     expr: "calc(50px + 20%) 30%",
     expected: ["calc(50px\u00a0+\u00a020%)", "30%"],
   },
 ];

 for (const { desc, expr, expected } of tests) {
   deepEqual(splitCoords(expr), expected, desc);
 }
}

function test_coord_to_percent() {
 const size = 1000;
 const tests = [
   {
     desc: "coordToPercent for percent value",
     expr: "50%",
     expected: 50,
   },
   {
     desc: "coordToPercent for px value",
     expr: "500px",
     expected: 50,
   },
   {
     desc: "coordToPercent for zero value",
     expr: "0",
     expected: 0,
   },
 ];

 for (const { desc, expr, expected } of tests) {
   equal(coordToPercent(expr, size), expected, desc);
 }
}

function test_eval_calc_expression() {
 const size = 1000;
 const tests = [
   {
     desc: "evalCalcExpression with one value",
     expr: "50%",
     expected: 50,
   },
   {
     desc: "evalCalcExpression with percent and px values",
     expr: "50% + 100px",
     expected: 60,
   },
   {
     desc: "evalCalcExpression with a zero value",
     expr: "0 + 100px",
     expected: 10,
   },
   {
     desc: "evalCalcExpression with a negative value",
     expr: "-200px+50%",
     expected: 30,
   },
 ];

 for (const { desc, expr, expected } of tests) {
   equal(evalCalcExpression(expr, size), expected, desc);
 }
}

function test_shape_mode_to_css_property_name() {
 const tests = [
   {
     desc: "shapeModeToCssPropertyName for clip-path",
     expr: "cssClipPath",
     expected: "clipPath",
   },
   {
     desc: "shapeModeToCssPropertyName for shape-outside",
     expr: "cssShapeOutside",
     expected: "shapeOutside",
   },
 ];

 for (const { desc, expr, expected } of tests) {
   equal(shapeModeToCssPropertyName(expr), expected, desc);
 }
}

function test_get_circle_path() {
 const tests = [
   {
     desc: "getCirclePath with size 5, no resizing, no zoom, 1:1 ratio",
     size: 5,
     cx: 0,
     cy: 0,
     width: 100,
     height: 100,
     zoom: 1,
     expected: "M-5,0a5,5 0 1,0 10,0a5,5 0 1,0 -10,0",
   },
   {
     desc: "getCirclePath with size 7, resizing, no zoom, 1:1 ratio",
     size: 7,
     cx: 0,
     cy: 0,
     width: 200,
     height: 200,
     zoom: 1,
     expected: "M-3.5,0a3.5,3.5 0 1,0 7,0a3.5,3.5 0 1,0 -7,0",
   },
   {
     desc: "getCirclePath with size 5, resizing, zoom, 1:1 ratio",
     size: 5,
     cx: 0,
     cy: 0,
     width: 200,
     height: 200,
     zoom: 2,
     expected: "M-1.25,0a1.25,1.25 0 1,0 2.5,0a1.25,1.25 0 1,0 -2.5,0",
   },
   {
     desc: "getCirclePath with size 5, resizing, zoom, non-square ratio",
     size: 5,
     cx: 0,
     cy: 0,
     width: 100,
     height: 200,
     zoom: 2,
     expected: "M-2.5,0a2.5,1.25 0 1,0 5,0a2.5,1.25 0 1,0 -5,0",
   },
 ];

 for (const { desc, size, cx, cy, width, height, zoom, expected } of tests) {
   equal(getCirclePath(size, cx, cy, width, height, zoom), expected, desc);
 }
}

function test_get_decimal_precision() {
 const tests = [
   {
     desc: "getDecimalPrecision with px",
     expr: "px",
     expected: 0,
   },
   {
     desc: "getDecimalPrecision with %",
     expr: "%",
     expected: 2,
   },
   {
     desc: "getDecimalPrecision with em",
     expr: "em",
     expected: 2,
   },
   {
     desc: "getDecimalPrecision with undefined",
     expr: undefined,
     expected: 0,
   },
   {
     desc: "getDecimalPrecision with empty string",
     expr: "",
     expected: 0,
   },
 ];

 for (const { desc, expr, expected } of tests) {
   equal(getDecimalPrecision(expr), expected, desc);
 }
}

function test_get_unit() {
 const tests = [
   {
     desc: "getUnit with %",
     expr: "30%",
     expected: "%",
   },
   {
     desc: "getUnit with px",
     expr: "400px",
     expected: "px",
   },
   {
     desc: "getUnit with em",
     expr: "4em",
     expected: "em",
   },
   {
     desc: "getUnit with 0",
     expr: "0",
     expected: "px",
   },
   {
     desc: "getUnit with 0%",
     expr: "0%",
     expected: "%",
   },
   {
     desc: "getUnit with 0.00%",
     expr: "0.00%",
     expected: "%",
   },
   {
     desc: "getUnit with 0px",
     expr: "0px",
     expected: "px",
   },
   {
     desc: "getUnit with 0em",
     expr: "0em",
     expected: "em",
   },
   {
     desc: "getUnit with calc",
     expr: "calc(30px + 5%)",
     expected: "px",
   },
   {
     desc: "getUnit with var",
     expr: "var(--variable)",
     expected: "px",
   },
   {
     desc: "getUnit with closest-side",
     expr: "closest-side",
     expected: "px",
   },
   {
     desc: "getUnit with farthest-side",
     expr: "farthest-side",
     expected: "px",
   },
 ];

 for (const { desc, expr, expected } of tests) {
   equal(getUnit(expr), expected, desc);
 }
}