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

Side by Side 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: Fix build warrning. 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 unified diff | Download patch

« LayoutTests/css3/calc/calc-errors.html ('K') | « LayoutTests/css3/calc/calc-errors-expected.txt ('k') | LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values-expected.txt » ('j') | Source/core/css/CSSCalculationValue.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

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

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

	6 </head>

	7 <body>
	alancutter (OOO until 2018) 2014/07/21 14:03:47 HTML, HEAD and BODY tags are omitted in LayoutTest HTML, HEAD and BODY tags are omitted in LayoutTests. http://www.chromium.org/blink/coding-style/layout-test-style-guidelines#TOC-h...
	8 <!-- Time units -->

	9 <div id="div1" style="transition-delay:calc(4s + 1s);"></div>

	10 <div id="div2" style="transition-delay:calc(4s + 1ms);"></div>

	11 <div id="div3" style="transition-delay:calc(4ms + 1ms);"></div>

	12

	13 <div id="div4" style="transition-delay:calc(4s - 1s);"></div>

	14 <div id="div5" style="transition-delay:calc(4s - 1ms);"></div>

	15

	16 <div id="div6" style="transition-delay:calc(4 * 1s);"></div>

	17 <div id="div7" style="transition-delay:calc(4 * 1ms);"></div>

	18

	19 <div id="div8" style="transition-delay:calc(4s / 2);"></div>

	20 <div id="div9" style="transition-delay:calc(4ms / 2);"></div>

	21

	22 <!-- Angle units -->

	23 <div id="div10" style="transform:rotate(calc(45deg + 45deg));"></div>

	24 <div id="div11" style="transform:rotate(90deg);"></div>

	25 <div id="div12" style="transform:rotate(calc(45deg + 1rad));"></div>

	26 <div id="div13" style="transform:rotate(102.3deg);"></div>

	27 <div id="div14" style="transform:rotate(calc(20deg + 200grad));"></div>

	28 <div id="div15" style="transform:rotate(200deg);"></div>

	29 <div id="div16" style="transform:rotate(calc(20deg + 0.5turn));"></div>

	30 <div id="div17" style="transform:rotate(200deg);"></div>

	31

	32 <div id="div18" style="transform:rotate(calc(45deg - 15deg));"></div>

	33 <div id="div19" style="transform:rotate(30deg);"></div>

	34 <div id="div20" style="transform:rotate(calc(90deg - 1rad));"></div>

	35 <div id="div22" style="transform:rotate(calc(38deg - 20grad));"></div>

	36 <div id="div23" style="transform:rotate(20deg);"></div>

	37 <div id="div24" style="transform:rotate(calc(360deg - 0.5turn));"></div>

	38 <div id="div25" style="transform:rotate(180deg);"></div>

	39

	40 <div id="div26" style="transform:rotate(calc(45rad + 45rad));"></div>

	41 <div id="div27" style="transform:rotate(90rad);"></div>

	42 <div id="div28" style="transform:rotate(calc(1rad + 40grad));"></div>

	43 <div id="div30" style="transform:rotate(calc(1rad + 0.5turn));"></div>

	44

	45 <div id="div32" style="transform:rotate(calc(45rad - 15rad));"></div>

	46 <div id="div33" style="transform:rotate(30rad);"></div>

	47 <div id="div34" style="transform:rotate(calc(3rad - 10grad));"></div>

	48 <div id="div36" style="transform:rotate(calc(4rad - 0.1turn));"></div>

	49

	50 <div id="div38" style="transform:rotate(calc(45grad + 45grad));"></div>

	51 <div id="div39" style="transform:rotate(90grad);"></div>

	52 <div id="div40" style="transform:rotate(calc(10grad + 0.5turn));"></div>

	53 <div id="div41" style="transform:rotate(189deg);"></div>

	54

	55 <div id="div42" style="transform:rotate(calc(45grad - 15grad));"></div>

	56 <div id="div43" style="transform:rotate(30grad);"></div>

	57 <div id="div44" style="transform:rotate(calc(100grad - 0.25turn));"></div>

	58 <div id="div45" style="transform:rotate(0deg);"></div>

	59

	60 <div id="div46" style="transform:rotate(calc(45turn - 15turn));"></div>

	61 <div id="div47" style="transform:rotate(30turn);"></div>

	62

	63 <div id="div48" style="transform:rotate(calc(45deg * 2));"></div>

	64 <div id="div49" style="transform:rotate(90deg);"></div>

	65 <div id="div50" style="transform:rotate(calc(45rad * 2));"></div>

	66 <div id="div51" style="transform:rotate(90rad);"></div>

	67 <div id="div52" style="transform:rotate(calc(45grad * 2));"></div>

	68 <div id="div53" style="transform:rotate(90grad);"></div>

	69 <div id="div54" style="transform:rotate(calc(45turn * 2));"></div>

	70 <div id="div55" style="transform:rotate(90turn);"></div>

	71

	72 <div id="div56" style="transform:rotate(calc(90deg / 2));"></div>

	73 <div id="div57" style="transform:rotate(45deg);"></div>

	74 <div id="div58" style="transform:rotate(calc(90rad / 2));"></div>

	75 <div id="div59" style="transform:rotate(45rad);"></div>

	76 <div id="div60" style="transform:rotate(calc(90grad / 2));"></div>

	77 <div id="div61" style="transform:rotate(45grad);"></div>

	78 <div id="div62" style="transform:rotate(calc(90turn / 2));"></div>

	79 <div id="div63" style="transform:rotate(45turn);"></div>

	80

	81 <!-- Frequency units -->

	82 <div id="div64" style="pitch:calc(10Hz + 20Hz);"></div>

	83 <div id="div65" style="pitch:calc(10kHz + 20kHz);"></div>

	84 <div id="div66" style="pitch:calc(10kHz + 20Hz);"></div>

	85

	86 <div id="div67" style="pitch:calc(20Hz - 10Hz);"></div>

	87 <div id="div68" style="pitch:calc(20kHz - 10kHz);"></div>

	88 <div id="div69" style="pitch:calc(20kHz - 10Hz);"></div>

	89

	90 <div id="div70" style="pitch:calc(10Hz * 2);"></div>

	91 <div id="div71" style="pitch:calc(10kHz * 2);"></div>

	92

	93 <div id="div72" style="pitch:calc(10Hz / 2);"></div>

	94 <div id="div73" style="pitch:calc(10kHz / 2);"></div>

	95

	96 <!-- Unit conversion for calcs with single values -->

	97 <div id="div74" style="-webkit-transition-delay:calc(4000ms);"></div>

	98

	99 <div id="div75" style="transform:rotate(calc(45deg));"></div>

	100 <div id="div76" style="transform:rotate(calc(50grad));"></div>

	101

	102 <script>
	alancutter (OOO until 2018) 2014/07/21 14:03:47 Scripts are usually not indented, nor are other ro Scripts are usually not indented, nor are other root level DOM elements. Example: <div> <p>This still gets indented.</p> </div> <script> // But no indentation here. </script>
	103 function getCSSProperty(elementId, styleAttribute) {

	104 var div = document.getElementById(elementId);

	105 return getComputedStyle(div).getPropertyValue(styleAttribute);

	106 }
	alancutter (OOO until 2018) 2014/07/21 14:03:47 Consider reusing a single div target: <div id="tar Consider reusing a single div target: <div id="target"></div> function compareValues(property, calcValue, expectedValue) { target.style[property] = ''; target.style[property] = calcValue; var computedCalcValue = getComputedStyle(target)[property]; ... (same for computedExpectedValue) assert_equals(computedCalcValue, computedExpectedValue, calcValue + ' should equal ' + expectedValue); } This should make the tests much easier to read and verify as the input and the output will be on the same line instead of multiple places. Example: compareValues('transform', 'rotate(calc(90deg / 2))', 'rotate(45deg)');
	107

	108 test(function() {

	109 assert_equals(getCSSProperty('div1', 'transition-delay'), "5s");

	110 assert_equals(getCSSProperty('div2', 'transition-delay'), "4.001s");

	111 assert_equals(getCSSProperty('div3', 'transition-delay'), "0.005s");

	112 assert_equals(getCSSProperty('div4', 'transition-delay'), "3s");

	113 assert_equals(getCSSProperty('div5', 'transition-delay'), "3.999s");

	114 assert_equals(getCSSProperty('div6', 'transition-delay'), "4s");

	115 assert_equals(getCSSProperty('div7', 'transition-delay'), "0.004s");

	116 assert_equals(getCSSProperty('div8', 'transition-delay'), "2s");

	117 assert_equals(getCSSProperty('div9', 'transition-delay'), "0.002s");

	118

	119 assert_equals(getCSSProperty('div10', 'transform'), getCSSProperty(' div11', 'transform'));

	120 assert_equals(getCSSProperty('div12', 'transform'), "matrix(-0.21295 8415159296, 0.977061263899476, -0.977061263899476, -0.212958415159296, 0, 0)");

	121 assert_equals(getCSSProperty('div14', 'transform'), getCSSProperty(' div15', 'transform'));

	122 assert_equals(getCSSProperty('div16', 'transform'), getCSSProperty(' div17', 'transform'));

	123 assert_equals(getCSSProperty('div18', 'transform'), getCSSProperty(' div19', 'transform'));

	124 assert_equals(getCSSProperty('div20', 'transform'), "matrix(0.841470 984807897, 0.54030230586814, -0.54030230586814, 0.841470984807897, 0, 0)");

	125 assert_equals(getCSSProperty('div22', 'transform'), getCSSProperty(' div23', 'transform'));

	126 assert_equals(getCSSProperty('div24', 'transform'), getCSSProperty(' div25', 'transform'));

	127 assert_equals(getCSSProperty('div26', 'transform'), getCSSProperty(' div27', 'transform'));

	128 assert_equals(getCSSProperty('div28', 'transform'), "matrix(-0.05749 04875548093, 0.998346054151921, -0.998346054151921, -0.0574904875548093, 0, 0)") ;

	129 assert_equals(getCSSProperty('div30', 'transform'), "matrix(-0.54030 230586814, -0.841470984807896, 0.841470984807896, -0.54030230586814, 0, 0)");

	130 assert_equals(getCSSProperty('div32', 'transform'), getCSSProperty(' div33', 'transform'));

	131 assert_equals(getCSSProperty('div34', 'transform'), "matrix(-0.95572 8013201613, 0.294251533184956, -0.294251533184956, -0.955728013201613, 0, 0)");

	132 assert_equals(getCSSProperty('div36', 'transform'), "matrix(-0.97364 6143183581, -0.228063999490797, 0.228063999490797, -0.973646143183581, 0, 0)");

	133 assert_equals(getCSSProperty('div38', 'transform'), getCSSProperty(' div39', 'transform'));

	134 assert_equals(getCSSProperty('div40', 'transform'), getCSSProperty(' div41', 'transform'));

	135 assert_equals(getCSSProperty('div42', 'transform'), getCSSProperty(' div43', 'transform'));

	136 assert_equals(getCSSProperty('div44', 'transform'), getCSSProperty(' div45', 'transform'));

	137 assert_equals(getCSSProperty('div46', 'transform'), getCSSProperty(' div47', 'transform'));

	138 assert_equals(getCSSProperty('div48', 'transform'), getCSSProperty(' div49', 'transform'));

	139 assert_equals(getCSSProperty('div50', 'transform'), getCSSProperty(' div51', 'transform'));

	140 assert_equals(getCSSProperty('div52', 'transform'), getCSSProperty(' div53', 'transform'));

	141 assert_equals(getCSSProperty('div54', 'transform'), getCSSProperty(' div55', 'transform'));

	142 assert_equals(getCSSProperty('div56', 'transform'), getCSSProperty(' div57', 'transform'));

	143 assert_equals(getCSSProperty('div58', 'transform'), getCSSProperty(' div59', 'transform'));

	144 assert_equals(getCSSProperty('div60', 'transform'), getCSSProperty(' div61', 'transform'));

	145 assert_equals(getCSSProperty('div62', 'transform'), getCSSProperty(' div63', 'transform'));

	146 assert_equals(getCSSProperty('div64', 'transform'), getCSSProperty(' div65', 'transform'));

	147

	148 // NOTE: Since there is no CSS property that uses frequency at the m oment we only test the parsing.

	149 assert_equals(getCSSProperty('div65', 'pitch'), null);

	150 assert_equals(getCSSProperty('div66', 'pitch'), null);

	151 assert_equals(getCSSProperty('div67', 'pitch'), null);

	152 assert_equals(getCSSProperty('div68', 'pitch'), null);

	153 assert_equals(getCSSProperty('div69', 'pitch'), null);

	154 assert_equals(getCSSProperty('div70', 'pitch'), null);

	155 assert_equals(getCSSProperty('div71', 'pitch'), null);

	156 assert_equals(getCSSProperty('div72', 'pitch'), null);

	157 assert_equals(getCSSProperty('div73', 'pitch'), null);

	158

	159 assert_equals(getCSSProperty('div74', '-webkit-transition-delay'), " 4s");

	160 assert_equals(getCSSProperty('div75', 'transform'), getCSSProperty(' div76', 'transform'));

	161 }, "Tests that calc() can contain angle, time and frequency values.");
	alancutter (OOO until 2018) 2014/07/21 14:03:47 You should split this test() function up in the sa You should split this test() function up in the same way you split the divs into time, angle, frequency and conversion sections, each section should be it's own test() call.
	162 </script>

	163 </body>

	164 </html>

OLD	NEW