-
Notifications
You must be signed in to change notification settings - Fork 516
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Enhancement] Support Cloning Custom Elements #129
[Enhancement] Support Cloning Custom Elements #129
Conversation
…ements Inspired by tsayen/dom-to-image#370 If element has `shadowRoot` property it is custom (and the shadow node is open) so fetch it's children. Closes bubkoo#128
Introduced by 021f124 Access to shadow node exposes the code to custom elements that break the current code. Was breaking because of elements without a style node. This commit fixes these bugs with simple, NON-BREAKING safety checks.
renders mathfield custom element https://github.com/arnog/mathlive
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are accessibility issues in these changes.
| 💖 Thanks for opening this pull request! 💖 Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process. Examples of commit messages with semantic prefixes:
Things that will help get your PR across the finish line:
We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can. |
$ rimraf ./test/coverage
$ karma start
14 05 2021 22:51:59.774:INFO [compiler.karma-typescript]: Compiling project using Typescript 4.0.3
14 05 2021 22:52:04.811:INFO [compiler.karma-typescript]: Compiled 13 files in 4854 ms.
Since Acorn 8.0.0, options.ecmaVersion is required.
Defaulting to 2020, but this will stop working in the future.
14 05 2021 22:52:05.534:INFO [bundler.karma-typescript]: Bundled imports for 12 file(s) in 217 ms.
14 05 2021 22:52:08.487:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
14 05 2021 22:52:08.489:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
14 05 2021 22:52:08.504:INFO [launcher]: Starting browser Chrome
14 05 2021 22:52:09.643:INFO [Chrome 90.0.4430.212 (Windows 10)]: Connected on socket B9QoY__gkEXINHHvAAAA with id 20104069
html to image
basic usage
√ should render to svg
√ should render to png
√ should render to blob
√ should render to jpeg
√ should use quality parameter when rendering to jpeg
√ should convert an element to an array of pixels
√ should handle border
√ should render bigger node
√ should handle "#" in colors and attributes
√ should render whole node when its scrolled
√ should render text nodes
√ should preserve content of ::before and ::after pseudo elements
√ should render with external stylesheet
√ should render web fonts
√ should render images
√ should render background images
√ should render user input from <input>
√ should render user input from <textarea>
√ should render content from <canvas>
LOG LOG: 'Error inlining remote css file', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error inlining remote css file', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
LOG LOG: 'Error loading remote stylesheet', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error loading remote stylesheet', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
LOG LOG: 'Error while reading CSS rules from https://unpkg.com/mathlive/dist/mathlive-fonts.css', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error while reading CSS rules from https://unpkg.com/mathlive/dist/mathlive-fonts.css', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
custom element
√ should render content from shadow node of custom element
work with svg
- should render nested svg with broken namespace
√ should render svg `<rect>` with width and heigth
√ should render svg `<rect>` with applied css styles
work with options
√ should apply width and height options to node copy being rendered
√ should render backgroundColor
√ should render backgroundColor in SVG
√ should apply style text to node copy being rendered
√ should combine dimensions and style
√ should use node filter
√ should not apply node filter to root node
√ should only use fontEmbedCss if it is supplied
ERROR LOG: 'Failed to fetch resource: http://fonts.com/font1.woff2'
Chrome 90.0.4430.212 (Windows 10) ERROR: 'Failed to fetch resource: http://fonts.com/font1.woff2'
√ should embed only the preferred font
LOG LOG: 'Error inlining remote css file', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error inlining remote css file', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
LOG LOG: 'Error loading remote stylesheet', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error loading remote stylesheet', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
LOG LOG: 'Error while reading CSS rules from http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error while reading CSS rules from http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
special cases
√ should not crash when loading external stylesheet causes error
util
parseURLs
√ should parse urls
√ should ignore data urls
embed
√ should embed url
√ should resolve urls if base url given
Chrome 90.0.4430.212 (Windows 10): Executed 36 of 37 (skipped 1) SUCCESS (20.871 secs / 20.2 secs)
TOTAL: 36 SUCCESS
=============================== Coverage summary ===============================
Statements : 89.85% ( 726/808 )
Branches : 70.25% ( 170/242 )
Functions : 93.79% ( 272/290 )
Lines : 89.56% ( 695/776 )
================================================================================
Done in 33.17s.
|
👋 @ShaMan123 Congrats on merging your first pull request! 🎉🎉🎉 |
🎉 This PR is included in version 1.6.2 🎉 The release is available on: |
Description
Support custom elements:
Clone a custom element by cloning it's shadow node's children rather than trying to clone it's own.
Motivation and Context
#128
Inspired by: tsayen/dom-to-image#370
Types of changes
Self Check before Merge