diff --git a/testing/web-platform/tests/css/css-env/env-in-custom-properties.tentative.html b/testing/web-platform/tests/css/css-env/env-in-custom-properties.tentative.html index f3a715f2a6745..98b3123d9113e 100644 --- a/testing/web-platform/tests/css/css-env/env-in-custom-properties.tentative.html +++ b/testing/web-platform/tests/css/css-env/env-in-custom-properties.tentative.html @@ -90,7 +90,18 @@ < style > -body +# +parent +{ +- +- +var1 +: +inherited +; +} +# +child { - - @@ -115,6 +126,15 @@ width ) ; +- +- +var1 +: +env +( +nonexistent +) +; } < / @@ -128,6 +148,30 @@ body > < +div +id += +" +parent +" +> +< +div +id += +" +child +" +> +< +/ +div +> +< +/ +div +> +< script > test @@ -144,9 +188,7 @@ . getComputedStyle ( -document -. -body +child ) ; assert_equals @@ -165,6 +207,64 @@ ) ; } +' +env +( +) +is +substituted +into +a +custom +property +' +) +; +test +( +( +) += +> +{ +const +style += +window +. +getComputedStyle +( +child +) +; +assert_equals +( +style +. +getPropertyValue +( +" +- +- +var1 +" +) +" +inherited +" +) +; +} +' +Substitution +of +unrecognized +env +( +) +causes +unset +' ) ; < diff --git a/testing/web-platform/tests/css/css-variables/variable-substitution-variable-declaration.html b/testing/web-platform/tests/css/css-variables/variable-substitution-variable-declaration.html new file mode 100644 index 0000000000000..ffd89f4a47523 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-substitution-variable-declaration.html @@ -0,0 +1,1424 @@ +< +! +DOCTYPE +html +> +< +html +lang += +" +en +" +> +< +head +> +< +meta +charset += +" +UTF +- +8 +" +> +< +title +> +Testing +substituting +variable +references +inside +of +variable +declerations +< +/ +title +> +< +meta +rel += +" +author +" +title += +" +Kevin +Babbitt +" +> +< +meta +rel += +" +author +" +title += +" +Greg +Whitworth +" +> +< +link +rel += +" +author +" +title += +" +Microsoft +Corporation +" +href += +" +http +: +/ +/ +microsoft +. +com +" +/ +> +< +link +rel += +" +help +" +href += +" +http +: +/ +/ +www +. +w3 +. +org +/ +TR +/ +css +- +variables +- +1 +/ +# +using +- +variables +" +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +style +> +# +target1 +{ +margin +: +var +( +- +- +var2 +) +; +- +- +var2 +: +var +( +- +- +var1 +) +10px +; +- +- +var1 +: +var +( +- +- +var0 +) +13px +17px +; +- +- +var0 +: +23px +; +} +# +target2parent +{ +- +- +var2 +: +var +( +- +- +var1 +fallback +) +; +- +- +var1 +: +var +( +- +- +var2 +fallback +) +; +} +# +target2 +{ +- +- +var1 +: +good +; +} +# +target3 +{ +- +- +var2 +: +var +( +- +- +var1 +3px +) +; +- +- +var1 +: +var +( +- +- +var0 +5px +) +; +} +# +target4 +{ +- +- +varA +: +var +( +- +- +varB +) +; +- +- +varB +: +var +( +- +- +varA +) +; +- +- +varC +: +var +( +- +- +varB +13px +) +; +} +# +target5 +{ +- +- +varA +: +var +( +- +- +varB +) +; +- +- +varB +: +var +( +- +- +varA +) +var +( +- +- +varC +) +; +- +- +varC +: +var +( +- +- +varB +13px +) +; +} +# +target6 +{ +- +- +varA +: +var +( +- +- +varB +) +; +- +- +varB +: +var +( +- +- +varA +) +var +( +- +- +varDoesNotExist +var +( +- +- +varC +) +) +; +- +- +varC +: +var +( +- +- +varB +13px +) +; +} +# +target7 +{ +- +- +varDoesExist +: +5px +; +- +- +varA +: +var +( +- +- +varB +) +; +- +- +varB +: +var +( +- +- +varA +) +var +( +- +- +varDoesExist +var +( +- +- +varC +) +) +; +- +- +varC +: +var +( +- +- +varB +13px +) +; +} +# +target8 +{ +- +- +varA +: +var +( +- +- +varA +9px +) +; +- +- +varB +: +var +( +- +- +varA +7px +) +; +} +# +target9 +{ +- +- +varA +: +good +; +- +- +varB +: +very +var +( +- +- +varA +var +( +- +- +varC +) +) +; +- +- +varC +: +var +( +- +- +varB +) +; +} +# +target10parent +{ +- +- +varA +: +good +; +- +- +varB +: +Also +good +; +- +- +varC +: +another +good +one +; +} +# +target10 +{ +- +- +varA +: +var +( +- +- +varB +) +; +- +- +varB +: +var +( +- +- +varA +) +; +- +- +varC +: +var +( +- +- +varB +) +; +} +< +/ +style +> +< +/ +head +> +< +body +> +< +div +id += +" +target1 +" +> +< +/ +div +> +< +div +id += +" +target2parent +" +> +< +div +id += +" +target2 +" +> +< +/ +div +> +< +/ +div +> +< +div +id += +" +target3 +" +> +< +/ +div +> +< +div +id += +" +target4 +" +> +< +/ +div +> +< +div +id += +" +target5 +" +> +< +/ +div +> +< +div +id += +" +target6 +" +> +< +/ +div +> +< +div +id += +" +target7 +" +> +< +/ +div +> +< +div +id += +" +target8 +" +> +< +/ +div +> +< +div +id += +" +target9 +" +> +< +/ +div +> +< +div +id += +" +target10parent +" +> +< +div +id += +" +target10 +" +> +< +/ +div +> +< +/ +div +> +< +script +type += +" +text +/ +javascript +" +> +" +use +strict +" +; +var +testcases += +[ +{ +element +: +" +target1 +" +propertyName +: +" +- +- +var2 +" +expectedPropertyValue +: +" +23px +13px +17px +10px +" +} +{ +element +: +" +target1 +" +propertyName +: +" +margin +- +top +" +expectedPropertyValue +: +" +23px +" +} +{ +element +: +" +target1 +" +propertyName +: +" +margin +- +right +" +expectedPropertyValue +: +" +13px +" +} +{ +element +: +" +target1 +" +propertyName +: +" +margin +- +bottom +" +expectedPropertyValue +: +" +17px +" +} +{ +element +: +" +target1 +" +propertyName +: +" +margin +- +left +" +expectedPropertyValue +: +" +10px +" +} +{ +element +: +" +target2parent +" +propertyName +: +" +- +- +var1 +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target2parent +" +propertyName +: +" +- +- +var2 +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target2 +" +propertyName +: +" +- +- +var1 +" +expectedPropertyValue +: +" +good +" +} +{ +element +: +" +target2 +" +propertyName +: +" +- +- +var2 +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target3 +" +propertyName +: +" +- +- +var1 +" +expectedPropertyValue +: +" +5px +" +} +{ +element +: +" +target3 +" +propertyName +: +" +- +- +var2 +" +expectedPropertyValue +: +" +5px +" +} +{ +element +: +" +target4 +" +propertyName +: +" +- +- +varA +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target4 +" +propertyName +: +" +- +- +varB +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target4 +" +propertyName +: +" +- +- +varC +" +expectedPropertyValue +: +" +13px +" +} +{ +element +: +" +target5 +" +propertyName +: +" +- +- +varA +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target5 +" +propertyName +: +" +- +- +varB +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target5 +" +propertyName +: +" +- +- +varC +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target6 +" +propertyName +: +" +- +- +varA +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target6 +" +propertyName +: +" +- +- +varB +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target6 +" +propertyName +: +" +- +- +varC +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target7 +" +propertyName +: +" +- +- +varA +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target7 +" +propertyName +: +" +- +- +varB +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target7 +" +propertyName +: +" +- +- +varC +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target8 +" +propertyName +: +" +- +- +varA +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target8 +" +propertyName +: +" +- +- +varB +" +expectedPropertyValue +: +" +7px +" +} +{ +element +: +" +target9 +" +propertyName +: +" +- +- +varA +" +expectedPropertyValue +: +" +good +" +} +{ +element +: +" +target9 +" +propertyName +: +" +- +- +varB +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target9 +" +propertyName +: +" +- +- +varC +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target10 +" +propertyName +: +" +- +- +varA +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target10 +" +propertyName +: +" +- +- +varB +" +expectedPropertyValue +: +" +" +} +{ +element +: +" +target10 +" +propertyName +: +" +- +- +varC +" +expectedPropertyValue +: +" +another +good +one +" +} +] +; +testcases +. +forEach +( +function +( +testcase +) +{ +test +( +function +( +) +{ +var +div += +document +. +getElementById +( +testcase +. +element +) +; +var +actualPropertyValue += +window +. +getComputedStyle +( +div +) +. +getPropertyValue +( +testcase +. +propertyName +) +; +assert_equals +( +actualPropertyValue +testcase +. +expectedPropertyValue +) +; +} +testcase +. +element ++ +" +" ++ +testcase +. +propertyName +) +; +} +) +; +< +/ +script +> +< +/ +body +> +< +/ +html +> diff --git a/testing/web-platform/tests/css/css-variables/variables-substitute-guaranteed-invalid.html b/testing/web-platform/tests/css/css-variables/variables-substitute-guaranteed-invalid.html new file mode 100644 index 0000000000000..3340cf0f60f0e --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variables-substitute-guaranteed-invalid.html @@ -0,0 +1,390 @@ +< +! +DOCTYPE +html +> +< +title +> +Testing +substitution +of +guaranteed +- +invalid +values +< +/ +title +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +drafts +. +csswg +. +org +/ +css +- +variables +/ +# +guaranteed +- +invalid +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +drafts +. +csswg +. +org +/ +css +- +variables +/ +# +cycles +" +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +style +> +# +target1 +{ +/ +* +Cycle +* +/ +- +- +var1 +: +var +( +- +- +var2 +) +; +- +- +var2 +: +var +( +- +- +var1 +) +; +/ +* +Reference +to +cycle +* +/ +- +- +var3 +: +var +( +- +- +var1 +) +; +/ +* +Reference +to +non +- +existent +property +* +/ +- +- +var4 +: +var +( +- +- +noexist +) +; +} +# +target1parent +{ +- +- +var3 +: +inherited +; +- +- +var4 +: +inherited +; +} +< +/ +style +> +< +div +id += +" +target1parent +" +> +< +div +id += +" +target1 +" +> +< +/ +div +> +< +/ +div +> +< +script +> +test +( +function +( +) +{ +let +cs += +getComputedStyle +( +target1 +) +; +assert_equals +( +cs +. +getPropertyValue +( +' +- +- +var1 +' +) +' +' +) +; +assert_equals +( +cs +. +getPropertyValue +( +' +- +- +var2 +' +) +' +' +) +; +} +' +Custom +properties +in +a +cycle +are +guaranteed +- +invalid +' +) +; +test +( +function +( +) +{ +let +cs += +getComputedStyle +( +target1 +) +; +assert_equals +( +cs +. +getPropertyValue +( +' +- +- +var3 +' +) +' +inherited +' +) +; +} +' +A +custom +property +referencing +a +cycle +is +treated +as +unset +' +) +; +test +( +function +( +) +{ +let +cs += +getComputedStyle +( +target1 +) +; +assert_equals +( +cs +. +getPropertyValue +( +' +- +- +var4 +' +) +' +inherited +' +) +; +} +' +A +custom +property +referencing +a +non +- +existent +variable +is +treated +as +unset +' +) +; +< +/ +script +>