CSS3 calc: unprefix implementation
authormikelawther@chromium.org <mikelawther@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 21 Jan 2013 07:05:16 +0000 (07:05 +0000)
committermikelawther@chromium.org <mikelawther@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 21 Jan 2013 07:05:16 +0000 (07:05 +0000)
https://bugs.webkit.org/show_bug.cgi?id=91951

Reviewed by Ojan Vafai.

Source/WebCore:

Add support for the unprefixed 'calc()' function, while retaining support for the prefixed version.

Test: css3/calc/simple-calcs-prefixed.html

* css/CSSCalculationValue.cpp:
(WebCore::buildCssText):
(WebCore::CSSCalcValue::create):
* css/CSSParser.cpp:
(WebCore::CSSParser::isCalculation):
(WebCore::CSSParser::detectFunctionTypeToken):

LayoutTests:

Changed all -webkit-calc() occurrences to calc().
Made a copy of the simplest test file so very basic tests for the prefixed version
are retained.

* css3/calc/background-position-parsing.html:
* css3/calc/block-mask-overlay-image-outset.html:
* css3/calc/border-radius.html:
* css3/calc/border.html:
* css3/calc/box-reflect.html:
* css3/calc/calc-errors.html:
* css3/calc/color-hsl.html:
* css3/calc/color-rgb.html:
* css3/calc/css3-radial-gradients.html:
* css3/calc/cssom-expected.txt:
* css3/calc/cssom.html:
* css3/calc/font-monospace.html:
* css3/calc/font-size-fractional.html:
* css3/calc/font-size.html:
* css3/calc/font.html:
* css3/calc/getComputedStyle-margin-percentage.html:
* css3/calc/gradient-color-stops.html:
* css3/calc/img-size.html:
* css3/calc/line-height.html:
* css3/calc/margin.html:
* css3/calc/negative-padding.html:
* css3/calc/padding.html:
* css3/calc/reflection-computed-style-expected.txt:
* css3/calc/reflection-computed-style.html:
* css3/calc/regression-62276.html:
* css3/calc/simple-calcs-prefixed-expected.txt: Added.
* css3/calc/simple-calcs-prefixed.html: Copied from LayoutTests/css3/calc/simple-calcs.html.
* css3/calc/simple-calcs.html:
* css3/calc/simple-composited-mask.html:
* css3/calc/table-border-spacing.html:
* css3/calc/table-calcs.html:
* css3/calc/table-empty-cells.html:
* css3/calc/transforms-scale.html:
* css3/calc/transforms-translate.html:
* css3/calc/transition-crash.html:
* css3/calc/transition-crash2.html:
* css3/calc/transition-crash3.html:
* css3/calc/transition-crash4.html:
* css3/calc/transitions-dependent.html:
* css3/calc/transitions.html:
* css3/calc/vertical-align-expected.html:
* css3/calc/vertical-align.html:
* css3/calc/zoom-with-em.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@140300 268f45cc-cd09-0410-ab3c-d52691b4dbfc

47 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/calc/background-position-parsing.html
LayoutTests/css3/calc/block-mask-overlay-image-outset.html
LayoutTests/css3/calc/border-radius.html
LayoutTests/css3/calc/border.html
LayoutTests/css3/calc/box-reflect.html
LayoutTests/css3/calc/calc-errors.html
LayoutTests/css3/calc/color-hsl.html
LayoutTests/css3/calc/color-rgb.html
LayoutTests/css3/calc/css3-radial-gradients.html
LayoutTests/css3/calc/cssom-expected.txt
LayoutTests/css3/calc/cssom.html
LayoutTests/css3/calc/font-monospace.html
LayoutTests/css3/calc/font-size-fractional.html
LayoutTests/css3/calc/font-size.html
LayoutTests/css3/calc/font.html
LayoutTests/css3/calc/getComputedStyle-margin-percentage.html
LayoutTests/css3/calc/gradient-color-stops.html
LayoutTests/css3/calc/img-size.html
LayoutTests/css3/calc/line-height.html
LayoutTests/css3/calc/margin.html
LayoutTests/css3/calc/negative-padding.html
LayoutTests/css3/calc/padding.html
LayoutTests/css3/calc/reflection-computed-style-expected.txt
LayoutTests/css3/calc/reflection-computed-style.html
LayoutTests/css3/calc/regression-62276.html
LayoutTests/css3/calc/simple-calcs-prefixed-expected.txt [new file with mode: 0644]
LayoutTests/css3/calc/simple-calcs-prefixed.html [new file with mode: 0644]
LayoutTests/css3/calc/simple-calcs.html
LayoutTests/css3/calc/simple-composited-mask.html
LayoutTests/css3/calc/table-border-spacing.html
LayoutTests/css3/calc/table-calcs.html
LayoutTests/css3/calc/table-empty-cells.html
LayoutTests/css3/calc/transforms-scale.html
LayoutTests/css3/calc/transforms-translate.html
LayoutTests/css3/calc/transition-crash.html
LayoutTests/css3/calc/transition-crash2.html
LayoutTests/css3/calc/transition-crash3.html
LayoutTests/css3/calc/transition-crash4.html
LayoutTests/css3/calc/transitions-dependent.html
LayoutTests/css3/calc/transitions.html
LayoutTests/css3/calc/vertical-align-expected.html
LayoutTests/css3/calc/vertical-align.html
LayoutTests/css3/calc/zoom-with-em.html
Source/WebCore/ChangeLog
Source/WebCore/css/CSSCalculationValue.cpp
Source/WebCore/css/CSSParser.cpp

index 5cf9fda..97b33e7 100644 (file)
@@ -1,3 +1,58 @@
+2013-01-20  Mike Lawther  <mikelawther@chromium.org>
+
+        CSS3 calc: unprefix implementation
+        https://bugs.webkit.org/show_bug.cgi?id=91951
+
+        Reviewed by Ojan Vafai.
+
+        Changed all -webkit-calc() occurrences to calc().
+        Made a copy of the simplest test file so very basic tests for the prefixed version
+        are retained.
+
+        * css3/calc/background-position-parsing.html:
+        * css3/calc/block-mask-overlay-image-outset.html:
+        * css3/calc/border-radius.html:
+        * css3/calc/border.html:
+        * css3/calc/box-reflect.html:
+        * css3/calc/calc-errors.html:
+        * css3/calc/color-hsl.html:
+        * css3/calc/color-rgb.html:
+        * css3/calc/css3-radial-gradients.html:
+        * css3/calc/cssom-expected.txt:
+        * css3/calc/cssom.html:
+        * css3/calc/font-monospace.html:
+        * css3/calc/font-size-fractional.html:
+        * css3/calc/font-size.html:
+        * css3/calc/font.html:
+        * css3/calc/getComputedStyle-margin-percentage.html:
+        * css3/calc/gradient-color-stops.html:
+        * css3/calc/img-size.html:
+        * css3/calc/line-height.html:
+        * css3/calc/margin.html:
+        * css3/calc/negative-padding.html:
+        * css3/calc/padding.html:
+        * css3/calc/reflection-computed-style-expected.txt:
+        * css3/calc/reflection-computed-style.html:
+        * css3/calc/regression-62276.html:
+        * css3/calc/simple-calcs-prefixed-expected.txt: Added.
+        * css3/calc/simple-calcs-prefixed.html: Copied from LayoutTests/css3/calc/simple-calcs.html.
+        * css3/calc/simple-calcs.html:
+        * css3/calc/simple-composited-mask.html:
+        * css3/calc/table-border-spacing.html:
+        * css3/calc/table-calcs.html:
+        * css3/calc/table-empty-cells.html:
+        * css3/calc/transforms-scale.html:
+        * css3/calc/transforms-translate.html:
+        * css3/calc/transition-crash.html:
+        * css3/calc/transition-crash2.html:
+        * css3/calc/transition-crash3.html:
+        * css3/calc/transition-crash4.html:
+        * css3/calc/transitions-dependent.html:
+        * css3/calc/transitions.html:
+        * css3/calc/vertical-align-expected.html:
+        * css3/calc/vertical-align.html:
+        * css3/calc/zoom-with-em.html:
+
 2013-01-20  Shinya Kawanaka  <shinyak@chromium.org>
 
         Distribution state becomes inconsistent with content/shadow reprojection
index daa020b..b0548a2 100644 (file)
@@ -7,25 +7,25 @@
   <meta name="flags" content="invalid">
   <style type="text/css">
    .case { float: left; border: solid; margin: 0.2em; zoom:0.5 } /* 150 x 100 */
