Skip to content
This repository

Added angle support for linear-gradient #119

Open
wants to merge 4 commits into from

3 participants

Martynas Barzda TJ Holowaychuk Roman Komarov
Martynas Barzda

An ex. linear-gradient(45deg, red, green, blue), linear-gradient(0rad, red, green, blue).
If gradient has angle, legacy webkit is ignored.

Martynas Barzda Added angle support
An ex. linear-gradient(45deg, red, green, blue), linear-gradient(0rad, red, green, blue).
If gradient has angle, legacy webkit is ignored.
d55b2d6
lib/nib/gradients.styl
((14 lines not shown))
123 129
 
124 130
   // legacy webkit
125  
-  end = grad-point(opposite-position(start))
126  
-  webkit-legacy = '-webkit-gradient(linear, %s, %s, %s)' % (grad-point(start) end join-stops(stops, webkit-stop))
127  
-  add-property(prop, replace(val, '__CALL__', webkit-legacy))
  131
+  if start is a 'indent'
2
TJ Holowaychuk Owner

why an indent?

Martynas Barzda
mbarzda added a note August 13, 2012

I made mistake. Should be 'ident'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
TJ Holowaychuk
Owner

needs some tests if you dont mind

Roman Komarov
kizu commented August 13, 2012

This was already done #94, so when I'll finish it there'd be the angles too. My version would be superior in a lot of ways (with tests!), the only thing left (and that is not in that pull request too) is the handling of the different gradient syntaxes — between the new and old ones.

I know that I'm a bit slow now (main work is overwhelming), but! We already use the code from #94 in a running projects, so it somewhat stable right now. But need to be adjusted according to the latest specs, as I already wrote, so wait a bit and it would be there :)

Martynas Barzda mbarzda closed this August 17, 2012
Martynas Barzda mbarzda reopened this August 17, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 4 unique commits by 1 author.

Aug 13, 2012
Martynas Barzda Added angle support
An ex. linear-gradient(45deg, red, green, blue), linear-gradient(0rad, red, green, blue).
If gradient has angle, legacy webkit is ignored.
d55b2d6
Aug 14, 2012
Martynas Barzda Updated angle support. Added += 45deg conversion for old webkit linea…
…r gradient points.
1c432f8
Martynas Barzda Updated test's index.jade 40e4c73
Aug 18, 2012
Martynas Barzda Removed box import 461b308
This page is out of date. Refresh to see the latest.
43  lib/nib/gradients.styl
... ...
@@ -1,4 +1,3 @@
1  
-
2 1
 @import 'config'
3 2
 
4 3
 /*
@@ -29,6 +28,27 @@ grad-point(pos)
29 28
     pos
30 29
 
31 30
 /*
  31
+ * Convert angle to points
  32
+ */
  33
+ 
  34
+to-points(arg)
  35
+  if arg is a 'ident'
  36
+    return arg
  37
+
  38
+  angle = unit(arg, '')
  39
+
  40
+  if unit(arg) is 'rad'
  41
+    angle = 180 * angle / PI
  42
+  if angle < 0
  43
+    angle += 360
  44
+
  45
+  if angle % 45 is 0
  46
+    angles = left, bottom left, bottom, bottom right, right, top right, top, top left
  47
+    return angles[angle/45]
  48
+  else  
  49
+    return arg
  50
+
  51
+/*
32 52
  * Implicit color stop position.
33 53
  */
34 54
 
@@ -100,6 +120,8 @@ std-stop(color, pos)
100 120
  *    background: linear-gradient(bottom, red, green 50%, blue)
101 121
  *    background: linear-gradient(bottom, red, 50% green, blue)
102 122
  *    background: linear-gradient(bottom, red, 50% green, 90% white, blue)
  123
+ *    background: linear-gradient(45deg, red, green, blue)
  124
+ *    background: linear-gradient(0rad, red, green, blue)
103 125
  * 
104 126
  */
105 127
 
@@ -107,6 +129,8 @@ linear-gradient(start, stops...)
107 129
   error('color stops required') unless length(stops)
