calc-angle-values.html (6496B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: calc() function with angle values</title> 6 7 <!-- 8 9 Original test is: 10 11 https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html 12 13 Issue 917718: [css-values] calc-with-time-angle-and-frequency-values 14 test is highly unreliable, transition-delay testing causes side effects 15 https://bugs.chromium.org/p/chromium/issues/detail?id=917718 16 17 --> 18 19 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 20 <link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-computed-value"> 21 <link rel="help" href="https://www.w3.org/TR/css-values-3/#angles"> 22 23 <meta content="This test checks that additions, subtractions, multiplications and divisions in calc() function when applied to angle units." name="assert"> 24 25 <script src="/resources/testharness.js"></script> 26 27 <script src="/resources/testharnessreport.js"></script> 28 <script src="/css/support/computed-testcommon.js"></script> 29 30 <div id="log"></div> 31 32 <div id="target"></div> 33 34 <script> 35 function startTesting() 36 { 37 /* 38 In this mega-test of 27 sub-tests, we intentionally 39 set the tolerance precision (epsilon) to a rather big 40 value (0.0001 === 100 millionths). The reason for this 41 is we want to verify if browsers and CSS-capable 42 applications do the right calculations. We do not want 43 to penalize browsers and CSS-capable applications that 44 have modest precision (not capable of a 1 millionth 45 level precision). 46 */ 47 48 // testTransformValuesCloseTo(property_name, calcValue, epsilon, expectedValue, description) 49 50 testTransformValuesCloseTo("rotate(calc(45deg + 45deg))", 0.0001, "rotate(90deg)", "addition of 2 angle units: deg plus deg"); 51 52 testTransformValuesCloseTo("rotate(calc(45deg + 1rad))", 0.0001, "rotate(102.29578deg)", "addition of 2 angle units: deg plus rad"); 53 /* 54 1 radian == 57.295779513 degrees 55 The original test was using the slightly imprecise rotate(102.3deg) 56 */ 57 58 testTransformValuesCloseTo("rotate(calc(20deg + 200grad))", 0.0001, "rotate(200deg)", "addition of 2 angle units: deg plus grad"); 59 60 testTransformValuesCloseTo("rotate(calc(200deg + 0.5turn))", 0.0001, "rotate(380deg)", "addition of 2 angle units: deg plus turn"); 61 62 testTransformValuesCloseTo("rotate(calc(45rad + 45rad))", 0.0001, "rotate(90rad)", "addition of 2 angle units: rad plus rad"); 63 64 testTransformValuesCloseTo("rotate(calc(1rad + 40grad))", 0.0001, "rotate(93.29578deg)", "addition of 2 angle units: rad plus grad"); 65 66 67 // 1 radian == 57.295779513 degrees; 40 gradians is 36 degrees. 68 69 70 testTransformValuesCloseTo("rotate(calc(1rad + 0.5turn))", 0.0001, "rotate(237.29578deg)", "addition of 2 angle units: rad plus turn"); 71 72 testTransformValuesCloseTo("rotate(calc(45grad + 45grad))", 0.0001, "rotate(90grad)", "addition of 2 angle units: grad plus grad"); 73 74 testTransformValuesCloseTo("rotate(calc(10grad + 0.5turn))", 0.0001, "rotate(189deg)", "addition of 2 angle units: grad plus turn"); 75 76 // 10 gradians is 9 degrees. 77 78 // subtraction of angle unit 79 80 testTransformValuesCloseTo("rotate(calc(45deg - 15deg))", 0.0001, "rotate(30deg)", "subtraction of angle unit: deg minus deg"); 81 82 testTransformValuesCloseTo("rotate(calc(90deg - 1rad))", 0.0001, "rotate(32.70422deg)", "subtraction of angle unit: deg minus rad"); 83 84 // 1 radian == 57.295779513 degrees 85 86 testTransformValuesCloseTo("rotate(calc(38deg - 20grad))", 0.0001, "rotate(20deg)", "subtraction of angle unit: deg minus grad"); 87 88 testTransformValuesCloseTo("rotate(calc(360deg - 0.5turn))", 0.0001, "rotate(180deg)", "subtraction of angle unit: deg minus turn"); 89 90 testTransformValuesCloseTo("rotate(calc(45rad - 15rad))", 0.0001, "rotate(30rad)", "subtraction of angle unit: rad minus rad"); 91 92 testTransformValuesCloseTo("rotate(calc(30rad - 10grad))", 0.0001, "rotate(1709.87339deg)", "subtraction of angle unit: rad minus grad"); 93 94 // 30 radians is 1718.8733854 degrees ; 10 gradians is 9 degrees. 95 96 testTransformValuesCloseTo("rotate(calc(4rad - 0.1turn))", 0.0001, "rotate(193.18312deg)", "subtraction of angle unit: rad minus turn"); 97 98 // 4 radians is 229.183118052 degrees ; 0.1 turn is 36 degrees. 99 100 testTransformValuesCloseTo("rotate(calc(45grad - 15grad))", 0.0001, "rotate(30grad)", "subtraction of angle unit: grad minus grad"); 101 102 testTransformValuesCloseTo("rotate(calc(100grad - 0.25turn))", 0.0001, "rotate(0deg)", "subtraction of angle unit: grad minus turn"); 103 104 105 // Multiplication of angle unit 106 107 testTransformValuesCloseTo("rotate(calc(45deg * 2))", 0.0001, "rotate(90deg)", "multiplication of angle unit: deg multiplied by int"); 108 109 testTransformValuesCloseTo("rotate(calc(2 * 45rad))", 0.0001, "rotate(90rad)", "multiplication of angle unit: int multiplied by rad"); 110 111 testTransformValuesCloseTo("rotate(calc(45grad * 2))", 0.0001, "rotate(90grad)", "multiplication of angle unit: grad multiplied by int"); 112 113 testTransformValuesCloseTo("rotate(calc(2 * 45turn))", 0.0001, "rotate(90turn)", "multiplication of angle unit: int multiplied by turn"); 114 115 116 // Division of angle unit 117 118 testTransformValuesCloseTo( "rotate(calc(90deg / 2))", 0.0001, "rotate(45deg)", "division of angle unit: deg divided by int"); 119 120 testTransformValuesCloseTo("rotate(calc(90rad / 2))", 0.0001, "rotate(45rad)", "division of angle unit: rad divided by int"); 121 122 testTransformValuesCloseTo("rotate(calc(90grad / 2))", 0.0001, "rotate(45grad)", "division of angle unit: grad divided by int"); 123 124 testTransformValuesCloseTo("rotate(calc(90turn / 2))", 0.0001, "rotate(45turn)", "division of angle unit: turn divided by int"); 125 126 /* 127 128 deg 129 Degrees. There are 360 degrees in a full circle. 130 131 grad 132 Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle. 133 134 rad 135 Radians. There are 2π radians in a full circle. 136 137 1rad == 57.295779513° 138 https://www.rapidtables.com/convert/number/radians-to-degrees.html 139 140 π == Math.PI == 3.141592653589793 141 142 turn 143 Turns. There is 1 turn in a full circle. 144 145 */ 146 147 148 149 // Testing conversion of angle unit 150 151 testTransformValuesCloseTo("rotate(calc(50grad)", 0.0001, "rotate(45deg)", "conversion of angle unit: grad into deg"); 152 153 } 154 155 startTesting(); 156 157 </script>