-   .test { background: #FFFFCC url(resources/ring.png) no-repeat; padding: -webkit-calc(16px); }
+   .test { background: #FFFFCC url(resources/ring.png) no-repeat; padding: calc(16px); }
    .control { width: 118px; height: 68px; background: url(resources/diamond.png) no-repeat; }
 
    .a .control, .b .control, .c .control, .d .control, .e .control, .f .control { background-position: 100% 100%; }
    .case.a .test { background-position: right bottom; }
    .case.b .test { background-position: bottom right; }
-   .case.c .test { background-position: -webkit-calc(100%) bottom; }
-   .case.d .test { background-position: right -webkit-calc(100%); }
-   .case.e .test { background-position: -webkit-calc(100%) -webkit-calc(58px); }
-   .case.f .test { background-position: -webkit-calc(50% + 54px) -webkit-calc(50% + 29px); }
+   .case.c .test { background-position: calc(100%) bottom; }
+   .case.d .test { background-position: right calc(100%); }
+   .case.e .test { background-position: calc(100%) calc(58px); }
+   .case.f .test { background-position: calc(50% + 54px) calc(50% + 29px); }
 
    .g .control, .h .control, .i .control, .j .control, .k .control, .l .control, .m .control { background-position: 54px 28px; }
    .case.g .test { background-position: center center; }
-   .case.h .test { background-position: -webkit-calc(50%) -webkit-calc(50%); }
-   .case.i .test { background-position: center -webkit-calc(50%); }
-   .case.j .test { background-position: -webkit-calc(50%) center; }
-   .case.k .test { background-position: -webkit-calc(50%); }
+   .case.h .test { background-position: calc(50%) calc(50%); }
+   .case.i .test { background-position: center calc(50%); }
+   .case.j .test { background-position: calc(50%) center; }
+   .case.k .test { background-position: calc(50%); }
    .case.l .test { background-position: center; }
-   .case.m .test { background-position: -webkit-calc(54px); }
+   .case.m .test { background-position: calc(54px); }
 
    .n .control, .o .control { background-position: 54px 56px; }
    .case.n .test { background-position: bottom center; }
    .r .control { background-position: top right; }
    .case.r0 .test { background-position: right top; }
    .case.r1 .test { background-position: right 0; }
-   .case.r2 .test { background-position: right -webkit-calc(0px); }
-   .case.r3 .test { background-position: right -webkit-calc(0%); }
-   .case.r4 .test { background-position: -webkit-calc(100%) top; }
-   .case.r5 .test { background-position: -webkit-calc(100%) 0; }
-   .case.r6 .test { background-position: -webkit-calc(100%) -webkit-calc(0px); }
-   .case.r7 .test { background-position: -webkit-calc(100%) -webkit-calc(0%); }
-   .case.r8 .test { background-position: -webkit-calc(108px) top; }
-   .case.r9 .test { background-position: -webkit-calc(108px) 0; }
-   .case.r10 .test { background-position: -webkit-calc(108px) -webkit-calc(0px); }
-   .case.r11 .test { background-position: -webkit-calc(108px) -webkit-calc(0%); }
+   .case.r2 .test { background-position: right calc(0px); }
+   .case.r3 .test { background-position: right calc(0%); }
+   .case.r4 .test { background-position: calc(100%) top; }
+   .case.r5 .test { background-position: calc(100%) 0; }
+   .case.r6 .test { background-position: calc(100%) calc(0px); }
+   .case.r7 .test { background-position: calc(100%) calc(0%); }
+   .case.r8 .test { background-position: calc(108px) top; }
+   .case.r9 .test { background-position: calc(108px) 0; }
+   .case.r10 .test { background-position: calc(108px) calc(0px); }
+   .case.r11 .test { background-position: calc(108px) calc(0%); }
 
    .negative .control { background-position: 0% 0%; }
    .negative3 .control { background-position: 50% 50%; } /* CSS3 background supports comma */
    .case.t1 .test { background-position: right bottom bottom; }
    .case.t2 .test { background-position: bottom right bottom; }
-   .case.t3 .test { background-position: bottom -webkit-calc(100%); }
-   .case.t4 .test { background-position: -webkit-calc(100%) right; }
-   .case.t5 .test { background-position: bottom -webkit-calc(8px); }
-   .case.t6 .test { background-position: -webkit-calc(23px) right; }
-   .case.t7 .test { background-position: center -webkit-calc(50%) center; }
-   .case.t8 .test { background-position: -webkit-calc(50%) -webkit-calc(50%) -webkit-calc(50%); }
-   .case.t9 .test { background-position: center -webkit-calc(50%) -webkit-calc(50%); }
-   .case.t10 .test { background-position: -webkit-calc(50%), -webkit-calc(100%); } /* CSS3 background supports comma */
+   .case.t3 .test { background-position: bottom calc(100%); }
+   .case.t4 .test { background-position: calc(100%) right; }
+   .case.t5 .test { background-position: bottom calc(8px); }
+   .case.t6 .test { background-position: calc(23px) right; }
+   .case.t7 .test { background-position: center calc(50%) center; }
+   .case.t8 .test { background-position: calc(50%) calc(50%) calc(50%); }
+   .case.t9 .test { background-position: center calc(50%) calc(50%); }
+   .case.t10 .test { background-position: calc(50%), calc(100%); } /* CSS3 background supports comma */
       /* This test makes sure the comma either is
            a) invalid per CSS2.1
            b) handled correctly per CSS3
          and NOT parsed as a valid separator of x and y offsets. */
-   .case.t11 .test { background-position: bottom -webkit-calc(54px); }
-   .case.t12 .test { background-position: 50 -webkit-calc(50%); }
+   .case.t11 .test { background-position: bottom calc(54px); }
+   .case.t12 .test { background-position: 50 calc(50%); }
    .case.t13 .test { background-position: bottom 100; }
    .case.t14 .test { background-position: rightbottom; }
    .case.t15 .test { background-position: 0 right; }
-   .case.t16 .test { background-position: -webkit-calc(0px) right; }
-   .case.t17 .test { background-position: -webkit-calc(0%) right; }
-   .case.t18 .test { background-position: top -webkit-calc(100%); }
-   .case.t19 .test { background-position: top -webkit-calc(108px); }
+   .case.t16 .test { background-position: calc(0px) right; }
+   .case.t17 .test { background-position: calc(0%) right; }
+   .case.t18 .test { background-position: top calc(100%); }
+   .case.t19 .test { background-position: top calc(108px); }
    .case.t20 .test { background-position: top top; }
    .case.t21 .test { background-position: left right; }
    .case.t22 .test { background-position: left left; }
index 74d5e3e..3ebda07 100644 (file)
@@ -5,7 +5,7 @@
         padding: 50px;
         color: white;
         background-color: maroon;
-        -webkit-mask-box-image: url(resources/mask.png) 75 75 75 75 / auto / -webkit-calc(100px) 0;
+        -webkit-mask-box-image: url(resources/mask.png) 75 75 75 75 / auto / calc(100px) 0;
     }
 </style>
 <div class="blockTest" style="height: 0px">
index bfa6922..8d70cde 100644 (file)
@@ -8,14 +8,14 @@ div {
     border-radius:50px;    
 }
 .pixels {
-    border-radius:-webkit-calc(50px);
+    border-radius:calc(50px);
 }
 .percent {
-    border-radius:-webkit-calc(50%);
+    border-radius:calc(50%);
 }
 .both {
     /* Note that 100% is 104px, so 25% + 25px = 51px*/
-    border-radius:-webkit-calc(25% + 25px);
+    border-radius:calc(25% + 25px);
 }
 </style>
 
index 989ca76..af45c31 100644 (file)
@@ -4,20 +4,20 @@ p {
     width:200px; height:120px;
 }
 .simple-all {
-    border: -webkit-calc(13px + 12px) solid;
+    border: calc(13px + 12px) solid;
 }
 
 .simple-left {
-    border-left: -webkit-calc(13px + 12px) solid;
+    border-left: calc(13px + 12px) solid;
 }
 .simple-right {
-    border-right: -webkit-calc(13px + 12px) solid;
+    border-right: calc(13px + 12px) solid;
 }
 .simple-top {
-    border-top: -webkit-calc(13px + 12px) solid;
+    border-top: calc(13px + 12px) solid;
 }
 .simple-bottom {
-    border-bottom: -webkit-calc(13px + 12px) solid;
+    border-bottom: calc(13px + 12px) solid;
 }
 </style>
 
index 052f748..4a6141a 100644 (file)
@@ -3,7 +3,7 @@
 #reflection { 
     width: 100px;
     height: 100px;
-    -webkit-box-reflect: below -webkit-calc(10% + 5px);
+    -webkit-box-reflect: below calc(10% + 5px);
 }
 </style>
 <img id="reflection" src="resources/ring.png"/>
index 82885f0..67dced8 100644 (file)
 <div id="test">
 
 <!-- just plain bad -->
-<div style="width: 100px; width: -webkit-calc(;">unclosed calc</div>
-<div style="width: 100px; width: -webkit-calc( flim;">unclosed calc with garbage</div>
-<div style="width: 100px; width: -webkit-calc( flim );">garbage</div>
+<div style="width: 100px; width: calc(;">unclosed calc</div>
+<div style="width: 100px; width: calc( flim;">unclosed calc with garbage</div>
+<div style="width: 100px; width: calc( flim );">garbage</div>
 
 
 <!-- zero division -->
-<div style="width: 100px; width: -webkit-calc(1ex / 0);">zero division</div>
+<div style="width: 100px; width: calc(1ex / 0);">zero division</div>
 
 <!-- wrong combination -->
-<div style="width: 100px; width: -webkit-calc(200);">non length</div>
-<div style="width: 100px; width: -webkit-calc(10 + 10px);">number + length</div>
-<div style="width: 100px; width: -webkit-calc(10px + 10);">length + number</div>
-<div style="width: 100px; width: -webkit-calc(10% + 100);">percent + number</div>
-<div style="width: 100px; width: -webkit-calc(100 + 10%);">number + percent</div>
+<div style="width: 100px; width: calc(200);">non length</div>
+<div style="width: 100px; width: calc(10 + 10px);">number + length</div>
+<div style="width: 100px; width: calc(10px + 10);">length + number</div>
+<div style="width: 100px; width: calc(10% + 100);">percent + number</div>
+<div style="width: 100px; width: calc(100 + 10%);">number + percent</div>
 
-<div style="width: 100px; width: -webkit-calc(300px - 100);">length - number</div>
-<div style="width: 100px; width: -webkit-calc(300 - 100px);">number - length</div>
-<div style="width: 100px; width: -webkit-calc(100% - 10);">percent - number</div>
-<div style="width: 100px; width: -webkit-calc(100 - 10%);">number - percent</div>
+<div style="width: 100px; width: calc(300px - 100);">length - number</div>
+<div style="width: 100px; width: calc(300 - 100px);">number - length</div>
+<div style="width: 100px; width: calc(100% - 10);">percent - number</div>
+<div style="width: 100px; width: calc(100 - 10%);">number - percent</div>
 
-<div style="width: 100px; width: -webkit-calc(10px*100px);">length * length</div>
-<div style="width: 100px; width: -webkit-calc(10px*100%);">length * percent</div>
-<div style="width: 100px; width: -webkit-calc(10%*100px);">percent * length</div>
-<div style="width: 100px; width: -webkit-calc(10%*100%);">percent * percent</div>
+<div style="width: 100px; width: calc(10px*100px);">length * length</div>
+<div style="width: 100px; width: calc(10px*100%);">length * percent</div>
+<div style="width: 100px; width: calc(10%*100px);">percent * length</div>
+<div style="width: 100px; width: calc(10%*100%);">percent * percent</div>
 
