├── .gitignore
├── CONTRIBUTING
├── Gruntfile.js
├── LICENSE.MD
├── NOTICE.txt
├── README.md
├── demos
    ├── circles.png
    ├── green-tea.html
    ├── green-tea.jpg
    ├── polygon-demo.html
    ├── self-intersecting-polygon.html
    └── simple-shape-outsides.html
├── dev
    ├── cla-form-thanks.html
    ├── cla-form.html
    ├── css
    │   ├── bootstrap-responsive.css
    │   ├── bootstrap-responsive.min.css
    │   ├── bootstrap.css
    │   ├── bootstrap.min.css
    │   └── cla.css
    ├── img
    │   ├── glyphicons-halflings-white.png
    │   └── glyphicons-halflings.png
    └── js
    │   └── bootstrap.min.js
├── package.json
├── shapes-polyfill.js
├── shapes-polyfill.min.js
├── src
    ├── metrics.js
    ├── polygon.js
    ├── raster.js
    ├── rect.js
    ├── shape-info.js
    ├── shape-polyfill.js
    ├── shape-value.js
    └── style-polyfill.js
└── tests
    ├── metrics-tests.html
    ├── metrics-tests.js
    ├── polygon-editor-code.js
    ├── polygon-editor.html
    ├── polygon-tests.html
    ├── polygon-tests.js
    ├── raster-tests.html
    ├── raster-tests.js
    ├── rect-tests.html
    ├── rect-tests.js
    ├── resources
        ├── assimetric-star.png
        ├── bottom-based-triangle.png
        ├── bottom-left-triangle.png
        ├── bottom-right-triangle.png
        ├── half-rectangle-20.png
        ├── half-rectangle-50.png
        ├── half-rectangle-70.png
        ├── half-rectangle.png
        ├── left-based-triangle.png
        ├── no-outside-alpha.png
        ├── right-based-triangle.png
        ├── top-based-triangle.png
        ├── top-left-triangle.png
        └── top-right-triangle.png
    ├── sandbag-optimization.html
    ├── shape-info-tests.html
    ├── shape-info-tests.js
    ├── shape-test-suite.html
    ├── shape-value-tests.html
    ├── shape-value-tests.js
    ├── shapes-performance.html
    ├── style-polyfill-tests.html
    └── style-polyfill-tests.js


/.gitignore:
--------------------------------------------------------------------------------
1 | *~
2 | .*.sw[a-p]
3 | .DS_Store
4 | node_modules/
5 | tags
6 | 


--------------------------------------------------------------------------------
/CONTRIBUTING:
--------------------------------------------------------------------------------
1 | Contributions to this code are covered by the Adobe contributors license agreement. 
2 | Developers must sign and submit the Adobe CLA in order to contribute to this project:
3 | http://adobe-webplatform.github.com/css-shapes-polyfill/dev/cla-form.html 
4 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 |     var project = {
 3 |         files: ['src/*.js']
 4 |     }
 5 | 
 6 |     grunt.initConfig({
 7 |         pkg: grunt.file.readJSON('package.json'),
 8 | 
 9 |         header: '\
10 | /*!\n\
11 | Copyright 2014 Adobe Systems Inc.;\n\
12 | Licensed under the Apache License, Version 2.0 (the "License");\n\
13 | you may not use this file except in compliance with the License.\n\
14 | You may obtain a copy of the License at\n\
15 | \n\
16 | http://www.apache.org/licenses/LICENSE-2.0\n\
17 | \n\
18 | Unless required by applicable law or agreed to in writing, software\n\
19 | distributed under the License is distributed on an "AS IS" BASIS,\n\
20 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n\
21 | See the License for the specific language governing permissions and\n\
22 | limitations under the License.\n\
23 | */\n\
24 | \n\
25 | ;(function(scope) {\n"use strict";\n\n',
26 |         footer: '\nscope.ShapesPolyfill = new Polyfill(scope);\n})(window);\n',
27 | 
28 |         concat: {
29 |             options: {
30 |                 stripBanners: 'true',
31 |                 banner: '<%= header %>',
32 |                 footer: '<%= footer %>'
33 |             },
34 |             dist: {
35 |                 src: project.files,
36 |                 dest: '<%= pkg.name %>.js'
37 |             }
38 |         },
39 | 
40 |         uglify: {
41 |             options: {
42 |                 preserveComments: 'some'
43 |             },
44 |             dist: {
45 |                 src: ['<%= concat.dist.dest %>'],
46 |                 dest: '<%= pkg.name %>.min.js'
47 |             }
48 |         },
49 | 
50 |         watch: {
51 |             options: {
52 |                 atBegin: true,
53 |             },
54 |             js: {
55 |                 files: project.files,
56 |                 tasks: ['build']
57 |             }
58 |         },
59 | 
60 |         jshint: {
61 |             source: {
62 |                 src: ['src/*.js']
63 |             },
64 |             dist: {
65 |                 /* minification triggers some lint warnings */
66 |                 src: ['shapes-polyfill.js']
67 |             }
68 |         }
69 |     });
70 | 
71 |     grunt.loadNpmTasks('grunt-contrib-jshint');
72 |     grunt.loadNpmTasks('grunt-contrib-uglify');
73 |     grunt.loadNpmTasks('grunt-contrib-concat');
74 |     grunt.loadNpmTasks('grunt-contrib-watch');
75 | 
76 |     grunt.registerTask('default', 'print help message', function() {
77 |         grunt.log.writeln('Hi there. The current supported targets are:');
78 |         grunt.log.writeln('watch: watch src files for changes and build when a change occurs');
79 |         grunt.log.writeln('build: concat & minify src files into a .js and .min.js file');
80 |         grunt.log.writeln('jshint: lint the source, can be called as jshint:source or jshint:dist');
81 |     });
82 |     grunt.registerTask('build', ['jshint:source', 'concat', 'uglify', 'jshint:dist']);
83 | }


--------------------------------------------------------------------------------
/LICENSE.MD:
--------------------------------------------------------------------------------
  1 | Copyright 2014 Adobe Systems Incorporated. All rights reserved.
  2 | 
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | 
 15 |                                  Apache License
 16 |                            Version 2.0, January 2004
 17 |                         http://www.apache.org/licenses/
 18 | 
 19 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
 20 | 
 21 |    1. Definitions.
 22 | 
 23 |       "License" shall mean the terms and conditions for use, reproduction,
 24 |       and distribution as defined by Sections 1 through 9 of this document.
 25 | 
 26 |       "Licensor" shall mean the copyright owner or entity authorized by
 27 |       the copyright owner that is granting the License.
 28 | 
 29 |       "Legal Entity" shall mean the union of the acting entity and all
 30 |       other entities that control, are controlled by, or are under common
 31 |       control with that entity. For the purposes of this definition,
 32 |       "control" means (i) the power, direct or indirect, to cause the
 33 |       direction or management of such entity, whether by contract or
 34 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 35 |       outstanding shares, or (iii) beneficial ownership of such entity.
 36 | 
 37 |       "You" (or "Your") shall mean an individual or Legal Entity
 38 |       exercising permissions granted by this License.
 39 | 
 40 |       "Source" form shall mean the preferred form for making modifications,
 41 |       including but not limited to software source code, documentation
 42 |       source, and configuration files.
 43 | 
 44 |       "Object" form shall mean any form resulting from mechanical
 45 |       transformation or translation of a Source form, including but
 46 |       not limited to compiled object code, generated documentation,
 47 |       and conversions to other media types.
 48 | 
 49 |       "Work" shall mean the work of authorship, whether in Source or
 50 |       Object form, made available under the License, as indicated by a
 51 |       copyright notice that is included in or attached to the work
 52 |       (an example is provided in the Appendix below).
 53 | 
 54 |       "Derivative Works" shall mean any work, whether in Source or Object
 55 |       form, that is based on (or derived from) the Work and for which the
 56 |       editorial revisions, annotations, elaborations, or other modifications
 57 |       represent, as a whole, an original work of authorship. For the purposes
 58 |       of this License, Derivative Works shall not include works that remain
 59 |       separable from, or merely link (or bind by name) to the interfaces of,
 60 |       the Work and Derivative Works thereof.
 61 | 
 62 |       "Contribution" shall mean any work of authorship, including
 63 |       the original version of the Work and any modifications or additions
 64 |       to that Work or Derivative Works thereof, that is intentionally
 65 |       submitted to Licensor for inclusion in the Work by the copyright owner
 66 |       or by an individual or Legal Entity authorized to submit on behalf of
 67 |       the copyright owner. For the purposes of this definition, "submitted"
 68 |       means any form of electronic, verbal, or written communication sent
 69 |       to the Licensor or its representatives, including but not limited to
 70 |       communication on electronic mailing lists, source code control systems,
 71 |       and issue tracking systems that are managed by, or on behalf of, the
 72 |       Licensor for the purpose of discussing and improving the Work, but
 73 |       excluding communication that is conspicuously marked or otherwise
 74 |       designated in writing by the copyright owner as "Not a Contribution."
 75 | 
 76 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 77 |       on behalf of whom a Contribution has been received by Licensor and
 78 |       subsequently incorporated within the Work.
 79 | 
 80 |    2. Grant of Copyright License. Subject to the terms and conditions of
 81 |       this License, each Contributor hereby grants to You a perpetual,
 82 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 83 |       copyright license to reproduce, prepare Derivative Works of,
 84 |       publicly display, publicly perform, sublicense, and distribute the
 85 |       Work and such Derivative Works in Source or Object form.
 86 | 
 87 |    3. Grant of Patent License. Subject to the terms and conditions of
 88 |       this License, each Contributor hereby grants to You a perpetual,
 89 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 90 |       (except as stated in this section) patent license to make, have made,
 91 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 92 |       where such license applies only to those patent claims licensable
 93 |       by such Contributor that are necessarily infringed by their
 94 |       Contribution(s) alone or by combination of their Contribution(s)
 95 |       with the Work to which such Contribution(s) was submitted. If You
 96 |       institute patent litigation against any entity (including a
 97 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 98 |       or a Contribution incorporated within the Work constitutes direct
 99 |       or contributory patent infringement, then any patent licenses
100 |       granted to You under this License for that Work shall terminate
101 |       as of the date such litigation is filed.
102 | 
103 |    4. Redistribution. You may reproduce and distribute copies of the
104 |       Work or Derivative Works thereof in any medium, with or without
105 |       modifications, and in Source or Object form, provided that You
106 |       meet the following conditions:
107 | 
108 |       (a) You must give any other recipients of the Work or
109 |           Derivative Works a copy of this License; and
110 | 
111 |       (b) You must cause any modified files to carry prominent notices
112 |           stating that You changed the files; and
113 | 
114 |       (c) You must retain, in the Source form of any Derivative Works
115 |           that You distribute, all copyright, patent, trademark, and
116 |           attribution notices from the Source form of the Work,
117 |           excluding those notices that do not pertain to any part of
118 |           the Derivative Works; and
119 | 
120 |       (d) If the Work includes a "NOTICE" text file as part of its
121 |           distribution, then any Derivative Works that You distribute must
122 |           include a readable copy of the attribution notices contained
123 |           within such NOTICE file, excluding those notices that do not
124 |           pertain to any part of the Derivative Works, in at least one
125 |           of the following places: within a NOTICE text file distributed
126 |           as part of the Derivative Works; within the Source form or
127 |           documentation, if provided along with the Derivative Works; or,
128 |           within a display generated by the Derivative Works, if and
129 |           wherever such third-party notices normally appear. The contents
130 |           of the NOTICE file are for informational purposes only and
131 |           do not modify the License. You may add Your own attribution
132 |           notices within Derivative Works that You distribute, alongside
133 |           or as an addendum to the NOTICE text from the Work, provided
134 |           that such additional attribution notices cannot be construed
135 |           as modifying the License.
136 | 
137 |       You may add Your own copyright statement to Your modifications and
138 |       may provide additional or different license terms and conditions
139 |       for use, reproduction, or distribution of Your modifications, or
140 |       for any such Derivative Works as a whole, provided Your use,
141 |       reproduction, and distribution of the Work otherwise complies with
142 |       the conditions stated in this License.
143 | 
144 |    5. Submission of Contributions. Unless You explicitly state otherwise,
145 |       any Contribution intentionally submitted for inclusion in the Work
146 |       by You to the Licensor shall be under the terms and conditions of
147 |       this License, without any additional terms or conditions.
148 |       Notwithstanding the above, nothing herein shall supersede or modify
149 |       the terms of any separate license agreement you may have executed
150 |       with Licensor regarding such Contributions.
151 | 
152 |    6. Trademarks. This License does not grant permission to use the trade
153 |       names, trademarks, service marks, or product names of the Licensor,
154 |       except as required for reasonable and customary use in describing the
155 |       origin of the Work and reproducing the content of the NOTICE file.
156 | 
157 |    7. Disclaimer of Warranty. Unless required by applicable law or
158 |       agreed to in writing, Licensor provides the Work (and each
159 |       Contributor provides its Contributions) on an "AS IS" BASIS,
160 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
161 |       implied, including, without limitation, any warranties or conditions
162 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
163 |       PARTICULAR PURPOSE. You are solely responsible for determining the
164 |       appropriateness of using or redistributing the Work and assume any
165 |       risks associated with Your exercise of permissions under this License.
166 | 
167 |    8. Limitation of Liability. In no event and under no legal theory,
168 |       whether in tort (including negligence), contract, or otherwise,
169 |       unless required by applicable law (such as deliberate and grossly
170 |       negligent acts) or agreed to in writing, shall any Contributor be
171 |       liable to You for damages, including any direct, indirect, special,
172 |       incidental, or consequential damages of any character arising as a
173 |       result of this License or out of the use or inability to use the
174 |       Work (including but not limited to damages for loss of goodwill,
175 |       work stoppage, computer failure or malfunction, or any and all
176 |       other commercial damages or losses), even if such Contributor
177 |       has been advised of the possibility of such damages.
178 | 
179 |    9. Accepting Warranty or Additional Liability. While redistributing
180 |       the Work or Derivative Works thereof, You may choose to offer,
181 |       and charge a fee for, acceptance of support, warranty, indemnity,
182 |       or other liability obligations and/or rights consistent with this
183 |       License. However, in accepting such obligations, You may act only
184 |       on Your own behalf and on Your sole responsibility, not on behalf
185 |       of any other Contributor, and only if You agree to indemnify,
186 |       defend, and hold each Contributor harmless for any liability
187 |       incurred by, or claims asserted against, such Contributor by reason
188 |       of your accepting any such warranty or additional liability.
189 | 
190 |    END OF TERMS AND CONDITIONS
191 | 
192 |    APPENDIX: How to apply the Apache License to your work.
193 | 
194 |       To apply the Apache License to your work, attach the following
195 |       boilerplate notice, with the fields enclosed by brackets "[]"
196 |       replaced with your own identifying information. (Don't include
197 |       the brackets!)  The text should be enclosed in the appropriate
198 |       comment syntax for the file format. We also recommend that a
199 |       file or class name and description of purpose be included on the
200 |       same "printed page" as the copyright notice for easier
201 |       identification within third-party archives.
202 | 
203 |    Copyright [yyyy] [name of copyright owner]
204 | 
205 |    Licensed under the Apache License, Version 2.0 (the "License");
206 |    you may not use this file except in compliance with the License.
207 |    You may obtain a copy of the License at
208 | 
209 |        http://www.apache.org/licenses/LICENSE-2.0
210 | 
211 |    Unless required by applicable law or agreed to in writing, software
212 |    distributed under the License is distributed on an "AS IS" BASIS,
213 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
214 |    See the License for the specific language governing permissions and
215 |    limitations under the License.


--------------------------------------------------------------------------------
/NOTICE.txt:
--------------------------------------------------------------------------------
 1 | CSS Shapes Polyfill
 2 | Copyright 2014 Adobe Systems Incorporated
 3 | 
 4 | This software is licensed under the Apache License, Version 2.0 (see LICENSE file).
 5 | 
 6 | This software uses the following third party libraries that may have licenses differeng
 7 | from that of the software itself. You can find the libraries and their respective
 8 | licenses below.
 9 | 
10 | - style-polyfill
11 | 
12 |     The style loading and parsing code is a modified version of one of Adobe's CSS Regions
13 |     Polyfills [1]. That code is also licensed under Apache 2.0 License.
14 | 
15 | - tests/performance
16 | 
17 |     The performance tests are a slightly modified version of those found in WebKit.
18 |     The resources there include runner.js, a WebKit performance testing framework.
19 | 
20 | - copy text
21 | 
22 |     The copy used in some of the test pages is from public domain works from Project Gutenberg [2].
23 | 
24 | [1] https://github.com/adobe-webplatform/css-regions-polyfill
25 | [2] http://gutenberg.org
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | shapes-polyfill
  2 | ===============
  3 | 
  4 | The shapes polyfill is a JavaScript implementation of the [CSS Shapes][css-shapes-spec] specification.
  5 | You can use the polyfill to approximate CSS Shapes behavior in browsers that do not
  6 | support the feature. By default, the polyfill will not run when a native shapes
  7 | implementation is available.
  8 | 
  9 | ## Using the polyfill
 10 | 
 11 | To use the polyfill, download or build `shapes-polyfill.js` or `shapes-polyfill.min.js` (the minified version). Then, include it in your page:
 12 | 
 13 |     <script src='/shapes-polyfill.js'></script>
 14 | 
 15 | After that, set any shape styles in `<link>` or `<style>` stylesheets accessible to your domain:
 16 | 
 17 |     .shape {
 18 |         float: left;
 19 |         shape-outside: circle(50%);
 20 |         shape-margin: 1em;
 21 |     }
 22 | 
 23 | And add the required markup:
 24 | 
 25 |     <div class='shape'></div>
 26 |     This is some content that will wrap around the floating
 27 |     shape to the left. How very exciting!
 28 | 
 29 | That's it!
 30 | 
 31 | ## Customization
 32 | 
 33 | By default, the script runs automatically. You can disable this behavior by setting `data-auto-run` to `false` on the script tag.
 34 | 
 35 |     <script src='/shapes-polyfill.js' data-auto-run='false'></script>
 36 | 
 37 | The polyfill can also be run on-demand using the `run` method:
 38 | 
 39 |     <script>
 40 |         window.onload = function() {
 41 |             window.ShapesPolyfill.run();
 42 |         }
 43 |     </script>
 44 | 
 45 | If you are going to re-run the polyfill, you should first call `teardown`:
 46 | 
 47 |     <script>
 48 |         window.setInterval(function() {
 49 |             window.ShapesPolyfill.teardown();
 50 |             window.ShapesPolyfill.run();
 51 |         }, 5000);
 52 |     </script>
 53 | 
 54 | Optional parameters can be passed in a params object to the run method, including `force` which can be set to one of the `ShapePolyfill.Force` values to force style reload, layout, or both. You might want to use this approach if you are dynamically modifying styles, or want to control exactly when the polyfill runs. For an example, check out `tests\shapes-performance.html`.
 55 | 
 56 | ## Building the Polyfill
 57 | 
 58 | If you are interested in tinkering with the polyfill, you will need the following build dependencies:
 59 | 
 60 | * [node][node],
 61 | * [npm][npm], and
 62 | * [grunt][grunt]
 63 | 
 64 | To build
 65 | 
 66 | 1. Clone the source code
 67 | 2. From the command line, enter the source directory
 68 | 3. Run `npm install`
 69 | 4. Run `grunt build`
 70 | 
 71 | If you are successful, you should have an updated `shapes-polyfill.js` and `shapes-polyfill.min.js` in your source directory. For a full list of tasks, just enter `grunt` at the command line.
 72 | 
 73 | The main source files are in the `src` directory, and you should make sure that any modifications you make pass the test suite in `tests\shape-test-suite.html`. Note that some of the tests require being run from a local server.
 74 | 
 75 | ## Known Issues
 76 | 
 77 | The polyfill isn't perfect, and will generally work best with simple shapes. If you find a bug, please log an [issue][new-issue] to let us know.
 78 | * Because of the way styles are loaded, inline styles, and those added after the script is loaded, will not be added automatically.
 79 | * The implementation works by creating a series of floats approximating the shape's contour and parenting them within a zero-height div. As such, it may introduce line breaks if the original float shape occurs in the middle of a line of text.
 80 | * Multiple shaped floats stacking or in close proximity may clear each other once the polyfill is applied.
 81 | * The polyfill is slower than native implementations doing shapes layout (roughly 10-20x). You should take this into consideration when deciding if the polyfill is right for your project.
 82 | * IE does not support SVG image values, as its security model prevents grabbing [rendered SVG pixel values via canvas][svg-canvas-origin-clean].
 83 | * Some browsers will not issue a CORS request if a non-CORS version of the resource has already been loaded. This may surface if you use the same image as an `img`' `src` and `shape-outside`.
 84 | 
 85 | ## Browser Support
 86 | 
 87 | The polyfill should work with all current versions of desktop and mobile browsers. Below is a table of support for Chrome (C), Firefox (FF), Internet Explorer (IE), Opera (O), Safari (S), Android (A), and iOS (iOS) browsers.
 88 | 
 89 | <table>
 90 |   <tr>
 91 |     <th>C</th>
 92 |     <th>FF</th>
 93 |     <th>IE</th>
 94 |     <th>O</th>
 95 |     <th>S</th>
 96 | 
 97 |     <th>A</th>
 98 |     <th>iOS</th>
 99 |   </tr>
100 |   <tr>
101 |     <td>5+</td>
102 |     <td>4+</td>
103 |     <td>10+ [1]</td>
104 |     <td>12+</td>
105 |     <td>5+</td>
106 | 
107 |     <td>2.1</td>
108 |     <td>3.2+</td>
109 |   </tr>
110 | </table>
111 | 
112 | [1] If you are not using cross-origin images, the polyfill should work back to IE 9. Also note the lack of SVG support, as of IE 11.
113 | 
114 | ## Feedback
115 | 
116 | Please let us know if you have any feedback. If you run into any problems, you can file a [new issue][new-issue]. You can also reach us [@adobeweb][twitter].
117 | 
118 | [css-shapes-spec]: http://www.w3.org/TR/css-shapes/
119 | [new-issue]: https://github.com/adobe-webplatform/css-shapes-polyfill/issues/new
120 | [node]: http://nodejs.org
121 | [npm]: http://www.npmjs.org
122 | [grunt]: http://gruntjs.com
123 | [twitter]: http://twitter.com/adobeweb
124 | [svg-canvas-origin-clean]: http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/
125 | 


--------------------------------------------------------------------------------
/demos/circles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/demos/circles.png


--------------------------------------------------------------------------------
/demos/green-tea.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta name="copyright" content="Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
 6 | 
 7 |  Licensed under the Apache License, Version 2.0 (the “License”);
 8 |  you may not use this file except in compliance with the License.
 9 |  You may obtain a copy of the License at
10 | 
11 |  http://www.apache.org/licenses/LICENSE-2.0
12 | 
13 |  Unless required by applicable law or agreed to in writing, software
14 |  distributed under the License is distributed on an “AS IS” BASIS,
15 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  See the License for the specific language governing permissions and
17 |  limitations under the License.">
18 | 
19 | <style>
20 | #container {
21 |     margin: 25px;
22 |     width: 856px;
23 |     font-size: 20px;
24 | }
25 | 
26 | #image {
27 |     display: block;
28 |     float: right;
29 |     height: 567px;
30 |     width: 100%;
31 |     shape-outside: polygon(56% 15%, 100% 15%, 100% 86%, 28% 86%) content-box;
32 |     z-index: -1;
33 | }
34 | 
35 | #content {
36 |     padding-left: 10%;
37 |     padding-top: 15%;
38 |     color: white;
39 | }
40 | 
41 | .footer {
42 |     display: inline-block;
43 |     position: absolute;
44 |     bottom: 0; right: 0;
45 |     padding: .5em;
46 | }
47 | </style>
48 | </head>
49 | 
50 | <body>
51 |   <div id="container">
52 |       <img id="image" src="green-tea.jpg">
53 |       <p id="content">Green tea is made from the leaves from Camellia sinensis that have undergone minimal oxidation during processing. Green tea originated in China, but it has become associated with many cultures throughout Asia. Green tea has recently become more widespread in the West, where black tea has been the traditionally consumed tea.</p>
54 |   </div>
55 | 
56 | <div class='footer'>text <a href='http://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License'>cc-sa</a> via <a href='http://wikipedia.org'>Wikipedia</a></div>
57 | <script src='../shapes-polyfill.js'></script>
58 | </body>
59 | </html>
60 | 
61 | 


--------------------------------------------------------------------------------
/demos/green-tea.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/demos/green-tea.jpg


--------------------------------------------------------------------------------
/demos/polygon-demo.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta name="copyright" content="Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
 6 | 
 7 |  Licensed under the Apache License, Version 2.0 (the “License”);
 8 |  you may not use this file except in compliance with the License.
 9 |  You may obtain a copy of the License at
10 | 
11 |  http://www.apache.org/licenses/LICENSE-2.0
12 | 
13 |  Unless required by applicable law or agreed to in writing, software
14 |  distributed under the License is distributed on an “AS IS” BASIS,
15 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  See the License for the specific language governing permissions and
17 |  limitations under the License.">
18 | 
19 | <style>
20 | #container {
21 |     width: 400px;
22 |     font-size: 10px;
23 | }
24 | 
25 | #polygon-shape-outside {
26 |     width: 200px;
27 |     height: 200px;
28 |     float: left;
29 |     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><polygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/></svg>");
30 |     shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
31 | }
32 | 
33 | .footer {
34 |     display: inline-block;
35 |     position: absolute;
36 |     bottom: 0; right: 0;
37 |     padding: .5em;
38 | }
39 | </style>
40 | </head>
41 | <body>
42 | <div id="container">
43 | <div id="polygon-shape-outside"></div>
44 | <p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.</p>
45 | 
46 | <p>Long thought to be related to frigatebirds, cormorants, tropicbirds, gannets and boobies, pelicans are now known instead to be most closely related to the Shoebill and Hamerkop, and are placed in the order Pelecaniformes. Ibises, spoonbills and herons are more distant relatives, and have been classified in the same order. Pelicans frequent inland and coastal waters where they feed principally on fish, catching them at or near the water surface. Gregarious birds, they often hunt cooperatively and breed colonially. Four white-plumaged species tend to nest on the ground, and four brown or grey-plumaged species nest mainly in trees.</p>
47 | </div>
48 | 
49 | <div class='footer'>text <a href='http://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License'>cc-sa</a> via <a href='http://wikipedia.org'>Wikipedia</a></div>
50 | 
51 | <script src='../shapes-polyfill.js'></script>
52 | </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/demos/self-intersecting-polygon.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta name="copyright" content="Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
 6 | 
 7 |  Licensed under the Apache License, Version 2.0 (the “License”);
 8 |  you may not use this file except in compliance with the License.
 9 |  You may obtain a copy of the License at
10 | 
11 |  http://www.apache.org/licenses/LICENSE-2.0
12 | 
13 |  Unless required by applicable law or agreed to in writing, software
14 |  distributed under the License is distributed on an “AS IS” BASIS,
15 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  See the License for the specific language governing permissions and
17 |  limitations under the License.">
18 | <style>
19 | #container {
20 |     width: 400px;
21 |     font-size: 10px;
22 | }
23 | 
24 | #polygon-shape-outside {
25 |     width: 241px;
26 |     height: 234px;
27 |     float: left;
28 |     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='241px' height='234px'><polygon points='241,82 51,16 210,163 124,234 16,198 211,0 0,133' fill-rule='nonzero' fill='blue'/></svg>");
29 |     shape-outside: polygon(241px 82px, 51px 16px, 210px 163px, 124px 234px, 16px 198px, 211px 0, 0 133px);
30 | }
31 | 
32 | .footer {
33 |   display: inline-block;
34 |   position: absolute;
35 |   bottom: 0; right: 0;
36 |   padding: .5em;
37 | }
38 | 
39 | </style>
40 | </head>
41 | <body>
42 | <div id="container">
43 | <div id="polygon-shape-outside"></div>
44 | <p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.</p>
45 | </div>
46 | 
47 | <div class='footer'>text <a href='http://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License'>cc-sa</a> via <a href='http://wikipedia.org'>Wikipedia</a></div>
48 | <script src='../shapes-polyfill.js'></script>
49 | </body>
50 | </html>
51 | 
52 | 
53 |         
54 | 


