Search completed in 1.71 seconds.
2006-07-17 - Archive of obsolete content
firefox 1.5.0.5 planned release - 2006/0
7/26 discussions firefox survey feedback requested rachel werner (mozilla corp marketing intern) requested feedback on a proposed user survey.
... meetings mozilla project weekly status meeting - 2006/0
7/24 1:00p pdt (last meeting notes) firefox 2 (bon echo) status meeting - 2006/0
7/25 11:00a pdt (last meeting notes) firefox 3 (gran paradiso) status meeting - 2006/0
7/26 11:00a pdt ...
NSS 3.47 release notes
introduction the nss team has released network security services (nss) 3.4
7 on 18 october 2019, which is a minor release.
... the nss team would like to recognize first-time contributors: christian weisgerber deian stefan jenine distribution information the hg tag is nss_3_4
7_rtm.
... nss 3.4
7 requires nspr 4.23 or newer.
...And 10 more matches
NSS 3.27.1 release notes
introduction network security services (nss) 3.2
7.1 is a patch release for nss 3.2
7.
... distribution information the hg tag is nss_3_2
7_1_rtm.
... nss 3.2
7.1 requires nspr 4.13 or newer.
...And 9 more matches
NSS 3.17.1 release notes
introduction network security services (nss) 3.1
7.1 is a patch release for nss 3.1
7.
... the bug fixes in nss 3.1
7.1 are described in the "bugs fixed" section below.
... distribution information the hg tag is nss_3_1
7_1_rtm.
...And 8 more matches
NSS 3.27 release notes
introduction the network security services (nss) team has released nss 3.2
7, which is a minor release.
... distribution information the hg tag is nss_3_2
7_rtm.
... nss 3.2
7 requires netscape portable runtime (nspr) 4.13 or newer.
...And 8 more matches
NSS 3.17.2 release notes
introduction network security services (nss) 3.1
7.2 is a patch release for nss 3.1
7.
... the bug fixes in nss 3.1
7.2 are described in the "bugs fixed" section below.
... distribution information the hg tag is nss_3_1
7_2_rtm.
...And 7 more matches
NSS 3.17.3 release notes
introduction network security services (nss) 3.1
7.3 is a patch release for nss 3.1
7.
... the bug fixes in nss 3.1
7.3 are described in the "bugs fixed" section below.
... distribution information the hg tag is nss_3_1
7_3_rtm.
...And 7 more matches
NSS 3.37 release notes
introduction the nss team has released network security services (nss) 3.3
7, which is a minor release.
... distribution information the hg tag is nss_3_3
7_rtm.
... nss 3.3
7 requires nspr 4.19 or newer.
...And 7 more matches
SpiderMonkey 1.8.7
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz (md5 checksum: a45
74365938222adca0a6bd33329cb32).
... —22 march 2011 platform support spidermonkey 1.8.
7 is supported on all the platforms where firefox 10 runs.
... spidermonkey 1.8.
7 includes type inference, which boosts the speed of the jägermonkey jit by about 30% over version 1.8.5.
...And 7 more matches
NSS 3.36.7 release notes
introduction network security services (nss) 3.36.
7 is a patch release for nss 3.36.
... the bug fixes in nss 3.36.
7 are described in the "bugs fixed" section below.
... distribution information the hg tag is nss_3_36_
7_rtm.
...And 6 more matches
SpiderMonkey 17
these release notes are an incomplete draft and were initially seeded from the (now-defunct) 1.8.8 release notes, which were themselves seeded from the 1.8.5 release notes, so lots of the information here isn't actually new to spidermonkey 1
7.
... the mozilla javascript team is pleased to announce the release of spidermonkey 1
7.
... you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs1
7.0.0.tar.gz (md5 checksum: 20b6f8f1140ef6e4
7daa3b16965c9202).
...And 6 more matches
NSS 3.17.4 release notes
introduction network security services (nss) 3.1
7.4 is a patch release for nss 3.1
7.
... the bug fixes in nss 3.1
7.4 are described in the "bugs fixed" section below.
... distribution information the hg tag is nss_3_1
7_4_rtm.
...And 5 more matches
NSS 3.37.1 release notes
introduction network security services (nss) 3.3
7.1 is a patch release for nss 3.3
7.
... distribution information the hg tag is nss_3_3
7_1_rtm.
... nss 3.3
7.1 requires nspr 4.19 or newer.
...And 5 more matches
NSS 3.37.3 release notes
introduction network security services (nss) 3.3
7.3 is a patch release for nss 3.3
7.
... distribution information the hg tag is nss_3_3
7_3_rtm.
... nss 3.3
7.3 requires nspr 4.19 or newer.
...And 5 more matches
NSS 3.47.1 release notes
introduction network security services (nss) 3.4
7.1 is a patch release for nss 3.4
7.
... the bug fixes in nss 3.4
7.1 are described in the "bugs fixed" section below.
... the nss team would like to recognize first-time contributors: craig disselkoen distribution information the hg tag is nss_3_4
7_1_rtm.
...And 5 more matches
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
tamarin-central rev
703:2cee46be9ce0 was declared stable on 12/02/08.
... performance testsuite time metric the following is a comparison of the current tamarin-central (tc-
703) versus the prior build (tc-
700) as well as current against the vm in flash player 10.
... osdefault-jitinterpretedaggressive jit mac (os/x 10.4 intel, 2ghz dual core)tc-
703 vs tc-
700: 0.0%tc-
703 vs flash10: 1.1% slowertc-
703 vs tc-
700: 1
7.4% fastertc-
703 vs flash10: 165.3% fastertc-
703 vs tc-
700: 0.1% fastertc-
703 vs flash10: 0.8% slower windows (xp pro, 2.13ghz dual core)tc-
703 vs tc-
700: 0.6% fastertc-
703 vs flash10: 0.8% fastertc-
703 vs tc-
700: 16.4% fastertc-
703 vs flash10: 148.
7% fastertc-
703 vs tc-
700: 0.1% slowertc-
703 vs flash10: 5.2% faster linux (ubuntu linux, 2.13 ghz dual core)tc-
703 vs tc-
700: 6.0% fastertc-
703 vs flash10: 1.
7% fastertc-
703 vs tc-
700: 89.5% fastertc-
703 vs flash10: 182.0% fastertc-
703 vs tc-
700: 6.1% fastertc-
703 vs flash10: 1.4% faster ...
...And 4 more matches
NSS 3.27.2 Release Notes
introduction network security services (nss) 3.2
7.2 is a patch release for nss 3.2
7.
... distribution information the hg tag is nss_3_2
7_2_rtm.
... nss 3.2
7.2 requires nspr 4.13 or newer.
...And 4 more matches
2006-10-27 - Archive of obsolete content
summary: mozilla.dev.builds - october 21st to october 2
7th 2006 fx 1.5.0.x (linux) not building since 20-oct-2006 1
7:45 pdt october 22nd: gavin sharp answered a question that was posted by tony mechelynck.
...he has already built firefox 1.5.0.
7 on the same machine with no problems.
... october 2
7: alex responded to peter weilbacher posting stating that he is going to look for a solaris newsgroup because he is not sure how to check if the library is installed or where to get the packages.
...And 3 more matches
New in JavaScript 1.7 - Archive of obsolete content
the following is a changelog for javascript 1.
7.
... javascript 1.
7 is a language update introducing several new features, in particular generators, iterators, array comprehensions, let expressions, and destructuring assignment.
... using javascript 1.
7 in order to use some of the new features of javascript 1.
7, you need to specify that you wish to use javascript 1.
7.
...And 3 more matches
NSS 3.17 release notes
introduction the nss team has released network security services (nss) 3.1
7, which is a minor release.
... distribution information the hg tag is nss_3_1
7_rtm.
... nss 3.1
7 requires nspr 4.10.
7 or newer.
...And 3 more matches
PKCS 7 functions
the public functions listed here perform pkcs #
7 operations required by mail and news applications and by some of the nss tools.
... function name/documentation source code nss versions sec_pkcs
7addcertificate mxr 3.3 and later sec_pkcs
7addrecipient mxr 3.2 and later sec_pkcs
7addsigningtime mxr 3.2 and later sec_pkcs
7containscertsorcrls mxr 3.4 and later sec_pkcs
7contentisencrypted mxr 3.4 and later sec_pkcs
7contentissigned mxr 3.4 and later sec_pkcs
7contenttype mxr 3.2 and la...
...ter sec_pkcs
7copycontentinfo mxr 3.4 and later sec_pkcs
7createcertsonly mxr 3.3 and later sec_pkcs
7createdata mxr 3.2 and later sec_pkcs
7createencrypteddata mxr 3.2 and later sec_pkcs
7createenvelopeddata mxr 3.2 and later sec_pkcs
7createsigneddata mxr 3.2 and later sec_pkcs
7decodeitem mxr 3.2 and later sec_pkcs
7decoderabort mxr 3.9 and later sec_pkcs
7decoderfinish mxr 3.2 and later sec_pkcs
7decoderstart mxr 3.2 and later sec_pkcs
7decoderupdate mxr 3.2 and later sec_pkcs
7de...
...And 2 more matches
307 Temporary Redirect - HTTP
http 30
7 temporary redirect redirect status response code indicates that the resource requested has been temporarily moved to the url given by the location headers.
... the only difference between 30
7 and 302 is that 30
7 guarantees that the method and the body will not be changed when the redirected request is made.
... with 302, some old clients were incorrectly changing the method to get: the behavior with non-get methods and 302 is then unpredictable on the web, whereas the behavior with 30
7 is predictable.
... status 30
7 temporary redirect specifications specification title rfc
7231, section 6.4.
7: 30
7 temporary redirect hypertext transfer protocol (http/1.1): semantics and content ...
nss tech note7
rsa signing and encryption with nss nss technical note:
7 this technical note explains how to use nss to perform rsa signing and encryption.
...pkcs #1 v1.5 block formatting question: in pkcs #1 v1.5 (section 8.1 encryption-block formatting) and v2.1 (section
7.2.1 encryption operation), pkcs1 v1.5 padding is described like this: 00 || 02 || ps || 00 || m but in pkcs #1 v2.0 (section 9.1.2.1 encoding operation, step 3) and on the w3c web site (http://www.w3.org/tr/xmlenc-core/#rsa-1_5), pkcs1 v1.5 padding is described like this: 02 || ps || 00 || m 00 at the beginning is missing.
... sample code sample code 4: pki encryption references rsa labs pkcs #1 web site rfc 344
7: rsa pkcs #1 v2.1 poupou's blog: common question: how to encrypt using rsa ...
2006-10-27 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - october 20, 2006 - october 2
7, 2006 announcements none this week.
... fx 1.5.0.x (linux) not building since 20-oct-2006 1
7:45 pdt?
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - november 10 - 1
7, 2006 announcements none for this week discussions how to fiter out mail for a particular recepient?
... meetings calendar project weekly status meeting - 2006/11/15 1
7:00 utc (meeting notes) calendar project weekly qa chat - 2006/11/02 16:30 utc (meeting notes) ...
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.builds - november 10th to november 1
7th 2006 how to build in yellowdog linux 4.1?
... november 11th: bryan wellander is trying to build mozilla 1.
7.13 using yellowdog linux 4.1.
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.l10n - november 1
7, 2006 announcements seamonkey 1.1b in russian (ru-ru) seamonkey 1.1b in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in russian (ru-ru) seamonkey 1.0.6 in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in czech (cs-cz) seamonkey 1.0.6 in czech (cs-cz) is uploaded to ftp.mozilla.org seamonkey 1.0.6 he-il seamonkey 1.0.6 he-il is released.
... going to fosdem 200
7 fosdem 200
7 (free and open source software developers' european meeting), february 24th - 25th.
407 Proxy Authentication Required - HTTP
the http 40
7 proxy authentication required client error status response code indicates that the request has not been applied because it lacks valid authentication credentials for a proxy server that is between the browser and the server that can access the requested resource.
... status 40
7 proxy authentication required example response http/1.1 40
7 proxy authentication required date: wed, 21 oct 2015 0
7:28:00 gmt proxy-authenticate: basic realm="access to internal site" specifications specification title rfc
7235, section 3.2: 40
7 proxy authentication required http/1.1: authentication ...
417 Expectation Failed - HTTP
the http 41
7 expectation failed client error response code indicates that the expectation given in the request's expect header could not be met.
... status 41
7 expectation failed specifications specification title rfc
7231, section 6.5.14: 41
7 expectation failed hypertext transfer protocol (http/1.1): semantics and content ...
507 Insufficient Storage - HTTP
the hypertext transfer protocol (http) 50
7 insufficient storage response status code may be given in the context of the web distributed authoring and versioning (webdav) protocol (see rfc 4918).
... status 50
7 insufficient storage specifications specification title rfc 4918, section 11.5: 50
7 insufficient storage web distributed authoring and versioning ...
Key Values - Web APIs
vk_menu (0x12) vk_lmenu (0xa4) vk_rmenu (0xa5) kvk_option (0x3a) kvk_rightoption (0x3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x01000023) keycode_alt_left (5
7) keycode_alt_right (58) "altgraph" [5] the altgr or altgraph (alternate graphics) key.
... gdk_key_mode_switch (0xff
7e) gdk_key_iso_level3_shift (0xfe03) gdk_key_iso_level3_latch (0xfe04) gdk_key_iso_level3_lock (0xfe05) gdk_key_iso_level5_shift (0xfe11) gdk_key_iso_level5_latch (0xfe12) gdk_key_iso_level5_lock (0xfe13) qt::key_altgr (0x01001103 qt::key_mode_switch (0x010011
7e) "capslock" the caps lock key.
... gdk_key_hyper_l (0xffed) gdk_key_hyper_r (0xffee) qt::key_hyper_l (0x01000056) qt::key_hyper_r (0x0100005
7) "meta" [1] the meta key.
...And 113 more matches
Index
7 gcintegration developing mozilla, firefox, garbage collection, intermediate, intro, jsapi, needsupdate, spidermonkey, tools, memory the spidermonkey garbage collector (gc) will be changing a lot in the future.
... 1
7 jsapi reference needscontent, spidermonkey js::deflatestringtoutf8buffer 18 boolean_to_jsval jsapi reference, obsolete, spidermonkey boolean_to_jsval converts a bool argument, b, to a boolean jsval.
... 2
7 js::booleanvalue jsapi reference, reference, référence(2), spidermonkey js::booleanvalue converts a c boolean of type bool to js::value, the type of javascript values.
...And 108 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
7 arpa glossary, infrastructure .arpa (address and routing parameter area) is a top-level domain used for internet infrastructure purposes, especially reverse dns lookup (i.e., find the domain name for a given ip address).
...since 200
7, utf-8 superseded it on the web.
... 1
7 alignment subject alignment subject, css, glossary, alignment in css box alignment the alignment subject is the thing (or things) being aligned by the property.
...And 98 more matches
SVG documentation index - SVG: Scalable Vector Graphics
7 example svg, xml in this example, we use xhtml, svg, javascript, and the dom to animate a swarm of "motes".
... 1
7 svg presentation attributes attribute, beginner, draft, reference, svg svg presentation attributes are css properties that can be used as attributes on svg elements.
... 2
7 attributename needscompattable, svg, svg attribute the attributename attribute indicates the name of the css property or attribute of the target element that is going to be changed during an animation.
...And 71 more matches
HTTP Index - HTTP
found 2
77 pages: # page tags and summary 1 http http, hypertext, reference, tcp/ip, web, web development, l10n:priority hypertext transfer protocol (http) is an application-layer protocol for transmitting hypermedia documents, such as html.
...
7 evolution of http guide, http, needsupdate, needsupdate(http/3) http (hypertext transfer protocol) is the underlying protocol of the world wide web.
...for some documents, size reduction of up to
70% lowers the bandwidth capacity needs.
...And 56 more matches
Windows Media in Netscape - Archive of obsolete content
netscape
7.1 has the ability to load the microsoft® windows media player™ as an activex control, and thus developers can now build multimedia experiences that script the windows media player in netscape
7.1, just as they do in internet explorer.
... netscape
7.1 will work with both the windows media player 6.4 activex control as well as versions
7 through 9.
... this article explains how to embed the windows media player activex control in web pages to support netscape
7.1, how to control the windows media player activex control using javascript and provides working examples.
...And 49 more matches
Index - Learn web development
7 html: a good basis for accessibility at, accessibility, article, beginner, buttons, codingscripting, forms, html, learn, links, a11y, assistive technology, keyboard, screenreader, semantics you should now be well-versed in writing accessible html for most occasions.
... 1
7 how do i use github pages?
... 2
7 what do common web layouts contain?
...And 48 more matches
sslerr.html
ssl_error_us_only_server -1228
7 "unable to communicate securely.
... ssl_error_unsupported_version -122
79 "peer using unsupported version of security protocol." on a client socket, this means the remote server has attempted to negotiate the use of a version of ssl that is not supported by the nss library, probably an invalid version number.
... -122
78 (unused) ssl_error_wrong_certificate -122
77 "client authentication failed: private key in key database does not correspond to public key in certificate database." ssl_error_bad_cert_domain -122
76 "unable to communicate securely with peer: requested domain name does not match the server's certificate." this error code should be returned by the certificate authentication callback function when it detects that the common name in the remote server's certificate does not match the hostname sought by the local client, according to the matching rules specified for cert_verifycertname.
...And 46 more matches
WebGL constants - Web APIs
one_minus_dst_color 0x030
7 passed to blendfunc or blendfuncseparate to multiply a component by one minus the destination's color.
... depth_range 0x0b
70 passed to getparameter to return a length-2 array of floats giving the current depth range.
... depth_writemask 0x0b
72 passed to getparameter to determine if the depth write mask is enabled.
...And 45 more matches
IDBObjectStore - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbobjectstorechrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitaddchrome ...
...And 42 more matches
HTML documentation index - HTML: Hypertext Markup Language
found 23
7 pages: # page tags and summary 1 html: hypertext markup language html, html5, landing, web, l10n:priority html (hypertext markup language) is the most basic building block of the web.
...
7 global attributes attribute, html, reference, web global attributes are attributes common to all html elements; they can be used on all elements, though they may have no effect on some elements.
...it can have the following values: 1
7 hidden global attributes, html, reference the hidden global attribute is a boolean attribute indicating that the element is not yet, or is no longer, relevant.
...And 41 more matches
JSAPI reference
runtimes and contexts js_init added in spidermonkey 31 js_shutdown struct jsruntime js_newruntimeobsolete since jsapi 52 js_destroyruntime js_getruntimeprivate js_setruntimeprivate js_setnativestackquota added in spidermonkey 1
7 js_contextiteratorobsolete since jsapi 52 js_finish obsolete since jsapi 19 struct jscontext js_newcontext js_destroycontext js_destroycontextnogc js_setcontextcallback enum jscontextop js_getruntime js_getparentruntime added in spidermonkey 31 js_getobjectruntime added in spidermonkey 1
7 js_getcontextprivate js_setcontextprivate js_getsecondcontextprivate adde...
...d in spidermonkey 1
7 js_setsecondcontextprivate added in spidermonkey 1
7 js_setinterruptcallback added in spidermonkey 31 js_getinterruptcallback added in spidermonkey 31 js_requestinterruptcallback added in spidermonkey 31 js_checkforinterrupt added in jsapi 45 js_destroycontextmaybegc obsolete since jsapi 14 js_setbranchcallback obsolete since javascript 1.9.1 js_setoperationcallback obsolete since jsapi 30 js_getoperationcallback obsolete since jsapi 30 js_triggeroperationcallback obsolete since jsapi 30 js_clearoperationcallback obsolete since javascript 1.9.1 js_getoperationlimit obsolete since javascript 1.9.1 js_setoperationlimit obsolete since javascript 1.9.1 js_max_operation_limit obsolete since javascript 1.9.1 js_operation_weight_base obsolete since javascri...
...pt 1.9.1 js_setthreadstacklimit obsolete since jsapi 13 js_setscriptstackquota obsolete since javascript 1.8.6 js_setoptions obsolete since jsapi 2
7 js_getoptions obsolete since jsapi 2
7 js_toggleoptions obsolete since jsapi 2
7 enum jsversion jsversion_ecma_3 jsversion_1_6 jsversion_1_
7 jsversion_1_8 jsversion_ecma_5 jsversion_default jsversion_unknown jsversion_latest js_getimplementationversion js_getversion js_setversionforcompartment added in spidermonkey 31 js_stringtoversion js_versiontostring js_setversion obsolete since jsapi 25 js::currentglobalornull added in spidermonkey 31 js_getglobalforscopechain obsolete since jsapi 25 js_getglobalobject obsolete since jsapi 24 js_setglobalobject obsolete since jsapi 25 js_in...
...And 39 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
computers are dual-boot (windows
7 and linux fedora 19 by 2013).
...the old netscape 4.x the file is encoded (byte-shift/rotary is
7), and the presence of the file (netscape.cfg) in the mozilla_home directory suffices for it to be read and executed.
... for mozilla 1.x.x, firefox, thunderbird or netscape
7 it is still a javascript file, the byte-shift is 13 by default, but can be removed using the pref("general.config.obscure_value", 0); preference in any appropriate .js file dedicated to autoconfig (here autoconf.js).
...And 38 more matches
NSS_3.12_release_notes.html
nss 3.12 release notes 1
7 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 50
77) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
... nss 3.12 requires nspr 4.
7.1.
...the tar.gz or zip file expands to an nss-3.12 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.
7.1 binary distributions to get the nspr 4.
7.1 header files and shared libraries, which nss 3.12 requires.
...And 36 more matches
BluetoothRemoteGATTDescriptor - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothremotegattdescriptor experimentalchrome full support 5
7notes full support 5
7notes notes macos only.
... full support 5
7notes disabled notes linux and versions of windows earlier than 10.disabled from version 5
7: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
70notes notes windows 10.edge full support ≤
79notes full support ≤
79notes notes macos only.
...And 34 more matches
filter - CSS: Cascading Style Sheets
syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(
75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(1
75%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-function> [<filter-function>]* | none for a reference to an svg <filter> element, use the following: fil...
... <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3
710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3
710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height=...
..."110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3
710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3
711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.standard-table { border: 1px solid rgb(18
7, 18
7, 1...
...And 31 more matches
Experimental features in Firefox
nightly 53 yes developer edition 53 no beta 53 no release 53 no preference name dom.dialog_element.enabled global attribute: inputmode our implementation of the inputmode global attribute has been updated as per the whatwg spec (bug 150952
7), but we still need to make other changes too, like making it available on contenteditable content.
... nightly
75 yes developer edition
75 no beta
75 no release
75 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
...for more details on the status of this feature, see bug 163960
7.
...And 30 more matches
KeyboardEvent: code values - Web APIs
keyboardevent.code value code firefox chrome 0x0000 "unidentified" "" 0x0001 "escape" "escape" 0x0002 "digit0" "digit0" 0x0003 "digit1" "digit1" 0x0004 "digit2" "digit2" 0x0005 "digit3" "digit3" 0x0006 "digit4" "digit4" 0x000
7 "digit5" "digit5" 0x0008 "digit6" "digit6" 0x0009 "digit
7" "digit
7" 0x000a "digit8" "digit8" 0x000b "digit9" "digit9" 0x000c "minus" "minus" 0x000d "equal" "equal" 0x000e "backspace" "backspace" 0x000f "tab" "tab" 0x0010 "keyq" "keyq" 0x0011 "key...
...w" "keyw" 0x0012 "keye" "keye" 0x0013 "keyr" "keyr" 0x0014 "keyt" "keyt" 0x0015 "keyy" "keyy" 0x0016 "keyu" "keyu" 0x001
7 "keyi" "keyi" 0x0018 "keyo" "keyo" 0x0019 "keyp" "keyp" 0x001a "bracketleft" "bracketleft" 0x001b "bracketright" "bracketright" 0x001c "enter" "enter" 0x001d "controlleft" "controlleft" 0x001e "keya" "keya" 0x001f "keys" "keys" 0x0020 "keyd" "keyd" 0x0021 "keyf" "keyf" 0x0022 "keyg" "keyg" 0x0023 "keyh" "keyh" 0x0024 "keyj" "keyj" 0x0025 "keyk" "keyk" 0x0026 "ke...
...yl" "keyl" 0x002
7 "semicolon" "semicolon" 0x0028 "quote" "quote" 0x0029 "backquote" "backquote" 0x002a "shiftleft" "shiftleft" 0x002b "backslash" "backslash" 0x002c "keyz" "keyz" 0x002d "keyx" "keyx" 0x002e "keyc" "keyc" 0x002f "keyv" "keyv" 0x0030 "keyb" "keyb" 0x0031 "keyn" "keyn" 0x0032 "keym" "keym" 0x0033 "comma" "comma" 0x0034 "period" "period" 0x0035 "slash" "slash" 0x0036 "shiftright" "shiftright" 0x003
7 "numpadmultiply" "numpadmultiply" 0x0038 "altleft" "altleft" 0x0039 "space" "space" 0x00...
...And 30 more matches
BluetoothCharacteristicProperties - Web APIs
full support
70notes notes windows 10.edge full support ≤
79notes full support ≤
79notes notes edgeos and macos only.
... full support ≤
79notes disabled notes linux and versions of windows earlier than 10.disabled from version ≤
79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support ≤
79notes notes windows 10.firefox no support noie no support noopera full support yessafari no support nowebview android no support nochrome android full support 56firefox android no support noopera android full support yessafari ios no support nosamsung internet android full support 6.0au...
...And 27 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
traditionally, the object element has been used differently by microsoft internet explorer and by mozilla-based browsers such as netscape
7.
...here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d2
7cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> </object> in the above example, the classid attribute that goes along with the object element points to a "clsid:" urn followed by the unique identifier of an activex control (in the above example, the string beginning with "d2
7...").
... with the release of netscape
7.1, this kind of activex use of the object element is supported for use with the microsoft® windows media player.
...And 26 more matches
StringView - Archive of obsolete content
the code stringview.js "use strict"; /*\ |*| |*| :: number.isinteger() polyfill :: |*| |*| /docs/web/javascript/reference/global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = function isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -900
7199254
740992 && nval < 900
7199254
740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper network |*| |*| revision #12, march 21st, 201
7 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/stringview |*| https://developer.mozilla.org/docs/user:fusionchess |*| https://github.com/madmurphy/stringview.js |*| |*| this framework is released under the gnu lesser gen...
...*/ ntranscrtype &=
7; break typeswitch; case "object": classswitch: switch (vinput.constructor) { case stringview: /* the input argument is a stringview: a new buffer will be created.
...*/ ntranscrtype &=
7; break typeswitch; case arraybuffer: /* the input argument is an arraybuffer: the buffer will be shared.
...And 24 more matches
Implementation Status - Archive of obsolete content
et binding attributes supported 3.2.5 model item property attributes partial in some cases a loop error can occur on valid bindings 302168; 3.3.1 model supported 3.3.2 instance partial instance element with two child element does not trigger exception 33
7302; 3.3.3 submission partial no support for @indent and complex schema validation 2
78
761; 2
78
762; 3.3.4 bind partial using the index() function in binds does not work.
... 292333; 3.4 extension module unsupported 300
760; 3.5 mustunderstand module unsupported 300
75
7; 4.
... 2
78448; 338146; 4.2 initialization events supported 4.2.1 xforms-model-construct supported 4.2.2 xforms-model-construct-done supported 4.2.3 xforms-ready supported 4.2.4 xforms-model-destruct supported 4.3.1 xforms-rebuild supported 4.3.2...
...And 23 more matches
Web audio codec guide - Web media technologies
codec name (short) full codec name container support aac advanced audio coding mp4, adts, 3gp alac apple lossless audio codec mp4, quicktime (mov) amr adaptive multi-rate 3gp flac free lossless audio codec mp4, ogg, flac g.
711 pulse code modulation (pcm) of voice frequencies rtp / webrtc g.
722
7 khz audio coding within 64 kbps (for telephony/voip) rtp / webrtc mp3 mpeg-1 audio layer iii mp4, adts, mpeg1, 3gp opus opus webm, mp4, ogg vorbis vorbis webm, ogg [1] when mpeg-1 audio layer iii codec data is stored in an mpeg file, and there is no vide...
...g.
722, for example, strips away sounds outside the audio frequency bandwidth of 50 hz to
7 khz.
... aac (advanced audio coding) the advanced audio coding (aac) codec is defined as part of the mpeg-4 (h.264) standard; specifically, as part of mpeg-4 part 3 and mpeg-2 part
7.
...And 22 more matches
IDBTransaction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = tra...
... firefox durability guarantees note that as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112
702.) previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk.
...And 21 more matches
MathML Torture Test
book, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td>2</td> <td><img src="https://udn.realityripple.com/samples/b8/da4a50ea34.png" width="30" height="1
7" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <!-- <mrow> <msub><mi></mi><mn>2</mn></msub> <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</mn><none/> <mprescripts/> <mn>2</mn><none/> </m...
...multiscripts> </mrow> </math> </td></tr> <tr> <td>3</td> <td><img src="https://udn.realityripple.com/samples/8a/1d0e6e0
73c.png" width="58" height="4
7" alt="texbook, 1
7-1
7.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mrow> <mi>x</mi> <mo>+</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn> </mrow> </mfrac> </mrow> </math> </td></tr> <tr> <td>4</td> <td><img src="https://udn.realityripple.com/samples/a
7/2
7acbeabcf.png" width="
76" height="25" alt="texbook, 1
7-1
7.1" /></td> <td> ...
... <mi>y</mi> <mfrac> <mn>2</mn> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn> </mrow> </mfrac> </msup> </mrow> </math> </td></tr> <tr> <td>5</td> <td><img src="https://udn.realityripple.com/samples/d2/921226dd85.png" width="30" height="42" alt="texbook, 1
7-1
7.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mi>a</mi> <mrow> <mi>b</mi> <mo>/</mo> <mn>2</mn> </mrow> </mfrac> </mrow> </math> </td></tr> <tr> <td>6</td> <td><img src="https://udn.realityripple.com/samples/
76/5ce9da68c6.png" width="220" height...
...And 20 more matches
Hacking Tips
$ gdb --args js […] (gdb) b js::reportoverrecursed (gdb) r js> function f(i) { if (i % 2) f(i + 1); else f(i + 3); } js> f(0) breakpoint 1, js::reportoverrecursed (maybecx=0xfdca
70) at /home/nicolas/mozilla/ionmonkey/js/src/jscntxt.cpp:495 495 if (maybecx) (gdb) call js::dumpbacktrace(maybecx) #0 (nil) typein:2 (0x
7fffef1231c0 @ 0) #1 (nil) typein:2 (0x
7fffef1231c0 @ 24) #2 (nil) typein:3 (0x
7fffef1231c0 @ 4
7) #3 (nil) typein:2 (0x
7fffef1231c0 @ 24) #4 (nil) typein:3 (0x
7fffef1231c0 @ 4
7) […] #2515
7 0x
7fffefb...
...bc250 typein:2 (0x
7fffef1231c0 @ 24) #25158 0x
7fffefbbc1c8 typein:3 (0x
7fffef1231c0 @ 4
7) #25159 0x
7fffefbbc140 typein:2 (0x
7fffef1231c0 @ 24) #25160 0x
7fffefbbc0b8 typein:3 (0x
7fffef1231c0 @ 4
7) #25161 0x
7fffefbbc030 typein:5 (0x
7fffef123280 @ 9) note, you can do the exact same exercise above using lldb (necessary on osx after apple removed gdb) by running lldb -f js then following the remaining steps.
... $ gdb --args out/dist/bin/js ./foo.js […] spidermonkey unwinder is disabled by default, to enable it type: enable unwinder .* spidermonkey (gdb) b js::math_cos (gdb) run […] #0 js::math_cos (cx=0x14f2640, argc=1, vp=0x
7fffffff6a88) at js/src/jsmath.cpp:338 338 callargs args = callargsfromvp(argc, vp); (gdb) enable unwinder .* spidermonkey (gdb) backtrace 10 #0 0x0000000000f899
79 in js::math_cos(jscontext*, unsigned int, js::value*) (cx=0x14f2640, argc=1, vp=0x
7fffffff6a88) at js/src/jsmath.cpp:338 #1 0x0000000000ca9c6e in js::calljsnative(jscontext*, bool (*)(jscontext*, unsigned int, js::value*), js::...
...And 20 more matches
Permissions - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpermissionschrome full support 43edge full support
79firefox full support 46ie no support noopera full support yessafari no support nowebview android full support 43chrome android full support ...
... 46opera android full support yessafari ios no support nosamsung internet android full support 4.0accelerometer permissionchrome full support 62edge full support
79firefox ?
... safari ios no support nosamsung internet android full support 8.0accessibility-events permissionchrome full support 62edge full support
79firefox ?
...And 20 more matches
mix-blend-mode - CSS: Cascading Style Sheets
%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </lineargradient> <lineargradient id="blue"> <stop offset="0" stop-color="hsl(240,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> <ellipse class="item g" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> <ellipse class="item b" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> </svg> </div> </div> </div> <div class="cell"> multiply <div class="container multiply"> <div class="group"> <div class="item fi...
...refox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> <ellipse class="item g" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> <ellipse class="item b" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> </svg> </div> </div> </div> <div class="cell"> darken <div class="container darken"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> <ellipse class="item g" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> <ellipse class="item b" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> ...
... </svg> </div> </div> </div> <div class="cell"> screen <div class="container screen"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> <ellipse class="item g" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> <ellipse class="item b" cx="
75" cy="
75" rx="25" ry="
70"></ellipse> </svg> </div> </div> </div> <div class="cell"> lighten <div class="container lighten"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="
75" cy="
75" rx="25" ry="
7...
...And 20 more matches
Reference - Archive of obsolete content
-- dria 04:2
7, 22 september 2005 (pdt) those examples are not "bad examples" per se.
...btw, https://bugzilla.mozilla.org/attachment.cgi?id=1953
75 is a screenshot of a table of differences.
...maybe something like main article: javascript 1.2--sevenspade 15:16, 6 july 2006 (pdt) as a side note, the ability to to specify different versions has come up again - now between versions 1.6 and 1.
7.
...And 19 more matches
MathML Accessibility in Mozilla
we started exposing generic accessible objects for mathml in bug 92054
7 and so these can be retrieved by nvda starting with gecko 2
7.0 (firefox 2
7.0 / thunderbird 2
7.0 / seamonkey 2.24).
...in bug 11
75269 and bug 1001641, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions.
... accessfu: mathml support in android and firefox os is currently being implemented in our accessfu module and a patch is available on bug 11633
74.
...And 19 more matches
NSS tools : ssltab
example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x2
7) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0
700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) s...
...sl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x000006) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x3
7c9 0xb5c9 0x
7b
70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e5 |.....
... type = 22 (handshake) version = { 3,0 } length = 99
7 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello) length =
70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0:
77 8c 6e 26 6c 0c ec c0 d9 58 4f 4
7 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 1
7 75 43 a
7 4c 88 c
7 88 64 3c 50 41 48 4f
7f | \.uc§l.Ç.d<paho.
...And 19 more matches
NSS tools : ssltap
example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x2
7) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0
700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) s...
...sl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x000006) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x3
7c9 0xb5c9 0x
7b
70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e5 |.....
... type = 22 (handshake) version = { 3,0 } length = 99
7 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello) length =
70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0:
77 8c 6e 26 6c 0c ec c0 d9 58 4f 4
7 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 1
7 75 43 a
7 4c 88 c
7 88 64 3c 50 41 48 4f
7f | \.uc§l.Ç.d<paho.
...And 19 more matches
NSS Tools ssltap
command ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output output connected to interzone.mcom.com:443--> [alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x2
7) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0
700c0) ssl2/rsa/3des192ede-cb...
... (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x000006) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x3
7c9 0xb5c9 0x
7b
70 0x8fe9 0xd1d30x2592 }}]<-- [sslrecord { 0: 16 03 00 03 e5 |.....
... type = 22 (handshake) version = { 3,0 } length = 99
7 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello) length =
70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0:
77 8c 6e 26 6c 0c ec c0 d9 58 4f 4
7 d3 2d 01 45 |wn&l.ì..xog.-.e 10: 5c 1
7 75 43 a
7 4c 88 c
7 88 64 3c 50 41 48 4f
7f |\.uc§l.Ç.d<paho.
...And 19 more matches
NSS tools : ssltap
example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x2
7) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0
700c0) ssl...
...0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x000006) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x3
7c9 0xb5c9 0x
7b
70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e5 |.....
... type = 22 (handshake) version = { 3,0 } length = 99
7 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello) length =
70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0:
77 8c 6e 26 6c 0c ec c0 d9 58 4f 4
7 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 1
7 75 43 a
7 4c 88 c
7 88 64 3c 50 41 48 4f
7f | \.uc§l.Ç.d<paho.
...And 19 more matches
Index
7 address book interfaces mailnews, mozilla, seamonkey, thunderbird this page contains a list of the interfaces that you'll will most likely hit when writing patches for the address book or writing extensions.
... the reason this file name scheme was chosen was is this is how netscape
7.0 im stores buddy icons on disk.
... back 0.9.
7, we hit a wall with the compose window.
...And 19 more matches
Mozilla’s UAAG evaluation report
(p1) na this relates to multimedia players 2.
7 repair missing content.
...(p3) p we have no repair strategy in 2.
7 we have no way to configure that alt="" still needs to be repaired 2.9 render conditional content automatically.
...(p2) ni mozilla has no features for toggling redirects 3.
7 toggle images.
...And 18 more matches
NSS_3.12.3_release_notes.html
nss 3.12.3 requires nspr 4.
7.4.
...the tar.gz or zip file expands to an nss-3.12.3 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.
7.4 binary distributions to get the nspr 4.
7.4 header files and shared libraries, which nss 3.12.3 requires.
... nspr 4.
7.4 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.
7.4/.
...And 18 more matches
nsIAccessibleRole
role_caret
7 represents the system caret.
... role_chart 1
7 represents a graphical image used to represent data.
... role_column 2
7 represents a column of cells within a table.
...And 18 more matches
IDBDatabase - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbdatabasechrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
...And 18 more matches
Index - HTTP
7 access-control-allow-credentials cors, http, reference, header the access-control-allow-credentials response header tells browsers whether to expose the response to frontend javascript code when the request's credentials mode (request.credentials) is "include".
... 1
7 alt-svc draft, http, http header, needscompattable, needscontent, needsexample, reference the alt-svc header is used to list alternate ways to reach this website.
... 2
7 content-range http, http header, reference, response header, header the content-range response http header indicates where in a full body message a partial message belongs.
...And 18 more matches
WebAssembly - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0compileerrorchrome full support ...
... 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox ...
...And 18 more matches
WebAssembly
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0compileerrorchrome full support ...
... 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox ...
...And 18 more matches
Localization and Plurals
plural rule #0 (1 form) families: asian (chinese, japanese, korean), persian, turkic/altaic (turkish), thai, lao everything: 0, 1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 1
7, 18, 19, 20, 21, 22, 23, 24, 25, 26, 2
7, 28, 29, 30, 31, 32, 33, 34, 35, 36, 3
7, 38, 39, 40, 41, 42, 43, 44, 45, 46, 4
7, 48, 49, … plural rule #1 (2 forms) families: germanic (danish, dutch, english, faroese, frisian, german, norwegian, swedish), finno-ugric (estonian, finnish, hungarian), language isolate (basque), latin/greek (greek), semitic (hebrew), ...
...romanic (italian, portuguese, spanish, catalan), vietnamese is 1: 1 everything else: 0, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 1
7, 18, 19, 20, 21, 22, 23, 24, 25, 26, 2
7, 28, 29, 30, 31, 32, 33, 34, 35, 36, 3
7, 38, 39, 40, 41, 42, 43, 44, 45, 46, 4
7, 48, 49, 50, … plural rule #2 (2 forms) families: romanic (french, brazilian portuguese), lingala is 0 or 1: 0, 1 everything else: 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 1
7, 18, 19, 20, 21, 22, 23, 24, 25, 26, 2
7, 28, 29, 30, 31, 32, 33, 34, 35, 36, 3
7, 38, 39, 40, 41, 42, 43, 44, 45, 46, 4
7, 48, 49, 50, 51, … plural rule #3 (3 forms) families: baltic (latvian, latgalian) ends in 0: 0 ends in 1, excluding 11: 1, 21, 31, 41, 51, 61,
71, 81, 91, 101, 121, 131, 141, 151, 161, 1
71, 181, 191, 201, 221, 231, 241...
..., 251, 261, 2
71, 281, 291, … everything else: 2, 3, 4, 5, 6,
7, 8, 9, 11, 12, 13, 14, 15, 16, 1
7, 18, 19, 22, 23, 24, 25, 26, 2
7, 28, 29, 32, 33, 34, 35, 36, 3
7, 38, 39, 42, 43, 44, 45, 46, 4
7, 48, 49, 52, 53, … plural rule #4 (4 forms) families: celtic (scottish gaelic) is 1 or 11: 1, 11 is 2 or 12: 2, 12 is 3-10 or 13-19: 3, 4, 5, 6,
7, 8, 9, 10, 13, 14, 15, 16, 1
7, 18, 19 everything else: 0, 20, 21, 22, 23, 24, 25, 26, 2
7, 28, 29, 30, 31, 32, 33, 34, 35, 36, 3
7, 38, 39, 40, 41, 42, 43, 44, 45, 46, 4
7, 48, 49, 50, 51, … plural rule #5 (3 forms) families: romanic (romanian) is 1: 1 is 0 or ends in 01-19, excluding 1: 0, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 1
7, 18, 19, 101, 102, 103, 104, 105, 106, 10
7, 108, 109, 110, 111, 112, 113, 114, 115, 116, 11
7, 118, 1...
...And 17 more matches
Mozilla Quirks Mode Behavior
obsolete since gecko 50 list bullets do not inherit the font size of the list (bug 9
7351).
... collapse the bottom or top margins of empty elements (bug 9
7361).
... indent nested dl elements (bug 8
749).
...And 17 more matches
NSS functions
this page lists all exported functions in nss 3.11.
7 it was ported from here.
...s_setexportpolicy mxr 3.2 and later nss_setfrancepolicy mxr 3.2 and later nssssl_versioncheck mxr 3.2.1 and later ssl_authcertificate mxr 3.2 and later ssl_authcertificatehook mxr 3.2 and later ssl_badcerthook mxr 3.2 and later ssl_certdbhandleset mxr 3.2 and later ssl_canbypass mxr 3.11.
7 and later ssl_cipherpolicyget mxr 3.2 and later ssl_cipherpolicyset mxr 3.2 and later ssl_cipherprefget mxr 3.2 and later ssl_cipherprefgetdefault mxr 3.2 and later ssl_cipherprefset mxr 3.2 and later ssl_cipherprefsetdefault mxr 3.2 and later ssl_clearsessioncache mxr 3.2 and later s...
...l_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelocks mxr 3.4 and later ssl_setpkcs11pinarg mxr 3.2 and later ssl_setsockpeerid mxr 3.2 and later ssl_seturl mxr 3.2 and later ssl_shutdownserversessionidcache mxr 3.
7.4 and later deprecated ssl functions the following ssl functions have been replaced with newer versions.
...And 17 more matches
Index - Firefox Developer Tools
7 dom inspector faq dom_inspector the file menu contains approaches which will allow you to inspect a document.
... 1
7 debugger-api debugger, intermediate, intro, javascript, tools mozilla’s javascript engine, spidermonkey, provides a debugging interface named debugger which lets javascript code observe and manipulate the execution of other javascript code.
... 2
7 debugger.object a debugger.object instance represents an object in the debuggee, providing reflection-oriented methods to inspect and modify its referent.
...And 17 more matches
requiredFeatures - SVG: Scalable Vector Graphics
ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="2
7">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="230" /> <text x="20" y="2
7">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-features> default value true if not defined, false if null or empty string as value animatable no <list-of-featu...
...-src>, <font-face-uri>, <font-face-format> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#basicfont the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <font-face-src> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#extensibility the browser supports the <foreignobject> element example svg <svg width="450" height="11
70" xmlns="http://www.w3.org/2000/svg"> <!-- testing : http://www.w3.org/tr/svg11/feature#svg --> <rect class="ko" x="10" y="10" height="25" width="430" /> <rect class="ok" x="10" y="10" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svg" /> <text x="20" y="2
7">http://www.w3.org/tr/svg11/feature#svg</text> <!-- testing : http://www.w3.org/tr/svg11/featur...
...eatures="http://www.w3.org/tr/svg11/feature#svgdom" /> <text x="20" y="52">http://www.w3.org/tr/svg11/feature#svgdom</text> <!-- testing : http://www.w3.org/tr/svg11/feature#svg-static --> <rect class="ko" x="10" y="60" height="25" width="430" /> <rect class="ok" x="10" y="60" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svg-static" /> <text x="20" y="
77">http://www.w3.org/tr/svg11/feature#svg-static</text> <!-- testing : http://www.w3.org/tr/svg11/feature#svgdom-static --> <rect class="ko" x="10" y="85" height="25" width="430" /> <rect class="ok" x="10" y="85" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svgdom-static" /> <text x="20" y="102">http://www.w3.org/tr/svg11/feature#svgdom-static</text> ...
...And 17 more matches
Error codes returned by Mozilla APIs
ns_error_out_of_memory (0x800
7000e) this error occurs when there is not enough memory available to carry out an operation, or an error occurred trying to allocate memory.
... ns_error_illegal_value (0x800
7005
7) an argument supplied to a method was not valid, for instance a null value was supplied as an argument which does not allow null values, or a value was out of range.
... ns_error_file_copy_or_move_failed (0x8052000
7) a call to nsifile.copyto() or nsifile.moveto() failed.
...And 16 more matches
Box-shadow generator - CSS: Cascading Style Sheets
-input" data-topic="top" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> left </div> <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> <div class="ui-slider" data-topic="left" data-min="-300" data-max="
700" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> <div class="ui-slider-input" data-topic="left" data-unit="px"></div> </div> <div id="transform_rotate" class="slidergroup"> <div class="ui-slider-name"> rotate </div> ...
...-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> </div> </div> </div> </div> </div> css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width:
74.54%; } .span_8 { width: 66.08%; } .span_
7 { width: 5
7.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.
7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.
78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* gro...
...uping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/
7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; m...
...And 16 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
« previousnext » this document was authored by taiga (gomita) gomibuchi and was originally published in japanese for the firefox developers conference summer 200
7.
...you can learn more about chromebug and download it at http://getfirebug.com/wiki/index.php/chromebug_user_guide you may also find this extension to be valuable: extension developer https://addons.mozilla.org/firefox/addon/
7434 developing extensions: what you need to know let’s delve into chrome, something you’ll need to know about in order to develop extensions.
...change to your name --> <em:creator>gomita</em:creator> <!-- web page address through which extension is distributed --> <em:homepageurl>http://www.xuldev.org/helloworld/</em:homepageurl> <!-- this section gives details of the target application for the extension (in this case: firefox 2) --> <em:targetapplication> <description> <em:id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</em:id> <em:minversion>2.0</em:minversion> <em:maxversion>4.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> create the chrome manifest fill in the chrome.manifest file as shown in listing 2.
...And 14 more matches
Accessibility documentation index - Accessibility
7 aria live regions aria, accessibility, arialive using javascript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.
...this means that most of the instructions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: 1
7 using the aria-activedescendant attribute attribute, document object model, needscontent, property, widget, aria-activedescendant this article describes the aria-activedescendant property.
... 2
7 using the aria-valuemin attribute aria, accessibility, needscontent the aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a slider, spinbutton or progressbar.
...And 14 more matches
Color picker tool - CSS: Cascading Style Sheets
-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5
70
7/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0,...
...tion: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("https://mdn.mozillademos.org/files/5
701/hue.png") center; background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100...
...%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5
705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #
777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 2...
...And 14 more matches
Codecs used by WebRTC - Web media technologies
however, rfc
7742 specifies that all webrtc-compatible browsers must support vp8 and h.264's constrained baseline profile for video, and rfc
78
74 specifies that browsers must support at least the opus codec as well as g.
711's pcma and pcmu formats.
... complete details of what video codecs and configurations webrtc is required to support can be found in rfc
7742: webrtc video processing and codec requirements.
... other notes the network payload format for sharing vp8 using rtp (such as when using webrtc) is described in rfc
7741: rtp payload format for vp8 video.
...And 14 more matches
NSS tools : certutil
elliptic curve name is one of the ones from suite b: nistp256, nistp384, nistp521 if nss has been compiled with support curves outside of suite b: sect163k1, nistk163, sect163r1, sect163r2, nistb163, sect193r1, sect193r2, sect233k1, nistk233, sect233r1, nistb233, sect239k1, sect283k1, nistk283, sect283r1, nistb283, sect409k1, nistk409, sect409r1, nistb409, sect5
71k1, nistk5
71, sect5
71r1, nistb5
71, secp160k1, secp160r1, secp160r2, secp192k1, secp192r1, nistp192, secp224k1, secp224r1, nistp224, secp256k1, secp256r1, secp384r1, secp521r1, prime192v1, prime192v2, prime192v3, prime239v1, prime239v2, prime239v3, c2pnb163v1, c2pnb163v2, c2pnb163v3, c2pnb1
76v1, c2tnb191v1, c2tnb191v2, c2tnb191v3, c2pnb208w1, c2tnb239v1, c2tnb23...
...9v2, c2tnb239v3, c2pnb2
72w1, c2pnb304w1, c2tnb359w1, c2pnb368w1, c2tnb431r1, secp112r1, secp112r2, secp128r1, secp128r2, sect113r1, sect113r2 sect131r1, sect131r2 -r display a certificate's binary der encoding when listing information about that certificate with the -l option.
... -y exp set an alternate exponent value to use in generating a new rsa public key for the database, instead of the default value of 6553
7.
...And 13 more matches
Web Console remoting - Firefox Developer Tools
protocol packets look as follows: { "to": "root", "type": "listtabs" } { "from": "root", "consoleactor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console
7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ...
...this is no longer the case: we have made changes to allow the web console client to reuse the tabnavigated notification (bug
792062).
... the pageerror packet is: { "from": "conn0.console9", "type": "pageerror", "pageerror": { "errormessage": "referenceerror: foo is not defined", "sourcename": "http://localhost/~mihai/mozilla/test.js", "linetext": "", "linenumber": 6, "columnnumber": 0, "category": "content javascript", "timestamp": 134
7294508210, "error": false, "warning": false, "exception": true, "strict": false, "private": false, } } the packet is similar to nsiscripterror - for simplicity.
...And 13 more matches
BasicCardResponse - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "0
7", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbasiccardresponsechrome no support noedge no support ≤18 —
79firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedregions preference (needs to be set to a com...
... webview android no support nochrome android full support 5
7firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedregions preference (needs to be set t...
...And 13 more matches
Using CSS transitions - CSS: Cascading Style Sheets
perty: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(2
70deg); -webkit-transform: rotate(2
70deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function:...
... left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition,
7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color...
...; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration: 1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(2
70deg); -webkit-transform: rotate(2
70deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transfo...
...And 13 more matches
reftest opportunities files - Archive of obsolete content
ttp://dbaron.org/css/test/sec090205 http://dbaron.org/css/test/sec090301 http://dbaron.org/css/test/sec090302a http://dbaron.org/css/test/sec090302b http://dbaron.org/css/test/sec090302c http://dbaron.org/css/test/sec090302d http://dbaron.org/css/test/sec0905 http://dbaron.org/css/test/sec414 http://dbaron.org/css/test/floatpos http://dbaron.org/css/test/floatpos2 http://dbaron.org/css/test/sec090
7 http://dbaron.org/css/test/sec0909 http://dbaron.org/css/test/bidi http://dbaron.org/css/test/bidi2 http://dbaron.org/css/test/sec1001a http://dbaron.org/css/test/sec1001b http://dbaron.org/css/test/sec1001c http://dbaron.org/css/test/sec1001d http://dbaron.org/css/test/sec1001e http://dbaron.org/css/test/sec100301 http://dbaron.org/css/test/sec100302 http://dbaron.org/css/test/sec100303 http://d...
...baron.org/css/test/sec100304 http://dbaron.org/css/test/sec100305 http://dbaron.org/css/test/sec10030
7 http://dbaron.org/css/test/sec1004 http://dbaron.org/css/test/sec1004b http://dbaron.org/css/test/sec100604 http://dbaron.org/css/test/sec100
7 http://dbaron.org/css/test/sec100
7b http://dbaron.org/css/test/abspos_inherit http://dbaron.org/css/test/linebox1 http://dbaron.org/css/test/linebox2 http://dbaron.org/css/test/linebox3 http://dbaron.org/css/test/linebox4 http://dbaron.org/css/test/inlinetest http://dbaron.org/css/test/sec1101 http://dbaron.org/css/test/sec110102 http://dbaron.org/css/test/sec110102b http://dbaron.org/css/test/sec1102a http://dbaron.org/css/test/sec1102b http://dbaron.org/css/test/sec1201 http://dbaron.org/css/test/sec1202 http://dbaron.org/css/test/sec140201image h...
...ttp://dbaron.org/css/test/sec150203c http://dbaron.org/css/test/sec150203d http://dbaron.org/css/test/shadow http://dbaron.org/css/test/sec1
702 http://dbaron.org/css/test/sec1
70201 http://dbaron.org/css/test/sec1
704 http://dbaron.org/css/test/sec1
704b http://dbaron.org/css/test/sec1
70401 http://dbaron.org/css/test/sec1
70501 http://dbaron.org/css/test/sec1
70501a http://dbaron.org/css/test/sec1
70501b http://dbaron.org/css/test/sec1
70502 http://dbaron.org/css/test/sec1
70503 http://dbaron.org/css/test/sec1
70504 http://dbaron.org/css/test/tborder1 http://dbaron.org/css/test/tborder2 http://dbaron.org/css/test/sec1
706c http://dbaron.org/css/test/sec1801 http://dbaron.org/css/test/sec1802 http://dbaron.org/css/test/sec1803 http://dbaron.org/css/test/outline http://dbaron.org/css/test/sq_small http...
...And 12 more matches
nsIAccessibleEvent
constants constant gecko version description 1.
7 - 1.8.1 1.9 - 1.9.2 2.0 event_show 0x8002 0x0001 an object has been created.
... event_active_decendent_changed 0x000
7 0x0004 the active descendant of a component has changed.
... event_location_change 0x800b 0x000a 0x000
7 an object has changed location, shape, or size.
...And 12 more matches
Fullscreen API - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreen deprecatedchrome full support
71 full support
71 full support 15alternate name alternate name uses the non-standard name: webkitisfullscreenedge full support ≤
79 full support ≤
79 full support ≤
79alter...
...t 15alternate name alternate name uses the non-standard name: webkitisfullscreensafari full support 6alternate name full support 6alternate name alternate name uses the non-standard name: webkitisfullscreenwebview android full support
71 full support
71 full support ≤3
7alternate name alternate name uses the non-standard name: webkitisfullscreenchrome android full support
71 full support
71 full support 18a...
... full support ≤18prefixed prefixed implemented with the vendor prefix: webkit full support 12prefixed prefixed implemented with the vendor prefix: msfirefox full support 64 full support 64 no support 4
7 — 65disabled disabled from version 4
7 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true).
...And 12 more matches
IDBIndex - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbindexchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitcountchrome ...
...And 12 more matches
Border-image generator - CSS: Cascading Style Sheets
border image generator html content <div id="container"> <div id="gallery"> <div id="image-gallery"> <img class="image" src="https://udn.realityripple.com/samples/2c/fa0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd63e
77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/0
7/1fcc35
7205.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/
7b/dd3
7c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff
72dab.png" data-stateid="border5"/> ...
...ss="name"> border-image-source: </span> <span id="out-border-source" class="value"> </span> </div> </div> </div> </div> css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width:
74.54%; } .span_8 { width: 66.08%; } .span_
7 { width: 5
7.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.
7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.
78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* gro...
...uping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/
7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; pad...
...And 12 more matches
Mozilla Crypto FAQ - Archive of obsolete content
encryption export regulations published on january 14, 2000, the release on february 11, 2000, of source code for ssl, s/mime, and general pki functionality for use in the mozilla project, and the "bernstein advisory" issued by the bureau of export administration on february 1
7, 2000.
...export of source code for open source software is addressed in part
740 (pdf), section
740.13(e), "unrestricted encryption source code"; export of binaries is addressed in
740.1
7.
... for more information see the documentation for the cert
7.db certificate database.
...And 11 more matches
NSS 3.12.4 release notes
our qa tested nss 3.12.4 with nspr 4.8, but it should work with nspr 4.
7.1 or later.
... new functions in the nss shared library: pk11_isinternalkeyslot (see pk11pub.h) secmod_opennewslot (see pk11pub.h) new error codes (see secerr.h): sec_error_bad_info_access_method sec_error_crl_import_failed new oids (see secoidt.h) sec_oid_x509_any_policy the nssckbi pkcs #11 module's version changed to 1.
75.
... bug 321
755: implement crldistributionpoint extension in libpkix bug 391434: avoid multiple encoding/decoding of pkix_pl_oid to and from ascii string bug 40529
7: problems building nss/lib/ckfw/capi/ with mingw gcc bug 420991: libpkix returns wrong nss error code bug 42
7135: add super-h (sh3,4) architecture support bug 431958: improve des and sha512 for x86_64 platform bug 433
791: win16 support should be deleted from nss bug 449332: secu_parsecommandline does not validate its inputs bug 453
735: when using cert9 (sqlite3) db, set or change master password fails bug 463544: warning: passing enum* for an int* argument in pkix_validate.c bug 469588: co...
...And 11 more matches
Rich-Text Editing in Mozilla - Developer guides
else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=4
70,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-siz...
...n</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="
7">maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value)...
...tion class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o
7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha
7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk54
7qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa
7" /> <img class="intlink" title="print" onclick="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaaw...
...And 11 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
for more specific gecko recommendations, please see the gecko compatibility handbook gecko although many web developers are aware of firefox, mozilla, and netscape browsers, far fewer are aware that these browsers are members of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve
7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamonkey.
...fortunately, other browsers such as opera (versions
7 & later) and to a lesser extent, internet explorer (versions 5.5 & later) also support the standards to a degree.
...users of netscape 6, netscape
7, compuserve
7, mozilla, opera will not be able to view the site properly.
...And 10 more matches
Index - Game development
found
74 pages: # page tags and summary 1 game development apps, game development, gamedev, games, html5 games, javascript games, web gaming is one of the most popular computer activities.
... 4 index meta found
74 pages: 5 introduction to html5 game development (summary) firefox os, games, html5, mobile games built with html5 work on smartphones, tablets, pcs and smart tvs.update your game whenever you want.players can play the game anywhere, anytime.
...
7 publishing games games, html5, javascript, monetization, promotion, distribution, publishing this series of articles looks at the options you have when you want to publish and distribute your game, and earn something out of it while you wait for it to become famous.
...And 10 more matches
Floats - Learn web development
is natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px; background-color: rgb(20
7,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow.
... to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px; background-color: rgb(20
7,232,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin-right: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(20
7,232,220); padding: 1em; } so let's think about how the float works — the element with the float set on it (the <div> element in this case) is taken out of the normal layout flow of the document and stuck to the left-hand side of its parent container (<body>, in this case).
...And 10 more matches
Debugging Frame Reflow
log file analysis the log file for a simple table like <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100"> <tbody> <tr> <td>foo</td> </tr> </tbody> </table> </body> </html> will create the following log: vp 00b9
7c30 r=0 a=9180,44
70 c=9180,44
70 cnt=856 scroll 00b9
7ee0 r=0 a=9180,44
70 c=9180,44
70 cnt=85
7 scroll 00b9
7ee0 r=0 a=9180,44
70 c=9180,44
70 cnt=858 canvas 00b9
7c6c r=0 a=9180,uc c=9180,44
70 cnt=859 area 02d
7afe4 r=0 a=9180,uc c=9180,uc cnt=860 text 02d
7b150 r=0 a=9180,uc c=uc,uc cnt=861 text 02d
7b150 d=0,0 block 02d
7b210 r=0 a=9180,uc c=8940,uc cnt=862 block 02d
7b210 d=8940,0 ...
... area 02d
7afe4 d=9180,120 canvas 00b9
7c6c d=9180,44
70 scroll 00b9
7ee0 d=9180,44
70 scroll 00b9
7ee0 d=9180,44
70 vp 00b9
7c30 d=9180,44
70 vp 00b9
7c30 r=1 a=9180,44
70 c=9180,44
70 cnt=863 scroll 00b9
7ee0 r=1 a=9180,44
70 c=9180,44
70 cnt=864 scroll 00b9
7ee0 r=1 a=9180,44
70 c=9180,44
70 cnt=865 canvas 00b9
7c6c r=1 a=9180,uc c=9180,44
70 cnt=866 area 02d
7afe4 r=1 a=9180,uc c=9180,uc cnt=86
7 block 02d
7b210 r=1 a=9180,uc c=8940,uc cnt=868 text 02d
7b3f8 r=0 a=8940,uc c=uc,uc cnt=869 text 02d
7b3f8 d=0,0 tblo 02d
7b5f0 r=0 a=8940,uc c=0,0 cnt=8
70 tbl 02d
7b
7ec r=0 a=8940,uc c=1500,uc cnt=8
71 rowg 00b984a4 r=0 a=uc,uc c=uc,uc cnt=8
72 row 02d
7baf8 r=0 a=uc,uc c=uc,uc cnt=8
73 cell 02d
7bc98 r=0 a=uc,uc c=uc,uc cnt=8
74 block 02d
7bcf8 r=0 a=uc,uc...
... c=uc,uc cnt=8
75 text 02d
7be84 r=0 a=uc,uc c=uc,uc cnt=8
76 text 02d
7be84 d=300,285 me=300 block 02d
7bcf8 d=300,300 me=300 cell 02d
7bc98 d=330,330 me=330 row 02d
7baf8 d=uc,330 rowg 00b984a4 d=uc,330 colg 02d
7bfb0 r=0 a=uc,uc c=uc,uc cnt=8
77 col 02d
7c0d8 r=0 a=0,0 c=1500,uc cnt=8
78 col 02d
7c0d8 d=0,0 colg 02d
7bfb0 d=0,0 rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=8
79 row 02d
7baf8 r=2 a=1500,uc c=1500,uc cnt=880 cell 02d
7bc98 r=2 a=1440,uc c=1410,uc cnt=881 block 02d
7bcf8 r=2 a=1410,uc c=1410,uc cnt=882 block 02d
7bcf8 d=1410,300 cell 02d
7bc98 d=1440,330 row 02d
7baf8 d=1500,330 rowg 00b984a4 d=1500,330 colg 02d
7bfb0 r=2 a=1500,uc c=1500,u...
...And 10 more matches
NSS 3.52 release notes
the nss team would like to recognize first-time contributors: zhujianwei
7 hans petter jansson distribution information the hg tag is nss_3_52_rtm.
... bug 16233
74 - support new pkcs #11 v3.0 message interface for aes-gcm and chachapoly.
... bug 1630
721 - add softoken functions for fips.
...And 10 more matches
certutil
-y exp set an alternate exponent value to use in generating a new rsa public key for the database, instead of the default value of 6553
7.
... the available alternate values are 3 and 1
7.
... -
7 emailaddrs add a comma-separated list of email addresses to the subject alternative name extension of a certificate or certificate request that is being created or added to the database.
...And 10 more matches
FileSystemEntry - Web APIs
asafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystementry experimentalchrome full support 8alternate name full support 8alternate name alternate name uses the non-standard name: entryedge full support
79prefixed full support
79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support 50ie no support noopera no support nosafari full support 11.1webview...
... android full support ≤3
7alternate name full support ≤3
7alternate name alternate name uses the non-standard name: entrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: entryfirefox android full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yesprefixed full support ...
... yesprefixed prefixed implemented with the vendor prefix: webkitcopyto experimentaldeprecatednon-standardchrome full support 8edge full support
79firefox no support noie no support noopera no support nosafari no support nowebview android full support ≤3
7chrome android full support 18firefox android no support noopera android no support nosafari i...
...And 10 more matches
IDBKeyRange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbkeyrangechrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yesboundchrome full support 24 full support 24 no support 23 — 24prefixed prefixed impleme...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support
7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
...And 10 more matches
MSGestureEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmsgestureevent non-standardchrome no support noedge no support 12 —
79firefox no support noie full support 10opera no support nosafari no support nowebview android no support nochrome android no support ...
... noopera android no support nosafari ios no support nosamsung internet android no support nomsgestureevent() constructor non-standardchrome no support noedge no support 12 —
79firefox no support noie full support 10opera no support nosafari no support nowebview android no support nochrome android no support ...
... support noopera android no support nosafari ios no support nosamsung internet android no support noexpansion non-standardchrome no support noedge no support 12 —
79firefox no support noie full support 10opera no support nosafari no support nowebview android no support nochrome android no support ...
...And 10 more matches
MediaMetadata - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediametadata experimentalchrome full support 5
7edge no support nofirefox full support
71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support 5
7firefox android ?
... samsung internet android full support
7.0mediametadata() constructor experimentalchrome full support 5
7edge no support nofirefox full support
71ie no support noopera full support yessafari ?
...And 10 more matches
Border-radius generator - CSS: Cascading Style Sheets
t-h" data-unit=" px" data-sensivity="2"></div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="group section"> <div id="dimensions"> <div class="ui-input-slider" data-topic="width" data-info="width" data-unit=" px" data-min="150" data-max="
700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="
75" data-max="350" data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group section"> <div id="radius-lock"> <div class="info"> rounded corner <...
...ft'></div> </div> <div id="unit-selection"> <div class="info"> select border units </div> </div> </div> </div> </div> css content /* grid of ten * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width:
74.54%; } .span_8 { width: 66.08%; } .span_
7 { width: 5
7.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.
7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.
78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* g...
...rouping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/
7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-i...
...And 10 more matches
Making content editable - Developer guides
else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=4
70,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-siz...
...n</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="
7">maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value)...
...tion class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o
7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha
7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk54
7qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa
7" /> <img class="intlink" title="print" onclick="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaaw...
...And 10 more matches
Firefox user agent string reference - HTTP
rv:geckoversion indicates the release version of gecko (such as "1
7.0").
... on desktop, geckotrail is the fixed string "20100101" firefox/firefoxversion indicates the browser is firefox, and provides the version (such as "1
7.0").
...for instance, this could be "camino/2.1.1", or "seamonkey/2.
7.1".
...And 10 more matches
HTML text fundamentals - Learn web development
my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addev...
...oard and i am married to a fish.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 2
7) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos...
... character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">milk eggs bread hummus</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addev...
...And 9 more matches
Drawing graphics - Learn web development
the below example shows a simple 2d canvas-based bouncing balls animation that we originally met in our introducing javascript objects module: around 2006–200
7, mozilla started work on an experimental 3d canvas implementation.
...add the following at the bottom of your javascript: ctx.fillstyle = 'rgb(0, 255, 0)'; ctx.fillrect(
75,
75, 100, 100); save and refresh, and you'll see your new rectangle.
...add the following to your code: ctx.fillstyle = 'rgba(255, 0, 255, 0.
75)'; ctx.fillrect(25, 100, 1
75, 50); now try drawing some more rectangles of your own; have fun!
...And 9 more matches
Linux compatibility matrix
distribution kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3 released eol fedora 16 3.1 2.14 2.30 2.24 3.2 0.22 4.6 4.6 2.9 n/a nov 2011 feb 2013 fedora 1
7 3.3 2.15 2.32 2.24 3.4 0.24 4.
7 4.
7 3.0 n/a may 2012 jul 2013 fedora 18 3.6 2.16 2.34 2.24 3.6 0.26 4.
7 4.
7 3.1 n/a jan 2013 jan 2014 fedora 19 3.9 2.1
7 2.36 2.24 3.8 0.30 4.8.1 4.8 3.3 n/a jul 2013 jan 2015 fedora 20 3.11 2.18 2.38 2.24 3.10 0.3...
...0 4.8.2 4.8 3.3 n/a dec 2013 jun 2015 fedora 21 3.1
7 2.20 2.42 2.24 3.14 0.32 4.9 4.9 3.4 n/a dec 2014 dec 2015 fedora 22 4.0 2.21 2.44 2.24 3.16 0.32 5.1 4.9, 5.1 3.5 n/a may 2015 jul 2016 fedora 23 4.2 2.22 2.46 2.24 3.18 0.33 5.1 5.1 3.
7 n/a nov 2015 dec 2016 fedora 24 4.5 2.23 2.48 2.24 3.20 0.34 6.1 6.1 3.8 n/a jun 2016 aug 201
7 fedora 25 4.8 2.24 2.50 2.24 3.22.2 0.34 6.2 6.2 3.8 n/a nov 2016 dec 201
7 fedora 26 4.11 2.25 2.52 2.24 3.22.16 0.34
7.1
7.1 4.0 n/a jul 201
7 jun 2018 fedora 2
7 4.1...
...3 2.26 2.54 2.24 3.22.24 0.34
7.2
7.2 4.0 n/a nov 201
7 dec 2018 fedora 28 4.16 2.2
7 2.56 2.24 3.22.30 0.34 8.0.1 8.0.1 6.0 n/a may 2018 may 2019 fedora 29 4.18 2.28 2.58 2.24 3.24.1 0.34 8.2.1 8.2.1
7.0 3.
7 oct 2018 nov 2019 fedora 30 5.0 2.29 2.60 2.24 3.24.8 0.34 9.0.1 9.0.1 8.0 3.
7 apr 2019 ?
...And 9 more matches
DMD
since you cannot mark files in /sdcard/ as executable, we will use /data/local/tmp for this purpose: adb push dmd_fennec /data/local/tmp adb shell cd /data/local/tmp chmod
755 dmd_fennec the final step is to make android use the above wrapper script while launching fennec, so that the environment variable is present when fennec starts up.
... adb shell am start -n org.mozilla.fennec_$username/.app trigger use the existing memory-report dumping hook: adb shell am broadcast -a org.mozilla.gecko.memory_dump in logcat, you should see output similar to this: i/dmd (20
731): opened /storage/emulated/0/download/memory-reports/dmd-default-20
731.json.gz for writing ...
... i/geckoconsole(20
731): nsimemoryinfodumper dumped reports to /storage/emulated/0/download/memory-reports/unified-memory-report-default-20
731.json.gz the path is where the memory reports and dmd reports get dumped to.
...And 9 more matches
SpiderMonkey 1.8
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js-1.8.0-rc1.tar.gz (md5 checksum: eaad8815dcc66a
71
7ddb8
7e9
724d964e).
...it is much faster than spidermonkey 1.
7 and contains a few new language features and api features, described in detail below.
... —9 march 2009 known issues spidermonkey 1.8 has one known significant regression from 1.
7.
...And 9 more matches
nsIFile
inherits from: nsisupports last changed in gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.2
7) nsifile is the correct platform-agnostic way to specify a file; you should always use this instead of a string to ensure compatibility.
...as of mozilla 1.
7, this attribute is ignored on unix systems.
... the value of this attribute is milliseconds since midnight (00:00:00), january 1, 19
70 greenwich mean time (gmt).
...And 9 more matches
Zombie compartments
that more fine-graned representation may look like this │ ├───28.45 mb (05.
71%) -- top(https://www.google.de/, id=141) │ │ ├──13.66 mb (02.
74%) -- active/window(https://www.google.de/) │ │ │ ├───
7.83 mb (01.5
7%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.56 mb (00.
71%) -- objects │ │ │ │ │ ├──3.04 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ malloc-heap ...
...│ │ │ │ │ └──0.00 mb (00.00%) ── non-heap/code/asm.js │ │ │ │ ├──2.43 mb (00.49%) -- shapes │ │ │ │ │ ├──1.4
7 mb (00.29%) ++ gc-heap │ │ │ │ │ └──0.96 mb (00.19%) ++ malloc-heap │ │ │ │ ├──1.03 mb (00.21%) -- scripts │ │ │ │ │ ├──0.
72 mb (00.14%) ── gc-heap [2] │ │ │ │ │ └──0.31 mb (00.06%) ── malloc-heap/data [2] │ │ │ │ ├──0.80 mb (00.16%) -- type-inference │ │ │ │ │ ├──0.66 mb (00.13%) ── type-scripts [2] │ │ │ │ │ ├──0.13 mb (00.03%) ── allocation-site-tables [2] │ │ │ │ │ └──0.02 mb (00.00%) ── object-type-tables [2] │ ...
...│ │ │ └──0.01 mb (00.00%) -- sundries │ │ │ │ ├──0.01 mb (00.00%) ── malloc-heap [2] │ │ │ │ └──0.00 mb (00.00%) ── gc-heap [2] │ │ │ └───5.83 mb (01.1
7%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ layout │ │ │ ├──1.03 mb (00.21%) ── style-sheets [2] │ │ │ ├──0.60 mb (00.12%) ++ dom │ │ │ └──0.01 mb (00.00%) ── property-tables [2] │ │ ├───8.86 mb (01.
78%) -- cached/window(https://www.google.de/?gws_rd=ssl) │ │ │ ├──4.23 mb (00.85%) -- layout │ │ │ │ ├──3.80 mb (00.
76%) ── style-sets │ │ │ │ ├──0.29 mb (00.06%) ── pres-shell │ │ │ ...
...And 9 more matches
Date and time formats used in HTML - HTML: Hypertext Markup Language
example html date and time strings string date and/or time 2005-06-0
7 june
7, 2005 [details] 08:45 8:45 am [details] 08:45:25 8:45 am and 25 seconds [details] 0033-08-04t03:40 3:40 am on august 4, 33 [details] 19
77-04-01t14:00:30 30 seconds after 2:00 pm on april 1, 19
77 [details] 1901-01-01t00:00z midnight utc on january 1, 1901 [details] 1901-01-01t00:00:01-04:00 1 second...
... for the purposes of html dates, years are always at least four digits long; years prior to the year 1000 are padded with leading zeroes ("0"), so the year
72 is written as 00
72.
... days of the month month numbers 1, 3, 5,
7, 8, 10, and 12 are 31 days long.
...And 9 more matches
Numbers and dates - JavaScript
numbers in javascript, numbers are implemented in double-precision 64-bit binary format ieee
754 (i.e., a number between ±2−1022 and ±2+1023, or about ±10−308 to ±10+308, with a numeric precision of 53 bits).
... decimal numbers 123456
7890 42 // caution when using leading zeros: 0888 // 888 parsed as decimal 0
777 // parsed as octal in non-strict mode (511 in decimal) note that decimal literals can start with a zero (0) followed by another decimal digit, but if every digit after the leading 0 is smaller than 8, the number gets parsed as an octal number.
... var flt_signbit = 0b10000000000000000000000000000000; // 214
7483648 var flt_exponent = 0b01111111100000000000000000000000; // 2139095040 var flt_mantissa = 0b00000000011111111111111111111111; // 838860
7 octal numbers octal number syntax uses a leading zero.
...And 9 more matches
Date.parse() - JavaScript
the date.parse() method parses a string representation of a date, and returns the number of milliseconds since january 1, 19
70, 00:00:00 utc or nan if the string is unrecognized or, in some cases, contains illegal date values (e.g.
...(other formats may be used, but results are implementation-dependent.) return value a number representing the milliseconds elapsed since january 1, 19
70, 00:00:00 utc and the date obtained by parsing the given string representation of a date.
... description the parse() method takes a date string (such as "2011-10-10t14:48:00") and returns the number of milliseconds since january 1, 19
70, 00:00:00 utc.
...And 9 more matches
LIR - Archive of obsolete content
5 allocp pointer allocate stack space (result is an address) 6 reti void return an int
7 retq void 64 bit return a quad 8 retd void return a double 9 livei void extend live range of an int 10 liveq void 64 bit extend live range of a quad 11 lived void extend live range of a double 12 file void source filename for debug symbols 13 line void source line number for debug symbols 14 comment ...
...void a comment shown, on its own line, in lir dumps 15 not in use load 16 not in use 1
7 ldc2i integer load char and sign-extend to an int 18 lds2i integer load short and sign-extend to an int 19 lduc2ui integer load unsigned char and zero-extend to an unsigned int 20 ldus2ui integer load unsigned short and zero-extend to an unsigned int 21 ldi integer load int 22 ldq quad 64 bit load quad 23 ldd double load double 24 ldf2d double load float and extend to a double store 25 sti2c void store int truncated to char 26 sti2s void store int truncated to short 2
7 sti void store int 28 stq void ...
... store double as a float (losing precision) 31 not in use call 32 not in use 33 callv void call subroutine that returns void 34 calli integer call subroutine that returns an int 35 callq quad 64 bit call subroutine that returns a quad 36 calld double call subroutine that returns a double branch 3
7 j void jump always 38 jt void jump if true 39 jf void jump if false 40 jtbl void jump to address in table 41 label void a jump target (no machine code is emitted for this) 42 not in use guards 43 x void exit always 44 xt void exit if true 45 xf void exit if false 46 ...
...And 8 more matches
Table Layout Regression Tests - Archive of obsolete content
a typical beginning of a dump (*.rgd file) looks like: <frame va="15022440" type="viewport(-1)" state="2
70340" parent="0"> <view va="4
71
71904"> </view> <stylecontext va="15022232"> <font serif 240 240 0 /> <color data="-16
777216"/> <background data="0 2 3 -1 0 0 "/> <spacing data="left: null top: null right: null bottom: null left: null top: null right: null bottom: null left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bo...
...tw null 0 auto " /> <text data="0 0 0 normal normal 0[0x0]tw normal " /> <textreset data="0 10[0xa]enum " /> <display data="0 1 0 0 0 0 0 0 0 0 0 0 " /> <visibility data="0 1 1.000000" /> <table data="0 0 4 -1 1 " /> <tableborder data="1 null null 0 2 " /> <content data="0 0 0 null " /> <quotes data="0 " /> <ui data="3 0 0 1 " /> <uireset data="
7 0 4" /> <xul data="0 0 0 0 0 1 <svg data="0 1.000000 1.000000 0 1.000000" /> </stylecontext> the baseline log will look like: type manifest file: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed.
...writing regression data to e:\moz_src\mozilla\layout\html\tests\table\core\verify\standards1.rgd comparing to regression data from e:\moz_src\mozilla\layout\html\tests\table\core\baseline\standards1.rgd frame bbox mismatch: 0,2643
7,4824,600 vs.
...And 8 more matches
Basic math in JavaScript — numbers and operators - Learn web development
floating point numbers (floats) have decimal points and decimal places, for example 12.5, and 56.
7786543.
... octal — base 8, uses 0–
7 in each column.
... first of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order: let myint = 5; let myfloat = 6.66
7; myint; myfloat; number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.
...And 8 more matches
Useful string methods - Learn web development
try entering the following lines: let browsertype = 'mozilla'; browsertype.length; this should return the number
7, because "mozilla" is
7 characters long.
... to retrieve the last character of any string, we could use the following line, combining this technique with the length property we looked at above: browsertype[browsertype.length-1]; the length of "mozilla" is
7, but because the count starts at 0, the character position is 6; using length-1 gets us the last character.
...stitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = co...
...And 8 more matches
Client-Server Overview - Learn web development
the format of http messages is defined in a "web standard" (rfc
7230).
...an html document (but not the actual content itself, which is in the body): get https://developer.mozilla.org/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/53
7.36 (khtml, like gecko) chrome/52.0.2
743.116 safari/53
7.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.
7,*;q=0.
7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv
7ezngie; csrftoken=zipujsazv6pcgcbjscj1zu6pqzb...
...fmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.14
71911953; ffo=true the first and second lines contain most of the information we talked about above: the type of request (get).
...And 8 more matches
Mozilla MathML Status
mathml is always enabled since bug 660
762.
...see bug 95895
7.
...see bug 3568
70.
...And 8 more matches
NSS 3.54 release notes
certificate authority changes the following ca certificates were added: bug 1645186 - certsign root ca g2 sha-256 fingerprint: 65
7cfe2fa
73faa384625
71f332a2363a46fce
7020951
710
702cdfbb6eeda3305 bug 16451
74 - e-szigno root ca 201
7 sha-256 fingerprint: beb00b30839b9bc32c32e444
7905950641f26421b15ed089198b518ae2ea1b99 bug 1641
716 - microsoft ecc root certificate authority 201
7 sha-256 fingerprint: 358df39d
764af9e1b
766e9c9
72df352ee15cfac22
7af6ad1d
70e8e4a6edcba02 bug 1641
716 - ...
...microsoft rsa root certificate authority 201
7 sha-256 fingerprint: c
741f
70f4b2a8d88bf2e
71c14122ef53ef10eba0cfa5e64cfa20f4188530
73e0 the following ca certificates were removed: bug 1645199 - addtrust class 1 ca root sha-256 fingerprint: 8c
72092
79ac04e2
75e16d0
7fd3b
775e80154b5968046e31f52dd25
766324e9a
7 bug 1645199 - addtrust external ca root sha-256 fingerprint: 68
7fa4513822
78fff0c8b11f8d43d5
766
71c6eb2bceab413fb83d965d06d2ff2 bug 1641
718 - luxtrust global root 2 sha-256 fingerprint: 54455f
7129c20b144
7c418f99
7168f24c58fc5023bf5da5be2eb6e1dd8902ed5 bug 163998
7 - staat der nederlanden root ca - g2 sha-256 fingerprint: 668c8394
7da63b
724bece1
743c31a0e6aed0db8ec5b31be3
77bb
784f91b6
71...
...6f bug 1618402 - symantec class 2 public primary certification authority - g4 sha-256 fingerprint: fe863d0822fe
7a2353fa484d5924e8
75656d3dc9fb58
771f6f616f9d5
71bc592 bug 1618402 - symantec class 1 public primary certification authority - g4 sha-256 fingerprint: 363f3c849eab03b0a2a0f636d
7b86d04d3ac
7fcfe26a0a9121ab9
795f6e1
76df bug 1618402 - verisign class 3 public primary certification authority - g3 sha-256 fingerprint: eb04cf5eb1f39afa
762f2bb120f296cba520c1b9
7db1589565b81cb9a1
7b
7244 a number of certificates had their email trust bit disabled.
...And 8 more matches
NSS 3.55 release notes
nss 3.55 requires nspr 4.2
7 or newer.
...see bug 164
7752 for details.
... nspr dependency updated to 4.2
7.
...And 8 more matches
Bytecode Descriptions
implements: b.3.1 proto property names in object initializers, step
7.a.
...and 12-1
7.
...and 12-1
7.
...And 8 more matches
Migrating from Firebug - Firefox Developer Tools
this may be changed in bug 1269
730.
...it is currently missing the preview for html, xml and svg, though, which is tracked in bug 124
7392 and bug 1262
796, but when you click on the url of the request you switch to the network monitor, which has a preview tab.
...only the live preview of changes is currently missing, which is tracked in bug 106
7318 and bug 815464.
...And 8 more matches
Writing a WebSocket server in C# - Web APIs
here's a barebones server implementation: using system.net.sockets; using system.net; using system; class server { public static void main() { tcplistener server = new tcplistener(ipaddress.parse("12
7.0.0.1"), 80); server.start(); console.writeline("server has started on 12
7.0.0.1:80.{0}waiting for a connection...", environment.newline); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); } } tcpclient methods: system.net.sockets.networkstream getstream() gets the stream which is the communication channel.
... you must: obtain the value of the "sec-websocket-key" request header without any leading or trailing whitespace concatenate it with "258eafa5-e914-4
7da-95ca-c5ab0dc85b11" (a special guid specified by rfc 6455) compute sha-1 and base64 hash of the new value write the hash back as the value of "sec-websocket-accept" response header in an http response if (new system.text.regularexpressions.regex("^get").ismatch(data)) { const string eol = "\r\n"; // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = enc...
...otocols" + eol + "connection: upgrade" + eol + "upgrade: websocket" + eol + "sec-websocket-accept: " + convert.tobase64string( system.security.cryptography.sha1.create().computehash( encoding.utf8.getbytes( new system.text.regularexpressions.regex("sec-websocket-key: (.*)").match(data).groups[1].value.trim() + "258eafa5-e914-4
7da-95ca-c5ab0dc85b11" ) ) ) + eol + eol); stream.write(response, 0, response.length); } decoding messages after a successful handshake, the client will send encoded messages to the server.
...And 8 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div...
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 8 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } the fr unit tracks can be defined using any length unit.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } in this next example, we create a definition with a 2fr track then two 1fr tracks.
...And 8 more matches
Using CSS gradients - CSS: Cascading Style Sheets
<div class="angled-gradient"></div> div { width: 120px; height: 120px; } .angled-gradient { background: linear-gradient(
70deg, blue, pink); } when using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction.
... <div class="multicolor-linear"></div> div { width: 120px; height: 120px; } .multicolor-linear { background: linear-gradient(to left, lime 28px, red
77%, cyan); } creating hard lines to create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location.
... <div class="multiposition-stops"></div> <div class="multiposition-stop2"></div> div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; } .multiposition-stops { background: linear-gradient(to left, lime 20%, red 30%, red 45%, cyan 55%, cyan
70%, yellow 80% ); background: linear-gradient(to left, lime 20%, red 30% 45%, cyan 55%
70%, yellow 80% ); } .multiposition-stop2 { background: linear-gradient(to left, lime 25%, red 25%, red 50%, cyan 50%, cyan
75%, yellow
75% ); background: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50%
75%, yellow
75% ); } in the first example above, the lime goes from t...
...And 8 more matches
max-width - CSS: Cascading Style Sheets
syntax /* <length> value */ max-width: 3.5em; /* <percentage> value */ max-width:
75%; /* keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content(20em); /* global values */ max-width: inherit; max-width: initial; max-width: unset; values <length> defines the max-width as an absolute value.
...firefox supports applying max-width to table elements.ie full support
7opera full support 4notes full support 4notes notes css 2.1 leaves the behavior of max-width with table undefined.
... full support 1.0fit-content experimentalchrome full support 46 full support 46 full support 25prefixed prefixed implemented with the vendor prefix: -webkit-edge full support
79 full support
79 full support
79prefixed prefixed implemented with the vendor prefix: -webkit-firefox partial support 3prefixed notes partial support 3prefixed notes prefixed implemented with the vendor prefix: -moz-notes firefox implements the definitions...
...And 8 more matches
min-width - CSS: Cascading Style Sheets
oupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width:
75%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification.
...firefox supports applying min-width to table elements.ie full support
7opera full support 4notes full support 4notes notes css 2.1 leaves the behavior of min-width with table undefined.
...e no support noopera full support 12.1notes full support 12.1notes notes opera uses auto as the initial value for min-width.safari no support nowebview android full support 3
7notes full support 3
7notes notes chrome uses auto as the initial value for min-width.chrome android full support 25notes full support 25notes notes chrome uses auto as the initial value for min-width.firefox android full support ...
...And 8 more matches
<input type="range"> - HTML: Hypertext Markup Language
html examples <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50"></option> <option value="60"></option> <option value="
70"></option> <option value="80"></option> <option value="90"></option> <option value="100"></option> </datalist> screenshot live a range control with hash marks and labels you can add labels to your range control by adding the label attribute to the <option> elements corresponding to the tick marks you wish to have labels for.
... html examples <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50" label="50%"></option> <option value="60"></option> <option value="
70"></option> <option value="80"></option> <option value="90"></option> <option value="100" label="100%"></option> </datalist> screenshot live note: currently, no browser fully supports these features.
...(see firefox bug 981916, chrome bug 3410
71).
...And 8 more matches
Date - JavaScript
date objects contain a number that represents milliseconds since 1 january 19
70 utc.
... description the ecmascript epoch and timestamps a javascript date is fundamentally specified as the number of milliseconds that have elapsed since midnight on january 1, 19
70, utc.
... it should be noted that the maximum date is not of the same value as the maximum safe integer (number.max_safe_integer is 9,00
7,199,254,
740,991).
...And 8 more matches
Lexical grammar - JavaScript
decimal 123456
7890 42 // caution when using with a leading zero: 0888 // 888 parsed as decimal 0
777 // parsed as octal, 511 in decimal note that decimal literals can start with a zero (0) followed by another decimal digit, but if all digits after the leading 0 are smaller than 8, the number is interpreted as an octal number.
... this won't throw in javascript, see bug 95
7513.
... see also the page about parseint() exponential the decimal exponential literal is specified by the following format: ben; where b is a base number (integer or floating), followed by e char (which serves as separator or exponent indicator) and n, which is exponent or power number – a signed integer (as per 2019 ecma-262 specs): 0e-5 // => 0 0e+5 // => 0 5e1 // => 50 1
75e-2 // => 1.
75 1e3 // => 1000 1e-3 // => 0.001 binary binary number syntax uses a leading zero followed by a lowercase or uppercase latin letter "b" (0b or 0b).
...And 8 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
t> element in content model of all elements implementation status unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 124035
7) rendering model change notes svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status unknown allow overflow: scroll; to show scroll bars on <svg> elements implementation status unknown basic data types and interfaces ...
...resourcesrequired removed never implemented svgelement.viewportelement and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug
778654) svgelement.tabindex implemented (bug
778654) document.activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 999964, bug 1019326) allow leading and trailing w...
...t implementation status unknown moved pathlength attribute and gettotallength() and getpointatlength() methods from svgpathelement to svggeometryelement implemented (bug 1239100) document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug
7340
79) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug
721920) css transforms on outermost <svg> not affecting svgsvgelem...
...And 8 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
and was originally published in japanese for the firefox developers conference summer 200
7.
... <button label="button" width="200" height="100"/> listing 6: setting the size of a button also, as shown in listing
7, you can embed css inline into elements via the style attribute, which allows you to set sizes using units other than pixels.
... <button label="button" style="min-width: 10em;"/> listing
7: setting the size of a button using css markup hidden and collapsed the hidden and collapsed attributes act as switches to turn off the display of elements.
...And 7 more matches
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
to find the plugins directory applicable to netscape 6.1, 6.2.x, netscape
7.0 (and up), mozilla 1.0, and compuserve
7.0 this section details the suggested mechanism to find out where to install the plugin dll so that it is picked up by mozilla based browsers on the desktop.
... to find the path to the browser executable (exe) applicable to netscape 6.1, 6.2.x, netscape
7.0 (and up), mozilla 1.0, and compuserve
7.0 finding the browser executable is useful if you wish to launch the browser following installation of the plugin dll.
... to find the version of gecko used (for plugin compatibility) applicable to compuserve
7.0, netscape
7.0 (windows), and other aol browsers currently in beta only finding the version of gecko that the browser uses is useful, because plugin vendors may wish to take advantage of certain features (perhaps available via fixes to the netscape plugin api) that are only available in certain versions of gecko.
...And 7 more matches
No Proxy For configuration - Archive of obsolete content
new profiles contain the values "localhost, 12
7.0.0.1", by default.
...ee problems below) "localhost" also blocks any possible domains that start with the entry ("www.otherdomain.localhost") a hostname (with domain) domain name "www.mozilla.org" does not block hostnames or domains that end in the same string (other-www.mozilla.org) an ip address ip address "1.2.3.4" does not block hostnames that resolve to the ip address ("12
7.0.0.1" does not block "localhost") a network network w/ cidr block "10.0.0.0/8" does not block hostnames that resolve to the ip address range (10.0.0.0/8 is not "no proxy for intranet hostnames") optional - port-specific (optional) ":" + port number "<filter>:81" only black-lists port.
...for example: "https://mycompanyintranet/" formats that are not accepted example domain filters with interior wildcards www.*.com ip address string prefixes 12
7.
...And 7 more matches
TypeScript support in Svelte - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/0
7-typescript-support or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/0
7-typescript-support remember to run npm install && npm run dev to start your app in development mode.
...from last year's github octoverse report we can see that typescript is the
7th most used and 5th fastest growing language used on github.
... note: remember that you can run npx degit opensas/mdn-svelte-tutorial/0
7-typescript-support svelte-todo-typescript to get the complete to-do list application in javascript before you start porting it to typescript.
...And 7 more matches
Debugging on Windows
in vc
7 and 8 this option is called project > properties > debugging > command arguments.
... vc++
7.0 automatically finds additional dlls.
...by default it will be: vc++ 6.0: c:\program files\microsoft visual studio\common\msdev98\bin\autoexp.dat vc++
7.0: c:\program files\microsoft visual studio .net 2003\common
7\packages\debugger\autoexp.dat the file has information about the format in the beginning, and after a little practice you should be well on your way.
...And 7 more matches
Simple Thunderbird build
windows build prerequisites gnu/linux build prerequisites macos build prerequisites mapi headers on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=12905 are installed because the mapi header files (except mapi.h) are not bundled with visual studio 201
7 (windows sdk 10).
... you should copy 1
7 of the 18 header files to a windows sdk include directory so that the build process will find the files, that is c:\program files (x86)\windows kits\10\include\10.0.nnnnn.0\shared, where nnnnn is the highest number present on the system.
... note that the downloaded outlook 2010 mapi header files contain 18 fies, of which only 1
7 are needed.
...And 7 more matches
Internationalized Domain Names (IDN) Support in Mozilla Browsers
introduction netscape
7.1 is the first commercial browser that has built-in support for internationalized domain name under the new ietf rfc's established in 2003.
...until recently domain names allowed only a subset of
7-bit ascii characters.
... ascii-compatible encoding (ace) the next step is to convert the 8-bit characters in unicode to
7-bit ones using only restricted ascii characters.
...And 7 more matches
Investigating leaks using DMD heap scan mode
the result of that grep will contain output that looks something like this: cc-edges.158
73.log:0x
7f089
7082c00 [rc=1285] nsglobalwindowinner # 214
7483662 inner https://www.example.com/ * cc-edges.158
73.log: the first part is the file name where it was found.
... 158
73 is the pid of the process that leaked.
... * 0x
7f089
7082c00: this is the address of the leaking window.
...And 7 more matches
about:memory
for example: 585 (100.0%) -- preference-service └──585 (100.0%) -- referent ├──493 (84.2
7%) ── strong └───92 (15.
73%) -- weak ├──92 (15.
73%) ── alive └───0 (00.00%) ── dead leaf nodes represent actual measurements; the value of each internal node is the sum of all its children.
... 191.89 mb (100.0%) -- explicit ├───63.15 mb (32.91%) -- window-objects │ ├──24.5
7 mb (12.80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.52%) -- active │ │ │ ├──10.5
7 mb (05.51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.3
7%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.36%) ++ layout │ │ │ │ ├───1.94 mb (01.01%) ── style-sheets ...
...│ │ │ │ └───1.48 mb (00.
77%) -- (2 tiny) │ │ │ │ ├──1.43 mb (00.
75%) ++ dom │ │ │ │ └──0.05 mb (00.02%) ── property-tables │ │ │ └───9.61 mb (05.01%) ++ (18 tiny) │ │ └───4.39 mb (02.29%) -- js-zone(0x
7f69425b5800) │ ├──15.
75 mb (08.21%) ++ top(http://techcrunch.com/, id=20) │ ├──12.85 mb (06.69%) ++ top(http://arstechnica.com/, id=14) │ ├───6.40 mb (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) │ └───3.59 mb (01.8
7%) ++ (4 tiny) ├───45.
74 mb (23.84%) ++ js-non-window ├───33.
73 mb (1
7.58%) ── heap-unclassified ├───22.51 mb (11.
73%) ++ heap-overhead ├────6.62 mb (03.45%) ++ images ├────...
...And 7 more matches
Python binding for NSS
as of python 2.
7 deprecation warnings are no longer reported by default.
... release information release 1.0.1 release date 201
7-02-28 scm tag pynss_release_1_0_1 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_1/src/ change log add tls 1.3 cipher suites ssl_cipher_info.py now attempts to enable tls 1.3 fix build issue in setup.py.
...a single code base supports both py2 (minimum version 2.
7) and py3 when built for py2: text will be a unicode object binary data will be a str object ints will be python long object when built for py3: text will be a str object binary data will be a bytes object ints will be a python int object all pure python tests and examples have been ported to py3...
...And 7 more matches
IDBFactory - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbfactorychrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitcmpchrome ...
...And 7 more matches
Intersection Observer API - Web APIs
if you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.
75, 1].
... for example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.
75, 1] as the list of thresholds when creating the observer.
... threshold example <template id="boxtemplate"> <div class="samplebox"> <div class="label topleft"></div> <div class="label topright"></div> <div class="label bottomleft"></div> <div class="label bottomright"></div> </div> </template> <main> <div class="contents"> <div class="wrapper"> </div> </div> </main> .contents { position: absolute; width:
700px; height: 1
725px; } .wrapper { position: relative; top: 600px; } .samplebox { position: relative; left: 1
75px; width: 150px; background-color: rgb(245, 1
70, 140); border: 2px solid rgb(201, 126, 1
7); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height:
75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "ope...
...And 7 more matches
NotificationEvent - Web APIs
for androidsafari on iossamsung internetnotificationevent experimentalchrome full support 42edge full support ≤18firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie ?
... opera full support 3
7safari ?
... webview android no support nochrome android full support 42firefox android full support 44opera android full support 3
7safari ios ?
...And 7 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
15 00:01:18.1
71 --> 00:01:20.991 - this is big bat country.
... example
7 - example of a cue 1 - title crawl 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start some time ago in a place rather distant....
... example 8 - cue identifier from example
7 1 - title crawl example 9 - common usage of identifiers webvtt 1 00:00:22.230 --> 00:00:24.606 this is the first subtitle.
...And 7 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
opmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:is()chrome full support 68notes disabled full support 68notes disabled notes combinators in the selector list argument may not match correctly (see bug 84215
7).disabled from version 68: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... no support 66 —
71notes alternate name disabled notes combinators in the selector list argument may not match correctly (see bug 84215
7).alternate name uses the non-standard name: :matches()disabled from version 66 until version
71 (exclusive): this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support 12notes alternate name notes doesn't support combinators.alternate name uses the non-standard name: :-webkit-any()edge full support
79notes disabled full support
79notes disabled notes combinators in the selector list argument may not match correctly (see bug 84215
7).disabled from version
79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
...And 7 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } a simple...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> .wrapper { display: flex; align-items: flex-end; min-height: 200px; } .box1...
...And 7 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
6.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #
777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; ...
...-right { background: url("arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #3
79b4a; cursor: pointer; } /* * ui slider */ .ui-slider { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-slider > * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-r...
...adius: 3px; background: #eee; } .ui-slider-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 12px; height: 13px; margin: 0 0 0 -
7px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-button { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-slider-button:hover { background-color: #3
79b4a; cursor: pointer; } .ui-slider > input { width: 50px; margin: 0 10px; padding: 0; text-align: center; } /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "...
...And 7 more matches
<color> - CSS: Cascading Style Sheets
#ff00ff green #008000 lime #00ff00 olive #808000 yellow #ffff00 navy #000080 blue #0000ff teal #008080 aqua #00ffff css level 2 (revision 1) orange #ffa500 css color module level 3 aliceblue #f0f8ff antiquewhite #faebd
7 aquamarine #
7fffd4 azure #f0ffff beige #f5f5dc bisque #ffe4c4 blanchedalmond #ffebcd blueviolet #8a2be2 brown #a52a2a burlywood #deb88
7 cadetblue #5f9ea0 chartreuse #
7fff00 chocolate #d2691e coral #ff
7f50 ...
... cornflowerblue #6495ed cornsilk #fff8dc crimson #dc143c cyan (synonym of aqua) #00ffff darkblue #00008b darkcyan #008b8b darkgoldenrod #b8860b darkgray #a9a9a9 darkgreen #006400 darkgrey #a9a9a9 darkkhaki #bdb
76b darkmagenta #8b008b darkolivegreen #556b2f darkorange #ff8c00 darkorchid #9932cc darkred #8b0000 darksalmon #e996
7a darkseagreen #8fbc8f darkslateblue #483d8b darkslategray #2f4f4f darkslategrey #2f4f4f darkturquoise #00ced1 ...
... darkviolet #9400d3 deeppink #ff1493 deepskyblue #00bfff dimgray #696969 dimgrey #696969 dodgerblue #1e90ff firebrick #b22222 floralwhite #fffaf0 forestgreen #228b22 gainsboro #dcdcdc ghostwhite #f8f8ff gold #ffd
700 goldenrod #daa520 greenyellow #adff2f grey #808080 honeydew #f0fff0 hotpink #ff69b4 indianred #cd5c5c indigo #4b0082 ivory #fffff0 khaki #f0e68c lavender #e6e6fa lavenderblush #fff0f5 lawngreen #
7cfc00 ...
...And 7 more matches
max-height - CSS: Cascading Style Sheets
syntax /* <length> value */ max-height: 3.5em; /* <percentage> value */ max-height:
75%; /* keyword values */ max-height: none; max-height: max-content; max-height: min-content; max-height: fit-content(20em); /* global values */ max-height: inherit; max-height: initial; max-height: unset; values <length> defines the max-height as an absolute value.
...rcentage value is treated as none.computed valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max-height using percentage and keyword values table { max-height:
75%; } form { max-height: none; } specifications specification status comment css box sizing module level 4the definition of 'max-height' in that specification.
...firefox supports applying max-height to table elements.ie full support
7opera full support
7notes full support
7notes notes css 2.1 leaves the behavior of max-height with table undefined.
...And 7 more matches
<input type="week"> - HTML: Hypertext Markup Language
you can set a default value for the input by including a value inside the value attribute, like so: <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" value="201
7-w01"> one thing to note is that the displayed format may differ from the actual value, which is always formatted yyyy-www.
... when the above value is submitted to the server, for example, browsers may display it as week 01, 201
7, but the submitted value will always look like week=201
7-w01.
... you can also get and set the value in javascript using the input element's value property, for example: var weekcontrol = document.queryselector('input[type="week"]'); weekcontrol.value = '201
7-w45'; additional attributes in addition to the attributes common to <input> elements, week inputs offer the following attributes: attribute description max the latest year and week to accept as valid input min the earliest year and week to accept as valid input readonly a boolean which, if present, indicates that the user cannot edit the field's contents step the stepping interval (the distance between allowed values) to use for both user interface and constraint validation max the latest (time-wise) year and week number, i...
...And 7 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
<table> <tr> <th>name</th> <th>id</th> <th>member since</th> <th>balance</th> </tr> <tr> <td>margaret nguyen</td> <td>42
7311</td> <td><time datetime="2010-06-03">june 3, 2010</time></td> <td>0.00</td> </tr> <tr> <td>edvard galinski</td> <td>5331
75</td> <td><time datetime="2011-01-13">january 13, 2011</time></td> <td>3
7.00</td> </tr> <tr> <td>hoshi nakamura</td> <td>601942</td> <td><time datetime="2012-0
7-23">july 23, 2012</time></td> <td>15.00</td> </tr> </table> cs...
...those changes make the html look like this: <table> <tr> <th rowspan="2">name</th> <th rowspan="2">id</th> <th colspan="2">membership dates</th> <th rowspan="2">balance</th> </tr> <tr> <th>joined</th> <th>canceled</th> </tr> <tr> <th>margaret nguyen</td> <td>42
7311</td> <td><time datetime="2010-06-03">june 3, 2010</time></td> <td>n/a</td> <td>0.00</td> </tr> <tr> <th>edvard galinski</td> <td>5331
75</td> <td><time datetime="2011-01013">january 13, 2011</time></td> <td><time datetime="201
7-04008">april 8, 201
7</time></td> <td>3
7.00</td> </tr> <tr> <th>hoshi nakamura</td> <td>601942</td> <td><time datetime...
...="2012-0
7-23">july 23, 2012</time></td> <td>n/a</td> <td>15.00</td> </tr> </table> the differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above.
...And 7 more matches
WebAssembly.Table - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jstablechrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0table() constructorchrome full support ...
... 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the f...
...And 7 more matches
Image file type and format guide - Web media technologies
mime type image/apng file extension(s) .apng specification wiki.mozilla.org/apng_specification browser compatibility chrome 59, edge 12, firefox 3, opera 46, safari 8 maximum dimensions 2,14
7,483,64
7×2,14
7,483,64
7 pixels supported color modes color mode bits per component (d) description greyscale 1, 2, 4, 8, and 16 each pixel consists of a single d-bit value indicating the brightness of the greyscale pixel.
... mime type image/bmp file extension(s) .bmp specification no specification; however, microsoft provides general documentation of the format at docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage browser compatibility all versions of chrome, edge, firefox, internet explorer, opera, and safari maximum dimensions either 32,
76
7×32,
76
7 or 2,14
7,483,64
7×2,14
7,483,64
7 pixels, depending on the format version supported color modes color mode bits per component (d) description greyscale 1 each bit represents a single pixel, which can be either black or white.
... gif (graphics interchange format) in 198
7, the compuserve online service provider introduced the gif (graphics interchange format) image file format to provide a compressed graphics format that all members of their service would be able to use.
...And 7 more matches
Web video codec guide - Web media technologies
a fairly typical 30 minute video conference would need about 44
7.9 gb of storage, and a 2-hour movie would take almost 1.
79 tb (that is, 1
790 gb).
...if a 1080p video is reduced to
720p prior to encoding, the resulting video can be much smaller while having much higher visual quality; even after scaling back up during playback, the result may be better than encoding the original video at full size and accepting the quality hit needed to meet your size requirements.
... for example, level av1 level 2.0 offers a maximum frame width of 2048 pixels and a maximum height of 1152 pixels, but its maximum frame size in pixels is 14
7,456, so you can't actually have a 2048x1152 video at level 2.0.
...And 7 more matches
Browser Feature Detection - Archive of obsolete content
it is clear from these test results that netscape
7.0x and mozilla firefox have the greatest dom support although internet explorer, safari, and opera have sufficient dom css 1 and dom level 1 & 2 document property and method support to enable cross browser web development.
... test summary standard netscape
7.0x firefox 1.5 safari 2 opera
7 / 8.5-9.0 internet explorer 6 /
7 dom core 1 100% 100% 100%
75% / 91%
75% /
75% dom core 2 100% 100% 100%
70% / 94% 58% / 58% dom 1 html 100% 100% 100% 100% / 100% 100% / 100% dom css 1 100% 100% 100% 100% / 100% 96% / 96% dom css 2 100% 98% 6
7%
71% / 83% 38% / 42% test results cross reference dom core level 1 support for properties/methods in document name firefox 1.5 ie 6 &
7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true ...
... true true true document.createtextnode() true true true document.createcomment() true true true document.createcdatasection() true false true document.createprocessinginstruction() true false true document.createattribute() true true true document.createentityreference()obsolete since gecko
7 (method present but only returns null: bug 9850) false false document.getelementsbytagname() true true true dom core level 2 support for properties/methods in document name firefox 1.5 ie 6 &
7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.document...
...And 6 more matches
OS.File for the main thread
prior to gecko 2
7, unless create or truncate are set or explicit unixflags are given, the file will be opened for appending on unix/linux.
...starting with gecko 2
7, you may use the append flag instead.
... when opening files for writing, they will be opened for appending unless you specify append: false in gecko 2
7 and later.
...And 6 more matches
powermetrics
the following is example output from such an invocation: *** sampled system activity (fri sep 4 1
7:15:14 2015 +1000) (5009.63ms elapsed) *** *** running tasks *** name id cpu ms/s user% deadlines (<2 ms, 2-5 ms) wakeups (intr, pkg idle) gpu ms/s com.apple.terminal 293 44
7.66 2
74.83 120.35 221.
74 firefox 8462
7 77.59 55.55 15.3
7 2.59 91.42 ...
... 42.12 204.4
7 plugin-container 84628 3
77.22 3
7.18 43.91 18.56 1
78.65
75.85 1
7.29 terminal 694 9.86
79.94 0.00 0.00 4.39 2.20 0.00 powermetrics 84694 1.21 31.53 0.00 0.00 0.20 0.20 0.00 com.google.chrome 489 233.83 48.10 25.95 0.00 google chrome helper 84688 181.5
7 92.81 0.00 0.00 23.95 12.
77 0.00 google chrome 84681 5
7.26
76.0
7 4.39 0.00 23.
75 12.9
7 0.00 google chrome helper 84685 0.13 48.08 0.00 0.00 ...
... 0.40 0.20 0.00 kernel_coalition 1 128.64
780.19 330.52 0.00 kernel_task 0 109.9
7 0.00 0.20 0.00
779.4
7 330.35 0.00 launchd 1 18.88 2.44 0.00 0.00 0.40 0.20 0.00 com.apple.safari 488 90.60 108.58 56.48 26.65 com.apple.webkit.webcontent 846
79 64.21 84.69 0.00 0.00 104.19 54.89 26.66 com.apple.webkit.networking 846
78 26.89 58.89 0.40 0.00 1.60 0.00 0.00 safari 846
76 1.56 ...
...And 6 more matches
NSS Code Coverage
nss - code coverage results link 200
7-08-14 - solaris/sparc platform results explanation files results from every c file are on new line.
... colors green:
70-100% of blocks tested.
... yellow: 40-
70% of blocks tested.
...And 6 more matches
NSS_3.12.1_release_notes.html
nss 3.12.1 requires nspr 4.
7.1.
...the tar.gz or zip file expands to an nss-3.12.1 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.
7.1 binary distributions to get the nspr 4.
7.1 header files and shared libraries, which nss 3.12.1 requires.
... nspr 4.
7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.
7.1/.
...And 6 more matches
NSS 3.21 release notes
2016-01-0
7, this page has been updated to include additional information about the release.
... nss 3.21 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_rtm/src/ security fixes in nss 3.21 bug 1158489 / cve-2015-
75
75 - prevent md5 downgrade in tls 1.2 signatures.
... new in nss 3.21 new functionality certutil now supports a --rename option to change a nickname (bug 1142209) tls extended master secret extension (rfc
762
7) is supported (bug 111
7022) new info functions added for use during mid-handshake callbacks (bug 1084669) new functions in nss.h nss_optionset - sets nss global options nss_optionget - gets the current value of nss global options in secmod.h secmod_createmoduleex - create a new secmodmodule structure from module name string, module parameters string, nss specific parameters string, and nss configuration parameter string.
...And 6 more matches
NSS 3.46 release notes
notable changes in nss 3.46 certificate authority changes the following ca certificates were removed: bug 15
746
70 - remove expired class 2 primary root certificate sha-256 fingerprint: 0f993c8aef9
7baaf568
7140ed59ad1821bb4afacf0aa9a58b5d5
7a338a3afbcb bug 15
746
70 - remove expired utn-userfirst-client root certificate sha-256 fingerprint: 43f25
7412d440d62
74
769
74f8
77da8f1fc2444565a36
7ae60eddc2
7a412531ae bug 15
746
70 - remove expired deutsche telekom root ca 2 root ...
...certificate sha-256 fingerprint: b6191a50d0c39
77f
7da99bcdaac86a22
7daeb96
79ec
70ba3b0c9d922
71c1
70d3 bug 1566569 - remove swisscom root ca 2 root certificate sha-256 fingerprint: f09b122c
7114f4a09bd4ea4f4a99d558b46e4c25cd81140d29c05613914c3841 upcoming changes to default tls configuration the next nss team plans to make two changes to the default tls configuration in nss 3.4
7, which will be released in october: tls 1.3 will be the default maximum tls version.
... see bug 15
73118 for details.
...And 6 more matches
Basic animations - Web APIs
function clock() { var now = new date(); var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 150, 150); ctx.translate(
75,
75); ctx.scale(0.4, 0.4); ctx.rotate(-math.pi / 2); ctx.strokestyle = 'black'; ctx.fillstyle = 'white'; ctx.linewidth = 8; ctx.linecap = 'round'; // hour marks ctx.save(); for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(100, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); ctx...
....linewidth = 5; for (i = 0; i < 60; i++) { if (i % 5!= 0) { ctx.beginpath(); ctx.moveto(11
7, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.rotate(math.pi / 30); } ctx.restore(); var sec = now.getseconds(); var min = now.getminutes(); var hr = now.gethours(); hr = hr >= 12 ?
... img.src = 'https://mdn.mozillademos.org/files/4553/capitan_meadows,_yosemite_national_park.jpg'; var canvasxsize = 800; var canvasysize = 200; var speed = 30; // lower is faster var scale = 1.05; var y = -4.5; // vertical offset // main program var dx = 0.
75; var imgw; var imgh; var x = 0; var clearx; var cleary; var ctx; img.onload = function() { imgw = img.width * scale; imgh = img.height * scale; if (imgw > canvasxsize) { // image larger than canvas x = canvasxsize - imgw; } if (imgw > canvasxsize) { // image width larger than canvas clearx = imgw; } else { clearx = canvasxsize; ...
...And 6 more matches
SubtleCrypto.importKey() - Web APIs
a pem-encoded privatekeyinfo looks like this: -----begin private key----- mig2ageambagbyqgsm49agegbsubbaaibigemigbagebbdau9bd0jxdff5ov380z 9vieun2w5kjdz3hbuadencxliamsoquktffaou
71eldn0tshzaniaarmuhcee/cp xmjgc1roj0d0k6vluqta+jvcwigxciaukoethcngzdkcrd4pkxdbvbcijdzkvo+l ml2fikoovzh/8yetkmjumb804g6omjuc9vvojcrv0ydasmykkjmjblg= -----end private key----- to get this into a format you can give to importkey() you need to do two things: base64-decode the part between header and footer, using window.atob().
...a pem-encoded subjectpublickeyinfo looks like this: -----begin public key----- miibijanbgkqhkig9w0baqefaaocaq8amiibcgkcaqea3j+hgshunc
7f6xzvebd0 r3m5jny+/kabijvu8iu1eral3osi38vgimzjdbdorfxvznnzl+sxahwxiv5bhixl cq6qhwysdgh6oqgkiwialra/wnh4uhxj1or/iyakjhrr/kghutjyvcjzvaqadpjw 2g+syd1ui0b6kjov2cruwipwpff8hbfvwv8q9yc2yd5hcnykvl0iaiyn+sdak/rv 8dc5eilzci4efucbyg4c9o88qz
7bs14dxsfapty8p/twoihvvjladf
743lgm/jlq cdpubua3hlszuhkm3bbskd
7q9ngkjv3+ybyo4/fl+fkyra8j9ypa2n0iw53lfb3b gqidaqab -----end public key----- just as with pkcs #8, to get t...
... json web key format is defined in rfc
751
7.
...And 6 more matches
SubtleCrypto.unwrapKey() - Web APIs
*/ const wrappedkeybytes = [1
71,223,14,36,201,233,233,120,164,68,21
7,192,226,80, 224,39,199,235,239,60,212,169,100,23,61,54,244,19
7,160,80,109,230,20
7, 225,5
7,19
7,1
75,
71,80,209]; /* convert an array of byte values to an arraybuffer.
...*/ const saltbytes = [180,253,62,216,4
7,35,90,55,218,233,103,10,1
72,143,161,1
77]; /* iv that is to be used in decrypting the key to unwrap.
...*/ const ivbytes = [212,18
7,26,24
7,1
72,51,3
7,151,2
7,1
77,249,142]; /* the wrapped key itself.
...And 6 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
i can use the align-items property on the grid container, to align the items using one of the following values: auto normal start end center stretch baseline first baseline last baseline * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c ...
...the first item in the example demonstrates this default alignment: * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c ...
...And 6 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> ...
...And 6 more matches
this - JavaScript
// in web browsers, the window object is also the global object: console.log(this === window); // true a = 3
7; console.log(window.a); // 3
7 this.b = "mdn"; console.log(window.b) // "mdn" console.log(b) // "mdn" note: you can always easily get the global object using the global globalthis property, regardless of the current context in which your code is running.
...t whatsthis.call(obj); // 'custom' as this in the function is set to obj whatsthis.apply(obj); // 'custom' as this in the function is set to obj this and object conversion function add(c, d) { return this.a + this.b + c + d; } var o = {a: 1, b: 3}; // the first parameter is the object to use as // 'this', subsequent parameters are passed as // arguments in the function call add.call(o, 5,
7); // 16 // the first parameter is the object to use as // 'this', the second is an array whose // members are used as the arguments in the function call add.apply(o, [10, 20]); // 34 note that in non–strict mode, with call and apply, if the value passed as this is not an object, an attempt will be made to convert it to an object.
...primitives like
7 or 'foo' will be converted to an object using the related constructor, so the primitive number
7 is converted to an object as if by new number(
7) and the string 'foo' to an object as if by new string('foo'), e.g.
...And 6 more matches
Index of archived content - Archive of obsolete content
faq hostwindow installer scripting styling proxy ui pydom rdf api rdf datasource how-to reading textual data remote xul remote debugging rsyncing the cvs repository running windows debug builds downloaded from tinderbox sxsw 200
7 presentations safe browsing safe browsing: design documentation safely loading uris same origin policy for xbl space manager detailed design space manager high level design standalone xpcom standard makefile header static analysis for windows code under linux stress testing string quick r...
... tamarin acceptance test template actionscript performance tests cmdline tests running tamarin acceptance tests running tamarin performance tests tamarin build system documentation tamarin releases tamarin-central rev
703:2cee46be9ce0 tamarin roadmap tamarin build documentation tamarin mercurial commit hook the download manager schema the life of an html http request the new nsstring class implementation (1999) tracevis transforming xml with xslt:mozilla xslt transform...
...-10-06 2006-11-10 2006-11-22 mozilla-dev-apps-calendar 2006-09-29 2006-10-06 mozilla-dev-apps-firefox 2006-09-29 2006-10-06 2006-10-13 2006-10-20 2006-10-26 2006-10-2
7 2006-11-03 2006-11-04 2006-11-10 2006-11-1
7 2006-11-24 2006-12-01 mozilla-dev-apps-thunderbird 2006-09-29 2006-10-06 2006-10-13 2006-10-20 2006-10-2
7 2006-11-03 2006-11-10 20...
...And 5 more matches
Gecko Compatibility Handbook - Archive of obsolete content
gecko since 199
7, much of the web's content has been developed for microsoft internet explorer 4 or netscape navigator 4.
...detecting gecko instead is the easy way to fix this as well as accomodate users of mozilla, compuserve
7, etc.
... aol or compuserve problems even if your site works on netscape
7.x, it is important to test your site in aol for macos and compuserve
7 to check for browser detection and network issues.
...And 5 more matches
Mozilla release FAQ - Archive of obsolete content
the milestone
7 release was known as m
7).
...this list will be updated with time, but (according to netscape.public.mozilla.general) the following platforms have been built successfully: solaris 2.4, 2.5, 2.6 freebsd 2.2, 3.0 linux/intel and alpha 2.0, 2.1 macos winnt 4.0 irix 5.3, 6.2, 6.3, 6.4 win95, win98 digital unix 4.0 netbsd openbsd bsdi hp/ux 9.05, 10.20, 11.0 (see 2.
7) hurd .03 dg/ux mac os x i'm *still* having problems getting mozilla to build on my platform!
.../usr/include/stdlib.h:196: previous declaration of `seed48' see section 3.
7 nothing looks much like an error, except something returned error status your compiler has a switch (probably) that prints everything it's doing (i.e.
...And 5 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
three examples of binary formats are der-encoded certificates, pkcs #
7 certificate chains, and netscape certificate sequence.
... here are the data and signature sections of a certificate in human-readable format: certificate: data: version: v3 (0x2) serial number: 3 (0x3) signature algorithm: pkcs #1 md5 with rsa encryption issuer: ou=ace certificate authority, o=ace industry, c=us validity: not before: fri oct 1
7 18:36:25 199
7 not after: sun oct 1
7 18:36:25 1999 subject: cn=jane doe, ou=finance, o=ace industry, c=us subject public key info: algorithm: pkcs #1 rsa encryption public key: modulus: 00:ca:fa:
79:98:8f:19:f8:d
7:de:e4:49:80:48:e6:2a:2a:86: ed:2
7:40:4d:86:b3:05:c0:01:bb:50:15:c9:de:dc:85:19:22: 43:
7d:45:6d:
71:4e:1
7:3d:f0:36:4b:5b:
7f:a8:51:a3:a1:00: 98:ce:
7f:4
7:50:2c:93:...
...36:
7c:01:6e:cb:89:06:41:
72:b5:e9:
73:49:38:
76:ef:b6:8f:ac:49:bb:63:0f:9b:ff:16:2a:e3:0e: 9d:3b:af:ce:9a:3e:48:65:de:96:61:d5:0a:11:2a:a2:80:b0:
7d:d8:99:cb:0c:99:34:c9:ab:25:06:a8:31:ad:8c:4b:aa:54: 91:f4:15 public exponent: 6553
7 (0x10001) extensions: identifier: certificate type critical: no certified usage: ssl client identifier: authority key identifier critical: no key identifier: f2:f2:06:59:90:18:4
7:51:f5:89:33:5a:31:
7a:e6:5c:fb:36: 26:c9 signature: algorithm: pkcs #1 md5 with rsa encryption signature: 6d:23:af:f3:d3:b6:
7a:df:90:df:cd:
7e:18:6c:01:69:8e:54:65:fc:06: 30:43:34:d1:63:1f:06:
7d:c3:40:a8:2a:82:c1:a4:83:2a:fb:2e:8f:fb: f0:6d:ff:
75:a3:
78:f
7:52:4
7:46:62:9
7:1d:d9:c6:11:0a:02:a2:e0:cc: 2a:
75:6c:8b:...
...And 5 more matches
Grids - Learn web development
simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(20
7,232,220); border: 2px solid rgb(
79,185,22
7); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using lengths and percentages, we can use t...
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(20
7,232,220); border: 2px solid rgb(
79,185,22
7); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the fr unit distributes available space, not all space.
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(20
7,232,220); border: 2px solid rgb(
79,185,22
7); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is to make them usable in multiple layout methods.
...And 5 more matches
Introduction to CSS layout - Learn web development
flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(20
7,232,220); padding: 1em; } .wrapper { display: flex; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items.
... flexbox example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(20
7,232,220); padding: 1em; } .wrapper { display: flex; } .wrapper > div { flex: 1; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: this has been a very short introduction to what is possible in flexbox, to find out more, see our flexbox article.
... grid example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(20
7,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> <div class="box6">six</div> </div...
...And 5 more matches
Legacy layout methods - Learn web development
<div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">
7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col span1">13</div> <div class="col span6">14</div> <div class="col span3">15</div> <div class="col span2">16</div> </div> </div> the aim is to turn this into a demonstration grid of tw...
... we need to subtract that from our total width of 960 pixels, giving us
720 pixels for our columns.
...*/ .col.span4 { width: 300px; } .col.span5 { width: 380px; } .col.span6 { width: 460px; } .col.span
7 { width: 540px; } .col.span8 { width: 620px; } .col.span9 { width:
700px; } .col.span10 { width:
780px; } .col.span11 { width: 860px; } .col.span12 { width: 940px; } with these classes created we can now lay out different width columns on the grid.
...And 5 more matches
CSS property compatibility table for form controls - Learn web development
on windows
7, internet explorer 9 does not apply the border unless background:none is applied.
... on windows
7, internet explorer 9 does not apply the border unless background:none is applied.
... on windows
7, internet explorer 9 does not apply the border unless background:none is applied.
...And 5 more matches
Advanced text formatting - Learn web development
a light brown color.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } ...
...d>a light brown color.</dd>\n</dl>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 2
7) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = ...
...hinking, and the need to eliminate negative self talk (as mentioned in affirmations for positive thinking.)</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } ...
...And 5 more matches
Command line options
user profile -allow-downgrade firefox 6
7's downgrade protection prevents accidentally starting firefox in a profile running a later version of firefox.
...instances created with this parameter do not accept or send remote commands, see bug 6500
78.
... you must use an upper case p on linux with versions older than
7.x, as there lower case invokes purify mode (memory and leak detection).
...And 5 more matches
TimerFirings logging
-991946880[
7f46c365ba00]: [6
775] fn timer (slack 100 ms): layeractivitytracker -991946880[
7f46c365ba00]: [6
775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -991946880[
7f46c365ba00]: [6
775] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -991946880[
7f46c365ba00]: [6
775] iface timer (one_shot 200 ms):
7f46964d
7f80 -1340643584[
7f46c365ec00]: [6
775] obs...
... timer (slack 1000 ms):
7f46a95a0200 each line has the following information.
... -991946880[
7f46c365ba00]: [6
775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0
71163
7568[
7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:
7231
71163
7568[
7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 these js timers are annotated with [content] and show the javascr...
...And 5 more matches
NSS_3.11.10_release_notes.html
nss 3.11.10 requires nspr 4.
7.1.
...the tar.gz or zip file expands to an nss-3.11.10 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.
7.1 binary distributions to get the nspr 4.
7.1 header files and shared libraries, which nss 3.11.10 requires.
... nspr 4.
7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.
7.1/.
...And 5 more matches
NSS_3.12.2_release_notes.html
nss 3.12.2 requires nspr 4.
7.1.
...the tar.gz or zip file expands to an nss-3.12.2 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin< - nss tools and test programs you also need to download the nspr 4.
7.1 binary distributions to get the nspr 4.
7.1 header files and shared libraries, which nss 3.12.2 requires.
... nspr 4.
7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.
7.1/.
...And 5 more matches
NSS 3.14 release notes
introduction the nss team has released network security services (nss) 3.14, which is a minor release with the following new features: support for tls 1.1 (rfc 4346) experimental support for dtls 1.0 (rfc 434
7) and dtls-srtp (rfc 5
764) support for aes-ctr, aes-cts, and aes-gcm support for keying material exporters for tls (rfc 5
705) in addition to the above new features, the following major changes have been introduced: support for certificate signatures using the md5 hash algorithm is now disabled by default.
... support for tls 1.1 (rfc 4346) has been added (https://bugzilla.mozilla.org/show_bug.cgi?id=56504
7).
... when connecting to a server, the record layer version of the initial clienthello will be at most { 3, 1 } (tls 1.0), even when attempting to negotiate tls 1.1 (https://bugzilla.mozilla.org/show_bug.cgi?id=
77454
7) the choice of client_version sent during renegotiations has changed.
...And 5 more matches
NSS 3.34 release notes
nss 3.34 requires netscape portable runtime (nspr) 4.1
7, or newer.
... nss 3.34 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_34_rtm/src/ notable changes in nss 3.34 the following ca certificates were added: cn = gdca trustauth r5 root sha-256 fingerprint: bf:ff:8f:d0:44:33:48:
7d:6a:8a:a6:0c:1a:29:
76:
7a:9f:c2:bb:b0:5e:42:0f:
71:3a:13:b9:92:89:1d:38:93 trust flags: websites cn = ssl.com root certification authority rsa sha-256 fingerprint: 85:66:6a:56:2e:e0:be:5c:e9:25:c1:d8:89:0a:6f:
76:a8:
7e:c1:6d:4d:
7d:5f:29:ea:
74:19:cf:20:12:3b:69 trust flags: websites, email cn = ssl.com root certification authority ecc sha-256 fingerprint: 34:1
7:bb:06:cc:60:0
7:da:1b:96:1c:92...
...:0b:8a:b4:ce:3f:ad:82:0e:4a:a3:0b:9a:cb:c4:a
7:4e:bd:ce:bc:65 trust flags: websites, email cn = ssl.com ev root certification authority rsa r2 sha-256 fingerprint: 2e:
7b:f1:6c:c2:24:85:a
7:bb:e2:aa:86:96:
75:0
7:61:b0:ae:39:be:3b:2f:e9:d0:cc:6d:4e:f
7:34:91:42:5c trust flags: websites cn = ssl.com ev root certification authority ecc sha-256 fingerprint: 22:a2:c1:f
7:bd:ed:
70:4c:c1:e
7:01:b5:f4:08:c3:10:88:0f:e9:56:b5:de:2a:4a:44:f9:9c:8
7:3a:25:a
7:c8 trust flags: websites cn = trustcor rootcert ca-1 sha-256 fingerprint: d4:0e:9c:86:cd:8f:e4:68:c1:
77:69:59:f4:9e:a
7:
74:fa:54:86:84:b6:c4:06:f3:90:92:61:f4:dc:e2:5
7:5c trust flags: websites, email cn = trustcor rootcert ca-2 sha-256 fingerprint: 0...
...And 5 more matches
NSS API Guidelines
the areas which need the most work (both here and throughout the code) is: the relationship of the certificate library with just about every other component (most noticeably pkcs #12, pkcs #
7, and pkcs #11) splitting low key and high key components more clearly the crypto wrappers (pkcs #11 wrappers) and high key pkcs #12 and pkcs #5 libraries nss compiles into the libraries described below.
... pkcs #12 lib/pkcs12 pkcs12t.h, pkcs12.h, p12plcy.h, p12.h, p12t.h pkcs
7 provides functions and types for encoding and decoding encrypted data in pkcs #
7 format.
... for example, pkcs #
7 is used to encrypt certificate data to exchange between applications, or to encrypt s/mime message data.
...And 5 more matches
Deprecated tools - Firefox Developer Tools
scratchpad scratchpad is deprecated as of firefox
70 (bug 1565380), and will be removed as of firefox
72 (bug 1519103).
... alternatives in firefox
71+, you can write multi-line javascript code in the web console editor mode, making it similar to the scratchpad.
... starting firefox
72, you can import a javascript file content in the console input with ctrl + o (cmd + o on macos), as well as saving the console input content to a file using ctrl + s (cmd + s on macos).
...And 5 more matches
Network request details - Firefox Developer Tools
the screenshots and descriptions in this section reflect firefox
78.
... select copy all, the entire header is copied in json format, giving you something like this (after running the results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-timing", "value": "d=
74
716 t=15602580990
74460" }, { "name": "cache-control", "value": "private, must-revalidate, max-age=0" }, { "name": "content-disposition", "value": "inline; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", "value": "6
73" }, ...
...see https://en.wikipedia.org/wiki/special:centralautologin/p3p for more info.\"" }, { "name": "server", "value": "mw1316.eqiad.wmnet" }, { "name": "server-timing", "value": "cache;desc=\"pass\"" }, { "name": "strict-transport-security", "value": "max-age=106384
710; includesubdomains; preload" }, { "name": "vary", "value": "accept-encoding,treat-as-untrusted,x-forwarded-proto,cookie,authorization,x-seven" }, { "name": "via", "value": "1.1 varnish (varnish/5.1), 1.1 varnish (varnish/5.1)" }, { "name": "x-analytics", "value": "ns=-1;special=badtitle;wmf-last-access=11-jun-20...
...And 5 more matches
Applying styles and colors - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0,
75,
75); ctx.fillstyle = '#6c0'; ctx.fillrect(
75, 0,
75,
75); ctx.fillstyle = '#09f'; ctx.fillrect(0,
75,
75,
75); ctx.fillstyle = '#f30'; ctx.fillrect(
75,
75,
75,
75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw semi transparent circles for (var i = 0; i <
7; i++) { ctx.beginpath(); ctx.arc(
75,
75, 10 + 10 * i, 0, math.pi * 2, tr...
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = 'rgb(255, 221, 0)'; ctx.fillrect(0, 0, 150, 3
7.5); ctx.fillstyle = 'rgb(102, 204, 0)'; ctx.fillrect(0, 3
7.5, 150, 3
7.5); ctx.fillstyle = 'rgb(0, 153, 255)'; ctx.fillrect(0,
75, 150, 3
7.5); ctx.fillstyle = 'rgb(255, 51, 0)'; ctx.fillrect(0, 112.5, 150, 3
7.5); // draw semi transparent rectangles for (var i = 0; i < 10; i++) { ctx.fillstyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')'; for (var j = 0; j < 4; j++) { ...
... ctx.fillrect(5 + i * 14, 5 + j * 3
7.5, 14, 2
7.5); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample line styles there are several properties which allow us to style lines.
...And 5 more matches
FileSystemDirectoryEntry - Web APIs
viewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemdirectoryentry experimentalchrome full support 8alternate name full support 8alternate name alternate name uses the non-standard name: directoryentryedge full support
79prefixed full support
79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support 50ie no support noopera full support yesprefixed full support yespr...
...efixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ≤3
7alternate name full support ≤3
7alternate name alternate name uses the non-standard name: directoryentrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: directoryentryfirefox android full support 50opera android no support nosafari ios full support 11.3...
...samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitcreatereader experimentalchrome full support 13edge full support
79firefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤3
7chrome android full support 18firefox and...
...And 5 more matches
PasswordCredential - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpasswordcredential experimentalchrome full support 51edge full support ≤
79firefox ?
... samsung internet android full support 5.0passwordcredential() constructor non-standardchrome full support 51edge full support ≤
79firefox ?
... samsung internet android full support 5.0additionaldata experimentaldeprecatedchrome full support 51edge full support ≤
79firefox ?
...And 5 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } i’m using the same grid definitions as above, however this time i am going to place a single item into the named area content.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main m...
...And 5 more matches
background-position - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <percentage> values */ background-position: 25%
75%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* multiple images */ background-position: 0 0, center; /* edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* global values */ background-posi...
...similarly, background-position: 25%
75% means the spot on the image that is 25% from the left and
75% from the top will be placed at the spot of the container that is 25% from the container's left and
75% from the container's top.
...example one</div> <div class="exampletwo">example two</div> <div class="examplethree">example three</div> css /* shared among all <div>s */ div { background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* these examples use the `background` shorthand property */ .exampleone { background: url("https://mdn.mozillademos.org/files/1198
7/startransparent.gif") #ffee99 2.5cm bottom no-repeat; } .exampletwo { background: url("https://mdn.mozillademos.org/files/1198
7/startransparent.gif") #ffee99 left 4em bottom 1em no-repeat; } /* multiple background images: each image is matched with the corresponding position, from first specified to last.
...And 5 more matches
break-after - CSS: Cascading Style Sheets
a for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox no support noie full support 10opera full support 3
7 full support 3
7 no support 11.1 — 12.1safari no support nowebview android full support 50chrome android full support 50firefox android no support ...
...noopera android full support 3
7 full support 3
7 no support 11.1 — 12.1safari ios no support nosamsung internet android full support 5.0alwayschrome no support noedge no support nofirefox no support noie no support noopera no support nosafari no support nowebview android no support ...
... no support noopera android no support nosafari ios no support nosamsung internet android no support noavoid-columnchrome no support noedge no support 12 —
79firefox no support noie no support noopera no support nosafari no support nowebview android no support nochrome android no support ...
...And 5 more matches
text-overflow - CSS: Cascading Style Sheets
css value direction: ltr direction: rtl expected result live result expected result live result visible overflow 123456
7890 123456
7890 098
7654321 123456
7890 text-overflow: clip 123456
7890 123456
7890 text-overflow: '' 12345 123456
7890 54321 123456
7890 text-overflow: ellipsis 1234… 123456
7890 …4321 123456
7890 text-overflow: '.' 1234.
... 123456
7890 .4321 123456
7890 text-overflow: clip clip 123456 123456
7890 654321 123456
7890 text-overflow: clip ellipsis 1234… 123456
7890 6543… 123456
7890 text-overflow: clip '.' 1234.
... 123456
7890 6543.
...And 5 more matches
transition-duration - CSS: Cascading Style Sheets
roperty: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(2
70deg); -webkit-transform: rotate(2
70deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ea...
...ze left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition,
7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -we...
...bkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration:1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(2
70deg); -webkit-transform: rotate(2
70deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; ...
...And 5 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
you can set a default value for the input by including a date and time inside the value attribute, like so: <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" value="201
7-06-01t08:30"> one thing to note is that the displayed date and time formats differ from the actual value; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time value is always formatted yyyy-mm-ddthh:mm.
... when the above value submitted to the server, for example, it will look like partydate=201
7-06-01t08:30.
...partydate=201
7-06-01t08%3a30.
...And 5 more matches
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
this continues for the next three sections, z5, z6, and z
7 (and table of contents entries named z1, z2, and z3), each automatically given anchors with these names.
...> </head> <body> <a name="z0" href="#z4">first section heading</a> <a name="z1" href="#z5">second section heading</a> <a name="z8" href="#z14">newly inserted third section heading</a> <a name="z9" href="#z15">newly inserted fourth section heading</a> <a name="z2" href="#z6">original third (now fifth) section heading</a> <a name="z3" href="#z
7">original fourth (now sixth) section heading</a> <a name="z10" href="#z16">seventh section heading</a> <a name="z11" href="#z1
7">eighth section heading</a> <a name="z12" href="#z18">ninth section heading</a> <a name="z13" href="#z19">tenth section heading</a> <h2><a name="z4">first section heading</a></h1><p> ...
...</p> <h2><a name="z
7">original fourth (now sixth) section heading</a></h1><p> ...
...And 5 more matches
Browser detection using the user agent - HTTP
in 201
7, chrome unflagged experimental lookbehind support in regular expressions, but no other browser supported it.
...um/xyz safari safari/xyz chrome/xyz or chromium/xyz safari gives two version numbers: one technical in the safari/xyz token, and one user-friendly in a version/xyz token opera opr/xyz [1] opera/xyz [1] opera 15+ (blink-based engine) [2] opera 12- (presto-based engine) internet explorer ; msie xyz; [1] trident/
7.0; .*rv:xyz [2] [1] internet explorer 10- [2] internet explorer 11 of course, there is absolutely no guarantee that another browser will not hijack some of these things (like chrome hijacked the safari string in the past).
... note: edgehtml is no longer used in edge browser builds >= version
79 (see 'blink').
...And 5 more matches
Grammar and types - JavaScript
for example: 900
7199254
740992n.
...for example: '3
7' -
7 // 30 '3
7' +
7 // "3
77" converting strings to numbers in the case that a value representing a number is in memory as a string, there are methods for conversion.
...octal numerics can include only the digits 0–
7.
...And 5 more matches
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
the structure the formattoparts() method returns, looks like this: [ { type: 'day', value: '1
7' }, { type: 'weekday', value: 'monday' } ] possible types are the following: day the string used for the day, for example "1
7".
... second the string used for the second, for example "0
7" or "42".
... examples datetimeformat outputs localized, opaque strings that cannot be manipulated directly: var date = date.utc(2012, 11, 1
7, 3, 0, 42); var formatter = new intl.datetimeformat('en-us', { weekday: 'long', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', fractionalseconddigits: 3, hour12: true, timezone: 'utc' }); formatter.format(date); // "monday, 12/1
7/2012, 3:00:42.000 am" however, in many user interfaces there is a desire to customize ...
...And 5 more matches
Intl - JavaScript
a single locale may be specified by either an intl.locale object or a string that is a unicode bcp 4
7 locale identifier.
... multiple locales may be specified (and a best-supported locale determined by evaluating each of them in order and comparing against the locales supported by the implementation) by passing an array (or array-like object, with a length property and corresponding indexed elements) whose elements are either intl.locale objects or values that convert to unicode bcp 4
7 locale identifier strings.
... a unicode bcp 4
7 locale identifier consists of a language code, (optionally) a script code, (optionally) a region (or country) code, (optionally) one or more variant codes, and (optionally) one or more extension sequences, with all present components separated by hyphens.
...And 5 more matches
Number - JavaScript
number is a primitive wrapper object used to represent and manipulate numbers like 3
7 or -9.25.
... the javascript number type is a double-precision 64-bit binary format ieee
754 value, like double in java or c#.
...a number only keeps about 1
7 decimal places of precision; arithmetic is subject to rounding.
...And 5 more matches
WebAssembly.Module - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmodulechrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0module() constructorchrome full support ...
... 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the ...
...And 5 more matches
Strict mode - JavaScript
assignments, which would accidentally create global variables, instead throw an error in strict mode: 'use strict'; // assuming no global variable mistypedvariable exists mistypevariable = 1
7; // this line throws a referenceerror due to the // misspelling of variable second, strict mode makes assignments which would otherwise silently fail to throw an exception.
...object) will throw in strict mode: 'use strict'; // assignment to a non-writable global var undefined = 5; // throws a typeerror var infinity = 5; // throws a typeerror // assignment to a non-writable property var obj1 = {}; object.defineproperty(obj1, 'x', { value: 42, writable: false }); obj1.x = 9; // throws a typeerror // assignment to a getter-only property var obj2 = { get x() { return 1
7; } }; obj2.x = 5; // throws a typeerror // assignment to a new property on a non-extensible object var fixed = {}; object.preventextensions(fixed); fixed.newprop = 'ohai'; // throws a typeerror third, strict mode makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect): 'use strict'; delete object.prototype; // throws a typeerror fourth, s...
...syntax error 19
7 + 142; var sumwithoctal = 0o10 + 8; console.log(sumwithoctal); // 16 seventh, strict mode in ecmascript 2015 forbids setting properties on primitive values.
...And 5 more matches
<metadata> - SVG: Scalable Vector Graphics
et/100basetx socket</desc> <path d="m0,10 h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <text x="0" y="15">hub</text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="22
7" cy="
71" r="
7" /> <!-- five groups each using the defined socket --> <g id="sock1et" transform="translate(25 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform="translate(
70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" transform="transla...
...f="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" transform="translate(40 121)"> <title>monitor stand</title> <desc>one of those cool swivelling monitor stands that sit under the monitor</desc> <path d="m0,0 s 10 10 40 12"/> <path d="m80,0 s
70 10 40 12"/> <path d="m0,20 l 10 10 s 40 12
70 10 l 80 20z"/> </g> <g id="monitor"> <title>monitor</title> <desc>a very fancy monitor</desc> <rect width="160" height="120"/> <rect fill="lightgrey" width="138" height="95" x="11" y="12"/> </g> <g id="processor" transform="translate(0 142)"> <title>the computer</title> <...
...desc>a desktop computer - broad flat box style</desc> <rect width="160" height="60"/> <g id="discdrive" transform="translate(
70 8)"> <title>disc drive</title> <desc>a built-in disc drive</desc> <rect width="58" height="3" x="12" y="8"/> <rect width="8" height="2" x="12" y="15"/> </g> <circle cx="135" cy="40" r="5"/> </g> </symbol> </defs> <text x="0" y="15">network</text> <!-- use the hub symbol.
...And 5 more matches
SVG and CSS - SVG: Scalable Vector Graphics
mlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-2
70">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="seg...
...class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(54)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(
72)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(90)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/...
... 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(252)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(2
70)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(288)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segme...
...And 5 more matches
Index - XPath
found 5
7 pages: # page tags and summary 1 xpath css selectors, dom, jxon, landing, path, xml, xpath, xslt xpath stands for xml path language.
...
7 descendant axe, xpath the descendant axis indicates all of the children of the context node, and all of their children, and so forth.
... 1
7 functions transforming_xml_with_xslt, xpath, xpath_reference, xslt, xslt_reference no summary!
...And 5 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
and was originally published in japanese for the firefox developers conference summer 200
7.
...enableprivilege is disabled in firefox 15 and will be removed in firefox 1
7.
... listing 6: creating an xpcom object representing a file var file = components.classes['@mozilla.org/file/local;1'] .createinstance(components.interfaces.nsilocalfile); file.initwithpath('c:\\temp\\temp.txt'); creating and deleting files listing
7 shows how to delete a file if it exists, and create a new file with the same name.
...And 4 more matches
XUL user interfaces - Archive of obsolete content
action: a xul demonstration make a new xul document as a plain text file, doc
7.xul.
... copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style
7.css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="css getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script
7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </columns> <rows> <row> <label class="text-prompt" value="date:" accesskey="d" control="date-text"/> <textbox id="date-text" type="timed" timeout...
...="
750" oncommand="refresh();"/> </row> <row> <label value="day:"/> <hbox id="day-box"> <label class="day" value="sunday" disabled="true"/> <label class="day" value="monday" disabled="true"/> <label class="day" value="tuesday" disabled="true"/> <label class="day" value="wednesday" disabled="true"/> <label class="day" value="thursday" disabled="true"/> <label class="day" value="friday" disabled="true"/> <label class="day" value="saturday" disabled="true"/> </hbox> </row> </rows> </grid> <hbox class="buttons"> <button id="clear" label="clear" accesskey="c" oncommand="cleardate();"/> <button id="today" label="today"...
...And 4 more matches
JXON - Archive of obsolete content
conversion snippets now imagine you have this sample xml document: example.xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_item gender="men's"> <item_number>qwz56
71</item_number> <price>39.95</price> <size description="medium"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> <size description="large"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> ...
... with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue": "qwz56
71" }, "price": { "keyvalue": 39.95 }, "size": [{ "color_swatch": [{ "keyvalue": "red", "keyattributes": { "image": "red_cardigan.jpg" } }, { "keyvalue": "burgundy", "keyattributes": { "image": "burgundy_cardigan.jpg" } }], "keyvalue": ...
... with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue": "qwz56
71" }, "price": { "keyvalue": 39.95 }, "size": [{ "color_swatch": [{ "keyvalue": "red", "@image": "red_cardigan.jpg" }, { "keyvalue": "burgundy", "@image": "burgundy_cardigan.jpg" }], "@description": "medium" }, { "color_swatch": [{ "keyvalu...
...And 4 more matches
Tamarin build documentation - Archive of obsolete content
$ make cppflags=-davmplus_verbose additional instructions for non-android cross-platform tamarin-redux build on osx 10.6 (snow leopard) (to build tamarin-central on mac please see previous cross-platform instructions here: https://developer.mozilla.org/index.php?title=en/tamarin/tamarin_build_documentation&revision=21 the bug when building on snow leopard (bug 53
781
7) has been fixed in the tamarin-redux repo.
...t android_ndk_bin=$android_ndk/toolchains/arm-linux-androideabi-4.4.3/prebuilt/darwin-x86/bin $ export android_sdk=$android_toolchain/android-sdk-mac_86 $ export path=$path:$android_sdk/platform-tools:$android_ndk_bin - example commands to build tamarin: $ hg clone http://hg.mozilla.org/tamarin-redux $ cd tamarin-redux $ mkdir objdir-release $ cd objdir-release $ ../configure.py --arm-arch=armv
7-a --target=arm-android $ make to make a debug shell use this command: ../configure.py --enable-debug --arm-arch=armv
7-a --target=arm-android using cross-platform scripts in cygwin on windows: prerequisites: you need python 2.5 or later and gnu make 3.81 or later.
...vs_home_path="/cygdrive/c/program files/microsoft visual studio 9.0" vs_home="c:\program files\microsoft visual studio 9.0" export path="$vs_home_path/common
7/ide:$vs_home_path/vc/bin:$vs_home_path/common
7/tools:$vs_home_path/vc/vcpackages:$path" export include="$vs_home\vc\atlmfc\include;$vs_home\vc\include;c:\program files\microsoft sdks\windows\v6.0a\include;" export lib="$vs_home\vc\atlmfc\lib;$vs_home\vc\lib;c:\program files\microsoft sdks\windows\v6.0a\lib" export libpath="$vs_home\vc\atlmfc\lib;$vs_home\vc\lib;c:\program files\microsoft sdks\win...
...And 4 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
this document was started on july 2
7, 2012 so it will take some time to completely fill in and some issues still need to have solutions written for them.
... operating system specific issues windows
7 windows
7 aero missing right-hand title bar buttons when tabs are on top and the menu bar is disabled, firefox is missing the min/max/restore/close button on the right side of the title bar.
... please see the following threads on mozillazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 http://forums.mozillazine.org/viewtopic.php?f=18&t=19533
71&start=60 windows
7 aero not going into full screen mode properly on win
7 with aero glass support firefox doesn't always go to full screen mode from a normal window properly.
...And 4 more matches
Examples - Archive of obsolete content
</p> <dl> <dt>mozilla 1.1+/opera
7</dt> <dd>do not apply css or execute the javascript.</dd> <dt>netscape
7.0x/mozilla 1.0.x</dt> <dd>do not apply css but does execute the javascript.</dd> <dt>internet explorer 5.5+</dt> <dd>can not display the document.</dd> </dl> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf935.png" alt="valid xhtml 1.0!" h...
... </p> <p> note how the css rules for the background are applied in netscape
7.x, mozilla, opera
7 and internet explorer 5.5+.
... </p> <p> note how the css rules for the background are <strong>not</strong> applied in netscape
7.x, mozilla and opera
7 and that internet explorer 5.5+ can not display the page correctly at all.
...And 4 more matches
Getting started with HTML - Learn web development
</textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.adde...
...olution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 2
7) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos...
...for example, the <img> element embeds an image file onto a page: <img src="https://udn.realityripple.com/samples/d5/2be21e04
77.png"> this would output the following: note: empty elements are sometimes called void elements.
...And 4 more matches
Images in HTML - Learn web development
set the image's correct width and height (hint: it is 200px wide and 1
71px high), then experiment with other values to see what the effect is.
...b inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <img> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addev...
...w solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="1
71"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('...
...And 4 more matches
Choosing the right approach - Learn web development
15prefixed prefixed implemented with the vendor prefix: webkitsafari full support 6.1 full support 6.1 full support 6prefixed prefixed implemented with the vendor prefix: webkitwebview android full support ≤3
7 full support ≤3
7 full support ≤3
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 full support 18prefixed prefix...
... 14 — 42prefixed prefixed implemented with the vendor prefix: mozopera android full support 14 full support 14 full support 14prefixed prefixed implemented with the vendor prefix: webkitsafari ios full support
7 full support
7 full support 6.1prefixed prefixed implemented with the vendor prefix: webkitsamsung internet android full support 1.5 full support 1.5 full support 1.0prefixed...
... full support 0.12promise() constructorchrome full support 32edge full support 12firefox full support 29notes full support 29notes notes constructor requires a new operator since version 3
7.ie no support noopera full support 19safari full support 8notes full support 8notes notes constructor requires a new operator since version 10.webview android full support 4...
...And 4 more matches
Making decisions in your code — conditionals - Learn web development
for example: if (x === 5 ||
7 || 10 || 20) { // run my code } in this case the condition inside if(...) will always evaluate to true since
7 (or any other non-zero value) always evaluates to true.
... this condition is actually saying "if x equals 5, or
7 is true — which it always is".
...to make this work you've got to specify a complete test either side of each or operator: if (x === 5 || x ===
7 || x === 10 ||x === 20) { // run my code } switch statements if...else statements do the job of enabling conditional code well, but they are not without their downsides.
...And 4 more matches
Arrays - Learn web development
for example: let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ['tree',
795, [0, 1, 2]]; before proceeding, create a few example arrays.
...this works for an array of any length, but in this case it stops looping at item number
7 (this is good, as the last item — which we want the loop to include — is item 6).
...nt = \'total: $\' + total.tofixed(2);'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 2
7) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = ...
...And 4 more matches
Starting our Svelte Todo list app - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/b
7b831ea3a354d3
789cefbc31e2ca495?version=3.23.2 todo list app features this is how our todo list app wil look like once it's ready: using this ui our user will be able to: browse their tasks.
... for example, if we add an <img> element to our todos.svelte component without its corresponding alt prop: <h1>svelte to-do list</h1> <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c
7d.png"> the compiler will issue the following warning: (!) plugin svelte: a11y: <img> element should have an alt attribute src/components/todos.svelte 1: <h1>svelte to-do list</h1> 2: 3: <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c
7d.png"> ^ created public/build/bundle.js in 220ms [2020-0
7-15 04:0
7:43] waiting for changes...
... moreover, our editor can display this warning even before calling the compiler: you can tell svelte to ignore this warning for the next block of markup with a comment beginning with svelte-ignore, like this: <!-- svelte-ignore a11y-missing-attribute --> <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c
7d.png"> note: with vscode you can automatically add this ignore comment by clicking on the quick fix...
...And 4 more matches
Obsolete Build Caveats and Tips
this note below seems redundant as this is true by default https://msdn.microsoft.com/en-us/library/dh8che
7s%28v=vs.110%29.aspx note: starting with gecko
7.0, you should no longer include "-zc:wchar_t-" in the command line when building on windows.
... from windows_sdk_versions visual c++ 9 (vs2008) professional/express download and install the windows
7 sdk.
... visual c++ 8 (vs2005) professional download and install the windows
7 sdk.
...And 4 more matches
BloatView
== bloatview: all (cumulative) leak and bloat statistics, tab process 1862 |<----------------class--------------->|<-----bytes------>|<----objects---->| | | per-inst leaked| total rem| 0 |total | 1
7 2484|253953338 38| 1
7 |asynctransactiontrackersholder | 40 40| 10594 1|
78 |compositorchild | 4
72 4
72| 1 1|
79 |condvar | 24 48| 3086 2| 2
79 |messagepump | 8 8| 30 1| 285 |mutex ...
... | 20 60| 8998
7 3| 302 |pcompositorchild | 412 412| 1 1| 308 |pimagebridgechild | 416 416| 1 1| the first line tells you the pid of the leaking process, along with the type of process.
... byte bloats name file date blank blank.txt tue aug 29 14:1
7:40 2000 mozilla mozilla.txt tue aug 29 14:18:42 2000 yahoo yahoo.txt tue aug 29 14:19:32 2000 netscape netscape.txt tue aug 29 14:20:14 2000 the numbers do not include malloc 'd data such as string contents.
...And 4 more matches
Certificate functions
ddcerttolisttail mxr 3.2 and later cert_addextension mxr 3.5 and later cert_addocspacceptableresponses mxr 3.6 and later cert_addokdomainname mxr 3.4 and later cert_addrdn mxr 3.2.1 and later cert_asciitoname mxr 3.2 and later cert_cachecrl mxr 3.10 and later cert_clearocspcache mxr 3.11.
7 and later cert_certchainfromcert mxr 3.2 and later cert_certlistfromcert mxr 3.2 and later cert_certtimesvalid mxr 3.2 and later cert_changecerttrust mxr 3.2 and later cert_checkcertvalidtimes mxr 3.2 and later cert_checknamespace mxr 3.12 and later cert_checkcertusage mxr 3.3 and later ...
...st mxr 3.2 and later cert_createname mxr 3.2.1 and later cert_createocspcertid mxr 3.6 and later cert_createocsprequest mxr 3.6 and later cert_createrdn mxr 3.2.1 and later cert_createsubjectcertlist mxr 3.4 and later cert_createvalidity mxr 3.5 and later cert_crlcacherefreshissuer mxr 3.
7 and later cert_decodealtnameextension mxr 3.10 and later cert_decodeauthinfoaccessextension mxr 3.10 and later cert_decodeauthkeyid mxr 3.10 and later cert_decodeavavalue mxr 3.4 and later cert_decodebasicconstraintvalue mxr 3.2 and later cert_decodecertfrompackage mxr 3.4 and later cert_decodecerti...
... cert_destroycertificatepoliciesextension mxr 3.2 and later cert_destroycertificaterequest mxr 3.2 and later cert_destroycertlist mxr 3.2 and later cert_destroyname mxr 3.2 and later cert_destroyocspcertid mxr 3.6 and later cert_destroyocsprequest mxr 3.6 and later cert_destroyocspresponse mxr 3.
7 and later cert_destroyoidsequence mxr 3.9 and later cert_destroyusernotice mxr 3.10 and later cert_destroyvalidity mxr 3.5 and later cert_dupcertificate mxr 3.2 and later cert_dupcertlist mxr 3.2 and later cert_enableocspchecking mxr 3.2 and later cert_encodealtnameextension mxr 3.
7 and later ...
...And 4 more matches
NSS 3.12.9 release notes
nss 3.12.9 requires nspr 4.8.
7.
... you also need to download the nspr 4.8.
7 binary distributions to get the nspr 4.8.
7 header files and shared libraries, which nss 3.12.9 requires.
... nspr 4.8.
7 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.8.
7/.
...And 4 more matches
NSS 3.14.2 release notes
(https://bugzilla.mozilla.org/show_bug.cgi?id=540986) sqlite has been updated to 3.
7.15.
... note: please apply the patch in https://bugzilla.mozilla.org/show_bug.cgi?id=83
7799 if you build nss with the system sqlite library and your system sqlite library is older than 3.
7.15.
...(https://bugzilla.mozilla.org/show_bug.cgi?id=816853) bug
772144 - basic support for running nss test suites on android devices.this is currently limited to running tests from a linux host machine using an ssh connection.
...And 4 more matches
NSS 3.48 release notes
see bug 15
73118 for details.
... see bug 15
75411 for details.
...see bug 15626
71 for details.
...And 4 more matches
NSS Tools certutil
-y exp set an alternate exponent value to use in generating a new rsa public key for the database, instead of the default value of 6553
7.
... the available alternate values are 3 and 1
7.
... -
7 emailaddrs add a comma-separated list of email addresses to the subject alternative name extension of a certificate or certificate request that is being created or added to the database.
...And 4 more matches
SpiderMonkey 38
— sep 1
7, 2015 the download url is outdated and spidermonkey not release alone!
... js::clonefunctionobject (bug 1088228) interned_string_to_jsid (bug 1045900) js::construct (bug 101
7109) js::createerror (bug 984048) js::falsehandlevalue (bug 959
78
7) js::handlesymbol (bug 645416) js::identifystandardconstructor (bug 9
76148) js::iscallable (bug 1065811) js::isconstructor (bug 1065811) js::mutablehandlesymbol (bug 645416) js::ordinarytoprimitive (bug 1103152) js::propertyspecnameequalsid (bug 10826
72) js::propertyspecnameissymbol (bug 10826
72) js::propertyspecnametope...
...rmanentid (bug 10826
72) js::protokeytoid (bug 98
7669) js::rootedsymbol (bug 645416) js::truehandlevalue (bug 959
78
7) jsconstintegerspec (bug 1066020) jsid_is_symbol (bug 645416) jsid_to_symbol (bug 645416) jsprop_define_late (bug 825199) jsprop_ignore_enumerate (bug 103
7770) jsprop_ignore_permanent (bug 103
7770) jsprop_ignore_readonly (bug 103
7770) jsprop_ignore_value (bug 103
7770) jsprop_propop_accessors (bug 1088002) jsprop_redefine_nonconfigurable (bug 1101123) js_addfinalizecallback (bug 996
785) js_defineconstintegers (bug 1066020) js_getflatstringcharat (bug 103462
7) js_getfunctionscript (bug 1069694) js_getlatin1flatstringchars (bug 103
7869) js_getlatin1internedstringchars (bug 103
7869) js_getlatin1stringcharsandlength (bug 1032
726) js_getstringcharat (bug 103462
7...
...And 4 more matches
Redis Tips
de.js redis client: https://github.com/mranney/node_redis npm install redis python redis client: https://github.com/andymccurdy/redis-py there are some gotchas with the python api: https://github.com/andymccurdy/redis-py#api-reference select statement not implemented del is 'delete' in python zadd argument order is wrong setex argument order is wrong the default redis port is 63
79.
... in node, create client with explicit host and port like so: > var r = require('redis').createclient(63
79, '12
7.0.0.1') commands are asynchronous.
... redis> get foo (nil) redis> setnx foo 1
7 (integer) 1 redis> get foo "1
7" redis> setnx foo 42 (integer) 0 the return value from setnx is 1 if the value was set, 0 otherwise.
...And 4 more matches
nsINavBookmarksService
1.0 6
7 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: @mozilla.org/browser/nav-bookmarks-service;1.
... getkeywordforbookmark() obsolete since gecko 40.0 (firefox 40.0 / thunderbird 40.0 / seamonkey 2.3
7)this feature is obsolete.
... note: see bug 118
7119 for alternative.
...And 4 more matches
nsIWebBrowserChrome
chrome_window_popup 32
768 represent special cases.
... chrome_window_lowered 6
7108864 represent special cases.
... chrome_center_screen 13421
7728 represent special cases.
...And 4 more matches
Plugin Roadmap for Firefox - Plugins
schedule june 2016 starting with firefox 4
7 in june 2016, all plugins other than adobe flash are click-to-activate.
... march 201
7 starting with firefox 52 in march 201
7, plugins other than adobe flash are no longer supported in firefox.
... august 201
7 starting with firefox 55 in august 201
7, users must choose which sites are allowed to activate the flash plugin.
...And 4 more matches
characteristic - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcharacteristic experimentalchrome full support 5
7notes full support 5
7notes notes macos only.
... full support 5
7notes disabled notes linux and versions of windows earlier than 10.disabled from version 5
7: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
70notes notes windows 10.edge full support ≤
79notes full support ≤
79notes notes macos only.
...And 4 more matches
readValue() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadvalue experimentalchrome full support 5
7notes full support 5
7notes notes macos only.
... full support 5
7notes disabled notes linux and versions of windows earlier than 10.disabled from version 5
7: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
70notes notes windows 10.edge full support ≤
79notes full support ≤
79notes notes macos only.
...And 4 more matches
uuid - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetuuid experimentalchrome full support 5
7notes full support 5
7notes notes macos only.
... full support 5
7notes disabled notes linux and versions of windows earlier than 10.disabled from version 5
7: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
70notes notes windows 10.edge full support ≤
79notes full support ≤
79notes notes macos only.
...And 4 more matches
value - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvalue experimentalchrome full support 5
7notes full support 5
7notes notes macos only.
... full support 5
7notes disabled notes linux and versions of windows earlier than 10.disabled from version 5
7: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
70notes notes windows 10.edge full support ≤
79notes full support ≤
79notes notes macos only.
...And 4 more matches
writeValue() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwritevalue experimentalchrome full support 5
7notes full support 5
7notes notes macos only.
... full support 5
7notes disabled notes linux and versions of windows earlier than 10.disabled from version 5
7: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
70notes notes windows 10.edge full support ≤
79notes full support ≤
79notes notes macos only.
...And 4 more matches
ByteLengthQueuingStrategy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbytelengthqueuingstrategy experimentalchrome full support 59edge full support 16firefox full support 5
7disabled full support 5
7disabled disabled from version 5
7: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
... webview android full support 59chrome android full support 59firefox android full support 5
7disabled full support 5
7disabled disabled from version 5
7: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
... samsung internet android full support
7.0bytelengthqueuingstrategy() constructor experimentalchrome full support 59edge full support 16firefox full support 5
7disabled full support 5
7disabled disabled from version 5
7: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
...And 4 more matches
Using the CSS Typed Object Model - Web APIs
the link has inherited font-weight: bold; from the paragraph's styles, listing it as font-weight:
700.
... you'll note that custom properties retain the value as written in the stylesheet, whereas computed styles will be listed as the computed value — color was listed as an rgb() value and the font-weight returned was
700 even though we use a named color and and the bold keyword.
...it is a class that defines numbers with units of measurement like 20px, 40%, 200ms, or
7.
...And 4 more matches
CountQueuingStrategy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountqueuingstrategy experimentalchrome full support 59edge full support 16firefox full support 5
7disabled full support 5
7disabled disabled from version 5
7: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
... webview android full support 59chrome android full support 59firefox android full support 5
7disabled full support 5
7disabled disabled from version 5
7: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
... samsung internet android full support
7.0countqueuingstrategy() constructor experimentalchrome full support 59edge full support 16firefox full support 5
7disabled full support 5
7disabled disabled from version 5
7: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
...And 4 more matches
Timing element visibility with the Intersection Observer API - Web APIs
body { font-family: "open sans", "arial", "helvetica", sans-serif; background-color: aliceblue; } .wrapper { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr); max-width:
700px; margin: 0 auto; background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" as the background color.
... the wrapper's width is fixed at
700px so that it will fit in the available space when presented inline on mdn below.
... setting up to set things up, we run the startup() function below when the page loads: window.addeventlistener("load", startup, false); function startup() { contentbox = document.queryselector("main"); document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.
75] }; adobserver = new intersectionobserver(intersectioncallback, observeroptions); buildcontents(); refreshintervalid = window.setinterval(handlerefreshinterval, 1000); } first, a reference to the content wrapping <main> element is obtained, so we can insert our content into it.
...And 4 more matches
Writing WebSocket servers - Web APIs
sections 1 and 4-
7 are especially interesting to server implementors.
...after the handshake succeeds, you have to use a different set of codes (defined in section
7.4 of the spec).
...to get it, concatenate the client's sec-websocket-key and the string "258eafa5-e914-4
7da-95ca-c5ab0dc85b11" together (it's a "magic string"), take the sha-1 hash of the result, and return the base64 encoding of that hash.
...And 4 more matches
Writing a WebSocket server in Java - Web APIs
security.messagedigest; import java.security.nosuchalgorithmexception; import java.util.base64; import java.util.scanner; import java.util.regex.matcher; import java.util.regex.pattern; public class websocket { public static void main(string[] args) throws ioexception, nosuchalgorithmexception { serversocket server = new serversocket(80); try { system.out.println("server has started on 12
7.0.0.1:80.\r\nwaiting for a connection..."); socket client = server.accept(); system.out.println("a client connected."); socket methods: java.net.socket getinputstream() returns an input stream for this socket.
... you must, obtain the value of sec-websocket-key request header without any leading and trailing whitespace link it with "258eafa5-e914-4
7da-95ca-c5ab0dc85b11" compute sha-1 and base64 code of it write it back as value of sec-websocket-accept response header as part of a http response.
... if (get.find()) { matcher match = pattern.compile("sec-websocket-key: (.*)").matcher(data); match.find(); byte[] response = ("http/1.1 101 switching protocols\r\n" + "connection: upgrade\r\n" + "upgrade: websocket\r\n" + "sec-websocket-accept: " + base64.getencoder().encodetostring(messagedigest.getinstance("sha-1").digest((match.group(1) + "258eafa5-e914-4
7da-95ca-c5ab0dc85b11").getbytes("utf-8"))) + "\r\n\r\n").getbytes("utf-8"); out.write(response, 0, response.length); decoding messages after a successful handshake, client can send messages to the server, but now these are encoded.
...And 4 more matches
Example and tutorial: Simple synth keyboard - Web APIs
function createnotetable() { let notefreq = []; for (let i=0; i< 9; i++) { notefreq[i] = []; } notefreq[0]["a"] = 2
7.500000000000000; notefreq[0]["a#"] = 29.135235094880619; notefreq[0]["b"] = 30.86
770632850
7756; notefreq[1]["c"] = 32.
7031956625
74829; notefreq[1]["c#"] = 34.64
78288
72109012; notefreq[1]["d"] = 36.
7080959896
75945; notefreq[1]["d#"] = 38.8908
72965260113; notefreq[1]["e"] = 41.203444614108
741; notefreq[1]["f"] = 43.653528929125485; notefreq[1]["f#"] = 46.249302838954299; notefr...
...eq[1]["g"] = 48.99942949
7718661; notefreq[1]["g#"] = 51.91308
719
7493142; notefreq[1]["a"] = 55.000000000000000; notefreq[1]["a#"] = 58.2
704
70189
761239; notefreq[1]["b"] = 61.
73541265
7015513; ...
... notefreq[2]["c"] = 65.406391325149658; notefreq[2]["c#"] = 69.29565
7744218024; notefreq[2]["d"] =
73.4161919
79351890; notefreq[2]["d#"] =
77.
781
74593052022
7; notefreq[2]["e"] = 82.40688922821
7482; notefreq[2]["f"] = 8
7.30
705
78582509
71; notefreq[2]["f#"] = 92.4986056
77908599; notefreq[2]["g"] = 9
7.99885899543
7323; notefreq[2]["g#"] = 103.8261
74394986284; notefreq[2]["a"] = 110.000000000000000; notefreq[2]["a#"] = 116.5409403
795224
79; notefreq[2]["b"] = 123.4
7082531403102
7; notefreq[3]["c"] = 130.812
78265029931
7; notefreq[3]["c#"] = 138.591315488436048; notefreq[3]["d"] = 146.832383958
703
780; notefreq[3]["d#"] = 155.563491861040455; notefreq[3]["e"] = 164.813
778456434964; notefreq[3]["f"] = 1
74.614115
716501942; ...
...And 4 more matches
Grid template areas - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div ...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd...
...And 4 more matches
clip-path - CSS: Cascading Style Sheets
th: url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('m0.5,1 c0.5,1,0,0.
7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.
7,0.5,1,0.5,1 z'); /* box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path property is specified as one or a combination of the values listed below.
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<fill-rule> = nonzero | evenodd<box> = border-box | padding-box | content-box examples comparison of html and svg <svg class="defs"> <defs> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c0.5,1,0,0.
7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.
7,0.5,1,0.5,1 z" /> </clippath> </defs> </svg> <div class="grid"> <div class="col"> <div class="note">clip-path: none</div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </div> </d...
...t x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: url(#mypath)<br><br> assuming the following clippath definition: <pre> <svg> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c 0.5,1,0,0.
7,0,0.3 a 0.25,0.25,1,1,1,0.5,0.3 a 0.25,0.25,1,1,1,1,0.3 c 1,0.
7,0.5,1,0.5,1 z" /> </clippath> </svg></pre> </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span...
...And 4 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
here are some sample colors in hsl notation: table { border: 1px solid black; font: 16px "open sans", helvetica, arial, sans-serif; border-spacing: 0; border-collapse: collapse; } th, td { border: 1px solid black; padding:4px 6px; text-align: left; } th { background-color: hsl(0, 0%,
75%); } <table> <thead> <tr> <th scope="col">color in hsl notation</th> <th scope="col">example</th> </tr> </thead> <tbody> <tr> <td><code>hsl(90deg, 100%, 50%)</code></td> <td style="background-color: hsl(90deg, 100%, 50%);"> </td> </tr> <tr> <td><code>hsl(90, 100%, 50%)</code></td> <td style="background-color: hsl(90, 100%, 50%);"> </td> </tr> <tr> ...
... <td><code>hsl(0.15turn, 50%,
75%)</code></td> <td style="background-color: hsl(0.15turn, 50%,
75%);"> </td> </tr> <tr> <td><code>hsl(0.15turn, 90%,
75%)</code></td> <td style="background-color: hsl(0.15turn, 90%,
75%);"> </td> </tr> <tr> <td><code>hsl(0.15turn, 90%, 50%)</code></td> <td style="background-color: hsl(0.15turn, 90%, 50%);"> </td> </tr> <tr> <td><code>hsl(2
70deg, 90%, 50%)</code></td> <td style="background-color: hsl(2
70deg, 90%, 50%);"> </td> </tr> </tbody> </table> note that when you omit the hue's unit, it's assumed to be in degrees (deg).
... .boxright { float: right; background-color: hsl(2
70deg, 50%,
75%); outline: 4px dashed rgb(110, 20, 120); color: hsl(0deg, 100%, 100%); text-decoration: underline wavy #88ff88; text-shadow: 2px 2px 3px black; } finally, the .boxright class describes the unique properties of the box that's drawn on the right.
...And 4 more matches
Microformats - HTML: Hypertext Markup Language
the value of each property is defined in html using the class property any element can carry example h-card <p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" alt="" /> <a class="p-name u-url" href="http://example.org">joe bloggs</a> <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, <span class="p-street-address">1
7 austerstræti</span> <span class="p-locality">reykjavík</span> <span class="p-country-name">iceland</span> </p> property description p-name the full/formatted name of the person or organization.
...ard dt-published when the entry was published p-summary short entry summary e-content full content of the entry parsed reply h-entry example <div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed
7ac8e849f492b5bc
7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a></span> replied to <a class="u-in-reply-to" href="/docs/web/html/microformats">a post on <strong>developer.mozilla.org</strong> </a>: </p> <p class="p-name e-content">hey thanks for making this microformats resource</p> <p> <a href="...
... "html": "hey thanks for making this microformats resource", "value": "hey thanks for making this microformats resource", "lang": "en" } ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "greg mcverry" ], "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed
7ac8e849f492b5bc
7e6a630/thumb.jpg" ], "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ] }, "lang": "en", "value": "greg mcverry" } ] }, "lang": "en" } h-feed the h-feed is a stream or feed of h-entry posts, like complete posts on a home page or archive pages, or summaries or other brief lis...
...And 4 more matches
HTTP resources and specifications - HTTP
specification title status rfc
7230 hypertext transfer protocol (http/1.1): message syntax and routing proposed standard rfc
7231 hypertext transfer protocol (http/1.1): semantics and content proposed standard rfc
7232 hypertext transfer protocol (http/1.1): conditional requests proposed standard rfc
7233 hypertext transfer protocol (http/1.1): range requests proposed standard rfc
7234 hy...
...pertext transfer protocol (http/1.1): caching proposed standard rfc 5861 http cache-control extensions for stale content informational rfc 8246 http immutable responses proposed standard rfc
7235 hypertext transfer protocol (http/1.1): authentication proposed standard rfc 6265 http state management mechanism defines cookies proposed standard draft spec cookie prefixes ietf draft draft spec same-site cookies ietf draft draft spec deprecate modification of 'secure' cookies from non-secure origins ietf draft rfc 2145 use and interpretation of http version numbers informational rfc 6585 additional http status codes proposed standard rfc
7538 t...
...he hypertext transfer protocol status code 308 (permanent redirect) proposed standard rfc
7725 an http status code to report legal obstacles on the standard track rfc 239
7 the "data" url scheme proposed standard rfc 3986 uniform resource identifier (uri): generic syntax internet standard rfc 5988 web linking defines the link header proposed standard experimental spec hypertext transfer protocol (http) keep-alive header informational (expired) draft spec http client hints ietf draft rfc
75
78 returning values from forms: multipart/form-data proposed standard rfc 6266 use of the content-disposition header field in the hypertext transfer protocol (http) proposed standar...
...And 4 more matches
HTTP response status codes - HTTP
you can find an updated specification in rfc
7231.
... 20
7 multi-status (webdav) conveys information about multiple resources, for situations where multiple status codes might be appropriate.
... 30
7 temporary redirect the server sends this response to direct the client to get the requested resource at another uri with same method that was used in the prior request.
...And 4 more matches
JavaScript modules - JavaScript
see node's ecmascript modules documentation for more details.disabled from version 8.5.0: this feature is behind the --experimental-modules runtime flag.dynamic importchrome full support 63edge full support
79firefox full support 6
7 full support 6
7 no support 66 — 6
7disabled disabled from version 66 until version 6
7 (exclusive): this feature is behind the javascript.options.dynamicimport preference (needs to be set to true).
...support noopera full support 50safari full support 11.1webview android full support 63chrome android full support 63firefox android full support 6
7 full support 6
7 no support 66 — 6
7disabled disabled from version 66 until version 6
7 (exclusive): this feature is behind the javascript.options.dynamicimport preference (needs to be set to true).
...see node's ecmascript modules documentation for more details.disabled from version 12.0.0: this feature is behind the --experimental-modules runtime flag.available in workerschrome full support 80 full support 80 full support 6
7disabled disabled from version 6
7: this feature is behind the experimental web platform features preference.
...And 4 more matches
WebAssembly.Memory - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmemorychrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0memory() constructorchrome full support ...
... 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the ...
...And 4 more matches
Paths - SVG: Scalable Vector Graphics
an uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates (e.g., move 10px up and
7px to the left from the last point).
... <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 c 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> <path d="m
70 10 c
70 20, 110 20, 110 10" stroke="black" fill="transparent"/> <path d="m 130 10 c 120 20, 180 20, 1
70 10" stroke="black" fill="transparent"/> <path d="m 10 60 c 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> <path d="m
70 60 c
70 80, 110 80, 110 60" stroke="black" fill="transparent"/> <path d="m 130 60 c 120 80, 180 80, 1
70 60" stroke="black" fill="transparent"/> <path d="m...
... 10 110 c 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> <path d="m
70 110 c
70 140, 110 140, 110 110" stroke="black" fill="transparent"/> <path d="m 130 110 c 120 140, 180 140, 1
70 110" stroke="black" fill="transparent"/> </svg> the example above creates nine cubic bézier curves.
...And 4 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
7 basic example xslt the basic example will load an xml file and apply a xsl transformation on it.
... 15 for further reading needscontent, needshelp, transforming_xml_with_xslt, xml, xslt http://www.amazon.com/xslt-programme.../dp/0
764543814 16 resources extensions, needscontent, needsexample, needslivesample, xml, xsl no summary!
... 1
7 the netscape xslt/xpath reference netscape, reference, xslt, axes no summary!
...And 4 more matches
Forms related code snippets - Archive of obsolete content
/ oincryear.innerhtml = "\u00bb"; /* » */ odecryear.id = sprefs + "-decr-year-" + nid; odecrmonth.id = sprefs + "-decr-month-" + nid; oincrmonth.id = sprefs + "-incr-month-" + nid; oincryear.id = sprefs + "-incr-year-" + nid; odecryear.onmousedown = oincryear.onmousedown = odecrmonth.onmousedown = oincrmonth.onmousedown = onheadclick; for (var nthid = 0; nthid <
7; nthid++) { oth = document.createelement("th"); oth.innerhtml = sdays[nthid]; ohrow.appendchild(oth); } othead.appendchild(ohrow); ocapt.appendchild(odecryear); ocapt.appendchild(odecrmonth); ocapt.appendchild(oincryear); ocapt.appendchild(oincrmonth); ocapt.appendchild(this.display); this.container.appendchild(ocapt); this.container.appendchild(othead); th...
...ex++; otable.style.position = "absolute"; otable.style.left = otarget.offsetleft + "px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "px"; otarget.parentnode.insertbefore(otable, otarget); }; ainstances.push(this); } datepicker.prototype.writedays = function () { const nendblanks = (this.current.getday() + bzeroismonday * 6) %
7, nend = amonthlengths[this.current.getmonth()] + nendblanks, ntotal = nend + ((
7 - nend %
7) %
7); var otd, otr; if (this.otbody) { this.container.removechild(this.otbody); } this.otbody = document.createelement("tbody"); for (var nday, oday, niter = 0; niter < ntotal; niter++) { if (niter %
7 === 0) { otr = document.createelement("tr"); ...
... this date-picker code snippet will automatically create an html code like the following: <table id="zdp-cal-1" class="zdp-calendar" style="z-index: 1026; position: absolute; left: 294px; top: 4
7px;"> <caption><span id="zdp-decr-year-1" class="zdp-decrease-year">«</span><span id="zdp-decr-month-1" class="zdp-decrease-month"><</span><span id="zdp-incr-year-1" class="zdp-increase-year">»</span><span id="zdp-incr-month-1" class="zdp-increase-month">></span> <span class="zdp-current-month">aug 1998</span> </caption> <thead> <tr> <th>m</th> <th>t</th...
...And 3 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
this guide targets firefox 1
7 esr or later (or anything else gecko 1
7+, such as seamonkey 2.14+).
...everything will use apis available in firefox 1
7+ or code provided here.
... reportedly xmlhttprequest doesn't work reliably when used in jsm under versions of firefox less than 16, however as previously mentioned, this guide should be taken as requiring firefox 1
7+.
...And 3 more matches
MMgc - Archive of obsolete content
sample stack trace: xmlclass.cpp:391 toplevel.cpp:164 toplevel.cpp:50
7 interpreter.cpp:1098 interpreter.cpp:20 methodenv.cpp:4
7 allocation traces, deletion traces etc.
...the memory profiler use srtti and stack traces to get information by location and type: class avmplus::growablebuffer - 24.9% - 3015 kb 514 items, avg 600
7b 98.9% - 2983 kb - 512 items - poolobject.cpp:29 abcparser.cpp:948 … 0.8% - 24 kb - 1 items - poolobject.cpp:29 abcparser.cpp:948 … class avmplus::string - 13.2% - 1602 kb 156
75 items, avg 104b 65.6% - 1051 kb - 1439
7 items - stringobject.cpp:46 avmcore.cpp:2300 … 20.4% - 326 kb - 10439 items - avmcore.cpp:2300 abcparser.cpp:10
77 … 6.5% - 103 kb - 3311 items -...
... avmcore.cpp:2300 abcparser.cpp:10
77 … other profiling tools the gcstats flag on the gc object controls verbose output.
...And 3 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
; if (err==success) { performinstall() }; else { cancelinstall() }; } as you can see in the code listing, the verification process at the top is on lines 1 to 18; the file addition process, here part of the main installation block, is on lines 24 to 41; the registration part of the main installation block is on lines 42-58; and the execution at the end of the main block is on lines 59 to
71.
...in the browser.xpi installation, this function appears at line 20: var err = initinstall("netscape seamonkey", "browser", "6.0.0.200011080
7"); if you call a method on the install object before initinstall(), you will get an error.
...in the example above, "netscape seamonkey" is the display name, "browser" is the registry name, and the version is "6.0.0.200011080
7." see initinstall in the xpinstall api reference for more information on the initialization process.
...And 3 more matches
Building accessible custom components in XUL - Archive of obsolete content
we define the grid, then define the headers for each row (numbered 1 through
7), then define the column header and cells for each column.
...<code> <grid class="spreadsheet" id="accjaxspreadsheet" flex="1"> <rows flex="1"></rows> <columns flex="1"> <column> <description value="entry #"/> <description value="1"/> <description value="2"/> <description value="3"/> <description value="4"/> <description value="5"/> <description value="6"/> <description value="
7"/> </column> <column flex="1"> <description value="date"/> <label value="03/14/05" flex="1"/> <label value="03/15/05" flex="1"/> <label value="03/15/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> </column> <column flex="1"> ...
...the final product looks like this: <caption>xul spreadsheet with
7 rows and 5 columns</caption> although this has the visual layout of a spreadsheet, assistive technologies will only see it as a collection of individual, unrelated text labels.
...And 3 more matches
Accessibility/XUL Accessibility Reference - Archive of obsolete content
abel> </button> <button id='butwrap2'> <label control="butwrap2" value="<!--this-->" /> <label control="butwrap2" value="is" /> <label control="butwrap2" value="a" /> <label control="butwrap2" value="button" /> </button> <button image="images/img.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read browser jaws
7.10 issues to use a browser element with html, the type="content" attribute should be specified.
... however, this attribute causes any xul loaded in the browser to have issues with jaws
7.10.
...therefore, with jaws
7.10, to use xul inside of a browser, the type attribute cannot not be used.
...And 3 more matches
Building XULRunner with Python - Archive of obsolete content
currently (mar 0
7) python is not enabled by default so a custom build of mozilla is needed.
... microsoft c++ compiler is required and whilst the current free version is visual studio 8 express (msvc8) you will almost certainly want to use visual studio .net 2003 (msvc
71) which is not longer officially available.
... the issue is that xulrunner must be built with the same version of c as python and with python 2.5 that is msvc
71.
...And 3 more matches
Adobe Flash - Archive of obsolete content
for example, the current flash plugin version is flash 6 r
79.
...this is currently not the case, but 12 is a sufficiently high version number (current versions are version 6r.
79) to allow for some leeway for fixing this down the road.
... example 2: javascript to flash communication note: javascript to flash communication may not work with flash player versions older than version 8 if the user has installed multiple mozilla based browsers onto the same machine (see bug 28405
7 and bug 233533).
...And 3 more matches
SSL and TLS - Archive of obsolete content
all cas should use at least 2048-bit keys, and stronger keys (such as 30
72 or 4096 bits) if possible.
...there are 3.4 x 1038 possible 128-bit keys and 1.1 x 10
77 possible 256-bit keys.
...because the key size is so large, there are approximately 3.
7 * 1050 possible keys.
...And 3 more matches
ECMAScript 2015 support in Mozilla - Archive of obsolete content
finally, ecma-262 edition 6 got officially approved and published as a standard on june 1
7, 2015 by the ecma general assembly.
... 25) array.prototype.fill() (firefox 31) array.prototype.find(), array.prototype.findindex() (firefox 25) array.prototype.entries(), array.prototype.keys() (firefox 28), array.prototype.values() array.prototype.copywithin() (firefox 32) get array[@@species] (firefox 48) new map and set objects, and their weak counterparts map (firefox 13) map iteration with for...of (firefox 1
7) map.prototype.foreach() (firefox 25) map.prototype.entries() (firefox 20) map.prototype.keys() (firefox 20) map.prototype.values() constructor argument: new map(null) (firefox 3
7) monkey-patched set() in constructor (firefox 3
7) get map[@@species] (firefox 41) set (firefox 13) set iteration with for...of (firefox 1
7) set.prototype.foreach() (firefox 25) set...
....prototype.entries(), set.prototype.keys(), set.prototype.values() (firefox 24) constructor argument: new set(null) (firefox 3
7) monkey-patched add() in constructor (firefox 3
7) get set[@@species] (firefox 41) weakmap (firefox 6) weakmap.clear() (firefox 20) optional iterable argument in weakmap constructor (firefox 36) constructor argument: new weakmap(null) (firefox 3
7) monkey-patched set() in constructor (firefox 3
7) weakset (firefox 34) constructor argument: new weakset(null) (firefox 3
7) monkey-patched add() in constructor (firefox 3
7) new math functions math.imul() (firefox 20) math.clz32() (firefox 31) math.fround() (firefox 26) math.log10(), math.log2(), math.log1p(), math.expm1(), math.cosh(), math.sinh(), math.tanh(...
...And 3 more matches
Multiple-column layout - Learn web development
.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(
79, 185, 22
7); } try adding rules of different styles and colors.
... styling the columns body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(
79, 185, 22
7); } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... spanning the columns body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(
79, 185, 22
7); } h2 { column-span: all; background-color: rgb(
79, 185, 22
7); color: white; padding: .5em; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 3 more matches
Looping code - Learn web development
first, some simple html — a text <input> allowing us to enter a name to search for, a <button> element to submit a search, and a <p> element to display the results in: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:
7654322', 'mary:9998
769', 'dianne:93849
75']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); ...
...ot found.'; } } }); hidden code 3 <!doctype html> <html> <head> <meta charset="utf-8"> <title>simple contact search example</title> <style> </style> </head> <body> <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> <script> const contacts = ['chris:2232322', 'sarah:3453456', 'bill:
7654322', 'mary:9998
769', 'dianne:93849
75']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let spli...
...t i = 10; // const para = document.createelement('p'); // para.textcontent = ; // output.appendchild(para); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = ...
...And 3 more matches
Debugging Table Reflow
>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> </table> rendering: <colgroup><col><col width="50%"><col width="1*"><col></colgroup>cell 1cell 2cell 3cell 4 it will produce the following log at the entrance of assignnonpctcolwidths: assignnonpctcolwidths en max=4500 count=0 ***start table dump*** mcolwidths=-1 -1 -1 -1 col frame cache -> 0=00b93138 1=00b931f0 2=024dd
728 3=024dd
780 **start col dump** colindex=0 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=1 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=2 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=3 isanonymou...
...the first line of the data dump shows that no width has yet been assigned to the columns mcolwidths=-1 -1 -1 -1, -1 stands for: #define width_not_set -1 this is followed by a reference to the column frame pointers: col frame cache -> 0=00b93138 1=00b931f0 2=024dd
728 3=024dd
780 this is followed by the information which width has been set for each column.
...+ padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans #define pct 6 // percent width of cell or col #define pct_adj
7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others in the last log snippet none of these width's has been set.
...And 3 more matches
How Mozilla determines MIME Types
however, starting in mozilla 1.
7alpha, mozilla does do content sniffing, like this: when the content-type sent by the server is one of (case-sensitively) text/plain text/plain; charset=iso-8859-1 text/plain; charset=iso-8859-1 and the server did not send a content-encoding header, mozilla will sniff the first block of data it gets and check for non-text bytes.
... text bytes are 9-13, 2
7, and 31-255.
... unknown decoder located at netwerk/streamconv/converters/nsunknowndecoder.cpp, the interesting part starts at line 28
7, the ssnifferentries array together with the determinecontenttype function.
...And 3 more matches
Mozilla DOM Hacking Guide
(bug 90
75
7) static jsclass sdomconstructorprotoclass: xpconnect fu to expose the dom objects constructors to javascript.
...(bug 9155
7) static nsixpconnect *sxpconnect: used to call nsixpconnect methods that we need.
...see bug 920
71 for more information.
...And 3 more matches
NSS 3.12.6 release notes
new in nss 3.12.6 ssl3 & tls renegotiation indication extension (rfc 5
746) by default, nss 3.12.6 uses the new tls renegotiation indication extension for tls renegotiation but allows simple ssl/tls connections (without renegotiation) with peers that don't support the tls renegotiation indication extension.
... bug 2
75
744: support for tls compression rfc 3
749 bug 494603: update nss's copy of sqlite3 to 3.6.22 to get numerous bug fixes bug 496993: add accessor functions for ssl_implementedciphers bug 5152
79: cert_pkixverifycert considers a certificate revoked if cert_processocspresponse fails for any reason bug 5158
70: gcc compiler warnings in nss 3.12.4 bug 518255: ...
...the input buffer for sgn_update should be declared const bug 519550: allow the specification of an alternate library for sqlite bug 52416
7: crash in [[@ find_objects_by_template - nsstoken_findcertificatebyissuerandserialnumber] bug 526910: maxresponselength (initialized to pkix_default_max_response_length) is too small for downloading some crls.
...And 3 more matches
NSS 3.16.3 release notes
notable changes in nss 3.16.3 the following 1024-bit ca certificates were removed cn = entrust.net secure server certification authority sha1 fingerprint: 99:a6:9b:e6:1a:fe:88:6b:4d:2b:82:00:
7c:b8:54:fc:31:
7e:15:39 cn = gte cybertrust global root sha1 fingerprint: 9
7:81:
79:50:d8:1c:96:
70:cc:34:d8:09:cf:
79:44:31:36:
7e:f4:
74 ou = valicert class 1 policy validation authority sha1 fingerprint: e5:df:
74:3c:b6:01:c4:9b:98:43:dc:ab:8c:e8:6a:81:10:9f:e4:8e ou = valicert class 2 policy validation authority sha1 fingerprint: 31:
7a...
...:2a:d0:
7f:2b:33:5e:f5:a1:c3:4e:4b:5
7:e8:b
7:d8:f1:fc:a6 ou = valicert class 3 policy validation authority sha1 fingerprint: 69:bd:8c:f4:9c:d3:00:fb:59:2e:1
7:93:ca:55:6a:f3:ec:aa:35:fb additionally, the following ca certificate was removed as requested by the ca ou = tdc internet root ca sha1 fingerprint: 21:fc:bd:8e:
7f:6c:af:05:1b:d1:b3:43:ec:a8:e
7:61:4
7:f2:0f:8a the following ca certificates were added cn = certification authority of wosign sha1 fingerprint: b9:42:94:bf:91:ea:8f:b6:4b:e6:10:9
7:c
7:fb:00:13:59:b6:
76:cb cn = ca 沃通根证书 sha1 fingerprint: 16:32:4
7:8d:89:f9:21:3a:92:00:85:63:f5:a4:a
7:d3:12:40:8a:d6 cn = digicert assured id root g2 sha1 fingerprin...
...t: a1:4b:48:d9:43:ee:0a:0e:40:90:4f:3c:e0:a4:c0:91:93:51:5d:3f cn = digicert assured id root g3 sha1 fingerprint: f5:1
7:a2:4f:9a:48:c6:c9:f8:a2:00:26:9f:dc:0f:48:2c:ab:30:89 cn = digicert global root g2 sha1 fingerprint: df:3c:24:f9:bf:d6:66:
76:1b:26:80:
73:fe:06:d1:cc:8d:4f:82:a4 cn = digicert global root g3 sha1 fingerprint:
7e:04:de:89:6a:3e:66:6d:00:e6:8
7:d3:3f:fa:d9:3b:e8:3d:34:9e cn = digicert trusted root g4 sha1 fingerprint: dd:fb:16:cd:49:31:c9:
73:a2:03:
7d:3f:c8:3a:4d:
7d:
77:5d:05:e4 cn = quovadis root ca 1 g3 sha1 fingerprint: 1b:8e:ea:5
7:96:29:1a:c9:39:ea:b8:0a:81:1a:
73:
73:c0:93:
79:6
7 cn = quovadis root ca 2 g3 sha1 fingerprint: 09:3c:61:f3:8b:8b:dc:
7d...
...And 3 more matches
NSS 3.23 release notes
nss 3.23 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_23_rtm/src/ new in nss 3.23 new functionality chacha20/poly1305 cipher and tls cipher suites now supported (bug 91
75
71, bug 122
7905) experimental-only support tls 1.3 1-rtt mode (draft-11).
... notable changes in nss 3.23 the copy of sqlite shipped with nss has been updated to version 3.10.2 (bug 1234698) the list of tls extensions sent in the tls handshake has been reordered to increase compatibility of the extended master secret with servers (bug 1243641) the build time environment variable nss_enable_zlib has been renamed to nss_ssl_enable_zlib (bug 12438
72).
... the following ca certificates were removed cn = staat der nederlanden root ca sha-256 fingerprint: d4:1d:82:9e:8c:16:59:82:2a:f9:3f:ce:62:bf:fc:de:26:4f:c8:4e:8b:95:0c:5f:f2:
75:d0:52:35:46:95:a3 cn = netlock minositett kozjegyzoi (class qa) tanusitvanykiado sha-256 fingerprint: e6:06:dd:ee:e2:ee:
7f:5c:de:f5:d9:05:8f:f8:b
7:d0:a9:f0:42:8
7:
7f:6a:1
7:1e:d8:ff:69:60:e4:cc:5e:a5 cn = netlock kozjegyzoi (class a) tanusitvanykiado sha-256 fingerprint:
7f:12:cd:5f:
7e:5e:29:0e:c
7:d8:51:
79:d5:b
7:2c:20:a5:be:
75:08:ff:db:5b:f8:1a:b9:68:4a:
7f:c9:f6:6
7 cn = netlock uzleti (class b) tanusitvany...
...And 3 more matches
NSS 3.45 release notes
see bug 15630
78.
... bug 15505
79 - replace arm32 curve25519 implementation with one from fiat-crypto bug 1551129 - support static linking on windows bug 1552262 - expose a function pk11_findrawcertswithsubject for finding certificates with a given subject on a given slot bug 1546229 - add ipsec ike support to softoken bug 1554616 - add support for the elbrus lcc compiler (<=1.23) bug 15438
74 - expose an external clock for ssl this adds new experimental functions: ssl_settimefunc, ssl_createantireplaycontext, ssl_setantireplaycontext, and ssl_releaseantireplaycontext.
... bug 15464
77 - various changes in response to the ongoing fips review note: the source package size has increased substantially due to the new fips test vectors.
...And 3 more matches
NSS 3.56 release notes
the known issue where makefile builds failed to locate seccomon.h was fixed in bug 16539
75.
... bugs fixed in nss 3.56 bug 1650
702 - support sha-1 hw acceleration on armv8 bug 1656981 - use mpi comba and mulq optimizations on x86-64 macos.
... bug 1652
729 - add build flag to disable rc2 and relocate to lib/freebl/deprecated.
...And 3 more matches
NSS tools : modutil
please contribute to the initial review in mozilla nss bug 8364
77[1] description the security module database tool, modutil, is a command-line utility for managing pkcs #11 module information both within secmod.db files and within hardware tokens.
...liability ltd.(c)9
7 verisign, ou=verisign object signing ca - class 3 organization, ou="verisign, inc.", o=verisign trust network **issuer name**, ou=www.verisign.com/cps incorp.by ref.
... liability ltd.(c)9
7 verisign, ou=verisign object signing ca - class 3 organization, ou="verisign, inc.", o=verisign trust network ---------------------------------------------- do you wish to continue this installation?
...And 3 more matches
JSNewEnumerateOp
syntax typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, js::autoidvector &properties); // added in spidermonkeysidebar 38 typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, jsiterateop enum_op, js::mutablehandlevalue statep, js::mutablehandleid idp); // obsolete since jsapi 3
7 name type description cx jscontext * the context in which the enumeration is taking place.
... enum_op jsiterateop obsolete since jsapi 3
7 specifies which step in iteration is happening.
... statep js::mutablehandleid obsolete since jsapi 3
7 in/out parameter.
...And 3 more matches
SpiderMonkey 1.8.5
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz (md5 checksum: a45
74365938222adca0a6bd33329cb32).
...the interface was finalized only after js 1.8.0 shipped, with bug 4
7718
7.
...this change was made in bug 5
71355 to move the regexp statics out of the context, to simplify cross compartment wrappers.
...And 3 more matches
SpiderMonkey 45
you can download full source code from https://ftp.mozilla.org/pub/spidermonkey/releases/45.0.2/mozjs-45.0.2.tar.bz2 sha256: 5
70530b1e551bf4a459d
7cae8
75f33f99d5ef0c29ccc
7742a1b6f588e5eadbee md5: 2ca34f998d8b5ea
79d8616dd26b5fbab spidermonkey 45 is the javascript engine that shipped in firefox 45.
...you may wish to make the bugs block bug 83
7921 (aliased as "sm.embedding").
... js_setcurrentembeddertimefunction (bug 115950
7) js_getcurrentembeddertime (bug 115950
7) js_mayresolvestandardclass (bug 1155946) js_getiteratorprototype (bug 1225392) js_globallexicalscope (bug 1202902) js_hasextensiblelexicalscope (bug 1202902) js_extensiblelexicalscope (bug 1202902) js_initreflectparse (bug 98
7514) js::toprimitive (bug 1206168) js::getfirstargumentastypehint (bug 1054
756) js::objecttocompletepropertydescriptor (bu...
...And 3 more matches
Setting up the Gecko SDK
you may want to check for newer versions at gecko versions prior to 1.
7: http://ftp.mozilla.org/pub/mozi...illa/releases/ gecko versions after 1.8: http://ftp.mozilla.org/pub/mozi...nner/releases/ once you download the sdk, you can expand it into any convenient location.
...to edit project settings, select settings from the project menu (or press alt-f
7).
... set include=c:\program files\microsoft sdks\windows\v
7.0\include;c:\program files (x86)\microsoft visual studio 9.0\vc\include;d:\projects\xulrunner-sdk\include this sets up the compiler to know where included code files are, it looks in the platform sdk, visual studio 9.0 include (installed with the platform sdk), and the gecko sdk includes.
...And 3 more matches
nsIJSON
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4) note: this interface may only be used from javascript code, with the exception of the legacydecodetojsval() method.
... jsobject decode(in astring str); obsolete since gecko
7.0 jsval decodetojsval(in astring str, in jscontext cx); native code only!
... jsobject decodefromstream(in nsiinputstream stream, in long contentlength); astring encode(in jsobject value); obsolete since gecko
7.0 astring encodefromjsval(in jsvaljsval value, in jscontext cx); native code only!
...And 3 more matches
nsIPromptService
inherits from: nsisupports last changed in gecko 1.
7.5 you can define access keys (or keyboard shortcuts) for buttons by including an ampersand ("&") in front of the character that should be the access key for that button.
... button_title_cancel 2 button_title_yes 3 button_title_no 4 button_title_save 5 button_title_dont_save 6 button_title_revert
7 button_title_is_string 12
7 this flag indicates that the label is passed as a separate string.
... constant value description button_pos_0_default 0 button_pos_1_default 16
777216 button_pos_2_default 33554432 button_delay_enable button_delay_enable causes the buttons to be initially disabled.
...And 3 more matches
Mozilla
integrated authentication this entails support for the the simple and protected gss-api negotiation mechanism (spnego) internet standard (rfc 24
78) to negotiate either kerberos, ntlm, or other authentication protocols supported by the operating system.
... internationalized domain names (idn) support in mozilla browsers netscape
7.1 is the first commercial browser that has built-in support for internationalized domain name under the new ietf rfc's established in 2003.
...for a discussion on extended c++ support see bug 50590
7.
...And 3 more matches
Drawing shapes with canvas - Web APIs
drawing a triangle for example, the code for drawing a triangle would look something like this: <html> <body onload="draw();"> <canvas id="canvas" width="100" height="100"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(
75, 50); ctx.lineto(100,
75); ctx.lineto(100, 25); ctx.fill(); } } the result looks like this: screenshotlive sample moving the pen one very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the moveto() function.
... <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(
75,
75, 50, 0, math.pi * 2, true); // outer circle ctx.moveto(110,
75); ctx.arc(
75,
75, 35, 0, math.pi, false); // mouth (clockwise) ctx.moveto(65, 65); ctx.arc(60, 65, 5, 0, math.pi * 2, true); // left eye ctx.moveto(95, 65); ctx.arc(90, 65, 5, 0, math.pi * 2, true); // right eye ctx.stroke(); } } the result looks like this: screenshotlive sample if you'd like ...
... <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); // quadratric curves example ctx.beginpath(); ctx.moveto(
75, 25); ctx.quadraticcurveto(25, 25, 25, 62.5); ctx.quadraticcurveto(25, 100, 50, 100); ctx.quadraticcurveto(50, 120, 30, 125); ctx.quadraticcurveto(60, 120, 65, 100); ctx.quadraticcurveto(125, 100, 125, 62.5); ctx.quadraticcurveto(125, 25,
75, 25); ctx.stroke(); } } screenshotlive sample cubic bezier curves this example draws a heart using cubic bézier curves.
...And 3 more matches
Using images - Web APIs
var img = new image(); // create new img element img.src = 'data:image/gif;base64,r0lgodlhcwalaiaaaaaa3pn/zih5baeaaaealaaaaaalaasaaaiuha+hkcuo4lmnvindo
7qyrixigbyaow=='; one advantage of data urls is that the resulting image is available immediately without another round trip to the server.
... <html> <body onload="draw();"> <canvas id="canvas" width="180" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(30, 96); ctx.lineto(
70, 66); ctx.lineto(103,
76); ctx.lineto(1
70, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } the resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method adds two new parameters and lets us place scaled images on the canvas.
... id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { for (var i = 0; i < 4; i++) { for (var j = 0; j < 3; j++) { ctx.drawimage(img, j * 50, i * 38, 50, 38); } } }; img.src = 'https://udn.realityripple.com/samples/db/f3
74e9c6fc.jpg'; } the resulting canvas looks like this: screenshotlive sample slicing the third and last variant of the drawimage() method has eight parameters in addition to the image source.
...And 3 more matches
IDBCursorWithValue - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/idbcursor" target="_top"><rect x="1" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,30 9...
...1,25" stroke="#d4dde4" fill="none"/><line x1="101" y1="25" x2="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbcursorwithvaluechrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
...And 3 more matches
MediaDevices.getUserMedia() - Web APIs
the following expresses a preference for 1280x
720 camera resolution: { audio: true, video: { width: 1280, height:
720 } } the browser will try to honour this, but may return other resolutions if an exact match is not available, or the user overrides it.
...the following demands a minimum resolution of 1280x
720: { audio: true, video: { width: { min: 1280 }, height: { min:
720 } } } if no camera exists with this resolution or higher, then the returned promise will be rejected with overconstrainederror, and the user will not be prompted.
...here's a full example: { audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 5
76, ideal:
720, max: 1080 } } } an ideal value, when used, has gravity, which means that the browser will try to find the setting (and camera, if you have more than one), with the smallest fitness distance from the ideal values given.
...And 3 more matches
PhotoCapabilities - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetphotocapabilities experimentalchrome full support 59edge full support ≤
79firefox ?
... samsung internet android full support
7.0filllightmode experimentalchrome full support 59edge full support ≤
79firefox ?
... samsung internet android full support
7.0imageheight experimentalchrome full support 59edge full support ≤
79firefox ?
...And 3 more matches
ScreenOrientation - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support 38edge full support
79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support ...
...port 43opera android full support 25safari ios no support nosamsung internet android full support 3.0anglechrome full support 38edge full support
79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support ...
...pport 43opera android full support 25safari ios no support nosamsung internet android full support 3.0lockchrome full support 38edge full support
79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support ...
...And 3 more matches
Screen Orientation API - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support 38edge full support
79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support ...
...port 43opera android full support 25safari ios no support nosamsung internet android full support 3.0anglechrome full support 38edge full support
79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support ...
...pport 43opera android full support 25safari ios no support nosamsung internet android full support 3.0lockchrome full support 38edge full support
79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support ...
...And 3 more matches
WritableStream - Web APIs
oidopera for androidsafari on iossamsung internetwritablestream experimentalchrome full support 59edge full support 16firefox no support noie no support noopera full support 4
7safari ?
... samsung internet android full support
7.0writablestream() constructor experimentalchrome full support 59edge full support 16firefox no support noie no support noopera full support 4
7safari ?
... samsung internet android full support
7.0abort experimentalchrome full support 59edge full support 16firefox no support noie no support noopera full support 4
7safari ?
...And 3 more matches
ARIA: grid role - Accessibility
"tuesday">t</th> <th role="columnheader" aria-label="wednesday">w</th> <th role="columnheader" aria-label="thursday">t</th> <th role="columnheader" aria-label="friday">f</th> <th role="columnheader" aria-label="saturday">s</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <th scope="row" role="rowheader">week 35</th> <td>26</td> <td>2
7</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td role="gridcell" tabindex="-1">1</td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 36</th> <td role="gridcell" tabindex="-1"> 2 </td> <td role="gridcell" tabindex="-1"> 3 </td> <td role="gridcell" tabindex="-1"> 4 </td> ...
... <td role="gridcell" tabindex="-1"> 5 </td> <td role="gridcell" tabindex="-1"> 6 </td> <td role="gridcell" tabindex="-1">
7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 3
7</th> <td role="gridcell" tabindex="-1"> 9 </td> <td role="gridcell" tabindex="-1"> 10 </td> <td role="gridcell" tabindex="-1"> 11 </td> <td role="gridcell" tabindex="-1"> 12 </td> <td role="gridcell" tabindex="-1"> 13 </td> <td role="gridcell" tabindex="-1"> 14 </td> <td role="gridcell" tabindex="-1"> 15 </td> </tr> <tr rol...
...e="row"> <th scope="row" role="rowheader">week 38</th> <td role="gridcell" tabindex="-1"> 16 </td> <td role="gridcell" tabindex="-1"> 1
7 </td> <td role="gridcell" tabindex="-1"> 18 </td> <td role="gridcell" tabindex="-1"> 19 </td> <td role="gridcell" tabindex="-1"> 20 </td> <td role="gridcell" tabindex="-1"> 21 </td> <td role="gridcell" tabindex="-1"> 22 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 39</th> <td role="gridcell" tabindex="-1"> 23 </td> <td role="gridcell" tabindex="-1"> 24 </td> <td role="gridcell" tabindex="-1"> 25 </td> <td role="gr...
...And 3 more matches
size - CSS: Cascading Style Sheets
a4 this matches the standard, iso dimensions: 210mm x 29
7mm.
... (most frequently used dimensions for personal printing.) a3 this matches the standard, iso dimensions: 29
7mm x 420mm.
... b5 this matches the standard, iso dimensions: 1
76mm x 250mm.
...And 3 more matches
Variable fonts guide - CSS: Cascading Style Sheets
for example: font-variation-settings: 'wght' 3
75, 'grad' 88; wght (weight) is a registered axis, and grad (grade) is a custom one.
...for a long time in css there has existed the ability to specify this via the font-weight property, which takes numeric values ranging from 100 to 900 in increments of 100, and keywords like normal or bold, which are simply aliases for their corresponding numeric values (400 and
700 in this case).
...this can generally be resolved fairly easily, but does require an extra step in writing your css: font-weight: 3
75; font-variation-settings: 'wght' 3
75; the following live example's css can be edited to allow you to play with font weight values.
...And 3 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
in spring of 201
7, we saw for the first time a major specification like grid being shipped into browsers almost simultaneously, and we now have css grid layout support in the public versions of firefox, chrome, opera, safari and edge.
... the float no longer applies, and i can use the css box alignment property align-self to align my content to the end of the container: * {box-sizing: border-box;} img { max-width: 100%; display: block; } .media { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-sel...
...f: end; } <div class="media"> <div class="image"><img src="https://udn.realityripple.com/samples/89/f993f2
73dd.png" alt="placeholder"></div> <div class="text">this is a media object example.
...And 3 more matches
break-before - CSS: Cascading Style Sheets
for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie full support 10opera full support 3
7 full support 3
7 no support 11.1 — 12.1safari no support nowebview android full support 50chrome android full support 50firefox android full support ...
... 65opera android full support 3
7 full support 3
7 no support 11.1 — 12.1safari ios no support nosamsung internet android full support 5.0always experimentalchrome no support noedge no support nofirefox no support noie no support noopera no support nosafari no support nowebview android no support ...
... no support noopera android no support nosafari ios no support nosamsung internet android no support noavoid-columnchrome no support noedge no support 12 —
79firefox no support noie full support 10opera no support nosafari no support nowebview android no support nochrome android no support ...
...And 3 more matches
break-inside - CSS: Cascading Style Sheets
fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p> <figure> <img src="https://udn.realityripple.com/samples/fe/4508d88f
78.png"> <figcaption>the firefox logo — fox wrapped around the world</figcaption> </figure> <p>praesent condimentum dui dui, sit amet rutrum diam tincidunt eu.
...duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } body { width: 80%; margin: 0 auto; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width:
70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem; width:
70%; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-inside' in that specification.
...for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie full support 10opera full support 3
7 full support 3
7 no support 11.1 — 12.1safari full support 10webview android full support 50chrome android full support 50firefox android full support ...
...And 3 more matches
cross-fade() - CSS: Cascading Style Sheets
cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */ cross-fade( url(white.png) 25%, url(black.png)
75%); /* 25% white,
75% black */ cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */ cross-fade( url(white.png)
75%, url(black.png) 25%); /*
75% white, 25% black */ cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */ cross-fade( url(green.png)
75%, url(red.png)
75%); /* both green and red at
75% */ if any percentages are omitted, all the specified per...
...a 25% value renders the first image at 25% and the second at
75%.
... the
75% value is the inverse, showing the first image at
75% and the second at 25%.
...And 3 more matches
font-weight - CSS: Cascading Style Sheets
syntax /* keyword values */ font-weight: normal; font-weight: bold; /* keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight:
700;// bold font-weight: 800; font-weight: 900; /* global values */ font-weight: inherit; font-weight: initial; font-weight: unset; the font-weight property is specified using any one of the values listed below.
...same as
700.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600,
700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
...And 3 more matches
<input type="month"> - HTML: Hypertext Markup Language
you can set a default value for the input control by including a month and year inside the value attribute, like so: <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" value="201
7-06"> one thing to note is that the displayed date format differs from the actual value; most user agents display the month and year in a locale-appropriate form, based on the set locale of the user's operating system, whereas the date value is always formatted yyyy-mm.
... when the above value is submitted to the server, for example, it will look like bday-month=19
78-06.
... you can also get and set the date value in javascript using the htmlinputelement.value property, for example: <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" value="201
7-06"> var monthcontrol = document.queryselector('input[type="month"]'); monthcontrol.value = '19
78-06'; additional attributes in addition to the attributes common to <input> elements, month inputs offer the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the latest year and month to accept as a valid input min the earliest year and month to accept as a valid input readonly a boolean whic...
...And 3 more matches
Evolution of HTTP - HTTP
at this point, a typical request and response looked like this: get /mypage.html http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:31 gmt server: cern/3.0 libwww/2.1
7 content-type: text/html <html> a page with an image <img src="/myimage.gif"> </html> followed by a second connection and request to fetch the image (followed by a response to that request): get /myimage.gif http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:32 gmt server: cern/3.0 libwww/2.1
7 content-type: text/gif (image content) these novelties have no...
...the first standardized version of http, http/1.1 was published in early 199
7, only a few months after http/1.0.
...tel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: wed, 20 jul 2016 10:55:30 gmt etag: "54
7fa
7e369ef56031dd3bff2ace9fc0832eb251a" keep-alive: timeout=5, max=1000 last-modified: tue, 19 jul 2016 00:59:33 gmt server: apache transfer-encoding: chunked vary: cookie, accept-encoding (content) get /static/img/header-background.png http/1.1 host: developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: */* accept-languag...
...And 3 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
t', url); xhr.onreadystatechange = somehandler; xhr.send(); this performs a simple exchange between the client and the server, using cors headers to handle the privileges: let's look at what the browser will send to the server in this case, and let's see how the server responds: get /resources/public-data/ http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:
71.0) gecko/20100101 firefox/
71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example the request header of note is origin, which shows that the invocation is coming from https://foo.example.
...the first exchange is the preflight request/response: options /doc http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:
71.0) gecko/20100101 firefox/
71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: http://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type http/1.1 204 no content date: mon, 01 dec 2008 01:15:39 gmt server: apache/2 access-con...
...s://foo.example access-control-allow-methods: post, get, options access-control-allow-headers: x-pingother, content-type access-control-max-age: 86400 vary: accept-encoding, origin keep-alive: timeout=2, max=100 connection: keep-alive once the preflight request is complete, the real request is sent: post /doc http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:
71.0) gecko/20100101 firefox/
71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive x-pingother: pingpong content-type: text/xml; charset=utf-8 referer: https://foo.example/examples/preflightinvocation.html content-length: 55 origin: https://foo.example pragma: no-cache cache-control: no-cache...
...And 3 more matches
ETag - HTTP
they are a string of ascii characters placed between double quotes, like "6
75af34563dc-tr34".
... examples etag: "33a64df551425fcc55e4d42a148
795d9f25f89d4" etag: w/"0815" avoiding mid-air collisions with the help of the etag and the if-match headers, you can detect mid-air edit collisions.
... for example, when editing mdn, the current wiki content is hashed and put into an etag in the response: etag: "33a64df551425fcc55e4d42a148
795d9f25f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
...And 3 more matches
User-Agent - HTTP
rv:geckoversion indicates the release version of gecko (such as "1
7.0").
...(on desktop, geckotrail is always the fixed string 20100101.) firefox/firefoxversion indicates the browser is firefox, and provides the version (such as "1
7.0").
... examples mozilla/5.0 (windows nt 6.1; win64; x64; rv:4
7.0) gecko/20100101 firefox/4
7.0 mozilla/5.0 (macintosh; intel mac os x x.y; rv:42.0) gecko/20100101 firefox/42.0 chrome ua string the chrome (or chromium/blink-based engines) user agent string is similar to firefox’s.
...And 3 more matches
Proxy Auto-Configuration (PAC) file - HTTP
in chrome (versions 52 to
73), you can disable this by setting pachttpsurlstrippingenabled to false in policy or by launching with the --unsafe-pac-url command-line flag (in chrome
74, only the flag works, and from
75 onward, there is no way to disable path-stripping; as of chrome 81, path-stripping does not apply to http urls, but there is interest in changing this behavior to match https); in firefox, the preference is ne...
... example convert_addr("104.16.41.2"); // returns the decimal number 1
745889538 myipaddress() syntax myipaddress() parameters (none) returns the server ip address of the machine firefox is running on, as a string in the dot-separated integer format.
... example myipaddress() //returns the string "12
7.0.1.1" if you were running firefox on that localhost dnsdomainlevels() syntax dnsdomainlevels(host) parameters host is the hostname from the url.
...And 3 more matches
Expressions and operators - JavaScript
var a1 = true && true; // t && t returns true var a2 = true && false; // t && f returns false var a3 = false && true; // f && t returns false var a4 = false && (3 == 4); // f && f returns false var a5 = 'cat' && 'dog'; // t && t returns dog var a6 = false && 'cat'; // f && t returns false var a
7 = 'cat' && false; // t && f returns false the following code shows examples of the || (logical or) operator.
... var o1 = true || true; // t || t returns true var o2 = false || true; // f || t returns true var o3 = true || false; // t || f returns true var o4 = false || (3 == 4); // f || f returns false var o5 = 'cat' || 'dog'; // t || t returns cat var o6 = false || 'cat'; // f || t returns cat var o
7 = 'cat' || false; // t || f returns cat the following code shows examples of the !
...the code prints the values of the diagonal elements in the array: var x = [0,1,2,3,4,5,6,
7,8,9] var a = [x, x, x, x, x]; for (var i = 0, j = 9; i <= j; i++, j--) // ^ console.log('a[' + i + '][' + j + ']= ' + a[i][j]); unary operators a unary operation is an operation with only one operand.
...And 3 more matches
Intl.NumberFormat() constructor - JavaScript
syntax new intl.numberformat([locales[, options]]) parameters locales optional a string with a bcp 4
7 language tag, or an array of such strings.
...possible values are the iso 421
7 currency codes, such as "usd" for the us dollar, "eur" for the euro, or "cny" for the chinese rmb — see the current currency & funds code list.
...possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso 421
7 currency code list (2 if the list doesn't provide that information).
...And 3 more matches
encodeURIComponent() - JavaScript
urn '%' + c.charcodeat(0).tostring(16); }); } examples encoding for content-disposition and link headers the following example provides the special encoding required within utf-8 content-disposition and link server response header parameters (e.g., utf-8 filenames): var filename = 'my file(2).txt'; var header = "content-disposition: attachment; filename*=utf-8''" + encoderfc598
7valuechars(filename); console.log(header); // logs "content-disposition: attachment; filename*=utf-8''my%20file%282%29.txt" function encoderfc598
7valuechars(str) { return encodeuricomponent(str).
... // note that although rfc3986 reserves "!", rfc598
7 does not, // so we do not need to escape it replace(/['()]/g, escape).
... // i.e., %2
7 %28 %29 replace(/\*/g, '%2a').
...And 3 more matches
<feComposite> - SVG: Scalable Vector Graphics
100" d="m 0 0 l 0 100 l 100 0 z" fill="#ff00ff" /> <path id="blue50" d="m 0 125 l 100 125 l 100 225 z" fill="#00ffff" fill-opacity=".5" /> <path id="red50" d="m 0 125 l 0 225 l 100 125 z" fill="#ff00ff" fill-opacity=".5" /> <g id="twobluetriangles"> <use xlink:href="#blue100"/> <use xlink:href="#blue50"/> </g> <g id="bluetriangles"> <use transform="translate(2
75,25)" xlink:href="#twobluetriangles"/> <use transform="translate(400,25)" xlink:href="#twobluetriangles"/> <use transform="translate(525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform="translate(
775,25)" xlink:href="#twobluetriangles"/> <use transform="translate(900,25)" xlink:href="#twobluetri...
...angles"/> </g> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> <g font-family="verdana" font-size="40" shape-rendering="crispedges"> <desc>render the examples using the filters that draw on top of an opaque white surface, thus obliterating the background.</desc> <g enable-background="new"> <text x="15" y="
75">opacity 1.0</text> <text x="15" y="115" font-size="2
7">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="2
7">(with feflood)</text> <use xlink:href="#bluetriangles"/> <g transform="translate(2
75,25)"> <use xlink:href="#red100" filter="url(#overflood)" /> <use xlink:href="#red50" filter="url(#overflood)" /> <text x="5" y="2
75...
...">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="url(#inflood)" /> <use xlink:href="#red50" filter="url(#inflood)" /> <text x="35" y="2
75">in</text> </g> <g transform="translate(525,25)"> <use xlink:href="#red100" filter="url(#outflood)" /> <use xlink:href="#red50" filter="url(#outflood)" /> <text x="15" y="2
75">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#red100" filter="url(#atopflood)" /> <use xlink:href="#red50" filter="url(#atopflood)" /> <text x="10" y="2
75">atop</text> </g> <g transform="translate(
775,25)"> <use xlink:href="#red100" filter="url(#xorflood)" /> <use xlink:href="#red50" filter...
...And 3 more matches
Basic shapes - SVG: Scalable Vector Graphics
ode to generate that looks something like: <?xml version="1.0" standalone="no"?> <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="
75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="
75" cy="
75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/> <polyline points="60 110 65 120
70 115
75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 ...
...160 55 180
70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="m20,230 q40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> </svg> note: the stroke, stroke-width, and fill attributes are explained later in the tutorial.
... <circle cx="25" cy="
75" r="20"/> r the radius of the circle.
...And 3 more matches
Using templates and slots - Web Components
p { color: white; background-color: #666; padding: 5px; } </style> <p>my paragraph</p> </template> now we can use it by just adding it to our html document: <my-paragraph></my-paragraph> note: templates are well-supported in browsers; the shadow dom api is supported by default in firefox (version 63 onwards), chrome, opera, safari, and edge (starting with version
79).
...this has more limited support than <template>, available since chrome 53, opera 40, safari 10, firefox 59, and edge
79.
... creating a template with some slots first of all, we use the <slot> element within a <template> element to create a new "element-details-template" document fragment containing some named slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #21
7ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span { background: #21
7ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot na...
...And 3 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
q> <!-- each li is a different version of the same add-on --> <rdf:li> <rdf:description> <em:version>2.2</em:version> <!-- this is the version number of the add-on --> <!-- one targetapplication for each application the add-on is compatible with --> <em:targetapplication> <rdf:description> <em:id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <!-- this is where this version of the add-on will be downloaded from --> <em:updatelink>https://www.mysite.com/foobar2.2.xpi</em:updatelink> <!-- a page describing what is new in this updated version --> ...
... <em:updateinfourl>http://www.mysite.com/updateinfo2.2.xhtml</em:updateinfourl> </rdf:description> </em:targetapplication> </rdf:description> </rdf:li> <rdf:li> <rdf:description> <em:version>2.5</em:version> <em:targetapplication> <rdf:description> <em:id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <em:updatelink>http://www.mysite.com/foobar2.5.xpi</em:updatelink> <em:updatehash>sha256:
78fc1d288
7eda35b4ad2e3a0b60120ca2
71ce6e64ad2e3a0b60120ca2
71ce6e6</em:updatehash> </rdf:description> </em:targetapp...
...--> <em:signature>migtma0gcsqgsib3dqebbquaa4gbamo1o2gwsccth1gwymgscfanakpn40pjfowt ub2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi
7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> </rdf:rdf> some people prefer this alternate format (note that much of the information has been trimmed from this example for brevity in order to show the basic structure): <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" ...
...And 2 more matches
Install Manifests - Archive of obsolete content
examples <em:id>extensionname@example.org</em:id> <em:id>{daf44bf
7-a45e-4450-9
79c-91cf0
7434c3d}</em:id> name the name of the add-on; intended for display in the ui.
... examples <em:targetapplication> <description> <em:id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</em:id> <!--firefox--> <em:minversion>1.5</em:minversion> <em:maxversion>3.0.*</em:maxversion> </description> </em:targetapplication> gecko 1.9 based applications allow you to use the special targetapplication id toolkit@mozilla.org to say that the add-on is compatible with any toolkit app with a toolkit version matching the minversion and maxversion.
... <em:optionstype>2</em:optionstype> options can be opened in a new tab since firefox
7.0a1.
...And 2 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
this document was authored by yutaka kachi and was originally published in japanese for the firefox developers conference summer 200
7.
...(matsumoto updated his free software license diagnostic for a special open-source section in the january 200
7 edition of softbank’s open source magazine.) if a company is considering releasing its own software as open source, it should consider dual-licensing or the cpl.
...draft 1 was first circulated in september 2006, and after four drafts, it was published in june 200
7.
...And 2 more matches
Defining Cross-Browser Tooltips - Archive of obsolete content
the classic example is a "tooltip" of an image; when the user pauses the mouse pointer over an image, the contents of the alt attribute are displayed as a "tooltip." gecko-based browsers such as mozilla, netscape 6+, and compuserve
7 do not support this behavior.
... see bug 2553
7 for a lengthy, sometimes passionate discussion of gecko's behavior in this regard.
...bug 2553
7#c
73, which is to run a proxy server that rewrites html source on the fly, as it is sent to the user.
...And 2 more matches
Autodial for Windows NT - Archive of obsolete content
starting in mozilla 1.1, autodial is triggered whenever an address can't be reached (mozilla now mimics the remote access autodial service.) see bug 160846, bug 16
7624, and bug 160846.
...a parallel feature has been requested in bug 130
774: if we trigger the autodial connection, we should ask the user if he wants to hang up the connection when we close mozilla.
...since the feature was implemented close to the release of netscape
7, the pref was added so that we could include the feature in the
7.0 release with the feature turned off and enable it in specific cases.
...And 2 more matches
jspage - Archive of obsolete content
var mootools={version:"1.2.4",build:"0d9113241a90b9cd5643b926
795852a2026
710d4"};var native=function(k){k=k||{};var a=k.name;var i=k.legacy;var b=k.protect; var c=k.implement;var h=k.generics;var f=k.initialize;var g=k.afterimplement||function(){};var d=f||i;h=h!==false;d.constructor=native;d.$family={name:"native"}; if(i&&f){d.prototype=i.prototype;}d.prototype.constructor=d;if(a){var e=a.tolowercase();d.prototype.$family={name:e};native.typize(d,e);}var j=function(n,l,o,m){if(!b||m||!n.prototype[l]){n.prototype[l]=o; }if(h){native.genericize(n,l,b);}g.call(n,l,o);return n;};d.alias=function(n,l,p){if(typeof n=="string"){var o=this.prototype[n];if((n=o)){return j(this,l,n,p); }}for(var m in n){this.alias(m,n[m],l);}return this;};d.implement=function(m,l,o){if(typeof m=="string"){ret...
..."mouseout":l=a.relatedtarget||a.toelement;}if(!(function(){while(l&&l.nodetype==3){l=l.parentnode;}return true;}).create({attempt:browser.engine.gecko})()){l=false; }}}}return $extend(this,{event:a,type:j,page:i,client:c,rightclick:e,wheel:h,relatedtarget:l,target:g,code:b,key:m,shift:a.shiftkey,control:a.ctrlkey,alt:a.altkey,meta:a.metakey}); }});event.keys=new hash({enter:13,up:38,down:40,left:3
7,right:39,esc:2
7,space:32,backspace:8,tab:9,"delete":46});event.implement({stop:function(){return this.stoppropagation().preventdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}else{this.event.cancelbubble=true;}return this;},preventdefault:function(){if(this.event.preventdefault){this.event.preventdefault(); }else{this.event.returnvalue=false;}r...
...al:"index"};break;case"last":e={special:"last-child"};break;case"only":e={special:"only-child"}; break;default:e={a:(d-1),special:"index"};}return selectors.cache.nth[h]=e;},parseselector:function(e){if(selectors.cache.parsed[e]){return selectors.cache.parsed[e]; }var d,h={classes:[],pseudos:[],attributes:[]};while((d=selectors.regexps.combined.exec(e))){var i=d[1],g=d[2],f=d[3],b=d[5],c=d[6],j=d[
7];if(i){h.classes.push(i); }else{if(c){var a=selectors.pseudo.get(c);if(a){h.pseudos.push({parser:a,argument:j});}else{h.attributes.push({name:c,operator:"=",value:j});}}else{if(g){h.attributes.push({name:g,operator:f,value:b}); }}}}if(!h.classes.length){delete h.classes;}if(!h.attributes.length){delete h.attributes;}if(!h.pseudos.length){delete h.pseudos;}if(!h.classes&&!h.attributes&&!h.pseudos)...
...And 2 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
value description 1 element node 2 attribute node 3 text node 4 cdata section node 5 entity reference node 6 entity node
7 processing instruction node 8 comment node 9 document node 10 document type node 11 document fragment node 12 notation node nodevalue returns the value of the current node.
...the error message in figure 1 says that at aol.com, line 95 tries to access an undefined variable called is_ns
70.
...since version
7 ie also supports the "native" xmlhttprequest object.
...And 2 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
xpinstall is a javascript-based installer technology that works across all the platforms that mozilla and netscape browsers based on mozilla (such as netscape
7) are deployed.
...in particular, this includes: recent netscape browsers such as netscape 6.2.x and netscape
7.0, which are both based on netscape gecko, which is at the core of the mozilla browser recent beta-only versions of the aol software based on netscape gecko, the layout engine of the mozilla project.
...examples would be flash 6r4
7 on windows, which consists of a dll (called npswf32.dll) and an xpt file for scriptability (called flashplayer.xpt).
...And 2 more matches
Tree Selection - Archive of obsolete content
the first selected row has an index of 4 and the second has an index of
7.
...here is an example which selects rows between index 2 and
7.
... note that rows 2 and
7 will also be selected.
...And 2 more matches
2006-11-10 - Archive of obsolete content
publication for the first issue is expected in fall 200
7.
... w4a 200
7 first call for papers the fourth international cross-disciplinary cofnerence on web accessibility (w4a 200
7) co-located with the sixteenth international world wide web conference (www200
7), in banff, canada.
... important dates: technical submissions: monday 19th feb 200
7 technical paper notification: friday 16th march 200
7 communication submissions: monday 26th march 200
7 communication paper notification: friday 06th april 200
7 all camera ready due: monday 16th april 200
7 conference dates: monday 0
7th and tuesday 08th may 200
7 notable keynotes representatives from w3c, ibm, university of manchester, uk and oxford brookes university, uk.
...And 2 more matches
New in JavaScript - Archive of obsolete content
ecmascript next support implementation status for upcoming ecma-262 features as per the yearly (es2016/es201
7/es2018/...) release schedule in mozilla-based engines and products.
...released on june 11, 199
7.
... javascript 1.3 version shipped in netscape navigator 4.06-4.
7x.
...And 2 more matches
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
learn how to correctly size list item markers in gecko 0.9.4, the basis of netscape 6.2.x and compuserve
7.
...while this bug was corrected shortly after 0.9.4 was finished, the bug still affects all netscape 6.2.x versions, as well as compuserve
7.0.
...see bug 9
7351 for more details.
...And 2 more matches
Building up a basic demo with Three.js - Game development
the following lines put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(
70, width/height); camera.position.z = 50; scene.add(camera); add the above lines to your code, below those previously added.
...let's explain values we are setting for the code above: the value we set for the field of view,
70, is something we can experiment with: the higher the value, the greater the amount of scene the camera will show.
... var torusgeometry = new three.torusgeometry(
7, 1, 6, 12); var phongmaterial = new three.meshphongmaterial({color: 0xff9500}); var torus = new three.mesh(torusgeometry, phongmaterial); scene.add(torus); these lines will add a torus geometry; the torusgeometry() method's parameters define, and the parameters are radius, tube diameter, radial segment count, and tubular segment count.
...And 2 more matches
CSS values and units - Learn web development
in the following example we have set the color of our heading using a keyword, and the background using the rgb() function: h1 { color: black; background-color: rgb(19
7,93,161); } a value in css is a way to define a collection of allowable sub-values.
... unit name equivalent to cm centimeters 1cm = 96px/2.54 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/40th of 1cm in inches 1in = 2.54cm = 96px pc picas 1pc = 1/6th of 1in pt points 1pt = 1/
72th of 1in px pixels 1px = 1/96th of 1in most of these values are more useful when used for print, rather than screen output.
... the standard color system available in modern computers is 24 bit, which allows the display of about 16.
7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,
777,216.) let's have a look at some of the ways in which we can specify colors in css.
...And 2 more matches
What text editors are available? - Learn web development
s, mac, linux forum, irc github wiki yes coda closed source $99 mac twitter, forum, e-mail ebook yes codelobster closed source free windows, mac, linux forum, e-mail no end user doc yes emacs gpl 3 free windows, mac, linux faq, mailing list, news group online manual yes espresso closed source $
75 mac faq, e-mail no end user doc, but plug-in doc yes gedit gpl free windows, mac, linux mailing list, irc online manual yes kate lgpl, gpl free windows, mac, linux mailing list, irc online manual yes komodo edit mpl free windows, mac, linux forum online manual yes notepad++ gpl free ...
... windows forum wiki yes pspad closed source free windows faq, forum online help yes sublime text closed source $
70 windows, mac, linux forum official, unofficial yes textmate closed source $50 mac twitter, irc, mailing list, e-mail online manual, wiki yes textwrangler closed source free mac faq, forum pdf manual no vim specific open license free windows, mac, linux mailing list online manual yes visual studio code open source under mit licence/ specific licence for product free windows, mac, linux faq documentation yes active learning in this active learning section, we would like you to try using and/or insta...
...most editors specify on their website whether they support windows or mac, though some editors only support certain versions (say, only windows
7 or later and not vista).
...And 2 more matches
Basic native form controls - Learn web development
the following screenshot shows default, focused and disabled text input types in firefox
71 and safari on macos and in chrome
79 and edge 18 on windows 10.
... <input type="hidden" id="timestamp" name="timestamp" value="1286
705410"> if you create such an element, it's required to set its name and value attributes.
... the following screenshots show default, focused and disabled checkboxes in firefox
71 and safari 13 on macos and chrome
79 and edge 18 on windows 10: note: any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class, even if they are no longer checked.
...And 2 more matches
HTML table basics - Learn web development
name mass (1024kg) diameter (km) density (kg/m3) gravity (m/s2) length of day (hours) distance from sun (106km) mean temperature (°c) number of moons notes terrestial planets mercury 0.330 4,8
79 542
7 3.
7 4222.6 5
7.9 16
7 0 closest to the sun venus 4.8
7 12,104 5243 8.9 2802.0 108.2 464 0 earth 5.9
7 12,
756 5514 9.8 24.0 149.6 15 1 our world mars 0.642 6,
792 3933 3.
7 24.
7 22
7.9 -65 2 the red planet jovian planets gas giants jupiter 1898 142,9...
...84 1326 23.1 9.9
778.6 -110 6
7 the largest planet saturn 568 120,536 68
7 9.0 10.
7 1433.5 -140 62 ice giants uranus 86.8 51,118 12
71 8.
7 1
7.2 28
72.5 -195 2
7 neptune 102 49,528 1638 11.0 16.1 4495.1 -200 14 dwarf planets pluto 0.0146 2,3
70 2095 0.
7 153.3 5906.4 -225 5 declassified as a planet in 2006, but this remains controversial.
...the value for your style attribute is background-color:#9
7db9a; set a separate width on the fourth column.
...And 2 more matches
Working with Svelte stores - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494366b1
79c8
7395940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and events.
...value) ondestroy(unsubscribe) </script> {#if alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.8
75rem; font-weight:
700; padding: 0.5rem 1.4rem; font-size: 1.5rem; z-index: 100; opacity: 95%; } div p { color: #fff; } div svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right: 0.5rem; } </style> let's walk through this piece of code in detail.
...ms) // whenever the alert store or the ms props changes run onmessagechange ondestroy(()=> cleartimeout(timeout)) // make sure we clean-up the timeout </script> and update the alert.svelte markup section like so: {#if visible} <div on:click={() => visible = false}> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="m12.432 0c1.34 0 2.01.912 2.01 1.95
7 0 1.305-1.164 2.512-2.6
79 2.512-1.269 0-2.009-.
75-1.9
74-1.99c9.
789 1.436 10.6
7 0 12.432 0zm8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.31
7 0-1.689.562-2.502 1.11
7l-.528-.88c2.5
72-2.186 5.531-3.46
7 6.801-3.46
7 1.05
7 0 1.233 1.2
73.
705 3.23l-1.391 5.352c-.246.945-.141 1.2
71.106 1.2
71.31
7 0 1.35
7-.392 2.3
79-1.20
7l.6.814c12.098 19.02 9.365 20 8.309 20z"/></svg> ...
...And 2 more matches
Index
6
75 creating an appealing add-on listing add-ons, beginner, guide, webextension, publishing there are two essential steps to getting people to use your add-on: they need to discover your add-on and open the listing page, then the listing page needs to encourage them to click the add to firefox button.
... 6
76 index add-ons, glossary, guide, index found 689 pages: 6
77 signing and distributing your add-on add-ons, extensions, webextensions, distribution, publication, reviews, signing add-ons need to be signed before they can be installed into release and beta versions of firefox.
... 6
78 make money from browser extensions guide, monetization, webextensions, distribution while users can download browser extensions for firefox free of cost from addons.mozilla.org (amo), this doesn’t mean you can’t make money from browser extensions, and to a more limited extent themes.
...And 2 more matches
Creating a Firefox sidebar
it's the easiest way to create an extension with a sidebar.obsolete since gecko 5
7 you can also build a restartless extension yourself without the sdk.
... a sample extension to add a web panel is available as a starter.obsolete since gecko 5
7 if you'd like to have a deeper integration with the browser to offer more complex features, a traditional overlay extension can be an option.
... the document might be obsolete, though.obsolete since gecko 5
7 the social api obsolete since gecko 5
7 (firefox 5
7 / thunderbird 5
7 / seamonkey 2.54)this feature is obsolete.
...And 2 more matches
How Mozilla's build system works
finished reading 1096 moz.build files into 12
76 descriptors in 2.40s backend executed in 2.39s 2188 total backend files.
... 0 created; 1 updated; 218
7 unchanged total wall time: 5.03s; cpu time: 3.
79s; efficiency:
75% what this is saying is that a total of 1,096 moz.build files were read.
... altogether, 1,2
76 data structures describing the build configuration were derived from them.
...And 2 more matches
Eclipse CDT
to tab to another view, use cmd-f
7/ctrl-f
7.
...(having to move the mouse slightly is eclipse bug 268
73).
...(update 201
7-03-28: the option index all header variants has been added in version 8.3.0, as explained in a comment of the mentioned bug.
...And 2 more matches
Index
found 1
72 pages: # page tags and summary 1 firefox firefox, landing, mozilla here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the developer tools in firefox, and other topics.
...it became a requirement for building gecko in february 201
7 with firefox 54.
... 1
70 storage access policy: block cookies from trackers privacy, storage access policy, tracking protection firefox includes a new storage access policy that blocks cookies and other site data from third-party tracking resources.
...And 2 more matches
How to implement a custom autocomplete search component
const ci = components.interfaces; const cu = components.utils; cu.import('resource://gre/modules/xpcomutils.jsm'); const class_id = components.id('x
753d830-ba1e-11e0-962b-0800200c9a66'); // ← change this const class_name = "basic autocomplete"; const contract_id = '@mozilla.org/autocomplete/search;1?name=basic-autocomplete'; /** * @constructor * * @implements {nsiautocompleteresult} * * @param {string} searchstring * @param {number} searchresult * @param {number} defaultindex * @param {string} errordescription * @param {array.<stri...
...to do so put the following declaration in your chrome.manifest file: component {x
753d830-ba1e-11e0-962b-0800200c9a66} components/basic_autocomplete.js contract @mozilla.org/autocomplete/search;1?name=basic-autocomplete {x
753d830-ba1e-11e0-962b-0800200c9a66} and finally use this newly available component in a xul file like this: <textbox id="text1" type="autocomplete" autocompletesearch="basic-autocomplete"/> that's it!
... const ci = components.interfaces; const class_id = components.id("6224daa1-
71x2-4d1a-ad90-01ca1c08e323"); // ← change this const class_name = "simple autocomplete"; const contract_id = "@mozilla.org/autocomplete/search;1?name=simple-autocomplete"; // implements nsiautocompleteresult function simpleautocompleteresult(searchstring, searchresult, defaultindex, errordescription, results, comments) { this...
...And 2 more matches
Fonts for Mozilla 2.0's MathML engine
note: these instructions are for gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) until gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.2
7).
... on mac os x lion (10.
7) and higher versions, stix fonts are already installed and can be used for mathml.
...starting in gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4), mozilla can also use the glyphs contained in that font for stretchy operators.
...And 2 more matches
MathML Demo: <mtable> - tables and matrices
1 22 333 4444 x 55555 666666 a b c
7777777 11 ...--- , cols arg is "|r|c|l|", \hline's above and below.
... 1 22 333 4444 x 55555 lim n→∞ f-1 ⋃ i=1 n ai rowspan=2 here xn + yn n columnspan=2 here
7777777 11 ...--- , columnlines="solid", rowlines="dashed solid dashed".
... 1 22 333 4444 55555 x + 1 666666 a b c
7777777 11 cols arg is"r|c:l".
...And 2 more matches
Mozilla Port Blocking
background on 08/15/2001, cert issued a vulnerability note vu#4
7626
7 for a "cross-protocol" scripting attack, known as the html form protocol attack which allowed sending arbitrary data to most tcp ports.
...enabling ports user_pref("network.security.ports.banned.override, "port1,port2"); disabling ports user_pref("network.security.ports.banned", "port3,port4"); blocked ports ports blocked by default in mozilla: port service 1 tcpmux
7 echo 9 discard 11 systat 13 daytime 15 netstat 1
7 qotd 19 chargen 20 ftp data 21 ftp control 22 ssh 23 telnet 25 smtp 3
7 time 42 name 43 nicname 53 domain
77 priv-rjs
79 finger 8
7 ...
...ttylink 95 supdup 101 hostriame 102 iso-tsap 103 gppitnp 104 acr-nema 109 pop2 110 pop3 111 sunrpc 113 auth 115 sftp 11
7 uucp-path 119 nntp 123 ntp 135 loc-srv / epmap 139 netbios 143 imap2 1
79 bgp 389 ldap 465 smtp+ssl 512 print / exec 513 login 514 shell 515 printer 526 tempo 530 courier 531 chat 532 netnews 540 uucp 556 remotefs 563 nntp+ssl 58
7 submission 601 syslog 636 ldap+ssl 993 ima...
...And 2 more matches
Leak-hunting strategies and tips
--jesse) dropping a reference on the floor by: forgetting to release (because you weren't using nscomptr when you should have been): see bug 99180 or bug 9308
7 for an example or bug 28555 for a slightly more interesting one.
...see bug
76091 or bug 49648 for an example.
...(this can happen equally with or without nscomptr.) see bug 38586 and bug 28
784
7 for examples.
...And 2 more matches
NSS Certificate Download Specification
pkcs#
7 certificate chain: this is a single pkcs#
7 signeddata object.
... netscape certificate sequence: this is another pkcs#
7 object format, and like the signeddata format, it allows multiple certificates to be imported together.
... this format is simpler than the pkcs#
7 signeddata object format.
...And 2 more matches
NSS 3.15.1 release notes
bug 8
75156 - add const to the function arguments of sec_certnicknameconflict.
... bug 8
77798 - fix ssltap to print the certificate_status handshake message correctly.
... bug 8
75601 - secmod_closeuserdb/secmod_openuserdb fails to reset the token delay, leading to spurious failures.
...And 2 more matches
NSS 3.16 release notes
see the last bullet point in rfc 6125, section
7.2.
... bug 962
760: libpkix should not include the common name of ca as dns names when evaluating name constraints.
... bug 9811
70: aeskeywrap_decrypt should not return secsuccess for invalid keys.
...And 2 more matches
NSS 3.28.1 release notes
notable changes in nss 3.28.1 the following ca certificates were removed cn = buypass class 2 ca 1 sha-256 fingerprint: 0f:4e:9c:dd:26:4b:02:55:50:d1:
70:80:63:40:21:4f:e9:44:34:c9:b0:2f:69:
7e:c
7:10:fc:5f:ea:fb:5e:38 cn = root ca generalitat valenciana sha-256 fingerprint: 8c:4e:df:d0:43:48:f3:22:96:9e:
7e:29:a4:cd:4d:ca:00:46:55:06:1c:16:e1:b0:
76:42:2e:f3:42:ad:63:0e ou = rsa security 2048 v3 sha-256 fingerprint: af:8b:6
7:62:a1:e5:28:22:81:61:a9:5d:5c:55:9e:e2:66:2
7:8f:
75:d
7:9e:83:01:89:a5:03:50:6a:bd:6...
...b:4c the following ca certificates were added ou = ac raiz fnmt-rcm sha-256 fingerprint: eb:c5:5
7:0c:29:01:8c:4d:6
7:b1:aa:12:
7b:af:12:f
7:03:b4:61:1e:bc:1
7:b
7:da:b5:5
7:38:94:1
7:9b:93:fa cn = amazon root ca 1 sha-256 fingerprint: 8e:cd:e6:88:4f:3d:8
7:b1:12:5b:a3:1a:c3:fc:b1:3d:
70:16:de:
7f:5
7:cc:90:4f:e1:cb:9
7:c6:ae:98:19:6e cn = amazon root ca 2 sha-256 fingerprint: 1b:a5:b2:aa:8c:65:40:1a:82:96:01:18:f8:0b:ec:4f:62:30:4d:83:ce:c4:
71:3a:19:c3:9c:01:1e:a4:6d:b4 cn = amazon root ca 3 sha-256 fingerprint: 18:ce:6c:fe:
7b:f1:4e:60:b2:e3:4
7:b8:df:e8:68:cb:31:d0:2e:bb:3a:da:2
7:15:69:f5:03:43:b4:6d:b3:a4 cn = amazon root ca 4 sha-256 fingerprint: e3:5d:28:41:9e:d0:20:25:cf:a6:90:38:c...
...d:62:39:62:45:8d:a5:c6:95:fb:de:a3:c2:2b:0b:fb:25:89:
70:92 cn = luxtrust global root 2 sha-256 fingerprint: 54:45:5f:
71:29:c2:0b:14:4
7:c4:18:f9:9
7:16:8f:24:c5:8f:c5:02:3b:f5:da:5b:e2:eb:6e:1d:d8:90:2e:d5 cn = symantec class 1 public primary certification authority - g4 sha-256 fingerprint: 36:3f:3c:84:9e:ab:03:b0:a2:a0:f6:36:d
7:b8:6d:04:d3:ac:
7f:cf:e2:6a:0a:91:21:ab:9
7:95:f6:e1:
76:df cn = symantec class 1 public primary certification authority - g6 sha-256 fingerprint: 9d:19:0b:2e:31:45:66:68:5b:e8:a8:89:e2:
7a:a8:c
7:d
7:ae:1d:8a:ad:db:a3:c1:ec:f9:d2:48:63:cd:34:b9 cn = symantec class 2 public primary certification authority - g4 sha-256 fingerprint: fe:86:3d:08:22:fe:
7a:23:53:fa:48:4d:59:24:e8:
75:65:6d:3d...
...And 2 more matches
NSS 3.32 release notes
cn = addtrust class 1 ca root sha-256 fingerprint: 8c:
72:09:2
7:9a:c0:4e:2
7:5e:16:d0:
7f:d3:b
7:
75:e8:01:54:b5:96:80:46:e3:1f:52:dd:25:
76:63:24:e9:a
7 cn = swisscom root ca 2 sha-256 fingerprint: f0:9b:12:2c:
71:14:f4:a0:9b:d4:ea:4f:4a:99:d5:58:b4:6e:4c:25:cd:81:14:0d:29:c0:56:13:91:4c:38:41 the following ca certificates were removed: cn = addtrust public ca root sha-256 fingerprint: 0
7:91:ca:0
7:49:b2:0
7...
...:82:aa:d3:c
7:d
7:bd:0c:df:c9:48:58:35:84:3e:b2:d
7:99:60:09:ce:43:ab:6c:69:2
7 cn = addtrust qualified ca root sha-256 fingerprint: 80:95:21:08:05:db:4b:bc:35:5e:44:28:d8:fd:6e:c2:cd:e3:ab:5f:b9:
7a:99:42:98:8e:b8:f4:dc:d0:60:16 cn = china internet network information center ev certificates root sha-256 fingerprint: 1c:01:c6:f4:db:b2:fe:fc:22:55:8b:2b:ca:32:56:3f:49:84:4a:cf:c3:2b:
7b:e4:b0:ff:59:9f:9e:8c:
7a:f
7 cn = cnnic root sha-256 fingerprint: e2:83:93:
77:3d:a8:45:a6:
79:f2:08:0c:c
7:fb:44:a3:b
7:a1:c3:
79:2c:b
7:eb:
77:29:fd:cb:6a:8d:99:ae:a
7 cn = comsign secured ca sha-256 fingerprint: 50:
79:41:c
7:44:60:a0:b4:
70:86:22:0d:4e:99:32:5
7:2a:b5:d1:b5:bb:cb:89:80:ab:1c:b1:
76:51:a8:44:d2 cn = geotrust glo...
...bal ca 2 sha-256 fingerprint: ca:2d:82:a0:86:
77:0
7:2f:8a:b6:
76:4f:f0:35:6
7:6c:fe:3e:5e:32:5e:01:21:
72:df:3f:92:09:6d:b
7:9b:85 cn = secure certificate services sha-256 fingerprint: bd:81:ce:3b:4f:65:91:d1:1a:6
7:b5:fc:
7a:4
7:fd:ef:25:52:1b:f9:aa:4e:18:b9:e3:df:2e:34:a
7:80:3b:e8 cn = swisscom root ca 1 sha-256 fingerprint: 21:db:20:12:36:60:bb:2e:d4:18:20:5d:a1:1e:e
7:a8:5a:65:e2:bc:6e:55:b5:af:
7e:
78:99:c8:a2:66:d9:2e cn = swisscom root ev ca 2 sha-256 fingerprint: d9:5f:ea:3c:a4:ee:dc:e
7:4c:d
7:6e:
75:fc:6d:1f:f6:2c:44:1f:0f:a8:bc:
77:f0:34:b1:9e:5d:b2:58:01:5d cn = trusted certificate services sha-256 fingerprint: 3f:06:e5:56:81:d4:96:f5:be:16:9e:b5:38:9f:9f:2b:8f:f6:1e:1
7:08:df:68:81:
72:48:49:cd:5d:...
...And 2 more matches
NSS 3.41 release notes
introduction the nss team has released network security services (nss) 3.41 on
7 december 2018, which is a minor release.
... bug 1493215 - enabled the following ciphersuites by default: tls_ecdhe_ecdsa_with_aes_256_gcm_sha384 tls_ecdhe_rsa_with_aes_256_gcm_sha384 tls_dhe_rsa_with_aes_256_gcm_sha384 tls_rsa_with_aes_256_gcm_sha384 new functions none notable changes in nss 3.41 the following ca certificates were added: cn = certigna root ca sha-256 fingerprint: d48d3d23eedb50a459e5519
7601c2
7774b9d
7b18c94d5a059511a10250b93168 cn = gts root r1 sha-256 fingerprint: 2a5
754
71e31340bc21581cbd2cf13e158463203ece94bcf9d3cc196bf09a54
72 cn = gts root r2 sha-256 fingerprint: c45d
7bb08e6d6
7e62e4235110b564e5f
78fd92ef058c840aea4e6455d
7585c60 cn = gts root r3 sha-256 fingerprint: 15d5b8
774619ea
7d54ce1ca6d0b0c403e03
7a91
7f131e8a04e1e6b
7a
71babce5 ...
...cn = gts root r4 sha-256 fingerprint:
71cca5391f9e
794b04802530b363e121da8a3043bb26662fea4dca
7fc951a4bd cn = uca global g2 root sha-256 fingerprint: 9bea11c9
76fe014
764c1be56a6f914b5a56031
7abd9988393382e5161aa0493c cn = uca extended validation root sha-256 fingerprint: d43af9b354
73
755c9684fc06d
7d8cb
70ee5c28e
773fb294eb41ee
71
722924d24 the following ca certificates were removed: cn = ac raíz certicámara s.a.
...And 2 more matches
NSS tools : pk12util
return codes o 0 - no error o 1 - user cancelled o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11 get slot error o 14 - pkcs12 decoder start error o 15 - error read from import file o 16 - pkcs12 decode error o 1
7 - pkcs12 decoder verify error o 18 - pkcs12 decoder validate bags error o 19 - pkcs12 decoder import bags error o 20 - key db conversion version 3 to version 2 error o 21 - cert db conversion version
7 to version 5 error o 22 - cert and key dbs patch error o 23 - get default cert db error o 24 - find cert by nickname error o 25 - create export context error o 26 - pkcs12 add password ite...
...grity error o 2
7 - cert and key safes creation error o 28 - pkcs12 add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token).
...id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 45:2e:6a:a0:03:4d:
7b:a1:63:3c:15:ea:6
7:3
7:62:1f iteration count: 1 (0x1) certificate: data: version: 3 (0x2) serial number: 13 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services division,o=thawte consulting,l=cape t own,st=western cape,c=za" alternatively, the -r prints the certificates and then expo...
...And 2 more matches
Tutorial: Embedding Rhino
here's an example use of runscript from a shell command line: $ java runscript "math.cos(math.pi)" -1 $ java runscript "function f(x){return x+1} f(
7)" 8 note that you'll have to have both the rhino classes and the runscript example class file in the classpath.
...for example, $ java runscript3 "x =
7" x =
7 f is undefined or not a function.
...(note that because the java -jar option preempts the rest of the classpath, we can't use that and access the counter class.) $ java -cp "js.jar;examples" org.mozilla.javascript.tools.shell.main js> defineclass("counter") js> c = new counter(
7) [object counter] js> c.count
7 js> c.count 8 js> c.count 9 js> c.resetcount() js> c.count 0 counter's constructors the zero-argument constructor is used by rhino runtime to create instances.
...And 2 more matches
Rhino shell
the string versionnumber must be one of 100, 110, 120, 130, 140, 150, 160 or 1
70.
...starting with rhino 1.
7 this options is no longer available.
...if an argument is supplied, it is expected to be one of 100, 110, 120, 130, 140, 150, 160 or 1
70 to indicate javascript version 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 or 1.
7 respectively.
...And 2 more matches
SpiderMonkey Internals
nan-boxing is a technique based on the fact that in ieee-
754 there are 2**53-2 different bit patterns that all represent nan.
...instead, we use "punboxing", which has 1
7 bits of tag and 4
7 bits of payload.
... self-hosting of built-in functions in js starting with firefox 1
7, spidermonkey has the ability to implement built-in functions in self-hosted js code.
...And 2 more matches
Introduction to the JavaScript shell
note: starting with spidermonkey 44 (firefox 44 / thunderbird 44 / seamonkey 2.41), the standard, web-compatible javascript version is used by default (and not js1.
7+ anymore).
...this may be useful for gaining access to syntax only available in certain versions of javascript (for example, see using javascript 1.
7).
... for example, if you enter the javascript function below: function test() { var i = 3; print(i+2); } then run the command dis(test);, you get this output: main: 00000: uint16 3 00003: setvar 0 00006: pop 0000
7: name "print" 00010: pushobj 00011: getvar 0 00014: uint16 2 0001
7: add 00018: call 1 00021: pop 00022: stop source notes: 0: 0 [ 0] newline 1: 3 [ 3] decl offset 0 2:
7 [ 4] newline 3: 18 [ 11] xdelta 4: 18 [ 0] pcbase offset 11 dissrc([function]) disassembles the javascript bytecode for the entire program, or for the specified function, sho...
...And 2 more matches
JSClass.flags
mxr id search for jsclass_private_is_nsisupports jsclass_is_domjsclass added in spidermonkey 1
7 objects are dom.
... jsclass_new_enumerate obsolete since jsapi 3
7 this class's enumerate hook is actually a jsnewenumerateop, not a jsenumerateop.
... jsclass_is_extended obsolete since jsapi 1
7indicates that this jsclass is really a jsextendedclass.
...And 2 more matches
Setting up an update server
for example, if you want the nightly mar from 2019-09-1
7 for a 64 bit windows machine, you probably want the mar located at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-1
7-09-36-29-mozilla-central/firefox-
71.0a1.en-us.win64.complete.mar.
... <?xml version="1.0" encoding="utf-8"?> <updates> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="21181002100236"> <patch type="complete" url="http://12
7.0.0.1:8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the release directory on archive.mozilla.org for a release or beta build (you'll have to search it for the file name of your mar, since it includes the sha512 for every file that...
...'s part of that release), and for a nightly build you'll find a file with a .checksums extension adjacent to your mar that contains that information (for instance, for the mar file at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-1
7-09-36-29-mozilla-central/firefox-
71.0a1.en-us.win64.complete.mar, the file https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-1
7-09-36-29-mozilla-central/firefox-
71.0a1.en-us.win64.checksums contains the sha512 for that file as well as for all the other win64 files that are part of that nightly release).
...And 2 more matches
nsIContentViewer
inherits from: nsisupports last changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.
7) implemented by: ?????????????????????????????????????.
... note: prior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.
7), this attribute was part of nsidocumentviewer.
... note: prior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.
7), this attribute was part of nsidocumentviewer.
...And 2 more matches
Xptcall Porting Status
x <font color="white">done</font> freebsd and netbsd x86 christoph toshok <toshok@hungry.com>, john bandhauer <jband@netscape.com> unix (same as linux 86 code) <font color="white">done</font> bsd/os x86 bert driehuis <bert_driehuis@nl.compuware.com> unix (same as linux 86 code) bert contributed patches that *should* do the right thing for all the unixish-x86 versions of this code for gcc 2.
7 or 2.8 vs.
...it passes testxptcinvoke and testxpc on my machine which runs kernel 2.2.
7, glibc 2.1.1, and egcs 1.1.2.
...though, there is some doubt - see bug #1
799
7 <font color="white">done</font> aix ppc jim dunn <jdunn@netscape.com> philip k.
...And 2 more matches
Using COM from js-ctypes
basis and reference for this article bugzilla :: bug
738501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 50590
7 - support c++ calling from jsctypes converting com code to c code to convert com code to js-ctypes, we need to write c++ vtable pointers in c.
...lume': ctypes.voidptr_t }, { 'waituntildone': ctypes.voidptr_t }, { 'setsyncspeaktimeout': ctypes.voidptr_t }, { 'getsyncspeaktimeout': ctypes.voidptr_t }, { 'speakcompleteevent': ctypes.voidptr_t }, { 'isuisupported': ctypes.voidptr_t }, { 'displayui': ctypes.voidptr_t } // end ispvoice ]); // functions // http://msdn.microsoft.com/en-us/library/windows/desktop/ms6952
79%28v=vs.85%29.aspx let coinitializeex = lib.declare('coinitializeex', winabi, hresult, // result lpvoid, // pvreserved dword // dwcoinit ); // http://msdn.microsoft.com/en-us/library/windows/desktop/ms688
715%28v=vs.85%29.aspx let couninitialize = lib.declare('couninitialize', winabi, void // return ); // http://msdn.microsoft.com/en-us/library/windows/desktop/ms6...
...e they are guid guid.data1 = parseint(jsarr_pieces[0], 16); guid.data2 = parseint(jsarr_pieces[1], 16); guid.data3 = parseint(jsarr_pieces[2], 16); let j = 2; for (let i=0; i<8; i++) { j++; guid.data4[i] = parseint(jsarr_pieces[j], 16); }; return guid; } // constants let coinit_multithreaded = 0; let coinit_apartmentthreaded = 2; let clsctx_all = 0x1
7; let clsid_spvoice = clsidfromarr(['0x96
7493
77', '0x3391', '0x11d2', '0x9e', '0xe3', '0x00', '0xc0', '0x4f', '0x
79', '0x
73', '0x96']); let iid_ispvoice = iidfromarr(['0x6c44df
74', '0x
72b9', '0x4992', '0xa1', '0xec', '0xef', '0x99', '0x6e', '0x04', '0x22', '0xd4']); let...
...And 2 more matches
AudioParam.cancelAndHoldAtTime() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcancelandholdattimechrome full support 5
7 full support 5
7 no support ?
... — 56alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()edge full support ≤
79firefox no support noie no support noopera full support 44 full support 44 no support ?
... — 43alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()safari no support nowebview android full support 5
7 full support 5
7 no support ?
...And 2 more matches
CanvasRenderingContext2D - Web APIs
this code draws a house: // set line width ctx.linewidth = 10; // wall ctx.strokerect(
75, 140, 150, 110); // door ctx.fillrect(130, 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas.
... canvasrenderingcontext2d.mozdrawtext() this method was introduced in gecko 1.9 and is removed starting with gecko
7.0.
... canvasrenderingcontext2d.mozmeasuretext() this method was introduced in gecko 1.9 and is unimplemented starting with gecko
7.0.
...And 2 more matches
DataTransfer - Web APIs
removed in firefox
71.
...removed in firefox
71.
...removed in firefox
71.
...And 2 more matches
FileSystem - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemchrome full support
7alternate name full support
7alternate name alternate name uses the non-standard name: domfilesystemedge full support ≤18prefixed notes full support ≤18prefixed notes prefixed implemented with the vendor prefix: webkitnotes edge only supports this api in drag...
... no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ≤3
7alternate name full support ≤3
7alternate name alternate name uses the non-standard name: domfilesystemchrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: domfilesystemfirefox android ...
...mplemented with the vendor prefix: webkitsafari ios full support 11.3samsung internet android full support 1.0prefixed full support 1.0prefixed prefixed implemented with the vendor prefix: webkitnamechrome full support
7edge full support ≤18firefox full support 50ie no support noopera full support 15safari full support 11.1webview android full support ...
...And 2 more matches
Guide to the Fullscreen API - Web APIs
prefixing note: currently, only firefox 64 and chrome
71 supports this unprefixed.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreen deprecatedchrome full support
71 full support
71 full support 15alternate name alternate name uses the non-standard name: webkitisfullscreenedge full support ≤
79 full support ≤
79 full support ≤
79alter...
...t 15alternate name alternate name uses the non-standard name: webkitisfullscreensafari full support 6alternate name full support 6alternate name alternate name uses the non-standard name: webkitisfullscreenwebview android full support
71 full support
71 full support ≤3
7alternate name alternate name uses the non-standard name: webkitisfullscreenchrome android full support
71 full support
71 full support 18a...
...And 2 more matches
Ajax navigation example - Web APIs
signments/http-status-codes/http-status-codes.xml */ { 100: "continue", 101: "switching protocols", 102: "processing", 200: "ok", 201: "created", 202: "accepted", 203: "non-authoritative information", 204: "no content", 205: "reset content", 206: "partial content", 20
7: "multi-status", 208: "already reported", 226: "im used", 300: "multiple choices", 301: "moved permanently", 302: "found", 303: "see other", 304: "not modified", 305: "use proxy", 306: "reserved", 30
7: "temporary redirect", 308: "permanent redirect", 400:...
... "bad request", 401: "unauthorized", 402: "payment required", 403: "forbidden", 404: "not found", 405: "method not allowed", 406: "not acceptable", 40
7: "proxy authentication required", 408: "request timeout", 409: "conflict", 410: "gone", 411: "length required", 412: "precondition failed", 413: "request entity too large", 414: "request-uri too long", 415: "unsupported media type", 416: "requested range not satisfiable", 41
7: "expectation failed", 422: "unprocessable entity", 423: "locked", 424: "failed dependency", 425: "unassigned", ...
... 426: "upgrade required", 42
7: "unassigned", 428: "precondition required", 429: "too many requests", 430: "unassigned", 431: "request header fields too large", 500: "internal server error", 501: "not implemented", 502: "bad gateway", 503: "service unavailable", 504: "gateway timeout", 505: "http version not supported", 506: "variant also negotiates (experimental)", 50
7: "insufficient storage", 508: "loop detected", 509: "unassigned", 510: "not extended", 511: "network authentication required" }; var oreq, bisloading = false, bupdateurl = false; oloadingbox.id =...
...And 2 more matches
Using IndexedDB - Web APIs
blink/webkit supports the current version of the spec, as shipped in chrome 23+ and opera 1
7+; ie10+ does too.
... note: as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112
702.) previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk.
...<iframe> content) cannot access indexeddb if the browser is set to never accept third party cookies (see bug 114
7821.) warning about browser shutdown when the browser shuts down (because the user chose the quit or exit option), the disk containing the database is removed unexpectedly, or permissions are lost to the database store, the following things happen: each transaction on every affected database (or all open databases, in the case of browser shutdown) is aborted with an aborterror.
...And 2 more matches
Capabilities, constraints, and settings - Web APIs
for example: let constraints = { width: 1920, height: 1080, aspectratio: 1.
777777778 }; mytrack.applyconstraints(constraints); in this case, the constraints indicate that any values are fine for nearly all properties, but that a standard high definition (hd) video size is desired, with the standard 16:9 aspect ratio.
...} else { let constraints = { width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 1080 }, aspectratio: 1.
777777778, framerate: { max: 30 }, facingmode: { exact: "user" } }; mytrack.applyconstraints(constraints).then(function() => { /* do stuff if constraints applied successfully */ }).catch(function(reason) { /* failed to apply constraints; reason is why */ }); } here, after ensuring that the constrainable properties for which matches must be found are supported (width, heig...
...ht, framerate, and facingmode), we set up constraints which request a width no smaller than 640 and no larger than 1920 (but preferably 1920), a height no smaller than 400 (but ideally 1080), an aspect ratio of 16:9 (1.
777777778), and a frame rate no greater than 30 frames per second.
...And 2 more matches
PerformanceLongTaskTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 1
71,20 1
71,30 161,25" stroke="...
...#d4dde4" fill="none"/><line x1="1
71" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetperformancelongtasktiming experimentalchrome full support 58edge full support ≤
79firefox no support nonotes no support nonotes notes see bug 1348405.ie ?
...And 2 more matches
PushEvent - Web APIs
full support 1
7firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 3
7safari n...
... nochrome android full support 42firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android full support 3
7safari ios no support nosamsung internet android full support 4.0pushevent() constructor experimentalchrome full support 42edge full support 16disabled full support 16disable...
... full support 1
7firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 3
7safari no support nowebview android no support nochrome android full support 42firefox android full support ...
...And 2 more matches
RTCPeerConnection: icecandidateerror event - Web APIs
there is one additional, webrtc-specific, error which lies outside the valid stun error code range:
701.
... error
701 indicates that none of the ice candidates were able to successfully make contact with the stun or turn server.
... the
701 error is fired only once per server url from the list of available stun or turn servers provided when creating the rtcpeerconnection.
...And 2 more matches
TextDecoder() - Web APIs
each label is associated with a specific encoding type: possible values of utflabel encoding "unicode-1-1-utf-8", "utf-8", "utf8" 'utf-8' "866", "cp866", "csibm866", "ibm866" 'ibm866' "csisolatin2", "iso-8859-2", "iso-ir-101", "iso8859-2", "iso88592", "iso_8859-2", "iso_8859-2:198
7", "l2", "latin2" 'iso-8859-2' "csisolatin3", "iso-8859-3", "iso-ir-109", "iso8859-3", "iso88593", "iso_8859-3", "iso_8859-3:1988", "l3", "latin3" 'iso-8859-3' "csisolatin4", "iso-8859-4", "iso-ir-110", "iso8859-4", "iso88594", "iso_8859-4", "iso_8859-4:1988", "l4", "latin4" 'iso-8859-4' "csisolatincyrillic", "cyrillic", "iso-8859-5", "iso-ir-144", "...
...iso88595", "iso_8859-5", "iso_8859-5:1988" 'iso-8859-5' "arabic", "asmo-
708", "csiso88596e", "csiso88596i", "csisolatinarabic", "ecma-114", "iso-8859-6", "iso-8859-6-e", "iso-8859-6-i", "iso-ir-12
7", "iso8859-6", "iso88596", "iso_8859-6", "iso_8859-6:198
7" 'iso-8859-6' "csisolatingreek", "ecma-118", "elot_928", "greek", "greek8", "iso-8859-
7", "iso-ir-126", "iso8859-
7", "iso8859
7", "iso_8859-
7", "iso_8859-
7:198
7", "sun_eu_greek" 'iso-8859-
7' "csiso88598e", "csisolatinhebrew", "hebrew", "iso-8859-8", "iso-8859-8-e", "iso-ir-138", "iso8859-8", "iso88598", "iso_8859-8", "iso_8859-8:1988", "visual" 'iso-8859-8' "csiso88598i", "iso-8859-8-i", "logical" 'iso-8859-8i' "csisolatin6", "iso-8859-10", "iso-ir-15
7", "iso885...
...-8859-14", "iso8859-14", "iso885914" 'iso-8859-14' "csisolatin9", "iso-8859-15", "iso8859-15", "iso885915", "l9", "latin9" 'iso-8859-15' "iso-8859-16" 'iso-8859-16' "cskoi8r", "koi", "koi8", "koi8-r", "koi8_r" 'koi8-r' "koi8-u" 'koi8-u' "csmacintosh", "mac", "macintosh", "x-mac-roman" 'macintosh' "dos-8
74", "iso-8859-11", "iso8859-11", "iso885911", "tis-620", "windows-8
74" 'windows-8
74' "cp1250", "windows-1250", "x-cp1250" 'windows-1250' "cp1251", "windows-1251", "x-cp1251" 'windows-1251' "ansi_x3.4-1968", "ascii", "cp1252", "cp819", "csisolatin1", "ibm819", "iso-8859-1", "iso-ir-100", "iso8859-1", "iso88591", "iso_8859-1", "iso_8859-1:198
7", "l1", ...
...And 2 more matches
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
sec(13) case 20: // sec_error_untrusted_issuer, sec(20) case 21: // sec_error_untrusted_cert, sec(21) case 36: // sec_error_ca_cert_invalid, sec(36) errname = 'securityuntrustedcertificateissuererror'; break; case 90: // sec_error_inadequate_key_usage, sec(90) errname = 'securityinadequatekeyusageerror'; break; case 1
76: // sec_error_cert_signature_algorithm_disabled, sec(1
76) errname = 'securitycertificatesignaturealgorithmdisablederror'; break; default: errname = 'securityerror'; break; } } else { // calculating the difference let sslerr = math.abs(nsinsserrorsservice.nss_ssl_error_base) - (status & 0xffff); switch (sslerr) { c...
...ion_refused, network(13) errname = 'connectionrefusederror'; break; // network timeout error case 0x804b000e: // ns_error_net_timeout, network(14) errname = 'networktimeouterror'; break; // hostname lookup failed case 0x804b001e: // ns_error_unknown_host, network(30) errname = 'domainnotfounderror'; break; case 0x804b004
7: // ns_error_net_interrupt, network(
71) errname = 'networkinterrupterror'; break; default: errname = 'networkerror'; break; } } // xxx we have no tcperror implementation right now because it's really hard to // do on b2g18.
...bug 86
78
72 has been filed to implement this and // contains a documented tcperror.webidl that maps all the error codes we use in // this file to slightly more readable explanations.
...And 2 more matches
Using XMLHttpRequest - Web APIs
note: starting with gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.2
7), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
... method: post; encoding type: multipart/form-data: content-type: multipart/form-data; boundary=---------------------------314911
788813839 -----------------------------314911
788813839 content-disposition: form-data; name="foo" bar -----------------------------314911
788813839 content-disposition: form-data; name="baz" the first line.
... -----------------------------314911
788813839-- however, if you are using the get method, a string like the following will be simply added to the url: ?foo=bar&baz=the%20first%20line.%0athe%20second%20line.
...And 2 more matches
Web accessibility for seizures and physical reactions - Accessibility
in 199
7, a japanese cartoon featured an animated "virus bomb".
... @media screen and (prefers-reduced-motion: reduce) { } @media screen and (prefers-reduced-motion) { } to see a great example of how to use the code prefers-reduced-motion, visit the mdn document, prefers-reduced-motion, or see the example below from the section on new in chrome
74.
... "this effect is noticable, and documented, up to
70 hz." "these studies would seem to indicate that you should stay away from refresh rates under
70 hz, and use a rate not divisible by 10." eric bailey, of css-tricks, found an innovative use the update feature which, used in combination with animation-duration or transition-duration, to conclude at a rate that is imperceptible to the human eye.
...And 2 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
it then moves onto the next line, creating a new row track, and fills in more items: * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div...
...this occurs once we've flipped the grid onto the side, like this: * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); grid-gap: 10px; } .item1 { grid-column: 1 / 4...
...And 2 more matches
animation - CSS: Cascading Style Sheets
<div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 2
7px; height: 2
7px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%
7bdisplay%3anone%
7d%20path%3atarget%
7bdisplay%3ablock%
7d%3c%2...
...fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l
7%2c4%20l
7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%
7bdisplay%3anone%
7d%20path%3atarget%
7bdisplay%3ablock%
7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5...
...%2c4%20l
7%2c4%20l
7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%
7bdisplay%3anone%
7d%20path%3atarget%
7bdisplay%3ablock%
7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l
7%2c4%20l
7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22...
...And 2 more matches
aspect-ratio - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaspect-ratio experimentalchrome partial support
79notes partial support
79notes notes chrome
79 adds internal support only for mapped valuesedge partial support
79notes partial support
79notes notes edge
79 adds internal support only for mapped valuesfirefox partial support
71notes partial support
71notes notes fir...
...efox
71 adds internal support only for mapped values no support 69 —
71notes disabled notes firefox 69 adds internal support only for mapped valuesdisabled from version 69 until version
71 (exclusive): this feature is behind the layout.css.width-and-height-map-to-aspect-ratio.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support nowebview android partial support
79notes partial support
79notes notes webview
79 adds internal support only for mapped valueschrome android partial support
79notes partial support
79notes notes chrome
79 adds internal support only for mapped valuesfirefox android no support noopera android no support nosafari ios no support ...
...And 2 more matches
transition-timing-function - CSS: Cascading Style Sheets
eyword values */ transition-timing-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end; /* function values */ transition-timing-function: steps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.
7, 1.0, 0.1); /* steps function keywords */ transition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); /* multiple timing functions */ transition-timing-function: ease, ste...
...p-start, cubic-bezier(0.1, 0.
7, 1.0, 0.1); /* global values */ transition-timing-function: inherit; transition-timing-function: initial; transition-timing-function: unset; values <timing-function> each <timing-function> represents the timing function to link to the corresponding property to transition, as defined in transition-property.
...whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%,
75%, and 100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the transition begins; jump-end denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none there is no jump on either end.
...And 2 more matches
Index - Developer guides
7 adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player.
... 1
7 event developer guide dom, event, guide, needsupdate, events events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.
... 25 touch events (mozilla experimental) dom the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 1
7.
...And 2 more matches
HTTP authentication - HTTP
the general http authentication framework rfc
7235 defines the http authentication framework, which can be used by a server to challenge a client request, and by a client to provide authentication information.
...in the case of proxies, the challenging status code is 40
7 (proxy authentication required), the proxy-authenticate response header contains at least one challenge applicable to the proxy, and the proxy-authorization request header is used for providing the credentials to the proxy server.
...unlike 401 unauthorized or 40
7 proxy authentication required, authentication is impossible for this user.
...And 2 more matches
MIME types (IANA media types) - HTTP
examples include multipart/form-data (for data produced using the formdata api) and multipart/byteranges (defined in rfc
7233: 5.4.1 and used with http's 206 "partial content" response returned when the fetched data is only part of the content, such as is delivered using the range header).
...message: post / http/1.1 host: localhost:8000 user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate connection: keep-alive upgrade-insecure-requests: 1 content-type: multipart/form-data; boundary=---------------------------8
721656041911415653955004498 content-length: 465 -----------------------------8
721656041911415653955004498 content-disposition: form-data; name="mytextfield" test -----------------------------8
721656041911415653955004498 content-disposition: form-data; name="mycheckbox" on -----------------------------8
721656041911415653955004498 content-disposition: form-data; name="myfile"; filename="test.txt" ...
...-----------------------------8
721656041911415653955004498-- multipart/byteranges the multipart/byteranges mime type is used to send partial responses to the browser.
...And 2 more matches
List of default Accept values - HTTP
user agent value comment firefox image/webp,*/* (since firefox 65) */* (since firefox 4
7) image/png,image/*;q=0.8,*/*;q=0.5 (before) this value can be modified using the image.http.accept parameter.
... user agent value comment firefox earlier than 3.6 no support for <video> firefox 3.6 and later video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.
7,audio/*;q=0.6,*/*;q=0.5 see bug 4890
71 source chrome */* source internet explorer 8 or earlier no support for <video> values for audio resources when an audio file is requested, like via the <audio> html element, most browsers use specific values.
... user agent value comment firefox 3.6 and later audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.
7,video/*;q=0.6,*/*;q=0.5 see bug 4890
71 source safari, chrome */* source internet explorer 8 or earlier no support for <audio> internet explorer 9 ?
...And 2 more matches
Text formatting - JavaScript
caution: if you edit this page, do not include any characters above u+ffff, until mdn bug 85
7438 is fixed ( https://bugzilla.mozilla.org/show_bug.cgi?id=85
7438 ).
... '\u{2f804}' // the same with simple unicode escapes '\ud8
7e\udc04' string objects the string object is a wrapper around the string primitive data type.
...(examples should be added to this page after mdn bug 85
7438 is fixed.) see also string.fromcodepoint() or string.prototype.codepointat().
...And 2 more matches
Arrow function expressions - JavaScript
shorter functions var elements = [ 'hydrogen', 'helium', 'lithium', 'beryllium' ]; // this statement returns the array: [8, 6,
7, 9] elements.map(function(element) { return element.length; }); // the regular function above can be written as the arrow function below elements.map((element) => { return element.length; }); // [8, 6,
7, 9] // when there is only one parameter, we can remove the surrounding parentheses elements.map(element => { return element.length; }); // [8, 6,
7, 9] // when the only statement in an a...
...rrow function is `return`, we can remove `return` and remove // the surrounding curly brackets elements.map(element => element.length); // [8, 6,
7, 9] // in this case, because we only need the length property, we can use destructuring parameter: // notice that the `length` corresponds to the property we want to get whereas the // obviously non-special `lengthfoobarx` is just the name of a variable which can be changed // to any valid variable name you want elements.map(({ length: lengthfoobarx }) => lengthfoobarx); // [8, 6,
7, 9] // this destructuring parameter assignment can also be written as seen below.
...elements.map(({ length }) => length); // [8, 6,
7, 9] no separate this before arrow functions, every new function defined its own this value based on how the function was called: a new object in the case of a constructor.
...And 2 more matches
Date.UTC() - JavaScript
it returns the number of milliseconds since january 1, 19
70, 00:00:00 utc.
... syntax since ecmascript 201
7: date.utc(year[, month[, day[, hour[, minute[, second[, millisecond]]]]]]) ecmascript 2016 and earlier: (month used to be required) date.utc(year, month[, day[, hour[, minute[, second[, millisecond]]]]]) parameters year a full year.
...as of es201
7, it no longer is.) day optional an integer between 1 and 31 representing the day of the month.
...And 2 more matches
String.prototype.charAt() - JavaScript
var str = 'a \ud8
7e\udc04 z'; // we could also use a non-bmp character directly for (var i = 0, chr; i < str.length; i++) { if ((chr = getwholechar(str, i)) === false) { continue; } // adapt this line at the top of each loop, passing in the whole string and // the current iteration and returning a variable to represent the // individual character console.log(chr); } function getwholechar(str, i) {...
... var code = str.charcodeat(i); if (number.isnan(code)) { return ''; // position not found } if (code < 0xd800 || code > 0xdfff) { return str.charat(i); } // high surrogate (could change last hex to 0xdb
7f to treat high private // surrogates as single characters) if (0xd800 <= code && code <= 0xdbff) { if (str.length <= (i + 1)) { throw 'high surrogate without following low surrogate'; } var next = str.charcodeat(i + 1); if (0xdc00 > next || next > 0xdfff) { throw 'high surrogate without following low surrogate'; } return str.charat(i) + str.charat(i + 1); } // low surrogate (0xdc00 <= code && code <= 0xdfff) if (i === 0) { throw 'low surrogate without preceding high surrogate'; } var prev = str.charcodeat(i ...
...- 1); // (could change last hex to 0xdb
7f to treat high private // surrogates as single characters) if (0xd800 > prev || prev > 0xdbff) { throw 'low surrogate without preceding high surrogate'; } // we can pass over low surrogates now as the second component // in a pair which we have already processed return false; } in an ecmascript 2016 environment which allows destructured assignment, the following is a more succinct and somewhat more flexible alternative in that it does increment for an incrementing variable automatically (if the character warrants it in being a surrogate pair).
...And 2 more matches
WebAssembly.Instance - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstancechrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0instance() constructorchrome full support ...
... 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in th...
...And 2 more matches
for...of - JavaScript
object.prototype.objcustom = function() {}; array.prototype.arrcustom = function() {}; const iterable = [3, 5,
7]; iterable.foo = 'hello'; for (const i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrcustom", "objcustom" } for (const i in iterable) { if (iterable.hasownproperty(i)) { console.log(i); // logs 0, 1, 2, "foo" } } for (const i of iterable) { console.log(i); // logs 3, 5,
7 } let us look into the above code step by step.
... object.prototype.objcustom = function() {}; array.prototype.arrcustom = function() {}; const iterable = [3, 5,
7]; iterable.foo = 'hello'; every object will inherit the objcustom property and every object that is an array will inherit the arrcustom property since these properties have been added to object.prototype and array.prototype, respectively.
...it doesn't log array elements 3, 5,
7 or hello because those are not enumerable properties, in fact they are not properties at all, they are values.
...And 2 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
x-card:nth-child(1) video, x-card:nth-child(2) img, x-card:nth-child(3) { margin-top: 1
7.5vw; } x-card:nth-child(1) button, x-card:nth-child(2) button { position: absolute; bottom: 0; } x-card:nth-child(2) button:nth-of-type(2) { bottom: 5.9rem; } x-card:nth-child(1) button { font-size:
7vw; } x-card:nth-child(2) button { font-size:
7vw; } the next rules do some sizing on the buttons inside the first two cards, and give all card contents a...
...because the top-margin of the x-cards was set to 1
7vw earlier on.
... all buttons in the app have been set to have a line-height of 2.5, in the default css at the top of the stylesheet (check if you don't believe me.) and 6.8 x 2.5 = 1
7.
...And 2 more matches
stroke-linejoin - SVG: Scalable Vector Graphics
yline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m
7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="round" /> <!-- upper right path: effect of the "bevel" value --> <path d="m13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- bottom left path: effect of the "miter-clip" value with fallback to "miter" if not supported.
... example html,body,svg { height:100% } <svg viewbox="0 -1 10
7" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "miter" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- effect of the "miter" value on a sharp angle where de default miter limit is exceeded --> <path d="m
7,5 l0.
75,-3 l0.
75,3" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- the following red dotted...
...stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> <!-- the following pink lines highlight the position of the path for each stroke --> <g> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> <path d="m
7,5 l0.
75,-3 l0.
75,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="
7" cy="5" r="0.05" fill="pink" /> <circle cx="
7.
75" cy="2" r="0.05" fill="pink" /> <circle cx="8.5" cy="5" r="0.05" fill="pink" /> </g> </svg> miter-clip note: the miter-clip value as been introduced in svg2 and it isn't widely supported yet, see browser compatibility bellow for details.
...And 2 more matches
Features restricted to secure contexts - Web security
ari firefox async clipboard api 66 not supported not supported 63 background sync (see syncmanager, for example) 49 not supported not supported not supported cache-control: immutable not supported 15 11 49 credential management api 51 not supported not supported not supported generic sensor api 6
7 not supported not supported not supported payment request api (and basic card payment).
... push api 42 1
7 not supported 44 reporting api supported not supported not supported behind flag since fx 65 service workers 40 1
7 11.1 44 storage api 55 not supported not supported 51 web authentication api 65 in preview (1
7) in development 60 web bluetooth 56 not supported not supported not supported web midi (see midiaccess, for example) 43 not supported not supported not supported web crypto api 60
79 not supported
75 secure context restrictions that vary by browser some browsers may decide to disable certain apis in non-secure ...
... api chrome edge safari firefox application cache restricted to secure contexts planned in chrome
70 deprecation planning started in february 2018 public interest on deprecation webkit bug 182442 restricted to secure contexts in firefox 62 geolocation restricted to secure contexts in 50 restricted to secure contexts in 10 restricted to secure contexts in 55 device orientaion / device motion deprecation warning deprecation warnings since 60.
...And 2 more matches
Understanding WebAssembly text format - WebAssembly
if we convert our module to binary now (see converting webassembly text format to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061
736d ; wasm_binary_magic 0000004: 0100 0000 ; wasm_binary_version adding functionality to your module ok, that’s not very interesting, let’s add some executable code to this module.
... bulk memory operations bulk memory operations are a newer addition to the language (for example, in firefox
79) — seven new built-in operations are provided for bulk memory operations such as copying and initializing, to allow webassembly to model native functions such as memcpy and memmove in a more efficient, performant way.
... reference types the reference types proposal (supported in firefox
79) provides two main features: a new type, externref, which can hold any javascript value, for example strings, dom references, objects, etc.
...And 2 more matches
JavaScript Daemons Management - Archive of obsolete content
the date argument can be a date object, a string expressing the date in gmtstring format, or a number expressing the number of milliseconds since january 1, 19
70, 00:00:00 utc.
...the date argument can be a date object, a string expressing the date in gmtstring format, or a number expressing the number of milliseconds since january 1, 19
70, 00:00:00 utc.
... [custom code] }, // optional |*| "perform": function () { [custom code] }, // required |*| }, 200, 30); |*| \*/ var stext = "do you feel lucky, punk?", ounhide = daemon.buildaround({ // http://tyleregeto.com/text-animation-in-javascript "letters": [], "numletters": 0, "clock": 0, "interval": 0.0, "delta": 33, "letters": [], "pool": ["0","1","2","3","4","5","6","
7","8","9"], "target": document.createelement("p"), "create": function () { // build letters list this.target.textcontent = ""; this.letters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this.targ...
...tom code] }, // optional |*| "perform": function () { [custom code] }, // required |*| }, 200, 30); |*| \*/ var stext = "do you feel lucky, punk?", ounhide = daemon.safe.buildaround({ // http://tyleregeto.com/text-animation-in-javascript "letters": [], "numletters": 0, "clock": 0, "interval": 0.0, "delta": 33, "letters": [], "pool": ["0","1","2","3","4","5","6","
7","8","9"], "target": document.createelement("p"), "create": function () { // build letters list this.target.textcontent = ""; this.letters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this.targ...
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
« previous this document was authored by taro (btm) matsuzawa and was originally published in japanese for the firefox developers conference summer 200
7.
... let’s say we’ve found the contents of listing
7 in the source.
... nearly all components inherit from nsisupports (fixme: why 'nearly' ?), so adding a trailing space when you search serves as a delimiter on the inheritance position, and makes it easier to specify what you’re looking for (see figures 6,
7).4 this results in the file nsilocalfile.idl.
... fixme: figure 6: searching without a trailing space fixme: figure
7: searching with a trailing space fixme: listing
7: source-code fragment var file = components.classes['@mozilla.org/file/local;1'] .createinstance(components.interfaces.nsilocalfile); file.initwithpath(hoge); how is this actually implemented?
XPCOM Objects - Archive of obsolete content
if you want to see the list in your current firefox installation, just run the following code in the error console: var str = ""; for (var i in components.classes) { str += i + "\n" }; str a run on firefox 3.6.2 with a few extensions installed yields 8
76 strings.
... */ [scriptable, uuid(bd46f689-6c1d-4
7d0-bc0
7-bb52b546b8b5)] interface xsihellocounter : nsisupports { /* the maximum allowed count.
... [scriptable, uuid(bd46f689-6c1d-4
7d0-bc0
7-bb52b546b8b5)] the scriptable qualifier says that this component can be accessed from js code.
... const class_id = components.id("{3
7ed5d2a-e223-4386-9854-b64fd38932bf}"); const class_name = "hello world counter"; const contract_id = "@xulschool.com/counter;1"; these constants are used at the bottom, in the component registration code.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
bird's eye view <map id="loaddiagrammap" name="loaddiagrammap"><area alt="(13) docontent()" coords="534,239,
715,300" href="#nsiexternalhelperappservice::docontent"> <area alt="(10) getcategoryentry()" coords="5
75,418,821,418,821,455,629,455,629,484,5
75,484" href="#categorymanager" shape="poly"> <area alt="(12)" coords="539,133,583,163" href="#stream-converter"> <area alt="(11)" coords="485,133,53
7,163" href="#contenthandler"> <area alt="(9)" coords="445,132,484,165" href="#nsdocumentopeninfo::dispatchcon...
...tent"> <area alt="(8)" coords="405,133,439,162" href="#onstartrequest-innards"> <area alt="(
7) onstartrequest()" coords="639,129,
703,129,
703,165,833,165,833,204,639,204" href="#onstartrequest" shape="poly"> <area alt="(6) asyncopen()" coords="63
7,121,
709,121,
709,96,
783,96,
783,58,63
7,58" href="#asyncopen" shape="poly"> <area alt="(5) open()" coords="311,306,432,3
71" href="#open"> <area alt="(4)" coords="90,384,12
7,41
7" href="#openuri-innards"> <area alt="(0) registercontentlistener()" coords="3
7,4
74,346,4
74,346,505,88,505,88,535,3
7,535" href="#registercontentlistener" shape="poly"> <area alt="(3) openuri() (nsuriloader)" coords="5,20
7,312,269" href="#openuri"> <area alt="(2)" coords="102,114,139,148" href="#internalload"> <area alt="(1) loaduri/onlinkclick" coords="
77,5,449,59" href="#loadur...
...i"> <area alt="nsiexternalhelperappservice" coords="52
7,305,839,339" href="#nsiexternalhelperappservice"> <area alt="category manager" coords="683,46
7,80
7,52
7" href="#nscategorymanager"> <area alt="nsdocumentopeninfo" coords="3
71,
71,635,185" href="#nsdocumentopeninfo"> <area alt="necko" coords="
721,113,821,15
7" href="#necko"> <area alt="nsuriloader" coords="23,335,215,455" href="#nsuriloader"> <area coords="22
7,515,485,5
75" href="#nsiuricontentlistener"> <area alt="nsdocshell" coords="4
7,83,203,153" href="#nsdocshell"></map> this block diagram is out of date as of january 2012 with regard to some minor control flow shuffling in nsuriloader.
... original document information author(s): boris zbarsky last updated date: october 24, 2003 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Modularization techniques - Archive of obsolete content
for those who like gory details, their structure is this: struct nsid { pruint32 m0; pruint16 m1, m2; pruint8 m3[8]; }; frequently you see them represented as strings, like this: {221ffe10-ae3c-11d1-b66c-00805f8a26
76} to initialize an id struct you declare them like this: id = {0x221ffe10, 0xae3c, 0x11d1, {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x
76}}; why the b66c couplet gets broken up and grouped with the last set of bytes is probably a footnote somewhere.
... #include "nsisupports.h" // {5
7ecad90-ae1a-11d1-b66c-00805f8a26
76} #define ns_isample_iid \ {0x5
7ecad90, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x
76}} /* * nsisample interface declaration */ class nsisample: public nsisupports { public: ns_imethod hello() = 0; }; file nssample.h nssample.h defines the class id (cid) for our sample class.
... #include "nsifactory.h" // {d3944dd0-ae1a-11d1-b66c-00805f8a26
76} #define ns_sample_cid \ {0xd3944dd0, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x
76}} extern nsresult getsamplefactory(nsifactory **aresult); file nssample.cpp nssample.cpp contains both the declaration and implementation of our sample class, and the declaration and implementation of our class factory.
... links the component object model specification revision history feb 25, 1998, created oct 19, 1998, dusted off momentarily oct 10, 1999, added comments about xpidl, language-independentness original document information author(s): will scullin last updated date: september 13, 2004 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details ...
Space Manager Detailed Design - Archive of obsolete content
+-----+ | | | r | | b | | b | // +-----+ | b | +-----+ | | +-----+ | | // | | | | +-----+ | r | +-----+ // | b | +-----+ +-----+ // | | // +-----+ // // // // case 5 case 6 case
7 // ------ ------ ------ // +-----+ +-----+ +-----+ +-----+ // | | | r | | b | | | +-----+ // | b | +-----+ +-----+ | r | | b | // | | | | +-----+ // +-----+ +-----+ // +-----+ // | r | // +-----+ // first, check for the eas...
... starting at the head of the list of bandrects, check for intersection with the rect passed in: case #1: the rect is totally above the current band rect, so insert a new band rect before the current bandrect cases #2 and #
7: the rect is partially above the band rect, so it is divided into two bandrects, one entirely above the band, and one containing the remainder of the rect.
... case #4 and #
7: create a new rect for the part that overlaps the bandrect, and add it to the current bandrect (similar to case #6) and then move on to the next band, removing that part from the rect passed in.
... this algorithm is pretty confusing - basically what needs to happen is that rects and bands need to be divided up so that complicated cases like#2, #4, and #
7, are reduced to simpler cases where the rects is totally above,below, or between a band rect.
Table Cellmap - Archive of obsolete content
79 // this union relies on the assumption that an object (not primitive type) does 80 // not start on an odd bit boundary.
... insertrowsbefore firstrow=0 ***start table dump*** mcolwidths= row(0)=02
763344 cell(0)=02
763528 cell(0)=02
76381c row(0)=02
763940 cell(0)=02
763990 cell(0)=02
763ab4 ***** start table cell map dump ***** 023566b0 cols array orig/span-> 023566b0 ***** start group cell map dump ***** 023565b0 maprowcount=0 tablerowcount=0 ***** end group cell map dump ***** ***** end table cell map dump ***** ***end table dump*** insertrowsafter ***start table dump*** mcolwidths=-1 -...
...1 row(0)=02
763344 cell(0)=02
763528 cell(1)=02
76381c row(1)=02
763940 cell(0)=02
763990 cell(1)=02
763ab4 ***** start table cell map dump ***** 023566b0 cols array orig/span-> 023566b00=2/0 1=2/0 ***** start group cell map dump ***** 023565b0 maprowcount=2 tablerowcount=2 row 0 : c0,0 c0,1 row 1 : c1,0 c1,1 c0,0=02
763528(0) c0,1=02
76381c(1) c1,0=02
763990(0) c1,1=02
763ab4(1) ***** end group cell map dump ***** ***** end table cell map dump ***** ***end table dump*** structural information one can imagine the cellmap as grid with equally wide rows and columns where the table cells are drawn.
... original document information author(s): bernd mielke last updated date: september 2
7, 2003 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Running Tamarin acceptance tests - Archive of obsolete content
$ cd tamarin-redux/test/acceptance $ export asc=/users/build/hg/tamarin-redux/utils/asc.jar $ export builtinabc=/users/build/hg/tamarin-redux/generated/builtin.abc $ export shellabc=/users/build/hg/tamarin-redux/generated/shell_toplevel.abc $ export avm=/users/build/hg/tamarin-redux/objdir-release/shell/avmshell $ python runtests.py tamarin tests started: 2010-09-28 10:3
7:06.4106
76 current configuration: x64-mac-tvm-release avm version: 5260:6d1899261bac executing 2532 tests against vm: /users/build/hg/builds/5260-6d1899261bac/mac/avmshell_64 2532 running abcasm/abs_helper.as skipping...
...reason: inconsistencies in different debug output, need to implement regex matching of diffs 252
7 running abcasm/branchtocommon.abs 2530 running abcasm/arithmetic.abs 2529 running abcasm/bkpt.abs 2528 running abcasm/bkptline.abs 2526 running abcasm/bug_4
76556.abs 2524 running abcasm/bug_491056.abs ...
...tests complete at 2010-09-28 10:39:26.
751
79
7 start date: 2010-09-28 10:38:0
7.22145
7 end date : 2010-09-28 10:39:26.
751
79
7 test time : 0:01:19.530340 passes : 59291 failures : 0 expected failures :
75 tests skipped :
76 the -f flag tells runtests.py to force recompilation of all the scripts.
...the shell can be named variously in the build but on the phone the executable must be 'avmshell' $ adb shell 'mkdir /data/local/tamarin' $ adb push avmshell /data/local/tamarin/avmshell $ adb shell 'chmod
777 /data/local/tamarin/avmshell' copy android_runner.sh, if it doesn't already exist on the phone in /data/local/tamarin $ adb push tamarin-redux/platform/android/android_runner.sh /data/local/tamarin/android_runner.sh $ adb shell 'chmod
777 /data/loca/android_runner.sh' test it out with a simple .abc or no args for usage (should return exitcode=0) $ tamarin-redux/platform/android/android_shell.p...
Return Codes - Archive of obsolete content
no_matching_certificate -206 extracted file was not signed by the certificate used to sign the installation script cant_read_archive -20
7 xpi package cannot be read invalid_arguments -208 bad parameters to a function illegal_relative_path -209 illegal relative path user_cancelled -210 user clicked cancel on install dialog install_not_started -211 a problem occurred with the parameters to initinstall, or initinstall ...
... network_file_is_in_use -21
7 the specified file cannot be deleted because it is in use.
... filename_already_used -226 same filename being used in install install_cancelled -22
7 raised when installation is cancelled in medias res.
...ce file/dir not found source_is_directory -233 expected source file and got directory source_is_file -234 expected source directory and got file insufficient_disk_space -235 not enough disk space for install filename_too_long -236 unable_to_locate_lib_function -23
7 unable_to_load_library -238 chrome_registry_error -239 malformed_install -240 key_access_denied -241 access to the registry key has been denied key_does_not_exist -242 registry key does not exist value_does_not_exist -243 ...
nsIContentPolicy - Archive of obsolete content
type_subdocument
7 indicates a document contained within another document (for example, <iframe> and <frame> elements).
... type_csp_report 1
7 indicates a content security policy report.
... type_internal_object 2
7 an internal constant used to represent content loaded from <object> elements.
... other 0 obsolete since gecko 1.8 script 1 obsolete since gecko 1.8 image 2 obsolete since gecko 1.8 stylesheet 3 obsolete since gecko 1.8 object 4 obsolete since gecko 1.8 subdocument 5 obsolete since gecko 1.8 control_tag 6 obsolete since gecko 1.8 raw_url
7 obsolete since gecko 1.8 document 8 obsolete since gecko 1.8 methods shouldload() called to let your content policy implementation decide whether or not the resource at a given location should be loaded.
What is RSS - Archive of obsolete content
for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>example news site</title> <description>this is an example news site.</description> <lastbuilddate>wed, 2
7 jul 2005 00:30:30 -0
700</lastbuilddate> <link>http://news.example.com/</link> <item> <title>news flash: i like bread</title> <guid ispermalink="false">4d4a0a12-f188-4c9
7-908b-eea2
7213c2fe</guid> <pubdate>wed, 2
7 jul 2005 00:30:30 -0
700</pubdate> <link>http://news.example.com/artcle/554</link> </item> <item> ...
... <title>big news today: birds fly</title> <guid ispermalink="false">c4a63f09-b45b-466b-8
773-6ff264001ab
7</guid> <pubdate>tue, 19 jul 2005 04:32:51 -0
700</pubdate> <link>http://news.example.com/artcle/553</link> </item> <item> <title>fire is hot</title> <guid ispermalink="false">c1
795324-d5ea-44fa-95b1-b5ce2090d4f1</guid> <pubdate>sun, 15 may 2005 13:02:08 -0
700</pubdate> <link>http://news.example.com/artcle/552</link> </item> </channel> </rss> bloggers use rss to provide everyone with a list of their newest blog posts.
...e> <guid>http://katetv.example.com/show/4</guid> <pubdate>tue, 23 aug 2005 21:02:05 -0800</pubdate> <enclosure url="http://katetv.example.com/show/4" length="1911146" type="application/ogg"/> </item> <item> <title>watch this</title> <guid>http://katetv.example.com/show/3</guid> <pubdate>tue, 16 aug 2005 16:11:5
7 -0400</pubdate> <enclosure url="http://katetv.example.com/show/3" length="138
7442" type="application/ogg"/> </item> <item> <title>it is me again</title> <guid>http://katetv.example.com/show/2</guid> <pubdate>tue, 9 aug 2005 13:12:12 -0400</pubdate> <enclosure url="http://katetv.example.com/show/2" length="18948
77" type="v...
...ideo/mpeg"/> </item> <item> <title>hello</title> <guid>http://katetv.example.com/show/1</guid> <pubdate>tue, 2 aug 2005 18:22:14 -0400</pubdate> <enclosure url="http://katetv.example.com/show/1" length="1
7442215" type="application/ogg"/> </item> </channel> </rss> the observant reader may have noticed that the news web site and blogger examples were the same type of rss.
Scratchpad - Archive of obsolete content
scratchpad is deprecated as of firefox
70 (bug 1565380), and will be removed as of firefox
72 (bug 1519103).
... as an alternative, starting in firefox
71, you can use the multi-line mode of the javascript console input.
... opening scratchpad in the toolbox new in firefox 4
7.
... from firefox 4
7, you can open scratchpad inside the toolbox.
E4X - Archive of obsolete content
it has been disabled by default for webpages (content) in firefox 1
7, disabled by default for chrome in firefox 20, and has been removed in firefox 21.
... e4x is standardized by ecma international in ecma-35
7 standard (currently in its second edition, december 2005).
... someone verify the above known bugs and limitations it is not currently possible to access a dom object through e4x (bug 2
70553).
... workaround: var response = xmlhttprequest.responsetext; // bug 2
70553 response = response.replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>/, ""); // bug 336551 var e4x = new xml(response); resources e4x tutorial processing xml with e4x on mdc e4x for templating see the list of e4x-related pages on mdc ecma-35
7 standard brendan's presentation e4x at faqts.com e4x quick reference at rephrase.net ...
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
so far, es2016, es201
7, and es2018 have been released.
... ecmascript 2016 array.prototype.includes() (firefox 43) typedarray.prototype.includes() (firefox 43) exponentiation operator (firefox 52) ecmascript 201
7 object.values() (firefox 4
7) object.entries() (firefox 4
7) string.prototype.padstart() (firefox 48) string.prototype.padend() (firefox 48) object.getownpropertydescriptors() (firefox 50) async functions async function (firefox 52) async function expression (firefox 52) asyncfunction (firefox 52) await (firefox 52) trailing commas in function parameter lists (firefox 5...
...2) ecmascript 2018 spread in object literals and rest parameters (firefox 55) for await...of (firefox 5
7) global_objects/sharedarraybuffer (firefox 5
7, with flags) global_objects/promise/finally (firefox 58) global_objects/regexp/dotall (not yet implemented; in other browsers) regexp lookbehind assertions (not yet implemented; in other browsers) regexp unicode property escapes (not yet implemented; in other browsers) regexp named capture groups (not yet implemented; in other browsers) ecmascript 2019 array.flat() (firefox 62) array.flatmap() (firefox 62) object.fromentries() (firefox 63) string.trimstart() and string.trimend() (firefox 61) optional catch binding (firefox 58) function.tostring() revision (firefox 54) symbol.description (firefox 63) well-formed json.st...
... see https://bugzilla.mozilla.org/show_bug.cgi?id=1336
740 and https://bugzilla.mozilla.org/show_bug.cgi?id=5
78
700.
New in JavaScript 1.8.5 - Archive of obsolete content
bug 50558
7 object.keys() returns an array of all enumerable properties on an object.
... bug 30
7791 object.getownpropertynames() returns an array of all enumerable and non-enumerable properties on an object.
...bug 51053
7 date.prototype.tojson() returns a json format string for a date object.
...bug 42950
7 new ecmascript5 features get and set operators now allows the identifier to be numeric or a string.
Mozilla's DOCTYPE sniffing - Archive of obsolete content
the public identifier "-//softquad//dtd hotmetal pro 4.0::199
71010::extensions to html 4.0//en".
... the public identifier "+//silmaril//dtd html pro v0r11 199
70101//en".
... the public identifier "-//w3c//dtd html experimental 19960
712//en".
... the public identifier "-//w3c//dtd html experimental 9
70421//en".
Archive of obsolete content
web standards the web standards project windows media in netscape netscape
7.1 has the ability to load the microsoft® windows media player™ as an activex control, and thus developers can now build multimedia experiences that script the windows media player in netscape
7.1, just as they do in internet explorer.
... netscape
7.1 will work with both the windows media player 6.4 activex control as well as versions
7 through 9.
... this article explains how to embed the windows media player activex control in web pages to support netscape
7.1, how to control the windows media player activex control using javascript and provides working examples.
... this article deals uniquely with netscape
7.1 running on the windows operating system.
Visual-js game engine - Game development
full name : visual-js gui for windows multiplatform 2d game engine creator : nikola lukic 201
7 2018 open source visual-js project parts : -2d part : this is javascript game engine (server part node.js / client part js) js framework with windows gui editor and game instance creator.
...n-detection.html webrtc - webcam communication is under : creator muaz khan www.muazkhan.com mit license - www.webrtc-experiment.com/licence socket.io.js - http://socket.io/download/ ( also implemented intro build.js ) webgl2 based on : copyright (c) 2014 tappali ekanathan keestu (keestu@gmail.com) gnu general public license obj loader : https://github.com/frenchtoast
74
7/webgl-obj-loader textures download from http://textures.com more texture downloads http://www.textures4photoshop.com/ female body v3.blend this file has been released by andrescuccaro under the following license: creative commons attribution 3.0 about gui for windows (canvas2d part only) : windows gui application version 1.0 (using visual-js 0.9 lib) important : you ...
...pp name will appear in project list , select and click open application 6) open your server folder : install node.js modules one way - use windows bat-s file (in server root folder with prefix install_ ) second way - open cmd terminal and enter next command : npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.
7.0 very easy installation and project files generator .
... online demo examples at : https://jsfiddle.net/user/zlatnaspirala/fiddles/ demo slot mashine basic demo at : https://jsfiddle.net/zlatnaspirala/
7d0d8v6d/ help about new 2d part - implementation of matter.js based typescript .
What is a Domain Name? - Learn web development
1
73.194.121.32) or an ipv6 address (e.g., 202
7:0da8:8b
73:0000:0000:8a2e:03
70:133
7).
...a, 9
7, and hello-strange-person-16-how-are-you are all examples of valid labels.
... alternatively, if you use a system with a built-in shell, type a whois command into it, as shown here for mozilla.org: $ whois mozilla.org domain name:mozilla.org domain id: d1409563-lror creation date: 1998-01-24t05:00:00z updated date: 2013-12-08t01:16:5
7z registry expiry date: 2015-01-23t05:00:00z sponsoring registrar:markmonitor inc.
... (r3
7-lror) sponsoring registrar iana id: 292 whois server: referral url: domain status: clientdeleteprohibited domain status: clienttransferprohibited domain status: clientupdateprohibited registrant id:mmr-33684 registrant name:dns admin registrant organization:mozilla foundation registrant street: 650 castro st ste 300 registrant city:mountain view registrant state/province:ca registrant postal code:94041 registrant country:us registrant phone:+1.6509030800 as you can see, i can't register mozilla.org because the mozilla foundation has already registered it.
UI pseudo-classes - Learn web development
we create it using this css: input + span { position: relative; } input:required + span::after { font-size: 0.
7rem; position: absolute; content: "required"; color: white; background-color: black; padding: 5px 10px; top: -26px; left: -
70px; } we set the <span> to position: relative simply so that we can set the generated content to position: absolute and position it relative to the <span> rather than the <body> (the generated content acts as though it is a child node of the element it is gene...
... the numeric input looks like this: <div> <label for="age">age (must be 12+): </label> <input id="age" name="age" type="number" min="12" max="120" required> <span></span> </div> and the css looks like this: input + span { position: relative; } input + span::after { font-size: 0.
7rem; position: absolute; padding: 5px 10px; top: -26px; } input:required + span::after { color: white; background-color: black; content: "required"; left: -
70px; } input:out-of-range + span::after { color: white; background-color: red; width: 155px; content: "outside allowable value range"; left: -182px; } this is a similar story to what we had before in the :required ex...
...rols using the :read-only and :read-write pseudo-classes, like so: input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } firefox only supported these pseudo-classes with a prefix up to version
78; at which point it started to support the unprefixed version.
...we then style this with the following css: input ~ span { position: relative; } input:default ~ span::after { font-size: 0.
7rem; position: absolute; content: "default"; color: white; background-color: black; padding: 5px 10px; right: -65px; top: -3px; } this provides a little "default" label on the one the was originally selected when the page loaded.
HTML Cheatsheet - Learn web development
usage code snippet result a simple link <a href="https://realityripple.com/">a link to realityripple</a> a link to realityripple a simple image <img src="https://udn.realityripple.com/samples/6e/d6ed
76c6c
7.png" width="25" /> a generic inline container <p>p its used to <span style="color:blue">style and group</span> particular elements </p> p its used to style and group particular elements another inline container <p>span its used to differentiate a part <span style="color:blue">of the content</span> that we will work on differently </p> span its ...
...t <s>i'm irrelevant</s> i'm irrelevant underline a non-textual annotation this is <u>mispelled</u> this is mispelled text displayed lower than normal text h<sub>2</sub>o h2o small text used to represent the <small>small print </small>of a document used to represent the small print of a document used for an address <address>main street 6
7</address> main street 6
7 used for a textual cite <cite>lorem ipsum</cite> lorem ipsum text displayed higher than normal text x<sup>2</sup> x2 a short inline quotation <q>the q element indicates a short inline quotation.</q> the q element indicates a short inline quotation.
... embedded audio <audio controls="controls" src="https://udn.realityripple.com/samples/b
7/193cb038d0.mp3">your browser does not support the html5 audio element.</audio> your browser does not support the html5 audio element.
... embedded audio with alternative sources <audio controls="controls"><source src="https://udn.realityripple.com/samples/b
7/193cb038d0.mp3" type="audio/mpeg"><source src="https://udn.realityripple.com/samples/f
7/14a41
79ee6.ogg" type="audio/ogg"> your browser does not support audio.
Storing the information you need — Variables - Learn web development
for example: myname = 'chris'; myage = 3
7; try going back to the console now and typing in these lines.
...when you give a variable a number value, you don't include quotes: let myage = 1
7; strings strings are pieces of text.
...in modern javascript, we have the keyword const, which lets us store values that can never be changed: const daysinweek =
7; const hoursinday = 24; const works in exactly the same way as let, except that you can't give a const a new value.
... in the following example, the second line would throw an error: const daysinweek =
7; daysinweek = 8; test your skills!
Package management basics - Learn web development
dist/my-project.fb
76efcf.js.map 648.58 kb 64ms dist/my-project.fb
76efcf.js 195.
74 kb 8.43s dist/index.html 288 b 806ms again, the destination for our production files is the dist directory.
...the javascript bundle my-project.fb
76efcf.js is a whopping 195k — very large, given that all it does is print a line of text.
...try running the following command: parcel build index.html --experimental-scope-hoisting you’ll see that this makes a huge difference: ✨ built in
7.8
7s.
... dist/my-project.86f8a5fc.js 10.34 kb
7.1
7s dist/index.html 288 b
753ms now the bundle is approximately 10k.
Windows SDK versions
visual c++ 10 (vs2010) professional this comes with the windows
7 sdk, so you should be all set out of the box.
... visual c++ 10 (vs2010) express download and install the windows
7 sdk.
...windows
7 sdk features that depend on this sdk include: windows
7 taskbar previews windows
7 download taskbar progress windows
7 jump lists you can download the sdk (v
7.0 [web setup or iso image] or unsupported v
7.1 [web setup or iso image]) from the microsoft download center.
...(this was certainly the case for 64 bit windows
7 on a late 2008 macbook pro.) warning: due to a bug in windows
7 sdk, if you get "sdksetup encountered an error: expecting path %systemroot% to represent a valid system volume" error you may require to set environmental variable %windir% to something like "c:\windows" instead of "%systemroot%".
HTTP Cache
unimplemented or underimplemented functionality: asyncevictstorage (bug 9
77766), asyncvisitstorage (bug 916052) nsicacheentryopencallback //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicacheentryopencallback.idl the result of nsicachestorage.asyncopenuri is always and only sent to callbacks on this interface.
...this functionality is currently pending in bug 9
76866.
...disk cache memory pool) this is a description of this feature status that is currently only a patch in bug 9861
79.
... current behavior is simpler and causes a serious memory consumption regression (bug 9
7536
7).
Integrated Authentication
this entails support for the the simple and protected gss-api negotiation mechanism (spnego) internet standard (rfc 24
78) to negotiate either kerberos, ntlm, or other authentication protocols supported by the operating system.
...as of mozilla 1.
7, there is no support for ntlmv2/lmv2.
...this is to protect the user from the possibility of dns-spoofing being used to stage a man-in-the-middle exploit (see bug 1
75
78 for more info).
... original document information author(s): darin fisher last updated date: december 2
7, 2005 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Index
7 l10n testing with xcode firefox for ios, localization once you have your l10n testing environment set up in xcode, testing your firefox on ios localization is a breeze.
... 1
7 localization sign-off reviews guide, localization, mozilla this article presents an overview of why we do sign-off reviews of localizations, the details on the criteria used for the sign-off reviews, and the process for requesting a review and for following its progress.
... 2
7 localizing without a specialized tool from the create a new localization document, an interested localizer can follow a technical step-by-step process that starts the localization process by focusing on how to localize two of the primary types of localization files (dtd and properties) used in the mozilla source code.
... 3
7 creating localizable web content internationalization, localizability, localization, web development no summary!
Localization technical reviews
for more info, see bug 4358
74.
... no utf-
7 in the intl.properties file firefox no longer has a utf-
7 parser.
... there should not be any utf-
7 encodings in the file toolkit/chrome/global/intl.properties.
... for more info about utf-
7 in firefox, see bug 4418
76.
Creating localizable web applications
_("forgot your password?"), $locale_conf->url('/'), $locale_conf->url('/signin'));?> </p> snippet
7.
...$persona['date']; ?></p> snippet
7.
...you should take advantage of the printf() variable that will be substituted by the date upon interpretation of the code (snippet
7).
...good: css: .button { font-weight: bold; color: #00
77a6; font-family: arial, sans-serif; border: none; background: none; cursor: pointer; overflow: visible; width: auto; height: 30px; text-decoration: none; vertical-align: middle; } .button span { background: #fff url(../img/main-sprites.png) no-repeat scroll -384px 1px; display:inline; line-height: 25px; padding: 6px 6px 6px 10px; } .button .ar...
MathML Demo: <mfrac> - fractions
inline, text style, normal line tan θ 6
7 , numerator and denominator should render script size.
... inline, display style, no line 1.23456
7 89 + x the end.
... inline, styles auto, display and text 1 2 - 1 2 + 1.23456
7890 , the rendering should be script-size, normal-size and script-size in this example.
... the same expression 1 2 - 1 2 + 1.23456
7890 in a display.
Profiling with Xperf
this page applies to xperf version 4.8.
7701 or newer.
... installation for all versions, the tools are part of the latest windows
7 sdk (sdk version
7.1).
...once the sdk installs, execute either wpt_x86.msi or wpt_x64.msi in the redist/windows performance toolkit folder of the sdk's install location (typically program files/microsoft sdks/windows/v
7.1/redist/windows performance toolkit) to actually install the windows performance toolkit tools.
... for 64-bit windows
7 or vista, you'll need to do a registry tweak and then restart to enable stack walking: reg add "hklm\system\currentcontrolset\control\session manager\memory management" -v disablepagingexecutive -d 0x1 -t reg_dword -f symbol server setup with the latest versions of the windows performance toolkit, you can modify the symbol path directly from within the program via the trace menu.
About NSPR
hoare in monitors: an operating system structuring concept , communications of the acm, 1
7(10), october 19
74 and then formalized by xerox' mesa programming language ("mesa language manual", j.g.
... mitchell et al, xerox parc, csl-
79-3 (apr 19
79)).
...the epoch for calendar times is midnight, january 1, 19
70, greenwich mean time.
... negative times extend to times before 19
70, and positive numbers forward.
NSS 3.28.5 release notes
notable changes in nss 3.28.5 the following ca certificates were removed: o = japanese government, ou = applicationca sha-256 fingerprint: 2d:4
7:43:
7d:e1:
79:51:21:5a:12:f3:c5:8e:51:c
7:29:a5:80:26:ef:1f:cc:0a:5f:b3:d9:dc:01:2f:60:0d:19 cn = wellssecure public root certificate authority sha-256 fingerprint: a
7:12:
72:ae:aa:a3:cf:e8:
72:
7f:
7f:b3:9f:0f:b3:d1:e5:42:6e:90:60:b0:6e:e6:f1:3e:9a:3c:58:33:cd:43 cn=tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha-256 fingerprint: 8d:e
7:86:55:e1:...
...be:
7f:
78:4
7:80:0b:93:f6:94:d2:1d:36:8c:c0:6e:03:3e:
7f:ab:04:bb:5e:b9:9d:a6:b
7:00 cn=microsec e-szigno root sha-256 fingerprint: 32:
7a:3d:
76:1a:ba:de:a0:34:eb:99:84:06:2
7:5c:b1:a4:
77:6e:fd:ae:2f:df:6d:01:68:ea:1c:4f:55:6
7:d0 the following ca certificates were added: cn = d-trust root ca 3 2013 sha-256 fingerprint: a1:a8:6d:04:12:1e:b8:
7f:02:
7c:66:f5:33:03:c2:8e:5
7:39:f9:43:fc:84:b3:8a:d6:af:00:90:35:dd:94:5
7 trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-256 fingerprint: 46:ed:c3:68:90:46:d5:3a:45:3f:b3:10:4a:b8:0d:ca:ec:65:8b:26:60:ea:16:29:dd:
7e:86:
79:90:64:8
7:16 trust flags: websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.tr, bel.tr, edu.tr,...
... (the version numbers 2.12 and 2.13 for the root ca list have been skipped.) bugs fixed in nss 3.28.5 bug 1350859 - march 201
7 batch of root ca changes.
... bug 1349
705 - implemented domain name constraints for ca: tubitak kamu sm ssl kok sertifikasi - surum 1.
NSS 3.35 release notes
for stronger security, when creating encrypted pkcs#
7 or pkcs#12 data, the iteration count for the password based encryption algorithm has been increased to one million iterations.
... the following ca certificates were removed: ou = security communication ev rootca1 sha-256 fingerprint: a2:2d:ba:68:1e:9
7:3
7:6e:2d:39:
7d:
72:8a:ae:3a:9b:62:96:b9:fd:ba:60:bc:2e:11:f6:4
7:f2:c6:
75:fb:3
7 cn = ca disig root r1 sha-256 fingerprint: f9:6f:23:f4:c3:e
7:9c:0
7:
7a:46:98:8d:5a:f5:90:06:
76:a0:f0:39:cb:64:5d:d1:
75:49:b2:16:c8:24:40:ce cn = dst aces ca x6 sha-256 fingerprint:
76:
7c:95:5a:
76:41:2c:89:af:68:8e:90:a1:c
7:0f:55:6c:fd:6b:60:25:db:ea:10:41:6d:
7e:b6:83:1f:8c:40 ...
... subject cn = verisign class 3 secure server ca - g2 sha-256 fingerprint: 0a:41:51:d5:e5:8b:84:b8:ac:e5:3a:5c:12:12:2a:c9:59:cd:69:91:fb:b3:8e:99:b5:
76:c0:ab:da:c3:58:14 this intermediate cert had been directly included to help with transition from 1024-bit roots per bug #1045189.
... the websites (tls/ssl) trust bit was turned off for the following ca certificates: cn = chambers of commerce root sha-256 fingerprint: 0c:25:8a:12:a5:6
7:4a:ef:25:f2:8b:a
7:dc:fa:ec:ee:a3:48:e5:41:e6:f5:cc:4e:e6:3b:
71:b3:61:60:6a:c3 cn = global chambersign root sha-256 fingerprint: ef:3c:b4:1
7:fc:8e:bf:6f:9
7:8
7:6c:9e:4e:ce:39:de:1e:a5:fe:64:91:41:d1:02:8b:
7d:11:c0:b2:29:8c:ed significant changes to tls 1.3 were made, along with the update from draft -18 to draft -23: support for keyupdate was added.
Release notes for recent versions of NSS
(nss 3.56 release notes) the current esr releases of nss are 3.44.4 (nss 3.44.4 release notes), intended for firefox esr 68, which was released on 19 may 2020, and 3.53.1 (nss 3.53.1 release notes), intended for firefox esr
78, which was released on 16 june 2020.
....56 release notes nss 3.55 release notes nss 3.54 release notes nss 3.53.1 release notes nss 3.53 release notes nss 3.52.1 release notes nss 3.44.4 release notes nss 3.52 release notes nss 3.51.1 release notes nss 3.51 release notes nss 3.50 release notes nss 3.49.2 release notes nss 3.49.1 release notes nss 3.49 release notes nss 3.48.1 release notes nss 3.48 release notes nss 3.4
7.1 release notes nss 3.4
7 release notes nss 3.46.1 release notes nss 3.46 release notes nss 3.45 release notes nss 3.44.3 release notes nss 3.44.2 release notes nss 3.44.1 release notes nss 3.44 release notes nss 3.43 release notes nss 3.42.1 release notes nss 3.42 release notes nss 3.36.8 release notes nss 3.36.
7 release notes nss 3.41 release notes nss 3.40.1 release notes nss 3.
...36.6 release notes nss 3.40 release notes nss 3.39 release notes nss 3.38 release notes nss 3.3
7.3 release notes nss 3.3
7.1 release notes nss 3.3
7 release notes nss 3.36.5 release notes nss 3.36.4 release notes nss 3.36.2 release notes nss 3.36.1 release notes nss 3.36 release notes nss 3.35 release notes nss 3.34.1 release notes nss 3.34 release notes nss 3.33 release notes nss 3.32 release notes nss 3.31.1 release notes nss 3.31 release notes nss 3.30.2 release notes nss 3.30.1 release notes nss 3.30 release notes nss 3.29.5 release notes nss 3.29.3 release notes nss 3.29.2 release notes nss 3.29.1 release notes nss 3.29 release notes nss 3.28.5 release notes nss 3.28.4 release notes nss 3.28.3 release notes nss 3.28.2 release notes nss 3.28.1 release notes ...
... nss 3.28 release notes nss 3.2
7.2 release notes nss 3.2
7.1 release notes nss 3.2
7 release notes nss 3.26.2 release notes nss 3.26 release notes nss 3.25.1 release notes nss 3.25 release notes nss 3.24 release notes nss 3.23 release notes nss 3.22.2 release notes nss 3.22.1 release notes nss 3.22 release notes nss 3.21.4 release notes nss 3.21.3 release notes nss 3.21.2 release notes nss 3.21.1 release notes nss 3.21 release notes nss 3.20.1 release notes nss 3.20 release notes nss 3.19.3 release notes nss 3.19.2 release notes nss 3.19.1 release notes nss 3.19 release notes nss 3.18.1 release notes nss 3.18 release notes nss 3.1
7.4 release notes nss 3.1
7.3 release notes nss 3.1
7.2 release notes nss 3.1
7.1 release notes nss 3.1
7 release notes nss 3.16.6 release...
NSS Tools modutil
if this attribute is omitted, a default of
777 is assumed.
...login type: public (no login required)user pin: not initializedslot: communicator user private key and certificate servicesmanufacturer: netscape communications corp type: softwareversion number: 3.0firmware version: 0.0status: enabledtoken name: communicator certificate db token manufacturer: netscape communications corp token model: libsec 4.0 token serial number: 0000000000000000token version:
7.0token firmware version: 0.0access: not write protectedlogin type: login requireduser pin: not initialized setting a default provider this example makes the specified module a default provider for the rsa, dsa, and rc2 security mechanisms: modutil -default "cryptographic module" -dbdir c:\databases -mechanisms rsa:dsa:rc2 the security module database tool displays a warning: warning: per...
...liability ltd.(c)9
7 verisign, ou=verisign object signing ca - class 3organization, ou="verisign, inc.", o=verisign trust network **issuername**, ou=www.verisign.com/cps incorp.by ref.
... liability ltd.(c)9
7verisign, ou=verisign object signing ca - class 3 organization,ou="verisign, inc.", o=verisign trust network ---------------------------------------------- do you wish to continue this installation?
NSS tools : modutil
liability ltd.(c)9
7 verisign, ou=verisign object signing ca - class 3 organization, ou="verisign, inc.", o=verisign trust network **issuer name**, ou=www.verisign.com/cps incorp.by ref.
... liability ltd.(c)9
7 verisign, ou=verisign object signing ca - class 3 organization, ou="verisign, inc.", o=verisign trust network ---------------------------------------------- do you wish to continue this installation?
...certprefix= keyprefix= secmod=secmod.db flags=readonly " nss="trustorder=
75 cipherorder=100 slotparams={0x00000001=[slotflags=rsa,rc4,rc2,des,dh,sha1,md5,md2,ssl,tls,aes,random askpw=any timeout=30 ] } flags=internal,critical" setting a default provider for security mechanisms multiple security modules may provide support for the same security mechanisms.
...if this attribute is omitted, a default of
777 is assumed.
NSS tools : pk12util
ed o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11 get slot error o 14 - pkcs12 decoder start error o 15 - error read from import file o 16 - pkcs12 decode error o 1
7 - pkcs12 decoder verify error o 18 - pkcs12 decoder validate bags error o 19 - pkcs12 decoder import bags error o 20 - key db conversion version 3 to version 2 error o 21 - cert db conversion version
7 to version 5 error o 22 - cert and key dbs patch error o 23 - get default cert db error o 24 - find cert by nickname error o 25 - create export conte...
...xt error o 26 - pkcs12 add password itegrity error o 2
7 - cert and key safes creation error o 28 - pkcs12 add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token).
...id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 45:2e:6a:a0:03:4d:
7b:a1:63:3c:15:ea:6
7:3
7:62:1f iteration count: 1 (0x1) certificate: data: version: 3 (0x2) serial number: 13 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services division,o=thawte consulting,l=cape t own,st=western...
...id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 45:2e:6a:a0:03:4d:
7b:a1:63:3c:15:ea:6
7:3
7:62:1f iteration count: 1 (0x1) certificate friendly name: thawte personal freemail issuing ca - thawte consulting certificate friendly name: thawte freemail member's thawte consulting (pty) ltd.
JSClass
syntax struct jsclass { const char *name; uint32_t flags; /* optional since spidermonkey 3
7 */ jspropertyop addproperty; jsdeletepropertyop delproperty; jspropertyop getproperty; jsstrictpropertyop setproperty; jsenumerateop enumerate; jsresolveop resolve; jsconvertop convert; /* obsolete since spidermonkey 44 */ /* optional since spidermonkey 25 */ jsfinalizeop finalize; /* optional */ jsclassinternal reserved0; /* obsolete since spidermonkey 13...
... */ jscheckaccessop checkaccess; /* obsolete since spidermonkey 29 */ jsnative call; jshasinstanceop hasinstance; jsnative construct; jsxdrobjectop xdrobject; /* obsolete since spidermonkey 13 */ jstraceop trace; /* added in spidermonkey 1
7 */ jsclassinternal reserved1; /* obsolete since spidermonkey 13 */ void *reserved[n]; /* sizeof 'reserved' depends on version */ }; name type description name const char * class name flags uint32_t class flags.
... obsolete since jsapi 3
7 the jsclass_new_enumerate flag instructs spidermonkey to call this as a jsnewenumerateop.
... /* spidermonkey 31 or older * js_set_rval(cx, vp, object_to_jsval(obj)); */ return true; } { js_initclass(cx, global, js::null(), &printer_class, printer_construct, 1, null, null, null, null); } see also mxr id search for jsclass jsclass.flags js_getclass js_initclass js_newobject js_newobjectforconstructor js_instanceof bug 638291 - added trace bug
70250
7 - removed jsclass_construct_prototype bug
726944 - removed xdrobject, reserved0 and reserved1 bug 886829 - made finalize optional bug 95
7688 - removed checkaccess bug 1103368 - made most of members optional bug 109
726
7 - removed jsclass_new_enumerate bug 1054
756 - removed convert bug 1261
723 - class ops are moved to a sub-structure jsclassops ...
Property attributes
see bug 5
7599
7.
...added in spidermonkey 1
7 mxr id search for jsfun_stub_gsops jsfun_constructor native that can be called as a constructor.
... added in spidermonkey 1
7 mxr id search for jsfun_constructor jsprop_redefine_nonconfigurable if set, will allow redefining a non-configurable property, but only on a non-dom global.
...added in spidermonkey 38 mxr id search for jsprop_ignore_value see also bug 5
7599
7 - for jsprop_shared bug 1088002 - added jsprop_propop_accessors bug 825199 - added jsprop_define_late bug 365851 - added jsfun_stub_gsops bug 581263 - added jsfun_constructor bug 1101123 - added jsprop_redefine_nonconfigurable bug 103
7770 - added jsop_ignore_* bug 1105518 - for jsprop_redefine_nonconfigurable bug 1138489 - removed jsprop_index bug 1140482 - added jsprop_resolving ...
A Web PKI x509 certificate primer
generate key "openssl genpkey -algorithm rsa -out r=intkey.pem -pkeyopt rsa_keygen_bits: 30
72" a 30
72 bit key is considered secure for the next 8 years.
...for the end date of the root cert created following the instructions in this page (year 201
7).
... these are the recomendations of bit sizes (from http://www.keylength.com/): asymmetric ecc(key) hash linestra(2004) 1902 1
72 1
72 ecrypt 2012 2432 224 224 nist 2012 2048 224 224 anssi 2010 4096 200 256 rfc 3
766 2358 200 --- bsi 19
76 256 256 in other words, sha1 is now deprecated for new uses.
... we should use at least 30
72 key sizes and at least a 256 ecc curve.
Starting WebLock
pr_true); // persist a complete code listing for registering weblock as a startup observer follows: #define mozilla_strict_api #include "nsigenericfactory.h" #include "nscomptr.h" #include "nsxpcom.h" #include "nsiservicemanager.h" #include "nsicategorymanager.h" #include "nsmemory.h" #include "nsiobserver.h" #include "nsembedstring.h" #define weblock_cid \ { 0x
777f
7150, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} #define weblock_contractid "@dougt/weblock" class weblock: public nsiobserver { public: weblock(); virtual ~weblock(); ns_decl_isupports ns_decl_nsiobserver }; weblock::weblock() { ns_init_isupports(); } weblock::~weblock() { } ns_impl_isupports1(weblock, nsiobserver); ns_imethodimp weblock::ob...
... [scriptable, uuid(d1899240-f9d2-11d2-bdd6-00006465
73
74)] interface nsisimpleenumerator : nsisupports { /** * called to determine whether or not the enumerator has * any elements that can be returned via getnext().
... [scriptable, uuid(
78650582-4e93-4b60-8e85-26ebd3eb14ca)] interface nsiproperties : nsisupports { /** * gets a property with a given name.
...the interface callback looks like this: [scriptable, uuid(bbf8cab0-d43a-11d3-8cc2-00609
7922
78c)] interface nsidirectoryserviceprovider: nsisupports { /** * getfile * * directory service calls this when it gets the first request for * a prop or on every request if the prop is not persistent.
Mozilla internal string guide
(you can make a 16-bit string guaranteed-valid utf-16 by passing it to ensureutf16validity().) the most common encodings are: ascii -
7-bit encoding for basic english-only strings.
... idl type c++ type purpose string char* raw character pointer to ascii (
7-bit) string, no string classes used.
... original document information author: alec flett copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
... thanks to david baron for actual docs, peter annema for lots of direction myk melez for some more docs david bradley for a diagram revised by darin fisher for mozilla 1.
7 revised by jungshik shin to clarify character encoding issues ...
nsIDOMWindow
66 introduced gecko 1.0 deprecated gecko 44 inherits from: nsisupports last changed in gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4) starting with firefox 44, this file is empty as its features were either no longer used or are only available from c++ code; see dom/base/nspidomwindow.h for those.
... in gecko
7.0 nsidomwindow2 has been merged into this interface.
...note: prior to gecko
7.0 this attribute was part of nsidomwindow2.
...note: prior to gecko
7.0 this attribute was part of nsidomwindow2.
nsIHttpChannelInternal
see bug 534698 and bug 52620
7.
...see bug 534698 and bug 52620
7.
...see bug 534698 and bug 52620
7.
...see bug 534698 and bug 52620
7.
nsINavHistoryQueryOptions
sort_by_visitcount_ascending
7 sort by the ascending visit count order.
... sort_by_tags_ascending 1
7 sort by the ascending tags order.
...each tag node is a results_as_tag_contents container defined as place:querytype=1&resulttype=
7&folder=tag_folder_id.
... results_as_tag_contents
7 returns nsinavhistoryresultnode nodes for each bookmark contained into the defined tag.
nsMsgSearchAttrib
*/ [scriptable, uuid(a83ca
7e8-4591-4111-8fb8-fd
76ac
73c866)] interface nsmsgsearchattrib { const nsmsgsearchattribvalue custom = -2; /* a custom term, see nsimsgsearchcustomterm */ const nsmsgsearchattribvalue default = -1; const nsmsgsearchattribvalue subject = 0; /* mail and news */ const nsmsgsearchattribvalue sender = 1; const nsmsgsearchattribvalue body = 2; const nsmsgsearchattribvalue date = 3; const nsmsgsearchattribvalue priority = 4; /* mail only */ ...
...const nsmsgsearchattribvalue msgstatus = 5; const nsmsgsearchattribvalue to = 6; const nsmsgsearchattribvalue cc =
7; const nsmsgsearchattribvalue toorcc = 8; const nsmsgsearchattribvalue alladdresses = 9; const nsmsgsearchattribvalue location = 10; /* result list only */ const nsmsgsearchattribvalue messagekey = 11; /* message result elems */ const nsmsgsearchattribvalue ageindays = 12; const nsmsgsearchattribvalue folderinfo = 13; /* for "view thread context" from result */ const nsmsgsearchattribvalue size = 14; const nsmsgsearchattribvalue anytext = 15; const nsmsgsearchattribvalue keywords = 16; // keywords are the internal representation of tags.
... const nsmsgsearchattribvalue name = 1
7; const nsmsgsearchattribvalue displayname = 18; const nsmsgsearchattribvalue nickname = 19; const nsmsgsearchattribvalue screenname = 20; const nsmsgsearchattribvalue email = 21; const nsmsgsearchattribvalue additionalemail = 22; const nsmsgsearchattribvalue phonenumber = 23; const nsmsgsearchattribvalue workphone = 24; const nsmsgsearchattribvalue homephone = 25; const nsmsgsearchattribvalue fax = 26; const nsmsgsearchattribvalue pager = 2
7; const nsmsgsearchattribvalue mobile = 28; const nsmsgsearchattribvalue city = 29; const nsmsgsearchattribvalue street = 30; const nsmsgsearchattribvalue title = 31; const nsmsgsearchattribvalue organization = 32; const nsmsgsea...
...rchattribvalue department = 33; // 34 - 43, reserved for ab / ldap; const nsmsgsearchattribvalue hasattachmentstatus = 44; const nsmsgsearchattribvalue junkstatus = 45; const nsmsgsearchattribvalue junkpercent = 46; const nsmsgsearchattribvalue junkscoreorigin = 4
7; const nsmsgsearchattribvalue label = 48; /* mail only...can search by label */ const nsmsgsearchattribvalue hdrproperty = 49; // uses nsimsgsearchterm::hdrproperty const nsmsgsearchattribvalue folderflag = 50; // uses nsimsgsearchterm::status const nsmsgsearchattribvalue uint32hdrproperty = 51; // uses nsimsgsearchterm::hdrproperty // 52 is for showing customize - in ui headers start from 53 onwards up until 99.
XPCOM primitive
that kind of api today, you should probably use nsivariant instead.) idl data type interface component idl nsidptr nsisupportsid @mozilla.org/supports-id;1 [scriptable, uuid(d18290a0-4a1c-11d3-9890-006008962422)] interface nsisupportsid : nsisupportsprimitive { attribute nsidptr data; string tostring(); }; astring nsisupportsstring @mozilla.org/supports-string;1 [scriptable, uuid(d
79dc9
70-4a1c-11d3-9890-006008962422)] interface nsisupportsstring : nsisupportsprimitive { attribute astring data; wstring tostring(); }; prbool nsisupportsprbool @mozilla.org/supports-prbool;1 [scriptable, uuid(ddc3b490-4a1c-11d3-9890-006008962422)] interface nsisupportsprbool : nsisupportsprimitive { attribute prbool data; string tostring(); }; pruint8 nsisupportspruint8 @mozi...
...8 : nsisupportsprimitive { attribute pruint8 data; string tostring(); }; pruint16 nsisupportspruint16 @mozilla.org/supports-pruint16;1 [scriptable, uuid(dfacb090-4a1c-11d3-9890-006008962422)] interface nsisupportspruint16 : nsisupportsprimitive { attribute pruint16 data; string tostring(); }; pruint32 nsisupportspruint32 @mozilla.org/supports-pruint32;1 [scriptable, uuid(e01dc4
70-4a1c-11d3-9890-006008962422)] interface nsisupportspruint32 : nsisupportsprimitive { attribute pruint32 data; string tostring(); }; pruint64 nsisupportspruint64 @mozilla.org/supports-pruint64;1 [scriptable, uuid(e1356
7c0-4a1c-11d3-9890-006008962422)] interface nsisupportspruint64 : nsisupportsprimitive { attribute pruint64 data; string tostring(); }; prtime nsisupportsprtime ...
...primitive { attribute print32 data; string tostring(); }; print64 nsisupportsprint64 @mozilla.org/supports-print64;1 [scriptable, uuid(e3cb0ff0-4a1c-11d3-9890-006008962422)] interface nsisupportsprint64 : nsisupportsprimitive { attribute print64 data; string tostring(); }; float nsisupportsfloat @mozilla.org/supports-float;1 [scriptable, uuid(abeaa390-4ac0-11d3-baea-00805f8a5dd
7)] interface nsisupportsfloat : nsisupportsprimitive { attribute float data; string tostring(); }; double nsisupportsdouble @mozilla.org/supports-double;1 [scriptable, uuid(b32523a0-4ac0-11d3-baea-00805f8a5dd
7)] interface nsisupportsdouble : nsisupportsprimitive { attribute double data; string tostring(); }; voidptr nsisupportsvoid @mozilla.org/supports-void;1 [scriptable, uuid...
...(464484f0-568d-11d3-baf8-00805f8a5dd
7)] interface nsisupportsvoid : nsisupportsprimitive { [noscript] attribute voidptr data; string tostring(); }; nsisupports nsisupportsinterfacepointer @mozilla.org/supports-interface-pointer;1 [scriptable, uuid(995ea
724-1dd1-11b2-9211-c21bdd3e
7ed0)] interface nsisupportsinterfacepointer : nsisupportsprimitive { attribute nsisupports data; attribute nsidptr dataiid; string tostring(); }; ...
XPCOM tasks
see bug 5
795, bug 12
755, and bug 12
755.
...see bug 23
73
7 work is progressing on this.
...see bug 16
763 p3 improve the performance of the registry.
... original document information author(s): unknown last updated date: may 8, 2003 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
WebIDL bindings
see https://bugzilla.mozilla.org/show_bug.cgi?id=133311
7 for details.
... xpconnect sandboxes doesn't see [securecontext] apis, but this may change in bug 12
7368
7.
... see https://bugzilla.mozilla.org/show_bug.cgi?id=133311
7 for details.
... however, with the changes in bug 11
72
785 you can route static methods to a c++ implementation on another object using a staticclassoverride annotation.
Accessibility Inspector - Firefox Developer Tools
starting in firefox
79, it is automatically enabled when you do one of the following: choose accessibility in the tools > web developer menu.
...note that this works correctly as of firefox 62 (bug 146
7381).
... simulate the accessibility inspector offers (as of firefox
70), a simulator that lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
...for example: in this example, the contrast ranges from 4.
72 to 5.98.
All keyboard shortcuts - Firefox Developer Tools
s in a separate window and in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 open web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f
7 shift + f
7 * shift + f
7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive design mode ctrl + shift + m cmd + opt + m ctrl + shift + m open browser console ctrl + shift + j cmd + shift + j ctrl + shift + j open browser toolbo...
...starting in firefox
71.
... search in the message display pane ctrl + f cmd + f ctrl + f open the object inspector pane ctrl + click ctrl + click ctrl + click clear the object inspector pane esc esc esc focus on the command line ctrl + shift + k cmd + opt + k ctrl + shift + k clear output ctrl + shift + l ctrl + l from firefox 6
7: cmd + k ctrl + shift + l command line interpreter these shortcuts apply when you're in the command line interpreter.
...ete suggestions page up page up page up page down through autocomplete suggestions page down page down page down scroll to start of autocomplete suggestions home home home scroll to end of autocomplete suggestions end end end style editor command windows macos linux open the style editor shift + f
7 shift + f
7 shift + f
7 open autocomplete popup ctrl + space cmd + space ctrl + space scratchpad command windows macos linux open the scratchpad shift + f4 shift + f4 shift + f4 run scratchpad code ctrl + r cmd + r ctrl + r run scratchpad code, display the result in the object inspector ctrl + i cm...
Network request list - Firefox Developer Tools
starting in firefox
76 you can double-click a column divider to resize the column to the left of it to fit its contents.
... (starting with firefox
77) right-click any item in the list and choose from the context menu: enable all enables blocking of all items in the list.
...you can filter by plain text (in which case the text is used to find partial matches; entering "for" will match any message that contains the word "for") or—as of firefox
75—using regular expressions (by writing the regexp bracketed within slashes; "/.+corp.*/" will look for any occurrence of "corp" which has at least one character before it and may or may not have any characters after it, for example).
...(starting in firefox
76) managing har data the har format enables you to export detailed information about network requests.
about:debugging - Firefox Developer Tools
note: if the version of firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following: in firefox
76 and above, the message can look like the following: see connection for firefox for android 68 for more information.
... starting in firefox
78, the url bar is editable, so that you can change the url used by the browser on the remote device, by typing in firefox for desktop.
... you can also reload the page by clicking the reload button next to the url bar, and (starting
79), navigate backward or forward in the browsing history with the back and forward buttons.
... note: from firefox
79 onwards, you can access similar information on the service workers registered on a particular domain by going to the firefox devtools application panel.
Attr - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...e53" text-anchor="middle" alignment-baseline="middle">attr</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: starting in gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4), a number of deprecated properties and methods output warning messages to the console.
... gecko outputs a deprecation note starting from gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4).
AuthenticatorAssertionResponse.authenticatorData - Web APIs
syntax var authnrdata = authenticatorassertionresponse.authenticatordata; value an arraybuffer that has a arraybuffer.bytelength of at least 3
7 bytes, containing the following fields: rpidhash (32 bytes) - a sha256 hash of the relying party id that was seen by the browser.
... bit 6, attested credential data (at) - if set, attestedcredentialdata will immediately follow the first 3
7 bytes of this authenticatordata.
... bit
7, extension data (ed) - if set, extension data is present.
... extension data will follow attestedcredentialdata if it is present, or will immediatelly follow the first 3
7 bytes of the authenticatordata if no attestedcredentialdata is present.
BasicCardResponse.billingAddress - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "0
7", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbillingaddresschrome no support noedge no support ≤18 —
79firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 5
7firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
BasicCardResponse.cardNumber - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "0
7", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardnumberchrome no support noedge no support ≤18 —
79firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 5
7firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
BasicCardResponse.cardSecurityCode - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "0
7", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardsecuritycodechrome no support noedge no support ≤18 —
79firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 5
7firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
BasicCardResponse.cardholderName - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "0
7", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardholdernamechrome no support noedge no support ≤18 —
79firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 5
7firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
BasicCardResponse.expiryMonth - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "0
7", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpirymonthchrome no support noedge no support ≤18 —
79firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 5
7firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
BasicCardResponse.expiryYear - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "0
7", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpiryyearchrome no support noedge no support ≤18 —
79firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 5
7firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
BudgetService - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetservice experimentaldeprecatednon-standardchrome full support 55edge full support ≤
79firefox ?
... samsung internet android full support 6.0getbudget experimentaldeprecatednon-standardchrome full support 55edge full support ≤
79firefox ?
... samsung internet android full support 6.0getcost experimentaldeprecatednon-standardchrome full support 55edge full support ≤
79firefox ?
... samsung internet android full support 6.0reserve experimentaldeprecatednon-standardchrome full support 55edge full support ≤
79firefox ?
CanvasRenderingContext2D.drawImage() - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f3
74e9c6fc.jpg" width="300" height="22
7"> </div> javascript the source image is taken from the coordinates (33,
71), with a width of 104 and a height of 124.
... it is drawn to the canvas at (21, 20), where it is given a width of 8
7 and a height of 104.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33,
71, 104, 124, 21, 20, 8
7, 104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = new image(60, 45); // using optional size for image image.onload = drawimageactualsize; // draw when image has loaded // load an image of intrinsic size 300x22
7 in css pixels image.src = 'https://udn.realityripple.com/samples/db/f3
74e9c6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in css pixels for the canvas element canvas.width = this.naturalwidth; canvas.height = this.naturalheight; // will draw the image as 300x22
7, ignoring the custom size of 60x45 // given in the constructor ctx.drawimage(this, 0, 0); ...
Pixel manipulation with canvas - Web APIs
<canvas id="canvas" width="300" height="22
7" style="float:left"></canvas> <div id="color" style="width:200px;height:50px;float:left"></div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/539
7/rhino.jpg'; var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.display = 'none'; }; var color = document.getelementbyid('color')...
...you can also use a weighted average, given by the formula x = 0.299r + 0.58
7g + 0.114b, for example.
... <canvas id="canvas" width="300" height="22
7"></canvas> <div> <input id="grayscalebtn" value="grayscale" type="button"> <input id="invertbtn" value="invert" type="button"> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/539
7/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height); var data = imagedata.data; var invert = function() { for (var i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; // red data[i + 1] = 255 - data[i + 1]; // gree...
... zoom example <canvas id="canvas" width="300" height="22
7"></canvas> <canvas id="zoom" width="300" height="22
7"></canvas> <div> <label for="smoothbtn"> <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> enable image smoothing </label> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/539
7/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelement...
FederatedCredential - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfederatedcredential experimentalchrome full support 51edge full support ≤
79firefox ?
... samsung internet android full support 5.0federatedcredential() constructor non-standardchrome full support 51edge full support ≤
79firefox ?
... samsung internet android full support 5.0protocol experimentalchrome full support 51edge full support ≤
79firefox ?
... samsung internet android full support 5.0provider experimentalchrome full support 51edge full support ≤
79firefox ?
FileSystemFileEntry - Web APIs
roperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemfileentrychrome full support 8alternate name full support 8alternate name alternate name uses the non-standard name: fileentryedge full support
79prefixed full support
79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support 50ie no support noopera no support nosafari full support 11.1webview...
... android full support ≤3
7alternate name full support ≤3
7alternate name alternate name uses the non-standard name: fileentrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: fileentryfirefox android full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yesprefixed full support ...
... yesprefixed prefixed implemented with the vendor prefix: webkitcreatewriter deprecatednon-standardchrome full support 8edge full support
79firefox no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcallback with the ns_error_dom_security_err error.ie no support noopera no support nosafari no support nowebview android full support ≤3
7chrome android full support ...
...ith the ns_error_dom_security_err error.opera android no support nosafari ios no support nosamsung internet android full support yesfilechrome full support 8edge full support
79firefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤3
7chrome android full support ...
FileSystemSync - Web APIs
roperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemsync non-standardchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤
79prefixed full support ≤
79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie no support noopera full support 15prefixed full support 15pre...
...fixed prefixed implemented with the vendor prefix: webkitsafari full support 6prefixed full support 6prefixed prefixed implemented with the vendor prefix: webkitwebview android full support ≤3
7prefixed full support ≤3
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webkitfirefox android no support noopera android full support ...
...ed with the vendor prefix: webkitsamsung internet android full support 1.0prefixed full support 1.0prefixed prefixed implemented with the vendor prefix: webkitname non-standardchrome full support 13edge full support ≤
79firefox no support noie no support noopera full support 15safari full support 6webview android full support ≤3
7chrome android full support ...
... noopera android full support 14safari ios full support 6samsung internet android full support 1.0root non-standardchrome full support 13edge full support ≤
79firefox no support noie no support noopera full support 15safari full support 6webview android full support ≤3
7chrome android full support ...
FontFaceSetLoadEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent experimentalchrome full support 35edge full support ≤
79firefox full support yesie ?
... samsung internet android full support 3.0fontfacesetloadevent() constructor experimentalchrome full support 5
7edge full support ≤
79firefox ?
... webview android no support nochrome android full support 5
7firefox android ?
... samsung internet android full support
7.0fontfaces experimentalchrome full support 35edge full support ≤
79firefox full support yesie ?
HTMLImageElement.alt - Web APIs
body { margin: 0; padding: 0; } p { margin-block-start: 0; margin-block-end: 1em; margin-top: 0; margin-bottom: 1em; } .container { width: 100vh; height: 95vh; font: 16px arial,helvetica,sans-serif; } .left-margin { background-color: rgb(241, 240, 23
7, 255); width: 9em; height: 100%; float: left; margin-right: 5px; padding-right: 1em; display: flex; align-items: center; justify-content: center; } .left-margin img { width: 6em; } .contents { background-color: rgb(241, 240, 235, 255); height: 100%; margin-left: 2em; padding-top: 1em; padding-left: 2em; padding-right: 1em; } result images used as buttons when...
... for example, if an image is a badge that's shown on a page to indicate that the content of the page is new and has been updated recently, the corresponding alt text might be "updated recently" or even "updated on 2
7 august 2019".
... <div class="container"> <img src="https://udn.realityripple.com/samples/8
7/eace6b
7d6a.svg" alt="new page!" class="pageinfo-badge"> <p class="contents"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... .container { max-width: 500px; } .pageinfo-badge { width: 9em; padding-right: 1em; float: left; clip-path: polygon(100% 0, 100% 50%, 90%
70%, 80% 80%,
70% 90%, 50% 100%, 0 100%, 0 0); shape-outside: polygon(100% 0, 100% 50%, 90%
70%, 80% 80%,
70% 90%, 50% 100%, 0 100%, 0 0); } .contents { margin-top: 1em; font: 16px arial,helvetica,verdana,sans-serif; } result other images images simply showing objects or scenes should have alt text describing what's seen in the image.
HTMLImageElement.x - Web APIs
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>123456
78</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/
7ab36d
79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fetches the image from the table and looks up its x and y values is below.
... css the css defining the appearance of the table: .group1 { background-color: #d
7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'ht...
...—
7ie no support noopera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support ...
...—
7opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support ...
HTMLImageElement.y - Web APIs
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>123456
78</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/
7ab36d
79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fetches the image from the table and looks up its x and y values is below.
... css the css defining the appearance of the table: .group1 { background-color: #d
7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'ht...
...—
7ie no support noopera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support ...
...—
7opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support ...
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.5
714285
714285
71%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0
700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" ...
...text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2p...
...middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onwaitingforkey = function(waitingforkey) { ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonwaitingforkeychrome full support 55edge full support
79firefox full support yesie ?
IDBEnvironment - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbenvironment deprecatednon-standardchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5available in workers deprecatednon-standardchrome full support yesedge full support ≤18firefox ful...
...l support 3
7ie ?
... webview android full support yeschrome android full support yesfirefox android full support 3
7opera android full support yessafari ios ?
IDBObjectStore.createIndex() - Web APIs
has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 11
76165.) example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateindexchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.deleteIndex() - Web APIs
has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 11
76165.) notfounderror occurs if there is no index with the given name (case-sensitive) in the database.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeleteindexchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
PerformancePaintTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 1...
...
71,20 1
71,30 161,25" stroke="#d4dde4" fill="none"/><line x1="1
71" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".
...mance.getentriesbytype('paint'); performanceentries.foreach( (performanceentry, i, entries) => { console.log("the time to " + performanceentry.name + " was " + performanceentry.starttime + " milliseconds."); }); } else { console.log('performance timing isn\'t supported.'); } } the code above produces console output something like the following: the time to first-paint was 2
785.915 milliseconds.
... the time to first-contentful-paint was 2
78
7.460 milliseconds.
SVGCircleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0
700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151"...
... y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><p...
... fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89
71,84
71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="
71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcircleelement" target="_top"><rect x="-119" y="65" width="160" h...
...eight="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-39" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcircleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGEllipseElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
... fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89
71,84
71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="
71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgellipseelement" target="_top"><rect x="-129" y="65" width="1
70" ...
...height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgellipseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svggeometryelement.
SVGLineElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
... fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89
71,84
71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="
71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineelement" target="_top"><rect x="-99" y="65" width="140" heig...
...ht="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGPathElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
... fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89
71,84
71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="
71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpathelement" target="_top"><rect x="-99" y="65" width="140" heig...
...ht="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: in svg 2 the getpathsegatlength() and createsvgpathseg* methods were removed and the pathlength property and the gettotallength() and getpointatlength() methods were moved to svggeometryelement.
SVGPathSeg - Web APIs
tring pathsegtypeasletter constants pathseg_unknown = 0 pathseg_closepath = 1 pathseg_moveto_abs = 2 pathseg_moveto_rel = 3 pathseg_lineto_abs = 4 pathseg_lineto_rel = 5 pathseg_curveto_cubic_abs = 6 pathseg_curveto_cubic_rel =
7 pathseg_curveto_quadratic_abs = 8 pathseg_curveto_quadratic_rel = 9 pathseg_arc_abs = 10 pathseg_arc_rel = 11 pathseg_lineto_horizontal_abs = 12 pathseg_lineto_horizontal_rel = 13 pathseg_lineto_vertical_abs = 14 pathseg_lineto_vertical_rel = 15 pathseg_curveto_cubic_smooth_abs = 16 ...
... pathseg_curveto_cubic_smooth_rel = 1
7 pathseg_curveto_quadratic_smooth_abs = 18 pathseg_curveto_quadratic_smooth_rel = 19 normative document svg 1.1 (2nd edition) constants name value description pathseg_unknown 0 the unit type is not one of predefined types.
... pathseg_curveto_cubic_rel
7 corresponds to a "relative cubic bézier curveto" (c) path data command.
... pathseg_curveto_cubic_smooth_rel 1
7 corresponds to a "relative smooth cubic curveto" (s) path data command.
SVGPolygonElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
... fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89
71,84
71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="
71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpolygonelement" target="_top"><rect x="-129" y="65" width="1
70" ...
...height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolygonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggeometryelement and also implements properties from svganimatedpoints.
SVGPolylineElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
... fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89
71,84
71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="
71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpolylineelement" target="_top"><rect x="-139" y="65" width="180"...
... height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-49" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolylineelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggeometryelement and also implements properties from svganimatedpoints.
SVGRectElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
... fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89
71,84
71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="
71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgrectelement" target="_top"><rect x="-99" y="65" width="140" heig...
...ht="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGSVGElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsvgelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsvgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and also impleme...
...(if the parent uses css or xsl layout, then unitless values represent pixel units for the current css or xsl viewport.) svgsvgelement.pixelunittomillimeterx a float representing the size of the pixel unit (as defined by css2) along the x-axis of the viewport, which represents a unit somewhere in the range of
70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium.
Selection API - Web APIs
esopera android full support yessafari ios full support yessamsung internet android full support yesmodify experimentalnon-standardchrome full support yesedge full support ≤
79firefox full support 4ie ?
... 58chrome android full support 58firefox android full support yesopera android full support 43safari ios no support nosamsung internet android full support
7.0selectallchildren experimentalchrome full support yesedge full support 12firefox full support yesie full support yesopera full support yessafari full support...
... samsung internet android full support yestype experimentalchrome full support yesedge full support 12firefox full support 5
7ie full support yesopera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support ...
... 5
7opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support compatibility unknown compatibility unknownexperimental.
WebGL model view projection - Web APIs
attribute vec4 position; void main() { gl_position = position; } first, we draw a red box in the middle, but set w to 0.
7.
... as the coordinates get divided by 0.
7 they will all be enlarged.
... box.draw({ top : 0.5, // y bottom : -0.5, // y left : -0.5, // x right : 0.5, // x w : 0.
7, // w - enlarge this box depth : 0, // z color : [1, 0.4, 0.4, 1] // red }); now, we draw a green box up top, but shrink it by setting the w component to 1.1 box.draw({ top : 0.9, // y bottom : 0, // y left : -0.9, // x right : 0.9, // x w : 1.1, // w - shrink this box depth : 0.5, // z color : [0.4, 1, 0.4, 1] // green }); this last box doesn't get drawn because it's outside of clip space.
... cubedemo.prototype.computeviewmatrix = function(now) { var moveinandout = 20 * math.sin(now * 0.002); var moveleftandright = 15 * math.sin(now * 0.001
7); // move the camera around var position = mdn.translatematrix(moveleftandright, 0, 50 + moveinandout ); // multiply together, make sure and read them in opposite order var matrix = mdn.multiplyarrayofmatrices([ // exercise: rotate the camera view position ]); // inverse the operation for camera movements, because we are actually // moving the geometry in the scene, not t...
Window.open() - Web APIs
google chrome (55.0.2883.8
7 m ) on the other hand will do it only from the same parent (as if the window was created dependent, which is the "opener").
...for now 10/01/201
7 the differencies of behavior found recently have not still been tested for others browsers.
... toolbar and ui parts features in modern browsers (firefox
76 or newer, google chrome, safari, chromium edge), the following features are just a condition for whether to open popup or not.
... in addition to the toolbar buttons, firefox (before
76) will render the tab bar if it is visible, present in the parent window.
Web applications and ARIA FAQ - Accessibility
(tbd) voiceover osx 10.5, ios 4 os x 10.
7 ios 5 jaws 8 10 window-eyes
7 no live region support currently zoomtext ?
...here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="
75" aria-valuemin="0" aria-valuemax="100" /> this progress bar is built using a <div>, which is not very descriptive.
... // bind a click handler to the button, which will update the progress bar to
75%.
... document.getelementbyid("update-button").addeventlistener("click", function (e) { updateprogress(
75); e.preventdefault(); }, false); } initdemo(); how do assistive technologies work?
:nth-child() - CSS: Cascading Style Sheets
:nth-child(
7) represents the seventh element.
... :nth-child(n+
7) represents the seventh and all following elements:
7 [=0+
7], 8 [=1+
7], 9 [=2+
7], etc.
... :nth-child(3n+4) represents elements 4 [=(3×0)+4],
7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.
... detailed example html <h3><code>span:nth-child(2n+1)</code>, without an <code><em></code> among the child elements.</h3> <p>children 1, 3, 5, and
7 are selected.</p> <div class="first"> <span>span 1!</span> <span>span 2</span> <span>span 3!</span> <span>span 4</span> <span>span 5!</span> <span>span 6</span> <span>span
7!</span> </div> <br> <h3><code>span:nth-child(2n+1)</code>, with an <code><em></code> among the child elements.</h3> <p>children 1, 5, and
7 are selected.<br> 3 is used in the counting because it is...
:scope - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:scopechrome full support 2
7edge full support
79firefox full support 32notes full support 32notes notes firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is still supported.
...to change preferences in firefox, visit about:config.ie no support noopera full support 15safari full support
7webview android full support ≤3
7chrome android full support 2
7firefox android full support 32notes full support 32notes notes firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is...
...to change preferences in firefox, visit about:config.opera android full support 15safari ios full support
7samsung internet android full support 1.5support in dom api such as in queryselector() and queryselectorall()chrome full support 2
7edge full support
79firefox full support 32ie no support ...
... noopera full support 15safari full support
7webview android full support ≤3
7chrome android full support 2
7firefox android full support 32opera android full support 15safari ios full support
7samsung internet android full support 1.5legend full support full support no support no supportsee implementation notes.see implement...
:where() - CSS: Cascading Style Sheets
you can see the result below (although bear in mind that currently :is() and :where() are currently only enabled by default in firefox nightly, version
77+.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:where()chrome full support
72disabled full support
72disabled disabled from version
72: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.edge no support nofirefox full support
78 full support
78 full support
77notes disabled notes enabled by default in firefox nightly.disabled from version
77: this feature is behind the layout.css.is-where-selectors.enabled preference (needs to be set to enabled).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support nowebview android no support nochrome android full support
72disabled full support
72disabled disabled from version
72: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
@supports - CSS: Cascading Style Sheets
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet@supportschrome full support 28edge full support 12firefox full support 22 full support 22 no support 1
7 — 22disabled disabled from version 1
7 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 12.1safari full support 9webview android full support ≤3
7chrome android full support 28firefox android full support 22 full support 22 no support 1
7 — 22disabled disabled from version 1
7 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true).
...to change preferences in firefox, visit about:config.ie no support noopera full support 69safari no support nonotes no support nonotes notes see bug 19923
7webview android full support 83chrome android full support 83firefox android full support 64disabled full support 64disabled disabled from version 64: this feature is behind the layout.css.supports-selector.enabled pref...
...to change preferences in firefox, visit about:config.opera android no support nonotes no support nonotes notes see bug 9
79041.safari ios no support nonotes no support nonotes notes see bug 19923
7samsung internet android no support nonotes no support nonotes notes see bug 9
79041.legend full support full support no support no supportsee implementation note...
Using CSS animations - CSS: Cascading Style Sheets
examples note: some older browsers (pre-201
7) may need prefixes; the live examples you can click to see in your browser include the -webkit prefixed syntax.
...that’s as simple as adding this keyframe:
75% { font-size: 300%; margin-left: 25%; width: 150%; } the full code now looks like this: p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; }
75% { font-size: 300%; margin-left: 25%; width: 150%; } to { margin-left: 0%; width: 100%; } } <p>the caterpillar and alice looked at e...
...ach other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> this tells the browser that
75% of the way through the animation sequence, the header should have its left margin at 25% and the width should be 150%.
... the output, when all is said and done, looks something like this: started: elapsed time is 0 new loop started at time 3.01200008392334 new loop started at time 6.0060000419616
7 ended: elapsed time is 9.234000205993652 note that the times are very close to, but not exactly, those expected given the timing established when the animation was configured.
conic-gradient() - CSS: Cascading Style Sheets
e and finishing red */ conic-gradient(from 45deg, blue, red); /* a a bluish purple box: the gradient goes from blue to red, but as only the bottom right quadrant is visible, as the center of the conic gradient is in at the top left corner */ conic-gradient(from 90deg at 0 0, blue, red); /* colorwheel */ background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(2
70, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
...the following two gradients are equivalent conic-gradient(red, orange, yellow, green, blue); conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 2
70deg, blue 360deg); by default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.
...the following two declarations are equivalent: conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.2
7turn, #666 0.2
7turn, #666 0.54turn, #000 0.54turn); conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.2
7turn, #666 0.2
7turn 0.54turn, #000 0.54turn 1turn); color stops should be listed in ascending order.
... div { width: 100px; height: 100px; } <div></div> div { background: conic-gradient( red 36deg, orange 36deg 1
70deg, yellow 1
70deg); border-radius: 50% } checkerboard div { width: 100px; height: 100px; } <div></div> div { background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.
75turn, #000 0.
75turn) top left / 25% 25% repeat; border: 1px solid; } more conic-gradient examples please see using css gradients for more examples.
font-variant-east-asian - CSS: Cascading Style Sheets
font-variant-east-asian: normal; font-variant-east-asian: ruby; font-variant-east-asian: jis
78; /* <east-asian-variant-values> */ font-variant-east-asian: jis83; /* <east-asian-variant-values> */ font-variant-east-asian: jis90; /* <east-asian-variant-values> */ font-variant-east-asian: jis04; /* <east-asian-variant-values> */ font-variant-east-asian: simplified; /* <east-asian-variant-values> */ font-variant-east-asian: traditional; /* <east-asian-variant-values> */ font-variant-east-asian: full-width; /* <east-asian-width-values> */ font-variant-east-asian: proportional-width; /* <east-a...
...possible values are: keyword standard defining the glyphs opentype equivalent jis
78 jis x 0208:19
78 jp
78 jis83 jis x 0208:1983 jp83 jis90 jis x 0208:1990 jp90 jis04 jis x 0213:2004 jp04 simplified none, use the simplified chinese glyphs smpl traditional none, use the traditional chinese glyphs trad <east-asian-width-values> these values control the sizing of ...
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis
78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other fonts may not support opentype features.
... html <table> <thead></thead> <tbody style="border:0;"> <tr> <th>normal/jis
78:</th> <td>麹町</td> <td class="jis
78">麹町</td> </tr> <tr> <th>normal/ruby:</th> <td>しんかんせん</td> <td class="ruby">しんかんせん</td> </tr> <tr> <th>normal/traditional:</th> <td>大学</td> <td class="traditional">大学</td> </tr> </tbody> </table> css td{ font-family:"yu gothic"; font-size:20px; } th{ color:grey; padding-right:10px; } .ruby { font-variant-east-asian: ruby; } .jis
78 { font-variant-east-asian: jis
78; } .traditional{ font-variant-east-asian: traditional; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-east-asian' in...
font-variant - CSS: Cascading Style Sheets
the possible values are: jis
78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby.
...ures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ]<feature-value-name> = <custom-ident><numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]<east-asian-variant-values> = [ jis
78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small">firefox rocks!</p> css p.normal { font-variant: normal; } p.small { font-variant: small-caps; } result specifications specification status comment...
... 4opera android full support 11safari ios full support 1samsung internet android full support 1.0css fonts module level 3 shorthandchrome full support 52edge full support
79firefox full support 34 full support 34 no support 33 — 34disabled disabled from version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... full support 12firefox full support 14ie full support 4opera full support 18safari full support 8webview android full support ≤3
7chrome android full support 31firefox android full support 14opera android full support 18safari ios full support 8samsung internet android full support 2.0ß → sschrome ...
offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%,
70% 0%, 100% 50%, 30% 100%, 0%
70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the b...
... <svg xmlns="http://www.w3.org/2000/svg" width="
700" height="450" viewbox="350 0 1400 900"> <title>house and scissors</title> <rect x="595" y="423" width="610" height="3
77" fill="blue" /> <polygon points="506,423 900,190 1294,423" fill="yellow" /> <polygon points="993,245 993,190 1086,190 1086,300" fill="red" /> <path id="house" d="m900,190 l993,245 v201 a11,11 0 0,1 1004,...
...190 h10
75 a11,11 0 0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v
789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,
789 v434 a11,11 0 0,0 584,423 h506 l900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1 30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" transform="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> <path id="secondscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,1 -20,-10 a20,20 0 1,0 -40,...
...10 h20 a10,10 0 0,0 30,0 m-40,-20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,-20 m0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> </svg> css .scissorhalf { offset-path: path('m900,190 l993,245 v201 a11,11 0 0,1 1004,190 h10
75 a11,11 0 0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v
789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,
789 v434 a11,11 0 0,0 584,423 h506 l900,190'); animation: followpath 4s linear infinite; } @keyframes followpath { to { motion-offset: 100%; offset-distance: 100%; } } result specifications <body> specification status comment motion pa...
position - CSS: Cascading Style Sheets
d>explosions in the sky</dd> </div> <div> <dt>t</dt> <dd>ted leo & the pharmacists</dd> <dd>t-pain</dd> <dd>thrice</dd> <dd>tv on the radio</dd> <dd>two gallants</dd> </div> </dl> css * { box-sizing: border-box; } dl > div { background: #fff; padding: 24px 0 0 0; } dt { background: #b8c1c8; border-bottom: 1px solid #989ea4; border-top: 1px solid #
71
7d85; color: #fff; font: bold 18px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/45px helvetica, arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { border-top: 1px solid #ccc; } result specifications specification status ...
...riandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpositionchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes before firefox 5
7, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 13
79306).notes before firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).ie full support 4opera full support 4safari full...
... support 1webview android full support ≤3
7chrome android full support 18firefox android full support 4notes full support 4notes notes before firefox 5
7, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 13
79306).notes before firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).opera android full support 14safari ios full support 1samsung internet android full su...
...firefox and the specification have been modified to mimic chrome and safari's long-time behavior.ie full support
7notes full support
7notes notes in internet explorer, fixed positioning doesn't work if the document is in quirks mode.opera full support 4safari full support 1webview android full support ≤3
7chrome android ...
transition-delay - CSS: Cascading Style Sheets
r font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition,
7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-dura...
...lor font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition,
7000); transition-delay: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-durat...
...lor font-size left top color; transition-duration:2s; transition-delay:2s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition,
7000); transition-delay: 4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-durat...
...ont-size left top color; transition-duration:2s; transition-delay:4s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition,
7000); specifications specification status comment css transitionsthe definition of 'transition-delay' in that specification.
url() - CSS: Cascading Style Sheets
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16
761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozil...
...lademos.org/files/16
761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
...quotes are required if the url includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x
7e.
... formal syntax url( <string> <url-modifier>* ) examples content property html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16
761/star.gif); } result data-uri html <div class="background"></div> css .background { height: 100vh; } .background { background: yellow; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3e%3cpath d='m10 10h60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m10 20h60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m10 30h60' stro...
Video player styling basics - Developer guides
basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:100%; max-height:30.8
75rem; height:100%; margin:1.25rem auto; padding:1.051%; background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.09
716599190283400809
71659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of the e...
... the <div> container for the <progress> element also requires some specific settings; it is set to be much wider than the other child elements and its cursor value is set to be pointer: .controls .progress { cursor:pointer; width:
75.390625%; } buttons the first major styling task to tackle is to make the video control's buttons actually look like and act like real buttons.
...padding on the <figure> element need to be removed so that all the available space is taken advantage of, and the buttons are a bit too small so this needs to be altered by setting a new height on the element that has the .controls class set on it: @media screen and (max-width:64em) { figure { padding-left:0; padding-right:0; height:auto; } .controls { height:1.8
76rem; } } this works well enough until it is viewed on a smaller screen (680px/42.5em), so another breakpoint is made here.
...the definitions for the elements within the .controls element now also need to changed: @media screen and (max-width:42.5em) { .controls { height:auto; } .controls > * { display:block; width:16.666
7%; margin-left:0; height:2.5rem; margin-top:2.5rem; } .controls .progress { position:absolute; top:0; width:100%; float:none; margin-top:0; } .controls .progress progress { width:98%; margin:0 auto; } .controls button { background-position:center center; } } the .progress container is now moved to the top of the control set via position:absolute, ...
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
see bug
77861
7 for details.
...l 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v
750k -dash 1 video_640x360_
750k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=1280:
720 -b:v 1500k -dash 1 video_1280x
720_1500k.webm or d...
... ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \ -an -vf scale=640:360 -b:v
750k -dash 1 video_640x360_
750k.webm \ -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \ -an -vf scale=1280:
720 -b:v 1500k -dash 1 video_1280x
720_1500k.webm 2.
... create the manifest file: ffmpeg \ -f webm_dash_manifest -i video_160x90_250k.webm \ -f webm_dash_manifest -i video_320x180_500k.webm \ -f webm_dash_manifest -i video_640x360_
750k.webm \ -f webm_dash_manifest -i video_1280x
720_1500k.webm \ -f webm_dash_manifest -i my_audio.webm \ -c copy \ -map 0 -map 1 -map 2 -map 3 -map 4 \ -f webm_dash_manifest \ -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \ my_video_manifest.mpd the -map arguments correspond to the input files in the sequence they are given; you should have one for each file.
<a>: The Anchor element - HTML: Hypertext Markup Language
firefox
79+) setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener".
... linking to telephone numbers <a href="tel:+49.15
7.0156">+49 15
7 0156</a> <a href="tel:+1(555)5309">(555) 5309</a> tel: link behavior varies with device capabilities: cellular devices autodial the number.
...firefox
79+) setting target="_blank" implicitly provides the same protection as setting rel="noopener".
... link that opens a new tab/window <a target="_blank" href="https://www.wikipedia.org"> wikipedia (opens in new tab) </a> link to a non-html resource <a href="201
7-annual-report.ppt"> 201
7 annual report (powerpoint) </a> if an icon is used to signify link behavior, make sure it has alt text: <a target="_blank" href="https://www.wikipedia.org"> wikipedia <img alt="(opens in new tab)" src="newtab.svg"> </a> <a href="201
7-annual-report.ppt"> 201
7 annual report <img alt="(powerpoint file)" src="ppt-icon.svg"> </a> webaim: links and hypertext -...
<input type="date"> - HTML: Hypertext Markup Language
you can set a default value for the input with a date inside the value attribute, like so: <input type="date" value="201
7-06-01"> the displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.
...for example: var datecontrol = document.queryselector('input[type="date"]'); datecontrol.value = '201
7-06-01'; console.log(datecontrol.value); // prints "201
7-06-01" console.log(datecontrol.valueasnumber); // prints 14962
75200000, a unix timestamp this code finds the first <input> element whose type is date, and sets its value to 201
7-06-01 (june 1st, 201
7).
...in the following example, we set a minimum date of 201
7-04-01 and a maximum date of 201
7-04-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="201
7-04-01" max="201
7-04-30"> </label> </form> the result is that only days in april 201
7 can be selected — the month and year parts of the textbox will be uneditable, and dates outside april 201
7 can't be selected in tte picker widget.
... let's look at an example of minimum and maximum dates, and also made a field required: <form> <label> choose your preferred party date (required, april 1st to 20th): <input type="date" name="party" min="201
7-04-01" max="201
7-04-20" required> <span class="validity"></span> </label> <p> <button>submit</button> </p> </form> if you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error.
<input type="file"> - HTML: Hypertext Markup Language
lastmodified a number specifying the date and time at which the file was last modified, in milliseconds since the unix epoch (january 1, 19
70 at midnight).
... note: you can set as well as get the value of htmlinputelement.files in all modern browsers; this was most recently added to firefox, in version 5
7 (see bug 1384030).
... 0 auto; padding: 20px; border: 1px solid black; } form ol { padding-left: 0; } form li, div > p { background: #eee; display: flex; justify-content: space-between; margin-bottom: 10px; list-style-type: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left: 10px; } form label, form button { background-color: #
7f9ccb; padding: 5px 10px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto; } form label:hover, form button:hover { background-color: #2d5ba3; color: white; } form label:active, form button:active { background-color: #0d3f8f; color: white; } this is similar to what we've seen before — nothing special to comment on.
... function returnfilesize(number) { if(number < 1024) { return number + 'bytes'; } else if(number >= 1024 && number < 10485
76) { return (number/1024).tofixed(1) + 'kb'; } else if(number >= 10485
76) { return (number/10485
76).tofixed(1) + 'mb'; } } the example looks like this; have a play: specifications specification status comment html living standardthe definition of '<input type="file">' in that specification.
Content-Type - HTTP
header type entity header forbidden header name no cors-safelisted response header yes cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x08 (tab)), "():<>?@[\]{}, and 0x
7f (delete).
... boundary for multipart entities the boundary directive is required, which consists of 1 to
70 characters from a set of characters known to be very robust through email gateways, and not ending with white space.
... <form action="/" method="post" enctype="multipart/form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myfile"> <button type="submit">submit</button> </form> the request looks something like this (less interesting headers are omitted here): post /foo http/1.1 content-length: 6813
7 content-type: multipart/form-data; boundary=---------------------------9
74
76
72998524989295316105
75 -----------------------------9
74
76
72998524989295316105
75 content-disposition: form-data; name="description" some text -----------------------------9
74
76
72998524989295316105
75 content-disposition: form-data; name="myfile"; filename="foo.txt" content-type: text/plain (content of the uploaded file f...
...oo.txt) -----------------------------9
74
76
72998524989295316105
75-- specifications specification title rfc
7233, section 4.1: content-type in multipart hypertext transfer protocol (http/1.1): range requests rfc
7231, section 3.1.1.5: content-type hypertext transfer protocol (http/1.1): semantics and content ...
412 Precondition Failed - HTTP
status 412 precondition failed examples etag: "33a64df551425fcc55e4d42a148
795d9f25f89d4" etag: w/"0815" avoiding mid-air collisions with the help of the etag and the if-match headers, you can detect mid-air edit collisions.
... for example, when editing mdn, the current wiki content is hashed and put into an etag in the response: etag: "33a64df551425fcc55e4d42a148
795d9f25f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
... if-match: "33a64df551425fcc55e4d42a148
795d9f25f89d4" if the hashes don't match, it means that the document has been edited in-between and a 412 precondition failed error is thrown.
... specifications specification title rfc
7232, section 4.2: 412 precondition failed hypertext transfer protocol (http/1.1): conditional requests ...
A re-introduction to JavaScript (JS tutorial) - JavaScript
numbers numbers in javascript are "double-precision 64-bit format ieee
754 values", according to the spec — there's no such thing as an integer in javascript (except bigint), so you have to be a little careful.
...this might trip you up: '3' + 4 + 5; // "345" 3 + 4 + '5'; // "
75" adding an empty string to something is a useful way of converting it to a string itself.
...add20(
7); // ?
...so the result of that function calls is as follows: add5(6); // returns 11 add20(
7); // returns 2
7 here's what's actually happening.
JavaScript data types and data structures - JavaScript
the number type is a double-precision 64-bit binary format ieee
754 value (numbers between -(253 − 1) and 253 − 1).
... this example demonstrates, where incrementing the number.max_safe_integer returns the expected result: > const x = 2n ** 53n; 900
7199254
740992n > const y = x + 1n; 900
7199254
740993n you can use the operators +, *, -, **, and % with bigints—just like with numbers.
...the following table helps determine the equivalent c data types: type value range size in bytes description web idl type equivalent c type int8array -128 to 12
7 1 8-bit two's complement signed integer byte int8_t uint8array 0 to 255 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 255 1 8-bit unsigned integer (clamped) octet uint8_t int16array -32
768 to 32
76
7 2 16-bit two's complement signed integer short int16_t uint16array 0 to 65535 2 16-...
...bit unsigned integer unsigned short uint16_t int32array -214
7483648 to 214
748364
7 4 32-bit two's complement signed integer long int32_t uint32array 0 to 429496
7295 4 32-bit unsigned integer unsigned long uint32_t float32array 1.2×10-38 to 3.4×1038 4 32-bit ieee floating point number (
7 significant digits e.g., 1.123456
7) unrestricted float float float64array 5.0×10-324 to 1.8×10308 8 64-bit ieee floating point number (16 significant digits e.g., 1.123...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint...
Equality comparisons and sameness - JavaScript
briefly: double equals (==) will perform a type conversion when comparing two things, and will handle nan, -0, and +0 specially to conform to ieee
754 (so nan != nan, and -0 == +0); triple equals (===) will do the same comparison as double equals (including the special handling for nan, -0, and +0) but without type conversion; if the types differ, false is returned.
... we can see that with double and triple equals, with the exception of doing a type check upfront in 11.9.6.1, the strict equality algorithm is a subset of the abstract equality algorithm, because 11.9.6.2–
7 correspond to 11.9.3.1.a–f.
... true true true +0 -0 true true false true +0 0 true true true true -0 0 true true false true 0 false true false false false "" false true false false false "" 0 true false false false '0' 0 true false false false '1
7' 1
7 true false false false [1, 2] '1,2' true false false false new string('foo') 'foo' true false false false null undefined true false false false null false false false false false undefined false false false false false { foo: 'bar' } { foo: 'bar' }...
...for example: var f2b = x => new uint8array(new float64array([x]).buffer); var b2f = x => new float64array(x.buffer)[0]; var n = f2b(nan); n[0] = 1; var nan2 = b2f(n); nan2; // > nan object.is(nan2, nan); // > true f2b(nan); // > uint8array(8) [0, 0, 0, 0, 0, 0, 248,12
7) f2b(nan2); // > uint8array(8) [1, 0, 0, 0, 0, 0, 248,12
7) ...
Working with objects - JavaScript
const manager = { name: "john", age: 2
7, job: "software engineer" } const intern= { name: "ben", age: 21, job: "software engineer intern" } function sayhi() { console.log('hello, my name is', this.name) } // add sayhi function to both objects manager.sayhi = sayhi; intern.sayhi = sayhi; manager.sayhi() // hello, my name is john' intern.sayhi() // hello, my name is ben' the this refers to the object that it is in.
... function howoldami (){ console.log('i am ' + this.age + ' years old.') } manager.howoldami = howoldami; manager.howoldami() // i am 2
7 years old.
...for instance: var o = { a:
7, get b() { return this.a + 1; }, set c(x) { this.a = x / 2; } }; console.log(o.a); //
7 console.log(o.b); // 8 <-- at this point the get b() method is initiated.
...delete myobj.a; console.log ('a' in myobj); // output: "false" you can also use delete to delete a global variable if the var keyword was not used to declare the variable: g = 1
7; delete g; comparing objects in javascript, objects are a reference type.
BigInt.prototype.toLocaleString() - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var bigint = 123456
789123456
789n; // german uses period for thousands console.log(bigint.tolocalestring('de-de')); // → 123.456.
789.123.456.
789 // arabic in most arabic speaking countries uses eastern arabic digits console.log(bigint.tolocalestring('ar-eg')); // → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩ // india uses thousands/lakh/crore separators console.log(bigint.tolocalestring('en-in')); // → 1,2...
...3,45,6
7,89,12,34,56,
789 // the nu extension key requests a numbering system, e.g.
... chinese decimal console.log(bigint.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六,七八九,一二三,四五六,七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(bigint.tolocalestring(['ban', 'id'])); // → 123.456.
789.123.456.
789 using options the results provided by tolocalestring can be customized using the options argument: var bigint = 123456
789123456
789n; // request a currency format console.log(bigint.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.456.
789.123.456.
789,00 € // the japanese yen doesn't use a minor unit console.log(bigint.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ¥123,456,
78...
...9,123,456,
789 // limit to three significant digits console.log(bigint.tolocalestring('en-in', { maximumsignificantdigits: 3 })); // → 1,23,00,00,00,00,00,00,000 specifications specification ecmascript (ecma-262)the definition of 'bigint.prototype.tolocalestring()' in that specification.
BigInt - JavaScript
const thebiggestint = 900
7199254
740991n const alsohuge = bigint(900
7199254
740991) // ↪ 900
7199254
740991n const hugestring = bigint("900
7199254
740991") // ↪ 900
7199254
740991n const hugehex = bigint("0x1fffffffffffff") // ↪ 900
7199254
740991n const hugebin = bigint("0b11111111111111111111111111111111111111111111111111111") // ↪ 900
7199254
740991n bigint is similar to number in some ways, but also differs in a few...
... const previousmaxsafe = bigint(number.max_safe_integer) // ↪ 900
7199254
740991n const maxplusone = previousmaxsafe + 1n // ↪ 900
7199254
740992n const thefuture = previousmaxsafe + 2n // ↪ 900
7199254
740993n, this works now!
... const multi = previousmaxsafe * 2n // ↪ 18014398509481982n const subtr = multi – 10n // ↪ 180143985094819
72n const mod = multi % 10n // ↪ 2n const bign = 2n ** 54n // ↪ 18014398509481984n bign * -1n // ↪ –18014398509481984n the / operator also works as expected with whole numbers.
... isprime(p) { for (let i = 2n; i * i <= p; i++) { if (p % i === 0n) return false; } return true } // takes a bigint as an argument, returns nth prime number as bigint function nthprime(nth) { let maybeprime = 2n let prime = 0n while (nth >= 0n) { if (isprime(maybeprime)) { nth-- prime = maybeprime } maybeprime++ } return prime } nthprime(20n) // ↪
73n specifications specification ecmascript (ecma-262)the definition of 'bigint objects' in that specification.
Date() constructor - JavaScript
date objects contain a number that represents milliseconds since 1 january 19
70 utc.
... time value or timestamp number value an integer value representing the number of milliseconds since january 1, 19
70, 00:00:00 utc (the ecmascript epoch, equivalent to the unix epoch), with leap seconds ignored.
..."19
70-01-01") are treated as utc, not local.
... let today = new date() let birthday = new date('december 1
7, 1995 03:24:00') let birthday = new date('1995-12-1
7t03:24:00') let birthday = new date(1995, 11, 1
7) // the month is 0-indexed let birthday = new date(1995, 11, 1
7, 3, 24, 0) specifications specification ecmascript (ecma-262)the definition of 'date' in that specification.
Number.isSafeInteger() - JavaScript
a safe integer is an integer that can be exactly represented as an ieee-
754 double precision number, and whose ieee-
754 representation cannot be the result of rounding any other integer to fit the ieee-
754 representation.
... for example, 253 - 1 is a safe integer: it can be exactly represented, and no other integer rounds to it under any ieee-
754 rounding mode.
... in contrast, 253 is not a safe integer: it can be exactly represented in ieee-
754, but the integer 253 + 1 can't be directly represented in ieee-
754 but instead rounds to 253 under round-to-nearest and round-to-zero rounding.
... the safe integers consist of all integers from -(253 - 1) inclusive to 253 - 1 inclusive (± 900
7199254
740991 or ± 9,00
7,199,254,
740,991).
Planned changes to shared memory - JavaScript
starting with firefox
79, the features described in this document are enabled by default.
... cross-origin-opener-policy: whatwg/html issue #3
740, draft specification.
... cross-origin-embedder-policy: whatwg/html issue #41
75, draft specification.
... postmessage() changes and self.crossoriginisolated: whatwg/html issue #4
732, whatwg/html issue #48
72, draft specification.
WebAssembly.CompileError - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompileerrorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0compileerror() constructorchrome full support ...
... 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled i...
...n the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.LinkError - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslinkerrorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0linkerror() constructorchrome full support ...
... 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in t...
...he firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.RuntimeError - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsruntimeerrorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0runtimeerror() constructorchrome full support ...
... 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled i...
...n the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
parseInt() - JavaScript
mber(value) } else { return nan } } console.log(filterint('421')) // 421 console.log(filterint('-421')) // -421 console.log(filterint('+421')) // 421 console.log(filterint('infinity')) // infinity console.log(filterint('421e+0')) // nan console.log(filterint('421hop')) // nan console.log(filterint('hop1.618033988
75')) // nan console.log(filterint('1.618033988
75')) // nan examples using parseint the following examples all return 15: parseint('0xf', 16) parseint('f', 16) parseint('1
7', 8) parseint(021, 8) parseint('015', 10) // but `parseint(015, 10)` will return 13 parseint(15.99, 10) parseint('15,123', 10) parseint('fxx123', 16) parseint('1111', 2) parseint('15 * 3', 10) parseint('15e2', 10)...
... parseint('15px', 10) parseint('12', 13) the following examples all return nan: parseint('hello', 8) // not a number at all parseint('546', 2) // digits other than 0 or 1 are invalid for binary radix the following examples all return -15: parseint('-f', 16) parseint('-0f', 16) parseint('-0xf', 16) parseint(-15.1, 10) parseint('-1
7', 8) parseint('-15', 10) parseint('-1111', 2) parseint('-15e1', 10) parseint('-12', 13) the following examples all return 4.
... parseint(4.
7, 10) parseint(4.
7 * 1e22, 10) // very large number becomes 4 parseint(0.00000000000434, 10) // very small number becomes 4 if the number is greater than 1e+21 (including) or less than 1e-
7 (including), it will return 1.
... parseint(0.0000001,10); parseint(0.000000123,10); parseint(1e-
7,10); parseint(1000000000000000000000,10); parseint(123000000000000000000000,10); parseint(1e+21,10); the following example returns 224: parseint('0e0', 16) bigint values lose precision: parseint('900
7199254
7409926
7n') // 900
7199254
74099300 parseint doesn't work with numeric separators: parseint('123_456') // 123 specifications specification ecmascript (ecma-262)the definition of 'parseint' in that specification.
MathML documentation index - MathML
7 values guide, mathml, mathml reference several mathml presentation elements have attributes that accept length values used for size or spacing.
... 1
7 <mi> mathml, mathml reference, mathml:element, mathml:token elements the mathml <mi> element indicates that the content should be rendered as an identifier such as function names, variables or symbolic constants.
... 2
7 <ms> mathml, mathml reference, mathml:element, mathml:token elements the mathml <ms> element represents a string literal meant to be interpreted by programming languages and computer algebra systems.
... 3
7 <mtr> mathml, mathml reference, mathml:element, mathml:tabular math the mathml <mtr> element represents a row in a table or a matrix.
Progressive web app structure - Progressive web apps (PWAs)
the folder structure looks like this: the html from the html point of view, the app shell is everything outside the content section: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 201
7 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manif...
...t src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe">a-frame category</a> in the <a href="http://201
7.js13kgames.com">js13kgames 201
7</a> competition.
... the app's only job is to list all the a-frame entries from the js13kgames 201
7 competition.
...in-cyberspace', name: 'lost in cyberspace', author: 'zosia and bartek', twitter: 'bartaz', website: '', github: 'github.com/bartaz/lost-in-cyberspace' }, { slug: 'vernissage', name: 'vernissage', author: 'platane', twitter: 'platane_', website: 'github.com/platane', github: 'github.com/platane/js13k-201
7' }, // ...
Structural overview of progressive web apps - Progressive web apps (PWAs)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 201
7 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manif...
...ata/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe"> a-frame category</a> in the <a href="http://201
7.js13kgames.com">js13kgames 201
7</a> competition.
... the app's only job is to list all the a-frame entries from the js13kgames 201
7 competition.
...in-cyberspace', name: 'lost in cyberspace', author: 'zosia and bartek', twitter: 'bartaz', website: '', github: 'github.com/bartaz/lost-in-cyberspace' }, { slug: 'vernissage', name: 'vernissage', author: 'platane', twitter: 'platane_', website: 'github.com/platane', github: 'github.com/platane/js13k-201
7' }, // ...
fill-rule - SVG: Scalable Vector Graphics
ttribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35
79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity.
... --> <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 1
79,90"/> </svg> usage notes value nonzero | evenodd default value nonzero animatable yes the fill-rule attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined: nonzero the value nonzero determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray.
... example html,body,svg { height:100% } <svg viewbox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- effect of nonzero fill rule on crossing path segments --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35
79,90"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="nonzero" stroke="red" d="m110,0 h90 v90 h-90 z m130,20 h50 v50 h-50 z"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the oppo...
... example html,body,svg { height:100% } <svg viewbox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- effect of evenodd fill rule on crossing path segments --> <polygon fill-rule="evenodd" stroke="red" points="50,0 21,90 98,35 2,35
79,90"/> <!-- effect of evenodd fill rule on on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="evenodd" stroke="red" d="m110,0 h90 v90 h-90 z m130,20 h50 v50 h-50 z"/> <!-- effect of evenodd fill rule on a shape inside a shape with the path segment moving in oppos...
preserveAspectRatio - SVG: Scalable Vector Graphics
example <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,
70,40 m30,60 q50,
75,
70,60 q50,
75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xminymid meet" x="25" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid meet" x="5...
...width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="25" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax slice" x="50" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width<height) meet --> <svg preserveaspectratio="xmidymin meet" x="
75" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid meet" x="90" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax meet" x="105" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <!-- (width<height) slice --> <svg preser...
...#smiley" /></svg> <!-- none --> <svg preserveaspectratio="none" x="0" y="30" viewbox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg> </svg> topexample html,body,svg { height:100% } <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,
70,40 m30,60 q50,
75,
70,60 q50,
75,30,60" /> </defs> <!-- (width>height) meet --> <rect x="0" y="0" width="20" height="10"> <title>xmidymid meet</title> </rect> <svg viewbox="0 0 100 100" width="20" height="10" preserveaspectratio="xmidymid meet" x="0" y="0"> <use href="#smiley" /> </svg> <rect x="25" y="0" width="20" height="10"> <title>xminymid meet</title> </re...
... width="20" height="10" preserveaspectratio="xmidymid slice" x="25" y="15"> <use href="#smiley" /> </svg> <rect x="50" y="15" width="20" height="10"> <title>xmidymax slice</title> </rect> <svg viewbox="0 0 100 100" width="20" height="10" preserveaspectratio="xmidymax slice" x="50" y="15"> <use href="#smiley" /> </svg> <!-- (width<height) meet --> <rect x="
75" y="0" width="10" height="25"> <title>xmidymin meet</title> </rect> <svg viewbox="0 0 100 100" width="10" height="25" preserveaspectratio="xmidymin meet" x="
75" y="0"> <use href="#smiley" /> </svg> <rect x="90" y="0" width="10" height="25"> <title>xmidymid meet</title> </rect> <svg viewbox="0 0 100 100" width="10" height="25" preserveaspectratio="xmidymid m...
spreadMethod - SVG: Scalable Vector Graphics
examples of spreadmethod with linear gradients svg <svg width="220" height="150" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="padgradient" x1="33%" x2="6
7%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" x1="33%" x2="6
7%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="repeatgradient" spreadmethod="rep...
...eat" x1="33%" x2="6
7%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> </defs> <rect fill="url(#padgradient)" x="10" y="0" width="200" height="40"/> <rect fill="url(#reflectgradient)" x="10" y="50" width="200" height="40"/> <rect fill="url(#repeatgradient)" x="10" y="100" width="200" height="40"/> </svg> result notice that the middle third of each gradient is the same.
... examples of spreadmethod with radial gradients svg <svg width="340" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="radialpadgradient" cx="
75%" cy="25%" r="33%" fx="64%" fy="18%" fr="1
7%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialreflectgradient" spreadmethod="reflect" cx="
75%" cy="25%" r="33%" fx="64%" fy="18%" fr="1
7%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialrepeatgradie...
...nt" spreadmethod="repeat" cx="
75%" cy="25%" r="33%" fx="64%" fy="18%" fr="1
7%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> </defs> <rect fill="url(#radialpadgradient)" x="10" y="10" width="100" height="100"/> <rect fill="url(#radialreflectgradient)" x="120" y="10" width="100" height="100"/> <rect fill="url(#radialrepeatgradient)" x="230" y="10" width="100" height="100"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of 'spreadmethod for <radialgradient>' in that specification.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
emented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtspanelement recently implemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 2
731
71).
... recently implemented bindings: selectsubstring altglyph implemented as tspans, no font features as of gecko 2.0 (bug 456286, bug 5
71808).
... color profile module color-profile not implemented (bug 42
7713).
... cursor module cursor not implemented (bug 1
77193).
passwords - Archive of obsolete content
http authentication credential these are used to authenticate the user to a web site which uses http authentication, as detailed in rfc 261
7.
... realm the www-authenticate response header sent by the server may include a "realm" field as detailed in rfc 261
7.
... so: if a web server at http://www.example.com requested authentication with a response code like this: http/1.0 401 authorization required server: apache/1.3.2
7 www-authenticate: basic realm="exampleco login" the corresponding values for the credential (excluding username and password) should be: url: "http://www.example.com" realm: "exampleco login" oncomplete and onerror this api is explicitly asynchronous, so all its functions take two callback functions as additional options: oncomplete and onerror.
cfx to jpm - Archive of obsolete content
you can edit this file to create your own id, but if you don't, cfx will generate one for you, which will look something like "jid1-f3boogbjqje6
7a".
... so: if you never did anything with ids when using cfx, then the value in your add-on's package.json will be something like "jid1-f3boogbjqje6
7a", and the corresponding id in the install.rdf will be "jid1-f3boogbjqje6
7a@jetpack".
... there is a known bug in simple options handling which may require the workaround described in https://bug635044.bugzilla.mozilla.org/show_bug.cgi?id=124346
7 commands and command options permanently removed commands jpm has dropped support for all the "internal" cfx commands.
Localization - Archive of obsolete content
<html> <body> <h1 data-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized-hello", label: "localized hello", icon: "./icon-16.png", onclick: function() { hello.show(); } }); var hello = require("sdk/panel").panel({ height:
75, width: 150, contenturl: require("sdk/self").data.url("my-panel.html") }); given locale files for "en-us" and "fr" which provide translations of hello_id, the panel will now display "hello!" or "bonjour !", according to the current locale: the translation is inserted into the node which has the data-l10n-id attribute set.
...support for homepage was added in jpm 1.0.
7 by including a "locales" structure in your add-on's "package.json" file, you can localize the title, description and homepage of your add-on.
...see bug
78
7351.
Bootstrapped extensions - Archive of obsolete content
addon_upgrade
7 the add-on is being upgraded.
... localization (l10n) localizing bootstrapped add-ons is very much the same since firefox
7, as that is when chrome.manifest compatibility landed.
... documentation for inline options in firefox
7 and later.
Custom about: URLs - Archive of obsolete content
in bug 1254
752 things changed for firefox 48 and up.
... const {classes: cc, interfaces: ci, manager: cm, results: cr, utils: cu, constructor: cc} = components; cm.queryinterface(ci.nsicomponentregistrar); components.utils.import("resource://gre/modules/services.jsm"); // globals const aboutpage_description = 'this is my custom about page'; const aboutpage_id = 'aa132
730-22
78-11e5-86
7f-0800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen const aboutpage_word = 'myaboutpage' const aboutpage_uri = 'data:text/html,hi this is the page that is shown when navigate to about:myaboutpage'; // const aboutpage_uri = 'chrome://myaboutaddon/content/index.html'; class aboutpage { static get classid() { return components.id(`{...
...() { return `@mozilla.org/network/protocol/about;1?what=${aboutpage_word}`; } static get queryinterface() { return xpcomutils.generateqi([ci.nsiaboutmodule]); } constructor() { object.freeze(this); } geturiflags(auri) { return ci.nsiaboutmodule.allow_script; } newchannel(auri, asecurity_or_aloadinfo) { let channel; if (services.vc.compare(services.appinfo.version, '4
7.*') > 0) { const uri = services.io.newuri(aboutpage_uri, null, null); // greater than or equal to firefox48 so asecurity_or_aloadinfo is aloadinfo channel = services.io.newchannelfromuriwithloadinfo(uri, asecurity_or_aloadinfo); } else { channel = services.io.newchannel(aboutpage_uri, null, null); } channel.originaluri = auri; return channel; } } ...
Extensions support in SeaMonkey 2 - Archive of obsolete content
the code for that will look something like this: <em:targetapplication> <!-- seamonkey --> <description> <em:id>{92650c4d-4b8e-4d2a-b
7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0</em:minversion> <em:maxversion>2.*</em:maxversion> </description> </em:targetapplication> the install.js is not supported any more and should be removed.
... in javascript code you can use the following technique to detect the application: const firefox_id = "{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}"; const thunderbird_id = "{3550f
703-e582-4d05-9a08-453d09bdfdc6}"; const seamonkey_id = "{92650c4d-4b8e-4d2a-b
7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) { ...
...you can use the application flag to select which overlay should be used with which application: overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffoverlay.xul application={ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f
703-e582-4d05-9a08-453d09bdfdc6} overlay chrome://navigator/content/navigator.xul chrome://myaddon/content/smoverlay.xul application={92650c4d-4b8e-4d2a-b
7eb-24ecf4f6b63a} ...
Signing an XPI - Archive of obsolete content
check that it exists on the file system and in the certificate database: c:\projects\codesigning\> dir x509* 14/12/2005 15:13 1,031 x509.cacert 14/12/2005 15:13
798 x509.raw c:\projects\codesigning\> certutil -d .
... the
7-zip tool doesn't work when creating mozilla xpi signed archives because it sorts the directory entries alphabetically, and mozilla requires the first entry to be meta-inf/zigbert.rsa.
... c:\projects\certs\> cd signed c:\projects\codesigning\signed\> zip fsb.xpi meta-inf/zigbert.rsa adding: meta-inf/zigbert.rsa (deflated 35%) c:\projects\codesigning\signed> zip -r -d fsb.xpi * -x meta-inf/zigbert.rsa adding: meta-inf/manifest.mf (deflated 3
7%) adding: meta-inf/zigbert.sf (deflated 40%) adding: chrome/fsb.jar (deflated
74%) adding: chrome.manifest (deflated 69%) adding: install.rdf (deflated 62%) test your certificate to test your certificate, install it into your browser, and attempt to load the signed extension by following these steps: 1.
Adding preferences to an extension - Archive of obsolete content
the string output = output.replace(/\w*$/, ""); // build the tooltip string var fieldarray = output.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext = "chg: " + fieldarray[4] + " | " + "open: " + fieldarray[5] + " | " + "low: " + fieldarray[6] + " | " + "high: " + fieldarray[
7] + " | " + "vol: " + fieldarray[8]; } } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } } note that we use stockwatcher.tickersymbol here instead of this.tickersymbol to get the stock symbol to watch.
... alternative method: inline options requires gecko
7(firefox
7 / thunderbird
7 / seamonkey 2.4) you could use inline options for this preference.
... « previousnext » override chrome://myaddon/content/options.xul chrome://myaddon/content/oldoptions.xul application={ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384} appversion<=6.* examples github - gist :: _ff-addon-template-bootstrapprefsskeleton - this gist here is a fully working example of a fully funcitonal preferences skeleton, it uses the observer example from above.
XML data - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <!-- xml demonstration --> <?xml-stylesheet type="text/css" href="style9.css"?> <!doctype planet> <planet> <ocean> <name>arctic</name> <area>13,000</area> <depth>1,200</depth> </ocean> <ocean> <name>atlantic</name> <area>8
7,000</area> <depth>3,900</depth> </ocean> <ocean> <name>pacific</name> <area>180,000</area> <depth>4,000</depth> </ocean> <ocean> <name>indian</name> <area>
75,000</area> <depth>3,900</depth> </ocean> <ocean> <name>southern</name> <area>20,000</area> <depth>4,500</depth> </ocean> </planet> make a new css file, style9.css.
... copy and paste the content from here, making sure that you scroll to get all of it: /*** xml demonstration ***/ planet:before { display: block; width: 8em; font-weight: bold; font-size: 200%; content: "oceans"; margin: -.
75em 0px .25em -.25em; padding: .1em .25em; background-color: #cdf; } planet { display: block; margin: 2em 1em; border: 4px solid #cdf; padding: 0px 1em; background-color: white; } ocean { display: block; margin-bottom: 1em; } name { display: block; font-weight: bold; font-size: 150%; } area { display: block; } area:before { content: "area: "; } area:after { content: " million km\b2"; } depth { display: block; } depth:before { content: "mean depth: "; } depth:after { content: " m"; } open the...
... document in your browser: oceans arctic area: 13,000 million km² mean depth: 1,200 m atlantic area: 8
7,000 million km² mean depth: 3,900 m .
CSS3 - Archive of obsolete content
the w3 consortium periodically publishes such snapshots, like in 200
7, 2010, 2015, 201
7, and 2018.
... css color module level 3 recommendation since june
7th, 2011 adds the opacity property, and the hsl(), hsla(), rgba() and rgb() functions to create <color> values.
... css style attributes recommendation since november
7th, 2013 formally defines the syntax of the content of the html style global attribute.
Creating regular expressions for a microsummary generator - Archive of obsolete content
to identify which parts are unique and which are common, let's look at the urls of several other auction item pages: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=13001
751
7168 http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=290019
763032 http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=1
70019463424 based on these examples, it looks like the unique part is the item number at the end of the urls, and everything else is common to all urls.
... for example, the following is an equally valid url for the same auction item: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&foo=bar&item=1
70019463424 to accommodate these variations in query parameters, we can insert a period followed by an asterisk (.*) between "viewitem&" and "item=" to match any characters that might appear between those two strings: ^http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&.*item= the period followed by an asterisk matches any combination of characters, including no characters at all, so it works ...
... here are several other urls of this style: http://cgi.ebay.com/firefox-2002-dvd_w0qqitemz13001
751
7168qqihz003qqcategoryz61
7qqcmdzviewitem http://cgi.ebay.com/ahm-ho-scale-firefox-tank-car_w0qqitemz290019
763032qqihz019qqcategoryz19130qqcmdzviewitem http://cgi.ebay.com/inuyasha-anime-pin-of-kirara-kilala-firefox_w0qqitemz1
70019463424qqihz00
7qqcategoryz3955
7qqcmdzviewitem based on these examples, it looks like the urls all start with "http://cgi.ebay.com/", they all contain the string "qqi...
Installing Dehydra - Archive of obsolete content
building spidermonkey it is recommended that you use spidermonkey revision aurora_base_20110
705 when building dehydra.
... cd $home hg clone http://hg.mozilla.org/mozilla-central/ cd mozilla-central hg update aurora_base_20110
705 cd js/src autoconf-2.13 mkdir $home/obj-js cd $home/obj-js $home/mozilla-central/js/src/configure --enable-optimize --disable-debug make it has to be checked whether later/newer branches (like aurora_base_20120131) are working, too.
...cd $home # obtain gcc 4.5.3 (see http://gcc.gnu.org/mirrors.html for alternate mirrors) wget http://www.netgull.com/gcc/releases/gcc-4.5.3/gcc-4.5.3.tar.bz2 tar -jxvf gcc-4.5.3.tar.bz2 # apply plugin_finish_decl patch wget https://bug559964.bugzilla.mozilla.o....cgi?id=45
7606 -o finish_decl.diff cd gcc-4.5.3 patch -p0 < ../finish_decl.diff # build gcc cd ..
JSS build instructions for OSX 10.6 - Archive of obsolete content
the generic instructions didn't work to build on osx 10.6.
7.
... howto successfully compile jss and nss for 32 and 64 bits on osx 10.6 (10.6.
7) useful links: https://developer.mozilla.org/en/nss_reference/building_and_installing_nss/build_instructions https://developer.mozilla.org/jss_build_4.3.html ftp://ftp.mozilla.org/pub/mozilla.org/ <componente> /releases http://www.mozilla.org/projects/secu...using_jss.html steps: export all this: build_opt="1" cvsroot=":pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot" java_home=$(/usr/libexec/java_home") no_mdupdate="1" nsdistmode="copy" ns_use_gcc="1" create working dir: mkdir nss-jss cd nss-jss obtain source: altought manual said nspr_4_6_4_rtm, nss_3_11_4_rtm, jss_4_2_5_rtm, they didnt work for osx, giving many compiling errors.
... cvs login cvs co -r nspr_4_8_
7_rtm nspr cvs co -r nss_3_12_9_with_ckbi_1_82_rtm nss cvs co -r jss_4_3_2_rtm jss build nss for 32 and 64: cd mozilla/security/nss make nss_build_all cc="gcc -arch i386" ccc="g++ -arch i386" make nss_build_all use_64=1 build jss for 32 and 64: cd ../jss make cc="gcc -arch i386" ccc="g++ -arch i386" make use_64=1 on osx, java.library.path doesnt seem to have /usr/lib or other paths.
Makefile.mozextension.2 - Archive of obsolete content
real_install: $(cp) chrome/$(project).jar ~/.mozilla/default/32p2
7fdr.slt/chrome/ #################################### ###### define chrome_manifest content $(project) content/ overlay chrome://browser/content/browser.xul chrome://$(project)/content/overlay.xul locale $(project) en-us locale/ skin $(project) classic/1.0 skin/ style chrome://global/content/customizetoolbar.xul chrome://$(project)/skin/overlay.css endef export chrome_manifest chrome.manife...
...st: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384} #thunderbird {3550f
703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526
720d5} #mozilla suite {86c18b42-e466-45a9-ae
7a-9b95ba6f5640} #seamonkey {92650c4d-4b8e-4d2a-b
7eb-24ecf4f6b63a} #sunbird {
718e30fb-e89b-41dd-9da
7-e25a45638b28} #netscape browser {3db10fab-e461-4c80-8b9
7-95
7ad5f8ea4
7} ###### define install_rdf <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <id>$(project_id)</id> <name>$(project_name)</name> <version>$(project_version)</version> <description>$(project_desc)</description> <creator>$...
...who helped me</contributor> <homepageurl>http://$(project).mozdev.org/</homepageurl> <optionsurl>chrome://$(project)/content/settings.xul</optionsurl> <abouturl>chrome://$(project)/content/about.xul</abouturl> <iconurl>chrome://$(project)/skin/mainicon.png</iconurl> <updateurl>http://$(project).mozdev.org/update.rdf</updateurl> <type>2</type> <targetapplication> <description> <id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" xmlns="http://www.mozilla.org/keymaster/gateke...
Microsummary topics - Archive of obsolete content
for example, the following code snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{835daeb3-6
760-4
7fa-8f4f-8e4fdea1fb16}"> \ <template> \ <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> \ <output method="text"/> \ <template match="/"> \ <value-of select="id(\'download-count\')"/> \ <text> fx downloads</text> \ </template> \ </transform> \ </template> \ <pages> <include>http://(www\.)?spreadfire...
...the value of the attribute must be a valid uri, but you can specify an arbitrary identifier using a urn, for example: urn:{835daeb3-6
760-4
7fa-8f4f-8e4fdea1fb16} to guarantee uniqueness, use urns containing uuids generated by the nsuuidgenerator component.
...however, because of a technical limitation (bug 340
746), it does download css stylesheets referenced by the page.
Priority Content - Archive of obsolete content
mathieu deaudelin 15:22, 1
7 may 2005 (pdt) mostly completed: netscape gecko compatibility handbook original: netscape gecko compatibility handbook wiki location: gecko compatibility handbook migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated.
...keller note: henrik contacted me on apr 2
7 and gave us permission to use any of his materials in devedge in the devmo wiki under the cc:by-sa license (yay!) started: browser feature detection original: browser feature detection wiki location: browser feature detection migrators: serge k.
... migrators: joel coreson note: the article links some external example files, not sure how to migrate them (perhaps via "upload file" function that's normally used for images?) also check if any extra files live in the article's directory --jens.b 14:0
7, 26 apr 2005 (pdt) dependant on: mostly completed*: class xbdesignmode / devedge - joel coreson please put completed articles on the devedge page instead.
New Skin Notes - Archive of obsolete content
--nickolay 0
7:16, 29 aug 2005 (pdt) imho the visited color looks horrible.
...==dria you've got to be kidding me, the colors are clearly different (rgb(0,51,153) vs rgb(51,102,18
7)).
...things like toc and back/forward and "page x of y" are extremly needed - it can be that they'll land in sidebar --gandalf 08:2
7, 29 aug 2005 (pdt) we'll revisit this later.
Table Layout Strategy - Archive of obsolete content
specs the table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and css2.1 (chapter 1
7).in css2 a distinction between fixed and auto layout of tables has been introduced.
...+ padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans #define pct 6 // percent width of cell or col #define pct_adj
7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others the priority of allocations for columns is as follows: max(min_con, min_adj) max (pct, pct_adj) fix fix_adj max(des_con, des_adj), but use min_pro if...
... original document information author(s): bernd mielke last updated date: september 2
7, 2003 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Actionscript Performance Tests - Archive of obsolete content
interp) $ ./runtests.py --vmargs="-dinterp" sunspider/*.as test avm metric sunspider/access-binary-trees.as 690 time sunspider/access-fannkuch.as 46
7 time ...
...# change the iterations $ ./runtests.py --iterations=10 sunspider/*.as test avm 95% conf metric sunspider/access-binary-trees.as 565 1.0% time [565, 586, 5
73, 5
77, 56
7, 56
7, 5
79, 5
76, 565, 585] sunspider/access-fannkuch.as 361 0.3% time [365, 366, 362, 363, 366, 361, 363, 363, 364, 364] ...
...vmshell sunspider/*.as test avm avm2 min : max avg min : max avg %diff metric ----------------------- ----------------------- ----- sunspider/access-binary-trees.as [ 56
7.0 : 585] 5
75.9 [ 564.0 : 580] 5
72.0 0.5 time sunspider/access-fannkuch.as [ 363.0 : 386] 3
70.0 [ 362.0 : 399] 3
71.8 0.3 time ...
Running Tamarin performance tests - Archive of obsolete content
$ cd tamarin-redux/test/performance $ python runtests.py executing tests at 2008-0
7-22 13:56:54.820920 avm: c:/dev/tamarin-tracing/bld/shell/avmshell.exe test avm sunspider/access-binary-trees.as 82.0 sunspider/access-fannkuch.as 152.0 sunspider/access-nbody.as 1
73.0 sunspider/access-nsieve.as 65.0 sunspider/bitops-3bit-bits-in-byt...
...e.as 13.0 sunspider/bitops-bits-in-byte.as 36.0 $ export avm2=c:/dev/tamarin-tracing2/bld/shell/avmshell.exe $ python ./runtests.py executing tests at 2008-0
7-22 14:03:51.95
7381 avm: c:/dev/tamarin-tracing/bld/shell/avmshell.exe avm2: c:/dev/tamarin-tracing2/bld/shell/avmshell.exe test avm avm2 %sp sunspider/access-binary-trees.as 82.0 80.0 2.5 sunspider/access-fannkuch.as 153.0 155.0 -1.3 sunspider/access-nbody.as 1
76.0 1
78.0 -1.1 sunspider/access-nsieve.as 65.0 68.0 -4.4 sunspider/bitops-3bit-bits-in-byte.as 12.0 13.0 -
7.
7 sunspider/bitops-bits-in-byt...
...the shell can be named variously in the build but on the phone the executable must be 'avmshell' $ adb push avmshell /data/app/avmshell $ adb shell chmod
777 /data/app/avmshell copy android_runner.sh, if it doesn't already exist on the phone in /data/app $ adb push tamarin-redux/platform/android/android_runner.sh /data/app/android_runner.s $ adb shell chmod
777 /data/app/android_runner.sh test it out with a simple .abc or no args for usage (should return exitcode=0) $ tamarin-redux/platform/android/android_shell.h hello.abc hello exitcode=0 running...
Venkman Introduction - Archive of obsolete content
a powerful new tool is available for web developers for use in many mozilla-based products, including firefox, mozilla suite and netscape
7.x.
... starting the debugger the javascript debugger is automatically pre-installed in mozilla 1.x but must be installed separately in firefox and other gecko-based products, such as thunderbird and netscape
7.x.
... note that in mozilla 1.x and netscape
7.x, the debugger contains a window menu like other major components in the application suite.
Venkman - Archive of obsolete content
it aims to provide a powerful javascript debugging environment for mozilla based browsers namely firefox, netscape
7.x/9.x and seamonkey.
...we encourage you to use the latest available version 0.9.8
7.1 (or higher) with firefox instead.
... related topics javascript, web development, developing mozilla original document information author(s): robert ginda other contributors: doctor unclear last updated date: july 13, 200
7 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Creating XPI Installer Modules - Archive of obsolete content
the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="1
75" height="3
75" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orient="horizontal" autostretch="never"> <button label="barley corn" /> <button label="show aphids" oncommand="bar();" /> </box> </window> the other files that the window imports are defined in dark blue.
...
7-zip (free software).
...use
7-zip (free software), or winzip (commercial).
Providing Command-Line Options - Archive of obsolete content
using the example to use this sample code, save the commandline.js file into the components directory and add the following lines to your chrome.manifest file: component {2991c315-b8
71-42cd-b33f-bfee4fcbf682} components/commandline.js contract @mozilla.org/commandlinehandler/general-startup;1?type=myapp {2991c315-b8
71-42cd-b33f-bfee4fcbf682} category command-line-handler m-myapp @mozilla.org/commandlinehandler/general-startup;1?type=myapp the javascript code const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpc...
...openwindow(achromeurispec, aargument) { services.ww.openwindow(null, achromeurispec, "_blank", "chrome,menubar,toolbar,status,resizable,dialog=no", aargument); } // command line handler function commandlinehandler() { }; commandlinehandler.prototype = { classdescription: "myapphandler", // changeme: generate a unique id classid: components.id('{2991c315-b8
71-42cd-b33f-bfee4fcbf682}'), // changeme: change the type in the contractid to be unique to your application contractid: "@mozilla.org/commandlinehandler/general-startup;1?type=myapp", _xpcom_categories: [{ category: "command-line-handler", // changeme: // category names are sorted alphabetically.
... "myapp" to your command line flag (no argument) if (cmdline.handleflag("myapp", false)) { openwindow(chrome_uri, null); cmdline.preventdefault = true; } }, // changeme: change the help info as appropriate, but // follow the guidelines in nsicommandlinehandler.idl // specifically, flag descriptions should start at // character 24, and lines should be wrapped at //
72 characters with embedded newlines, // and finally, the string should end with a newline helpinfo : " -myapp open my application\n" + " -viewapp <uri> view and edit the uri in my application,\n" + " wrapping this description\n" }; var nsgetfactory = xpcomutils.generatensgetfactory([commandlinehandler]); ...
Custom toolbar button - Archive of obsolete content
ifest" em:name="custom button" em:description="my custom toolbar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepageurl="http://developer.mozilla.org/en/docs/custom_toolbar_button" em:iconurl="chrome://custombutton/content/icon.png" > <em:targetapplication><!-- firefox --> <description em:id="{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}" em:minversion="1.4" em:maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description em:id="{3550f
703-e582-4d05-9a08-453d09bdfdc6}" em:minversion="1.5" em:maxversion="51.0" /> </em:targetapplication> <em:targetapplication><!-- sunbird --> <description em:...
...id="{
718e30fb-e89b-41dd-9da
7-e25a45638b28}" em:minversion="0.2.9" em:maxversion="99" /> </em:targetapplication> <em:file> <description about="urn:mozilla:extension:custombutton" em:package="content/custombutton/" /> </em:file> </description> </rdf> optionally customize the file by changing the name, description and creator.
...
7.
Tree Box Objects - Archive of obsolete content
crolltorow(value); } </script> <tree id="thetree" rows="4"> <treecols> <treecol id="row" label="row" primary="true" flex="1"/> </treecols> <treechildren> <treeitem label="row 0"/> <treeitem label="row 1"/> <treeitem label="row 2"/> <treeitem label="row 3"/> <treeitem label="row 4"/> <treeitem label="row 5"/> <treeitem label="row 6"/> <treeitem label="row
7"/> <treeitem label="row 8"/> <treeitem label="row 9"/> </treechildren> </tree> <hbox align="center"> <label value="scroll to row:"/> <textbox id="tbox"/> <button label="scroll" oncommand="doscroll();"/> </hbox> note that we use the rows attribute on the tree to specify that only four rows are displayed at a time.
... note that in firefox 1.0 and mozilla 1.
7 and earlier, the getpagelength() function is called getpagecount() instead.
... if (column.value && typeof column.value != "string") { column.value = column.value.id; } if the column is a string, we are running on mozilla 1.
7 or earlier, but for later versions we get the column id from the column object.
XULRunner 1.9 Release Notes - Archive of obsolete content
current version the current version of xulrunner is 1.9.0.1
7, matching firefox 3.0.1
7 detailed release notes can be found here.
... installing xulrunner mozilla provides xulrunner for windows, mac os x, and linux, in english: download xulrunner for windows download xulrunner for mac os x download xulrunner for linux windows unpack the zip file to a new directory using an archive tool (
7zip is recommended).
... linux unpack the tarball to a new directory using tar -xjf xulrunner-1.9.0.1
7.en-us.linux-i686.tar.bz2.
Debugging a XULRunner Application - Archive of obsolete content
debuggerserver.addbrowseractors("myxulrunnerappwindowtype"); } debuggerserver.openlistener(6000); for xulrunner version 3
7+ the code to enable the debugger has changed: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); debuggerserver.addbrowseractors(); debuggerserver.allowchromeprocess = true; } let dbglistener=debuggerserver.createlistener(); dbglistener.portorpath=6000; dbglistener.open(); add the following to your prefs.j...
...happy debugging :) venkman follow these instructions to install venkman into your xulrunner application (xulrunner 1.9 and later): get venkman from addons.mozilla.org (v0.9.8
7 at the time of writing).
... note the "new in firefox 3" attribute "contentaccessible" on https://developer.mozilla.org/en/chrome_registration so as per http://markmail.org/message/ezbomhkw3bgqjllv#query:x-jsd+page:1+mid:xvlr
7odilbyhn6v
7+state:results change the manifest to have this line: content venkman jar:venkman.jar!/content/venkman/ contentaccessible=yes i get errors about not being able to open contentareautils.js, contentareadd.js, findutils.js, or contentareautils.js...
application/http-index-format specification - Archive of obsolete content
any illegal characters must be escaped via the url escaping syntax defined by rfc 1
738.
...any illegal characters must be escaped via the url escaping syntax defined by rfc 1
738.
... text/plain file tue,%2015%20nov%201994%2008:12:31%20gmt 201: bar.html 9683 text/html file tue,%2025%20oct%201994%2008:12:31%20gmt 201: foobar 0 application/http-index-format directory tue,%2025%20oct%201994%2008:12:31%20gmt original document information author(s): christian biesinger last updated date: may 10, 2004 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Archived Mozilla and build documentation - Archive of obsolete content
sxsw 200
7 presentations presentations about the mozilla project given at the sxsw 200
7 event in austin, texas.
... table layout strategy the table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and css2.1 (chapter 1
7).in css2 a distinction between fixed and auto layout of tables has been introduced.
...it aims to provide a powerful javascript debugging environment for mozilla based browsers namely firefox, netscape
7.x/9.x and seamonkey.
Format - Archive of obsolete content
summary: mozilla.dev.planning - july 1
7-23, 2006 announcements firefox 2/gecko 1.8.1 bug approvals starting on friday july 21 at 10:00a pdt the release triage team will no longer be accepting bugs unless they meet one of the posted criteria.
... firefox 1.5.0.5 planned release - 2006/0
7/26 discussions firefox survey feedback requested rachel werner (mozilla corp marketing intern) requested feedback on a proposed user survey.
... meetings mozilla project weekly status meeting - 2006/0
7/24 1:00p pdt (last meeting notes) firefox 2 (bon echo) status meeting - 2006/0
7/25 11:00a pdt (last meeting notes) firefox 3 (gran paradiso) status meeting - 2006/0
7/26 11:00a pdt ...
2006-11-03 - Archive of obsolete content
he also mentioned that airbag doesn't build with msvc
7.1.
...he has also found a work around which is to use version 2004012
7-1 of sh.exe instead of the sh.exe version 2004012
7-3.
... on november 2nd gery replied with the bug number 358
706.
Extentsions FAQ - Archive of obsolete content
option #3 install status buttons 1.0 <https://addons.mozilla.org/firefox/12
72/> "lets you put toolbar buttons at either end of the status-bar.
... you can aes-128 or aes-256 symmetric encryption via aes.js (http://tinyurl.com/pp
79t).
... what you described was a bug (https://bugzilla.mozilla.org/show_bug.cgi?id=14
76
70).
Table Reflow Internals - Archive of obsolete content
table reflow example <table width=300> <tr> <td>foo</td> <td>bar zap</td> </tr> </table> key: r = reflow reason, 0 (initial), 2 (resize) a = avail w, h c = computed w, h d = desired w, h me = max elem w debugging frame reflow gives instructions for turning this on: tblo 0301
76cc r=0 a=8940,uc c=0,0 cnt=429 tbl 0301
78c4 r=0 a=8940,uc c=44
70,uc cnt=430 rowg 0301
7a
7c r=0 a=uc,uc c=uc,uc cnt=431 row 0301
7c08 r=0 a=uc,uc c=uc,uc cnt=432 cell 0301
7da8 r=0 a=uc,uc c=uc,uc cnt=433 block 0301
7e08 r=0 a=uc,uc c=uc,uc cnt=434 block 0301
7e08 d=8
70,300 me=480 cell 0301
7da8 d=930,360 me=540 cell 0301a8cc r=0 a=uc,uc c=uc,uc cnt=436 ...
... block 0301a92c r=0 a=uc,uc c=uc,uc cnt=43
7 block 0301a92c d=1335,300 me=465 cell 0301a8cc d=1395,360 me=525 row 0301
7c08 d=uc,360 rowg 0301
7a
7c d=uc,360 rowg 0301
7a
7c r=2 a=44
70,uc c=44
70,uc cnt=442 row 0301
7c08 r=2 a=44
70,uc c=44
70,uc cnt=443 cell 0301
7da8 r=2 a=1
755,uc c=1695,uc cnt=444 block 0301
7e08 r=2 a=1695,uc c=1695,uc cnt=445 block 0301
7e08 d=1695,300 cell 0301
7da8 d=1
755,360 cell 0301a8cc r=2 a=2625,uc c=2565,uc cnt=446 block 0301a92c r=2 a=2565,uc c=2565,uc cnt=44
7 block 0301a92c d=2565,300 cell 0301a8cc d=2625,360 row 0301
7c08 d=44
70,360 rowg 0301
7a
7c d=44
70,360 tbl 0301
78c4 d=4500,450 tblo 0301
76cc d=4500,450 table reflow optimizations if the table is already balanced, pass 1 con...
... original document information author(s): chris karnaze last updated aug
7, 2002 ...
Building a Theme - Archive of obsolete content
--> <em:targetapplication> <description> <em:id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</em:id> <em:minversion>29.0</em:minversion> <em:maxversion>39.*</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my theme</em:name> <em:internalname>sample</em:internalname> <em:description>a test extension</em:description> <em:creator>your name here</em:creator> <em:homepage...
... {ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384} - firefox's application id.
... on mac os or linux, you can use the command-line zip tool: zip -r my_theme.xpi install.rdf chrome.manifest browser communicator global mozapps or, if you have
7-zip installed, you can use that for zipping it up:
7z a -tzip my_theme.xpi chrome chrome.manifest note: the command-line tool will update an existing zip file, not replace it - so if you have files you've deleted from your theme, be sure to remove the .xpi file before running the zip command again.
azimuth - Archive of obsolete content
90deg is to the right, 180deg is behind, and 2
70deg or -90deg is to the left.
... positional keywords left-side: same as 2
70deg.
... left-side behind: same as 2
70deg.
Processing XML with E4X - Archive of obsolete content
it's been disabled by default for chrome in firefox 1
7, and completely removed in firefox 21.
... a full definition of e4x can be found in the ecma-35
7 specification.
...fault namespace, first create a namespace object encapsulating the uri for that namespace: var svgns = new namespace('http://www.w3.org/2000/svg'); this can now be used in e4x queries by using namespace::localname in place of a normal element specifier: var svg = xhtml..svgns::svg; alert(svg); // shows the <svg> portion of the document using generators/iterators with e4x as of javascript 1.
7, it is possible to use generators and iterators, giving more options for traversing e4x.
VBArray.toArray - Archive of obsolete content
for example, a vbarray with three dimensions and three elements in each dimension is converted into a javascript array as follows: suppose the vbarray contains: (1, 2, 3), (4, 5, 6), (
7, 8, 9).
... after translation, the javascript array contains: 1, 2, 3, 4, 5, 6,
7, 8, 9.
...on vbarraytest(vbarray) { var a = new vbarray(vbarray); var b = a.toarray(); var i; for (i = 0; i < 9; i++) { document.writeln(b[i]); } } --> </script> </head> <body> <script type="text/javascript"> <!-- vbarraytest(createvbarray()); --> </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
New in JavaScript 1.8 - Archive of obsolete content
the features that require the use of the new keywords "yield" and "let" require you to specify version 1.
7 or higher because existing code might use those keywords as variable or function names.
...allowing you to simply create generators (which were introduced in javascript 1.
7).
... array.prototype.reduce() array.prototype.reduceright() changed functionality in javascript 1.8 changes in destructuring for..in one change that occurred in the release of javascript 1.8 was a bug fix related to the key/value destructuring of arrays introduced in javascript 1.
7.
LiveConnect Overview - Archive of obsolete content
alert(java.lang.integer.max_value); //alerts 214
748364
7 the packages object if a java class is not part of the java, sun, or netscape packages, you access it with the packages object.
...for example, the following code also assigns the value "h" to the variable c: var c = new java.lang.character(
72); handling java exceptions in javascript when java code fails at run time, it throws an exception.
...for example: 23
7 becomes "23
7" boolean 0 and nan values are converted to false.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
the example application is running under jaxer build 0.9.
7.24
72 and also incorporates the extjs version 2.1 javascript framework for user interface controls.
...listing
7 contains the code which demonstrates this concept.
... listing
7 - manipulating the dom server-side <script runat="server"> window.onserverload = function() { document.getelementbyid( "out-logger" ).innerhtml = jaxer.file.read( "dump.txt" ); } </script> the code in listing
7 is executed server-side and takes advantage of the onserverload event which ensures that we have a complete dom before trying to access it.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
the most reliable fix is to add the anchor element to the selectors, like this: a:hover {color: red;} a.nav:hover {color: red;} in an attempt to avoid causing problems for legacy documents, browsers based on mozilla 1.0 and later (netscape
7+) include code that causes bare pseudo-classes to be restricted only to links if the document is rendered in "quirks" mode.
... in browsers based on the engine found in mozilla 1.3b and later, this quirk is extended to cover selectors that combine a bare class selector with the :hover pseudo-class (see bug 1690
78 for details).
...meyer, netscape communications last updated date: published 0
7 mar 2003; revised 21 mar 2003 copyright information: copyright © 2001-2003 netscape.
Audio for Web games - Game development
mobile support for web audio features mobile browser version concurrent play autoplay volume adjusting preload chrome (android) 69+ y y y y firefox (android) 62+ y y y y edge mobile y y y y opera mobile 46+ y y y y safari (ios)
7+ y/n* n n y android browser 6
7+ y y y y there's a full compatibility chart for mobile and desktop htmlmediaelement support here.
... * note: safari
7 has issues playing if you try and start all pieces of audio simultaneously.
... here's an example of an audio sprite player — first let's set up the user interface in html: <audio id="myaudio" src="https://udn.realityripple.com/samples/f0/2909c16512.mp3"></audio> <button data-start="18" data-stop="19">0</button> <button data-start="16" data-stop="1
7">1</button> <button data-start="14" data-stop="15">2</button> <button data-start="12" data-stop="13">3</button> <button data-start="10" data-stop="11">4</button> <button data-start="8" data-stop="9">5</button> <button data-start="6" data-stop="
7">6</button> <button data-start="4" data-stop="5">
7</button> <button data-start="2" data-stop="3">8</button> <button data-start="0" data-stop="1">9</...
Desktop mouse and keyboard controls - Game development
there are no helpers so you have to remember what the given codes are (or look them up); 3
7 is the left arrow: function keydownhandler(event) { if(event.keycode == 39) { rightpressed = true; } else if(event.keycode == 3
7) { leftpressed = true; } if(event.keycode == 40) { downpressed = true; } else if(event.keycode == 38) { uppressed = true; } } the keyuphandler looks almost exactly the same as the keydownhandler above, but inst...
...if the left arrow is pressed (⬅︎; key code 3
7), we can set the leftpressed variable to true and in the draw function perform the action assigned to it — move the ship left: function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); if(rightpressed) { playerx += 5; } else if(leftpressed) { playerx -= 5; } if(downpressed) { playery += 5; } else if(uppressed) { playery -= 5; } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } the draw function first clears the whole canvas — we draw everything from scratch on every single frame.
... we could write our own keycode object containing the key codes, for example: var keyboardhelper = { left: 3
7, up: 38, right: 39, down: 40 }; that way instead of using the codes to compare the input in the handler functions we could do something like this, which is arguably easier to remember: if(event.keycode == keyboardhelper.left) { leftpressed = true; } note: you can also find a list if the different keycodes and what keys they relate to in the keycode reference page.
Paddle and keyboard controls - Game development
add the following variables near the top of your code, beside your other variables: var paddleheight = 10; var paddlewidth =
75; var paddlex = (canvas.width-paddlewidth) / 2; here we're defining the height and width of the paddle and its starting point on the x axis for use in calculations further on down the code.
...our code might look like this: if(rightpressed) { paddlex +=
7; } else if(leftpressed) { paddlex -=
7; } if the left cursor is pressed, the paddle will move seven pixels to the left, and if the right cursor is pressed, the paddle will move seven pixels to the right.
...we could improve that and move the paddle only within the boundaries of the canvas by changing the code like this: if(rightpressed) { paddlex +=
7; if (paddlex + paddlewidth > canvas.width){ paddlex = canvas.width - paddlewidth; } } else if(leftpressed) { paddlex -=
7; if (paddlex < 0){ paddlex = 0; } } the paddlex position we're using will move between 0 on the left side of the canvas and canvas.width-paddlewidth on the right hand side, which will work exactly as we want it to.
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display...
HTML: A good basis for accessibility - Learn web development
using presentational html and line breaks, something like the following: <font size="
7">my heading</font> <br><br> this is the first section of my document.
...instead of writing 5–
7, write 5 to
7.
... link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a target="_blank" href="201
7-annual-report.ppt">201
7 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description.
HTML: A good basis for accessibility - Learn web development
using presentational html and line breaks, something like the following: <font size="
7">my heading</font> <br><br> this is the first section of my document.
...instead of writing 5–
7, write 5 to
7.
... link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a target="_blank" href="201
7-annual-report.ppt">201
7 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description.
Supporting older browsers - Learn web development
* {box-sizing: border-box;} .wrapper { background-color: rgb(
79,185,22
7); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(20
7,232,220); padding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has no effect once...
... * {box-sizing: border-box;} .wrapper { background-color: rgb(
79,185,22
7); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(20
7,232,220); padding: 1em; width: 33.333%; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> to deal with this issue we need...
... * {box-sizing: border-box;} .wrapper { background-color: rgb(
79,185,22
7); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(20
7,232,220); padding: 1em; width: 33.333%; } @supports (display: grid) { .item { width: auto; } } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="it...
How CSS is structured - Learn web development
/* handle basic element styling */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width:
70em) { /* let's special case the global font size.
... body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width:
70em) { body { font-size: 130%; } } h1 { font-size: 1.5em; } div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } the next example shows the equivalent css in a more compressed format.
... body {font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width:
70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;} for your own projects, you will format your code according to personal preference.
Styling links - Learn web development
focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f
7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were back in the early days of browsers in the mid-1990s.
... now let's add some more information to get this styled properly: body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #265301; } a:visited { color: #43
7a16; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px solid; background: #cdfeaa; } a:active { background: #265301; color: #cdfeaa; } we'll also provide some sample html to apply the css to: <p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p...
...n() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #43
7a16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #bae498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #cdfeaa;\n}\n\na:active {\n background: #265301;\n color: #cdfeaa;\n}'; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput); window.addeventlistener("load", drawoutput); including icons on links...
Example 1 - Learn web development
ist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #22
7755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5...
...ist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #22
7755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px ...
..."> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #22
7755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5...
Other form controls - Learn web development
the following screenshots show default, focused, and disabled <textarea> elements in firefox
71 and safari 13 on macos, and edge 18, yandex 14, firefox
71 and chrome
79 on windows 10.
... <progress max="100" value="
75">
75/100</progress> this is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.
... <meter min="0" max="100" value="
75" low="33" high="66" optimum="50">
75</meter> the content inside the <meter> element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.
Document and website structure - Learn web development
blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around
7 billion).
...e title</title> <link href="https://fonts.googleapis.com/css?family=open+sans+condensed:300|sonsie+one" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <!-- the below three lines are a fix to get html5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.
7.3/html5shiv.js"></script> <![endif]--> </head> <body> <!-- here is our main header that is used across all the pages of our website --> <header> <h1>header</h1> </header> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">our team</a></li> <li><a href="#">projects</a></li> <li><a href="#">contact</a></li> </ul> ...
... </li> </ul> <p>total cost: $23
7.89</p> </div> this isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere).
Adding vector graphics to the Web - Learn web development
<img src="equilateral.svg" alt="triangle with all three sides equal" height="8
7" width="100" /> pros quick, familiar image syntax with built-in text equivalent available in the alt attribute.
... </text> </svg> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution" disabled> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } res...
...ecode(); }); const htmlsolution = ''; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 2
7) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = ...
From object to iframe — other embedding technologies - Learn web development
ea (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 100px;"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } res...
...{ textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3
7995.65
748333395!2d-2.2
73568166412
784!3d53.4
733104
719169
75!2m3!1f0!2f0!3f0!3m2!1i1024!2i
768!4f13.1!3m3!1m2!1s0x48
7bae6c05
743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v15181
71
785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', up...
...datecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 2
7) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user upda...
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
if you have a monitor with a 60hz refresh rate and you want to achieve 60 fps you have about 16.
7 milliseconds (1000 / 60) to execute your animation code to render each frame.
...looking at our code from above: function draw() { // drawing code goes here requestanimationframe(draw); } draw(); let's now see how to do the same thing using setinterval(): function draw() { // drawing code goes here } setinterval(draw, 1
7); as we covered earlier, you don't specify a time interval for requestanimationframe().
...we arrived at our final value of 1
7 via the formula 1000 milliseconds / 60hz, and then rounded it up.
Third-party APIs - Learn web development
for example: let map = l.mapquest.map('map', { center: [53.480
759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display.
...add the following code to your example, again inside window.onload: l.marker([53.480
759, -2.242631], { icon: l.mapquest.icons.marker({ primarycolor: '#2240
7f', secondarycolor: '#3b5998', shadow: true, size: 'md', symbol: 'a' }) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array containing the coordinates at which to display the marker, and an options object containing an icon property that ...
... so, a complete url would end up looking something like this: https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=your-api-key-here&page=0&q=cats &fq=document_type:("article")&begin_date=201
70301&end_date=201
70312 note: you can find more details of what url parameters can be included at the nytimes developer docs.
What went wrong? Troubleshooting JavaScript - Learn web development
this time the error being reported is "typeerror: loworhi is null", on line
78.
... have a look at line
78, and you'll see the following code: loworhi.textcontent = 'last guess was too high!'; this line is trying to set the textcontent property of the loworhi constant to a text string, but it's not working because loworhi does not contain what it's supposed to.
...0.56
75493843.
Beginning our React todo list - Learn web development
font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.315
79; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.
7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: ...
...gba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.0156
7; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px)...
...ouch-action: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height:
7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } save and look back at your browser, and your app should now have reasonable styling.
Styling Vue components with CSS - Learn web development
isible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.315
79; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
... update your app.vue file’s <style> element so it looks like so: <style> /* global styles */ .btn { padding: 0.8rem 1rem 0.
7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-gro...
...tion: absolute; top: 0; left: 0; width: 40px; height: 40px; border: 2px solid currentcolor; background: transparent; } .custom-checkbox > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .custom-checkbox > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height:
7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .custom-checkbox > input[type="checkbox"]:checked + label::after { opacity: 1; } @media only screen and (min-width: 40rem) { label, input, .custom-checkbox { font-size: 19px; font-size: 1.9rem; line-height: 1.315
79; } } no...
Chrome registration
this example shows how a different overlay can be used for different applications: overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffoverlay.xul application={ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f
703-e582-4d05-9a08-453d09bdfdc6} overlay chrome://songbird/content/xul/layoutbaseoverlay.xul chrome://myaddon/content/sboverlay.xul application=songbird@songbirdnest.com appversion extensions may install into multiple versions of an application.
... component {09543
782-22b1-4a0b-ba0
7-9134365
776ee} maincomponent.js process=main component {98309951-ac89-4642-afea-
7b2b6216bcef} contentcomponent.js process=content xpcnativewrappers chrome packages can decide whether to use the xpcnativewrapper security mechanism to automatically protect their code against malicious content that they might access.
... necko en-us jar:en-us.jar!/locale/necko/ content xbl-marquee jar:comm.jar!/content/xbl-marquee/ content pipnss jar:pipnss.jar!/content/pipnss/ locale pipnss en-us jar:en-us.jar!/locale/pipnss/ # firefox-only overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384} # seamonkey-only overlay chrome://navigator/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={92650c4d-4b8e-4d2a-b
7eb-24ecf4f6b63a} overlay chrome://communicator/content/pref/preftree.xul chrome://pippki/content/prefoverlay.xul content pippki jar:pippki.jar!/content/pippki/ locale pippki en-us ...
Creating a Language Pack
$ make ident fx_revision 23
7dccbcb96
7 buildid 20091126033851 you can now go back to your source hg clone.
... $ hg update -r 23
7dccbcb96
7 3 files updated, 0 files merged, 0 files removed, 0 files unresolved the source code has been updated to the revision the binary was built from.
... $ cd ../../dist/ $ ls -l total 100216 drwxr-xr-x 5 your_id your_status 1
70 2
7 lis 13:33 branding -rw-r--r--@ 1 your_id your_status 25248119 26 lis 14:34 firefox-3.6b5pre.en-us.mac.dmg -rw-r--r--@ 1 your_id your_status 260569
73 2
7 lis 13:40 firefox-3.6b5pre.x-testing.mac.dmg drwxr-xr-x 3 your_id your_status 102 2
7 lis 13:38 install drwxr-xr-x 3 your_id your_status 102 2
7 lis 13:40 l10n-stage drwxr-xr-x 3 your_id your_status 102 2
7 lis 13:3
7 x...
Creating a Login Manager storage module
some work has already been done to integrate the login manager with the mac os x keychain (bug 106400) and gnome keyring manager (bug 30980
7).
... const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); function sampleloginmanagerstorage() {} sampleloginmanagerstorage.prototype = { classdescription: "sample nsiloginmanagerstorage implementation", contractid: "@example.com/login-manager/storage/sample;1", classid: components.id("{364a118c-
74
7a-4f6d-ac63-2d2998e5a5c1}"), queryinterface: xpcomutils.generateqi([ci.nsiloginmanagerstorage]), // this registers the category for overriding the built-in nsiloginmanagerstorage _xpcom_categories: [ { category: "login-manager-storage", entry: "nsiloginmanagerstorage" } ], // console logging service, used for debugging.
... this.stub(arguments); }, findlogins: function slms_findlogins(count, hostname, formsubmiturl, httprealm) { this.stub(arguments); }, countlogins: function slms_countlogins(ahostname, aformsubmiturl, ahttprealm) { this.stub(arguments); } }; function nsgetmodule(compmgr, filespec) xpcomutils.generatemodule([sampleloginmanagerstorage]); sample c++ implementation bug 30980
7 contains a complete example.
Creating a spell check dictionary add-on
<em:version>version number</em:version> <em:type>64</em:type> <em:unpack>true</em:unpack> <em:name>name</em:name> <!-- other install.rdf metadata such as em:localized, em:description, em:creator, em:developer, em:translator, em:contributor or em:homepageurl --> <!-- firefox --> <em:targetapplication> <description> <em:id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>46.0</em:maxversion> </description> </em:targetapplication> <!-- thunderbird --> <em:targetapplication> <description> <em:id>{3550f
703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>22.0</em...
...:maxversion> </description> </em:targetapplication> <!-- seamonkey --> <em:targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b
7eb-24ecf4f6b63a}</em:id> <em:minversion>2.15a1</em:minversion> <em:maxversion>2.49</em:maxversion> </description> </em:targetapplication> </description> </rdf> there are some rules about how you should adapt the install.rdf file: if you are creating a new dictionary add-on, we recommend that the em:id consists of your locale code followed by @dictionaries.addons.mozilla.org, but if there is more than one dictionary for your language (for example the german "old spelling" versus "new spelling" dictionaries), you may need to choose another id, that follows the rules of em:id.
...if you set em:minversion to a lower value, gecko 10-1
7 will not be able to update your dictionary add-on once the restartless dictionary is installed (bug
782118), and gecko 10-16 may warn the user that your dictionary is not compatible, when users try to update to a newer version of firefox/thunderbird (bug
782115).
The Firefox codebase: CSS Guidelines
writing cross-platform css firefox supports many different platforms and each of those platforms can contain many different configurations: windows
7, 8 and 10 default theme aero basic (windows
7, 8) windows classic (windows
7) high contrast (all versions) linux macos file structure the browser/ directory contains styles specific to firefox the toolkit/ directory contains styles that are shared across all toolkit applications (thunderbird and seamonkey) under each of those two directories, there is a themes direct...
... 99% theme
70% theme
70% content 99% content font-*, color, *-color, border-*, -moz-appearance [1] line-height, padding, margin cursor, width, max-width, top, bottom [2], etc overflow, direction, display, *-align, align-*, *-box-*, flex-*, order if some css is layout or functionality related, then it is likely content css.
...an example of such bug is bug 1516
76
7.
Cross Process Object Wrappers
note that from firefox 4
7 onwards, unsafe cpow usage is no longer permitted in browser code.
... also, from firefox 4
7 onwards, browser code can no longer perform unsafe cpow operations.
... see also: https://mikeconley.ca/blog/2015/02/1
7/on-unsafe-cpow-usage-in-firefox-desktop-and-why-is-my-nightly-so-sluggish-with-e10s-enabled/ http://blog.lassey.us/2015/01/10/unsafe-cpow-usage/ ...
Performance best practices for Firefox front-end engineers
historically, there hasn't been an easy way of doing this - however, bug 14343
76 has recently landed some chromeonly helpers to the window binding to make this simpler.
...these gotchas should be fixed by bug 14411
73.
... bug 14343
76 has recently landed a helper in the window binding to make it easier for priviledged code to queue up javascript to run when we know that the dom is not dirty, and size, position, and style information is cheap to query for.
Gecko versions and application versions
gecko 38 firefox 38, seamonkey 2.35 gecko 36 firefox 36, seamonkey 2.33 gecko 35 firefox 35, seamonkey 2.32 gecko 34 firefox 34, seamonkey 2.31 gecko 33 firefox 33, seamonkey 2.30 gecko 32 firefox 32, seamonkey 2.29 gecko 29 firefox 29, seamonkey 2.26 gecko 28 firefox 28, seamonkey 2.25 gecko 2
7 firefox 2
7, seamonkey 2.24 gecko 26 firefox 26, seamonkey 2.23 gecko 25 firefox 25, seamonkey 2.22 gecko 24 firefox 24, thunderbird 24, seamonkey 2.21 gecko 23 firefox 23, seamonkey 2.20 gecko 22 firefox 22, seamonkey 2.19 gecko 21 firefox 21, seamonkey 2.18 gecko 20 firefox 20, seamonkey 2.1
7 gecko 19...
... firefox 19, seamonkey 2.16 gecko 18 firefox 18, firefox os 1.0, seamonkey 2.15 gecko 1
7 firefox 1
7, thunderbird 1
7, seamonkey 2.14 gecko 16 firefox 16, thunderbird 16, seamonkey 2.13 gecko 15 firefox 15, thunderbird 15, seamonkey 2.12 gecko 14 firefox 14, thunderbird 14, seamonkey 2.11 gecko 13 firefox 13, thunderbird 13, seamonkey 2.10 gecko 12 firefox 12, thunderbird 12, seamonkey 2.9 gecko 11 firefox 11, thunderbird 11, seamonkey 2.8 gecko 10 firefox 10, thunderbird 10, seamonkey 2.
7 gecko 9 firefox 9, thunderbird 9, seamonkey 2.6 gecko 8 firefox 8, thunderbird 8, seamonkey 2.5 gecko
7 firefox
7, thunderbird
7, seamonkey 2.4 gecko 6 ...
...firefox 5, thunderbird 5, seamonkey 2.2 gecko 2 firefox 4, thunderbird 3.3, seamonkey 2.1 gecko 1.9.2 firefox 3.6, thunderbird 3.1 gecko 1.9.1 firefox 3.5, thunderbird 3, seamonkey 2.0 gecko 1.9 firefox 3 gecko 1.8.1 firefox 2, thunderbird 2, seamonkey 1.1 gecko 1.8 firefox 1.5, thunderbird 1.5, seamonkey 1.0 gecko 1.
7 firefox 1.0, thunderbird 1.0, nvu 1.0, mozilla suite 1.
7 older versions of gecko match the mozilla suite versions ...
Getting Started with Chat
mozilla's channels are most active between 9am and
7pm pst monday to friday, excluding us holidays.
...you will need to use the following information to configure the server connection: server: irc.mozilla.org port: 666
7 (default) or 669
7 (ssl) desktop clients desktop clients tens to allow the most detailed configuration.
... channels here is a list of channels you should be aware of as a member of the mozilla community: (remember to use irc.mozilla.org and port 669
7 or 666
7 for your server settings) #qa a channel for qa discussion #developers a channel for mozilla development discussion #sumo a channel for support with firefox for more information about the mozilla irc network and more channels, go here.
OS.File.Info
creationdate deprecated in bugzilla :: bug 80
78
75.
...there is talk of reinstating this with proper functionality in bugzilla :: bug 116
7143.
...on older unix filesystems it is not possible to get a creation date as it was never stored, on new unix filesystems creation date is stored but the method to obtain this date differs per filesystem, bugzilla :: bug 116
7143 explores implementing solutions for all these different filesystems) lastaccessdate the date at which the file was last accessed, as a javascript date object.
QA phase
enter the following command: $ hg log -l 1 you should see an output similar to the one below: changeset: 0:
7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings now compare the local repository on your machine with the remote hg repository by entering this command: $ hg outgoing http://hg.mozilla.org/l10n-central/x-testing the hg outgoing command compares the two repositories and lists all changese...
...you can expect to see output like this: comparing with http://hg.mozilla.org/l10n-central/x-testing searching for changes changeset: 0:
7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings let's now push this changeset.
...quota: 9
79.
7 kb in use, 150.0 mb available (0.64% used) your changeset has been successfully pushed to your repository!
TraceMalloc
this file can be post-processed by tools in mozilla/tools/trace-malloc as follows: histogram.pl, which produces a type histogram that can be diffed with histogram-diff.sh to produce output that looks like this: ---- base ---- ---- incr ---- ----- difference ---- type count bytes count bytes count bytes %total total 48942 4
754
774
76136 6566453 2
7194 18116
79 100.00 nstokenallocator 1
7 11000
7 60 388260 43 2
78253 15.36 nsimagegtk 4
76 219
7708 341 2366564 -135 168856 9.32 nsmemcacherecord 843 45
76
7 2328 124
76
7 1485
79000 4.36 nstextnode 209 11
704 1614 90384 1405
78680 4.34 htmlattributesimpl 482 ...
...14288 2824 88400 2342
74112 4.09 nsscanner 58
76824 94 146300 36 694
76 3.83 nsscripterror 253 250
70 842 91548 589 664
78 3.6
7 nshtmldocument.mreferrer 1
77 21550 691 85460 514 63910 3.53 nshtmlvalue 139
7846 1215 68
734 10
76 60888 3.36 htmlcontentsink 6 4816 12 5
7782 6 52966 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by size.
...leaks: 382
739 bytes, 3465 allocations maximum heap size:
7751
799 bytes 62095212 bytes were allocated in 391091 allocations.
tools/power/rapl
total w = _pkg_ (cores + _gpu_ + other) + _ram_ w #01 5.1
7 w = 1.
78 ( 0.12 + 0.10 + 1.56) + 3.39 w #02 9.43 w = 5.44 ( 1.44 + 1.20 + 2.80) + 3.98 w #03 14.26 w = 10.21 ( 5.4
7 + 0.19 + 4.55) + 4.04 w #04 10.02 w = 6.15 ( 2.62 + 0.43 + 3.10) + 3.86 w #05 14.63 w = 10.43 ( 4.41 + 0.81 + 5.22) + 4.19 w #06 11.16 w = 6.90 ( 1.91 + 1.68 + 3.31) + 4.26 w #0
7 5.40 w = 1.9
7 ( 0.20 + 0.10 + 1.6
7) + 3.44 w #08 5.1
7 w = 1.
76 ( 0.0
7 + 0...
....08 + 1.60) + 3.41 w #09 5.1
7 w = 1.
76 ( 0.09 + 0.08 + 1.58) + 3.42 w #10 8.13 w = 4.40 ( 1.55 + 0.11 + 2.
74) + 3.
73 w things to note include the following.
... once sampling is finished — either because the user interrupted it, or because the requested number of samples has been taken — the following summary data is shown: 10 samples taken over a period of 10.000 seconds distribution of 'total' values: mean = 8.85 w std dev = 3.50 w 0th percentile = 5.1
7 w (min) 5th percentile = 5.1
7 w 25th percentile = 5.1
7 w 50th percentile = 8.13 w
75th percentile = 11.16 w 95th percentile = 14.63 w 100th percentile = 14.63 w (max) the distribution data is omitted if there was zero or one samples taken.
turbostat
invocation turbostat must be invoked as the super-user: sudo turbostat if you get an error saying "turbostat: no /dev/cpu/0/msr", you need to run the following command: sudo modprobe msr the output is as follows: core cpu avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c
7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc
7 pkgwatt corwatt gfxwatt - -
799 21.63 3694 3398 0 12.02 3.16 1.
71 61.48 49 49 0.00 0.00 0.00 0.00 22.68 15.13 1.13 0 0 821 22.44 365
7 3398 0 9.92 2.43 2.25 62.96 39 49 0.00 0.00 0.00 0.00 22.68 15.13 1.13 ...
... 0 4
708 19.14 3698 3398 0 13.22 1 1
743 20.26 3666 3398 0 21.40 4.01 1.42 52.90 49 1 5 1206 31.98 3
770 3398 0 9.69 2 2
784 21.29 3681 3398 0 11.
78 3.10 1.13 62.
70 40 2 6
782 21.15 3698 3398 0 11.92 3 3
702 19.14 36
70 3398 0 8.39 3.09 2.03 6
7.36 39 3
7 648 1
7.6
7 366
7 3398 0 9.85 the man page has good explanations of what each column measures.
... if you run with the -s option you get a smaller range of measurements that fit on a single line, like the following: avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c
7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc
7 pkgwatt corwatt gfxwatt 3614 9
7.83 3694 3399 0 2.1
7 0.00 0.00 0.00
77 77 0.00 0.00 0.00 0.00 6
7.50 5
7.
77 0.46 ...
JSS 4.4.0 Release Notes
distribution information the hg tag is jss_4_4_201
70313.
...la.mozilla.org/buglist.cgi?product=jss&target_milestone=4.4&target_milestone=4.4&bug_status=resolved&resolution=fixed documentation build instructions for jss at https://hg.mozilla.org/projects/jss/file/tip/readme platform information you can check out the source from mercurial via hg clone -r 055aa3ce8a61 https://hg.mozilla.org/projects/jss jss 4.4.0 works with openjdk versions 1.
7 or higher we suggest the latest - openjdk 1.8.
... jss 4.3.1 requires nspr 4.
7.1 or higher though nspr 3.13 is recommended.
NSS 3.14.4 release notes
bug 8943
70 - (cve-2013-1
739) avoid uninitialized data read in the event of a decryption failure.
...this release is a patch release to address cve-2013-1
739.
... bugs fixed in nss 3.14.4 https://bugzilla.mozilla.org/buglist.cgi?bug_id=8943
70%2c832942%2c86394
7&bug_id_type=anyexact&list_id=8338081&resolution=fixed&classification=components&query_format=advanced&product=nss compatibility nss 3.14.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.2 release notes
bug 8943
70 - (cve-2013-1
739) avoid uninitialized data read in the event of a decryption failure.
... bug 8841
78 - add pk11_cipherfinal macro bugs fixed in nss 3.15.2 bug
73400
7 - sizeof() used incorrectly bug 9009
71 - nssutil_readsecmoddb() leaks memory bug 681839 - allow ssl_handshakenegotiatedextension to be called before the handshake is finished.
... a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.2&product=nss&list_id=
7982238 compatibility nss 3.15.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.3 release notes
bug 925100 - (cve-2013-1
741) ensure a size is <= half of the maximum pruint32 value bug 934016 - (cve-2013-5605) handle invalid handshake packets bug 910438 - (cve-2013-5606) return the correct result in cert_verifycert on failure, if a verifylog isn't used new in nss 3.15.3 new functionality no new major functionality is introduced in this release.
... this release is a patch release to address cve-2013-1
741, cve-2013-5605 and cve-2013-5606.
... bugs fixed in nss 3.15.3 bug 8504
78 - list rc4_128 cipher suites after aes_128 cipher suites bug 9196
77 - don't advertise tls 1.2-only ciphersuites in a tls 1.1 clienthello a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.3&product=nss compatibility nss 3.15.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15 release notes
in secpkcs
7.h sec_pkcs
7verifydetachedsignatureattime - verifies a pkcs#
7 signature at a specific time other than the present time.
... bug 34112
7: fix the invalid read in rc4_wordconv.
... bugs fixed in nss 3.15 this bugzilla query returns all the bugs fixed in nss 3.15: https://bugzilla.mozilla.org/buglist.cgi?list_id=62
7831
7&resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.15 ...
NSS 3.16.2.3 release notes
nss 3.16.2.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_3_rtm/src/ new in nss 3.16.2.3 this patch release fixes a bug and contains a backport of the tls_fallback_scsv feature, which was originally made available in nss 3.1
7.1.
... notable changes in nss 3.16.2.3 bug 105
7161: check that an imported elliptic curve public key is valid.
... bugs fixed in nss 3.16.2.3 bug 105
7161 - nss hangs with 100% cpu on invalid ec key bug 1036
735 - add support for draft-ietf-tls-downgrade-scsv to nss compatibility nss 3.16.2.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.18.1 release notes
ou = equifax secure certificate authority sha1 fingerprint: d2:32:09:ad:23:d3:14:23:21:
74:e4:0d:
7f:9d:62:13:9
7:86:63:3a the following ca certificate was removed after discussion about it in the mozilla.dev.security.policy forum.
... cn = e-guven kok elektronik sertifika hizmet saglayicisi sha1 fingerprint: dd:e1:d2:a9:01:80:2e:1d:8
7:5e:84:b3:80:
7e:4b:b1:fd:99:41:34 the following intermediate ca certificate has been added as actively distrusted because it was misused to issue certificates for domain names the holder did not own or control.
... cn=mcsholding test, o=mcsholding, c=eg sha1 fingerprint: e1:f3:59:1e:
76:98:65:c4:e4:4
7:ac:c3:
7e:af:c9:e2:bf:e4:c5:
76 the version number of the updated root ca list has been set to 2.4 bugs fixed in nss 3.18.1 this bugzilla query returns all the bugs fixed in nss 3.18.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.18.1 compatibility nss 3.18.1 shared libraries are backward compatible with all older nss 3.18 shared libraries.
NSS 3.18 release notes
the following ca certificates had the websites and code signing trust bits turned off ou = equifax secure certificate authority sha1 fingerprint: d2:32:09:ad:23:d3:14:23:21:
74:e4:0d:
7f:9d:62:13:9
7:86:63:3a cn = equifax secure global ebusiness ca-1 sha1 fingerprint:
7e:
78:4a:10:1c:82:65:cc:2d:e1:f1:6d:4
7:b4:40:ca:d9:0a:19:45 cn = tc trustcenter class 3 ca ii sha1 fingerprint: 80:25:ef:f4:6e:
70:c8:d4:
72:24:65:84:fe:40:3b:8a:8d:6a:db:f5 the following ca certificates were added cn = staat der nederlanden roo...
...t ca - g3 sha1 fingerprint: d8:eb:6b:41:51:92:59:e0:f3:e
7:85:00:c0:3d:b6:88:9
7:c9:ee:fc cn = staat der nederlanden ev root ca sha1 fingerprint:
76:e2:
7e:c1:4f:db:82:c1:c0:a6:
75:b5:05:be:3d:29:b4:ed:db:bb cn = identrust commercial root ca 1 sha1 fingerprint: df:
71:
7e:aa:4a:d9:4e:c9:55:84:99:60:2d:48:de:5f:bc:f0:3a:25 cn = identrust public sector root ca 1 sha1 fingerprint: ba:29:41:60:
77:98:3f:f4:f3:ef:f2:31:05:3b:2e:ea:6d:4d:45:fd cn = s-trust universal root ca sha1 fingerprint: 1b:3d:11:14:ea:
7a:0f:95:58:54:41:95:bf:6b:25:82:ab:40:ce:9a cn = entrust root certification authority - g2 sha1 fingerprint: 8c:f4:2
7:fd:
79:0c:3a:d1:66:06:8d:e8:1e:5
7:ef:bb:93:22:
72:d4 ...
...cn = entrust root certification authority - ec1 sha1 fingerprint: 20:d8:06:40:df:9b:25:f5:12:25:3a:11:ea:f
7:59:8a:eb:14:b5:4
7 cn = cfca ev root sha1 fingerprint: e2:b8:29:4b:55:84:ab:6b:58:c2:90:46:6c:ac:3f:b8:39:8f:84:83 the version number of the updated root ca list has been set to 2.3 bugs fixed in nss 3.18 this bugzilla query returns all the bugs fixed in nss 3.18: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.18 compatibility nss 3.18 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.19.3 release notes
notable changes in nss 3.19.3 the following ca certificates were removed cn = buypass class 3 ca 1 sha1 fingerprint: 61:5
7:3a:11:df:0e:d8:
7e:d5:92:65:22:ea:d0:56:d
7:44:b3:23:
71 cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı sha1 fingerprint:
79:98:a3:08:e1:4d:65:85:e6:c2:1e:15:3a:
71:9f:ba:5a:d3:4a:d9 cn = sg trust services racine sha1 fingerprint: 0c:62:8f:5c:55:
70:b1:c9:5
7:fa:fd:38:3f:b0:3d:
7b:
7d:d
7:b9:c6 cn = tc trustcenter universal ca i ...
... sha-1 fingerprint: 6b:2f:34:ad:89:58:be:62:fd:b0:6b:5c:ce:bb:9d:d9:4f:4e:39:f3 cn = tc trustcenter class 2 ca ii sha-1 fingerprint: ae:50:83:ed:
7c:f4:5c:bc:8f:61:c6:21:fe:68:5d:
79:42:21:15:6e the following ca certificate had the websites trust bit turned off cn = comsign secured ca sha1 fingerprint: f9:cd:0e:2c:da:
76:24:c1:8f:bd:f0:f0:ab:b6:45:b8:f
7:fe:d5:
7a the following ca certificates were added cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h5 sha1 fingerprint: c4:18:f6:4d:46:d1:df:00:3d:2
7:30:13:
72:43:a9:12:11:c6:
75:fb cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha1 fingerprint: 8a:5c:8c:ee:a5:03:e6:05:56:ba:d8:1b:d4:f6:c9:b0:ed:e5:2f:e0 ...
... cn = certinomis - root ca sha1 fingerprint: 9d:
70:bb:01:a5:a4:a0:18:11:2e:f
7:1c:01:b9:32:c5:34:e
7:88:a8 the version number of the updated root ca list has been set to 2.5 bugs fixed in nss 3.19.3 this bugzilla query returns all the bugs fixed in nss 3.19.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.3 compatibility nss 3.19.3 shared libraries are backward compatible with all older nss 3.19 shared libraries.
NSS 3.25 release notes
the following ca certificate was removed cn = sonera class1 ca sha-256 fingerprint: cd:80:82:84:cf:
74:6f:f2:fd:6e:b5:8a:a1:d5:9c:4a:d4:b3:ca:56:fd:c6:2
7:4a:89:26:a
7:83:5f:32:31:3d the following ca certificates were added cn = hellenic academic and research institutions rootca 2015 sha-256 fingerprint: a0:40:92:9a:02:ce:53:b4:ac:f4:f2:ff:c6:98:1c:e4:49:6f:
75:5e:6d:45:fe:0b:2a:69:2b:cd:52:52:3f:36 cn = hellenic academic and research institutions ecc rootc...
...a 2015 sha-256 fingerprint: 44:b5:45:aa:8a:25:e6:5a:
73:ca:15:dc:2
7:fc:36:d2:4c:1c:b9:95:3a:06:65:39:b1:15:82:dc:48:
7b:48:33 cn = certplus root ca g1 sha-256 fingerprint: 15:2a:40:2b:fc:df:2c:d5:48:05:4d:22:
75:b3:9c:
7f:ca:3e:c0:9
7:80:
78:b0:f0:ea:
76:e5:61:a6:c
7:43:3e cn = certplus root ca g2 sha-256 fingerprint: 6c:c0:50:41:e6:44:5e:
74:69:6c:4c:fb:c9:f8:0f:54:3b:
7e:ab:bb:44:b4:ce:6f:
78:
7c:6a:99:
71:c4:2f:1
7 cn = opentrust root ca g1 sha-256 fingerprint: 56:c
7:
71:28:d9:8c:18:d9:1b:4c:fd:ff:bc:25:ee:91:03:d4:
75:8e:a2:ab:ad:82:6a:90:f3:45:
7d:46:0e:b4 cn = opentrust root ca g2 sha-256 fingerprint: 2
7:99:58:29:fe:6a:
75:15:c1:bf:e8:48:f9:c4:
76:1d:b1:6c:22:59:29:25:
7b:f4:0d:08:94:f2:9e:a8:ba:f2 ...
... cn = opentrust root ca g3 sha-256 fingerprint: b
7:c3:62:31:
70:6e:81:0
7:8c:36:
7c:b8:96:19:8f:1e:32:08:dd:92:69:49:dd:8f:5
7:09:a4:10:f
7:5b:62:92 bugs fixed in nss 3.25 this bugzilla query returns all the bugs fixed in nss 3.25: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.25 compatibility nss 3.25 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.30.2 release notes
notable changes in nss 3.30.2 the following ca certificates were removed: o = japanese government, ou = applicationca sha-256 fingerprint: 2d:4
7:43:
7d:e1:
79:51:21:5a:12:f3:c5:8e:51:c
7:29:a5:80:26:ef:1f:cc:0a:5f:b3:d9:dc:01:2f:60:0d:19 cn = wellssecure public root certificate authority sha-256 fingerprint: a
7:12:
72:ae:aa:a3:cf:e8:
72:
7f:
7f:b3:9f:0f:b3:d1:e5:42:6e:90:60:b0:6e:e6:f1:3e:9a:3c:58:33:cd:43 cn=tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha-256 fingerprint: 8d:e
7:86:55:e1:...
...be:
7f:
78:4
7:80:0b:93:f6:94:d2:1d:36:8c:c0:6e:03:3e:
7f:ab:04:bb:5e:b9:9d:a6:b
7:00 cn=microsec e-szigno root sha-256 fingerprint: 32:
7a:3d:
76:1a:ba:de:a0:34:eb:99:84:06:2
7:5c:b1:a4:
77:6e:fd:ae:2f:df:6d:01:68:ea:1c:4f:55:6
7:d0 the following ca certificates were added: cn = d-trust root ca 3 2013 sha-256 fingerprint: a1:a8:6d:04:12:1e:b8:
7f:02:
7c:66:f5:33:03:c2:8e:5
7:39:f9:43:fc:84:b3:8a:d6:af:00:90:35:dd:94:5
7 trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-256 fingerprint: 46:ed:c3:68:90:46:d5:3a:45:3f:b3:10:4a:b8:0d:ca:ec:65:8b:26:60:ea:16:29:dd:
7e:86:
79:90:64:8
7:16 trust flags: websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.tr, bel.tr, edu.tr,...
... org.tr the version number of the updated root ca list has been set to 2.14 (the version numbers 2.12 and 2.13 for the root ca list have been skipped.) bugs fixed in nss 3.30.2 bug 1350859 - march 201
7 batch of root ca changes bug 1349
705 - implemented domain name constraints for ca: tubitak kamu sm ssl kok sertifikasi - surum 1 compatibility nss 3.30.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.31 release notes
nss 3.31 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_31_rtm/src/ new in nss 3.31 new functionality allow certificates to be specified by rfc
7512 pkcs#11 uris.
... new macros in pkcs11uri.h several new macros that start with pk11uri_pattr_ for path attributes defined in rfc
7512.
... several new macros that start with pk11uri_qattr_ for query attributes defined in rfc
7512.
NSS 3.34.1 release notes
nss 3.34.1 requires netscape portable runtime (nspr) 4.1
7, or newer.
...(bug 14186
78) cn = certum ca, o=unizeto sp.
... sha-256 fingerprint: d8:e0:fe:bc:1d:b2:e3:8d:00:94:0f:3
7:d2:
7d:41:34:4d:99:3e:
73:4b:99:d5:65:6d:9
7:
78:d4:d8:14:36:24 removed entries from certdata.txt for actively distrusted certificates that have expired (bug 14098
72).
NSS 3.50 release notes
introduction the nss team has released network security services (nss) 3.50 on
7 february 2020, which is a minor release.
...nss 3.49.1 sped up pbkdf2 operations, though pbkdf1 operations are also relevant for older nss databases (also included in nss 3.49.2) bug 1608895 - gyp builds on taskcluster broken by setuptools v45.0.0 (for lacking python3) bug 15
74643 - upgrade hacl* verified implementations of chacha20, poly1305, and 64-bit curve25519 bug 160832
7 - two problems with neon-specific code in freebl bug 15
75843 - detect aarch64 cpu features on freebsd bug 160
7099 - remove the buildbot configuration bug 1585429 - add more hkdf test vectors bug 15
73911 - add more rsa test vectors bug 1605314 - compare all 8 bytes of an mp_digit when clampi...
... bug 154
7639 - update zlib in nss to 1.2.11 bug 1609181 - detect arm (32-bit) cpu features on freebsd bug 1602386 - fix build on freebsd/powerpc* bug 1608151 - introduce nss_disable_altivec bug 1612623 - depend on nspr 4.25 bug 16096
73 - fix a crash when nss is compiled without libnssdbm support, but the nssdbm shared object is available anyway.
NSS 3.51.1 release notes
notable changes in nss 3.51.1 bug 161
7968 - update delegated credentials implementation to draft-0
7.
... bug 1618
739 - don't assert fuzzer behavior in ssl_parsesessionticket.
... bug 161
7968 - update delegated credentials implementation to draft-0
7.
nss tech note3
the oid for this extension is { 2 16 840 1 113
730 1 1 } encoded in hex as 0x60, 0x86, 0x48, 0x01, 0x86, 0xf8, 0x42, 0x01, 0x01 in addition to netscape's own cert type extension, nss recognizes various x.509 extensions.
... the x.509v3 extended key usage extension as oid { 2 5 29 3
7 } encoded in hex as 0x55, 0x1d, 0x25.
..._type_ssl_server (0x40) /* bit 1 */ #define ns_cert_type_email (0x20) /* bit 2 */ #define ns_cert_type_object_signing (0x10) /* bit 3 */ #define ns_cert_type_reserved (0x08) /* bit 4 */ #define ns_cert_type_ssl_ca (0x04) /* bit 5 */ #define ns_cert_type_email_ca (0x02) /* bit 6 */ #define ns_cert_type_object_signing_ca (0x01) /* bit
7 */ </x> ...
Notes on TLS - SSL 3.0 Intolerant Servers
problem a number of netscape 6.x/
7.x and mozilla users have reported that some secure sites -- typically sites featuring online transactions or online banking over the https protocol -- do not display any content at all.
... netscape 6.x/
7.x and mozilla browsers (0.9.1 and later versions) correctly implement the tls specification, and the users cannot utilize sites which have this problem.
...(note: you will be asked to provide your email address before you can file a bug at bugzilla.) original document information author : katsuhiko momoi last updated date: january 2
7th, 2003 copyright © 2001-2003 netscape.
NSS tools : signver
name signver — verify a detached pkcs#
7 signature for a file.
... synopsis signtool -a | -v -d directory [-a] [-i input_file] [-o output_file] [-s signature_file] [-v] description the signature verification tool, signver, is a simple command-line utility that unpacks a base-64-encoded pkcs#
7 signed object and verifies the digital signature using standard cryptographic techniques.
... options -a displays all of the information in the pkcs#
7 signature.
Network Security Services
applications built with nss can support ssl v3, tls, pkcs #5, pkcs #
7, pkcs #11, pkcs #12, s/mime, x.509 v3 certificates, and other security standards.
... cert
7.db archived version.
... general format of the cert
7.db database.
Download Rhino
binaries release release date change log download link rhino 1.
7r4 2012-06-18 new in rhino 1.
7r4 rhino1_
7r4.zip rhino 1.
7r5 2015-01-29 release notes rhino1_
7r5.zip rhino 1.
7.6 2015-04-15 release notes rhino1.
7.6.zip rhino 1.
7.
7 2015-06-1
7 release notes rhino1.
7.
7.zip rhino 1.
7.
7.1 2016-02-01 release notes rhino1.
7.
7.1.zip rhino 1.
7.
7.2 201
7-08-24 release notes rhino1.
7.
7.2.zip rhino 1.
7.8 2018-01-22 release notes rhino1.
7.8.zip rhino 1.
7.9 2018-03-15 release notes rhino1.
7.9.zip rhino 1.
7.10 2018-04-09 release notes rhino1.
7.10.zip ...
... rhino 1.
7.11 2019-05-30 release notes rhino1.
7.11.zip rhino 1.
7.12 2020-01-13 release notes rhino1.
7.12.zip to download older rhino versions, see the rhino downloads archive.
...as of release 1.
7r4 rhino is available under mpl 2.0.
Small Footprint
on a recent build, the length of js.jar was 603,12
7 bytes corresponding to 1,1
71,
708 bytes of all uncompressed rhino classes with debug information included.
... with various changes js.jar size can be reduced to 204,689 bytes corresponding to 424,
774 bytes of uncompressed classes.
...this change saves 4
7,984 bytes of class files.
Scripting Java
this works just as in java, with the use of the new operator: js> new java.util.date() thu jan 24 16:18:1
7 est 2002 if we store the new object in a javascript variable, we can then call methods on it: js> f = new java.io.file("test.txt") test.txt js> f.exists() true js> f.getname() test.txt static methods and fields can be accessed from the class object itself: js> java.lang.math.pi 3.141592653589
793 js> java.lang.math.cos(0) 1 in javascript, unlike java, the method by itself is an object and ...
...to create an array of five java strings you would make the following call: js> a = java.lang.reflect.array.newinstance(java.lang.string, 5); [ljava.lang.string;@
7ffe01 to create an array of primitive types, we must use the special type field defined in the associated object class in the java.lang package.
... for example, to create an array of bytes, we must use the special field java.lang.byte.type: js> a = java.lang.reflect.array.newinstance(java.lang.character.type, 2); [c@
7a84e4 the resulting value can then be used anywhere a java array of that type is allowed.
JS::Evaluate
this article covers features introduced in spidermonkey 1
7 compile and execute a script.
...ndlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlevalue rval); // added in spidermonkey 1
7 bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehand...
... see also mxr id search for js::evaluate js::compile js_executescript bug
771
705 bug 109
798
7 -- remove obj parameter ...
JS::ToBoolean
this article covers features introduced in spidermonkey 1
7 convert any javascript value to a boolean.
...it implements the toboolean operation described in ecma 262 §
7.1.2.this function can not fail and the return value is always the boolean conversion of the argument.
... mxr id search for js::toboolean bug
749536 ...
JS::ToUint16
this article covers features introduced in spidermonkey 1
7 convert any javascript value to an unsigned 16bit integer.
...it implements the toint16 operator described in ecma 262-3 §9.
7.
... see also mxr id search for js::touint16 bug
779601 ...
JS_DefineFunction
fineucfunction(jscontext *cx, js::handle<jsobject*> obj, const char16_t *name, size_t namelen, jsnative call, unsigned nargs, unsigned attrs); jsfunction * js_definefunctionbyid(jscontext *cx, js::handle<jsobject*> obj, js::handle<jsid> id, jsnative call, unsigned nargs, unsigned attrs); // added in spidermonkey 1
7 name type description cx jscontext * the context in which to define the function.
...added in spidermonkey 1
7 call jsnative the native c/c++ function to be wrapped by the new function.
...see also mxr id search for js_definefunction mxr id search for js_defineucfunction mxr id search for js_definefunctionbyid js_callfunctionname js_callfunctionvalue js_compilefunction js_definefunctions js_defineobject js_defineproperties js_defineproperty js_getfunctionobject js_newfunction bug 60
7695 - added js_definefunctionbyid ...
JS_DoubleIsInt32
this article covers features introduced in spidermonkey 1
7 compare double value and int32_t value.
... we should definitely fix this (bug
744965), but as apparently it "works" in practice, it's not a pressing concern now.
... see also mxr id search for js_doubleisint32 js_doubletoint32 js_doubletouint32 bug 631132 bug
744965 ...
JS_DumpHeap
jstrace_outofline = 0x0
7, // the following kinds do not have an exposed c++ idiom.
... jstrace_base_shape = 0x0f, jstrace_jitcode = 0x1f, jstrace_lazy_script = 0x2f, jstrace_type_object = 0x3f, jstrace_last = jstrace_type_object }; description see bug 3
78261 for detail.
... see also bug 3
78261 bug 1122842 ...
JS_FS
// added in spidermonkey 1
7 #define js_self_hosted_fn(name,selfhostedname,nargs,flags) ...
...see also mxr id search for js_fs mxr id search for js_fn mxr id search for js_sym_fn mxr id search for js_fninfo mxr id search for js_self_hosted_fn mxr id search for js_self_hosted_sym_fn mxr id search for js_sym_fnspec mxr id search for js_fnspec mxr id search for js_fs_end jsfunctionspec js_defineproperties js_initclass bug
775
788 - added js_fninfo.
... bug 10826
72 - added js_sym_fn js_self_hosted_sym_fn js_sym_fnspec.
JS_GetGCParameter
syntax uint32_t js_getgcparameter(jsruntime *rt, jsgcparamkey key); void js_setgcparameter(jsruntime *rt, jsgcparamkey key, uint32_t value); uint32_t js_getgcparameterforthread(jscontext *cx, jsgcparamkey key); // added in spidermonkeysidebar 1
7 void js_setgcparameterforthread(jscontext *cx, jsgcparamkey key, uint32_t value); // added in spidermonkeysidebar 1
7 name type description rt jsruntime * the runtime to configure.
... see also mxr id search for js_getgcparameter mxr id search for js_setgcparameter bug 4
74801 jsgc_bytes jsgc_number bug 4
7449
7 jsgc_max_code_cache_bytes this option no-longer exists js_getgcparameterforthread js_setgcparameterforthread bug 624229 jsgc_mode bug 631
733 jsgc_unused_chunks bug 6
74480 jsgc_total_chunks bug 641025 jsgc_slice_time_budget bug 6
73551 jsgc_mark_stack_limit bug
76543...
...5 jsgc_high_frequency_time_limit jsgc_high_frequency_low_limit jsgc_high_frequency_high_limit jsgc_high_frequency_heap_growth_max jsgc_high_frequency_heap_growth_min jsgc_low_frequency_heap_growth jsgc_dynamic_heap_growth jsgc_dynamic_mark_slice bug 800063 jsgc_allocation_threshold bug 8
71005 jsgc_decommit_threshold this option is no-longer exists bug 101
7141 jsgc_min_empty_chunk_count jsgc_max_empty_chunk_count ...
JS_NewFunction
js::handle<jsid> id); // obsolete since jsapi 39 jsfunction * js_newfunction(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, js::handle<jsobject*> parent, const char *name); jsfunction * js_newfunctionbyid(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, js::handle<jsobject*> parent, js::handle<jsid> id); // added in spidermonkey 1
7 name type description cx jscontext * the context in which to create the new function.
...added in spidermonkey 1
7 description js_newfunction creates a new javascript function implemented in c/c++.
... see also mxr id search for js_newfunction mxr id search for js_newfunctionbyid js_callfunction js_callfunctionname js_callfunctionvalue js_compilefunction js_compileucfunction js_definefunction js_definefunctions js_getfunctionname js_getfunctionobject bug 60
7695 - added js_newfunctionbyid bug 11405
73 - removed parent parameter bug 1054
756 - removed js_newfunctionbyid ...
Parser API
example: > var expr = reflect.parse("obj.foo + 42").body[0].expression > expr.left.property ({loc:null, type:"identifier", name:"foo"}) > expr.right ({loc:{source:null, start:{line:1, column:10}, end:{line:1, column:12}}, type:"literal", value:42}) it is also available since firefox
7; it can be imported into the global object via: components.utils.import("resource://gre/modules/reflect.jsm") or into a specified object via: components.utils.import("resource://gre/modules/reflect.jsm", obj) built-in objects whether in spidermonkey shell or firefox (after importing), the global singleton object reflect currently contains just the parse method.
... patterns interface pattern <: node { } javascript 1.
7 introduced destructuring assignment and binding forms.
... note: e4x is not part of the ecmascript standard (ecma-262), but is a separate standard of its own (ecma-35
7).
SpiderMonkey 24
these release notes are an incomplete draft and were initially seeded from the spidermonkey 1
7 release notes, so they're not necessarily complete or fully accurate.
...you can download full source code here: https://ftp.mozilla.org/pub/mozilla.org/js/mozjs-24.2.0.tar.bz2 (sha1: ce
779081cc11bd0c8
71c6f303fc4a0091cf4fe66) spidermonkey 24 is the javascript engine that shipped in firefox 24.
... typedef changes the fixed-size integer types introduced in spidermonkey 1
7 are defined in one of the following ways (xxx update for msvc<10 deprecation): if the environment variable moz_custom_stdint_h is set, that file will be included to provide definitions for these types.
Creating the Component Code
registration is a process that happens in all xpcom applications, whether they're embedded gecko clients, mozilla, netscape
7, compuserve, or any other software that uses xpcom.
...static const nsiid kimoduleiid = ns_imodule_iid; static const nsiid kifactoryiid = ns_ifactory_iid; static const nsiid kisupportsiid = ns_isupports_iid; static const nsiid kicomponentregistrariid = ns_icomponentregistrar_iid; // generate unique id here with uuidgen #define sample_cid \ { 0x
777f
7150, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} static const nscid ksamplecid = sample_cid; nsimodule.h and nsifactory.h are required to build your module successfully.
... #define mozilla_strict_api #include "nsimodule.h" #include "nsifactory.h" #include "nsicomponentmanager.h" #include "nsicomponentregistrar.h" static const nsiid kimoduleiid = ns_imodule_iid; static const nsiid kifactoryiid = ns_ifactory_iid; static const nsiid kisupportsiid = ns_isupports_iid; static const nsiid kicomponentregistrariid = ns_icomponentregistrar_iid; #define sample_cid \ { 0x
777f
7150, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} static const nscid ksamplecid = sample_cid; class sample: public nsisupports { private: nsrefcnt mrefcnt; public: sample(); virtual ~sample(); ns_imethod queryinterface(const nsiid &aiid, void **aresult); ns_imethod_(nsrefcnt) addref(void); ns_imethod_(nsrefcnt) release(void); }; sample::...
Components.utils.Sandbox
example the content principal above can be made expanded/extended like so: var principal = [gbrowser.selectedtab.linkedbrowser.contentprincipal]; // this is now an expanded (aka extended) principal var sandbox = components.utils.sandbox(principal); null principal you can create a null principal using code like: cc["@mozilla.org/nullprincipal;1"].createinstance(ci.nsiprincipal); from firefox 3
7 onwards, you can also specify the null principal by simply passing null as the principal argument.
...note that "-promise" is removed in firefox 3
7.
... the following objects are supported: -promise (removed in firefox 3
7) css indexeddb (web worker only) xmlhttprequest textencoder textdecoder url urlsearchparams atob btoa blob file crypto rtcidentityprovider fetch (added in firefox 41) caches filereader for example: var sandboxscript = 'var encoded = btoa("hello");' + 'var decoded = atob(encoded);'; var options = { "wantglobalproperties": ["atob", "btoa"] } var sandbox = components.utils.sandbox("https://example.org/", options); components.utils.evalinsandbox(sandboxscript, sandbox); con...
RefPtr
refptr (formerly known as nsrefptr, see bug 120
7245) is a general class to implement reference counting pointers for objects.
...bug
756640 is on file to enforce this rule but hasn't yet been fixed.
...there are no technical problems with doing so, and in some cases it may be necessary (see bug
756640 comment 1).
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x0000100
7 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x000010...
...13 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001016 xultab 0x0000101
7 the single tab in a dialog or tabbrowser/editor interface.
... xformssecret 0x0000200
7 used for secret element.
nsIAlertsService
1.0 66 introduced gecko 1.
7 inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) by default a message is displayed in a small window that slides up from the bottom of the screen, holds there for a few seconds, then slides down.
... note: prior firefox 22, the alerts service was only supported on windows in gecko 1.
7, had no effect on mac os x in gecko 1.8, but was fully supported in mac os x in gecko 1.9.
... see also alerts and notifications bug
782211 - implement notification api spec ui.alertnotificationorigin [en-us] bug 12
70819 - nsialertsservice showalertnotification sliding alert unnecessarily big / high ...
nsICookie2
last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsicookie attributes attribute type description creationtime print64 the creation time of the cookie, in microseconds since midnight (00:00:00), january 1, 19
70 utc.
... expiry print64 the actual expiry time of the cookie, in seconds since midnight (00:00:00), january 1, 19
70 utc.
... lastaccessed print64 the last time the cookie was accessed, in microseconds since midnight (00:00:00) on january 1, 19
70 utc.
nsIDOMWindowUtils
boolean aignorerootscrollframe); void sendmouseeventtowindow(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmousescrollevent(in astring atype, in float ax, in float ay, in long abutton, in long ascrollflags, in long adelta, in long amodifiers); obsolete since gecko 1
7.0 void sendwheelevent(in float ax, in float ay, in double adeltax, in double adeltay, in double adeltaz, in unsigned long adeltamode, in long amodifiers, in long alineorpagedeltax, in long alineorpagedeltay, in unsigned long aoptions); void sendnativekeyevent(in long anativekeyboardlayout, in long anativekeycode, in long amodifierflags, in astring acharacters, in astring aunmod...
... select_character 0 select_cluster 1 select_word 2 select_line 3 select_beginline 4 select_endline 5 select_paragraph 6 select_wordnospace
7 agent_sheet 0 a possible type of a style sheet loaded/removed with loadsheet()/removesheet().
... aignorerootscrollframe optional sendmousescrollevent() obsolete since gecko 1
7.0 (firefox 1
7.0 / thunderbird 1
7.0 / seamonkey 2.14)this feature is obsolete.
nsIDialogParamBlock
inherits from: nsisupports last changed in gecko 1.
7 method overview print32 getint( in print32 inindex ); wstring getstring( in print32 inindex ); void setint( in print32 inindex, in print32 inint ); void setnumberstrings( in print32 innumstrings ); void setstring( in print32 inindex, in wstring instring); attributes attribute type description objects nsimutablearray a place where you can store an nsimutablearray to pass nsisupports.
...must be in the range 0..
7.
...must be in the range 0..
7.
nsIFilePicker
inherits from: nsisupports last changed in gecko 1
7.0 (firefox 1
7.0 / thunderbird 1
7.0 / seamonkey 2.14) implemented by: @mozilla.org/filepicker;1.
... .createinstance(components.interfaces.nsifilepicker); method overview void appendfilter(in astring title, in astring filter); void appendfilters(in long filtermask); void init(in nsidomwindow parent, in astring title, in short mode); void open(in nsifilepickershowncallback afilepickershowncallback); short show(); obsolete since gecko 5
7.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's platform).
... show() obsolete since gecko 5
7.0 (firefox 5
7.0 / thunderbird 5
7.0 / seamonkey 2.54) displays the file picker dialog.
nsINavHistoryQuery
the time is relative to jan 1 19
70 gmt, (this is a normal prtime).
... note: prtime is in microseconds since 1 jan 19
70.
... javascript date objects are expressed in milliseconds since 1 jan 19
70.
nsISupportsPrimitive
inherits from: nsisupports last changed in gecko 1.
7 attributes attribute type description type unsigned short this attribute provides access to the type represented by the nsisupportsprimitive instance.
... type_pruint32
7 corresponding to nsisupportspruint32.
... type_interface_pointer 1
7 corresponding to nsisupportsinterfacepointer.
nsIWebBrowserPersist
persist_flags_append_to_file 32
768 append the downloaded data to the target file.
... encode_flags_encode_html_entities 32
768 encode html4 entities.
... as of firefox 36, a new parameter areferrerpolicy was added as the fourth argument, changing the number of parameters from
7 to 8 and shifting the order of the parameters in a backwards incompatible way.
nsIWinTaskbar
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) starting with windows
7, applications gain some control over their appearance in the taskbar.
...see bug
744992 for details and to track progress on a fix.
...w(in nsidocshell shell, in nsitaskbarpreviewcontroller controller); nsitaskbarprogress gettaskbarprogress(in nsidocshell shell); nsitaskbarwindowpreview gettaskbarwindowpreview(in nsidocshell shell); void setgroupidforwindow(in nsidomwindow aparent, in astring aidentifier); attributes attribute type description available boolean returns true if the operating system supports windows
7 or later taskbar features; you can use this instead of in-place operating system version checking.
nsIZipReader
inherits from: nsisupports last changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.
7) implemented by: @mozilla.org/libjar/zip-reader;1.
... to create an instance, use: var zipreader = components.classes["@mozilla.org/libjar/zip-reader;1"] .createinstance(components.interfaces.nsizipreader); about character sets and code pages note: nsizipreader has a code page problem; that is, in the zip specification, filenames are supposed to use
7-bit ascii; however, most modern filesystems use 8 bit code pages, such as utf-8.
... starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.
7), the nsizipreader api supports a limited 8 bit code page usage.
nsMsgSearchOpValue
nsmsgsearchopvalue defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl 146 typedef long nsmsgsearchopvalue; 14
7 148 [scriptable, uuid(9160b196-6fcb-4eba-aaaf-6c806c4ee420)] 149 interface nsmsgsearchop { 150 const nsmsgsearchopvalue contains = 0; /* for text attributes */ 151 const nsmsgsearchopvalue doesntcontain = 1; 152 const nsmsgsearchopvalue is = 2; /* is and isn't also apply to some non-text attrs */ 153 const nsmsgsearchopvalue isnt = 3; 154 const nsmsgsearchopvalue isempty = 4; 155 156 const nsmsgsearchopvalue isbefore = 5; /* for date attributes */ 15
7 const nsmsgsearchopvalue isafter = 6; 158 159 const nsmsgsearchopvalue ishigherthan =
7; /* for priority.
... is also applies */ 160 const nsmsgsearchopvalue islowerthan = 8; 161 162 const nsmsgsearchopvalue beginswith = 9; 163 const nsmsgsearchopvalue endswith = 10; 164 165 const nsmsgsearchopvalue soundslike = 11; /* for ldap phoenetic matching */ 166 const nsmsgsearchopvalue ldapdwim = 12; /* do what i mean for simple search */ 16
7 168 const nsmsgsearchopvalue isgreaterthan = 13; 169 const nsmsgsearchopvalue islessthan = 14; 1
70 1
71 const nsmsgsearchopvalue namecompletion = 15; /* name completion operator...as the name implies =) */ 1
72 const nsmsgsearchopvalue isinab = 16; 1
73 const nsmsgsearchopvalue isntinab = 1
7; 1
74 const nsmsgsearchopvalue isntempty = 18; /* primarily for tags */ 1
75 const nsmsgsearchopvalue matches = 19; /* generic te...
...rm for use by custom terms */ 1
76 const nsmsgsearchopvalue doesntmatch = 20; /* generic term for use by custom terms */ 1
77 const nsmsgsearchopvalue knummsgsearchoperators = 21; /* must be last operator */ 1
78 }; ...
nsMsgViewCommandType
deletemsg
7 move the selected message to the accounts trash.
... downloadflaggedforoffline 1
7 download all flagged messages for offline.
... junk 2
7 mark the selected messages as junk.
CData
r, if you know its jschar for sure, pass 2nd arg as true // if known_len is passed, then assumption is not made, at the known_len position in array we will see a null char // i tried getting known_len from stringptr but its not possible, it has be known, i tried this: //"stringptr.contents.tostring()" "95" //"stringptr.tostring()" "ctypes.unsigned_char.ptr(ctypes.uint64("0x
7f
73d5c8
7650"))" // so as we see neither of these is
77, this is for the example of "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" // tries to do read string on stringptr, if it fails then it falls to read as jschar var readjscharstring = function() { var assumption_max_len = known_len ?
...ts; // must cast to unsigned char (not ctypes.jschar, or ctypes.char) as otherwise i dont get foreign characters, as they are got as negative values, and i should read till i find a 0 which is null terminator which will have unsigned_char code of 0 // can test this by reading a string like this: "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" at js array position 36 (so 3
7 if count from 1), we see 183, and at
77 we see char code of 0 if casted to unsigned_char, if casted to char we see -
73 at pos 36 but pos
77 still 0, if casted to jschar we see chineese characters in all spots expect spaces even null terminator is a chineese character console.info('ptrasarr.length:', ptrasarr.length); //console.log('debug-msg :: datacasted:', datacasted, uneval(dat...
...acasted), datacasted.tostring()); var charcode = []; var fromcharcode = [] for (var i=0; i<ptrasarr.length; i++) { //if known_len is correct, then will not hit null terminator so like in example of "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" if you pass length of
77, then null term will not get hit by this loop as null term is at pos
77 and we go till `< known_len` var thisunsignedcharcode = ptrasarr.addressofelement(i).contents; if (thisunsignedcharcode == 0) { // reached null terminator, break console.log('reached null terminator, at pos: ', i); break; } charcode.push(thisunsignedcharcode); fromcharcode.push(string.fromcharcode(t...
Plug-in Basics - Plugins
example 1: nesting object elements <html> <head> <title>example 1: nesting object elements</title> <style type="text/css"> .myplugin { width: 4
70px; height: 231px; } </style> </head> <body><p> <object classid="clsid:d2
7cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0" class="myplugin"> <param name="movie" value="foo.swf"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> ...
... example 2: embed within object <object classid="clsid:d2
7cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0" width="
749" height="68"> <param name="movie" value="foo.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#eeeeee"> <param name="salign" value="tl"> <param name="menu" value="0"> <embed src="foo.swf" quality="high" pluginspage="htt...
...p://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash" type="application/x-shockwave-flash" width="
749" height="68" bgcolor="#eeeeee" salign="tl" menu="0"> </embed> </object> using custom embed attributes in addition to these standard attributes, you can create private, plug-in-specific attributes and use them in the embed attribute to pass extra information between the html page and the plug-in code.
Step through code - Firefox Developer Tools
n call, in which case enter the function being called step out: run to the end of the current function, in which case, the debugger will skip the return value from a function, returning execution to the caller split console when paused, you can press the esc key to open and close the split console to gain more insight into errors and variables: pause on breakpoints overlay since firefox
70, when your code is paused on a breakpoint an overlay appears on the viewport of the tab you are debugging.
... if you want to turn this feature off, since firefox
71 you can do so by going to about:config in a new tab, setting the devtools.debugger.features.overlay pref to false, and restarting the browser.
... inline variable preview new in firefox
71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through.
Set event listener breakpoints - Firefox Developer Tools
logging on events in firefox
71 onwards, the “log” checkbox is available in the event listener breakpoints list.
... now the logs will show where in your app jquery was called, rather than where in jquery the event was fired: filter by event type also added to firefox
71 is a new filter by event type...
... inline variable preview new in firefox
71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through.
Frame rate - Firefox Developer Tools
a frame rate of 60fps is the target for smooth performance, giving you a time budget of 16.
7ms for all the updates needed in response to some event.
... a frame rate of 60fps is reckoned to be the target for smooth performance, giving you a time budget of 16.
7ms for all the updates that need to be made synchronously in response to some event.
... if we select one of these slices of the recording, the main waterfall view underneath it is zoomed into it, and we can see the function that's causing the problem: we have a javascript function from a click event that's blocking the main thread for 1
70 milliseconds.
Animating CSS properties - Firefox Developer Tools
for a rate of 60 frames per second, that gives the browser 16.
7 milliseconds to execute the complete flow.
...average frame rate here is 46.6
7fps, well below the target of 60fps.
...with only 16.
7ms in our total budget, it's not surprising we are missing a consistently high frame rate.
Waterfall - Firefox Developer Tools
for a rate of 60 frames per second, that gives the browser 16.
7 milliseconds to execute the complete flow.
... for example, suppose we have code like this: var iterations =
70; var multiplier = 1000000000; function calculateprimes() { console.time("calculating..."); var primes = []; for (var i = 0; i < iterations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } ...
... for example, suppose we adapt the code above to make a timestamp every 10 iterations of the loop, labeled with the iteration number: var iterations =
70; var multiplier = 1000000000; function calculateprimes() { console.time("calculating..."); var primes = []; for (var i = 0; i < iterations; i++) { if (i % 10 == 0) { console.timestamp(i.tostring()); } var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { ...
The JavaScript input interpreter - Firefox Developer Tools
starting in firefox
76, if the code snippet is more than five lines long, only the first five lines are echoed in the console, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…).
... instant evaluation this feature is available in firefox nightly, in versions labeled
74 and later.
... pprint() obsolete since gecko
74 formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
AudioBuffer() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffer() constructorchrome full support 55notes full support 55notes notes the context parameter was supported up until version 5
7, but has now been removed.edge full support ≤
79firefox full support 53ie no support noopera full support 42notes full support 42notes notes the context parameter was suppo...
... webview android full support 55notes full support 55notes notes the context parameter was supported up until version 5
7, but has now been removed.chrome android full support 55notes full support 55notes notes the context parameter was supported up until version 5
7, but has now been removed.firefox android full support 53opera android full support 42notes full support 42notes notes the conte...
... samsung internet android full support 6.0notes full support 6.0notes notes the context parameter was supported up until samsung internet
7.0, but has now been removed.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
AudioNode.channelInterpretation - Web APIs
output.m = 0.
70
71 * (input.l + input.r) + input.c + 0.5 * (input.sl + input.sr) 6 (5.1) 2 (stereo) down-mix from 5.1 to stereo.
... output.l = input.l + 0.
70
71 * (input.c + input.sl) output.r = input.r + 0.
70
71 * (input.c + input.sr) 6 (5.1) 4 (quad) down-mix from 5.1 to quad.
... output.l = input.l + 0.
70
71 * input.c output.r = input.r + 0.
70
71 * input.c output.sl = input.sl output.sr = input.sr other, non-standard layouts non-standard channel layouts are handled as if channelinterpretation is set to discrete.
BasicCardRequest.supportedNetworks - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupportednetworkschrome no support noedge no support ≤18 —
79firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 5
7firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
BlobEvent.timecode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimecode experimentalchrome full support 5
7edge full support ≤
79firefox ?
... ie no support noopera full support 44safari no support nowebview android full support 5
7chrome android full support 5
7firefox android ?
... opera android full support 43safari ios no support nosamsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
BudgetState - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetstate experimentaldeprecatednon-standardchrome full support 60edge full support ≤
79firefox ?
... samsung internet android full support 8.0budgetat experimentaldeprecatednon-standardchrome full support 60edge full support ≤
79firefox ?
... samsung internet android full support 8.0time experimentaldeprecatednon-standardchrome full support 60edge full support ≤
79firefox ?
CDATASection - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
73.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a><polyline points="511,25 521,20 521,30 511,25" stroke="#d4dde4" fill="none"/><line x1="521" y1="25" x2="529" y2="25" stroke="#d4dde4"/><line x1="529" y1="25" x2...
...="529" y2="90" stroke="#d4dde4"/><line x1="529" y1="90" x2="512" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cdatasection" target="_top"><rect x="391" y="65" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="451" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cdatasection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific properties and implements those of its parent text.
Using the CSS Painting API - Web APIs
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item
7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 1
7</li> <li>item</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/boxbg.js'); li { background-image: paint(boxbg); --boxcolor: h...
...ill(); } } // paint }); we can then create a little html that will accept this image as backgrounds: <h1 class="fancy">largest header</h1> <h3 class="fancy">medium size header</h3> <h6 class="fancy">smallest header</h6> we give each header a different value for the --highcolour custom property .fancy { background-image: paint(headerhighlight); } h1 { --highcolour: hsla(155, 90%, 60%, 0.
7); } h3 { --highcolour: hsla(255, 90%, 60%, 0.5); } h6 { --highcolour: hsla(355, 90%, 60%, 0.3); } and we register our worklet css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/03partthree/header-highlight.js'); while you can't edit the worklet itself, you can play around with the css and html.
..., 5px); } li:nth-of-type(3n) { --boxcolor: hsla(255, 90%, 60%, 0.5); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(355, 90%, 60%, 0.5); background-image: paint(hollowhighlights, stroke, 1px); } <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item
7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 1
7</li> <li>item</li> </ul> in our <script> we register the worklet: css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hollow.js'); see also ...
CanvasRenderingContext2D.addHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); canvas.addeventlistener('mousemove', function(event) { if(event.region) { alert('ouch, my eye :('); } }); ctx.beginpath(); ctx.arc(100, 100,
75, 0, 2 * math.pi); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(
70, 80, 10, 0, 2 * math.pi); ctx.arc(130, 80, 10, 0, 2 * math.pi); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi); ctx.stroke(); edit the code below to see your changes update live in the canvas.
...rts hit regions already; you might need to activate a preference.) playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100,
75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(
70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi, false); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); va...
...see https://github.com/whatwg/html/issues/340
7 for more information.
CanvasRenderingContext2D.rotate() - Web APIs
its vertical center is at (60 + 30 / 2), or
75.
... thus, the center point is at (150,
75).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150,
75); ctx.rotate(math.pi / 2); ctx.translate(-150, -
75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red.
Comment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
..."#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="4
73.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">comment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific property, but inherits those of its parent, characterdata, and indirectly those of node.
console - Web APIs
outputting a single object the simplest way to use the logging methods is to output a single object: var someobject = { str: "some text", id: 5 }; console.log(someobject); the output looks something like this: [09:2
7:13.4
75] ({str:"some text", id:5}) outputting multiple objects you can also output multiple objects by simply listing them when calling the logging method, like this: var car = "dodge charger"; var someobject = { str: "some text", id: 5 }; console.info("my first car was a", car, ".
... the object is:", someobject); this output will look like this: [09:28:22.
711] my first car was a dodge charger .
...[13:14:13.48
7] hello, bob.
Examples of web and XML development using the DOM - Web APIs
", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba
7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba
7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba
7141ed1.gif" style="height: 50px; width: 500px;"> </...
...table id="t-daddy" onclick="alert('hi');"> <tr id="tbl1"> <td id="c1">one</td> </tr> <tr> <td id="c2">two</td> </tr> </table> </body> </html> example 6: getcomputedstyle this example demonstrates how the window.getcomputedstyle method can be used to get the styles of an element that are not set using the style attribute or with javascript (e.g., elt.style.backgroundcolor="rgb(1
73, 216, 230)").
... var w_style = document.defaultview.getcomputedstyle(refdiv, null).getpropertyvalue("width"); txtwidth.value = w_style; var txtbackgroundcolor = document.getelementbyid("t3"); var b_style = document.defaultview.getcomputedstyle(refdiv, null).getpropertyvalue("background-color"); txtbackgroundcolor.value = b_style; } </script> <style> #d1 { margin-left: 10px; background-color: rgb(1
73, 216, 230); height: 20px; max-width: 20px; } </style> </head> <body> <div id="d1"> </div> <form action=""> <p> <button type="button" onclick="cstyles();">getcomputedstyle</button> height<input id="t1" type="text" value="1" /> max-width<input id="t2" type="text" value="2" /> bg-color<input id="t3" type="text" value="3" /> </p> </form> </body> </html> example
7:...
Element: DOMMouseScroll event - Web APIs
on gecko 1
7 (firefox 1
7) or later, you need to call preventdefault() of wheel events which must be fired for every native event.
... if the event represents scrolling up by a page, the value of detail is -32
768.
... if the event indictes scrolling down by a page, the value is +32
768.
Element.classList - Web APIs
document.documentelement.firstchild.appendchild(document.createelement('style')).stylesheet.csstext=( '_*{x-uclp:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' + // ie6 '[class]{x-uclp/**/:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' //ie
7-8 ); } })(window); // 3.
...elements created by document.createelement before they are appended to a parent node) in ie6-
7.
... a minor note is that in ie6-
7, this polyfill uses the window[" ucl"] property on the window object for communicating with the css expressions, the x-uclp css property on all elements, and the element[" ucl"] property on all elements to allow garbage collection and boost performance.
Event.initEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetinitevent deprecatedchrome full support yesedge full support 12firefox full support 1
7 full support 1
7 no support ?
... — 1
7notes notes before firefox 1
7, a call to this method after the dispatching of the event raised an exception instead of doing nothing.ie full support yesopera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support 1
7 full support 1
7 no support ?
... — 1
7notes notes before firefox 1
7, a call to this method after the dispatching of the event raised an exception instead of doing nothing.opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full supportdeprecated.
ExtendableEvent - Web APIs
note: the behaviour described in the above paragraph was fixed in firefox 43 (see bug 11802
74.) this interface inherits from the event interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.5
714285
714285
71%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0
700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" ta...
...rget="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope.
File.lastModified - Web APIs
the file.lastmodified read-only property provides the last modified date of the file as the number of milliseconds since the unix epoch (january 1, 19
70 at midnight).
... const filewithdate = new file([], 'file.bin', { lastmodified: new date(201
7, 1, 1), }); console.log(filewithdate.lastmodified); //returns 1485903600000 const filewithoutdate = new file([], 'file.bin'); console.log(filewithoutdate.lastmodified); //returns current time reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodified might get rounded depending on browser settings.
... // reduced time precision (2ms) in firefox 60 somefile.lastmodified; // 1519211809934 // 1519211810362 // 15192118116
70 // ...
File - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/blob" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">blob</text></a><polyline points="
76,25 86,20 86,30
76,25" stro...
...ke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/file" target="_top"><rect x="116" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">file</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file.
... instance properties file.prototype.lastmodified read only returns the last modified time of the file, in millisecond since the unix epoch (january 1st, 19
70 at midnight).
FileSystemFlags - Web APIs
operasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemflags experimentalchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤
79prefixed full support ≤
79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support 50ie no support noopera no support nosafari no support nowebview ...
... full support yesprefixed prefixed implemented with the vendor prefix: webkitcreate experimentalchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤
79prefixed full support ≤
79prefixed prefixed implemented with the vendor prefix: webkitfirefox partial support 50notes partial support 50notes notes for security reasons, firefox does not support creating files.
... full support yesprefixed prefixed implemented with the vendor prefix: webkitexclusive experimentalchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤
79prefixed full support ≤
79prefixed prefixed implemented with the vendor prefix: webkitfirefox partial support 50notes partial support 50notes notes for security reasons, firefox does not support creating files.
FontFaceSetLoadEvent.FontFaceSetLoadEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent() constructor experimentalchrome full support 5
7edge full support ≤
79firefox ?
... webview android no support nochrome android full support 5
7firefox android ?
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
HTMLAnchorElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlanchorelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlanchorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLAreaElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlareaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLAudioElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
...x" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#d4dde4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlaudioelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audio() creates and returns a new htmlaudioelement object, optionally starting the pr...
HTMLBRElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBaseElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbaseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBodyElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbodyelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbodyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement and from windoweventhandlers.
HTMLButtonElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbuttonelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbuttonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLCanvasElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlcanvaselement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcanvaselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDListElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldlistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldataelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldataelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataListElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldatalistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement htmldatalistelement.options read only is a htmlcollection representing a collection of the containe...
HTMLDivElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldivelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldivelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e...
...53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of web development, you can generally think of htmldocument as an alias for document, upon which htmldocument is based.
HTMLElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and ...
HTMLEmbedElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlembedelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlembedelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLFieldSetElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlfieldsetelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlfieldsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLFormElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement.
HTMLHRElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadingElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHtmlElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhtmlelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhtmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLIFrameElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmliframeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLImageElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor image() the image() constructor creates and returns a new htmlimageelement object representing an html <img> element which is not attached to any dom tree.
HTMLInputElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlinputelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlinputelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties properties related to the parent form form read only htmlformelement object: returns a reference to the parent <form> element.
HTMLLIElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllielement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllielement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLabelElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllabelelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLegendElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllegendelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllegendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLinkElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllinkelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllinkelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and linkstyle.
HTMLMapElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.5
714285
714285
71%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0
700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-ba...
...seline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font...
...middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onencrypted = function(encrypted) { ...
HTMLMediaElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its ancestors htmlelement, element, node, and eventtarget.
HTMLMenuElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specificati...
HTMLMenuItemElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement spe...
HTMLMetaElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmetaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMeterElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmeterelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmeterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent, htmlelement.
HTMLModElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmodelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOListElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlolistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLObjectElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlobjectelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlobjectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptGroupElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptgroupelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptgroupelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptionElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOutputElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloutputelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloutputelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement.
HTMLParagraphElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparagraphelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlparagraphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLParamElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparamelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlparamelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLPictureElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpictureelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpictureelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property, but inherits properties from its parent, htmlelement.
HTMLPreElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpreelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpreelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLProgressElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlprogresselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLQuoteElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlquoteelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlquoteelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLScriptElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlscriptelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSelectElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlselectelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlselectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement, and of element and node.
HTMLShadowElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlshadowelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLSourceElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlsourceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSpanElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlspanelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties, but inherits properties from: htmlelement.
HTMLStyleElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlstyleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlstyleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements linkstyle.
HTMLTableCaptionElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
76" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecaptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableCellElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecellelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableColElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltableelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltableelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableRowElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablerowelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablerowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableSectionElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
76" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablesectionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTemplateElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltemplateelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltemplateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLTextAreaElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltextareaelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltextareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties accesskey string: returns / sets the element's accesskey attribute.
HTMLTimeElement.dateTime - Web APIs
the format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid month string yyyy-mm 2011-11, 2013-05 valid date string yyyy-mm-dd 188
7-12-01 valid yearless date string mm-dd 11-12 valid time string hh:mm hh:mm:ss hh:mm:ss.mmm 23:59 12:15:4
7 12:15:52.998 valid local date and time string yyyy-mm-dd hh:mm yyyy-mm-dd hh:mm:ss yyyy-mm-dd hh:mm:ss.mmm yyyy-mm-ddthh:mm yyyy-mm-ddthh:mm:ss yyyy-mm-ddthh:mm:ss.mmm 2013-12-25 11:12 19
72-0
7-25 13:43:0
7 ...
... 1941-03-15 0
7:06:23.6
78 2013-12-25t11:12 19
72-0
7-25t13:43:0
7 1941-03-15t0
7:06:23.6
78 valid time-zone offset string z +hhmm +hh:mm -hhmm -hh:mm z +0200 +04:30 -0300 -08:00 valid global date and time string any combination of a valid local date and time string followed by a valid time-zone offset string 2013-12-25 11:12+0200 19
72-0
7-25 13:43:0
7+04:30 1941-03-15 0
7:06:23.6
78z 2013-12-25t11:12-08:00 valid week string yyyy-www 2013-w46 four or more ascii digits yyyy 2013, 0001 valid duration string pddthhmmss pddthhmms.xs pddthhmms.xxs pddthhmms.xxxs pthhmmss pthhmms.xs pthhmms.xxs pthhmms.xxxs ww dd hh mm ss p12dt
7h12m13s p12dt
7h...
...12m13.3s p12dt
7h12m13.45s p12dt
7h12m13.455s pt
7h12m13s pt
7h12m13.2s pt
7h12m13.56s pt
7h12m13.999s
7d 5h 24m 13s syntax datetimestring = timeelt.datetime; timeelt.datetime = datetimestring example // assumes there is <time id="t"> element in the html var t = document.getelementbyid("t"); t.datetime = "6w 5h 34m 5s"; specifications specification status comment html living standardthe definition of 'htmltimeelement' in that specification.
HTMLTimeElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltimeelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltimeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTitleElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltitleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltitleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTrackElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltrackelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltrackelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUListElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlulistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUnknownElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
... 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlunknownelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property; inherits properties from its parent, htmlelement.
HTMLVideoElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 ...
...x" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#d4dde4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlvideoelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlvideoelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its ancestor interfaces, htmlmediaelement, and htmlelement.
IDBCursor.key - Web APIs
full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support
7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
... full support yesbinary keyschrome full support 58edge full support ≤
79firefox full support 51ie ?
... opera android full support 43safari ios full support 10.3samsung internet android full support
7.0legend full support full support partial support partial support compatibility unknown compatibility unknownrequires a vendor prefix or different name for use.requires a vendor prefix or diff...
IDBObjectStore.add() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaddchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.autoIncrement - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetautoincrementchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.clear() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclearchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.count() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.delete() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletechrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.get() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.index() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.indexNames - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexnameschrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.keyPath - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeypathchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.name - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitrenaming throu...
IDBObjectStore.openCursor() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopencursorchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.put() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetputchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.transaction - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBOpenDBRequest.onblocked - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonblockedchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBOpenDBRequest.onupgradeneeded - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonupgradeneededchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBRequest.error - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitdomexception v...
IDBTransaction.db - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdbchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBTransaction.error - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitdomexception v...
IDBVersionChangeEvent.newVersion - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnewversionchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBVersionChangeEvent.oldVersion - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoldversionchrome full support 24 full support 24 no support 23 — 5
7prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... — 5
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25 full support 25 no support 25 — 5
7prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 —
7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IIRFilterNode() - Web APIs
examples let feedforward = [0.00020298, 0.0004059599, 0.00020298]; let feedbackward = [1.0126964558, -1.9991880801, 0.98
73035442]; const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feedback: feedbackward }); specifications specification status comment web audio apithe definition of 'iirfilternode()' in that specification.
...safariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetiirfilternode() constructorchrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤
79firefox full support 53ie no support noopera full support 42safari ?
... samsung internet android full support 6.0notes full support 6.0notes notes before samsung internet
7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
ImageCapture.takePhoto() - Web APIs
bviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettakephoto experimentalchrome full support 60 full support 60 no support 59 — 60notes notes photosettings argument not supported.edge full support ≤
79firefox ?
... opera full support 4
7 full support 4
7 no support 46 — 4
7notes notes photosettings argument not supported.safari ?
... samsung internet android full support 8.0 full support 8.0 no support
7.0 — 8.0notes notes photosettings argument not supported.legend full support full support compatibility unknown compatibility unknownexperimental.
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.5
714285
714285
71%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0
700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco...
...,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 2
76,20 2
76,30 266,25" stroke="#d4dde4" fill="none"/><line x1="2
76" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="306" y="1" width="120" he...
...ight="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">installevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor installevent.installevent() creates a new installevent object.
KeyboardEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5...
...num lock was supported on some older laptop models (200
7 models and older), but since then, macos hasn't supported num lock even on external keyboards.
MediaMetadata.album - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetalbum experimentalchrome full support 5
7edge no support nofirefox full support
71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support 5
7firefox android ?
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
MediaMetadata.artist - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetartist experimentalchrome full support 5
7edge no support nofirefox full support
71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support 5
7firefox android ?
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
MediaMetadata.artwork - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetartwork experimentalchrome full support 5
7edge no support nofirefox full support
71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support 5
7firefox android ?
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
MediaMetadata.title - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettitle experimentalchrome full support 5
7edge no support nofirefox full support
71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support 5
7firefox android ?
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
MediaRecorder.ignoreMutedMedia - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetignoremutedmedia deprecatednon-standardchrome no support 49 — 5
7edge no support nofirefox ?
... ie no support noopera no support 36 — 44safari no support nowebview android no support 49 — 5
7chrome android no support 49 — 5
7firefox android ?
... opera android no support 36 — 44safari ios no support nosamsung internet android no support 5.0 —
7.0legend no support no support compatibility unknown compatibility unknownnon-standard.
MediaSession.playbackState - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetplaybackstate experimentalchrome full support
73edge full support ≤
79firefox no support noie no support noopera full support yessafari ?
... webview android no support nochrome android full support 5
7firefox android no support noopera android no support nosafari ios ?
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
Metadata - Web APIs
safariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmetadata experimentalnon-standardchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤
79prefixed full support ≤
79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie no support noopera no support nosafari no support nowebview an...
... nosamsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitmodificationtime experimentalnon-standardchrome full support 13edge full support ≤
79firefox no support noie no support noopera no support nosafari no support nowebview android no support nochrome android full support ...
... noopera android no support nosafari ios no support nosamsung internet android full support yessize experimentalnon-standardchrome full support 13edge full support ≤
79firefox no support noie no support noopera no support nosafari no support nowebview android no support nochrome android full support ...
Node - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties in addition to the properties below, node inherits properties from its parent, eventtarget.
...possible values are: name value element_node 1 attribute_node 2 text_node 3 cdata_section_node 4 entity_reference_node 5 entity_node 6 processing_instruction_node
7 comment_node 8 document_node 9 document_type_node 10 document_fragment_node 11 notation_node 12 node.nodevalue returns / sets the value of the current node.
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetofflineaudiocompletionevent() constructorchrome full support 5
7notes full support 5
7notes notes before chrome 59, the default values were not supported.edge full support ≤
79firefox full support 53ie no support noopera full support 42sa...
... webview android full support 5
7notes full support 5
7notes notes before version 59, the default values were not supported.chrome android full support 5
7notes full support 5
7notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ?
... samsung internet android full support 6.0notes full support 6.0notes notes before samsung internet
7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
PaymentCurrencyAmount.currencySystem - Web APIs
for example, the default is urn:iso:std:iso:421
7, which specifies that the standard used is iso 421
7.
... warning: this property has been removed from the specification and should no longer be used; the currency is now always specified using iso 412
7.
...the default, urn:iso:std:iso:421
7, indicates the iso 421
7 standard.
performance.now() - Web APIs
// reduced time precision (1ms) in firefox 60 performance.now(); // 8
781416 // 8
781815 // 8
782206 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled performance.now(); // 8865400 // 8866200 // 8866
700 // ...
... starting with firefox
79, high resolution timers can be used if you cross-origin isolate your document using the cross-origin-opener-policy and cross-origin-embedder-policy headers: cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp these headers ensure a top-level document does not share a browsing context group with cross-origin documents.
PerformanceResourceTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 1...
...
71,20 1
71,30 161,25" stroke="#d4dde4" fill="none"/><line x1="1
71" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this feature is available in web workers.
... performanceresourcetiming.nexthopprotocolread only a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc
7301).
ProcessingInstruction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0
700
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 ...
... 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties target (domstring) read only a name identifying the application to which the instruction is targeted, specification specifi...
RTCIceCandidate.candidate - Web APIs
for an a-line (attribute line) that looks like this: a=candidate:423499
7325 1 udp 20432
78322 192.168.0.56 44323 typ host the corresponding candidate string's value will be "candidate:423499
7325 1 udp 20432
78322 192.168.0.56 44323 typ host".
...in the example above, the priority is 20432
78322.
...the complete list of attributes for this example candidate is: foundation = 423499
7325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 20432
78322 ip = "192.168.0.56" port = 44323 type = "host" example in this example, we see a function which receives as input an sdp string containing an ice candidate received from the remote peer during the signaling process.
RTCIceCandidateInit.candidate - Web APIs
for an a-line (attribute line) that looks like this: a=candidate:423499
7325 1 udp 20432
78322 192.168.0.56 44323 typ host the corresponding candidate string's value will be "candidate:423499
7325 1 udp 20432
78322 192.168.0.56 44323 typ host".
...in the example above, the priority is 20432
78322.
...the complete list of attributes for this example candidate is: foundation = 423499
7325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 20432
78322 ip = "192.168.0.56" port = 44323 type = "host" example when a new ice candidate is received by your signaling code from the remote peer, you need to construct the rtcicecandidate object that encapsulates it.
SVGAnimateElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
..." y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from ...
SVGAnimateMotionElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" width="230" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="136" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatemotionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganima...
SVGAnimateTransformElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgan...
SVGAnimationElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGClipPathElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgclippathelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgclippathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGComponentTransferFunctionElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomponenttransfer_type_unknown 0 the type is not one of predefined...
SVGCursorElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcursorelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcursorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement, and implements properties from svgurireference.
SVGDefsElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...x" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdefselement" target="_top"><rect x="121" y="65" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdefselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its ...
SVGDescElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdescelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 11...
...1,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" te...
...xt-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread...
SVGFEBlendElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeblendelement" target="_top"><rect x="311" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeblendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_feblend_mode_unknown 0 the type is not one of predefined types.
SVGFEColorMatrixElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" target="_top"><rect x="251" y="65" width="230" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecolormatrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecolormatrix_type_unknown 0 the type is not one of predefined types.
SVGFEComponentTransferElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransferelement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecomponenttransferelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardat...
SVGFECompositeElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecompositeelement" target="_top"><rect x="2
71" y="65" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
76" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecompositeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomposite_operator_unknown 0 the type is not one of predefined types.
SVGFEConvolveMatrixElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement" target="_top"><rect x="221" y="65" width="260" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEDiffuseLightingElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfediffuselightingelement" target="_top"><rect x="211" y="65" width="2
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfediffuselightingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandarda...
SVGFEDisplacementMapElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelement" target="_top"><rect x="211" y="65" width="2
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedisplacementmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_channel_unknown 0 the type is not one of predefined types.
SVGFEDistantLightElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedistantlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEDropShadowElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedropshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEFloodElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="311" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefloodelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement, and implements properties from svgfilte...
SVGFEFuncAElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncaelement" target="_top"><rect x="-
79" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific prope...
SVGFEFuncBElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncbelement" target="_top"><rect x="-
79" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncbelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific prope...
SVGFEFuncGElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncgelement" target="_top"><rect x="-
79" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific prope...
SVGFEFuncRElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncrelement" target="_top"><rect x="-
79" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific prope...
SVGFEGaussianBlurElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblurelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEImageElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="311" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes and svgurirefer...
SVGFEMergeElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="311" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemergeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgelement, and also implements properties of svgfilterpr...
SVGFEMergeNodeElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" target="_top"><rect x="2
71" y="65" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
76" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemergenodeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEMorphologyElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemorphologyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_morphology_operator_unknown 0 the type is not one of predefined types.
SVGFEOffsetElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeoffsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEPointLightElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfepointlightelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfepointlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFESpecularLightingElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightingelement" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespecularlightingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandar...
SVGFESpotLightElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespotlightelement" target="_top"><rect x="2
71" y="65" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
76" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespotlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFETileElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfetileelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfetileelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFETurbulenceElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeturbulenceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants turbulence types name value description svg_turbulence_type_unknown 0 the type is not one of predefined types.
SVGFilterElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfilterelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterelement.filterunits read only an svganimatedenumeration that corresponds to the filterunits attribute of the given <filter> element.
SVGForeignObjectElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgforeignobjectelement" target="_top"><rect x="31" y="65" width="230" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="146" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgforeignobjectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and im...
SVGGElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggelement" target="_top"><rect x="151" y="65" width="110" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its par...
SVGGeometryElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="1
71" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: the pathlength property and the gettotallength() and getpointatlength() methods were origina...
SVGGradientElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_spreadmethod_unknown 0 the type is not one of predefined types.
SVGGraphicsElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtransformable interfaces from svg 1.1.
SVGImageElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
..." font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement.
SVGLength - Web APIs
ies readonly unsigned short unittype float value float valueinspecifiedunits domstring valueasstring constants svg_lengthtype_unknown = 0 svg_lengthtype_number = 1 svg_lengthtype_percentage = 2 svg_lengthtype_ems = 3 svg_lengthtype_exs = 4 svg_lengthtype_px = 5 svg_lengthtype_cm = 6 svg_lengthtype_mm =
7 svg_lengthtype_in = 8 svg_lengthtype_pt = 9 svg_lengthtype_pc = 10 normative document svg 1.1 (2nd edition) example <svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg"> <script type="text/javascript"><![cdata[ function start() { var rect = document.getelementbyid("myrect"); var val = rect.x.baseval; ...
...lue: " + val.value + ", valueinspecifiedunits " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); } ]]></script> <rect id="myrect" x="1cm" y="1cm" fill="green" stroke="black" stroke-width="1" width="1cm" height="1cm" /> </svg> results on a desktop monitor (pixel units will be dpi-dependent): value: 3
7.
7952
76641845
7, valueinspecifiedunits: 6: 1, valueasstring: 1cm value: 26.666666030883
79, valueinspecifiedunits 9: 20, valueasstring: 20pt value: 26.666666030883
79, valueinspecifiedunits 8: 0.2
77777761220932, valueasstring: 0.2
77778in constants name value description svg_lengthtype_unknown 0 the unit type is not one of predefined unit types.
... svg_lengthtype_mm
7 a value was specified using the mm units defined in css2.
SVGLinearGradientElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineargradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGMPathElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmpathelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGMaskElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmaskelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmaskelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGMetadataElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmetadataelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGPatternElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="311" y="65" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpatternelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement and implements the ones from svgfittoviewbox and svgurireference.
SVGRadialGradientElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgradialgradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgradialgradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGScriptElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgscriptelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgscriptelement.type read only a domstring corresponding to the type attribute of the given <script> element.
SVGSetElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...x" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="65" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its p...
SVGStopElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgstopelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGStyleElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstyleelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgstyleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement and implements properties from linkstyle.
SVGSwitchElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
... font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgswitchelement" target="_top"><rect x="101" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgswitchelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from it...
SVGSymbolElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsymbolelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsymbolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement, and implements properties from sv...
SVGTSpanElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...ect x="-239" y="65" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpositioningelement</text></a><polyline points="-239,89 -249,84 -249,94 -239,89" stroke="#d4dde4" fill="none"/><line x1="-249" y1="89" x2="-2
79" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtspanelement" target="_top"><rect x="-429" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-354" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtspanelement</text></a></svg></div> a:hover text ...
SVGTextContentElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextcontentelement" target="_top"><rect x="51" y="65" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants constant value description lengthadjust_unknown 0 some ...
SVGTextElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...ect x="-239" y="65" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpositioningelement</text></a><polyline points="-239,89 -249,84 -249,94 -239,89" stroke="#d4dde4" fill="none"/><line x1="-249" y1="89" x2="-2
79" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextelement" target="_top"><rect x="-419" y="65" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-349" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextelement</text></a></svg></div> a:hover text { ...
SVGTextPathElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
... font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextpathelement" target="_top"><rect x="-169" y="65" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-
79" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants method types name value description textpath_methodtype_unknown...
SVGTextPositioningElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextpositioningelement" target="_top"><rect x="-239" y="65" width="250" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpositioningelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgtextcontentelement.
SVGTitleElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...81,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtitleelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtitleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGUseElement - Web APIs
h="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/...
...api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 4...
...px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svguseelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svguseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svggraphicselement and im...
ServiceWorkerGlobalScope - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.14285
714285
7142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0
700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monac...
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/workerglobalscope" target="_top"><rect x="151" y="1" width="1
70" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect ...
...x="361" y="1" width="240" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties serviceworkerglobalscope.clients read only contains the clients object associated with the service worker.
Text - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
..."#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="4
73.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor text() returns a text node with the parameter as its textual content.
TextEncoder.prototype.encodeInto() - Web APIs
, (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/), (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/), (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/) ); } else point = 65533/*0b1111111111111101*/;//return '\xef\xbf\xbd';//fromcharcode(0xef, 0xbf, 0xbd); } /*if (point <= 0x00
7f) return nonasciichars; else */if (point <= 0x0
7ff) { return fromcharcode((0x6<<5)|(point>>>6), (0x2<<6)|(point&0x3f)); } else return fromcharcode( (0xe/*0b1110*/<<4) | (point>>>12), (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/), (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/) ); } function textencoder(){}; te...
... "" : ("" + inputstring).replace(/[\x80-\ud
7ff\udc00-\uffff]|[\ud800-\udbff][\udc00-\udfff]?/g, encoderreplacer); var len=encodedstring.length|0, result = new patchedu8array(len); var i=0; for (; i<len; i=i+1|0) result[i] = encodedstring.charcodeat(i) |0; return result; }; function polyfill_encodeinto(inputstring, u8arr) { var encodedstring = inputstring === void 0 ?
... "" : ("" + inputstring).replace(/[\x80-\ud
7ff\udc00-\uffff]|[\ud800-\udbff][\udc00-\udfff]?/g, encoderreplacer); var len=encodedstring.length|0, i=0, char=0, read=0, u8arrlen = u8arr.length|0, inputlength=inputstring.length|0; if (u8arrlen < len) len=u8arrlen; putchars: for (; i<len; i=i+1|0) { char = encodedstring.charcodeat(i) |0; switch(char >>> 4) { case 0: case 1: case 2: case 3: case 4: case 5: case 6: case
7: read = read + 1|0; // extension points: case 8: case 9: case 10: case 11: break...
WEBGL_compressed_texture_astc - Web APIs
floor((width + 3) / 4) * floor((height + 3) / 4) * 16 262144 ext.compressed_rgba_astc_5x4_khr ext.compressed_srgb8_alpha8_astc_5x4_khr 5x4 6.40 floor((width + 4) / 5) * floor((height + 3) / 4) * 16 210944 ext.compressed_rgba_astc_5x5_khr ext.compressed_srgb8_alpha8_astc_5x5_khr 5x5 5.12 floor((width + 4) / 5) * floor((height + 4) / 5) * 16 169
744 ext.compressed_rgba_astc_6x5_khr ext.compressed_srgb8_alpha8_astc_6x5_khr 6x5 4.2
7 floor((width + 5) / 6) * floor((height + 4) / 5) * 16 141
728 ext.compressed_rgba_astc_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr 6x6 3.56 floor((width + 5) / 6) * floor((height + 5) / 6) * 16 118336 ext.compressed_rgba_astc_8x5_khr ext.compress...
...ed_srgb8_alpha8_astc_8x5_khr 8x5 3.20 floor((width +
7) / 8) * floor((height + 4) / 5) * 16 1054
72 ext.compressed_rgba_astc_8x6_khr ext.compressed_srgb8_alpha8_astc_8x6_khr 8x6 2.6
7 floor((width +
7) / 8) * floor((height + 5) / 6) * 16 88064 ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr 8x8 2.00 floor((width +
7) / 8) * floor((height +
7) / 8) * 16 65536 ext.compressed_rgba_astc_10x5_khr ext.compressed_srgb8_alpha8_astc_10x5_khr 10x5 2.56 floor((width + 9) / 10) * floor((height + 4) / 5) * 16 85696 ext.compressed_rgba_astc_10x6_khr ext.compressed_srgb8_alpha8_astc_10x6_khr 10x6 2.13 floor((width + 9) / 10) * floor((height + 5) / 6) * 16
71552 ...
... ext.compressed_rgba_astc_10x8_khr ext.compressed_srgb8_alpha8_astc_10x8_khr 10x8 1.60 floor((width + 9) / 10) * floor((height +
7) / 8) * 16 53248 ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr 10x10 1.28 floor((width + 9) / 10) * floor((height + 9) / 10) * 16 43264 ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr 12x10 1.0
7 floor((width + 11) / 12) * floor((height + 9) / 10) * 16 35
776 ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr 12x12 0.89 floor((width + 11) / 12) * floor((height + 11) / 12) * 16 29584 examples var ext = gl.getextension('webgl_compressed_texture_astc'); var texture = gl.crea...
WEBGL_draw_buffers - Web APIs
ext.color_attachment0_webgl ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment
7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl a glenum specifying a color buffer.
... ext.draw_buffer0_webgl ext.draw_buffer1_webgl ext.draw_buffer2_webgl ext.draw_buffer3_webgl ext.draw_buffer4_webgl ext.draw_buffer5_webgl ext.draw_buffer6_webgl ext.draw_buffer
7_webgl ext.draw_buffer8_webgl ext.draw_buffer9_webgl ext.draw_buffer10_webgl ext.draw_buffer11_webgl ext.draw_buffer12_webgl ext.draw_buffer13_webgl ext.draw_buffer14_webgl ext.draw_buffer15_webgl a glenum returning a draw buffer.
...color_attachment1_webgl, // gl_fragdata[1] ext.color_attachment2_webgl, // gl_fragdata[2] ext.color_attachment3_webgl // gl_fragdata[3] ]); shader code that writes to multiple textures: <script type="x-shader/x-fragment"> #extension gl_ext_draw_buffers : require precision highp float; void main(void) { gl_fragdata[0] = vec4(0.25); gl_fragdata[1] = vec4(0.5); gl_fragdata[2] = vec4(0.
75); gl_fragdata[3] = vec4(1.0); } </script> specifications specification status comment webgl_draw_buffersthe definition of 'webgl_draw_buffers' in that specification.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
possible values: gl.byte: signed 8-bit integer, with values in [-128, 12
7] gl.short: signed 16-bit integer, with values in [-32
768, 32
76
7] gl.unsigned_byte: unsigned 8-bit integer, with values in [0, 255] gl.unsigned_short: unsigned 16-bit integer, with values in [0, 65535] gl.float: 32-bit ieee floating point number when using a webgl 2 context, the following values are available additionally: gl.half_float: 16-bit ieee floating point number ...
... for example, the following vertex: { "position": [1.0, 2.0, 1.5], "normal": [1.0, 0.0, 0.0], "texcoord": [0.5, 0.25] } will be stored in the array buffer as follows: 00 00 80 3f 00 00 00 40 00 00 0c 3f
7f 00 00 00
7f ff 3f ff creating the array buffer first, we dynamically create the array buffer from json data using a dataview.
.../create array buffer const buffer = new arraybuffer(20 * vertices.length); //fill array buffer const dv = new dataview(buffer); for (let i = 0; i < vertices.length; i++) { dv.setfloat32(20 * i, vertices[i].position[0], true); dv.setfloat32(20 * i + 4, vertices[i].position[1], true); dv.setfloat32(20 * i + 8, vertices[i].position[2], true); dv.setint8(20 * i + 12, vertices[i].normal[0] * 0x
7f); dv.setint8(20 * i + 13, vertices[i].normal[1] * 0x
7f); dv.setint8(20 * i + 14, vertices[i].normal[2] * 0x
7f); dv.setint8(20 * i + 15, 0); dv.setuint16(20 * i + 16, vertices[i].texcoord[0] * 0xffff, true); dv.setuint16(20 * i + 18, vertices[i].texcoord[1] * 0xffff, true); } for higher performance, we could also do the previous json to arraybuffer conversion on the server-side, e.g.
Raining rectangles - Web APIs
;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 1
7); document.queryselector("canvas") .addeventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_...
...so we reschedule // the timeout to call drawanimation again in 1
7ms.
... timer = settimeout(drawanimation, 1
7); } function playerclick (evt) { // we need to transform the position of the click event from // window coordinates to relative position inside the canvas.
Scissor animation - Web APIs
note that this time it is the position of the square (the scissoring area) that is updated every frame (we set frame rate to roughly one every 1
7ms, or roughly 60fps – frames per second).
... position = [0, gl.drawingbufferheight]; var button = document.queryselector("button"); var timer; function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false); document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 1
7); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.addeventlistener("click", startanimation, false); document.queryselector("strong").innerhtml = "start"; clearinterval(timer); } stopanimation({type: "click"}); } // variables to hold the size and velocity of the square.
... position = [ math.random()*(gl.drawingbufferwidth - size[0]), gl.drawingbufferheight ]; // random velocity between 1.0 and
7.0 velocity = 1.0 + 6.0*math.random(); color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); } } function getrandomcolor() { return [math.random(), math.random(), math.random()]; } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.g...
Matrix math for the web - Web APIs
ve defined a function to multiply a matrix and a point — multiplymatrixandpoint(): // point • matrix function multiplymatrixandpoint(matrix, point) { // give a simple variable name to each part of the matrix, a column and row number let c0r0 = matrix[ 0], c1r0 = matrix[ 1], c2r0 = matrix[ 2], c3r0 = matrix[ 3]; let c0r1 = matrix[ 4], c1r1 = matrix[ 5], c2r1 = matrix[ 6], c3r1 = matrix[
7]; let c0r2 = matrix[ 8], c1r2 = matrix[ 9], c2r2 = matrix[10], c3r2 = matrix[11]; let c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[15]; // now set some simple names for the point let x = point[0]; let y = point[1]; let z = point[2]; let w = point[3]; // multiply the point against each part of the 1st column, then add together let resultx = (x * c0r0) ...
...the function from above can be re-used to help out in this process: //matrixb • matrixa function multiplymatrices(matrixa, matrixb) { // slice the second matrix up into rows let row0 = [matrixb[ 0], matrixb[ 1], matrixb[ 2], matrixb[ 3]]; let row1 = [matrixb[ 4], matrixb[ 5], matrixb[ 6], matrixb[
7]]; let row2 = [matrixb[ 8], matrixb[ 9], matrixb[10], matrixb[11]]; let row3 = [matrixb[12], matrixb[13], matrixb[14], matrixb[15]]; // multiply each row by matrixa let result0 = multiplymatrixandpoint(matrixa, row0); let result1 = multiplymatrixandpoint(matrixa, row1); let result2 = multiplymatrixandpoint(matrixa, row2); let result3 = multiplymatrixandpoint(matrixa, row3); // t...
... let w = 1.5; // width (x) let h = 0.
7; // height (y) let d = 1; // depth (z) let scalematrix = [ w, 0, 0, 0, 0, h, 0, 0, 0, 0, d, 0, 0, 0, 0, 1 ]; view on jsfiddle rotation matrix a rotation matrix is used to rotate a point or object.
Basic concepts behind Web Audio API - Web APIs
output.m = 0.
70
71 * (input.l + input.r) + input.c + 0.5 * (input.sl + input.sr) 6 (5.1) 2 (stereo) down-mix from 5.1 to stereo.
... output.l = input.l + 0.
70
71 * (input.c + input.sl) output.r = input.r + 0.
70
71 * (input.c + input.sr) 6 (5.1) 4 (quad) down-mix from 5.1 to quad.
... output.l = input.l + 0.
70
71 * input.c output.r = input.r + 0.
70
71 * input.c output.sl = input.sl output.sr = input.sr other, non-standard layouts non-standard channel layouts are handled as if channelinterpretation is set to discrete.
WheelEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" tex...
...t-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1="341" y1="25" x2="3
71" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="3
71" y="1" width="100" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor wheelevent() creates a wheelevent object.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
chrome implements this behavior since version 11 (crbug.com/660
78).
... firefox for android uses a timeout value of 15 minutes for background tabs since bug
736602 in firefox 14, and background tabs can also be unloaded entirely.
...this causes an integer overflow when using delays larger than 2,14
7,483,64
7 ms (about 24.8 days), resulting in the timeout being executed immediately.
XMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e...
...53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
XMLHttpRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.0
769230
769230
77%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,...
... fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="2
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x="441" y="1" widt...
...h="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} despite its name, xmlhttprequest can be used to retrieve any type of data, not just xml.
ARIA: cell role - Accessibility
<div role="row"> <span role="cell">france</span> <span role="cell">6
7 million</span> </div> a better, more semantic way of writing the cells above would be to use the semantic <td> element.
... <tr role="row"> <td role="cell">france</td> <td role="cell">6
7 million</td> </tr> description the element with role="cell" is a cell within a row, optionally within a rowgroup, within a grid, table or treegrid within a static tabular structure.
... for example, a cell in the first row of the first header would likely have aria-rowindex="1" set, and cells in row 4
7 would have aria-rowindex="4
7", if aria-rowindex were needed due to not all rows being in the dom.
ARIA: tab role - Accessibility
e third panel</p> </div> </div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position: relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padding: 0 0.5em 0.5em 0.
7em; border: 1px solid grey; border-radius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-color: orange; outline: 1px solid orange; } there are two things we need to do with javascript: we need to change focus and tab index of our tab elements with the right and left arrows, and we need to change the active tab and tabpanel when we click on a tab.
...if the event's keycode is 39 for right arrow or 3
7 for the left arrow, we react to the event.
...ryselectorall('[role="tab"]'); const tablist = document.queryselector('[role="tablist"]'); // add a click event handler to each tab tabs.foreach(tab => { tab.addeventlistener("click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.addeventlistener("keydown", e => { // move right if (e.keycode === 39 || e.keycode === 3
7) { tabs[tabfocus].setattribute("tabindex", -1); if (e.keycode === 39) { tabfocus++; // if we're at the end, go to the start if (tabfocus >= tabs.length) { tabfocus = 0; } // move left } else if (e.keycode === 3
7) { tabfocus--; // if we're at the start, move to the end if (tabfocus < 0) { tabfocus...
Accessibility: What users can do to browse more safely - Accessibility
learn personalization and accessibility settings firefox
73 and above (dekstop) firefox added support for css prefers-reduced-motion in october 2018.
... chrome
74 and above (desktop) chrome
74 added support for reduced-motion-query, it has even added support to detect whether the user has requested a reduced motion experience.
...examples include: transitionrun transitionstart transitionend transitioncancel edge
75 and above (desktop, in windows 10) according to eric bailey, in his april 30, 2019 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: developers.google.com from thomas steiner's article "move ya!
Web Accessibility: Understanding Colors and Luminance - Accessibility
see wcag 2.1 technique g20
7 luminance it is the difference in the luminance of a color that enables us to see contrast.
... an interesting study by nasa on the color blue, for example, noted that this color, which has low luminance, can be made legible if "care was taken to acheive adequate luminance contrast" (from the article, designing with blue) wcag 2.1 defines relative luminance as follows (as of july 2019): for the srgb colorspace, the relative luminance of a color is defined as l = 0.2126 * r + 0.
7152 * g+ 0.0
722 * b where r, g and b are defined as: if rsrgb <= 0.03928 then r = rsrgb/12.92 else r = ((rsrgb+0.055)/1.055) ^ 2.4 if gsrgb <= 0.03928 then g = gsrgb/12.92 else g = ((gsrgb+0.055)/1.055) ^ 2.4 if bsrgb <= 0.03928 then b = bsrgb/12.92 else b = ((bsrgb+0.055)/1.055) ^ 2.4 and rsrgb, gsrgb, and bsrgb are defined as: rsrgb = r8bit/255 gsrgb = g8bit/255 bsrgb = b8bit/255 t...
... the "math" for the calculations is spelled out in wcag 2.1 in the definition for relative luminance, and is as follows: for the srgb colorspace, the relative luminance of a color is defined as l = 0.2126 * r + 0.
7152 * g+ 0.0
722 * b where r, g and b are defined as: if rsrgb <= 0.03928 then r = rsrgb/12.92 else r = ((rsrgb+0.055)/1.055) ^ 2.4 if gsrgb <= 0.03928 then g = gsrgb/12.92 else g = ((gsrgb+0.055)/1.055) ^ 2.4 if bsrgb <= 0.03928 then b = bsrgb/12.92 else b = ((bsrgb+0.055)/1.055) ^ 2.4 and rsrgb, gsrgb, and bsrgb are defined as: rsrgb = r8bit/255 gsrgb = g8bit/255 bsrgb = b8bit/255 t...
Perceivable - Accessibility
1.2.
7 provide extended video with audio descriptions (aaa) where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g., there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).
... text and its background should have a contrast ratio of at least
7:1.
... 1.4.
7 low or no background audio (aaa) prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.
::slotted() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet::slottedchrome full support 50edge full support
79firefox full support 63 full support 63 no support 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 3
7safari full support 10webview android full support 50chrome android full support 50firefox android full support 63 full support 63 no support 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android full support 3
7safari ios full support 10samsung internet android full support 5.0legend full support full support no support no supportuser must explicitly enable this feature.user must explicitly enable this feature.
font-stretch - CSS: Cascading Style Sheets
syntax /* single values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; /* multiple values */ font-stretch:
75% 125%; font-stretch: condensed ultra-condensed;; the font-weight property is described using any one of the values listed below.
... keyword to numeric mapping the table below shows the mapping between keyword values and numeric percentages: keyword percentage ultra-condensed 50% extra-condensed 62.5% condensed
75% semi-condensed 8
7.5% normal 100% semi-expanded 112.5% expanded 125% extra-expanded 150% ultra-expanded 200% variable fonts most fonts have a particular width which corresponds to one of the keyterm values.
... @font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-stretch: 8
7.5% 112.5%; } specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-weight - CSS: Cascading Style Sheets
same as
700.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600,
700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
... common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names: value common weight name 100 thin (hairline) 200 extra light (ultra light) 300 light 400 normal 500 medium 600 semi bold (demi bold)
700 bold 800 extra bold (ultra bold) 900 black (heavy) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping.
Using CSS transforms - CSS: Cascading Style Sheets
/* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin:
75px 0 0
75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face ba...
...sed on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.
7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.
7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.
7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.
7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result the second element to configure is the position of the viewer,...
...: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.
7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.
7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.
7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.
7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color...
<angle> - CSS: Cascading Style Sheets
for example, 90deg equals -2
70deg, and 1turn equals 4turn.
...examples: 0rad, 1.0
708rad, 6.2832rad.
... examples setting a clockwise right angle 90deg = 100grad = 0.25turn ≈ 1.5
708rad setting a flat angle 180deg = 200grad = 0.5turn ≈ 3.1416rad setting a counterclockwise right angle -90deg = -100grad = -0.25turn ≈ -1.5
708rad setting a null angle 0 = 0deg = 0grad = 0turn = 0rad specifications specification status comment css values and units module level 4the definition of '<angle>' in that specification.
animation-direction - CSS: Cascading Style Sheets
9 full support 9 full support 4prefixed prefixed implemented with the vendor prefix: -webkit-webview android full support 43 full support 43 full support ≤3
7prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 43 full support 43 full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support 16 ...
... full support 12firefox full support 16ie full support 10opera full support 12.1safari full support 6webview android full support ≤3
7chrome android full support 25firefox android full support 16opera android full support 12.1safari ios full support 6samsung internet android full support 1.5reversechrome ...
... full support 12firefox full support 16ie full support 10opera full support 12.1safari full support 6webview android full support ≤3
7chrome android full support 25firefox android full support 16opera android full support 12.1safari ios full support 6samsung internet android full support 1.5legend ...
animation-timing-function - CSS: Cascading Style Sheets
syntax /* keyword values */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* function values */ animation-timing-function: cubic-bezier(0.1, 0.
7, 1.0, 0.1); animation-timing-function: steps(4, end); /* steps function keywords */ animation-timing-function: steps(4, jump-start); animation-timing-function: steps(10, jump-end); animation-timing-function: steps(20, jump-none); animation-timing-function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* multiple animations */ animati...
...on-timing-function: ease, step-start, cubic-bezier(0.1, 0.
7, 1.0, 0.1); /* global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: unset; timing functions may be specified on individual keyframes in a @keyframes rule.
...whether the animation holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the animation, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%,
75%, and 100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the animation begins; jump-end denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none there is no jump on either end.
background-position-x - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/0
7/29/1
7350/3b4892b
7e820122ac6dd
76
78891d450
7/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-x' in that specification.
... full support 12firefox full support 49ie full support 6opera full support 15safari full support 1webview android full support ≤3
7chrome android full support 18firefox android full support 49opera android full support 18safari ios full support 1samsung internet android full support 1.0two-value syntax (s...
...upport for offsets from any edge)chrome no support noedge no support 12 —
79firefox full support 49ie full support 9opera no support nosafari no support nowebview android no support nochrome android no support nofirefox android full support 49opera android no support nosafari ios no support nosamsung internet android ...
background-position-y - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/0
7/29/1
7350/3b4892b
7e820122ac6dd
76
78891d450
7/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-y' in that specification.
... full support 12firefox full support 49ie full support 6opera full support 15safari full support 1webview android full support ≤3
7chrome android full support 18firefox android full support 49opera android full support 14safari ios full support 1samsung internet android full support 1.0two-value syntax (s...
...upport for offsets from any edge)chrome no support noedge no support 12 —
79firefox full support 49ie full support 9opera no support nosafari no support nowebview android no support nochrome android no support nofirefox android full support 49opera android no support nosafari ios no support nosamsung internet android ...
border-image - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 2
7; /* source | slice | repeat */ border-image: url("/images/border.png") 2
7 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 2
7 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 2
7 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
...the source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based border image!</div> css to match the size of a single diamond, we will use a value of 81 divided by 3, or 2
7, for slicing the image into corner and edge regions.
... #bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 2
7 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33...
border-right-style - CSS: Cascading Style Sheets
screte formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b
7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-right-style example classes */ .b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotte...
...d;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b
7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} .b10 {border-right-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-style' in that specification.
...this has been fixed in firefox 50.ie full support 5.5opera full support 9.2safari full support 1webview android full support ≤3
7chrome android full support 18firefox android full support 14notes full support 14notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
clamp() - CSS: Cascading Style Sheets
the <body> element's width is set as min(1000px, calc(
70% + 100px)).
... this means that the width will be set at 1000px, unless the result of calc(
70% + 100px) is less than 1000px, in which case it will be set to that value instead.
...</p> css html { font-family: sans-serif; } body { margin: 0 auto; width: min(1000px, calc(
70% + 100px)); } h1 { letter-spacing: 2px; font-size: clamp(1.8rem, 2.5vw, 2.8rem); } p { line-height: 1.5; font-size: max(1.2rem, 1.2vw); } specifications specification status comment css values and units module level 4the definition of 'clamp()' in that specification.
column-count - CSS: Cascading Style Sheets
l support 12 full support 12 full support 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 52 full support 52 no support 1.5 —
74prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 3
7, multiple columns didn't work with display: table-caption elements.ie full support 10opera full support 11.1 full support 11.1 full support ...
... 9 full support 9 full support 3prefixed prefixed implemented with the vendor prefix: -webkit-webview android full support 50 full support 50 full support ≤3
7prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 50 full support 50 full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support 52 ...
... full support 52 full support 4prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 3
7, multiple columns didn't work with display: table-caption elements.opera android full support 11.1 full support 11.1 full support 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios full support 9 full support 9 full support 1prefixed prefixed implemented with the vendor prefix: -webkit-samsung int...
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
firefox
70 implemented the two-value syntax for the display property, which is part of the css display module level 3.
...the example below, which will work in firefox
70 and upwards, demonstrates these values.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmulti-keyword values experimentalchrome no support noedge no support nofirefox full support
70ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android no support ...
linear-gradient() - CSS: Cascading Style Sheets
the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 2
70deg, and 90deg, respectively.
... linear-gradient(red, orange, yellow, green, blue); linear-gradient(red 0%, orange 25%, yellow 50%, green
75%, blue 100%); by default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.
...the following three gradients are equivalent: linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow
70%, green 90%, green 100%); linear-gradient(red, orange 10% 30%, yellow 50%
70%, green 90%); linear-gradient(red 0%, orange 10% 30%, yellow 50%
70%, green 90% 100%); by default, if there is no color with a 0% stop, the first color declared will be at that point.
paint() - CSS: Cascading Style Sheets
in this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item
7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 1
7</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpaint()chrome full support 65edge full support
79firefox no support noie no support noopera full support 52safari no support nowebview android full support 65chrome android full support ...
... 65firefox android no support noopera android full support 4
7safari ios no support nosamsung internet android full support 9.2legend full support full support no support no support see also paintworklet css painting api using the css painting api <image> canvas ...
quotes - CSS: Cascading Style Sheets
that's the question!</q> css q { quotes: '"' '"' "'" "'"; } q::before { content: open-quote; } q::after { content: close-quote; } result auto quotes for most browsers, the default value of quotes is auto (firefox
70+), or the browser otherwise had this default behavior (chromiums, safari, edge), so this example works without it being explicitly being set.
...ge full support 12firefox full support 1.5ie full support 8opera full support 4safari full support 9webview android full support 3
7chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 9samsung internet android full support 1.0auto keywordchrome ...
...avior is to choose appropriate quotes for the user's language settingedge no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingfirefox full support
70ie no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingopera no support nonotes no support nonotes n...
<shape> - CSS: Cascading Style Sheets
full support 12firefox full support 1ie full support 5.5opera full support 9.5safari full support 1.3webview android full support 3
7chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0rect() deprecatedchr...
...ome full support 1edge full support 12firefox full support 1ie full support 5.5notes full support 5.5notes notes for internet explorer versions 5.5 through
7, the rect() function uses spaces (instead of commas) to separate parameters.
... for internet explorer 8 and later versions, only the standard comma-separated syntax is supported.opera full support 9.5safari full support 1.3webview android full support 3
7chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full supportdeprecated...
<transform-function> - CSS: Cascading Style Sheets
<option>rotate(360deg)</option> <option>rotatex(360deg)</option> <option>rotatey(360deg)</option> <option>rotatez(360deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option> <option>scale(1.5)</option> <option>scalex(1.5)</option> <option>scaley(1.5)</option> <option>scalez(1.5)</option> <option>scale3d(1, 1.5, 1.5)</option> <option>skew(1
7deg, 13deg)</option> <option>skewx(1
7deg)</option> <option>skewy(1
7deg)</option> <option>translate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)<...
...e); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.
7); transform: translatez(50px); } .back { background: rgba(0,210,0,.
7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.
7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.
7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.
7); transform: rotatex(90deg) translatez(50px); ...
...} .bottom { background: rgba(210,0,210,.
7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; } javascript const selectelem = document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; }, 2000) } }) result specifications specification status comment css transforms level 2the definition of '<transform-function>' in that specification.
Setting up adaptive streaming media sources - Developer guides
ash</baseurl> </representation> </adaptationset> <!-- video --> <adaptationset mimetype="video/mp4" codecs="avc1.42401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="2" bandwidth="100000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0100.264.dash</baseurl> </representation> <representation id="3" bandwidth="1
75000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_01
75.264.dash</baseurl> </representation> <representation id="4" bandwidth="250000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0250.264.dash</baseurl> </representation> <representation id="5" bandwidth="500000" width="480" height="360"> <baseurl>elephantsdream_h264bpl3...
... <adaptationset bitstreamswitching="true"> <representation id="0" codecs="avc1" mimetype="video/mp4" width="320" height="240" startwithsap="1" bandwidth="46986"> <segmentbase> <initialization sourceurl="main/news100/1.m4s" range="0-862"/> </segmentbase> <segmentlist duration="1"> <segmenturl media="main/news100/2.m4s" mediarange="863-
7113"/> <segmenturl media="main/news100/3.m4s" mediarange="
7114-14104"/> <segmenturl media="main/news100/4.m4s" mediarange="14105-1
7990"/> </segmentlist> </representation> <representation id="1" codecs="avc1" mimetype="video/mp4" width="320" height="240" startwithsap="1" bandwidth="91932"> <segmentbase> <initialization sourceu...
... <segmenturl media="main/news200/2.m4s" mediarange="865-11523"/> <segmenturl media="main/news200/3.m4s" mediarange="11524-25621"/> <segmenturl media="main/news200/4.m4s" mediarange="25622-33693"/> </segmentlist> </representation> <representation id="1" codecs="avc1" mimetype="video/mp4" width="320" height="240" startwithsap="1" bandwidth="2
703
70"> <segmentbase> <initialization sourceurl="main/news300/1.m4s" range="0-865"/> </segmentbase> <segmentlist duration="1"> <segmenturl media="main/news300/2.m4s" mediarange="866-269
70"/> <segmenturl media="main/news300/3.m4s" mediarange="269
71-
72543"/> <segmenturl media="main/news300/4.m4s" mediarange="
72544-959
72"/> ...
Audio and video manipulation - Developer guides
html we can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="480" height="2
70" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="2
70"></canvas> javascript this code handles altering the frames.
... html <video id="my-video" controls src="https://udn.realityripple.com/samples/6f/08625b424a.m4v"> </video> javascript var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="2
70"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo = document.g...
...xt = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); // configure filter filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25; playable code <video id="my-video" controls="true" width="480" height="2
70" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ...
Constraint validation - Developer guides
f-
75012 or
75012" ], de : [ '^(d-)?\\d{5}$' , "germany zips must have exactly 5 digits: e.g.
... here is the html part: <label for="fs">select a file smaller than
75 kb : </label> <input type="file" id="fs"> this displays: the javascript reads the file selected, uses the file.size() method to get its size, compares it to the (hard coded) limit, and calls the constraint api to inform the browser if there is a violation: function checkfilesize() { var fs = document.getelementbyid("fs"); var files = fs.files; // if there is (at least) one file selec...
...ted if (files.length > 0) { if (files[0].size >
75 * 1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than
75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event: window.onload = function () { document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint validation.
HTML attribute: step - HTML: Hypertext Markup Language
date 1 (day) <input type="date" min="2019-12-25" step="1"> month 1 (month) <input type="month" min="2019-12" step="12"> week 1 (week) <input type="week" min="2019-w23" step="2"> time 60 (seconds) <input type="time" min="09:00" step="900"> datetime-local 1 (day) <input type="datetime-local" min="019-12-25t19:30" step="
7"> number 1 <input type="number" min="0" step="0.1" max="10"> range 1 <input type="range" min="0" step="2" max="10"> if any is not explicity set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping - the min value and increments of the step value, up to the max value, if specified.
... we add a big red border around invalid inputs: input:invalid { border: solid red 3px; } then define an input with a minimum value of
7.2, omitting the step attribute, wherein it defaults to 1.
... <input id="mynumber" name="mynumber" type="number" step="2" min="1.2"> valid values include 1.2, 3.2, 5.2,
7.2, 9.2, 11.2, and so on.
<area> - HTML: Hypertext Markup Language
allowed values are determined by bcp4
7.
...firefox
79+) setting target="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener".
...(the w3c 5.3 fork of the html specification defines it as valid, but the canonical html specification doesn’t, and it has no effect in any user agents.) examples <map name="primary"> <area shape="circle" coords="
75,
75,
75" href="left.html" alt="click to go left"> <area shape="circle" coords="2
75,
75,
75" href="right.html" alt="click to go right"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/
7e559101b3.png" alt="350 x 150 pic"> result specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that ...
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
when the names only contain ltr text the results look fine: <ul> <li><span class="name">henrietta boffin</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f8
7a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } no <bdi> with rtl text this example lists the winners of a competition using <span> elements only, and one of the winners has a name consisting of rtl text.
... in this case the "- 1", which consists of characters with neutral or weak directionality, will adopt the directionality of the rtl text, and the result will be garbled: <ul> <li><span class="name">اَلأَعْشَى</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f8
7a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } using <bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements.
... these elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1px solid #3f8
7a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } specifications specification status comment html living standardthe definition of '<bdi>' in that specification.
<button>: The Button element - HTML: Hypertext Markup Language
setting autocomplete="off" on the button disables this feature; see bug 6540
72.
... example <button name="favorite"> <svg aria-hidden="true" viewbox="0 0 10 10"><path d="m
7 9l5 8 3 9v6l1 4h3l1-3 1 3h3l
7 6z"/></svg> add to favorites </button> if you want to visually hide the button's text, an accessible way to do so is to use a combination of css properties to remove it visually from the screen, but keep it parseable by assistive technology.
... mobile browsers ios
7.1.2 android 4.4.4 safari mobile no (even with a tabindex) n/a chrome 35 no (even with a tabindex) yes specifications specification status comment html living standardthe definition of '<button>' in that specification.
<input type="image"> - HTML: Hypertext Markup Language
essential image input features let's look at a basic example that includes all the essential features you'd need to use (these work exactly the same as they do on the <img> element.): <input id="image" type="image" width="100" height="30" alt="login" src="/static/external/62/62ac2ecddbec0e0b540098c28451e5
7203e5cab46dfed
7ab0115d5a659fcfb
7b.png"> the src attribute is used to specify the path to the image you want to display in the button.
... html <form> <p>login to your account</p> <div> <label for="userid">user id</label> <input type="text" id="userid" name="userid"> </div> <div> <label for="pwd">password</label> <input type="password" id="pwd" name="pwd"> </div> <div> <input id="image" type="image" src="/static/external/62/62ac2ecddbec0e0b540098c28451e5
7203e5cab46dfed
7ab0115d5a659fcfb
7b.png" alt="login" width="100"> </div> </form> css and now some simple css to make the basic elements sit more neatly: div { margin-bottom: 10px; } label { display: inline-block; width:
70px; text-align: right; padding-right: 10px; } adjusting the image position and scaling in this example, we adapt the previous example to set aside more space for ...
... html <form> <p>login to your account</p> <div> <label for="userid">user id</label> <input type="text" id="userid" name="userid"> </div> <div> <label for="pwd">password</label> <input type="password" id="pwd" name="pwd"> </div> <div> <input id="image" type="image" src="/static/external/62/62ac2ecddbec0e0b540098c28451e5
7203e5cab46dfed
7ab0115d5a659fcfb
7b.png" alt="login" width="200" height="100"> </div> </form> css div { margin-bottom: 10px; } label { display: inline-block; width:
70px; text-align: right; padding-right: 10px; } #image { object-position: right top; object-fit: contain; background-color: #ddd; } here, object-position is configured to draw the image at the top-right corn...
<input type="number"> - HTML: Hypertext Markup Language
<input id="ticketnum" type="number" name="ticketnum" list="defaultnumbers"> <span class="validity"></span> <datalist id="defaultnumbers"> <option value="100456
78"> <option value="103421"> <option value="11111111"> <option value="123456
78"> <option value="12999922"> </datalist> use of the list attribute with number inputs is not supported in all browsers.
...1.
78" required> <span class="validity"></span> </div> <div class="feetinputgroup" style="display: none;"> <span>enter your height — </span> <label for="feet">feet:</label> <input id="feet" type="number" name="feet" min="0" step="1"> <span class="validity"></span> <label for="inches">inches:</label> <input id="inches" type="number" name...
...since we want to accept a meter value in centimeters, we've set the step value to 0.01, so that values like 1.
78 are not seen as invalid.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
<table> <thead> <tr> <th>student id</th> <th>name</th> <th>major</th> </tr> </thead> <tbody> <tr> <td>3
741255</td> <td>jones, martha</td> <td>computer science</td> </tr> <tr> <td>39
71244</td> <td>nim, victor</td> <td>russian literature</td> </tr> <tr> <td>4100332</td> <td>petrov, alexandra</td> <td>astrophysics</td> </tr> </tbody> </table> css the css to style our table is shown next.
... result first, the resulting table, so you know what we're building: html the revised html looks like this: <table> <thead> <tr> <th>student id</th> <th>name</th> </tr> </thead> <tbody> <tr> <th colspan="2">computer science</th> </tr> <tr> <td>3
741255</td> <td>jones, martha</td> </tr> <tr> <td>40
77830</td> <td>pierce, benjamin</td> </tr> <tr> <td>5151
701</td> <td>kirk, james</td> </tr> </tbody> <tbody> <tr> <th colspan="2">russian literature</th> </tr> <tr> <td>39
71244</td> <td>nim, victor</td> </tr> </tbody> <tbody> <tr> <th colspan="2">...
...astrophysics</th> </tr> <tr> <td>4100332</td> <td>petrov, alexandra</td> </tr> <tr> <td>88923
77</td> <td>toyota, hiroko</td> </tr> </tbody> </table> notice that each major is placed in a separate <tbody> block, the first row of which contains a single <th> element with a colspan attribute that spans the entire width of the table.
itemscope - HTML: Hypertext Markup Language
<div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx
7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data from the preceding example.
... itemscope itemtype movie itemprop (itemprop name) (itemprop value) itemprop director james cameron itemprop genre science fiction itemprop name avatar itemprop https://youtu.be/0ay1xikx
7by trailer itemscope id attributes when you specify the itemscope attribute for an element, a new item is created.
... structured data itemscope itemtype recipe itemprop name grandma's holiday apple pie itemprop image https://c1.staticflickr.com/1/30/42
759561_8631e2f905_n.jpg itemprop datepublished 2009-11-05 itemprop description this is my grandmother's apple pie recipe.
itemtype - HTML: Hypertext Markup Language
<br> </span> product #: <span itemprop="mpn">9258
72<br></span> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">4.4</span> stars, based on <span itemprop="reviewcount">89 </span> reviews </span><p> <span itemprop="offers" itemscope itemtype="http://schema.org/offer"> regular price: $1
79.99<br> <meta itemprop="pricecurrency" content="usd" /> <sp...
...</span> </div> result html structured data itemscope itemtype product (http://schema.org/product) itemprop name executive anvil itemprop image https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_
720.png itemprop description sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
... itemprop mpn 9258
72 itemprop brand [thing] itemprop name acme itemscope itemprop[itemtype] aggregaterating[aggregaterating] itemprop ratingvalue 4.4 itemprop reviewcount 89 itemprop offers [offer] http://schema.org/offer itemprop pricecurrency usd itemprop price 119.99 itemprop pricevaliduntil 2020-11-05 itemprop itemcondition http://schema.org/usedcondition itemprop availability http://schema.org/instock itemscope itemprop[itemtype] seller [organization] http://schema.org/organization itemprop name executive objects note: a handy tool for extracting microdata struc...
lang - HTML: Hypertext Markup Language
the attribute contains a single “language tag” in the format defined in tags for identifying languages (bcp4
7).
... if the attribute value is the empty string (lang=""), the language is set to unknown; if the language tag is not valid according to bcp4
7, it is set to invalid.
... language tag syntax the full bcp4
7 syntax is in-depth enough to mark extremely specific language dialects, but most usage is much simpler.
Content negotiation - HTTP
traditionally, it was set to a different value for each locale for the browser, like iso-8859-1,utf-8;q=0.
7,*;q=0.
7 for a western european locale.
... with utf-8 now being well-supported, being the preferred way of encoding characters, and to guarantee better privacy through less configuration-based entropy, browsers omit the accept-charset header: internet explorer 8, safari 5, opera 11, firefox 10 and chrome 2
7 have abandoned this header.
...it is a list of values with quality factors (like: "de, en;q=0.
7").
Expect - HTTP
the only expectation defined in the specification is expect: 100-continue, to which the server shall respond with: 100 if the information contained in the header is sufficient to cause an immediate success, 41
7 (expectation failed) if it cannot meet the expectation; or any other 4xx status otherwise.
... put /somewhere/fun http/1.1 host: origin.example.com content-type: video/h264 content-length: 123456
789098
7 expect: 100-continue the server now checks the request headers and may respond with a 100 (continue) response to instruct the client to go ahead and send the message body, or it will send a 41
7 (expectation failed) status if any of the expectations cannot be met.
... specifications specification title rfc
7231, section 5.1.1: expect hypertext transfer protocol (http/1.1): semantics and content ...
A typical HTTP session - HTTP
example responses successful web page response: http/1.1 200 ok content-type: text/html; charset=utf-8 content-length: 55
743 connection: keep-alive cache-control: s-maxage=300, public, max-age=0 content-language: en-us date: thu, 06 dec 2018 1
7:3
7:18 gmt etag: "2e
77ad1dc6ab0b53a2996dfd4653c1c3" server: meinheld/0.6.1 strict-transport-security: max-age=630
72000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie age:
7 <!doctype html> <html lang="en"> <h...
...ead> <meta charset="utf-8"> <title>a simple webpage</title> </head> <body> <h1>simple html5 webpage</h1> <p>hello, world!</p> </body> </html> notification that the requested resource has permanently moved: http/1.1 301 moved permanently server: apache/2.4.3
7 (red hat) content-type: text/html; charset=utf-8 date: thu, 06 dec 2018 1
7:33:08 gmt location: https://developer.mozilla.org/ (this is the new link to the resource; it is expected that the user-agent will fetch it) keep-alive: timeout=15, max=98 accept-ranges: bytes via: moz-cache-zlb05 connection: keep-alive content-length: 325 (the content contains a default page to display if the user-agent is not able to follow the link) <!doctype html...
... (contains a site-customized page helping the user to find the missing resource) notification that the requested resource doesn't exist: http/1.1 404 not found content-type: text/html; charset=utf-8 content-length: 3821
7 connection: keep-alive cache-control: no-cache, no-store, must-revalidate, max-age=0 content-language: en-us date: thu, 06 dec 2018 1
7:35:13 gmt expires: thu, 06 dec 2018 1
7:35:13 gmt server: meinheld/0.6.1 strict-transport-security: max-age=630
72000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie x-cache: error from cloudfront <!doctype html...
206 Partial Content - HTTP
status 206 partial content examples a response containing one single range: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-range: bytes 21010-4
7021/4
7022 content-length: 26012 content-type: image/gif ...
... a response containing several ranges: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-length: 1
741 content-type: multipart/byteranges; boundary=string_separator --string_separator content-type: application/pdf content-range: bytes 234-639/8000 ...the first range...
... --string_separator content-type: application/pdf content-range: bytes 4590-
7999/8000 ...the second range --string_separator-- specifications specification title rfc
7233, section 4.1: 206 partial content hypertext transfer protocol (http/1.1): range requests ...
Loops and iteration - JavaScript
thus, n takes on the values 1, 3,
7, and 12.
... let i = 0; let n = 0; while (i < 5) { i++; if (i === 3) { continue; } n += i; console.log(n); } //1,3,
7,12 let i = 0; let n = 0; while (i < 5) { i++; if (i === 3) { // continue; } n += i; console.log(n); } // 1,3,6,10,15 example 2 a statement labeled checkiandj contains a statement labeled checkj.
...while for...in iterates over property names, for...of iterates over property values: const arr = [3, 5,
7]; arr.foo = 'hello'; for (let i in arr) { console.log(i); // logs "0", "1", "2", "foo" } for (let i of arr) { console.log(i); // logs 3, 5,
7 } « previousnext » ...
JavaScript language resources - JavaScript
repository 2019 ecmascript 2019 language specification ecma-262 9th edition pdf, html, working draft, repository 2018 ecmascript 2018 language specification ecma-402 5th edition working draft, repository 2018 ecmascript 2018 internationalization api specification obsolete/historical editions ecma-262 pdf june 199
7 ecmascript: a general purpose, cross-platform programming language.
... see also the es5 errata and ecmascript 5 support in mozilla ecma-35
7 pdf june 2004 ecmascript for xml (e4x).
... ecma-402 1st edition pdf, html december 2012 ecmascript internationalization api specification ecma-262 6th edition pdf, html june 2015 ecmascript 2015 language specification ecma-402 2nd edition pdf june 2015 ecmascript 2015 internationalization api specification ecma-262
7th edition html june 2016 ecmascript 2016 language specification ecma-402 3rd edition html june 2016 ecmascript 2016 internationalization api specification ecma-262 8th edition html june 201
7 ecmascript 201
7 language specification ecma-402 4th edition html june 201
7 ecmascript 201
7 internationalization api specification es.next ...
Deprecated and obsolete features - JavaScript
js1.
7/js1.8 array comprehension and js1.
7/js1.8 generator comprehension are deprecated.
... getenumerablepropertykeys (bug
783829, firefox 3
7) getownpropertynames (bug 100
7334, firefox 33) keys (bug 100
7334, firefox 33) escape sequences octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.
... string.prototype.quote is removed from firefox 3
7.
Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
märz 201
7" alternative standard syntax using the ecmascript intl api the ecma-402 (ecmascript intl api) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in chrome 24+, firefox 29+, ie11+, safari10+).
...märz 201
7" or, you can make use of the intl.datetimeformat object, which allows you to cache an object with most of the computations done so that formatting is fast.
... (new date()).tolocaleformat("%y%m%d"); // "201
70310" can be converted to: let now = new date(); let date = now.getfullyear() * 10000 + (now.getmonth() + 1) * 100 + now.getdate(); console.log(date); // "201
70310" ...
Rest parameters - JavaScript
// using the same function definition from example above myfun("one", "two") // a, one // b, two // manymoreargs, [] argument length since theargs is an array, a count of its elements is given by the length property: function fun1(...theargs) { console.log(theargs.length) } fun1() // 0 fun1(5) // 1 fun1(5, 6,
7) // 3 ordinary parameter and rest parameters in the next example, a rest parameter is used to collect all parameters after the first into an array.
...(multiplier, ...theargs) { return theargs.map(element => { return multiplier * element }) } let arr = multiply(2, 1, 2, 3) console.log(arr) // [2, 4, 6] use with the arguments object array methods can be used on rest parameters, but not on the arguments object: function sortrestargs(...theargs) { let sortedargs = theargs.sort() return sortedargs } console.log(sortrestargs(5, 3,
7, 1)) // 1, 3, 5,
7 function sortarguments() { let sortedargs = arguments.sort() return sortedargs // this will never happen } console.log(sortarguments(5, 3,
7, 1)) // throws a typeerror (arguments.sort is not a function) to use array methods on the arguments object, it must be converted to a real array first.
... function sortarguments() { let args = array.from(arguments) let sortedargs = args.sort() return sortedargs } console.log(sortarguments(5, 3,
7, 1)) // 1, 3, 5,
7 specifications specification ecmascript (ecma-262)the definition of 'function definitions' in that specification.
Array.prototype.sort() - JavaScript
var items = [ { name: 'edward', value: 21 }, { name: 'sharpe', value: 3
7 }, { name: 'and', value: 45 }, { name: 'the', value: -12 }, { name: 'magnetic', value: 13 }, { name: 'zeros', value: 3
7 } ]; // sort by value items.sort(function (a, b) { return a.value - b.value; }); // sort by name items.sort(function(a, b) { var namea = a.name.touppercase(); // ignore upper and lowercase var nameb = b.name.touppercase(); // ignore upper and lowercase if (name...
... var stringarray = ['blue', 'humpback', 'beluga']; var numericstringarray = ['80', '9', '
700']; var numberarray = [40, 1, 5, 200]; var mixednumericarray = ['80', '9', '
700', 40, 1, 5, 200]; function comparenumbers(a, b) { return a - b; } console.log('stringarray:', stringarray.join()); console.log('sorted:', stringarray.sort()); console.log('numberarray:', numberarray.join()); console.log('sorted without a compare function:', numberarray.sort()); console.log('sorted with comparenu...
... stringarray: blue,humpback,beluga sorted: beluga,blue,humpback numberarray: 40,1,5,200 sorted without a compare function: 1,200,40,5 sorted with comparenumbers: 1,5,40,200 numericstringarray: 80,9,
700 sorted without a compare function:
700,80,9 sorted with comparenumbers: 9,80,
700 mixednumericarray: 80,9,
700,40,1,5,200 sorted without a compare function: 1,200,40,5,
700,80,9 sorted with comparenumbers: 1,5,9,40,80,200,
700 sorting non-ascii characters for sorting strings with non-ascii characters, i.e.
Array.prototype.toLocaleString() - JavaScript
syntax arr.tolocalestring([locales[, options]]); parameters locales optional a string with a bcp 4
7 language tag, or an array of such strings.
... //
7.
... object: object.prototype.tolocalestring() number: number.prototype.tolocalestring() date: date.prototype.tolocalestring() always display the currency for the strings and numbers in the prices array: var prices = ['¥
7', 500, 8123, 12]; prices.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' }); // "¥
7,¥500,¥8,123,¥12" for more examples, see also the intl, numberformat, and datetimeformat pages.
Date.prototype.setHours() - JavaScript
the sethours() method sets the hours for a specified date according to local time, and returns the number of milliseconds since january 1, 19
70 00:00:00 utc until the time represented by the updated date instance.
... return value the number of milliseconds between january 1, 19
70 00:00:00 utc and the updated date.
... examples using sethours() var thebigday = new date(); thebigday.sethours(
7); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.sethours' in that specification.
Date.prototype.setTime() - JavaScript
the settime() method sets the date object to the time represented by a number of milliseconds since january 1, 19
70, 00:00:00 utc.
... syntax dateobj.settime(timevalue) parameters timevalue an integer representing the number of milliseconds since 1 january 19
70, 00:00:00 utc.
... return value the number of milliseconds between 1 january 19
70 00:00:00 utc and the updated date (effectively, the value of the argument).
Date.prototype.valueOf() - JavaScript
syntax dateobj.valueof() return value the number of milliseconds between 1 january 19
70 00:00:00 utc and the given date.
... description the valueof() method returns the primitive value of a date object as a number data type, the number of milliseconds since midnight 01 january, 19
70 utc.
... examples using valueof() var x = new date(56, 6, 1
7); var myvar = x.valueof(); // assigns -424
713600000 to myvar specifications specification ecmascript (ecma-262)the definition of 'date.prototype.valueof' in that specification.
Function.prototype.apply() - JavaScript
note: many older browsers—including chrome <1
7 and internet explorer <9—don't accept array-like objects, and will throw an exception.
... // min/max number in an array const numbers = [5, 6, 2, 3,
7]; // using math.min/math.max apply let max = math.max.apply(null, numbers); // this about equal to math.max(numbers[0], ...) // or math.max(5, 6, ...) let min = math.min.apply(null, numbers); // vs.
... if your value array might grow into the tens of thousands, use a hybrid strategy: apply your function to chunks of the array at a time: function minofarray(arr) { let min = infinity; let quantum = 32
768; for (var i = 0, len = arr.length; i < len; i += quantum) { var submin = math.min.apply(null, arr.slice(i, math.min(i+quantum, len))); min = math.min(submin, min); } return min; } let min = minofarray([5, 6, 2, 3,
7]); using apply to chain constructors you can use apply to chain constructors for an object (similar to java).
Function.prototype.bind() - JavaScript
function list() { return array.prototype.slice.call(arguments); } function addarguments(arg1, arg2) { return arg1 + arg2 } const list1 = list(1, 2, 3); // [1, 2, 3] const result1 = addarguments(1, 2); // 3 // create a function with a preset leading argument const leadingthirtysevenlist = list.bind(null, 3
7); // create a function with a preset first argument.
... const addthirtyseven = addarguments.bind(null, 3
7); const list2 = leadingthirtysevenlist(); // [3
7] const list3 = leadingthirtysevenlist(1, 2, 3); // [3
7, 1, 2, 3] const result2 = addthirtyseven(5); // 3
7 + 5 = 42 const result3 = addthirtyseven(5, 10); // 3
7 + 5 = 42 // (the second argument is ignored) with settimeout() by default within window.settimeout(), the this keyword will be set to the window (or global) object.
...' // not supported in the polyfill below, // works fine with native bind: const yaxispoint = point.bind(null, 0/*x*/); const emptyobj = {}; const yaxispoint = point.bind(emptyobj, 0/*x*/); const axispoint = new yaxispoint(5); axispoint.tostring(); // '0,5' axispoint instanceof point; // true axispoint instanceof yaxispoint; // true new yaxispoint(1
7, 42) instanceof point; // true note that you need not do anything special to create a bound function for use with new.
Intl.NumberFormat - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var number = 123456.
789; // german uses comma as decimal separator and period for thousands console.log(new intl.numberformat('de-de').format(number)); // → 123.456,
789 // arabic in most arabic speaking countries uses real arabic digits console.log(new intl.numberformat('ar-eg').format(number)); // → ١٢٣٤٥٦٫٧٨٩ // india uses thousands/lakh/crore separators console.log(new intl.numberformat('en-in').fo...
...rmat(number)); // → 1,23,456.
789 // the nu extension key requests a numbering system, e.g.
... chinese decimal console.log(new intl.numberformat('zh-hans-cn-u-nu-hanidec').format(number)); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(new intl.numberformat(['ban', 'id']).format(number)); // → 123.456,
789 using options the results can be customized using the options argument: var number = 123456.
789; // request a currency format console.log(new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }).format(number)); // → 123.456,
79 € // the japanese yen doesn't use a minor unit console.log(new intl.numberformat('ja-jp', { style: 'currency', currency: 'jpy' }).format(number)); // → ¥123,45
7 // limit to three significant digi...
Intl.PluralRules() constructor - JavaScript
a string with a bcp 4
7 language tag, or an array of such strings.
...possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso 421
7 currency code list (2 if the list doesn't provide that information).
...possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 421
7 currency code list (2 if the list doesn't provide that information); the default for percent formatting is the larger of minimumfractiondigits and 0.
JSON.stringify() - JavaScript
example replacer, as a function function replacer(key, value) { // filtering out properties if (typeof value === 'string') { return undefined; } return value; } var foo = {foundation: 'mozilla', model: 'box', week: 45, transport: 'car', month:
7}; json.stringify(foo, replacer); // '{"week":45,"month":
7}' example replacer, as an array if replacer is an array, the array's values indicate the names of the properties in the object that should be included in the resulting json string.
... json.stringify(foo, ['week', 'month']); // '{"week":45,"month":
7}', only keep "week" and "month" properties the space argument the space argument may be used to control spacing in the final string.
... even after the browser has been closed, the following example is a model for the applicability of json.stringify(): // creating an example of json var session = { 'screens': [], 'state': true }; session.screens.push({ 'name': 'screena', 'width': 450, 'height': 250 }); session.screens.push({ 'name': 'screenb', 'width': 650, 'height': 350 }); session.screens.push({ 'name': 'screenc', 'width':
750, 'height': 120 }); session.screens.push({ 'name': 'screend', 'width': 250, 'height': 60 }); session.screens.push({ 'name': 'screene', 'width': 390, 'height': 120 }); session.screens.push({ 'name': 'screenf', 'width': 1240, 'height': 650 }); // converting the json string with json.stringify() // then saving with localstorage in the name of session localstorage.setitem('session', json.stringify(...
Math.E - JavaScript
the math.e property represents the base of natural logarithms, e, approximately 2.
718.
... math.e=e≈2.
718\mathtt{\mi{math.e}} = e \approx 2.
718 the source for this interactive example is stored in a github repository.
... examples using math.e the following function returns e: function getnapier() { return math.e; } getnapier(); // 2.
718281828459045 specifications specification ecmascript (ecma-262)the definition of 'math.e' in that specification.
Math.fround() - JavaScript
var exp = math.floor(math.log(arg) / math.ln2); var powexp = math.pow(2, math.max(-126, math.min(exp, 12
7))); // handle subnormals: leading digit is zero if exponent bits are all zero.
... var leading = exp < -12
7 ?
...ssa = math.round((leading - arg / powexp) * 0x800000); if (mantissa <= -0x800000) return sign * infinity; return sign * powexp * (leading - mantissa / 0x800000); }; examples using math.fround() the number 1.5 can be precisely represented in the binary numeral system, and is identical in 32-bit and 64-bit: math.fround(1.5); // 1.5 math.fround(1.5) === 1.5; // true however, the number 1.33
7 cannot be precisely represented in the binary numeral system, so it differs in 32-bit and 64-bit: math.fround(1.33
7); // 1.33
700001239
77661 math.fround(1.33
7) === 1.33
7; // false 21502^150 is too big for a 32-bit float, so infinity is returned: 2 ** 150; // 1.42
724
7692
70596e+45 math.fround(2 ** 150); // infinity if the parameter cannot be converted to a number, or it is not-a-number (nan), ...
Math - JavaScript
static properties math.e euler's constant and the base of natural logarithms; approximately 2.
718.
... math.sqrt1_2 square root of ½ (or equivalently, 1/√2); approximately 0.
70
7.
... math.exp(x) returns ex, where x is the argument, and e is euler's constant (2.
718…, the base of the natural logarithm).
Number.MAX_SAFE_INTEGER - JavaScript
property attributes of number.max_safe_integer writable no enumerable no configurable no description the max_safe_integer constant has a value of 900
7199254
740991 (9,00
7,199,254,
740,991 or ~9 quadrillion).
... the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee
754 and can only safely represent numbers between -(253 - 1) and 253 - 1.
... polyfill if (!number.max_safe_integer) { number.max_safe_integer = 900
7199254
740991; // math.pow(2, 53) - 1; } examples return value of max_safe_integer number.max_safe_integer; // 900
7199254
740991 numbers higher than safe integer this returns 2 because in floating points, the value is actually the decimal trailing "1" except for in subnormal precision cases such as zero.
Number.MIN_SAFE_INTEGER - JavaScript
property attributes of number.min_safe_integer writable no enumerable no configurable no description the min_safe_integer constant has a value of -900
7199254
740991 (-9,00
7,199,254,
740,991 or about -9 quadrillion).
... the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee
754 and can only safely represent numbers between -(253 - 1) and 253 - 1.
... examples using min_safe_integer number.min_safe_integer // -900
7199254
740991 -(math.pow(2, 53) - 1) // -900
7199254
740991 specifications specification ecmascript (ecma-262)the definition of 'number.min_safe_integer' in that specification.
Proxy - JavaScript
examples basic example in this simple example, the number 3
7 gets returned as the default value when the property name is not in the object.
... obj[prop] : 3
7; } }; const p = new proxy({}, handler); p.a = 1; p.b = undefined; console.log(p.a, p.b); // 1, undefined console.log('c' in p, p.c); // false, 3
7 no-op forwarding proxy in this example, we are using a native javascript object to which our proxy will forward all operations that are applied to it.
... const target = {}; const p = new proxy(target, {}); p.a = 3
7; // operation forwarded to the target console.log(target.a); // 3
7 // (the operation has been properly forwarded!) note that while this "no-op" works for javascript objects, it does not work for native browser objects like dom elements.
String.prototype.fontsize() - JavaScript
syntax str.fontsize(size) parameters size an integer between 1 and
7, a string representing a signed integer between 1 and
7.
... description when you specify size as an integer, you set the font size of str to one of the
7 defined sizes.
... examples using fontsize() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(
7)); // <font size="
7">hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.fontsize = '0.
7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.fontsize' in that specification.
String.fromCharCode() - JavaScript
however, this set of characters, known as the base multilingual plane (bmp), is only 1/1
7th of the total addressable unicode code points.
... examples using fromcharcode() bmp characters, in utf-16, use a single code unit: string.fromcharcode(65, 66, 6
7); // returns "abc" string.fromcharcode(0x2014); // returns "—" string.fromcharcode(0x12014); // also returns "—"; the digit 1 is truncated and ignored string.fromcharcode(8212); // also returns "—"; 8212 is the decimal form of 0x2014 complete utf 16 table.
...a surrogate pair): string.fromcharcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(55356, 5
7091); // stars" == "\ud83c\udf03" string.fromcharcode(0xd834, 0xdf06, 0x61, 0xd834, 0xdf0
7); // "\ud834\udf06a\ud834\udf0
7" specifications specification ecmascript (ecma-262)the definition of 'string.fromcharcode' in that specification.
WebAssembly.Memory() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmemory() constructorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0shared flagchrome full support ...
...
74edge full support
79firefox full support
78ie no support noopera full support 62safari no support nowebview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nonodejs fu...
eval() - JavaScript
but, in the code using eval(), the browser cannot assume this since what if your code looked like the following: function date(n){ return ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"][n%
7 || 0]; } function loosejsonparse(obj){ return eval("(" + obj + ")"); } console.log(loosejsonparse( "{a:(4-1), b:function(){}, c:new date()}" )) thus, in the eval() version of the code, the browser is forced to make the expensive lookup call to check to see if there are any local variables called date().
... function date(n){ return ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"][n%
7 || 0]; } function runcodewithdatefunction(obj){ return function('"use strict";return (' + obj + ')')()( date ); } console.log(runcodewithdatefunction( "function(date){ return date(5) }" )) the code above may seem inefficiently slow because of the triple nested function, but let's analyze the benefits of the above efficient method: it allows the code in the string passed to...
... console.log(function('"use strict";return(function(a){return a(5)})')()(function(a){ return"monday tuesday wednesday thursday friday saturday sunday".split(" ")[a%
7||0]})); there are also additional safer (and faster!) alternatives to eval() or function() for common use-cases.
isNaN() - JavaScript
that when coerced to numeric type result in a valid non-nan numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is surely "not a number." the confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as ieee-
754 floating-point values.
... the function should be interpreted as answering the question, "is this value, when coerced to a numeric value, an ieee-
754 'not a number' value?" ecmascript 2015 contains the number.isnan() function.
... a polyfill for isnan would be (the polyfill leverages the unique never-equal-to-itself characteristic of nan): var isnan = function(value) { var n = number(value); return n !== n; }; examples isnan(nan); // true isnan(undefined); // true isnan({}); // true isnan(true); // false isnan(null); // false isnan(3
7); // false // strings isnan('3
7'); // false: "3
7" is converted to the number 3
7 which is not nan isnan('3
7.3
7'); // false: "3
7.3
7" is converted to the number 3
7.3
7 which is not nan isnan("3
7,5"); // true isnan('123abc'); // true: parseint("123abc") is 123 but number("123abc") is nan isnan(''); // false: the empty string is converted to 0 which is not nan isnan(' '); ...
const - JavaScript
// define my_fav as a constant and give it the value
7 const my_fav =
7; // this will throw an error - uncaught typeerror: assignment to constant variable.
... my_fav = 20; // my_fav is
7 console.log('my favorite number is: ' + my_fav); // trying to redeclare a constant throws an error // uncaught syntaxerror: identifier 'my_fav' has already been declared const my_fav = 20; // the name my_fav is reserved for constant above, so this will fail too var my_fav = 20; // this throws an error too let my_fav = 20; block scoping it's important to note the nature of block scoping.
... if (my_fav ===
7) { // this is fine and creates a block scoped my_fav variable // (works equally well with let to declare a block scoped non const variable) let my_fav = 20; // my_fav is now 20 console.log('my favorite number is ' + my_fav); // this gets hoisted into the global context and throws an error var my_fav = 20; } // my_fav is still
7 console.log('my favorite number is ' + my_fav); const needs to be initialized // throws an error // uncaught syntaxerror: missing initializer in const declaration const foo; const in objects and arrays const also works on objects and arrays.
continue - JavaScript
thus, n takes on the values 1, 3,
7, and 12.
... var i = 0; var j = 8; checkiandj: while (i < 4) { console.log('i: ' + i); i += 1; checkj: while (j > 4) { console.log('j: ' + j); j -= 1; if ((j % 2) == 0) continue checkj; console.log(j + ' is odd.'); } console.log('i = ' + i); console.log('j = ' + j); } output: i: 0 // start checkj j: 8
7 is odd.
... j:
7 j: 6 5 is odd.
Values - MathML
(the "x"-height of the element, 1ex ≈ 0.5em in many fonts) px pixels in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/
72 inch) pc picas (1 pica = 12 points) % percentage of the default value.
... constants a replacement for the deprecated constants below is: veryverythinmathspace => 0.05555555555555555em verythinmathspace => 0.1111111111111111em thinmathspace => 0.16666666666666666em mediummathspace => 0.2222222222222222em thickmathspace => 0.2
777777777777778em verythickmathspace => 0.3333333333333333em veryverythickmathspace => 0.3888888888888889em constant value veryverythinmathspace 1/18em verythinmathspace 2/18em thinmathspace 3/18em mediummathspace 4/18em thickmathspace 5/18em verythickmathspace 6/18em veryverythickmathspace
7/18em negative contstants are introduced in gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonke...
...y 2.4) (bug 650530) negativeveryverythinmathspace -1/18em negativeverythinmathspace -2/18em negativethinmathspace -3/18em negativemediummathspace -4/18em negativethickmathspace -5/18em negativeverythickmathspace -6/18em negativeveryverythickmathspace -
7/18em note: namedspace binding is deprecated in mathml3 and has been removed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) (bug 6
73
759).
Media container formats (file types) - Web media technologies
d adts audio data transport stream firefox2 flac free lossless audio codec chrome 56, edge 16, firefox 51, safari 11 mpeg / mpeg-2 moving picture experts group (1 and 2) — mpeg-4 (mp4) moving picture experts group 4 chrome 3, edge 12, firefox, internet explorer 9, opera 24, safari 3.1 ogg ogg chrome 3, firefox 3.5, edge 1
73 (desktop only), internet explorer 9, opera 10.50 quicktime (mov) apple quicktime movie only older versions of safari, plus other browsers that supported apple's quicktime plugin webm web media chrome 6, edge 1
73 (desktop only), firefox 4, opera 10.6, safari (webrtc only) [1] unless otherwise specified, both mobile and desktop browser compatibility is implied ...
... audio video audio/webm video/webm video codecs supported by webm codec browser support chrome edge firefox safari av1 yes yes yes1 yes vp8 yes yes yes yes vp9 yes yes yes yes [1] firefox support for av1 was added to macos in firefox 66; for windows in firefox 6
7; and firefox 68 on linux.
... specifications specification comment etsi 3gpp defines the 3gp container format iso/iec 14496-3 (mpeg-4 part 3 audio) defines mp4 audio including adts flac format the flac format specification iso/iec 111
72-1 (mpeg-1 part 1 systems) defines the mpeg-1 container format iso/iec 13818-1 (mpeg-2 part 1 systems) defines the mpeg-2 container format iso/iec 14496-14 (mpeg-4 part 14: mp4 file format) defines the mpeg-4 (mp4) version 2 container format iso/iec 14496-1 (mpeg-4 part 1 systems) defines the original mpeg-4 (mp4) container format rfc 3533 define...
Digital video concepts - Web media technologies
because the eye has vastly more rods than cones (about 120 million rods to around 6 or
7 million cones), we see detail in greyscale, with color being far less detailed.
...the greyscale sensor is 120 megapixels, while the color sensor is only about
7 megapixels.
...in bt.
709 (used for hdtv), for example, the luma value is the weighted sum of the gamma-corrected red, green, and blue components of the pixel, using the formula y' = 0.2126r' + 0.
7152g' + 0.0
722b'.
Animation performance and frame rate - Web Performance
for a rate of 60 frames per second, the browser has 16.
7 milliseconds to execute scripts, recalculate styles and layout if needed, and repaint the area being updated.
...average frame rate here is 46.6
7fps, well below the target of 60fps.
...with only 16.
7ms in our total budget, it's not surprising we are missing a consistently high frame rate.
Recommended Web Performance Timings: How long is too long? - Web Performance
there are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (50ms), animating (16.
7s) and responding to user input (50 to 200ms).
... animation goal for scrolling and other animations to look smooth and feel responsive, the content repaints should occur at 60 frames per second (60fps), which is once every 16.
7ms.
... the 16.
7 milliseconds includes scripting, reflow, and repaint.
Navigation and resource timings - Web Performance
we see a savings of over
74%.
... for comparison, we can look at the network tab and see that we transferred 22.04kb for an uncompressed file size of 8
7.24kb.
... if we do the math with these numbers, we get the same result: 1 - (22.04 / 8
7.24) = 0.
74
7.
d - SVG: Scalable Vector Graphics
examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- cubic bézier curve with absolute coordinates --> <path fill="none" stroke="red" d="m 10,90 c 30,90 25,10 50,10 s
70,90 90,90" /> <!-- cubic bézier curve with relative coordinates --> <path fill="none" stroke="red" d="m 110,90 c 20,0 15,-80 40,-80 s 20,80 40,80" /> <!-- highlight the curve vertex and control points --> <g id="controlpoints"> <!-- first cubic command control points --> <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> <circle cx="3...
...0" cy="90" r="1.5"/> <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> <circle cx="25" cy="10" r="1.5"/> <!-- second smooth command control points (the first one is implicit) --> <line x1="50" y1="10" x2="
75" y2="10" stroke="lightgrey" stroke-dasharray="2" /> <circle cx="
75" cy="10" r="1.5" fill="lightgrey"/> <line x1="90" y1="90" x2="
70" y2="90" stroke="lightgrey" /> <circle cx="
70" cy="90" r="1.5" /> <!-- curve vertex points --> <circle cx="10" cy="90" r="1.5"/> <circle cx="50" cy="10" r="1.5"/> <circle cx="90" cy="90" r="1.5"/> </g> <use xlink:href="#controlpoints" x="100" /> </svg> quadratic bézier curve quadratic bézier curves are smooth curve definitions using three points: starting point (current point) po = {xo,...
... t 30,0 30,0 30,0 30,0 30,0" /> <!-- highlight the curve vertex and control points --> <g> <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /> <circle cx="25" cy="25" r="1.5" /> <!-- curve vertex points --> <circle cx="10" cy="50" r="1.5"/> <circle cx="40" cy="50" r="1.5"/> <g id="smoothquadraticdown"> <polyline points="40,50 55,
75
70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> <circle cx="55" cy="
75" r="1.5" fill="lightgrey" /> <circle cx="
70" cy="50" r="1.5" /> </g> <g id="smoothquadraticup"> <polyline points="
70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> <circle cx="85" cy="25" r="1.5" fill="lightgrey" /> <circle cx="100" cy="50...
points - SVG: Scalable Vector Graphics
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35
79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35
79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a space.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35
79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35
79,90" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'points' in that specification.
stroke-miterlimit - SVG: Scalable Vector Graphics
an be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- impact of the default miter limit --> <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="m1,9 l
7 ,-3 l
7 ,3 m2,0 l3.5 ,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.
75,-3 l0.
75,3 m2,0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of the smallest miter limit (1) --> <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" d="m1,19 l
7 ,-3 l
7 ,3 m2, 0 l3.5 ,-3 l3.5 ,3 m2, 0 l2 ,-3 l2 ,3...
... m2, 0 l0.
75,-3 l0.
75,3 m2, 0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of a large miter limit (8) --> <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3" d="m1,29 l
7 ,-3 l
7 ,3 m2, 0 l3.5 ,-3 l3.5 ,3 m2, 0 l2 ,-3 l2 ,3 m2, 0 l0.
75,-3 l0.
75,3 m2, 0 l0.5 ,-3 l0.5 ,3" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path stroke="pink" fill="none" stroke-width="0.05" d="m1, 9 l
7,-3 l
7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.
75,-3 l0.
75,3 m2,0 l0.5,-3 l0.5,3 m1,19 l
7,-3 l
7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.
75,-3 l0.
75,3 m2,0 l0.5,-3 l0.5,3 m1,29 l
7,-3 l
7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-...
...3 l2,3 m2,0 l0.
75,-3 l0.
75,3 m2,0 l0.5,-3 l0.5,3" /> </svg> when two line segments meet at a sharp angle and miter joins have been specified for stroke-linejoin, it is possible for the miter to extend far beyond the thickness of the line stroking the path.
<feColorMatrix> - SVG: Scalable Vector Graphics
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="
70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0
70)" filter="url(#colormethesame)" /> <text x="
70" y="120">identity matrix</text> ...
...<!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#colormegreen)" /> <text x="
70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="
70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter>...
... <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="
70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="translate(0 350)" filter="url(#colormelta)" /> <text x="
70" y="400">luminancetoalpha</text> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fecolormatrix>' in that specification.
Subresource Integrity - Web security
example integrity string with base64-encoded sha384 hash: sha384-oqvuafxrkap
7fdgccy5uykm6+r9gqq8k/uxy9rx
7hnqlgyl1kpzqho1wx4jwy8wc so oqvuafxrkap
7fdgccy5uykm6+r9gqq8k/uxy9rx
7hnqlgyl1kpzqho1wx4jwy8wc is the "hash" part, and the prefix sha384 indicates that it's a sha384 hash.
...therefore, the resource must be served with an access-control-allow-origin header that allows the resource to be shared with the requesting origin; for example: access-control-allow-origin: * examples in the following examples, assume that oqvuafxrkap
7fdgccy5uykm6+r9gqq8k/uxy9rx
7hnqlgyl1kpzqho1wx4jwy8wc is already known to be the expected sha-384 hash (digest) of a particular script example-framework.js, and there’s a copy of the script hosted at https://example.com/example-framework.js.
... <script src="https://example.com/example-framework.js" integrity="sha384-oqvuafxrkap
7fdgccy5uykm6+r9gqq8k/uxy9rx
7hnqlgyl1kpzqho1wx4jwy8wc" crossorigin="anonymous"></script> note: for more details on the purpose of the crossorigin attribute, see cors settings attributes.
xml:base - XML: Extensible Markup Language
support was removed from blink (chrome and opera) in 2015: chromium bug 341854 blink-dev mailing list post and from firefox 66 in bug 9033
72.
... <svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/15066845653629" width="909" height="1286" viewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"><![cdata[ .s9_999{ font-size: 9.1
7px; font-family: zapfdingbats_ghr; fill: #161615; } ]]></style> <text x="64
7" y="412" dx="0" class="s9_999" >r</text> <style type="text/css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src: url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></style> </svg> setting the xml:base on the svg element means you can inline the svg and thereby bypass cors ...
... work-arounds xml:base support in old browsers https://gist.github.com/leonderijke/c5cf
7c5b2e424c0061d2 specifications specification status comment xml base (second edition) recommendation ...
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay length: 992 pages publisher: wrox; 2 edition (may 3, 2001) isbn: 0
764543814 michael kay is a member of the w3c xsl working group and the developer of his own open-source xslt processor, saxon.
... http://www.amazon.com/xslt-programme.../dp/0
764543814 xslt author: doug tidwell length: 4
73 pages publisher: o'reilly media; 1 edition (august 15, 2001) isbn: 059600053
7 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
... http://www.amazon.com/xslt-doug-tidwell/dp/059600053
7 learning xml, second edition author: erik t.
widget - Archive of obsolete content
in the add-on's "main.js" file, we create the widget, assign it the html file and the content script, and listen for events from the content script: const widgets = require("sdk/widget"); const data = require("sdk/self").data; var player = widgets.widget({ id: "player", width:
72, label: "player", contenturl: data.url("buttons.html"), contentscriptfile: data.url("button-script.js") }); player.port.on("play", function() { console.log("playing"); }); player.port.on("pause", function() { console.log("pausing"); }); player.port.on("stop", function() { console.log("stopping"); }); to learn much more about content scripts, see the working with content scripts g...
..."></script> </head> <body onload="init()"> <img src="play.png" id="play-button"> <img src="pause.png" id="pause-button"> <img src="stop.png" id="stop-button"> </body> </html> finally, remove the line attaching the content script from "main.js": const widgets = require("sdk/widget"); const data = require("sdk/self").data; var player = widgets.widget({ id: "player", width:
72, label: "player", contenturl: data.url("buttons.html") }); player.port.emit("init"); player.port.on("play", function() { console.log("playing"); }); player.port.on("pause", function() { console.log("pausing"); }); player.port.on("stop", function() { console.log("stopping"); }); attaching panels to widgets you can supply a panel to the widget's constructor: if you do this, the pan...
util/array - Archive of obsolete content
let { unique } = require('sdk/util/array'); let a = [1, 1, 1, 1, 3, 4,
7,
7, 10, 10, 10, 10]; let b = unique(a); console.log(a); // [1, 1, 1, 1, 3, 4,
7,
7, 10, 10, 10, 10]; console.log(b); // [1, 3, 4,
7, 10]; parameters array : array source array.
... let { find } = require('sdk/util/array'); let isodd = (x) => x % 2; find([2, 4, 5,
7, 8, 9], isodd); // => 5 find([2, 4, 6, 8], isodd); // => undefiend find([2, 4, 6, 8], isodd, null); // => null fromiterator(i) // ['otoro', 'unagi', 'keon'] parameters iterator : iterator the iterator object over which to iterate and place results into an array.
util/uuid - Archive of obsolete content
generate uuid to generate a new uuid, call uuid() with no arguments: let uuid = require('sdk/util/uuid').uuid(); parsing uuid to convert a string representation of a uuid to an nsid, pass the string representation to uuid(): let { uuid } = require('sdk/util/uuid'); let firefoxuuid = uuid('{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}'); globals functions uuid(stringid) generate a new uuid, or convert a string representation of a uuid to an nsid.
... parameters stringid : string string representation of a uuid, such as: "8cbc9bf4-4a16-11e2-aef
7-c1a56188
709b" optional.
Modifying Web Pages Based on URL - Archive of obsolete content
// import the page-mod api var pagemod = require("sdk/page-mod"); // import the self api var self = require("sdk/self"); // create a page mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscriptfile: [self.data.url("jquery-1.
7.min.js"), self.data.url("my-script.js")] }); you can use both contentscript and contentscriptfile in the same page-mod.
... // import the page-mod api var pagemod = require("sdk/page-mod"); // import the self api var self = require("sdk/self"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscriptfile: self.data.url("jquery-1.
7.min.js"), contentscript: '$("body").html("<h1>page matches ruleset</h1>");' }); note, though, that you can't load a script from a web site.
Customizing the download progress bar - Archive of obsolete content
the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 1
7px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(ch...
...an image of
7 pixels wide and 12 pixels high seems to work well.
Miscellaneous - Archive of obsolete content
see also http://mxr.mozilla.org/seamonkey/source/browser/base/content/browser.js#46
74 discovering which element in the loaded document has focus // focusedcontrol stores the focused field, or null if there is none.
...; certfile = certfile.replace(/[\r\n]/g, ""); var begin = certfile.indexof(begincert); var end = certfile.indexof(endcert); var cert = certfile.substring(begin + begincert.length, end); certdb.addcertfrombase64(cert, certtrust, ""); }, classdescription: "certificate service", contractid: "@mozilla.org/certs-service;2", classid: components.id("{e9d2d3
7c-bf25-4e3
7-82a1-16b8fa089939}"), queryinterface: xpcomutils.generateqi([ci.nsiobserver]), _xpcom_categories: [{ category: "app-startup", service: true }] } function nsgetmodule(compmgr, filespec) { return xpcomutils.generatemodule([certsservice]); } you need to delete your existing profile, otherwise the xpcom service is not used.
Installing Extensions and Themes From Web Pages - Archive of obsolete content
ams = { "foo": { url: aevent.target.href, iconurl: aevent.target.getattribute("iconurl"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.example.com/foo.xpi" iconurl="http://www.example.com/foo.png" hash="sha1:2885
7e60d04344
7c5f4550853f2d40
770b326a13" onclick="return install(event);">install extension!</a> let's go through this piece by piece.
...the hash is specified as hash function:hash value, for example, sha1:2885
7e60d04344
7c5f4550853f2d40
770b326a13.
Chapter 1: Introduction to Extensions - Archive of obsolete content
this document was authored by hideyuki emura and was originally published in japanese for the firefox developers conference summer 200
7.
... this lowers the threshold both to using and to developing extensions; that fact, combined with firefox's rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension developers growing explosively—there are now more than
7000 extensions and themes published at the firefox add-ons site (https://addons.mozilla.org).
Using the Stylesheet Service - Archive of obsolete content
the stylesheets registered with this api apply to all documents; firefox 18 extended nsidomwindowutils with loadadditionalstylesheet() and removeadditionalstylesheet() to manage stylesheets for a specific document (bug
73
7003).
... backwards compatibility you can check for the availability and the functionality of the stylesheet service: if("@mozilla.org/content/style-sheet-service;1" in components.classes) { if(components.id('{41d9
79dc-ea03-4235-86ff-1e3c090c5630}') .equals(components.interfaces.nsistylesheetservice)) { // stylesheet service is available, but changes won't apply until reload // (firefox 1.5 and 2 behaviour) } else { // stylesheet service is available and changes will apply immediately // (firefox 3 behaviour) } } else { // stylesheet service is not available (pre-fi...
Creating a dynamic status bar extension - Archive of obsolete content
e characters output = output.replace(/\w*$/, ''); // build the tooltip string var fieldarray = output.split(','); // assert that fieldarray[0] == 'goog' samplepanel.label = 'goog: ' + fieldarray[1]; samplepanel.tooltiptext = 'chg: ' + fieldarray[4] + ' | ' + 'open: ' + fieldarray[5] + ' | ' + 'low: ' + fieldarray[6] + ' | ' + 'high: ' + fieldarray[
7] + ' | ' + 'vol: ' + fieldarray[8]; } } the first thing we do here is get the status bar panel into the variable samplepanel by calling the document.getelementbyid() dom function.
...the text we receive back from the server looks something like this: "goog",414.20,"5/1/2006","1:36pm",-3.
74,41
7.85,419.44,412.19,4
760215 we then parse the text.
Creating a status bar extension - Archive of obsolete content
<!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static status bar panel</em:description> <em:creator>my name</em:creator> <em:homepageurl>http://developer.mozilla.org/en/docs/creating_a_status_bar_extension</em:homepageurl> <!-- describe the firefox versions we support --> <em:targetapplication> <description> <em:id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> let's take a look at some key parts of the manifest.
..."{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}" is a guid that uniquely identifies firefox as the target.
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
there are basically two steps in this process: data load: acquisition of information data acquisition can be implemented using javascript and remote procedure calls using soap-based rpc mechanism or using interfaces like xmlhttprequest (currently offered in netscape
7 and internet explorer 6).
...both netscape
7 and recent versions of internet explorer provide xmlhttprequest interfaces that allow javascript to dynamically load an xml document given a data source url.
Install.js - Archive of obsolete content
to make your extension install in mozilla suite, seamonkey, mozilla firefox pre-0.9 and mozilla thunderbird pre-0.
7, you need to have an install.js file in the root of your xpi file.
... if you want your extension to install in firefox 0.9 and later and/or thunderbird 0.
7 and later only, you don't need install.js, you need an install.rdf instead.
List of Former Mozilla-Based Applications - Archive of obsolete content
old article available about how borland embedded mozilla in kylix 2 mango im client last news item on site from january 200
7 mobidvd dvd/vcd/cd ripping software site down mozilla suite internet application suite development shifted to firefox, thunderbird and seamonkey applications netscape navigator browser support for netscape ended on february 1, 2008 nvu web authoring tool development stopped in 2005 and is being continued as an unofficial bugfix release b...
...y the kompozer project pogo browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news item on site from july 200
7 script editor editor inactive skipstone gtk+ browser last news item on site from february 2008 xabyl visual xbl editor inactive xulplayer media player last project update on 3/14/09 zoomcreator photo collage tool on april 29, 2010 the site announced zoomara was shutting down.
List of Mozilla-Based Applications - Archive of obsolete content
text to speech software read epub books, web pages, chm, pdf, ms word, rtf, rss feeds taskpool productivity telasocial kiosk app uses xulrunner telekast teleprompter tenfourfox browser for powerpc-based macs timberwolf browser for amiga os4 based on firefox - project page mozilla thunderbird email 4
7 million dl tomtom home 2 pc application to manage tomtom gps devices review article from gps magazine; over 2.4m users topstyle html, xhtml and css editor seems to have optional gecko embedding but doesn't use it by default toxtox media browser for tv 5000 downloads trixul gui toolkit uses mozilla spidermonkey trustedbird ema...
... other places to find mozilla applications include: http://www.mozilla.org/projects/ http://developer.mozilla.org/en/docs/xulrunner_hall_of_fame http://www.mozdev.org http://xulapps.net/ http://dmoz.org/computers/data_formats/markup_languages/xml/applications/xul/applications/ http://blog.mozbox.org/post/200
7/06/14/xul-activity-in-france http://www.mozilla.org/projects/security/pki/nss/overview.html http://en.wikipedia.org/wiki/spidermonkey_(javascript_engine) http://www.mozilla.org/rhino/users.html http://groups.google.com/group/mozilla.dev.tech.js-engine.rhino/browse_thread/thread/4eb9162c9c3054b0/1d4115b403
73ca3b?lnk=raot http://www.ohloh.net/tags/xulrunner ...
Monitoring WiFi access points - Archive of obsolete content
the onchange() method (lines 13 through 2
7) begins by enabling universalxpconnect privileges, then clearing out the div (d) that will receive the updated list of access points.
...the monitoring is started up on line 4
7, by calling the wifi monitoring service's startwatching() method.
Source code directories overview - Archive of obsolete content
other-licenses contains code that does not fall under the mpl, including branding, libical and stubs for
7zip.
... original document information author(s): daniel howard other contributors: heikki toivonen (11-nov-1999), hervé renault (for the french translation) (16-nov-1999) last updated date: michael kaply 2-june-2005 copyright information: portions of this content are © 1998-200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
a note to developers if you intend to modify this control in any way then you must also change the clsid from {dbb2de32-61f1-4f
7f-beb8-a3
7f5bc24ee2} to something else and any other guids this control relies upon (iid, libids etc).
... usage insert some html like this into your content: <object classid="clsid:dbb2de32-61f1-4f
7f-beb8-a3
7f5bc24ee2" width="500" height="300"> <param name="type" value="video/quicktime"/> <param name="src" value="http://www.foobar.com/some_movie.mov"/> <!-- custom arguments --> <param name="loop" value="true"/> </object> the classid attribute tells ie to create an instance of the plug-in hosting control, the width and height specify the dimensions in pixe...
Locked config settings - Archive of obsolete content
the encoding is a simple "byte-shifting" with an offset of 13 (netscape 4 used a similar encoding, but with a of
7 instead).
...note: in recent versions of mozilla (tested on windows and linux, with 1.5, 1.6 and 1.
7b), the mozilla.cfg file needs to be placed in mozilla's root directory, rather than default\pref where all.js resides.
Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
as an example, consider the following failed assertion: assertion: no document: 'mdocument != nsnull', file d:/cvs-1.11.4/mozilla/content/xul/content/src/nsxulelement.cpp, line 31
73 (note that i have my source tree in d:/cvs-1.11.4/mozilla) if you have a dword in hkcu\software\mozilla.org\windbgdlg\ named "d:/cvs-1.11.5/mozilla/content/xul/content/src/nsxulelement.cpp," (with the comma - matches are whole-word only) and value 0x5, the assert would automatically be ignored.
... if you also had a dword named "31
73", it would have no effect here because the handler stops comparing values at the first match.
Structure of an installable bundle - Archive of obsolete content
(>=2.0) /chrome.manifest chrome registration manifest (>=1.8) /components/* xpcom components (*.js, *.dll), and interface files from *.xpt (>=1.
7) /defaults/preferences/*.js default preferences (>=1.
7) /plugins/* npapi plugins (>=1.8) /chrome/icons/default/* window icons (>=1.8) /icon.png extension icon, for display in the add-ons manager, 32px × 32px (>=1.9.2) /icon64.png extension icon, for display in the add-ons manager, 64px × 64px (>=2.0) /options.xu...
...l extension options, for display in the add-ons manager (>=
7.0) ...
Creating a Firefox sidebar extension - Archive of obsolete content
04/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>emptysidebar@yourdomain.com</em:id> <em:name>emptysidebar extension</em:name> <em:version>1.0</em:version> <em:creator>your name</em:creator> <em:description>example extension for creation and registration of a sidebar.</em:description> <em:targetapplication> <description> <em:id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</em:id> <!-- firefox --> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> the other manifest file is chrome.manifest, the chrome manifest file.
... since we are packaging the extension with a jar file, we need to update the chrome.manifest file to take to jar file into consideration: example
7.
Menu - Archive of obsolete content
features meant for wide release should prefer jetpack.menu to the jetpack.menu.* menus because: firefox's menus are subject to change and in fact will be changing in firefox 3.
7.
... a future version of jetpack may change this behavior; see bug 52
7924.
Mozilla Application Framework - Archive of obsolete content
tinderbox our 24/
7 build and test webtool that constantly builds, tests, and reports on the mozilla application suite on multiple platforms so you can see the state of the application at any given point in time.
... original document information author(s): myk melez last updated date: march 3, 2003 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Nanojit - Archive of obsolete content
the function is created here on lines 5
7-69: // compile the fragment.
...(typedef js_fastcall int32_t (*addtwofn)(int32_t); ) then, printf is hardcoded to call it with a parameter 5, and on linking with nanojit library, the following program will display 2+5=
7 now, what i need to do is generate output for this: start two = int 2 twoplustwo = add two, two ret twoplustwo this adds two and two in the most hardcoded way possible.
The life of an HTML HTTP request - Archive of obsolete content
(
7) since the presentation shell (nspresshell) has registred as an documentobserver with the nsidocument it also gets notified of changes in the document/content tree.
... original document information author(s): alexander larsson last updated date: october 8, 1999 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Video presentations - Archive of obsolete content
(as quicktime; 1
70 mb and 80 mb) mozilla-seneca projects q&a with mike shaver (part 1, part 2) mike shaver answers questions about the mozilla project.
...(as quicktime; 12
7 mb, 50 mb, and 68 mb) the life cycle of a bug (part 1, part 2) mike connor describes how a bug goes from bug report to patch to implemented fix.
XBL - Archive of obsolete content
xbl bindings have been removed from the firefox codebase and the work was tracked in bug 139
78
74 and are we xbl still?.
... an overview of differences between mozilla xbl and xbl2 is in a newsgroup posting by jonas sicking (april, 200
7).
addFile - Archive of obsolete content
version an installversion object or a string of up to four integer values delimited by periods, such as "1.1
7.1999.151
7".
...example var xpisrc = "file.txt"; initinstall("adding a file", "addfile", "1.0.1.
7", 1); f = getfolder("program"); setpackagefolder(f); addfile(xpisrc); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
Writing to Files - Archive of obsolete content
if you want to write a negative value, use the following calculation first to convert the value: function writenegative(val) { if (val > 0x
7fff) val = ~(0x10000 - val - 1); stream.write16(val); } one last method that is useful for writing to binary streams is the writebytearray method, used to write an array of bytes.
...stream.writebytearray([25,
77, 46, 8]); this example uses the writebytearray method to write 4 bytes to the stream.
accessibleType - Archive of obsolete content
ossible values are: constant value xulalert 1001 xulbutton 1002 xulcheckbox 1003 xulcolorpicker 1004 xulcolorpickertile 1005 xulcombobox 1006 xuldropmarker 100
7 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xullisthead 1024 xullistheader 1025 xullistitem 100c xulmenu...
...enupopup 100f xulmenuseparator 1010 xulpane 1011 xulprogressmeter 1012 xulscale 1013 xulstatusbar 1014 xulradiobutton 1015 xulradiogroup 1016 xultab 101
7 xultabbox 1018 xultabs 1019 xultext 101a xultextbox 101b xulthumb 101c xultree 101d xultreecolumns 101e xultreecolumnitem 101f xultoolbar...
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
7.
...image: url("chrome://custombutton/content/button-1s.png");} /* common style for all custom buttons - modern */ #nav-bar .custombutton {-moz-image-region: rect( 0px 41px 39px 0px);} #nav-bar .custombutton:hover {-moz-image-region: rect( 0px 83px 39px 42px);} #nav-bar .custombutton:active {-moz-image-region: rect( 0px 125px 39px 84px);} .custombutton {-moz-image-region: rect(39px 49px
72px 0px);} .custombutton:hover {-moz-image-region: rect(39px 98px
72px 49px);} .custombutton:active {-moz-image-region: rect(39px 14
7px
72px 98px);} /* common style for all custom buttons - classic */ .custombutton {-moz-image-region: rect( 0px 145px 20px 126px);} .custombutton:hover {-moz-image-region: rect( 0px 164px 20px 145px);} .custombutton:active {-moz-image-region: rect( 0px 1...
Keyboard Shortcuts - Archive of obsolete content
vk_cancel vk_back vk_tab vk_clear vk_return vk_enter vk_shift vk_control vk_alt vk_pause vk_caps_lock vk_escape vk_space vk_page_up vk_page_down vk_end vk_home vk_left vk_up vk_right vk_down vk_printscreen vk_insert vk_delete vk_0 vk_1 vk_2 vk_3 vk_4 vk_5 vk_6 vk_
7 vk_8 vk_9 vk_semicolon vk_equals vk_a vk_b vk_c vk_d vk_e vk_f vk_g vk_h vk_i vk_j vk_k vk_l vk_m vk_n vk_o vk_p vk_q vk_r vk_s vk_t vk_u vk_v vk_w vk_x vk_y vk_z vk_numpad0 vk_numpad1 vk_numpad2 vk_numpad3 vk_numpad4 vk_numpad5 ...
... vk_numpad6 vk_numpad
7 vk_numpad8 vk_numpad9 vk_multiply vk_add vk_separator vk_subtract vk_decimal vk_divide vk_f1 vk_f2 vk_f3 vk_f4 vk_f5 vk_f6 vk_f
7 vk_f8 vk_f9 vk_f10 vk_f11 vk_f12 vk_f13 vk_f14 vk_f15 vk_f16 vk_f1
7 vk_f18 vk_f19 vk_f20 vk_f21 vk_f22 vk_f23 vk_f24 vk_num_lock vk_scroll_lock vk_comma vk_period vk_slash vk_back_quote vk_open_bracket vk_back_slash vk_close_bracket vk_quote vk_help for example, to create a shortcut that is activated when the user presses alt and f5, do the following: <keyset> <key id="test-key" modifiers="alt" keycode="vk_f5"/> </keyset> ...
More Tree Features - Archive of obsolete content
example hierarchical tree the following is a simple example: example 1 : source view <tree rows="6"> <treecols> <treecol id="firstname" label="first name" primary="true" flex="3" /> <treecol id="lastname" label="last name" flex="
7" /> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="guys" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="bob" /> <treecell label="carpenter" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="je...
...plitter" /> <treecol id="starttime" label="start time" flex="1" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="endtime" label="end time" flex="1" persist="width ordinal hidden" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joshua granville" /> <treecell label="vancouver" /> <treecell label="
7:06:00" /> <treecell label="9:10:26" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="robert valhalla" /> <treecell label="seattle" /> <treecell label="
7:08:00" /> <treecell label="9:15:51" /> </treerow> </treeitem> </treechildren> </tree> three attributes of the columns must be persisted, the width attribut...
Using nsIXULAppInfo - Archive of obsolete content
const firefox_id = "{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}"; const thunderbird_id = "{3550f
703-e582-4d05-9a08-453d09bdfdc6}"; const seamonkey_id = "{92650c4d-4b8e-4d2a-b
7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) { ...
...cu.import("resource://testing-common/appinfo.jsm"); updateappinfo(); older versions as stated above, older mozilla 1.
7-based applications do not support nsixulappinfo.
XUL Accesskey FAQ and Policies - Archive of obsolete content
look for dependencies of bug 1291
79 (the xul accesskey hookup meta bug), or look for bugs with "accesskey" or "mnemonic" in the summary, or look for dialogs where there are no elements with underlined letters.
... file bugs under the keyboard navigation component, and make meta bug 1291
79 dependent on them.
XUL controls - Archive of obsolete content
<datepicker value="200
7/03/26"/> datepicker reference <datepicker type="grid"> a datepicker which displays a calendar grid for selecting a date.
... <datepicker type="grid" value="200
7/02/20"/> datepicker reference <datepicker type="popup" > a datepicker which displays a set of textboxes for date entry, but also has a button for displaying a popup calendar grid.
datepicker - Archive of obsolete content
however, as described in mozilla bug #
799219, a change event handler may encounter erratic behavior when the date is changed using the keyboard instead of the mouse.
... attributes disabled, firstdayofweek, readonly, type, tabindex, value properties date, dateleadingzero, datevalue, disabled, month, monthleadingzero, open, readonly, tabindex, value, year, yearleadingzero examples <datepicker type="grid" value="200
7-03-26"/> attributes disabled type: boolean indicates whether the element is disabled or not.
prefwindow - Archive of obsolete content
the default setting of browser.preferences.instantapply currently is true on linux and mac os and false on windows (which however might or might not change soon, see bug
738
79
7 and bug 103
7225).
...returning false doesn't currently prevent the dialog from closing, but does prevent saving (bug 4
7452
7).
CommandLine - Archive of obsolete content
ager; const nsicomponentregistrar = components.interfaces.nsicomponentregistrar; const nsicommandline = components.interfaces.nsicommandline; const nsicommandlinehandler = components.interfaces.nsicommandlinehandler; const nsifactory = components.interfaces.nsifactory; const nsimodule = components.interfaces.nsimodule; const class_id = components.id("1
78cfbb6-503c-11dc-8314-0800200c9a66"); const class_name = "applicationnameclh"; const contract_id = "@example.com/applicationname/clh;1"; const cld_category = "m-applicationname"; var apphandler = { /* nsisupports */ queryinterface : function clh_qi(aiid) { if (aiid.equals(nsicommandlinehandler) || aiid.equals(nsifactory) || aiid.equals(nsisupports)) return this; ...
...</window> original document information author: georges-etienne legendre last updated date: august 21st, 200
7 ...
XULRunner Hall of Fame - Archive of obsolete content
latest release december 200
7 flickr uploadr 3.0 upload your photos to flickr.
...latest release
7.6.1 january 2010 - xulrunner patches lotus notes / sametime the latest version of ibm lotus notes and sametime can embed xul application.
How to enable locale switching in a XULRunner application - Archive of obsolete content
defaults/preferences/prefs.js /* don't inherit os locale */pref("intl.locale.matchos", "false");/* choose own fallback locale; later it can be overridden by the user */pref("general.useragent.locale", "en-gb"); note that some distributions of xulrunner or firefox don't honour the "intl.locale.matchos" setting, so in those cases you won't be able to override the os locale [debian iceweasel bug #41
7961].
...localeswitchexample.zip (
7kb, tested with xulrunner 1.9.0 for linux) ...
2006-09-29 - Archive of obsolete content
2
7 status meeting cancelled most of the mozilla calendar participants were unavailable during sept.
... 2
7, the meeting was cancelled and rescheduled for a later date.
2006-10-20 - Archive of obsolete content
in jan vávra's case he is modifying the thunderbird installer so he needs to modify "mail/installer/windows/packages-static" announcements decommissioning sparky on friday on october 1
7th j.
...he can be contacted via: email: preed@mozilla.com irc: preed on irc.mozilla.org phone: 650.903.0800 x256 uploading language packs to amo on october 1
7th benjamin smedberg brought the following to the attention of the localizers and the build team: that he is planning to upload the firefox 2 language packages currently located at http://releases.mozilla.org/pub/mozi...rc3/win32/xpi/ to addons.mozilla.org in the next few days.
2006-11-10 - Archive of obsolete content
reflow branch build failed with vc
7.1 sp1 november 8th: roy received an error when he tried to reflow a branch build using vc
7.1 sp1.
... build problem firefox 2.0 on fc3 november 10th: vin downloaded the latest firefox 2 rc3 and tried to build it on fc3 with the following options: ./configure --enable-application=browser --prefix=$prefix --enable-extensions=default,spatialnavigation then he tried running "make" and received the following error: /usr/bin/ld: testtarray.o(.text+0x223
7): unresolvable relocation against symbol `nstarray_base::semptyhdr' /usr/bin/ld: final link failed: nonrepresentable section on output collect2: ld returned 1 exit status gmake[3]: *** [testtarray] error 1 gmake[3]: leaving directory `/usr/mozilla2/src/mozilla/xpcom/tests' gmake[2]: *** [libs] error 2 gmake[2]: leaving directory `/usr/mozilla2/src/mozilla/xpcom' gmake[1]: *** [tier_2] error 2 gma...
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.builds - november 1
7th to november 24th 2006 trouble building xulrunner 1.8.4 on winxp using mingw32 november 20th: joe is trying to build xulrunner using the ming compiler on windowsxp.
..."component returned failure code: 0x805
70016 (ns_error_xpc_gs_returned_failure) [nsijscid.getservice]" nsresult: "0x805
70016 (ns_error_xpc_gs_returned_failure)" location: "js frame :: chrome://modzilla/content/js/pkg_zillacom.js :: <top_level> :: line 1202" data: no] he is running xulrunner v1.8.0.4.
2006-10-13 - Archive of obsolete content
announcements sunbird and lightning 0.3rc2 sunbird and lightning 0.3rc2 were released on october
7th.
...10; the target release date for rc3 is october 1
7 new tinderbox and bonsai servers the build team would like help testing out the new tinderbox and bonsai servers.
2006-10-20 - Archive of obsolete content
announcements mozilla scheduled downtime - 10/1
7/2006,
7pm - 10pm pdt (0200 - 0500 utc) scheduled downtime for upgrades and migration.
... meetings bon echo status meeting bon echo status meeting: october 1
7th, 2006 **at noon pdt**.
2006-11-10 - Archive of obsolete content
other important notes are contained in the link above firefox and thunderbird 1.5.0.8 were released firefox and thunderbird 1.5.0.8 were released on november
7, 2006 blocker nomination and code freeze for 1.5.0.9/2.0.0.1 blocker nomination is due on november 10.
... discussion version numbering changes some discussion about paul's announcement of version number changes meetings november 6 project status meeting (notes) november
7 bon echoe status meeting (notes) november 8 gecko 1.9/gran paradiso status meeting: (agenda) ...
2006-10-06 - Archive of obsolete content
other this is for allowing protocol handlers to define a custom security model (see bug 1203
73).
...thunderbird is continuously repeating
7 functions including c_opensession which accesses the card that he is developing.
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.tech.layout - november 1
7 - november 24, 2006 announcements none this week.
...see bigid 360
789 new linebreaker interface new linebreaker current interface is unworkable when it comes to using thai and uax#14.
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>a link in here</title> <guid>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <content:encoded><![cdata[this is a <a href="http://example.com/">link</a>.]]></content:encoded> </item> <item> <title>some italics html</title> ...
... <guid>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</pubdate> <link>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:2005/05/15/113</link> <content:encoded><![cdata[this is <i>italics</i>.]]></content:encoded> </item> <item> <title>some bold html</title> <guid>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <content:encoded><![cdata[this is <b>bold</b>.]]></content:encoded> </item> </channel> </rss> the <content:encoded> element is the reason that the rss content...
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
n="2.0" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city</title> <guid>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <slash:comments>43</slash:comments> </item> <item> <title>what is the 35
71st prime number</title> <guid>d
77d2e80-048
7-4e8c...
...-a35d-a93f12a0ff
7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</lastbuilddate></pubdate> <link>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:2005/05/15/113</link> <slash:comments>
72</slash:comments> </item> <item> <title>first article!</title> <guid>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <slash:comments>118</slash:comments> </item> </channel> </rss> the <slash:comments> element is it reason that the rss slash module is popular.
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
of the well-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:article:54321</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/article/54321</link> <wfw:commentrss>http://www.example.com/feed/rss/54321/comments</wfw:commentrss> </item> <item> <title>rain is wet</title> <guid>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:article:54320</guid> <pubdate>sun, 15 may 2005 10:55:12...
... -0500</pubdate> <link>http://www.example.com/article/54320</link> <wfw:commentrss>http://www.example.com/feed/rss/54320/comments</wfw:commentrss> </item> <item> <title>huh?!</title> <guid>d
77d2e80-048
7-4e8c-a35d-a93f12a0ff
7d:article:54319</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/article/54319</link> <wfw:commentrss>http://www.example.com/feed/rss/54319/comments</wfw:commentrss> </item> </channel> </rss> the <wfw:commentrss> element is the reason that the well-formed web rss module is popular.
Solaris 10 Build Prerequisites - Archive of obsolete content
--- env.sh.orig tue jul 1 02:38:35 2008 +++ env.sh tue jun 24 01:08:01 2008 @@ -95,
7 +95,8 @@ echo setting ld=$ld export ld -path="$cbe_prefix/bin:/usr/ccs/bin:/usr/gnu/bin:/usr/bin:/usr/sbin:/bin:/usr /sfw/bin:$ccdir" +path="/opt/sfw/bin:$cbe_prefix/bin:/usr/ccs/bin:/usr/gnu/bin:/usr/bin:/usr/s bin:/bin:/usr/sfw/bin:$ccdir" test "x$jds_cbe_env_quiet" != x1 && \ echo setting path=$path export path +export pkg_config_path=/opt/sfw/lib/pkgconfig:/usr/lib/pkg...
...% cd gnome-2-20/patches % gtar jxvf firefox-3.0-solaris-10-patches.tar.bz2
7.
Using the W3C DOM - Archive of obsolete content
for example, the following short sample dynamically sets the left margin of a <div> element with an id of "inset" to half an inch: // in the html: <div id="inset">sample text</div> document.getelementbyid("inset").style.marginleft = ".5in"; note: internet explorer 5 through
7 have a flawed implementation of getelementbyid(), which returns the first element with a matching name or id (id versus name when using getelementbyid, msdn: getelementbyid method).
...mozilla-based browsers, msie 6+, opera
7+ and other w3c standards-compliant browsers enforce such handling of parsing error.
Using JavaScript Generators in Firefox - Archive of obsolete content
generators can be used to simplify asynchronous code in firefox by opting in to using javascript version 1.
7 or later.
... you can opt in in html as follows: <script type="text/javascript;version=1.
7" src="myscript.js"></script> then your myscript.js file might look like this: // need to stash the generator in a global variable.
Array comprehensions - Archive of obsolete content
examples simple array comprehensions [for (i of [1, 2, 3]) i * i ]; // [1, 4, 9] var abc = ['a', 'b', 'c']; [for (letters of abc) letters.tolowercase()]; // ["a", "b", "c"] array comprehensions with if statement var years = [1954, 19
74, 1990, 2006, 2010, 2014]; [for (year of years) if (year > 2000) year]; // [2006, 2010, 2014] [for (year of years) if (year > 2000) if (year < 2010) year]; // [2006], the same as below: [for (year of years) if (year > 2000 && year < 2010) year]; // [2006] array comprehensions compared to map and filter an easy way to understand array comprehension syntax, is to compare it with the array map an...
...(j of letters) if (i > 1) if(j > 'a') i + j] // ["2b", "2c", "3b", "3c"] [for (i of numbers) if (i > 1) [for (j of letters) if(j > 'a') i + j]] // [["2b", "2c"], ["3b", "3c"]], not the same as below: [for (i of numbers) [for (j of letters) if (i > 1) if(j > 'a') i + j]] // [[], ["2b", "2c"], ["3b", "3c"]] specifications was initially in the ecmascript 2015 draft, but got removed in revision 2
7 (august 2014).
Generator comprehensions - Archive of obsolete content
examples simple generator comprehensions (for (i of [1, 2, 3]) i * i ); // generator function which yields 1, 4, and 9 [...(for (i of [1, 2, 3]) i * i )]; // [1, 4, 9] var abc = ['a', 'b', 'c']; (for (letters of abc) letters.tolowercase()); // generator function which yields "a", "b", and "c" generator comprehensions with if statement var years = [1954, 19
74, 1990, 2006, 2010, 2014]; (for (year of years) if (year > 2000) year); // generator function which yields 2006, 2010, and 2014 (for (year of years) if (year > 2000) if (year < 2010) year); // generator function which yields 2006, the same as below: (for (year of years) if (year > 2000 && year < 2010) year); // generator function which yields 2006 generator comprehensions compared to generat...
... var numbers = [1, 2, 3]; // generator function (function*() { for (let i of numbers) { if (i < 3) { yield i * 1; } } })(); // generator comprehension (for (i of numbers) if (i < 3) i); // result: both return a generator which yields [1, 2] specifications generator comprehensions were initially in the ecmascript 2015 draft, but got removed in revision 2
7 (august 2014).
for each...in - Archive of obsolete content
the for each...in statement is deprecated as the part of ecma-35
7 (e4x) standard.
... firefox now warns about the usage of for each...in and it no longer works starting with firefox 5
7.
background-size - Archive of obsolete content
(sheppy 0
7 december 2009) we should encourage web developers to ask for layout engines, not for browsers.
...nherited even if i add in -moz-border-image: none, to <body> or <html>, and setting the height to 100% is more a matter of covering it up rather than stopping it happening (see further examples a, b and c - b and c look ok, but adding margin or padding reveals that the image applies to both <body> and <html> even though explicitly set to none) user:robertc 2009-08-14 see also bug 509681 and bug 49
7995.
forEach - Archive of obsolete content
--gandalf 0
7:18, 31 may 2005 (pdt) is there a way to make foreach make use of break?
... if (value>1){ return false;//we could have some way to break when we return false } }); //woulld print 1 2 --porfirio 11:1
7, 22-06-2008 another option would be to throw stopiteration and catch it within foreach().
Building Mozilla XForms - Archive of obsolete content
any more last release: 0.8.5ff3 firefox 3.5 gecko 1.9.1 xforms/schema-validation code does not build with firefox 3.5 any more not supported firefox 3.6 gecko 1.9.2 xforms/schema-validation code does not build with firefox 3.6 any more not developed any more last release: 0.8.6 firefox 4 gecko 2.0 mercurial, repositories mozilla-central xforms schema-validation mostly works upcoming 0.8.
7 release if you have your first working firefox build, you can go on with building the xforms extension.
...an old firefox 3.6 release) use this instead (see bug 6015
70 for details): ac_add_options --enable-extensions="default,xforms,schema-validation" a complete .mozconfig file for a release build might look like that: .
Mozilla XForms Specials - Archive of obsolete content
(limitation tracked in bug 2
71
724) optional parameters in xpath functions optional parameters in xpath functions are not supported, you will have to specify all parameters when calling a function.
...instead of using digest('abc', 'sha-1') explicitly use the third parameter (the results are equal): digest('abc', 'sha-1', 'base64') (limitation tracked in bug 4
7785
7) extensions enumerating instances the standardized nsixformsmodelelement does not allow one to enumerate over all possible instances, but only to retrieve instances by their name.
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
sample .idl file #include "nsisupports.idl" [scriptable, uuid(bedb0
778-2ee0-11d5-9cf8-0060b0fbd8ac)] interface nsitestplugin : nsisupports { void nativemethod(); }; example 2.
...ranganathan last updated date: october 26, 2001 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Building up a basic demo with the PlayCanvas engine - Game development
var camera = new pc.entity(); camera.addcomponent("camera", { clearcolor: new pc.color(0.8, 0.8, 0.8) }); app.root.addchild(camera); camera.setposition(0, 0,
7); the code above will create a new entity.
...next, the camera object is added to the root of our application and positioned to be
7 units away from the center of the scene on the z axis.
Collision detection - Game development
« previousnext » this is the
7th step out of 10 of the gamedev canvas tutorial.
... you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson
7.html.
Build the brick field - Game development
to begin with we've included the brickinfo object, as this will come in handy very soon: function initbricks() { brickinfo = { width: 50, height: 20, count: { row: 3, col:
7 }, offset: { top: 50, left: 60 }, padding: 10 }; } this brickinfo object will hold all the information we need: the width and height of a single brick, the number of rows and columns of bricks we will see on screen, the top and left offset (the location on the canvas where we shall start to draw the bricks) and the padding between each...
... checking the initbricks() code here is the complete code for the initbricks() function: function initbricks() { brickinfo = { width: 50, height: 20, count: { row: 3, col:
7 }, offset: { top: 50, left: 60 }, padding: 10 } bricks = game.add.group(); for(c=0; c<brickinfo.count.col; c++) { for(r=0; r<brickinfo.count.row; r++) { var brickx = (c*(brickinfo.width+brickinfo.padding))+brickinfo.offset.left; var bricky = (r*(brickinfo.height+brickinfo.padding))+brickinfo.offset...
Player paddle and controls - Game development
« previousnext » this is the
7th step out of 16 of the gamedev phaser tutorial.
... you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson0
7.html.
2D maze game with device orientation - Game development
preloader.js the preloader state takes care of loading all the assets: ball.preloader = function(game) {}; ball.preloader.prototype = { preload: function() { this.preloadbg = this.add.sprite((ball._width-29
7)*0.5, (ball._height-145)*0.5, 'preloaderbg'); this.preloadbar = this.add.sprite((ball._width-158)*0.5, (ball._height-50)*0.5, 'preloaderbar'); this.load.setpreloadsprite(this.preloadbar); this.load.image('ball', 'img/ball.png'); // ...
...in the initlevels function we have: this.leveldata = [ [ { x: 96, y: 224, t: 'w' } ], [ { x:
72, y: 320, t: 'w' }, { x: 200, y: 320, t: 'h' }, { x:
72, y: 150, t: 'w' } ], // ...
Visual typescript game engine - Game development
-run services database server (locally and leave it alive to develop process): npm run dataserver looks like this : mongod --dbpath ./server/database/data fix: "failed: address already in use" : netstat -ano | findstr :2
701
7 taskkill /pid typeyourpidhere /f also important "run visual studio code as administrator".
...is.rtcserverport = 12034; this.rtc3serverport = 12034; this.connectorport = 1234; this.domain = "192.168.0.14"; this.masterserverkey = "multi-platformer-sever1.maximum"; this.protocol = "http"; this.issecure = false; this.appuseaccountssystem = true; this.appusevideochat = true; this.databasename = "masterdatabase"; this.databaseroot = "mongodb://localhost:2
701
7"; - the running server is easy : npm run rtc with this cmd: npm run rtc we run server.js and connector.ts websocket.
Gecko FAQ - Gecko Redirect 1
as robert o'callahan notes in bug 25
70
7, "full html4/css1 compliance can't mean '100% bug free'.
... gecko runs today on win32 (windows xp service pack 2, windows vista, windows
7, windows 8, windows 8.1, windows 10), mac os x 10.5 and later, and linux.
Plug-in Development Overview - Gecko Plugin API Reference
plug-ins must support 'str#' 128 but are not required to support any of these others: str#' 12
7 can contain a list of mime type descriptions corresponding to the types in 'str#' 128 .
... starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.
7), you can get the origin of the document in a secure, convenient way by calling npn_getvalue() to retrieve the value of the variable npnvdocumentorigin.
DTLS (Datagram Transport Layer Security) - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge datagram transport layer security on wikipedia specifications rfc 634
7: datagram transport layer security version 1.2 datagram transport layer security protocol version 1.3 draft specification related specifications rfc 5
763: framework for establishing a secure real-time transport protocol (srtp) security context using dtls rfc 5
764: dtls extension to establish keys for the secure real-time transport protocol (srtp) rfc 6083: dtls for stream control transmis...
...sion protocol (sctp) rfc 8261: datagram transport layer security (dtls) encapsulation of sctp packets rfc
7350: datagram transport layer security (dtls) as transport for session traversal utilities for nat (stun) rfc
7925: tls / dtls profiles for the internet of things ...
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
rivilege('universalxpconnect universalbrowserread'); // necessary with file:///-located files trying to reach external sites if (href !== null) { var response, responsetype; var request = new xmlhttprequest(); request.open('get', href, false); request.setrequestheader('if-modified-since', 'thu, 1 jan 19
70 00:00:00 gmt'); request.setrequestheader('cache-control', 'no-cache'); if (accept) { request.setrequestheader('accept', accept); } if (acceptlanguage) { request.setrequestheader('accept-language', acceptlanguage); } switch (parse)...
...rt the encoding after receiving it (to know what the encoding was) var request2 = new xmlhttprequest(); request2.overridemimetype('text/plain; charset='+encodingtype); request2.open('get', href, false); request2.setrequestheader('if-modified-since', 'thu, 1 jan 19
70 00:00:00 gmt'); request2.setrequestheader('cache-control', 'no-cache'); request2.send(null); response = request2[responsetype]; // update the response for processing } // replace xinclude with the response as text ...
Advanced styling effects - Learn web development
irst, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.
7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
... first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #
777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,25...
Styling tables - Learn web development
of albums</th> <th scope="col">most famous song</th> </tr> </thead> <tbody> <tr> <th scope="row">buzzcocks</th> <td>19
76</td> <td>9</td> <td>ever fallen in love (with someone you shouldn't've)</td> </tr> <tr> <th scope="row">the clash</th> <td>19
76</td> <td>6</td> <td>london calling</td> </tr> ...
... some rows removed for brevity <tr> <th scope="row">the stranglers</th> <td>19
74</td> <td>1
7</td> <td>no more heroes</td> </tr> </tbody> <tfoot> <tr> <th scope="row" colspan="2">total albums</th> <td colspan="2">
77</td> </tr> </tfoot> </table> the table is nicely marked up, easily styleable, and accessible, thanks to features such as scope, <caption>, <thead>, <tbody>, etc.
Beginner's guide to media queries - Learn web development
* { box-sizing: border-box; } body { width: 90%; margin: 2em auto; font: 1em/1.3 arial, helvetica, sans-serif; } a:link, a:visited { color: #333; } nav ul, aside ul { list-style: none; padding: 0; } nav a:link, nav a:visited { background-color: rgba(20
7, 232, 220, 0.2); border: 2px solid rgb(
79, 185, 22
7); text-decoration: none; display: block; padding: 10px; color: #333; font-weight: bold; } nav a:hover { background-color: rgba(20
7, 232, 220, 0.
7); } .related { background-color: rgba(
79, 185, 22
7, 0.3); border: 1px solid rgb(
79, 185, 22
7); padding: 10px; } .sidebar { background-color: rgba(20
7, 232...
... @media screen and (min-width:
70em) { main { display: grid; grid-template-columns: 3fr 1fr; column-gap: 20px; } article { margin-bottom: 0; } footer { border-top: 1px solid #ccc; margin-top: 2em; } } open step 3 in the browser, or view the source.
Practical positioning examples - Learn web development
add the following rule underneath the rest of your css: .fake-content { background-color: #a60000; color: white; padding: 10px; height: 2000px; margin-left: 4
70px; } to start with, we give the content the same background-color, color, and padding as the info-box panels.
...add the following rule to the bottom of your css: aside { background-color: #a60000; color: white; width: 340px; height: 100%; padding: 0 20px; position: fixed; top: 0; right: -3
70px; transition: 0.6s all; } there's a lot going on here — let's discuss it bit by bit: first, we set some simple background-color and color on the info box.
create fancy boxes - Learn web development
as you will notice, color gradients are considered to be images and can be manipulated as such */ background-image: linear-gradient(1
75deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient(1
75deg, rgba(0,0,0,0) 90%, #b4b0
7f 90%), linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b0
7f 92%), linear-gradient(1
75deg, rgba(0,0,0,0) 85%, #c5a68e 85%), linear-gradient( 85deg, rgba(0,0,...
...0,0) 89%, #c5a68e 89%), linear-gradient(1
75deg, rgba(0,0,0,0) 80%, #ba9499 80%), linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%), linear-gradient(1
75deg, rgba(0,0,0,0)
75%, #9f8fa4
75%), linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), linear-gradient(1
75deg, rgba(0,0,0,0)
70%, #
74a6ae
70%), linear-gradient( 85deg, rgba(0,0,0,0) 80%, #
74a6ae 80%); } gradients can be used in some very creative ways.
How can we design for all types of users? - Learn web development
to make it easier on people's eyes, limit line width to around 60 or
70 characters.
...if you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the max-width property to allow up to
70 characters per line and no more: div.container { max-width:
70em; } alternative content for images, audio, and video websites often include stuff besides plain text.
The HTML5 input types - Learn web development
the below screenshots show a non-empty search field in firefox
71, safari 13, and chrome
79 on macos, and edge 18 and chrome
79 on windows 10.
... <label for="mydate">when are you available this summer?</label> <input type="date" name="mydate" min="2013-06-01" max="2013-08-31" step="
7" id="mydate"> browser support for date/time inputs you should be warned that the date and time widgets don't have the best browser support.
Example 3 - Learn web development
wberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #22
7755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5...
...); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, false); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { if (event.keycode === 2
7) { deactivateselect(select); } }); }); }); result ...
Example 4 - Learn web development
wberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #22
7755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5...
...iouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 2
7) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
Example 5 - Learn web development
<li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #22
7755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5...
... toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 2
7) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
How to build custom form controls - Learn web development
*/ box-shadow: 0 0 3px 1px #22
7755; } now, let's handle the list of options: /* the .select selector here helps to make we only select element inside our control.
... // we deactivate the control deactivateselect(select); }); // loose focus if the user hits `esc` select.addeventlistener('keyup', function (event) { // deactive on keyup of `esc` if (event.keycode === 2
7) { deactivateselect(select); } }); }); at that point, our control will change state according to our design, but its value doesn't get updated yet.
What’s in the head? Metadata in HTML - Learn web development
for example, you'll find this in the source code of the mdn web docs homepage: <!-- third-generation ipad with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e41620
70f4.png"> <!-- iphone with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="
72x
72" href="https://developer.cdn.mozilla.net/static/img/favicon
72.8ff9d8
7c82a0.png"> <!-- non-retina ipho...
...ne, ipod touch, and android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon5
7.a2490b9a2d
76.png"> <!-- basic favicon --> <link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf
73.png"> the comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an ipad's home screen.
Responsive images - Learn web development
the code in responsive.html looks like so: <picture> <source media="(max-width:
799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="chris standing up holding his daughter elva"> </picture> the <source> elements include a media attribute that contains a media condition — as with the first srcset example, these conditions are tests that decide which image is shown — the first one that...
...in this case, if the viewport width is
799px wide or less, the first <source> element's image will be displayed.
HTML table advanced features and accessibility - Learn web development
items sold august 2016 clothes accessories trousers skirts dresses bracelets rings belgium antwerp 56 22 43
72 23 gent 46 18 50 61 15 brussels 51 2
7 38 69 28 the netherlands amsterdam 89 34 69 85 38 utrecht 80 12 43 36 19 but what if you cannot make those visual associations?
... note: there are around 253 million people living with visual impairment according to who data in 201
7.
Handling text — strings in JavaScript - Learn web development
try the following (we are using the typeof operator to check whether the variable is a number or a string): let mydate = '19' + '6
7'; typeof mydate; if you have a numeric variable that you want to convert to a string but not change otherwise, or a string variable that you want to convert to a number but not change otherwise, you can use the following two constructs: the number object converts anything passed to it into a number, if it can.
... you can include complex expressions inside template literals, for example: let examscore = 45; let examhighestscore =
70; examreport = `you scored ${ examscore }/${ examhighestscore } (${ math.round((examscore/examhighestscore*100)) }%).
Multimedia: Images - Learn web development
previous overview: performance next media, namely images and video, account for over
70% of the bytes downloaded for the average website.
...a quality setting of
75% should yield decent results.
Deployment and next steps - Learn web development
so, after running npm run build, our generated bundle.js and bundle.css files will be more like this: 504 jul 13 02:43 bundle.css 21
782 jul 13 02:43 bundle.js try running npm run build in your app's root directory now.
...total 5 (delta 3), reused 0 (delta 0) to gitlab.com:opensas/mdn-svelte-todo.git
7dac9f3..5
725f46 master -> master whenever there's a job running gitlab will display an icon showing the process of the job.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/
76cc90c43a3
7452e8c
7f
70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/d1fa84a5a4494366b1
79c8
7395940039?version=3.23.2 summary in this article we have finished adding all the required functionality to our app, plus we've taken care of a number of accessibility and usability issues.
omni.ja (formerly omni.jar)
several unzip tools and archives (except for the latest version of
7-zip) currently cannot read omni.ja, due to the optimization that is applied to the file.
... it is suggested that windows
7 users unzip the file by renaming it to omni.zip and using windows explorer to extract all files.
Accessibility API cross-reference
input n/a hypertext link that can be on image or text link n/a link <a> <link> according to the pdf 1.
7 spec, a <link> must not be a direct child of a <toci> (table of contents item).
... landmark n/a hypertext link that can be on image or text link n/a link <a> <link> according to the pdf 1.
7 spec, a <link> must not be a direct child of a <toci> (table of contents item).
Accessibility Features in Firefox
the f
7 key toggles this feature on/off.
...the two companies anticipate that in 200
7, firefox will support topnotch screen reader accessibility on unix and linux.
CSUN Firefox Materials
the f
7 key toggles this feature on/off.
...the two companies anticipate that in 200
7, firefox will support topnotch screen reader accessibility on unix and linux.
Gecko info for Windows accessibility vendors
the domenum { navrelation_flows_to = 0x1006 }; enum { navrelation_flows_from = 0x100
7 }; these two relations allow the reading flow to break out of the normal dom flow.
... isimpledomnode to get to the isimpledomnode interface for an object, you start with an iaccessible*, and then you queryservice to the isimpledomnode*: iserviceprovider *pservprov = null; paccessible->queryinterface(iid_iserviceprovider, (void**)&pservprov); isimpledomnode *psimpledomnode; if (pservprov) { const guid refguid = {0x0c539
790, 0x12e4, 0x11cf, 0xb6, 0x61, 0x00, 0xaa, 0x00, 0x4c, 0xd6, 0xd8}; hresult result = pservprov->queryservice(refguid, iid_isimpledomnode, (void**)&psimpledomnode); if (succeeded(hresult) && psimpledomnode != null) { /* this is a mozilla node!
Mozilla's Section 508 Compliance
be customized without a mouse, all sidebar functions that come with the browser are available through other means 2) java and in-page plugins cannot be used with the keyboard, so they must not be installed for keyboard-only users additional features for the keyboard: 1) find as you type allows for quick navigation to links and convenient text searching 2) browse with caret (f
7 key toggles) allows users to select arbitrary content with the keyboard and move through content as if inside a readonly editor.
...gnopernicus support in beta no screen reader support on mac os x b) at least one mode of operation and information retrieval that does not require visual acuity greater than 20/
70 shall be provided in audio and enlarged print output working together or independently, or support for assistive technology used by people who are visually impaired shall be provided.
Theme concepts
for example, the following code, from the dynamic theme example defines the content for the day and night elements of the dynamic theme: const themes = { 'day': { images: { theme_frame: 'sun.jpg', }, colors: { frame: '#cf
723f', tab_background_text: '#111', } }, 'night': { images: { theme_frame: 'moon.jpg', }, colors: { frame: '#000', tab_background_text: '#fff', } } }; the theme.theme object is then passed to theme.update() to change the header theme, as in this code snippet from the same example: function settheme(theme) { if (currenttheme === theme) { // no po...
... so, in the single image theme example (weta_fade) could be supported in chrome using the following manifest.json file: { "manifest_version": 2, "version": "1.0", "name": "<your_theme_name>", "theme": { "images": { "theme_frame": "weta.png" }, "colors": { "frame": [ 1
73 , 1
76 , 159 ], "tab_background_text": [ 0 , 0 , 0 ] } } } also, note that chrome tiles the “theme_frame”: image from the left of the header area.
Cookies Preferences in Mozilla
network.cookie.prefsmigrated default value: false migration pref for users with older profiles (before mozilla 1.
7).
...(the old prefs are network.cookie.lifetime.enabled, network.cookie.lifetime.behavior, and network.cookie.warnaboutcookies.) true = prefs have been migrated false = migrate prefs on next startup original document information author(s): mike connor last updated date: may 22, 2004 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Creating MozSearch plugins
plugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv
7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq
7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pdq0fgwj22d2
7cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w
7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn
75d4xmavcok9armhbzaw0aecibhkalc0mdy
7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx
7ghyaaak
7aoif
7saboqcmn4ha3...
...ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq
7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mzpxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <url type="text/html" method="get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedded inside the template url.
pymake
see bug 102
7890.
...please note that python 2.
7 is strongly recommended.
Creating Custom Events That Can Pass Data
(see bug 42
753
7) requirements in order to do this you must be able to do all of the following: download mozilla source code build mozilla creating custom firefox extensions with the mozilla build system.
... #include "nsidomevent.idl" [scriptable, uuid(08bea243-8a
7b-4554-9ee9-
70d
7785d
741b)] interface nsidommyevent: nsidomevent { //put members here!
Runtime Directories
default application installation and user profile directories firefox os application directory user profile directory temporary directory windows vista/
7 c:\program files\mozilla firefox\ c:\users\<username>\appdata\roaming\mozilla\firefox\ (or %appdata%\mozilla\firefox\) c:\users\<username>\appdata\local\mozilla\firefox\ (or %localappdata%\mozilla\firefox) and c:\users\<username>\appdata\local\virtualstore\program files\mozilla firefox\ windows 2000/xp c:\program files\mozilla firefox\ c:\documents and settings\<username>\application data\mozilla\firefox\ (or %appdata%\mozilla\firefox\) c:\documents and settings\<username>\local settings\application data\mozilla\firefox\ os x /applications/firefox.app...
... ~/.mozilla/firefox/xxxxxxxx.default/ n/d thunderbird os application directory user profile directory temporary directory windows vista/
7 c:\program files\mozilla thunderbird\ c:\users\<username>\appdata\roaming\thunderbird\ (or %appdata%\thunderbird\) c:\users\<username>\appdata\local\thunderbird\ (or %localappdata%\thunderbird\) and c:\users\<username>\appdata\local\virtualstore\program files\mozilla thunderbird\ windows 2000/xp c:\program files\mozilla thunderbird\ c:\documents and settings\<username>\application data\thunderbird\ (or %appdata%\thunderbird\) c:\do...
mach
mach also requires python 2.
7.
... mach itself is python 3 compliant, but modules used by mach likely are not python 3 compliant - so stick to python 2.
7.
Displaying Places information using views
warning: until bug 4
76952 is fixed, you may experience problems using some of these methods in conjunction with the place attribute and property.
... warning: until bug 4
76952 is fixed, you may experience problems using some of these properties in conjunction with the place attribute and property.
Multiple Firefox profiles
windows vista/
7 click the start button.
... here is a complete example terminal command from steps 2-3: /applications/firefox.app/contents/macos/firefox -profile /users/suzie/library/application\ support/firefox/profiles/r99d1z
7c.default if the profile manager window does not open, firefox may have been running in the background, even though it was not visible.
Limitations of chrome scripts
note that from firefox 4
7 onwards, unsafe cpow usage is no longer permitted in browser code.
... there is an outstanding bug (bug 110882
7) to implement a shim here that will make notificationcallbacks a cpow for the objects in the content process.
Firefox UI considerations for web developers
apple-touch-icon and apple-touch-icon-precomposed icons with no size attribute are assumed to be the standard classic iphone size of 5
7x5
7 pixels.
... hootsuite the html on hootsuite's site looks roughly like this: <link rel="shortcut icon" href="/dist/images/icons/favicon.ico"> <link rel="apple-touch-icon-precomposed" href="/dist/images/icons/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" sizes="
72x
72" href="/dist/images/icons/apple-touch-icon_
72.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/dist/images/icons/apple-touch-icon@2x.png"> firefox starts by looking for an svg icon; there is none.
Browser API
it currently works in (privileged) chrome code on firefox desktop (version 4
7 and above).
...see bug 15030
70 for more details.
CSS <display-xul> component
olete since gecko 62 xul grid group -moz-grid-line obsolete since gecko 62 xul grid line -moz-stack obsolete since gecko 62 xul stack -moz-inline-stack obsolete since gecko 62 xul inline stack -moz-deck obsolete since gecko 62 xul deck -moz-popup obsolete since gecko 62 xul popup all xul display values, with the exception of -moz-box and -moz-inline-box, have been removed in bug 12885
72.
... the -moz-box and -moz-inline-box values will be removed later in bug 8
792
75.
Roll your own browser: An embedding how-to
(mozilla blurb) bradsoft's topstyle css builder: implements an internal browser using mozilla activex embedding control.obsolete since gecko
7.0 nxzilla: a set of libraries that allow mozilla to be used with a nanox server.
... activex control: an activex control allowing for embedding the gecko layout engine.obsolete since gecko
7.0 llmozlib & ubrowser: a static library that allows you to embed gecko and render pages to memory.
Gecko SDK
get the sdk updates there is no need to download or rebuild the gecko sdk corresponding to security updates of mozilla (e.g., mozilla 1.
7.3) since the headers and glue libs in the gecko sdk are usually not changed as a result of security updates.
...ikely that you will receive a strange error when running the tool that looks something along the lines of this: dyld: library not loaded: /opt/local/lib/libintl.3.dylib referenced from: /users/varmaa/xulrunner-sdk/bin/./xpidl reason: image not found trace/bpt trap unfortunately, this is caused by a problem with the sdk build process which cannot currently be resolved (see bugzilla bug #4302
74).
How to get a stacktrace with WinDbg
faq q: i am running windows
7 (32-bit or 64-bit) and i see an exception in the windbg command window that says 'ntdll32!ldrpdodebuggerbreak+0x2c' or 'ntdll32!ldrpdodebuggerbreak+0x30'.
... q: the first four frames of my stack trace look like this: 0012fe20
7c90e89a ntdll!kifastsystemcallret 0012fe24
7c81cd96 ntdll!zwterminateprocess+0xc 0012ff20
7c81cdee kernel32!_exitprocess+0x62 0012ff34 60001
79e kernel32!exitprocess+0x14 this looks wrong to me?!
IME handling guide
android widget still does not use texteventdispatcher to dispatch widgetcompositionevents, see bug 113
756
7.
...therefore, tsftextstore will use insertion point relative query for them bug 128615
7.
JNI.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/jni.jsm"); this module was available in firefox since version 1
7.
...h: 5 } jni.loadclass(my_jenv, '[' + sig.int); var intarray = jni.classes.int.array; // object { js#obj: cdata, js#proto: function (), __cast__: function (), new: function () } var ia = intarray.new(5); // object { js#obj: cdata, length: 5 } ia.get(0); // 0 ia.get(1); // 0 ia.get(2); // 0 ia.get(3); // 0 ia.get(4); // 0 ia.set(2, 10); // void ia.get(2); // 10 ia.setelements(3, [50,
75]); // void ia.get(0); // 0 ia.get(1); // 0 ia.get(2); // 10 ia.get(3); // 50 ia.get(4); //
75 } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } casting this example shows how to cast, the casting happens at jni.classes.android.view.windowmanager.__cast__(wm) below: function main() { var my_jenv; try { my_jenv = jni.getforthread(); var sig = {...
Examples
+ uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { return 'i didnt do a promise.resolve so this will not understand that mypromise is a promise'; } // creates this error: /* exception: mypromise.then is not a function @scratchpad/5:8:1 wca_evalwithdebugger@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:1069:
7 wca_onevaluatejs@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:
734:9 dsc_onpacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1098:9 ldt_send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transport.js:2
79:11 makeinfallible/<@resour...
...ce://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/devtoolsutils.js:84:
7 */ intermediate of user defined promise function 1 components.utils.import("resource://gre/modules/promise.jsm"); // this function creates and returns a new promise.
WebRequest.jsm
see bug 11
76092.
... this code changes the user agent header so the browser identifies itself as ie 11, but only when visiting pages under "http://useragentstring.com/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("http://useragentstring.com/*"); let ua = "mozilla/5.0 (windows nt 6.1; wow64; trident/
7.0; as; rv:11.0) like gecko"; webrequest.onbeforesendheaders.addlistener(changeuseragent, { urls: pattern }, ["blocking", "requestheaders"]); function changeuseragent(e) { for (let header of e.requestheaders) { if (hea...
Encodings for localization files
aller/installer.inc utf-8 toolkit/installer/unix/install.it utf-8 native windows encodings the following table lists native windows encodings, and the win_installer_charset and charset= values for each: encoding name win_installer_charset (charset.mk) charset= (windows/install.it) ansi_charset cp1252 0 baltic_charset cp125
7 186 chinesebig5_charset cp950 136 easteurope_charset cp1250 238 gb2312_charset cp936 134 greek_charset cp1253 161 hangul_charset cp949 129 russian_charset cp1251 204 shiftjis_charset cp932 128 turkish_charset cp1254 162 vietnamese_charset cp1258 163 mi...
...ddle east language editions of windows: arabic_charset cp1256 1
78 hebrew_charset cp1255 1
77 thai language editions of windows: thai_charset cp8
74 222 ...
Localizing with Koala
g the following commands: c:\users\stas> cd c:\mozilla\l10n\application\firefox c:\mozilla\l10n\application\firefox> rmdir 3.6 c:\mozilla\l10n\application\firefox> hg clone http://hg.mozilla.org/releases/mozilla-1.9.2 3.6 requesting all changes adding changesets adding manifests adding file changes added 33099 changesets with 158636 changes to 50664 files (+9 heads) updating working directory 4035
7 files updated, 0 files merged, 0 files removed, 0 files unresolved configure the locale locale id: x-testing (put your locale's code) version: 3.6 location: choose the folder where you want to keep the localized files or leave empty for now check "mercurial" if you wish to use mercurial to keep the revision history of your files (very recommended) existing localizations: url: if you're edit...
...if you run "hg log" however, you will see you first commit in the repository's revision history: c:\mozilla\l10n\locale\x-testing\3.6> hg log changeset: 0:
7c543e8f3a6a tag: tip user: stas malolepszy <stas@mozilla.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings congratulations!
Localizing with Mozilla Translator
since it is written in java, any platform that supports java 1.
7 or above supports mozillatranslator also.
... if you decide to use mozillatranslator, be sure you have java 1.
7 or above installed on your system.
Localization prerequisites
perl 5.6 or higher older perl versions may work if you upgrade file::spec to version 0.8 gnu make 3.
79.1 or higher.
...don’t bother the version string here, as long as you’re 3.
79.1 or better.
Release phase
here's how that's done: run this command to see recent commits in your local clone: $ hg log -l 3 you should a list of the most recent commits, similar to this one: changeset: 0:
7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings now run the hg outgoing command to compare the local repository on your machine with the remote repository on hg.mozilla.org.
...the output will look something like this: comparing with ssh://hg.mozilla.org/releases/l10n-central/x-testing searching for changes changeset: 0:
7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings make sure this output is accurate before continuing.
Uplifting a localization from Central to Aurora
this looks something like searching for changes adding changesets adding manifests adding file changes added 22 changesets with 23 changes to 46 files (+1 heads) (run 'hg heads' to see heads, 'hg merge' to merge) ok, let's make sure we're not talking relbranches: hg heads --template '{node} {branches}\n' this is printing something like 5131e14
7fa50c28ec858c
7d9fd1ba201ea2a433b 4da525ed
77699
794c56081
791bd46cc85983f6f8 9bc
7e6c58fc091c8cd0e8d9e1dbc
7e6f592
772a
7 gecko20b12_2011022218_relbranch 230e99fada602842d9630e6
730
77ef9f1ab3424
7 gecko20b12pre_20110216_relbranch 41a435
7884d
7bcc50e69c
71014124d3af2482afe comm20b11_20110203_relbranch 2ec6ad14e
7168ebeb999b1e8ae10632ae4c9df23 gecko20b11_2011020209_relbranch d68e64
7ac3c0fee
709c13abb...
...0f03fac24a1a5d29 gecko20b11pre_20110126_relbranch
7ff3
7dc683
7669363a51ad3fd28
74ac845d312d5 gecko20b10_2011012115_relbranch 6c31fe9bc065a86aea2223ba48698f18ae
7563ad gecko20b9_2011011018_relbranch here you can see that there are two changesets without a branch.
Extras
gb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="
70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="
70" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <mo>(</mo> <mtable> <mtr> <mtd><mi>cos</mi><mi>θ</mi></mtd> <mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd> </mtr> <mtr> <mtd><mi>sin</mi><mi>θ</mi></mtd> <mtd><mi>cos</mi><mi>θ</mi></mtd> </mtr> </mtable> <mo>)<...
.../mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,2
7 152,42 203,56 239,25
7 2
75,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.
75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mro...
Fonts for Mozilla's MathML engine
note:cambria math is installed by default on windows
7 and later versions and should ensure relatively good mathml rendering.
...if you have a developer account, these are problems 16841023 and 1
7021145.
Updates
may 8, 200
7 mozilla ceo speaks out on the future of firefox: the complete 8,000 word interview.
...mozilla 1.0 features full support for html 4.0, xml 1.0, resource description framework (rdf), cascading style sheets level 1 (css1), and the w3c document object model level 1 (dom1) [...] as well as support for display of mathematical equations using mathml." december
7, 2001 status report october 2000 the first international mathml conference april 14, 2000 status report february 12, 2000 mathml-enabled m13 builds for win32 september 21, 1999 mathml has landed.
Power profiling overview
core i3/i5/i
7) have one package.
...intel maps these to processor-specific states such as c0, c1, c2, c6 and c
7.
Profiling with Instruments
you also need the fix to bug
71942
7 the dtperformancesession api can be used to control profiling from applications like the old chud api we use in shark builds.
... bug 66
7036 system trace might be useful.
Profiling with the Firefox Profiler
for example:in the results above we can see that we're spending ~28
7 milliseconds in startup::xre_initchildprocess, 194 ms of which are spent in pvsync::msg_notify and all child functions that it calls.
... some more tips and answers to common questions are available in a mid-201
7 faq document.
Phishing: a short definition
a study on the efficacy of security indicators, presented at the 200
7 ieee symposium on security and privacy, suggests that the above countermeasures fail to protect the majority of users.
...the ss
7 telephony system is vulnerable, making eavesdropping, or rerouting text messages quite trivial.
accessibility.tabfocus
type:integer default value:
7 (windows and linux); 2 (mac os x) exists by default: no application support:gecko 1.
7 status: active introduction: bugs: bug 140612 values 1 give focus only to text fields (default on mac osx) 2 give focus to all form elements except text fields.
...the value
7 (give focus to all elements) is the default on windows and linux.
browser.altClickSave
type:boolean default value: false exists by default: yes application support:firefox 13.0 status: active; last updated 2012-03-19 introduction: pushed to nightly on 2012-03-02 bugs: bug
713052 values true clicking a link while holding the alt key starts the download of that link.
... false (default) no action triggered (see bug
736985).
mail.tabs.drawInTitlebar
starting in thunderbird 1
7.0, the tabs are drawn in the title bar.
... type:boolean default value: true exists by default: yes application support:thunderbird 1
7.0 status: active; last updated 2012-09-1
7 introduction: pushed to daily on 2012-08-08 bugs: bug
771816 values true (default) the tabs are drawn in the title bar of the mail program.
ui.alertNotificationOrigin
type:integer default value:dependent on position of taskbar or equivalent exists by default: no application support: gecko 1.8.1.2 (firefox 2.0.0.2 / thunderbird 2.0.0.4 / seamonkey 1.1) status: active; last updated 2012-02-22 introduction: pushed to nightly on 200
7-01-04 bugs: bug 13352
7 values 0 bottom right corner, vertical slide-in from the bottom 1 bottom right corner, horizontal slide-in from the right 2 bottom left corner, vertical slide-in from the bottom 3 bottom left corner, horizontal slide-in from the left 4 top right corner, vertical slide-in from the top 5 top right corner, horizontal slide-in from the right 6 top left corne...
...r, vertical slide-in from the top
7 top left corner, horizontal slide-in from the left ...
L20n HTML Bindings
it doesn't have any specific locale code (internally, it's called i-default in compliance to rfc 22
77).
... <script type="application/l20n" src="../locales/strings.l20n"></script> note that you currently cannot use the manifest file and manually add resources via script tags at the same time (bug 9236
70).
AsyncTestUtils extended framework
for example, {weeks: 2, days: 3} would be a message sent exactly 1
7 days ago.
...(we will probably auto-correct that in the future.) if your set definition was {count: 3, age: {days:
7}, age_incr: {days: -1}}, then you would generate messages from
7, 6, and 5 days ago.
Leak And Bloat Tests
f("mail.startup.enabledmailcheckonce", true); user_pref("mailnews.start_page_override.mstone", "1.9pre"); user_pref("mail.shell.checkdefaultclient", false); // ensure os x and outlook/oe books are disabled user_pref("ldap_2.servers.osx.position", 0); user_pref("ldap_2.servers.oe.position", 0); preferences in generated profile, but not set: user_pref("mail.root.none", "/home/moztest/.thunderbird/t
7i1txfw.minimum/mail"); user_pref("mail.root.pop3", "/home/moztest/.thunderbird/t
7i1txfw.minimum/mail"); user_pref("mail.server.server1.directory", "/home/moztest/.thunderbird/t
7i1txfw.minimum/mail/local folders"); user_pref("mail.server.server2.directory", "/home/moztest/.thunderbird/t
7i1txfw.minimum/mail/tinderbox"); user_pref("mail.attachment.store.version", 1); user_pref("mail.folder.views.vers...
...ion", 1); user_pref("mail.spam.version", 1); user_pref("mailnews.quotingprefs.version", 1); user_pref("mailnews.ui.threadpane.version", 6); changes to leak and bloat tests date and time (pst) description approx effect on numbers pre dec 2008 initial version - 2008/12/0
7 11:20 bug 463594 disabled os x and outlook address books via the preference settings mac lk -56.2kb.
PR_Open
name value description pr_irwxu 0
700 read, write, execute/search by owner.
... pr_irwxg 00
70 read, write, execute/search by group pr_irgrp 0040 read permission, group pr_iwgrp 0020 write permission, group pr_ixgrp 0010 execute/search permission, group pr_irwxo 000
7 read, write, execute/search by others pr_iroth 0004 read permission, others pr_iwoth 0002 write permission, others pr_ixoth 0001 execute/search permission, others returns the function returns one of the following values: if the file is successfully op...
Running NSPR tests
sts/runtests.sh in the directory where the test program binaries reside, for example, cvs -q co -r nspr_4_6_6_rtm mozilla/nsprpub mkdir linux.debug cd linux.debug ../mozilla/nsprpub/configure gmake cd pr/tests gmake ../../../mozilla/nsprpub/pr/tests/runtests.sh the output of the test suite looks like this: nspr test results - tests begin mon mar 12 11:44:41 pdt 200
7 nspr_test_logfile /dev/null test result accept passed acceptread passed acceptreademu passed affinity passed alarm passed anonfm passed atomic passed attach passed bigfile passed cleanup ...
... timetest passed tpd passed udpsrv passed vercheck passed version passed writev passed xnotify passed zerolen passed end mon mar 12 11:55:4
7 pdt 200
7 how to determine if the test suite passed if all the tests reported passed as the results, the test suite passed.
Cryptography functions
3.2 and later pk11_signaturelen mxr 3.2 and later pk11_symkeyfromhandle mxr 3.2 and later pk11_tokenexists mxr 3.2 and later pk11_tokenkeygen mxr 3.6 and later pk11_tokenkeygenwithflags mxr 3.10.2 and later pk11_tokenrefresh mxr 3.
7.1 and later pk11_traversecertsfornicknameinslot mxr 3.2 and later pk11_traversecertsforsubjectinslot mxr 3.2 and later pk11_traverseslotcerts mxr 3.4 and later pk11_unlinkgenericobject mxr 3.9.2 and later pk11_unwrapsymkey mxr 3.2 and later pk...
... 3.9 and later pk11_updateslotattribute mxr 3.8 and later pk11_userenableslot mxr 3.8 and later pk11_userdisableslot mxr 3.8 and later pk11_verify mxr 3.2 and later pk11_verifykeyok mxr 3.2 and later pk11_waitfortokenevent mxr 3.
7 and later pk11_wrapsymkey mxr 3.2 and later pk11_writerawattribute mxr 3.12 and later pk11sdr_encrypt mxr 3.2 and later pk11sdr_decrypt mxr 3.2 and later sec_deletepermcertificate mxr 3.2 and later sec_deletepermcrl mxr 3.2 and la...
NSS FAQ
nss supports ssl v2 and v3, tls, pkcs #5, pkcs #
7, pkcs #11, pkcs #12, s/mime, and x.509 v3 certificates.
...netscape personal security manager ships with netscape 6 and the gateway connected touch pad with instant aol, and is also available for use with communicator 4.
7x.
JSS FAQ
check http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/ssl/sslsocket.java#
730 how can i debug my ssl connection?
... the best way to do this is with the pkcs #
7 signeddata type.
NSS Key Log Format
(see bug 118865
7.) notably, debian does not have this option enabled, see debian bug 842292.
... the tls 1.3 lines are supported since nss 3.34 (bug 128
7711) and wireshark 2.4 (early_exporter_secret exists since nss 3.35, bug 141
7331).
NSS 3.12.5 release_notes
bug 510435: remove unused make variable dso_ldflags bug 510436: add macros for build numbers (4th component of version number) to nssutil.h bug 51122
7: firefox 3.0.13 fails to compile on freebsd/powerpc bug 511312: nss fails to load softoken, looking for sqlite3.dll bug 511
781: add new tls 1.2 cipher suites implemented in windows
7 to ssltap bug 516101: if pk11_importcert fails, it leaves the certificate undiscoverable by cert_pkixverifycert bug 518443: pk11_importandreturnprivatekey leaks an arena bug 518446: pk11_derencodepublickey leaks...
... a certsubjectpublickeyinfo bug 51845
7: seckey_encodedersubjectpublickeyinfo and pk11_derencodepublickey are duplicate bug 522510: add deprecated comments to key.h and pk11func.h bug 522580: nss uses port_memcmp for comparing secret data.
NSS 3.14.3 release notes
bug 840
714 - "certutil -a" was not correctly producing ascii output as requested.
... bug 83
7799 - nss 3.14.2 broke compilation with older versions of sqlite that lacked the sqlite_fcntl_tempfilename file control.
NSS 3.19.2.1 release notes
bug 1192028 (cve-2015-
7181) and bug 1202868 (cve-2015-
7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data.
... bug 120515
7 (nspr, cve-2015-
7183): a logic bug in the handling of large allocations would allow exceptionally large allocations to be reported as successful, without actually allocating the requested memory.
NSS 3.19.4 release notes
bug 1192028 (cve-2015-
7181) and bug 1202868 (cve-2015-
7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data.
... bug 120515
7 (nspr, cve-2015-
7183): a logic bug in the handling of large allocations would allow exceptionally large allocations to be reported as successful, without actually allocating the requested memory.
NSS 3.19 release notes
nss 3.19 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_rtm/src/ security fixes in nss 3.19 bug 1086145 / cve-2015-2
721 - fixed a bug related to the ordering of tls handshake messages.
... nss now more strictly validates tls extensions and will fail a handshake that contains malformed extensions (bug
753136).
NSS 3.20.1 release notes
bug 1192028 (cve-2015-
7181) and bug 1202868 (cve-2015-
7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data.
... bug 120515
7 (nspr, cve-2015-
7183): a logic bug in the handling of large allocations would allow exceptionally large allocations to be reported as successful, without actually allocating the requested memory.
NSS 3.20 release notes
the server side implementation of the tls does not support session tickets while using a dhe ciphersuite (see bug 11
746
77).
... nss embeds fixed dhe parameters sized 2048, 30
72, 4096, 6144 and 8192 bits, which were copied from version 08 of the internet-draft "negotiated finite field diffie-hellman ephemeral parameters for tls", appendix a.
NSS 3.28 release notes
this includes a number of improvements to tls 1.3: the signed certificate timestamp, used in certificate transparency, is supported in tls 1.3 (bug 1252
745).
... nss includes support for the x25519 key exchange algorithm (bug 95
7105), which is supported and enabled by default in all versions of tls.
NSS 3.33 release notes
nss 3.33 requires netscape portable runtime (nspr) 4.1
7, or newer.
... fixes cve-201
7-
7805, a potential use-after-free in tls 1.2 server, when verifying client authentication.
NSS 3.39 release notes
the following ca certificates were added: ou = globalsign root ca - r6 sha-256 fingerprint: 2cabeafe3
7d06ca22aba
7391c0033d25982952c45364
7349
763a3ab5ad6ccf69 cn = oiste wisekey global root gc ca sha-256 fingerprint: 8560f91c3624daba95
70b5fea0dbe36ff11a8323be9486854fb3f34a55
71198d the following ca certificate was removed: cn = comsign sha-256 fingerprint: ae445
7b40d9eda966
77b0d3c92d5
7b51
77abd
7ac103
7958356d1e094518be5f2 the following...
... ca certificates had the websites trust bit disabled: cn = certplus root ca g1 sha-256 fingerprint: 152a402bfcdf2cd548054d22
75b39c
7fca3ec09
780
78b0f0ea
76e561a6c
7433e cn = certplus root ca g2 sha-256 fingerprint: 6cc05041e6445e
74696c4cfbc9f80f543b
7eabbb44b4ce6f
78
7c6a99
71c42f1
7 cn = opentrust root ca g1 sha-256 fingerprint: 56c
77128d98c18d91b4cfdffbc25ee9103d4
758ea2abad826a90f345
7d460eb4 cn = opentrust root ca g2 sha-256 fingerprint: 2
7995829fe6a
7515c1bfe848f9c4
761db16c22592925
7bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-256 fingerprint: b
7c36231
706e810
78c36
7cb896198f1e3208dd926949dd8f5
709a410f
75b6292 bugs fixed in nss 3.39 bug 1483128 - nss responded to an sslv2-com...
NSS 3.42 release notes
s 3.42 new functionality bug 818686 - support xdg basedir specification new functions none notable changes in nss 3.42 the following ca certificates were added: none the following ca certificates were removed: none added support for some of the testcases from the wycheproof project: bug 1508666 - added aes-gcm test cases bug 15086
73 - added chacha20-poly1305 test cases bug 1514999 - added the curve25519 test cases thanks to jonas allmann for adapting these tests.
... bugs fixed in nss 3.42 bug 1490006 - reject invalid ch.legacy_version in tls 1.3 bug 150
7135 and bug 150
71
74 - add additional null checks to several cms functions to fix a rare cms crash.
NSS 3.43 release notes
note that while the mechanism is present, post-handshake authentication is currently not tls 1.3 compliant due to bug 1532312 notable changes in nss 3.43 the following ca certificates were added: cn = emsign root ca - g1 sha-256 fingerprint: 40f6af0346a99aa1cd1d555a4e9cce62c
7f9634603ee406615833dc8c8d0036
7 cn = emsign ecc root ca - g3 sha-256 fingerprint: 86a1ecba089c4a8d3bbe2
734c612ba341d813e043cf9e8a862cd5c5
7a36bbe6b cn = emsign root ca - c1 sha-256 fingerprint: 125609aa301da0a249b9
7a8239cb6a34216f44dcac9f3954b14292f2e8c8608f cn = emsign ecc root ca - c3 sha-256 fingerprint: bc4d809b15189d
78db3e1d8cf4f9
726a
795da1643ca5f1358e1...
...ddb0edc0d
7eb3 cn = hongkong post root ca 3 sha-256 fingerprint: 5a2fc03f0c83b090bbfa40604b0988446c
7636183df9846e1
7101a44
7fb8efd6 the following ca certificates were removed: none bugs fixed in nss 3.43 bug 1528669 and bug 1529308 - improve gyp build system handling bug 1529950 and bug 15211
74 - improve nss s/mime tests for thunderbird bug 1530134 - if docker isn't installed, try running a local clang-format as a fallback bug 153126
7 - enable fips mode automatically if the system fips mode flag is set bug 1528262 - add a -j option to the strsclnt command to specify sigschemes bug 1513909 - add manual for nss-policy-check bug 15310
74 - fix a deref after a null check in seckey_setpublicvalue bug 151
7714 - properly handle esni with hrr bug 1529813 - ...
NSS 3.44 release notes
bugs fixed in nss 3.44 1501542 - implement checkarmsupport for android 1531244 - use __builtin_bswap64 in crypto_primitives.h 1533216 - cert_decodecertpackage() crash with netscape certificate sequences 1533616 - sdb_getattributevaluenolock should make at most one sql query, rather than one for each attribute 1531236 - provide accessor for certcertificate.dercert 1536
734 - lib/freebl/crypto_primitives.c assumes a big endian machine 1532384 - in nss test certificates, use @example.com (not @bogus.com) 15384
79 - post-handshake messages after async server authentication break when using record layer separation 15215
78 - x25519 support in pk11pars.c 1540205 - freebl build fails with -dnss_disable_chachapoly 1532312 - post-handshake auth doesn't interoperate wi...
...th openssl 1542
741 - certutil -f crashes with segmentation fault 1546925 - allow preceding text in try comment 1534468 - expose chacha20 primitive 1418944 - quote cc/cxx variables passed to nspr 1543545 - allow to build nss as a static library 148
759
7 - early data that arrives before the handshake completes can be read afterwards 1548398 - freebl_gtest not building on linux/mac 1548
722 - fix some coverity warnings 1540652 - softoken/sdb.c: logically dead code 1549413 - android log lib is not included in build 153
792
7 - ipsec usage is too restrictive for existing deployments 1549608 - signature fails with dbm disabled 1549848 - allow building nss for ios using gyp 154984
7 - nss's sqlite compilation warnings make the build fail on ios 1550041 - freebl not building on ios simula...
NSS 3.49 release notes
bug 1606025 - remove -wmaybe-uninitialized warning in sslsnce.c bug 1606119 - fix ppc hw crypto build failure bug 1605545 - memory leak in pk11install_platform_generate bug 1602288 - fix build failure due to missing posix signal.h bug 1588
714 - implement checkarmsupport for win64/aarch64 bug 1585189 - nss database uses 3des instead of aes to encrypt db entries bug 160325
7 - fix ubsan issue in softoken ckm_nss_chacha20_ctr initialization bug 1590001 - additional hrr tests (cve-2019-1
7023) bug 1600144 - treat clienthello with message_seq of 1 as a second clienthello bug 160302
7 - test that esni is regenerated after helloretryrequ...
...est bug 159316
7 - intermittent mis-reporting potential security risk sec_error_unknown_issuer bug 1535
78
7 - fix automation/release/nss-release-helper.py on macos bug 1594933 - disable building dbm by default bug 1562548 - improve gcm perfomance on aarch32 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.51 release notes
bug 1611209 - correct swapped pkcs11 values of ckm_aes_cmac and ckm_aes_cmac_general bug 1612259 - complete integration of wycheproof ecdh test cases bug 1614183 - check if ppc __has_include(<sys/auxv.h>) bug 1614
786 - fix a compilation error for ‘getfipsenv’ "defined but not used" bug 1615208 - send dtls version numbers in dtls 1.3 supported_versions extension to avoid an incompatibility.
... bug 1538980 - secu_readderfromfile calls strstr on a string that isn't guaranteed to be null-terminated bug 156133
7 - correct a warning for comparison of integers of different signs: 'int' and 'unsigned long' in security/nss/lib/freebl/ecl/ecp_25519.c:88 bug 1609
751 - add test for mp_int clamping bug 1582169 - don't attempt to read the fips_enabled flag on the machine unless nss was built with fips enabled bug 1431940 - fix a null pointer dereference in blake2b_update bug 161
738
7 - fix compiler warning in secsign.c bug 1618400 - fix a openbsd/arm64 compilation error: unused variable 'getauxval' bug 161068
7 - fix a crash on unaligned cmaccontext.aes.keyschedule when using aes-ni intrinsics this bugzilla query returns all the bugs fixed in nss 3.51: https://bugzilla.mozilla.org...
NSS 3.53 release notes
nss 3.53 will be a long-term support release, supporting firefox
78 esr.
...vsx vector instructions bug 1639033 - fix various compile warnings in nss bug 1640041 - fix a null pointer in security/nss/lib/ssl/sslencode.c:6
7 bug 1640042 - fix a null pointer in security/nss/lib/ssl/sslsock.c:4460 bug 1638289 - avoid multiple definitions of sha{256,384,512}_* symbols when linking libfreeblpriv3.so in firefox on ppc64le bug 1636389 - relocate deprecated seed algorithm bug 163
7083 - lib/ckfw: no such file or directory.
NSS Sample Code Sample1
//
7.
... rv = getprivatekey(&prvkey); if (rv == 0 && prvkey) goto done; rv = 0; // these could be parameters to the init function rsaparams.keysizeinbits = 1024; rsaparams.pe = 6553
7; slot = pk11_getinternalkeyslot(); if (!slot) { rv = 1; goto done; } prvkey = pk11_generatekeypair(slot, ckm_rsa_pkcs_key_pair_gen, &rsaparams, &pubkey, pr_true, pr_true, 0); if (!prvkey) { rv = 1; goto done; } // set the nickname on the private key so that it // can be found later.
nss tech note1
it is specified in the upper 2 tag bits (number 6 and
7).
...see bug 1
75163 for more information about the reason for this recommendation.
nss tech note2
yc.rr.com [20] 1024[805ef10]: cka_token = ck_true [1] 1024[805ef10]: cka_class = cko_certificate [4] 1024[805ef10]: rv = 0x0 1024[805ef10]: c_findobjects 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: phobject = 0x806d810 1024[805ef10]: ulmaxobjectcount = 16 1024[805ef10]: pulobjectcount = 0xbffff38c 1024[805ef10]: *pulobjectcount = 0x1 1024[805ef10]: phobject[0] = 0xf645
7d04 1024[805ef10]: rv = 0x0 1024[805ef10]: c_findobjectsfinal 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getattributevalue 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: hobject = 0xf645
7d04 1024[805ef10]: ptemplate = 0xbffff2d0 1024[805ef10]: ulcount = 2 1024[805ef10]: cka_token = 0 [1] 1024[805ef10]: cka_label = 0 [20] 1024[805ef10]: ...
...rv = 0x0 1024[805ef10]: c_getattributevalue 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: hobject = 0xf645
7d04 1024[805ef10]: ptemplate = 0xbffff2d0 1024[805ef10]: ulcount = 2 1024[805ef10]: cka_token = ck_true [1] 1024[805ef10]: cka_label = localhost.nyc.rr.com [20] 1024[805ef10]: rv = 0x0 4.
Overview of NSS
pkcs #
7.
...rsa standard that governs selected attribute types, including those used with pkcs #
7, pkcs #8, and pkcs #10.
NSS tools : crlutil
please contribute to the initial review in mozilla nss bug 8364
77[1] description the certificate revocation list (crl) management tool, crlutil, is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl.
...mozilla nss bug 8364
77 - https://bugzilla.mozilla.org/show_bug.cgi?id=8364
77 visible links 1.
OLD SSL Reference
nss_shutdown deprecated functions ssl_enabledefault ssl_enable ssl_enablecipher ssl_setpolicy ssl_redohandshake chapter 5 certificate functions this chapter describes the functions and related types used to work with a certificate database such as the cert
7.db database provided with communicator.
... seckey_getdefaultkeydb seckey_destroyprivatekey chapter
7 pkcs #11 functions this chapter describes the core pkcs #11 functions that an application needs for communicating with cryptographic modules.
SSL functions
s_setexportpolicy mxr 3.2 and later nss_setfrancepolicy mxr 3.2 and later nssssl_versioncheck mxr 3.2.1 and later ssl_authcertificate mxr 3.2 and later ssl_authcertificatehook mxr 3.2 and later ssl_badcerthook mxr 3.2 and later ssl_certdbhandleset mxr 3.2 and later ssl_canbypass mxr 3.11.
7 and later ssl_cipherpolicyget mxr 3.2 and later ssl_cipherpolicyset mxr 3.2 and later ssl_cipherprefget mxr 3.2 and later ssl_cipherprefgetdefault mxr 3.2 and later ssl_cipherprefset mxr 3.2 and later ssl_cipherprefsetdefault mxr 3.2 and later ssl_clearsessioncache mxr 3.2 and later s...
...l_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelocks mxr 3.4 and later ssl_setpkcs11pinarg mxr 3.2 and later ssl_setsockpeerid mxr 3.2 and later ssl_seturl mxr 3.2 and later ssl_shutdownserversessionidcache mxr 3.
7.4 and later ...
S/MIME functions
3.4.1 and later nss_cmsmessage_issigned mxr 3.4 and later nss_cmsrecipientinfo_create mxr 3.2 and later nss_cmsrecipientinfo_createfromder mxr 3.8 and later nss_cmsrecipientinfo_createnew mxr 3.8 and later nss_cmsrecipientinfo_createwithsubjkeyid mxr 3.
7 and later nss_cmsrecipientinfo_createwithsubjkeyidfromcert mxr 3.
7 and later nss_cmsrecipientinfo_destroy mxr 3.2 and later nss_cmsrecipientinfo_encode mxr 3.8 and later nss_cmsrecipientinfo_getcertandkey mxr 3.8 and later nss_cmsrecipientinfo_unwrapbulkkey mxr ...
... 3.
7.2 and later nss_cmsrecipientinfo_wrapbulkkey mxr 3.
7.2 and later nss_cmssigneddata_addcertchain mxr 3.2 and later nss_cmssigneddata_addcertlist mxr 3.2 and later nss_cmssigneddata_addcertificate mxr 3.2 and later nss_cmssigneddata_adddigest mxr 3.2 and later nss_cmssigneddata_addsignerinfo mxr 3.2 and later nss_cmssigneddata_create mxr 3.2 and later nss_cmssigneddata_createcertsonly mxr 3.2 and later nss_cmssigneddata_destroy mxr 3.2 and later nss_cmssigneddata_getcontentinfo mxr 3.2 and later ...
NSS tools : signtool
-d certdir specifies your certificate database directory; that is, the directory in which you placed your key3.db and cert
7.db files.
... expires: tue may 19, 1998 test object signing cert issued by: test object signing cert (signtool 1.0 testing certificate (96018
7691)) expires: sun may 1
7, 1998 --------------------------------------- for a list including cas, use the -l option.
The Necko HTTP module
rfc 261
7 for the http/1.1 basic and digest authentication specifications.
... original document information last updated date: may 12, 2003 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details ...
Rhino community
the mozilla.dev.tech.js-engine newsgroup answers questions about the c implementation of javascript, and was also used for answering questions about rhino until september 2
7, 200
7.
... to view archived messages earlier than september 2
7, 200
7, try google group for the earlier newsgroup.
Rhino downloads archive
release release date change log download link rhino 1.
7r4 2012-06-18 new in rhino 1.
7r4 rhino1_
7r4.zip rhino 1.
7r3 2011-05-09 new in rhino 1.
7r3 rhino1_
7r3.zip rhino 1.
7r2 2009-03-22 new in rhino 1.
7r2 rhino1_
7r2.zip rhino 1.
7r1 2008-03-06 new in rhino 1.
7r1 rhino1_
7r1.zip rhino 1.6r
7 200
7-08-20 new in rhino 1.6r
7 rhino1_6r
7.zip rhino 1.6r6 200
7-0
7-30 new in rhino 1.6r6 rhino1_6r6.zip rhino 1.6r5 2006-11-19 same code as 1.6r4, but relicensed under mpl/gpl.
... rhino1_6r5.zip rhino 1.6r4 2006-09-10 bug 3439
76 rhino1_6r4.zip rhino 1.6r3 2006-0
7-24 changes in 1.6r3 rhino1_6r3.zip rhino 1.6r2 2005-09-19 changes in 1.6r2 rhino1_6r2.zip rhino 1.6r1 2004-11-29 changes in 1.6r1 rhino1_6r1.zip rhino 1.5r5 2004-03-25 changes in 1.5r5 rhino1_5r5.zip rhino 1.5r4.1 2003-04-21 changes in 1.5r4.1 rhino15r41.zip rhino 1.5r4 2003-02-10 changes in 1.5r4 rhino15r4.zip rhino 1.5r3 2002-01-2
7 changes in 1.5r3 rhino15r3.zip rhino 1.5r2 2001-0
7-2
7 changes in 1.5r2 rhino15r2.zip rhino 1.5r1 2000-09-10 changes in 1.5r1 rhino15r1.zip rhino 1.4r3 1999-05-10 initial public relea...
Rhino JavaScript compiler
the string versionnumber must be one of 100, 110, 120, 130, 140, 150, 160, or 1
70.
...$ java org.mozilla.javascript.tools.jsc.main -extends java.applet.applet -implements java.lang.runnable nervoustext.js --norrisboyd 12:26, 13 june 200
7 (pdt) ...
Rhino overview
rhino contains all the features of javascript 1.
7 allows direct scripting of java a javascript shell for executing javascript scripts a javascript compiler to transform javascript source files into java class files a javascript debugger for scripts executed with rhino language the javascript language itself is standardized by standard ecma-262 ecmascript: a general purpose, cross-platform programming language.
... rhino 1.6 and greater implement ecma-35
7 ecmascript for xml (e4x).
SpiderMonkey Build Documentation
no configure: error: installation or configuration problem: c compiler cannot create executables." you can try configuring like so: cc=clang cxx=clang++ ../configure it is also possible that baldrdash may fail to compile with /usr/local/cellar/llvm/
7.0.1/lib/clang/
7.0.1/include/inttypes.h:30:15: fatal error: 'inttypes.h' file not found /usr/local/cellar/llvm/
7.0.1/lib/clang/
7.0.1/include/inttypes.h:30:15: fatal error: 'inttypes.h' file not found, err: true this is because, starting from mohave, headers are no longer installed in /usr/include.
... system, that runs in the arm simulator, you can use the following: ar=ar cc="gcc -m32 -mfpmath=sse -msse -msse2" cxx="g++ -m32 -mfpmath=sse -msse -msse2" \ $src/configure --target=i686-pc-linux --enable-simulator=arm to build a 32-bit version on a 64-bit mac system (the target version is specific to your os/x sdk), you can use the following: $src/configure --target=i386-apple-darwin16.
7.0 # choose the appropriate sdk version for your version of os/x to build a 64-bit version on a 32-bit mac system (e.g.
JS::AutoVectorRooter
this article covers features introduced in spidermonkey 1
7 base class that roots an internal variable-size array of type t.
...r<jsfunction *> js::autoscriptvector autovectorrooter<jsscript *> see also mxr id search for js::autovectorrooter mxr id search for js::autovaluevector mxr id search for js::autoidvector mxr id search for js::autoobjectvector mxr id search for js::autofunctionvector mxr id search for js::autoscriptvector js::autovaluearray<n> - fixed-size array of js::value bug 6
770
79 bug 868580 - expose js::autoobjectvector bug 848592 - added js::autofunctionvector bug 6
76281 - added js::autoscriptvector ...
JS::CallArgs
this article covers features introduced in spidermonkey 1
7 helper class encapsulating access to the callee, this value, arguments, and argument count for a function call.
... return true; } see also mxr id search for js::callargs mxr id search for js::callargsfromvp js::call bug
770586 ...
JS::Compile
this article covers features introduced in spidermonkey 1
7 compile a script for execution.
... mxr id search for js::compile js::evaluate js::compileoffthread js::compilefunction js_decompilescript bug
771
705 bug 1143
793 -- removed obj parameter ...
JS::CompileFunction
this article covers features introduced in spidermonkey 1
7 create a javascript function from a text string.
... mxr id search for js::compilefunction js::evaluate js::compile js::compileoffthread js_executescript js_decompilescript bug
771
705 ...
JS::CompileOptions
this article covers features introduced in spidermonkey 1
7 compile options classes.
... see also mxr id search for js::readonlycompileoptions mxr id search for js::owningcompileoptions mxr id search for js::compileoptions js::compile js::compileoffthread js::compilefunction js::evaluate bug 88
70
77 bug
771
705 ...
WebReplayRoadmap
similarly, when the debugger supports dom mutation breakpoints (bug 154
7692), the recording can be searched for dom mutations, and mutations can be logged to the console and seeked to later.
... media elements (bug 1304146) web audio (bug 130414
7) webrtc (bug 1304149) webassembly (bug 148100
7) webgl (bug 150646
7) support more operating systems (not yet implemented) only macos is supported right now.
Secure Development Guidelines
bits maximum value that can be represented data type 8 28-1 255 char 16 216-1 65535 short 32 232-1 429496
7295 int 64 264-1 18446
7440
73
709551615 long long integer overflows/underflows example of an integer overflow int main() { unsigned int foo = 0xffffffff; printf(“foo: 0x%08x\r\n”, foo); foo++; printf(“foo: 0x%08x\r\n”, foo); } integer overflows/underflows example of an integer underflow int main() { unsigned int foo = 0; p...
... } integer overflows/underflows: prevention difficult to fix: you need to check every arithmetic operation with user input arithmetic libraries like safeint can help signedness issues bits data type range 8 signed char -128 - +12
7 unsigned char 0 - +255 16 signed short -32
768 - +32
76
7 unsigned short 0 - +65535 32 signed int -214
7483648 - +214
748364
7 unsigned int 0 - +429496
7295 64 signed long long -92233
72036854
775808 - +92233
72036854
77580
7 unsigned long long 0 - +18446
7440
73
709551615 int vuln_funct(int s...
Mork
except when parsing values, whitespace ('\b', '\t', '\r', '\n', '\f', ' ', and '\x
7f'), line continuations ('\\' followed by a newline), and comments (c++ or c style) can be ignored.
...most of the time, however, regular
7-bit ascii data is put in the cell.
Frecency algorithm
70 (places.frecency.secondbucketweight, 14 days bucket size, in places.frecency.secondbucketcutoff) ....
...nts for sampled visits / number of sampled visits) example this is an example of a frecency calculation for a uri that is bookmarked and has been visited twice recently (once yesterday, and once last week by clicking a link), and two other times more than 90 days ago: 0 default score +140 100 * (140/100.0) - first bucket weight and bookmarked bonus +84
70 * (120/100.0) - second bucket weight and followed-link bonus +14 10 * (140/100.0) - fifth bucket weight and bookmarked bonus +14 10 * (140/100.0) - fifth bucket weight and bookmarked bonus -- 252 (4 * 252 / 4) - final frecency score notes the number of sampled visits is min(10 most recent visits pref, total visit counts).
Querying Places
folder = 3 const unsigned short sort_by_none = 0 const unsigned short sort_by_title_ascending = 1 const unsigned short sort_by_title_descending = 2 const unsigned short sort_by_date_ascending = 3 const unsigned short sort_by_date_descending = 4 const unsigned short sort_by_uri_ascending = 5 const unsigned short sort_by_uri_descending = 6 const unsigned short sort_by_visitcount_ascending =
7 const unsigned short sort_by_visitcount_descending = 8 const unsigned short sort_by_keyword_ascending = 9 const unsigned short sort_by_keyword_descending = 10 const unsigned short sort_by_dateadded_ascending = 11 const unsigned short sort_by_dateadded_descending = 12 const unsigned short sort_by_lastmodified_ascending = 13 const unsigned short sort_by_lastmodified_descending = 14 const un...
...oolean excludeitems attribute boolean excludequeries attribute boolean excludereadonlyfolders attribute boolean expandqueries attribute boolean includehidden attribute boolean showsessions attribute unsigned long maxresults const unsigned short query_type_history = 0 const unsigned short query_type_bookmarks = 1 const unsigned short query_type_unified = 2 (not yet implemented -- see bug 3
78
798) attribute unsigned short querytype complex queries you can pass one or more nsinavhistoryquery objects to executequeries().
Using the Places annotation service
four functions are provided to get this information: getpageannotationinfo(auri, aname, aflags, aexpiration, amimetype, atype) getitemannotationinfo(aitemid, aname, aflags, aexpiration, amimetype, atype) getpageannotationtype(auri, aname); getitemannotationtype(aitemid, aname); the returned type will be one of the value_type constants in mozistoragevaluearray.idl: after bug 3
77066 the value_type_* type handling was changed to this: type_int32 = 1 type_double = 2 type_string = 3 type_binary = 4 type_int64 = 5 try { var value = annotationservice.getpageannotation(uri, "my_extension/some_annotation"); } catch(e) { // annotation does not exist } other functions getpageswithannotation(aname, resultcount, results); getitemswithannotation(aname, resultcount...
... expire_days : removed at
7 days.
Creating a Python XPCOM component
defining the interface make a file named "nsipysimple.idl" to define the interface: #include "nsisupports.idl" [scriptable, uuid(2b324e9d-a322-44a
7-bd6e-0d8c83d94883)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void change(in string avalue); }; this is the same as the nsisimple interface used here.
...make a file named "py_simple.py" for the actual code (again, in the 'components' directory): from xpcom import components, verbose class pysimple: #pythontestcomponent _com_interfaces_ = components.interfaces.nsipysimple _reg_clsid_ = "{c456ceb5-f142-40a8-becc-
764911bc8ca5}" _reg_contractid_ = "@mozilla.org/pysimple;1" def __init__(self): self.yourname = "a default name" # or mname ?
Generic factory
background (this is based on my original news posting <beard-2402991
733140001@h-198-93-95-151.mcom.com>.) we seem to be creating a huge number of different factory implementations.
... original document information author: patrick beard last updated date: february 26, 1999 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
XPCOM changes in Gecko 2.0
chrome.manifest: # the {classid} here must match the classid in mycomponent.js component {e6b866e3-41b2-4f05-a4d2-3d4bde0f
7ef8} components/mycomponent.js contract @foobar/mycomponent;1 {e6b866e3-41b2-4f05-a4d2-3d4bde0f
7ef8} category profile-after-change mycomponent @foobar/mycomponent;1 the javascript code no longer exports a nsgetmodule() function.
... classid: components.id("{e6b866e3-41b2-4f05-a4d2-3d4bde0f
7ef8}"), queryinterface: xpcomutils.generateqi([components.interfaces.nsimycomponent]), /* nsimycomponent implementation goes here */ ...
Using XPCOM Utilities to Make Things Easier
many cids take the following form: #define ns_ioservice_cid \ { /* 9ac9e
770-18bc-11d3-933
7-00104ba0fd40 */ \ 0x9ac9e
770, \ 0x18bc, \ 0x11d3, \ {0x93, 0x3
7, 0x00, 0x10, 0x4b, 0xa0, 0xfd, 0x40} \ } the next entry is the contract id string, which is also usually defined in a #define in a header file.
... weblock2.cpp the listing below shows the generic module code from weblock1.cpp using the macros described in this chapter: weblock2.cpp #include "nsigenericfactory.h" #include "nsisupportsutils.h" #define sample_cid \ { 0x
777f
7150, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} class sample: public nsisupports { public: sample(); virtual ~sample(); ns_decl_isupports }; sample::sample() { // note: in newer versions of gecko (1.3 or later) // you don't have to do this: ns_init_isupports(); } sample::~sample() { } ns_impl_isupports1(sample, nsisupports); ns_generic_factor...
How to build a binary XPCOM component using Visual Studio
let’s specify a simple interface: #include "nsisupports.idl" [scriptable, uuid(263ed1ba-5cc1-11db-96
73-00e08161165f)] interface ispecialthing : nsisupports { attribute astring name; long add(in long a, in long b); }; remember to generate your own guid.
...they could look like this: h file: #ifndef __specialthing_impl_h__ #define __specialthing_impl_h__ #include "comp.h" #include "nsstringapi.h" #define specialthing_contractid "@starkravingfinkle.org/specialthing;1" #define specialthing_classname "specialthing" #define specialthing_cid { 0x245626, 0x5cc1, 0x11db, { 0x96, 0x
73, 0x0, 0xe0, 0x81, 0x61, 0x16, 0x5f } } class cspecialthing : public ispecialthing { public: ns_decl_isupports ns_decl_ispecialthing cspecialthing(); private: ~cspecialthing(); protected: /* additional members */ nsstring mname; }; #endif cpp file: #include "comp-impl.h" ns_impl_isupports1(cspecialthing, ispecialthing) cspecialthing::cspecialthing() { /* member initializers and co...
Components.utils.unload
components.utils.unload was introduced in firefox
7 and is used to unload javascript code modules.
...see bug
769253 see also bug 481603 the documentation in xpccomponents.idl the tests in js/xpconnect/tests/unit/ ...
Profiling XPCShell
a profile will look like this: file:///users/michiel/mozilla/tree1/...js/calutils.js [2,25420] createdatetime() {60-62} 5
79 {min 0, max 3, avg 0, sum 42
7, self 42
7} [2,56810] cp_qi() {860-866} 835 {min 0, max 1, avg 0, sum 950, self 950} the first line tells which file was profiled.
... notes you need a trunk build from after 200
7-05-28.
xpcshell
it should be executed under the window command prompt source_directory/obj-xxxxx/dist/bin> xpcshell.exe using the latest version of javascript at present, xpcshell doesn't use the latest version of javascript, so newer language features, such as the let statement introduced in javascript 1.
7, are not available.
... js> 5+
7 12 js> print("hello, world!") hello, world!
nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="5
71,198,
70
7,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="
731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="9
79,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcst...
...ring_(external)"> <area alt="" coords="114
7,198,1259,246" href="http://developer.mozilla.org/en/nscautostring_(external)" shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,4
75,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,
779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(ex...
nsACString_internal
<map id="classes" name="classes"> <area alt="" coords="456,5,605,53" href="http://developer.mozilla.org/en/nsacstring_internal" shape="rect" title="nsacstring_internal"> <area alt="" coords="415,101,49
7,149" href="http://developer.mozilla.org/en/nscstring" shape="rect" title="nscstring"> <area alt="" coords="521,101,689,149" href="http://developer.mozilla.org/en/nsdependentcsubstring" shape="rect" title="nsdependentcsubstring"> <area alt="" coords="1
72,19
7,289,245" href="http://developer.mozilla.org/en/nsfixedcstring" shape="rect" title="nsfixedcstring"> <area alt="" coords="315,19
7,43
7,245" hre...
...f="http://developer.mozilla.org/en/nsxpidlcstring" shape="rect" title="nsxpidlcstring"> <area alt="" coords="461,19
7,611,245" href="http://developer.mozilla.org/en/nsdependentcstring" shape="rect" title="nsdependentcstring"> <area alt="" coords="635,19
7,
78
7,245" href="http://developer.mozilla.org/en/nspromiseflatcstring" shape="rect" title="nspromiseflatcstring"> <area alt="" coords="1
73,293,285,341" href="http://developer.mozilla.org/en/nscautostring" shape="rect" title="nscautostring"> <area alt="" coords="5,389,22
7,43
7" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii" shape="rect" title="ns_lossyconvertutf16toascii"> <area alt="" coords="251,389,435,43
7" href="http://developer.mozilla.org/en/ns_convertutf16toutf8" shape="rect" title="ns_convertutf16toutf8"> <area alt=""...
nsAString (External)
<map id="classes" name="classes"> <area alt="" coords="963,6,1045,54" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,6
76,246" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="
700,198,913,246" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="93
7,198,10
71,246" href="http://developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promisefla...
...tstring_(external)"> <area alt="" coords="1095,198,1196,246" href="http://developer.mozilla.org/en/nsautostring_(external)" shape="rect" title="nsautostring_(external)"> <area alt="" coords="5,294,19
7,342" href="http://developer.mozilla.org/en/nsdependentstring_external" shape="rect" title="nsdependentstring_external"> <area alt="" coords="221,294,46
7,342" href="http://developer.mozilla.org/en/ns_convertasciitoutf16_external" shape="rect" title="ns_convertasciitoutf16_external"> <area alt="" coords="491,294,
733,342" href="http://developer.mozilla.org/en/ns_convertutf8toutf16_external" shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="
75
7,294,869,342" href="http://developer.mozilla.org/en/nsliteralstring_(external)" shape="rect" title="nsliteralstring_(external)"> </m...
nsAString_internal
<map id="classes" name="classes"> <area alt="" coords="415,5,553,53" href="http://developer.mozilla.org/en/nsastring_internal" shape="rect" title="nsastring_internal"> <area alt="" coords="3
79,101,451,149" href="http://developer.mozilla.org/en/nsstring" shape="rect" title="nsstring"> <area alt="" coords="4
75,101,635,149" href="http://developer.mozilla.org/en/nsdependentsubstring" shape="rect" title="nsdependentsubstring"> <area alt="" coords="151,19
7,25
7,245" href="http://developer.mozilla.org/en/nsfixedstring" shape="rect" title="nsfixedstring"> <area alt="" coords="284,19
7,396,245" ...
...href="http://developer.mozilla.org/en/nsxpidlstring" shape="rect" title="nsxpidlstring"> <area alt="" coords="420,19
7,559,245" href="http://developer.mozilla.org/en/nsdependentstring" shape="rect" title="nsdependentstring"> <area alt="" coords="583,19
7,
72
7,245" href="http://developer.mozilla.org/en/nspromiseflatstring" shape="rect" title="nspromiseflatstring"> <area alt="" coords="152,293,253,341" href="http://developer.mozilla.org/en/nsautostring" shape="rect" title="nsautostring"> <area alt="" coords="5,389,192,43
7" href="http://developer.mozilla.org/en/ns_convertasciitoutf16" shape="rect" title="ns_convertasciitoutf16"> <area alt="" coords="216,389,400,43
7" href="http://developer.mozilla.org/en/ns_convertutf8toutf16" shape="rect" title="ns_convertutf8toutf16"> <area alt="" coords="2
77,29...
nsCStringEncoding
ns_cstring_encoding_ascii conversion between ascii and utf-16 assumes that all bytes in the source string are
7-bit ascii and can be inflated to utf-16 by inserting null bytes.
... history this enumeration was frozen for mozilla 1.
7.
mozIStorageError
schema 1
7 the database schema changed.
... nomem
7 a memory allocation failed.
nsICookie
last changed in gecko 1.
7 inherits from: nsisupports attributes attribute type description expires pruint64 expiration time in seconds since midnight (00:00:00), january 1, 19
70 utc.
...expires = 1 represents an expiration time earlier than jan 1, 19
70.
nsIDOMEvent
see bug
761613.
...examples of epoch time are the time of the system start or 0:0:0 utc 1st january 19
70.
nsIDOMWindowInternal
66 introduced gecko 1.0 deprecated gecko 8.0 inherits from: nsidomwindow last changed in gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4) in gecko 8.0 this interface was merged into the nsidomwindow interface.
... note: prior to gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4), this attribute was part of nsidomwindow_2_0_branch.
nsIDOMXPathResult
dom/interfaces/xpath/nsidomxpathresult.idlscriptable this interface describes an xpath result returned by nsidomxpathevaluator or document.evaluate inherits from: nsisupports last changed in gecko 1.
7 method overview nsidomnode iteratenext(); nsidomnode snapshotitem(in unsigned long index); attributes attribute type description booleanvalue boolean if resulttype is boolean_type, the boolean value.
... ordered_node_snapshot_type
7 type is a node-set containing snapshots of all the nodes matching the expression used in the evaluator.
nsIEventListenerService
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4) implemented by: @mozilla.org/eventlistenerservice;1.
... obsolete since gecko
7.0 methods geteventtargetchainfor() returns an array of event targets indicating all the targets that will receive the same events that are delivered to the specified target.
nsIHttpServer
tpresponse(response); handlercallback(req, resp); }); }, close: function(){ server.stop(function(){}); }, get port() { return server.identity.primaryport } } } reference : mozilla-release/netwerk/test/httpserver/nsihttpserver.idl [scriptable, uuid(cea8812e-faa6-4013-9396-f9936cbb
74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port.
... behavior when not given a string matching * the media-type production in rfc 2616 section 3.
7 is undefined.
nsIInputStream
inherits from: nsisupports last changed in gecko 1
7.0 (firefox 1
7.0 / thunderbird 1
7.0 / seamonkey 2.14) an input stream may be "blocking" or "non-blocking" (see the isnonblocking() method).
... method overview unsigned long available();deprecated since gecko 1
7.0 unsigned long long available(); void close(); boolean isnonblocking(); unsigned long read(in charptr abuf, in unsigned long acount); native code only!
nsILoginManager
ahttprealm for protocol logins, specify the http realm for which the login applies; this is obtained from the www-authenticate header (see rfc 261
7).
... ahttprealm for protocol logins, specify the http realm for which the login applies; this is obtained from the www-authenticate header (see rfc 261
7).
nsIMarkupDocumentViewer
inherits from: nsisupports last changed in gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4) method overview void scrolltonode(in nsidomnode node); void sizetocontent(); attributes attribute type description allowplugins boolean if true, plugins are allowed within the doc shell.
... note: this attribute was added late in the gecko 2.0 development cycle and was implemented by the nsimarkupdocumentviewer_mozilla_2_0_branch interface; it was merged into this interface in gecko
7.0.
nsIMemoryReporter
note: this attribute was called memoryused prior to gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4), and its type was long long.
... unit type constants requires gecko
7.0(firefox
7.0 / thunderbird
7.0 / seamonkey 2.4) the amount reported by a memory reporter may use one of the following units.
nsIPermissionManager
expiretime time (in milliseconds since jan 1 19
70 0:00:00) representing expiration of this permission.
... expiretime time (in milliseconds since jan 1 19
70 0:00:00) representing expiration of this permission.
nsIPropertyBag
goodies obtained from window.navigator are: appcodename:"mozilla" appname:"netscape" appversion:"5.0 (windows)" battery:batterymanager buildid:"20140529161
749" cookieenabled:true donottrack:"yes" geolocation:geolocation language:"en-us" mimetypes:mimetypearray mozalarms:null mozapps:xpcwrappednative_nohelper mozcameras:cameramanager mozconnection:mozconnection mozcontacts:contactmanager mozid:null mozkeyboard:xpcwrappednative_nohelper mozpay:null mozpermissionsettings:null mozphonenumberservice:phonenumberservice mozpower:mozpowermanager moztcpsocket...
...services.appinfo.os simply tells us winnt only, this is not helpful to differentiate between windows xp, vista,
7, etc.
nsISelectionController
constants selection constants constant gecko version description 1.
7 - 1.9 1.9.1 - 1.9.2 2.0 selection_none 0 selection_normal 1 selection_spellcheck 2 selection_ime_rawinput 4 selection_ime_selectedrawtext 8 selection_ime_convertedtext 16 selection_ime_select...
...see bug 4184
70, comment 12 for details.
nsISupportsWeakReference
inherits from: nsisupports last changed in gecko 1.
7 method overview nsiweakreference getweakreference(); methods getweakreference() produces an appropriate instance of nsiweakreference.
...see bug 48
726 for details.
nsITaskbarProgress
widget/public/nsitaskbarprogress.idlscriptable starting in windows
7, applications can display a progress notification in the taskbar.
... see also nsiwintaskbar windows
7 taskbar apis ...
nsITelemetry
1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4) implemented by: @mozilla.org/base/telemetry;1 as a service: let telemetry = components.classes["@mozilla.org/base/telemetry;1"] .getservice(components.interfaces.nsitelemetry); method overview jsval gethistogrambyid(in acstring id); jsval snapshothistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); jsval getkeyedhistogrambyid(in acstring id); void capturestack(in acstring name); jsv...
... see also bug 649502 - expose histograms to js bug 585196 - telemetry infrastructure bug 668312 - report only probes defined in histograms.json bug 10698
74 - add keyed histogram types bug 1426453 - documentation of nsitelemetry not up to date ...
nsIUTF8ConverterService
inherits from: nsisupports last changed in gecko 1.
7 method overview autf8string convertstringtoutf8(in acstring astring, in string acharset, in boolean askipcheck); autf8string converturispectoutf8(in acstring aspec, in string acharset); methods convertstringtoutf8() ensure that astring is encoded in utf-8.
...the most common case is the input is in
7bit non-ascii character sets like iso-2022-jp, hz or utf-
7 (in its original form or a modified form used in imap folder names).
nsIWebBrowserChromeFocus
inherits from: nsisupports last changed in gecko 1.
7 method overview void focusnextelement(); void focusprevelement(); methods focusnextelement() set the focus at the next focusable element in the chrome.
...see also see bug
70224 for gratuitous information.
nsIWebNavigation
load_flags_allow_popups 32
768 this flag specifies that the load should not be subject to popup blocking checks.
...for http and ftp urls and possibly others, characters above u+00
7f will be converted to utf-8 and then url- escaped per the rules of rfc 2396.
nsIXMLHttpRequest
obsolete since gecko 60 (firefox 60 / thunderbird 60 / seamonkey 2.5
7)this feature is obsolete.
...you only want this if your url is to a zip file or some file you want to download and make a nsiarraybufferinputstream out of it or something xhr.send(null); } xhr('https://www.gravatar.com/avatar/eb9895ade1bd662
7e054429d1e18b5
76?s=24&d=identicon&r=pg&f=1', data => { services.prompt.alert(null, 'xhr success', data); var file = os.path.join(os.constants.path.desktopdir, "test.png"); var promised = os.file.writeatomic(file, new uint8array(data)); promised.then( function() { alert('succesfully saved image to desktop') }, function(ex) { alert('fa...
nsIXPCScriptable
constants constant value description want_precreate 1 << 0 want_create 1 << 1 want_postcreate 1 << 2 want_addproperty 1 << 3 want_delproperty 1 << 4 want_getproperty 1 << 5 want_setproperty 1 << 6 want_enumerate 1 <<
7 want_newenumerate 1 << 8 indicates that the object wants to have its newenumerate method called.
... want_convert 1 << 10 want_finalize 1 << 11 want_checkaccess 1 << 12 want_call 1 << 13 want_construct 1 << 14 want_hasinstance 1 << 15 want_trace 1 << 16 use_jsstub_for_addproperty 1 << 1
7 use_jsstub_for_delproperty 1 << 18 use_jsstub_for_setproperty 1 << 19 dont_enum_static_props 1 << 20 dont_enum_query_interface 1 << 21 dont_ask_instance_for_scriptable 1 << 22 classinfo_interfaces_only 1 << 23 allow_prop_mods_during_resolve 1 << 24 allow_prop_mods_to_prototype 1 << 25 dont_share_prototype 1 << 26 dont_reflect_interface_names 1 << 2
7 want_equality 1 << 28 want_outer_object 1 << 29 want_inner_object 1 << 30 rese...
nsIXULAppInfo
in "firefox 3.
7 alpha 1" the application version is "3.
7a1pre" while the platform version is "1.9.3pre" read only.
... version acstring the xul application's version, for example "0.8.0+" or "3.
7a1pre".
nsMsgRuleActionType
defined in comm-central/ mailnews/ base/ search/ public/ nsmsgfiltercore.idl typedef long nsmsgruleactiontype; [scriptable, uuid(59af
7696-1e28-4642-a400-fa32
7ae0b8d8)] interface nsmsgfilteraction { /* if you change these, you need to update filter.properties, look for filteractionx */ /* these longs are all actually of type nsmsgfilteractiontype */ const long custom=-1; /* see nsmsgfilteraction */ const long none=0; /* uninitialized state */ const long movetofolder=1; const long changepriority=2; const long delete=3; const long markread=4; const long killthread=5; const long watchthread=6; const long markflagged=
7; const long label=8; const long reply=9; const long forward=10; const long stopexecution=...
...11; const long deletefrompop3server=12; const long leaveonpop3server=13; const long junkscore=14; const long fetchbodyfrompop3server=15; const long copytofolder=16; const long addtag=1
7; const long killsubthread=18; const long markunread=19; }; ...
nsMsgSearchOp
/ const nsmsgsearchopvalue doesntcontain = 1; const nsmsgsearchopvalue is = 2; /* is and isn't also apply to some non-text attrs */ const nsmsgsearchopvalue isnt = 3; const nsmsgsearchopvalue isempty = 4; const nsmsgsearchopvalue isbefore = 5; /* for date attributes */ const nsmsgsearchopvalue isafter = 6; const nsmsgsearchopvalue ishigherthan =
7; /* for priority.
...netic matching */ const nsmsgsearchopvalue ldapdwim = 12; /* do what i mean for simple search */ const nsmsgsearchopvalue isgreaterthan = 13; const nsmsgsearchopvalue islessthan = 14; const nsmsgsearchopvalue namecompletion = 15; /* name completion operator...as the name implies =) */ const nsmsgsearchopvalue isinab = 16; const nsmsgsearchopvalue isntinab = 1
7; const nsmsgsearchopvalue isntempty = 18; /* primarily for tags */ const nsmsgsearchopvalue matches = 19; /* generic term for use by custom terms */ const nsmsgsearchopvalue doesntmatch = 20; /* generic term for use by custom terms */ const nsmsgsearchopvalue knummsgsearchoperators = 21; /* must be last operator */ }; ...
NS_CStringCloneData
history this function was frozen for mozilla 1.
7.
... see bug 239
716 for details.
NS_StringCloneData
history this function was frozen for mozilla 1.
7.
... see bug 239
716 for details.
nsMsgNavigationType
nextunreadmessage
7 go to the next unread message in the view.
... nextunreadthread 10 nextunreadfolder 11 nextfolder 12 readmore 13 back 15 go back to the previous visited message forward 16 go forward to the previous visited message firstflagged 1
7 nextflagged 18 previousflagged 19 firstnew 20 editundo 21 editredo 22 togglesubthreadkilled 23 ...
Working with Multiple Versions of Interfaces
unfortunately we compiled this in the latest sdk, and so this magic number happens to be: "244e4c6
7-a1d3-44f2-9cab-cdaa31b68046" whereas, inside firefox 2, the iid it happens to know about is: "663ca4a8-d219-4000-925d-d8f66406b626".
...we first dredge out the old interface identifiers from our yea olde firefox 1.5 sdk: static const nsiid iar_iid_old = { 0x663ca4a8, 0xd219, 0x4000, { 0x92, 0x5d, 0xd8, 0xf6, 0x64, 0x06, 0xb6, 0x26 }}; static const nsiid iad_iid_old = {0x8
781fc88, 0x355f, 0x4439, { 0x88, 0x1f, 0x65, 0x04, 0xa0, 0xa1, 0xce, 0xb6 }}; then follow the recipe.
XPCOM category image-sniffing-services
in firefox 3, a new xpcom category was added in bug 39166
7 to allow "third-party" xpcom components to identify images based on their content.
...see bug 813
78
7 - remove support for image-sniffing-services.
XPIDL Syntax
string_literal = 1*(%x22 *(any char except %x22 or %x0a) (%x22 / %x0a)) ; same as above, but s/"/'/g char_literal = 1*(%x2
7 *(any char except %x2
7 or %x0a) (%x2
7 / %x0a)) type_spec = "float" / "double" / "string" / "wstring" type_spec /= ["unsigned"] ("short" / "long" / "long" "long") type_spec /= "char" / "wchar" / "boolean" / "octet" type_spec /= scoped_name prop_list = "[" *(property ",") property "]" property = ident [parens] raise_list = "raises" "(" *(scoped_name) ",") scoped_name ")" scoped_name =...
... *(ident "::") ident / "::" ident ; in regex: [a-za-z_][a-za-z0-9_]*; identifiers beginning with _ cause warnings ident = (%x41-5a / %x61-
7a / "_") *(%x41-5a / %x61-
7a / %x30-39 / "_") parens = "(" 1*(any char except ")") ")" functionality not used in xpidl the libidl parser we use is more powerful than xpidl itself can understand.
Address book sync client design
this interface is defined in mozilla/mailnews/addrbook/public/nsiabsyncdriver.idl #include "nsrootidl.idl" #include "nsiabsynclistener.idl" [scriptable, uuid(91fdfee1-efbc-11d3-8f9
7-0000
73
75
73
74)] interface nsiabsyncdriver : nsiabsynclistener { void kickit(); }; as you can see, this is a very simple interface which allows for the starting of the address book sync operation.
...this interface is as follows: #include "nsisupports.idl" #include "nsrootidl.idl" #include "nsifilespec.idl" [scriptable, uuid(e0ed29e0-098a-11d4-8fd6-00a024a
7d144)] interface nsiabsynclistener : nsisupports { /** * notify the observer that the ab sync authorization operation has begun.
MailNews fakeserver
specific fakeserver guidelines pop imap smtp nntp nntpd.js defines a few different classes of nntp servers: compliance for rfc 9
77, rfc 2980, and rfc 39
77, as well as a giganews and an inn server.
... (full 2980 and 39
77 compliance as well as inn is not yet written).
Building a Thunderbird extension 3: install manifest
version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>myfirstext@jen.zed</em:id> <em:name>my first extension</em:name> <em:version>1.0</em:version> <em:creator>jenzed</em:creator> <em:targetapplication> <description> <em:id>{3550f
703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>5.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> the following items (shown in bold) should be customized for your application: <em:id>myfirstext@jen.zed</em:id>: this is the id of the extension.
... <em:id>{3550f
703-e582-4d05-9a08-453d09bdfdc6}</em:id>: this element contains the version id of the application that this add on is developed for.
Theme Packaging
--> <em:targetapplication> <description> <em:id>{ec8030f
7-c20a-464f-9b0e-13a3a9e9
7384}</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>0.9</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>new theme 1</em:name> <em:description>a test theme for thunderbird</em:description> <em:creator>ben goodger</em:creator> <em:contributor>john doe</em:contributor> <e...
...m:homepageurl>http://www.bengoodger.com/</em:homepageurl> <!-- front end integration hooks (used by theme manager)--> <em:internalname>newtheme1</em:internalname> </description> </rdf> the following are some common target application guids that you can use in your targetapplication properties: thunderbird {3550f
703-e582-4d05-9a08-453d09bdfdc6} seamonkey {92650c4d-4b8e-4d2a-b
7eb-24ecf4f6b63a} pale moon {8de
7fcbb-c55c-4fbe-bfc5-fc555c8
7dbc4} official references for toolkit api official references.
customDBHeaders Preference
22-rdf-syntax-ns#' xmlns:em='http://www.mozilla.org/2004/em-rdf#'> <description about='urn:mozilla:install-manifest'> <em:id>superfluous@yoursite.com</em:id> <em:version>0.1.1</em:version> <em:type>2</em:type> <!-- 2 is type 'extension' --> <em:targetapplication> <description> <!-- this next line identifies tbird as target --> <em:id>{3550f
703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>2*</em:minversion> <em:maxversion>3.0.0.*</em:maxversion> </description> </em:targetapplication> <em:name>superfluous</em:name> <em:description>test superfluous extension</em:description> <em:creator>garrett comeaux</em:creator> </description> </rdf> build process: [gcomeaux@kyle tbird-ext]$ cd...
... superfluous/ [gcomeaux@kyle superfluous]$ make zip superfluous.xpi chrome/ chrome.manifest chrome/content/ chrome/content/superfluous.js chrome/content/superfluous_overlay.xul install.rdf adding: chrome/ (stored 0%) adding: chrome.manifest (deflated 44%) adding: chrome/content/ (stored 0%) adding: chrome/content/superfluous.js (deflated 5
7%) adding: chrome/content/superfluous_overlay.xul (deflated 44%) adding: install.rdf (deflated 50%) end result ultimately, you want to be able to compose a message like this: and see the superfluous column displayed in your inbox like this: thanks many thanks go out to the thunderbird developers for the fine product that it is.
libmime content type handlers
libmime will then use nscomponentmanager::contractidtoclsid() to * locate the appropriate content type handler */ #ifndef nsimimecontenttypehandler_h_ #define nsimimecontenttypehandler_h_ typedef struct { prbool force_inline_display; } contenttypehandlerinitstruct; #include "prtypes.h" #include "nsisupports.h" #include "mimecth.h" // {20dabd99-f8b5-11d2-8ee0-00a024a
7d144} #define ns_imime_content_type_handler_iid \ { 0x20dabd99, 0xf8b5, 0x11d2, \ { 0x8e, 0xe0, 0x0, 0xa0, 0x24, 0xa
7, 0xd1, 0x44 } } class nsimimecontenttypehandler : public nsisupports { public: static const nsiid& getiid() { static nsiid iid = ns_imime_content_type_handler_iid; return iid; } ns_imethod getcontenttype(char **contenttype) = 0; ns_imethod createco...
...the uuid for this component is: // {20dabda1-f8b5-11d2-8ee0-00a024a
7d144} #define ns_vcard_content_type_handler_cid \ { 0x20dabda1, 0xf8b5, 0x11d2, \ { 0x8e, 0xe0, 0x0, 0xa0, 0x24, 0xa
7, 0xd1, 0x44 } } ...
Using Objective-C from js-ctypes
*/ // apple docs :: working with blocks - https://developer.apple.com/library/ios/documentation/cocoa/conceptual/programmingwithobjectivec/workingwithblocks/workingwithblocks.html var _nsconcreteglobalblock = ctypes.open(ctypes.libraryname('objc')).declare('_nsconcreteglobalblock', ctypes.voidptr_t); // //github.com/realityripple/uxp/blob/master/js/src/ctypes/library.cpp?offset=0#2
71 /** * the "block descriptor" is a static singleton struct.
...ypes.int32_t }, { reserved: ctypes.int32_t }, { invoke: ctypes.voidptr_t }, { descriptor: block_descriptor_1.ptr } ]); var block_const = { block_has_copy_dispose: 1 << 25, block_has_ctor: 1 << 26, block_is_global: 1 << 28, block_has_stret: 1 << 29, block_has_signature: 1 << 30 }; // based on work from here: https://github.com/trueinteractions/tint2/blob/f6ce18b16ada165b98b0
7869314dad1d
7bee0252/modules/bridge/core.js#l3
70-l394 var bl = block_literal_1(); // set the class of the instance bl.isa = _nsconcreteglobalblock; // global flags bl.flags = block_const.block_has_stret; bl.reserved = 0; bl.invoke = afunctypeptr; // create descriptor var desc = block_descriptor_1(); desc.reserved = 0; desc.size = block_literal_1.size; // set descriptor into block li...
Type conversion
ctypes.float32_t.ptr float32array pointer to the float32array ctypes.float64_t.ptr float64array pointer to the float64array var myfunctype = ctypes.functiontype(ctypes.default_abi, ctypes.void_t, [ctypes.int16_t.ptr]); var myfunc = myfunctype.ptr(function(v) { console.log(v.tostring()); }); myfunc(int16array([1, 2, 3])); // 'ctypes.int16_t.ptr(ctypes.uint64("0x103b
7fe60"))' myfunc(int32array([1, 2, 3])); // throws error var myfunctype = ctypes.functiontype(ctypes.default_abi, ctypes.void_t, [ctypes.char.ptr]); var myfunc = myfunctype.ptr(function(v) { console.log(v.tostring()); }); myfunc("abcde"); // 'ctypes.char.ptr(ctypes.uint64("0x101d1d680"))' myfunc(int32array([1, 2, 3])); // 'ctypes.char.ptr(ctypes.uint64("0x103b
7ffe0"))' array type...
...// 'ctypes.int16_t.array(5)([0, 0, 0, 0, 0])' mystruct.v = int16array([1, 2, 3, 4, 5]); console.log(mystruct.v.tostring()); // 'ctypes.int16_t.array(5)([1, 2, 3, 4, 5])' mystruct.v = [1, 2, 3, 4]; // throws error var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.char.array(5) } ])(); mystruct.v = "abcde"; console.log(mystruct.v.tostring()); // 'ctypes.char.array(5)([9
7, 98, 99, 100, 101])' mystruct.v = "abc"; console.log(mystruct.v.tostring()); // 'ctypes.char.array(5)([9
7, 98, 99, 0, 0])' mystruct.v = mystruct.v = "abcdef"; // throws error struct types js object can be converted into struct type: var point = ctypes.structtype("point", [ { x: ctypes.int32_t }, { y: ctypes.int32_t }, ]); var mystruct = ctypes.structtype("mystructtype", [ { "v": point...
Working with ArrayBuffers
bug
732936 includes a discussion of working with an arraybuffer.
... var lib; switch (os.constants.sys.name.tolowercase()) { case 'winnt': case 'winmo': case 'winnt': //windows lib = ctypes.open('msvcrt'); break; case 'darwin': // mac lib = ctypes.open('libc.dylib'); break; case 'freebsd': lib = ctypes.open('libc.so.
7'); break; case 'openbsd': lib = ctypes.open('libc.so.61.0'); break; case 'android': case 'sunos': case 'netbsd': case 'dragonfly': lib = ctypes.open('libc.so'); break; case 'linux': lib = ctypes.open('libc.so.6'); break; case 'gnu/kfreebsd': lib = ctypes.open('libc.so.0.1'); break; default: ...
Working with data
creating a 64-bit value using a string you can simply pass a string representation of a 64-bit number into the int64 or uint64 constructor, like this: var num1 = ctypes.int64("400000000000"); var num2 = ctypes.uint64("-0x123456
7890abcdef"); as you can see, you can use this technique with both decimal and hexadecimal source strings.
...for example: var num = ctypes.int64.join(-0x123456
78, 0x90abcdef); performing arithmetic with 64-bit values the int64 and uint64 objects don't provide any methods for performing arithmetic, which means you'll have to do it yourself by pulling out the high and low 32-bit portions and doing math on them, then joining them back together if necessary to get the complete result.
UInt64
hi -= 1; } return uint64.join(hi >>> 0, lo >>> 0); } function uint64_mul(a, b) { var valarr = [a, b]; ensureuint64(valarr); a = valarr[0]; b = valarr[1]; var ah = uint64.hi(a); var al = uint64.lo(a); var bh = uint64.hi(b); var bl = uint64.lo(b); var a5 = ah >>> 20; var a4 = (ah >>>
7) & 0x1fff; var a3 = ((ah << 6) | (al >>> 26)) & 0x1fff; var a2 = (al >>> 13) & 0x1fff; var a1 = al & 0x1fff; var b5 = bh >>> 20; var b4 = (bh >>>
7) & 0x1fff; var b3 = ((bh << 6) | (bl >>> 26)) & 0x1fff; var b2 = (bl >>> 13) & 0x1fff; var b1 = bl & 0x1fff; var c1 = a1 * b1; var c2 = a1 * b2 + a2 * b1; var c3...
... = a1 * b3 + a2 * b2 + a3 * b1; var c4 = a1 * b4 + a2 * b3 + a3 * b2 + a4 * b1; var c5 = a1 * b5 + a2 * b4 + a3 * b3 + a4 * b2 + a5 * b1; c2 += c1 >>> 13; c1 &= 0x1fff; c3 += c2 >>> 13; c2 &= 0x1fff; c4 += c3 >>> 13; c3 &= 0x1fff; c5 += c4 >>> 13; c4 &= 0x1fff; var ch = ((c5 << 20) | (c4 <<
7) | (c3 >>> 6)) >>> 0; var cl = ((c3 << 26) | (c2 << 13) | c1) >>> 0; return uint64.join(ch, cl); } function uint64_or(...uint64) { // bitwise or // if there are logical or and bitwise or, bitwise or may be named `bor` or `bitor`, but i don't think there could be logical or, so i think just `or` is the right name ensureuint64(uint64); var hi = 0; v...
Constants - Plugins
nperr_invalid_plugin_dir_error
7 plug-in directory missing or invalid.
... npvers_has_response_headers 1
7 npstreams have response headers for http streams.
Plug-in Development Overview - Plugins
plug-ins must support 'str#' 128 but are not required to support any of these others: str#' 12
7 can contain a list of mime type descriptions corresponding to the types in 'str#' 128 .
... starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.
7), you can get the origin of the document in a secure, convenient way by calling npn_getvalue() to retrieve the value of the variable npnvdocumentorigin.
URLs - Plugins
see bug 63836
7 for details.
... char* ppostdata = "content-type:\tapplication/x-www-form-urlencoded\ncontent-length:\t1
7\n\nname=aaashun@gmail.com\n"; uint32 npostdatalen = (uint32)strlen(ppostdata); npn_posturl(npinstance, "http://www.baidu.com","_blank", npostdatalen, ppostdata, false); uploading files to an ftp server plug-ins can use npn_posturl or npn_posturlnotify to upload files to a remote server using ftp.
Plugins
also from firefox 55 onwards, flash and other plugins can no longer be loaded from any url scheme except for http:// and https:// (bug 13354
75).
... starting with firefox 56 in september 201
7, firefox for android will remove all support for plugins (bug 1381916).
DOM Inspector FAQ - Firefox Developer Tools
please see bug 261
79 for a lengthy discussion of why they are there.
... original document information author(s): christopher aillon last updated date: november 11, 2003 copyright information: portions of this content are © 1998–200
7 by individual mozilla.org contributors; content available under a creative commons license | details.
Source map errors - Firefox Developer Tools
see bug 143
793
7: webextensions doesn't find source maps for details.
... ressourcen-adresse: moz-extension://c
7f0f003-4fcf-49fd-8ec0-c49361266581/background.js source-map-adresse: background.js.map the only workaround is to manually change the map url to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.
UI Tour - Firefox Developer Tools
ignore (since firefox
76) ignore files in this directory causes all files within the selected directory to be skipped by the debugger.
...the setting is reset when the developer tools are closed (except in firefox
77, see bug 1640318).
Tutorial: Set a breakpoint - Firefox Developer Tools
it does not work in firefox 5
7.
... source metadata generated from file: js/src/doc/debugger/tutorial-breakpoint.md watermark: sha256:c8dd4bb699
72b58e59fcbe68
70499206463a5e330fda25f1214893595a1c01d0 changeset: ffa
775dd5bd4 ...
Aggregate view - Firefox Developer Tools
(no stack available) in the example above you'll note that
7% of the heap is marked "(no stack available)".
... many real-world pages will have a much higher "(no stack available)" share than
7%.
Dominators view - Firefox Developer Tools
it looks something like this: the dominators view consists of two panels: the dominators tree panel shows you which nodes in the snapshot are retaining the most memory the retaining paths panel (new in firefox 4
7) shows the 5 shortest retaining paths for a single node.
... retaining paths panel the retaining paths panel is new in firefox 4
7.
Examine and edit CSS - Firefox Developer Tools
you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox
72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules.
... view @media rules for color-scheme-preference as of firefox
72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature.
Work with animations - Firefox Developer Tools
both properties were initialized at 0ms and finalized at
750ms.
... the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted
750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar.
UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition
77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the css rules view into a separate pane in the center of the inspector.
... computed view the computed view shows you the complete computed css for the selected element (the computed values are the same as what getcomputedstyle would return.): compatibility view starting with firefox developer edition version
77, the compatibility view shows css compability issues, if any, for properties applied to the selected element, and for the current page as a whole.
Call Tree - Firefox Developer Tools
with this kind of digging, we can figure out the whole call graph, with associated sample count: sortall() // 8 -> sort() // 3
7 -> bubblesort() // 1345 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 103 -> partition() // 12 platform data you'll also see some rows labeled gecko, input & events, and so on.
... in our example, there are 6
79 samples assigned to gecko - the second-largest group after bubblesort().
Responsive Design Mode - Firefox Developer Tools
while touch event simulation is enabled, mouse events are translated into touch events; this includes (starting in firefox
79) translating a mouse-drag event into a touch-drag event.
... selection download speed upload speed minimum latency (ms) gprs 50 kb/s 20 kb/s 500 regular 2g 250 kb/s 50 kb/s 300 good 2g 450 kb/s 150 kb/s 150 regular 3g
750 kb/s 250 kb/s 100 good 3g 1.5 mb/s
750 kb/s 40 regular 4g/lte 4 mb/s 3 mb/s 20 dsl 2 mb/s 1 mb/s 5 wi-fi 30 mb/s 15 mb/s 2 to select a network, click the list box that's initially labeled "no throttling": ...
Rich output - Firefox Developer Tools
click on the triangle, and the object will be expanded to show its contents: starting with firefox 6
7 (available now in firefox developer) you can use the arrow keys on your keyboard to navigate through objects displayed in the console.
...for example, by expanding the array in the above list, i get the following: console.log(todolist) (4) […] 0: object { status: "done", description: "morning pages", datecreated: 15524044
7813
7 } 1: object { status: "in progress", description: "refactor styles", datecreated: 1552404493169 } 2: object { status: "to do", description: "create feedback form", datecreated: 1552404512630 } 3: object { status: "to do", description: "normalize table", datecreated: 1552404533
790 } length: 4 <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspectin...
Web Console UI Tour - Firefox Developer Tools
settings ("gear" menu): new in firefox
71, you can click the gear icon to access the new settings menu, where you can toggle the following features on and off: persist logs: when enabled, the console doesn't clear on page reload, or new page load.
... in firefox
71 onwards, there is a new "split pane" icon on the right hand side of the command line — clicking this will open the new console multi-line mode.
about:debugging (before Firefox 68) - Firefox Developer Tools
as soon as a worker is registered, the listing is updated: before firefox 4
7, service workers were only shown when they were actually running.
... sending push events to service workers sending push events in about:debugging is new in firefox 4
7.
AnalyserNode - Web APIs
2 channel interpretation "speakers" inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...nt-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor analysernode() creates a new instance of an analysernode object.
AnimationEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><l...
...ine x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">animationevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
droid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffersourcenode() constructorchrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤
79firefox full support 53ie no support noopera full support 42safari ?
... samsung internet android full support 6.0notes full support 6.0notes notes before samsung internet
7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
AudioContext.baseLatency - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbaselatency experimentalchrome full support 58edge full support ≤
79firefox full support
70ie no support noopera full support 45safari no support nowebview android full support 58chrome android full support ...
... 58firefox android no support noopera android full support 43safari ios no support nosamsung internet android full support
7.0legend full support full support no support no supportexperimental.
AudioContext.getOutputTimestamp() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetoutputtimestamp experimentalchrome full support 5
7edge full support ≤
79firefox full support
70ie no support noopera full support 44safari no support nowebview android full support ...
... 5
7chrome android full support 5
7firefox android no support noopera android full support 43safari ios no support nosamsung internet android full support
7.0legend full support full support no support no supportexperimental.
AudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audiocontext() creates and returns a new audiocontext object.
AudioNode - Web APIs
a filter like biquadfilternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: an audionode can be target of events, therefore it implements the eventtarget interface.
BaseAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the background to process audio data.
BeforeInstallPromptEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.5
714285
714285
71%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0
700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
...nt-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeinstallpromptevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
BeforeUnloadEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/b...
...eforeunloadevent" target="_top"><rect x="116" y="1" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box.
BiquadFilterNode() - Web APIs
fariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbiquadfilternode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤
79firefox full support 53ie no support noopera full support 42notes full support 42notes notes before opera 46, the default values were not supported.safari ?
... samsung internet android full support 6.0notes full support 6.0notes notes before samsung internet
7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
Bluetooth.requestDevice() - Web APIs
a proprietary 128-bit uuid service c48e606
7-5295-48d3-8d5c-0395f61
792b1.
...let options = { filters: [ {services: ['heart_rate']}, {services: [0x1802, 0x1803]}, {services: ['c48e606
7-5295-48d3-8d5c-0395f61
792b1']}, {name: 'examplename'}, {nameprefix: 'prefix'} ], optionalservices: ['battery_service'] } navigator.bluetooth.requestdevice(options).then(function(device) { console.log('name: ' + device.name); // do something with the device.
BluetoothDevice - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">bluetoothdevice</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} interface interface bluetoothdevice { readonly attribute domstring id; readonly attribute domstring?
BroadcastChannel - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">broadcastchannel</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor broadcastchannel() creates an object linking to the named channel.
CSSCounterStyleRule - Web APIs
inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="
76,25 86,20 86,30
76,25...
..." stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent cssrule.
CSSPrimitiveValue - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25...
..." stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CSSValueList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25...
..." stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CanvasRenderingContext2D.arc() - Web APIs
html <canvas></canvas> javascript the arc is given an x-coordinate of 100, a y-coordinate of
75, and a radius of 50.
... const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100,
75, 50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws various shapes to show what is possible with arc().
CanvasRenderingContext2D.clip() - Web APIs
html <canvas id="canvas"></canvas> javascript the clipping region is a full circle, with its center at (100,
75), and a radius of 50.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100,
75, 50, 0, math.pi * 2); ctx.clip(); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two rectangles to a path2d object, which is then made the current clipping region using the clip() method.
CanvasRenderingContext2D.ellipse() - Web APIs
html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50,
75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with varying properties.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(60,
75, 50, 30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150,
75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240,
75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.isPointInPath() - Web APIs
html <canvas id="canvas"></canvas> <p>in path: <code id="result">false</code></p> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const result = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.fill(); result.innertext = ctx.ispointinpath(30,
70); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in a circular path2d path.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circle const circle = new path2d(); circle.arc(150,
75, 50, 0, 2 * math.pi); ctx.fillstyle = 'red'; ctx.fill(circle); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification status comment html living standardthe definition of 'ca...
Compositing example - Web APIs
per degree var offset = 0; // scrollbar offset var oleft = -20; var otop = -20; for (var n = 0; n <= 359; n ++) { var gradient = ctx.createlineargradient(oleft + halfwidth, otop, oleft + halfwidth, otop + halfwidth); var color = color.hsv_rgb({ h: (n + 300) % 360, s: 100, v: 100 }); gradient.addcolorstop(0, "rgba(0,0,0,0)"); gradient.addcolorstop(0.
7, "rgba("+color.r+","+color.g+","+color.b+",1)"); gradient.addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.moveto(oleft + halfwidth, otop); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillstyle = gradient; ctx.fill(); ctx.translate(oleft + halfwidth, otop + halfwidth); ...
... ctx.rotate(rotate); ctx.translate(-(oleft + halfwidth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,30,30) ctx.fill(); return ctx.canvas; }; // hsv (19
78) = h: hue / s: saturation / v: value color = {}; color.hsv_rgb = function (o) { var h = o.h / 360, s = o.s / 100, v = o.v / 100, r, g, b; var a, b, c, d; if (s == 0) { r = g = b = math.round(v * 255); } else { if (h >= 1) h = 0; h = 6 * h; d = h - math.floor(h); a = math.round(255 * v * (1 - s)); b = math.round(255 * v * (1 - (s * d))); c = math.round(255 * v * (1 - (s * (1 - d)))); v = math.round(255 * v); switch (math.floor(h)) { case 0: ...
Compositing and clipping - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); ctx.translate(
75,
75); // create a circular clipping path ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw background var lingrad = ctx.createlineargradient(0, -
75, 0,
75); lingrad.addcolorstop(0, '#232256'); lingrad.addcolorstop(1, '#143
778'); ctx.fillstyle = lingrad; ctx.fillrect(-
75, -
75, 150, 150); // draw stars for (var j = 1; j < 50; j++) { ctx.s...
...ave(); ctx.fillstyle = '#fff'; ctx.translate(
75 - math.floor(math.random() * 150),
75 - math.floor(math.random() * 150)); drawstar(ctx, math.floor(math.random() * 4) + 2); ctx.restore(); } } function drawstar(ctx, r) { ctx.save(); ctx.beginpath(); ctx.moveto(r, 0); for (var i = 0; i < 9; i++) { ctx.rotate(math.pi / 5); if (i % 2 === 0) { ctx.lineto((r / 0.525
731) * 0.200811, 0); } else { ctx.lineto(r, 0); } } ctx.closepath(); ctx.fill(); ctx.restore(); } <canvas id="canvas" width="150" height="150"></canvas> draw(); in the first few lines of code, we draw a black rectangle the size of the canvas as a backdrop, then translate the origin to the center.
CharacterData - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fi...
CompositionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1...
...="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment...
DOMException - Web APIs
(legacy code value:
7 and legacy constant name: no_modification_allowed_err) notfounderror the object cannot be found here.
...(legacy code value: 1
7 and legacy constant name: type_mismatch_err) this value is deprecated; the javascript typeerror exception is now raised instead of a domexception with this value.
DOMHighResTimeStamp - Web APIs
// reduced time precision (2ms) in firefox 60 event.timestamp // 1519211809934 // 1519211810362 // 15192118116
70 // ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdomhighrestimestampchrome full support 6edge full support 12firefox full support
7ie full support 9opera full support 15safari full support 8webview android full support yeschrome android full support 18firefox android full support ...
DOMRect - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/domrectreadonly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161...
...,20 161,30 151,25" stroke="#d4dde4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor domrect() creates a new domrect object.
DOMRectReadOnly.fromRect() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfromrect() static functionchrome full support 5
7edge full support
79firefox full support 69ie no support noopera full support 44safari full support 10.1webview android full support ...
... 5
7chrome android full support 5
7firefox android no support noopera android full support 43safari ios full support 10.3samsung internet android full support
7.0legend full support full support no support no support ...
Binary strings - Web APIs
a subset of these strings is represented by utf-16 strings containing only ascii characters (i.e., characters whose code point does not exceed 12
7).
...a binary string is a concept similar to the ascii subset, but instead of limiting the range to 12
7, it allows code points until 255.
DelayNode() - Web APIs
perasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdelaynode() constructorchrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤
79firefox full support 53ie no support noopera full support 42safari ?
... samsung internet android full support 6.0notes full support 6.0notes notes before samsung internet
7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
DirectoryReaderSync - Web APIs
perasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdirectoryreadersync non-standardchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support
79prefixed full support
79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie no support noopera no support nosafari no support nowebview andro...
...id full support 3
7prefixed full support 3
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webkitfirefox android no support noopera android no support nosafari ios no support nosamsung internet android full support 1.0prefixed full support 1.0prefixed prefixed implemented w...
Document.cookie - Web APIs
document.cookie.split('; ').find(row => row.startswith('dosomethingonlyonce'))) { alert("do something here!"); document.cookie = "dosomethingonlyonce=true; expires=fri, 31 dec 9999 23:59:59 gmt"; } } <button onclick="doonce()">only do something once</button> example #4: reset the previous cookie function resetonce() { document.cookie = "dosomethingonlyonce=; expires=thu, 01 jan 19
70 00:00:00 gmt"; } <button onclick="resetonce()">reset only once cookie</button> example #5: check a cookie existence //es5 if (document.cookie.split(';').some(function(item) { return item.trim().indexof('reader=') == 0 })) { console.log('the cookie "reader" exists (es5)') } //es2016 if (document.cookie.split(';').some((item) => item.trim().startswith('reader='))) { console.log...
... the reason for the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, localstorage): the server tells the client to store a cookie http/1.0 200 ok content-type: text/html set-cookie: cookie_name1=cookie_value1 set-cookie: cookie_name2=cookie_value2; expires=sun, 16 jul 356
7 06:23:41 gmt [content of the page here] the client sends back to the server its cookies previously stored get /sample_page.html http/1.1 host: www.example.org cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 accept: */* specifications specification status comment document object model (dom) level 2 html specificationthe definition of 'document.cooki...
Document.createEntityReference() - Web APIs
obsolete since gecko
7.0 (firefox
7.0 / thunderbird
7.0 / seamonkey 2.4)this feature is obsolete.
... prior to gecko
7.0 this method showed up as present, due to bug bug 9850, it always only returned null.
Document.fonts - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontschrome full support 60edge full support
79firefox full support 41 full support 41 no support 35 — 41disabled disabled from version 35 until version 41 (exclusive): this feature is behind the layout.css.font-loading-api.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 4
7safari full support 10webview android full support 60chrome android full support 60firefox android full support yesopera android full support 44safari ios full support 10samsung internet android full support 5.0legend full support full ...
Document.lastModified - Web APIs
alert(document.lastmodified); // returns: tuesday, december 16, 201
7 11:09:42 transforming lastmodified into a date object this example transforms lastmodified into a date object.
... let olastmodif = new date(document.lastmodified); transforming lastmodified into milliseconds this example transforms lastmodified into the number of milliseconds since january 1, 19
70, 00:00:00, local time.
Document.xmlEncoding - Web APIs
obsolete since gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.
7)this feature is obsolete.
... warning: do not use this attribute; it has been removed from the dom level 4 specification and is no longer supported in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.
7).
Document - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4...
DocumentFragment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace"...
DocumentOrShadowRoot.activeElement - Web APIs
example html <p>select some text from one of the text areas below:</p> <form> <textarea name="ta-example-one" id="ta-example-one" rows="
7" cols="40">this is text area one.
...donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea> <textarea name="ta-example-two" id="ta-example-two" rows="
7" cols="40">this is text area two.
DocumentType - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">docu...
DynamicsCompressorNode() - Web APIs
droid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdynamicscompressornode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤
79firefox full support 53ie no support noopera full support 42safari ?
... samsung internet android full support 6.0notes full support 6.0notes notes before samsung internet
7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
EffectTiming.easing - Web APIs
examples in the red queen's race example, we animate alice and the red queen by passing an easing of steps(
7, end) to animate(): // define the key frames var spriteframes = [ { transform: 'translatey(0)' }, { transform: 'translatey(-100%)' } ]; // get the element that represents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spritefram...
...es, { easing: 'steps(
7, end)', direction: "reverse", duration: 600, playbackrate: 1, iterations: infinity }); specifications specification status comment web animationsthe definition of 'easing' in that specification.
Element.scroll() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollchrome full support 45edge full support
79firefox full support 36ie no support noopera full support 32safari full support 10webview android full support 45chrome android full support ...
... 36opera android full support 32safari ios no support nosamsung internet android full support 5.0scrolltooptions parameterchrome full support 45edge full support
79firefox full support yesie no support noopera full support 32safari no support nowebview android full support 45chrome android full support ...
Element.scrollTo() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrolltochrome full support 45edge full support
79firefox full support 36ie no support noopera full support 32safari full support 10webview android full support 45chrome android full support ...
... 36opera android full support 32safari ios no support nosamsung internet android full support 5.0scrolltooptions parameterchrome full support 45edge full support
79firefox full support yesie no support noopera full support 32safari no support nowebview android full support 45chrome android full support ...
Element - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#...
ErrorEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/e...
...rrorevent" target="_top"><rect x="116" y="1" width="100" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event.
FetchEvent.navigationPreload - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload experimentalchrome full support 59edge full support ≤
79firefox ?
... opera android full support 43safari ios no support nosamsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
FileEntrySync - Web APIs
eroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfileentrysync non-standardchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤
79prefixed full support ≤
79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie no support noopera no support nosafari no support nowebview an...
...droid full support 3
7prefixed full support 3
7prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webkitfirefox android no support noopera android no support nosafari ios no support nosamsung internet android full support 1.0prefixed full support 1.0prefixed prefixed implemente...
FileSystem.name - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support
7edge full support ≤18firefox full support 50ie no support noopera full support 15safari full support 11.1webview android full support ...
... ≤3
7chrome android full support 18firefox android full support 50opera android full support 14safari ios full support 11.3samsung internet android full support 1.0legend full support full support no support no support ...
FileSystem.root - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrootchrome full support
7edge full support ≤18firefox full support 50ie no support noopera full support 15safari full support 11.1webview android full support ...
... ≤3
7chrome android full support 18firefox android full support 50opera android full support 14safari ios full support 11.3samsung internet android full support 1.0legend full support full support no support no support ...
FileSystemDirectoryEntry.getDirectory() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetdirectory experimentalchrome full support 8edge full support
79firefox full support 50notes full support 50notes notes in firefox, the errorcallback's input parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full su...
...pport 11.1webview android full support ≤3
7chrome android full support 18firefox android full support 50notes full support 50notes notes in firefox, the errorcallback's input parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support ...
FileSystemDirectoryEntry.getFile() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetfile experimentalchrome full support 8edge full support
79firefox full support 50notes full support 50notes notes in firefox, the errorcallback's input parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full su...
...pport 11.1webview android full support ≤3
7chrome android full support 18firefox android full support 50notes full support 50notes notes in firefox, the errorcallback's input parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support ...
FileSystemDirectoryEntry.removeRecursively() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoverecursively deprecatednon-standardchrome full support 8edge full support
79firefox no support 50 — 52notes no support 50 — 52notes notes while the removerecursively() method existed, it immediately called the error callback with ns_error_dom_security_err.ie no support noopera no support nosafari no support ...
... nowebview android full support ≤3
7chrome android full support 18firefox android no support 50 — 52notes no support 50 — 52notes notes while the removerecursively() method existed, it immediately called the error callback with ns_error_dom_security_err.opera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support ...
FileSystemDirectoryReader.readEntries() - Web APIs
safari full support 11.1webview android full support ≤3
7chrome android full support 18firefox android full support yesopera android no support nosafari ios full support 11.3samsung internet android ?
... on chrome
77, readentries() will only return the first 100 filesystementry instances.
FileSystemDirectoryReader - Web APIs
no support noopera full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ≤3
7alternate name full support ≤3
7alternate name alternate name uses the non-standard name: directoryreaderchrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: directoryreaderfirefox android ...
... safari full support 11.1webview android full support ≤3
7chrome android full support 18firefox android full support yesopera android no support nosafari ios full support 11.3samsung internet android ?
FileSystemEntry.getMetadata() - Web APIs
workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 10485
76) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); browser compatibility the compatibility table on this page is generated from structured data.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetmetadata experimentaldeprecatednon-standardchrome full support 8edge full support
79firefox no support noie no support noopera no support nosafari no support nowebview android full support ≤3
7chrome android full support ...
FileSystemEntry.moveTo() - Web APIs
workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 10485
76) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); browser compatibility the compatibility table on this page is generated from structured data.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmoveto experimentaldeprecatednon-standardchrome full support 8edge full support
79firefox no support noie no support noopera no support nosafari no support nowebview android full support ≤3
7chrome android full support ...
FileSystemFileEntry.createWriter() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreatewriter deprecatednon-standardchrome full support 8edge full support
79firefox no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcallback with the ns_error_dom_security_err error.ie no support noopera no support nosafari no support ...
... nowebview android full support ≤3
7chrome android full support 18firefox android no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcallback with the ns_error_dom_security_err error.opera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support n...
FocusEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/>...
...<line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
FontFace.display - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdisplay experimentalchrome full support 60edge full support
79firefox full support 58ie ?
... opera full support 4
7safari full support 11webview android full support 60chrome android full support 60firefox android no support noopera android full support 44safari ios no support nosamsung internet android full support 8.0legend full support full support no support no support ...
GainNode() - Web APIs
roperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgainnode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤
79firefox full support 53ie no support noopera full support 42safari ?
... samsung internet android full support 6.0notes full support 6.0notes notes before samsung internet
7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
HTMLAnchorElement.referrerPolicy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support 51edge full support
79firefox full support 50ie no support noopera full support 38safari full support 11.1webview android full support 51chrome android full support ...
... 51firefox android full support 50opera android full support 41safari ios no support nosamsung internet android full support
7.2legend full support full support no support no support ...
HTMLAreaElement.referrerPolicy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support 51edge full support
79firefox full support 50ie no support noopera full support 38safari full support 11.1webview android full support 51chrome android full support ...
... 51firefox android full support 50opera android full support 41safari ios no support nosamsung internet android full support
7.2legend full support full support no support no support ...
HTMLFontElement.size - Web APIs
it contains either an integer number in the range of 1-
7 or a relative value to increase/decrease the value of the size attribute of the <basefont> element.
... the format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid size number string integer number in the range of 1-
7 6 relative size string +x or -x, where x is the number relative to the value of the size attribute of the <basefont> element (the result should be in the same range of 1-
7) +2 -1 syntax sizestring = fontobj.size; fontobj.size = sizestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.size = "6"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.size .
HTMLFormControlsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,2...
...0 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlcollection.
HTMLImageElement.crossOrigin - Web APIs
const imageurl = "https://mdn.mozillademos.org/files/16
79
7/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }...
...thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 3
7.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } output { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; } result specifications specification status comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification.
HTMLImageElement.sizes - Web APIs
award-winning stuff, i'm sure.</p> <img src="/files/168
70/new-york-skyline-wide.jpg" srcset="/files/168
70/new-york-skyline-wide.jpg 3
724w, /files/16869/new-york-skyline-4by3.jpg 1961w, /files/168
71/new-york-skyline-tall.jpg 1060w" sizes="((min-width: 50em) and (max-width: 60em)) 50em, ((min-width: 30em) and (max-width: 50em)) 30em, (max-width: 30em) 20em"> <p>then there's even mo...
...i sure can't.</p> <button id="break40">last width: 40em</button> <button id="break50">last width: 50em</button> </article> css article { margin: 1em; max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #880e4f; border-radius:
7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the relevant portion of ...
HTMLImageElement.src - Web APIs
as an equivalent for specifying an image in srcset with the size multiplier 1x; that is, the image specified by src is used on low-density screens (such as typical
72 dpi or 96 dpi displays).
... examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/
7ab36d
79bb.jpg" width="160" alt="slices of grapefruit, looking yummy."> result using src with an image set when using a set of images with the srcset property, the src serves as either a fallback for older browsers, or as the 1x size of the image.
HTMLImageElement.srcset - Web APIs
<div class="box"> <img src="/files/16
79
7/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 1x, /files/16
79
7/clock-demo-400px.png 2x"> </div> css the css simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it.
...to change preferences in firefox, visit about:config.ie no support noopera full support 21safari full support 8webview android full support 3
7chrome android full support 34firefox android full support 38 full support 38 no support 32 — 52disabled disabled from version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be s...
HTMLInputElement.stepDown() - Web APIs
given <input id="mytime" type="time" max="1
7:00" step="900" value="1
7:00">, invoking mytime.step(3) will change the value to 16:15, decrementing the time by 3 * 900, or 45 minutes.
... <!-- decrements by intervals of 900 seconds (15 minute) --> <input type="time" max="1
7:00" step="900"> <!-- decrements by intervals of
7 days (one week) --> <input type="date" max="2019-12-25" step="
7"> <!-- decrements by intervals of 12 months (one year) --> <input type="month" max="2019-12" step="12"> the method, when invoked, changes the form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set within the form control.
HTMLInputElement.stepUp() - Web APIs
input type default step value example step declaration date 1 (day)
7 day (one week) increments: <input type="date" min="2019-12-25" step="
7"> month 1 (month) 12 month (one year) increments: <input type="month" min="2019-12" step="12"> week 1 (week) two week increments: <input type="week" min="2019-w23" step="2"> time 60 (seconds) 900 second (15 minute) increments: <input type="time" min="09:00" step="900...
..."> datetime-local 1 (day) same day of the week: <input type="datetime-local" min="019-12-25t19:30" step="
7"> number 1 0.1 increments <input type="number" min="0" step="0.1" max="10"> range 1 increments by 2: <input type="range" min="0" step="2" max="10"> the method, when invoked, changes the form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set on the form control.
HTMLInputElement.webkitdirectory - Web APIs
system: photoalbums birthdays jamie's 1st birthday pic1000.jpg pic1004.jpg pic1044.jpg don's 40th birthday pic2343.jpg pic2344.jpg pic2355.jpg pic2356.jpg vacations mars pic5533.jpg pic5534.jpg pic5556.jpg pic5684.jpg pic5
712.jpg if the user chooses photoalbums, then the list reported by files will contain file objects for every file listed above—but not the directories.
... note: the behavior of webkitrelativepath is different in chromium <
72.
HTMLLinkElement.as - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetas experimentalchrome full support 50edge full support 1
7firefox full support 56ie full support yesopera full support 3
7safari full support yeswebview android full support 50chrome android full support ...
... 50firefox android full support 56opera android full support 3
7safari ios full support yessamsung internet android full support 5.0legend full support full supportexperimental.
HTMLMediaElement.controlsList - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontrolslistchrome full support 58edge full support ≤
79firefox ?
... samsung internet android full support
7.0legend full support full support compatibility unknown compatibility unknown ...
HTMLOptionsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,2...
...0 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties name type description length unsigned long as optionally allowed by the spec, this property isn't read-only.
HTMLScriptElement.referrerPolicy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support
70edge full support ≤
79firefox full support 65ie no support noopera full support yessafari no support nowebview android full support ...
...
70chrome android full support
70firefox android full support 65opera android full support yessafari ios no support nosamsung internet android full support 10.0legend full support full support no support no support ...
HashChangeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
IDBCursor.request - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestchrome full support
76edge full support
79firefox full support
77ie no support noopera full support 63safari ?
... webview android full support
76chrome android full support
76firefox android no support noopera android full support 54safari ios ?
IDBDatabase.createObjectStore() - Web APIs
has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 11
76165.) constrainterror an object store with the given name (based on case-sensitive comparison) already exists in the connected database.
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support
7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.deleteObjectStore() - Web APIs
has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 11
76165.) notfounderror you are trying to delete an object store that does not exist.
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support
7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.transaction() - Web APIs
if you need to open the object store in readwrite mode to change data, you would use the following: var transaction = db.transaction('my-store-name', "readwrite"); as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112
702), which is the same behaviour as other indexeddb-supporting browsers.
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support
7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabaseException - Web APIs
transaction_inactive_err
7 a request was made against a transaction that is either not currently active or is already finished.
...oid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbdatabaseexception deprecatednon-standardchrome full support 12prefixed full support 12prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤
79prefixed full support ≤
79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support 4 — 14ie no support noopera no support nosafari no support nowebview android ...
databases - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdatabases experimentalchrome full support
71edge full support
79firefox no support nonotes no support nonotes notes see bug 934640.ie no support noopera full support 58safari no support ...
... nowebview android full support
71chrome android full support
71firefox android no support nonotes no support nonotes notes see bug 934640.opera android full support yessafari ios no support nosamsung internet android full support 10.0legend full support full support no support no supportexperimental.
IDBIndex.name - Web APIs
full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
... 22opera android full support 14safari ios full support 8samsung internet android full support 1.5renaming with name setterchrome full support yesedge full support ≤
79firefox full support 49ie ?
IDBIndex.objectStore - Web APIs
the current object store is logged to the console: it should be returned something like this: idbobjectstore { name: "contactslist", keypath: "id", indexnames: domstringlist[
7], transaction: idbtransaction, autoincrement: false } finally, we iterate through each record, and insert the data into an html table.
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support
7webview android full support yes full support yes no support ?
IDBOpenDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...ze="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits methods from its parents idbrequest and eventtarget.
IDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from eventtarget.
IDBTransaction.commit() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcommitchrome full support
76edge full support
79firefox full support
74ie no support noopera full support 63safari no support nowebview android full support ...
...
76chrome android full support
76firefox android no support noopera android full support 54safari ios no support nosamsung internet android full support 12.0legend full support full support no support no support ...
IDBTransaction.oncomplete - Web APIs
as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112
702), which is the same behaviour as other indexeddb-supporting browsers.
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support
7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
Basic concepts - Web APIs
<iframe> content) can access the indexeddb store for the origin it is embedded into, unless the browser is set to never accept third party cookies (see bug 114
7821.) definitions this section defines and explains terms used in the indexeddb api.
... as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112
702), which is the same behaviour as other indexeddb-supporting browsers.
Checking when a deadline is due - Web APIs
because these values are the most ambiguous for users to enter (
7, sunday, sun?
...here we fetch the current minutes (gives an easy numerical value), hours (gives an easy numerical value), day of the month (getdate() is needed for this, as getday() returns the day of the week, 1-
7), month (returns a number from 0-11, see below), and year (getfullyear() is needed; getyear() is deprecated, and returns a weird value that is not much use to anyone!) var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { next we create another inde...
InputEvent.dataTransfer - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdatatransfer experimentalchrome full support 60edge full support
79firefox full support 6
7ie no support noopera full support 4
7safari no support nowebview android full support 60chrome android full support ...
... 60firefox android full support 6
7opera android full support 44safari ios no support nosamsung internet android full support 8.0legend full support full support no support no supportexperimental.
InputEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="8...
...6" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline...
MediaKeyMessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediakeymessageevent() creates a new instance of mediakeymessageevent.
MediaKeySession.onkeystatuseschange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.5
714285
714285
71%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0
700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono...
...,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onkeystatuseschange = function(keystatuschange) { ...
MediaKeySession.onmessage - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.5
714285
714285
71%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0
700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"...
... text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaSessionActionDetails - Web APIs
if this property isn't present, those actions should choose a reasonable default distance to skip forward or backward (such as
7 or 10 seconds).
... audio.currenttime = math.max(audio.currenttime - skiptime, 0); }); supporting multiple actions in one handler function you can also, if you prefer, use a single function to handle multiple action types, by checking the value of the mediasessionactiondetails object's action property: let skiptime =
7; navigator.mediasession.setactionhandler("seekforward", handleseek); navigator.mediasession.setactionhandler("seekbackward", handleseek); function handleseek(details) { switch(details.action) { case "seekforward": audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); break; case "seekbackward": audio.currenttime = math.max(audio.cu...
MediaSource - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
MediaStreamTrack.applyConstraints() - Web APIs
it specifies that the page or web app needs a width between 640 and 1280 and a height between 480 and
720, with the later number in each pair being preferred.
... const constraints = { width: {min: 640, ideal: 1280}, height: {min: 480, ideal:
720}, advanced: [ {width: 1920, height: 1280}, {aspectratio: 1.333} ] }; navigator.mediadevices.getusermedia({ video: true }) .then(mediastream => { const track = mediastream.getvideotracks()[0]; track.applyconstraints(constraints) .then(() => { // do something with the track such as using the image capture api.
MediaStreamTrackEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on this interface are addtrack and removetrack properties also inherits properties from its parent interface, event.
Recording a media element - Web APIs
lines 6-
7 starts the recording process by calling recorder.start(), and outputs a message to the log with the updated state of the recorder and the number of seconds it will be recording.
... lines 1
7-18 the size and type of the recorded media are output to the log area below the two videos and the download button.
Using the MediaStream Recording API - Web APIs
we wanted to give the first two (the header and the controls) fixed heights: header { height:
70px; } .main-controls { padding-bottom: 0.
7rem; height: 1
70px; } however, we wanted to make the third area (which contains the recorded samples you can play back) take up whatever space is left, regardless of the device height.
...instead, the problem was solved by making the third container's height equal to 100% of the parent height, minus the heights and padding of the other two: .sound-clips { box-shadow: inset 0 3px 4px rgba(0,0,0,0.
7); background-color: rgba(0,0,0,0.1); height: calc(100% - 240px - 0.
7rem); overflow: scroll; } note: calc() has good support across modern browsers too, even going back to internet explorer 9.
Using the Media Capabilities API - Web APIs
framerate: 15 } }; had we been querying the decodability of an audio file, we would create an audio configuration including the number of channels and sample rate, leaving out the properties that apply only to video—namely, the dimensions and the frame rate: const audioconfiguration = { type: "file", audio: { contenttype: "audio/ogg", channels: 2, bitrate: 132
700, samplerate: 5200 } }; had we been testing encoding capabilities, we would have created a mediaencodingconfiguration, which requires the type of media being tested — either record (for recording media, i.e.
...<select id="codec"> <option>video/webm; codecs=vp8</option> <option>video/webm; codecs=vp9</option> <option>video/mp4; codecs=avc1</option> <option>video/mp4; codecs=avc1.420034</option> <option>video/ogg; codecs=theora</option> <option>invalid</option> </select> </li> <li> <label for="size">select a size</label> <select id="size"> <option>
7680x4320</option> <option>3840x2160</option> <option>2560x1440</option> <option>1920x1080</option> <option>1280x
720</option> <option selected>800x600</option> <option>640x480</option> <option>320x240</option> <option value=" x ">none</option> </select> </li> <li> <label for="framerate">select a framerate</label> <select id="framerate"...
Transcoding assets for Media Source Extensions - Web APIs
run the following commands (shown with sample output): $ python mp4-dash-encode.py -b 5 -v bunny_fragmented.mp4 encoding 5 bitrates, min bitrate = 500.0 max bitrate = 2000.0 media source: video: resolution=640x360 encoding bitrate: 500, resolution: 256x144 encoding bitrate: 8
75, resolution: 384x216 encoding bitrate: 1250, resolution: 480x2
70 encoding bitrate: 1625, resolution: 560x316 encoding bitrate: 2000, resolution: 640x360 $ python mp4-dash.py video_0* parsing media file 1: video_00500.mp4 parsing media file 2: video_008
75.mp4 parsing media file 3: video_01250.mp4 parsing media file 4: video_01625.mp4 parsing media file 5: video_02000.mp4 splitting media file (au...
...dio) video_00500.mp4 splitting media file (video) video_00500.mp4 splitting media file (video) video_008
75.mp4 splitting media file (video) video_01250.mp4 splitting media file (video) video_01625.mp4 splitting media file (video) video_02000.mp4 $ tree -l 2 output output ├── audio │ └── und ├── stream.mpd └── video ├── 1 ├── 2 ├── 3 ├── 4 └── 5 8 directories, 1 file note: mp4-dash-encode.py does not display ffmpeg error messages.
MessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/m...
...essageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="1
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">messageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor messageevent() creates a new messageevent.
Metadata.size - Web APIs
workingdirectory.getfile("log/important.log", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 10485
76) { fileentry.remove(function() { /* log file removed; do something clever here */ }); } }); }, handleerror); this api has no official w3c or whatwg specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsize experimentalnon-standardchrome full support 13edge full support ≤
79firefox no support noie no support noopera no support nosafari no support nowebview android no support nochrome android full support ...
MouseEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" ...
Navigator.productSub - Web APIs
example <script> function prodsub() { var dt = document.getelementbyid("d").childnodes[0]; dt.data = window.navigator.productsub; } </script> <button onclick="prodsub();">productsub</button> // returns: 20010
725 notes on ie, this property returns undefined.
... on apple safari and google chrome this property always returns 2003010
7.
Navigator - Web APIs
in netscape 4.
7x, returns "us & ca domestic policy" or "export policy".
... navigatorid.taintenabled() deprecated since gecko 1.
7.8 obsolete since gecko 9.0 returns false.
Using the Notifications API - Web APIs
firefox is already doing this from version
72, for example, and safari has done it for some time.
... note: before version 3
7, chrome doesn't let you call notification.requestpermission() in the load event handler (see issue 2
74284).
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment
7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attach...
...ment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment
7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl when using the webgl_depth_texture extension: ext.depth_stencil_attachment: depth and stencil buffer data storage.
OfflineAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="2
71,25 281,20 281,30 2
71,25" stroke="#d4dde4" fill="none"/><line x1="281" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mi...
PageTransitionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/p...
...agetransitionevent" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
PaymentAddress.languageCode - Web APIs
the languagecode read-only property of the paymentaddress interface returns a string containing the bcp-4
7 language code for the address.
... syntax var paymentlanguagecode = paymentaddress.languagecode; value a domstring providing the bcp-4
7 format language code indicating the language the address was written in, such as "en-us", "pt-br", or "ja-jp".
PaymentCurrencyAmount.currency - Web APIs
the value is always specified using the 3-letter codes defined by the iso 412
7 standard.
... syntax currency = paymentcurrencyamount.currency; value a domstring specifying the canonical, three-character currency identification code defined by the iso 421
7 standard.
PaymentCurrencyAmount - Web APIs
currency a string containing a valid 3-letter iso 421
7 currency identifier (iso 421
7) indicating the currency used for the payment value.
...this has been removed; instead of allowing sites to choose the standard to use, iso 421
7 is always used for the currency identifier now.
PerformanceFrameTiming - Web APIs
this means the browser should process a frame in about 16.
7ms.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceframetiming</text></a></svg></div...
PerformanceLongTaskTiming.attribution - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetattribution experimentalchrome full support 58edge full support ≤
79firefox no support noie ?
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
PerformanceMark - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 1...
...
71,20 1
71,30 161,25" stroke="#d4dde4" fill="none"/><line x1="1
71" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="2
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
PerformanceMeasure - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 1...
...
71,20 1
71,30 161,25" stroke="#d4dde4" fill="none"/><line x1="1
71" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
PerformanceNavigationTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 1...
...
71,20 1
71,30 161,25" stroke="#d4dde4" fill="none"/><line x1="1
71" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="2
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
PerformanceResourceTiming.nextHopProtocol - Web APIs
the nexthopprotocol read-only property is a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc
7301).
... syntax resource.nexthopprotocol; return value a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc
7301).
PerformanceServerTiming - Web APIs
example given a server that sends the server-timing header, for example a node.js server like this: const http = require('http'); function requesthandler(request, response) { const headers = { 'server-timing': ` cache;desc="cache read";dur=23.2, db;dur=53, app;dur=4
7.2 `.replace(/\n/g, '') }; response.writehead(200, headers); response.write(''); return settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.error); the performanceservertiming entries are now observable from javascript via the performanceresourcetiming.servertiming property: let entries = performance.getentriesbytype('...
...resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration: 53, description: ""} // 2: performanceservertiming {name: "app", duration: 4
7.2, description: ""} specifications specification status comment server timingthe definition of 'performanceservertiming' in that specification.
PhotoCapabilities.fillLightMode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilllightmode experimentalchrome full support 59edge full support ≤
79firefox ?
... samsung internet android full support
7.0legend full support full support compatibility unknown compatibility unknownexperimental.
PhotoCapabilities.imageHeight - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimageheight experimentalchrome full support 59edge full support ≤
79firefox ?
... samsung internet android full support
7.0legend full support full support compatibility unknown compatibility unknownexperimental.
imageWidth - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimagewidth experimentalchrome full support 59edge full support ≤
79firefox ?
... samsung internet android full support
7.0legend full support full support compatibility unknown compatibility unknownexperimental.
PhotoCapabilities.redEyeReduction - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetredeyereduction experimentalchrome full support 59edge full support ≤
79firefox ?
... samsung internet android full support
7.0legend full support full support compatibility unknown compatibility unknownexperimental.
PointerEvent.getCoalescedEvents() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetcoalescedevents experimentalchrome full support 58edge full support
79firefox full support 59ie no support noopera full support 45safari no support nowebview android full support 58chrome android full support ...
...to change preferences in firefox, visit about:config.opera android full support 43safari ios no support nosamsung internet android full support
7.0legend full support full support partial support partial support no support no supportexperimental.
ProgressEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
PromiseRejectionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/p...
...romiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhandled) and other details.
PublicKeyCredentialCreationOptions.pubKeyCredParams - Web APIs
-
7 indicates the elliptic curve algorithm ecdsa with sha-256).
... examples var publickey = { pubkeycredparams: [ // we would like an elliptic curve to be used if possible { type: "public-key", alg: -
7 }, // if not, then we will fallback on an rsa algorithm { type: "public-key", alg: -3
7 } ], challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", } }; navigator.credentials.create({ publickey }) .then(func...
PushEvent.PushEvent() - Web APIs
full support 1
7firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 3
7safari n...
... nochrome android full support 42firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android full support 3
7safari ios no support nosamsung internet android full support 4.0legend full support full support no support no supportexperimental.
PushEvent.data - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdata experimentalchrome full support 5
7edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.
... full support 1
7firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 44safari no support nowebview android no support nochrome android full support 5
7firefox android full support 44 full support 44 ...
PushMessageData.arrayBuffer() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetarraybuffer experimentalchrome full support 50edge full support ≤
79firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 3
7safari ...
...no support nowebview android no support nochrome android full support 50firefox android full support 48opera android full support 3
7safari ios no support nosamsung internet android full support 5.0legend full support full support no support no supportexperimental.
PushMessageData.blob() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetblob experimentalchrome full support 50edge full support ≤
79firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 3
7safari ...
...no support nowebview android no support nochrome android full support 50firefox android full support 48opera android full support 3
7safari ios no support nosamsung internet android full support 5.0legend full support full support no support no supportexperimental.
PushMessageData.json() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetjson experimentalchrome full support 50edge full support ≤
79firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 3
7safari ...
...no support nowebview android no support nochrome android full support 50firefox android full support 48opera android full support 3
7safari ios no support nosamsung internet android full support 5.0legend full support full support no support no supportexperimental.
PushMessageData.text() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettext experimentalchrome full support 50edge full support ≤
79firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 3
7safari ...
...no support nowebview android no support nochrome android full support 50firefox android full support 48opera android full support 3
7safari ios no support nosamsung internet android full support 5.0legend full support full support no support no supportexperimental.
RTCDTMFSender - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string).
RTCIceCandidate.priority - Web APIs
usage notes consider this sdp attribute line (a-line) which describes an ice candidate: a=candidate:423499
7325 1 udp 20432
78322 192.168.0.56 44323 typ host the priority is the number after the protocol, so it's the fourth field in the candidate string.
... in this example, the priority is 20432
78322.
RTCIceCredentialType - Web APIs
this process is detailed in rfc
7635.
... token authenticating with the ice server requires the use of an oauth 2.0 token as defined in rfc
7635.
RTCPeerConnection.onicecandidateerror - Web APIs
turn adds a few more error codes; see // rfc 5
766, section 15 for details.
... } else if (event.errorcode >=
700 && event.errorcode <=
799) { // server could not be reached; a specific error number is // provided but these are not yet specified.
RTCPeerConnection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtargetcantrickleicecandidatesthe read-only rtcpeercon...
RTCPeerConnectionIceErrorEvent - Web APIs
if no host candidate can reach the server, this property is set to the number
701, which is outside the range of valid stun error codes.
... the
701 error is fired only once per server url, and only while the is icegatheringstate is gathering.
RTCRtpContributingSource.source - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsourcechrome full support 59edge full support ≤
79firefox full support 59disabled full support 59disabled disabled from version 59: this feature is behind the media.peerconnection.rtpsourcesapi.enable preference (needs to be set to true).
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownuser must explicitly enable this feature.user must explicitly enable this feature.
RTCStats.timestamp - Web APIs
the time is given in milliseconds elapsed since the unix epoch (the first moment of january 1, 19
70, utc).
... syntax var timestamp = rtcstats.timestamp; value a domhighrestimestamp value indicating the time at which the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of january 1, 19
70, utc.
RadioNodeList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/nodelist" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="...
...none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist.
Range.setStart() - Web APIs
main st.<br> dodge city, ks<br> 6
7801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city ...
... html <p id="content">0123456
789</p> <p id="log"></p> javascript const element = document.getelementbyid('content'); const textnode = element.childnodes[0]; const range = document.createrange(); range.setstart(textnode, 0); // start at first character range.setend(textnode, 5); // end at fifth character document.getelementbyid('log').textcontent = range; result specifications specification status comm...
SVGGeometryElement.isPointInStroke() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> <circle cx="83" cy="1
7" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinstroke(new dompoint(10, 10))); // point in circle but not stroke console.log('point at 40,30:', circle.ispointinstroke(new dompoint(40, 30))); // point in circle stroke console.log('point at 83,1
7:', circle.ispointinstroke(new dompoi...
...nt(83, 1
7))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinstroke()' in that specification.
SVGPreserveAspectRatio - Web APIs
n unsigned short meetorslice constants svg_preserveaspectratio_unknown = 0 svg_preserveaspectratio_none = 1 svg_preserveaspectratio_xminymin = 2 svg_preserveaspectratio_xmidymin = 3 svg_preserveaspectratio_xmaxymin = 4 svg_preserveaspectratio_xminymid = 5 svg_preserveaspectratio_xmidymid = 6 svg_preserveaspectratio_xmaxymid =
7 svg_preserveaspectratio_xminymax = 8 svg_preserveaspectratio_xmidymax = 9 svg_preserveaspectratio_xmaxymax = 10 svg_meetorslice_unknown = 0 svg_meetorslice_meet = 1 svg_meetorslice_slice = 2 normative document svg 1.1 (2nd edition) constants name value description svg_preserveaspectratio_unknown 0 ...
... svg_preserveaspectratio_xmaxymid
7 corresponds to value xmaxymid for attribute preserveaspectratio.
SVGTransformList - Web APIs
esvgtransform(); scale.setscale(0.8,0.8); // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); tfmlist.appenditem(rotate); tfmlist.appenditem(scale); } ]]> </script> <polygon fill="orange" stroke="black" stroke-width="5" points="100,225 100,115 130,115
70,15
70,15 10,115 40,115 40,225" onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" onclick="transformme(evt)"/> <text x="40" y="250" font-family="verdana" font-size="16" fill="green" > click on a shape to transform it </text> </svg> live preview: specifications specifi...
... yesopera android full support yessafari ios full support yessamsung internet android full support yeslength non-standardchrome full support yesedge full support ≤
79firefox full support 9ie ?
ServiceWorkerRegistration.navigationPreload - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload experimentalchrome full support 59edge full support 1
7 full support 1
7 full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.firefox full support 44notes full support 44notes notes extended support releases (esr) bef...
...ore firefox
78 esr do not support service workers and the push api.ie no support noopera full support 46safari full support 11.1webview android full support 59chrome android full support 59firefox android full support 44opera android full support 43safari ios full support 11.3samsung internet android full support 4.0legend full support ...
SharedWorkerGlobalScope.applicationCache - Web APIs
important: application cache is deprecated as of firefox 44, and is no longer available in insecure contexts from firefox 60 onwards (bug 13541
75, currently nightly/beta only).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetapplicationcachechrome full support 4edge full support ≤
79firefox full support 29ie no support noopera full support 10.6safari no support nowebview android full support yeschrome android full support ...
Slottable - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetslottable experimentalchrome full support 53edge full support
79firefox full support 63 full support 63 no support 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
...bout:config.opera android full support 41safari ios full support 10.3samsung internet android full support 6.0assignedslot experimentalchrome full support 53edge full support
79firefox full support 63 full support 63 no support 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
SourceBuffer - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
SourceBufferList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list.
StaticRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="131,25 141,20 ...
... 141,30 131,25" stroke="#d4dde4" fill="none"/><line x1="141" y1="25" x2="1
71" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="1
71" y="1" width="110" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the default values for its properties.
StereoPannerNode.StereoPannerNode() - Web APIs
fariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstereopannernode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤
79firefox full support 53ie no support noopera full support 42safari no support nowebview android full support 55notes full support ...
...ndroid full support 53opera android full support 42safari ios no support nosamsung internet android full support 6.0notes full support 6.0notes notes before samsung internet
7.0, the default values were not supported.legend full support full support no support no supportsee implementation notes.see implementation notes.
StorageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4...
...dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="1
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description key domstring repres...
SubtleCrypto.sign() - Web APIs
rsassa-pkcs1-v1_5 the rsassa-pkcs1-v1_5 algorithm is specified in rfc 344
7.
... rsa-pss the rsa-pss algorithm is specified in rfc 344
7.
SyncEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.5
714285
714285
71%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0
700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text><...
.../a><polyline points="
76,25 86,20 86,30
76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 2
76,20 2
76,30 266,25" stroke="#d4dde4" fill="none"/><line x1="2
76" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" fon...
TaskAttributionTiming.containerId - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontainerid experimentalchrome full support 58edge full support ≤
79firefox no support noie ?
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
TaskAttributionTiming.containerType - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontainertype experimentalchrome full support 58edge full support ≤
79firefox no support noie ?
... samsung internet android full support
7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
TaskAttributionTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 1...
...
71,20 1
71,30 161,25" stroke="#d4dde4" fill="none"/><line x1="1
71" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
TextDecoder - Web APIs
let utf8decoder = new textdecoder(); // default 'utf-8' or 'utf8' let u8arr = new uint8array([240, 160, 1
74, 183]); let i8arr = new int8array([-16, -96, -82, -
73]); let u16arr = new uint16array([41200, 4
7022]); let i16arr = new int16array([-24336, -18514]); let i32arr = new int32array([-1213292304]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8arr)); console.log(utf8decoder.decode(u16arr)); console.log(utf8decoder.decode(i16arr)); console.log(utf8decoder.decode(i32arr)); ...
... let win1251decoder = new textdecoder('windows-1251'); let bytes = new uint8array([20
7, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33]); console.log(win1251decoder.decode(bytes)); // Привет, мир!
TextEncoder - Web APIs
example const encoder = new textencoder() const view = encoder.encode('€') console.log(view); // uint8array(3) [226, 130, 1
72] constructor textencoder() returns a newly constructed textencoder that will generate a byte stream with utf-8 encoding.
... resarr[respos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); continue; } } else { resarr[respos += 1] = 0xef/*0b11101111*/; resarr[respos += 1] = 0xbf/*0b10111111*/; resarr[respos += 1] = 0xbd/*0b10111101*/; continue; } } if (point <= 0x00
7f) { resarr[respos += 1] = (0x0/*0b0*/<<
7) | point; } else if (point <= 0x0
7ff) { resarr[respos += 1] = (0x6/*0b110*/<<5) | (point>>>6); resarr[respos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); } else { resarr[respos += 1] = (0xe/*0b1110*/<<4) | (point>>>12); resarr[respos += 1] = (...
TimeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" stroke="#...
...d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="116" y="1" width="90" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event.
TouchEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" ...
UIEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors uievent() creates a uievent object.
URLUtilsReadOnly - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneturlutilsreadonlychrome no support noedge no support nofirefox full support 5
7 full support 5
7 no support 3.5 — 5
7notes notes firefox has a bug whereby single quotes contained in urls are escaped when accessed via url apis (see bug 1386683).ie no support noopera no support nosafari no support ...
... nowebview android no support nochrome android no support nofirefox android full support 5
7 full support 5
7 no support 4 — 5
7notes notes firefox has a bug whereby single quotes contained in urls are escaped when accessed via url apis (see bug 1386683).opera android no support nosafari ios no support nosamsung internet android no support nohash experimentalchrome no support noedge ...
WaveShaperNode.WaveShaperNode() - Web APIs
safariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwaveshapernode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤
79firefox full support 53ie no support noopera full support 42safari ?
... samsung internet android full support 6.0notes full support 6.0notes notes before samsung internet
7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
WebGL2RenderingContext.samplerParameter[if]() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsamplerparameterichrome full support 56edge full support
79firefox full support 51ie no support noopera full support 43safari no support nowebview android full support 58chrome android full support ...
... 58firefox android full support 51opera android full support 43safari ios no support nosamsung internet android full support
7.0legend full support full support no support no support ...
WebGLContextEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="
76,25 86,20 86,30
76,25" st...
...roke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="1
70" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits properties from its parent interface, event.
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment
7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webg...
...l ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment
7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl renderbuffertarget a glenum specifying the binding point (target) for the render buffer.
WebGLRenderingContext.framebufferTexture2D() - Web APIs
gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment
7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webg...
...l ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment
7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl when using the webgl_depth_texture extension: gl.depth_stencil_attachment: depth and stencil buffer data storage.
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment
7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webg...
...l ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment
7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl pname a glenum specifying information to query.
WebGLRenderingContext.getUniformLocation() - Web APIs
gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(uglobalcolor, [0.1, 0.
7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the resulting animation in action.
... finally, the uniform uglobalcolor is set to the color [0.1, 0.
7, 0.2, 1.0], the components in this 4-component vector represent the values of red, green, blue, and alpha, respectively.
Creating 3D objects using WebGL - Web APIs
const indices = [ 0, 1, 2, 0, 2, 3, // front 4, 5, 6, 4, 6,
7, // back 8, 9, 10, 8, 10, 11, // top 12, 13, 14, 12, 14, 15, // bottom 16, 1
7, 18, 16, 18, 19, // right 20, 21, 22, 20, 22, 23, // left ]; // now send the element array to gl gl.bufferdata(gl.element_array_buffer, new uint16array(indices), gl.static_draw); return { position: positionbuffer, color: colorbuffer, indices: ind...
... finally, let's replace our variable squarerotation by cuberotation and add a second rotation around the x axis: mat4.rotate(modelviewmatrix, modelviewmatrix, cuberotation * .
7, [0, 1, 0]); at this point, we now have an animated cube rotating, its six faces rather vividly colored.
Rendering and the WebXR frame animation callback - Web APIs
for example, a 60 hz display has 1/60th of a second to render a single frame, or 0.016666
7 seconds.
... the typical human's pupillary distance—the distance between the centers of the pupils—is between 54 and
74 millimeters (0.054 to 0.0
74 meters).
Background audio processing using AudioWorklet - Web APIs
the second parameter is named frequency and defaults to 440.0, with a range from 2
75 to 4186.009, inclusively.
... static get parameterdescriptors() { return [ { name: "gain", defaultvalue: 0.5, minvalue: 0, maxvalue: 1 }, { name: "frequency", defaultvalue: 440.0; minvalue: 2
7.5, maxvalue: 4186.009 } ]; } accessing your processor node's parameters is as simple as looking them up in the parameters object passed into your implementation of process().
Web Authentication API - Web APIs
smith" }, pubkeycredparams: [{ type: "public-key", alg: -
7 }], attestation: "direct", timeout: 60000, challenge: new uint8array([ // must be a cryptographically random number sent from a server 0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x1
7, 0x1a, 0x98, 0x6a, 0x
73, 0x
71, 0x9d, 0x43, 0x48, 0xd5, 0xa
7, 0x6a, 0x15, 0x
7e, 0x38, 0x94, 0x52, 0x
77, 0x9
7, 0x0f, 0xef ]).buf...
...fer } }; // sample arguments for login var getcredentialdefaultargs = { publickey: { timeout: 60000, // allowcredentials: [newcredential] // see below challenge: new uint8array([ // must be a cryptographically random number sent from a server 0x
79, 0x50, 0x68, 0x
71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15, 0x6
7, 0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x
78, 0x2e, 0xd5, 0x6f, 0x81, 0x26, 0xe2, 0xa6, 0x01, 0x
7d, 0x
74, 0x50 ]).buffer }, }; // register / create a new credential navigator.credentials.create(createcredentialdefaultargs) .then((cred) => { console.log("new credential", cred); // normally the credential ids available for an account would come from a server // but we can just c...
Using Web Workers - Web APIs
note: in firefox, shared workers cannot be shared between documents loaded in private and non-private windows (bug 11
77621).
... passing data by transferring ownership (transferable objects) google chrome 1
7+ and firefox 18+ contain an additional way to pass certain types of objects (transferable objects, that is objects implementing the transferable interface) to or from a worker with high performance.
window.cancelIdleCallback() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcancelidlecallback experimentalchrome full support 4
7edge full support
79firefox full support 55 full support 55 full support 53disabled disabled from version 53: this feature is behind the dom.requestidlecallback.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support yessafari no support nowebview android full support 4
7chrome android full support 4
7firefox android full support 55 full support 55 full support 53disabled disabled from version 53: this feature is behind the dom.requestidlecallback.enabled preference (needs to be set to true).
Window.devicePixelRatio - Web APIs
a value of 1 indicates a classic 96 dpi (
76 dpi on some platforms) display, while a value of 2 is expected for hidpi/retina displays.
... other values may be returned as well in the case of unusually low resolution displays or, more often, when a screen has a higher pixel depth than simply double the standard resolution of 96 or
76 dpi.
Window.event - Web APIs
full support 1edge full support 12firefox full support 63notes disabled full support 63notes disabled notes this was briefly enabled by default in 65, then removed again while related compatibility issues are sorted out (see bug 1520
756).disabled from version 63: this feature is behind the dom.window.event.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie full support 4opera full support
7safari full support 1.1webview android full support 1chrome android full support 18firefox android full support 63notes disabled full support 63notes disabled notes this was briefly enabled by default in 65, then removed again while related compatibility issues are sorted out (see bug 1520
756).disabled from version 63: this feature is behind the dom.window.event.enabled preference (needs to ...
Window.navigator - Web APIs
if (susrag.indexof("firefox") > -1) { sbrowser = "mozilla firefox"; // "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:61.0) gecko/20100101 firefox/61.0" } else if (susrag.indexof("samsungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.180610.011) applewebkit/53
7.36 (khtml, like gecko) samsungbrowser/9.4 chrome/6
7.0.3396.8
7 mobile safari/53
7.36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/53
7.36 (khtml, like gecko) chrome/
70.0.3538.102 safari/53
7.36 opr/5
7.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft inter...
...net explorer"; // "mozilla/5.0 (windows nt 10.0; wow64; trident/
7.0; .net4.0c; .net4.0e; zoom 3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { sbrowser = "microsoft edge"; // "mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/53
7.36 (khtml, like gecko) chrome/58.0.3029.110 safari/53
7.36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_64) applewebkit/53
7.36 (khtml, like gecko) ubuntu chromium/66.0.3359.181 chrome/66.0.3359.181 safari/53
7.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 980x1306" } ...
Privileged features - Web APIs
the dependent feature is currently under revision to be removed (bug 21486
7) in msie 6, the nearest equivalent to this feature is the showmodelessdialog() method.
...mozilla 1.2+ and netscape
7.1 will render the other menu system commands (in ff 1.0 and in ns
7.0x, the command system menu is not identified with the firefox/ns
7.0x icon on the left end of the titlebar: that's probably a bug.
Window.personalbar - Web APIs
syntax objref =window.personalbar example fixme: https://bugzilla.mozilla.org/show_bug.cgi?id=
790023 the following complete html example shows the way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
...enableprivilege is disabled in firefox 15 and will be removed in firefox 1
7.
window.requestIdleCallback() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestidlecallback experimentalchrome full support 4
7edge full support
79firefox full support 55notes full support 55notes notes enabled by default.
... no support 53 — 55notes notes implemented but disabled by default.ie no support noopera full support 34safari no support nowebview android full support 4
7chrome android full support 4
7firefox android full support 55notes full support 55notes notes enabled by default.
Window.scrollBy() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollbychrome full support 1edge full support
79 full support
79 no support 12 —
79notes notes only scrollby(x-coord, y-coord) is supported.firefox full support 1ie partial support 11notes partial support 11notes notes only scrollby(x-coord, y-coord) is supported.opera ...
... 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0scrolltooptions parameterchrome full support 45edge full support
79firefox full support yesie no support noopera full support 32safari no support nowebview android full support 45chrome android full support ...
Window - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/window" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095...
...since firefox 5
7 (initially nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.
WindowOrWorkerGlobalScope.fetch() - Web APIs
in chrome the default is follow (before chrome 4
7 it defaulted to manual).
... integrity contains the subresource integrity value of the request (e.g., sha256-bpfbw
7ivv8q2jlit13fxdyae2tjllusrsz2
73h2nfse=).
WorkerGlobalScope.navigator - Web APIs
ould basically be the equivalent of self.console.log(self.navigator);, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), you will get a workernavigator object written to the console — something like the following: object {online: true, useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) ap…ml, like gecko) chrome/40.0.2214.93 safari/53
7.36", product: "gecko", platform: "macintel", appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebki…ml, like gecko) chrome/40.0.2214.93 safari/53
7.36"…} appcodename: "mozilla" appname: "netscape" appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebkit/53
7.36 (khtml, like gecko) chrome/40.0.2214.93 safari/53
7.36" hardwareconcurrency: 4 online: true pla...
...tform: "macintel" product: "gecko" useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) applewebkit/53
7.36 (khtml, like gecko) chrome/40.0.2214.93 safari/53
7.36" __proto__: object you could use this navigator object to return more information about the runtime envinronment, as you might do with a normal navigator object.
Sending and Receiving Binary Data - Web APIs
var filestream = load_binary_resource(url); var abyte = filestream.charcodeat(x) & 0xff; // throw away high-order byte (f
7) the example above fetches the byte at offset x within the loaded binary data.
... var req = new xmlhttprequest(); req.open("post", url, true); // set headers and mime-type appropriately req.setrequestheader("content-length",
741); req.sendasbinary(abody); line 4 sets the content-length header to
741, indicating that the data is
741 bytes long.
Using XMLHttpRequest in IE6 - Web APIs
however, in ie
7 and other browsers xmlhttprequest is a native javascript object.
... in all modern browsers, you can create a new xmlhttprequest object using the following code: var request = new xmlhttprequest() however, if you need to also support internet explorer 6 and older, you need to extend your code like this: if (window.xmlhttprequest) { //firefox, opera, ie
7, and other browsers will use the native object var request = new xmlhttprequest(); } else { //ie 5 and 6 will use the activex control var request = new activexobject("microsoft.xmlhttp"); } see also using xmlhttprequest ...
XMLHttpRequest() - Web APIs
non-standard firefox syntax firefox 16 added a non-standard parameter to the constructor that can enable anonymous mode (see bug 6926
77).
...this only works in privileged (reviewed) apps (bug 6926
77); it does not work on arbitrary webpages loaded in firefox ...
XMLHttpRequestEventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="2
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
now the width and height of the frame buffer are 50% what they were before, resulting in a total frame buffer size of 1280 by
720 pixels, with each eye's half of the buffer being 640x
720 pixels.
... now we can see the coordinates of each of the viewports representing these two views: since each eye gets half of the frame buffer, the result is that the left eye gets a 640x
720 portion of the buffer with the viewport's x and y at 0, the width at 640, and the height set to
720.
XSL Transformations in Mozilla FAQ - Web APIs
note: starting in gecko
7.0, both text/xsl and application/xslt+xml are supported mime types for xslt media stylesheets.
...sadly, current builds don't error, but just give unexpected results, like crashes (bug 202
765).
ARIA live regions - Accessibility
for instance, when the clock changes from "1
7:33" to "1
7:34", assistive technologies will only announce "4", which won't be very useful to users.
..."time: 1
7:34").
ARIA: timer role - Accessibility
for instance, when the clock changes from "1
7:33" to "1
7:34", assistive technologies will only announce "4", which won't be very useful to users.
..."time: 1
7:34").
ARIA: gridcell role - Accessibility
div role="columnheader" aria-colindex="5">city</div> <div role="columnheader" aria-colindex="6">zip</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell" aria-colindex="1">debra</div> <div role="gridcell" aria-colindex="2">burks</div> <div role="gridcell" aria-colindex="5">new york</div> <div role="gridcell" aria-colindex="6">1412
7</div> </div> </div> … </div> describing the position of gridcells when the overall structure is unknown in situations where the table-style grouping of content does not provide information about the columns and rows, gridcells must have their positions programatically described by using aria-describedby.
...v> <div role="columnheader">length of day (hours)</div> <div role="columnheader">distance from sun (10<sup>6</sup>km)</div> <div role="columnheader">number of moons</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell">jupiter</div> <div role="gridcell">142,984</div> <div role="gridcell">9.9</div> <div role="gridcell">
778.6</div> <div role="gridcell">6
7</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell">saturn</div> <div role="gridcell">120,536</div> <div role="gridcell">10.
7</div> <div role="gridcell">1433.5</div> <div role="gridcell">62</div> </div> </div> </div> accessibility concerns support for gridcell and certain gridcel...
ARIA: row role - Accessibility
<span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">6
7 million</span> </div> </div> </div> description the element role="row" is a row within a grid, table or treegrid, and optionally within a rowgroup, that is a container for one or more cells, gridcells, columnheaders, or rowheaders within a static tabular structure.
...for example, if a table has 1,500 rows, but only the header and rows 4
7 and 52 are in the dom, aria-rowindex="1" would be set on the header row, and aria-rowindex="4
7" and aria-rowindex="52" would be set on the 4
7th and 52nd row, respectively.
Cognitive accessibility - Accessibility
to this end, they define 1
7 specific guidelines, of which six are especially relevant for cognitive accessibility.
...this means it should be easily understood by a native english speaker aged 16 to 1
7.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
common examples are button, listbox, combobox, msctls_statusbar32, msctls_trackbar32, #32
770 (dialog class), systreeview32, static, edit and richedit.
...ts parent's window handle and then implement its get_accparent() method to return the results of accessibleobjectfromwindow(mparenthwnd objid_window, iid_iaccessible, &ptr); not all msaa objects implemented by 3rd party vendors problem: as described above, screen readers tend to look first for window classes they know, such as button, listbox, combobox, msctls_statusbar32, msctls_trackbar32, #32
770 (dialog class), systreeview32, static, edit and richedit.
Color contrast - Accessibility
when designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1
7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text.
... text and its background should have a contrast ratio of at least
7:1.
-moz-outline-radius - CSS: Cascading Style Sheets
html <p>this element has a rounded outline!</p> css p { margin: 5px; border: 1px solid black; outline: dotted red; -moz-outline-radius: 12% 1em 25px; } result notes dotted or dashed radiused corners were rendered as solid until firefox 50, bug 382
721 future versions of gecko/firefox may drop this property completely.
... see bug 593
71
7.
:read-only - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:read-onlychrome full support 1edge full support 13firefox full support
78 full support
78 full support 1.5prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 9safari full support 4webview android ...
... full support ≤3
7chrome android full support 18firefox android full support 4prefixed full support 4prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 10.1safari ios full support 3.2samsung internet android full support 1.0legend full support full support no support no supportrequires a vendor prefix or different name for use.requires a vendor prefix or ...
:read-write - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:read-writechrome full support 1edge full support 13firefox full support
78 full support
78 full support 1.5prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 9safari full support 4webview android ...
... full support ≤3
7chrome android full support 18firefox android full support 4prefixed full support 4prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 10.1safari ios full support 3.2samsung internet android full support 1.0legend full support full support no support no supportrequires a vendor prefix or different name for use.requires a vendor prefix or ...
:target - CSS: Cascading Style Sheets
isn't that delightful?</p> css p:target { background-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font:
70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
...: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.
7); content: ""; cursor: default; } result specifications specification status comment html living standardthe definition of ':target' in that specification.
:visited - CSS: Cascading Style Sheets
1.0:visited no longer matches <link> elementschrome full support 1notes full support 1notes notes chromium has never matched <link> elements with link pseudo-classes.edge full support 12firefox full support
70ie no support noopera full support 15notes full support 15notes notes chromium has never matched <link> elements with link pseudo-classes.safari full support 12webview android full support ...
...dge full support 12firefox full support 4ie full support 8opera full support 15safari full support 5webview android full support 3
7chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 4.2samsung internet android full support 1.0legend ...
range - CSS: Cascading Style Sheets
for extends systems, the range is whatever auto would produce for the extended system; if extending a complex predefined style (§
7 complex predefined counter styles), the range is the style’s defined range.
...lueas specified formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-multi-example { system: cyclic; symbols: "\25a0" "\25a1"; range: 2 4,
7 9; } .list { list-style: range-multi-example; } the above list will display as follows: 1.
symbols - CSS: Cascading Style Sheets
symbols: a b c d e; symbols: "\24b6" "\24b
7" "\24b8" d e; symbols: "0" "1" "2" "4" "5" "6" "
7" "8" "9"; symbols: url('first.svg') url('second.svg') url('third.svg'); symbols: indic-numbers; the symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed.
...ular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting counter symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style symbols-example { system: fixed; symbols: a "1" "\24b
7" d e; } .list { list-style: symbols-example; } result specifications specification status comment css counter styles level 3the definition of 'symbols' in that specification.
font-variation-settings - CSS: Cascading Style Sheets
syntax /* use the default settings */ font-variation-settings: normal; /* set values for opentype axis names */ font-variation-settings: "xhgt" 0.
7; values normal text is laid out using default settings.
...if the <string> has more or fewer characters or contains characters outside the u+20 - u+
7e codepoint range, the whole property is invalid.
prefers-reduced-motion - CSS: Cascading Style Sheets
in windows
7: control panel > ease of access > make the computer easier to see > turn off all unnecessary animations (when possible).
...*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); }
75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment media queries level 5the definition of 'prefers-reduced-motion' in that specification.
@viewport - CSS: Cascading Style Sheets
note: see https://github.com/w3c/csswg-drafts/issues/4
766 for discussion around @viewport's removal from the standards track.
... formal syntax @viewport { <group-rule-body> } examples setting viewport size, zoom, and orientation @viewport { min-width: 640px; max-width: 800px; } @viewport { zoom: 0.
75; min-zoom: 0.5; max-zoom: 0.9; } @viewport { orientation: landscape; } specifications specification status comment css round display level 1the definition of '@viewport' in that specification.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f
76
70
7; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column: 1; grid-row: 2; } <div class="wrapper"> <div class="box box1"><a...
... the concept of visual display following document source order is detailed in the wcag techniques for success criteria – technique c2
7.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
@media (min-width:
700px) { .wrapper { grid-template-columns: 1fr 4fr 1fr; grid-template-areas: "header header header" "nav content sidebar" "nav content ad" "footer footer footer" } nav ul { flex-direction: column; } } the three-column layout has two 1fr unit side columns and a middle column that has 4fr as the track size.
... @media (min-width:
700px) { .main-nav { grid-column: col-start / span 2; grid-row: 2 / 4; } .content { grid-column: col-start 3 / span 8; grid-row: 2 / 4; } .side { grid-column: col-start 11 / span 2; grid-row: 2; } .ad { grid-column: col-start 11 / span 2; grid-row: 3; } .main-footer { grid-column: col-start / span 12; } nav ul { flex-direction: column; ...
Subgrid - CSS: Cascading Style Sheets
important: this feature is shipped in firefox
71, which is currently the only browser to implement subgrid.
... i place .item from column line 2 to
7, and row 2 to 4.
Using z-index - CSS: Cascading Style Sheets
5; </div> <div id="rel1"> <b>div #2</b> <br />position: relative; <br />z-index: 3; </div> <div id="rel2"> <b>div #3</b> <br />position: relative; <br />z-index: 2; </div> <div id="abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #5</b> <br />no positioning <br />z-index: 8; </div> css div { padding: 10px; opacity: 0.
7; text-align: center; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #900; background-color: #fdd; } #rel1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #rel2 { z-index: 2...
...; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #abs2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #900; background-color: #fdd; } #sta1 { z-index: 8; height:
70px; border: 1px dashed #996; background-color: #ffc; margin: 0px 50px 0px 50px; } ...
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
source: no dimensions or intrinsic ratio given this css: background: url(no-dimensions-or-ratio.svg); background-size: 125px 1
75px; the rendered output would look like this: source: one specified dimension, no intrinsic ratio given this css: background: url(100px-wide-no-height-or-ratio.svg); background-size: 250px 150px; the rendered output would look like this: source: one specified dimension with intrinsic ratio given this css: background: url(100px-height-3x4-ratio.svg); background-size: 2
75px 125px; t...
... background: url(100px-height-3x4-ratio.svg); background-size: auto auto; the rendered output looks like this: since this image has an explicit 100 pixel height, the 3:4 ratio explicitly sets its width at
75 pixels, so that's how it's rendered in the auto case.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
t { background-color: var(--main-bg-color); } first steps with custom properties let's start with this simple css that applies the same color to elements of different classes: .one { color: white; background-color: brown; margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height:
70px; display: inline-block; } .three { color: white; background-color: brown; margin: 10px; width:
75px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; } we'll apply it to this html: <div> <div class="one">1:</div> <div class="two">2: text <span class="five">5 - more text</span></div> <input class="three...
...y on the :root pseudo-class and using it where needed throughout the document, a css author can reduce the need for repetition: :root { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height:
70px; display: inline-block; } .three { color: white; background-color: var(--main-bg-color); margin: 10px; width:
75px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-color: var(--main-bg-color); } <div> <div class="one"></div> <div class="two">text <span class="five">- more text</span></div> <inp...
animation-delay - CSS: Cascading Style Sheets
full support 43 full support 3prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12firefox full support 16notes full support 16notes notes before firefox 5
7, firefox does not repaint elements outside the viewport that are animated into the viewport with a delay.
... 9 full support 9 full support 4prefixed prefixed implemented with the vendor prefix: -webkit-webview android full support 43 full support 43 full support ≤3
7prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 43 full support 43 full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support 16 ...
backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(
70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied to the backdrop.
...mples css .box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/45
74), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 1
72)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result specification...
backface-visibility - CSS: Cascading Style Sheets
</p> </td> </tr> </table> css /* classes that will show or hide the three back faces of the "cube" */ .showbf div { backface-visibility: visible; } .hidebf div { backface-visibility: hidden; } /* define the container div, the cube div, and a generic face */ .container { width: 150px; height: 150px; margin:
75px 0 0
75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on dir...
...ection */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.
7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.
7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.
7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.
7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; } result specifications specification status commen...
background-attachment - CSS: Cascading Style Sheets
</p> css p { background-image: url("https://mdn.mozillademos.org/files/1205
7/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/1205
7/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-attachment' in that specification.
background-color - CSS: Cascading Style Sheets
que */ background-color: #bf0; /* fully opaque shorthand */ background-color: #11ffee00; /* fully transparent */ background-color: #1fe0; /* fully transparent shorthand */ background-color: #11ffeeff; /* fully opaque */ background-color: #1fef; /* fully opaque shorthand */ /* rgb value */ background-color: rgb(255, 255, 128); /* fully opaque */ background-color: rgba(11
7, 190, 218, 0.5); /* 50% transparent */ /* hsl value */ background-color: hsl(50, 33%, 25%); /* fully opaque */ background-color: hsla(50, 33%, 25%, 0.
75); /*
75% transparent */ /* special keyword values */ background-color: currentcolor; background-color: transparent; /* global values */ background-color: inherit; background-color: initial; background-color: unset; the background-co...
...xampleone"> lorem ipsum dolor sit amet, consectetuer </div> <div class="exampletwo"> lorem ipsum dolor sit amet, consectetuer </div> <div class="examplethree"> lorem ipsum dolor sit amet, consectetuer </div> css .exampleone { background-color: teal; color: white; } .exampletwo { background-color: rgb(153,102,153); color: rgb(255,255,204); } .examplethree { background-color: #
777799; color: #ffffff; } result specifications specification comment feedback css backgrounds and borders module level 3the definition of 'background-color' in that specification.
background-image - CSS: Cascading Style Sheets
to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/
7693/catfront.png'); values none is a keyword denoting the absence of images.
... </p> <p>and no more.</p> </div> css p { font-size: 1.5em; color: #fe
7f88; background-image: none; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/645
7/mdn_logo_only_color.png"); } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/
7693/catfront.png"); background-color: transparent; } result s...
background-size - CSS: Cascading Style Sheets
s originally implemented an older draft of css3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.webview android full support 2.3 full support 2.3 full support ≤3
7prefixed notes prefixed implemented with the vendor prefix: -webkit-notes webkit-based browsers originally implemented an older draft of css3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.chrome android full support 18 full support ...
...e full support 12firefox full support 3.6ie full support 9opera full support 10safari full support 5webview android full support 3
7chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 4.2samsung internet android full support 1.0legend ...
<basic-shape> - CSS: Cascading Style Sheets
a pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of
75% apiece) define a shape enclosing no area.
...ground: repeating-linear-gradient(red, orange 50px); clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); animation: 4s poly infinite alternate ease-in-out; margin: 10px auto; } @keyframes poly { from { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); } to { clip-path: polygon(50% 30%, 100% 0%,
70% 50%, 100% 100%, 50%
70%, 0% 100%, 30% 50%, 0% 0%); } } result specifications specification status comment css shapes module level 1the definition of '<basic-shape>' in that specification.
border-bottom-style - CSS: Cascading Style Sheets
tax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples demonstrating all border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b
7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px; background-color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: d...
...otted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b
7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} .b10 {border-bottom-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-style' in that specification.
border-left-style - CSS: Cascading Style Sheets
nimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b
7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} ...
....b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b
7 {border-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} .b10 {border-left-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-style' in that specification.
border-style - CSS: Cascading Style Sheets
html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b
7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px; background-color: #52e396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashe...
...d;} .b5 {border-style:solid;} .b6 {border-style:double;} .b
7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {border-style:outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-style' in that specification.
border-top-style - CSS: Cascading Style Sheets
nimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b
7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 ...
...{border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b
7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
clip - CSS: Cascading Style Sheets
cified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 1
75px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/151
74f3500.jpg" title="original graphic"> <img id="top-left" src="https://udn.realityripple.com/samples/8f/151
74f3500.jpg" title="graphic clipped to upper l...
...eft"> <img id="middle" src="https://udn.realityripple.com/samples/8f/151
74f3500.jpg" title="graphic clipped towards middle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/151
74f3500.jpg" title="graphic clipped to bottom right"> </p> result specifications specification status comment css masking module level 1the definition of 'clip' in that specification.
font-feature-settings - CSS: Cascading Style Sheets
if it has more or less characters, or if it contains characters outside the u+20 – u+
7e codepoint range, the whole property is invalid.
...gs: "hist"; } /* disable common ligatures, usually on by default */ .noligs { font-feature-settings: "liga" 0; } /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set
7 */ .fancystyle { font-family: gabriola; /* available on windows
7, and on mac os */ font-feature-settings: "ss0
7"; } specifications specification status comment css fonts module level 3the definition of 'font-feature-settings' in that specification.
font-size-adjust - CSS: Cascading Style Sheets
is really specifying that the lowercase letters of the font should be
7px high (0.5 × 14px).
...to change preferences in chrome, visit chrome://flags.edge full support
79disabled full support
79disabled disabled from version
79: this feature is behind the enable experimental web platform features preference.firefox full support 40 full support 40 full support 3notes notes before firefo...
font-size - CSS: Cascading Style Sheets
if the font-size you want is 12px, then you should specify 0.
75em (because 12/16 = 0.
75).
... similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.3
75em (22/16).
font-stretch - CSS: Cascading Style Sheets
keyword to numeric mapping the table below shows the mapping between keyword values and numeric percentages: keyword percentage ultra-condensed 50% extra-condensed 62.5% condensed
75% semi-condensed 8
7.5% normal 100% semi-expanded 112.5% expanded 125% extra-expanded 150% ultra-expanded 200% description some font families offer additional faces in which the characters are narrower than the normal face (condensed faces) or wider than the normal face (expanded faces).
... the table below demonstrates the effect of supplying various different percentage values of font-stretch on two different fonts: 50% 62.5%
75% 8
7.5% 100% 112.5% 125% 150% 200% helvetica neue league mono variable helvetica neue, which is installed by default on macos, has a single condensed face in addition to the normal face.
font-variant-numeric - CSS: Cascading Style Sheets
oldstyle-nums activating the set of figures where some numbers, like 3, 4,
7, 9 have descenders.
...class="ordinal">1st, 2nd, 3rd, 4th, 5th</p> css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15
75
7/sourcesanspro-regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-numeric' in that specification.
font-variation-settings - CSS: Cascading Style Sheets
syntax /* use the default settings */ font-variation-settings: normal; /* set values for variable font axis names */ font-variation-settings: "xhgt" 0.
7; /* global values */ font-variation-settings: inherit; font-variation-settings: initial; font-variation-settings: unset; values this property's value can take one of two forms: normal text is laid out using default settings.
...if the <string> has more or fewer characters or contains characters outside the u+20 - u+
7e codepoint range, the whole property is invalid.
height - CSS: Cascading Style Sheets
syntax /* keyword value */ height: auto; /* <length> values */ height: 120px; height: 10em; /* <percentage> value */ height:
75%; /* global values */ height: inherit; height: initial; height: unset; values <length> defines the height as an absolute value.
... </div> </div> css div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width:
75%; } result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification.
image-set() - CSS: Cascading Style Sheets
xinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimage-set()chrome full support 21prefixed full support 21prefixed prefixed implemented with the vendor prefix: -webkit-edge full support
79prefixed full support
79prefixed prefixed implemented with the vendor prefix: -webkit-firefox no support nonotes no support nonotes notes see bug 110
7646.ie no support noopera full support ...
...ith the vendor prefix: -webkit-chrome android full support 25prefixed full support 25prefixed prefixed implemented with the vendor prefix: -webkit-firefox android no support nonotes no support nonotes notes see bug 110
7646.opera android full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios partial support 6prefixed notes partial support 6prefixed notes prefixed implemented with the vendor prefix: -webkit-notes sup...
<integer> - CSS: Cascading Style Sheets
during the css3 values cycle there was a lot of discussion about setting a minimum range to support: the latest decision, in april 2012 during the lc phase, was [-22
7-1; 22
7-1], but other values like 224-1 and 230-1 were also proposed.
... full support 12firefox full support 1ie full support 3opera full support 3.5safari full support 1webview android full support ≤3
7chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0legend ...
left - CSS: Cascading Style Sheets
ion: absolute; bottom: 10px; right: 20px; </pre> <p>absolute position inside of a parent with relative position</p> </div> <div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>absolute position with both left and right declared</p> </div> </div> </div> css #wrap { width:
700px; margin: 0 auto; background: #5c5c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px; background-color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; background-color: #c1ffdb; ...
... } #example_3 { width: 600px; height: 400px; position: relative; top: 20px; left: 20px; background-color: #ffd
7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-color:#ffc
7e4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d
7ffc2; } result specifications specification status comment css positioned layout module level 3the definition of 'left' in that specification.
letter-spacing - CSS: Cascading Style Sheets
full support 12firefox full support 1ie full support 4opera full support 3.5safari full support 1webview android full support ≤3
7chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0svg supportchrome ...
... full support 1edge full support 12firefox full support
72ie full support 9opera full support
7safari full support 5.1webview android full support ≤3
7chrome android full support 18firefox android no support noopera android full support 10.1safari ios full support 5.1samsung internet android ...
list-style-type - CSS: Cascading Style Sheets
a, b, c, … z lower-latin is unsupported in ie
7 and earlier see browser compatibility section.
...a, b, c, … z upper-latin is unsupported in ie
7 and earlier arabic-indic -moz-arabic-indic example armenian traditional armenian numbering (ayb/ayp, ben/pen, gim/keem… bengali -moz-bengali example cambodian * example is a synonym for khmer cjk-earthly-branch -moz-cjk-earthly-branch example cjk-heavenly-stem -moz-cjk-heavenly-stem example cjk-ideographic identical to trad-chinese-informal e.g.
mask-position - CSS: Cascading Style Sheets
/* keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 25%
75%; mask-position: 0px 0px; mask-position: 10% 8em; /* multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* global values */ mask-position: inherit; mask-position: initial; mask-position: unset; syntax one or more <position> values, separated by commas.
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/126
76/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <o...
mask-type - CSS: Cascading Style Sheets
syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.
7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskc...
...ontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.
7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
object-position - CSS: Cascading Style Sheets
<img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd
7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd
7dfb.svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images.
...ll support 12prefixed prefixed implemented with the vendor prefix: -o-safari ios full support 10samsung internet android full support 2.0support for three-value syntax of positionchrome no support 31 — 68edge no support 16 —
79firefox no support 36 —
70ie no support noopera no support 19 — 55 no support 19 — 55 full support 11.6prefixed prefixed implemented with the vendor prefix: -o-safari full support ...
outline-color - CSS: Cascading Style Sheets
pport 12firefox full support 1.5 full support 1.5 no support 1 — 3.6prefixed prefixed implemented with the vendor prefix: -moz-ie full support 8opera full support
7safari full support 1.2webview android full support 3
7chrome android full support 18firefox android full support 4opera android full support 14safari ios full ...
...support 1samsung internet android full support 1.0invertchrome no support noedge no support 12 —
79firefox no support 1 — 3ie full support 8opera no support
7 — 15safari no support nowebview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no su...
outline - CSS: Cascading Style Sheets
how to design useful and usable focus indicators wcag 2.1: understanding success criterion 2.4.
7: focus visible formal definition initial valueas each of the properties of the shorthand:outline-color: invert, for browsers supporting it, currentcolor for the otheroutline-style: noneoutline-width: mediumapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:outline-color: for the keyword invert, the computed value is invert.
...utline-color: a coloroutline-width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e
73; outline-offset: 4px; background: #ffa; } result specifications specification status comment css basic user interface module level 3the definition of 'outline' in that specification.
perspective - CSS: Cascading Style Sheets
/* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin:
75px 0 0
75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face ba...
...sed on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.
7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.
7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.
7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.
7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result specifications specification status comment ...
repeating-linear-gradient() - CSS: Cascading Style Sheets
the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 2
70deg, and 90deg respectively.
...t, transparent 20px, black 20px, black 40px); /* with multiple color stop lengths */ background-image: repeating-linear-gradient(-45deg, transparent 0 20px, black 20px 40px); } ten repeating horizontal bars body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(to bottom, rgb(26,198,204), rgb(26,198,204)
7%, rgb(100,100,100) 10%); } because the last color stop is 10% and the gradient is vertical, each gradient in the repeated gradient is 10% of the height, fitting 10 horizontal bars.
<resolution> - CSS: Cascading Style Sheets
screens typically contains
72 or 96 dots per inch, but the dpi for printed documents is usually much greater.
...} valid resolutions 96dpi 50.82dpcm 3dppx invalid resolutions
72 dpi spaces are not allowed between the number and the unit.
right - CSS: Cascading Style Sheets
ength; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { width: 100px; height: 100px; background-color: #ffc
7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd
7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constraints prevent it from doing so.
... html <div id="parent">parent <div id="nowidth">no width</div> <div id="width">width: 100px</div> </div> css div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px; background-color: #ffc
7e4; position: relative; } /* declare both a left and a right */ #width, #nowidth { background-color: #c2ffd
7; position: absolute; left: 0; right: 0; } /* declare a width */ #width { width: 100px; top: 60px; } result specifications specification status comment css positioned layout module level 3the definition of 'right' in that specification.
<string> - CSS: Cascading Style Sheets
for example, \22 represents a double quote, \2
7 a single quote ('), and \a9 the copyright symbol (©).
... examples /* simple strings */ "this string is demarcated by double quotes." 'this string is demarcated by single quotes.' /* character escaping */ "this is a string with \" an escaped double quote." "this string also has \22 an escaped double quote." 'this is a string with \' an escaped single quote.' 'this string also has \2
7 an escaped single quote.' "this is a string with \\ an escaped backslash." /* new line in a string */ "this string has a \aline break in it." /* string spanning two lines of code (these two strings will have identical output) */ "a really long \ awesome string" "a really long awesome string" specifications specification status comment css values and units module l...
matrix3d() - CSS: Cascading Style Sheets
margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.
7); transform: translatez(50px); } .back { background: rgba(0,210,0,.
7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.
7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.
7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.
7); transform: rotatex(90deg) translatez(50px); ...
...} .bottom { background: rgba(210,0,210,.
7); transform: rotatex(-90deg) translatez(50px); } result matrix translation and scale example another transform3d() example, which implements an animated combined translate and scale.
transform-origin - CSS: Cascading Style Sheets
transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5"> </div> .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: scale(1.
7); <div class="box6"> </div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.
7); -webkit-transform: scale(1.
7); } transform: scale(1.
7); transform-origin: 0 0; <div class="box
7"> </div> .box
7 { margin: 0.5em; width: 3em; height: 3em; bord...
...er: solid 1px; background-color: palegreen; transform: scale(1.
7); -webkit-transform: scale(1.
7); transform-origin: 0 0; -webkit-transform-origin: 0 0; } transform: scale(1.
7); transform-origin: 100% -30%; <div class="box8"> </div> .box8 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.
7); -webkit-transform: scale(1.
7); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; } transform: skewx(50deg); transform-origin: 100% -30%; <div class="box9"> </div> .box9 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewx(50deg); -webkit-transform: s...
transform-style - CSS: Cascading Style Sheets
hecked> </div> css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.
7); transform: translatez(50px); } .back { background: rgba(0,210,0,.
7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.
7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.
7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.
7); transform: rotatex(90deg) translatez(50px); ...
...} .bottom { background: rgba(210,0,210,.
7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment css transforms level 2the definition of 'transform-style' in that specification.
transform - CSS: Cascading Style Sheets
syntax /* keyword values */ transform: none; /* function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(1
7px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: translatez(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scalex(2); trans...
...form: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.0
7rad); /* multiple function values */ transform: translatex(10px) rotate(10deg) translatey(5px); transform: perspective(500px) translate(10px, 0, 20px) rotatey(3deg); /* global values */ transform: inherit; transform: initial; transform: unset; the transform property may be specified as either the keyword value none or as one or more <transform-function> values.
zoom - CSS: Cascading Style Sheets
/* keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.
7; /* global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal size.
... formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom:
75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; ...
Getting Started - Developer guides
if (window.xmlhttprequest) { // mozilla, safari, ie
7+ ...
... simple timed xhr example another simple example follows — here we are loading a text file via xhr, the structure of which is assumed to be like this: time: 312.05 time: 312.0
7 time: 312.10 time: 312.12 time: 312.14 time: 312.15 once the text file is loaded, we split() the items into an array at each newline character (\n — basically where each line break is in the text file), and then print the complete list of timestamps, and the last timestamp, onto the page.
Cross-browser audio basics - Developer guides
an audio player with feedback consider this snippet of html: <audio id="my-audio"> <source src="https://udn.realityripple.com/samples/6c/d385042de2.mp3" type="audio/mpeg"> <source src="https://udn.realityripple.com/samples/28/191a
7bd2a5.ogg" type="audio/ogg"> <!-- place fallback here as <audio> supporting browsers will ignore it --> <a href="audiofile.mp3">audiofile.mp3</a> </audio> <div id="controls"> <span id="loading">loading</span> <button id="play" style="display:none">play</button> <button id="pause" style="display:none" >pause</button> </div> <div id="progress"> <div id="bar"></div> </div> styled like s...
... version chrome 4+ firefox 3.5+ internet explorer 9+ opera 10.5+ safari 4+ mobile mobile browser version chrome (android) 32+ firefox (android) 26+ ie mobile 10+ opera mobile 11+ safari (ios) 4+ android browser 2.3+ blackberry
7+ audio codec support browser ogg mp3 aac pcm opus firefox 3.5+ ✓ ✓ *26+ ✓ ✓ *14+ safari 5+ ✓ ✓ chrome 6+ ✓ ✓ ✓ ✓ *9+ opera 10.5+ ✓ internet explorer 9+ ✓ ✓ firefox mobile ✓ ✓ ✓ �...
Creating a cross-browser video player - Developer guides
rs-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="5
76"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img a...
...the custom controls will only appear on this browser in fullscreen mode with some webkit specific css: the default browser controls have to be hidden with video::-webkit-media-controls { display:none !important; } the custom controls container needs to have a special z-index value: .controls { z-index:214
748364
7; } dealing with webkit-specific code in this way will affect all webkit browsers, but everything works as expected in more advanced webkit browsers such as chrome and the latest opera.
Block formatting context - Developer guides
/div> <p>i am content inside the <code>overflow:auto</code> container.</p> </div> </section> <section> <div class="box" style="display:flow-root"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 24
7); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .5); border:1px solid black; padding: 10px; } exclude external floats in the following example, we are using display:flow-root and floats to implement doub...
... html <section> <div class="float">try to resize this outer float</div> <div class="box"><p>normal</p></div> </section> <section> <div class="float">try to resize this outer float</div> <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 24
7); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:25px; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .
75); border: 1px solid black; padding: 10px; } ...
HTML attribute: max - HTML: Hypertext Markup Language
syntax syntax for max values by input type input type syntax example date yyyy-mm-dd <input type="date" max="2019-12-25" step="1"> month yyyy-mm <input type="month" max="2019-12" step="12"> week yyyy-w## <input type="week" max="2019-w23" step=""> time hh:mm <input type="time" max="1
7:00" step="900"> datetime-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t23:59"> number <number> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in ...
... syntax for max values for other elements input type syntax example <progress> <number> <progress id="file" max="100" value="
70">
70% </progress> <meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter> ...
HTML attribute: min - HTML: Hypertext Markup Language
we add a big red border around invalid inputs: input:invalid { border: solid red 3px; } then define an input with a minimum value of
7.2, omitting the step attribute, wherein it defaults to 1.
... <input id="mynumber" name="mynumber" type="number" min="
7.2" value="8"> because step defaults to 1, valid values include
7.2, 8.2, 9.2, and so on.
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontent deprecatednon-standardchrome full support 35edge full support
79firefox no support 33 — 59disabled no support 33 — 59disabled disabled from version 33 until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 26safari no support nowebview android full support 3
7chrome android full support 3
7firefox android no support 33 — 59disabled no support 33 — 59disabled disabled from version 33 until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true).
<img>: The Image Embed element - HTML: Hypertext Markup Language
<img src="https://udn.realityripple.com/samples/61/869e2
7c81e.png" alt="mdn logo" srcset="/static/external/6c/6c98485e5d8acac9fecd
7824ce30c958
7f0d8548b946ee9fb1293d2eccdb6cf1.png 2x"> using the srcset and sizes attributes the src attribute is ignored in user agents that support srcset when w descriptors are included.
... <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16
79
7/clock-demo-400px.png 400w" sizes="(max-width: 600px) 200px, 50vw"> to see the resizing in action, view the example on a separate page, so you can actually resize the content area.
<input type="email"> - HTML: Hypertext Markup Language
<input type="email" size="40" list="defaultemails"> <datalist id="defaultemails"> <option value="jbond00
7@mi6.defence.gov.uk"> <option value="jbourne@unknown.net"> <option value="nfury@shield.org"> <option value="tony@starkindustries.com"> <option value="hulk@grrrrrrrr.arg"> </datalist> with the <datalist> element and its <option>s in place, the browser will offer the specified values as potential values for the e-mail address; this is typically presented as a popup or drop-down menu conta...
... <label for="emailaddress">email</label><br/> <input id="emailaddress" type="email" placeholder="user@example.gov" list="defaultemails" size="64" maxlength="256" multiple> <datalist id="defaultemails"> <option value="jbond00
7@mi6.defence.gov.uk"> <option value="jbourne@unknown.net"> <option value="nfury@shield.org"> <option value="tony@starkindustries.com"> <option value="hulk@grrrrrrrr.arg"> </datalist> specifications specification status comment html living standardthe definition of '<input type="email">' in that specification.
<input type="hidden"> - HTML: Hypertext Markup Language
</textarea> </div> <div> <button type="submit">update post</button> </div> <input type="hidden" id="postid" name="postid" value="3465
7"> </form> let's also add some simple css: html { font-family: sans-serif; } form { width: 500px; } div { display: flex; margin-bottom: 10px; } label { flex: 2; line-height: 2; text-align: right; padding-right: 20px; } input, textarea { flex:
7; font-family: sans-serif; font-size: 1.1rem; padding: 5px; } textarea { height: 60px; } the server would set the value of...
... when submitted, the form data sent to the server will look something like this: title=my+excellent+blog+post&content=this+is+the+content+of+my+excellent+blog+post.+i+hope+you+enjoy+it!&postid=3465
7 even though the hidden input cannot be seen at all, its data is still submitted.
<input type="password"> - HTML: Hypertext Markup Language
these numbers, used for tax and identification purposes in the us, are in the form "123-45-6
789".
... html <label for="ssn">ssn:</label> <input type="password" id="ssn" inputmode="numeric" minlength="9" maxlength="12" pattern="(?!000)([0-6]\d{2}|
7([0-6]\d|
7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}" required autocomplete="off"> <br> <label for="ssn">value:</label> <span id="current"></span> this uses a pattern which limits the entered value to strings representing legal socal security numbers.
<input type="tel"> - HTML: Hypertext Markup Language
here, we have an tel input with the placeholder 123-456
7-8901.
... <input id="telno" name="telno" type="tel" placeholder="123-456
7-8901"> controlling the input size you can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.
<input type="time"> - HTML: Hypertext Markup Language
minutes (or hours) can only be used for stepping when you specify a number of minutes (or hours) in seconds, such as 120 for 2 minutes, or
7200 for 2 hours).
...chrome-based browsers support it starting in version 82 and firefox added it in version
76.
<keygen> - HTML: Hypertext Markup Language
the value of the pqg parameter is the the base64 encoded, der encoded dss-parms as specified in ietf rfc 32
79.
... a cgi program by the http server: commonname=john+doe&email=doe@foo.com&org=foobar+computing+corp.& orgunit=bureau+of+bureaucracy&locality=anytown&state=california&country=us& key=mihfmhewxdanbgkqhkig9w0baqefaanladbiakeanx0tiljromuue%2bptwbre6xfv%0awtkqbsshxk5zhcuwcwyvcniq9b82qhjdoacdd34rqfcaind46fxkqunb0mvkzqid%0aaqabfhfnb3ppbgxhsxnneuzyawvuzdanbgkqhkig9w0baqqfaanbaakv2eex2n%2fs%0ar%2f
7ijnrowlszsmttiqteb%2badwhgj9u1xruroilq%2fo2cuqxifzcnzkyakwp4dubqw%0ai0%2f%2frgbvmco%3d specifications specification status comment html5the definition of 'the <keygen> element' in that specification.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
allowed values are determined by bcp4
7.
... <!-- third-generation ipad with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> <!-- iphone with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="
72x
72" href="favicon
72.png"> <!-- non-retina iphone, ipod touch, and android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="favicon5
7.png"> <!-- basic favicon --> <link rel="icon" href="favicon32.png"> conditionally loading resources with media queries you can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is...
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
basic example a simple example showing the use of <summary> in a <details> element: <details open> <summary>overview</summary> <ol> <li>cash on hand: $500.00</li> <li>current invoice: $
75.30</li> <li>due date: 5/6/19</li> </ol> </details> summaries as headings you can use heading elements in <summary>, like this: <details open> <summary><h4>overview</h4></summary> <ol> <li>cash on hand: $500.00</li> <li>current invoice: $
75.30</li> <li>due date: 5/6/19</li> </ol> </details> this currently has some spacing issues that could be addressed using css.
... html in summaries this example adds some semantics to the <summary> element to indicate the label as important: <details open> <summary><strong>overview</strong></summary> <ol> <li>cash on hand: $500.00</li> <li>current invoice: $
75.30</li> <li>due date: 5/6/19</li> </ol> </details> specifications specification status comment html living standardthe definition of '<summary>' in that specification.
<time> - HTML: Hypertext Markup Language
valid datetime values a valid year string 2011 a valid month string 2011-11 a valid date string 2011-11-18 a valid yearless date string 11-18 a valid week string 2011-w4
7 a valid time string 14:54 14:54:39 14:54:39.929 a valid local date and time string 2011-11-18t14:54:39.929 2011-11-18 14:54:39.929 a valid global date and time string 2011-11-18t14:54:39.929z 2011-11-18t14:54:39.929-0400 2011-11-18t14:54:39.929-04:00 2011-11-18 14:54:39.929z 2011-11-18 14:54:39.929-0400 2011-11-18 14:54:39.929-04:00 a valid duration string pt4h18m3s examples si...
...mple example html <p>the concert starts at <time datetime="2018-0
7-0
7t20:00:00">20:00</time>.</p> output datetime example html <p>the concert took place on <time datetime="2001-05-15t19:00">may 15</time>.</p> output specifications specification status comment html living standardthe definition of '<time>' in that specification.
<video>: The Video Embed element - HTML: Hypertext Markup Language
chrome
70.0) autoplay doesn't work if no muted attribute is present.
...hosted by archive.org --> <!-- poster from peach.blender.org --> <video controls src="https://archive.org/download/bigbuckbunny_124/content/big_buck_bunny_
720p_surround.mp4" poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x1121
7" width="620"> sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://archive.org/details/bigbuckbunny_124">download it</a> and watch it with your favorite video player!
Identifying resources on the Web - HTTP
urn:isbn:9
780141036144 urn:ietf:rfc:
7230 the two urns correspond to the book nineteen eighty-four by george orwell, the ietf specification
7230, hypertext transfer protocol (http/1.1): message syntax and routing.
... examples https://developer.mozilla.org/docs/learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git ftp://example.org/resource.txt urn:isbn:9
780141036144 mailto:help@supercyberhelpdesk.info specifications specification title rfc
7230, section 2.
7: uniform resource identifiers hypertext transfer protocol (http/1.1): message syntax and routing ...
Resource URLs - HTTP
for example: http://searchfox.org/mozilla-central/rev/48ea45280390
7f25
75d81021e86
78634e806
7fc2/browser/app/profile/firefox.js#5
75 web sites can easily collect firefox default preferences by overriding this pref() function and using the script resource:///defaults/preferences/firefox.js.
... solution in order to fix this problem, mozilla changed the behavior of loading resource: uris in bug 863246, which landed in firefox 5
7 (quantum).
Reason: CORS request not HTTP - HTTP
local file security in firefox 68 when a user opened a page using a file:/// uri in firefox 6
7 and earlier, the origin of the page was defined as the directory from which the page was opened.
... in response to cve-2019-11
730, firefox 68 and later define the origin of a page opened using a file:/// uri as unique.
Using HTTP cookies - HTTP
for example: set-cookie: id=a3fwa; expires=wed, 31 oct 2021 0
7:28:00 gmt; note: when an expires date is set, the time and date set is relative to the client the cookie is being set on, not the server.
... here is an example: set-cookie: id=a3fwa; expires=wed, 21 oct 2021 0
7:28:00 gmt; secure; httponly define where cookies are sent the domain and path attributes define the scope of the cookie: what urls the cookies should be sent to.
Accept-Charset - HTTP
to guarantee better privacy through less configuration-based entropy, all browsers omit the accept-charset header: internet explorer 8+, safari 5+, opera 11+, firefox 10+ and chrome 2
7+ no longer send it.
... examples accept-charset: iso-8859-1 accept-charset: utf-8, iso-8859-1;q=0.5 accept-charset: utf-8, iso-8859-1;q=0.5, *;q=0.1 specifications specification title rfc
7231, section 5.3.3: accept-charset hypertext transfer protocol (http/1.1): semantics and context ...
Accept-Encoding - HTTP
r type request header forbidden header name yes syntax accept-encoding: gzip accept-encoding: compress accept-encoding: deflate accept-encoding: br accept-encoding: identity accept-encoding: * // multiple algorithms, weighted with the quality value syntax: accept-encoding: deflate, gzip;q=1.0, *;q=0.5 directives gzip a compression format using the lempel-ziv coding (lz
77), with a 32-bit crc.
... examples accept-encoding: gzip accept-encoding: gzip, compress, br accept-encoding: br;q=1.0, gzip;q=0.8, *;q=0.1 specifications specification title rfc
7231, section 5.3.4: accept-encoding hypertext transfer protocol (http/1.1): semantics and context ...
Accept-Language - HTTP
syntax accept-language: <language> accept-language: * // multiple types, weighted with the quality value syntax: accept-language: fr-ch, fr;q=0.9, en;q=0.8, de;q=0.
7, *;q=0.5 directives <language> a language tag (which is sometimes referred to as a "locale identifier").
... examples accept-language: de accept-language: de-ch accept-language: en-us,en;q=0.5 specifications specification title rfc
7231, section 5.3.5: accept-language hypertext transfer protocol (http/1.1): semantics and context bcp 4
7 tags for the identification of language ...
Accept-Ranges - HTTP
though bytes is the only range unit formally defined by rfc
7233, additional range units may be registered in the http range unit registry.
... examples accept-ranges: bytes specifications specification title rfc
7233, section 2.3: accept-ranges hypertext transfer protocol (http/1.1): range requests ...
Accept - HTTP
header type request header forbidden header name no cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x
7f (del).
... examples accept: text/html accept: image/* // general default accept: */* // default for navigation requests accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 specifications specification title rfc
7231, section 5.3.2: accept hypertext transfer protocol (http/1.1): semantics and context ...
Access-Control-Max-Age - HTTP
chromium (prior to v
76) caps at 10 minutes (600 seconds).
... chromium (starting in v
76) caps at 2 hours (
7200 seconds).
Cache-Control - HTTP
cache-control: immutable cache-control: stale-while-revalidate=<seconds> cache-control: stale-if-error=<seconds> directives cacheability a response is normally cached by the browser if: it has a status code of 301, 302, 30
7, 308, or 410 and cache-control does not have no-store, or if proxy, does not have private and authorization is unset either has a status code of 301, 302, 30
7, 308, or 410 or has public, max-age or s-maxage in cache-control or has expires set public the response may be stored by any cache, even if the response is normally non-cacheable.
... cache-control: no-cache cache-control: no-cache, max-age=0 specifications specification status comment rfc 8246: http immutable responses ietf rfc rfc
7234: hypertext transfer protocol (http/1.1): caching ietf rfc rfc 5861: http cache-control extensions for stale content ietf rfc initial definition ...
Content-Disposition - HTTP
filename* the parameters filename and filename* differ only in that filename* uses the encoding defined in rfc 598
7.
...part/form-data format that makes use of the content-disposition header: post /test.html http/1.1 host: example.org content-type: multipart/form-data;boundary="boundary" --boundary content-disposition: form-data; name="field1" value1 --boundary content-disposition: form-data; name="field2"; filename="example.txt" value2 --boundary-- specifications specification title rfc
75
78 returning values from forms: multipart/form-data rfc 6266 use of the content-disposition header field in the hypertext transfer protocol (http) rfc 2183 communicating presentation information in internet messages: the content-disposition header field ...
Content-Encoding - HTTP
header type entity header forbidden header name no syntax content-encoding: gzip content-encoding: compress content-encoding: deflate content-encoding: identity content-encoding: br // multiple, in the order in which they were applied content-encoding: gzip, identity content-encoding: deflate, gzip directives gzip a format using the lempel-ziv coding (lz
77), with a 32-bit crc.
... specifications specification title rfc
7932: brotli compressed data format brotli compressed data format rfc
7231, section 3.1.2.2: content-encoding hypertext transfer protocol (http/1.1): semantics and content rfc 2616, section 14.11: content-encoding content-encoding ...
CSP: style-src - HTTP
content-security-policy: style-src 'unsafe-inline'; the above content security policy will allow inline styles like the <style> element, and the style attribute on any element: <style> #inline-style { background: red; } </style> <div style="display:none">foo</div> you can use a nonce-source to only allow specific inline style blocks: content-security-policy: style-src 'nonce-2
726c
7f26c' you will have to set the same nonce on the <style> element: <style nonce="2
726c
7f26c"> #inline-style { background: red; } </style> alternatively, you can create hashes from your inline styles.
... content-security-policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc58
78103ab
734
7e158f' when generating the hash, don't include the <style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace.
Digest - HTTP
in rfc
7231 terms this is the selected representation of a resource.
... examples digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf
7kbu9dbpe= digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf
7kbu9dbpe=,unixsum=3063
7 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc
7231 made the original definition inconsistent with current http...
Forwarded - HTTP
examples using the forwarded header forwarded: for="_mdn" # case insensitive forwarded: for="[2001:db8:cafe::1
7]:4
711" # separated by semicolon forwarded: for=192.0.2.60;proto=http;by=203.0.113.43 # multiple values can be appended using a comma forwarded: for=192.0.2.43, for=198.51.100.1
7 transitioning from x-forwarded-for to forwarded if your application, server, or proxy supports the standardized forwarded header, the x-forwarded-for header can be replaced.
... x-forwarded-for: 123.34.56
7.89 forwarded: for=123.34.56
7.89 x-forwarded-for: 192.0.2.43, "[2001:db8:cafe::1
7]" forwarded: for=192.0.2.43, for="[2001:db8:cafe::1
7]" specifications specification title rfc
7239, section 4: forwarded forwarded http extension ...
If-Match - HTTP
they are a string of ascii characters placed between double quotes (like "6
75af34563dc-tr34").
... examples if-match: "bfc13a64
729c4290ef5b2c2
730249c88ca92d82d" if-match: "6
7ab43", "54ed21", "
7892dd" if-match: * specifications specification title rfc
7232, section 3.1: if-match hypertext transfer protocol (http/1.1): conditional requests ...
If-None-Match - HTTP
they are a string of ascii characters placed between double quotes (like "6
75af34563dc-tr34") and may be prefixed by w/ to indicate that the weak comparison algorithm should be used (this is useless with if-none-match as it only uses that algorithm).
... examples if-none-match: "bfc13a64
729c4290ef5b2c2
730249c88ca92d82d" if-none-match: w/"6
7ab43", "54ed21", "
7892dd" if-none-match: * specifications specification title rfc
7232, section 3.2: if-none-match hypertext transfer protocol (http/1.1): conditional requests ...
If-Range - HTTP
it is a string of ascii characters placed between double quotes (like "6
75af34563dc-tr34") and may be prefixed by w/ to indicate that the weak comparison algorithm should be used.
... examples if-range: wed, 21 oct 2015 0
7:28:00 gmt specifications specification title rfc
7233, section 3.2: if-range hypertext transfer protocol (http/1.1): range requests ...
Location - HTTP
in cases of redirection, the http method used to make the new request to fetch the page pointed to by location depends of the original method and of the kind of redirection: if 303 (see also) responses always lead to the use of a get method, 30
7 (temporary redirect) and 308 (permanent redirect) don't change the method used in the original request; 301 (permanent redirect) and 302 (found) doesn't change the method most of the time, though older user-agents may (so you basically don't know).
... examples location: /index.html specifications specification title rfc
7231, section
7.1.2: location hypertext transfer protocol (http/1.1): semantics and content ...
Proxy-Authenticate - HTTP
the proxy-authenticate header is sent along with a 40
7 proxy authentication required.
... examples proxy-authenticate: basic proxy-authenticate: basic realm="access to the internal site" specifications specification title rfc
7235, section 4.3: proxy-authenticate http/1.1: authentication rfc
761
7 the 'basic' http authentication scheme ...
Proxy-Authorization - HTTP
the http proxy-authorization request header contains the credentials to authenticate a user agent to a proxy server, usually after the server has responded with a 40
7 proxy authentication required status and the proxy-authenticate header.
... examples proxy-authorization: basic ywxhzgrpbjpvcgvuc2vzyw1l specifications specification title rfc
7235, section 4.4: proxy-authorization http/1.1: authentication rfc
761
7 the 'basic' http authentication scheme ...
Public-Key-Pins-Report-Only - HTTP
example public-key-pins-report-only: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs
7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs
7sws=" pins the server's public key used in production.
... specifications specification title rfc
7469, section 2.1: public-key-pins-report-only public key pinning extension for http ...
Public-Key-Pins - HTTP
public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs
7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs
7sws=" pins the server's public key used in production.
... specifications specification title rfc
7469, section 2.1: public-key-pins public key pinning extension for http ...
Range - HTTP
range: bytes=200-1000, 2000-65
76, 19000- requesting the first 500 and last 500 bytes of the file.
... range: bytes=0-499, -500 specifications specification title rfc
7233, section 3.1: range hypertext transfer protocol (http/1.1): range requests ...
Save-Data - HTTP
note: disabling http/2 server push (rfc
7540, section 8.2: server push) might be desirable too for reducing data downloads.
... with save-data: on request: get /image.jpg http/1.0 host: example.com save-data: on response: http/1.0 200 ok content-length: 102832 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-length: 481
770 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] specifications specification title draft-grigorik-http-client-hints-03, section
7: save-data http client hints ...
Set-Cookie - HTTP
set-cookie: sessionid=38afes
7a8 permanent cookie instead of expiring when the client is closed, permanent cookies expire at a specific date (expires) or after a specific length of time (max-age).
... set-cookie: id=a3fwa; expires=wed, 21 oct 2015 0
7:28:00 gmt set-cookie: id=a3fwa; max-age=2592000 invalid domains a cookie for a domain that does not include the server that set it should be rejected by the user agent.
TE - HTTP
gzip a format using the lempel-ziv coding (lz
77), with a 32-bit crc is accepted as a transfer coding name.
... specifications specification title rfc
7230, section 4.3: te hypertext transfer protocol (http/1.1): message syntax and routing ...
Transfer-Encoding - HTTP
gzip a format using the lempel-ziv coding (lz
77), with a 32-bit crc.
...a chunked response looks like this: http/1.1 200 ok content-type: text/plain transfer-encoding: chunked
7\r\n mozilla\r\n 9\r\n developer\r\n
7\r\n network\r\n 0\r\n \r\n specifications specification title rfc
7230, section 3.3.1: transfer-encoding hypertext transfer protocol (http/1.1): message syntax and routing ...
Want-Digest - HTTP
examples want-digest: sha-256 want-digest: sha-512;q=0.3, sha-256;q=1, md5;q=0 basic operation the sender provides a list of digests which it is prepared to accept, and the server uses one of them: request: get /item want-digest: sha-256;q=0.3, sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf
7kbu9dbpe= unsupported digests the server does not support any of the requested digest algorithms, so uses a different algorithm: request: get /item want-digest: sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf
7kbu9dbpe= the server does not support any of the requested digest algorithms, so responds with a 400 error and includes another want-digest...
...lgorithms that it does support: request: get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-256, sha-512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc
7231 made the original definition inconsistent with current http specifications.
X-Frame-Options - HTTP
the spec leaves it up to browser vendors to decide whether this option applies to the top level, the parent, or the whole chain, although it is argued that the option is not very useful unless all ancestors are also in the same origin (see bug
725490).
...add this to your server configuration: const helmet = require('helmet'); const app = express(); app.use(helmet.frameguard({ action: 'sameorigin' })); alternatively, you can use frameguard directly: const frameguard = require('frameguard') app.use(frameguard({ action: 'sameorigin' })) specifications specification title rfc
7034 http header field x-frame-options ...
POST - HTTP
ssful response has body yes safe no idempotent no cacheable only if freshness information is included allowed in html forms yes syntax post /test example a simple form using the default application/x-www-form-urlencoded content type: post /test http/1.1 host: foo.example content-type: application/x-www-form-urlencoded content-length: 2
7 field1=value1&field2=value2 a form using the multipart/form-data content type: post /test http/1.1 host: foo.example content-type: multipart/form-data;boundary="boundary" --boundary content-disposition: form-data; name="field1" value1 --boundary content-disposition: form-data; name="field2"; filename="example.txt" value2 --boundary-- specifications specification title ...
... rfc
7231, section 4.3.3: post hypertext transfer protocol (http/1.1): semantics and content rfc 2046, section 5.1.1: common syntax multipurpose internet mail extensions (mime) part two: media types ...
HTTP request methods - HTTP
specifications specification title comment rfc
7231, section 4: request methods hypertext transfer protocol (http/1.1): semantics and content specifies get, head, post, put, delete, connect, options, trace.
... rfc 5
789, section 2: patch method patch method for http specifies patch.
An overview of HTTP - HTTP
for example: get / http/1.1 host: developer.mozilla.org accept-language: fr read the response sent by the server, such as: http/1.1 200 ok date: sat, 09 oct 2010 14:28:02 gmt server: apache last-modified: tue, 01 dec 2009 20:18:22 gmt etag: "51142bc1-
7449-4
79b0
75b2891b" accept-ranges: bytes content-length: 29
769 content-type: text/html <!doctype html...
... (here comes the 29
769 bytes of the requested web page) close or reuse the connection for further requests.
Protocol upgrade mechanism - HTTP
sec-websocket-accept: hash hash if a sec-websocket-key header was provided, the value of this header is computed by taking the value of the key, concatenating the string "258eafa5-e914-4
7da-95ca-c5ab0dc85b11" to it, taking the sha-1 hash of that concatenated string, resulting in a 20-byte value.
... references websocket api http specifications and rfcs: rfc
7230 rfc 6455 rfc
7540 ...
HTTP Public Key Pinning (HPKP) - HTTP
openssl s_client -servername www.example.com -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 example hpkp header public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs
7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs
7sws=" pins the server's public key used in production.
...</system.webserver> specifications specification title rfc
7469, section 2.1: public-key-pins public key pinning extension for http ...
HTTP range requests - HTTP
http/1.1 206 partial content content-type: multipart/byteranges; boundary=3d6b6a416f9b5 content-length: 282 --3d6b6a416f9b5 content-type: text/html content-range: bytes 0-50/12
70 <!doctype html> <html> <head> <title>example do --3d6b6a416f9b5 content-type: text/html content-range: bytes 100-150/12
70 eta http-equiv="content-type" content="text/html; c --3d6b6a416f9b5-- conditional range requests when resuming to request more parts of a resource, you need to guarantee that the stored resource has not been modified since the last fragment has been received.
... if-range: wed, 21 oct 2015 0
7:28:00 gmt partial request responses there are three relevant statuses, when working with range requests: in case of a successful range request, the 206 partial content status is sent back from a server.
Redirections in HTTP - HTTP
30
7 temporary redirect method and body not changed the web page is temporarily unavailable for unforeseen reasons.
...30
7 was created to remove the ambiguity of the behavior when using non-get methods.
302 Found - HTTP
it is therefore recommended to set the 302 code only as a response for get or head methods and to use 30
7 temporary redirect instead, as the method change is explicitly prohibited in that case.
... status 302 found specifications specification title rfc
7231, section 6.4.3: 302 found hypertext transfer protocol (http/1.1): semantics and content ...
408 Request Timeout - HTTP
this response is used much more since some browsers, like chrome, firefox 2
7+, and ie9, use http pre-connection mechanisms to speed up surfing.
... status 408 request timeout specifications specification title rfc
7231, section 6.5.
7: 408 request timeout hypertext transfer protocol (http/1.1): semantics and content ...
416 Range Not Satisfiable - HTTP
content-range: bytes */12
777 faced with this error, browsers usually either abort the operation (for example, a download will be considered as non-resumable) or ask for the whole document again.
... status 416 range not satisfiable specifications specification title rfc
7233, section 4.4: 416 request not satisfiable hypertext transfer protocol (http/1.1): range requests ...
510 Not Extended - HTTP
the hypertext transfer protocol (http) 510 not extended response status code is sent in the context of the http extension framework, defined in rfc 2
774.
... status 510 not extended specifications specification title rfc 2
774, section
7: 510 not extended an http extension framework ...
Indexed collections - JavaScript
type value range size in bytes description web idl type equivalent c type int8array -128 to 12
7 1 8-bit two's complement signed integer byte int8_t uint8array 0 to 255 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 255 1 8-bit unsigned integer (clamped) octet uint8_t int16array -32
768 to 32
76
7 2 16-bit two's complement signed integer short int16_t uint16array 0 to 65535 2 16-...
...bit unsigned integer unsigned short uint16_t int32array -214
7483648 to 214
748364
7 4 32-bit two's complement signed integer long int32_t uint32array 0 to 429496
7295 4 32-bit unsigned integer unsigned long uint32_t float32array 1.2×10-38 to 3.4×1038 4 32-bit ieee floating point number (
7 significant digits e.g., 1.123456
7) unrestricted float float float64array 5.0×10-324 to 1.8×10308 8 64-bit ieee floating point number (16 significant digits e.g., 1.123...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint...
Character classes - JavaScript
examples looking for a series of digits var randomdata = "015 354 8
78
7 68
7351 3512 8
735"; var regexpfourdigits = /\b\d{4}\b/g; // \b indicates a boundary (i.e.
...do not end matching in the middle of a word) console.table(randomdata.match(regexpfourdigits)); // ['8
78
7', '3512', '8
735'] looking for a word (from the latin alphabet) starting with a var aliceexcerpt = "i’m sure i’m not ada,’ she said, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all."; var regexpwordstartingwitha = /\b[aa]\w+/g; // \b indicates a boundary (i.e.
Using Promises - JavaScript
is very much modeled after how synchronous code works: try { const result = syncdosomething(); const newresult = syncdosomethingelse(result); const finalresult = syncdothirdthing(newresult); console.log(`got the final result: ${finalresult}`); } catch(error) { failurecallback(error); } this symmetry with asynchronous code culminates in the async/await syntactic sugar in ecmascript 201
7: async function foo() { try { const result = await dosomething(); const newresult = await dosomethingelse(result); const finalresult = await dothirdthing(newresult); console.log(`got the final result: ${finalresult}`); } catch(error) { failurecallback(error); } } it builds on promises, e.g.
...c.then(val); const composeasync = (...funcs) => x => funcs.reduce(applyasync, promise.resolve(x)); the composeasync() function will accept any number of functions as arguments, and will return a new function that accepts an initial value to be passed through the composition pipeline: const transformdata = composeasync(func1, func2, func3); const result3 = transformdata(data); in ecmascript 201
7, sequential composition can be done more simply with async/await: let result; for (const f of [func1, func2, func3]) { result = await f(result); } /* use last result (i.e.
Memory Management - JavaScript
function f() { var x = {}; var y = {}; x.a = y; // x references y y.a = x; // y references x return 'azerty'; } f(); real-life example internet explorer 6 and
7 are known to have reference-counting garbage collectors for dom objects.
... v8 engine flags the max amount of available heap memory can be increased with a flag: node --max-old-space-size=6000 index.js we can also expose the garbage collector for debugging memory issues using a flag and the chrome debugger: node --expose-gc --inspect index.js see also ibm article on "memory leak patterns in javascript" (200
7) kangax article on how to register event handler and avoid memory leaks (2010) performance ...
SyntaxError: return not in function - JavaScript
examples missing curly brackets var cheer = function(score) { if (score === 14
7) return 'maximum!'; }; if (score > 100) { return 'century!'; } } // syntaxerror: return not in function the curly brackets look correct at a first glance, but this code snippet is missing a { after the first if statement.
... correct would be: var cheer = function(score) { if (score === 14
7) { return 'maximum!'; } if (score > 100) { return 'century!'; } }; ...
Warning: JavaScript 1.6's for-each-in loops are deprecated - JavaScript
(x); // 10 // 20 } alternative standard syntax you can now use the standard for...in loop to iterate over specified object keys, and get each value inside the loop: var object = { a: 10, b: 20 }; for (var key in object) { var x = object[key]; console.log(x); // 10 // 20 } or, using for...of (es2015) and object.values (es201
7), you can get an array of the specified object values and iterate over the array like this: var object = { a: 10, b: 20 }; for (var x of object.values(object)) { console.log(x); // 10 // 20 } array iteration for each...in has been used to iterate over specified array elements.
... // "b", 20 } alternative standard syntax you can now use the standard for...in loop to iterate over specified object keys, and get each value inside the loop: var object = { a: 10, b: 20 }; for (var key in object) { var value = object[key]; console.log(key, value); // "a", 10 // "b", 20 } or, using for...of (es2015) and object.entries (es201
7), you can get an array of the specified object values and iterate over the array like this: var object = { a: 10, b: 20 }; for (var [key, value] of object.entries(object)) { console.log(key, value); // "a", 10 // "b", 20 } ...
SyntaxError: illegal character - JavaScript
famous examples of this are quotes, the minus or semicolon (greek questionmark (u+3
7e) looks same).
... “this looks like a string”; // syntaxerror: illegal character // “ and ” are not " but look like this 42 – 13; // syntaxerror: illegal character // – is not - but looks like this var foo = 'bar'; // syntaxerror: illegal character // <3
7e> is not ; but looks like this this should work: "this is actually a string"; 42 - 13; var foo = 'bar'; some editors and ides will notify you or at least use a slightly different highlighting for it, but not all.
TypeError: "x" is read-only - JavaScript
'use strict'; var obj = object.freeze({name: 'elsa', score: 15
7}); obj.score = 0; // typeerror 'use strict'; object.defineproperty(this, 'lung_count', {value: 2, writable: false}); lung_count = 3; // typeerror 'use strict'; var frozenarray = object.freeze([0, 1, 2]); frozenarray[0]++; // typeerror there are also a few read-only properties built into javascript.
... the global variable undefined is also read-only, so you can't silence the infamous "undefined is not a function" error by doing this: 'use strict'; undefined = function() {}; // typeerror: "undefined" is read-only valid cases 'use strict'; var obj = object.freeze({name: 'score', points: 15
7}); obj = {name: obj.name, points: 0}; // replacing it with a new object works 'use strict'; var lung_count = 2; // a `var` works, because it's not read-only lung_count = 3; // ok (anatomically unlikely, though) ...
Array.prototype.reduce() - JavaScript
var len = o.length >>> 0; // steps 3, 4, 5, 6,
7 var k = 0; var value; if (arguments.length >= 2) { value = arguments[1]; } else { while (k < len && !(k in o)) { k++; } // 3.
...ray.prototype.mapusingreduce) { array.prototype.mapusingreduce = function(callback, thisarg) { return this.reduce(function(mappedarray, currentvalue, index, array) { mappedarray[index] = callback.call(thisarg, currentvalue, index, array) return mappedarray }, []) } } [1, 2, , 3].mapusingreduce( (currentvalue, index, array) => currentvalue + index + array.length ) // [5,
7, , 10] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.reduce()' in that specification.
Array.prototype.reduceRight() - JavaScript
ould look like this: [0, 1, 2, 3, 4].reduceright(function(accumulator, currentvalue, index, array) { return accumulator + currentvalue; }); the callback would be invoked four times, with the arguments and return values in each call being as follows: callback accumulator currentvalue index array return value first call 4 3 3 [0, 1, 2, 3, 4]
7 second call
7 2 2 [0, 1, 2, 3, 4] 9 third call 9 1 1 [0, 1, 2, 3, 4] 10 fourth call 10 0 0 [0, 1, 2, 3, 4] 10 the value returned by reduceright would be that of the last callback invocation (10).
...re to provide an initialvalue, the result would look like this: [0, 1, 2, 3, 4].reduceright(function(accumulator, currentvalue, index, array) { return accumulator + currentvalue; }, 10); callback accumulator currentvalue index array return value first call 10 4 4 [0, 1, 2, 3, 4] 14 second call 14 3 3 [0, 1, 2, 3, 4] 1
7 third call 1
7 2 2 [0, 1, 2, 3, 4] 19 fourth call 19 1 1 [0, 1, 2, 3, 4] 20 fifth call 20 0 0 [0, 1, 2, 3, 4] 20 the value returned by reduceright this time would be, of course, 20.
Array.prototype.findIndex() - JavaScript
k++; } //
7.
... function isprime(num) { for (let i = 2; num > i; i++) { if (num % i == 0) { return false; } } return num > 1; } console.log([4, 6, 8, 9, 12].findindex(isprime)); // -1, not found console.log([4, 6,
7, 9, 12].findindex(isprime)); // 2 (array[2] is
7) find index using arrow function the following example finds the index of a fruit using an arrow function: const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; const index = fruits.findindex(fruit => fruit === "blueberries"); console.log(index); // 3 console.log(fruits[index]); // blueberries specifications ...
Array.prototype.forEach() - JavaScript
example code let ratings = [5, 4, 5]; let sum = 0; let sumfunction = async function (a, b) { return a + b } ratings.foreach(async function(rating) { sum = await sumfunction(sum, rating) }) console.log(sum) // naively expected output: 14 // actual output: 0 examples no operation for uninitialized values (sparse arrays) const arraysparse = [1,3,,
7] let numcallbackruns = 0 arraysparse.foreach((element) => { console.log(element) numcallbackruns++ }) console.log("numcallbackruns: ", numcallbackruns) // 1 // 3 //
7 // numcallbackruns: 3 // comment: as you can see the missing value between 3 and
7 didn't invoke callback function.
... function flatten(arr) { const result = [] arr.foreach((i) => { if (array.isarray(i)) { result.push(...flatten(i)) } else { result.push(i) } }) return result } // usage const nested = [1, 2, 3, [4, 5, [6,
7], 8, 9]] flatten(nested) // [1, 2, 3, 4, 5, 6,
7, 8, 9] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.foreach' in that specification.
Array.from() - JavaScript
var k = 0; // 1
7.
...clojure, php etc) const range = (start, stop, step) => array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); // generate numbers range 0..4 range(0, 4, 1); // [0, 1, 2, 3, 4] // generate numbers range 1..10 with step of 2 range(1, 10, 2); // [1, 3, 5,
7, 9] // generate the alphabet using array.from making use of it being ordered as a sequence range('a'.charcodeat(0), 'z'.charcodeat(0), 1).map(x => string.fromcharcode(x)); // ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"] specifications specification initial publication ecmascript (ecm...
Array.prototype.indexOf() - JavaScript
if (n >= len) { return -1; } //
7.
... var array = [2, 9, 9]; array.indexof(2); // 0 array.indexof(
7); // -1 array.indexof(9, 2); // 2 array.indexof(2, -1); // -1 array.indexof(2, -3); // 0 finding all the occurrences of an element var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.indexof(element); while (idx != -1) { indices.push(idx); idx = array.indexof(element, idx + 1); } console.log(indices); // [0, 2, 4] finding if an element ex...
Array.prototype.map() - JavaScript
a = new array(len); //
7.
... let doubles = numbers.map(function(num) { return num * 2 }) // doubles is now [2, 8, 18] // numbers is still [1, 4, 9] using map generically this example shows how to use map on a string to get an array of bytes in the ascii encoding representing the character values: let map = array.prototype.map let a = map.call('hello world', function(x) { return x.charcodeat(0) }) // a now equals [
72, 101, 108, 108, 111, 32, 8
7, 111, 114, 108, 100] using map generically queryselectorall this example shows how to iterate through a collection of objects collected by queryselectorall.
Array.of() - JavaScript
the difference between array.of() and the array constructor is in the handling of integer arguments: array.of(
7) creates an array with a single element,
7, whereas array(
7) creates an empty array with a length property of
7 (note: this implies an array of
7 empty slots, not slots with actual undefined values).
... array.of(
7); // [
7] array.of(1, 2, 3); // [1, 2, 3] array(
7); // array of
7 empty slots array(1, 2, 3); // [1, 2, 3] syntax array.of(element0[, element1[, ...[, elementn]]]) parameters elementn elements used to create the array.
Array.prototype.slice() - JavaScript
let myhonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } } let mycar = [myhonda, 2, 'cherry condition', 'purchased 199
7'] let newcar = mycar.slice(0, 2) // display the values of mycar, newcar, and the color of myhonda // referenced from both arrays.
...console.log('mycar[0].color = ' + mycar[0].color) console.log('newcar[0].color = ' + newcar[0].color) this script writes: mycar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2, 'cherry condition', 'purchased 199
7'] newcar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] mycar[0].color = red newcar[0].color = red the new color of my honda is purple mycar[0].color = purple newcar[0].color = purple array-like objects slice method can also be called to convert array-like objects/collections to a new array.
Array - JavaScript
let years = [1950, 1960, 19
70, 1980, 1990, 2000, 2010] console.log(years.0) // a syntax error console.log(years[0]) // works properly renderer.3d.settexture(model, 'character.png') // a syntax error renderer['3d'].settexture(model, 'character.png') // works properly in the 3d example, '3d' had to be quoted (because it begins with a digit).
...,p,p,p,p,p,p r,n,b,q,k,b,n,r r,n,b,q,k,b,n,r p,p,p,p,p,p,p,p , , , , , , , , , , , , , , , , , ,p, , , , , , , , , , p,p,p,p, ,p,p,p r,n,b,q,k,b,n,r using an array to tabulate a set of values values = [] for (let x = 0; x < 10; x++){ values.push([ 2 ** x, 2 * x ** 2 ]) } console.table(values) results in // the first column is the index 0 1 0 1 2 2 2 4 8 3 8 18 4 16 32 5 32 50 6 64
72
7 128 98 8 256 128 9 512 162 specifications specification initial publication ecmascript (ecma-262)the definition of 'array' in that specification.
Date.prototype.getTime() - JavaScript
syntax dateobj.gettime() return value a number representing the milliseconds elapsed between 1 january 19
70 00:00:00 utc and the given date.
... // reduced time precision (2ms) in firefox 60 new date().gettime(); // 1519211809934 // 1519211810362 // 15192118116
70 // ...
Date.now() - JavaScript
the static date.now() method returns the number of milliseconds elapsed since january 1, 19
70 00:00:00 utc.
... // reduced time precision (2ms) in firefox 60 date.now() // 1519211809934 // 1519211810362 // 15192118116
70 // ...
Date.prototype.setDate() - JavaScript
return value the number of milliseconds between 1 january 19
70 00:00:00 utc and the given date (the date object is also changed in place).
... examples using setdate() var thebigday = new date(1962, 6,
7); // 1962-0
7-0
7 (
7th of july 1962) thebigday.setdate(24); // 1962-0
7-24 (24th of july 1962) thebigday.setdate(32); // 1962-08-01 (1st of august 1962) thebigday.setdate(22); // 1962-08-22 (22th of august 1962) thebigday.setdate(0); // 1962-0
7-31 (31th of july 1962) thebigday.setdate(98); // 1962-10-06 (6th of october 1962) thebigday.setdate(-50); // 1962-08-11 (11th of august 1962) specifi...
Date.prototype.setFullYear() - JavaScript
return value the number of milliseconds between 1 january 19
70 00:00:00 utc and the updated date.
... examples using setfullyear() var thebigday = new date(); thebigday.setfullyear(199
7); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.setfullyear' in that specification.
Date.prototype.setMonth() - JavaScript
return value the number of milliseconds between 1 january 19
70 00:00:00 utc and the updated date.
... examples using setmonth() var thebigday = new date(); thebigday.setmonth(6); //watch out for end of month transitions var endofmonth = new date(2016,
7, 31); endofmonth.setmonth(1); console.log(endofmonth); //wed mar 02 2016 00:00:00 specifications specification ecmascript (ecma-262)the definition of 'date.prototype.setmonth' in that specification.
Date.prototype.setUTCFullYear() - JavaScript
return value the number of milliseconds between 1 january 19
70 00:00:00 utc and the updated date.
... examples using setutcfullyear() var thebigday = new date(); thebigday.setutcfullyear(199
7); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.setutcfullyear' in that specification.
Date.prototype.setUTCHours() - JavaScript
the setutchours() method sets the hour for a specified date according to universal time, and returns the number of milliseconds since january 1, 19
70 00:00:00 utc until the time represented by the updated date instance.
... return value the number of milliseconds between january 1, 19
70 00:00:00 utc and the updated date.
Date.prototype.toDateString() - JavaScript
"thu jan 01 19
70".
... examples a basic usage of todatestring() var d = new date(1993, 5, 28, 14, 39,
7); console.log(d.tostring()); // logs mon jun 28 1993 14:39:0
7 gmt-0600 (pdt) console.log(d.todatestring()); // logs mon jun 28 1993 note: month are 0-indexed when used as an argument of date (thus 0 corresponds to january and 11 to december).
Date.prototype.toLocaleString() - JavaScript
let date = new date(date.utc(2012, 11, 12, 3, 0, 0)); // tolocalestring() without arguments depends on the // implementation, the default locale, and the default time zone console.log(date.tolocalestring()); // → "12/11/2012,
7:00:00 pm" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all browsers yet.
...our application, make sure to specify that language (and possibly some fallback languages) using the locales argument: let date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses month-day-year order and 12-hour time with am/pm console.log(date.tolocalestring('en-us')); // → "12/19/2012,
7:00:00 pm" // british english uses day-month-year order and 24-hour time without am/pm console.log(date.tolocalestring('en-gb')); // → "20/12/2012 03:00:00" // korean uses year-month-day order and 12-hour time with am/pm console.log(date.tolocalestring('ko-kr')); // → "2012.
Date.prototype.toLocaleTimeString() - JavaScript
var date = new date(date.utc(2012, 11, 12, 3, 0, 0)); // tolocaletimestring() without arguments depends on the implementation, // the default locale, and the default time zone console.log(date.tolocaletimestring()); // → "
7:00:00 pm" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all browsers yet.
...e used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses 12-hour time with am/pm console.log(date.tolocaletimestring('en-us')); // → "
7:00:00 pm" // british english uses 24-hour time without am/pm console.log(date.tolocaletimestring('en-gb')); // → "03:00:00" // korean uses 12-hour time with am/pm console.log(date.tolocaletimestring('ko-kr')); // → "오후 12:00:00" // arabic in most arabic speaking countries uses real arabic digits console.log(date.tolocaletimestring('ar-eg')); // → "٧:٠٠:٠٠ م" // when requesting...
Date.prototype.toUTCString() - JavaScript
based on rfc
7231 and modified according to ecma-262 toutcstring, it can have negative values in the 2021 version the source for this interactive example is stored in a github repository.
... examples using toutcstring() let today = new date('wed, 14 jun 201
7 00:00:00 pdt'); let utcstring = today.toutcstring(); // wed, 14 jun 201
7 0
7:00:00 gmt specifications specification ecmascript (ecma-262)the definition of 'date.prototype.toutcstring' in that specification.
Error.prototype.stack - JavaScript
; } catch(e) { alert(e.stack); } } function b() { trace(); } function a() { b(3, 4, '\n\n', undefined, {}); } a('first call, firstarg'); </script> assuming the above markup is saved as c:\example.html on a windows file system it produces an alert message box with the following text: starting with firefox 30 and later containing the column number: trace@file:///c:/example.html:9:1
7 b@file:///c:/example.html:16:13 a@file:///c:/example.html:19:13 @file:///c:/example.html:21:9 firefox 14 to firefox 29: trace@file:///c:/example.html:9 b@file:///c:/example.html:16 a@file:///c:/example.html:19 @file:///c:/example.html:21 firefox 13 and earlier would instead produce the following text: error("myerror")@:0 trace()@file:///c:/example.html:9 b(3,4,"\n\n",(void 0),[object object])...
... try { new function('throw new error()')(); } catch (e) { console.log(e.stack); } // anonymous@file:///c:/example.html line
7 > function:1:1 // @file:///c:/example.html:
7:6 try { eval("eval('fail')"); } catch (x) { console.log(x.stack); } // @file:///c:/example.html line
7 > eval line 1 > eval:1:1 // @file:///c:/example.html line
7 > eval:1:1 // @file:///c:/example.html:
7:6 you can also use the //# sourceurl directive to name an eval source.
Intl.Collator.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp 4
7 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp 4
7 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.DateTimeFormat() constructor - JavaScript
syntax new intl.datetimeformat([locales[, options]]) parameters locales optional a string with a bcp 4
7 language tag, or an array of such strings.
...log(new intl.datetimeformat().format(date)); // → "12/19/2012" if run with en-us locale (language) and time zone america/los_angeles (utc-0800) using timestyle and datestyle let o = new intl.datetimeformat("en" , { timestyle: "short" }); console.log(o.format(date.now())); // "13:31 am" let o = new intl.datetimeformat("en" , { datestyle: "short" }); console.log(o.format(date.now())); // "0
7/0
7/20" let o = new intl.datetimeformat("en" , { timestyle: "medium", datestyle: "short" }); console.log(o.format(date.now())); // "0
7/0
7/20, 13:31:55 am" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.datetimeformat' in that specification.
Intl.DateTimeFormat.prototype.formatRange() - JavaScript
let date1 = new date(date.utc(200
7, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(200
7, 0, 10, 11, 0, 0)); let date3 = new date(date.utc(200
7, 0, 20, 10, 0, 0)); // > 'wed, 10 jan 200
7 10:00:00 gmt' // > 'wed, 10 jan 200
7 11:00:00 gmt' // > 'sat, 20 jan 200
7 10:00:00 gmt' let fmt1 = new intl.datetimeformat("en", { year: '2-digit', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }); cons...
...ole.log(fmt1.format(date1)); console.log(fmt1.formatrange(date1, date2)); console.log(fmt1.formatrange(date1, date3)); // > '1/10/0
7, 10:00 am' // > '1/10/0
7, 10:00 – 11:00 am' // > '1/10/0
7, 10:00 am – 1/20/0
7, 10:00 am' let fmt2 = new intl.datetimeformat("en", { year: 'numeric', month: 'short', day: 'numeric' }); console.log(fmt2.format(date1)); console.log(fmt2.formatrange(date1, date2)); console.log(fmt2.formatrange(date1, date3)); // > 'jan 10, 200
7' // > 'jan 10, 200
7' // > 'jan 10 – 20, 200
7' specifications specification intl.datetimeformat.formatrangethe definition of 'formatrange()' in that specification.
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp 4
7 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp 4
7 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.DisplayNames.prototype.resolvedOptions() - JavaScript
description the object returned by resolvedoptions() has the following properties: locale the bcp 4
7 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp 4
7 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.ListFormat.prototype.resolvedOptions() - JavaScript
description the object returned by resolvedoptions() has the following properties: locale the bcp 4
7 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp 4
7 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.NumberFormat.prototype.format() - JavaScript
examples using format use the format getter function for formatting a single currency value, here for russia: var options = { style: 'currency', currency: 'rub' }; var numberformat = new intl.numberformat('ru-ru', options); console.log(numberformat.format(654321.98
7)); // → "654 321,99 руб." using format with map use the format getter function for formatting all numbers in an array.
... var a = [123456.
789, 98
7654.321, 456
789.123]; var numberformat = new intl.numberformat('es-es'); var formatted = a.map(n => numberformat.format(n)); console.log(formatted.join('; ')); // → "123.456,
789; 98
7.654,321; 456.
789,123" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.prototype.format' in that specification.
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp 4
7 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp 4
7 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp 4
7 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp 4
7 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp 4
7 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp 4
7 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Math.SQRT1_2 - JavaScript
the math.sqrt1_2 property represents the square root of 1/2 which is approximately 0.
70
7: math.sqrt1_2=12=12≈0.
70
7\mathtt{\mi{math.sqrt1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.
70
7 the source for this interactive example is stored in a github repository.
... examples using math.sqrt1_2 the following function returns 1 over the square root of 2: function getroot1_2() { return math.sqrt1_2; } getroot1_2(); // 0.
70
7106
78118654
76 specifications specification ecmascript (ecma-262)the definition of 'math.sqrt1_2' in that specification.
Math.asinh() - JavaScript
polyfill math.asinh can be emulated with the following function: if (!math.asinh) math.asinh = function(x) { var absx = math.abs(x), w if (absx < 3.
725290298461914e-9) // |x| < 2^-28 return x if (absx > 268435456) // |x| > 2^28 w = math.log(absx) + math.ln2 else if (absx > 2) // 2^28 >= |x| > 2 w = math.log(2 * absx + 1 / (math.sqrt(x * x + 1) + absx)) else var t = x * x, w = math.log1p(absx + t / (1 + math.sqrt(1 + t))) return x > 0 ?
... examples using math.asinh() math.asinh(1); // 0.8813
7358
7019543 math.asinh(0); // 0 specifications specification ecmascript (ecma-262)the definition of 'math.asinh' in that specification.
Math.imul() - JavaScript
0x003fffff /*opa & 0x000fffff*/ * 0x
7fffffff /*opb*/ = 0x1fffff
7fc00001 // 0x1fffff
7fc00001 < number.max_safe_integer /*0x1fffffffffffff*/ var result = (opa & 0x003fffff) * opb; // 2.
... we can remove an integer coersion from the statement above because: // 0x1fffff
7fc00001 + 0xffc00000 = 0x1fffffff800001 // 0x1fffffff800001 < number.max_safe_integer /*0x1fffffffffffff*/ if (opa & 0xffc00000 /*!== 0*/) result += (opa & 0xffc00000) * opb |0; return result |0; }; examples using math.imul() math.imul(2, 4); // 8 math.imul(-1, 8); // -8 math.imul(-2, -2); // 4 math.imul(0xffffffff, 5); // -5 math.imul(0xfffffffe, 5); // -10 specifications specification ecmascript (ecma-262)the definition of 'math.imul' in that specification.
Math.pow() - JavaScript
examples using math.pow() // simple math.pow(
7, 2); // 49 math.pow(
7, 3); // 343 math.pow(2, 10); // 1024 // fractional exponents math.pow(4, 0.5); // 2 (square root of 4) math.pow(8, 1/3); // 2 (cube root of 8) math.pow(2, 0.5); // 1.4142135623
730951 (square root of 2) math.pow(2, 1/3); // 1.2599210498948
732 (cube root of 2) // signed exponents math.pow(
7, -2); // 0.02040816326530612 (1/49) math.pow(8, -1/3); // 0.5 // signed b...
...ases math.pow(-
7, 2); // 49 (squares are positive) math.pow(-
7, 3); // -343 (cubes can be negative) math.pow(-
7, 0.5); // nan (negative numbers don't have a real square root) // due to "even" and "odd" roots laying close to each other, // and limits in the floating number precision, // negative bases with fractional exponents always return nan math.pow(-
7, 1/3); // nan specifications specification ecmascript (ecma-262)the definition of 'math.pow' in that specification.
Math.trunc() - JavaScript
v : 0); // returns: // 0 -> 0 // -0 -> -0 // 0.2 -> 0 // -0.2 -> -0 // 0.
7 -> 0 // -0.
7 -> -0 // infinity -> infinity // -infinity -> -infinity // nan -> nan // null -> 0 }; } or: if (!math.trunc) { math.trunc = function (v) { return v < 0 ?
... math.ceil(v) : math.floor(v); }; } examples using math.trunc() math.trunc(13.3
7); // 13 math.trunc(42.84); // 42 math.trunc(0.123); // 0 math.trunc(-0.123); // -0 math.trunc('-1.123'); // -1 math.trunc(nan); // nan math.trunc('foo'); // nan math.trunc(); // nan specifications specification ecmascript (ecma-262)the definition of 'math.trunc' in that specification.
Number.prototype.toLocaleString() - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var number = 123456.
789; // german uses comma as decimal separator and period for thousands console.log(number.tolocalestring('de-de')); // → 123.456,
789 // arabic in most arabic speaking countries uses eastern arabic digits console.log(number.tolocalestring('ar-eg')); // → ١٢٣٤٥٦٫٧٨٩ // india uses thousands/lakh/crore separators console.log(number.tolocalestring('en-in')); // → 1,23,456.
789 // the...
...chinese decimal console.log(number.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(number.tolocalestring(['ban', 'id'])); // → 123.456,
789 using options the results provided by tolocalestring can be customized using the options argument: var number = 123456.
789; // request a currency format console.log(number.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.456,
79 € // the japanese yen doesn't use a minor unit console.log(number.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ¥123,45
7 // limit to three...
Object.defineProperty() - JavaScript
var o = {}; // creates a new object // example of an object property added // with defineproperty with a data property descriptor object.defineproperty(o, 'a', { value: 3
7, writable: true, enumerable: true, configurable: true }); // 'a' property exists in the o object and its value is 3
7 // example of an object property added // with defineproperty with an accessor property descriptor var bvalue = 38; object.defineproperty(o, 'b', { // using shorthand method names (es2015 feature).
... var o = {}; // creates a new object object.defineproperty(o, 'a', { value: 3
7, writable: false }); console.log(o.a); // logs 3
7 o.a = 25; // no error thrown // (it would throw in strict mode, // even if the value had been the same) console.log(o.a); // logs 3
7.
Object.entries() - JavaScript
examples const obj = { foo: 'bar', baz: 42 }; console.log(object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] // array like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] // array like object with random key ordering const anobj = { 100: 'a', 2: 'b',
7: 'c' }; console.log(object.entries(anobj)); // [ ['2', 'b'], ['
7', 'c'], ['100', 'a'] ] // getfoo is property which isn't enumerable const myobj = object.create({}, { getfoo: { value() { return this.foo; } } }); myobj.foo = 'bar'; console.log(object.entries(myobj)); // [ ['foo', 'bar'] ] // non-object argument will be coerced to an object console.log(object.entries('foo')); // [ ['0', 'f'], ['1...
...', 'o'], ['2', 'o'] ] // returns an empty array for any primitive type, since primitives have no own properties console.log(object.entries(100)); // [ ] // iterate through key-value gracefully const obj = { a: 5, b:
7, c: 9 }; for (const [key, value] of object.entries(obj)) { console.log(`${key} ${value}`); // "a 5", "b
7", "c 9" } // or, using array extras object.entries(obj).foreach(([key, value]) => { console.log(`${key} ${value}`); // "a 5", "b
7", "c 9" }); converting an object to a map the new map() constructor accepts an iterable of entries.
Object.getOwnPropertyDescriptor() - JavaScript
examples using object.getownpropertydescriptor var o, d; o = { get foo() { return 1
7; } }; d = object.getownpropertydescriptor(o, 'foo'); // d is { // configurable: true, // enumerable: true, // get: /*the getter function*/, // set: undefined // } o = { bar: 42 }; d = object.getownpropertydescriptor(o, 'bar'); // d is { // configurable: true, // enumerable: true, // value: 42, // writable: true // } o = { [symbol.for('baz')]:
73 } d = object.getownpropertydescri...
...ptor(o, symbol.for('baz')); // d is { // configurable: true, // enumerable: true, // value:
73, // writable: true // } o = {}; object.defineproperty(o, 'qux', { value: 86
75309, writable: false, enumerable: false }); d = object.getownpropertydescriptor(o, 'qux'); // d is { // value: 86
75309, // writable: false, // enumerable: false, // configurable: false // } non-object coercion in es5, if the first argument to this method is not an object (a primitive), then it will cause a typeerror.
Object.keys() - JavaScript
if (hasownproperty.call(obj, prop)) { result.push(prop); } } if (hasdontenumbug) { for (i = 0; i < dontenumslength; i++) { if (hasownproperty.call(obj, dontenums[i])) { result.push(dontenums[i]); } } } return result; }; }()); } please note that the above code includes non-enumerable keys in ie
7 (and maybe ie8), when passing in an object from a different window.
... examples using object.keys // simple array const arr = ['a', 'b', 'c']; console.log(object.keys(arr)); // console: ['0', '1', '2'] // array-like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.keys(obj)); // console: ['0', '1', '2'] // array-like object with random key ordering const anobj = { 100: 'a', 2: 'b',
7: 'c' }; console.log(object.keys(anobj)); // console: ['2', '
7', '100'] // getfoo is a property which isn't enumerable const myobj = object.create({}, { getfoo: { value: function () { return this.foo; } } }); myobj.foo = 1; console.log(object.keys(myobj)); // console: ['foo'] if you want all properties—including non-enumerables—see object.getownpropertynames().
Promise.all() - JavaScript
var p1 = promise.resolve(3); var p2 = 133
7; var p3 = new promise((resolve, reject) => { settimeout(() => { resolve("foo"); }, 100); }); promise.all([p1, p2, p3]).then(values => { console.log(values); // [3, 133
7, "foo"] }); if the iterable contains non-promise values, they will be ignored, but still counted in the returned promise array value (if the promise is fulfilled): // this will be counted as if the iterable passed is ...
...ay); console.log(p); settimeout(function() { console.log('the stack is now empty'); console.log(p); }); // logs // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "rejected", <reason>: 44 } but, promise.all resolves synchronously if and only if the iterable passed is empty: var p = promise.all([]); // will be immediately resolved var p2 = promise.all([133
7, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously console.log(p); console.log(p2) settimeout(function() { console.log('the stack is now empty'); console.log(p2); }); // logs // promise { <state>: "fulfilled", <value>: array[0] } // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: array[2] } ...
Promise - JavaScript
const promisea = new promise( (resolutionfunc,rejectionfunc) => { resolutionfunc(
777); }); // at this point, "promisea" is already settled.
... promisea.then( (val) => console.log("asynchronous logging has val:",val) ); console.log("immediate logging"); // produces output in this order: // immediate logging // asynchronous logging has val:
777 constructor promise() creates a new promise object.
Reflect.apply() - JavaScript
function.prototype.apply.call(math.floor, undefined, [1.
75]); with reflect.apply() this becomes less verbose and easier to understand.
... examples using reflect.apply() reflect.apply(math.floor, undefined, [1.
75]); // 1; reflect.apply(string.fromcharcode, undefined, [104, 101, 108, 108, 111]) // "hello" reflect.apply(regexp.prototype.exec, /ab/, ['confabulation']).index // 4 reflect.apply(''.charat, 'ponies', [3]) // "i" specifications specification ecmascript (ecma-262)the definition of 'reflect.apply' in that specification.
RegExp.prototype[@@replace]() - JavaScript
var result = str; for (var i = 0; i < this.count; i++) { result = regexp.prototype[symbol.replace].call(this, result, replacement); } return result; } } var re = new myregexp('\\d', '', 3); var str = '0123456
7'; var newstr = str.replace(re, '#'); // string.prototype.replace calls re[@@replace].
... console.log(newstr); // ###3456
7 specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@replace]' in that specification.
RegExp - JavaScript
let text = 'Образец text на русском языке' let regex = /[\u0400-\u04ff]+/g let match = regex.exec(text) console.log(match[0]) // logs 'Образец' console.log(regex.lastindex) // logs '
7' let match2 = regex.exec(text) console.log(match2[0]) // logs 'на' [did not log 'text'] console.log(regex.lastindex) // logs '15' // and so on the unicode property escapes feature introduces a solution, by allowing for a statement as simple as \p{scx=cyrl}.
... extracting sub-domain name from url let url = 'http://xxx.domain.com' console.log(/[^.]+/.exec(url)[0].substr(
7)) // logs 'xxx' instead of using regular expressions for parsing urls, it is usually better to use the browsers built-in url parser by using the url api.
String.prototype.charCodeAt() - JavaScript
the first 0 to 12
7 are a direct match of the ascii character set.
...fixedcharcodeat('\ud800\udc00', 1); // false idx = idx || 0; var code = str.charcodeat(idx); var hi, low; // high surrogate (could change last hex to 0xdb
7f // to treat high private surrogates // as single characters) if (0xd800 <= code && code <= 0xdbff) { hi = code; low = str.charcodeat(idx + 1); if (isnan(low)) { throw 'high surrogate not followed by ' + 'low surrogate in fixedcharcodeat()'; } return ( (hi - 0xd800) * 0x400) + (low - 0xdc00) + 0x10000; } if (0xdc00 <= code && code <= 0xdfff)...
String.fromCodePoint() - JavaScript
nt", { "value": fromcodepoint, "configurable": true, "writable": true }); } catch(e) { string.fromcodepoint = fromcodepoint; } }(string.fromcharcode)); examples using fromcodepoint() valid input: string.fromcodepoint(42); // "*" string.fromcodepoint(65, 90); // "az" string.fromcodepoint(0x404); // "\u0404" == "Є" string.fromcodepoint(0x2f804); // "\ud8
7e\udc04" string.fromcodepoint(194564); // "\ud8
7e\udc04" string.fromcodepoint(0x1d306, 0x61, 0x1d30
7); // "\ud834\udf06a\ud834\udf0
7" invalid input: string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerror string.fromcodepoint(3.14); // rangeerror string.fromcodepoint(3e-2); // rangeerror string.fromcodep...
...instead, it requires the utf-16 surrogate pair in order to return a supplementary character: string.fromcharcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(55356, 5
7091); // stars" == "\ud83c\udf03" string.fromcodepoint(), on the other hand, can return 4-byte supplementary characters, as well as the more common 2-byte bmp characters, by specifying their code point (which is equivalent to the utf-32 code unit): string.fromcodepoint(0x1f303); // or 12
774
7 in decimal specifications specification ecmascript (ecma-262)the definition of 'string.fr...
String length - JavaScript
7) established a maximum length of 2^53 - 1 elements.
... unicode since `length` counts code units instead of characters, if you want to get the number of characters you need something like this: function getcharacterlength (str) { // the string iterator that is used here iterates over characters, // not mere code units return [...str].length; } console.log(getcharacterlength('a\ud8
7e\udc04z')); // 3 // while not recommended, you could add this to each string as follows: object.defineproperty(string.prototype, 'charlength', { get () { return getcharacterlength(this); } }); console.log('a\ud8
7e\udc04z'.charlength); // 3 examples basic usage let x = 'mozilla'; let empty = ''; console.log(x + ' is ' + x.length + ' code units long'); /* "mozilla is
7 code units lo...
String.prototype.normalize() - JavaScript
ples using normalize() // initial string // u+1e9b: latin small letter long s with dot above // u+0323: combining dot below let str = '\u1e9b\u0323'; // canonically-composed form (nfc) // u+1e9b: latin small letter long s with dot above // u+0323: combining dot below str.normalize('nfc'); // '\u1e9b\u0323' str.normalize(); // same as above // canonically-decomposed form (nfd) // u+01
7f: latin small letter long s // u+0323: combining dot below // u+030
7: combining dot above str.normalize('nfd'); // '\u01
7f\u0323\u030
7' // compatibly-composed (nfkc) // u+1e69: latin small letter s with dot below and dot above str.normalize('nfkc'); // '\u1e69' // compatibly-decomposed (nfkd) // u+00
73: latin small letter s // u+0323: combining dot below // u+030
7: combining dot above str.n...
...ormalize('nfkd'); // '\u00
73\u0323\u030
7' specifications specification ecmascript (ecma-262)the definition of 'string.prototype.normalize' in that specification.
String.prototype.slice() - JavaScript
console.log(str.slice(-11, 16)) // => "is u" here it counts forwards from the start by 11 to find the start index and backwards from the end by
7 to find the end index.
... console.log(str.slice(11, -
7)) // => " is u" these arguments count backwards from the end by 5 to find the start index and backwards from the end by 1 to find the end index.
TypedArray - JavaScript
typedarray objects type value range size in bytes description web idl type equivalent c type int8array -128 to 12
7 1 8-bit two's complement signed integer byte int8_t uint8array 0 to 255 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 255 1 8-bit unsigned integer (clamped) octet uint8_t int16array -32
768 to 32
76
7 2 16-bit two's complement signed integer short int16_t uint16array 0 to 65535 2 16-...
...bit unsigned integer unsigned short uint16_t int32array -214
7483648 to 214
748364
7 4 32-bit two's complement signed integer long int32_t uint32array 0 to 429496
7295 4 32-bit unsigned integer unsigned long uint32_t float32array 1.2×10-38 to 3.4×1038 4 32-bit ieee floating point number (
7 significant digits e.g., 1.123456
7) unrestricted float float float64array 5.0×10-324 to 1.8×10308 8 64-bit ieee floating point number (16 significant digits e.g., 1.123...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint...
Uint8ClampedArray() constructor - JavaScript
syntax new uint8clampedarray(); // new in es201
7 new uint8clampedarray(length); new uint8clampedarray(typedarray); new uint8clampedarray(object); new uint8clampedarray(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
... examples different ways to create a uint8clampedarray // from a length var uintc8 = new uint8clampedarray(2); uintc8[0] = 42; uintc8[1] = 133
7; console.log(uintc8[0]); // 42 console.log(uintc8[1]); // 255 (clamped) console.log(uintc8.length); // 2 console.log(uintc8.bytes_per_element); // 1 // from an array var arr = new uint8clampedarray([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8clampedarray([21, 31]); var y = new uint8clampedarray(x); console.log(y[0]); // 21 // from an arraybuffer var buffer ...
WeakMap() constructor - JavaScript
examples using weakmap const wm1 = new weakmap(), wm2 = new weakmap(), wm3 = new weakmap(); const o1 = {}, o2 = function() {}, o3 = window; wm1.set(o1, 3
7); wm1.set(o2, 'azerty'); wm2.set(o1, o2); // a value can be anything, including an object or a function wm2.set(o3, undefined); wm2.set(wm1, wm2); // keys and values can be any objects.
... wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2); // false wm2.has(o3); // true (even if the value itself is 'undefined') wm3.set(o1, 3
7); wm3.get(o1); // 3
7 wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false specifications specification ecmascript (ecma-262)the definition of 'weakmap constructor' in that specification.
WeakMap - JavaScript
examples using weakmap const wm1 = new weakmap(), wm2 = new weakmap(), wm3 = new weakmap(); const o1 = {}, o2 = function() {}, o3 = window; wm1.set(o1, 3
7); wm1.set(o2, 'azerty'); wm2.set(o1, o2); // a value can be anything, including an object or a function wm2.set(o3, undefined); wm2.set(wm1, wm2); // keys and values can be any objects.
... wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2); // false wm2.has(o3); // true (even if the value itself is 'undefined') wm3.set(o1, 3
7); wm3.get(o1); // 3
7 wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false implementing a weakmap-like class with a .clear() method class clearableweakmap { constructor(init) { this._wm = new weakmap(init); } clear() { this._wm = new weakmap(); } delete(k) { return this._wm.delete(k); } get(k) { return this._wm.get(k); } has(k) { return this._wm.has(k); } set(k, v) { this._wm.set(k, v); return this; } } specifications specification ...
WebAssembly.CompileError() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompileerror() constructorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Instance() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstance() constructorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Instance.prototype.exports - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.LinkError() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslinkerror() constructorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Memory.prototype.buffer - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsbufferchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Memory.prototype.grow() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmodule() constructorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.customSections() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscustomsectionschrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.exports() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.imports() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsimportschrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.RuntimeError() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsruntimeerror() constructorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jstable() constructorchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.get() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgetchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.grow() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.length - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslengthchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.set() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jssetchrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.compile() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompilechrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.instantiate() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstantiatechrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
WebAssembly.validate() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsvalidatechrome full support 5
7edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44saf...
...ari full support 11webview android full support 5
7chrome android full support 5
7firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support
7.0nodejs full support 8.0.0legend full support ...
Bitwise XOR (^) - JavaScript
9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) =
7 (base 10) bitwise xoring any number x with 0 yields x.
... examples using bitwise xor // 9 (00000000000000000000000000001001) // 14 (00000000000000000000000000001110) 14 ^ 9; //
7 (00000000000000000000000000000111) specifications specification ecmascript (ecma-262)the definition of 'bitwise xor expression' in that specification.
Destructuring assignment - JavaScript
let a, b; [a=5, b=
7] = [1]; console.log(a); // 1 console.log(b); //
7 swapping variables two variables values can be swapped in one destructuring expression.
... nested object and array destructuring const metadata = { title: 'scratchpad', translations: [ { locale: 'de', localization_tags: [], last_edit: '2014-04-14t08:43:3
7', url: '/de/docs/tools/scratchpad', title: 'javascript-umgebung' } ], url: '/docs/tools/scratchpad' }; let { title: englishtitle, // rename translations: [ { title: localetitle, // rename }, ], } = metadata; console.log(englishtitle); // "scratchpad" console.log(localetitle); // "javascript-umgebung" for of iteration and destructuring const people = [...
Left shift (<<) - JavaScript
so e.g.: 9 << 3 translates to: 9 * (2 ** 3) = 9 * (8) =
72.
... examples using left shift 9 << 3; //
72 // 9 * (2 ** 3) = 9 * (8) =
72 specifications specification ecmascript (ecma-262)the definition of 'bitwise shift operators' in that specification.
Operator precedence - JavaScript
19 new (without argument list) right-to-left new … 18 postfix increment n/a … ++ postfix decrement … -- 1
7 logical not right-to-left !
...�� in … instanceof … instanceof … 11 equality left-to-right … == … inequality … != … strict equality … === … strict inequality … !== … 10 bitwise and left-to-right … & … 9 bitwise xor left-to-right … ^ … 8 bitwise or left-to-right … | …
7 logical and left-to-right … && … 6 logical or left-to-right … || … 5 nullish coalescing operator left-to-right … ??
Property accessors - JavaScript
77 .toexponential() // or
77 .toexponential() // or ;(
77).toexponential() // or
77..toexponential() // or
77.0.toexponential() // because
77.
... ===
77.0, no ambiguity bracket notation in the object[property_name] syntax, the property_name is just a string or symbol.
Unsigned right shift (>>>) - JavaScript
for example, -9 >>> 2 yields 10
73
741821, which is different than -9 >> 2 (which yields -3): .
... -9 (base 10): 11111111111111111111111111110111 (base 2) -------------------------------- -9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 10
73
741821 (base 10) examples using unsigned right shift 9 >>> 2; // 2 -9 >>> 2; // 10
73
741821 specifications specification ecmascript (ecma-262)the definition of 'bitwise shift operators' in that specification.
yield - JavaScript
function* countapplesales () { let salelist = [3,
7, 5] for (let i = 0; i < salelist.length; i++) { yield salelist[i] } } once a generator function is defined, it can be used by constructing an iterator as shown.
... let applestore = countapplesales() // generator { } console.log(applestore.next()) // { value: 3, done: false } console.log(applestore.next()) // { value:
7, done: false } console.log(applestore.next()) // { value: 5, done: false } console.log(applestore.next()) // { value: undefined, done: true } you can also send a value with next(value) into the generator.
export - JavaScript
aph = { options: { color:'white', thickness:'2px' }, draw: function() { console.log('from graph draw function'); } } export { cube, foo, graph }; then in the top-level module included in your html page, we could have: import { cube, foo, graph } from './my-module.js'; graph.options = { color:'blue', thickness:'3px' }; graph.draw(); console.log(cube(3)); // 2
7 console.log(foo); // 4.555806215962888 it is important to note the following: you need to include this script in your html with a <script> element of type="module", so that it gets recognised as a module and dealt with appropriately.
... using the default export if we want to export a single value or to have a fallback value for your module, you could use a default export: // module "my-module.js" export default function cube(x) { return x * x * x; } then, in another script, it is straightforward to import the default export: import cube from './my-module.js'; console.log(cube(3)); // 2
7 using export from let's take an example where we have the following hierarchy: childmodule1.js: exporting myfunction and myvariable childmodule2.js: exporting myclass parentmodule.js: acting as an aggregator (and doing nothing else) top level module: consuming the exports of parentmodule.js this is what it would look like using code snippets: // in childmodule1.js let myfunction = ...
Trailing commas - JavaScript
javascript has allowed trailing commas in array literals since the beginning, and later added them to object literals (ecmascript 5) and most recently (ecmascript 201
7) to function parameters.
... var arr = [1, 2, 3,,,]; arr.length; // 5 objects starting with ecmascript 5, trailing commas in object literals are legal as well: var object = { foo: "bar", baz: "qwerty", age: 42, }; trailing commas in functions ecmascript 201
7 allows trailing commas in function parameter lists.
JavaScript typed arrays - JavaScript
type value range size in bytes description web idl type equivalent c type int8array -128 to 12
7 1 8-bit two's complement signed integer byte int8_t uint8array 0 to 255 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 255 1 8-bit unsigned integer (clamped) octet uint8_t int16array -32
768 to 32
76
7 2 16-bit two's complement signed integer short int16_t uint16array 0 to 65535 2 16-...
...bit unsigned integer unsigned short uint16_t int32array -214
7483648 to 214
748364
7 4 32-bit two's complement signed integer long int32_t uint32array 0 to 429496
7295 4 32-bit unsigned integer unsigned long uint32_t float32array 1.2×10-38 to 3.4×1038 4 32-bit ieee floating point number (
7 significant digits e.g., 1.123456) unrestricted float float float64array 5.0×10-324 to 1.8×10308 8 64-bit ieee floating point number (16 significant digits e.g., 1.123...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint ...
Web app manifests
iceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen
72.png", "sizes": "
72x
72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/touch/homescreen168.png", "sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png...
... splash screens in chrome 4
7 and later, a splash screen is displayed for sites launched from a homescreen.
Understanding latency - Web Performance
the approximate values of some presets include: selection download speed upload speed minimum latency (ms) gprs 50 kbps 20 kbps 500 regular 2g 250 kbps 50 kbps 300 good 2g 450 kbps 150 kbps 150 regular 3g
750 kbps 250 kbps 100 good 3g 1.5 mbps
750 kbps 40 regular 4g/lte 4 mbps 3 mbps 20 dsl 2 mbps 1 mbps 5 wi-fi 30 mbps 15 mbps 2 network timings also, on the network tab, you can see how long each request took to complete.
... we can look at how long a 26
7.5kb svg image asset took to download.
Add to Home screen - Progressive web apps (PWAs)
we can then use a handler like the one below to handle the installation: window.addeventlistener('beforeinstallprompt', (e) => { // prevent chrome 6
7 and earlier from automatically showing the prompt e.preventdefault(); // stash the event so it can be triggered later.
...wait for the user to respond to the prompt deferredprompt.userchoice.then((choiceresult) => { if (choiceresult.outcome === 'accepted') { console.log('user accepted the a2hs prompt'); } else { console.log('user dismissed the a2hs prompt'); } deferredprompt = null; }); }); }); so here we: call event.preventdefault() to stop chrome 6
7 and earlier from calling the install prompt automatically (this behavior changed in chrome 68).
Introduction to progressive web apps - Progressive web apps (PWAs)
india's largest e-commerce site was rebuilt as a progressive web app in 2015, which resulted in
70% increase in conversions.
... an example application in this series of articles we will examine the source code of a super simple website that lists information about games submitted to the a-frame category in the js13kgames 201
7 competition.
Media - Progressive web apps (PWAs)
for print media, you normally use appropriate length units like inches (in) and points (pt = 1/
72 inch), or centimeters (cm) and millimeters (mm).
... example these rules specify styles for a button that changes dynamically as the user interacts with it: .green-button { background-color:#cec; color:#black; border:2px outset #cec; padding: 5px 10px; } .green-button[disabled] { background-color:#cdc; color:#
777; } .green-button:active, .green-button.active { border-style: inset; } <table> <tbody> <tr> <td><button class="green-button" disabled>click me</button></td> <td><button class="green-button">click me</button></td> <td><button class="green-button active">click me</button></td> </tr> <tr style="line-height:25%;"> <td> </td> </tr> <tr style="font-style:italic;">...
dominant-baseline - SVG: Scalable Vector Graphics
example svg <svg width="400" height="300" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <!-- materialization of anchors --> <path d="m60,20 l60,2
70 m30,20 l400,20 m30,
70 l400,
70 m30,120 l400,120 m30,1
70 l400,1
70 m30,220 l400,220 m30,2
70 l400,2
70" stroke="grey" /> <!-- anchors in action --> <text dominant-baseline="auto" x="
70" y="20">auto</text> <text dominant-baseline="middle" x="
70" y="
70">middle</text> <text dominant-baseline="baseline" x="
70" y="120">base...
...line</text> <text dominant-baseline="hanging" x="
70" y="1
70">hanging</text> <text dominant-baseline="mathematical" x="
70" y="220">mathematical</text> <text dominant-baseline="text-top" x="
70" y="2
70">text-top</text> <!-- materialization of anchors --> <circle cx="60" cy="20" r="3" fill="red" /> <circle cx="60" cy="
70" r="3" fill="red" /> <circle cx="60" cy="120" r="3" fill="red" /> <circle cx="60" cy="1
70" r="3" fill="red" /> <circle cx="60" cy="220" r="3" fill="red" /> <circle cx="60" cy="2
70" r="3" fill="red" /> <style><![cdata[ text { font: bold 30px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of 'domina...
in - SVG: Scalable Vector Graphics
--> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/645
7/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
... --> <feimage xlink:href="https://developer.mozilla.org/files/645
7/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
stroke-dashoffset - SVG: Scalable Vector Graphics
fset --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> <!-- the start of the dash array computation is pulled by 3 user units --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" /> <!-- the start of the dash array computation is pushed by 3 user units --> <line x1="0" y1="
7" x2="30" y2="
7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> <!-- the start of the dash array computation is pulled by 1 user units which ends up in the same rendering as the previous example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highl...
...ight the offset of the dash array for each line --> <path d="m0,5 h-3 m0,
7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value 0 animatable yes the offset is usually expressed in user units resolved against the pathlength but if a <percentage> is used, the value is resolved as a percentage of the current viewport.
x - SVG: Scalable Vector Graphics
{ height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="
75%" y1="0" x2="
75%" y2="100%" /> <!-- x with a single value --> <text y="40%" x="50%">svg</text> <!-- x with multiple values --> <text y="90%" x="25%, 50%,
75%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
... { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="
75%" y1="0" x2="
75%" y2="100%" /> <text> <!-- x with a single value --> <tspan y="40%" x="50%">svg</tspan> <!-- x with multiple values --> <tspan y="90%" x="25%, 50%,
75%">svg</tspan> </text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } use for <use>, x defines the x coordinate of the uper ...
Content type - SVG: Scalable Vector Graphics
clock values: full clock values: 02:30:03 = 2 hours, 30 minutes and 3 seconds 50:00:10.25 = 50 hours, 10 seconds and 250 milliseconds partial clock value: 02:33 = 2 minutes and 33 seconds 00:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds timecount values: 3.2h = 3.2 hours = 3 hours and 12 minutes 45min = 45 minutes 30s = 30 seconds 5ms = 5 milliseconds 12.46
7 = 12 seconds and 46
7 milliseconds fractional values are just (base 10) floating point definitions of seconds.
... unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) -214
7483648 to 214
748364
7.
<feComponentTransfer> - SVG: Scalable Vector Graphics
r> <fefuncr type="linear" slope="0.5" intercept="0"></fefuncr> <fefuncg type="linear" slope="0.5" intercept="0.25"></fefuncg> <fefuncb type="linear" slope="0.5" intercept="0.5"></fefuncb> </fecomponenttransfer> </filter> <filter id="gamma" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" amplitude="4" exponent="
7" offset="0"></fefuncr> <fefuncg type="gamma" amplitude="4" exponent="4" offset="0"></fefuncg> <fefuncb type="gamma" amplitude="4" exponent="1" offset="0"></fefuncb> </fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <text x="0" y="20">default</text> <rect x="0" y="30" width="100%" height="20"></rect> <text x="0" y="
70">identity</text> <re...
...ct x="0" y="80" width="100%" height="20" style="filter:url(#identity)"></rect> <text x="0" y="120">table lookup</text> <rect x="0" y="130" width="100%" height="20" style="filter:url(#table)"></rect> <text x="0" y="1
70">discrete table lookup</text> <rect x="0" y="180" width="100%" height="20" style="filter:url(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="230" width="100%" height="20" style="filter:url(#linear)"></rect> <text x="0" y="2
70">gamma function</text> <rect x="0" y="280" width="100%" height="20" style="filter:url(#gamma)"></rect> </g> </svg> css rect { fill: url(#rainbow); } result specifications specification status comment filter effects module level 1the definition of '<fecompo...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
to illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows: 0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255 and you define a 3-by-3 convolution kernel as follows: 1 2 3 4 5 6
7 8 9 let's focus on the color value at the second row and second column of the image (source pixel value is 120).
... assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘targetx’ and ‘targety’, then resulting color value will be: (9* 0 + 8* 20 +
7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+
7+6+5+4+3+2+1) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in order kernelmatrix divisor bias targetx targety edgemode kernelunitlength preservealpha dom interface this element implements the svgfeconvolvematrixelement interface.
<mpath> - SVG: Scalable Vector Graphics
--> <path id="path1" d="m100,250 c 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="
7.06" /> <circle cx="100" cy="250" r="1
7.64" fill="blue" /> <circle cx="250" cy="100" r="1
7.64" fill="blue" /> <circle cx="400" cy="250" r="1
7.64" fill="blue" /> <!-- here is a triangle which will be moved about the motion path.
...--> <path d="m-25,-12.5 l25,-12.5 l 0,-8
7.5 z" fill="yellow" stroke="red" stroke-width="
7.06" > <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animatemotion> </path> </svg> result specifications specification status comment svg animations level 2the definition of '<mpath>' in that specification.
Filter effects - SVG: Scalable Vector Graphics
- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <!-- litpaint --> <fespecularlighting in="blur" surfacescale="5" specularconstant=".
75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fecomposite in="specout" in2="sourcealpha" operator="in" result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" ...
... step 3 <fespecularlighting in="offsetblur" surfacescale="5" specularconstant=".
75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fespecularlighting> takes in "offsetblur", generates a lighting effect, and stores the result in the buffer "specout".
Gradients in SVG - SVG: Scalable Vector Graphics
spreadmethod <?xml version="1.0" standalone="no"?> <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradientpad" cx="0.5" cy="0.5" r="0.4" fx="0.
75" fy="0.
75" spreadmethod="pad"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> <radialgradient id="gradientrepeat" cx="0.5" cy="0.5" r="0.4" fx="0.
75" fy="0.
75" spreadmethod="repeat"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </ra...
...dialgradient> <radialgradient id="gradientreflect" cx="0.5" cy="0.5" r="0.4" fx="0.
75" fy="0.
75" spreadmethod="reflect"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradientpad)"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#gradientrepeat)"/> <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#gradientreflect)"/> <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">pad</text> <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">repeat</text> <text x="125" y="140" fill="white" font-family="sans-serif"...
Mixed content - Web security
note: since firefox 55, the loading of mixed content is allowed on http://12
7.0.0.1/ (see bug 903966).
... chrome allows mixed content on http://12
7.0.0.1/ and http://localhost/.
Types of attacks - Web security
according to the open web application security project, xss was the seventh most common web app vulnerability in 201
7.
... recall that a subdomain such as application.example.com can set a cookie to be sent with requests to example.com or other sub-domains by setting the domain attribute: set-cookie: csrf=e8b66
7; secure; domain=example.com if a vulnerable application is available on a sub-domain, this mechanism can be abused in a session fixation attack.
Using custom elements - Web Components
note: custom elements are supported by default in firefox, chrome, and edge (
76).
...you can either use babel
7 or the babel-plugin-transform-builtin-classes for babel 6, and target es2015 in typescript instead of legacy.
Introduction to using XPath in JavaScript - XPath
"?> <people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <person> <name first="george" last="bush" /> <address street="1600 pennsylvania avenue" city="washington" country="usa"/> <phonenumber>202-456-1111</phonenumber> </person> <person> <name first="tony" last="blair" /> <address street="10 downing street" city="london" country="uk"/> <phonenumber>020
7925 0918</phonenumber> </person> </people> to make the contents of the xml document available within the extension, we create an xmlhttprequest object to load the document synchronously, the variable xmldoc will contain the document as an xmldocument object against which we can use the evaluate method javascript used in the extensions xul/js documents.
... ordered_node_snapshot_type
7 a result node-set containing snapshots of all the nodes matching the expression.
Enumerator.item - Archive of obsolete content
var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator.moveFirst - Archive of obsolete content
var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator.moveNext - Archive of obsolete content
var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator - Archive of obsolete content
requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Error.description - Archive of obsolete content
document.write(e) document.write (" "); // prints 5009: document.write((e.number & 0xffff)) document.write (" "); // prints "'y' is undefined": document.write(e.description); document.write (" "); // prints "'y' is undefined": document.write(e.message) } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Error.number - Archive of obsolete content
error code: 5009 facility code: 10 error message: 'y' is undefined requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Error.stackTraceLimit - Archive of obsolete content
try { var err = new error("my error"); error.stacktracelimit =
7; throw err; } catch(e) { document.write("error stack trace limit: ") document.write(error.stacktracelimit); } requirements supported in internet explorer 10 and in windows 8.x store apps.
GetObject - Archive of obsolete content
requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, and internet explorer 8 standards.
ScriptEngine() - Archive of obsolete content
example the following example illustrates the use of the scriptengine function: if (window.scriptengine) { console.log(window.scriptengine()); } // output: jscript requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
ScriptEngineBuildVersion - Archive of obsolete content
example the following example illustrates the use of the scriptenginebuildversion function: if(window.scriptenginebuildversion) { console.log(window.scriptenginebuildversion()); } // output: <current build version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
ScriptEngineMajorVersion - Archive of obsolete content
example the following example illustrates the use of the scriptenginemajorversion function: if (window.scriptenginemajorversion) { console.log(window.scriptengine()); } output: <current major version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
ScriptEngineMinorVersion - Archive of obsolete content
if (window.scriptengineminorversion) { console.log(window.scriptengineminorversion()); } //output: <current minor version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
VBArray.dimensions - Archive of obsolete content
mensions(); i++) { s += "the upper bound of dimension "; s += i + " is "; s += a.ubound(i); s += ".<br />"; } return(s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray.getItem - Archive of obsolete content
var a = new vbarray(vbarray); for (i = 0; i <= 2; i++) { for (j =0; j <= 2; j++) { document.writeln(a.getitem(i, j)); } } } --> </script> </head> <body> <script type="text/javascript"> <!-- getitemtest(createvbarray()); --> </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray.lbound - Archive of obsolete content
nsions(); i++) { s += "the lower bound of dimension "; s += i + " is "; s += a.lbound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer
7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
NSS 3.46.1 release notes
bugs fixed in nss 3.46.1 bug 1582343 - soft token mac verification not constant time bug 15
77953 - remove arbitrary hkdf output limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.46.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.46.1 compatibility nss 3.46.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49.2 release notes
bug 160832
7 - fix compilation problems with neon-specific code in freebl bug 1608895 - fix a taskcluster issue with python 2 / python 3 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49.2 shared libraries are backward compatible wit...
NSS Config Options
ecc curves prime192v1 prime192v2 prime192v3 prime239v1 prime239v2 prime239v3 prime256v1 secp112r1 secp112r2 secp128r1 secp128r2 secp160k1 secp160r1 secp160r2 secp192k1 secp192r1 secp224k1 secp256k1 secp256r1 secp384r1 secp521r1 c2pnb163v1 c2pnb163v2 c2pnb163v3 c2pnb1
76v1 c2tnb191v1 c2tnb191v2 c2tnb191v3 c2onb191v4 c2onb191v5 c2pnb208w1 c2tnb239v1 c2tnb239v2 c2tnb239v3 c2onb239v4 c2onb239v5 c2pnb2
72w1 c2pnb304w1 c2tnb359v1 c2pnb368w1 c2tnb431r1 sect113r1 sect131r1 sect131r1 sect131r2 sect163k1 sect163r1 sect163r2 sect193r1 sect193r2 sect233k1 sect233r1 sect239k1 sect283k1 sect283r1 sect409k1 sect409r1 sect5
71k1 sect5
71r1 hashe...
Enc Dec MAC Output Public Key as CSR
oise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify subject\n\n", "-s "); fprintf(stderr, "%-21s specify certficate request file name\n\n", "-r "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-
7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-
7s .enc and .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-
7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-
7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* map optio...
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
icate-----" #define ns_cert_trailer "-----end certificate-----" /* sample 6 commands */ typedef enum { generate_csr, add_cert_to_db, save_cert_to_header, encrypt, decrypt, sign, verify, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey = 5, lab = 6, certenc=
7, certvfy= 8, sig = 9 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s %s %s %s %s %s %s %s %s %s\n\n", progname, " -<g|a|h|e|ds|v> -d <dbdirpath> ", "[-p <dbpwd> | -f <dbpwdfile>] [-z <noisefilename>] [-a <\"\">]", "-s <subject> -r <csr> | ", ...
Encrypt Decrypt_MAC_Using Token
onal]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-
7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-
7s .enc and .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-
7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-
7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather ...
NSS Sample Code Sample_1_Hashing
5; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column >
76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input...
NSS Sample Code Sample_3_Basic Encryption and MACing
r, "%-20s specify db password file [optional]\n\n", "-f <dbpwdfile>"); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z <noisefilename>"); fprintf(stderr, "%-21s specify an input file name\n\n", "-i <ipfilename>"); fprintf(stderr, "%-21s specify an output file name\n\n", "-o <opfilename>"); fprintf(stderr, "%-
7s for encrypt, it takes <ipfilename> as an input file and produces\n", "note :"); fprintf(stderr, "%-
7s <ipfilename>.enc and <ipfilename>.header as intermediate output files.\n\n", ""); fprintf(stderr, "%-
7s for decrypt, it takes <ipfilename>.enc and <ipfilename>.header\n", ""); fprintf(stderr, "%-
7s as input files and produces <opfilename> as a f...
NSS Sample Code Utilities_1
5; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column >
76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * getdigit */ int getdigit(char c) { if (c == 0) { return -1; } if (c <= '9' && c >= '0') { return c - '0'; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } ...
NSS Sample Code sample2
*/ #include "nss.h" #include "pk11pub.h" /* example key & iv */ unsigned char gkey[] = {0xe8, 0xa
7, 0x
7c, 0xe2, 0x05, 0x63, 0x6a, 0x31}; unsigned char giv[] = {0xe4, 0xbb, 0x3b, 0xd3, 0xc3, 0x
71, 0x2e, 0x58}; int main(int argc, char **argv) { ck_mechanism_type ciphermech; pk11slotinfo* slot = null; pk11symkey* symkey = null; secitem* secparam = null; pk11context* enccontext = null; secitem keyitem, ivitem; secstatus rv, rv1, rv2; ...
NSS Sample Code sample4
* # create ca cert, self-signed, generates key-pair, prompts for key * # type, cert type etc * # answers for prompts: 5,9,n,y,-1,n,5,6,
7,9,n * $ certutil -s -s "cn=test ca, o=bogus inc, l=mtn view, st=ca, c=us" \ * -n testca -t ctu,ctu,ctu -v 60 -x -d .
NSS Sample Code sample5
*/ #include "nss.h" #include "pk11pub.h" #define base64_encoded_subjectpublickeyinfo "mfwwdqyjkozihvcnaqebbqadswawsajbal3f6tic3jeysugo+a2fpu3w+epv/feix21dc86wynpftw4srftz2onuzyluzdhzdb+k//8dct3iaozuui3r2emcaweaaq==" #define base64_encoded_privatekeyinfo "miibvqibadanbgkqhkig9w0baqefaascat8wgge
7ageaakeavcxpmhzckriy6cj5rz89tdb4sm/8v4hfbumlzpziekw1biysw3pag1tpittmmdl1v6t//x1xpcga
7nrsldhz4widaqabakeajh8+4qncwcmgivnm6ytbpqt+k/jeoexg2bqhjojvnxn3fazgcefxvpuibcjvfaijs9ybcmozzrato0+k2hwnoqihaoc4nvbo8fqhzs4yxm1m86kml4
7fa9ui//oufbhladw1aiea2dbmixnsbokb+ohver69p0gnewlvcjc9bjdvfdlvslcciqcptv3vgyjv2vdwxqzqahc+yb4gigaqoqbcbmjd3lyflqiga+vtydunoqwtzwve4grf
7izk2v5ccnhg3gr5rgwxn58cigccaforruksm66isg0iti04...
Hashing - sample 1
5; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column >
76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < inpu...
EncDecMAC using token object - sample 3
pecify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-
7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-
7s .enc and .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-
7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-
7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secs...
Utilities for nss samples
5; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column >
76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * getdigit */ int getdigit(char c) { if (c == 0) { return -1; } if (c <= '9' && c >= '0') { return c - '0'; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } ...
AudioParam.minValue - Web APIs
the default value of minvalue is the minimum negative single-precision floating-point value (-340,282,346,638,528,859,811,
704,183,484,516,925,440).
AudioParam.setValueCurveAtTime() - Web APIs
ainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set button to do something onclick var wavearray = new float32array(9); wavearray[0] = 0.5; wavearray[1] = 1; wavearray[2] = 0.5; wavearray[3] = 0; wavearray[4] = 0.5; wavearray[5] = 1; wavearray[6] = 0.5; wavearray[
7] = 0; wavearray[8] = 0.5; valuecurve.onclick = function() { gainnode.gain.setvaluecurveattime(wavearray, audioctx.currenttime, 2); } specifications specification status comment web audio apithe definition of 'setvaluecurveattime' in that specification.
AudioParam.value - Web APIs
consider this example: const source = new audiobuffersourcenode(...); const rate = 5.3; source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); the log output will be false, because the playback rate parameter, rate, was converted to the 32-bit floating-point number closest to 5.3, which yields 5.300000190
734863.
AudioTrack.language - Web APIs
syntax var audiotracklanguage = audiotrack.language; value a domstring specifying the bcp 4
7 (rfc 5646) format language tag of the primary language used in the audio track, or an empty string ("") if the language is not specified or known, or if the track doesn't contain speech.
AudioTrack - Web APIs
the language is specified as a bcp 4
7 (rfc 5646) language code, such as "en-us" or "pt-br".
AuthenticatorAttestationResponse.attestationObject - Web APIs
examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationobj = newcredentialinfo.response.attestationobject; // this will be a cbor encoded arraybuffer // do something with the response // (sending it back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications ...
AuthenticatorAttestationResponse.getTransports() - Web APIs
examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var transports = newcredentialinfo.response.gettransports(); console.table(transports); // may be something like ["internal", "nfc", "usb"] }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: a...
AuthenticatorAttestationResponse - Web APIs
examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; // do something with the response // (sending it back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an a...
AuthenticatorResponse - Web APIs
ential }).catch(function (err) { console.error(err); }); getting an authenticatorattestationresponse var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorresponse...
Background Tasks API - Web APIs
function getrandomintinclusive(min, max) { min = math.ceil(min); max = math.floor(max); return math.floor(math.random() * (max - min + 1)) + min; } function decodetechnostuff() { totaltaskcount = 0; currenttasknumber = 0; updatedisplay(); let n = getrandomintinclusive(100, 200); for (i=0; i<n; i++) { let taskdata = { count: getrandomintinclusive(
75, 150), text: "this text is from task number " + (i+1).tostring() + " of " + n }; enqueuetask(logtaskhandler, taskdata); } } document.getelementbyid("startbutton").addeventlistener("click", decodetechnostuff, false); decodetechnostuff() starts by zeroing the values of totaltaskcount (the number of tasks added to the queue so far) and currenttasknumber (the task currently being ...
BaseAudioContext.createConstantSource() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateconstantsourcechrome full support 56edge full support ≤
79firefox full support 53ie no support noopera full support 43safari no support nowebview android full support 56chrome android full support ...
BasicCardRequest - Web APIs
this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr dick straw", "cardsecuritycode" : "999", "expirymonth" : "0
7", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
BluetoothRemoteGATTCharacteristic.uuid - Web APIs
the bluetoothremotegattcharacteristic.uuid read-only property returns domstring containing the uuid of the characteristic, for example '00002a3
7-0000-1000-8000-00805f9b34fb' for the heart rate measurement characteristic.
BluetoothRemoteGATTCharacteristic - Web APIs
bluetoothremotegattcharacteristic.uuidread only returns a domstring containing the uuid of the characteristic, for example '00002a3
7-0000-1000-8000-00805f9b34fb' for the heart rate measurement characteristic.
CSSPositionValue - Web APIs
#image { width: 300px; height: 300px; border: 1px solid black; background-color: #dededf; object-fit: none; } <p>check the developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd
7dfb.svg" alt="mdn logo"/> ...
CSSRule - Web APIs
(until the documentation is completed, see the interface definition in the mozilla source code: nsidomcssimportrule.) cssrule.media_rule 4 cssmediarule cssrule.font_face_rule 5 cssfontfacerule cssrule.page_rule 6 csspagerule cssrule.keyframes_rule
7 csskeyframesrule cssrule.keyframe_rule 8 csskeyframerule reserved for future use 9 should be used to define color profiles in the future cssrule.namespace_rule 10 cssnamespacerule cssrule.counter_style_rule 11 csscounterstylerule cssrule.supports_rule 12 csssupportsrule cssrule.d...
CSSStyleDeclaration.setProperty() - Web APIs
y: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; margin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% -
70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; } javascript const borderbtn = document.queryselector('.border'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = document.queryselector('.color'); const bo...
CSS Painting API - Web APIs
+ 20 + blockheight, blockheight); ctx.lineto( blockwidth + (start * 10) + 10 + blockheight, blockheight); ctx.lineto( blockwidth + (start * 10) + 10, y); ctx.closepath(); ctx.fill(); ctx.stroke(); } } }); we then include the paintworklet: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item
7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 1
7</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); then we ...
CanvasGradient.addColorStop() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let gradient = ctx.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.
7, 'white'); gradient.addcolorstop(1, 'pink'); ctx.fillstyle = gradient; ctx.fillrect(10, 10, 200, 100); result specifications specification status comment html living standardthe definition of 'canvasgradient.addcolorstop' in that specification.
CanvasRenderingContext2D.createRadialGradient() - Web APIs
html <canvas id="canvas" width="200" height="200"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a radial gradient // the inner circle is at x=110, y=90, with radius=30 // the outer circle is at x=100, y=100, with radius=
70 var gradient = ctx.createradialgradient(110,90,30, 100,100,
70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160); result specifications specification status comment html living standard...
CanvasRenderingContext2D.fill() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(2
70, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fill' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
<canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0,
75,
75); ctx.fillstyle = '#6c0'; ctx.fillrect(
75, 0,
75,
75); ctx.fillstyle = '#09f'; ctx.fillrect(0,
75,
75,
75); ctx.fillstyle = '#f30'; ctx.fillrect(
75,
75,
75,
75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i <
7; i++) { ctx.beginpath(); ctx.arc(
75,
75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } screensh...
CanvasRenderingContext2D.isPointInStroke() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(150,
75, 40, 60, math.pi * .25, 0, 2 * math.pi); ctx.linewidth = 25; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red...
CanvasRenderingContext2D.lineJoin - Web APIs
<canvas id="canvas" width="150" height="150"></canvas> var ctx = document.getelementbyid('canvas').getcontext('2d'); var linejoin = ['round', 'bevel', 'miter']; ctx.linewidth = 10; for (let i = 0; i < linejoin.length; i++) { ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-5, 5 + i * 40); ctx.lineto(35, 45 + i * 40); ctx.lineto(
75, 5 + i * 40); ctx.lineto(115, 45 + i * 40); ctx.lineto(155, 5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linejoin' in that specification.
CanvasRenderingContext2D.lineWidth - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40,
70,
70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial.
CanvasRenderingContext2D.putImageData() - Web APIs
javascript const canvas = document.createelement("canvas"); canvas.width = 1; canvas.height = 1; const context = canvas.getcontext("2d"); const imgdata = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1] = 12
7; pixels[0 + 2] = 255; pixels[0 + 3] = 1; console.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels2 = imgdata2.data; console.log("after:", pixels2); the output might look like: before: uint8clampedarray(4) [ 1, 12
7, 255, 1 ] after: uint8clampedarray(4) [ 255, 255, 255, 1 ] specifications ...
CanvasRenderingContext2D.resetTransform() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.
7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); result the skewed rectangles are gray, and the non-skewed rectangles are red.
PannerNode.refDistance - Web APIs
ntext.destination); osc.start(starttime); osc.stop(starttime + note_length); }; // this tone should decay immediately and fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower and later than the previous one scheduletesttone(4, context.currenttime + note_length); // this tone should decay only slightly, and only start decaying fairly late scheduletesttone(
7, context.currenttime + note_length * 2); after running this code, the resulting waveforms should look something like this: specifications specification status comment web audio apithe definition of 'refdistance' in that specification.
Path2D() - Web APIs
<canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let path1 = new path2d(); path1.rect(10, 10, 100,100); let path2 = new path2d(path1); path2.moveto(220, 60); path2.arc(1
70, 60, 50, 0, 2 * math.pi); ctx.stroke(path2); using svg paths this example creates a path2d path using svg path data.
Path2D.addPath() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create first path and add a rectangle let p1 = new path2d(); p1.rect(0, 0, 100, 150); // create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0, 100,
75); // create transformation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specifications specification status comment html li...
PaymentAddress - Web APIs
this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'pat straw", "cardsecuritycode" : "999", "expirymonth" : "0
7", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
PaymentCurrencyAmount.value - Web APIs
examples representing prices this example represents the price of $42.95 in us dollars: let itemprice = { currency: "usd", value: "42.95" }; this example specifies a price of £
7.
77: let shippingcost = { currency: "gbp", value: "
7.
77" } this example specifies a price of 1000¥: let price = { currency: "jpy", value: "1000" } verifying a properly formatted price you can ensure that the value entered as a price is formatted correctly prior to submission by matching it against a simple regular expression: function checkpriceformat(price) { let validregex = /...
PaymentRequest.payerName - Web APIs
to change preferences in firefox, visit about:config.opera android no support nosafari ios full support yessamsung internet android full support
7.0legend full support full support no support no supportsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
PaymentResponse.shippingOption - Web APIs
rshippingoption; if (shippingoption === 'standard') { selectedshippingoption = details.shippingoptions[0]; othershippingoption = details.shippingoptions[1]; details.total.amount.value = '55.00'; } else if (shippingoption === 'express') { selectedshippingoption = details.shippingoptions[1]; othershippingoption = details.shippingoptions[0]; details.total.amount.value = '6
7.00'; } else { reject('unknown shipping option \'' + shippingoption + '\''); return; } selectedshippingoption.selected = true; othershippingoption.selected = false; details.displayitems.splice(2, 1, selectedshippingoption); resolve(details); } specifications specification status comment payment request api candidate recommendation initial defini...
Using the Performance API - Web APIs
stringify(timing) + "</p>"; var navigation = perf.navigation; o.innerhtml += "<p>peformance.navigation = " + json.stringify(navigation) + "</p>"; } } specifications the interfaces described in this document are defined in the high resolution time standard which has two levels: high-resolution time level 2; editors draft; work in progress high-resolution time; w3c recommendation 1
7 december 2012 interoperability as shown in the performance interface's browser compatibility table, most of the performance interfaces are broadly implemented by desktop browsers.
Using Pointer Events - Web APIs
function colorfortouch(touch) { var r = touch.pointerid % 16; var g = math.floor(touch.pointerid / 3) % 16; var b = math.floor(touch.pointerid /
7) % 16; r = r.tostring(16); // make it a hex digit g = g.tostring(16); // make it a hex digit b = b.tostring(16); // make it a hex digit var color = "#" + r + g + b; log("color for touch with identifier " + touch.pointerid + " = " + color); return color; } the result from this function is a string that can be used when calling <canvas> functions to set drawing colors.
PublicKeyCredential.getClientExtensionResults() - Web APIs
ttestation "uvi": true // user verification index: how the user was verified }, challenge: new uint8array(16) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var mybuffer = newcredentialinfo.getclientextensionresults(); // mybuffer will contain the result of any of the processing of the "loc" and "uvi" extensions }).catch(function (err) { console.error(err); }); specifications specification status comment web ...
PublicKeyCredential.id - Web APIs
examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var id = newcredentialinfo.id; // do something with the id // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification ...
PublicKeyCredential.rawId - Web APIs
examples var options = { challenge: new uint8array(26) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey: options }) .then(function (pubkeycredential) { var rawid = pubkeycredential.rawid; // do something with rawid }).catch(function (err) { // deal with any error }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'ra...
PublicKeyCredential.response - Web APIs
examples var options = { challenge: new uint8array(16) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey: options }) .then(function (pubkeycredential) { var response = pubkeycredential.response; var clientextresults = pubkeycredential.getclientextensionresults(); // send response and client extensions to the server so that it can validate // and create credentials }).catch(function (err) { // deal with any error }); speci...
PublicKeyCredential - Web APIs
var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; var clientextensionsresults = newcredentialinfo.getclientextensionresults(); }).catch(function (err) { console.error(err); }); getting an existing instance of publickeycredential here, we fetch an existing credential from an authenticator, ...
PublicKeyCredentialCreationOptions.attestation - Web APIs
ples var publickey = { attestation: "indirect", challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for acce...
PublicKeyCredentialCreationOptions.authenticatorSelection - Web APIs
reresidentkey: true, userverification: "required" }, challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing ...
PublicKeyCredentialCreationOptions.challenge - Web APIs
examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for acce...
PublicKeyCredentialCreationOptions.excludeCredentials - Web APIs
id : new uint8array(26) /* another id */ } ], challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing ...
PublicKeyCredentialCreationOptions.extensions - Web APIs
true, loc: false, uvm: false, exts: true }, challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // mybuffer will contain the result of any of the processing of the extensions var mybuffer = newcredentialinfo.getclientextensionresults(); // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err...
PublicKeyCredentialCreationOptions.rp - Web APIs
examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com", icon: "https://login.example.com/login.ico" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for acce...
PublicKeyCredentialCreationOptions.timeout - Web APIs
challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for acce...
PublicKeyCredentialCreationOptions.user - Web APIs
the server */, rp: { name: "example corp", id : "login.example.com" }, user: { // to be changed for each user id: new uint8array.from(window.atob("laegmlkjnrlkgnamlafalfka="), c=>c.charcodeat(0)); name: "jdoe@example.com", displayname: "john doe", icon: "https://gravatar.com/avatar/jdoe.png" }, pubkeycredparams: [ { type: "public-key", alg: -
7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for acce...
PublicKeyCredentialCreationOptions - Web APIs
examples // some examples of cose algorithms const cose_alg_ecdsa_w_sha256 = -
7; const cose_alg_ecdsa_w_sha512 = -36; var createcredentialoptions = { // format of new credentials is publickey publickey: { // relying party rp: { name: "example corp", id: "login.example.com", icon: "https://login.example.com/login.ico" }, // cryptographic challenge from the server challenge: new uint8array(26)...
PushManager.hasPermission() - Web APIs
full support 1
7firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 29safari n...
PushManager.supportedContentEncodings - Web APIs
full support 1
7firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 4
7safari n...
PushSubscription.expirationTime - Web APIs
efox for androidopera for androidsafari on iossamsung internetexpirationtimechrome full support 60edge full support 16firefox no support noie no support noopera full support 4
7safari no support nowebview android no support nochrome android full support 60firefox android no support noopera android full support 44safari ios no support ...
PushSubscription.getKey() - Web APIs
dfirefox for androidopera for androidsafari on iossamsung internetgetkey()chrome full support 42edge full support 16firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox
78 esr do not support service workers and the push api.ie no support noopera full support 29safari no support nowebview android no support nochrome android full support 42firef...
RsaPssParams - Web APIs
rfc 344
7 says that "typical salt lengths" are either 0 or the length of the output of the digest algorithm that was selected when this key was generated.
SVGAltGlyphDefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgaltglyphdefelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphdefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: al...
SVGAltGlyphItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgaltglyphitemelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events...
SVGAnimateColorElement - Web APIs
ram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svganimatecolorelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatecolorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimat...
SVGExternalResourcesRequired - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgexternalresourcesrequired" target="_top"><rect x="1" y="1" width="280" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgexternalresourcesrequired</text></a...
SVGFilterPrimitiveStandardAttributes - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfilterprimitivestandardattributes" target="_top"><rect x="1" y="1" width="360" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterprimitivestandardattr...
SVGFontElement - Web APIs
facediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and imp...
SVGFontFaceElement - Web APIs
diagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceFormatElement - Web APIs
m" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceformatelement" target="_top"><rect x="1" y="1" width="240" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceformatelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelem...
SVGFontFaceNameElement - Web APIs
ram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacenameelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfacenameelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelemen...
SVGFontFaceSrcElement - Web APIs
gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacesrcelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfacesrcelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement...
SVGFontFaceUriElement - Web APIs
gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceurielement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceurielement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement...
SVGGlyphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphelement</text></a></svg></div> a:hover t...
SVGGlyphRefElement - Web APIs
diagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphrefelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement and implements prope...
SVGHKernElement - Web APIs
acediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svghkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svghkernelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGImageElement.decoding - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdecoding experimentalchrome full support 65edge full support ≤
79firefox ?
SVGMeshElement - Web APIs
facediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgmeshelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmeshelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its p...
SVGMissingGlyphElement - Web APIs
ram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgmissingglyphelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmissingglyphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelemen...
SVGRect - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrect" target="_top"><rect x="1" y="1" width="
75" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgrect.x the exact effect of this coordinate depends on each elemen...
SVGRenderingIntent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hov...
SVGSolidcolorElement - Web APIs
agram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgsolidcolorelement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsolidcolorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties fro...
SVGTRefElement - Web APIs
facediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgtrefelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgtextpositioning...
SVGURIReference - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgurireference" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgurireference</text></a></svg></div> a:hover text { fill: #0095dd; po...
SVGUnitTypes - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgunittypes" target="_top"><rect x="1" y="1" width="120" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgunittypes</text></a></svg></div> a:hover text { ...
SVGVKernElement - Web APIs
acediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgvkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgvkernelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGZoomAndPan - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgzoomandpan" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgzoomandpan</text></a></svg></div> a:hover text ...
Screen.pixelDepth - Web APIs
syntax let depth = window.screen.pixeldepth example // if there is not adequate bit depth // choose a simpler color if ( window.screen.pixeldepth > 8 ) { document.style.color = "#faebd
7"; } else { document.style.color = "#ffffff"; } specifications specification status comment css object model (cssom) view modulethe definition of 'screen.pixeldepth' in that specification.
Screen.width - Web APIs
syntax lwidth = window.screen.width example // crude way to check that the screen is at least 1024x
768 if (window.screen.width >= 1024 && window.screen.height >=
768) { // resolution is 1024x
768 or above } notes note that not all of the width given by this property may be available to the window itself.
ScreenOrientation.angle - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanglechrome full support 38edge full support
79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support ...
ScreenOrientation.lock() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlockchrome full support 38edge full support
79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support ...
StorageManager.persist() - Web APIs
for androidfirefox for androidopera for androidsafari on iossamsung internetpersistchrome full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistentedge full support ≤
79firefox full support 55ie ?
StylePropertyMap - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/stylepropertymap" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f
7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">stylepropertymap</text></a></svg></div> a:hover...
TextDecoder.prototype.decode() - Web APIs
html <p>encoded value: <span id="encoded-value"></span></p> <p>decoded value: <span id="decoded-value"></span></p> javascript const encoder = new textencoder(); const array = encoder.encode('€'); // uint8array(3) [226, 130, 1
72] document.getelementbyid('encoded-value').textcontent = array; const decoder = new textdecoder(); const str = decoder.decode(array); // string "€" document.getelementbyid('decoded-value').textcontent = str; result specifications specification status comment encodingthe definition of 'textdecoder.decode()' in that specification.
TextDecoder.prototype.encoding - Web APIs
the legacy single-byte encodings: 'ibm866', 'iso-8859-2', 'iso-8859-3', 'iso-8859-4', 'iso-8859-5', 'iso-8859-6', 'iso-8859-
7', 'iso-8859-8'', 'iso-8859-8i', 'iso-8859-10', 'iso-8859-13', 'iso-8859-14', 'iso-8859-15', 'iso-8859-16', 'koi8-r', 'koi8-u', 'macintosh', 'windows-8
74', 'windows-1250', 'windows-1251', 'windows-1252', 'windows-1253', 'windows-1254', 'windows-1255', 'windows-1256', 'windows-125
7', 'windows-1258', or 'x-mac-cyrillic'.
TextMetrics.emHeightAscent - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.emheightascent; //
7.59
765625; specifications specification html living standardthe definition of 'textmetrics.emheightascent' in that specification.
TextMetrics.emHeightDescent - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.emheightdescent; // -2.402343
75; specifications specification html living standardthe definition of 'textmetrics.emheightdescent' in that specification.
TextMetrics.hangingBaseline - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.hangingbaseline; // 6.0
78125; specifications specification html living standardthe definition of 'textmetrics.hangingbaseline' in that specification.
TextMetrics.ideographicBaseline - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.ideographicbaseline; // -1.2011
718
75; specifications specification html living standardthe definition of 'textmetrics.ideographicbaseline' in that specification.
TextTrack - Web APIs
the value must adhere to the format specified in the tags for identifying languages (bcp 4
7) document from the ietf, just like the html lang attribute.
Touch events - Web APIs
function colorfortouch(touch) { var r = touch.identifier % 16; var g = math.floor(touch.identifier / 3) % 16; var b = math.floor(touch.identifier /
7) % 16; r = r.tostring(16); // make it a hex digit g = g.tostring(16); // make it a hex digit b = b.tostring(16); // make it a hex digit var color = "#" + r + g + b; console.log("color for touch with identifier " + touch.identifier + " = " + color); return color; } the result from this function is a string that can be used when calling <canvas> functions to set drawing colors.
UIEvent.layerX - Web APIs
note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="
7" /><br /> pagex:<input type="text" name="pagexcoords" size="
7" /> pagey:<input type="text" name="pageycoords" size="
7" /><br /> layerx:<input type="text" name="layerxcoords" size="
7" /> layery:<input type="text" name="layerycoords" size="
7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.layerY - Web APIs
note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="
7" /><br /> pagex:<input type="text" name="pagexcoords" size="
7" /> pagey:<input type="text" name="pageycoords" size="
7" /><br /> layerx:<input type="text" name="layerxcoords" size="
7" /> layery:<input type="text" name="layerycoords" size="
7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.pageY - Web APIs
note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" size="
7" /><br /> pagex:<input type="text" name="pagexcoords" size="
7" /> pagey:<input type="text" name="pageycoords" size="
7" /><br /> layerx:<input type="text" name="layerxcoords" size="
7" /> layery:<input type="text" name="layerycoords" size="
7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
WebGLShaderPrecisionFormat.rangeMin - Web APIs
examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float).rangemin; // 12
7 gl.getshaderprecisionformat(gl.fragment_shader, gl.low_int).rangemin; // 24 specifications specification status comment webgl 1.0the definition of 'webglshaderprecisionformat.rangemin' in that specification.
WebGLShaderPrecisionFormat - Web APIs
var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float); // webglshaderprecisionformat { rangemin: 12
7, rangemax: 12
7, precision: 23 } specifications specification status comment webgl 1.0the definition of 'webglshaderprecisionformat' in that specification.
A basic 2D WebGL animation example - Web APIs
gram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector"); gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(uglobalcolor, [0.1, 0.
7, 0.2, 1.0]); gl.bindbuffer(gl.array_buffer, vertexbuffer); avertexposition = gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(avertexposition); gl.vertexattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); window.requestanimationframe(function(currenttime) { let...
Lighting in WebGL - Web APIs
hp vec2 vtexturecoord; varying highp vec3 vlighting; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vtexturecoord = atexturecoord; // apply lighting effect highp vec3 ambientlight = vec3(0.3, 0.3, 0.3); highp vec3 directionallightcolor = vec3(1, 1, 1); highp vec3 directionalvector = normalize(vec3(0.85, 0.8, 0.
75)); highp vec4 transformednormal = unormalmatrix * vec4(avertexnormal, 1.0); highp float directional = max(dot(transformednormal.xyz, directionalvector), 0.0); vlighting = ambientlight + (directionallightcolor * directional); } `; once the position of the vertex is computed, and we pass the coordinates of the texel corresponding to the vertex to the fragment shader, we...
WebGL best practices - Web APIs
ndif essl100 minimum requirements (webgl 1) float think range min above zero precision highp float24* (-2^62, 2^62) 2^-62 2^-16 relative mediump ieee float16 (-2^14, 2^14) 2^-14 2^-10 relative lowp 10-bit signed fixed (-2, 2) 2^-8 2^-8 absolute int think range highp int1
7 (-2^16, 2^16) mediump int11 (-2^10, 2^10) lowp int9 (-2^8, 2^8) *float24: sign bit,
7-bit for exponent, 16-bit for mantissa essl300 minimum requirements (webgl 2) float think range min above zero precision highp ieee float32 (-2^126, 2^12
7) 2^-126 2^-24 relative mediump ieee float16 (-2^14, 2^14...
WebRTC connectivity - Web APIs
this information is exchanged and stored using session description protocol (sdp); if you want details on the format of sdp data, you can find it in rfc 232
7.
Using DTMF with WebRTC - Web APIs
if you'd like to know more about how this works, read rfc 3550: rtp: a transport protocol for real-time applications and rfc 4
733: rtp payload for dtmf digits, telephony tones, and telephony signals.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
thus a matrix that looks like this: [a1a5a9a13a2a6a10a14a3a
7a11a15a4a8a12a16]\left [ \begin{matrix} a_{1} & a_{5} & a_{9} & a_{13} \\ a_{2} & a_{6} & a_{10} & a_{14} \\ a_{3} & a_{
7} & a_{11} & a_{15} \\ a_{4} & a_{8} & a_{12} & a_{16} \end{matrix} \right ] is represented in array form like this: let matrixarray = [a1, a2, a3, a4, a5, a6, a
7, a8, a9, a10, a11, a12, a13, a14, a15, a16]; in this array, the leftmost column contains the e...
Movement, orientation, and motion: A WebXR example - Web APIs
rojectionmatrix'), modelviewmatrix: gl.getuniformlocation(shaderprogram, 'umodelviewmatrix'), normalmatrix: gl.getuniformlocation(shaderprogram, 'unormalmatrix'), usampler: gl.getuniformlocation(shaderprogram, 'usampler') }, }; buffers = initbuffers(gl); texture = loadtexture(gl, 'https://cdn.glitch.com/a9381af1-18a9-495e-ad01-afddfd15d000%2ffirefox-logo-solid.png?v=15
75659351244'); xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); if (session_type == "immersive-vr") { refspacetype = "local"; } else { refspacetype = "viewer"; } mat4.fromtranslation(cubematrix, viewerstartposition); vec3.copy(cubeorientation, viewerstartorientation); xrsession.requestreferencespace(refspacetype) .then((refspace) => { ...
Keyframe Formats - Web APIs
element.animate([ { opacity: 1 }, { opacity: 0.1, offset: 0.
7 }, { opacity: 0 } ], 2000); note: offset values, if provided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order.
Controlling multiple parameters with ConstantSourceNode - Web APIs
function startoscillators() { oscnode1 = context.createoscillator(); oscnode1.type = "sine"; oscnode1.frequency.value = 261.625565300598634; // middle c oscnode1.connect(gainnode1); oscnode2 = context.createoscillator(); oscnode2.type = "sine"; oscnode2.frequency.value = 329.62
7556912869929; // e oscnode2.connect(gainnode2); oscnode3 = context.createoscillator(); oscnode3.type = "sine"; oscnode3.frequency.value = 391.995435981
749294 // g oscnode3.connect(gainnode3); oscnode1.start(); oscnode2.start(); oscnode3.start(); playing = true; } each of the three oscillators is set up the same way: create the oscillatornode by calling audiocontext.createo...
Using IIR filters - Web APIs
something like this is acceptable: let feedforward = [0.00020298, 0.0004059599, 0.00020298]; our feedback values cannot start with zero, otherwise on the first pass nothing would be sent back: let feedbackward = [1.0126964558, -1.9991880801, 0.98
73035442]; note: these values are calculated based on the lowpass filter specified in the filter characteristics of the web audio api specification.
Using multiple backgrounds - CSS: Cascading Style Sheets
example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <div class="multi-bg-example"></div> css .multi-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/1130
7/bubbles.png), linear-gradient(to right, rgba(30,
75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button in the css section) as you can see here, the firefox logo (listed first within background-image) is on...
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
09 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit browsers without flex wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh
772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.
CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid rgb(233,1
71,88); border-radius: 5px; background-color: rgba(233,1
71,88,.5); padding: 1em; color: #d9480f; } html <div class="wrapper"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> <div class="five">five</div> <div class="six">six</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); ...
Stacking context example 1 - CSS: Cascading Style Sheets
absolute; <br />z-index: 2; </div> </div> </body></html> css .bold { font-weight: bold; font: 12px arial; } #div1, #div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 1
70px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200px; height:
70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } result ...
Stacking context example 2 - CSS: Cascading Style Sheets
style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 1
70px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height:
70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold...
Stacking context example 3 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height:
70px; position: relative; border: 2px outset #669966; background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left:
75px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position: relative; border: 2px outset #990000; background-color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; ...
Stacking without the z-index property - CSS: Cascading Style Sheets
1" class="static"> <b>div #5</b><br />position: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static { position: static; height: 80px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.
7; } .relative { position: relative; height: 80px; background-color: #cfc; border-color: #696; opacity: 0.
7; } #abs1 { top: 10px; left: 10px; } #rel1 { top: 30px; margin: 0px 50px 0px 50px; } #rel2 { top: 15px; left: 20px; margin: 0px 50px 0px 50px; } #abs2 { top: 10px; right: 10px; } #sta1 { background-color: #ffc; margin: 0px 50px 0px 50px; } ...
The stacking context - CSS: Cascading Style Sheets
>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>division element #5</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> css * { margin: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.
7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px dashed #900; background-color: #fdd; padding: 40px...
CSS values and units - CSS: Cascading Style Sheets
absolute length units unit name equivalent to cm centimeters 1cm = 96px/2.54 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/40th of 1cm in inches 1in = 2.54cm = 96px pc picas 1pc = 1/16th of 1in pt points 1pt = 1/
72th of 1in px pixels 1px = 1/96th of 1in when including a length value, if the length is 0, the unit identifier is not required.
Introducing the CSS Cascade - CSS: Cascading Style Sheets
t have precedence over normal values originated from a user-agent style sheet: origin importance 1 user agent normal 2 user normal 3 author normal 4 animations 5 author !important 6 user !important
7 user agent !important 8 transitions in case of equality, the specificity of a value is considered to choose one or the other.
Class selectors - CSS: Cascading Style Sheets
cious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #
77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specifications specification status comment selectors level 4the definition of 'class selectors' in ...
Pseudo-elements - CSS: Cascading Style Sheets
marker ::part() ::placeholder ::selection ::slotted() ::spelling-error browser lowest version support of internet explorer 8.0 :pseudo-element 9.0 :pseudo-element ::pseudo-element firefox (gecko) 1.0 (1.0) :pseudo-element 1.0 (1.5) :pseudo-element ::pseudo-element opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element safari (webkit) 1.0 (85) :pseudo-element ::pseudo-element specifications specification status comment css level 1 recommendation defined pseudo-classes and pseudo-elements.
Specificity - CSS: Cascading Style Sheets
for more information, visit: https://stackoverflow.com/questions/3
706819/what-are-the-implications-of-using-important-in-css https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean https://stackoverflow.com/questions/5
701149/when-to-use-important-property-in-css https://stackoverflow.com/questions/111
786
73/how-to-override-important https://stackoverflow.com/questions/204249
7/when-to-use-important-to-save-the-day-when-working-with-css the...
Syntax - CSS: Cascading Style Sheets
css declaration blocks declarations are grouped in blocks, that is in a structure delimited by an opening brace, '{' (u+00
7b left curly bracket), and a closing one, '}' (u+00
7d right curly bracket).
Cubic Bezier Generator - CSS: Cascading Style Sheets
<html> <canvas id="bezier" width="336" height="336"> </canvas> <form> <label for="x1">x1 = </label><input onchange="updatecanvas();" type="text" maxlength=6 id="x1" value="0.
79" class='field'> <label for="y1">y1 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x...
align-content - CSS: Cascading Style Sheets
2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height:
70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">displ...
align-items - CSS: Cascading Style Sheets
2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height:
70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">displa...
<alpha-value> - CSS: Cascading Style Sheets
examples setting text color opacity here an alpha value is used to set partially transparent text: /* <rgba()> */ color: rgba(34, 12, 64, 0.6); color: rgba(34.0 12 64 / 60%); setting shape image threshold here an alpha value is used to determine which parts of an image are considered part of a shape: /* shape-image-threshold */ shape-image-threshold:
70%; shape-image-threshold: 0.
7; specifications specification status comment css color module level 4the definition of '<alpha-value>' in that specification.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
-appearance: searchfield-decoration; -webkit-appearance: searchfield-decoration; } <div>lorem</div> safari edge searchfield-results-decoration div{ color: black; -moz-appearance: searchfield-results-decoration; -webkit-appearance: searchfield-results-decoration; } <div>lorem</div> chrome safari edge (works on chrome 51 on windows
7) searchfield-results-button div{ color: black; -moz-appearance: searchfield-results-button; -webkit-appearance: searchfield-results-button; } <div>lorem</div> safari edge searchfield-cancel-button div{ color: black; -webkit-appearance: searchfield-cancel-button; } <div>lorem</div> chrome safari edge ...
background-repeat - CSS: Cascading Style Sheets
<div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol> css /* shared for all divs in example */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12px; } div { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); width: 160px; height:
70px; } /* background repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), ...
<blend-mode> - CSS: Cascading Style Sheets
r-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/0
7/29/1
7350/3b4892b
7e820122ac6dd
76
78891d450
7/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divelem.style.backgroundblendmode = selectelem.value; }); result specifications specification status ...
block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size:
75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element.
border-block-color - CSS: Cascading Style Sheets
border-block-color: yellow; border-block-color: #f5f6f
7; the border color in the other dimension can be set with border-inline-color which sets border-inline-start-color, and border-inline-end-color.
border-block-end-color - CSS: Cascading Style Sheets
syntax border-block-end-color: yellow; border-block-end-color: #f5f6f
7; related properties are border-block-start-color, border-inline-start-color, and border-inline-end-color, which define the other border colors of the element.
border-bottom-color - CSS: Cascading Style Sheets
syntax /* <color> values */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(100%, 50%, 25%, 0.
75); border-bottom-color: currentcolor; border-bottom-color: transparent; /* global values */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: unset; the border-bottom-color property is specified as a single value.
border-bottom-left-radius - CSS: Cascading Style Sheets
the background color is clipped at the border div { border-bottom-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,
70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-left-radius' in that specification.
border-bottom-right-radius - CSS: Cascading Style Sheets
the background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,
70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-right-radius' in that specification.
grid-template - CSS: Cascading Style Sheets
ituent properties this property is a shorthand for the following css properties: grid-template-areas grid-template-columns grid-template-rows syntax /* keyword value */ grid-template: none; /* grid-template-rows / grid-template-columns values */ grid-template: 100px 1fr / 50px 1fr; grid-template: auto 1fr / auto 1fr auto; grid-template: [linename] 100px / [columnname1] 30% [columnname2]
70%; grid-template: fit-content(100px) / fit-content(40%); /* grid-template-areas grid-template-rows / grid-template-column values */ grid-template: "a a a" "b b b"; grid-template: "a a a" 20% "b b b" auto; grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto; /* glob...
ident - CSS: Cascading Style Sheets
examples valid identifiers nono
79 a mix of alphanumeric characters and numbers ground-level a mix of alphanumeric characters and a dash -test a dash followed by alphanumeric characters --toto a custom-property like identifier _internal an underscore followed by alphanumeric characters \22 toto a unicode character followed by a sequence of alphanumeric characters bili\.bob a correctly escaped period ...
image-orientation - CSS: Cascading Style Sheets
flip ] examples orienting image from image data css #image { image-orientation: from-image; /* can be changed in the live sample */ } html <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd
7dfb.svg" alt="orientation taken from the image"> <select id="imageorientation"> <option value="from-image">from-image</option> <option value="none">none</option> </select> javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("change", function (evt) { document.getelementbyid("image").style.imageorientation = evt.target.value;...
image-rendering - CSS: Cascading Style Sheets
<div> <img class="auto" alt="auto" src="https://udn.realityripple.com/samples/de/cedd39
7be3.jpg" /> <img class="pixelated" alt="pixelated" src="https://udn.realityripple.com/samples/de/cedd39
7be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd39
7be3.jpg" /> </div> img { height: 200px; } css .auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } .c...
inline-size - CSS: Cascading Style Sheets
syntax /* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size:
75%; /* keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element.
justify-content - CSS: Cascading Style Sheets
space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples setting flex item distribution css #container { display: flex; justify-content: space-between; /* can be changed in the live sample */ } #container > div { width: 100px; height: 100px; background: linear-gradient(-45deg, #
788cff, #b4c8ff); } html <div id="container"> <div></div> <div></div> <div></div> </div> <select id="justifycontent"> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="left">left</option> <option value="right">rig...
justify-items - CSS: Cascading Style Sheets
er-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius:
7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'justify-items' in that specification.
justify-self - CSS: Cascading Style Sheets
grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } span:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius:
7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'justify-self' in that specification.
<length-percentage> - CSS: Cascading Style Sheets
html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width:
75%; height: 200px; margin: 3rem; padding: 1%; border-radius: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage ...
list-style-position - CSS: Cascading Style Sheets
</ul> <ul class="inside-img">list 3 <li>list item 3-1</li> <li>list item 3-2</li> <li>list item 3-3</li> <li>list item 3-4</li> </ul> css .inside { list-style-position: inside; list-style-type: square; } .outside { list-style-position: outside; list-style-type: circle; } .inside-img { list-style-position: inside; list-style-image: url("https://mdn.mozillademos.org/files/119
79/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-position' in that specification.
mask-border-outset - CSS: Cascading Style Sheets
syntax /* <length> value */ mask-border-outset: 1rem; /* <number> value */ mask-border-outset: 1.5; /* vertical | horizontal */ mask-border-outset: 1 1.2; /* top | horizontal | bottom */ mask-border-outset: 30px 2 45px; /* top | right | bottom | left */ mask-border-outset:
7px 12px 14px 5px; /* global values */ mask-border-outset: inherit; mask-border-outset: initial; mask-border-outset: unset; the mask-border-outset property may be specified as one, two, three, or four values.
mask-border-slice - CSS: Cascading Style Sheets
syntax /* all sides */ mask-border-slice: 30%; /* vertical | horizontal */ mask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice:
7 12 14 5; /* using the `fill` keyword */ mask-border-slice: 10% fill
7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
mask-composite - CSS: Cascading Style Sheets
valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/126
76/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("com...
mask-image - CSS: Cascading Style Sheets
e>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/126
76/star.svg); mask-image: url(https://mdn.mozillademos.org/files/126
76/star.svg); } result specifications specification status comment css masking module level 1the definition of 'mask-image' in that specification.
mask-mode - CSS: Cascading Style Sheets
formal definition initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 22
7px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </sel...
perspective-origin - CSS: Cascading Style Sheets
: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.
7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.
7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.
7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.
7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color...
place-items - CSS: Cascading Style Sheets
2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height:
70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">displa...
place-self - CSS: Cascading Style Sheets
splay: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start center; } span:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius:
7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'place-self' in that specification.
pointer-events - CSS: Cascading Style Sheets
full support 12firefox full support 3.6ie full support 11opera full support 15safari full support 4webview android full support 3
7chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 3.2samsung internet android full support 1.0legend ...
rotate - CSS: Cascading Style Sheets
syntax /* keyword values */ rotate: none; /* angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.5
7rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.5
7rad; /* vector plus angle value */ rotate: 1 1 1 90deg; values angle value an <angle> specifying the angle to rotate the affected element through, around the z axis.
ruby-position - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetruby-position experimentalchrome no support noedge no support 12 —
79firefox full support 38ie no support nonotes no support nonotes notes internet explorer 9 and later support an old draft values: inline (equivalent of having display: inline on the ruby), and above (synonym of the modern over).opera no support ...
scale - CSS: Cascading Style Sheets
ling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.
7; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
scroll-snap-coordinate - CSS: Cascading Style Sheets
nt-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-snap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coordinate: 50px 0; } .scrollcontainer > div:nth-child(even) { background-color: #8
7ea8
7; } .scrollcontainer > div:nth-child(odd) { background-color: #8
7ccea; } result specifications not part of any standard.
scroll-snap-destination - CSS: Cascading Style Sheets
20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .scrollcontainer > div:nth-child(even) { background-color: #8
7ea8
7; } .scrollcontainer > div:nth-child(odd) { background-color: #8
7ccea; } result specifications not part of any standard.
scroll-snap-points-x - CSS: Cascading Style Sheets
<div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-color: #8
7ea8
7; } #container > div:nth-child(odd) { background-color: #8
7ccea; } result specifications not part of any standard.
scroll-snap-points-y - CSS: Cascading Style Sheets
>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-color: #8
7ea8
7; } #container > div:nth-child(odd) { background-color: #8
7ccea; } result specifications not part of any standard.
scroll-snap-stop - CSS: Cascading Style Sheets
p-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 256px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #8
7ea8
7; } .container > div:nth-child(odd) { background-color: #8
7ccea; } html <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>x mand.
scroll-snap-type - CSS: Cascading Style Sheets
ap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #8
7ea8
7; } .container > div:nth-child(odd) { background-color: #8
7ccea; } results specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-type' in that specification.
shape-image-threshold - CSS: Cascading Style Sheets
/* <number> value */ shape-image-threshold: 0.
7; /* global values */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: unset; syntax values <alpha-value> sets the threshold used for extracting a shape from an image.
shape-outside - CSS: Cascading Style Sheets
syntax /* keyword values */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.
7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.
7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the list bel...
Meta programming - JavaScript
function.prototype.apply.call(math.floor, undefined, [1.
75]) with reflect.apply this becomes less verbose and easier to understand: reflect.apply(math.floor, undefined, [1.
75]) // 1 reflect.apply(string.fromcharcode, undefined, [104, 101, 108, 108, 111]) // "hello" reflect.apply(regexp.prototype.exec, /ab/, ['confabulation']).index // 4 reflect.apply(''.charat, 'ponies', [3]) // "i" checking if property definition has been successful with objec...
Regular expressions - JavaScript
var xarray; while(xarray = re.exec(str)) console.log(xarray); // produces: // ["fee ", index: 0, input: "fee fi fo fum"] // ["fi ", index: 4, input: "fee fi fo fum"] // ["fo ", index:
7, input: "fee fi fo fum"] the m flag is used to specify that a multiline input string should be treated as multiple lines.
Classes - JavaScript
class point { constructor(x, y) { this.x = x; this.y = y; } static distance(a, b) { const dx = a.x - b.x; const dy = a.y - b.y; return math.hypot(dx, dy); } } const p1 = new point(5, 5); const p2 = new point(10, 10); p1.distance; //undefined p2.distance; //undefined console.log(point.distance(p1, p2)); //
7.0
7106
78118654
755 binding this with prototype and static methods when a static or prototype method is called without a value for this, such as by assigning a variable to the method and then calling it, the this value will be undefined inside the method.
Warning: 08/09 is not a legal ECMA-262 octal constant - JavaScript
examples invalid octal numbers 08; 09; // syntaxerror: 08 is not a legal ecma-262 octal constant // syntaxerror: "0"-prefixed octal literals and octal escape sequences // are deprecated valid octal numbers use a leading zero followed by the letter "o"; 0o
755; 0o644; ...
RangeError: radix must be an integer - JavaScript
examples invalid cases (42).tostring(0); (42).tostring(1); (42).tostring(3
7); (42).tostring(150); // you cannot use a string like this for formatting: (120
71989).tostring('mm-dd-yyyy'); valid cases (42).tostring(2); // "101010" (binary) (13).tostring(8); // "15" (octal) (0x42).tostring(10); // "66" (decimal) (100000).tostring(16) // "186a0" (hexadecimal) ...
TypeError: property "x" is non-configurable and can't be deleted - JavaScript
'use strict'; var obj = object.freeze({name: 'elsa', score: 15
7}); delete obj.score; // typeerror 'use strict'; var obj = {}; object.defineproperty(obj, 'foo', {value: 2, configurable: false}); delete obj.foo; // typeerror 'use strict'; var frozenarray = object.freeze([0, 1, 2]); frozenarray.pop(); // typeerror there are also a few non-configurable properties built into javascript.
RangeError: invalid array length - JavaScript
examples invalid cases new array(math.pow(2, 40)) new array(-1) new arraybuffer(math.pow(2, 32)) new arraybuffer(-1) let a = []; a.length = a.length - 1; // set -1 to the length property let b = new array(math.pow(2, 32) - 1); b.length = b.length + 1; // set 2^32 to the length property valid cases [ math.pow(2, 40) ] // [ 109951162
7776 ] [ -1 ] // [ -1 ] new arraybuffer(math.pow(2, 32) - 1) new arraybuffer(0) let a = []; a.length = math.max(0, a.length - 1); let b = new array(math.pow(2, 32) - 1); b.length = math.min(0xffffffff, b.length + 1); // 0xffffffff is the hexadecimal notation for 2^32 - 1 // which can also be written as (-1 >>> 0) ...
SyntaxError: Malformed formal parameter - JavaScript
examples invalid cases var f = function('x y', 'return x + y;'); // syntaxerror (missing a comma) var f = function('x,', 'return x;'); // syntaxerror (extraneous comma) var f = function(3
7, "alert('ok')"); // syntaxerror (numbers can't be argument names) valid cases var f = function('x, y', 'return x + y;'); // correctly punctuated var f = function('x', 'return x;'); // if you can, avoid using function - this is much faster var f = function(x) { return x; }; ...
SyntaxError: missing ) after argument list - JavaScript
console.log('pi: ' math.pi); // syntaxerror: missing ) after argument list you can correct the log call by adding the "+" operator: console.log('pi: ' + math.pi); // "pi: 3.141592653589
793" unterminated strings console.log('"java" + "script" = \"' + 'java' + 'script\"); // syntaxerror: missing ) after argument list here javascript thinks that you meant to have ); inside the string and ignores it, and it ends up not knowing that you meant the ); to end the function console.log.
RangeError: argument is not a valid code point - JavaScript
fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerror string.fromcodepoint(3.14); // rangeerror string.fromcodepoint(3e-2); // rangeerror string.fromcodepoint(nan); // rangeerror valid cases string.fromcodepoint(42); // "*" string.fromcodepoint(65, 90); // "az" string.fromcodepoint(0x404); // "\u0404" string.fromcodepoint(0x2f804); // "\ud8
7e\udc04" string.fromcodepoint(194564); // "\ud8
7e\udc04" string.fromcodepoint(0x1d306, 0x61, 0x1d30
7) // "\ud834\udf06a\ud834\udf0
7" ...
TypeError: "x" is not a function - JavaScript
let obj = {a: 13, b: 3
7, c: 42}; obj.map(function(num) { return num * 2; }); // typeerror: obj.map is not a function use an array instead: let numbers = [1, 4, 9]; numbers.map(function(num) { return num * 2; }); // array [2, 8, 18] function shares a name with a pre-existing property sometimes when making a class, you may have a property and a function with the same name.
RangeError: precision is out of range - JavaScript
method firefox (spidermonkey) chrome, opera (v8) number.prototype.toexponential() 0 to 100 0 to 20 number.prototype.tofixed() -20 to 100 0 to 20 number.prototype.toprecision() 1 to 100 1 to 21 examples invalid cases
77.1234.toexponential(-1); // rangeerror
77.1234.toexponential(101); // rangeerror 2.34.tofixed(-100); // rangeerror 2.34.tofixed(1001); // rangeerror 1234.5.toprecision(-1); // rangeerror 1234.5.toprecision(101); // rangeerror valid cases
77.1234.toexponential(4); //
7.
7123e+1
77.1234.toexponential(2); //
7.
71e+1 2.34.tofixed(1); // 2.3 2.35.tofixed(1); // 2.4 (note t...
arguments.callee - JavaScript
function create() { return function(n) { if (n <= 1) return 1; return n * arguments.callee(n - 1); }; } var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1) a use of arguments.callee with no good alternative however, in a case like the following, there are not alternatives to arguments.callee, so its deprecation could be a bug (see bug
725398): function createperson(sidentity) { var operson = new function('alert(arguments.callee.identity);'); operson.identity = sidentity; return operson; } var john = createperson('john smith'); john(); specifications specification ecmascript (ecma-262)the definition of 'arguments exotic objects' in that specification.
Array.prototype.concat() - JavaScript
examples concatenating two arrays the following code concatenates two arrays: const letters = ['a', 'b', 'c']; const numbers = [1, 2, 3]; letters.concat(numbers); // result in ['a', 'b', 'c', 1, 2, 3] concatenating three arrays the following code concatenates three arrays: const num1 = [1, 2, 3]; const num2 = [4, 5, 6]; const num3 = [
7, 8, 9]; const numbers = num1.concat(num2, num3); console.log(numbers); // results in [1, 2, 3, 4, 5, 6,
7, 8, 9] concatenating values to an array the following code concatenates three values to an array: const letters = ['a', 'b', 'c']; const alphanumeric = letters.concat(1, [2, 3]); console.log(alphanumeric); // results in ['a', 'b', 'c', 1, 2, 3] concatenating nested arrays the follo...
Array.prototype.filter() - JavaScript
function isbigenough(value) { return value >= 10 } let filtered = [12, 5, 8, 130, 44].filter(isbigenough) // filtered is [12, 130, 44] find all prime numbers in an array the following example returns all prime numbers in the array: const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12, 13]; function isprime(num) { for (let i = 2; num > i; i++) { if (num % i == 0) { return false; } } return num > 1; } console.log(array.filter(isprime)); // [2, 3, 5,
7, 11, 13] filtering invalid entries from json the following example uses filter() to create a filtered json of all elements with non-zero, numeric id.
Array.prototype.flat() - JavaScript
please check: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 examples flattening nested arrays const arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] const arr4 = [1, 2, [3, 4, [5, 6, [
7, 8, [9, 10]]]]]; arr4.flat(infinity); // [1, 2, 3, 4, 5, 6,
7, 8, 9, 10] flattening and array holes the flat method removes empty slots in arrays: const arr5 = [1, 2, , 4, 5]; arr5.flat(); // [1, 2, 4, 5] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.flat' in that specification.
Array.prototype.flatMap() - JavaScript
// let's say we want to remove all the negative numbers // and split the odd numbers into an even number and a 1 let a = [5, 4, -3, 20, 1
7, -33, -4, 18] // |\ \ x | | \ x x | // [4,1, 4, 20, 16, 1, 18] a.flatmap( (n) => (n < 0) ?
Array.prototype.includes() - JavaScript
// array length is 3 // fromindex is -100 // computed index is 3 + (-100) = -9
7 let arr = ['a', 'b', 'c'] arr.includes('a', -100) // true arr.includes('b', -100) // true arr.includes('c', -100) // true arr.includes('a', -2) // false includes() used as a generic method includes() method is intentionally generic.
Array.isArray() - JavaScript
all following calls return true array.isarray([]); array.isarray([1]); array.isarray(new array()); array.isarray(new array('a', 'b', 'c', 'd')); array.isarray(new array(3)); // little known fact: array.prototype itself is an array: array.isarray(array.prototype); // all following calls return false array.isarray(); array.isarray({}); array.isarray(null); array.isarray(undefined); array.isarray(1
7); array.isarray('array'); array.isarray(true); array.isarray(false); array.isarray(new uint8array(32)); array.isarray({ __proto__: array.prototype }); instanceof vs isarray when checking for array instance, array.isarray is preferred over instanceof because it works through iframes.
Array.prototype.lastIndexOf() - JavaScript
var numbers = [2, 5, 9, 2]; numbers.lastindexof(2); // 3 numbers.lastindexof(
7); // -1 numbers.lastindexof(2, 3); // 3 numbers.lastindexof(2, 2); // 0 numbers.lastindexof(2, -2); // 0 numbers.lastindexof(2, -1); // 3 finding all the occurrences of an element the following example uses lastindexof to find all the indices of an element in a given array, using push to add them to another array as they are found.
Array.prototype.length - JavaScript
var namelista = new array(429496
7296); //2 to the 32nd power = 429496
7296 var namelistc = new array(-100) //negative sign console.log(namelista.length); //rangeerror: invalid array length console.log(namelistc.length); //rangeerror: invalid array length var namelistb = []; namelistb.length = math.pow(2,32)-1; //set array length less than 2 to the 32nd power console.log(namelistb.length); //429496
7295 you can set the length...
Array.prototype.some() - JavaScript
// production steps of ecma-262, edition 5, 15.4.4.1
7 // reference: http://es5.github.io/#x15.4.4.1
7 if (!array.prototype.some) { array.prototype.some = function(fun, thisarg) { 'use strict'; if (this == null) { throw new typeerror('array.prototype.some called on null or undefined'); } if (typeof fun !== 'function') { throw new typeerror(); } var t = object(this); var len = t.length >>> 0; for (var i...
Array.prototype.unshift() - JavaScript
shift(3) console.log(arr) // [3, 2, 1, 4, 5, 6] examples using unshift let arr = [1, 2] arr.unshift(0) // result of the call is 3, which is the new array length // arr is [0, 1, 2] arr.unshift(-2, -1) // the new array length is 5 // arr is [-2, -1, 0, 1, 2] arr.unshift([-4, -3]) // the new array length is 6 // arr is [[-4, -3], -2, -1, 0, 1, 2] arr.unshift([-
7, -6], [-5]) // the new array length is 8 // arr is [ [-
7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.unshift' in that specification.
Number.prototype.toExponential() - JavaScript
examples using toexponential var numobj =
77.1234; console.log(numobj.toexponential()); // logs
7.
71234e+1 console.log(numobj.toexponential(4)); // logs
7.
7123e+1 console.log(numobj.toexponential(2)); // logs
7.
71e+1 console.log(
77.1234.toexponential()); // logs
7.
71234e+1 console.log(
77 .toexponential()); // logs
7.
7e+1 specifications specification ecmascript (ecma-262)the definition of 'number.prototype.toexpon...
Number.prototype.toFixed() - JavaScript
examples using tofixed let numobj = 12345.6
789 numobj.tofixed() // returns '12346': note rounding, no fractional part numobj.tofixed(1) // returns '12345.
7': note rounding numobj.tofixed(6) // returns '12345.6
78900': note added zeros (1.23e+20).tofixed(2) // returns '123000000000000000000.00' (1.23e-10).tofixed(2) // returns '0.00' 2.34.tofixed(1) // returns '2.3' 2.35.tofixed(1) // returns '2.4'.
Number.prototype.toString() - JavaScript
examples using tostring let count = 10 console.log(count.tostring()) // displays '10' console.log((1
7).tostring()) // displays '1
7' console.log((1
7.2).tostring()) // displays '1
7.2' let x = 6 console.log(x.tostring(2)) // displays '110' console.log((254).tostring(16)) // displays 'fe' console.log((-10).tostring(2)) // displays '-1010' console.log((-0xff).tostring(2)) // displays '-11111111' specifications specification ecmascript (ecma-262)the definition of ...
Object.assign() - JavaScript
bug 120
7182 on firefox) object.getownpropertysymbols(obj); // [symbol(foo)] properties on the prototype chain and non-enumerable properties cannot be copied const obj = object.create({ foo: 1 }, { // foo is on obj's prototype chain.
Object.freeze() - JavaScript
object.defineproperty(obj, 'ohai', { value: 1
7 }); object.defineproperty(obj, 'foo', { value: 'eit' }); // it's also impossible to change the prototype // both statements below will throw a typeerror.
Object.is() - JavaScript
polyfill if (!object.is) { object.is = function(x, y) { // samevalue algorithm if (x === y) { // steps 1-5,
7-10 // steps 6.b-6.e: +0 != -0 return x !== 0 || 1 / x === 1 / y; } else { // step 6.a: nan == nan return x !== x && y !== y; } }; } examples using object.is object.is('foo', 'foo'); // true object.is(window, window); // true object.is('foo', 'bar'); // false object.is([], []); // false var foo = { a: 1 }; var bar = { a: 1 }; object.is(foo...
Object.preventExtensions() - JavaScript
var nonextensible = { removable: true }; object.preventextensions(nonextensible); object.defineproperty(nonextensible, 'new', { value: 86
75309 }); // throws a typeerror // in strict mode, attempting to add new properties // to a non-extensible object throws a typeerror.
Object.seal() - JavaScript
object.defineproperty(obj, 'ohai', { value: 1
7 }); // throws a typeerror object.defineproperty(obj, 'foo', { value: 'eit' }); // changes existing property value non-object coercion in es5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
Object.setPrototypeOf() - JavaScript
ecies; var ocat = new mammalspecies('felis'); console.log(ocat.ismammal); // 'yes' function animal() { this.breathing = 'yes'; } object.appendchain(ocat, new animal()); console.log(ocat.breathing); // 'yes' second example: transforming a primitive value into an instance of its constructor and append its chain to a prototype function mysymbol() { this.issymbol = 'yes'; } var nprime = 1
7; console.log(typeof nprime); // 'number' var oprime = object.appendchain(nprime, new mysymbol()); console.log(oprime); // '1
7' console.log(oprime.issymbol); // 'yes' console.log(typeof oprime); // 'object' third example: appending a chain to the function.prototype object and appending a new function to that chain function person(sname) { this.identity = sname; } var george = object.appen...
Object.prototype.toLocaleString() - JavaScript
ocalestring() date: date.prototype.tolocalestring() typedarray: typedarray.prototype.tolocalestring() bigint: bigint.prototype.tolocalestring() examples array tolocalestring() override on array objects, tolocalestring() can be used to print array values as a string, optionally with locale-specific identifiers (such as currency symbols) appended to them: for example: const testarray = [4,
7, 10]; let europrices = testarray.tolocalestring('fr', { style: 'currency', currency: 'eur'}); // "4,00 €,
7,00 €,10,00 €" date tolocalestring() override on date objects, tolocalestring() is used to print out date displays more suitable for specific locales: for example: const testdate = new date(date.now()); // "date fri may 29 2020 18:04:24 gmt+0100 (british summer time)" let dedate =...
Object.prototype.valueOf() - JavaScript
examples using valueof on custom types function mynumbertype(n) { this.number = n; } mynumbertype.prototype.valueof = function() { return this.number; }; var myobj = new mynumbertype(4); myobj + 3; //
7 using unary plus +"5" // 5 (string to number) +"" // 0 (string to number) +"1 + 2" // nan (doesn't evaluate) +new date() // same as (new date()).gettime() +"foo" // nan (string to number) +{} // nan +[] // 0 (tostring() returns an empty string list) +[1] // 1 +[1,2] // nan +new set([1]) // nan +bigint(1) // uncaught typeerror: cannot convert a bigint value to a number +undefined // nan +null /...
Object.values() - JavaScript
t.values const obj = { foo: 'bar', baz: 42 }; console.log(object.values(obj)); // ['bar', 42] // array-like object const arraylikeobj1 = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.values(arraylikeobj1 )); // ['a', 'b', 'c'] // array-like object with random key ordering // when using numeric keys, the values are returned in the keys' numerical order const arraylikeobj2 = { 100: 'a', 2: 'b',
7: 'c' }; console.log(object.values(arraylikeobj2 )); // ['b', 'c', 'a'] // getfoo is property which isn't enumerable const my_obj = object.create({}, { getfoo: { value: function() { return this.foo; } } }); my_obj.foo = 'bar'; console.log(object.values(my_obj)); // ['bar'] // non-object argument will be coerced to an object console.log(object.values('foo')); // ['f', 'o', 'o'] specifications ...
ReferenceError() constructor - JavaScript
ceof referenceerror) // true console.log(e.message) // "undefinedvariable is not defined" console.log(e.name) // "referenceerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 6 console.log(e.stack) // "@scratchpad/2:2:
7\n" } creating a referenceerror try { throw new referenceerror('hello', 'somefile.js', 10) } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "hello" console.log(e.name) // "referenceerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 consol...
ReferenceError - JavaScript
ceof referenceerror) // true console.log(e.message) // "undefinedvariable is not defined" console.log(e.name) // "referenceerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 6 console.log(e.stack) // "@scratchpad/2:2:
7\n" } creating a referenceerror try { throw new referenceerror('hello', 'somefile.js', 10) } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "hello" console.log(e.name) // "referenceerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 consol...
Reflect.construct() - JavaScript
} let obj3 = object.create(otherclass.prototype); oneclass.apply(obj3, args) // output: // oneclass // undefined examples using reflect.construct() let d = reflect.construct(date, [1
776, 6, 4]) d instanceof date // true d.getfullyear() // 1
776 specifications specification ecmascript (ecma-262)the definition of 'reflect.construct' in that specification.
Reflect.defineProperty() - JavaScript
examples using reflect.defineproperty() let obj = {} reflect.defineproperty(obj, 'x', {value:
7}) // true obj.x //
7 checking if property definition has been successful with object.defineproperty, which returns an object if successful, or throws a typeerror otherwise, you would use a try...catch block to catch any error that occurred while defining a property.
Reflect.ownKeys() - JavaScript
examples using reflect.ownkeys() reflect.ownkeys({z: 3, y: 2, x: 1}) // [ "z", "y", "x" ] reflect.ownkeys([]) // ["length"] let sym = symbol.for('comet') let sym2 = symbol.for('meteor') let obj = {[sym]: 0, 'str': 0, '
773': 0, '0': 0, [sym2]: 0, '-1': 0, '8': 0, 'second str': 0} reflect.ownkeys(obj) // [ "0", "8", "
773", "str", "-1", "second str", symbol(comet), symbol(meteor) ] // indexes in numeric order, // strings in insertion order, // symbols in insertion order specifications specification ecmascript (ecma-262)the definition of 'reflect.ownkeys' in that specification.
RegExp.prototype[@@matchAll]() - JavaScript
for example, to return an array instead of an iterator: class myregexp extends regexp { [symbol.matchall](str) { const result = regexp.prototype[symbol.matchall].call(this, str); if (!result) { return null; } else { return array.from(result); } } } const re = new myregexp('([0-9]+)-([0-9]+)-([0-9]+)', 'g'); const str = '2016-01-02|2019-03-0
7'; const result = str.matchall(re); console.log(result[0]); // [ "2016-01-02", "2016", "01", "02" ] console.log(result[1]); // [ "2019-03-0
7", "2019", "03", "0
7" ] specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@matchall]' in that specification.
RegExp.$1-$9 - JavaScript
the legacy regexp $1, $2, $3, $4, $5, $6, $
7, $8, $9 properties are static and read-only properties of regular expressions that contain parenthesized substring matches.
Set - JavaScript
console.log([...myset]) // will show you exactly the same array as myarray remove duplicate elements from the array // use to remove duplicate elements from the array const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,
7,5,32,3,4,5] console.log([...new set(numbers)]) // [2, 3, 4, 5, 6,
7, 32] relation with strings let text = 'india' let myset = new set(text) // set ['i', 'n', 'd', 'i', 'a'] myset.size // 5 //case sensitive & duplicate ommision new set("firefox") // set(
7) [ "f", "i", "r", "e", "f", "o", "x" ] new set("firefox") // set(6) [ "f", "i", "r", "e", "o", "x" ] specifications speci...
SharedArrayBuffer - JavaScript
policy: same-origin cross-origin-embedder-policy: require-corp to check if cross origin isolation has been successful, you can test against the crossoriginisolated property available to window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } see also planned changes to shared memory which is starting to roll out to browsers (firefox
79, for example.) always use the new operator to create a sharedarraybuffer sharedarraybuffer constructors are required to be constructed with a new operator.
String.prototype.big() - JavaScript
examples using big() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(
7)); // <fontsize=
7>hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.fontsize = '2em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.big' in that specification.
String.prototype.codePointAt() - JavaScript
'value': codepointat, 'configurable': true, 'writable': true }); } else { string.prototype.codepointat = codepointat; } }()); } examples using codepointat() 'abc'.codepointat(1) // 66 '\ud800\udc00'.codepointat(0) // 65536 'xyz'.codepointat(42) // undefined looping with codepointat() for (let codepoint of '\ud83d\udc0e\ud83d\udc
71\u2
764') { console.log(codepoint.codepointat(0).tostring(16)) } // '1f40e', '1f4
71', '2
764' specifications specification ecmascript (ecma-262)the definition of 'string.prototype.codepointat' in that specification.
String.prototype.indexOf() - JavaScript
'blue whale'.indexof('blue') // returns 0 'blue whale'.indexof('blute') // returns -1 'blue whale'.indexof('whale', 0) // returns 5 'blue whale'.indexof('whale', 5) // returns 5 'blue whale'.indexof('whale',
7) // returns -1 'blue whale'.indexof('') // returns 0 'blue whale'.indexof('', 9) // returns 9 'blue whale'.indexof('', 10) // returns 10 'blue whale'.indexof('', 11) // returns 10 the indexof() method is case sensitive.
String.prototype.small() - JavaScript
examples using small() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(
7)); // <font size="
7">hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.fontsize = '0.
7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.small' in that specification.
String.prototype.substring() - JavaScript
examples using substring() the following example uses substring() to display characters from the string 'mozilla': let anystring = 'mozilla' // displays 'm' console.log(anystring.substring(0, 1)) console.log(anystring.substring(1, 0)) // displays 'mozill' console.log(anystring.substring(0, 6)) // displays 'lla' console.log(anystring.substring(4)) console.log(anystring.substring(4,
7)) console.log(anystring.substring(
7, 4)) // displays 'mozilla' console.log(anystring.substring(0,
7)) console.log(anystring.substring(0, 10)) using substring() with length property the following example uses the substring() method and length property to extract the last characters of a particular string.
String.prototype.toLocaleUpperCase() - JavaScript
the following can return false: x.tolocalelowercase() === x.tolocaleuppercase().tolocalelowercase() examples using tolocaleuppercase() 'alphabet'.tolocaleuppercase(); // 'alphabet' 'gesäß'.tolocaleuppercase(); // 'gesÄss' 'i\u030
7'.tolocaleuppercase('lt-lt'); // 'i' let locales = ['lt', 'lt', 'lt-lt', 'lt-u-co-phonebk', 'lt-x-lietuva']; 'i\u030
7'.tolocaleuppercase(locales); // 'i' specifications specification ecmascript (ecma-262)the definition of 'string.prototype.tolocaleuppercase' in that specification.
end - SVG: Scalable Vector Graphics
" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" end="8s" fill="freeze" /> </rect> <rect x="10" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="
75" begin="0s" end="6s" fill="freeze" /> </rect> <rect x="10" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="0s" end="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105"...
fill-opacity - SVG: Scalable Vector Graphics
wing eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <circle cx="150" cy="50" r="40" fill-opacity="0.
7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacity as a css property --> <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for fi...
fx - SVG: Scalable Vector Graphics
, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.
75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincid...
fy - SVG: Scalable Vector Graphics
g { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.
75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincides with th...
glyph-orientation-horizontal - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value <angle> default value 0deg animatable no <angle> the value of the angle is restricted to 0, 90, 180, and 2
70 degrees.
href - SVG: Scalable Vector Graphics
value <url> default value none animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <image href="/files/291
7/fxlogo.png" x="0" y="0" height="100" width="100"/> </svg> lineargradient for <lineargradient>, href defines url referring to a template gradient element; to be valid, the reference must be to a different <lineargradient> or <radialgradient> element.
kernelMatrix - SVG: Scalable Vector Graphics
<svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/645
7/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/645
7/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <list of numbers> default value none animatable yes ...
kerning - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> html, body, svg { height: 100%; font: 36px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 150 125" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" kerning="auto">auto</text> <text x="10" y="
70" kerning="0">number</text> <text x="10" y="110" kerning="20px">length</text> </svg> usage notes value auto | <length> default value auto animatable yes auto this value indicates that the spacing between glyphs is adjusted based on kerning tables that are included in the font that will be used.
keySplines - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.
75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attributename="cy" dur="4s" calcmode="spline" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.
75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> </circle> </svg> usage notes value <control-point> [ ; <co...
keyTimes - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.
75 ; 1"/> <animate attributename="cy" dur="4s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.
75 ; 1"/> </circle> </svg> usage notes value <number> [ ; <number> ]* ;?
marker-end - SVG: Scalable Vector Graphics
; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60
70,80 100,20" marker-end="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the final vertex.
marker-mid - SVG: Scalable Vector Graphics
ipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="circle" markerwidth="8" markerheight="8" refx="4" refy="4"> <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60
70,80 100,20" marker-mid="url(#circle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the given vertices.
marker-start - SVG: Scalable Vector Graphics
; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60
70,80 100,20" marker-start="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the first vertex.
mask - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask" maskcontentunits="objectboundingbox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.
74 0.21,0.41 0.
79,0.41 0.32,0.
74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attribute is defined as a css property and is a shorthand for many other propertie...
max - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.
75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.
75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifies the length of the maximum value of the active duration, measured in local t...
min - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.
75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.
75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies the length of the minimum value of the active duration, measured in local time...
mode - SVG: Scalable Vector Graphics
<feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//developer.mozilla.org/files/645
7/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/645
7/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending2); transform:translatex(220px);"/> </svg> usage notes value <blend-mode> default value normal animatable yes for a descri...
operator - SVG: Scalable Vector Graphics
two elements are using this attribute: <fecomposite> and <femorphology> html, body, svg { height: 100%; font: 20px arial, helvetica, sans-serif; } <svg viewbox="0 0 120
70" xmlns="http://www.w3.org/2000/svg"> <filter id="erode"> <femorphology operator="erode" radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be per...
orient - SVG: Scalable Vector Graphics
10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <polyline points="15,80 29,50 43,60 5
7,30
71,40 85,15" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto this value indicates that the marker is oriented such that its positive x-axis ...
paint-order - SVG: Scalable Vector Graphics
"400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </lineargradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold"> <text x="200" y="
75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text> </g> </svg> the example would be rendered as follows: the stroke under effect could be achieved via the following css property: #stroke-under { paint-order: stroke; } specifications specification status comment scalable vector graphics (svg) 2the definit...
path - SVG: Scalable Vector Graphics
two elements are using this attribute: <animatemotion> and <textpath> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="mypath" fill="none" stroke="silver" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,
70 45,
70 q
70,
70
75,50" /> <text> <textpath path="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,
70 45,
70 q
70,
70
75,50"> quick brown fox jumps over the lazy dog.
preserveAlpha - SVG: Scalable Vector Graphics
w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/645
7/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/645
7/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes default value false value true | false animatable yes ...
side - SVG: Scalable Vector Graphics
th> html, body, svg { height: 100%; } text { font: 25px arial, helvelica, sans-serif; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <text> <textpath href="#circle1" side="left">text left from the path</textpath> </text> <text> <textpath href="#circle2" side="right">text right from the path</textpath> </text> <circle id="circle1" cx="100" cy="100" r="
70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="
70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes left this value places the text on the left side of the path (relative to the path direction).
startOffset - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <path id="path1" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,
70 45,
70 q
70,
70
75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 1
70,10 q130,10 130,40 q130,
70 165,
70 q190,
70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
stroke-dasharray - SVG: Scalable Vector Graphics
" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> <!-- dashes and gaps of various sizes with an odd number of values --> <line x1="0" y1="
7" x2="30" y2="
7" stroke="black" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none animatable yes <dasharray> a list of comma an...
stroke-opacity - SVG: Scalable Vector Graphics
ircle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.
7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" /> <!-- stroke opacity as a css property --> <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 intr...
systemLanguage - SVG: Scalable Vector Graphics
>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 4
7.
text-anchor - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,15 l60,110 m30,40 l90,40 m30,
75 l90,
75 m30,110 l90,110" stroke="grey" /> <!-- anchors in action --> <text text-anchor="start" x="60" y="40">a</text> <text text-anchor="middle" x="60" y="
75">a</text> <text text-anchor="end" x="60" y="110">a</text> <!-- materialisation of anchors --> <circle cx="60" cy="40" r="3" fill="red" /> <circle cx="60" cy="
75" r="3" fill="red" /> <circle cx="60" cy="110" r="3" fill="red"...
<filter> - SVG: Scalable Vector Graphics
example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="blurme"> <fegaussianblur stddeviation="5"/> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="1
70" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<filter>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
example svg <svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="
700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l4...
<image> - SVG: Scalable Vector Graphics
example basic rendering of a png image in svg: svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="https://mdn.mozillademos.org/files/645
7/mdn_logo_only_color.png" height="200" width="200"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of '<image>' in that specification.
<marker> - SVG: Scalable Vector Graphics
" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> </defs> <!-- coordinate axes with a arrowhead in both direction --> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="15,80 29,50 43,60 5
7,30
71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport.
<polygon> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polygon with the default fill --> <polygon points="0,100 50,25 50,
75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,
75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
<polyline> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polyline with the default fill --> <polyline points="0,100 50,25 50,
75 100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,
75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; default value: ""; animatable: yes pathlength this attribu...
<symbol> - SVG: Scalable Vector Graphics
100% } <svg viewbox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- our symbol in its own coordinate system --> <symbol id="mydot" width="10" height="10" viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- a grid to materialize our symbol positioning --> <path d="m0,10 h80 m10,0 v20 m25,0 v20 m40,0 v20 m55,0 v20 m
70,0 v20" fill="none" stroke="pink" /> <!-- all instances of our symbol --> <use xlink:href="#mydot" x="5" y="5" style="opacity:1.0" /> <use xlink:href="#mydot" x="20" y="5" style="opacity:0.8" /> <use xlink:href="#mydot" x="35" y="5" style="opacity:0.6" /> <use xlink:href="#mydot" x="50" y="5" style="opacity:0.4" /> <use xlink:href="#mydot" x="65" y="5" style="opacity:0.2" /> </svg>...
<textPath> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- to hide the path, it is usually wrapped in a <defs> element --> <!-- <defs> --> <path id="mypath" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,
70 45,
70 q
70,
70
75,50" /> <!-- </defs> --> <text> <textpath href="#mypath"> quick brown fox jumps over the lazy dog.
Example - SVG: Scalable Vector Graphics
view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width:
75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='
7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles.
Fills and Strokes - SVG: Scalable Vector Graphics
<?xml version="1.0" standalone="no"?> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="m 10
75 q 50 10 100
75 t 190
75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> <path d="m 10
75 l 190
75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> </svg> the stroke-dasharray attribute takes a series of comma-separated numbers as its argument.
Patterns - SVG: Scalable Vector Graphics
as a slight aside, in gecko circles seem to have trouble drawing if their radius is set to something less than 0.0
75 (it is currently unknown whether this is a bug in the pattern element or not).
SVG fonts - SVG: Scalable Vector Graphics
<font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="
700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="300"><!-- outline of exclam.
Secure contexts - Web security
locally-delivered resources such as those with http://12
7.0.0.1 urls, http://localhost urls (under certain conditions), and file:// urls are also considered to have been delivered securely.
How to turn off form autocompletion - Web security
for example, firefox version 6
7 (see bug 1119063) stopped autofilling in this case; however, firefox
70 (see bug 156540
7) can suggest securely-generated passwords, but does not autofill a saved password.