Skip to content

Commit

Permalink
Add calculation examples to all shapes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jym77
Jym77 committed Oct 13, 2023
1 parent 200b863 commit d38ec15
Show file tree
Hide file tree
Showing 5 changed files with 304 additions and 134 deletions.
103 changes: 59 additions & 44 deletions packages/alfa-css/test/value/shape/circle.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,114 @@
import { test } from "@siteimprove/alfa-test";

import { Lexer } from "../../../src/syntax/lexer";
import { Circle } from "../../../src/value/shape/circle";
import { Circle, Lexer } from "../../../src";

function parse(input: string) {
return Circle.parse(Lexer.lex(input)).map(([_, circle]) => circle.toJSON());
return Circle.parse(Lexer.lex(input)).getUnsafe()[1].toJSON();
}

test("parse() parses a circle with just a radius", (t) => {
t.deepEqual(parse("circle(farthest-side)").getUnsafe(), {
t.deepEqual(parse("circle(farthest-side)"), {
type: "basic-shape",
kind: "circle",
radius: {
type: "basic-shape",
kind: "radius",
value: {
type: "keyword",
value: "farthest-side",
},
value: { type: "keyword", value: "farthest-side" },
},
center: {
type: "position",
vertical: {
type: "keyword",
value: "center",
},
horizontal: {
type: "keyword",
value: "center",
},
vertical: { type: "keyword", value: "center" },
horizontal: { type: "keyword", value: "center" },
},
});
});

test("parse() parses a circle with just a center", (t) => {
t.deepEqual(parse("circle(at left)").getUnsafe(), {
t.deepEqual(parse("circle(at left)"), {
type: "basic-shape",
kind: "circle",
radius: {
type: "basic-shape",
kind: "radius",
value: {
type: "keyword",
value: "closest-side",
},
value: { type: "keyword", value: "closest-side" },
},
center: {
type: "position",
vertical: {
type: "keyword",
value: "center",
},
vertical: { type: "keyword", value: "center" },
horizontal: {
type: "side",
offset: null,
side: {
type: "keyword",
value: "left",
},
side: { type: "keyword", value: "left" },
},
},
});
});

test("parse() parses a circle with both radius and center", (t) => {
t.deepEqual(parse("circle(10px at left)").getUnsafe(), {
t.deepEqual(parse("circle(10px at left)"), {
type: "basic-shape",
kind: "circle",
radius: {
type: "basic-shape",
kind: "radius",
value: {
type: "length",
value: 10,
unit: "px",
},
value: { type: "length", value: 10, unit: "px" },
},
center: {
type: "position",
vertical: {
type: "keyword",
value: "center",
},
vertical: { type: "keyword", value: "center" },
horizontal: {
type: "side",
offset: null,
side: {
type: "keyword",
value: "left",
},
side: { type: "keyword", value: "left" },
},
},
});
});

test("parse() fails if there is a negative radius", (t) => {
t.deepEqual(parse("circle(-1px)").isErr(), true);
t.deepEqual(Circle.parse(Lexer.lex("circle(-1px)")).isErr(), true);
});

test("parse() accepts calculated radius", (t) => {
t.deepEqual(parse("circle(calc(10px + 1%) at left)"), {
type: "basic-shape",
kind: "circle",
radius: {
type: "basic-shape",
kind: "radius",
value: {
type: "length-percentage",
math: {
type: "math expression",
expression: {
type: "calculation",
arguments: [
{
type: "sum",
operands: [
{
type: "value",
value: { type: "length", value: 10, unit: "px" },
},
{
type: "value",
value: { type: "percentage", value: 0.01 },
},
],
},
],
},
},
},
},
center: {
type: "position",
vertical: { type: "keyword", value: "center" },
horizontal: {
type: "side",
offset: null,
side: { type: "keyword", value: "left" },
},
},
});
});
93 changes: 74 additions & 19 deletions packages/alfa-css/test/value/shape/ellipse.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,104 @@
import { test } from "@siteimprove/alfa-test";

import { Lexer } from "../../../src/syntax/lexer";
import { Ellipse } from "../../../src/value/shape/ellipse";
import { Ellipse, Lexer } from "../../../src";

function parse(input: string) {
return Ellipse.parse(Lexer.lex(input)).map(([_, ellipse]) =>
ellipse.toJSON()
);
return Ellipse.parse(Lexer.lex(input)).getUnsafe()[1].toJSON();
}

test("parse() parses an ellipse", (t) => {
t.deepEqual(parse("ellipse(1px 3px at right)").getUnsafe(), {
t.deepEqual(parse("ellipse(1px 3px at right)"), {
type: "basic-shape",
kind: "ellipse",
rx: {
type: "basic-shape",
kind: "radius",
value: { type: "length", value: 1, unit: "px" },
},
ry: {
type: "basic-shape",
kind: "radius",
value: { type: "length", value: 3, unit: "px" },
},
center: {
type: "position",
vertical: { type: "keyword", value: "center" },
horizontal: {
type: "side",
offset: null,
side: { type: "keyword", value: "right" },
},
},
});
});

test("parse() accepts calculated radii", (t) => {
t.deepEqual(parse("ellipse(calc(1em - 10%) calc(1px + 1ch) at right)"), {
type: "basic-shape",
kind: "ellipse",
rx: {
type: "basic-shape",
kind: "radius",
value: {
type: "length",
value: 1,
unit: "px",
type: "length-percentage",
math: {
type: "math expression",
expression: {
type: "calculation",
arguments: [
{
type: "sum",
operands: [
{
type: "value",
value: { type: "length", value: 1, unit: "em" },
},
{
type: "value",
value: { type: "percentage", value: -0.1 },
},
],
},
],
},
},
},
},
ry: {
type: "basic-shape",
kind: "radius",
value: {
type: "length",
value: 3,
unit: "px",
math: {
type: "math expression",
expression: {
type: "calculation",
arguments: [
{
type: "sum",
operands: [
{
type: "value",
value: { type: "length", value: 1, unit: "px" },
},
{
type: "value",
value: { type: "length", value: 1, unit: "ch" },
},
],
},
],
},
},
},
},
center: {
type: "position",
vertical: {
type: "keyword",
value: "center",
},
vertical: { type: "keyword", value: "center" },
horizontal: {
type: "side",
offset: null,
side: {
type: "keyword",
value: "right",
},
side: { type: "keyword", value: "right" },
},
},
});
Expand Down
50 changes: 50 additions & 0 deletions packages/alfa-css/test/value/shape/inset.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,3 +117,53 @@ test("parse() parses a partially specified inset", (t) => {
},
});
});

test("parse() accepts calculated offsets and corners", (t) => {
const actual = (length: number) => `calc(${length}px + 1%)`;
const expected = (length: number) => ({
type: "length-percentage",
math: {
type: "math expression",
expression: {
type: "calculation",
arguments: [
{
type: "sum",
operands: [
{
type: "value",
value: { type: "length", value: length, unit: "px" },
},
{
type: "value",
value: { type: "percentage", value: 0.01 },
},
],
},
],
},
},
});

t.deepEqual(
parse(
`inset(${actual(1)} ${actual(2)} ${actual(3)} ${actual(4)} ` +
`round ${actual(1)} ${actual(1)} ${actual(1)} ${actual(1)} ` +
`/ ${actual(2)} ${actual(2)} ${actual(2)} ${actual(2)})`
).getUnsafe(),
{
type: "basic-shape",
kind: "inset",
offsets: [expected(1), expected(2), expected(3), expected(4)],
corners: {
type: "some",
value: [
[expected(1), expected(2)],
[expected(1), expected(2)],
[expected(1), expected(2)],
[expected(1), expected(2)],
],
},
}
);
});
Loading

0 comments on commit d38ec15

Please sign in to comment.