--------------------------------------------------------------------------------
/demos/simple-shape-outsides.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang='en'>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <meta name="copyright" content="Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
  6 | 
  7 |  Licensed under the Apache License, Version 2.0 (the “License”);
  8 |  you may not use this file except in compliance with the License.
  9 |  You may obtain a copy of the License at
 10 | 
 11 |  http://www.apache.org/licenses/LICENSE-2.0
 12 | 
 13 |  Unless required by applicable law or agreed to in writing, software
 14 |  distributed under the License is distributed on an “AS IS” BASIS,
 15 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  See the License for the specific language governing permissions and
 17 |  limitations under the License.">
 18 | <style>
 19 |     h1, h2 { clear: both; }
 20 |     .container {
 21 |         min-width: 300px;
 22 |         width: 100%;
 23 |         max-width: 600px;
 24 |         margin: 0 auto;
 25 |     }
 26 | 
 27 |     .shape {
 28 |         float: left;
 29 |         width: 200px;
 30 |         height: 200px;
 31 |         margin: 10px;
 32 |         shape-margin: 5%;
 33 |     }
 34 | 
 35 |     .right {
 36 |         float: right;
 37 |     }
 38 | 
 39 |     .inset {
 40 |         shape-outside: inset(10% round 10%) content-box;
 41 |     }
 42 | 
 43 |     .circle {
 44 |         shape-outside: circle(50%) content-box;
 45 |     }
 46 | 
 47 |     .ellipse {
 48 |         shape-outside: ellipse(25% 50%) content-box;
 49 |     }
 50 | 
 51 |     .polygon {
 52 |         shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) content-box;
 53 |     }
 54 | 
 55 |     .url {
 56 |         shape-outside: url('./circles.png');
 57 |     }
 58 | 
 59 |     body { position: relative; }
 60 |     p { text-align: justify; }
 61 | 
 62 |     .footer {
 63 |         display: inline-block;
 64 |         position: absolute;
 65 |         bottom: 0; right: 0;
 66 |         padding: .5em;
 67 |     }
 68 | </style>
 69 | </head>
 70 | <body>
 71 | <div class='container'>
 72 | <h1>shape-outside values</h1>
 73 | 
 74 | <h2>shape-outside: inset</h2>
 75 | <div class='shape inset'><svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><rect x='10%' y='10%' rx='10%' ry='10%' width='80%' height='80%' fill='rgba(51, 51, 51, 0.8)'/></svg></div>
 76 | <p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.
 77 | 
 78 | <h2>shape-outside: circle</h2>
 79 | <div class='shape circle right'><svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><circle cx='50%' cy='50%' r='50%' fill='rgba(51, 51, 51, 0.8)'/></svg></div>
 80 | <p>Long thought to be related to frigatebirds, cormorants, tropicbirds, gannets and boobies, pelicans are now known instead to be most closely related to the Shoebill and Hamerkop, and are placed in the order Pelecaniformes. Ibises, spoonbills and herons are more distant relatives, and have been classified in the same order. Pelicans frequent inland and coastal waters where they feed principally on fish, catching them at or near the water surface. Gregarious birds, they often hunt cooperatively and breed colonially. Four white-plumaged species tend to nest on the ground, and four brown or grey-plumaged species nest mainly in trees.
 81 | 
 82 | <h2>shape-outside: ellipse</h2>
 83 | <div class='shape ellipse'><svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><ellipse cx='50%' cy='50%' rx='25%' ry='50%' fill='rgba(51, 51, 51, 0.8)'/></svg></div>
 84 | <p>The relationship between pelicans and people has often been contentious. The birds have been persecuted because of their perceived competition with commercial and recreational fishers. They have suffered from habitat destruction, disturbance and environmental pollution, and three species are of conservation concern. They also have a long history of cultural significance in mythology, and in Christian and heraldic iconography.
 85 | 
 86 | <h2>shape-outside: polygon</h2>
 87 | <div class='shape polygon right'><svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><polygon points='100,0 200,100 100,200 0,100' fill='rgba(51, 51, 51, 0.8)'/></svg></div>
 88 | <p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.
 89 | 
 90 | <h2>shape-outside: url</h2>
 91 | <div class='shape url'>
 92 | <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 100 100">
 93 |     <circle cx="25" cy="25" r="25" fill="rgba(51, 51, 51, 0.8)"/>
 94 |     <circle cx="75" cy="75" r="25" fill="rgba(51, 51, 51, 0.8)"/>
 95 | </svg>
 96 | </div>
 97 | <p>Long thought to be related to frigatebirds, cormorants, tropicbirds, gannets and boobies, pelicans are now known instead to be most closely related to the Shoebill and Hamerkop, and are placed in the order Pelecaniformes. Ibises, spoonbills and herons are more distant relatives, and have been classified in the same order. Pelicans frequent inland and coastal waters where they feed principally on fish, catching them at or near the water surface. Gregarious birds, they often hunt cooperatively and breed colonially. Four white-plumaged species tend to nest on the ground, and four brown or grey-plumaged species nest mainly in trees.
 98 | </div>
 99 | 
100 | <div class='footer'>text <a href='http://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License'>cc-sa</a> via <a href='http://wikipedia.org'>Wikipedia</a></div>
101 | 
102 |     <script src='../shapes-polyfill.js'></script>
103 | </body>
104 | </html>
105 | 


--------------------------------------------------------------------------------
/dev/cla-form-thanks.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |   <title>Thanks!</title>
 7 |   <meta name="description" content="Thank You Page for Contributer License Agreement (CLA) for CSS Shapes Polyfill open source project">
 8 |   <meta name="viewport" content="width=device-width">
 9 |   <link href="css/bootstrap.css" rel="stylesheet">
10 |   <link href="css/bootstrap-responsive.css" rel="stylesheet">
11 |   <link href="css/cla.css" rel="stylesheet">
12 |   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
13 |     <script src="js/bootstrap.min.js" type="text/javascript"></script>
14 | </head>
15 | <body>
16 |     <div class="well">
17 |         <h1>You Rock!</h1>
18 | 
19 |         <p>Thanks for signing the CSS Shapes Polyfill Contributor License Agreement. Now that the legal stuff is out of the way we can accept your brilliant work!</p>
20 |         <button class="btn btn-inverse btn-large" onclick="location='https://github.com/adobe-webplatform/'"> <span class="add-on"><i class="icon-arrow-right icon-white"></i></span> Take Me To The Project!</button>
21 | 
22 |     </div>
23 |     
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/dev/css/bootstrap-responsive.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Bootstrap Responsive v2.0.3
  3 |  *
  4 |  * Copyright 2012 Twitter, Inc
  5 |  * Licensed under the Apache License v2.0
  6 |  * http://www.apache.org/licenses/LICENSE-2.0
  7 |  *
  8 |  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  9 |  */
 10 | 
 11 | .clearfix {
 12 |   *zoom: 1;
 13 | }
 14 | 
 15 | .clearfix:before,
 16 | .clearfix:after {
 17 |   display: table;
 18 |   content: "";
 19 | }
 20 | 
 21 | .clearfix:after {
 22 |   clear: both;
 23 | }
 24 | 
 25 | .hide-text {
 26 |   font: 0/0 a;
 27 |   color: transparent;
 28 |   text-shadow: none;
 29 |   background-color: transparent;
 30 |   border: 0;
 31 | }
 32 | 
 33 | .input-block-level {
 34 |   display: block;
 35 |   width: 100%;
 36 |   min-height: 28px;
 37 |   -webkit-box-sizing: border-box;
 38 |      -moz-box-sizing: border-box;
 39 |       -ms-box-sizing: border-box;
 40 |           box-sizing: border-box;
 41 | }
 42 | 
 43 | .hidden {
 44 |   display: none;
 45 |   visibility: hidden;
 46 | }
 47 | 
 48 | .visible-phone {
 49 |   display: none !important;
 50 | }
 51 | 
 52 | .visible-tablet {
 53 |   display: none !important;
 54 | }
 55 | 
 56 | .hidden-desktop {
 57 |   display: none !important;
 58 | }
 59 | 
 60 | @media (max-width: 767px) {
 61 |   .visible-phone {
 62 |     display: inherit !important;
 63 |   }
 64 |   .hidden-phone {
 65 |     display: none !important;
 66 |   }
 67 |   .hidden-desktop {
 68 |     display: inherit !important;
 69 |   }
 70 |   .visible-desktop {
 71 |     display: none !important;
 72 |   }
 73 | }
 74 | 
 75 | @media (min-width: 768px) and (max-width: 979px) {
 76 |   .visible-tablet {
 77 |     display: inherit !important;
 78 |   }
 79 |   .hidden-tablet {
 80 |     display: none !important;
 81 |   }
 82 |   .hidden-desktop {
 83 |     display: inherit !important;
 84 |   }
 85 |   .visible-desktop {
 86 |     display: none !important ;
 87 |   }
 88 | }
 89 | 
 90 | @media (max-width: 480px) {
 91 |   .nav-collapse {
 92 |     -webkit-transform: translate3d(0, 0, 0);
 93 |   }
 94 |   .page-header h1 small {
 95 |     display: block;
 96 |     line-height: 18px;
 97 |   }
 98 |   input[type="checkbox"],
 99 |   input[type="radio"] {
100 |     border: 1px solid #ccc;
101 |   }
102 |   .form-horizontal .control-group > label {
103 |     float: none;
104 |     width: auto;
105 |     padding-top: 0;
106 |     text-align: left;
107 |   }
108 |   .form-horizontal .controls {
109 |     margin-left: 0;
110 |   }
111 |   .form-horizontal .control-list {
112 |     padding-top: 0;
113 |   }
114 |   .form-horizontal .form-actions {
115 |     padding-right: 10px;
116 |     padding-left: 10px;
117 |   }
118 |   .modal {
119 |     position: absolute;
120 |     top: 10px;
121 |     right: 10px;
122 |     left: 10px;
123 |     width: auto;
124 |     margin: 0;
125 |   }
126 |   .modal.fade.in {
127 |     top: auto;
128 |   }
129 |   .modal-header .close {
130 |     padding: 10px;
131 |     margin: -10px;
132 |   }
133 |   .carousel-caption {
134 |     position: static;
135 |   }
136 | }
137 | 
138 | @media (max-width: 767px) {
139 |   body {
140 |     padding-right: 20px;
141 |     padding-left: 20px;
142 |   }
143 |   .navbar-fixed-top,
144 |   .navbar-fixed-bottom {
145 |     margin-right: -20px;
146 |     margin-left: -20px;
147 |   }
148 |   .container-fluid {
149 |     padding: 0;
150 |   }
151 |   .dl-horizontal dt {
152 |     float: none;
153 |     width: auto;
154 |     clear: none;
155 |     text-align: left;
156 |   }
157 |   .dl-horizontal dd {
158 |     margin-left: 0;
159 |   }
160 |   .container {
161 |     width: auto;
162 |   }
163 |   .row-fluid {
164 |     width: 100%;
165 |   }
166 |   .row,
167 |   .thumbnails {
168 |     margin-left: 0;
169 |   }
170 |   [class*="span"],
171 |   .row-fluid [class*="span"] {
172 |     display: block;
173 |     float: none;
174 |     width: auto;
175 |     margin-left: 0;
176 |   }
177 |   .input-large,
178 |   .input-xlarge,
179 |   .input-xxlarge,
180 |   input[class*="span"],
181 |   select[class*="span"],
182 |   textarea[class*="span"],
183 |   .uneditable-input {
184 |     display: block;
185 |     width: 100%;
186 |     min-height: 28px;
187 |     -webkit-box-sizing: border-box;
188 |        -moz-box-sizing: border-box;
189 |         -ms-box-sizing: border-box;
190 |             box-sizing: border-box;
191 |   }
192 |   .input-prepend input,
193 |   .input-append input,
194 |   .input-prepend input[class*="span"],
195 |   .input-append input[class*="span"] {
196 |     display: inline-block;
197 |     width: auto;
198 |   }
199 | }
200 | 
201 | @media (min-width: 768px) and (max-width: 979px) {
202 |   .row {
203 |     margin-left: -20px;
204 |     *zoom: 1;
205 |   }
206 |   .row:before,
207 |   .row:after {
208 |     display: table;
209 |     content: "";
210 |   }
211 |   .row:after {
212 |     clear: both;
213 |   }
214 |   [class*="span"] {
215 |     float: left;
216 |     margin-left: 20px;
217 |   }
218 |   .container,
219 |   .navbar-fixed-top .container,
220 |   .navbar-fixed-bottom .container {
221 |     width: 724px;
222 |   }
223 |   .span12 {
224 |     width: 724px;
225 |   }
226 |   .span11 {
227 |     width: 662px;
228 |   }
229 |   .span10 {
230 |     width: 600px;
231 |   }
232 |   .span9 {
233 |     width: 538px;
234 |   }
235 |   .span8 {
236 |     width: 476px;
237 |   }
238 |   .span7 {
239 |     width: 414px;
240 |   }
241 |   .span6 {
242 |     width: 352px;
243 |   }
244 |   .span5 {
245 |     width: 290px;
246 |   }
247 |   .span4 {
248 |     width: 228px;
249 |   }
250 |   .span3 {
251 |     width: 166px;
252 |   }
253 |   .span2 {
254 |     width: 104px;
255 |   }
256 |   .span1 {
257 |     width: 42px;
258 |   }
259 |   .offset12 {
260 |     margin-left: 764px;
261 |   }
262 |   .offset11 {
263 |     margin-left: 702px;
264 |   }
265 |   .offset10 {
266 |     margin-left: 640px;
267 |   }
268 |   .offset9 {
269 |     margin-left: 578px;
270 |   }
271 |   .offset8 {
272 |     margin-left: 516px;
273 |   }
274 |   .offset7 {
275 |     margin-left: 454px;
276 |   }
277 |   .offset6 {
278 |     margin-left: 392px;
279 |   }
280 |   .offset5 {
281 |     margin-left: 330px;
282 |   }
283 |   .offset4 {
284 |     margin-left: 268px;
285 |   }
286 |   .offset3 {
287 |     margin-left: 206px;
288 |   }
289 |   .offset2 {
290 |     margin-left: 144px;
291 |   }
292 |   .offset1 {
293 |     margin-left: 82px;
294 |   }
295 |   .row-fluid {
296 |     width: 100%;
297 |     *zoom: 1;
298 |   }
299 |   .row-fluid:before,
300 |   .row-fluid:after {
301 |     display: table;
302 |     content: "";
303 |   }
304 |   .row-fluid:after {
305 |     clear: both;
306 |   }
307 |   .row-fluid [class*="span"] {
308 |     display: block;
309 |     float: left;
310 |     width: 100%;
311 |     min-height: 28px;
312 |     margin-left: 2.762430939%;
313 |     *margin-left: 2.709239449638298%;
314 |     -webkit-box-sizing: border-box;
315 |        -moz-box-sizing: border-box;
316 |         -ms-box-sizing: border-box;
317 |             box-sizing: border-box;
318 |   }
319 |   .row-fluid [class*="span"]:first-child {
320 |     margin-left: 0;
321 |   }
322 |   .row-fluid .span12 {
323 |     width: 99.999999993%;
324 |     *width: 99.9468085036383%;
325 |   }
326 |   .row-fluid .span11 {
327 |     width: 91.436464082%;
328 |     *width: 91.38327259263829%;
329 |   }
330 |   .row-fluid .span10 {
331 |     width: 82.87292817100001%;
332 |     *width: 82.8197366816383%;
333 |   }
334 |   .row-fluid .span9 {
335 |     width: 74.30939226%;
336 |     *width: 74.25620077063829%;
337 |   }
338 |   .row-fluid .span8 {
339 |     width: 65.74585634900001%;
340 |     *width: 65.6926648596383%;
341 |   }
342 |   .row-fluid .span7 {
343 |     width: 57.182320438000005%;
344 |     *width: 57.129128948638304%;
345 |   }
346 |   .row-fluid .span6 {
347 |     width: 48.618784527%;
348 |     *width: 48.5655930376383%;
349 |   }
350 |   .row-fluid .span5 {
351 |     width: 40.055248616%;
352 |     *width: 40.0020571266383%;
353 |   }
354 |   .row-fluid .span4 {
355 |     width: 31.491712705%;
356 |     *width: 31.4385212156383%;
357 |   }
358 |   .row-fluid .span3 {
359 |     width: 22.928176794%;
360 |     *width: 22.874985304638297%;
361 |   }
362 |   .row-fluid .span2 {
363 |     width: 14.364640883%;
364 |     *width: 14.311449393638298%;
365 |   }
366 |   .row-fluid .span1 {
367 |     width: 5.801104972%;
368 |     *width: 5.747913482638298%;
369 |   }
370 |   input,
371 |   textarea,
372 |   .uneditable-input {
373 |     margin-left: 0;
374 |   }
375 |   input.span12,
376 |   textarea.span12,
377 |   .uneditable-input.span12 {
378 |     width: 714px;
379 |   }
380 |   input.span11,
381 |   textarea.span11,
382 |   .uneditable-input.span11 {
383 |     width: 652px;
384 |   }
385 |   input.span10,
386 |   textarea.span10,
387 |   .uneditable-input.span10 {
388 |     width: 590px;
389 |   }
390 |   input.span9,
391 |   textarea.span9,
392 |   .uneditable-input.span9 {
393 |     width: 528px;
394 |   }
395 |   input.span8,
396 |   textarea.span8,
397 |   .uneditable-input.span8 {
398 |     width: 466px;
399 |   }
400 |   input.span7,
401 |   textarea.span7,
402 |   .uneditable-input.span7 {
403 |     width: 404px;
404 |   }
405 |   input.span6,
406 |   textarea.span6,
407 |   .uneditable-input.span6 {
408 |     width: 342px;
409 |   }
410 |   input.span5,
411 |   textarea.span5,
412 |   .uneditable-input.span5 {
413 |     width: 280px;
414 |   }
415 |   input.span4,
416 |   textarea.span4,
417 |   .uneditable-input.span4 {
418 |     width: 218px;
419 |   }
420 |   input.span3,
421 |   textarea.span3,
422 |   .uneditable-input.span3 {
423 |     width: 156px;
424 |   }
425 |   input.span2,
426 |   textarea.span2,
427 |   .uneditable-input.span2 {
428 |     width: 94px;
429 |   }
430 |   input.span1,
431 |   textarea.span1,
432 |   .uneditable-input.span1 {
433 |     width: 32px;
434 |   }
435 | }
436 | 
437 | @media (min-width: 1200px) {
438 |   .row {
439 |     margin-left: -30px;
440 |     *zoom: 1;
441 |   }
442 |   .row:before,
443 |   .row:after {
444 |     display: table;
445 |     content: "";
446 |   }
447 |   .row:after {
448 |     clear: both;
449 |   }
450 |   [class*="span"] {
451 |     float: left;
452 |     margin-left: 30px;
453 |   }
454 |   .container,
455 |   .navbar-fixed-top .container,
456 |   .navbar-fixed-bottom .container {
457 |     width: 1170px;
458 |   }
459 |   .span12 {
460 |     width: 1170px;
461 |   }
462 |   .span11 {
463 |     width: 1070px;
464 |   }
465 |   .span10 {
466 |     width: 970px;
467 |   }
468 |   .span9 {
469 |     width: 870px;
470 |   }
471 |   .span8 {
472 |     width: 770px;
473 |   }
474 |   .span7 {
475 |     width: 670px;
476 |   }
477 |   .span6 {
478 |     width: 570px;
479 |   }
480 |   .span5 {
481 |     width: 470px;
482 |   }
483 |   .span4 {
484 |     width: 370px;
485 |   }
486 |   .span3 {
487 |     width: 270px;
488 |   }
489 |   .span2 {
490 |     width: 170px;
491 |   }
492 |   .span1 {
493 |     width: 70px;
494 |   }
495 |   .offset12 {
496 |     margin-left: 1230px;
497 |   }
498 |   .offset11 {
499 |     margin-left: 1130px;
500 |   }
501 |   .offset10 {
502 |     margin-left: 1030px;
503 |   }
504 |   .offset9 {
505 |     margin-left: 930px;
506 |   }
507 |   .offset8 {
508 |     margin-left: 830px;
509 |   }
510 |   .offset7 {
511 |     margin-left: 730px;
512 |   }
513 |   .offset6 {
514 |     margin-left: 630px;
515 |   }
516 |   .offset5 {
517 |     margin-left: 530px;
518 |   }
519 |   .offset4 {
520 |     margin-left: 430px;
521 |   }
522 |   .offset3 {
523 |     margin-left: 330px;
524 |   }
525 |   .offset2 {
526 |     margin-left: 230px;
527 |   }
528 |   .offset1 {
529 |     margin-left: 130px;
530 |   }
531 |   .row-fluid {
532 |     width: 100%;
533 |     *zoom: 1;
534 |   }
535 |   .row-fluid:before,
536 |   .row-fluid:after {
537 |     display: table;
538 |     content: "";
539 |   }
540 |   .row-fluid:after {
541 |     clear: both;
542 |   }
543 |   .row-fluid [class*="span"] {
544 |     display: block;
545 |     float: left;
546 |     width: 100%;
547 |     min-height: 28px;
548 |     margin-left: 2.564102564%;
549 |     *margin-left: 2.510911074638298%;
550 |     -webkit-box-sizing: border-box;
551 |        -moz-box-sizing: border-box;
552 |         -ms-box-sizing: border-box;
553 |             box-sizing: border-box;
554 |   }
555 |   .row-fluid [class*="span"]:first-child {
556 |     margin-left: 0;
557 |   }
558 |   .row-fluid .span12 {
559 |     width: 100%;
560 |     *width: 99.94680851063829%;
561 |   }
562 |   .row-fluid .span11 {
563 |     width: 91.45299145300001%;
564 |     *width: 91.3997999636383%;
565 |   }
566 |   .row-fluid .span10 {
567 |     width: 82.905982906%;
568 |     *width: 82.8527914166383%;
569 |   }
570 |   .row-fluid .span9 {
571 |     width: 74.358974359%;
572 |     *width: 74.30578286963829%;
573 |   }
574 |   .row-fluid .span8 {
575 |     width: 65.81196581200001%;
576 |     *width: 65.7587743226383%;
577 |   }
578 |   .row-fluid .span7 {
579 |     width: 57.264957265%;
580 |     *width: 57.2117657756383%;
581 |   }
582 |   .row-fluid .span6 {
583 |     width: 48.717948718%;
584 |     *width: 48.6647572286383%;
585 |   }
586 |   .row-fluid .span5 {
587 |     width: 40.170940171000005%;
588 |     *width: 40.117748681638304%;
589 |   }
590 |   .row-fluid .span4 {
591 |     width: 31.623931624%;
592 |     *width: 31.5707401346383%;
593 |   }
594 |   .row-fluid .span3 {
595 |     width: 23.076923077%;
596 |     *width: 23.0237315876383%;
597 |   }
598 |   .row-fluid .span2 {
599 |     width: 14.529914530000001%;
600 |     *width: 14.4767230406383%;
601 |   }
602 |   .row-fluid .span1 {
603 |     width: 5.982905983%;
604 |     *width: 5.929714493638298%;
605 |   }
606 |   input,
607 |   textarea,
608 |   .uneditable-input {
609 |     margin-left: 0;
610 |   }
611 |   input.span12,
612 |   textarea.span12,
613 |   .uneditable-input.span12 {
614 |     width: 1160px;
615 |   }
616 |   input.span11,
617 |   textarea.span11,
618 |   .uneditable-input.span11 {
619 |     width: 1060px;
620 |   }
621 |   input.span10,
622 |   textarea.span10,
623 |   .uneditable-input.span10 {
624 |     width: 960px;
625 |   }
626 |   input.span9,
627 |   textarea.span9,
628 |   .uneditable-input.span9 {
629 |     width: 860px;
630 |   }
631 |   input.span8,
632 |   textarea.span8,
633 |   .uneditable-input.span8 {
634 |     width: 760px;
635 |   }
636 |   input.span7,
637 |   textarea.span7,
638 |   .uneditable-input.span7 {
639 |     width: 660px;
640 |   }
641 |   input.span6,
642 |   textarea.span6,
643 |   .uneditable-input.span6 {
644 |     width: 560px;
645 |   }
646 |   input.span5,
647 |   textarea.span5,
648 |   .uneditable-input.span5 {
649 |     width: 460px;
650 |   }
651 |   input.span4,
652 |   textarea.span4,
653 |   .uneditable-input.span4 {
654 |     width: 360px;
655 |   }
656 |   input.span3,
657 |   textarea.span3,
658 |   .uneditable-input.span3 {
659 |     width: 260px;
660 |   }
661 |   input.span2,
662 |   textarea.span2,
663 |   .uneditable-input.span2 {
664 |     width: 160px;
665 |   }
666 |   input.span1,
667 |   textarea.span1,
668 |   .uneditable-input.span1 {
669 |     width: 60px;
670 |   }
671 |   .thumbnails {
672 |     margin-left: -30px;
673 |   }
674 |   .thumbnails > li {
675 |     margin-left: 30px;
676 |   }
677 |   .row-fluid .thumbnails {
678 |     margin-left: 0;
679 |   }
680 | }
681 | 
682 | @media (max-width: 979px) {
683 |   body {
684 |     padding-top: 0;
685 |   }
686 |   .navbar-fixed-top {
687 |     position: static;
688 |     margin-bottom: 18px;
689 |   }
690 |   .navbar-fixed-top .navbar-inner {
691 |     padding: 5px;
692 |   }
693 |   .navbar .container {
694 |     width: auto;
695 |     padding: 0;
696 |   }
697 |   .navbar .brand {
698 |     padding-right: 10px;
699 |     padding-left: 10px;
700 |     margin: 0 0 0 -5px;
701 |   }
702 |   .nav-collapse {
703 |     clear: both;
704 |   }
705 |   .nav-collapse .nav {
706 |     float: none;
707 |     margin: 0 0 9px;
708 |   }
709 |   .nav-collapse .nav > li {
710 |     float: none;
711 |   }
712 |   .nav-collapse .nav > li > a {
713 |     margin-bottom: 2px;
714 |   }
715 |   .nav-collapse .nav > .divider-vertical {
716 |     display: none;
717 |   }
718 |   .nav-collapse .nav .nav-header {
719 |     color: #999999;
720 |     text-shadow: none;
721 |   }
722 |   .nav-collapse .nav > li > a,
723 |   .nav-collapse .dropdown-menu a {
724 |     padding: 6px 15px;
725 |     font-weight: bold;
726 |     color: #999999;
727 |     -webkit-border-radius: 3px;
728 |        -moz-border-radius: 3px;
729 |             border-radius: 3px;
730 |   }
731 |   .nav-collapse .btn {
732 |     padding: 4px 10px 4px;
733 |     font-weight: normal;
734 |     -webkit-border-radius: 4px;
735 |        -moz-border-radius: 4px;
736 |             border-radius: 4px;
737 |   }
738 |   .nav-collapse .dropdown-menu li + li a {
739 |     margin-bottom: 2px;
740 |   }
741 |   .nav-collapse .nav > li > a:hover,
742 |   .nav-collapse .dropdown-menu a:hover {
743 |     background-color: #222222;
744 |   }
745 |   .nav-collapse.in .btn-group {
746 |     padding: 0;
747 |     margin-top: 5px;
748 |   }
749 |   .nav-collapse .dropdown-menu {
750 |     position: static;
751 |     top: auto;
752 |     left: auto;
753 |     display: block;
754 |     float: none;
755 |     max-width: none;
756 |     padding: 0;
757 |     margin: 0 15px;
758 |     background-color: transparent;
759 |     border: none;
760 |     -webkit-border-radius: 0;
761 |        -moz-border-radius: 0;
762 |             border-radius: 0;
763 |     -webkit-box-shadow: none;
764 |        -moz-box-shadow: none;
765 |             box-shadow: none;
766 |   }
767 |   .nav-collapse .dropdown-menu:before,
768 |   .nav-collapse .dropdown-menu:after {
769 |     display: none;
770 |   }
771 |   .nav-collapse .dropdown-menu .divider {
772 |     display: none;
773 |   }
774 |   .nav-collapse .navbar-form,
775 |   .nav-collapse .navbar-search {
776 |     float: none;
777 |     padding: 9px 15px;
778 |     margin: 9px 0;
779 |     border-top: 1px solid #222222;
780 |     border-bottom: 1px solid #222222;
781 |     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
782 |        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
783 |             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
784 |   }
785 |   .navbar .nav-collapse .nav.pull-right {
786 |     float: none;
787 |     margin-left: 0;
788 |   }
789 |   .nav-collapse,
790 |   .nav-collapse.collapse {
791 |     height: 0;
792 |     overflow: hidden;
793 |   }
794 |   .navbar .btn-navbar {
795 |     display: block;
796 |   }
797 |   .navbar-static .navbar-inner {
798 |     padding-right: 10px;
799 |     padding-left: 10px;
800 |   }
801 | }
802 | 
803 | @media (min-width: 980px) {
804 |   .nav-collapse.collapse {
805 |     height: auto !important;
806 |     overflow: visible !important;
807 |   }
808 | }
809 | 