-<div style="width: 100px; width: -webkit-calc(100/10px);">number / length</div>
-<div style="width: 100px; width: -webkit-calc(100/10%);">number / percent</div>
-<div style="width: 100px; width: -webkit-calc(100px/10px);">length / length</div>
-<div style="width: 100px; width: -webkit-calc(100px/10%);">length / percent</div>
-<div style="width: 100px; width: -webkit-calc(100%/10px);">percent / length</div>
-<div style="width: 100px; width: -webkit-calc(100%/10%);">percent / percent</div>
+<div style="width: 100px; width: calc(100/10px);">number / length</div>
+<div style="width: 100px; width: calc(100/10%);">number / percent</div>
+<div style="width: 100px; width: calc(100px/10px);">length / length</div>
+<div style="width: 100px; width: calc(100px/10%);">length / percent</div>
+<div style="width: 100px; width: calc(100%/10px);">percent / length</div>
+<div style="width: 100px; width: calc(100%/10%);">percent / percent</div>
 
-<div style="width: 100px; width: -webkit-calc(100 mod 10px);">number mod length</div>
-<div style="width: 100px; width: -webkit-calc(100 mod 10%);">number mod percent</div>
-<div style="width: 100px; width: -webkit-calc(100px mod 10px);">length mod length</div>
-<div style="width: 100px; width: -webkit-calc(100px mod 10%);">length mod percent</div>
-<div style="width: 100px; width: -webkit-calc(100% mod 10px);">percent mod length</div>
-<div style="width: 100px; width: -webkit-calc(100% mod 10%);">percent mod percent</div>
+<div style="width: 100px; width: calc(100 mod 10px);">number mod length</div>
+<div style="width: 100px; width: calc(100 mod 10%);">number mod percent</div>
+<div style="width: 100px; width: calc(100px mod 10px);">length mod length</div>
+<div style="width: 100px; width: calc(100px mod 10%);">length mod percent</div>
+<div style="width: 100px; width: calc(100% mod 10px);">percent mod length</div>
+<div style="width: 100px; width: calc(100% mod 10%);">percent mod percent</div>
 
 <!-- mod, +, - require whitespaces around the operator -->
-<div style="width: 100px; width: -webkit-calc(1 mod10 * 200px);">mod10 </div>
-<div style="width: 100px; width: -webkit-calc(1mod 10 * 200px);">1mod</div>
-<div style="width: 100px; width: -webkit-calc(70px+40px);">70px+40px no whitespace around + </div>
-<div style="width: 100px; width: -webkit-calc(70px +40px);">70px +40px no whitespace on right of +</div>
-<div style="width: 100px; width: -webkit-calc(70px+ 40px);">70px+ 40px no whitespace on left of +</div>
-<div style="width: 100px; width: -webkit-calc(70px+-40px);">70px+-40px no whitespace around + </div>
-<div style="width: 100px; width: -webkit-calc(70px-40px);">70px-40px no whitespace around - </div>
-<div style="width: 100px; width: -webkit-calc(70px -40px);">70px -40px no whitespace on right of -</div>
-<div style="width: 100px; width: -webkit-calc(70px- 40px);">70px- 40px no whitespace on left of -</div>
-<div style="width: 100px; width: -webkit-calc(70px-+40px);">70px-+40px no whitespace around - </div>
+<div style="width: 100px; width: calc(1 mod10 * 200px);">mod10 </div>
+<div style="width: 100px; width: calc(1mod 10 * 200px);">1mod</div>
+<div style="width: 100px; width: calc(70px+40px);">70px+40px no whitespace around + </div>
+<div style="width: 100px; width: calc(70px +40px);">70px +40px no whitespace on right of +</div>
+<div style="width: 100px; width: calc(70px+ 40px);">70px+ 40px no whitespace on left of +</div>
+<div style="width: 100px; width: calc(70px+-40px);">70px+-40px no whitespace around + </div>
+<div style="width: 100px; width: calc(70px-40px);">70px-40px no whitespace around - </div>
+<div style="width: 100px; width: calc(70px -40px);">70px -40px no whitespace on right of -</div>
+<div style="width: 100px; width: calc(70px- 40px);">70px- 40px no whitespace on left of -</div>
+<div style="width: 100px; width: calc(70px-+40px);">70px-+40px no whitespace around - </div>
 
 <!-- too many nests should be rejected to avoid stack overflow -->
-<div style="width: 100px; width: -webkit-calc(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((200px)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))));">too many nests</div>
+<div style="width: 100px; width: calc(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((200px)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))));">too many nests</div>
  
 <!-- invalid formulas -->
-<div style="width: 100px; width: -webkit-calc(200px*);">end with operator</div>
-<div style="width: 100px; width: -webkit-calc(+ +200px);">start with operator</div>
-<div style="width: 100px; width: -webkit-calc();">no expressions</div>
-<div style="width: 100px; width: -webkit-calc(100px + + +100px);">too many pluses</div>
-<div style="width: 100px; width: -webkit-calc(200px 200px);">no binary operator</div>
-<div style="width: 100px; width: -webkit-calc(100px * * 2);">two binary operators</div>
-<div style="width: 100px; width: -webkit-calc(100px @ 2);">invalid operator '@'</div>
-<div style="width: 100px; width: -webkit-calc(1 flim 2);">invalid operator 'flim'</div>
-<div style="width: 100px; width: -webkit-calc(100px @ 2);">invalid operator '@'</div>
-<div style="width: 100px; width: -webkit-calc(1 flim 2);">invalid operator 'flim'</div>
-<div style="width: 100px; width: -webkit-calc(1 flim (2));">invalid operator 'flim' with parens</div>
+<div style="width: 100px; width: calc(200px*);">end with operator</div>
+<div style="width: 100px; width: calc(+ +200px);">start with operator</div>
+<div style="width: 100px; width: calc();">no expressions</div>
+<div style="width: 100px; width: calc(100px + + +100px);">too many pluses</div>
+<div style="width: 100px; width: calc(200px 200px);">no binary operator</div>
+<div style="width: 100px; width: calc(100px * * 2);">two binary operators</div>
+<div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div>
+<div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div>
+<div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div>
+<div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div>
+<div style="width: 100px; width: calc(1 flim (2));">invalid operator 'flim' with parens</div>
  
  
 </div>
index c14c2c1..6853d99 100644 (file)
@@ -2,10 +2,10 @@
 <script src="../../fast/js/resources/js-test-pre.js"></script>
 <style>
     #controlsimple { color: hsl(120,75%,50%); }
-    #simple        { color: hsl(-webkit-calc(120),-webkit-calc(75%),-webkit-calc(50%)); }
+    #simple        { color: hsl(calc(120),calc(75%),calc(50%)); }
 
     #controlalpha { color: hsla(120,75%,50%,0.7); }
-    #alpha        { color: hsla(-webkit-calc(120),-webkit-calc(75%),-webkit-calc(50%), -webkit-calc(0.7)); }
+    #alpha        { color: hsla(calc(120),calc(75%),calc(50%), calc(0.7)); }
 </style>
 <div id="test-container">
     <hr/>
index 9013f7c..6fdde68 100644 (file)
@@ -2,18 +2,18 @@
 <script src="../../fast/js/resources/js-test-pre.js"></script>
 <style>
     #controlsimple { color: rgb(10,180,30); }
-    #simple        { color: rgb(-webkit-calc(10),-webkit-calc(18 * 10),-webkit-calc(30)); }
+    #simple        { color: rgb(calc(10),calc(18 * 10),calc(30)); }
     #controlpercentsimple { color: rgb(10%,95%,30%); }
-    #percentsimple        { color: rgb(-webkit-calc(2% + 8%),-webkit-calc(95%),-webkit-calc(3% * 10)); }
+    #percentsimple        { color: rgb(calc(2% + 8%),calc(95%),calc(3% * 10)); }
     #controlpercentnumber { color: rgb(26,240,80); }
-    #percentnumber        { color: rgb(-webkit-calc(2% + 8% + 1),-webkit-calc(95% - 3),-webkit-calc(3% * 10 + 4)); }
+    #percentnumber        { color: rgb(calc(2% + 8% + 1),calc(95% - 3),calc(3% * 10 + 4)); }
 
     #controlalpha { color: rgba(10,180,30,0.7); }
-    #alpha        { color: rgba(-webkit-calc(10),-webkit-calc(180),-webkit-calc(30), -webkit-calc(0.35 * 2)); }
+    #alpha        { color: rgba(calc(10),calc(180),calc(30), calc(0.35 * 2)); }
     #controlpercentalpha { color: rgba(10%,95%,30%,0.7); }
-    #percentalpha        { color: rgba(-webkit-calc(2 * 5%),-webkit-calc(100% - 5%),-webkit-calc(30%),-webkit-calc(0.2 * 3 + 0.1)); }
+    #percentalpha        { color: rgba(calc(2 * 5%),calc(100% - 5%),calc(30%),calc(0.2 * 3 + 0.1)); }
     #controlpercentnumberalpha { color: rgba(26,240,80, 0.5); }
-    #percentnumberalpha        { color: rgba(-webkit-calc(2% + 8% + 1),-webkit-calc(95% - 3),-webkit-calc(3% * 10 + 4), -webkit-calc(1.0 / 2)); }
+    #percentnumberalpha        { color: rgba(calc(2% + 8% + 1),calc(95% - 3),calc(3% * 10 + 4), calc(1.0 / 2)); }
 </style>
 <div id="test-container">
     <hr/>
