1 year ago · 225ed58f7e
--- a/Tests/LibWeb/Text/expected/css/css-hsl-with-calc.txt
+++ b/Tests/LibWeb/Text/expected/css/css-hsl-with-calc.txt
@@ -0,0 +1 @@
 
				+ rgb(30, 31, 34)
			
--- a/Tests/LibWeb/Text/input/css/css-hsl-with-calc.html
+++ b/Tests/LibWeb/Text/input/css/css-hsl-with-calc.html
@@ -0,0 +1,11 @@
 
				+<!doctype html><script src="../include.js"></script><style>    
			
 
				+    body {    
			
 
				+      --saturation-factor: 1;  
			
 
				+      background: hsl(225, calc(var(--saturation-factor, 1) * 6.3%), 12.5%);  
			
 
				+    }    
			
 
				+</style><body></body><script>
			
 
				+test(() => {
			
 
				+    const bodyStyle = window.getComputedStyle(document.body);
			
 
				+    println(bodyStyle.backgroundColor);
			
 
				+});
			
 
				+</script>
			
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
@@ -220,9 +220,11 @@ bool NumericCalculationNode::contains_percentage() const
 
				 CalculatedStyleValue::CalculationResult NumericCalculationNode::resolve(Optional<Length::ResolutionContext const&>, CalculatedStyleValue::PercentageBasis const& percentage_basis) const
			
 
				 {
			
 
				     if (m_value.has<Percentage>()) {
			
 
				+        // NOTE: Depending on whether percentage_basis is set, the caller of resolve() is expecting a raw percentage or
			
 
				+        //       resolved length.
			
 
				         return percentage_basis.visit(
			
 
				             [&](Empty const&) -> CalculatedStyleValue::CalculationResult {
			
 
				-                VERIFY_NOT_REACHED();
			
 
				+                return m_value;
			
 
				             },
			
 
				             [&](auto const& value) {
			
 
				                 return CalculatedStyleValue::CalculationResult(value.percentage_of(m_value.get<Percentage>()));