[jira] [Reopened] (FLEX-35235) Support for CSS calc() function

["Harbs (JIRA)" <ji...@apache.org>]

     [ https://issues.apache.org/jira/browse/FLEX-35235?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Harbs reopened FLEX-35235:
--------------------------
      Assignee: Alex Harui

Still not fixed.

The following MXML causes an error:
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:js="library://ns.apache.org/flexjs/basic">
	<fx:Style>
        .mdl-slider__background-flex
        {
            margin: 0px;
            width: calc(100% - 12px);
        }

    </fx:Style>
    <js:initialView>
        <js:View>
            <js:Label text="Hello World" x="100" y="100"/>
        </js:View>
    </js:initialView>
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
</js:Application>

The css in a separate css file also errors.

>  Support for CSS calc() function
> --------------------------------
>
>                 Key: FLEX-35235
>                 URL: https://issues.apache.org/jira/browse/FLEX-35235
>             Project: Apache Flex
>          Issue Type: New Feature
>          Components: FlexJS
>    Affects Versions: Apache FlexJS 0.7.0
>            Reporter: OmPrakash Muppirala
>            Assignee: Alex Harui
>             Fix For: Apache FlexJS 0.8.0
>
>
> I'm trying to use the calc() function [1] in my CSS like this:
> .demo-card-wide.mdl-card {
>     width: calc((100% - 50px)/3);
> }
> I'm using the calc() function to create 3 columns of equal width regardless of browser size.
> With FlexJS, I'm seeing a compile error:
> C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml(1): col: 1 CSSTree.g: node from line 0:0 mismatched tree node: <mismatched token: [@251,1846:1860='((100%  - 50px)',<5>,59:13], resync={
>   width: calc((100%  - 50px)/3;
> }> expecting I_DECL
> <?xml version="1.0" encoding="utf-8"?>
> ^
> C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml(60): col: 14 C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml line 59:13 mismatched input '((100%  - 50px)' expecting BLOCK_END
> C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml(60): col: 31 C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml line 59:30 no viable alternative at character ')'
> Can support for calc() be added to FlexJS?  Even though it is termed an experimental feature, this has become quite common in the recent times [2]
> [1] https://developer.mozilla.org/en-US/docs/Web/CSS/calc
> [2] http://caniuse.com/#feat=calc



--
This message was sent by Atlassian JIRA
(v6.3.15#6346)