OLD | NEW |
(Empty) | |
| 1 // Copyright (c) 2010 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. |
| 4 |
| 5 (function() { |
| 6 var a = 7; |
| 7 var a2 = a / 2; |
| 8 var ctx = document.getCSSCanvasContext('2d', 'triangle-filled', a2 + 2, a + 1)
; |
| 9 |
| 10 ctx.fillStyle = '#000'; |
| 11 ctx.translate(.5, .5); |
| 12 ctx.beginPath(); |
| 13 ctx.moveTo(0, 0); |
| 14 ctx.lineTo(0, a); |
| 15 ctx.lineTo(a2, a2); |
| 16 ctx.closePath(); |
| 17 ctx.fill(); |
| 18 ctx.stroke(); |
| 19 |
| 20 var ctx = document.getCSSCanvasContext('2d', 'triangle-empty', a2 + 2, a + 1); |
| 21 |
| 22 ctx.strokeStyle = '#999'; |
| 23 ctx.lineWidth = 1.2; |
| 24 ctx.translate(.5, .5); |
| 25 ctx.fillStyle = '#000'; |
| 26 ctx.beginPath(); |
| 27 |
| 28 |
| 29 ctx.moveTo(0, 0); |
| 30 ctx.lineTo(0, a); |
| 31 ctx.lineTo(a2, a2); |
| 32 ctx.closePath(); |
| 33 ctx.stroke(); |
| 34 |
| 35 var ctx = document.getCSSCanvasContext('2d', 'triangle-hover', a2 + 2 + 4, a +
1 + 4); |
| 36 |
| 37 ctx.shadowColor = 'hsl(214,91%,89%)' |
| 38 ctx.shadowBlur = 3; |
| 39 ctx.shadowOffsetX = 1; |
| 40 ctx.shadowOffsetY = 0; |
| 41 |
| 42 ctx.strokeStyle = 'hsl(214,91%,79%)'; |
| 43 ctx.lineWidth = 1.2; |
| 44 ctx.translate(.5 + 2, .5 + 2); |
| 45 ctx.fillStyle = '#000'; |
| 46 ctx.beginPath(); |
| 47 |
| 48 ctx.moveTo(0, 0); |
| 49 ctx.lineTo(0, a); |
| 50 ctx.lineTo(a2, a2); |
| 51 ctx.closePath(); |
| 52 ctx.stroke(); |
| 53 })(); |
| 54 |
| 55 // We need to generate CSS for the indentation. |
| 56 (function() { |
| 57 // We need to generat the following |
| 58 //.tree-item > * > .tree-item > .tree-row { |
| 59 // -webkit-padding-start: 20px; |
| 60 //} |
| 61 |
| 62 //.tree-item > * .tree-item > * .tree-item > * > .tree-item > .tree-row { |
| 63 // -webkit-padding-start: 60px; |
| 64 //} |
| 65 var style = document.createElement('style'); |
| 66 |
| 67 function repeat(s, n) { |
| 68 return Array(n + 1).join(s); |
| 69 } |
| 70 |
| 71 var s = ''; |
| 72 for (var i = 1; i < 10; i++) { |
| 73 s += repeat('.tree-item > * ', i) + '.tree-item > .tree-row {\n' + |
| 74 '-webkit-padding-start:' + i * 20 + 'px\n' + |
| 75 '}\n'; |
| 76 } |
| 77 style.textContent = s; |
| 78 document.documentElement.firstElementChild.appendChild(style); |
| 79 })(); |
OLD | NEW |