--------------------------------------------------------------------------------
/dev/css/bootstrap-responsive.min.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Bootstrap Responsive v2.0.3
 3 |  *
 4 |  * Copyright 2012 Twitter, Inc
 5 |  * Licensed under the Apache License v2.0
 6 |  * http://www.apache.org/licenses/LICENSE-2.0
 7 |  *
 8 |  * Designed and built with all the love in the world @twitter by @mdo and @fat.
 9 |  */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.hidden{display:none;visibility:hidden}.visible-phone{display:none!important}.visible-tablet{display:none!important}.hidden-desktop{display:none!important}@media(max-width:767px){.visible-phone{display:inherit!important}.hidden-phone{display:none!important}.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}}@media(min-width:768px) and (max-width:979px){.visible-tablet{display:inherit!important}.hidden-tablet{display:none!important}.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}}@media(max-width:480px){.nav-collapse{-webkit-transform:translate3d(0,0,0)}.page-header h1 small{display:block;line-height:18px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.modal{position:absolute;top:10px;right:10px;left:10px;width:auto;margin:0}.modal.fade.in{top:auto}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media(max-width:767px){body{padding-right:20px;padding-left:20px}.navbar-fixed-top,.navbar-fixed-bottom{margin-right:-20px;margin-left:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;width:auto;clear:none;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}[class*="span"],.row-fluid [class*="span"]{display:block;float:none;width:auto;margin-left:0}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}}@media(min-width:768px) and (max-width:979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;content:""}.row:after{clear:both}[class*="span"]{float:left;margin-left:20px}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span12{width:724px}.span11{width:662px}.span10{width:600px}.span9{width:538px}.span8{width:476px}.span7{width:414px}.span6{width:352px}.span5{width:290px}.span4{width:228px}.span3{width:166px}.span2{width:104px}.span1{width:42px}.offset12{margin-left:764px}.offset11{margin-left:702px}.offset10{margin-left:640px}.offset9{margin-left:578px}.offset8{margin-left:516px}.offset7{margin-left:454px}.offset6{margin-left:392px}.offset5{margin-left:330px}.offset4{margin-left:268px}.offset3{margin-left:206px}.offset2{margin-left:144px}.offset1{margin-left:82px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:28px;margin-left:2.762430939%;*margin-left:2.709239449638298%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span12{width:99.999999993%;*width:99.9468085036383%}.row-fluid .span11{width:91.436464082%;*width:91.38327259263829%}.row-fluid .span10{width:82.87292817100001%;*width:82.8197366816383%}.row-fluid .span9{width:74.30939226%;*width:74.25620077063829%}.row-fluid .span8{width:65.74585634900001%;*width:65.6926648596383%}.row-fluid .span7{width:57.182320438000005%;*width:57.129128948638304%}.row-fluid .span6{width:48.618784527%;*width:48.5655930376383%}.row-fluid .span5{width:40.055248616%;*width:40.0020571266383%}.row-fluid .span4{width:31.491712705%;*width:31.4385212156383%}.row-fluid .span3{width:22.928176794%;*width:22.874985304638297%}.row-fluid .span2{width:14.364640883%;*width:14.311449393638298%}.row-fluid .span1{width:5.801104972%;*width:5.747913482638298%}input,textarea,.uneditable-input{margin-left:0}input.span12,textarea.span12,.uneditable-input.span12{width:714px}input.span11,textarea.span11,.uneditable-input.span11{width:652px}input.span10,textarea.span10,.uneditable-input.span10{width:590px}input.span9,textarea.span9,.uneditable-input.span9{width:528px}input.span8,textarea.span8,.uneditable-input.span8{width:466px}input.span7,textarea.span7,.uneditable-input.span7{width:404px}input.span6,textarea.span6,.uneditable-input.span6{width:342px}input.span5,textarea.span5,.uneditable-input.span5{width:280px}input.span4,textarea.span4,.uneditable-input.span4{width:218px}input.span3,textarea.span3,.uneditable-input.span3{width:156px}input.span2,textarea.span2,.uneditable-input.span2{width:94px}input.span1,textarea.span1,.uneditable-input.span1{width:32px}}@media(min-width:1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;content:""}.row:after{clear:both}[class*="span"]{float:left;margin-left:30px}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span12{width:1170px}.span11{width:1070px}.span10{width:970px}.span9{width:870px}.span8{width:770px}.span7{width:670px}.span6{width:570px}.span5{width:470px}.span4{width:370px}.span3{width:270px}.span2{width:170px}.span1{width:70px}.offset12{margin-left:1230px}.offset11{margin-left:1130px}.offset10{margin-left:1030px}.offset9{margin-left:930px}.offset8{margin-left:830px}.offset7{margin-left:730px}.offset6{margin-left:630px}.offset5{margin-left:530px}.offset4{margin-left:430px}.offset3{margin-left:330px}.offset2{margin-left:230px}.offset1{margin-left:130px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:28px;margin-left:2.564102564%;*margin-left:2.510911074638298%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.45299145300001%;*width:91.3997999636383%}.row-fluid .span10{width:82.905982906%;*width:82.8527914166383%}.row-fluid .span9{width:74.358974359%;*width:74.30578286963829%}.row-fluid .span8{width:65.81196581200001%;*width:65.7587743226383%}.row-fluid .span7{width:57.264957265%;*width:57.2117657756383%}.row-fluid .span6{width:48.717948718%;*width:48.6647572286383%}.row-fluid .span5{width:40.170940171000005%;*width:40.117748681638304%}.row-fluid .span4{width:31.623931624%;*width:31.5707401346383%}.row-fluid .span3{width:23.076923077%;*width:23.0237315876383%}.row-fluid .span2{width:14.529914530000001%;*width:14.4767230406383%}.row-fluid .span1{width:5.982905983%;*width:5.929714493638298%}input,textarea,.uneditable-input{margin-left:0}input.span12,textarea.span12,.uneditable-input.span12{width:1160px}input.span11,textarea.span11,.uneditable-input.span11{width:1060px}input.span10,textarea.span10,.uneditable-input.span10{width:960px}input.span9,textarea.span9,.uneditable-input.span9{width:860px}input.span8,textarea.span8,.uneditable-input.span8{width:760px}input.span7,textarea.span7,.uneditable-input.span7{width:660px}input.span6,textarea.span6,.uneditable-input.span6{width:560px}input.span5,textarea.span5,.uneditable-input.span5{width:460px}input.span4,textarea.span4,.uneditable-input.span4{width:360px}input.span3,textarea.span3,.uneditable-input.span3{width:260px}input.span2,textarea.span2,.uneditable-input.span2{width:160px}input.span1,textarea.span1,.uneditable-input.span1{width:60px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media(max-width:979px){body{padding-top:0}.navbar-fixed-top{position:static;margin-bottom:18px}.navbar-fixed-top .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-right:10px;padding-left:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 9px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#999;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:6px 15px;font-weight:bold;color:#999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .dropdown-menu a:hover{background-color:#222}.nav-collapse.in .btn-group{padding:0;margin-top:5px}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;display:block;float:none;max-width:none;padding:0;margin:0 15px;background-color:transparent;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:9px 15px;margin:9px 0;border-top:1px solid #222;border-bottom:1px solid #222;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1)}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{height:0;overflow:hidden}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-right:10px;padding-left:10px}}@media(min-width:980px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}}
10 | 


--------------------------------------------------------------------------------
/dev/css/cla.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright 2014 Adobe Systems Inc.
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | */
 15 | 
 16 | @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
 17 | 
 18 | html
 19 | {
 20 |     background: #eee;
 21 | }
 22 | 
 23 | 
 24 | body
 25 | {
 26 |     margin: 0 auto;
 27 |     padding: 2em;
 28 |     max-width:800px;
 29 |     -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.4);
 30 |     -moz-box-shadow: 0 0 12px rgba(0,0,0,0.4);
 31 |     box-shadow: 0 0 12px rgba(0,0,0,0.4);
 32 | }
 33 | 
 34 | p
 35 | {
 36 |     margin: 1.2em 0;
 37 | }
 38 | 
 39 | 
 40 | p, li
 41 | {
 42 |     font-family: "Source Sans Pro", Verdana, sans-serif;
 43 |     font-size: 1.1em;
 44 |     line-height: 1.6em;
 45 | }
 46 | 
 47 | .well
 48 | {
 49 |     font-family: "Source Sans Pro", Verdana, sans-serif;
 50 |     font-size: 1.3em;
 51 |     font-weight: 600;
 52 |     padding: 2em;
 53 |     text-transform: uppercase;
 54 |     letter-spacing: -0.01em;
 55 | }
 56 | 
 57 | h1
 58 | {
 59 |     font-family: "Source Sans Pro", Verdana, sans-serif;
 60 |     font-size: 5em;
 61 |     line-height: 1.1em;
 62 |     font-weight: 600;
 63 |     letter-spacing: -0.02em;
 64 | }
 65 | 
 66 | .icon-white {
 67 | background-image: url("../img/glyphicons-halflings-white.png");
 68 | }
 69 | 
 70 | @media only screen
 71 | and (max-width: 320px)
 72 | {
 73 |     h1
 74 |     {
 75 |         font-size: 2em;
 76 |     }
 77 |     
 78 |     .well
 79 |     {
 80 |         font-size: 1em;
 81 |         padding: 1em;
 82 |     }
 83 |     body
 84 |     {
 85 |         margin: 0;
 86 |     }
 87 | }
 88 | 
 89 | @media only screen
 90 | and (min-width: 320px) and (max-width: 600px)
 91 | {
 92 |     h1
 93 |     {
 94 |         font-size: 3em;
 95 |     }
 96 |     
 97 |     body
 98 |     {
 99 |         margin: 0;
100 |     }
101 |     
102 |     .well
103 |     {
104 |         font-size: 1em;
105 |         padding: 1em;
106 |     }
107 | }
108 | 
109 | 


--------------------------------------------------------------------------------
/dev/img/glyphicons-halflings-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/dev/img/glyphicons-halflings-white.png


--------------------------------------------------------------------------------
/dev/img/glyphicons-halflings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/dev/img/glyphicons-halflings.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shapes-polyfill",
 3 |   "version": "0.0.0",
 4 |   "description": "A Polyfill for CSS Shapes",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "mocha"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git@git.corp.adobe.com:betravis/shapes-polyfill.git"
12 |   },
13 |   "authors": [
14 |     "Bear Travis",
15 |     "Hans Muller"
16 |   ],
17 |   "license": "BSD",
18 |   "readmeFilename": "README.md",
19 |   "devDependencies": {
20 |     "chai": "*",
21 |     "mocha": "*",
22 |     "grunt-contrib-concat": "~0.3.0",
23 |     "grunt-contrib-uglify": "~0.3.2",
24 |     "grunt": "~0.4.2",
25 |     "grunt-contrib-watch": "~0.5.3",
26 |     "grunt-contrib-jshint": "^0.10.0"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/metrics.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright 2014 Adobe Systems Inc.;
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | */
 15 | 
 16 | function Metrics(element) {
 17 |     var computedStyle = getComputedStyle(element);
 18 | 
 19 |     // a full units map would call getUnitsMap, but that can significantly slow things down
 20 |     this.units = { px: 1 };
 21 |     this.element = element;
 22 | 
 23 |     // Used values already in px, but may be "" in some browsers, eg FF
 24 |     // These values are stored in their CSS order top, right, bottom, left
 25 |     var parseLength = function(length) { return length && length.length ? parseInt(length) : 0; };
 26 |     this.margins = [computedStyle.marginTop, computedStyle.marginRight, computedStyle.marginBottom, computedStyle.marginLeft];
 27 |     this.margins = this.margins.map(parseLength);
 28 |     this.borders = [computedStyle.borderTopWidth, computedStyle.borderRightWidth, computedStyle.borderBottomWidth, computedStyle.borderLeftWidth];
 29 |     this.borders = this.borders.map(parseLength);
 30 |     this.paddings = [computedStyle.paddingTop, computedStyle.paddingRight, computedStyle.paddingBottom, computedStyle.paddingLeft];
 31 |     this.paddings = this.paddings.map(parseLength);
 32 | 
 33 |     this.borderBox = {
 34 |         x: 0,
 35 |         y: 0,
 36 |         width: element.offsetWidth,
 37 |         height: element.offsetHeight
 38 |     };
 39 | 
 40 |     this.marginBox = {
 41 |         x: -this.margins[3],
 42 |         y: -this.margins[0],
 43 |         width: element.offsetWidth + this.margins[1] + this.margins[3],
 44 |         height: element.offsetHeight + this.margins[0] + this.margins[2]
 45 |     };
 46 | 
 47 |     // Resolved values, may not be in px
 48 |     // These are stored in their CSS order, top-left (width/height), top-right, bottom-right, bottom-left
 49 |     var self = this;
 50 |     var radii = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'];
 51 |     this.borderBox.radii = radii.map(function(radius, index) {
 52 |         radius = computedStyle[radius].split(/\s+/);
 53 |         return [
 54 |             self.toPixels(radius[0], self.borderBox.width),
 55 |             self.toPixels(radius.length > 1 ? radius[1] : radius[0], self.borderBox.height)
 56 |         ];
 57 |     });
 58 | 
 59 |     this.cssFloat = computedStyle.cssFloat;
 60 | }
 61 | 
 62 | Metrics.prototype.unitToPx = function(unit) {
 63 |     if (this.units[unit])
 64 |         return this.units[unit];
 65 |     var cached = this.element.style.getPropertyValue('line-height');
 66 |     this.element.style.setProperty('line-height', 1 + unit);
 67 |     this.units[unit] = parseFloat(getComputedStyle(this.element).getPropertyValue('line-height'));
 68 |     this.element.style.setProperty('line-height', cached);
 69 |     return this.units[unit];
 70 | };
 71 | 
 72 | Metrics.prototype.getUnitsMap = function(element) {
 73 |     var units = ['em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', 'cm', 'mm', 'in', 'px', 'pt', 'pc'];
 74 | 
 75 |     var child = document.createElement('div');
 76 |     child.style.width = '0px';
 77 |     child.style.height = '0px';
 78 | 
 79 |     element.appendChild(child);
 80 |     var style = getComputedStyle(child);
 81 | 
 82 |     var result = {};
 83 |     units.forEach(function(unit) {
 84 |         child.style.lineHeight = '1' + unit;
 85 |         // computed height is in px
 86 |         result[unit] = parseFloat(style.lineHeight);
 87 |     });
 88 |     child.parentNode.removeChild(child);
 89 | 
 90 |     return result;
 91 | };
 92 | 
 93 | Metrics.prototype.toPixels = function(length, percentageBase) {
 94 |     var split = /([\-0-9\.]*)([a-z%]*)/.exec(length);
 95 |     split[1] = parseFloat(split[1]);
 96 |     if (!split[2])
 97 |         return split[1];
 98 |     if (split[2] === '%')
 99 |         return split[1] * percentageBase / 100;
100 |     return split[1] * this.unitToPx(split[2]);
101 | };
102 | 


--------------------------------------------------------------------------------
/src/polygon.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright 2014 Adobe Systems Inc.;
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | */
 15 | 
 16 | /* Returns > 0 if the slope of the line through origin and endPoint2 is greater than the slope through 
 17 |  * origin and endPoint1. Returns 0 if they have the same slope, negative otherwise.
 18 |  */
 19 | function compareLineSlopes(origin, endPoint1, endPoint2) {
 20 |     return ((endPoint2.x - origin.x) * (endPoint1.y - origin.y)) - ((endPoint1.x - origin.x) * (endPoint2.y - origin.y));
 21 | }
 22 | 
 23 | function areCollinearPoints(p0, p1, p2) {
 24 |     return Math.abs(compareLineSlopes(p0, p1, p2)) < 350;  // FIXME: threshold is a hack and it's wrong
 25 | }
 26 | 
 27 | function areCoincidentPoints(p0, p1) { 
 28 |     return p0.x == p1.x && p0.y == p1.y;
 29 | }
 30 | 
 31 | function isPointOnLineSegment(lineStartPoint, lineEndPoint, point)
 32 | {
 33 |     return point.x >= Math.min(lineStartPoint.x, lineEndPoint.x) &&
 34 |         point.x <= Math.max(lineStartPoint.x, lineEndPoint.x) &&
 35 |         areCollinearPoints(lineStartPoint, lineEndPoint, point);
 36 | }
 37 | 
 38 | /* Parent class for different edge types, child classes will need to call init
 39 |  * to initialize the appropriate member variables */
 40 | function PolygonEdge() {
 41 | }
 42 | 
 43 | PolygonEdge.prototype.init = function(polygon, vertex1, vertex2) {
 44 |     this.polygon = polygon;
 45 |     this.vertex1 = vertex1;
 46 |     this.vertex2 = vertex2;
 47 |     this.minX = Math.min(this.vertex1.x, this.vertex2.x);
 48 |     this.maxX = Math.max(this.vertex1.x, this.vertex2.x);
 49 | };
 50 | 
 51 | PolygonEdge.prototype.containsPoint = function(point) {
 52 |     return isPointOnLineSegment(this.vertex1, this.vertex2, point);
 53 | };
 54 | 
 55 | PolygonEdge.prototype.overlapsYRange = function(y1, y2) { // y range: y1 <= y <= y2
 56 |     var edgeY1 = this.vertex1.y;
 57 |     var edgeY2 = this.vertex2.y;
 58 |     return y2 >= Math.min(edgeY1, edgeY2) && y1 <= Math.max(edgeY1, edgeY2);
 59 | };
 60 | 
 61 | PolygonEdge.prototype.isWithinYRange = function(y1, y2) { // y range: y1 <= y <= y2
 62 |     var edgeY1 = this.vertex1.y;
 63 |     var edgeY2 = this.vertex2.y;
 64 |     return y1 <= Math.min(edgeY1, edgeY2) && y2 >= Math.max(edgeY1, edgeY2);
 65 | };
 66 | 
 67 | PolygonEdge.prototype.inwardNormal = function()
 68 | {
 69 |     // "inward" - assuming that polygon's vertices are in clockwise order
 70 |     var dx = this.vertex2.x - this.vertex1.x;
 71 |     var dy = this.vertex2.y - this.vertex1.y;
 72 |     var edgeLength = Math.sqrt(dx*dx + dy*dy);
 73 |     return {x: -dy/edgeLength, y: dx/edgeLength};
 74 | };
 75 | 
 76 | PolygonEdge.prototype.outwardNormal = function()
 77 | {
 78 |     var n = this.inwardNormal();
 79 |     return {x: -n.x, y: -n.y};
 80 | };
 81 | 
 82 | PolygonEdge.prototype.xIntercept = function(y) {
 83 |     var vertex1Y = this.vertex1.y;
 84 |     var vertex2Y = this.vertex2.y;
 85 | 
 86 |     if (vertex1Y == vertex2Y)
 87 |         return Math.min(this.vertex1.x, this.vertex2.x);
 88 | 
 89 |     if (y == Math.min(vertex1Y, vertex2Y))
 90 |         return (vertex1Y < vertex2Y) ? this.vertex1.x : this.vertex2.x;
 91 | 
 92 |     if (y == Math.max(vertex1Y, vertex2Y))
 93 |         return (vertex1Y > vertex2Y) ? this.vertex1.x : this.vertex2.x;
 94 | 
 95 |     return this.vertex1.x + ((y - vertex1Y) * (this.vertex2.x - this.vertex1.x) / (vertex2Y - vertex1Y));
 96 | };
 97 | 
 98 | /* Clip the edge line segment to the vertical range y1,y2 and then return 
 99 |  * the clipped line segment's horizontal range as {x1, x2}, where x2 >= x1;
100 |  * This method assumes that this edge overlaps y1,y2.
101 | */
102 | PolygonEdge.prototype.clippedEdgeXRange = function(y1, y2) {
103 |     if (this.isWithinYRange(y1, y2)) {
104 |         var vertex1X = this.vertex1.x;
105 |         var vertex2X = this.vertex2.x;
106 |         return {x1: Math.min(vertex1X, vertex2X), x2: Math.max(vertex1X, vertex2X)};
107 |     }
108 | 
109 |     var minYVertex, maxYVertex;
110 |     if (this.vertex1.y < this.vertex2.y) {
111 |         minYVertex = this.vertex1;
112 |         maxYVertex = this.vertex2;
113 |     }
114 |     else {
115 |         minYVertex = this.vertex2;
116 |         maxYVertex = this.vertex1;
117 |     }
118 | 
119 |     var xForY1 = (minYVertex.y < y1) ? this.xIntercept(y1) : minYVertex.x;
120 |     var xForY2 = (maxYVertex.y > y2) ? this.xIntercept(y2) : maxYVertex.x;
121 |     return {x1: Math.min(xForY1, xForY2), x2: Math.max(xForY1, xForY2)};
122 | };
123 | 
124 | /* Clip the circle to the vertical range y1,y2 and return the extent of the clipped circle's 
125 |  * projection on the X axis as {x1, x2}, where x2 >= x1. This method assumes that the circle
126 |  * overlaps y1, y2.
127 | */
128 | function clippedCircleXRange(center, radius, y1, y2) {
129 |     if (center.y >= y1 && center.y <= y2)
130 |         return {x1: center.x - radius, x2: center.x + radius};
131 | 
132 |     var yi, xi;
133 |     if (y2 < center.y) {
134 |         yi = y2 - center.y;
135 |         xi = ellipseXIntercept(yi, radius, radius);
136 |         return {x1: center.x - xi, x2: center.x + xi};
137 |     }
138 | 
139 |     yi =  y1 - center.y;
140 |     xi = ellipseXIntercept(yi, radius, radius);
141 |     return {x1: center.x - xi, x2: center.x + xi};
142 | }
143 | 
144 | /* The edge of a polygon shape */
145 | function ShapeEdge(polygon, vertex1, vertex2) {
146 |     this.init(polygon, vertex1, vertex2);
147 | }
148 | 
149 | ShapeEdge.prototype = new PolygonEdge();
150 | 
151 | /* The polygon shape edge offset by shape-margin */
152 | function OffsetEdge(edge, normalUnitVector) {
153 |     var shapeMargin = edge.polygon.shapeMargin;
154 |     var dx = normalUnitVector.x * shapeMargin;
155 |     var dy = normalUnitVector.y * shapeMargin;
156 | 
157 |     this.anchorEdge = edge;
158 |     this.normalUnitVector = normalUnitVector;
159 | 
160 |     var vertex1 = {x: edge.vertex1.x + dx, y: edge.vertex1.y + dy};
161 |     var vertex2 = {x: edge.vertex2.x + dx, y: edge.vertex2.y + dy};
162 | 
163 |     this.init(edge.polygon, vertex1, vertex2);
164 | }
165 | 
166 | OffsetEdge.prototype = new PolygonEdge();
167 | 
168 | function isVertexOrderClockwise(vertices) {
169 |     var minVertexIndex = 0;
170 |     for (var i = 1; i < vertices.length; ++i) {
171 |         var p = vertices[i];
172 |         if (p.y < vertices[minVertexIndex].y || (p.y == vertices[minVertexIndex].y && p.x < vertices[minVertexIndex].x))
173 |             minVertexIndex = i;
174 |     }
175 |     var nextVertex = vertices[(minVertexIndex + 1) % vertices.length];
176 |     var prevVertex = vertices[(minVertexIndex + vertices.length - 1) % vertices.length];
177 |     return compareLineSlopes(prevVertex, vertices[minVertexIndex], nextVertex) < 0;
178 | }
179 | 
180 | function Polygon(vertices, fillRule, shapeMargin) { // vertices:  [{x, y}]
181 |     this.m_vertices = vertices;
182 |     this.fillRule  = fillRule;
183 |     this.shapeMargin = shapeMargin;
184 | 
185 |     if (vertices.length < 3) {
186 |         this.m_edges = [];
187 |         this.shapeMarginEdges = [];
188 |         return;
189 |     }
190 | 
191 |     var edges = [];
192 |     var minX = (vertices.length > 0) ? vertices[0].x : undefined;
193 |     var minY = (vertices.length > 0) ? vertices[0].y : undefined;
194 |     var maxX = minX;
195 |     var maxY = minY;
196 | 
197 |     var clockwise = isVertexOrderClockwise(vertices);
198 |     var vertex1Index = 0;
199 |     do {
200 |         var vertex2Index = this.nextEdgeVertexIndex(vertex1Index, clockwise);
201 |         edges.push(new ShapeEdge(this, vertices[vertex1Index], vertices[vertex2Index]));
202 |         var x = vertices[vertex1Index].x;
203 |         var y = vertices[vertex1Index].y;
204 |         minX = Math.min(x, minX);
205 |         minY = Math.min(y, minY);
206 |         maxX = Math.max(x, maxX);
207 |         maxY = Math.max(y, maxY);
208 |         vertex1Index = vertex2Index;
209 | 
210 |     } while (vertex1Index !== 0);
211 | 
212 |     // Where possible, combine 2 edges into 1
213 |     var edgeIndex = 0, nextEdgeIndex;
214 |     while (edgeIndex < edges.length && edges.length > 3) {
215 |         nextEdgeIndex = (edgeIndex + 1) % edges.length;
216 |         if (areCollinearPoints(edges[edgeIndex].vertex1, edges[edgeIndex].vertex2, edges[nextEdgeIndex].vertex2)) {
217 |             edges[edgeIndex].vertex2 = edges[nextEdgeIndex].vertex2;
218 |             edges.splice(nextEdgeIndex, 1);
219 |         } else
220 |             edgeIndex++;
221 |     }
222 | 
223 |     if (shapeMargin === 0) {
224 |         this.shapeMarginEdges = edges;
225 |     } else {
226 |         var shapeMarginEdges = [];
227 |         for(var i = 0; i < edges.length; i++) {
228 |             shapeMarginEdges.push(new OffsetEdge(edges[i], edges[i].outwardNormal()));
229 |             shapeMarginEdges.push(new OffsetEdge(edges[i], edges[i].inwardNormal()));
230 |         }
231 |         this.shapeMarginEdges = shapeMarginEdges;
232 |     }
233 | 
234 |     this.m_edges = edges;
235 |     this.bounds = new Rect(minX - shapeMargin, minY - shapeMargin, shapeMargin*2 + (maxX - minX), shapeMargin*2 + (maxY - minY));
236 | }
237 | 
238 | Polygon.prototype.vertexAt = function(index) { return this.m_vertices[index]; };
239 | 
240 | Polygon.prototype.edgeAt = function(index) { return this.m_edges[index]; };
241 | 
242 | Polygon.prototype.isEmpty = function() { return this.m_edges.length < 3 || this.bounds.isEmpty(); };
243 | 
244 | Polygon.prototype.vertices = function() { return this.m_vertices.slice(0); };
245 | Polygon.prototype.edges = function() { return this.m_edges.slice(0); };
246 | 
247 | Polygon.prototype.overlapsYRange = function(y1, y2) { // y range: y1 <= y < y2
248 |     return y1 < this.bounds.maxY && y2 >= this.bounds.y;
249 | };
250 | 
251 | Polygon.prototype.nextVertexIndex = function(vertexIndex, clockwise) {
252 |     var nVertices = this.m_vertices.length;
253 |     return ((clockwise) ? vertexIndex + 1 : vertexIndex - 1 + nVertices) % nVertices;
254 | };
255 | 
256 | Polygon.prototype.nextEdgeVertexIndex = function(vertex1Index, clockwise) {
257 |     var nVertices = this.m_vertices.length;
258 |     var vertex2Index = this.nextVertexIndex(vertex1Index, clockwise);
259 | 
260 |     while (vertex2Index && areCoincidentPoints(this.vertexAt(vertex1Index), this.vertexAt(vertex2Index)))
261 |         vertex2Index = this.nextVertexIndex(vertex2Index, clockwise);
262 | 
263 |     while (vertex2Index) {
264 |         var vertexIndex3 = this.nextVertexIndex(vertex2Index, clockwise);
265 |         if (!areCollinearPoints(this.vertexAt(vertex1Index), this.vertexAt(vertex2Index), this.vertexAt(vertexIndex3)))
266 |             break;
267 |         vertex2Index = vertexIndex3;
268 |     }
269 | 
270 |     return vertex2Index;
271 | };
272 | 
273 | Polygon.prototype.containsPointEvenOdd = function(point) {
274 |     var crossingCount = 0;
275 |     for (var i = 0; i < this.m_edges.length; ++i) {
276 |         var edge = this.edgeAt(i);
277 |         if (edge.containsPoint(point))
278 |             return true;
279 |         var vertex1 = edge.vertex1;
280 |         var vertex2 = edge.vertex2;
281 |         if ((vertex1.y <= point.y && vertex2.y > point.y) || (vertex1.y > point.y && vertex2.y <= point.y)) {
282 |             var vt = (point.y  - vertex1.y) / (vertex2.y - vertex1.y);
283 |             if (point.x < vertex1.x + vt * (vertex2.x - vertex1.x))
284 |                 ++crossingCount;
285 |         }
286 |     }
287 |     return (crossingCount & 1) !== 0;
288 | };
289 | 
290 | Polygon.prototype.containsPointNonZero = function(point) {
291 |     var windingNumber = 0;
292 |     for (var i = 0; i < this.m_edges.length; ++i) {
293 |         var edge = this.edgeAt(i);
294 |         if (edge.containsPoint(point))
295 |             return true;
296 |         var vertex1 = edge.vertex1;
297 |         var vertex2 = edge.vertex2;
298 |         if (vertex2.y < point.y) {
299 |             if ((vertex1.y > point.y) && (compareLineSlopes(vertex1, vertex2, point) > 0))
300 |                 ++windingNumber;
301 |         } else if (vertex2.y > point.y) {
302 |             if ((vertex1.y <= point.y) && (compareLineSlopes(vertex1, vertex2, point) < 0))
303 |                 --windingNumber;
304 |         }
305 |     }
306 |     return windingNumber !== 0;
307 | };
308 | 
309 | Polygon.prototype.containsPoint = function(point) {
310 |     if (!this.bounds.containsPoint(point))
311 |         return false;
312 |     return this.fillRule == "nonzero" ? this.containsPointNonZero(point) : this.containsPointEvenOdd(point);
313 | };
314 | 
315 | Polygon.prototype.edgeVerticesThatOverlapYRange = function(y1, y2) {
316 |     var result = [];
317 |     for (var i = 0; i < this.m_edges.length; i++) {
318 |         var vertex = this.edgeAt(i).vertex1;
319 |         if (vertex.y >= y1 && vertex.y < y2)
320 |             result.push(vertex);
321 |     }
322 |     return result;
323 | };
324 | 
325 | Polygon.prototype.edgesThatOverlapYRange = function(y1, y2) {
326 |     var result = [];
327 |     for (var i = 0; i < this.m_edges.length; i++) {
328 |         var edge = this.edgeAt(i);
329 |         if (edge.overlapsYRange(y1, y2))
330 |             result.push(edge);
331 |     }
332 |     return result;
333 | };
334 | 
335 | Polygon.prototype.shapeMarginEdgesThatOverlapYRange = function(y1, y2) {
336 |     var result = [];
337 |     for (var i = 0; i < this.shapeMarginEdges.length; i++) {
338 |         var edge = this.shapeMarginEdges[i];
339 |         if (edge.overlapsYRange(y1, y2))
340 |             result.push(edge);
341 |     }
342 |     return result;
343 | };
344 | 
345 | function compareEdgeMinX(edge1, edge2) { return edge1.minX - edge2.minX; }
346 | 
347 | function compareVertexXIncreasing(vertex1, vertex2) { return vertex2.x - vertex1.x; }
348 | 
349 | Polygon.prototype.leftExclusionEdge = function(y1, y2) { // y2 >= y1
350 |     if (this.isEmpty() || !this.bounds.overlapsYRange(y1, y2))
351 |         return undefined;
352 | 
353 |     var result, i, xRange;
354 | 
355 |     var overlappingEdges = this.shapeMarginEdgesThatOverlapYRange(y1, y2);
356 |     if (overlappingEdges.length !== 0) {
357 |         overlappingEdges.sort(compareEdgeMinX);
358 | 
359 |         result = overlappingEdges[0].clippedEdgeXRange(y1, y2).x1;
360 |         for (i = 1; i < overlappingEdges.length; i++) {
361 |             if (overlappingEdges[i].minX > result)
362 |                 break;
363 |             xRange = overlappingEdges[i].clippedEdgeXRange(y1, y2);
364 |             result = (result === undefined) ? xRange.x1 : Math.min(result, xRange.x1);
365 |         }
366 |     }
367 | 
368 |     var shapeMargin = this.shapeMargin;
369 |     if (shapeMargin > 0) {
370 |         var overlappingVertices = this.edgeVerticesThatOverlapYRange(y1 - shapeMargin, y2 + shapeMargin);
371 |         overlappingVertices.sort(compareVertexXIncreasing); 
372 | 
373 |         for (i = 0; i < overlappingVertices.length; i++) {
374 |             // FIXME: short-circuit
375 |             xRange = clippedCircleXRange(overlappingVertices[i], shapeMargin, y1, y2);
376 |             result = (result === undefined) ? xRange.x1 : Math.min(result, xRange.x1);
377 |         }
378 |     }
379 | 
380 |     if (result === undefined)
381 |         console.error("Polygon leftExclusionEdge() failed");
382 |     return result;
383 | };
384 | 
385 | function compareEdgeMaxX(edge1, edge2) { return edge2.maxX - edge1.maxX; }
386 | 
387 | function compareVertexXDecreasing(vertex1, vertex2) { return vertex1.x - vertex2.x; }
388 | 
389 | Polygon.prototype.rightExclusionEdge = function (y1, y2) { // y2 >= y1
390 |     if (this.isEmpty() || !this.bounds.overlapsYRange(y1, y2))
391 |         return undefined;
392 | 
393 |     var result, i, xRange;
394 | 
395 |     var overlappingEdges = this.shapeMarginEdgesThatOverlapYRange(y1, y2);
396 |     if (overlappingEdges.length !== 0) {
397 |         overlappingEdges.sort(compareEdgeMaxX);
398 | 
399 |         result = overlappingEdges[0].clippedEdgeXRange(y1, y2).x2;
400 |         for (i = 1; i < overlappingEdges.length; i++) {
401 |             if (overlappingEdges[i].maxX < result)
402 |                 break;
403 |             xRange = overlappingEdges[i].clippedEdgeXRange(y1, y2);
404 |             result = Math.max(result, xRange.x2);
405 |         }
406 |     }
407 | 
408 |     var shapeMargin = this.shapeMargin;
409 |     if (shapeMargin > 0) {
410 |         var overlappingVertices = this.edgeVerticesThatOverlapYRange(y1 - shapeMargin, y2 + shapeMargin);
411 |         overlappingVertices.sort(compareVertexXDecreasing); 
412 | 
413 |         for (i = 0; i < overlappingVertices.length; i++) {
414 |             // FIXME: short-circuit
415 |             xRange = clippedCircleXRange(overlappingVertices[i], shapeMargin, y1, y2);
416 |             result = (result === undefined) ? xRange.x2 : Math.max(result, xRange.x2);
417 |         }
418 |     }
419 | 
420 |     if (result === undefined)
421 |         console.error("Polygon rightExclusionEdge() failed");
422 |     return result;
423 | };
424 | 


--------------------------------------------------------------------------------
/src/raster.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright 2014 Adobe Systems Inc.;
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | */
 15 | 
 16 | /* Loading an image can fail for several reasons. Try to log an
 17 |  * error only once, and mark the appropriate values as undefined.
 18 |  */
 19 | function RasterInterval(y, startX, endX) {
 20 |     this.y = y;
 21 |     this.startX = startX;
 22 |     this.endX = endX;
 23 | }
 24 | 
 25 | function RasterIntervals(yOffset, size) {
 26 |     this.intervals = [];
 27 |     this.yOffset = yOffset;
 28 |     this.size = size;
 29 |     for (var i = 0; i < size; i++)
 30 |         this.intervals[i] = RasterIntervals.none;
 31 |     this.minY = -yOffset;
 32 |     this.maxY = size - yOffset;
 33 | }
 34 | 
 35 | RasterIntervals.none = {};
 36 | 
 37 | RasterIntervals.prototype.intervalAt = function(y) { return this.intervals[y + this.yOffset]; };
 38 | RasterIntervals.prototype.setIntervalAt = function(y, value) { this.intervals[y + this.yOffset] = value; };
 39 | 
 40 | RasterIntervals.prototype.uniteIntervalAt = function(y, interval) {
 41 |     var intervalAtY = this.intervalAt(y);
 42 |     if (intervalAtY === RasterIntervals.none)
 43 |         this.setIntervalAt(y, interval);
 44 |     else {
 45 |         intervalAtY.startX = Math.min(intervalAtY.startX, interval.startX);
 46 |         intervalAtY.endX = Math.max(intervalAtY.endX, interval.endX);
 47 |     }
 48 | };
 49 | 
 50 | RasterIntervals.prototype.intervalAtContains = function(y, interval) {
 51 |     var intervalAtY = this.intervalAt(y);
 52 |     if (intervalAtY == RasterIntervals.none)
 53 |         return false;
 54 |     return intervalAtY.startX <= interval.startX && intervalAtY.endX >= interval.endX;
 55 | };
 56 | 
 57 | function ShapeMarginIntervalGenerator(shapeMargin) {
 58 |     this.shapeMargin = shapeMargin;
 59 |     this.xIntercepts = [];
 60 |     for (var y = 0; y <= shapeMargin; y++)
 61 |         this.xIntercepts[y] = Math.sqrt(shapeMargin * shapeMargin - y * y);
 62 | }
 63 | 
 64 | ShapeMarginIntervalGenerator.prototype.generateIntervalAt = function(atY, forInterval) {
 65 |     var xInterceptsIndex = Math.abs(atY - forInterval.y);
 66 |     var dx = (xInterceptsIndex > this.shapeMargin) ? 0 : this.xIntercepts[xInterceptsIndex];
 67 |     return new RasterInterval(atY, forInterval.startX - dx, forInterval.endX + dx);
 68 | };
 69 | 
 70 | RasterIntervals.prototype.computeMarginIntervals = function(shapeMargin, clip) {
 71 |     var mig = new ShapeMarginIntervalGenerator(shapeMargin);
 72 |     var result = new RasterIntervals(this.yOffset, this.size);
 73 | 
 74 |     for (var y = this.minY; y < this.maxY; ++y) {
 75 |         var intervalAtY = this.intervalAt(y);
 76 |         if (intervalAtY == RasterIntervals.none)
 77 |             continue;
 78 | 
 79 |         var marginY0 = Math.max(this.minY, y - shapeMargin);
 80 |         var marginY1 = Math.min(this.maxY - 1, y + shapeMargin);
 81 |         var marginY;
 82 | 
 83 |         for (marginY = y - 1; marginY >= marginY0; --marginY) {
 84 |             if (marginY > 0 && this.intervalAtContains(marginY, intervalAtY))
 85 |                 break;
 86 |             result.uniteIntervalAt(marginY, mig.generateIntervalAt(marginY, intervalAtY));
 87 |         }
 88 | 
 89 |         result.uniteIntervalAt(y, mig.generateIntervalAt(y, intervalAtY));
 90 | 
 91 |         for (marginY = y + 1; marginY <= marginY1; ++marginY) {
 92 |             if (marginY < this.maxY && this.intervalAtContains(marginY, intervalAtY))
 93 |                 break;
 94 |             result.uniteIntervalAt(marginY, mig.generateIntervalAt(marginY, intervalAtY));
 95 |         }
 96 |     }
 97 |     return result;
 98 | };
 99 | 
100 | function error(url, exception) {
101 |     console.log("Unable to load image ", url, ". It's probably missing or you've run into a CORS issue.");
102 |     if (exception)
103 |         console.log("The exact problem was ", exception);
104 | }
105 | 
106 | function RasterImage(image, width, height) {
107 |     var canvas = document.createElement("canvas");
108 |     this.width = canvas.width = width;
109 |     this.height = canvas.height = height;
110 |     var g = canvas.getContext("2d");
111 |     g.drawImage(image, 0, 0, width, height);
112 |     try {
113 |         this.imageData = g.getImageData(0, 0, width, height);
114 |     } catch (e) {
115 |         error(image.src, e);
116 |         /* imageData will be undefined */
117 |     }
118 | }
119 | 
120 | RasterImage.prototype.hasData = function() { return !!this.imageData; };
121 | 
122 | RasterImage.prototype.alphaAt = function(x, y) {
123 |     return this.imageData.data[(x * 4 + 3) + y * this.width * 4];
124 | };
125 | 
126 | function Raster(url, box, shapeImageThreshold, shapeMargin, clip, whenReady) {
127 |     this.url = url;
128 |     this.box = box;
129 |     this.shapeImageThreshold = (256 * shapeImageThreshold);
130 |     this.shapeMargin = shapeMargin;
131 |     this.clip = clip;
132 | 
133 |     this.init(whenReady);
134 | }
135 | 
136 | Raster.prototype.init = function(callback) {
137 |     var raster = this;
138 |     var image = new Image();
139 |     var blob;
140 | 
141 |     /* If canvas is not supported, we're not going to get any further, so
142 |      * don't bother with the potential image / XHR request */
143 |     var canvas = document.createElement("canvas");
144 |     if (!canvas.getContext) {
145 |         error(raster.url);
146 |         callback();
147 |     }
148 | 
149 |     image.onload = function() {
150 |         raster.intervals = raster.computeIntervals(image);
151 |         if (raster.intervals) {
152 |             if (raster.shapeMargin > 0)
153 |                 raster.intervals = raster.intervals.computeMarginIntervals(raster.shapeMargin, raster.clip);
154 |         }
155 |         if (blob)
156 |             URL.revokeObjectURL(blob);
157 |         callback();
158 |     };
159 | 
160 |     image.onerror = function() {
161 |         error(raster.url);
162 |         /* raster.intervals is undefined */
163 |         callback();
164 |     };
165 | 
166 |     /* Try this approach for browsers that don't support
167 |      * CORS-enabled images (ie IE). Ideally we'd skip this
168 |      * for same-origin images, but we don't have a good test
169 |      * for that. */
170 |     if (!image.hasOwnProperty('crossOrigin') &&
171 |         window.URL &&
172 |         window.URL.createObjectURL) {
173 |         var xhr = new XMLHttpRequest();
174 |         xhr.onreadystatechange = function() {
175 |             if (xhr.readyState === 4) {
176 |                 if (xhr.status === 200) {
177 |                     blob = URL.createObjectURL(xhr.response);
178 |                     image.src = blob;
179 |                 } else {
180 |                     error(raster.url);
181 |                     callback();
182 |                 }
183 |             }
184 |         };
185 |         xhr.open('GET', raster.url, true);
186 |         xhr.responseType = 'blob';
187 |         xhr.send();
188 |     } else {
189 |         image.crossOrigin = "anonymous";
190 |         image.src = raster.url;
191 |     }
192 | };
193 | 
194 | Raster.prototype.computeIntervals = function(image) {
195 |     var clip = this.clip,
196 |         threshold = this.shapeImageThreshold,
197 |         width = this.box.width,
198 |         height = this.box.height,
199 |         rasterImage = new RasterImage(image, width, height);
200 | 
201 |     if (!rasterImage.hasData())
202 |         return undefined;
203 | 
204 |     var intervals = new RasterIntervals(-clip.y, clip.height),
205 |         maxY = Math.min(clip.height, this.box.height);
206 |     for (var y = 0; y < maxY; y++) {
207 |         var startX = -1;
208 |         for (var x = 0; x < this.box.width; x++) {
209 |             var alpha = rasterImage.alphaAt(x, y);
210 |             if (startX == -1 && alpha > threshold) {
211 |                 startX = x;
212 |                 if (intervals.intervalAt(y) === RasterIntervals.none)
213 |                     intervals.setIntervalAt(y, new RasterInterval(y, startX, width));
214 |             } else if (startX != -1 && alpha <= threshold) {
215 |                 intervals.intervalAt(y).endX = x;
216 |                 startX = -1;
217 |             }
218 |         }
219 |     }
220 |     return intervals;
221 | };
222 | 
223 | Raster.prototype.rightExclusionEdge = function (y1, y2) { // y2 >= y1
224 |     var intervals = this.intervals;
225 |     if (!intervals)
226 |         return this.clip.width;
227 |     var x; // = undefined;
228 |     for (var y = Math.max(y1, this.clip.y); y <= y2 && y < this.clip.maxY; y++) {
229 |         var endX = intervals.intervalAt(y).endX;
230 |         if (x === undefined || (endX !== undefined && endX > x))
231 |             x = endX;
232 |     }
233 |     return x;
234 | };
235 | 
236 | Raster.prototype.leftExclusionEdge = function(y1, y2) { // y2 >= y1
237 |     var intervals = this.intervals;
238 |     if (!intervals)
239 |         return 0;
240 |     var x; // = undefined;
241 |     for (var y = Math.max(y1, this.clip.y); y <= y2 && y < this.clip.maxY; y++) {
242 |         var startX = intervals.intervalAt(y).startX;
243 |         if (x === undefined || (startX !== undefined && startX < x))
244 |             x = startX;
245 |     }
246 |     return x;
247 | };
248 | 


--------------------------------------------------------------------------------
/src/rect.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright 2014 Adobe Systems Inc.;
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | */
 15 | 
 16 | function Size(width, height) {
 17 |     this.width = width;
 18 |     this.height = height;
 19 | }
 20 | 
 21 | Size.zeroSize = { width:0, height:0 };
 22 | 
 23 | Size.prototype.isEmpty = function() { return this.width <= 0 || this.height <= 0; };
 24 | 
 25 | Size.prototype.scale = function(factor) {
 26 |     this.width *= factor;
 27 |     this.height *= factor;
 28 | };
 29 | 
 30 | function Rect(x, y, width, height) { 
 31 |     this.x = x;
 32 |     this.y = y; 
 33 |     this.width = width; 
 34 |     this.height = height;
 35 |     this.maxX = x + width;
 36 |     this.maxY = y + height;
 37 | }
 38 | 
 39 | Rect.prototype.isEmpty = function() { return this.width <= 0 || this.height <= 0; };
 40 | 
 41 | Rect.prototype.containsX = function(x) { return x >= this.x && x < this.maxX; };
 42 | Rect.prototype.containsY = function(y) { return y >= this.y && y < this.maxY; };
 43 | Rect.prototype.containsPoint = function(p) { return this.containsX(p.x) && this.containsY(p.y); };
 44 | 
 45 | Rect.prototype.shiftLeftEdgeTo = function(newX) { 
 46 |     this.width -= newX - this.x;
 47 |     this.x = newX;
 48 | };
 49 | 
 50 | Rect.prototype.shiftTopEdgeTo = function(newY) { 
 51 |     this.height -= newY - this.y;
 52 |     this.y = newY;
 53 | };
 54 | 
 55 | Rect.prototype.shiftRightEdgeTo = function(newX) {  this.width = newX - this.x; };
 56 | Rect.prototype.shiftBottomEdgeTo = function(newY) { this.height = newY - this.y; };
 57 | 
 58 | Rect.prototype.overlapsYRange = function(minY, maxY) {
 59 |     return !this.isEmpty() && maxY >= this.y && minY < this.maxY;
 60 | };
 61 | 
 62 | Rect.prototype.overlapsXRange = function(minX, maxX) {
 63 |     return !this.isEmpty() && maxX >= this.x && minX < this.maxX;
 64 | };
 65 | 
 66 | function RoundedRect(rect, topLeft, topRight, bottomLeft, bottomRight) { // corner radii parameters are {width, height}
 67 |     this.rect = rect;
 68 |     this.radii = {topLeft: topLeft, topRight: topRight, bottomLeft: bottomLeft, bottomRight: bottomRight};
 69 | }
 70 | 
 71 | RoundedRect.prototype.isEmpty = function() { return this.width <= 0 || this.height <= 0; };
 72 | 
 73 | RoundedRect.prototype.topLeftCorner = function() {
 74 |     return new Rect(
 75 |         this.rect.x, 
 76 |         this.rect.y, 
 77 |         this.radii.topLeft.width, 
 78 |         this.radii.topLeft.height); 
 79 | };
 80 | 
 81 | RoundedRect.prototype.topRightCorner = function() {
 82 |     return new Rect(
 83 |         this.rect.maxX - this.radii.topRight.width, 
 84 |         this.rect.y, 
 85 |         this.radii.topRight.width, 
 86 |         this.radii.topRight.height);
 87 | };
 88 | 
 89 | RoundedRect.prototype.bottomLeftCorner = function() {
 90 |     return new Rect(
 91 |         this.rect.x, 
 92 |         this.rect.maxY - this.radii.bottomLeft.height, 
 93 |         this.radii.bottomLeft.width, 
 94 |         this.radii.bottomLeft.height);
 95 | };
 96 | 
 97 | RoundedRect.prototype.bottomRightCorner = function() {
 98 |     return new Rect(
 99 |         this.rect.maxX - this.radii.bottomRight.width, 
100 |         this.rect.maxY - this.radii.bottomRight.height, 
101 |         this.radii.bottomRight.width, 
102 |         this.radii.bottomRight.height);
103 | };
104 | 
105 | RoundedRect.prototype.isRounded = function() {
106 |     function isCornerRadiusNonZero(radius) { return radius.width > 0 && radius.height > 0; }
107 |     return isCornerRadiusNonZero(this.radii.topLeft) ||
108 |        isCornerRadiusNonZero(this.radii.topRight) ||
109 |        isCornerRadiusNonZero(this.radii.bottomLeft) ||
110 |        isCornerRadiusNonZero(this.radii.bottomRight);
111 | };
112 | 
113 | RoundedRect.prototype.cornersInsetRect = function() {
114 |     var topLeftCorner = this.topLeftCorner();
115 |     var topRightCorner = this.topRightCorner();
116 |     var bottomLeftCorner = this.bottomLeftCorner();
117 |     var bottomRightCorner = this.bottomRightCorner();
118 |     var x = Math.max(topLeftCorner.maxX, bottomLeftCorner.maxX);
119 |     var y = Math.max(topLeftCorner.maxY, topRightCorner.maxY);
120 |     return new Rect(x, y, Math.min(topRightCorner.x, bottomRightCorner.x) - x, Math.min(bottomLeftCorner.y, bottomRightCorner.y) - y);
121 | };
122 | 
123 | RoundedRect.prototype.scaleRadii = function(factor)
124 | {
125 |     if (factor == 1)
126 |         return;
127 |     var radii = this.radii;
128 | 
129 |     radii.topLeft.scale(factor);
130 |     if (radii.topLeft.isEmpty())
131 |         radii.topLeft = Size.zeroSize;
132 | 
133 |     radii.topRight.scale(factor);
134 |     if (radii.topRight.isEmpty())
135 |         radii.topRight = Size.zeroSize;
136 | 
137 |     radii.bottomLeft.scale(factor);
138 |     if (radii.bottomLeft.isEmpty())
139 |         radii.bottomLeft = Size.zeroSize;
140 | 
141 |     radii.bottomRight.scale(factor);
142 |     if (radii.bottomRight.isEmpty())
143 |         radii.bottomRight = Size.zeroSize;
144 | };
145 | 
146 | // See RoundedRect::isRenderable() in https://trac.webkit.org/browser/trunk/Source/WebCore/platform/graphics/RoundedRect.cpp
147 | // and http://www.w3.org/TR/css3-background/#corner-overlap
148 | 
149 | RoundedRect.prototype.isRenderable = function()
150 | {
151 |     var radii = this.radii;
152 |     var rect = this.rect;
153 |     return radii.topLeft.width + radii.topRight.width <= rect.width &&
154 |         radii.bottomLeft.width + radii.bottomRight.width <= rect.width &&
155 |         radii.topLeft.height + radii.bottomLeft.height <= rect.height &&
156 |         radii.topRight.height + radii.bottomRight.height <= rect.height;
157 | };
158 | 
159 | // See RoundedRect::adjustRadii() in https://trac.webkit.org/browser/trunk/Source/WebCore/platform/graphics/RoundedRect.cpp
160 | // and http://www.w3.org/TR/css3-background/#corner-overlap
161 | 
162 | RoundedRect.prototype.adjustRadii = function()
163 | {
164 |     var radii = this.radii;
165 |     var maxRadiusWidth = Math.max(radii.topLeft.width + radii.topRight.width, radii.bottomLeft.width + radii.bottomRight.width);
166 |     var maxRadiusHeight = Math.max(radii.topLeft.height + radii.bottomLeft.height, radii.topRight.height + radii.bottomRight.height);
167 |     if (maxRadiusWidth <= 0 || maxRadiusHeight <= 0) {
168 |         this.radii = {
169 |             topLeft: Size.zeroSize,
170 |             topRight: Size.zeroSize,
171 |             bottomRight: Size.zeroSize,
172 |             bottomLeft: Size.zeroSize
173 |         };
174 |         return;
175 |     }
176 |     var rect = this.rect;
177 |     var widthRatio = rect.width / maxRadiusWidth;
178 |     var heightRatio = rect.height / maxRadiusHeight;
179 |     this.scaleRadii(widthRatio < heightRatio ? widthRatio : heightRatio);
180 | };
181 | 
182 | function ellipseXIntercept(y, rx, ry) {
183 |     return rx * Math.sqrt(1 - (y * y) / (ry * ry));
184 | }
185 | 
186 | RoundedRect.prototype.minXInterceptAt = function(y, noInterceptReturnValue) {
187 |     if (!this.rect.containsY(y))
188 |         return noInterceptReturnValue;
189 | 
190 |     var topLeftCorner = this.topLeftCorner(), yi;
191 |     if (topLeftCorner.containsY(y)) {
192 |         yi = topLeftCorner.maxY - y;
193 |         return topLeftCorner.maxX  - ellipseXIntercept(yi, topLeftCorner.width, topLeftCorner.height);
194 |     } 
195 | 
196 |     var bottomLeftCorner = this.bottomLeftCorner();
197 |     if (bottomLeftCorner.containsY(y)) {
198 |         yi = y - bottomLeftCorner.y;
199 |         return bottomLeftCorner.maxX - ellipseXIntercept(yi, bottomLeftCorner.width, bottomLeftCorner.height);
200 |     } 
201 | 
202 |     return this.rect.x;
203 | };
204 | 
205 | RoundedRect.prototype.maxXInterceptAt = function(y, noInterceptReturnValue) {
206 |     if (!this.rect.containsY(y))
207 |         return noInterceptReturnValue;
208 | 
209 |     var topRightCorner = this.topRightCorner(), yi;
210 |     if (topRightCorner.containsY(y)) {
211 |         yi = topRightCorner.maxY - y;
212 |         return topRightCorner.x + ellipseXIntercept(yi, topRightCorner.width, topRightCorner.height);
213 |     } 
214 | 
215 |     var bottomRightCorner = this.bottomRightCorner();
216 |     if (bottomRightCorner.containsY(y)) {
217 |         yi = y - bottomRightCorner.y;
218 |         return bottomRightCorner.x + ellipseXIntercept(yi, bottomRightCorner.width, bottomRightCorner.height);
219 |     } 
220 | 
221 |     return this.rect.maxX;
222 | };
223 | 
224 | RoundedRect.prototype.rightExclusionEdge = function (y1, y2) { // y2 >= y1
225 |     if (this.rect.isEmpty() || !this.rect.overlapsYRange(y1, y2))
226 |         return undefined;
227 | 
228 |     if (!this.isRounded() || this.cornersInsetRect().overlapsYRange(y1, y2))
229 |         return this.rect.maxX;
230 | 
231 |     return Math.max(this.maxXInterceptAt(y1, this.rect.x), this.maxXInterceptAt(y2, this.rect.x));
232 | };
233 | 
234 | RoundedRect.prototype.leftExclusionEdge = function(y1, y2) { // y2 >= y1
235 |     if (this.rect.isEmpty() || !this.rect.overlapsYRange(y1, y2))
236 |         return undefined;
237 | 
238 |     if (!this.isRounded() || this.cornersInsetRect().overlapsYRange(y1, y2))
239 |         return this.rect.x;
240 | 
241 |     return Math.min(this.minXInterceptAt(y1, this.rect.maxX), this.minXInterceptAt(y2, this.rect.maxX));
242 | };
243 | 
244 | function computeOffsetHeight(dx, dy, areaLimit) {
245 |     if (dy === 0)
246 |         return 1;
247 |     if (dx === 0 || (dx * dy) / 2 < areaLimit)
248 |         return Math.round(dy);
249 |     return Math.round(Math.sqrt(2 * areaLimit * (dy / dx)));
250 | }
251 | 
252 | function leftCornerOffset(leftCorner, offset) { return leftCorner.maxX - offset; }
253 | function rightCornerOffset(rightCorner, offset) { return rightCorner.x + offset; }
254 | function leftBoxOffset(box) { return box.x; }
255 | function rightBoxOffset(box) { return box.maxX; }
256 | 
257 | function adaptiveOffsetFnGenerator(getTopCorner, getBottomCorner, getBoxOffset, getCornerOffset) {
258 | return function(y1, y2, areaLimit) { // y2 >= y1
259 |     if (!this.rect.overlapsYRange(y1, y2))
260 |         return [{x: undefined, height: y2 - y1}];
261 | 
262 |     var offsets = [];
263 | 
264 |     if (y1 < this.rect.y)
265 |         offsets.push({x: undefined, height: this.rect.y - y1});
266 | 
267 |     var offsetHeight, minY, maxY, y, yi, xi,
268 |         topCorner = getTopCorner.call(this),
269 |         bottomCorner = getBottomCorner.call(this),
270 |         boxArea = new Rect(this.rect.x, topCorner.maxY, this.rect.width, bottomCorner.y - topCorner.maxY);
271 | 
272 |     if (topCorner.overlapsYRange(y1, y2)) {
273 |         offsetHeight = computeOffsetHeight(topCorner.width, topCorner.height, areaLimit);
274 |         minY = Math.max(topCorner.y, y1);
275 |         maxY = Math.min(topCorner.maxY, y2);
276 |         for (y = minY; y < maxY; y += offsetHeight) {
277 |             yi = topCorner.maxY - Math.min(y + offsetHeight, maxY);
278 |             xi = ellipseXIntercept(yi, topCorner.width, topCorner.height);
279 |             offsets.push({height: Math.min(offsetHeight, maxY - y), x: getCornerOffset(topCorner, xi) });
280 |         }
281 |     }
282 | 
283 |     minY = Math.max(boxArea.y, y1);
284 |     maxY = Math.min(boxArea.maxY, y2);
285 |     if (boxArea.overlapsYRange(y1, y2))
286 |         offsets.push({x: getBoxOffset(boxArea), height: maxY - minY });
287 | 
288 |     if (bottomCorner.overlapsYRange(y1, y2)) {
289 |         offsetHeight = computeOffsetHeight(bottomCorner.width, bottomCorner.height, areaLimit);
290 |         minY = Math.max(y1, bottomCorner.y);
291 |         maxY = Math.min(bottomCorner.maxY, y2);
292 |         for (y = minY; y < maxY; y += offsetHeight) {
293 |             yi = y - bottomCorner.y;
294 |             xi = ellipseXIntercept(yi, bottomCorner.width, bottomCorner.height);
295 |             offsets.push({height: Math.min(offsetHeight, maxY - y), x: getCornerOffset(bottomCorner, xi) });
296 |         }
297 |     }
298 | 
299 |     if (y2 > this.rect.maxY)
300 |         offsets.push({x: undefined, height: y2 - this.rect.maxY});
301 | 
302 |     return offsets;
303 | };
304 | }
305 | 
306 | RoundedRect.prototype.rightExclusionOffsets = adaptiveOffsetFnGenerator(
307 |     RoundedRect.prototype.topRightCorner,
308 |     RoundedRect.prototype.bottomRightCorner,
309 |     rightBoxOffset,
310 |     rightCornerOffset);
311 | 
312 | RoundedRect.prototype.leftExclusionOffsets = adaptiveOffsetFnGenerator(
313 |     RoundedRect.prototype.topLeftCorner,
314 |     RoundedRect.prototype.bottomLeftCorner,
315 |     leftBoxOffset,
316 |     leftCornerOffset);
317 | 


--------------------------------------------------------------------------------
/src/shape-info.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright 2014 Adobe Systems Inc.;
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | */
 15 | 
 16 | function createRoundedRectForCircle(circle, margin) {
 17 |     var r = circle.r + margin;
 18 |     var c = new Size(r, r);
 19 |     return new RoundedRect(new Rect(circle.cx - r, circle.cy - r, r * 2, r * 2), c, c, c, c);
 20 | }
 21 | 
 22 | function createRoundedRectForEllipse(ellipse, margin) {
 23 |     var c = new Size(ellipse.rx + margin, ellipse.ry + margin);
 24 |     return new RoundedRect(new Rect(ellipse.cx - c.width, ellipse.cy - c.height, c.width * 2, c.height * 2), c, c, c, c);
 25 | }
 26 | 
 27 | function createRoundedRectForInset(inset, margin) {
 28 |     function toSize(r) { return new Size(r[0] + margin, r[1] + margin); }
 29 |     var topLeft = toSize(inset.radii[0]);
 30 |     var topRight = toSize(inset.radii[1]);
 31 |     var bottomRight = toSize(inset.radii[2]);
 32 |     var bottomLeft = toSize(inset.radii[3]);
 33 |     var rect = new Rect(inset.x - margin, inset.y - margin, inset.width + 2 * margin, inset.height + 2 * margin);
 34 |     return new RoundedRect(rect, topLeft, topRight, bottomLeft, bottomRight);
 35 | }
 36 | 
 37 | function createRoundedRectForBox(box, margin) {
 38 |     function toSize(r) { return new Size(r[0] + margin, r[1] + margin); }
 39 |     var topLeft = toSize(box.radii[0]),
 40 |         topRight = toSize(box.radii[1]),
 41 |         bottomRight = toSize(box.radii[2]),
 42 |         bottomLeft = toSize(box.radii[3]);
 43 |     // This box is at 0,0 relative to its sizing box (itself)
 44 |     var rect = new Rect(-margin, -margin, box.width + 2 * margin, box.height + 2 * margin);
 45 |     return new RoundedRect(rect, topLeft, topRight, bottomLeft, bottomRight);
 46 | }
 47 | 
 48 | function createRaster(url, box, shapeImageThreshold, shapeMargin, clip, doLayout) {
 49 |     var clipRect = new Rect(clip.x, clip.y, clip.width, clip.height);
 50 |     return new Raster(url, box, shapeImageThreshold, shapeMargin, clipRect, doLayout);
 51 | }
 52 | 
 53 | function createPolygon(polygon, shapeMargin) {
 54 |     return new Polygon(polygon.points, polygon.fillRule, shapeMargin);
 55 | }
 56 | 
 57 | function createShapeGeometry(shapeValue, whenReady) {
 58 |     var shapeMargin = (shapeValue.shapeMargin === undefined) ? 0 : shapeValue.shapeMargin;
 59 |     var geometry;
 60 |     if (shapeValue.shape) {
 61 |         switch (shapeValue.shape.type) {
 62 |         case "circle":
 63 |             geometry = createRoundedRectForCircle(shapeValue.shape, shapeMargin);
 64 |             break;
 65 |         case "ellipse":
 66 |             geometry = createRoundedRectForEllipse(shapeValue.shape, shapeMargin);
 67 |             break;
 68 |         case "inset":
 69 |             geometry = createRoundedRectForInset(shapeValue.shape, shapeMargin);
 70 |             if (!geometry.isRenderable())
 71 |                 geometry.adjustRadii();
 72 |             break;
 73 |         case "polygon":
 74 |             geometry = createPolygon(shapeValue.shape, shapeMargin);
 75 |             break;
 76 |         }
 77 |         whenReady();
 78 |         return geometry;
 79 |     }
 80 | 
 81 |     if (shapeValue.url)
 82 |         return createRaster(shapeValue.url, shapeValue.box, shapeValue.shapeImageThreshold, shapeMargin, shapeValue.clip, whenReady);
 83 | 
 84 |     if (shapeValue.box) {
 85 |         geometry = createRoundedRectForBox(shapeValue.box, shapeMargin);
 86 |         whenReady();
 87 |         return geometry;
 88 |     }
 89 | 
 90 |     console.error("Unrecognized shape");
 91 | }
 92 | 
 93 | 
 94 | function ShapeInfo(element) {
 95 |     this.metrics = new Metrics(element);
 96 |     var parserSettings = {
 97 |         metrics: this.metrics,
 98 |         shapeOutside: element.getAttribute('data-shape-outside'),
 99 |         shapeMargin: element.getAttribute('data-shape-margin'),
100 |         shapeImageThreshold: element.getAttribute('data-shape-image-threshold')
101 |     };
102 |     this.shapeValue = new ShapeValue(parserSettings);
103 | 
104 |     var self = this;
105 |     this.geometry = createShapeGeometry(this.shapeValue, function() {
106 |         self.ready = true;
107 |         if (self.callback)
108 |             self.callback();
109 |     });
110 | }
111 | 
112 | ShapeInfo.prototype.onReady = function(callback) {
113 |     if (this.ready)
114 |         callback();
115 |     else
116 |         this.callback = callback;
117 | };
118 | 
119 | ShapeInfo.prototype.leftExclusionEdge = function(line) { // { top, bottom, left, right }
120 |     return this.geometry ? this.geometry.leftExclusionEdge(line.top, line.bottom) : line.left;
121 | };
122 | 
123 | ShapeInfo.prototype.rightExclusionEdge = function(line) { // { top, bottom, left, right }
124 |     return this.geometry ? this.geometry.rightExclusionEdge(line.top, line.bottom) : line.right;
125 | };
126 | 
127 | function exclusionEdgeValue(x) { return x === undefined ? 0 : x; }
128 | 
129 | ShapeInfo.prototype.computeStepOffsets = function(step) {
130 |     var offset, offsets = [];
131 |     for (var i = 0; i < Math.ceil(this.metrics.marginBox.height / step); i++) {
132 |         var lineBounds = {
133 |             left: 0,
134 |             right: this.shapeValue.box.width,
135 |             top: i * step,
136 |             bottom: Math.min((i + 1) * step, this.metrics.marginBox.height)
137 |         };
138 | 
139 |         // transform to shape coordinates
140 |         lineBounds.top -= (this.metrics.margins[0] + this.shapeValue.box.y);
141 |         lineBounds.bottom -= (this.metrics.margins[0] + this.shapeValue.box.y);
142 | 
143 |         // get the offset relative to the margin box
144 |         if (this.metrics.cssFloat === 'left') {
145 |             offset = this.rightExclusionEdge(lineBounds);
146 |             offset = (offset === undefined ? 0 : offset + this.shapeValue.box.x + this.metrics.margins[3]);
147 |         } else {
148 |             offset = this.leftExclusionEdge(lineBounds);
149 |             offset = (offset === undefined ? 0 : this.metrics.marginBox.width - (offset + this.shapeValue.box.x + this.metrics.margins[3]));
150 |         }
151 | 
152 |         // push the margin box relative offsets
153 |         offsets.push({
154 |             cssFloat: this.metrics.cssFloat,
155 |             top: lineBounds.top + this.shapeValue.box.y + this.metrics.margins[0],
156 |             bottom: lineBounds.bottom + this.shapeValue.box.y + this.metrics.margins[0],
157 |             'offset': Math.min(offset, this.metrics.marginBox.width)
158 |         });
159 |     }
160 | 
161 |     return offsets;
162 | };
163 | 
164 | ShapeInfo.prototype.computeAdaptiveOffsets = function(limit) {
165 |     var dx = this.shapeValue.box.x + this.metrics.margins[3];
166 |     var dy = this.metrics.margins[0] + this.shapeValue.box.y;
167 |     var offsets = (this.metrics.cssFloat === 'left') ?
168 |         this.geometry.rightExclusionOffsets(-dy, this.metrics.marginBox.height - dy, limit) :
169 |         this.geometry.leftExclusionOffsets(-dy, this.metrics.marginBox.height - dy, limit);
170 | 
171 |     var result = [];
172 |     var y = 0;
173 |     for (var i = 0; i < offsets.length; i++) {
174 |         var layoutOffset;
175 |         if (offsets[i].x === undefined)
176 |             layoutOffset = 0;
177 |         else {
178 |             layoutOffset = this.metrics.cssFloat == 'left' ?
179 |                 offsets[i].x + dx :
180 |                 this.metrics.marginBox.width - (offsets[i].x + dx);
181 |             layoutOffset = Math.min(layoutOffset, this.metrics.marginBox.width);
182 |         }
183 |         result.push({offset: layoutOffset, top: y, bottom: y + offsets[i].height, cssFloat: this.metrics.cssFloat});
184 |         y += offsets[i].height;
185 |     }
186 | 
187 |     return result;
188 | };
189 | 
190 | ShapeInfo.prototype.offsets = function(parameters) {
191 |     if (this.geometry instanceof RoundedRect)
192 |         return (parameters && parameters.mode) == "step" ? this.computeStepOffsets(parameters.step) : this.computeAdaptiveOffsets(parameters.limit);
193 |     return  this.computeStepOffsets(parameters.step);
194 | };
195 | 


--------------------------------------------------------------------------------
/src/shape-polyfill.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright 2014 Adobe Systems Inc.;
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | */
 15 | 
 16 | function Polyfill(scope) {
 17 |     this.scope = scope;
 18 | 
 19 |     var script = document.currentScript;
 20 |     if (!script) {
 21 |         script = document.getElementsByTagName('script');
 22 |         script = script[script.length - 1];
 23 |     }
 24 |     var self = this;
 25 |     var autoRun = script.getAttribute('data-auto-run') !== 'false';
 26 | 
 27 |     // IE < 9 uses attachEvent rather than addEventListener
 28 |     if (autoRun && scope.addEventListener) {
 29 |         scope.addEventListener('load', function() {
 30 |             self.run(/*{mode: "step"}*/);
 31 |         });
 32 |     }
 33 | }
 34 | 
 35 | function fakeIt(element, offsets) {
 36 |     var wrapper = document.createElement('div'),
 37 |         styles;
 38 | 
 39 |     offsets.forEach(function(offset, i) {
 40 |         var height = offset.bottom - offset.top;
 41 |         var sandbag = document.createElement('div');
 42 |         sandbag.className = "sandbag";
 43 |         styles = {
 44 |             cssFloat: offset.cssFloat,
 45 |             width: offset.offset + 'px',
 46 |             height: height + 'px',
 47 |             clear: offset.cssFloat
 48 |         };
 49 |         for (var prop in styles)
 50 |             sandbag.style[prop] = styles[prop];
 51 |         wrapper.appendChild(sandbag);
 52 |     });
 53 | 
 54 |     styles = {
 55 |         position: 'relative',
 56 |         width: 'auto',
 57 |         height: '0',
 58 |         clear: 'both',
 59 |         pointerEvents: 'none'
 60 |     };
 61 | 
 62 |     for (var prop in styles)
 63 |         wrapper.style[prop] = styles[prop];
 64 | 
 65 |     var parent = element.parentNode, subwrapper,
 66 |         computedStyle = getComputedStyle(parent),
 67 |         borderHeight = parseFloat(computedStyle.borderTop) + parseFloat(computedStyle.borderBottom);
 68 | 
 69 |     styles = {
 70 |         position: 'absolute',
 71 |         top: '0',
 72 |         width: '100%', // will fill the whole width, FF does 'auto' differently
 73 |         height: parent.clientHeight - borderHeight,
 74 |         left: '0'
 75 |     };
 76 | 
 77 |     subwrapper = document.createElement('div');
 78 |     for (prop in styles)
 79 |         subwrapper.style[prop] = styles[prop];
 80 |     wrapper.appendChild(subwrapper);
 81 | 
 82 |     if (element.parentNode)
 83 |         element.parentNode.insertBefore(wrapper, element);
 84 |     subwrapper.appendChild(element);
 85 | 
 86 |     wrapper.setAttribute('data-shape-outside-container', 'true');
 87 | }
 88 | 
 89 | Polyfill.prototype.polyfill = function(element, settings) {
 90 |     var computedStyle = getComputedStyle(element);
 91 | 
 92 |     if (!(/left|right/.test(computedStyle.cssFloat) && element.getAttribute('data-shape-outside')))
 93 |         return;
 94 | 
 95 |     // ideally this would default to lineHeight, but 'normal' is a valid computed value
 96 |     // and is up to the UA
 97 |     var step = settings && settings.step || parseInt(computedStyle.fontSize); // used when mode is "step"
 98 |     var mode = settings && settings.mode || "adaptive";  
 99 |     var limit = settings && settings.limit || step * 1.8;
100 |     var shapeInfo = new ShapeInfo(element);
101 | 
102 |     var self = this;
103 |     shapeInfo.onReady(function() {
104 |         var offsets = shapeInfo.offsets({mode:mode, limit:limit, step:step});
105 |         fakeIt(element, offsets);
106 |         if (settings && settings.callback && typeof settings.callback === 'function')
107 |             settings.callback.call(self.scope);
108 |     });
109 | };
110 | 
111 | Polyfill.prototype.removePolyfill = function(element) {
112 |     var oldParent = element.parentNode;
113 |     for (oldParent = element.parentNode;
114 |         oldParent && oldParent.hasAttribute && !oldParent.hasAttribute('data-shape-outside-container');
115 |         oldParent = oldParent.parentNode);
116 | 
117 |     if (!oldParent || !oldParent.hasAttribute)
118 |         return;
119 | 
120 |     oldParent.parentNode.insertBefore(element, oldParent);
121 |     oldParent.parentNode.removeChild(oldParent);
122 | };
123 | 
124 | function debounce(func, wait) {
125 |     var timeout;
126 |     return function() {
127 |         var context = this, args = arguments;
128 |         clearTimeout(timeout);
129 |         timeout = setTimeout(function() {
130 |             timeout = null;
131 |             func.apply(context, args);
132 |         }, wait);
133 |     };
134 | }
135 | 
136 | Polyfill.prototype.run = function(settings) {
137 |     var self = this;
138 | 
139 |     var force = settings && settings.force,
140 |         forceLayout = force && (force === this.Force.Layout || force === this.Force.LayoutStyles),
141 |         forceStyles = force && (force === this.Force.Styles || force === this.Force.LayoutStyles);
142 | 
143 |     if (force === this.Force.LayoutStyles)
144 |         settings.force = this.Force.Layout;
145 |     else if (force)
146 |         delete settings.force;
147 | 
148 |     if (this.hasNativeSupport === undefined) {
149 |         var div = document.createElement('div');
150 |         var properties = ['shape-outside', '-webkit-shape-outside'];
151 |         properties.forEach(function(property) {
152 |             div.style.setProperty(property, 'content-box');
153 |             self.hasNativeSupport = self.hasNativeSupport || div.style.getPropertyValue(property);
154 |         });
155 |     }
156 | 
157 |     if (this.hasNativeSupport && !force)
158 |         return;
159 | 
160 |     if (!this.stylesLoaded || forceStyles) {
161 |         this.stylesLoaded = true;
162 | 
163 |         new StylePolyfill(function(rules) {
164 |             rules.forEach(function(rule) {
165 |                 var els = document.querySelectorAll(rule.selector);
166 |                 for (var i = 0; i < els.length; i++)
167 |                     els[i].setAttribute('data-' + rule.property, rule.value);
168 |             });
169 | 
170 |             self.run(settings);
171 |         });
172 | 
173 |         var relayout = debounce(function() {
174 |             self.teardown();
175 |             self.run(settings);
176 |         }, 300);
177 |         this.scope.addEventListener('resize', relayout);
178 | 
179 |         return;
180 |     }
181 | 
182 |     var els = document.querySelectorAll('[data-shape-outside]');
183 |     for (var i = 0; i < els.length; i++)
184 |         this.polyfill(els[i], settings);
185 | };
186 | 
187 | Polyfill.prototype.teardown = function() {
188 |     var els = document.querySelectorAll('[data-shape-outside]');
189 |     for (var i = 0; i < els.length; i++)
190 |         this.removePolyfill(els[i]);
191 | };
192 | 
193 | Polyfill.prototype.Force = { Layout: 'force-layout', Styles: 'force-styles', LayoutStyles: 'force-layout-styles' };
194 | if (Object.freeze)
195 |     Polyfill.prototype.Force = Object.freeze(Polyfill.prototype.Force);
196 | 


--------------------------------------------------------------------------------
/src/shape-value.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright 2014 Adobe Systems Inc.;
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | */
 15 | 
 16 | /**
 17 |  * ShapeValue may contain { shape, box, url, shapeMargin, shapeImageThreshold }
 18 |  * Format for { shape } property value, with coordinates resolved against the reference box
 19 |  * Arrays are generally ordered as margins: t, r, b, l
 20 |  * Except for radius arrays, which are w/h pairs ordered tl, tr, br, bl
 21 |  * { type: 'circle', cx: 10, cy: 10, r: 10 }
 22 |  * { type: 'ellipse', cx: 10, cy: 10, rx: 10, ry: 10 }
 23 |  * { type: 'inset', x, y, width, height, insets: [10, 10, 10, 10], radii: [[5, 5], [5, 5], [5, 5], [5, 5]] }
 24 |  * { type: 'polygon', fill-rule: 'evenodd', points: [{x, y}] }
 25 |  * Format for { box } property value, the reference box for shapes. Coordinates are relative to the border box.
 26 |  * { x: 10, y: 10, width: 10, height: 10, radii: [[5, 5], [5, 5], [5, 5], [5, 5]] }
 27 |  * Format for { url } property value
 28 |  * { url: 'http://www.abc.com/123.png' }
 29 |  **/
 30 | /* params: {
 31 |  *  metrics, //An element's Metrics object
 32 |  *  shapeOutside, //The rest are unresolved values
 33 |  *  shapeMargin,
 34 |  *  shapeImageThreshold,
 35 |  * }
 36 |  */
 37 | function ShapeValue(params) {
 38 |     if (!(params && params.metrics && params.shapeOutside)) {
 39 |         console.error('ShapeValue requires at least a metrics object and shape-outside string');
 40 |         return;
 41 |     }
 42 |     this.url = this.parseUrl(params.shapeOutside);
 43 |     this.box = this.parseBox(this.url ? 'content-box' : params.shapeOutside, params.metrics);
 44 |     this.shape = this.parseBasicShape(params.shapeOutside, this.box, params.metrics);
 45 |     this.clip = this.computeClip(this.box, params.metrics);
 46 |     this.shapeMargin = this.parseShapeMargin(params.shapeMargin, this.box, params.metrics);
 47 |     this.shapeImageThreshold = this.parseShapeImageThreshold(params.shapeImageThreshold);
 48 | }
 49 | 
 50 | ShapeValue.prototype.parseUrl = function(text) {
 51 |     var url = /url\((.*)\)/.exec(text);
 52 |     if (!url)
 53 |         return null;
 54 |     url = url[1];
 55 |     url = url.replace(/^['"]/, '');
 56 |     url = url.replace(/['"]$/, '');
 57 |     return url;
 58 | };
 59 | 
 60 | function adjustBounds(bounds, sign, offsets) {
 61 |     var top = offsets.reduce(function(prev, curr) { return prev + curr[0]; }, 0);
 62 |     var right = offsets.reduce(function(prev, curr) { return prev + curr[1]; }, 0);
 63 |     var bottom = offsets.reduce(function(prev, curr) { return prev + curr[2]; }, 0);
 64 |     var left = offsets.reduce(function(prev, curr) { return prev + curr[3]; }, 0);
 65 | 
 66 |     bounds.x -= sign * left;
 67 |     bounds.y -= sign * top;
 68 |     bounds.width += sign * (left + right);
 69 |     bounds.height += sign * (top + bottom);
 70 | }
 71 | 
 72 | // See http://dev.w3.org/csswg/css-shapes/#margin-box
 73 | function adjustRadius(radius, sign, offset) {
 74 |     if (sign < 0)
 75 |         return Math.max(radius + sign * offset, 0);
 76 |     var ratio = Math.abs(radius / offset);
 77 |     if (ratio < 1)
 78 |         return Math.max(radius + offset * (1 + Math.pow(ratio - 1, 3)), 0);
 79 |     return radius + offset;
 80 | }
 81 | 
 82 | function adjustRadii(radii, sign, offsets) {
 83 |     var top = offsets.reduce(function(prev, curr) { return prev + curr[0]; }, 0);
 84 |     var right = offsets.reduce(function(prev, curr) { return prev + curr[1]; }, 0);
 85 |     var bottom = offsets.reduce(function(prev, curr) { return prev + curr[2]; }, 0);
 86 |     var left = offsets.reduce(function(prev, curr) { return prev + curr[3]; }, 0);
 87 | 
 88 |     // Still need to max these with 0
 89 |     radii[0][0] = adjustRadius(radii[0][0], sign, left);
 90 |     radii[0][1] = adjustRadius(radii[0][1], sign, top);
 91 | 
 92 |     radii[1][0] = adjustRadius(radii[1][0], sign, right);
 93 |     radii[1][1] = adjustRadius(radii[1][1], sign, top);
 94 | 
 95 |     radii[2][0] = adjustRadius(radii[2][0], sign, right);
 96 |     radii[2][1] = adjustRadius(radii[2][1], sign, bottom);
 97 | 
 98 |     radii[3][0] = adjustRadius(radii[3][0], sign, left);
 99 |     radii[3][1] = adjustRadius(radii[3][1], sign, bottom);
100 | }
101 | 
102 | ShapeValue.prototype.parseBox = function(text, metrics) {
103 |     var box = /margin-box|border-box|padding-box|content-box/.exec(text);
104 |     if (!box)
105 |         box = 'margin-box';
106 |     else
107 |         box = box[0];
108 |     var radii = JSON.parse(JSON.stringify(metrics.borderBox.radii));
109 |     var result = { text: box, x: metrics.borderBox.x, y: metrics.borderBox.y, width: metrics.borderBox.width, height: metrics.borderBox.height, 'radii': radii };
110 |     switch (box) {
111 |         case 'content-box':
112 |             adjustBounds(result, -1, [metrics.paddings, metrics.borders]);
113 |             adjustRadii(result.radii, -1, [metrics.paddings, metrics.borders]);
114 |             break;
115 |         case 'padding-box':
116 |             adjustBounds(result, -1, [metrics.borders]);
117 |             adjustRadii(result.radii, -1, [metrics.borders]);
118 |             break;
119 |         case 'border-box':
120 |             break;
121 |         case 'margin-box':
122 |             adjustBounds(result, 1, [metrics.margins]);
123 |             adjustRadii(result.radii, 1, [metrics.margins]);
124 |             break;
125 |     }
126 |     return result;
127 | };
128 | 
129 | function pluck(arr, index) {
130 |     return arr.map(function(item) {
131 |         return item[index];
132 |     });
133 | }
134 | 
135 | ShapeValue.prototype.printShape = function() {
136 |     if (this.shape) {
137 |         switch(this.shape.type) {
138 |             case 'inset':
139 |                 return 'inset(' + this.shape.insets.join(' ') +
140 |                     ' round ' + pluck(this.shape.radii, 0).join(' ') +
141 |                     ' / ' + pluck(this.shape.radii, 1).join(' ') + ')';
142 |             case 'circle':
143 |                 return 'circle(' + this.shape.r + ' at ' + this.shape.cx + ' ' + this.shape.cy + ')';
144 |             case 'ellipse':
145 |                 return 'ellipse(' + this.shape.rx + ' ' + this.shape.ry +
146 |                     ' at ' + this.shape.cx + ' ' + this.shape.cy + ')';
147 |             case 'polygon':
148 |                 return 'polygon(' + this.shape.fillRule + ', ' +
149 |                     this.shape.points.map(function(point) { return point.x + ' ' + point.y; }).join(', ') +
150 |                     ')';
151 |             default: return 'not yet implemented for ' + this.shape.type;
152 |         }
153 |     }
154 |     return 'no shape specified';
155 | };
156 | 
157 | ShapeValue.prototype.printBox = function() {
158 |     if (this.box) {
159 |         return this.box.text + ' { x: ' + this.box.x + ', y: ' + this.box.y +
160 |             ', width: ' + this.box.width + ', height: ' + this.box.height +
161 |             ', radii: ' + pluck(this.box.radii, 0).join(' ') + ' / ' + pluck(this.box.radii, 1).join(' ') + ' }';
162 |     }
163 |     return 'no box specified';
164 | };
165 | 
166 | ShapeValue.prototype.parseBasicShape = function(text, box, metrics) {
167 |     var shape = /(inset|circle|ellipse|polygon)\((.*)\)/.exec(text);
168 |     if (!shape)
169 |         return null;
170 | 
171 |     var command = shape[1],
172 |         args = shape[2] ? shape[2] : '';
173 | 
174 |     switch(command) {
175 |     case 'inset':
176 |         return this.parseInset(args, box, metrics);
177 |     case 'circle':
178 |         return this.parseCircle(args, box, metrics);
179 |     case 'ellipse':
180 |         return this.parseEllipse(args, box, metrics);
181 |     case 'polygon':
182 |         return this.parsePolygon(args, box, metrics);
183 |     default: return null;
184 |     }
185 | };
186 | 
187 | ShapeValue.prototype.parseInset = function(args, box, metrics) {
188 |     // use the 'ro' in round and '/' as delimiters
189 |     var re = /((?:[^r]|r(?!o))*)?\s*(?:round\s+([^\/]*)(?:\s*\/\s*(.*))?)?/;
190 |     args = re.exec(args);
191 |     var result = {
192 |         type: 'inset',
193 |         insets: [0, 0, 0, 0],
194 |         radii: [[0, 0], [0, 0], [0, 0], [0, 0]]
195 |     };
196 |     if (args && args[1]) {
197 |         var insets = args[1].trim();
198 |         insets = insets.split(/\s+/);
199 |         result.insets[0] = insets[0];
200 |         result.insets[1] = insets.length > 1 ? insets[1] : result.insets[0];
201 |         result.insets[2] = insets.length > 2 ? insets[2] : result.insets[0];
202 |         result.insets[3] = insets.length > 3 ? insets[3] : result.insets[1];
203 |         result.insets[0] = metrics.toPixels(result.insets[0], box.height);
204 |         result.insets[1] = metrics.toPixels(result.insets[1], box.width);
205 |         result.insets[2] = metrics.toPixels(result.insets[2], box.height);
206 |         result.insets[3] = metrics.toPixels(result.insets[3], box.width);
207 |     }
208 | 
209 |     var radii;
210 |     if (args && args[2]) {
211 |         radii = args[2].trim();
212 |         radii = radii.split(/\s+/);
213 |         if (radii.length < 2) radii.push(radii[0]);
214 |         if (radii.length < 3) radii.push(radii[0]);
215 |         if (radii.length < 4) radii.push(radii[1]);
216 | 
217 |         result.radii = radii.map(function(radius) {
218 |             radius = metrics.toPixels(radius, box.width);
219 |             return [radius, radius];
220 |         });
221 |     }
222 | 
223 |     if (args && args[3]) {
224 |         radii = args[3].trim();
225 |         radii = radii.split(/\s+/);
226 |         if (radii.length < 2) radii.push(radii[0]);
227 |         if (radii.length < 3) radii.push(radii[0]);
228 |         if (radii.length < 4) radii.push(radii[1]);
229 | 
230 |         radii.forEach(function(radius, i) {
231 |             result.radii[i][1] = metrics.toPixels(radius, box.height);
232 |         });
233 |     }
234 | 
235 |     result.x = result.insets[3];
236 |     result.y = result.insets[0];
237 |     result.width = box.width - (result.insets[1] + result.insets[3]);
238 |     result.height = box.height - (result.insets[0] + result.insets[2]);
239 | 
240 |     return result;
241 | };
242 | 
243 | function positionOffsetToPixels(offset, extent, metrics) {
244 |     offset = offset.split(/\s+/);
245 |     var direction = 'TopLeft';
246 |     var length = 0;
247 | 
248 |     switch(offset[0]) {
249 |     case 'top': case 'left': break;
250 |     case 'bottom': case 'right': direction = 'BottomRight'; break;
251 |     case 'center': length = extent / 2.0; break;
252 |     default: length = metrics.toPixels(offset[0], extent);
253 |     }
254 | 
255 |     if (offset.length > 1)
256 |         length = metrics.toPixels(offset[1], extent);
257 | 
258 |     return direction === 'TopLeft' ? length : extent - length;
259 | }
260 | 
261 | function radiusToPixels(r, sides, extent, metrics) {
262 |     if (r === 'closest-side')
263 |         return Math.min.apply(null, sides);
264 |     else if (r === 'farthest-side')
265 |         return Math.max.apply(null, sides);
266 |     else
267 |         return metrics.toPixels(r, extent);
268 | }
269 | 
270 | // Parse but do not resolve yet (shared by circle and ellipse)
271 | ShapeValue.prototype.parseEllipsoid = function(args) {
272 |     // use the 'a' in 'at' as the delimiter
273 |     var re = /((?:[^a]|a(?!t))*)?\s*(?:at\s+(.*))?/;
274 |     args = re.exec(args);
275 | 
276 |     var result = { };
277 | 
278 |     if (args && args[1]) {
279 |         var radii = args[1].trim();
280 |         radii = radii.split(/\s+/);
281 |         result.rx = radii[0];
282 |         result.ry = radii.length > 1 ? radii[1] : radii[0];
283 |     } else {
284 |         result.rx = result.ry = 'closest-side';
285 |     }
286 | 
287 |     var resolvedPositions = [];
288 |     if (args && args[2]) {
289 |         var positions = args[2].trim();
290 |         positions = positions.split(/\s+/);
291 |         var canMergeBack = false;
292 |         positions.forEach(function(position) {
293 |             // if it is an offset
294 |             if (/\d+/.test(position) && canMergeBack)
295 |                 resolvedPositions[resolvedPositions.length - 1] += ' ' + position;
296 |             else
297 |                 resolvedPositions.push(position);
298 |             // it's a non-center keyword and there are more than two inputs
299 |             canMergeBack = (/top|bottom|left|right/.test(position) && positions.length > 2);
300 |         });
301 |     }
302 |     while(resolvedPositions.length < 2)
303 |         resolvedPositions.push('center');
304 |     if (/top|bottom/.test(resolvedPositions[0]) || /left|right/.test(resolvedPositions[1])) {
305 |         var swap = resolvedPositions[0];
306 |         resolvedPositions[0] = resolvedPositions[1];
307 |         resolvedPositions[1] = swap;
308 |     }
309 |     result.cx = resolvedPositions[0];
310 |     result.cy = resolvedPositions[1];
311 | 
312 |     return result;
313 | };
314 | 
315 | ShapeValue.prototype.parseCircle = function(args, box, metrics) {
316 |     var result = this.parseEllipsoid(args);
317 |     result.type = 'circle';
318 |     result.cx = positionOffsetToPixels(result.cx, box.width, metrics);
319 |     result.cy = positionOffsetToPixels(result.cy, box.height, metrics);
320 |     result.r = radiusToPixels(result.rx, [
321 |         Math.abs(result.cx), Math.abs(box.width - result.cx),
322 |         Math.abs(result.cy), Math.abs(box.height - result.cy)
323 |     ], Math.sqrt((box.width * box.width + box.height * box.height) / 2), metrics);
324 |     delete result.rx;
325 |     delete result.ry;
326 |     return result;
327 | };
328 | 
329 | ShapeValue.prototype.parseEllipse = function(args, box, metrics) {
330 |     var result = this.parseEllipsoid(args);
331 |     result.type = 'ellipse';
332 |     result.cx = positionOffsetToPixels(result.cx, box.width, metrics);
333 |     result.cy = positionOffsetToPixels(result.cy, box.height, metrics);
334 |     result.rx = radiusToPixels(result.rx, [Math.abs(result.cx), Math.abs(box.width - result.cx)], box.width, metrics);
335 |     result.ry = radiusToPixels(result.ry, [Math.abs(result.cy), Math.abs(box.height - result.cy)], box.height, metrics);
336 |     return result;
337 | };
338 | 
339 | ShapeValue.prototype.parsePolygon = function(args, box, metrics) {
340 |     args = args.split(/\s*,\s*/);
341 |     var rule = 'nonzero';
342 |     if (args.length > 0 && /nonzero|evenodd/.test(args[0])) {
343 |         rule = args[0].trim();
344 |         args = args.slice(1);
345 |     }
346 |     var points = args.map(function(point) {
347 |         var coords = point.split(/\s+/);
348 |         return { x: metrics.toPixels(coords[0], box.width), y: metrics.toPixels(coords[1], box.height) };
349 |     });
350 |     return {
351 |         type: 'polygon',
352 |         'fillRule': rule,
353 |         'points': points
354 |     };
355 | };
356 | 
357 | ShapeValue.prototype.computeClip = function(referenceBox, metrics)
358 | {
359 |     // margins: [marginTop, marginRight, marginBottom, marginLeft]
360 |     var marginLeft = metrics.margins[3];
361 |     var marginTop = metrics.margins[0];
362 |     var marginWidth = metrics.margins[3] + metrics.margins[1];
363 |     var marginHeight = metrics.margins[0] + metrics.margins[2];
364 |     return {x: -referenceBox.x - marginLeft, y: -referenceBox.y - marginTop, width: metrics.borderBox.width + marginWidth, height: metrics.borderBox.height + marginHeight};
365 | };
366 | 
367 | ShapeValue.prototype.parseShapeMargin = function(margin, box, metrics) {
368 |     return parseInt(margin) ? Math.max(0, metrics.toPixels(margin, box.width)) : 0;
369 | };
370 | 
371 | ShapeValue.prototype.parseShapeImageThreshold = function(threshold) {
372 |     var value = parseFloat(threshold);  // FIXME: disallow non-numerical values
373 |     return value ? Math.min(Math.max(0, value), 1.0) : 0;
374 | };
375 | 


--------------------------------------------------------------------------------
/src/style-polyfill.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright 2014 Adobe Systems Inc.;
  3 | Licensed under the Apache License, Version 2.0 (the "License");
  4 | you may not use this file except in compliance with the License.
  5 | You may obtain a copy of the License at
  6 | 
  7 | http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 | Unless required by applicable law or agreed to in writing, software
 10 | distributed under the License is distributed on an "AS IS" BASIS,
 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | See the License for the specific language governing permissions and
 13 | limitations under the License.
 14 | */
 15 | 
 16 | function getStyleSheetElements() {
 17 |     var doc = document,
 18 |         stylesheets = [],
 19 |         i, len;
 20 | 
 21 |     if (typeof doc.querySelectorAll == 'function') {
 22 |         // shiny new browsers
 23 |         stylesheets = doc.querySelectorAll('link[rel="stylesheet"], style');
 24 | 
 25 |         // make it an array
 26 |         stylesheets = Array.prototype.slice.call(stylesheets, 0);
 27 |     } else {
 28 |         // old and busted browsers
 29 | 
 30 |         // <link rel="stylesheet">
 31 |         var tags = doc.getElementsByTagName("link");
 32 | 
 33 |         if (tags.length) {
 34 |             for (i = 0, len = tags.length; i < len; i++) {
 35 |                 if (tags[i].getAttribute('rel') === "stylesheet") {
 36 |                     stylesheets.push(tags[i]);
 37 |                 }
 38 |             }
 39 |         }
 40 | 
 41 |         // <style>
 42 |         tags = doc.getElementsByTagName("style");
 43 |         for (i=0, len = tags.length; i < len; i++) {
 44 |             stylesheets.push(tags[i]);
 45 |         }
 46 |     }
 47 | 
 48 |     return stylesheets;
 49 | }
 50 | 
 51 | function StyleSheet(source){
 52 |     this.source = source;
 53 |     this.url = source.href || null;
 54 |     this.cssText = '';
 55 | }
 56 | 
 57 | StyleSheet.prototype.load = function(onSuccess, onError, scope) {
 58 |     var self = this;
 59 | 
 60 |     // Loading external stylesheet
 61 |     if (this.url) {
 62 |         var xhr = new XMLHttpRequest();
 63 | 
 64 |         xhr.onreadystatechange = function() {
 65 |             if(xhr.readyState === 4) {
 66 |                 if (xhr.status === 200) {
 67 |                     self.cssText = xhr.responseText;
 68 |                     onSuccess.call(scope, self);
 69 |                 } else {
 70 |                     onError.call(scope, self);
 71 |                 }
 72 |             }
 73 |         };
 74 | 
 75 |         xhr.open('GET', this.url);
 76 |         try {
 77 |             xhr.send(null);
 78 |         }
 79 |         catch (e) {
 80 |             console.log("An error occurred loading a stylesheet, probably because we can't access the local file system");
 81 |             onError.call(scope, self);
 82 |         }
 83 |     } else {
 84 |         this.cssText = this.source.textContent;
 85 |         onSuccess.call(scope, self);
 86 |     }
 87 | };
 88 | 
 89 | function StyleLoader(callback) {
 90 |     if (!(this instanceof StyleLoader)) {
 91 |         return new StyleLoader(callback);
 92 |     }
 93 | 
 94 |     this.stylesheets = [];
 95 |     this.queueCount = 0;
 96 |     this.callback = callback || function(){};
 97 | 
 98 |     this.init();
 99 | }
100 | 
101 | StyleLoader.prototype.init = function() {
102 |     var els = getStyleSheetElements(),
103 |         len = els.length,
104 |         stylesheet,
105 |         i;
106 | 
107 |     this.queueCount = len;
108 | 
109 |     for (i = 0; i < len; i++) {
110 |         stylesheet = new StyleSheet(els[i]);
111 |         this.stylesheets.push(stylesheet);
112 |         stylesheet.load(this.onStyleSheetLoad, this.onStyleSheetError, this);
113 |     }
114 | };
115 | 
116 | StyleLoader.prototype.onStyleSheetLoad = function(stylesheet) {
117 |     this.queueCount--;
118 |     this.onComplete.call(this);
119 | };
120 | 
121 | 
122 | StyleLoader.prototype.onStyleSheetError = function(stylesheet) {
123 |     var len = this.stylesheets.length,
124 |         i;
125 | 
126 |     for (i = 0; i < len; i++) {
127 |         if (stylesheet.source === this.stylesheets[i].source) {
128 |             // remove the faulty stylesheet
129 |             this.stylesheets.splice(i, 1);
130 | 
131 |             this.queueCount--;
132 |             this.onComplete.call(this);
133 |             return;
134 |         }
135 |     }
136 | };
137 | 
138 | StyleLoader.prototype.onComplete = function() {
139 |     if (this.queueCount === 0) {
140 |         // run the callback after all stylesheet contents have loaded
141 |         this.callback.call(this, this.stylesheets);
142 |     }
143 | };
144 | 
145 | function StylePolyfill(callback) {
146 |     this.callback = callback || function() {};
147 |     var self = this;
148 |     new StyleLoader(function(stylesheets) {
149 |         self.onStylesLoaded(stylesheets);
150 |     });
151 | }
152 | 
153 | StylePolyfill.prototype.onStylesLoaded = function(stylesheets) {
154 |     // use : and ; as delimiters, except between ()
155 |     // this will be sufficient for most, but not all cases, eg: rectangle(calc(100%))
156 |     var selector = "\\s*([^{}]*[^\\s])\\s*{[^\\}]*";
157 |     var value = "\\s*:\\s*((?:[^;\\(]|\\([^\\)]*\\))*)\\s*;";
158 | 
159 |     var re, match;
160 | 
161 |     var rules = [], properties = ["shape-outside", "shape-margin", "shape-image-threshold"];
162 |     properties.forEach(function(property) {
163 |         re = new RegExp(selector + "(" + property + ")" + value, "ig");
164 |         stylesheets.forEach(function(stylesheet) {
165 |             while ((match = re.exec(stylesheet.cssText)) !== null) {
166 |                 rules.push({
167 |                     selector: match[1],
168 |                     property: match[2],
169 |                     value: match[3]
170 |                 });
171 |             }
172 |         });
173 |     });
174 | 
175 |     this.callback(rules);
176 | };
177 | 


--------------------------------------------------------------------------------
/tests/metrics-tests.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset='utf-8'>
 4 | <title>Metrics Tests</title>
 5 | <link rel='stylesheet' href='../node_modules/mocha/mocha.css'>
 6 | </head>
 7 | <body>
 8 | <div id='mocha'></div>
 9 | <script src='../node_modules/mocha/mocha.js'></script>
10 | <script src='../node_modules/chai/chai.js'></script>
11 | <script src='../src/metrics.js'></script>
12 | <script src='metrics-tests.js'></script>
13 | <script>
14 | mocha.checkLeaks();
15 | 
16 | MetricsTests.register(mocha, chai.expect);
17 | 
18 | mocha.run();
19 | </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/tests/metrics-tests.js:
--------------------------------------------------------------------------------
  1 | var MetricsTests = function() {
  2 | 
  3 | function register(mocha, expect) {
  4 |     mocha.setup('bdd');
  5 | 
  6 |     var basicSuite = {
  7 |         name: 'Simple Metrics Validation',
  8 |         tests: [
  9 |         {
 10 |             name: 'all styles set in px',
 11 |             styles: {
 12 |                 margin: '10px',
 13 |                 border: '10px solid red',
 14 |                 padding: '10px',
 15 |                 width: '100px',
 16 |                 height: '100px',
 17 |                 borderRadius: '10px'
 18 |             },
 19 |             output: {
 20 |                 margins: [10, 10, 10, 10],
 21 |                 borders: [10, 10, 10, 10],
 22 |                 paddings: [10, 10, 10, 10],
 23 |                 marginBox: { x: -10, y: -10, width: 160, height: 160 },
 24 |                 borderBox: { x: 0, y: 0, width: 140, height: 140, radii: [[10, 10], [10, 10], [10, 10], [10, 10]] }
 25 |             }
 26 |         },
 27 |         {
 28 |             name: 'all styles set in em',
 29 |             styles: {
 30 |                 margin: '10em',
 31 |                 border: '10em solid red',
 32 |                 padding: '10em',
 33 |                 width: '100em',
 34 |                 height: '100em',
 35 |                 borderRadius: '10em',
 36 |                 fontSize: '10px'
 37 |             },
 38 |             output: {
 39 |                 margins: [100, 100, 100, 100],
 40 |                 borders: [100, 100, 100, 100],
 41 |                 paddings: [100, 100, 100, 100],
 42 |                 marginBox: { x: -100, y: -100, width: 1600, height: 1600 },
 43 |                 borderBox: { x: 0, y: 0, width: 1400, height: 1400, radii: [[100, 100], [100, 100], [100, 100], [100, 100]] }
 44 |             }
 45 |         },
 46 |         {
 47 |             name: 'styles set in %',
 48 |             parentStyles: {
 49 |                 width: '100px',
 50 |                 height: '100px',
 51 |             },
 52 |             styles: {
 53 |                 margin: '10%',
 54 |                 border: '10px solid red', // border cannot be %
 55 |                 padding: '10%',
 56 |                 width: '100px',
 57 |                 height: '100px',
 58 |                 borderRadius: '10%'
 59 |             },
 60 |             output: {
 61 |                 margins: [10, 10, 10, 10],
 62 |                 borders: [10, 10, 10, 10],
 63 |                 paddings: [10, 10, 10, 10],
 64 |                 marginBox: { x: -10, y: -10, width: 160, height: 160 },
 65 |                 borderBox: { x: 0, y: 0, width: 140, height: 140, radii: [[14, 14], [14, 14], [14, 14], [14, 14]] }
 66 |             }
 67 |         }
 68 |         ],
 69 |         runTest: function(test) {
 70 |             var fn = test.only ? it.only : it;
 71 |             fn(test.name, function() {
 72 |                 var parent;
 73 |                 if (test.parentStyles) {
 74 |                     parent = document.createElement('div');
 75 |                     Object.keys(test.parentStyles).forEach(function(prop) {
 76 |                         parent.style[prop] = test.parentStyles[prop];
 77 |                     });
 78 |                     document.body.appendChild(parent);
 79 |                 } else
 80 |                     parent = document.body;
 81 | 
 82 |                 var element = document.createElement('div');
 83 |                 parent.appendChild(element);
 84 |                 Object.keys(test.styles).forEach(function(prop) {
 85 |                     element.style[prop] = test.styles[prop];
 86 |                 });
 87 |                 var metrics = new Metrics(element);
 88 |                 Object.keys(test.output).forEach(function(prop) {
 89 |                     expect(JSON.stringify(metrics[prop])).to.equal(JSON.stringify(test.output[prop]));
 90 |                 });
 91 | 
 92 |                 if (test.parentStyles)
 93 |                     document.body.removeChild(parent);
 94 |                 else
 95 |                     parent.removeChild(element);
 96 |             });
 97 |         }
 98 |     }
 99 | 
100 |     function generateSuite(suite) {
101 |         describe(suite.name, function() {
102 |             suite.tests.forEach(function(test) {
103 |                 suite.runTest(test);
104 |             });
105 |         });
106 |     }
107 | 
108 |     generateSuite(basicSuite);
109 | }
110 | 
111 | return {
112 |     'register': register
113 | }
114 | }()
115 | 


--------------------------------------------------------------------------------
/tests/polygon-editor-code.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |     "Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
  3 | 
  4 |      Licensed under the Apache License, Version 2.0 (the “License”);
  5 |      you may not use this file except in compliance with the License.
  6 |      You may obtain a copy of the License at
  7 | 
  8 |      http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 |      Unless required by applicable law or agreed to in writing, software
 11 |      distributed under the License is distributed on an “AS IS” BASIS,
 12 |      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |      See the License for the specific language governing permissions and
 14 |      limitations under the License."
 15 | */
 16 | 
 17 | var polygon;
 18 | var dragVertexIndex = null;
 19 | var dragLineAnchor = null;
 20 | var hoverLocation = null;
 21 | var polygonVertexRadius = 9;
 22 | var mouseOver = null; // one of: null "polygon", "line", "lineTop", "lineBottom"
 23 | var line = new Rect(10, 50, 760, 10);
 24 | 
 25 | function getCanvas() { return document.getElementById("polygon-editor-canvas"); }
 26 | 
 27 | function drawPolygonVertexLabels(g, p)
 28 | {
 29 |     for (var i = 0; i < p.numberOfVertices; i++) {
 30 |         var vertex = p.vertexAt(i);
 31 |         if (vertex.hidden)
 32 |             continue;
 33 |         var dx = i < 10 ? 3 : 7;
 34 |         g.fillText(vertex.label, vertex.x - dx, vertex.y + 4);
 35 |     }
 36 | }
 37 | 
 38 | function drawVertex(g, vertex, r)
 39 | {
 40 |     g.beginPath();
 41 |     g.arc(vertex.x, vertex.y, r, 0, Math.PI*2, false)
 42 |     g.fill();
 43 |     g.closePath();
 44 | }
 45 | 
 46 | function drawPolygonVertices(g, p, r, normalVertexColor, elidedVertexColor)
 47 | {
 48 |     var edgeVertexIndices = [];
 49 |     for (var i = 0; i < p.numberOfEdges; i++)
 50 |         edgeVertexIndices.push(p.edgeAt(i).vertex1Index);
 51 | 
 52 |     for (var i = 0; i < p.numberOfVertices; i++) {
 53 |         g.fillStyle = (edgeVertexIndices.indexOf(i) != -1) ? normalVertexColor : elidedVertexColor;
 54 |         drawVertex(g, p.vertexAt(i), r);
 55 |     }
 56 | }
 57 | 
 58 | function drawPolygonEdges(g, p)
 59 | {
 60 |     if (p.numberOfVertices == 0)
 61 |         return;
 62 | 
 63 |     g.beginPath();
 64 |     for (var i = 0; i < p.numberOfVertices; i++) {
 65 |         var vertex = p.vertexAt(i);
 66 |         if (i == 0) 
 67 |             g.moveTo(vertex.x, vertex.y);
 68 |         else
 69 |             g.lineTo(vertex.x, vertex.y);
 70 |     }
 71 |     g.lineTo(p.vertexAt(0).x, p.vertexAt(0).y);
 72 |     g.stroke();
 73 | }
 74 | 
 75 | function drawShapeMarginEdges(g, p)
 76 | {
 77 |     var shapeMargin = p.shapeMargin;
 78 |     var edges = p.shapeMarginEdges;
 79 |     g.beginPath();
 80 |     for (var i = 0; i < edges.length; i++) {
 81 |         var edge = edges[i];
 82 |         g.moveTo(edge.vertex1.x, edge.vertex1.y);
 83 |         g.lineTo(edge.vertex2.x, edge.vertex2.y);
 84 |     }
 85 |     g.stroke();
 86 | 
 87 |     for (var i = 0; i < p.numberOfEdges; i++) {
 88 |         var edge = p.edgeAt(i);
 89 |         g.beginPath();
 90 |         g.arc(edge.vertex1.x, edge.vertex1.y, shapeMargin, 0, Math.PI*2, false)
 91 |         g.stroke();
 92 |     }
 93 | }
 94 | 
 95 | function draw() {
 96 |     var canvas = getCanvas();
 97 |     var g = canvas.getContext("2d");
 98 | 
 99 |     g.clearRect(0, 0, canvas.width, canvas.height);
100 | 
101 |     // line
102 |     
103 |     g.lineWidth = "2";
104 |     g.strokeStyle = "rgba(255,161,0, 0.20)";
105 |     g.fillStyle = mouseOver == "line" ? "rgba(255,161,0, 0.15)" : "rgba(255,161,0, 0.10)";
106 |     g.fillRect(line.x, line.y, line.width, line.height);
107 |     g.strokeRect(line.x, line.y, line.width, line.height);
108 | 
109 |     if (mouseOver == "lineTop") {
110 |         g.strokeStyle = "rgba(255,161,0, 0.5)";
111 |         g.strokeRect(line.x, line.y, line.width, 1);
112 |     } else if (mouseOver == "lineBottom") {
113 |         g.strokeStyle = "rgba(255,161,0, 0.5)";
114 |         g.strokeRect(line.x, line.maxY, line.width, 1);
115 |     }
116 | 
117 |     // bounds
118 | 
119 |     g.strokeStyle = "rgba(255,239,156, 0.20)";
120 |     g.lineWidth = "1";
121 |     g.strokeRect(polygon.bounds.x, polygon.bounds.y, polygon.bounds.width, polygon.bounds.height);
122 | 
123 |     // polygon
124 | 
125 |     g.strokeStyle = "rgba(238,236,230, 0.20)";
126 |     g.fillStyle = "none";
127 |     g.lineWidth = "1";
128 |     drawShapeMarginEdges(g, polygon);
129 | 
130 |     g.strokeStyle = mouseOver == "polygon" ? "rgb(171,221,255)" : "rgb(238,236,230)";
131 |     g.fillStyle = "none";
132 |     g.lineWidth = "1";
133 |     drawPolygonEdges(g, polygon);
134 | 
135 |     g.strokeStyle = "none";
136 |     drawPolygonVertices(g, polygon, polygonVertexRadius, "rgb(255,161,0)", "rgba(255,161,0, 0.25)");
137 | 
138 |     g.font = "12px Arial";
139 |     g.fillStyle = "black";
140 |     drawPolygonVertexLabels(g, polygon);
141 | 
142 | 
143 |     // line.left, line.right the polygon's exclusion edges
144 | 
145 |     g.fillStyle = "rgb(12,125,225)";
146 |     if (line.left >= 0)
147 |         g.fillRect(line.left - 1.5, line.y, 3, line.height);
148 |     if (line.right >= 0)
149 |         g.fillRect(line.right - 1.5, line.y, 3, line.height);
150 | 
151 |     g.strokeStyle = "rgba(255,161,0, 0.20)";
152 |     g.fillStyle = mouseOver == "line" ? "rgba(255,161,0, 0.15)" : "rgba(255,161,0, 0.10)";
153 |     if (line.left >= 0 && line.right >= 0) {
154 |         g.fillRect(line.x + 1, line.y + 1, line.left - line.x - 4, line.height - 2);
155 |         g.fillRect(line.right + 2, line.y + 1, line.maxX - line.right - 4, line.height - 2);
156 |     }
157 | 
158 | }
159 | 
160 | // See http://paulbourke.net/geometry/pointlineplane/
161 | 
162 | function distanceToEdgeSquared(p1, p2, p3)
163 | {
164 |     var dx = p2.x - p1.x;
165 |     var dy = p2.y - p1.y;
166 |     
167 |     if (dx == 0 || dy == 0) 
168 |         return Number.POSITIVE_INFNITY;
169 | 
170 |     var u = ((p3.x - p1.x) * dx + (p3.y - p1.y) * dy) / (dx * dx + dy * dy);
171 | 
172 |     if (u < 0 || u > 1)
173 |         return Number.POSITIVE_INFINITY;
174 | 
175 |     var x = p1.x + u * dx;  // closest point on edge p1,p2 to p3
176 |     var y = p1.y + u * dy;
177 | 
178 |     return Math.pow(p3.x - x, 2) + Math.pow(p3.y - y, 2);
179 | }
180 | 
181 | function polygonVertexNear(p)
182 | {
183 |     var thresholdDistanceSquared = polygonVertexRadius * polygonVertexRadius * 2;
184 |     for (var i = 0; i < polygon.numberOfVertices; i++) {
185 |         var vertex = polygon.vertexAt(i);
186 |         var dx = vertex.x - p.x;
187 |         var dy = vertex.y - p.y;
188 |         if (dx*dx + dy*dy < thresholdDistanceSquared)
189 |             return i;
190 |     }
191 |     return null;
192 | }
193 | 
194 | function polygonEdgeNear(p)
195 | {
196 |     var thresholdDistanceSquared = polygonVertexRadius * polygonVertexRadius * 2;
197 |     for (var i = 0; i < polygon.numberOfEdges; i++) {
198 |         var edge = polygon.edgeAt(i);
199 |         if (distanceToEdgeSquared(edge.vertex1, edge.vertex2, p) < thresholdDistanceSquared)
200 |             return edge;
201 |     }
202 |     return null;
203 | }
204 | 
205 | // See http://hansmuller-webkit.blogspot.com/2013/02/where-is-mouse.html
206 | function canvasEventLocation(event)
207 | {
208 |     var canvas = getCanvas();
209 |     var style = document.defaultView.getComputedStyle(canvas, null);
210 | 
211 |     function styleValue(property) {
212 |         return parseInt(style.getPropertyValue(property), 10) || 0;
213 |     }
214 | 
215 |     var scaleX = canvas.width / styleValue("width");
216 |     var scaleY = canvas.height / styleValue("height");
217 | 
218 |     var canvasRect = canvas.getBoundingClientRect();
219 |     var canvasX = scaleX * (event.clientX - canvasRect.left - canvas.clientLeft - styleValue("padding-left"));
220 |     var canvasY = scaleY * (event.clientY - canvasRect.top - canvas.clientTop - styleValue("padding-top"))
221 | 
222 |     return {x: canvasX, y: canvasY};
223 | }
224 | 
225 | 
226 | function handleMouseDown(event)
227 | {
228 |     var eventXY = canvasEventLocation(event);
229 | 
230 |     if (polygon.closed) {
231 |         dragVertexIndex = polygonVertexNear(eventXY);
232 |         if (dragVertexIndex == null) {
233 |             var edge = polygonEdgeNear(canvasEventLocation(event));
234 |             if (edge != null) {
235 |                 var vertices = polygon.vertices();
236 |                 vertices.splice(edge.vertex2Index, 0, eventXY);
237 |                 polygon = createPolygon(vertices, polygon.fillRule, polygon.shapeMargin);
238 |             }
239 |         }
240 |     }
241 | 
242 |     if (dragVertexIndex == null && (mouseOver == "line" || mouseOver == "lineTop" || mouseOver == "lineBottom"))
243 |         dragLineAnchor = {point: eventXY, line: new Rect(line.x, line.y, line.width, line.height)};
244 | 
245 |     if (mouseOver == "polygon")
246 |         getCanvas().focus();
247 | 
248 |     // The following appears to be the only way to prevent Chrome from showing the text select cursor.
249 |     // For the record: hacks based on -webkit-user-select: none, or #canvas:focus,#canvas:active do not 
250 |     // currently work.
251 | 
252 |     event.preventDefault();
253 |     event.stopPropagation();
254 | 
255 |     draw();
256 | }
257 | 
258 | function pointIsNearLine(p) {   // Return null, "line", "lineTop", or "lineBottom"
259 |     if (p.x < line.x || p.x >= line.maxX)
260 |         return null;
261 | 
262 |     var outsideThreshold = 4;
263 |     var insideThreshold = Math.min(outsideThreshold, line.height / 2); // in case the line's height gets small
264 | 
265 |     function isCloseTo(y, threshold) { return y >= 0 && y <= threshold; }
266 | 
267 |     if (isCloseTo(line.y - p.y, outsideThreshold) || isCloseTo(p.y - line.y, insideThreshold))
268 |         return "lineTop";
269 |     if (isCloseTo(p.y - line.maxY, outsideThreshold) || isCloseTo(line.y - p.y, insideThreshold))
270 |         return "lineBottom";
271 |     return line.containsPoint(p) ? "line" : null;
272 | }
273 | 
274 | function handleMouseMove(event)
275 | {
276 |     var canvas = getCanvas()
277 |     var eventXY = canvasEventLocation(event);
278 |     var redrawRequired = false;
279 | 
280 |     if (dragVertexIndex != null) {
281 |         var eventXY = canvasEventLocation(event);
282 |         polygon.vertexAt(dragVertexIndex).x = eventXY.x;
283 |         polygon.vertexAt(dragVertexIndex).y = eventXY.y;
284 |         polygon = createPolygon(polygon.vertices(), polygon.fillRule, polygon.shapeMargin);
285 |         computeLineExclusionEdges();
286 |         redrawRequired = true;
287 |     } else if (dragLineAnchor != null) {
288 |         if (mouseOver == "line") {
289 |             line.y = dragLineAnchor.line.y + (eventXY.y - dragLineAnchor.point.y);
290 |             line.y = Math.min(Math.max(0, line.y), canvas.height - line.height);
291 |         }
292 |         else if (mouseOver == "lineTop") {
293 |             var newY = dragLineAnchor.line.y + eventXY.y - dragLineAnchor.point.y;
294 |             newY = Math.min(Math.max(0, newY), line.maxY - 3);
295 |             line.shiftTopEdgeTo(newY);
296 |         }
297 |         else if (mouseOver == "lineBottom") {
298 |             var newY = dragLineAnchor.line.maxY + eventXY.y - dragLineAnchor.point.y;
299 |             newY = Math.max(Math.min(newY, canvas.height), line.y + 3);
300 |             line.shiftBottomEdgeTo(newY);
301 |         }
302 |         computeLineExclusionEdges();
303 |         redrawRequired = true;
304 |     } else {
305 |         var mouseIsOverLine = pointIsNearLine(eventXY);
306 |         if (mouseOver != mouseIsOverLine) {
307 |             mouseOver = mouseIsOverLine;
308 |             redrawRequired = true;
309 |         }
310 | 
311 |         var mouseWasWithinPolygon = mouseOver == "polygon";
312 |         var mouseIsWithinPolygon = polygon.containsPoint(eventXY);
313 |         if (mouseWasWithinPolygon != mouseIsWithinPolygon) {
314 |             mouseOver = mouseIsWithinPolygon ? "polygon" : null;
315 |             redrawRequired = true;
316 |         }
317 |     }
318 | 
319 |     if (polygonVertexNear(eventXY) != null)
320 |         canvas.style.cursor = "default";
321 |     else if (mouseOver == "line" || mouseOver == "lineTop" || mouseOver == "lineBottom")
322 |         canvas.style.cursor = "ns-resize";
323 |     else
324 |         canvas.style.cursor = "default";
325 | 
326 |     if (redrawRequired)
327 |         draw();
328 | }
329 | 
330 | function handleMouseUp(event) {
331 |     dragVertexIndex = null;
332 |     dragLineAnchor = null;
333 |     draw();
334 | }
335 | 
336 | function changeShapeMargin(delta) {
337 |     shapeMargin = Math.max(0, Math.min(128, polygon.shapeMargin + delta))
338 |     polygon = createPolygon(polygon.vertices(), polygon.fillRule, shapeMargin);
339 |     computeLineExclusionEdges();
340 |     draw();
341 | }
342 | 
343 | function handleMouseWheel(event) {
344 |     if (mouseOver != "polygon") 
345 |         return;
346 |     event.preventDefault();
347 |     changeShapeMargin(event.wheelDelta > 0 ? +1 : -1);
348 | }
349 | 
350 | function handleKeyDown(event) {
351 |     if (mouseOver != "polygon") 
352 |         return;
353 |     switch(event.keyCode == 0 ? event.charCode : event.keyCode) {
354 |     case 38:  // up arrow
355 |         changeShapeMargin(+1);
356 |         event.preventDefault();
357 |         break;
358 |     case 40: // down arrow
359 |         changeShapeMargin(-1);
360 |         event.preventDefault();
361 |         break;
362 |     }
363 | }
364 | 
365 | function createPolygon(vertices, fillRule, shapeMargin) {
366 |     var p = new Polygon(vertices, fillRule, shapeMargin);
367 |     for (var i = 0; i < p.numberOfVertices; i++)
368 |         p.vertexAt(i).label = String(i);
369 |     p.closed = true;
370 |     return p;
371 | }
372 | 
373 | function computeLineExclusionEdges() {
374 |     var y1 = line.y;
375 |     var y2 = y1 + line.height;
376 |     if (polygon.overlapsYRange(y1, y2)) {
377 |         line.left = polygon.leftExclusionEdge(y1, y2);
378 |         line.right = polygon.rightExclusionEdge(y1, y2);
379 |     }
380 |     else
381 |         line.left = line.right = -1;
382 | }
383 | 
384 | function compareVertexYIncreasing(vertex1, vertex2) { return vertex2.y - vertex1.y; }
385 | 
386 | function computeRightMostEdgeSegments() {
387 |     // TBD: remove horizontal edges
388 |     var result = [];
389 |     var vertices = polygon.vertices().sort(compareVertexYIncreasing);
390 |     for (var i = 0; i < vertices.length - 1; i++) {
391 |         var edges = polygon.edgesThatOverlapYRange(vertices[i].y, vertices[i+1].y);
392 |         var edgeWithMaxX = edges[0];
393 |         for (var j = 1; j < edges.length; j++) {
394 |             if (edges[j].maxX > edgeWithMaxX.maxX)
395 |                 edgeWithMaxX = edges[j];
396 |             /* 
397 |             else if (edges[j].maxX == edgeWithMaxX.maxX ... then pick the edge whose slope is greater 
398 |             */
399 | 
400 |         }
401 | 
402 |         if (result.length == 0 || result[result.length - 1] !== edgeWithMaxX)
403 |             result.push(edgeWithMaxX);
404 |     }
405 |     console.log(result);
406 | 
407 | }
408 | 
409 | 
410 | function genPolygonCSS() {
411 |     function normalizeVertex(v) { return {x: v.x - polygon.bounds.x, y: v.y - polygon.bounds.y}; }
412 |     var vertices = polygon.vertices().map(normalizeVertex);
413 | 
414 |     function toCSSVertexText(v) { return v.x + "px " + v.y + "px";  }
415 |     var cssPolygonText = "polygon(" + vertices.map(toCSSVertexText).join(", ") + ")"; // polygon(x y, x y, ...)
416 | 
417 |     function toSVGVertexText(v) { return v.x + "," + v.y;  }
418 |     var svgPolygonText = "<polygon points='" + vertices.map(toSVGVertexText).join(" ") + "'/>"; // <polygon points='x,y x,y ...'/>
419 |     var svgBoundsText = "width='" + polygon.bounds.width + "px' height='" + polygon.bounds.height + "px'";
420 |     var svgDataURL = "url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' " + svgBoundsText + ">" + svgPolygonText + "</svg>)";
421 | 
422 |     return {css: cssPolygonText, svg: svgPolygonText, svgDataURL: svgDataURL};
423 | }
424 | 
425 | function init() 
426 | {
427 |     var polygonVertices = [{x:200, y:200}, {x:400, y:200}, {x:450, y:300}, {x:150, y:300}];
428 |     //var polygonVertices = [{x:300, y:200}, {x:400, y:200}, {x:400, y:300}, {x:350, y:300}, {x:200, y:300}, {x:200, y:200}];
429 |     // var polygonVertices = [{x:0, y:0}, {x:200, y:0}, {x:200, y:200}, {x:0, y:200}];
430 |     //var polygonVertices = [{x:241, y:82}, {x:51, y:16}, {x:210, y:163}, {x:124, y:234}, {x:16, y:198}, {x:211, y:0}, {x:0, y:133}];
431 | 
432 |     var canvas = getCanvas();
433 |     canvas.addEventListener("mousedown", handleMouseDown, false);
434 |     canvas.addEventListener("mousemove", handleMouseMove, false);
435 |     canvas.addEventListener("mouseup", handleMouseUp, false);
436 |     canvas.addEventListener ("mousewheel", handleMouseWheel, false);
437 |     canvas.addEventListener ("keydown", handleKeyDown, false);
438 | 
439 |     line.width = canvas.width - 2 * line.x;
440 | 
441 |     polygon = createPolygon(polygonVertices, "evenodd", 0);
442 |     computeLineExclusionEdges();
443 |     draw();
444 | }
445 | 
446 | init();
447 | 


--------------------------------------------------------------------------------
/tests/polygon-editor.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta name="copyright" content="Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
 6 | 
 7 |  Licensed under the Apache License, Version 2.0 (the “License”);
 8 |  you may not use this file except in compliance with the License.
 9 |  You may obtain a copy of the License at
10 | 
11 |  http://www.apache.org/licenses/LICENSE-2.0
12 | 
13 |  Unless required by applicable law or agreed to in writing, software
14 |  distributed under the License is distributed on an “AS IS” BASIS,
15 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  See the License for the specific language governing permissions and
17 |  limitations under the License.">
18 | <script src='../src/rect.js'></script>
19 | <script src='../src/polygon.js'></script>
20 | <style>
21 |     #polygon-editor-root {
22 |         width: 800px;
23 |         height: 600px;
24 |         border: solid black 4px;
25 |         margin: 20px;
26 |     }
27 | 
28 |     #polygon-editor-canvas {
29 |         cursor: default;
30 |         background-color: #636363;
31 |     }
32 | 
33 |     .footer {
34 |         display: inline-block;
35 |         position: absolute;
36 |         bottom: 0; right: 0;
37 |         padding: .5em;
38 |     }
39 | </style>
40 | </head>
41 | <body>
42 |   <div id="polygon-editor-root">
43 |     <canvas id="polygon-editor-canvas" tabindex="0" width="800px" height="600px"></canvas>
44 |   </div>
45 | 
46 | <div class='footer'>text <a href='http://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License'>cc-sa</a> via <a href='http://wikipedia.org'>Wikipedia</a></div>
47 | </body>
48 | <script src="polygon-editor-code.js"></script>
49 | </html>
50 | 
51 | 


--------------------------------------------------------------------------------
/tests/polygon-tests.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset='utf-8'>
 4 | <title>Polygon Tests</title>
 5 | <link rel='stylesheet' href='../node_modules/mocha/mocha.css'>
 6 | </head>
 7 | <body>
 8 | <div id='mocha'></div>
 9 | <script src='../node_modules/mocha/mocha.js'></script>
10 | <script src='../node_modules/chai/chai.js'></script>
11 | <script src='../src/rect.js'></script>
12 | <script src='../src/polygon.js'></script>
13 | <script src='polygon-tests.js'></script>
14 | <script>
15 | mocha.checkLeaks();
16 | 
17 | PolygonTests.register(mocha, chai.expect);
18 | 
19 | mocha.run();
20 | </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/tests/raster-tests.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset='utf-8'>
 4 | <title>Raster Polyfill Tests</title>
 5 | <link rel='stylesheet' href='../node_modules/mocha/mocha.css'>
 6 | </head>
 7 | <body>
 8 | <div id='mocha'></div>
 9 | <script src='../node_modules/mocha/mocha.js'></script>
10 | <script src='../node_modules/chai/chai.js'></script>
11 | <script src='raster-tests.js'></script>
12 | <script src='../src/raster.js'></script>
13 | <script src='../src/rect.js'></script>
14 | <script>
15 | mocha.checkLeaks();
16 | 
17 | RasterTests.register(mocha, chai.expect);
18 | 
19 | mocha.run();
20 | </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/tests/rect-tests.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset='utf-8'>
 4 | <title>Style Polyfill Tests</title>
 5 | <link rel='stylesheet' href='../node_modules/mocha/mocha.css'>
 6 | </head>
 7 | <body>
 8 | <div id='mocha'></div>
 9 | <script src='../node_modules/mocha/mocha.js'></script>
10 | <script src='../node_modules/chai/chai.js'></script>
11 | <script src='rect-tests.js'></script>
12 | <script src='../src/rect.js'></script>
13 | <script>
14 | mocha.checkLeaks();
15 | 
16 | RectTests.register(mocha, chai.expect);
17 | 
18 | mocha.run();
19 | </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/tests/rect-tests.js:
--------------------------------------------------------------------------------
  1 | var RectTests = function() {
  2 | 
  3 | function register(mocha, expect) {
  4 |     mocha.setup('bdd');
  5 | 
  6 |     function roundedRectFromArray(arr /* x, y, w, h, [w, h], [w, h], [w, h], [w, h] */) {
  7 |         var x = arr[0],
  8 |             y = arr[1],
  9 |             w = arr[2],
 10 |             h = arr[3],
 11 |             tl = new Size(arr[4][0], arr[4][1]),
 12 |             tr = new Size(arr[5][0], arr[5][1]),
 13 |             br = new Size(arr[6][0], arr[6][1]),
 14 |             bl = new Size(arr[7][0], arr[7][1]);
 15 |         return new RoundedRect(new Rect(x, y, w, h), tl, tr, br, bl);
 16 |     }
 17 | 
 18 |     var basicSuite = {
 19 |         name: 'Rounded Rectangle Edges',
 20 |         tests: [
 21 |         {
 22 |             rectangle: [0, 0, 100, 100, [0, 0], [0, 0], [0, 0], [0, 0]],
 23 |             y1: 10,
 24 |             y2: 30,
 25 |             renderable: true,
 26 |             left: 0,
 27 |             right: 100
 28 |         },
 29 |         {
 30 |             rectangle: [0, 0, 100, 100, [50, 50], [50, 50], [50, 50], [50, 50]],
 31 |             y1: 0,
 32 |             y2: 0,
 33 |             renderable: true,
 34 |             left: 50,
 35 |             right: 50
 36 |         },
 37 |         {
 38 |             rectangle: [0, 0, 100, 100, [50, 50], [50, 50], [50, 50], [50, 50]],
 39 |             y1: 5,
 40 |             y2: 10,
 41 |             renderable: true,
 42 |             left: 20,
 43 |             right: 80
 44 |         },
 45 |         {
 46 |             rectangle: [0, 0, 100, 100, [50, 50], [50, 50], [50, 50], [50, 50]],
 47 |             y1: 50,
 48 |             y2: 50,
 49 |             renderable: true,
 50 |             left: 0,
 51 |             right: 100
 52 |         },
 53 |         {
 54 |             rectangle: [0, 0, 100, 100, [50, 50], [50, 50], [50, 50], [50, 50]],
 55 |             y1: 90,
 56 |             y2: 95,
 57 |             renderable: true,
 58 |             left: 20,
 59 |             right: 80
 60 |         },
 61 |         {
 62 |             rectangle: [0, 0, 100, 100, [30, 70], [30, 70], [30, 30], [30, 30]],
 63 |             y1: 10,
 64 |             y2: 14,
 65 |             renderable: true,
 66 |             left: 12,
 67 |             right: 88
 68 |         },
 69 |         {
 70 |             rectangle: [0, 0, 100, 100, [30, 30], [30, 30], [30, 70], [30, 70]],
 71 |             y1: 86,
 72 |             y2: 90,
 73 |             renderable: true,
 74 |             left: 12,
 75 |             right: 88
 76 |         },
 77 |         {
 78 |             rectangle: [0, 0, 100, 100, [50, 30], [50, 30], [30, 50], [30, 50]],
 79 |             y1: 45,
 80 |             y2: 50,
 81 |             renderable: true,
 82 |             left: 0,
 83 |             right: 100
 84 |         },
 85 |         {
 86 |             rectangle: [0, 0, 100, 100, [50, 30], [50, 30], [30, 50], [30, 50]],
 87 |             y1: 6,
 88 |             y2: 6,
 89 |             renderable: true,
 90 |             left: 20,
 91 |             right: 80
 92 |         },
 93 |         {
 94 |             rectangle: [0, 0, 100, 100, [50, 30], [50, 30], [30, 50], [30, 50]],
 95 |             y1: 90,
 96 |             y2: 90,
 97 |             renderable: true,
 98 |             left: 12,
 99 |             right: 88
100 |         },
101 |         {
102 |             rectangle: [0, 0, 100, 100, [50, 30], [50, 30], [30, 50], [30, 50]],
103 |             y1: 50,
104 |             y2: 55,
105 |             renderable: true,
106 |             left: 0,
107 |             right: 100
108 |         },
109 |         {
110 |             rectangle: [25, 25, 50, 50, [25, 25], [25, 25], [25, 25], [25, 25]],
111 |             y1: 0,
112 |             y2: 0,
113 |             renderable: true,
114 |             left: undefined,
115 |             right: undefined
116 |         },
117 |         {
118 |             rectangle: [0, 0, 100, 100, [100, 100], [100, 100], [100, 100], [100, 100]],
119 |             y1: 0,
120 |             y2: 0,
121 |             renderable: false,
122 |             left: 50,
123 |             right: 50
124 |         },
125 |         {
126 |             rectangle: [0, 0, 100, 100, [100, 0], [100, 0], [100, 0], [100, 0]],
127 |             y1: 0,
128 |             y2: 0,
129 |             renderable: false,
130 |             left: 0,
131 |             right: 100
132 |         }
133 |         ],
134 |         runTest: function(test) {
135 |             var fn = test.only ? it.only : it;
136 |             fn(JSON.stringify(test), function() {
137 |                 var rr = roundedRectFromArray(test.rectangle);
138 | 
139 |                 expect(rr.isRenderable()).to.equal(test.renderable);
140 | 
141 |                 if (!rr.isRenderable())
142 |                     rr.adjustRadii();
143 | 
144 |                 expect(rr.leftExclusionEdge(test.y1, test.y2)).to.equal(test.left);
145 |                 expect(rr.rightExclusionEdge(test.y1, test.y2)).to.equal(test.right);
146 |             });
147 |         }
148 |     }
149 | 
150 |     function generateSuite(suite) {
151 |         describe(suite.name, function() {
152 |             suite.tests.forEach(function(test) {
153 |                 suite.runTest(test);
154 |             });
155 |         });
156 |     }
157 | 
158 |     generateSuite(basicSuite);
159 | }
160 | 
161 | return {
162 |     'register': register
163 | }
164 | }()
165 | 


--------------------------------------------------------------------------------
/tests/resources/assimetric-star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/assimetric-star.png


--------------------------------------------------------------------------------
/tests/resources/bottom-based-triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/bottom-based-triangle.png


--------------------------------------------------------------------------------
/tests/resources/bottom-left-triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/bottom-left-triangle.png


--------------------------------------------------------------------------------
/tests/resources/bottom-right-triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/bottom-right-triangle.png


--------------------------------------------------------------------------------
/tests/resources/half-rectangle-20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/half-rectangle-20.png


--------------------------------------------------------------------------------
/tests/resources/half-rectangle-50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/half-rectangle-50.png


--------------------------------------------------------------------------------
/tests/resources/half-rectangle-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/half-rectangle-70.png


--------------------------------------------------------------------------------
/tests/resources/half-rectangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/half-rectangle.png


--------------------------------------------------------------------------------
/tests/resources/left-based-triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/left-based-triangle.png


--------------------------------------------------------------------------------
/tests/resources/no-outside-alpha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/no-outside-alpha.png


--------------------------------------------------------------------------------
/tests/resources/right-based-triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/right-based-triangle.png


--------------------------------------------------------------------------------
/tests/resources/top-based-triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/top-based-triangle.png


--------------------------------------------------------------------------------
/tests/resources/top-left-triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/top-left-triangle.png


--------------------------------------------------------------------------------
/tests/resources/top-right-triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/3bf7286fadc585683d906958c0b5525fcc61eb2b/tests/resources/top-right-triangle.png


--------------------------------------------------------------------------------
/tests/sandbag-optimization.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta name="copyright" content="Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
 6 | 
 7 |  Licensed under the Apache License, Version 2.0 (the “License”);
 8 |  you may not use this file except in compliance with the License.
 9 |  You may obtain a copy of the License at
10 | 
11 |  http://www.apache.org/licenses/LICENSE-2.0
12 | 
13 |  Unless required by applicable law or agreed to in writing, software
14 |  distributed under the License is distributed on an “AS IS” BASIS,
15 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  See the License for the specific language governing permissions and
17 |  limitations under the License.">
18 | <style>
19 | body {
20 |     position: relative;
21 |     text-align: justify;
22 | }
23 | 
24 | #container {
25 |     width: 50%;
26 |     font-size: 18x;
27 | }
28 | 
29 | #polygon-shape-outside-left {
30 |     width: 200px;
31 |     height: 200px;
32 |     float: left;
33 |     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><polygon points='0,0 200,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/></svg>");
34 |     shape-outside: polygon(0px 0px, 200px 33px, 89px 141px, 0px 200px);
35 | }
36 | 
37 | #box-shape-outside-left {
38 |     width: 200px;
39 |     height: 200px;
40 |     float: left;
41 |     /* radii: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y ... */
42 |     shape-outside: inset(round 0px 180px 30px 0px / 0px 45px 85px 0px);
43 |     border-top-right-radius: 180px 45px;
44 |     border-bottom-right-radius: 30px 85px;
45 |     background-color: rgba(255,161,0, 0.20);
46 | }
47 | 
48 | #box-shape-outside-right {
49 |     width: 200px;
50 |     height: 200px;
51 |     float: right;
52 |     /* radii: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y ... */
53 |     shape-outside: inset(round 180px 0px 0px 30px / 45px 0px 0px 85px);
54 |     border-top-left-radius: 180px 45px;
55 |     border-bottom-left-radius: 30px 85px;
56 |     background-color: rgba(255,161,0, 0.20);
57 | }
58 | 
59 | .sandbag {
60 |    background-image: url("data:image/svg+xml;UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect width='100%' height='100%' fill='none' stroke='rgba(255,161,0, 0.80)'/></svg>");
61 |    background-repeat: no-repeat;
62 | }
63 | 
64 | .footer {
65 |   display: inline-block;
66 |   position: absolute;
67 |   bottom: 0; right: 0;
68 |   padding: .5em;
69 | }
70 | 
71 | </style>
72 | </head>
73 | <body>
74 | <div id="container">
75 |     <div id="box-shape-outside-left"></div>
76 |     <p>Carpentry is a skilled trade in which the primary work performed is the cutting, shaping and installation of building materials during the construction of buildings, ships, timber bridges, concrete formwork, etc. Carpenters traditionally worked with natural wood and did the rougher work such as framing, but today many other materials are also used and sometimes the finer trades of cabinetmaking and furniture building are considered carpentry. Carpentry in the United States is almost always done by men. With 98.5% of carpenters being male, it was the fourth most male-dominated occupation in the country in 1999, and there were about 1.5 million positions in 2006. Carpenters are usually the first tradesmen on a job and the last to leave. Carpenters normally framed post-and-beam buildings until the end of the 19th century; now this old fashioned carpentry is called timber framing. Carpenters learn this trade by being employed through an apprenticeship training—normally 4 years—and qualify by successfully completing that country's department of labour competency test in places such as the UK, USA and South Africa. It is also common that the skill can be learnt by gaining work experience other than a formal training program, which may be the case in many places.</p>
77 | </div>
78 | 
79 | <div id="container">
80 |     <div id="box-shape-outside-right"></div>
81 |     <p>In the UK, carpentry is more correctly used to describe the skill involved only in first fixing of timber items and mainly covers the construction of roofs, floors and timber framed buildings, i.e., those areas of construction that are normally hidden in a finished building. Second fix work, the construction of items such as skirting boards, architraves, and doors, is more correctly referred to as joinery. Carpentry is also used to construct the formwork into which concrete is poured during the building of structures such as roads and highway overpasses. In the UK, the skill of making timber formwork for poured, or in situ, concrete, is referred to as shuttering. While the primary material used in carpentry is wood, the construction of walls with metal studs and concrete formwork with reusable metal forms is considered a carpentry skill.</p>
82 | 
83 |     <p>Carpentry in the United States is historically defined similarly to the United Kingdom as the "heavier and stronger" work distinguished from a joiner "...who does lighter and more ornamental work than that of a carpenter..." although the "...work of a carpenter and joiner are often combined." Joiner is less common than the terms finish carpenter or cabinetmaker. The terms housewright and barnwright were used historically, now occasionally used by carpenters who work using traditional methods and materials. Someone who builds custom concrete formwork is a form carpenter.</p>
84 | </div>
85 | 
86 | <div class='footer'>text <a href='http://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License'>cc-sa</a> via <a href='http://wikipedia.org'>Wikipedia</a></div>
87 | <script src="../shapes-polyfill.js"></script>
88 | </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/tests/shape-info-tests.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset='utf-8'>
 4 | <title>Shape Polyfill Tests</title>
 5 | <link rel='stylesheet' href='../node_modules/mocha/mocha.css'>
 6 | </head>
 7 | <body>
 8 | <div id='mocha'></div>
 9 | <script src='../node_modules/mocha/mocha.js'></script>