index 406010b..98e620c 100644 (file)
@@ -9,42 +9,42 @@
 }
 
 .gradient1 {
-    background-image: -webkit-radial-gradient(-webkit-calc(50px) -webkit-calc(50%), circle closest-side, white, black);
-    background-image: -moz-radial-gradient(-webkit-calc(50px) -webkit-calc(50%), circle closest-side, white, black);
+    background-image: -webkit-radial-gradient(calc(50px) calc(50%), circle closest-side, white, black);
+    background-image: -moz-radial-gradient(calc(50px) calc(50%), circle closest-side, white, black);
 }
 
 .gradient2 {
-    background-image: -webkit-radial-gradient(-webkit-calc(20px) -webkit-calc(50px), ellipse closest-corner, white, black);
-    background-image: -moz-radial-gradient(-webkit-calc(20px) -webkit-calc(50px), ellipse closest-corner, white, black);
+    background-image: -webkit-radial-gradient(calc(20px) calc(50px), ellipse closest-corner, white, black);
+    background-image: -moz-radial-gradient(calc(20px) calc(50px), ellipse closest-corner, white, black);
 }
 
 .gradient3 {
-    background-image: -webkit-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, white, black);
-    background-image: -moz-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, white, black);
+    background-image: -webkit-radial-gradient(calc(20%) calc(20%), circle closest-corner, white, black);
+    background-image: -moz-radial-gradient(calc(20%) calc(20%), circle closest-corner, white, black);
 }
 
 .gradient4 {
-    background-image: -webkit-radial-gradient(left, circle cover, red, green -webkit-calc(30%), blue);
-    background-image: -moz-radial-gradient(left, circle cover, red, green -webkit-calc(30%), blue);
+    background-image: -webkit-radial-gradient(left, circle cover, red, green calc(30%), blue);
+    background-image: -moz-radial-gradient(left, circle cover, red, green calc(30%), blue);
 }
 
 .gradient5 {
-    background-image: -webkit-radial-gradient(ellipse cover, red, green -webkit-calc(80px), blue);
-    background-image: -moz-radial-gradient(ellipse cover, red, green -webkit-calc(80px), blue);
+    background-image: -webkit-radial-gradient(ellipse cover, red, green calc(80px), blue);
+    background-image: -moz-radial-gradient(ellipse cover, red, green calc(80px), blue);
 }
 
 .gradient6 {
-    background-image: -webkit-radial-gradient(circle cover, red -webkit-calc(20%), green, blue -webkit-calc(150%));
-    background-image: -moz-radial-gradient(circle cover, red -webkit-calc(20%), green, blue -webkit-calc(150%));
+    background-image: -webkit-radial-gradient(circle cover, red calc(20%), green, blue calc(150%));
+    background-image: -moz-radial-gradient(circle cover, red calc(20%), green, blue calc(150%));
 }
 
 .gradient7 {
-    background-image: -webkit-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, red -50%, green, blue -webkit-calc(150%));
-    background-image: -moz-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, red -50%, green, blue -webkit-calc(150%));
+    background-image: -webkit-radial-gradient(calc(20%) calc(20%), circle closest-corner, red -50%, green, blue calc(150%));
+    background-image: -moz-radial-gradient(calc(20%) calc(20%), circle closest-corner, red -50%, green, blue calc(150%));
 }
 
 .gradient8 {
-    background-image: -webkit-radial-gradient(circle closest-side, red, green -webkit-calc(50% + 10px), blue);
+    background-image: -webkit-radial-gradient(circle closest-side, red, green calc(50% + 10px), blue);
     background-image: -moz-radial-gradient(circle closest-side, red, green -moz-calc(50% + 10px), blue);
 }
 </style>
index f618429..d5f543c 100644 (file)
@@ -1,15 +1,15 @@
 This tests calc() and the CSSOM
 
-10px => -webkit-calc(10px)
-10px + 15px => -webkit-calc(10px + 15px)
-100% => -webkit-calc(100%)
-100% - 10px => -webkit-calc(100% - 10px)
-10px + 10px * 5 => -webkit-calc(10px + (10px * 5))
-5px + 2em + 6in => -webkit-calc((5px + 2em) + 6in)
-100% - 10px / 2 => -webkit-calc(100% - (10px / 2))
-1px + 2em - 3rem + 4in => -webkit-calc(((1px + 2em) - 3rem) + 4in)
-100px * (1 + 2 * 3 - 4 / 5) => -webkit-calc(100px * ((1 + (2 * 3)) - (4 / 5)))
-(100px) + 200px => -webkit-calc(100px + 200px)
-((((((((((100px)))))))))) => -webkit-calc(100px)
-flimstix => -webkit-calc(100px)
+10px => calc(10px)
+10px + 15px => calc(10px + 15px)
+100% => calc(100%)
+100% - 10px => calc(100% - 10px)
+10px + 10px * 5 => calc(10px + (10px * 5))
+5px + 2em + 6in => calc((5px + 2em) + 6in)
+100% - 10px / 2 => calc(100% - (10px / 2))
+1px + 2em - 3rem + 4in => calc(((1px + 2em) - 3rem) + 4in)
+100px * (1 + 2 * 3 - 4 / 5) => calc(100px * ((1 + (2 * 3)) - (4 / 5)))
+(100px) + 200px => calc(100px + 200px)
+((((((((((100px)))))))))) => calc(100px)
+flimstix => calc(100px)
 
index acf53c1..419e0ea 100644 (file)
@@ -23,7 +23,7 @@ var dummy = document.getElementById("dummy");
 for (var i = 0; i < tests.length; ++i) {
     var expression = tests[i];
     dummy.style.width = 'calc(' + expression + ')';
-    dummy.style.width = '-webkit-calc(' + expression + ')';
+    dummy.style.width = 'calc(' + expression + ')';
     dummy.style.width = '-moz-calc(' + expression + ')';
     results.innerHTML += expression + " => " + dummy.style.width + "<br>";
 }
index e979a8a..2f112bd 100644 (file)
@@ -1,7 +1,7 @@
 <style> 
 body     {font-size: 12px;}
 #control {font: italic small-caps 900 150%/2em monospace;}
-#calc    {font: italic small-caps 900 -webkit-calc(150%)/2em monospace;}
+#calc    {font: italic small-caps 900 calc(150%)/2em monospace;}
 </style>
 
 <div>
index ac52380..f15c252 100644 (file)
@@ -3,7 +3,7 @@
 <style> 
 body         {font-size: 12px;}
 #control     {font: normal 400 80%/2.5 sans-serif;}
-#calc-reduce {font: normal 400 -webkit-calc(80%)/2.5 sans-serif;}
+#calc-reduce {font: normal 400 calc(80%)/2.5 sans-serif;}
 </style>
 
 <div id="test-container">
index 4366bc4..a95b804 100644 (file)
@@ -2,8 +2,8 @@
 <script src="../../fast/js/resources/js-test-pre.js"></script>
 <style> 
 #control {font-size: 200%;}
-#calc-percent {font-size: -webkit-calc(200%);}
-#calc-percent-pixels {font-size: -webkit-calc(150% + 10px);}
+#calc-percent {font-size: calc(200%);}
+#calc-percent-pixels {font-size: calc(150% + 10px);}
 </style>
 
 <div id="test-container" style="font-size: 20px;">
index bbf752e..3d655cd 100644 (file)
@@ -2,10 +2,10 @@
 <script src="../../fast/js/resources/js-test-pre.js"></script>
 <style> 
 #control             {font: 1.5em/63px sans-serif;}
-#calc-size           {font: -webkit-calc(1.5em)/63px sans-serif}
-#calc-height         {font: 1.5em/-webkit-calc(126px / 2) sans-serif}
-#calc-both           {font: -webkit-calc(1.5em)/-webkit-calc(63px) sans-serif}
-#calc-percent-size   {font: -webkit-calc(100% + 0.5em)/63px sans-serif}
+#calc-size           {font: calc(1.5em)/63px sans-serif}
+#calc-height         {font: 1.5em/calc(126px / 2) sans-serif}
+#calc-both           {font: calc(1.5em)/calc(63px) sans-serif}
+#calc-percent-size   {font: calc(100% + 0.5em)/63px sans-serif}
 </style>
 
 <div id="test-container">
index 71b1adb..191e6fb 100644 (file)
@@ -8,10 +8,10 @@
     margin-bottom: 69%;
 }
 #calc { 
-    margin-left: -webkit-calc(33%);
-    margin-top: -webkit-calc(10%);
-    margin-right: -webkit-calc(45%);
-    margin-bottom: -webkit-calc(69%);
+    margin-left: calc(33%);
+    margin-top: calc(10%);
+    margin-right: calc(45%);
+    margin-bottom: calc(69%);
 }
 </style>
 <div id="control"></div>
index 66d4c45..07f85cb 100644 (file)
@@ -9,33 +9,33 @@
 }
 
 .linear1 {
-    background-image: -webkit-linear-gradient(left, red -webkit-calc(25%), green -webkit-calc(50%), blue -webkit-calc(75%));
-    background-image: -moz-linear-gradient(left, red -webkit-calc(25%), green -webkit-calc(50%), blue -webkit-calc(75%));
+    background-image: -webkit-linear-gradient(left, red calc(25%), green calc(50%), blue calc(75%));
+    background-image: -moz-linear-gradient(left, red calc(25%), green calc(50%), blue calc(75%));
 }
 
 .linear2 {
-    /* Green should get shifted to -webkit-calc(50%) */
-    background-image: -webkit-linear-gradient(left, red -webkit-calc(50%), green -webkit-calc(30%), blue -webkit-calc(90%));
-    background-image: -moz-linear-gradient(left, red -webkit-calc(50%), green -webkit-calc(30%), blue -webkit-calc(90%));
+    /* Green should get shifted to calc(50%) */
+    background-image: -webkit-linear-gradient(left, red calc(50%), green calc(30%), blue calc(90%));
+    background-image: -moz-linear-gradient(left, red calc(50%), green calc(30%), blue calc(90%));
 }
 
 .linear3 {
-    background-image: -webkit-linear-gradient(red -webkit-calc(-50%), green, blue, green, blue -webkit-calc(150%));
-    background-image: -moz-linear-gradient(red -webkit-calc(-50%), green, blue, green, blue -webkit-calc(150%));
+    background-image: -webkit-linear-gradient(red calc(-50%), green, blue, green, blue calc(150%));
+    background-image: -moz-linear-gradient(red calc(-50%), green, blue, green, blue calc(150%));
 }
 
 .linear4 {
-    background-image: -webkit-linear-gradient(left, red, green -webkit-calc(100px), blue);
-    background-image: -moz-linear-gradient(left, red, green -webkit-calc(100px), blue);
+    background-image: -webkit-linear-gradient(left, red, green calc(100px), blue);
+    background-image: -moz-linear-gradient(left, red, green calc(100px), blue);
 }
 
 .linear5 {
-    background-image: -webkit-linear-gradient(left, red, green -webkit-calc(120%), blue);
-    background-image: -moz-linear-gradient(left, red, green -webkit-calc(120%), blue);
+    background-image: -webkit-linear-gradient(left, red, green calc(120%), blue);
+    background-image: -moz-linear-gradient(left, red, green calc(120%), blue);
 }
 
 .linear6 {
-    background-image: -webkit-linear-gradient(left, red, green -webkit-calc(50% + 20px), blue);
+    background-image: -webkit-linear-gradient(left, red, green calc(50% + 20px), blue);
     background-image: -moz-linear-gradient(left, red, green -moz-calc(50% + 20px), blue);
 }
 </style>