108 130
   prop = current-property[0]
109 131
   val = current-property[1]
  132
+  has-angle = false
  133
+  start = start is 0 ? 0deg : start
110 134
 
111 135
   if start is a 'color'
112 136
     unshift(stops, start)
@@ -116,18 +140,25 @@ linear-gradient(start, stops...)
116 140
 
117 141
   // gradient image
118 142
   if start[0] is a 'unit'
119  
-    if has-canvas
  143
+    has-angle = unit(start) is 'deg' or unit(start) is 'rad'
  144
+
  145
+    if has-canvas and !has-angle
120 146
       img = linear-gradient-image(start, stops)
121 147
       add-property(prop, replace(val, '__CALL__', img))
122  
-    start = start[1]
  148
+
  149
+    if !has-angle
  150
+      start = start[1]
123 151
 
124 152
   // legacy webkit
125  
-  end = grad-point(opposite-position(start))
126  
-  webkit-legacy = '-webkit-gradient(linear, %s, %s, %s)' % (grad-point(start) end join-stops(stops, webkit-stop))
127  
-  add-property(prop, replace(val, '__CALL__', webkit-legacy))
  153
+  if to-points(start) is a 'ident'
  154
+    webkit-start = to-points(start)
  155
+    end = grad-point(opposite-position(webkit-start))
  156
+    webkit-legacy = '-webkit-gradient(linear, %s, %s, %s)' % (grad-point(webkit-start) end join-stops(stops, webkit-stop))
  157
+    add-property(prop, replace(val, '__CALL__', webkit-legacy))
128 158
 
129 159
   // vendor prefixed
130 160
   stops = join-stops(stops, std-stop)
  161
+  
131 162
   for prefix in vendor-prefixes
132 163
     unless prefix == official
133 164
       gradient = '-%s-linear-gradient(%s, %s)' % (prefix start stops)   
2  lib/nib/index.styl
... ...
@@ -1,4 +1,3 @@
1  
-
2 1
 @import 'vendor'
3 2
 @import 'text'
4 3
 @import 'reset'
@@ -7,7 +6,6 @@
7 6
 @import 'overflow'
8 7
 @import 'iconic'
9 8
 @import 'gradients'
10  
-@import 'box'
11 9
 @import 'color-image'
12 10
 @import 'border'
13 11
 @import 'image'