10 | <script src='../node_modules/chai/chai.js'></script>
11 | <script src='shape-info-tests.js'></script>
12 | <script src='../src/shape-info.js'></script>
13 | <script src='../src/metrics.js'></script>
14 | <script src='../src/shape-value.js'></script>
15 | <script src='../src/rect.js'></script>
16 | <script src='../src/polygon.js'></script>
17 | <script>
18 | mocha.checkLeaks();
19 | 
20 | ShapeInfoTests.register(mocha, chai.expect);
21 | 
22 | mocha.run();
23 | </script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/tests/shape-test-suite.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset='utf-8'>
 4 | <title>Shape Parsing Tests</title>
 5 | <link rel='stylesheet' href='../node_modules/mocha/mocha.css'>
 6 | </head>
 7 | <body>
 8 | <div id='mocha'></div>
 9 | <script src='../node_modules/mocha/mocha.js'></script>
10 | <script src='../node_modules/chai/chai.js'></script>
11 | <script src='metrics-tests.js'></script>
12 | <script src='style-polyfill-tests.js'></script>
13 | <script src='shape-value-tests.js'></script>
14 | <script src='rect-tests.js'></script>
15 | <script src='polygon-tests.js'></script>
16 | <script src='shape-info-tests.js'></script>
17 | <script src='raster-tests.js'></script>
18 | <script src='../src/rect.js'></script>
19 | <script src='../src/polygon.js'></script>
20 | <script src='../src/raster.js'></script>
21 | <script src='../src/metrics.js'></script>
22 | <script src='../src/shape-info.js'></script>
23 | <script src='../src/shape-polyfill.js'></script>
24 | <script src='../src/shape-value.js'></script>
25 | <script src='../src/style-polyfill.js'></script>
26 | <script>
27 | mocha.checkLeaks();
28 | 
29 | MetricsTests.register(mocha, chai.expect);
30 | 
31 | StylePolyfillTests.register(mocha, chai.expect);
32 | 
33 | ShapeValueTests.register(mocha, chai.expect);
34 | 
35 | RectTests.register(mocha, chai.expect);
36 | 
37 | PolygonTests.register(mocha, chai.expect);
38 | 
39 | RasterTests.register(mocha, chai.expect);
40 | 
41 | ShapeInfoTests.register(mocha, chai.expect);
42 | 
43 | mocha.run();
44 | </script>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/tests/shape-value-tests.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset='utf-8'>
 4 | <title>Shape Parsing Tests</title>
 5 | <link rel='stylesheet' href='../node_modules/mocha/mocha.css'>
 6 | </head>
 7 | <body>
 8 | <div id='mocha'></div>
 9 | <script src='../node_modules/mocha/mocha.js'></script>
