LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html - Issue 345903005: calc expressions should support time, angle and frequency values.

Unified Diff: LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html

Issue 345903005: calc expressions should support time, angle and frequency values. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Updated patch Created 6 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « LayoutTests/css3/calc/calc-errors-expected.txt ('k') | LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html

diff --git a/LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html b/LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html

new file mode 100644

index 0000000000000000000000000000000000000000..19c50b30b43c3b36c5b83f201abc60b155c33ea1

--- /dev/null

+++ b/LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html

@@ -0,0 +1,80 @@

+<!DOCTYPE html>

+<script src="../../resources/testharness.js"></script>

+<script src="../../resources/testharnessreport.js"></script>

+<div id="target"></div>

+<script>

+function compareValue(property, calcValue, expectedValue) {

+ target.style[property] = '';

+ target.style[property] = calcValue;

+ var computedCalcValue = getComputedStyle(target)[property];

+ target.style[property] = expectedValue;

+ var computedExpectedValue = getComputedStyle(target)[property];

+ assert_equals(computedCalcValue, computedExpectedValue, calcValue + ' should equal to ' + expectedValue);

+test(function() {

+ compareValue("transition-delay", "calc(4s + 1s)", "5s");

+ compareValue("transition-delay", "calc(4s + 1ms)", "4.001s");

+ compareValue("transition-delay", "calc(4ms + 1ms)", "0.005s");

+ compareValue("transition-delay", "calc(4s - 1s)", "3s");

+ compareValue("transition-delay", "calc(4s - 1ms)", "3.999s");

+ compareValue("transition-delay", "calc(4 * 1s)", "4s");

+ compareValue("transition-delay", "calc(4 * 1ms)", "0.004s");

+ compareValue("transition-delay", "calc(4s / 2)", "2s");

+ compareValue("transition-delay", "calc(4ms / 2)", "0.002s");

+}, "Tests calc() with time units.");

+test(function() {

+ compareValue("transform", "rotate(calc(45deg + 45deg))", "rotate(90deg)");

+ compareValue("transform", "rotate(calc(45deg + 1rad))", "rotate(102.3deg)");

+ compareValue("transform", "rotate(calc(20deg + 200grad))", "rotate(200deg)");

+ compareValue("transform", "rotate(calc(200deg + 0.5turn))", "rotate(200deg)");

+ compareValue("transform", "rotate(calc(45rad + 45rad))", "rotate(90rad)");

+ compareValue("transform", "rotate(calc(1rad + 40grad))", "matrix(-0.0574904875548093, 0.998346054151921, -0.998346054151921, -0.0574904875548093, 0, 0)");

+ compareValue("transform", "rotate(calc(1rad + 0.5turn))", "matrix(-0.54030230586814, -0.841470984807896, 0.841470984807896, -0.54030230586814, 0, 0)");

+ compareValue("transform", "rotate(calc(45grad + 45grad))", "rotate(90grad)");

+ compareValue("transform", "rotate(calc(10grad + 0.5turn))", "rotate(189deg)");

+ compareValue("transform", "rotate(calc(45deg - 15deg))", "rotate(30deg)");

+ compareValue("transform", "rotate(calc(90deg - 1rad))", "matrix(0.841470984807897, 0.54030230586814, -0.54030230586814, 0.841470984807897, 0, 0)");

+ compareValue("transform", "rotate(calc(38deg - 20grad))", "rotate(20deg)");

+ compareValue("transform", "rotate(calc(360deg - 0.5turn))", "rotate(180deg)");

+ compareValue("transform", "rotate(calc(45rad - 15rad))", "rotate(30rad)");

+ compareValue("transform", "rotate(calc(30rad - 10grad))", "matrix(-0.955728013201613, 0.294251533184956, -0.294251533184956, -0.955728013201613, 0, 0)");

+ compareValue("transform", "rotate(calc(4rad - 0.1turn))", "matrix(-0.973646143183581, -0.228063999490797, 0.228063999490797, -0.973646143183581, 0, 0)");

+ compareValue("transform", "rotate(calc(45grad - 15grad))", "rotate(30grad)");

+ compareValue("transform", "rotate(calc(100grad - 0.25turn))", "rotate(0deg)");

+ compareValue("transform", "rotate(calc(45deg * 2))", "rotate(90deg)");

+ compareValue("transform", "rotate(calc(2 * 45rad))", "rotate(90rad)");

+ compareValue("transform", "rotate(calc(45grad * 2))", "rotate(90grad)");

+ compareValue("transform", "rotate(calc(2 * 45turn))", "rotate(90turn)");

+ compareValue("transform", "rotate(calc(90deg / 2))", "rotate(45deg)");

+ compareValue("transform", "rotate(calc(90rad / 2))", "rotate(45rad)");

+ compareValue("transform", "rotate(calc(90grad / 2))", "rotate(45grad)");

+ compareValue("transform", "rotate(calc(90turn / 2))", "rotate(45turn)");

+}, "Tests calc() with angle units.");

+test(function() {

+ // NOTE: Since there is no CSS property that uses frequency at the moment we only test the parsing.

+ compareValue("pitch", "calc(10Hz + 20Hz)", null);

+ compareValue("pitch", "calc(10kHz + 20kHz)", null);

+ compareValue("pitch", "calc(10kHz + 20Hz)", null);

+ compareValue("pitch", "calc(20Hz - 10Hz)", null);

+ compareValue("pitch", "calc(20kHz - 10kHz)", null);

+ compareValue("pitch", "calc(20kHz - 10Hz)", null);

+ compareValue("pitch", "calc(10Hz * 2)", null);

+ compareValue("pitch", "calc(10kHz * 2)", null);

+ compareValue("pitch", "calc(10Hz / 2)", null);

+ compareValue("pitch", "calc(10kHz / 2)", null);

+}, "Tests calc() with frequency units.");

+test(function() {

+ compareValue("transition-delay", "calc(4000ms)", "4s");

+ compareValue("transform", "rotate(calc(50grad)", "rotate(45deg)");

+}, "Tests unit conversion of single values in calc().");

+</script>