@@ -693,19 +693,19 @@ Percentages: the <<percentage>> type</h3>
693693 where the <<percentage>> will resolve to a <<number>> .
694694
695695 <div class="example">
696- For example, in the 'width' property <<percentage>> values are relative to the width of the containing block,
697- and therefore represent a length,
698- just as <<length>> values do:
699- if the containing block is ''1000px'' wide,
700- then ''width: 500px;'' and ''width: 50%'' have the exact same behavior.
696+ For example, the 'width' property accepts a <<length>> or a <<percentage>> ,
697+ where both represent a distance.
701698 This means that ''width: calc(500px + 50%);'' is allowed--
702- in this context it has the same behavior as ''width: calc(500px + 500px)'' ,
703- which is an easy length+length calculation.
704-
705- On the other hand, the second and third arguments of the ''hsl()'' function are bare <<percentage>> s,
706- not relative to any other numerical syntax.
707- They cannot be combined with anything in ''calc()''
708- (except themselves, in useless expressions like ''calc(10% + 20%)'' ).
699+ both values are converted to absolute lengths and added.
700+ If the containing block is ''1000px'' wide,
701+ then ''width: 50%;'' is equivalent to ''width: 500px'' ,
702+ and ''width: calc(50% + 500px)'' thus ends up equivalent to ''width: calc(500px + 500px)'' or ''width: 1000px'' .
703+
704+ On the other hand, the second and third arguments of the ''hsl()'' function
705+ can only be expressed as <<percentage>> s.
706+ Although ''calc()'' productions are allowed in their place,
707+ they can only combine percentages with themselves,
708+ as in ''calc(10% + 20%)'' .
709709 </div>
710710
711711<h3 id='dimensions'>
0 commit comments