index 9d53345..c8ab978 100644 (file)
@@ -1,9 +1,9 @@
 <style>
     img      { margin-top: 10px;}
     .control { width: 50%; }
-    .pixels  { width: -webkit-calc(100px); }
-    .percent { width: -webkit-calc(50%); }
-    .both    { width: -webkit-calc(25% + 50px); }
+    .pixels  { width: calc(100px); }
+    .percent { width: calc(50%); }
+    .both    { width: calc(25% + 50px); }
 </style>
 
 The images below must appear identical.
index 3dc3528..bd75be0 100644 (file)
@@ -3,8 +3,8 @@
 <style> 
     span { font-size: 16px; }
     #control { line-height: 200%; }
-    #calc-percent { line-height: -webkit-calc(100% * 2); }
-    #calc-percent-pixels { line-height: -webkit-calc(100% + 16px); }
+    #calc-percent { line-height: calc(100% * 2); }
+    #calc-percent-pixels { line-height: calc(100% + 16px); }
 </style>
 <div id="test-container">
     <span id="control">The line height of these lines should be identical</span><hr/>
index 40d48d7..14030ca 100644 (file)
@@ -3,16 +3,16 @@
 <style>
     div { display: inline-block; }
     p { width: 200px; height: 120px; margin: 0px; }
-    #simple-all { margin: -webkit-calc(13px + 12px); }
-    #simple-left { margin-left: -webkit-calc(13px + 12px); }
-    #simple-right { margin-right: -webkit-calc(13px + 12px); }
-    #simple-top { margin-top: -webkit-calc(13px + 12px); }
-    #simple-bottom { margin-bottom: -webkit-calc(13px + 12px); }
-    #percent-all { margin: -webkit-calc(10% - 5px); }
-    #percent-left { margin-left: -webkit-calc(10% - 5px); }
-    #percent-right { margin-right: -webkit-calc(10% - 5px); }
-    #percent-top { margin-top: -webkit-calc(10% - 5px); }
-    #percent-bottom { margin-bottom: -webkit-calc(10% - 5px); }
+    #simple-all { margin: calc(13px + 12px); }
+    #simple-left { margin-left: calc(13px + 12px); }
+    #simple-right { margin-right: calc(13px + 12px); }
+    #simple-top { margin-top: calc(13px + 12px); }
+    #simple-bottom { margin-bottom: calc(13px + 12px); }
+    #percent-all { margin: calc(10% - 5px); }
+    #percent-left { margin-left: calc(10% - 5px); }
+    #percent-right { margin-right: calc(10% - 5px); }
+    #percent-top { margin-top: calc(10% - 5px); }
+    #percent-bottom { margin-bottom: calc(10% - 5px); }
 </style>
 
 <div id="test-container">
index 075e828..b058ca0 100644 (file)
@@ -2,8 +2,8 @@
 <style>
     p { width:200px; height:120px; background-color: lightgreen; }
     .control        { padding: -100px; }
-    .simple-px      { padding: -webkit-calc(100px - 200px); }
-    .simple-percent { padding: -webkit-calc(50% - 60%); }
+    .simple-px      { padding: calc(100px - 200px); }
+    .simple-percent { padding: calc(50% - 60%); }
 </style>
 
 <div style="background-color: yellow;">
index 59478ea..fd7bbee 100644 (file)
@@ -1,16 +1,16 @@
 <!DOCTYPE HTML>
 <style>
     p { width:200px; height:120px; }
-    .simple-all     { padding: -webkit-calc(13px + 12px); }
-    .simple-left    { padding-left: -webkit-calc(13px + 12px); }
-    .simple-right   { padding-right: -webkit-calc(13px + 12px); }
-    .simple-top     { padding-top: -webkit-calc(13px + 12px); }
-    .simple-bottom  { padding-bottom: -webkit-calc(13px + 12px); }
-    .percent-all    { padding: -webkit-calc(10% - 5px); }
-    .percent-left   { padding-left: -webkit-calc(10% - 5px); }
-    .percent-right  { padding-right: -webkit-calc(10% - 5px); }
-    .percent-top    { padding-top: -webkit-calc(10% - 5px); }
-    .percent-bottom { padding-bottom: -webkit-calc(10% - 5px); }
+    .simple-all     { padding: calc(13px + 12px); }
+    .simple-left    { padding-left: calc(13px + 12px); }
+    .simple-right   { padding-right: calc(13px + 12px); }
+    .simple-top     { padding-top: calc(13px + 12px); }
+    .simple-bottom  { padding-bottom: calc(13px + 12px); }
+    .percent-all    { padding: calc(10% - 5px); }
+    .percent-left   { padding-left: calc(10% - 5px); }
+    .percent-right  { padding-right: calc(10% - 5px); }
+    .percent-top    { padding-top: calc(10% - 5px); }
+    .percent-bottom { padding-bottom: calc(10% - 5px); }
 </style>
 
 <p class="simple-all">This element should have an overall padding of 25 pixels.</p>
index b94ab26..862a7d5 100644 (file)
@@ -1,11 +1,11 @@
 Test calling getPropertyValue on computed styles for -webkit-border-image property.
 
--webkit-box-reflect: right -webkit-calc(50%);
+-webkit-box-reflect: right calc(50%);
   -webkit-box-reflect
     getPropertyValue:    right 50% none
     getPropertyCSSValue: [object CSSValue]
 
--webkit-box-reflect: below -webkit-calc(5px) -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch;
+-webkit-box-reflect: below calc(5px) -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch;
   -webkit-box-reflect
     getPropertyValue:    below 5px -webkit-gradient(linear, 0 0, 0 0) 25 fill / auto / 0px stretch
     getPropertyCSSValue: [object CSSValue]
index bf07969..e3b6d37 100644 (file)
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <style>
     div { width: 0px; height: 0px }
-    #reflectionOffset    { -webkit-box-reflect: right -webkit-calc(50%) }
-    #reflectionMask      { -webkit-box-reflect: below -webkit-calc(5px) -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch; }
+    #reflectionOffset    { -webkit-box-reflect: right calc(50%) }
+    #reflectionMask      { -webkit-box-reflect: below calc(5px) -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch; }
 </style>
 <body>
     <p>Test calling getPropertyValue on computed styles for -webkit-border-image property.</p>
@@ -34,8 +34,8 @@
 
     if (window.testRunner)
         testRunner.dumpAsText();
-    test('reflectionOffset', 'right -webkit-calc(50%)');
+    test('reflectionOffset', 'right calc(50%)');
     log('');
-    test('reflectionMask', 'below -webkit-calc(5px) -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch');
+    test('reflectionMask', 'below calc(5px) -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch');
 </script>
 
index d65f870..6f9b741 100644 (file)
@@ -1,6 +1,6 @@
 <p>The test passes if it does not crash</p>
 
-<a style="-webkit-box-reflect:above 1px -webkit-calc(1)"></a>
+<a style="-webkit-box-reflect:above 1px calc(1)"></a>
 <a style="-webkit-box-reflect:above 1px -webkit-min(1)"></a>
 <a style="-webkit-box-reflect:above 1px -webkit-max(1)"></a>
     