10 | <script src='../node_modules/chai/chai.js'></script>
11 | <script src='shape-value-tests.js'></script>
12 | <script src='../src/shape-value.js'></script>
13 | <script src='../src/metrics.js'></script>
14 | <script>
15 | mocha.checkLeaks();
16 | 
17 | ShapeValueTests.register(mocha, chai.expect);
18 | 
19 | mocha.run();
20 | </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/tests/shape-value-tests.js:
--------------------------------------------------------------------------------
  1 | var ShapeValueTests = function() {
  2 | 
  3 | function register(mocha, expect) {
  4 |     mocha.setup('bdd');
  5 |     var insetTests = [
  6 |     {
  7 |         name: 'should accept no values',
  8 |         input: 'inset()',
  9 |         output: 'inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0)'
 10 |     },
 11 |     {
 12 |         name: 'should accept 1 length',
 13 |         input: 'inset(1px)',
 14 |         output: 'inset(1 1 1 1 round 0 0 0 0 / 0 0 0 0)'
 15 |     },
 16 |     {
 17 |         name: 'should accept 2 lengths',
 18 |         input: 'inset(1px 2px)',
 19 |         output: 'inset(1 2 1 2 round 0 0 0 0 / 0 0 0 0)'
 20 |     },
 21 |     {
 22 |         name: 'should accept 3 lengths',
 23 |         input: 'inset(1px 2px 3px)',
 24 |         output: 'inset(1 2 3 2 round 0 0 0 0 / 0 0 0 0)'
 25 |     },
 26 |     {
 27 |         name: 'should accept 4 lengths',
 28 |         input: 'inset(1px 2px 3px 4px)',
 29 |         output: 'inset(1 2 3 4 round 0 0 0 0 / 0 0 0 0)'
 30 |     },
 31 |     {
 32 |         name: 'should accept 1 radius',
 33 |         input: 'inset(round 1px)',
 34 |         output: 'inset(0 0 0 0 round 1 1 1 1 / 1 1 1 1)'
 35 |     },
 36 |     {
 37 |         name: 'should accept 2 radii',
 38 |         input: 'inset(round 1px 2px)',
 39 |         output: 'inset(0 0 0 0 round 1 2 1 2 / 1 2 1 2)'
 40 |     },
 41 |     {
 42 |         name: 'should accept 3 radii',
 43 |         input: 'inset(round 1px 2px 3px)',
 44 |         output: 'inset(0 0 0 0 round 1 2 3 2 / 1 2 3 2)'
 45 |     },
 46 |     {
 47 |         name: 'should accept 4 radii',
 48 |         input: 'inset(round 1px 2px 3px 4px)',
 49 |         output: 'inset(0 0 0 0 round 1 2 3 4 / 1 2 3 4)'
 50 |     },
 51 |     {
 52 |         name: 'should accept 1 right radii',
 53 |         input: 'inset(round 1px / 2px)',
 54 |         output: 'inset(0 0 0 0 round 1 1 1 1 / 2 2 2 2)'
 55 |     },
 56 |     {
 57 |         name: 'should accept 2 right radii',
 58 |         input: 'inset(round 0px / 1px 2px)',
 59 |         output: 'inset(0 0 0 0 round 0 0 0 0 / 1 2 1 2)'
 60 |     }
 61 |     ];
 62 | 
 63 |     var ellipseTests = [
 64 |     {
 65 |         name: 'should accept 0 values',
 66 |         input: 'ellipse()',
 67 |         output: 'ellipse(50 50 at 50 50)'
 68 |     },
 69 |     {
 70 |         name: 'should accept percentages and lengths',
 71 |         input: 'ellipse(1% 10px)',
 72 |         output: 'ellipse(1 10 at 50 50)'
 73 |     },
 74 |     {
 75 |         name: 'should accept 1 position value',
 76 |         input: 'ellipse(at top)',
 77 |         output: 'ellipse(50 0 at 50 0)'
 78 |     },
 79 |     {
 80 |         name: 'should accept 2 position value',
 81 |         input: 'ellipse(at top left)',
 82 |         output: 'ellipse(0 0 at 0 0)'
 83 |     },
 84 |     {
 85 |         name: 'should accept 3 position value',
 86 |         input: 'ellipse(at left top 10%)',
 87 |         output: 'ellipse(0 10 at 0 10)'
 88 |     },
 89 |     {
 90 |         name: 'should accept 4 position value',
 91 |         input: 'ellipse(at right 10px bottom 20px)',
 92 |         output: 'ellipse(10 20 at 90 80)'
 93 |     },
 94 |     {
 95 |         name: 'should accept radius and position values',
 96 |         input: 'ellipse(10px 20px at left 30px top 40px)',
 97 |         output: 'ellipse(10 20 at 30 40)'
 98 |     }
 99 |     ];
100 | 
101 |     var circleTests = [
102 |     {
103 |         name: 'should accept 0 values',
104 |         input: 'circle()',
105 |         output: 'circle(50 at 50 50)'
106 |     },
107 |     {
108 |         name: 'should accept both r and position arguments',
109 |         input: 'circle(10% at bottom 10% right 10%)',
110 |         output: 'circle(10 at 90 90)'
111 |     }
112 |     ];
113 | 
114 |     var polygonTests = [
115 |     {
116 |         name: 'should accept 1 point',
117 |         input: 'polygon(1px 2px)',
118 |         output: 'polygon(nonzero, 1 2)'
119 |     },
120 |     {
121 |         name: 'should accept fill-rule and multiple points',
122 |         input: 'polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)',
123 |         output: 'polygon(evenodd, 1 2, 3 4, 5 6)'
124 |     }
125 |     ];
126 | 
127 |     function metricsFromStyles(styles) {
128 |         var elem = document.createElement('div');
129 |         for (var prop in styles)
130 |             elem.style.setProperty(prop, styles[prop]);
131 |         document.body.appendChild(elem);
132 |         var metrics = new Metrics(elem);
133 |         document.body.removeChild(elem);
134 |         return metrics;
135 |     }
136 | 
137 |     var boxTests = {
138 |         styles: {
139 |             margin: '5px 10px 15px 20px',
140 |             'border-width': '5px 10px 15px 20px',
141 |             'border-style': 'solid',
142 |             'border-color': 'transparent',
143 |             padding: '5px 10px 15px 20px',
144 |             'border-radius': '10px 20px 30px 40px',
145 |             'box-sizing': 'border-box',
146 |             width: '100px',
147 |             height: '100px'
148 |         },
149 |         tests: [
150 |         {
151 |             name: 'margin-box',
152 |             input: 'margin-box',
153 |             output: 'margin-box { x: -20, y: -5, width: 130, height: 120, radii: 27.5 30 40 60 / 15 25 45 55 }'
154 |         },
155 |         {
156 |             name: 'border-box',
157 |             input: 'border-box',
158 |             output: 'border-box { x: 0, y: 0, width: 100, height: 100, radii: 10 20 30 40 / 10 20 30 40 }'
159 |         },
160 |         {
161 |             name: 'padding-box',
162 |             input: 'padding-box',
163 |             output: 'padding-box { x: 20, y: 5, width: 70, height: 80, radii: 0 10 20 20 / 5 15 15 25 }'
164 |         },
165 |         {
166 |             name: 'content-box',
167 |             input: 'content-box',
168 |             output: 'content-box { x: 40, y: 10, width: 40, height: 60, radii: 0 0 10 0 / 0 10 0 10 }'
169 |         }
170 |         ],
171 |         runTest: function(test) {
172 |             var fn = test.only ? it.only : it;
173 |             var metrics = new metricsFromStyles(boxTests.styles);
174 |             fn(test.name, function() {
175 |                 var value = new ShapeValue({
176 |                     shapeOutside: test.input,
177 |                     'metrics': metrics
178 |                 });
179 |                 var output = value.printBox();
180 |                 expect(output).to.equal(test.output);
181 |             })
182 |         }
183 |     }
184 | 
185 |     var boxShapeTests = {
186 |         styles: {
187 |             margin: '5px 10px 15px 20px',
188 |             'border-width': '5px 10px 15px 20px',
189 |             'border-style': 'solid',
190 |             'border-color': 'transparent',
191 |             padding: '5px 10px 15px 20px',
192 |             'border-radius': '10px 20px 30px 40px',
193 |             'box-sizing': 'border-box',
194 |             width: '100px',
195 |             height: '100px'
196 |         },
197 |         tests: [
198 |         {
199 |             name: 'circle() margin-box',
200 |             input: 'circle() margin-box',
201 |             shape: 'circle(60 at 65 60)',
202 |             box: 'margin-box { x: -20, y: -5, width: 130, height: 120, radii: 27.5 30 40 60 / 15 25 45 55 }'
203 |         },
204 |         {
205 |             name: 'circle() border-box',
206 |             input: 'circle() border-box',
207 |             shape: 'circle(50 at 50 50)',
208 |             box: 'border-box { x: 0, y: 0, width: 100, height: 100, radii: 10 20 30 40 / 10 20 30 40 }',
209 |         },
210 |         {
211 |             name: 'circle() padding-box',
212 |             input: 'circle() padding-box',
213 |             shape: 'circle(35 at 35 40)',
214 |             box: 'padding-box { x: 20, y: 5, width: 70, height: 80, radii: 0 10 20 20 / 5 15 15 25 }'
215 |         },
216 |         {
217 |             name: 'circle() content-box',
218 |             input: 'circle() content-box',
219 |             shape: 'circle(20 at 20 30)',
220 |             box: 'content-box { x: 40, y: 10, width: 40, height: 60, radii: 0 0 10 0 / 0 10 0 10 }'
221 |         }
222 |         ],
223 |         runTest: function(test) {
224 |             var fn = test.only ? it.only : it;
225 |             fn(test.name, function() {
226 |                 var metrics = metricsFromStyles(boxShapeTests.styles);
227 |                 var value = new ShapeValue({
228 |                     shapeOutside: test.input,
229 |                     'metrics': metrics
230 |                 });
231 |                 var output = value.printShape();
232 |                 expect(output).to.equal(test.shape);
233 |                 output = value.printBox();
234 |                 expect(output).to.equal(test.box);
235 |             })
236 |         }
237 |     }
238 | 
239 |     function generateBasicShapeSuite(name, tests) {
240 |         var styles = {
241 |             margin: '0',
242 |             border: 'none',
243 |             'border-radius': '0',
244 |             padding: '0',
245 |             width: '100px',
246 |             height: '100px',
247 |             float: 'left'
248 |         };
249 |         describe(name, function() {
250 |             tests.forEach(function(test) {
251 |                 var metrics = metricsFromStyles(styles);
252 |                 var fn = test.only ? it.only : it;
253 |                 fn(test.name, function() {
254 |                     var shape = new ShapeValue({
255 |                         shapeOutside: test.input,
256 |                         'metrics': metrics
257 |                     });
258 |                     var output = shape.printShape();
259 |                     expect(output).to.equal(test.output);
260 |                 });
261 |             });
262 |         });
263 |     }
264 | 
265 |     function generateSuite(name, tests) {
266 |         describe(name, function() {
267 |             tests.tests.forEach(function(test) {
268 |                 tests.runTest(test);
269 |             });
270 |         });
271 |     }
272 | 
273 |     function printShape(shape) { return shape.printShape(); }
274 |     function printBox(shape) { return shape.printBox(); }
275 | 
276 |     describe('Shape Parsing', function() {
277 |         generateBasicShapeSuite('inset', insetTests);
278 | 
279 |         generateBasicShapeSuite('ellipse', ellipseTests);
280 | 
281 |         generateBasicShapeSuite('circle', circleTests);
282 | 
283 |         generateBasicShapeSuite('polygon', polygonTests);
284 |     })
285 | 
286 |     generateSuite('Box Parsing', boxTests);
287 | 
288 |     generateSuite('Box Shape Parsing', boxShapeTests);
289 | }
290 | 
291 | return {
292 |     'register': register
293 | }
294 | }();