44  test/cases/linear-gradient.css
@@ -53,4 +53,48 @@ body {
53 53
   background: -ms-linear-gradient(top, #fff 0%, #000 100%), #fff;
54 54
   background: -o-linear-gradient(top, #fff 0%, #000 100%), #fff;
55 55
   background: linear-gradient(top, #fff 0%, #000 100%), #fff;
  56
+}
  57
+body {
  58
+  background: -webkit-gradient(linear, left bottom, right top, color-stop(0, #fff), color-stop(1, #000));
  59
+  background: -webkit-linear-gradient(45deg, #fff 0%, #000 100%);
  60
+  background: -moz-linear-gradient(45deg, #fff 0%, #000 100%);
  61
+  background: -ms-linear-gradient(45deg, #fff 0%, #000 100%);
  62
+  background: -o-linear-gradient(45deg, #fff 0%, #000 100%);
  63
+  background: linear-gradient(45deg, #fff 0%, #000 100%);
  64
+}
  65
+body {
  66
+  background: -webkit-gradient(linear, left bottom, right top, color-stop(0, #fff), color-stop(1, #000)), #fff;
  67
+  background: -webkit-linear-gradient(45deg, #fff 0%, #000 100%), #fff;
  68
+  background: -moz-linear-gradient(45deg, #fff 0%, #000 100%), #fff;
  69
+  background: -ms-linear-gradient(45deg, #fff 0%, #000 100%), #fff;
  70
+  background: -o-linear-gradient(45deg, #fff 0%, #000 100%), #fff;
  71
+  background: linear-gradient(45deg, #fff 0%, #000 100%), #fff;
  72
+}
  73
+body {
  74
+  background: -webkit-linear-gradient(118deg, #fff 0%, #000 100%);
  75
+  background: -moz-linear-gradient(118deg, #fff 0%, #000 100%);
  76
+  background: -ms-linear-gradient(118deg, #fff 0%, #000 100%);
  77
+  background: -o-linear-gradient(118deg, #fff 0%, #000 100%);
  78
+  background: linear-gradient(118deg, #fff 0%, #000 100%);
  79
+}
  80
+body {
  81
+  background: -webkit-linear-gradient(118deg, #fff 0%, #000 100%), #fff;
  82
+  background: -moz-linear-gradient(118deg, #fff 0%, #000 100%), #fff;
  83
+  background: -ms-linear-gradient(118deg, #fff 0%, #000 100%), #fff;
  84
+  background: -o-linear-gradient(118deg, #fff 0%, #000 100%), #fff;
  85
+  background: linear-gradient(118deg, #fff 0%, #000 100%), #fff;
  86
+}
  87
+body {
  88
+  background: -webkit-linear-gradient(3.1416rad, #fff 0%, #000 100%);
  89
+  background: -moz-linear-gradient(3.1416rad, #fff 0%, #000 100%);
  90
+  background: -ms-linear-gradient(3.1416rad, #fff 0%, #000 100%);
  91
+  background: -o-linear-gradient(3.1416rad, #fff 0%, #000 100%);
  92
+  background: linear-gradient(3.1416rad, #fff 0%, #000 100%);
  93
+}
  94
+body {
  95
+  background: -webkit-linear-gradient(3.1416rad, #fff 0%, #000 100%), #fff;
  96
+  background: -moz-linear-gradient(3.1416rad, #fff 0%, #000 100%), #fff;
  97
+  background: -ms-linear-gradient(3.1416rad, #fff 0%, #000 100%), #fff;
  98
+  background: -o-linear-gradient(3.1416rad, #fff 0%, #000 100%), #fff;
  99
+  background: linear-gradient(3.1416rad, #fff 0%, #000 100%), #fff;
56 100
 }
22  test/cases/linear-gradient.styl
@@ -22,4 +22,24 @@ body
22 22
   background: linear-gradient(top, white, black)
23 23
 
24 24
 body
25  
-  background: linear-gradient(top, white, black), white
  25
+  background: linear-gradient(top, white, black), white
  26
+
  27
+body
  28
+  background: linear-gradient(45deg, white, black)
  29
+  
  30
+body
  31
+  background: linear-gradient(45deg, white, black), white
  32
+
  33
+body
  34
+  background: linear-gradient(118deg, white, black)
  35
+  
  36
+body
  37
+  background: linear-gradient(118deg, white, black), white
  38
+
  39
+angle-rad = ceil( PI / .0001 ) * .0001 rad
  40
+
  41
+body
  42
+  background: linear-gradient(angle-rad, white, black)
  43
+  
  44
+body
  45
+  background: linear-gradient(angle-rad, white, black), white
9  test/gradients.styl
@@ -53,4 +53,11 @@
53 53
       background: linear-gradient-image(50px top, red, 50% green, blue)
54 54
   tr:nth-child(9)
55 55
     td:first-child
56  
-      background: linear-gradient(50px top, red, green, yellow, blue)
  56
+      background: linear-gradient(top, red, green, yellow, blue)
  57
+    td:last-child
  58
+      background: linear-gradient-image(50px top, red, green, yellow, blue)
  59
+  tr:nth-child(10)
  60
+    td:first-child
  61
+      background: linear-gradient(45deg, red, green, yellow, blue)
  62
+    td:last-child
  63
+      background: linear-gradient(50px 45deg, red, green, yellow, blue)
2  test/index.jade
@@ -16,7 +16,7 @@ html
16 16
   body
17 17
     h2 Gradients
18 18
     table#gradients
19  
-      - var n = 9
  19
+      - var n = 10
20 20
       tbody
21 21
         - while (n--)
22 22
           tr
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.