diff --git a/LayoutTests/css3/calc/simple-calcs-prefixed-expected.txt b/LayoutTests/css3/calc/simple-calcs-prefixed-expected.txt
new file mode 100644 (file)
index 0000000..8117675
--- /dev/null
@@ -0,0 +1,48 @@
+This file tests legacy support for the -webkit prefixed version of calc (ie -webkit-calc()).
+
+All boxes below should be 100px * 100px and green.
+
+control => PASS
+50px + 50px => PASS
+150px - 50px => PASS
+50px + 50px (2 spaces around operator) => PASS
+150px - 50px (2 spaces around operator) => PASS
+50px*2 => PASS
+50px *2 => PASS
+50px* 2 => PASS
+200px/2 => PASS
+200px /2 => PASS
+200px/ 2 => PASS
+50px*(2) => PASS
+50px *(2) => PASS
+50px* (2) => PASS
+50px*(1 + 1) => PASS
+50px*(12 - 10) => PASS
+50px*(10 / 5) => PASS
+10px* (5 * 2) => PASS
+50px + 10px * 5 (operation order) => PASS
+100%/2 (where 100% is 200px) => PASS
+100% + -100px (where 100% is 200px) => PASS
+80% - 60px (where 100% is 200px) => PASS
+300px - 100% (where 100% is 200px) => PASS
+-100px + 100% (where 100% is 200px) => PASS
+20% + 30% (where 100% is 200px) => PASS
+80% - 30% (where 100% is 200px) => PASS
+10% * 5 (where 100% is 200px) => PASS
+5 * 10% (where 100% is 200px) => PASS
+(100px) => PASS
+(50px + 50px) => PASS
+(50px) + 50px => PASS
+50px + (50px) => PASS
+50px + 50px => PASS
+50px + 25px * 2 => PASS
+(25px + 25px) * 2 => PASS
+2 * 50px => PASS
+2 * 100px / 2 => PASS
+(1em - 1em) + 100px => PASS
+50px + +50px => PASS
+-50px + 150px => PASS
+-50px - -150px => PASS
+(((((((100px))))))) => PASS
+100px => PASS
+100% * 2 => PASS
diff --git a/LayoutTests/css3/calc/simple-calcs-prefixed.html b/LayoutTests/css3/calc/simple-calcs-prefixed.html
new file mode 100644 (file)
index 0000000..335e3ca
--- /dev/null
@@ -0,0 +1,121 @@
+<!DOCTYPE HTML>\r
+<style>\r
+.width-test {\r
+    height: 100px;\r
+    width: 256px;\r
+    background-color: red;\r
+}\r
+\r
+.height-test {\r
+    width: 100px;\r
+    height: 50px;\r
+    background-color: red;\r
+}\r
+</style>\r
+\r
+<p>\r
+    This file tests legacy support for the -webkit prefixed version of calc (ie -webkit-calc()).\r
+</p>\r
+<p>\r
+  All boxes below should be 100px * 100px and green.\r
+</p>\r
+\r
+<div id="test">\r
+<div style="width:100px; height:100px;">control</div>\r
+<div class="width-test" style="width: -webkit-calc(50px + 50px);">50px + 50px</div>\r
+<div class="width-test" style="width: -webkit-calc(150px - 50px);">150px - 50px</div>\r
+<div class="width-test" style="width: -webkit-calc(50px  +  50px);">50px  +  50px (2 spaces around operator)</div>\r
+<div class="width-test" style="width: -webkit-calc(150px  -  50px);">150px  - 50px (2 spaces around operator)</div>\r
+<div class="width-test" style="width: -webkit-calc(50px*2);">50px*2</div>\r
+<div class="width-test" style="width: -webkit-calc(50px *2);">50px *2</div>\r
+<div class="width-test" style="width: -webkit-calc(50px* 2);">50px* 2</div>\r
+<div class="width-test" style="width: -webkit-calc(200px/2);">200px/2</div>\r
+<div class="width-test" style="width: -webkit-calc(200px /2);">200px /2</div>\r
+<div class="width-test" style="width: -webkit-calc(200px/ 2);">200px/ 2</div>\r
+<div class="width-test" style="width: -webkit-calc(50px*(2));">50px*(2)</div>\r
+<div class="width-test" style="width: -webkit-calc(50px *(2));">50px *(2)</div>\r
+<div class="width-test" style="width: -webkit-calc(50px* (2));">50px* (2)</div>\r
+<div class="width-test" style="width: -webkit-calc(50px*(1 + 1));">50px*(1 + 1)</div>\r
+<div class="width-test" style="width: -webkit-calc(50px*(12 - 10));">50px*(12 - 10)</div>\r
+<div class="width-test" style="width: -webkit-calc(50px*(10 / 5));">50px*(10 / 5)</div>\r
+<div class="width-test" style="width: -webkit-calc(10px* (5 * 2));">10px* (5 * 2)</div>\r
+<div class="width-test" style="width: -webkit-calc(50px + 10px * 5);">50px + 10px * 5 (operation order)</div>\r
+<div style="width: 200px; background-color: white;" class="wrapper">\r
+    <div class="width-test" style="width: -webkit-calc(100%/2);">100%/2 (where 100% is 200px)</div>\r
+</div>\r
+<div style="width: 200px; background-color: white;" class="wrapper">\r
+    <div class="width-test" style="width: -webkit-calc(100% + -100px);">100% + -100px (where 100% is 200px)</div>\r
+</div>\r
+<div style="width: 200px; background-color: white;" class="wrapper">\r
+    <div class="width-test" style="width: -webkit-calc(80% - 60px);">80% - 60px (where 100% is 200px)</div>\r
+</div>\r
+<div style="width: 200px; background-color: white;" class="wrapper">\r
+    <div class="width-test" style="width: -webkit-calc(300px - 100%);">300px - 100% (where 100% is 200px)</div>\r
+</div>\r
+<div style="width: 200px; background-color: white;" class="wrapper">\r
+    <div class="width-test" style="width: -webkit-calc(-100px + 100%);">-100px + 100% (where 100% is 200px)</div>\r
+</div>\r
+<div style="width: 200px; background-color: white;" class="wrapper">\r
+    <div class="width-test" style="width: -webkit-calc(20% + 30%);">20% + 30% (where 100% is 200px)</div>\r
+</div>\r
+<div style="width: 200px; background-color: white;" class="wrapper">\r
+    <div class="width-test" style="width: -webkit-calc(80% - 30%);">80% - 30% (where 100% is 200px)</div>\r
+</div>\r
+<div style="width: 200px; background-color: white;" class="wrapper">\r
+    <div class="width-test" style="width: -webkit-calc(10% * 5);">10% * 5 (where 100% is 200px)</div>\r
+</div>\r
+<div style="width: 200px; background-color: white;" class="wrapper">\r
+    <div class="width-test" style="width: -webkit-calc(5 * 10%);">5 * 10% (where 100% is 200px)</div>\r
+</div>\r
+<div class="width-test" style="width: -webkit-calc((100px));">(100px)</div>\r
+<div class="width-test" style="width: -webkit-calc((50px + 50px));">(50px + 50px)</div>\r
+<div class="width-test" style="width: -webkit-calc((50px) + 50px);">(50px) + 50px</div>\r
+<div class="width-test" style="width: -webkit-calc(50px + (50px));">50px + (50px)</div>\r
+<div class="width-test" style="width: -webkit-calc( 50px +  50px );"> 50px +  50px </div>\r
+<div class="width-test" style="width: -webkit-calc( 50px + 25px * 2 );"> 50px + 25px * 2 </div>\r
+<div class="width-test" style="width: -webkit-calc( (25px + 25px) * 2 );"> (25px + 25px) * 2 </div>\r
+<div class="width-test" style="width: -webkit-calc(2 * 50px);">2 * 50px</div>\r
+<div class="width-test" style="width: -webkit-calc(2 * 100px / 2);">2 * 100px / 2</div>\r
+<div class="width-test" style="width: -webkit-calc((1em - 1em) + 100px);">(1em - 1em) + 100px</div>\r
+<div class="width-test" style="width: -webkit-calc(50px +  +50px);">50px +  +50px</div>\r
+<div class="width-test" style="width: -webkit-calc(-50px + 150px);">-50px + 150px</div>\r
+<div class="width-test" style="width: -webkit-calc(-50px - -150px);">-50px - -150px</div>\r
+<div class="width-test" style="width: -webkit-calc((((((((100px))))))));">(((((((100px)))))))</div>\r
+<div class="height-test" style="height: -webkit-calc(100px);">100px</div>\r
+<div style="height: 50px; background-color: white;" class="wrapper">\r
+  <div class="height-test" style="height: -webkit-calc(100% * 2);">100% * 2</div>\r
+</div>\r
+</div>\r
+\r
+<script>\r
+if (window.testRunner)\r
+    testRunner.dumpAsText();\r
+\r
+zoomLevels = [1, 1.2, 2];\r
+var test = document.getElementById("test");\r
+for (var child = test.firstChild; child; child = child.nextSibling) {\r
+    var element = child;\r
+    if (element.className == "wrapper") {\r
+        element = element.firstChild;\r
+        while (element.tagName != "DIV") element = element.nextSibling;\r
+    }\r
+\r
+    var error = [];\r
+    for (var z = 0; z < zoomLevels.length; z++) {\r
+        var zoom = zoomLevels[z];\r
+        document.body.style.zoom = zoom;\r
+        var width = element.offsetWidth;\r
+        if (width != 100)\r
+            error.push("@zoom=" + zoom + " expected width of 100, but was " + width);\r
+        var height = element.offsetHeight;\r
+        if (height != 100)\r
+            error.push("@zoom=" + zoom + " expected height of 100, but was " + height);\r
+    }\r
+    if (error == "") {\r
+        element.style.backgroundColor = "green";\r
+        element.innerHTML += " => PASS";\r
+    } else\r
+        element.innerHTML += " => FAIL: " + error.join("; ");\r
+}\r
+document.body.style.zoom = 1;\r
+</script>\r
index 0efa278..6e842f3 100644 (file)
 \r
 <div id="test">\r
 <div style="width:100px; height:100px;">control</div>\r
