Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(471)

Issues Search
    My Issues | Starred     Open | Closed | All

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: 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 side-by-side diff with in-line comments
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')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments 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..2c61356177ba7beab61a342c408b626e92bb65cc
--- /dev/null
+++ b/LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+</head>
+<body>
alancutter (OOO until 2018) 2014/07/21 14:03:47 HTML, HEAD and BODY tags are omitted in LayoutTest
+ <!-- Time units -->
+ <div id="div1" style="transition-delay:calc(4s + 1s);"></div>
+ <div id="div2" style="transition-delay:calc(4s + 1ms);"></div>
+ <div id="div3" style="transition-delay:calc(4ms + 1ms);"></div>
+
+ <div id="div4" style="transition-delay:calc(4s - 1s);"></div>
+ <div id="div5" style="transition-delay:calc(4s - 1ms);"></div>
+
+ <div id="div6" style="transition-delay:calc(4 * 1s);"></div>
+ <div id="div7" style="transition-delay:calc(4 * 1ms);"></div>
+
+ <div id="div8" style="transition-delay:calc(4s / 2);"></div>
+ <div id="div9" style="transition-delay:calc(4ms / 2);"></div>
+
+ <!-- Angle units -->
+ <div id="div10" style="transform:rotate(calc(45deg + 45deg));"></div>
+ <div id="div11" style="transform:rotate(90deg);"></div>
+ <div id="div12" style="transform:rotate(calc(45deg + 1rad));"></div>
+ <div id="div13" style="transform:rotate(102.3deg);"></div>
+ <div id="div14" style="transform:rotate(calc(20deg + 200grad));"></div>
+ <div id="div15" style="transform:rotate(200deg);"></div>
+ <div id="div16" style="transform:rotate(calc(20deg + 0.5turn));"></div>
+ <div id="div17" style="transform:rotate(200deg);"></div>
+
+ <div id="div18" style="transform:rotate(calc(45deg - 15deg));"></div>
+ <div id="div19" style="transform:rotate(30deg);"></div>
+ <div id="div20" style="transform:rotate(calc(90deg - 1rad));"></div>
+ <div id="div22" style="transform:rotate(calc(38deg - 20grad));"></div>
+ <div id="div23" style="transform:rotate(20deg);"></div>
+ <div id="div24" style="transform:rotate(calc(360deg - 0.5turn));"></div>
+ <div id="div25" style="transform:rotate(180deg);"></div>
+
+ <div id="div26" style="transform:rotate(calc(45rad + 45rad));"></div>
+ <div id="div27" style="transform:rotate(90rad);"></div>
+ <div id="div28" style="transform:rotate(calc(1rad + 40grad));"></div>
+ <div id="div30" style="transform:rotate(calc(1rad + 0.5turn));"></div>
+
+ <div id="div32" style="transform:rotate(calc(45rad - 15rad));"></div>
+ <div id="div33" style="transform:rotate(30rad);"></div>
+ <div id="div34" style="transform:rotate(calc(3rad - 10grad));"></div>
+ <div id="div36" style="transform:rotate(calc(4rad - 0.1turn));"></div>
+
+ <div id="div38" style="transform:rotate(calc(45grad + 45grad));"></div>
+ <div id="div39" style="transform:rotate(90grad);"></div>
+ <div id="div40" style="transform:rotate(calc(10grad + 0.5turn));"></div>
+ <div id="div41" style="transform:rotate(189deg);"></div>
+
+ <div id="div42" style="transform:rotate(calc(45grad - 15grad));"></div>
+ <div id="div43" style="transform:rotate(30grad);"></div>
+ <div id="div44" style="transform:rotate(calc(100grad - 0.25turn));"></div>
+ <div id="div45" style="transform:rotate(0deg);"></div>
+
+ <div id="div46" style="transform:rotate(calc(45turn - 15turn));"></div>
+ <div id="div47" style="transform:rotate(30turn);"></div>
+
+ <div id="div48" style="transform:rotate(calc(45deg * 2));"></div>
+ <div id="div49" style="transform:rotate(90deg);"></div>
+ <div id="div50" style="transform:rotate(calc(45rad * 2));"></div>
+ <div id="div51" style="transform:rotate(90rad);"></div>
+ <div id="div52" style="transform:rotate(calc(45grad * 2));"></div>
+ <div id="div53" style="transform:rotate(90grad);"></div>
+ <div id="div54" style="transform:rotate(calc(45turn * 2));"></div>
+ <div id="div55" style="transform:rotate(90turn);"></div>
+
+ <div id="div56" style="transform:rotate(calc(90deg / 2));"></div>
+ <div id="div57" style="transform:rotate(45deg);"></div>
+ <div id="div58" style="transform:rotate(calc(90rad / 2));"></div>
+ <div id="div59" style="transform:rotate(45rad);"></div>
+ <div id="div60" style="transform:rotate(calc(90grad / 2));"></div>
+ <div id="div61" style="transform:rotate(45grad);"></div>
+ <div id="div62" style="transform:rotate(calc(90turn / 2));"></div>
+ <div id="div63" style="transform:rotate(45turn);"></div>
+
+ <!-- Frequency units -->
+ <div id="div64" style="pitch:calc(10Hz + 20Hz);"></div>
+ <div id="div65" style="pitch:calc(10kHz + 20kHz);"></div>
+ <div id="div66" style="pitch:calc(10kHz + 20Hz);"></div>
+
+ <div id="div67" style="pitch:calc(20Hz - 10Hz);"></div>
+ <div id="div68" style="pitch:calc(20kHz - 10kHz);"></div>
+ <div id="div69" style="pitch:calc(20kHz - 10Hz);"></div>
+
+ <div id="div70" style="pitch:calc(10Hz * 2);"></div>
+ <div id="div71" style="pitch:calc(10kHz * 2);"></div>
+
+ <div id="div72" style="pitch:calc(10Hz / 2);"></div>
+ <div id="div73" style="pitch:calc(10kHz / 2);"></div>
+
+ <!-- Unit conversion for calcs with single values -->
+ <div id="div74" style="-webkit-transition-delay:calc(4000ms);"></div>
+
+ <div id="div75" style="transform:rotate(calc(45deg));"></div>
+ <div id="div76" style="transform:rotate(calc(50grad));"></div>
+
+ <script>
alancutter (OOO until 2018) 2014/07/21 14:03:47 Scripts are usually not indented, nor are other ro
+ function getCSSProperty(elementId, styleAttribute) {
+ var div = document.getElementById(elementId);
+ return getComputedStyle(div).getPropertyValue(styleAttribute);
+ }
alancutter (OOO until 2018) 2014/07/21 14:03:47 Consider reusing a single div target: <div id="tar
+
+ test(function() {
+ assert_equals(getCSSProperty('div1', 'transition-delay'), "5s");
+ assert_equals(getCSSProperty('div2', 'transition-delay'), "4.001s");
+ assert_equals(getCSSProperty('div3', 'transition-delay'), "0.005s");
+ assert_equals(getCSSProperty('div4', 'transition-delay'), "3s");
+ assert_equals(getCSSProperty('div5', 'transition-delay'), "3.999s");
+ assert_equals(getCSSProperty('div6', 'transition-delay'), "4s");
+ assert_equals(getCSSProperty('div7', 'transition-delay'), "0.004s");
+ assert_equals(getCSSProperty('div8', 'transition-delay'), "2s");
+ assert_equals(getCSSProperty('div9', 'transition-delay'), "0.002s");
+
+ assert_equals(getCSSProperty('div10', 'transform'), getCSSProperty('div11', 'transform'));
+ assert_equals(getCSSProperty('div12', 'transform'), "matrix(-0.212958415159296, 0.977061263899476, -0.977061263899476, -0.212958415159296, 0, 0)");
+ assert_equals(getCSSProperty('div14', 'transform'), getCSSProperty('div15', 'transform'));
+ assert_equals(getCSSProperty('div16', 'transform'), getCSSProperty('div17', 'transform'));
+ assert_equals(getCSSProperty('div18', 'transform'), getCSSProperty('div19', 'transform'));
+ assert_equals(getCSSProperty('div20', 'transform'), "matrix(0.841470984807897, 0.54030230586814, -0.54030230586814, 0.841470984807897, 0, 0)");
+ assert_equals(getCSSProperty('div22', 'transform'), getCSSProperty('div23', 'transform'));
+ assert_equals(getCSSProperty('div24', 'transform'), getCSSProperty('div25', 'transform'));
+ assert_equals(getCSSProperty('div26', 'transform'), getCSSProperty('div27', 'transform'));
+ assert_equals(getCSSProperty('div28', 'transform'), "matrix(-0.0574904875548093, 0.998346054151921, -0.998346054151921, -0.0574904875548093, 0, 0)");
+ assert_equals(getCSSProperty('div30', 'transform'), "matrix(-0.54030230586814, -0.841470984807896, 0.841470984807896, -0.54030230586814, 0, 0)");
+ assert_equals(getCSSProperty('div32', 'transform'), getCSSProperty('div33', 'transform'));
+ assert_equals(getCSSProperty('div34', 'transform'), "matrix(-0.955728013201613, 0.294251533184956, -0.294251533184956, -0.955728013201613, 0, 0)");
+ assert_equals(getCSSProperty('div36', 'transform'), "matrix(-0.973646143183581, -0.228063999490797, 0.228063999490797, -0.973646143183581, 0, 0)");
+ assert_equals(getCSSProperty('div38', 'transform'), getCSSProperty('div39', 'transform'));
+ assert_equals(getCSSProperty('div40', 'transform'), getCSSProperty('div41', 'transform'));
+ assert_equals(getCSSProperty('div42', 'transform'), getCSSProperty('div43', 'transform'));
+ assert_equals(getCSSProperty('div44', 'transform'), getCSSProperty('div45', 'transform'));
+ assert_equals(getCSSProperty('div46', 'transform'), getCSSProperty('div47', 'transform'));
+ assert_equals(getCSSProperty('div48', 'transform'), getCSSProperty('div49', 'transform'));
+ assert_equals(getCSSProperty('div50', 'transform'), getCSSProperty('div51', 'transform'));
+ assert_equals(getCSSProperty('div52', 'transform'), getCSSProperty('div53', 'transform'));
+ assert_equals(getCSSProperty('div54', 'transform'), getCSSProperty('div55', 'transform'));
+ assert_equals(getCSSProperty('div56', 'transform'), getCSSProperty('div57', 'transform'));
+ assert_equals(getCSSProperty('div58', 'transform'), getCSSProperty('div59', 'transform'));
+ assert_equals(getCSSProperty('div60', 'transform'), getCSSProperty('div61', 'transform'));
+ assert_equals(getCSSProperty('div62', 'transform'), getCSSProperty('div63', 'transform'));
+ assert_equals(getCSSProperty('div64', 'transform'), getCSSProperty('div65', 'transform'));
+
+ // NOTE: Since there is no CSS property that uses frequency at the moment we only test the parsing.
+ assert_equals(getCSSProperty('div65', 'pitch'), null);
+ assert_equals(getCSSProperty('div66', 'pitch'), null);
+ assert_equals(getCSSProperty('div67', 'pitch'), null);
+ assert_equals(getCSSProperty('div68', 'pitch'), null);
+ assert_equals(getCSSProperty('div69', 'pitch'), null);
+ assert_equals(getCSSProperty('div70', 'pitch'), null);
+ assert_equals(getCSSProperty('div71', 'pitch'), null);
+ assert_equals(getCSSProperty('div72', 'pitch'), null);
+ assert_equals(getCSSProperty('div73', 'pitch'), null);
+
+ assert_equals(getCSSProperty('div74', '-webkit-transition-delay'), "4s");
+ assert_equals(getCSSProperty('div75', 'transform'), getCSSProperty('div76', 'transform'));
+ }, "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
+ </script>
+</body>
+</html>
« 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')

Powered by Google App Engine
This is Rietveld 408576698