From b530d56c4758242ab9d14e36274137650404a276 Mon Sep 17 00:00:00 2001
From: athenian200 <athenian200@outlook.com>
Date: Wed, 16 Sep 2020 17:34:03 -0500
Subject: [PATCH] Issue #1647 - Part 1: Implement percentage for CSS opacity
 keywords

This preliminary step allows percentages to be computed and display correctly,
but unfortunately it fails a test after changing VARIANT_HN to VARIANT_HPN because that allows values to be serialized as percentages. However, not doing this means percentages are rejected as valid values for the user to input. The way the style system is setup makes it hard to change this for opacity without changing it for everything else, especially since some code-saving speed hacks in Bug 636029 and Bug 441367 that make a lot of assumptions about this stuff very rigid.
---
 layout/style/nsCSSPropList.h           | 10 +++++-----
 layout/style/nsRuleNode.cpp            | 15 +++++++++++++++
 layout/style/test/property_database.js | 18 +++++++++---------
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/layout/style/nsCSSPropList.h b/layout/style/nsCSSPropList.h
index f62aa38272..906ed7ee0e 100644
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -1703,7 +1703,7 @@ CSS_PROP_SVG(
     FillOpacity,
     CSS_PROPERTY_PARSE_VALUE,
     "",
-    VARIANT_HN | VARIANT_OPENTYPE_SVG_KEYWORD,
+    VARIANT_HPN | VARIANT_OPENTYPE_SVG_KEYWORD,
     kContextOpacityKTable,
     offsetof(nsStyleSVG, mFillOpacity),
     eStyleAnimType_float)
@@ -1841,7 +1841,7 @@ CSS_PROP_SVGRESET(
     FloodOpacity,
     CSS_PROPERTY_PARSE_VALUE,
     "",
-    VARIANT_HN,
+    VARIANT_HPN,
     nullptr,
     offsetof(nsStyleSVGReset, mFloodOpacity),
     eStyleAnimType_float)
@@ -3070,7 +3070,7 @@ CSS_PROP_EFFECTS(
         CSS_PROPERTY_CAN_ANIMATE_ON_COMPOSITOR |
         CSS_PROPERTY_CREATES_STACKING_CONTEXT,
     "",
-    VARIANT_HN,
+    VARIANT_HPN,
     nullptr,
     offsetof(nsStyleEffects, mOpacity),
     eStyleAnimType_float)
@@ -3761,7 +3761,7 @@ CSS_PROP_SVGRESET(
     StopOpacity,
     CSS_PROPERTY_PARSE_VALUE,
     "",
-    VARIANT_HN,
+    VARIANT_HPN,
     nullptr,
     offsetof(nsStyleSVGReset, mStopOpacity),
     eStyleAnimType_float)
@@ -3836,7 +3836,7 @@ CSS_PROP_SVG(
     StrokeOpacity,
     CSS_PROPERTY_PARSE_VALUE,
     "",
-    VARIANT_HN | VARIANT_OPENTYPE_SVG_KEYWORD,
+    VARIANT_HPN | VARIANT_OPENTYPE_SVG_KEYWORD,
     kContextOpacityKTable,
     offsetof(nsStyleSVG, mStrokeOpacity),
     eStyleAnimType_float)
diff --git a/layout/style/nsRuleNode.cpp b/layout/style/nsRuleNode.cpp
index 036d97f867..3863ec2926 100644
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -1579,6 +1579,21 @@ SetFactor(const nsCSSValue& aValue, float& aField, RuleNodeCacheConditions& aCon
   case eCSSUnit_Null:
     return;
 
+  case eCSSUnit_Percent:
+    aField = aValue.GetPercentValue();
+    if (aFlags & SETFCT_POSITIVE) {
+      NS_ASSERTION(aField >= 0.0f, "negative value for positive-only property");
+      if (aField < 0.0f)
+        aField = 0.0f;
+    }
+    if (aFlags & SETFCT_OPACITY) {
+      if (aField < 0.0f)
+        aField = 0.0f;
+      if (aField > 1.0f)
+        aField = 1.0f;
+    }
+    return;
+
   case eCSSUnit_Number:
     aField = aValue.GetFloatValue();
     if (aFlags & SETFCT_POSITIVE) {
diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
index 2d6352148a..2fc50a539c 100644
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -3540,7 +3540,7 @@ var gCSSProperties = {
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "1", "17", "397.376", "3e1", "3e+1", "3e0", "3e+0", "3e-0" ],
-    other_values: [ "0", "0.4", "0.0000", "-3", "3e-1" ],
+    other_values: [ "0", "0.4", "0.0000", "-3", "3e-1" "-100%", "50%"],
     invalid_values: [ "0px", "1px" ]
   },
   "-moz-orient": {
@@ -4272,8 +4272,8 @@ var gCSSProperties = {
     domProp: "fillOpacity",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "1", "2.8", "1.000", "context-fill-opacity", "context-stroke-opacity" ],
-    other_values: [ "0", "0.3", "-7.3" ],
+    initial_values: [ "1", "2.8", "1.000", "300%", "context-fill-opacity", "context-stroke-opacity" ],
+    other_values: [ "0", "0.3", "-7.3", "-100%", "50%"],
     invalid_values: []
   },
   "fill-rule": {
@@ -4305,8 +4305,8 @@ var gCSSProperties = {
     domProp: "floodOpacity",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "1", "2.8", "1.000" ],
-    other_values: [ "0", "0.3", "-7.3" ],
+    initial_values: [ "1", "2.8", "1.000", "300%"],
+    other_values: [ "0", "0.3", "-7.3", "-100%", "50%"],
     invalid_values: []
   },
   "image-rendering": {
@@ -4380,8 +4380,8 @@ var gCSSProperties = {
     domProp: "stopOpacity",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "1", "2.8", "1.000" ],
-    other_values: [ "0", "0.3", "-7.3" ],
+    initial_values: [ "1", "2.8", "1.000", "300%" ],
+    other_values: [ "0", "0.3", "-7.3", "-100%", "50%" ],
     invalid_values: []
   },
   "stroke": {
@@ -4436,8 +4436,8 @@ var gCSSProperties = {
     domProp: "strokeOpacity",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "1", "2.8", "1.000", "context-fill-opacity", "context-stroke-opacity" ],
-    other_values: [ "0", "0.3", "-7.3" ],
+    initial_values: [ "1", "2.8", "1.000", "300%", "context-fill-opacity", "context-stroke-opacity" ],
+    other_values: [ "0", "0.3", "-7.3", "-100%", "50% ],
     invalid_values: []
   },
   "stroke-width": {