Skip to content

Commit cf00fd7

Browse files
committed
Kicked the logical linear-gradient directions to level 4.
1 parent 6f7693a commit cf00fd7

2 files changed

Lines changed: 17 additions & 23 deletions

File tree

css3-images/Overview.html

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -598,9 +598,7 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>5.1.1. </span>
598598
&lt;color-stop>[, &lt;color-stop>]+
599599
)
600600

601-
&lt;side-or-corner> =
602-
[ [left | right] || [top | bottom] ] |
603-
[ [start | end] || [before |after] ]</code></pre>
601+
&lt;side-or-corner> = [left | right] || [top | bottom]</code></pre>
604602

605603
<p>The first argument to the function specifies the <dfn
606604
id=gradient-line>gradient-line</dfn>, which gives the gradient a direction
@@ -623,18 +621,18 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>5.1.1. </span>
623621
of the angle.
624622

625623
<p>Alternately, the direction may be specified with keywords that denote
626-
the direction, either physically or logically (that is, based on writing
627-
mode). If the argument is "to top", "to right", "to bottom", or "to left",
628-
the gradient must be rendered identically to "0deg", "90deg", "180deg", or
629-
"270deg", respectively. If the argument is "to start", "to end", "to
630-
before", or "to after", the gradient must be rendered identically to the
631-
equivalent physical keyword, based on the writing mode of the element the
632-
gradient is used in. If the argument specifies a corner to angle towards,
633-
the gradient must be rendered identically to an angle-based gradient with
634-
an angle chosen such that the endpoint of the gradient is in the same
635-
quadrant as the indicated corner, and a line drawn perpendicular to the
636-
gradient-line through the center of the box intersects the two neighboring
637-
corners.
624+
the direction. If the argument is "to top", "to right", "to bottom", or
625+
"to left", the gradient must be rendered identically to "0deg", "90deg",
626+
"180deg", or "270deg", respectively. If the argument specifies a corner to
627+
angle towards, the gradient must be rendered identically to an angle-based
628+
gradient with an angle chosen such that the endpoint of the gradient is in
629+
the same quadrant as the indicated corner, and a line drawn perpendicular
630+
to the gradient-line through the center of the box intersects the two
631+
neighboring corners.
632+
633+
<p class=note>It is expected that the next level of this module will
634+
provide the ability to define the gradient's direction relative to the
635+
current text direction and writing-mode.
638636

639637
<p>
640638

@@ -676,8 +674,6 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>5.1.1. </span>
676674
<h4 class=no-toc id=linear-gradient-examples><span class=secno>5.1.2.
677675
</span> Linear Gradient Examples</h4>
678676

679-
<p class=issue>Add some example of the logical keywords for direction.
680-
681677
<p>All of the following &lsquo;<code
682678
class=css>linear-gradient()</code>&rsquo; examples are presumed to be
683679
backgrounds applied to a box that is 200px wide and 100px tall.

css3-images/Overview.src.html

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -371,9 +371,7 @@ <h4 class='no-toc' id='linear-gradient-syntax'>
371371
&lt;color-stop>[, &lt;color-stop>]+
372372
)
373373

374-
&lt;side-or-corner> =
375-
[ [left | right] || [top | bottom] ] |
376-
[ [start | end] || [before |after] ]</code></pre>
374+
&lt;side-or-corner> = [left | right] || [top | bottom]</code></pre>
377375

378376
<p>The first argument to the function specifies the <dfn>gradient-line</dfn>,
379377
which gives the gradient a direction and determines how color-stops are
@@ -391,7 +389,9 @@ <h4 class='no-toc' id='linear-gradient-syntax'>
391389
direction. The starting-point is determined identically, except in the
392390
opposite direction of the angle.</p>
393391

394-
<p>Alternately, the direction may be specified with keywords that denote the direction, either physically or logically (that is, based on writing mode). If the argument is "to top", "to right", "to bottom", or "to left", the gradient must be rendered identically to "0deg", "90deg", "180deg", or "270deg", respectively. If the argument is "to start", "to end", "to before", or "to after", the gradient must be rendered identically to the equivalent physical keyword, based on the writing mode of the element the gradient is used in. If the argument specifies a corner to angle towards, the gradient must be rendered identically to an angle-based gradient with an angle chosen such that the endpoint of the gradient is in the same quadrant as the indicated corner, and a line drawn perpendicular to the gradient-line through the center of the box intersects the two neighboring corners.</p>
392+
<p>Alternately, the direction may be specified with keywords that denote the direction. If the argument is "to top", "to right", "to bottom", or "to left", the gradient must be rendered identically to "0deg", "90deg", "180deg", or "270deg", respectively. If the argument specifies a corner to angle towards, the gradient must be rendered identically to an angle-based gradient with an angle chosen such that the endpoint of the gradient is in the same quadrant as the indicated corner, and a line drawn perpendicular to the gradient-line through the center of the box intersects the two neighboring corners.</p>
393+
394+
<p class='note'>It is expected that the next level of this module will provide the ability to define the gradient's direction relative to the current text direction and writing-mode.</p>
395395

396396
<p>
397397

@@ -424,8 +424,6 @@ <h4 class='no-toc' id='linear-gradient-syntax'>
424424
<h4 class='no-toc' id='linear-gradient-examples'>
425425
Linear Gradient Examples</h4>
426426

427-
<p class=issue>Add some example of the logical keywords for direction.</p>
428-
429427
<p>All of the following ''linear-gradient()'' examples are presumed to be
430428
backgrounds applied to a box that is 200px wide and 100px tall.</p>
431429

0 commit comments

Comments
 (0)