1357410 - Firefox successfully parses -webkit-calc (100vh + var (--some-variable)) but then doesn't honor it (because of how CSS Variables work)

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, enhancement)

Description

[[e-mail]]

What did you do?
================
Write follow code:

:root {
 --cv-height: 56px;
}

.memo-comp1 {
height: calc(100vh - 5em);
height: -webkit-calc(100vh - 5em - 56px);
}

.memo-comp2 {
height: calc(100vh - 5em);
height: -webkit-calc(100vh - 5em - var(--cv-height));
}

What happened?
==============
In firefox it became below:

memo-comp1 --> height: calc(100vh - 5em);
memo-comp2 --> height: -webkit-calc(100vh - 5em - var(--cv-height)); --> Height is wrong


What should have happened?
==========================
memo-comp1 --> height: calc(100vh - 5em);
memo-comp2 --> height: calc(100vh - 5em);


Is there anything else we should know?
======================================

Comment 1

[John Whitlock [:jwhitlock]]

Not an MDN bug, moving over to Firefox

I've seen people recommend the generic rule is last in the list, like:

.memo-comp1 {
  height: -webkit-calc(100vh - 5em - 56px);
  height: calc(100vh - 5em);
}

.memo-comp2 {
  height: -webkit-calc(100vh - 5em - var(--cv-height));
  height: calc(100vh - 5em);
}

Do you have different results with a different order?

Comment 2

[[e-mail]]

Attachment: sample for memo-comp1

Comment 3

[[e-mail]]

Attachment: sample for memo-comp2

Comment 4

[[e-mail]]

Thanks for the message.

I can only read and write Osaka dialect.
Please forgive me for my poor English.

I understand the order.
I thought that firefox ignored -webkit-calc().

On andoroid I thought that I could run below with chrome and firefox with the same css.
(I only want chrome to reduce urlbar size 56px)

In chrome, it is displayed by the late-order -webkit-calc() value.
In firefox,
memo-comp1 is displayed as the calculated value of calc()
Memo-comp2 seems to fail, trying to compute with -webkit-calc().

Since the only difference between memo-comp1 and memo-comp2 is use of var().
I thought there was a problem there.

Now I have the following code.

:root {
 --cv-height: 56px;
}

.memo-comp2 {
height: -webkit-calc(100vh - 5em - var(--cv-height));
height:    -moz-calc(100vh - 5em);
}


Thank you.

Comment 5

[Andrew Swan [:aswan]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/18f4ab471d1699f03d90a23bda5c94ae443b9908
Bug 1357410 follow-up sign remaining unsigned permission test xpis r=andym

Comment 6

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/18f4ab471d16

Comment 7

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

I don't believe this was the correct bug number.

Comment 8

[Daniel Holbert [:dholbert]]

(In reply to [e-mail] from comment #4)
> I thought that firefox ignored -webkit-calc().

It does ignore it.  (However, I see how the devtools in attachment 8859568 [details] make it look like we recognize it.)

If you modify your original testcase to use "foo-bar" instead of "-webkit-calc", you'll see the same results (in Firefox as well as Chrome) -- the declaration with the var() expression is accepted and overrides the earlier declaration, even though it includes something unrecognized.

This is just a quirk with how CSS Variables work.  See this specific part of the CSS Variables spec:

  # If a property contains one or more var() functions,
  # and those functions are syntactically valid, the
  # entire property’s grammar must be assumed to be
  # valid at parse time.

This is why the bogus property value is being accepted here.  So, this is not a Firefox bug.

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: testcase with bogus "foo-bar(var(...))" declaration suppressing earlier declaration

Comment 10

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #8)
> If you modify your original testcase to use "foo-bar" instead of
> "-webkit-calc", you'll see the same results (in Firefox as well as Chrome)
> -- the declaration with the var() expression is accepted and overrides the
> earlier declaration, even though it includes something unrecognized.

I've just attached a testcase to demonstrate this. In both Firefox and Chrome (and any browser with CSS Variables support), the text does not get a lime background, even though that seems like it's the last seemingly-valid declaration that would apply to that element.

This is counterintuitive, but it's just how CSS Variables work.

Comment 11

[[e-mail]]

(In reply to Daniel Holbert [:dholbert] from comment #8)
> This is just a quirk with how CSS Variables work.  See this specific part of
> the CSS Variables spec:
> 
>   # If a property contains one or more var() functions,
>   # and those functions are syntactically valid, the
>   # entire property’s grammar must be assumed to be
>   # valid at parse time.
> 
> This is why the bogus property value is being accepted here.  So, this is
> not a Firefox bug.

I understand.

regards