--------------------------------------------------------------------------------
/tests/shapes-performance.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <meta name="copyright" content="Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
  6 | 
  7 |  Licensed under the Apache License, Version 2.0 (the “License”);
  8 |  you may not use this file except in compliance with the License.
  9 |  You may obtain a copy of the License at
 10 | 
 11 |  http://www.apache.org/licenses/LICENSE-2.0
 12 | 
 13 |  Unless required by applicable law or agreed to in writing, software
 14 |  distributed under the License is distributed on an “AS IS” BASIS,
 15 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  See the License for the specific language governing permissions and
 17 |  limitations under the License.">
 18 | <style id='stylesheet'>
 19 | .block {
 20 |     width: 200px;
 21 |     height: 200px;
 22 |     clear: left;
 23 | }
 24 | .float .block {
 25 |     float: left;
 26 | }
 27 | </style>
 28 | </head>
 29 | <body>
 30 |     <form onsubmit='return submitHandler(event)'>
 31 |         <label>shape-outside:<select id='shapeOutside'>
 32 |             <option value='circle()'>circle()</option>
 33 |             <option value='inset(10%)'>inset()</option>
 34 |             <option value='ellipse()'>ellipse()</option>
 35 |             <option value='polygon(0 0, 100% 100%, 0 100%)'>polygon()</option>
 36 |             <option value='content-box'>content-box</option>
 37 |         </select></label>
 38 |         <label>elements<select id='numElements'>
 39 |             <option value='10'>10</option>
 40 |             <option value='50'>50</option>
 41 |             <option value='100'>100</option>
 42 |             <option value='200'>200</option>
 43 |         </select></label>
 44 |         <label>runs<select type='text' id='numRuns'>
 45 |             <option value='10'>10</option>
 46 |             <option value='50'>50</option>
 47 |             <option value='100'>100</option>
 48 |             <option value='200'>200</option>
 49 |         </select></label>
 50 |         <button>Run</button>
 51 |     </form>
 52 |     <div id='results'></div>
 53 | </body>
 54 | <script>
 55 | function submitHandler(e) {
 56 |     e.preventDefault();
 57 |     runTests();
 58 |     return false;
 59 | }
 60 | 
 61 | var floatResults, nativeResults, polyfillResults;
 62 | function runTests() {
 63 |     var shape = document.getElementById('shapeOutside').value,
 64 |         elements = parseFloat(document.getElementById('numElements').value),
 65 |         runs = parseFloat(document.getElementById('numRuns').value), i, start, end, s;
 66 | 
 67 |     setup(elements, shape);
 68 | 
 69 |     var container = document.querySelector('.container');
 70 | 
 71 |     floatResults = [];
 72 |     for (i = 0; i < runs; i++) {
 73 |         container.offsetHeight;
 74 |         start = new Date();
 75 |         container.classList.add('float');
 76 |         container.offsetHeight;
 77 |         end = new Date();
 78 |         container.classList.remove('float');
 79 |         floatResults.push(end - start);
 80 |     }
 81 | 
 82 |     s = document.getElementById('stylesheet');
 83 |     s.sheet.insertRule('.shape .block { shape-outside: ' + shape + '; -webkit-shape-outside: ' + shape + '; }', 0);
 84 |     nativeResults = [];
 85 |     s = getComputedStyle(container);
 86 |     if (s.webkitShapeOutside !== undefined || s.shapeOutside !== undefined) {
 87 |         for (i = 0; i < runs; i++) {
 88 |             container.offsetHeight;
 89 |             start = new Date();
 90 |             container.classList.add('float');
 91 |             container.classList.add('shape');
 92 |             container.offsetHeight;
 93 |             end = new Date();
 94 |             container.classList.remove('float');
 95 |             container.classList.remove('shape');
 96 |             nativeResults.push(end - start);
 97 |         }
 98 |     }
 99 | 
100 |     polyfillResults = [];
101 |     container.classList.add('float');
102 |     for (i = 0; i < runs; i++) {
103 |         container.offsetHeight;
104 |         start = new Date();
105 |         /* Assumes synchronous layout (not url safe), and also
106 |          * does not count time necessary to load styles */
107 |         ShapesPolyfill.run({ force: ShapesPolyfill.Force.Layout });
108 |         container.offsetHeight;
109 |         end = new Date();
110 |         polyfillResults.push(end - start);
111 |         ShapesPolyfill.teardown();
112 |     }
113 | 
114 |     done();
115 | }
116 | 
117 | function done() {
118 |     teardown();
119 |     showResults();
120 | }
121 | 
122 | function stats(times) {
123 |     var length = times.length;
124 |     if (!times.length) return {};
125 |     times.sort();
126 |     var result = {};
127 |     result.mean = times.reduce(function(sum, curr) {
128 |         return sum + curr;
129 |     }, 0) / length;
130 |     result.variance = times.reduce(function(sum, curr) {
131 |         return sum + (curr - result.mean) * (curr - result.mean);
132 |     }, 0) / length;
133 |     result.std = Math.sqrt(result.variance);
134 |     result.median = times[Math.floor(length / 2)];
135 |     return result;
136 | }
137 | 
138 | function showResult(heading, stats) {
139 |     var el = document.createElement('div');
140 |     var result = "";
141 |     for (var prop in stats)
142 |         result += prop + ": " + stats[prop] + "ms<br/>";
143 |     if (!result.length)
144 |         result = "Not tested";
145 |     result = "<h3>" + heading + "</h3>" + result;
146 |     el.innerHTML = result;
147 |     document.getElementById('results').appendChild(el);
148 | }
149 | 
150 | function showResults() {
151 |     var floatStats = stats(floatResults);
152 |     var nativeStats = stats(nativeResults);
153 |     var polyfillStats = stats(polyfillResults);
154 | 
155 |     showResult("Floats without shape", floatStats);
156 |     showResult("Floats with natively implemented shape", nativeStats);
157 |     showResult("Floats with polyfilled shape", polyfillStats);
158 | }
159 | 
160 | function teardown() {
161 |     document.body.removeChild(document.querySelector('.container'));
162 | }
163 | 
164 | function setup(nElements, shape) {
165 |     document.getElementById('results').innerHTML = '';
166 |     var container = document.createElement('div');
167 |     container.classList.add('container');
168 |     for (var i = 0; i < nElements; i++) {
169 |         var el = document.createElement('div');
170 |         el.innerHTML = "<div class='block' data-shape-outside='" + shape + "'></div><p>PBR pop-up master cleanse art party forage, biodiesel brunch Neutra slow-carb irony. Swag pickled gluten-free, vinyl paleo PBR&amp;B yr literally Pinterest bicycle rights Williamsburg. McSweeney's keytar freegan, forage quinoa raw denim typewriter gluten-free lomo art party kogi Portland Wes Anderson chambray. Hella authentic twee Pitchfork, Truffaut umami Banksy Brooklyn bespoke kogi Godard Tonx occupy. Disrupt Pinterest jean shorts Portland, ethical mumblecore crucifix chia street art leggings roof party mixtape bicycle rights. Brunch narwhal kitsch, messenger bag 8-bit Williamsburg try-hard readymade. Tonx artisan cred, Neutra slow-carb gluten-free Godard bicycle rights blog.</p>\
171 | \
172 |     <p>Drinking vinegar sriracha ethnic, bicycle rights Thundercats sustainable leggings. Cardigan keffiyeh whatever kogi Portland PBR&amp;B lo-fi, ennui sriracha irony locavore authentic. Swag pork belly mustache, Tonx irony gluten-free polaroid narwhal locavore cray small batch. Selvage Carles +1 forage, craft beer Williamsburg Portland Thundercats vegan cornhole brunch twee gluten-free blog. Photo booth shabby chic lomo, paleo squid Shoreditch asymmetrical tofu YOLO four loko occupy. Synth food truck before they sold out, Echo Park scenester kale chips distillery pour-over raw denim High Life organic. Helvetica polaroid leggings irony paleo cardigan.</p>";
173 |         container.appendChild(el);
174 |     }
175 |     document.body.appendChild(container);
176 | }
177 | </script>
178 | <script src='../shapes-polyfill.js' data-auto-run='false'></script>
179 | </html>
180 | 