-<div class="width-test" style="width: -webkit-calc(50px + 50px);">50px + 50px</div>\r
-<div class="width-test" style="width: -webkit-calc(150px - 50px);">150px - 50px</div>\r
-<div class="width-test" style="width: -webkit-calc(50px  +  50px);">50px  +  50px (2 spaces around operator)</div>\r
-<div class="width-test" style="width: -webkit-calc(150px  -  50px);">150px  - 50px (2 spaces around operator)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*2);">50px*2</div>\r
-<div class="width-test" style="width: -webkit-calc(50px *2);">50px *2</div>\r
-<div class="width-test" style="width: -webkit-calc(50px* 2);">50px* 2</div>\r
-<div class="width-test" style="width: -webkit-calc(200px/2);">200px/2</div>\r
-<div class="width-test" style="width: -webkit-calc(200px /2);">200px /2</div>\r
-<div class="width-test" style="width: -webkit-calc(200px/ 2);">200px/ 2</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*(2));">50px*(2)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px *(2));">50px *(2)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px* (2));">50px* (2)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*(1 + 1));">50px*(1 + 1)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*(12 - 10));">50px*(12 - 10)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px*(10 / 5));">50px*(10 / 5)</div>\r
-<div class="width-test" style="width: -webkit-calc(10px* (5 * 2));">10px* (5 * 2)</div>\r
-<div class="width-test" style="width: -webkit-calc(50px + 10px * 5);">50px + 10px * 5 (operation order)</div>\r
+<div class="width-test" style="width: calc(50px + 50px);">50px + 50px</div>\r
+<div class="width-test" style="width: calc(150px - 50px);">150px - 50px</div>\r
+<div class="width-test" style="width: calc(50px  +  50px);">50px  +  50px (2 spaces around operator)</div>\r
+<div class="width-test" style="width: calc(150px  -  50px);">150px  - 50px (2 spaces around operator)</div>\r
+<div class="width-test" style="width: calc(50px*2);">50px*2</div>\r
+<div class="width-test" style="width: calc(50px *2);">50px *2</div>\r
+<div class="width-test" style="width: calc(50px* 2);">50px* 2</div>\r
+<div class="width-test" style="width: calc(200px/2);">200px/2</div>\r
+<div class="width-test" style="width: calc(200px /2);">200px /2</div>\r
+<div class="width-test" style="width: calc(200px/ 2);">200px/ 2</div>\r
+<div class="width-test" style="width: calc(50px*(2));">50px*(2)</div>\r
+<div class="width-test" style="width: calc(50px *(2));">50px *(2)</div>\r
+<div class="width-test" style="width: calc(50px* (2));">50px* (2)</div>\r
+<div class="width-test" style="width: calc(50px*(1 + 1));">50px*(1 + 1)</div>\r
+<div class="width-test" style="width: calc(50px*(12 - 10));">50px*(12 - 10)</div>\r
+<div class="width-test" style="width: calc(50px*(10 / 5));">50px*(10 / 5)</div>\r
+<div class="width-test" style="width: calc(10px* (5 * 2));">10px* (5 * 2)</div>\r
+<div class="width-test" style="width: calc(50px + 10px * 5);">50px + 10px * 5 (operation order)</div>\r
 <div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(100%/2);">100%/2 (where 100% is 200px)</div>\r
+    <div class="width-test" style="width: calc(100%/2);">100%/2 (where 100% is 200px)</div>\r
 </div>\r
 <div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(100% + -100px);">100% + -100px (where 100% is 200px)</div>\r
+    <div class="width-test" style="width: calc(100% + -100px);">100% + -100px (where 100% is 200px)</div>\r
 </div>\r
 <div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(80% - 60px);">80% - 60px (where 100% is 200px)</div>\r
+    <div class="width-test" style="width: calc(80% - 60px);">80% - 60px (where 100% is 200px)</div>\r
 </div>\r
 <div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(300px - 100%);">300px - 100% (where 100% is 200px)</div>\r
+    <div class="width-test" style="width: calc(300px - 100%);">300px - 100% (where 100% is 200px)</div>\r
 </div>\r
 <div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(-100px + 100%);">-100px + 100% (where 100% is 200px)</div>\r
+    <div class="width-test" style="width: calc(-100px + 100%);">-100px + 100% (where 100% is 200px)</div>\r
 </div>\r
 <div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(20% + 30%);">20% + 30% (where 100% is 200px)</div>\r
+    <div class="width-test" style="width: calc(20% + 30%);">20% + 30% (where 100% is 200px)</div>\r
 </div>\r
 <div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(80% - 30%);">80% - 30% (where 100% is 200px)</div>\r
+    <div class="width-test" style="width: calc(80% - 30%);">80% - 30% (where 100% is 200px)</div>\r
 </div>\r
 <div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(10% * 5);">10% * 5 (where 100% is 200px)</div>\r
+    <div class="width-test" style="width: calc(10% * 5);">10% * 5 (where 100% is 200px)</div>\r
 </div>\r
 <div style="width: 200px; background-color: white;" class="wrapper">\r
-    <div class="width-test" style="width: -webkit-calc(5 * 10%);">5 * 10% (where 100% is 200px)</div>\r
+    <div class="width-test" style="width: calc(5 * 10%);">5 * 10% (where 100% is 200px)</div>\r
 </div>\r
-<div class="width-test" style="width: -webkit-calc((100px));">(100px)</div>\r
-<div class="width-test" style="width: -webkit-calc((50px + 50px));">(50px + 50px)</div>\r
-<div class="width-test" style="width: -webkit-calc((50px) + 50px);">(50px) + 50px</div>\r
-<div class="width-test" style="width: -webkit-calc(50px + (50px));">50px + (50px)</div>\r
-<div class="width-test" style="width: -webkit-calc( 50px +  50px );"> 50px +  50px </div>\r
-<div class="width-test" style="width: -webkit-calc( 50px + 25px * 2 );"> 50px + 25px * 2 </div>\r
-<div class="width-test" style="width: -webkit-calc( (25px + 25px) * 2 );"> (25px + 25px) * 2 </div>\r
-<div class="width-test" style="width: -webkit-calc(2 * 50px);">2 * 50px</div>\r
-<div class="width-test" style="width: -webkit-calc(2 * 100px / 2);">2 * 100px / 2</div>\r
-<div class="width-test" style="width: -webkit-calc((1em - 1em) + 100px);">(1em - 1em) + 100px</div>\r
-<div class="width-test" style="width: -webkit-calc(50px +  +50px);">50px +  +50px</div>\r
-<div class="width-test" style="width: -webkit-calc(-50px + 150px);">-50px + 150px</div>\r
-<div class="width-test" style="width: -webkit-calc(-50px - -150px);">-50px - -150px</div>\r
-<div class="width-test" style="width: -webkit-calc((((((((100px))))))));">(((((((100px)))))))</div>\r
-<div class="height-test" style="height: -webkit-calc(100px);">100px</div>\r
+<div class="width-test" style="width: calc((100px));">(100px)</div>\r
+<div class="width-test" style="width: calc((50px + 50px));">(50px + 50px)</div>\r
+<div class="width-test" style="width: calc((50px) + 50px);">(50px) + 50px</div>\r
+<div class="width-test" style="width: calc(50px + (50px));">50px + (50px)</div>\r
+<div class="width-test" style="width: calc( 50px +  50px );"> 50px +  50px </div>\r
+<div class="width-test" style="width: calc( 50px + 25px * 2 );"> 50px + 25px * 2 </div>\r
+<div class="width-test" style="width: calc( (25px + 25px) * 2 );"> (25px + 25px) * 2 </div>\r
+<div class="width-test" style="width: calc(2 * 50px);">2 * 50px</div>\r
+<div class="width-test" style="width: calc(2 * 100px / 2);">2 * 100px / 2</div>\r
+<div class="width-test" style="width: calc((1em - 1em) + 100px);">(1em - 1em) + 100px</div>\r
+<div class="width-test" style="width: calc(50px +  +50px);">50px +  +50px</div>\r
+<div class="width-test" style="width: calc(-50px + 150px);">-50px + 150px</div>\r
+<div class="width-test" style="width: calc(-50px - -150px);">-50px - -150px</div>\r
+<div class="width-test" style="width: calc((((((((100px))))))));">(((((((100px)))))))</div>\r
+<div class="height-test" style="height: calc(100px);">100px</div>\r
 <div style="height: 50px; background-color: white;" class="wrapper">\r
-  <div class="height-test" style="height: -webkit-calc(100% * 2);">100% * 2</div>\r
+  <div class="height-test" style="height: calc(100% * 2);">100% * 2</div>\r
 </div>\r
 </div>\r
 \r
index 834bfd7..bed7051 100644 (file)
     #container .masked-px {
         -webkit-mask-image: url(resources/alpha-gradient.png);
         -webkit-mask-repeat: repeat;
-        -webkit-mask-size: -webkit-calc(50px);
+        -webkit-mask-size: calc(50px);
     }
 
     #container .masked-percent {
         -webkit-mask-image: url(resources/alpha-gradient.png);
         -webkit-mask-repeat: repeat;
-        -webkit-mask-size: -webkit-calc(25%);
+        -webkit-mask-size: calc(25%);
     }
 
     #container .masked-percent-px {
         -webkit-mask-image: url(resources/alpha-gradient.png);
         -webkit-mask-repeat: repeat;
-        -webkit-mask-size: -webkit-calc(10% + 30px);
+        -webkit-mask-size: calc(10% + 30px);
     }
 </style>
 <p>Testing masks on compositing layers.</p>
index cff1bd5..3574b8e 100644 (file)
@@ -9,7 +9,7 @@
         border: 1px solid black 
     }
     table { 
-        border-spacing: -webkit-calc(10px * 2 + 5px); 
+        border-spacing: calc(10px * 2 + 5px); 
         border: 3px solid black; 
     }
 </style>
index c6f9b5f..7da6259 100644 (file)
 </style>
 <div id="test">
     <table><tr><td class="width-test" style="width: 100px;">control width:100px</td></tr></table>
-    <table><tr><td class="width-test" style="width: -webkit-calc(100px);">simple 100px</td></tr></table>
-    <table><tr><td class="width-test" style="width: -webkit-calc(25px * 4);">25px * 4</td></tr></table>
+    <table><tr><td class="width-test" style="width: calc(100px);">simple 100px</td></tr></table>
+    <table><tr><td class="width-test" style="width: calc(25px * 4);">25px * 4</td></tr></table>
     <table><tr><td class="height-test" style="height: 100px;">control height:100px</td></tr></table>
-    <table><tr><td class="height-test" style="height: -webkit-calc(100px);">simple 100px</td></tr></table>
-    <table><tr><td class="height-test" style="height: -webkit-calc(25px * 4);">25px * 4</td></tr></table>
+    <table><tr><td class="height-test" style="height: calc(100px);">simple 100px</td></tr></table>
+    <table><tr><td class="height-test" style="height: calc(25px * 4);">25px * 4</td></tr></table>
     <div style="width:400px;">
       <table><tr><td class="width-percent-test" style="width: 25%;">control width:25%</td><td class="dummy"/></tr></table>