--------------------------------------------------------------------------------
/tests/style-polyfill-tests.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset='utf-8'>
 4 | <title>Style Polyfill Tests</title>
 5 | <link rel='stylesheet' href='../node_modules/mocha/mocha.css'>
 6 | </head>
 7 | <body>
 8 | <div id='mocha'></div>
 9 | <script src='../node_modules/mocha/mocha.js'></script>
10 | <script src='../node_modules/chai/chai.js'></script>
11 | <script src='style-polyfill-tests.js'></script>
12 | <script src='../src/style-polyfill.js'></script>
13 | <script>
14 | mocha.checkLeaks();
15 | 
16 | StylePolyfillTests.register(mocha, chai.expect);
17 | 
18 | mocha.run();
19 | </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/tests/style-polyfill-tests.js:
--------------------------------------------------------------------------------
  1 | var StylePolyfillTests = function() {
  2 | 
  3 | function register(mocha, expect) {
  4 |     mocha.setup('bdd');
  5 | 
  6 |     var styleTests = {
  7 |         tests: [
  8 |         {
  9 |             name: 'shape-outside',
 10 |             css: ".shape-outside { shape-outside: circle(); }",
 11 |             rules: [
 12 |             {
 13 |                 selector: '.shape-outside',
 14 |                 property: 'shape-outside',
 15 |                 value: 'circle()'
 16 |             }
 17 |             ]
 18 |         },
 19 |         {
 20 |             name: 'shape-margin',
 21 |             css: ".shape-margin { shape-margin: 5px; }",
 22 |             rules: [
 23 |             {
 24 |                 selector: '.shape-margin',
 25 |                 property: 'shape-margin',
 26 |                 value: '5px'
 27 |             }
 28 |             ]
 29 |         },
 30 |         {
 31 |             name: 'shape-image-threshold',
 32 |             css: ".shape-image-threshold { shape-image-threshold: 0.5; }",
 33 |             rules: [
 34 |             {
 35 |                 selector: '.shape-image-threshold',
 36 |                 property: 'shape-image-threshold',
 37 |                 value: '0.5'
 38 |             }
 39 |             ]
 40 |         },
 41 |         {
 42 |             name: 'shape-outside, shape-margin, shape-image-threshold',
 43 |             css: ".shape-outside { shape-outside: circle(); shape-margin: 5px; shape-image-threshold: 0.5; }",
 44 |             rules: [
 45 |             {
 46 |                 selector: '.shape-outside',
 47 |                 property: 'shape-outside',
 48 |                 value: 'circle()'
 49 |             },
 50 |             {
 51 |                 selector: '.shape-outside',
 52 |                 property: 'shape-margin',
 53 |                 value: '5px'
 54 |             },
 55 |             {
 56 |                 selector: '.shape-outside',
 57 |                 property: 'shape-image-threshold',
 58 |                 value: '0.5'
 59 |             }
 60 |             ]
 61 |         },
 62 |         {
 63 |             name: 'embedded with other rules',
 64 |             css: '.img { width: 100px; height: 100px; }' +
 65 |                 '.shape { background-color: rgba(0, 0, 255, 0.5); shape-outside: circle(); shape-margin: 5px; shape-image-threshold: 0.5; float: left; }' +
 66 |                 'p { margin: 5px; border: 1px solid red; }',
 67 |             rules: [
 68 |             {
 69 |                 selector: '.shape',
 70 |                 property: 'shape-outside',
 71 |                 value: 'circle()'
 72 |             },
 73 |             {
 74 |                 selector: '.shape',
 75 |                 property: 'shape-margin',
 76 |                 value: '5px'
 77 |             },
 78 |             {
 79 |                 selector: '.shape',
 80 |                 property: 'shape-image-threshold',
 81 |                 value: '0.5'
 82 |             }
 83 |             ]
 84 |         }
 85 |         ],
 86 |         runTest: function(test) {
 87 |             var fn = test.only ? it.only : it;
 88 |             fn(test.name, function(done) {
 89 |                 var style = document.createElement('style');
 90 |                 style.type = 'text/css';
 91 |                 style.appendChild(document.createTextNode(test.css));
 92 |                 document.head.appendChild(style);
 93 | 
 94 |                 var containsRule = function(ruleIn, rulesIn) {
 95 |                     var result = false;
 96 |                     rulesIn.forEach(function(rule) {
 97 |                         if (rule.selector === ruleIn.selector
 98 |                             && rule.property === ruleIn.property
 99 |                             && rule.value === ruleIn.value)
100 |                             result = true;
101 |                     });
102 |                     return result;
103 |                 }
104 | 
105 |                 var callback = function(rules) {
106 |                     expect(rules.length).to.equal(test.rules.length);
107 |                     test.rules.forEach(function(rule) {
108 |                         expect(containsRule(rule, rules)).to.be.true;
109 |                     });
110 |                     document.head.removeChild(style);
111 |                     done();
112 |                 }
113 | 
114 |                 new StylePolyfill(callback);
115 |             })
116 |         }
117 |     }
118 | 
119 |     function generateSuite(name, testSet) {
120 |         describe(name, function() {
121 |             testSet.tests.forEach(function(test) {
122 |                 testSet.runTest(test);
123 |             });
124 |         });
125 |     }
126 | 
127 |     generateSuite('Simple Shape CSS Values', styleTests);
128 | }
129 | 
130 | return {
131 |     'register': register
132 | }
133 | }()
134 | 


--------------------------------------------------------------------------------