-      <table><tr><td class="width-percent-test" style="width: -webkit-calc(25%);">-webkit-calc(25%)</td><td class="dummy"/></tr></table>
-      <table><tr><td class="width-percent-test" style="width: -webkit-calc(10% * 2 + 5%);">-webkit-calc(10% * 2 + 5%)</td><td class="dummy"/></tr></table>
+      <table><tr><td class="width-percent-test" style="width: calc(25%);">simple calc(25%)</td><td class="dummy"/></tr></table>
+      <table><tr><td class="width-percent-test" style="width: calc(10% * 2 + 5%);">calc(10% * 2 + 5%)</td><td class="dummy"/></tr></table>
     </div>
     <div style="height: 400px">
       <table style="height: 25%"><tr><td class="height-percent-test">control height:25%</td></tr></table>
     </div>
     <div style="height: 400px">
-      <table style="height: -webkit-calc(25%);"><tr><td class="height-percent-test">simple 25%</td></tr></table>
+      <table style="height: calc(25%);"><tr><td class="height-percent-test">simple calc(25%)</td></tr></table>
     </div>
     <div style="height: 400px">
-      <table style="height: -webkit-calc(10% * 2 + 5%);"><tr><td class="height-percent-test">10% * 2 + 5%</td></tr></table>
+      <table style="height: calc(10% * 2 + 5%);"><tr><td class="height-percent-test">calc(10% * 2 + 5%)</td></tr></table>
     </div>
 </div>
 <script>
index bc45ec8..259f8ea 100644 (file)
@@ -4,14 +4,14 @@
         border-spacing: 0px;
         width: 100%;
     }
-    .percent { width:-webkit-calc(50%); }
-    .fixed   { width:-webkit-calc(400px); }
-    .cell1   { height:-webkit-calc(25px); background-color: aqua }
-    .border  { border: -webkit-calc(2px) solid green } 
-    .padding { padding: -webkit-calc(2px) } 
-    .margin  { margin: -webkit-calc(2px) } 
+    .percent { width:calc(50%); }
+    .fixed   { width:calc(400px); }
+    .cell1   { height:calc(25px); background-color: aqua }
+    .border  { border: calc(2px) solid green } 
+    .padding { padding: calc(2px) } 
+    .margin  { margin: calc(2px) } 
     .pre     { white-space: pre }
-    table    { border: -webkit-calc(2px) solid black }
+    table    { border: calc(2px) solid black }
 </style>
 <body leftmargin="0" topmargin="0">
     <table>
index 56938cc..00febb4 100644 (file)
@@ -8,10 +8,10 @@
   }\r
 \r
   #scalex {\r
-    -webkit-transform: scalex(-webkit-calc(3 / 2));\r
+    -webkit-transform: scalex(calc(3 / 2));\r
   }\r
   #scaley {\r
-    -webkit-transform: scaley(-webkit-calc(1 - 0.25));\r
+    -webkit-transform: scaley(calc(1 - 0.25));\r
   }\r
 </style>\r
 <div id="scalex">scale x</div>\r
index e542468..ba99461 100644 (file)
@@ -8,13 +8,13 @@
   }\r
 \r
   #translatex {\r
-    -webkit-transform: translatex(-webkit-calc(50% + 10px));\r
+    -webkit-transform: translatex(calc(50% + 10px));\r
   }\r
   #translatey {\r
-    -webkit-transform: translatey(-webkit-calc(40% - 5px));\r
+    -webkit-transform: translatey(calc(40% - 5px));\r
   }\r
   #translatez {\r
-    -webkit-transform: perspective(-webkit-calc(100px * 5)) translatez(-webkit-calc(10px + 90px));\r
+    -webkit-transform: perspective(calc(100px * 5)) translatez(calc(10px + 90px));\r
   }\r
 </style>\r
 <div id="translatex">translate x</div>\r
index 8d8ef3e..9aa3ebb 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <style>
 .transition { 
-    height: -webkit-calc(100% - 10px); 
+    height: calc(100% - 10px); 
     -webkit-transition: height 50ms; 
 }
 .flim + .sibling { 
index 80531b6..e3f03ae 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 This tests transitioning of elements containing a calc expression. The test passes if it does not crash.
 <div>
-    <div style="width: -webkit-calc(-100px + 100%);"></div>
+    <div style="width: calc(-100px + 100%);"></div>
 </div>
 <script>
     if (window.testRunner) {
index 3719b2a..cc2c926 100644 (file)
@@ -4,7 +4,7 @@
         -webkit-transition: width 30s; 
     }
     .test:nth-child(2n) { 
-        width: -webkit-calc(-8em + 59%);
+        width: calc(-8em + 59%);
     }
 </style>
 
index 0a2067d..115771b 100644 (file)
@@ -4,7 +4,7 @@
         -webkit-transition: height 1s; 
     }
     .test:nth-child(2n) { 
-        height: -webkit-calc(45em - 81%);
+        height: calc(45em - 81%);
     }
 </style>
 
index 8ab5b62..71ee4ff 100644 (file)
 }
 
 #inner {
-    width: -webkit-calc(50% + 10px);
+    width: calc(50% + 10px);
 }
 
 #innerTransition {
-    width: -webkit-calc(10% + 10px);
+    width: calc(10% + 10px);
 }
 
 #innerTransition.go {
-    width: -webkit-calc(100% - 10px);
+    width: calc(100% - 10px);
 }
 
 </style>
index 4cbe5b2..433b67f 100644 (file)
@@ -8,7 +8,7 @@
 }
 
 #startCalcEndCalc, #startCalcEndPx, #startCalcEndPercent {
-    width: -webkit-calc(10% + 50px);
+    width: calc(10% + 50px);
     width: -moz-calc(10% + 50px);
 }
 
@@ -21,7 +21,7 @@
 }
 
 #startCalcEndCalc.go, #startPxEndCalc.go, #startPercentEndCalc.go {
-    width: -webkit-calc(100% - 100px);
+    width: calc(100% - 100px);
     width: -moz-calc(100% - 100px);
 }
 
index b5b9c12..56f6282 100644 (file)
@@ -2,7 +2,7 @@
 <style>
 .aligntest {
     line-height: 16px;
-    vertical-align: -webkit-calc(9px);
+    vertical-align: calc(9px);
 }
 </style>
 <hr/>
index 5dfde6c..2ec6f44 100644 (file)
@@ -2,7 +2,7 @@
 <style>
 .aligntest {
     line-height: 16px;
-    vertical-align: -webkit-calc(25% + 5px);
+    vertical-align: calc(25% + 5px);
 }
 </style>
 <hr/>
index 797a574..9408aff 100644 (file)
@@ -3,7 +3,7 @@
 <style>
   .test { display: height: 10px; background: #ddf; font: 20px/1 Ahem; }
   #nocalc { width: 310px; }
-  #calc { width: -webkit-calc(15em + 10px); width: -moz-calc(15em + 10px); width: calc(15em + 10px); }
+  #calc { width: calc(15em + 10px); width: -moz-calc(15em + 10px); width: calc(15em + 10px); }
 </style>
 <div id="nocalc" class="test"></div>
 <div id="calc" class="test"></div>
index cb7c4a2..64bb3ac 100644 (file)
@@ -1,3 +1,21 @@
+2013-01-20  Mike Lawther  <mikelawther@chromium.org>
+
+        CSS3 calc: unprefix implementation
+        https://bugs.webkit.org/show_bug.cgi?id=91951
+
+        Reviewed by Ojan Vafai.
+
+        Add support for the unprefixed 'calc()' function, while retaining support for the prefixed version.
+
+        Test: css3/calc/simple-calcs-prefixed.html
+
+        * css/CSSCalculationValue.cpp:
+        (WebCore::buildCssText):
+        (WebCore::CSSCalcValue::create):
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::isCalculation):
+        (WebCore::CSSParser::detectFunctionTypeToken):
+
 2013-01-20  Shinya Kawanaka  <shinyak@chromium.org>
 
         Distribution state becomes inconsistent with content/shadow reprojection
index 1c158cc..e90a7d0 100644 (file)
@@ -80,7 +80,7 @@ static CalculationCategory unitCategory(CSSPrimitiveValue::UnitTypes type)
 static String buildCssText(const String& expression)
 {
     StringBuilder result;
-    result.append("-webkit-calc");
+    result.append("calc");
     bool expressionHasSingleTerm = expression[0] != '(';
     if (expressionHasSingleTerm)
         result.append('(');
@@ -530,7 +530,7 @@ PassRefPtr<CSSCalcValue> CSSCalcValue::create(CSSParserString name, CSSParserVal
     CSSCalcExpressionNodeParser parser;    
     RefPtr<CSSCalcExpressionNode> expression;
     
-    if (equalIgnoringCase(name, "-webkit-calc("))
+    if (equalIgnoringCase(name, "calc(") || equalIgnoringCase(name, "-webkit-calc("))
         expression = parser.parseCalc(parserValueList);    
     // FIXME calc (http://webkit.org/b/16662) Add parsing for min and max here
 
index 8ec14b1..592b467 100644 (file)
@@ -5850,7 +5850,8 @@ inline double CSSParser::parsedDouble(CSSParserValue *v, ReleaseParsedCalcValueC
 bool CSSParser::isCalculation(CSSParserValue* value) 
 {
     return (value->unit == CSSParserValue::Function) 
-        && (equalIgnoringCase(value->function->name, "-webkit-calc(")
+        && (equalIgnoringCase(value->function->name, "calc(")
+            || equalIgnoringCase(value->function->name, "-webkit-calc(")
             || equalIgnoringCase(value->function->name, "-webkit-min(")
             || equalIgnoringCase(value->function->name, "-webkit-max("));
 }
@@ -9709,6 +9710,13 @@ inline bool CSSParser::detectFunctionTypeToken(int length)
 #endif
         return false;
 
+    case 4:
+        if (isEqualToCSSIdentifier(name, "calc")) {
+            m_token = CALCFUNCTION;
+            return true;
+        }
+        return false;
+
     case 9:
         if (isEqualToCSSIdentifier(name, "nth-child")) {
             m_parsingMode = NthChildMode;