Search completed in 1.77 seconds.
NSS 3.46.1 release notes
introduction network security services (nss) 3.4
6.1 is a patch release for nss 3.4
6.
... the bug fixes in nss 3.4
6.1 are described in the "bugs fixed" section below.
... distribution information the hg tag is nss_3_4
6_1_rtm.
...And 5 more matches
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
(may 2019) ecmascript next refers to new features of the ecma-2
62 standard (commonly referred to as javascript) introduced after ecmascript 2015.
...so far, es201
6, es2017, and es2018 have been released.
... you can see the latest proposals on the tc39/ecma2
62 github repository.
...And 4 more matches
ISO8601DateUtils.jsm
the iso8
601dateutils.jsm javascript code module provides methods that make it easy to convert javascript date objects into iso 8
601 format date strings and back.
... to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/iso8
601dateutils.jsm"); once you've imported the module, you can then use the iso8
601dateutils object it exports.
... using the iso 8
601 date utilities to convert a date string into a date object, simply use: dateobj = iso8
601dateutils.parse(datestring); to convert a date object into a date string: datestring = iso8
601dateutils.create(dateobj); method overview string create(adate); date parse(adatestring); methods create creates an iso 8
601 format date string, e.g.
...And 4 more matches
PR_GetFileInfo64
file size is expressed as a
64-bit integer.
... syntax #include <prio.h> prstatus pr_getfileinfo
64( const char *fn, prfileinfo
64 *info); parameters the function has the following parameters: fn the pathname of the file to get information about.
... info a pointer to a
64-bit file information object (see prfileinfo
64).
...And 4 more matches
NSS 3.36.4 release notes
introduction network security services (nss) 3.3
6.4 is a patch release for nss 3.3
6.
... distribution information the hg tag is nss_3_3
6_4_rtm.
... nss 3.3
6.4 requires nspr 4.19 or newer.
...And 4 more matches
NSS 3.36.5 release notes
introduction network security services (nss) 3.3
6.5 is a patch release for nss 3.3
6.
... the bug fixes in nss 3.3
6.5 are described in the "bugs fixed" section below.
... distribution information the hg tag is nss_3_3
6_5_rtm.
...And 4 more matches
NSS 3.36 release notes
introduction the nss team has released network security services (nss) 3.3
6, which is a minor release.
... distribution information the hg tag is nss_3_3
6_rtm.
... nss 3.3
6 requires nspr 4.19 or newer.
...And 4 more matches
nss tech note6
nss .chk files for the fips 140 mode nss technical note:
6 in nss 3.8, we added checksum files required for the nss softoken to operate in fips 140 mode.
... the following applies to nss 3.8 through 3.10 : on 32-bit solaris sparc (i.e., not x8
6, and not
64-bit sparc) and 32-bit hp-ux pa-risc (i.e., not itanium, and not
64-bit pa-risc), there are two more .chk files: libfreebl_pure32_3.chk and libfreebl_hybrid_3.chk.
...on 32-bit solaris x8
6,
64-bit solaris x
64 (amd
64), 32-bit linux x8
6,
64-bit linux x8
6-
64, 32-bit aix and
64-bit aix, this shared library is called libfreebl3.so, and the corresponding .chk file is called libfreebl3.chk .
...And 4 more matches
JS::ToUint16
this article covers features introduced in spidermonkey 17 convert any javascript value to an unsigned 1
6bit integer.
... syntax bool js::touint1
6(jscontext *cx, js::handlevalue v, uint1
6_t *out); name type description cx jscontext * the context in which to perform the conversion.
... out uint1
6_t * out parameter.
...And 4 more matches
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
the html <h1>–<h
6> elements represent six levels of section headings.
... <h1> is the highest section level and <h
6> is the lowest.
... <h1>heading level 1</h1> <h2>heading level 2</h2> <h3>heading level 3</h3> <h4>heading level 4</h4> <h5>heading level 5</h5> <h
6>heading level
6</h
6> here is the result of this code: example page the following code shows a few headings with some content under them.
...And 4 more matches
Uint16Array() constructor - JavaScript
the uint1
6array() typed array constructor creates an array of 1
6-bit unsigned integers in the platform byte order.
... syntax new uint1
6array(); // new in es2017 new uint1
6array(length); new uint1
6array(typedarray); new uint1
6array(object); new uint1
6array(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.
... description the uint1
6array() typed array constructor creates an array of 1
6-bit unsigned integers in the platform byte order.
...And 4 more matches
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
tamarin-central rev 703:2cee4
6be9ce0 was declared stable on 12/02/08.
... testing summary acceptance tests have passed on the following supported platforms: * windows, 32 &
64 bit * mac ox x ppc & intel, 32 bit * linux, 32 bit * windows mobile arm version asc-4200 of the actionscript compiler was used for all tests.
... 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: 17.4% fastertc-703 vs flash10: 1
65.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: 1
6.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% fa...
...And 3 more matches
Long Long (64-bit) Integers
« previousnext » this chapter describes the global functions you use to perform
64-bit integer operations.
...where
64-bit integers are desired, use of nspr's implementation is recommended to ensure cross-platform compatibility.
... most of the
64-bit integer operations are implemented as macros.
...And 3 more matches
PR_GetOpenFileInfo64
file size is expressed as a
64-bit integer.
... syntax #include <prio.h> prstatus pr_getopenfileinfo
64( prfiledesc *fd, prfileinfo *info); parameters the function has the following parameters: fd a pointer to a prfiledesc object for an open file.
... info a pointer to a prfileinfo
64 object.
...And 3 more matches
NSS 3.26 release notes
introduction the network security services (nss) team has released nss 3.2
6, which is a minor release.
... distribution information the hg tag is nss_3_2
6_rtm.
... nss 3.2
6 requires netscape portable runtime (nspr) 4.12 or newer.
...And 3 more matches
JS::ToInt64
this article covers features introduced in spidermonkey 17 convert any javascript value to a signed
64bit integer.
... syntax bool js::toint
64(jscontext *cx, js::handlevalue v, int
64_t *out); name type description cx jscontext * the context in which to perform the conversion.
... out int
64_t * out parameter.
...And 3 more matches
JS::ToUint64
this article covers features introduced in spidermonkey 17 convert any javascript value to an unsigned
64bit integer.
... syntax bool js::touint
64(jscontext *cx, js::handlevalue v, uint
64_t *out); name type description cx jscontext * the context in which to perform the conversion.
... out uint
64_t * out parameter.
...And 3 more matches
DataView.prototype.setBigInt64() - JavaScript
the setbigint
64() method stores a signed
64-bit integer (long long) value at the specified byte offset from the start of the dataview.
... syntax dataview.setbigint
64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from.
...the highest possible value that fits in a signed
64-bit integer is 2n ** (
64n -1n) - 1n (922337203
6854775807n).
...And 3 more matches
Using addresses of stack variables with NSPR threads on win16 - Archive of obsolete content
problem statement win-1
6 (aka, windows 3.1, et al), is unique in that the architecture depends on the operating environment (i.e., windows) knows the address of the stack, and that there is only one such address.
...with the speed of today's processors (even those running win-1
6), the copying of 10 - 50 kilobytes of data between two locations in memory is barely measurable 1.
...0 : 1; } this is a completely correct (albeit trivial) program that will run predictably on all nspr platforms other than win-1
6.
...And 2 more matches
2006-10-27 - Archive of obsolete content
summary: mozilla.dev.builds - october 21st to october 27th 200
6 fx 1.5.0.x (linux) not building since 20-oct-200
6 17:45 pdt october 22nd: gavin sharp answered a question that was posted by tony mechelynck.
... firefox 2 wont build under solaris 10 x8
6 october 2
6: alex was trying to build firefox 2 source on a solaris 10 x8
6 machine but was not successful with the build.
... peter weilbacher responded to alex's posting on the same day, stating that he is not sure what packaging system solaris 10 x8
6 uses but thinks that he might need to install the developer packages of x and/or xrender and freetype which should contain the libxrender.* and libfreetype.* files that are need for the linking.
...And 2 more matches
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.builds - october 28th to november 3rd 200
6 no such file or directory (build problem on winxp) november 2nd: kenoa complained that when he is compiling using cygwin on win32 he gets the following error no such file or directory1: /cygdrive/c/mozilla/mail/config/mozconfig client.mk:339: /cygdrive/c/mozilla/.mozconfig.mk: no such file or directory he claims that the file ".mozconfig" exists in /cygdrive/c/mozilla/mail/config/mozconfig the disable-crypto cause problem originally posted on november 2nd: gxk is building minimo using the code base from sept.
... 11 200
6.
... problem compiling with vs 2003 .net phil is trying to compile firefox for the first time and is getting an error when doing so: building deps for /cygdrive/c/mozilla/toolkit/airbag/airbag/src/common/windows/guid_string.cc make[1]: leaving directory `/cygdrive/c/mozilla/obj-i
68
6-pc-cygwin' make: *** [build] error 2 he also noted that he is using make 3.80-1.
...And 2 more matches
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.quality - october 13-october 20, 200
6 announcements completed rc3 testing - the key testing activities for rc3 has been completed.
...announced by tim on friday october 13, 200
6.
...posted by jay patel on october 18th, 200
6.
...And 2 more matches
206 Partial Content - HTTP
the http 20
6 partial content success status response code indicates that the request has succeeded and has the body contains the requested ranges of data, as described in the range header of the request.
... status 20
6 partial content examples a response containing one single range: http/1.1 20
6 partial content date: wed, 15 nov 2015 0
6:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-range: bytes 21010-47021/47022 content-length: 2
6012 content-type: image/gif ...
... 2
6012 bytes of partial image data ...
...And 2 more matches
Warning: 08/09 is not a legal ECMA-262 octal constant - JavaScript
the javascript warning "08 (or 09) is not a legal ecma-2
62 octal constant" occurs when 08 or 09 number literals are used.
... message warning: syntaxerror: 08 is not a legal ecma-2
62 octal constant.
... warning: syntaxerror: 09 is not a legal ecma-2
62 octal constant.
...And 2 more matches
DataView.prototype.getFloat64() - JavaScript
the getfloat
64() method gets a signed
64-bit float (double) at the specified byte offset from the start of the dataview.
... syntax dataview.getfloat
64(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the
64-bit float is stored in little- or big-endian format.
...And 2 more matches
DataView.prototype.getInt16() - JavaScript
the getint1
6() method gets a signed 1
6-bit integer (short) at the specified byte offset from the start of the dataview.
... syntax dataview.getint1
6(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the 1
6-bit int is stored in little- or big-endian format.
...And 2 more matches
DataView.prototype.getUint16() - JavaScript
the getuint1
6() method gets an unsigned 1
6-bit integer (unsigned short) at the specified byte offset from the start of the dataview.
... syntax dataview.getuint1
6(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the 1
6-bit int is stored in little- or big-endian format.
...And 2 more matches
DataView.prototype.setBigUint64() - JavaScript
the setbiguint
64() method stores an unsigned
64-bit integer (unsigned long long) value at the specified byte offset from the start of the dataview.
... syntax dataview.setbiguint
64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from.
...the highest possible value that fits in an unsigned
64-bit integer is 2n **
64n - 1n (1844
6744073709551
615n).
...And 2 more matches
base64 - Archive of obsolete content
data encoding and decoding using base
64 algorithms.
... var base
64 = require("sdk/base
64"); var encodeddata = base
64.encode("hello, world"); var decodeddata = base
64.decode(encodeddata); globals functions encode(data, charset) creates a base-
64 encoded ascii string from a string of binary data.
...in order to encode and decode unicode strings, the charset parameter needs to be set: var base
64 = require("sdk/base
64"); var encodeddata = base
64.encode(unicodestring, "utf-8"); returns string : the encoded string decode(data, charset) decodes a string of data which has been encoded using base-
64 encoding.
...in order to encode and decode unicode strings, the charset parameter needs to be set: var base
64 = require("sdk/base
64"); var decodeddata = base
64.decode(encodeddata, "utf-8"); returns string : the decoded string ...
New in JavaScript 1.6 - Archive of obsolete content
the following is a changelog for javascript 1.
6.
...the corresponding ecma standard is ecma-2
62 edition 3 and ecmascript for xml (e4x) with some additional features.
... new features in javascript 1.
6 support for ecmascript for xml (e4x) for creating and processing xml content within javascript has been added.
... array.prototype.indexof() array.prototype.lastindexof() array.prototype.every() array.prototype.filter() array.prototype.foreach() array.prototype.map() array.prototype.some() array generics string generics for each...in changed functionality in javascript 1.
6 a bug in which arguments[n] cannot be set if n is greater than the number of formal or actual parameters has been fixed.
PRFileInfo64
file information structure used with pr_getfileinfo
64 and pr_getopenfileinfo
64.
... syntax #include <prio.h> struct prfileinfo
64 { prfiletype type; pruint
64 size; prtime creationtime; prtime modifytime; }; typedef struct prfileinfo
64 prfileinfo
64; fields the structure has the following fields: type type of file.
... size
64-bit size, in bytes, of file's contents.
... description the prfileinfo
64 structure provides information about a file, a directory, or some other kind of file system object, as specified by the type field.
PRIPv6Addr
type used in the ipv
6.ip field of the prnetaddr structure.
... syntax #include <prio.h> #if defined(_pr_inet
6) typedef struct in
6_addr pripv
6addr; #endif /* defined(_pr_inet
6) */ description pripv
6addr represents a 128-bit ipv
6 address.
... it is equivalent to struct in
6_addr in the berkeley socket interface.
... pripv
6addr is always manipulated as a byte array.
NS_CStringToUTF16
« xpcom api reference summary the ns_cstringtoutf1
6 function converts the value of a nsacstring instance to utf-1
6 and stores the result in a nsastring instance.
... #include "nsstringapi.h" nsresult ns_cstringtoutf1
6( const nsacstring& asrc, nscstringencoding asrcencoding, nsastring& adest ); parameters asrc [in] a nsacstring instance containing the source string to be converted.
... return values the ns_cstringtoutf1
6 function returns ns_ok if successful.
... example code nsembedcstring str("hello"); nsembedstring ustr; ns_cstringtoutf1
6(str, ns_cstring_encoding_ascii, ustr); const prunichar *unicharbuf = ustr.get(); history this function was frozen for mozilla 1.7.
NS_UTF16ToCString
« xpcom api reference summary the ns_utf1
6tocstring function converts the value of a nsastring instance from utf-1
6 to the specified multi-byte encoding and stores the result in a nsacstring instance.
... #include "nsstringapi.h" nsresult ns_utf1
6tocstring( const nsastring& asrc, nscstringencoding adestencoding, nsacstring& adest ); parameters asrc [in] a nsastring instance containing the source utf-1
6 string to be converted.
... return values the ns_utf1
6tocstring function returns ns_ok if successful.
... example code // convert utf-1
6 (or ucs-2) string to utf-8 void copyutf1
6toutf8(const nsastring& in, nsacstring& out) { ns_utf1
6tocstring(in, ns_cstring_encoding_utf8, out); } history this function was frozen for mozilla 1.7.
BigInt64Array() constructor - JavaScript
the bigint
64array() typed array constructor creates a new bigint
64array object, which is, an array of
64-bit signed integers in the platform byte order.
... syntax new bigint
64array(); new bigint
64array(length); new bigint
64array(typedarray); new bigint
64array(object); new bigint
64array(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 bigint
64array // from a length var bigint
64 = new bigint
64array(2); bigint
64[0] = 42n; console.log(bigint
64[0]); // 42n console.log(bigint
64.length); // 2 console.log(bigint
64.bytes_per_element); // 8 // from an array var arr = new bigint
64array([21n,31n]); console.log(arr[1]); // 31n // from another typedarray var x = new bigint
64array([21n, 31n]); var y = new bigint
64array(x); console.log(y[0]); // ...
...21n // from an arraybuffer var buffer = new arraybuffer(32); var z = new bigint
64array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1n, 2n, 3n]; }(); var bigint
64 = new bigint
64array(iterable); // bigint
64array[1n, 2n, 3n] specifications specification ecmascript (ecma-2
62)the definition of 'bigint
64array' in that specification.
BigUint64Array() constructor - JavaScript
the biguint
64array() typed array constructor creates a new biguint
64array object, which is, an array of
64-bit unsigned integers in the platform byte order.
... syntax new biguint
64array(); new biguint
64array(length); new biguint
64array(typedarray); new biguint
64array(object); new biguint
64array(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 biguint
64array // from a length var biguint
64 = new biguint
64array(2); biguint
64[0] = 42n; console.log(biguint
64[0]); // 42n console.log(biguint
64.length); // 2 console.log(biguint
64.bytes_per_element); // 8 // from an array var arr = new biguint
64array([21n,31n]); console.log(arr[1]); // 31n // from another typedarray var x = new biguint
64array([21n, 31n]); var y = new biguint
64array(x); console.log(y...
...[0]); // 21n // from an arraybuffer var buffer = new arraybuffer(32); var z = new biguint
64array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1n, 2n, 3n]; }(); var biguint
64 = new biguint
64array(iterable); // biguint
64array[1n, 2n, 3n] specifications specification ecmascript (ecma-2
62)the definition of 'biguint
64array' in that specification.
DataView.prototype.getBigInt64() - JavaScript
the getbigint
64() method gets a signed
64-bit integer (long long) at the specified byte offset from the start of the dataview.
... syntax dataview.getbigint
64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... littleendian optional indicates whether the
64-bit int is stored in little- or big-endian format.
... examples using the getbigint
64 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.getbigint
64(0); // 0n specifications specification ecmascript (ecma-2
62)the definition of 'dataview.prototype.getbigint
64()' in that specification.
DataView.prototype.getBigUint64() - JavaScript
the getbiguint
64() method gets an unsigned
64-bit integer (unsigned long long) at the specified byte offset from the start of the dataview.
... syntax dataview.getbiguint
64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... littleendian optional indicates whether the
64-bit int is stored in little- or big-endian format.
... examples using the getbiguint
64 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.getbiguint
64(0); // 0n specifications specification ecmascript (ecma-2
62)the definition of 'dataview.prototype.getbiguint
64()' in that specification.
DataView.prototype.setFloat64() - JavaScript
the setfloat
64() method stores a signed
64-bit float (double) value at the specified byte offset from the start of the dataview.
... syntax dataview.setfloat
64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... littleendian optional indicates whether the
64-bit float is stored in little- or big-endian format.
... examples using the setfloat
64 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.setfloat
64(0, 3); dataview.getfloat
64(0); // 3 specifications specification ecmascript (ecma-2
62)the definition of 'dataview.prototype.setfloat
64' in that specification.
DataView.prototype.setInt16() - JavaScript
the setint1
6() method stores a signed 1
6-bit integer (short) value at the specified byte offset from the start of the dataview.
... syntax dataview.setint1
6(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... littleendian optional indicates whether the 1
6-bit int is stored in little- or big-endian format.
... examples using the setint1
6 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.setint1
6(1, 3); dataview.getint1
6(1); // 3 specifications specification ecmascript (ecma-2
62)the definition of 'dataview.prototype.setint1
6' in that specification.
DataView.prototype.setUint16() - JavaScript
the setuint1
6() method stores an unsigned 1
6-bit integer (unsigned short) value at the specified byte offset from the start of the dataview.
... syntax dataview.setuint1
6(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... littleendian optional indicates whether the 1
6-bit int is stored in little- or big-endian format.
... examples using the setuint1
6 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.setuint1
6(1, 3); dataview.getuint1
6(1); // 3 specifications specification ecmascript (ecma-2
62)the definition of 'dataview.prototype.setuint1
6' in that specification.
Float64Array() constructor - JavaScript
the float
64array() typed array constructor creates a new float
64array object, which is, an array of
64-bit floating point numbers (corresponding to the c double data type) in the platform byte order.
... syntax new float
64array(); // new in es2017 new float
64array(length); new float
64array(typedarray); new float
64array(object); new float
64array(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 float
64array // from a length var float
64 = new float
64array(2); float
64[0] = 42; console.log(float
64[0]); // 42 console.log(float
64.length); // 2 console.log(float
64.bytes_per_element); // 8 // from an array var arr = new float
64array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new float
64array([21, 31]); var y = new float
64array(x); console.log(y[0]); // 21 // from an a...
...rraybuffer var buffer = new arraybuffer(32); var z = new float
64array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var float
64 = new float
64array(iterable); // float
64array[1, 2, 3] specifications specification ecmascript (ecma-2
62)the definition of 'typedarray constructors' in that specification.
Int16Array() constructor - JavaScript
the int1
6array() typed array constructor creates an array of twos-complement 1
6-bit signed integers in the platform byte order.
... syntax new int1
6array(); // new in es2017 new int1
6array(length); new int1
6array(typedarray); new int1
6array(object); new int1
6array(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 an int1
6array // from a length var int1
6 = new int1
6array(2); int1
6[0] = 42; console.log(int1
6[0]); // 42 console.log(int1
6.length); // 2 console.log(int1
6.bytes_per_element); // 2 // from an array var arr = new int1
6array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new int1
6array([21, 31]); var y = new int1
6array(x); console.log(y[0]); // 21 // from an arraybuffer var buff...
...er = new arraybuffer(8); var z = new int1
6array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var int1
6 = new int1
6array(iterable); // int1
6array[1, 2, 3] specifications specification ecmascript (ecma-2
62)the definition of 'typedarray constructors' in that specification.
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 i38
6" ccc="g++ -arch i38
6" make nss_build_all use_
64=1 build jss for 32 and
64: cd ../jss make cc="gcc -arch i38
6" ccc="g++ -arch i38
6" make use_
64=1 on osx, java.library.path doesnt seem to have /usr/lib or other paths.
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.accessibility - oct 28-nov 10, 200
6 announcements acm transactions on accessible computing "transactions on accessible computing (taccess) is a quarterly journal that publishes refereed articles addressing issues of computing as it impacts the lives of people with disabilities." read more...
...important dates: technical submissions: monday 19th feb 2007 technical paper notification: friday 1
6th march 2007 communication submissions: monday 2
6th march 2007 communication paper notification: friday 0
6th april 2007 all camera ready due: monday 1
6th april 2007 conference dates: monday 07th and tuesday 08th may 2007 notable keynotes representatives from w3c, ibm, university of manchester, uk and oxford brookes university, uk.
...see bug 34971
6.
2006-10-27 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - october 20, 200
6 - october 27, 200
6 announcements none this week.
... fx 1.5.0.x (linux) not building since 20-oct-200
6 17:45 pdt?
... ubuntu firefox ua string a user questions ubuntu
6.10 and their firefox's ua string, the zeros seem to be wrong.
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - november 4-10, 200
6 announcements none for this week.
...this has been filed as bug 3
60118.
... meetings calendar project weekly status meeting - 200
6/11/08 17:00 utc (meeting notes) calendar project weekly qa chat - 200
6/11/09 1
6:30 utc (meeting notes) ...
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.builds - november 17th to november 24th 200
6 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: 0x8057001
6 (ns_error_xpc_gs_returned_failure) [nsijscid.getservice]" nsresult: "0x8057001
6 (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.
... announcements svg build dependency on cairo gfx on 11/22 november 21st: t rowley announced that: he will be landing his patch that starts the process of switching svg over to thebes (bug 3548
66).
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.l10n - october 20, 200
6 announcements sign-off for zh-tw firefox 2 sign-off for zh-tw firefox 2 sign off of chinese simplified firefox 2.0 sign off of simplified chinese firefox 2 attention dictionary providers, or: warning, amo sucks there was at amo (addons.mozilla.org), which has been being fixed.
... meetings sign off deadline is this thursday there was a status meeting on tuesday, october 17, 200
6.
... sign off deadline was on thursday, october 19, 200
6.
2006-11-3 - Archive of obsolete content
summary: mozilla.dev.l10n - november 3, 200
6 announcements mozip.net 1.2.0 released: the should have been 1.0 release mozip.net 1.2.0, a gui (graphic) version of piaip's mozip command line utility, is available here.
... seamonkey 1.0.
6 and 1.1 beta upcoming the seamonkey projet is planning a security release of the stable 1.0 series as well as a beta for the 1.1 version, all possibly in the next days or week.
...1.0.
6 build is located here, and 1.1 beta build is located here.
2006-10-20 - Archive of obsolete content
announcements mozilla scheduled downtime - 10/17/200
6, 7pm - 10pm pdt (0200 - 0500 utc) scheduled downtime for upgrades and migration.
... meetings bon echo status meeting bon echo status meeting: october 17th, 200
6 **at noon pdt**.
...agenda project status meeting project meeting was held on oct 1
6 200
6.
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, 200
6 blocker nomination and code freeze for 1.5.0.9/2.0.0.1 blocker nomination is due on november 10.
... code freeze for these versions is on november 2
6 version numbering changes paul reed announced changes to the way version numbers are done for pre-releases.
... 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-20 - Archive of obsolete content
summary: mozilla.dev.platform - october 14th to october 20th 200
6 announcements no announcements this week.
... traffic october 14, 200
6,
6:53pm - ed notes that, on windows, composer 0.1's reccomended install directory needs to be different than those noted in the release notes.
... started wed, oct 18 200
6 9:38 am - a xulrunner developer, frank, discusses his desire to make xul/browser based applications.
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.tech.layout - october 28 - november 3, 200
6 announcements new reflow branch off of trunk l.
... david baron announced that he merged the reflow branch to a new branch (reflow_200
61031_branch) off of the trunk.
... perf question (reflow branch) a look into bug #3523
67 and the mention of possibly reducing the number of times nsframe::intrinsicwidthoffsets is called for each cell within a table.
PRUint64
guaranteed to be an unsigned
64-bit integer on all platforms.
... syntax #include <prtypes.h> typedef definition pruint
64; description may be defined in several different ways, depending on the platform.
... notes note: prior to gecko 12.0, pruint
64 was actually treated as a signed
64-bit integer by xpconnect.
PR ConvertIPv4AddrToIPv6
converts an ipv4 address into an (ipv4-mapped) ipv
6 address.
... syntax #include <prnetdb.h> void pr_convertipv4addrtoipv
6( pruint32 v4addr, pripv
6addr *v
6addr ); parameters the function has the following parameters: v4addr the ipv4 address to convert into an ipv4-mapped ipv
6 address.
...v
6addr a pointer to a buffer, allocated by the caller, that is filled in with the ipv
6 address on return.
PR_Seek64
moves the current read-write file pointer by an offset expressed as a
64-bit integer.
... syntax #include <prio.h> print
64 pr_seek
64( prfiledesc *fd, print
64 offset, prseekwhence whence); parameters the function has the following parameters: fd a pointer to a prfiledesc object.
... description this is the idiom for obtaining the current location (expressed as a
64-bit integer) of the file pointer for the file descriptor fd: pr_seek
64(fd, 0, pr_seek_cur) if the operating system can handle only a 32-bit file offset, pr_seek
64 may fail with the error code pr_file_too_big_error if the offset parameter is out of the range of a 32-bit integer.
NS_ConvertUTF16toUTF8
class declaration a helper class that converts a utf-1
6 string to utf-8 method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowerc...
... methods constructors void ns_convertutf1
6toutf8(const prunichar*) - source a helper class that converts a utf-1
6 string to utf-8 parameters prunichar* astring void ns_convertutf1
6toutf8(const prunichar*, pruint32) - source parameters prunichar* astring pruint32 alength void ns_convertutf1
6toutf8(const nsastring_internal&) - source parameters nsastring_internal& astring operator= nscautostring& operator=(const nscaut...
...ersion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print
64, print32) - source parameters print
64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source parameters double afloat beginreading char* beginreading() const - source reading iterators nsreadingiterator<char>& beginreading(nsreadingiterator<char>&) const - s...
NS_LossyConvertUTF16toASCII
class declaration a helper class that converts a utf-1
6 string to ascii in a lossy manner method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequa...
... methods constructors void ns_lossyconvertutf1
6toascii(const prunichar*) - source a helper class that converts a utf-1
6 string to ascii in a lossy manner parameters prunichar* astring void ns_lossyconvertutf1
6toascii(const prunichar*, pruint32) - source parameters prunichar* astring pruint32 alength void ns_lossyconvertutf1
6toascii(const nsastring_internal&) - source parameters nsastring_internal& astring operator= nscaut...
...ersion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print
64, print32) - source parameters print
64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source parameters double afloat beginreading char* beginreading() const - source reading iterators nsreadingiterator<char>& beginreading(nsreadingiterator<char>&) const - s...
nsISupportsPRInt16
xpcom/ds/nsisupportsprimitives.idlscriptable this interface provides scriptable access for 1
6-bit signed integers.
... inherits from: nsisupportsprimitive last changed in gecko 1.2 method overview string tostring(); attributes attribute type description data print1
6 provides access to the native type represented by the object.
...see bug 1
6642
6 for details.
nsISupportsPRInt64
xpcom/ds/nsisupportsprimitives.idlscriptable this interface provides scriptable access for
64-bit signed integers.
... inherits from: nsisupportsprimitive last changed in gecko 1.2 method overview string tostring(); attributes attribute type description data print
64 provides access to the native type represented by the object.
...see bug 1
6642
6 for details.
nsISupportsPRUint16
xpcom/ds/nsisupportsprimitives.idlscriptable this interface provides scriptable access for 1
6-bit unsigned integers.
... inherits from: nsisupportsprimitive last changed in gecko 1.2 method overview string tostring(); attributes attribute type description data pruint1
6 provides access to the native type represented by the object.
...see bug 1
6642
6 for details.
nsISupportsPRUint64
xpcom/ds/nsisupportsprimitives.idlscriptable this interface provides scriptable access for
64-bit unsigned integers.
... inherits from: nsisupportsprimitive last changed in gecko 1.2 method overview string tostring(); attributes attribute type description data pruint
64 provides access to the native type represented by the object.
...see bug 1
6642
6 for details.
416 Range Not Satisfiable - HTTP
the hypertext transfer protocol (http) 41
6 range not satisfiable error response code indicates that a server cannot serve the requested ranges.
... the 41
6 response message contains a content-range indicating an unsatisfied range (that is a '*') followed by a '/' and the current length of the resource.
... status 41
6 range not satisfiable specifications specification title rfc 7233, section 4.4: 41
6 request not satisfiable hypertext transfer protocol (http/1.1): range requests ...
Warning: JavaScript 1.6's for-each-in loops are deprecated - JavaScript
the javascript warning "javascript 1.
6's for-each-in loops are deprecated; consider using es
6 for-of instead" occurs when a for each (variable in obj) statement is used.
... message warning: javascript 1.
6's for-each-in loops are deprecated; consider using es
6 for-of instead error type warning what went wrong?
... javascript 1.
6's for each (variable in obj) statement is deprecated, and will be removed in the near future.
2006-11-22 - Archive of obsolete content
summary: mozilla.dev.accessibility - nov 17-nov 22, 200
6 announcements mozilla osk project grant aaron leventhal (on behalf of michael curran) mentiond that there is now an nvda email list you can join if you wish to keep up to date with the latest changes, or if you wish to discuss new features or talk with other nvda users.
... if anyone has experience with these issues, and is comfortable helping out in the mozilla/accessible module, would you please take a look at https://bugzilla.mozilla.org/show_bug.cgi?id=1
66994 he stated that he almost had it working a couple of years ago.
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - november 17, 200
6 - november 24, 200
6 announcements none this week.
...they would like to discuss the use of it in bug 3
6102
6 rich results for searches a proposal for a search tool that gives users a quicker path to specific information they are looking for.
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - october 28 - november 03, 200
6 announcements none for this week.
... meetings calendar project weekly status meeting - 200
6/11/01 17:00 utc (meeting notes) calendar project weekly qa chat - 200
6/11/02 1
6:30 utc (meeting notes) ...
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - november 10 - 17, 200
6 announcements none for this week discussions how to fiter out mail for a particular recepient?
... meetings calendar project weekly status meeting - 200
6/11/15 17:00 utc (meeting notes) calendar project weekly qa chat - 200
6/11/02 1
6:30 utc (meeting notes) ...
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - november 18 - 24, 200
6 announcements none for this week discussions issues with 2.0 features there's renewed discussion on why certain features were removed in the 2.0 release, and the addition of support for s/mime and not pgp/gpg encryption.
... additional links: bug 22
687 and original newsgroup thread.
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.builds - october 14th to october 20th 200
6 linux reference platform 1.8.1 october 18th: marcus is wondering about the linux platform that is currently used to compile both public releases of firefox and xulrunner.
...he can be contacted via: email: preed@mozilla.com irc: preed on irc.mozilla.org phone:
650.903.0800 x25
6 uploading language packs to amo on october 17th 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
summary: mozilla.dev.l10n - november 10, 200
6 announcements seamonkey 1.0.5 in belarusian belarusian [be-by] localization for seamonkey 1.0.5 is available now.
... seamonkey 1.0.
6 and 1.1 beta upcoming seamonkey 1.0.
6 and 1.1 beta are both available here.
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.l10n - november 17, 200
6 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.
... seamonkey 1.0.
6 in french seamonkey 1.0.
6 in french (fr-fr) is released.
PRUint16
guaranteed to be an unsigned 1
6-bit integer on all platforms.
... syntax #include <prtypes.h> typedefdefinition pruint1
6; ...
PR_Available64
syntax #include <prio.h> print
64 pr_available
64(prfiledesc *fd); parameter the function has the following parameter: fd pointer to a prfiledesc object representing a file or socket.
... description pr_available
64 works on normal files and sockets.
NSS Sample Code sample6
nss sample code
6: persistent symmetric keys in nss database /* example code to illustrate generation of a secret symmetric key ring * that persists in the nss database.
... * since we're using aes in this example, we're specifying * one of the valid keysizes (1
6, 24, 32) */ key = pk11_tokenkeygen(slot, ciphermech, 0, 32 /*keysize*/, &keyiditem, pr_true, 0); if (key == null) { fprintf(stderr, "pk11_tokenkeygen failed (err %d)\n", pr_geterror()); pk11_freeslot(slot); return; } fprintf(stderr, "key length of generated key is %d\n", pk11_getkeylength(key)); fprintf(stderr, "mechanism ...
NS_ConvertASCIItoUTF16
methods constructors void ns_convertasciitoutf1
6(const char*) - source parameters char* acstring void ns_convertasciitoutf1
6(const char*, pruint32) - source parameters char* acstring pruint32 alength void ns_convertasciitoutf1
6(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(c...
...ndwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print
64, print32) - source parameters print
64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source parameters double afloat beginreading prunichar* beginreading() const - source reading iterators nsreadingiterator<short unsigned int>& beginreading(nsreadingiterato...
NS ConvertASCIItoUTF16 external
methods constructors void ns_convertasciitoutf1
6_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertasciitoutf1
6_external(const char*, pruint32) - source parameters char* adata pruint32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - sourc...
...@param aradix must be 10 or 1
6 parameters nsresult* aerrorcode pruint32 aradix ...
NS ConvertUTF16toUTF8 external
methods constructors void ns_convertutf1
6toutf8_external(const nsastring&) - source parameters nsastring& astr void ns_convertutf1
6toutf8_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external...
...@param aradix must be 10 or 1
6 parameters nsresult* aerrorcode pruint32 aradix ...
NS_ConvertUTF8toUTF16
methods constructors void ns_convertutf8toutf1
6(const char*) - source parameters char* acstring void ns_convertutf8toutf1
6(const char*, pruint32) - source parameters char* acstring pruint32 alength void ns_convertutf8toutf1
6(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(con...
...ndwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print
64, print32) - source parameters print
64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source parameters double afloat beginreading prunichar* beginreading() const - source reading iterators nsreadingiterator<short unsigned int>& beginreading(nsreadingiterato...
NS ConvertUTF8toUTF16 external
methods constructors void ns_convertutf8toutf1
6_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertutf8toutf1
6_external(const char*, pruint32) - source parameters char* adata pruint32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source...
...@param aradix must be 10 or 1
6 parameters nsresult* aerrorcode pruint32 aradix ...
NS LossyConvertUTF16toASCII external
methods constructors void ns_lossyconvertutf1
6toascii_external(const nsastring&) - source parameters nsastring& astr void ns_lossyconvertutf1
6toascii_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_e...
...@param aradix must be 10 or 1
6 parameters nsresult* aerrorcode pruint32 aradix ...
Building a Thunderbird extension 6: Adding JavaScript
window.addeventlistener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); },
60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: " + datestring; } the first part registers a new event listener that will be executed automatically when thunderbird loads.
...this allows us to call the startup function repeatedly with an interval of
60000ms (every minute).
406 Not Acceptable - HTTP
the hypertext transfer protocol (http) 40
6 not acceptable client error response code indicates that the server cannot produce a response matching the list of acceptable values defined in the request's proactive content negotiation headers, and that the server is unwilling to supply a default representation.
... status 40
6 not acceptable specifications specification title rfc 7231, section
6.5.
6: 40
6 not acceptable hypertext transfer protocol (http/1.1): semantics and content ...
426 Upgrade Required - HTTP
the http 42
6 upgrade required client error response code indicates that the server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol.
... status 42
6 upgrade required examples http/1.1 42
6 upgrade required upgrade: http/2.0 connection: upgrade content-length: 53 content-type: text/plain this service requires use of the http/2.0 protocol specifications specification title rfc 7231, section
6.5.15: 42
6 upgrade required hypertext transfer protocol (http/1.1): semantics and content ...
506 Variant Also Negotiates - HTTP
the hypertext transfer protocol (http) 50
6 variant also negotiates response status code may be given in the context of transparent content negotiation (see rfc 2295).
... status 50
6 variant also negotiates specifications specification title rfc 2295, section 8.1: 50
6 variant also negotiates transparent content negotiation in http ...
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - september 22-29, 200
6 announcements bon echo 200
60921 nightly to recieve "major update" offer mike beltnzer announced that 'users running the bon echo 200
60921 nightly build will be offered the chance to upgrade to a "new version"' firefox start up performance boris zbarsky recently performed some profiling of firefox's start up - these are some of the details discussions problem handling dmg files on mac discussion about why sometimes dmg files are not mounted correctly after they are downloaded.
Index
6 creating a python xpcom component guide, needshelp, pyxpcom, xpcom, xpcom:language bindings creating applications with mozilla already provides a tutorial for making a simple javascript or c++ component (implementing the nsisimple interface).
... 1
6 components object dom, gecko, xpcom:language bindings, xpconnect the components object is the object through which xpconnect functionality is reflected into javascript.
... 2
6 components.manager xpcom:language bindings, xpconnect components.manager is a convenience reflection of the global native component manager service.
...And 317 more matches
Index - Archive of obsolete content
6 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer.
... 1
6 alternatingbackground xul attributes, xul reference no summary!
... 2
6 autoscroll xul attributes, xul reference no summary!
...And 308 more matches
Index
data described as pem is a base
64 encoded presentation of der, usually wrapped between human readable begin/end lines.
... nss prefers the binary presentation, but is often capable to use base
64 or ascii presentations, especially when importing data from files.
...
6 certificate functions nss the public functions listed here are used to interact with certificate databases.
...And 174 more matches
Index
6 gc rooting guide spidermonkey no summary!
... 1
6 jsapi user guide jsapi, spidermonkey this document explains how to embed spidermonkey, the mozilla javascript engine, in your c++ program.
... 2
6 js::autovectorrooter jsapi reference, reference, référence(2), spidermonkey js::autovectorrooter<t> holds a variable-size rooted array of type t.
...And 131 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
6 aria accessibility, glossary aria (accessible rich internet applications) is a w3c specification for adding semantics and other metadata to html to cater to users of assistive technology.
... 1
6 alignment container alignment container, css, glossary, alignment the alignment container is the rectangle that the alignment subject is aligned within.
... 22 arpanet glossary, infrastructure the arpanet (advanced research projects agency network) was an early computer network, constructed in 19
69 as a robust medium to transmit sensitive military data and to connect leading research groups throughout the united states.
...And 106 more matches
Key Values - Web APIs
gdk_key_hyper_l (0xffed) gdk_key_hyper_r (0xffee) qt::key_hyper_l (0x0100005
6) qt::key_hyper_r (0x01000057) "meta" [1] the meta key.
... vk_lwin (0x5b) vk_rwin (0x5c) kvk_command (0x37) kvk_rightcommand (0x3
6) gdk_key_meta_l (0xffe7) gdk_key_meta_r (0xffe8) qt::key_meta (0x01000022) keycode_meta_left (117) keycode_meta_right (118) "numlock" the numlock (number lock) key.
... vk_scroll (0x91) gdk_key_scroll_lock (0xff14) qt::key_scrolllock (0x0100002
6) keycode_scroll_lock (11
6) "shift" the shift key.
...And 105 more matches
StringView - Archive of obsolete content
script arraybuffer interface to create a highly extensible library that anyone can extend by adding methods to the object stringview.prototype to create a collection of methods for such string-like objects (since now: stringviews) which work strictly on arrays of numbers rather than on creating new immutable javascript strings to work with unicode encodings other than javascript's default utf-1
6 domstrings introduction as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data.
...noffset : 0, ntranscrtype = 15; if (sencoding) { this.encoding = sencoding.tostring(); } encswitch: switch (this.encoding) { case "utf-8": fputoutptcode = stringview.pututf8charcode; fgetoutptchrsize = stringview.getutf8charlength; ftaview = uint8array; break encswitch; case "utf-1
6": fputoutptcode = stringview.pututf1
6charcode; fgetoutptchrsize = stringview.getutf1
6charlength; ftaview = uint1
6array; break encswitch; case "utf-32": ftaview = uint32array; ntranscrtype &= 14; break encswitch; default: /* case "ascii", or case "binarystring" or unknown cases */ ftaview = uint8array; ntranscrtype &= 14; } t...
... vinput.bytelength >>> 2 : this.encoding === "utf-1
6" ?
...And 100 more matches
Mozilla internal string guide
introduction the string classes are a library of c++ classes which are used to manage buffers of wide (1
6-bit) and narrow (8-bit) character strings.
... the 8-bit and 1
6-bit string classes have completely separate base classes, but share the same apis.
... as a result, you cannot assign a 8-bit string to a 1
6-bit string without some kind of conversion helper class or routine.
...And 89 more matches
SVG documentation index - SVG: Scalable Vector Graphics
when svg documents are embedded within a parent html document using the tag:
6 namespaces crash course svg, xml as an xml dialect, svg is namespaced.
... 1
6 svg event attributes advanced, attribute, draft, landing, needsupdate, svg event attributes always have their name starting with "on" followed by the name of the event for which they are intended.
... 2
6 ascent deprecated, needsexample, svg, svg attribute the ascent attribute defines the maximum unaccented height of the font within the font coordinate system.
...And 72 more matches
HTTP Index - HTTP
6 data urls base
64, guide, http, intermediate, url data urls, urls prefixed with the data: scheme, allow content creators to embed small files inline in documents.
... 1
6 content security policy (csp) csp, content security policy, reference, security content security policy (csp) is an added layer of security that helps to detect and mitigate certain types of attacks, including cross site scripting (xss) and data injection attacks.
... 2
6 reason: cors preflight channel did not succeed cors, corspreflightdidnotsucceed, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting the cors request requires preflight, preflighting could not be performed.
...And 57 more matches
Index - Learn web development
6 test your skills: css and javascript accessibility accessibility, assessment, beginner, html, jaavscript, learn, test your skills this aim of this skill test is to assess whether you've understood our css and javascript accessibility best practices article.
... 1
6 how do i start to design my website?
... beginner, browser, css, codingscripting, dev tools, html, javascript, learn the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: 2
6 what are hyperlinks?
...And 54 more matches
Web video codec guide - Web media technologies
codec name (short) full codec name container support av1 aomedia video 1 mp4, webm avc (h.2
64) advanced video coding 3gp, mp4, webm h.2
63 h.2
63 video 3gp hevc (h.2
65) high efficiency video coding mp4 mp4v-es mpeg-4 video elemental stream 3gp, mp4 mpeg-1 mpeg-1 part 2 visual mpeg, quicktime mpeg-2 mpeg-2 part 2 visual mp4, mpeg, quicktime theora theora ogg vp8 video processor 8 3...
...motion picture film is typically 24 frames per second, while standard definition television is about 30 frames per second (slightly less, but close enough) and high definition television is between 24 and
60 frames per second.
... anything from 24 fps upward will generally be seen as satisfactorily smooth; 30 or
60 fps is an ideal target, depending on your needs.
...And 54 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
value browser description button-arrow-down firefox removed in firefox
64 button-arrow-next firefox removed in firefox
64 button-arrow-previous firefox removed in firefox
64 button-arrow-up firefox removed in firefox
64 button-focus firefox removed in firefox
64 dualbutton firefox removed in firefox
64 groupbox firefox removed in firefox
64 menuar...
...row firefox removed in firefox
64 menubar firefox removed in firefox
64 menucheckbox firefox removed in firefox
64 menuimage firefox removed in firefox
64 menuitem firefox removed in firefox
64.
... menuitemtext firefox removed in firefox
64 menupopup firefox removed in firefox
64 menuradio firefox removed in firefox
64 menuseparator firefox removed in firefox
64 meterchunk firefox removed in firefox
64.
...And 53 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
ref: bug
690370 available functions are (see prefcalls.js file for details): function getprefbranch() function pref(prefname, value) function defaultpref(prefname, value) function lockpref(prefname, value) function unlockpref(prefname) function getpref(prefname) function getldapattributes(host, base, filter, attribs) function getldapvalue(str, key) function displayerror(funcname, message) function getenv(...
...name) configure autoconfig two directives ask thunderbird to use autoconfig at startup: # cat /usr/lib/thunderbird/defaults/pref/tb-autoconf.js // 2010052
6 - modification autoconfig jehan.
...please see //(german) http://interop.blog.de/2010/02/13/kapitel-1-ldap-anfragen-linux-ad-80015
64/ //or search the net how to do it.
...And 46 more matches
MathML Accessibility in Mozilla
in bug 11752
69 and bug 1001
641, 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 11
63374.
...see webkit's bug 14
6454 fraction without bar, start.
...And 46 more matches
HTML documentation index - HTML: Hypertext Markup Language
6 date and time formats used in html date, element, format, html, iso 8
601, input, reference, string, time, week, datetime, datetime-local, del, ins, month, month-year, week-year certain html elements use date and/or time values.
... 1
6 dropzone deprecated, global attributes, html, reference the dropzone global attribute is an enumerated attribute indicating what types of content can be dropped on an element, using the html drag and drop api.
... 2
6 lang global attributes, html, reference the lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user.
...And 45 more matches
sslerr.html
ssl_error_no_cypher_overlap -1228
6 "cannot communicate securely with peer: no common encryption algorithm(s)." the local and remote systems share no cipher suites in common.
... -12278 (unused) ssl_error_wrong_certificate -12277 "client authentication failed: private key in key database does not correspond to public key in certificate database." ssl_error_bad_cert_domain -1227
6 "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_verifycertna...
... ssl_error_expired_cert_alert -122
69 "ssl peer rejected your certificate as expired." the remote system has received a certificate from the local system, and has determined that the certificate has expired.
...And 43 more matches
WebGL constants - Web APIs
triangle_fan 0x000
6 passed to drawelements or drawarrays to draw a connected group of triangles.
... dst_color 0x030
6 passed to blendfunc or blendfuncseparate to multiply a component by the destination's color.
... constant name value description func_add 0x800
6 passed to blendequation or blendequationseparate to set an addition blend function.
...And 43 more matches
NSS 3.52 release notes
notable changes in nss 3.52 bug 1
603
628 - update nss to support pkcs #11 v3.0.
... bug 1
623374 - support new pkcs #11 v3.0 message interface for aes-gcm and chachapoly.
... bug 1
612493 - integrate avx2 chacha20, poly1305, and chacha20poly1305 from hacl*.
...And 35 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
it also includes compatibility features which allow it to reasonably handle legacy content which was developed for earlier generations of browsers such as netscape navigator 4 as well as features which provide compatibility with internet explorer 5 and
6.
... user agent strings are defined in the http protocol and are available to web servers (see rfc 1945 - hypertext transfer protocol 1.0 and rfc 20
68 - hypertext transfer protocol 1.1).
... browser vendor is_nav, is_ie, is_opera, is_hotjava, is_webtv, is_tvnavigator, is_aoltv browser version number is_major (integer indicating major version number: 2, 3, 4 ...), is_minor (float indicating full version number: 2.02, 3.01, 4.04 ...) browser vendor and major version number is_nav2, is_nav3, is_nav4, is_nav4up, is_nav
6, is_nav
6up, is_gecko, is_ie3, is_ie4, is_ie4up, is_ie5, is_ie5up, is_ie5_5, is_ie5_5up, is_ie
6, is_ie
6up, is_hotjava3, is_hotjava3up, is_opera2, is_opera3, is_opera4, is_opera5, is_opera5up javascript version number is_js (float indicating full javascript version number: 1, 1.1, 1.2 ...) os platform and version is_win, is_win1
6, is_win32, is_win31, is_win95, is_winnt, is_w...
...And 34 more matches
Hacking Tips
(0x7fffef1231c0 @ 0) #1 (nil) typein:2 (0x7fffef1231c0 @ 24) #2 (nil) typein:3 (0x7fffef1231c0 @ 47) #3 (nil) typein:2 (0x7fffef1231c0 @ 24) #4 (nil) typein:3 (0x7fffef1231c0 @ 47) […] #25157 0x7fffefbbc250 typein:2 (0x7fffef1231c0 @ 24) #25158 0x7fffefbbc1c8 typein:3 (0x7fffef1231c0 @ 47) #25159 0x7fffefbbc140 typein:2 (0x7fffef1231c0 @ 24) #251
60 0x7fffefbbc0b8 typein:3 (0x7fffef1231c0 @ 47) #251
61 0x7fffefbbc030 typein:5 (0x7fffef123280 @ 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=0x14f2
640, argc=1, vp=0x7fffffff
6a88) at js/src/jsmath.cpp:338 338 callargs args = callargsfromvp(argc, vp); (gdb) enable unwinder .* spidermonkey (gdb) backtrace 10 #0 0x0000000000f89979 in js::math_cos(jscontext*, unsigned int, js::value*) (cx=0x14f2
640, argc=1, vp=0x7fffffff
6a88) at js/src/jsmath.cpp:338 #1 0x0000000000ca9c
6e in js::calljsnative(jscontext*, bool (*)(jscontext*, unsigned int, js::value*), j...
...s::callargs const&) (cx=0x14f2
640, native=0xf899
60 , args=...) at js/src/jscntxtinlines.h:235 #2 0x0000000000c87
625 in js::invoke(jscontext*, js::callargs const&, js::maybeconstruct) (cx=0x14f2
640, args=..., construct=js::no_construct) at js/src/vm/interpreter.cpp:47
6 #3 0x0000000000
69bdcf in js::jit::docallfallback(jscontext*, js::jit::baselineframe*, js::jit::iccall_fallback*, uint32_t, js::value*, js::mutablehandlevalue) (cx=0x14f2
640, frame=0x7fffffff
6ad8, stub_=0x1798838, argc=1, vp=0x7fffffff
6a88, res=jsval_void) at js/src/jit/baselineic.cpp:
6113 #4 0x00007ffff7f41395 in <<jitframe_exit>> () #5 0x00007ffff7f42223 in <<jitframe_baselinestub>> () #
6 0x00007ffff7f4423d in <<jitframe_baselinejs>> () #7 0x00007ffff7f4222e in <<jitframe_baselinestub>> () #8 0x00007ffff7f432
6a in <<ji...
...And 33 more matches
NSS_3.12_release_notes.html
t_invalid sec_error_ocsp_bad_signature sec_error_out_of_search_limits sec_error_invalid_policy_mapping sec_error_policy_validation_failed sec_error_unknown_aia_location_type sec_error_bad_http_response sec_error_bad_ldap_response sec_error_failed_to_encode_data sec_error_bad_info_access_location sec_error_libpkix_internal new mechanism flags (see secmod.h) public_mech_aes_flag public_mech_sha25
6_flag public_mech_sha512_flag public_mech_camellia_flag new oids (see secoidt.h) new ec signature oids sec_oid_ansix9
62_ecdsa_signature_recommended_digest sec_oid_ansix9
62_ecdsa_signature_specified_digest sec_oid_ansix9
62_ecdsa_sha224_signature sec_oid_ansix9
62_ecdsa_sha25
6_signature sec_oid_ansix9
62_ecdsa_sha384_signature sec_oid_ansix9
62_ecdsa_sha512_signature more id-ce and id-pe oids from...
... rfc 3280 sec_oid_x509_hold_instruction_code sec_oid_x509_delta_crl_indicator sec_oid_x509_issuing_distribution_point sec_oid_x509_cert_issuer sec_oid_x509_freshest_crl sec_oid_x509_inhibit_any_policy sec_oid_x509_subject_info_access camellia oids (rfc3
657) sec_oid_camellia_128_cbc sec_oid_camellia_192_cbc sec_oid_camellia_25
6_cbc pkcs 5 v2 oids sec_oid_pkcs5_pbkdf2 sec_oid_pkcs5_pbes2 sec_oid_pkcs5_pbmac1 sec_oid_hmac_sha1 sec_oid_hmac_sha224 sec_oid_hmac_sha25
6 sec_oid_hmac_sha384 sec_oid_hmac_sha512 sec_oid_pkix_timestamping sec_oid_pkix_ca_repository sec_oid_iso_sha1_with_rsa_signature changed oids (see secoidt.h) sec_oid_pkcs12_key_usage changed to sec_oid_bogus_key_usage sec_oid_ansix9
62_ecdsa_signature_with_sha1_digest changed to sec_oid_ansix9
62_ecdsa_sha1_signature note: s...
...ec_oid_ansix9
62_ecdsa_signature_with_sha1_digest is also kept for compatibility reasons.
...And 31 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" 0x000
6 "digit4" "digit4" 0x0007 "digit5" "digit5" 0x0008 "digit
6" "digit
6" 0x0009 "digit7" "digit7" 0x000a "digit8" "digit8" 0x000b "digit9" "digit9" 0x000c "minus" "minus" 0x000d "equal" "equal" 0x000e "backspace" "backspace" 0x000f "tab" "tab" 0x0010 ...
..."keyq" "keyq" 0x0011 "keyw" "keyw" 0x0012 "keye" "keye" 0x0013 "keyr" "keyr" 0x0014 "keyt" "keyt" 0x0015 "keyy" "keyy" 0x001
6 "keyu" "keyu" 0x0017 "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" 0x002
6 "keyl" "keyl" 0x0027 "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" 0x003
6 "shiftright" "shiftright" 0x0037 "numpadmultiply" "numpadmultiply" 0x0038 "altleft" "altleft" 0x...
...And 31 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 4
6, safari 8 maximum dimensions 2,147,483,
647×2,147,483,
647 pixels supported color modes color mode bits per component (d) description greyscale 1, 2, 4, 8, and 1
6 each pixel consists of a single d-bit value indicating the brightness of the greyscale pixel.
... true color 8 and 1
6 each pixel is represented by three d-bit values indicating the level of the red, green, and blue color components.
... greyscale with alpha 8 and 1
6 each pixel is represented by two d-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is.
...And 29 more matches
Reference - Archive of obsolete content
well if you combine the two, you can have inherited private variables: function myclass(){ var property = 5; this.tellme = function(){ return property; } } function myotherclass(){ myclass.apply( this ); } var o = new myotherclass; alert( o.tellme() ); //alerts 5 as you'd expect — the preceding comment was added by psygnisfive (talk – contribs) on 22:23, 4 december 200
6 terminology we need a terminology appendix.
...--nickolay 18:40, 1
6 july 200
6 (pdt) js 1.2 and gecko 1.8 per the fix for bug 255895, "javascript1.2" values for the script's language attribute no longer work, e.g.
...js 1.
6.
...And 28 more matches
Legacy layout methods - Learn web development
4,
6, or 12), and then fit your content columns inside these imaginary columns.
...add the following to the bottom of your css: div:nth-of-type(1) { width: 48%; } div:nth-of-type(2) { width: 48%; } here we've set both to be 48% of their parent's width — this totals 9
6%, leaving us 4% free to act as a gutter between the two columns, giving the content some space to breathe.
...we will create a 12 column grid — a very common choice that is seen to be very adaptable to different situations given that 12 is nicely divisible by
6, 4, 3, and 2.
...And 27 more matches
BluetoothCharacteristicProperties - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothcharacteristicproperties experimentalchrome full support 5
6notes full support 5
6notes notes chromeos and macos only.
... full support 5
6notes disabled notes linux and versions of windows earlier than 10.disabled from version 5
6: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... no support noie no support noopera full support yessafari no support nowebview android no support nochrome android full support 5
6firefox android no support noopera android full support yessafari ios no support nosamsung internet android full support
6.0authenticatedsignedwrites experimentalchrome full support ...
...And 27 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(1
6px 1
6px 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(175%) 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-f...
...head> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 1
61" 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/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="1
61px"/> </svg> </div> </td> <td><img alt="test_form_s.j...
...pg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.28
6 "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(187, 187, 187); border-collapse: collapse; border-spacing: 0; margin: 0 0 1.28
6em; height: 100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bo...
...And 27 more matches
NSS 3.54 release notes
introduction the nss team has released network security services (nss) 3.54 on 2
6 june 2020, which is a minor release.
...nss 3.54 requires nspr 4.2
6 or newer.
... notable changes in nss 3.54 support for tls 1.3 external pre-shared keys (bug 1
603042).
...And 26 more matches
Fullscreen API - Web APIs
alternate name uses the non-standard name: webkitisfullscreenedge full support ≤79 full support ≤79 full support ≤79alternate name alternate name uses the non-standard name: webkitisfullscreenfirefox full support
64 full support
64 no support 49 —
65disabled disabled from version 49 until version
65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true).
... no support 9 —
65alternate name alternate name uses the non-standard name: mozfullscreenie no support noopera full support 58 full support 58 full support 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 ...
...e name uses the non-standard name: webkitisfullscreenchrome android full support 71 full support 71 full support 18alternate name alternate name uses the non-standard name: webkitisfullscreenfirefox android full support
64 full support
64 no support 49 —
65disabled disabled from version 49 until version
65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true).
...And 25 more matches
The "codecs" parameter in common media types - Web media technologies
video/mp4; codecs="avc1.4d002a" an mpeg-4 file containing avc (h.2
64) video, main profile, level 4.2.
...some example av1 codec strings: av01.2.15m.10.0.100.09.1
6.09.0 av1 professional profile, level 5.3, main tier, 10 bits per color component, 4:2:2 chroma subsampling using itu-r bt.2100 color primaries, transfer characteristics, and ycbcr color matrix.
...for most codecs, the oti is a two-digit hexadecimal number; however, it's six hexadecimal digits for avc (h.2
64).
...And 25 more matches
Experimental features in Firefox
see bug 840
640 for more details.
...for more details on the status of this feature, see bug 1
639
607.
...see bug 1
617
600 for more details.
...And 24 more matches
MathML Torture Test
<option value="texgyretermes">tex gyre termes</option> <option value="xits">xits</option> </select> <br/> </p> <table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/45/d5a0dbbca3.png" width="38" height="22" alt="texbook, 1
6.2-1
6.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="17" alt="...
...texbook, 1
6.2-1
6.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/> </mmultiscripts> </mrow> </math> </td></tr> <tr> <td>3</td> <td><img src="https://udn.realityripple.com/samples/8a/1d0e
6e073c.png" width="58" height="47" alt="texbook, 17-17.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/a7/27acbeabcf.png" width="7
6" height="25" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mi>x</mi> <mo>+</mo> <msup> <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><...
...And 24 more matches
NSS tools : ssltap
the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 5
63 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
... 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 (0x27) sid-length = 0 (0x00) challenge-length = 1
6 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x...
...040080) ssl2/rsa/rc2cbc40/md5 (0x0
60040) ssl2/rsa/des
64cbc/md5 (0x0700c0) 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) ssl3/rsa-fips/des
64cbc/sha (0x000009) ssl3/rsa/des
64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x00000
6) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 1
6 03 00 03 e5 |.....
...And 24 more matches
nsIVariant
nsresult getasarray(out pruint1
6 type, out nsiid iid, out pruint32 count, out voidptr ptr); violates the xpcom interface guidelines astring getasastring(); native code only!
... nsresult getasid(out nsid retval); violates the xpcom interface guidelines print1
6 getasint1
6(); native code only!
... print
64 getasint
64(); native code only!
...And 24 more matches
Color picker tool - CSS: Cascading Style Sheets
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/5701/hue.png") center; background: -moz-linear-gradient(left, #f00 0%, #ff0 1
6.
66%, #0f0 33.33%, #0ff 50%, #00f
66.
66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 1
6.
66%, #0f0 33.33%, #0ff 50%, #00f
66.
66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 1
6.
66%, #0f0 33.33%, #0ff 50%, #00f
66.
66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 1
6.
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/5705/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: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px;...
...-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-picker .input[data-topic="alpha"] { margin-top: 10px; width: 93px; } .ui-color-picker .input[data-topic="alpha"] > .name { width:
60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin:
6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing:...
...And 24 more matches
NSS functions
function name/documentation source code nss versions cert_addcerttolisttail 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_certtimes...
...xr 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 cert_comparename mxr 3.2 and later cert_comparevaliditytimes mxr 3.11 and later cert_completecrldecodeentries mxr 3.
6 and later cert_convertanddecodecertificate mxr 3.9.3 and later cert_copyname mxr 3.4 and later cert_copyrdn mxr 3.5 and later cert_createava mxr 3.2.1 and later cert_createcertificate mxr 3.5 and later cert_createcertificaterequest 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_decodecertificatepoliciesextension mxr 3.2 and later cert_decodecertpackage mxr...
...And 23 more matches
NSS Tools ssltap
the following are well-known port numbers: http 80 https 443 smtp 25 ftp 21 imap 143 imaps 993 (imap over ssl) nntp 119 nntps 5
63 (nntp over ssl) examples you can use the ssl debugging tool to intercept any connection information.
... 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 (0x27) sid-length = 0 (0x00) challenge-length = 1
6 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2c...
...bc40/md5 (0x0
60040) ssl2/rsa/des
64cbc/md5 (0x0700c0) 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) ssl3/rsa-fips/des
64cbc/sha (0x000009) ssl3/rsa/des
64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x00000
6) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d30x2592 }}]<-- [sslrecord { 0: 1
6 03 00 03 e5 |.....
...And 23 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 4
6ie no support noopera full support yessafari no support nowebview android full support 43chrome android full support 43firefox android full support ...
... 4
6opera android full support yessafari ios no support nosamsung internet android full support 4.0accelerometer permissionchrome full support
62edge full support 79firefox ?
... safari no support nowebview android full support
62chrome android full support
62firefox android ?
...And 23 more matches
Tamarin build documentation - Archive of obsolete content
windows 32 and
64 bit mac osx 10.4, 10.5 on ppc mac osx 10.5, 10.
6 on intel linux 32 and
64 bit solaris 10 on sparc android 2.2 on arm windows mobile
6.5 mips (linux) sh4 (linux) getting the tamarin source the tamarin source resides in mercurial at tamarin central.
... $ 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 537817) has been fixed in the tamarin-redux repo.
... the work for that fix also included some changes to the configure.py default behavior to decouple the --target switch from sdk choice: there is a new switch, --mac-sdk, that selects the 10.4u, 10.5 or 10.
6 sdk.
...And 22 more matches
NSS tools : ssltab
the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 5
63 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...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 (0x27) sid-length = 0 (0x00) challenge-length = 1
6 (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 (0x0
60040) ssl2/rsa/des
64cbc/md5 (0x0700c0) 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) ssl3/rsa-fips/des
64cbc/sha (0x000009) ssl3/rsa/des
64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x00000
6) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 1
6 03 00 03 e5 |.....
...And 22 more matches
NSS tools : ssltap
the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 5
63 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...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 (0x27) sid-length = 0 (0x00) challenge-length = 1
6 (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 (0x0
60040) ssl2/rsa/des
64cbc/md5 (0x0700c0) 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) ssl3/rsa-fips/des
64cbc/sha (0x000009) ssl3/rsa/des
64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x00000
6) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 1
6 03 00 03 e5 |.....
...And 22 more matches
ctypes
method overview ctype arraytype(type[, length]); cdata cast(data, type); ctype functiontype(abi, returntype[, argtype1, ...]); cdata int
64(n); string libraryname(name); library open(libspec); ctype pointertype(typespec); ctype structtype(name[, fields]); cdata uint
64(n); properties property type description errno number the value of the latest system error.
... int1
6_t signed 1
6-bit integer.
... uint1
6_t unsigned 1
6-bit integer.
...And 22 more matches
Index - Firefox Developer Tools
6 dom inspector dom, dom:tools, dom_inspector, extensions, extensions:tools, themes, themes:tools, tools, web development, web development:tools, xul, xul:tools the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the document object model of documents - usually web pages or xul windows.
... 1
6 dom property viewer dom, tools, web development the dom property viewer lets you inspect the properties of the dom as an expandable tree structure, starting from the window object of the current page or the selected iframe.
... 2
6 tutorial: show allocations per call path debugger, tools, tutorial this page shows how to use the debugger api to show how many objects a web page allocates, sorted by the function call path that allocated them.
...And 21 more matches
Box-shadow generator - CSS: Cascading Style Sheets
pic="left" data-unit="px"></div> </div> <div id="transform_rotate" class="slidergroup"> <div class="ui-slider-name"> rotate </div> <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> <div class="ui-slider" data-topic="rotate" data-min="-3
60" data-max="3
60" data-step="1" data-value="0"> </div> <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> w...
...;"] position=[absolute] width height top left z-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.4
6%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width:
66.08%; } .span_7 { width: 57.
62%; } .span_
6 { width: 49.1
6%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width:
6.8
6%; } /* sections * ========================================================================== */ .section { ...
...clear: both; padding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .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 ie
6 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%; } /* slid...
...And 21 more matches
Index - HTTP
6 accept-ranges http, http header, range requests, reference, response header the accept-ranges response http header is a marker used by the server to advertise its support of partial requests.
... 1
6 allow entity header, http, http header, reference, header the allow header lists the set of methods support by a resource.
... 2
6 content-location http, reference, header the content-location header indicates an alternate location for the returned data.
...And 21 more matches
Web audio codec guide - Web media technologies
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 video track on the file, the file is typically referred to as an mp3 file, even though it's still an mpeg format file.
...for example, mp3 supports one lfe channel, while aac supports up to 1
6.
... aac (advanced audio coding) the advanced audio coding (aac) codec is defined as part of the mpeg-4 (h.2
64) standard; specifically, as part of mpeg-4 part 3 and mpeg-2 part 7.
...And 21 more matches
Implementation Status - Archive of obsolete content
3.2.2 linking attributes supported 3.2.3 single-node binding attributes supported 3.2.4 node-set binding attributes supported 3.2.5 model item property attributes partial in some cases a loop error can occur on valid bindings 3021
68; 3.3.1 model supported 3.3.2 instance partial instance element with two child element does not trigger exception 337302; 3.3.3 submission partial no support for @indent and complex schema validation 2787
61; 2787
62; 3.3.4 bind partial using ...
... 292333; 3.4 extension module unsupported 3007
60; 3.5 mustunderstand module unsupported 300757; 4.
... 278448; 33814
6; 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 20 more matches
Working with data
if the type is an array of 8-bit characters and value is a utf-1
6 string, the new cdata object is the result of converting the utf-1
6 string to utf-8, with a null terminator.
... // lets create an array of long's var my = ctypes.long.array()([1, 2, 3, 4]); my.tostring(); // this outputs to browser console: `"ctypes.long.array(4)([ctypes.int
64("1"), ctypes.int
64("2"), ctypes.int
64("3"), ctypes.int
64("4")])"` my.addressofelement(1).contents; // this outputs `int
64 { }` my.addressofelement(1).contents.tostring(); // outputs: `"2"` // now this is how to get the array of long's cast to array of int's var mycasted = ctypes.cast(my.address(), ctypes.int.array(my.length).ptr).contents; mycasted.tostring(); // this outputs to browser consol...
...this affects comparisons of pointers, integers that are the same size as pointers, and
64-bit integers.
...And 20 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
gomita-san won "most useful upgraded extension" award in mozilla's 200
6 "extend firefox" competition for scrapbook, and was runner-up in the "extend firefox 2" contest for firegestures.
...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>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</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.
...orldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" oncommand="window.opendialog('chrome://helloworld/content/clock.xul','clock','chrome,centerscreen,modal');"/> </menupopup> </overlay> phase 2: adding a function to display the time in phase 2, we will make it so that selecting the hello world menu item we created in phase 1 will display a window with the time (figure
6).
...And 19 more matches
NSS 3.55 release notes
see bug 1
649
633 for more details.
...see bug 1
647752 for details.
...if this affects you, please help us narrow down the cause in bug 1
653975.
...And 19 more matches
Python binding for NSS
python-nss is currently available in: fedora rhel
6 the principal developer of python-nss is john dennis jdennis@redhat.com.
...`pip wheel -w dist .` the following constants were added: ssl.tls_aes_128_gcm_sha25
6 ssl.tls_aes_25
6_gcm_sha384 ssl.tls_chacha20_poly1305_sha25
6 release 1.0.0 release date 201
6-09-01 scm tag pynss_release_1_0_0 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_0/src/ change log official 1.0.0 release, only minor tweaks from the 1.0.
... the following module functions were added: nss.get_all_tokens the following constants were added: ssl.tls_ecdhe_rsa_with_chacha20_poly1305_sha25
6 ssl.tls_ecdhe_ecdsa_with_chacha20_poly1305_sha25
6 ssl.tls_dhe_rsa_with_chacha20_poly1305_sha25
6 ssl.tls_ecdhe_psk_with_chacha20_poly1305_sha25
6 ssl.tls_dhe_psk_with_chacha20_poly1305_sha25
6 release 1.0.0beta1 release date 201
6-02-1
6 scm tag pynss_release_1_0_0beta1 source download https://ftp.mozilla.org...
...And 19 more matches
Bytecode Descriptions
jsop::zero, jsop::one, jsop::int8, jsop::uint1
6, and jsop::uint24 are all compact encodings for jsop::int32.
... uint1
6 operands: (uint1
6_t val) stack: ⇒ val push the uint1
6_t immediate operand as an int32value.
... double operands: (double val) stack: ⇒ val push the
64-bit floating-point immediate operand as a doublevalue.
...And 19 more matches
nsIAccessibleRole
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) constants constant value description role_nothing 0 used when accessible has no strong defined role.
... role_cursor
6 represents the system mouse pointer.
... role_pane 1
6 represents a pane within a frame or document window.
...And 19 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/dacdd
63e77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/07/1fcc357205.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd37c1d
691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border5"/>...
... <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border
6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" ...
... class="css-property"> <span class="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.4
6%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width:
66.08%; } .span_7 { width: 57.
62%; } .span_
6 { width: 49.1
6%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width:
6.8
6%; } /* sections * ========================================================================== */ .section { ...
...And 19 more matches
Mozilla’s UAAG evaluation report
longdesc for frame: not supported, see bug 3
658 noframe for frame: must use user style sheets to render this.
...(p1) na this relates to multimedia players 2.
6 respect synchronization cues.
... longdesc for frame: not supported, see bug 3
658 noframe for frame: must use user style sheets to render this.
...And 18 more matches
JSAPI reference
e 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 javascript 1.9.1 js_setthreadstacklimit obsolete since jsapi 13 js_setscriptstackquota obsolete since javascript 1.8.
6 js_setoptions obsolete since jsapi 27 js_getoptions obsolete since jsapi 27 js_toggleoptions obsolete since jsapi 27 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 ...
...5 js_getglobalobject obsolete since jsapi 24 js_setglobalobject obsolete since jsapi 25 js_initclass js_initstandardclasses js_resolvestandardclass js_enumeratestandardclasses js_enumerateresolvedstandardclasses obsolete since jsapi 24 js_isrunning js_saveframechain js_restoreframechain js_isassigning obsolete since javascript 1.8.5 js_isconstructing obsolete since jsapi 2
6 js_isconstructing_possiblywithgiventhisobject obsolete since jsapi 17 js_getscopechain obsolete since javascript 1.8.7 compartments: class jsautocompartment added in spidermonkey 24 js_newglobalobject added in spidermonkey 17 js_entercompartment added in spidermonkey 24 js_leavecompartment added in spidermonkey 24 js_getcompartmentprivate added in spidermonkey 1.8.5 js_setcompartment...
...private added in spidermonkey 1.8.5 js_getglobalforcompartmentornull added in spidermonkey 17 js_iteratecompartments added in spidermonkey 17 js_setdestroycompartmentcallback added in spidermonkey 17 js_setcompartmentnamecallback added in spidermonkey 17 js_newcompartmentandglobalobject added in spidermonkey 1.8.1 obsolete since jsapi 1
6 js_entercrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 js_leavecrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 locale callbacks: struct jslocalecallbacks js_getlocalecallbacks js_setlocalecallbacks locale callback types: jslocaletouppercase jslocaletolowercase jslocalecompare jslocaletounicode scripts just running some javascript code is straightforward: class js::compileoptio...
...And 18 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
.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("images/hue_mask.png"); background: -moz-linear-gradient(left, #f00 0%, #ff0 1
6.
66%, #0f0 33.33%, #0ff 50%, #00f
66.
66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 1
6.
66%, #0f0 33.33%, #0ff 50%, #00f
66.
66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 1
6.
66%, #0f0 33.33%, #0ff 50%, #00f
66.
66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 1
6.
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; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: cent...
...-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-picker .input[data-topic="alpha"] { margin-top: 10px; width: 93px; } .ui-color-picker .input[data-topic="alpha"] > .name { width:
60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin:
6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing:...
...And 17 more matches
ui/button/toggle - Archive of obsolete content
usage creating buttons to create a button you must give it an id, an icon, and a label: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "1
6": "./firefox-1
6.png", "32": "./firefox-32.png" }, onchange: function(state) { console.log(state.label + " checked state: " + state.checked); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel: badged buttons new in firefox 3
6.
...by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-1
6.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
...you can also add, or change, the listener afterwards: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "1
6": "./firefox-1
6.png", "32": "./firefox-32.png" }, onclick: firstclick, onchange: firstchange }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } function first...
...And 16 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 200
6–2007, mozilla started work on an experimental 3d canvas implementation.
... ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ctx.moveto(50, 50); now add the following lines at the bottom of your script: ctx.lineto(150, 50); let triheight = 50 * math.tan(degtorad(
60)); ctx.lineto(100, 50+triheight); ctx.lineto(50, 50); ctx.fill(); let's run through this in order: first we draw a line across to (150, 50) — our path now goes 100 pixels to the right along the x axis.
...the angles in an equalateral triangle are always
60 degrees; to work out the height we can split it down the middle into two right-angled triangles, which will each have angles of 90 degrees,
60 degrees, and 30 degrees.
...And 16 more matches
nsINavBookmarksService
1.0
67 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.
...eatecontainer in gecko 1.9 obsolete since gecko 13.0 long long createfolder(in long long aparentfolder, in autf8string name, in long index); void endupdatebatch(); obsolete since gecko 1.9 void exportbookmarkshtml(in nsifile file); obsolete since gecko 1.9 nsiuri getbookmarkedurifor(in nsiuri auri); void getbookmarkfolderstarray(in nsiuri auri, in print
64array aresult); native code only!
... obsolete since gecko 1.9 void getbookmarkidsforuri(in nsiuri auri, [optional] out unsigned long count, [array, retval, size_is(count)] out long long bookmarks); note: renamed from getbookmarkfolders in gecko 1.9 void getbookmarkidsforuritarray(in nsiuri auri, in print
64array aresult); native code only!
...And 16 more matches
nsIWebBrowserPersist
inherits from: nsicancelable last changed in gecko 3
6.0 (firefox 3
6.0 / thunderbird 3
6.0 / seamonkey 2.33) implemented by: @mozilla.org/embedding/browser/nswebbrowser;1 and @mozilla.org/embedding/browser/nswebbrowserpersist;1.
... persist_flags_no_conversion 1
6 do not run the incoming data through a content converter for example to decompress it.
... persist_flags_replace_existing_files 32 replace existing files on the disk (use with due diligence!) persist_flags_no_base_tag_modifications
64 don't modify or add base tags.
...And 16 more matches
Accessibility documentation index - Accessibility
6 aria guides aria accessible rich internet applications (aria) defines ways to make the web more accessible to people with disabilities.
...the alert role is most useful for information that requires the user's immediate attention, for example: 1
6 using the alertdialog role aria, accessibility, codingscripting, html, needscontent, role(2), web development, agent, alertdialog, alerts, modal, user, useragent the alertdialog role is used to notify the user of urgent information that demands the user's immediate attention.
... 2
6 using the aria-valuemax attribute aria, accessibility the aria-valuemax attribute is used to define the maximum value allowed for a range widget such as a slider, spinbutton or progressbar.
...And 16 more matches
ui/button/action - Archive of obsolete content
usage creating buttons to create a button you must give it an id, an icon, and a label: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "1
6": "./firefox-1
6.png", "32": "./firefox-32.png" }, onclick: function(state) { console.log("button '" + state.label + "' was clicked"); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel using the toolbar customization feature: badged buttons new in firefox 3
6.
...by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-1
6.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
...you can also add, or change, the listener afterwards: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "1
6": "./firefox-1
6.png", "32": "./firefox-32.png" }, onclick: firstclick }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } the listener is passed a state object tha...
...And 15 more matches
Gecko Compatibility Handbook - Archive of obsolete content
the benefit of using these browsers is that if you're only detecting netscape or netscape
6 you'll see the issues right away.
... problem: site supports standards but does not look right try picking the internet explorer
6 user-agent string.
... if this works, set up your detection to serve ie
6 content to visitors with gecko in their user-agent strings.
...And 15 more matches
Error codes returned by Mozilla APIs
ns_error_factory_not_loaded (0x800401f8) ns_error_factory_exists (0xc1f30100) ns_error_factory_no_signature_support (0xc1f30101) ns_error_proxy_invalid_in_parameter (0x80010010) ns_error_proxy_invalid_out_parameter (0x80010011) ns_error_cannot_convert_data (0x804
60001) ns_error_object_is_immutable (0x804
60002) ns_error_loss_of_significant_data (0x804
60003) ns_error_illegal_during_shutdown (0x804
6001e) many operations cannot be performed once the application is being shutdown.
... ns_error_file_target_does_not_exist (0x8052000
6) an attempt was made to reference a file that does not exist for copy/move, checking its size, etc.
... ns_base_stream_illegal_args (0x80470004) ns_base_stream_no_converter (0x80470005) ns_base_stream_bad_conversion (0x8047000
6) this error occurs when the component nsistringbundleservice has been set with a badly encoded property file.
...And 15 more matches
Mozilla Quirks Mode Behavior
add padding if the very first node in an li is another ul or ol (bug 98
63
6).
...removed in firefox 50 (bug
648331).
... collapse the bottom or top margins of empty elements (bug 973
61).
...And 15 more matches
nsIAnnotationService
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: "@mozilla.org/browser/annotation-service;1".
...8string aname, in astring avalue, in long aflags, in unsigned short aexpiration); void setpageannotationint32(in nsiuri auri, in autf8string aname, in long avalue, in long aflags, in unsigned short aexpiration); void setitemannotationint32(in long long aitemid, in autf8string aname, in long avalue, in long aflags, in unsigned short aexpiration); void setpageannotationint
64(in nsiuri auri, in autf8string aname, in long long avalue, in long aflags, in unsigned short aexpiration); void setitemannotationint
64(in long long aitemid, in autf8string aname, in long long avalue, in long aflags, in unsigned short aexpiration); void setpageannotationdouble(in nsiuri auri, in autf8string aname, in double avalue, in long aflags, in unsigned short aexpiration);...
...long aitemid, in autf8string aname); astring getpageannotationstring(in nsiuri auri, in autf8string aname); astring getitemannotationstring(in long long aitemid, in autf8string aname); long getpageannotationint32(in nsiuri auri, in autf8string aname); long getitemannotationint32(in long long aitemid, in autf8string aname); long long getpageannotationint
64(in nsiuri auri, in autf8string aname); long long getitemannotationint
64(in long long aitemid, in autf8string aname); double getpageannotationdouble(in nsiuri auri, in autf8string aname); double getitemannotationdouble(in long long aitemid, in autf8string aname); void getpageannotationbinary(in nsiuri auri, in autf8string aname,[array, size_is(adatalen)] out oc...
...And 15 more matches
Codecs used by WebRTC - Web media technologies
however, rfc 7742 specifies that all webrtc-compatible browsers must support vp8 and h.2
64's constrained baseline profile for video, and rfc 7874 specifies that browsers must support at least the opus codec as well as g.711's pcma and pcmu formats.
... sdp supports a codec-independent way to specify preferred video resolutions (rfc
623
6.
... mandatory video codecs codec name profile(s) browser compatibility vp8 — chrome, edge, firefox, safari (12.1+) avc / h.2
64 constrained baseline (cb) chrome (52+), edge, firefox[1], safari [1] firefox for android
68 and later do not support avc (h.2
64) anymore.
...And 15 more matches
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
for example, netscape
6.0 and
6.01 do not write any of these keys into the registry, and thus these keys are not available for plugin vendors to parse for these two browsers.
... netscape
6.1 and onwards, however, will write these keys, and so creating a plugin installer that puts the shared object (dll) in the right place becomes much easier, since the relevant meta-information is present in the win32 system registry.
... these keys are written by the installer of mozilla browsers -- the netscape
6.2 installer, for example, writes these keys to the registry, and so does the mozilla installer (for versions after mozilla 0.9.1).
...And 14 more matches
reftest opportunities files - Archive of obsolete content
etest http://dbaron.org/css/test/lenunit http://dbaron.org/css/test/implied http://dbaron.org/css/test/formelem http://dbaron.org/css/test/sec010303 http://dbaron.org/css/test/sec0302 http://dbaron.org/css/test/sec0302_xml http://dbaron.org/css/test/parsing http://dbaron.org/css/test/parsing2 http://dbaron.org/css/test/parsing4 http://dbaron.org/css/test/parsing5 http://dbaron.org/css/test/parsing
6 http://dbaron.org/css/test/sec040102 http://dbaron.org/css/test/casesens http://dbaron.org/css/test/xmltypesel http://dbaron.org/css/test/unitless http://dbaron.org/css/test/exunit http://dbaron.org/css/test/emunit http://dbaron.org/css/test/sec040310 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/univsel http://dbaron.org/css/test/chi...
...est/attrsel http://dbaron.org/css/test/twoclass http://dbaron.org/css/test/xmlid http://dbaron.org/css/test/pseudos http://dbaron.org/css/test/pseudos2 http://dbaron.org/css/test/pseudos3 http://dbaron.org/css/test/firstchild http://dbaron.org/css/test/sec051103 http://dbaron.org/css/test/sec051103b http://dbaron.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec0
60402 http://dbaron.org/css/test/sec0
60403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1 http://dbaron.org/css/test/noncss2 http://dbaron.org/css/test/shortbox http://dbaron.org/css/test/shortbox2 http://dbaron.org/css/test/rootbox http://dbaron.org/css/test/listbox http://dbaron.org/css/test/margtest http://dbaron.org/css/test/shortborder http://dbaron.org/css/test/shortb...
...c 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://dbaron.org/css/test/sec100304 http://dbaron.org/css/test/sec100305 http://dbaron.org/css/test/sec100307 http://dbaron.org/css/test/sec1004 http://dbaron.org/css/test/sec1004b http://dbaron.org/css/test/sec100
604 http://dbaron.org/css/test/sec1007 http://dbaron.org/css/test/sec1007b 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/sec...
...And 14 more matches
Index - Game development
6 introduction to game development for the web firefox os, games, guide, mobile no summary!
... 1
6 building up a basic demo with a-frame 3d, a-frame, vr, virtual reality, web, webgl the webxr and webgl apis already enable us to start creating virtual reality (vr) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier.
... 2
6 audio for web games audio, games, web audio api, audio sprites, spatialization, syncing tracks audio is an important part of any game; it adds feedback and atmosphere.
...And 14 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, 1
6, 17, 18, 19, 20, 21, 22, 23, 24, 25, 2
6, 27, 28, 29, 30, 31, 32, 33, 34, 35, 3
6, 37, 38, 39, 40, 41, 42, 43, 44, 45, 4
6, 47, 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, 1
6, 17, 18, 19, 20, 21, 22, 23, 24, 25, 2
6, 27, 28, 29, 30, 31, 32, 33, 34, 35, 3
6, 37, 38, 39, 40, 41, 42, 43, 44, 45, 4
6, 47, 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, 1
6, 17, 18, 19, 20, 21, 22, 23, 24, 25, 2
6, 27, 28, 29, 30, 31, 32, 33, 34, 35, 3
6, 37, 38, 39, 40, 41, 42, 43, 44, 45, 4
6, 47, 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, 1
61, 171, 181, 191, 201, 221, 231, ...
...241, 251, 2
61, 271, 281, 291, … everything else: 2, 3, 4, 5,
6, 7, 8, 9, 11, 12, 13, 14, 15, 1
6, 17, 18, 19, 22, 23, 24, 25, 2
6, 27, 28, 29, 32, 33, 34, 35, 3
6, 37, 38, 39, 42, 43, 44, 45, 4
6, 47, 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, 1
6, 17, 18, 19 everything else: 0, 20, 21, 22, 23, 24, 25, 2
6, 27, 28, 29, 30, 31, 32, 33, 34, 35, 3
6, 37, 38, 39, 40, 41, 42, 43, 44, 45, 4
6, 47, 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, 1
6, 17, 18, 19, 101, 102, 103, 104, 105, 10
6, 107, 108, 109, 110, 111, 112, 113, 114, 115, 11
6, 117, 118...
...And 14 more matches
Mozilla MathML Status
see bug 5349
62.
...mathml is always enabled since bug
6607
62.
... attributes shared by all mathml elements see § 2.1.
6 and § 3.1.10.
...And 14 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="5
6" y="30" font-size="12px" font-family="consolas,...
...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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="20
6" 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.
... idbdatabase.version read only a
64-bit integer that contains the version of the connected database.
...And 14 more matches
DataView - JavaScript
var littleendian = (function() { var buffer = new arraybuffer(2); new dataview(buffer).setint1
6(0, 25
6, true /* littleendian */); // int1
6array uses the platform's endianness.
... return new int1
6array(buffer)[0] === 25
6; })(); console.log(littleendian); // true or false
64-bit integer values because javascript does not currently include standard support for
64-bit integer values, dataview does not offer native
64-bit operations.
... as a workaround, you could implement your own getuint
64() function to obtain a value with precision up to number.max_safe_integer, which could suffice for certain cases.
...And 14 more matches
Localizing with Koala
version: 3.
6.
... note that you don't have to edit the location field, it automatically fills in when you check the "mercurial" checkbox: "c:\mozilla\l10n\application\firefox\3.
6".
...the easy way involves opening the console and issuing 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 158
63
6 changes to 50
664 files (+9 heads) updating working directory 40357 files updated, 0 files merged, 0 files removed, 0 files unresolved configure the locale locale id: x-testing (put your ...
...And 13 more matches
NSS tools : certutil
the minimum is 512 bits and the maximum is 1
6384 bits.
... elliptic curve name is one of the ones from suite b: nistp25
6, nistp384, nistp521 if nss has been compiled with support curves outside of suite b: sect1
63k1, nistk1
63, sect1
63r1, sect1
63r2, nistb1
63, sect193r1, sect193r2, sect233k1, nistk233, sect233r1, nistb233, sect239k1, sect283k1, nistk283, sect283r1, nistb283, sect409k1, nistk409, sect409r1, nistb409, sect571k1, nistk571, sect571r1, nistb571, secp1
60k1, secp1
60r1, se...
...cp1
60r2, secp192k1, secp192r1, nistp192, secp224k1, secp224r1, nistp224, secp25
6k1, secp25
6r1, secp384r1, secp521r1, prime192v1, prime192v2, prime192v3, prime239v1, prime239v2, prime239v3, c2pnb1
63v1, c2pnb1
63v2, c2pnb1
63v3, c2pnb17
6v1, c2tnb191v1, c2tnb191v2, c2tnb191v3, c2pnb208w1, c2tnb239v1, c2tnb239v2, c2tnb239v3, c2pnb272w1, c2pnb304w1, c2tnb359w1, c2pnb3
68w1, 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.
...And 13 more matches
Web Console remoting - Firefox Developer Tools
this is no longer the case: we have made changes to allow the web console client to reuse the tabnavigated notification (bug 7920
62).
... ], }, } the response packet is a network event actor grip: { "to": "conn0.console9", "eventactor": { "actor": "conn0.netevent14", "starteddatetime": "2013-08-2
6t19:50:03.
699z", "url": "http://localhost", "method": "get" "isxhr": true, "private": false } } you can also use the webconsoleclient.sendhttprequest(request, onresponse) method.
... 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": 1347294508210, "error": false, "warning": false, "exception": true, "strict": false, "private": false, } } the packet is similar to nsiscripterror - for simplicity.
...And 13 more matches
IDBObjectStore - Web APIs
iossamsung internetidbobjectstorechrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
...with the vendor prefix: webkitaddchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
...endor prefix: webkitautoincrementchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
...And 13 more matches
Rendering and the WebXR frame animation callback - Web APIs
historically, displays have refreshed
60 times per second.
... this is due to early displays using the ac electrical grid's current flow waveform, which cycles
60 times per second in the united states (50 in europe), for timing purposes.
...a display that refreshes
60 times per second has a
60 hz refresh rate.
...And 13 more matches
<color> - CSS: Cascading Style Sheets
there are a few caveats to consider when using color keywords: html only recognizes the 1
6 basic color keywords found in css1, using a specific algorithm to convert unrecognized values (often to completely different colors).
... note: the list of accepted keywords has undergone many changes during the evolution of css: css level 1 only included 1
6 basic colors, called the vga colors as they were taken from the set of displayable colors on vga graphics cards.
... antiquewhite #faebd7 aquamarine #7fffd4 azure #f0ffff beige #f5f5dc bisque #ffe4c4 blanchedalmond #ffebcd blueviolet #8a2be2 brown #a52a2a burlywood #deb887 cadetblue #5f9ea0 chartreuse #7fff00 chocolate #d2
691e coral #ff7f50 cornflowerblue #
6495ed cornsilk #fff8dc crimson #dc143c cyan (synonym of aqua) #00ffff darkblue #00008b darkcyan #008b8b darkgoldenrod #b88
60b darkgray #a9a9a9 darkgreen #00
6400 darkgrey #a9a9a9 ...
...And 13 more matches
Making content editable - Developer guides
note: in firefox
63 beta/dev edition, some of the rich-text editing features have been disabled by default, for better cross-browser compatibility.
...see bug 14495
64 and firefox-specific html editing ui has been deprecated for additional details.
...as of firefox
60, firefox will be updated to wrap the separate lines in <div> elements, matching the behavior of chrome, modern opera, edge, and safari.
...And 13 more matches
JavaScript modules - JavaScript
browser support use of native javascript modules is dependent on the import and export statements; these are supported in browsers as follows: import desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsimportchrome full support
61edge full support 1
6 full support 1
6 full support 15disabled disabled from version 15: this feature is behind the experimental javascript features preference.firefox full support
60 full support ...
...
60 no support 54 —
60disabled disabled from version 54 until version
60 (exclusive): this feature is behind the dom.modulescripts.enabled preference.
... to change preferences in firefox, visit about:config.ie no support noopera full support 48safari full support 10.1webview android full support
61chrome android full support
61firefox android full support
60 full support
60 no support 54 —
60disabled disabled from version 54 until version
60 (exclusive): this feature is behind the dom.modulescripts.enabled preference.
...And 13 more matches
Media container formats (file types) - Web media technologies
codec name (short) full codec name browser compatibility1 3gp third generation partnership firefox for android adts audio data transport stream firefox2 flac free lossless audio codec chrome 5
6, edge 1
6, 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 173 (desktop only), internet explorer 9, opera 10.50 quicktime (mov) apple quicktime movie only olde...
...r versions of safari, plus other browsers that supported apple's quicktime plugin webm web media chrome
6, edge 173 (desktop only), firefox 4, opera 10.
6, safari (webrtc only) [1] unless otherwise specified, both mobile and desktop browser compatibility is implied if a browser is listed here.
... video codecs supported by 3gp codec browser support chrome edge firefox safari avc (h.2
64) yes1,2 h.2
63 yes1 mpeg-4 part 2 (mp4v-es) yes1 vp8 yes1 [1] firefox only supports 3gp on openmax-based devices, which currently means the boot to gecko (b2g) platform.
...And 13 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d27cdb
6e-ae
6d-11cf-9
6b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="3
66" 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 objec...
...here is an example of this usage, once again for the macromedia flash plugin: <object type="application/x-shockwave-flash" data="javascript-to-flash.swf" width="3
66" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <p>you need flash -- get the latest version from <a href= "http://www.macromedia.com/downloads/">here.</a></p> </object> in the above example, application/x-shockwave-flash is the flash mime type, and will invok...
...this feature is discussed in mozilla bug 1
67
601.
...And 12 more matches
Windows Media in Netscape - Archive of obsolete content
netscape 7.1 will work with both the windows media player
6.4 activex control as well as versions 7 through 9.
...the windows media 9 series sdk documentation for netscape browsers says that versions of netscape (including
6.2 and 7.0) support the embedding of the windows media player control using a java applet.
...furthermore, you know for certain that you are working with the windows media 7 or 9 control -- there is no comparable instantiation for the windows media player
6 control.
...And 12 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: a45743
65938222adca0a
6bd33329cb32).
...it is much faster than spidermonkey 1.8, implements es-5 (ecma 2
62, 5th edition), and contains many new language and api features, described in detail below.
...it is supported only on x8
6, x8
6_
64 and arm architectures.
...And 12 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: a45743
65938222adca0a
6bd33329cb32).
...it is much faster than spidermonkey 1.8, implements es-5 (ecma 2
62, 5th edition), and contains many new language and api features, described in detail below.
...the jit is supported only on x8
6, x8
6_
64 and arm architectures.
...And 12 more matches
BasicCardResponse - Web APIs
var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'], supportedtypes: ['credit', 'debit'] } }]; var details = { total: {label: 'donation', amount: {currency: 'usd', value: '
65.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '
65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbasiccardresponsechrome no support noedge no support ≤18 — 79firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: 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 comma-delineated list of one or more 2-character iso country codes indic...
... webview android no support nochrome android full support 57firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: 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 comma-delineated list of one or more 2-character iso country codes indic...
...And 12 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="5
6" y="30" font-size="12px" font-family="consolas,...
...iossamsung internetidbtransactionchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
...prefix: webkitabortchrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
...And 12 more matches
Using CSS transforms - CSS: Cascading Style Sheets
<img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/
6d/
6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis.
... <img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/
6d/
6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex.
...th><code>perspective: 350px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers250"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers350"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> ...
...And 12 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-0
6-07 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] 1977-04-01t14:00:30 30 seconds after 2:00 pm on april 1, 1977 [details] 1901-01-01t00:00z midnight utc on january 1, 1901 [details] 1901-01-01t00:00:01-04:00 1 sec...
...html uses a variation of the iso 8
601 standard for its date and time strings.
... it's worth reviewing the descriptions of the formats you're using in order to ensure that your strings are in fact compatible with html, as the html specification includes algorithms for parsing these strings that is actually more precise than iso 8
601, so there can be subtle differences in how date and time strings are expected to look.
...And 12 more matches
SVG and CSS - SVG: Scalable Vector Graphics
copy and paste the content from here, making sure that you scroll to get all of it: <svg width="
600px" height="
600px" viewbox="-300 -300
600
600" xmlns="http://www.w3.org/2000/svg" xmlns: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-st...
... <text id="heading" x="-280" y="-270">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="segment-edge" d="m0,-200 a40,40 0 0,0 -
62,10"/> </g> <g class="segment" transform="rotate(18)"> <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(3
6)"> <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(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"/> </g> <g cl...
...And 12 more matches
Install Manifests - Archive of obsolete content
examples <em:targetapplication> <description> <em:id>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</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.
... 2 extensions 4 themes 8 locale 32 multiple item package
64 spell check dictionary 128 telemetry experiment 25
6 webextension experiment examples <em:type>2</em:type> this property was added for firefox 1.5, and is only required for add-on types other than extensions and themes.
... firefox 2 and previous supported a value of 1
6 to represent plug-ins.
...And 11 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>qwz5
671</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>...
... </size> </catalog_item> <catalog_item gender="women's"> <item_number>rrx985
6</item_number> <discount_until>dec 25, 1995</discount_until> <price>42.50</price> <size description="medium"> <color_swatch image="black_cardigan.jpg">black</color_swatch> </size> </catalog_item> </product> <script type="text/javascript"><![cdata[function matchwo(a,b) { if (a < b && a < 0) { return 1; } else { return 0; } }]]></script> </catalog> first, create a dom tree like the previous example as described in the how to create a dom tree article.
... with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue": "qwz5
671" }, "price": { "keyvalue": 39.95 }, "size": [{ "color_swatch": [{ "keyvalue": "red", "keyattributes": { "image": "red_cardigan.jpg" } }, { "keyvalue": "burgundy", "keyattributes": { "image": "burgundy_cardigan.jpg" } }], "keyvalue":...
...And 11 more matches
New in JavaScript - Archive of obsolete content
ecmascript 5 support implementation status for the current standard ecma-2
62 edition 5.1 in mozilla-based engines and products.
... ecmascript 2015 support implementation status for the draft ecma-2
62 edition
6 (es2015) in mozilla-based engines and products.
... ecmascript next support implementation status for upcoming ecma-2
62 features as per the yearly (es201
6/es2017/es2018/...) release schedule in mozilla-based engines and products.
...And 11 more matches
Index
found
689 pages: # page tags and summary 1 add-ons add-ons, extension, extensions, landing, mozilla add-ons allow developers to extend and modify the functionality of firefox.
...
675 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.
...
67
6 index add-ons, glossary, guide, index found
689 pages:
677 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.
...And 11 more matches
Performance best practices for Firefox front-end engineers
as of bug 135320
6, you can also schedule idle events in non-dom contexts by using services.tm.idledispatchtomainthread.
... to achieve a
60 fps frame rate, all of the above has to happen in 1
6 milliseconds or less, every frame.
...normally, the changes to the dom just result in the standard style calculation occurring immediately after the javascript has finished running during the 1
6ms window, inside the "style" step.
...And 11 more matches
NSS 3.12.4 release notes
obsolete code for win1
6 has been removed.
... bug 321755: implement crldistributionpoint extension in libpkix bug 391434: avoid multiple encoding/decoding of pkix_pl_oid to and from ascii string bug 405297: problems building nss/lib/ckfw/capi/ with mingw gcc bug 420991: libpkix returns wrong nss error code bug 427135: add super-h (sh3,4) architecture support bug 431958: improve des and sha512 for x8
6_
64 platform bug 433791: win1
6 support should be deleted from nss bug 449332: secu_parsecommandline does not validate its inputs bug 453735: when using cert9 (sqlite3) db, set or change master password fails bug 4
63544: warning: passing enum* for an int* argument in pkix_validate.c bug 4
69588: coverity errors reported for softoken bug 470055: pkix_httpcertstore_findsocketconnection reuses closed s...
...bug 470500: firefox 3.1b2 crash report [[@ nssutil3.dll@0x34c0 ] bug 482742: enable building util independently of the rest of nss bug 483
653: unable to build certutil.exe for fennec/wince bug 485145: miscellaneous crashes in signtool on windows bug 485155: nss_enable_pkix_verify=1 causes sec_error_unknown_issuer errors bug 485527: rename the _x8
6_ macro in lib/freebl bug 485
658: vfychain -p reports revoked cert bug 485745: modify fipstest.c to support cavs 7.1 drbg testing bug 48
6304: cert7.db/cert8.db corruption when importing a large certificate (>
64k) bug 48
6405: allocator mismatches in pk12util.c bug 48
6537: disable execstack in freebl x8
6_
64 builds ...
...And 11 more matches
sslfnc.html
the ietf standard transport layer security (tls) protocol, rfc 224
6, is a modified version of ssl3.
...ecstatus ssl_cipherprefsetdefault(print32 cipher, prbool enabled); parameters this function has the following parameters: cipher one of the following values for ssl2 (factory settings for all are enabled): ssl_en_rc4_128_with_md5 ssl_en_rc4_128_export40_with_md5 ssl_en_rc2_128_cbc_with_md5 ssl_en_rc2_128_cbc_export40_with_md5 ssl_en_des_
64_cbc_with_md5 ssl_en_des_192_ede3_cbc_with_md5 or one of the following values for ssl3/tls (unless indicated otherwise, factory settings for all are enabled): tls_dhe_rsa_with_aes_25
6_cbc_sha (not enabled by default; client side only) tls_dhe_dss_with_aes_25
6_cbc_sha (not enabled by default; client side only) tls_rsa_with_aes_25
6_cbc_sha (not enabled by default) ...
... default; client side only) ssl_rsa_fips_with_3des_ede_cbc_sha ssl_rsa_with_3des_ede_cbc_sha ssl_fortezza_dms_with_fortezza_cbc_sha ssl_dhe_rsa_with_des_cbc_sha (not enabled by default; client side only) ssl_dhe_dss_with_des_cbc_sha (not enabled by default; client side only) ssl_rsa_fips_with_des_cbc_sha ssl_rsa_with_des_cbc_sha tls_rsa_export1024_with_rc4_5
6_sha tls_rsa_export1024_with_des_cbc_sha ssl_rsa_export_with_rc4_40_md5 ssl_rsa_export_with_rc2_cbc_40_md5 ssl_fortezza_dms_with_null_sha ssl_rsa_with_null_sha (not enabled by default) ssl_rsa_with_null_md5 (not enabled by default) enabled if nonzero, the specified cipher is enabled.
...And 11 more matches
nsIAccessibleEvent
event_state_change 0x800a 0x0009 0x000
6 an object's state has changed.
... event_selection 0x800
6 0x0012 0x000f the selection within a container object has changed.
... event_alert 0x0002 0x001
6 0x0013 an alert has been generated.
...And 11 more matches
nsICryptoHash
you can, for example, calculate the sha25
6 hash of a file to determine if it contains the data you think it does.
... the hash algorithms supported are md2, md5, sha-1, sha-25
6, sha-384, and sha-512.
... 1.0
66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm); void initwithstring(in acstring aalgorithm); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long alen); constants hash algorithms these constants are used by the init() method to indicate which hashing function to use.
...And 11 more matches
nsIFile
the preferred form operates on utf-1
6 encoded characters strings.
...therefore, the utf-1
6 forms are scriptable, but the "native methods" are not.
... diskspaceavailable print
64 the number of bytes available to non-superuser on the disk volume containing the nsifile.
...And 11 more matches
Type conversion
og(mystruct.v.tostring()); // 'true' mystruct.v = false; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' mystruct.v = 0; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 10; // throws error mystruct.v = "a"; // throws error integer types target type source converted value ctypes.char1
6_t js string (only if its length == 1) src.charcodeat(0) any integer types js number (only if fits to the size) src js boolean if src == true: 1 if src == false: 0 var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.char1
6_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // "a" mystruct.v = true; console.log(mystru...
...ct.v.tostring()); // "\x01" mystruct.v = "x"; console.log(mystruct.v.tostring()); // "x" mystruct.v = "xx"; // throws error var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int1
6_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); //
65 mystruct.v = true; console.log(mystruct.v.tostring()); // 1 mystruct.v = "x"; // throws error integer/float types are implicitly convertible if any data of source type could be representable in the target type.
... target type source type ctypes.int1
6_t ctypes.int8_t ctypes.uint8_t ctypes.short ctypes.uint1
6_t ctypes.uint8_t ctypes.unsigned_short ctypes.short ctypes.int8_t ctypes.uint8_t ctypes.int1
6_t ctypes.unsigned_short ctypes.uint8_t ctypes.uint1
6_t ctypes.int32_t ctypes.int8_t ctypes.uint8_t ctypes.int1
6_t ctypes.uint1
6_t ctypes.short ctypes.unsigned_short ctypes.int ctypes.uint32_t ctypes.uint8_t ctypes.uint1
6_t ctypes.unsigned_short ctypes.unsigned_int ctypes.int ctypes...
...And 11 more matches
SubtleCrypto.importKey() - Web APIs
it consists of a header and a footer, and in between, the base
64-encoded binary data.
... a pem-encoded privatekeyinfo looks like this: -----begin private key----- mig2ageambagbyqgsm49agegbsubbaaibigemigbagebbdau9bd0jxdff5ov380z 9vieun2w5kjdz3hbuadencxliamsoquktffaou71eldn0tshzaniaarmuhcee/cp xmjgc1roj0d0k
6vluqta+jvcwigxciaukoethcngzdkcrd4pkxdbvbcijdzkvo+l ml2fikoovzh/8yetkmjumb804g
6omjuc9vvojcrv0ydasmykkjmjblg= -----end private key----- to get this into a format you can give to importkey() you need to do two things: base
64-decode the part between header and footer, using window.atob().
...a pem-encoded subjectpublickeyinfo looks like this: -----begin public key----- miibijanbgkqhkig9w0baqefaaocaq8amiibcgkcaqea3j+hgshunc7f
6xzvebd0 r3m5jny+/kabijvu8iu1eral3osi38vgimzjdbdorfxvznnzl+sxahwxiv5bhixl cq
6qhwysdgh
6oqgkiwialra/wnh4uhxj1or/iyakjhrr/kghutjyvcjzvaqadpjw 2g+syd1ui0b
6kjov2cruwipwpff8hbfvwv8q9yc2yd5hcnykvl0iaiyn+sdak/rv 8dc5eilzci4efucbyg4c9o88qz7bs14dxsfapty8p/twoihvvjladf743lgm/jlq cdpubua3hlszuhkm3bbskd7q9ngkjv3+ybyo4/fl+fkyra8j9ypa2n0iw53lfb3b gqidaqab -----end public key----- just as with pkcs #8, to get thi...
...And 11 more matches
Writing a WebSocket server in C# - Web APIs
this server conforms to rfc
6455 so it will only handle connections from chrome version 1
6, firefox 11, ie 10 and over.
...the full explanation of the server handshake can be found in rfc
6455, section 4.2.2.
... you must: obtain the value of the "sec-websocket-key" request header without any leading or trailing whitespace concatenate it with "258eafa5-e914-47da-95ca-c5ab0dc85b11" (a special guid specified by rfc
6455) compute sha-1 and base
64 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 = encoding.utf8.getbytes("http/1.1 101 switching protocols" + eol + "connection: upgrade" + eol + "upgrade: websocket" + eol + "sec-websocket-accept: " + convert.tobase
64str...
...And 11 more matches
Rich-Text Editing in Mozilla - Developer guides
oolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2">title 2 <h2></option> <option value="h3">title 3 <h3></option> <option value="h4">title 4 <h4></option> <option value="h5">title 5 <h5></option> <option value="h
6">subtitle <h
6></option> <option value="p">paragraph <p></option> <option value="pre">preformatted <pre></option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</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);this.sel...
...ectedindex=0;"> <option 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;base
64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy
6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo
6anqkkoiqa7" /> <img class="intlink" title="print" onclick="printdoc();" src="data:image/png;base
64,ivborw0kggoaa...
...And 11 more matches
Data URLs - HTTP
syntax data urls are composed of four parts: a prefix (data:), a mime type indicating the type of data, an optional base
64 token if non-textual, and the data itself: data:[<mediatype>][;base
64],<data> the mediatype is a mime type string, such as 'image/jpeg' for a jpeg image file.
...otherwise, you can specify base
64 to embed base
64-encoded binary data.
... data:text/plain;base
64,sgvsbg8sifdvcmxkiq== base
64-encoded version of the above data:text/html,%3ch1%3ehello%2c%20world!%3c%2fh1%3e an html document with <h1>hello, world!</h1> data:text/html,<script>alert('hi');</script> an html document that executes a javascript alert.
...And 11 more matches
Firefox user agent string reference - HTTP
though fixed in firefox
69, previous 32-bit versions of firefox running on
64-bit processors would report that the system is using a 32-bit cpu.
... windows windows user agents have the following variations, where x.y is the windows nt version (for instance, windows nt
6.1).
... windows version gecko user agent string windows nt on x8
6 cpu mozilla/5.0 (windows nt x.y; rv:10.0) gecko/20100101 firefox/10.0 windows nt on x
64 cpu mozilla/5.0 (windows nt x.y; win
64; x
64; rv:10.0) gecko/20100101 firefox/10.0 macintosh here, x.y is the version of mac os x (for instance, mac os x 10.
6).
...And 11 more matches
WebAssembly - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support 57edge full support 1
6firefox 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 11w...
... 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge full support 1
6firefox 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 11w...
...ended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0globalchrome full support
69edge no support nofirefox full support
62ie no support noopera no support nosafari no support nowebview android full support
69ch...
...And 11 more matches
Lexical grammar - JavaScript
decimal 12345
67890 42 // caution when using with a leading zero: 0888 // 888 parsed as decimal 0777 // 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.
...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-2
62 specs): 0e-5 // => 0 0e+5 // => 0 5e1 // => 50 175e-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).
... var flt_signbit = 0b10000000000000000000000000000000; // 2147483
648 var flt_exponent = 0b01111111100000000000000000000000; // 2139095040 var flt_mantissa = 0b00000000011111111111111111111111; // 8388
607 octal octal number syntax uses a leading zero followed by a lowercase or uppercase latin letter "o" (0o or 0o).
...And 11 more matches
WebAssembly
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support 57edge full support 1
6firefox 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 11w...
... 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge full support 1
6firefox 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 11w...
...ended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0globalchrome full support
69edge no support nofirefox full support
62ie no support noopera no support nosafari full support 13.1webview android full support ...
...And 11 more matches
Index of archived content - Archive of obsolete content
porting the library detector program id sdk api lifecycle sdk and xul comparison testing the add-on sdk two types of scripts working with events xul migration guide high-level apis addon-page base
64 clipboard context-menu hotkeys indexed-db l10n notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs ...
...u should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensions chapter 3: introduction to xul—how to build a more intuitive ui chapter 4: using xpcom—implementing advanced processes chapter 5: let's build a firefox extension chapter
6: firefox extensions and xul applications license and authors xul school tutorial adding events and commands adding toolbars and toolbar buttons adding menus and submenus adding sidebars adding windows and dialogs appendix a: add-on pe...
...mance with html firefox block and line layout cheat sheet content states and the style system disabling interruptible reflow document loading - from load start to finding a handler documentation for bidi mozilla downloading nightly or trunk builds jss build instructions for osx 10.
6 layout faq layout system overview multiple firefox profiles repackaging firefox style system overview using microformats firefox sync code snippets javascript client api syncing custom preferences forc...
...And 10 more matches
LIR - Archive of obsolete content
4 paramq quad
64 bit load a quad parameter (register or stack location).
... 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 1
6 not in use 17 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 2
6 sti2s void store int truncated to short 27 sti void store int 28 stq void
64 bit store quad 29 std void store double 30 std2f 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 ...
...And 10 more matches
New Skin Notes - Archive of obsolete content
--nickolay 07:1
6, 29 aug 2005 (pdt) imho the visited color looks horrible.
...--nickolay 04:4
6, 25 aug 2005 (pdt) the sidebar overrides content on diff pages --nickolay turns out this was fixed for 1.5 already.
...--nickolay 05:4
6, 25 aug 2005 (pdt) ok, i'll see what i can do.
...And 10 more matches
Optimizing Applications For NSPR
win-1
6 http://www.sybase.com/products/languages/watccpl.html the win-1
6 port is unique in the nspr world in that it uses the watcom development environment.
... win1
6 uses co-operative non-preemptive dispatching for its own processes.
... windows 3.1 does not support
64 bit file offsets.
...And 10 more matches
Certificate functions
function name/documentation source code nss versions cert_addcerttolisttail 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_certtimes...
...xr 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 cert_comparename mxr 3.2 and later cert_comparevaliditytimes mxr 3.11 and later cert_completecrldecodeentries mxr 3.
6 and later cert_convertanddecodecertificate mxr 3.9.3 and later cert_copyname mxr 3.4 and later cert_copyrdn mxr 3.5 and later cert_createava mxr 3.2.1 and later cert_createcertificate mxr 3.5 and later cert_createcertificaterequest 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_decodecertificatepoliciesextension mxr 3.2 and later cert_decodecertpackage mxr...
...And 10 more matches
NSS_3.12.3_release_notes.html
backwards compatibility (wildcards) bug 334
678: prng_fips18
61.c redefines the macro bsize on hp-ux bug 33501
6: mpp_pprime (miller-rabin probabilistic primality test) may choose 0 or 1 as the random integer bug 347037: make shlibsign depend on the softoken only bug 371522: auto-update of crls stops after first update bug 380784: pk11mode in non fips mode failed.
... bug 394077: libpkix need to return revocation status of a cert bug 4124
68: modify certutil bug 417092: modify pkix_certselector api to return an error if cert was rejected.
... bug 42
6413: audit messages need distinct types bug 438870: free freebl hashing code of dependencies on nspr and libutil bug 439115: db merge allows nickname conflicts in merged db bug 439199: sse2 instructions for bignum are not implemented on windows 32-bit bug 441321: tolerate incorrect encoding of dsa signatures in ssl 3.0 handshakes bug 444404: libpkix reports unknown issuer for nearly all certificate errors bug 452391: certutil -k incorrectly reports ec private key as an orphan bug 453234: support for seed cipher suites to tls rfc4010 bug 4533
64: improve pk11_cipherop error reporting (was: pk11_createcontextbysymkey returns null bug 45
640
6: slot list leaks in symkeyutil bug 4
61085: rfe: export function cert_comparecerts bug 4
62293: crash on fork after softoken ...
...And 10 more matches
SubtleCrypto.unwrapKey() - Web APIs
*/ const saltbytes = [89,113,135,234,1
68,204,21,3
6,55,93,1,132,242,242,192,15
6]; /* the wrapped key itself.
... */ const wrappedkeybytes = [171,223,14,3
6,201,233,233,120,1
64,
68,217,192,22
6,80, 224,39,199,235,239,
60,212,1
69,100,23,
61,54,244,197,1
60,80,109,230,207, 225,57,197,175,71,80,209]; /* convert an array of byte values to an arraybuffer.
... const saltbuffer = bytestoarraybuffer(saltbytes); // 3 derive the key from key material and salt return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: saltbuffer, "iterations": 100000, "hash": "sha-25
6" }, keymaterial, { "name": "aes-kw", "length": 25
6}, true, [ "wrapkey", "unwrapkey" ] ); } /* unwrap an aes secret key from an arraybuffer containing the raw bytes.
...And 10 more matches
clip-path - CSS: Cascading Style Sheets
ll"> <span>html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="9
6" y="91">i love</text> <text x="9
6" 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...
...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> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="9
6" y="91">i love</text> <text x="9
6" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z') </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p cla...
...ss="svg2"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg2"> <rect x="24" y="24" width="144" height="144" /> <text x="9
6" y="91">i love</text> <text x="9
6" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: circle(25%)</div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="shape1"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> ...
...And 10 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="2017-0
6-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=2017-0
6-01t08:30.
...partydate=2017-0
6-01t08%3a30.
...And 10 more matches
<input type="email"> - HTML: Hypertext Markup Language
maxlength the maximum number of characters (as utf-1
6 code units) the user can enter into the email input.
... the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-1
6 code units long.
... minlength the minimum number of characters (as utf-1
6 code units) the user can enter into the email input.
...And 10 more matches
HTTP Public Key Pinning (HPKP) - HTTP
enabling hpkp to enable this feature for your site, you need to return the public-key-pins http header when your site is accessed over https: public-key-pins: pin-sha25
6="base
64=="; max-age=expiretime [; includesubdomains][; report-uri="reporturi"] pin-sha25
6 the quoted string is the base
64 encoded subject public key information (spki) fingerprint.
...some browsers might allow other hashing algorithms than sha-25
6 in the future.
... extracting the base
64 encoded public key information note: while the example below shows how to set a pin on a server certificate, it is recommended to place the pin on the intermediate certificate of the ca that issued the server certificate, to ease certificates renewals and rotations.
...And 10 more matches
JavaScript typed arrays - JavaScript
each entry in a javascript typed array is a raw binary value in one of a number of supported formats, from 8-bit integers to
64-bit floating-point numbers.
... typed array views typed array views have self-descriptive names and provide views for all the usual numeric types like int8, uint32, float
64 and so forth.
... type value range size in bytes description web idl type equivalent c type int8array -128 to 127 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 int1
6array -327
68 to 327
67 2 1
6-bit two's complement signed integer short int1
6_t uint1
6array 0 to
65535 2 1
6-bit unsigned integer unsigned short uint1
6_t int32array -2147483
648 to 2147483
647 4 32-bit two's complement signed integer long int32_t uint32array 0 to 42949
67295 4 32-bit unsigned integer unsigned long uint...
...And 10 more matches
requiredFeatures - SVG: Scalable Vector Graphics
: http://www.w3.org/tr/svg11/feature#svgdom --> <rect class="ko" x="10" y="35" height="25" width="430" /> <rect class="ok" x="10" y="35" height="25" width="430" requiredfeatures="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" hei...
...e#svgdom-animation --> <rect class="ko" x="10" y="135" height="25" width="430" /> <rect class="ok" x="10" y="135" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svgdom-animation" /> <text x="20" y="152">http://www.w3.org/tr/svg11/feature#svgdom-animation</text> <!-- testing : http://www.w3.org/tr/svg11/feature#svg-dynamic --> <rect class="ko" x="10" y="1
60" height="25" width="430" /> <rect class="ok" x="10" y="1
60" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svg-dynamic" /> <text x="20" y="177">http://www.w3.org/tr/svg11/feature#svg-dynamic</text> <!-- testing : http://www.w3.org/tr/svg11/feature#svgdom-dynamic --> <rect class="ko" x="10" y="185" height="25" width="430" /> <rect class="ok" x="10" y="1...
...rg/tr/svg11/feature#structure --> <rect class="ko" x="10" y="235" height="25" width="430" /> <rect class="ok" x="10" y="235" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#structure" /> <text x="20" y="252">http://www.w3.org/tr/svg11/feature#structure</text> <!-- testing : http://www.w3.org/tr/svg11/feature#basicstructure --> <rect class="ko" x="10" y="2
60" height="25" width="430" /> <rect class="ok" x="10" y="2
60" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#basicstructure" /> <text x="20" y="277">http://www.w3.org/tr/svg11/feature#basicstructure</text> <!-- testing : http://www.w3.org/tr/svg11/feature#containerattribute --> <rect class="ko" x="10" y="285" height="25" width="430" /> <rect class="ok" x...
...And 10 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<vbox> <button label="button1" ordinal="3"/> <button label="button2" ordinal="2"/> <button label="button3" ordinal="1"/> </vbox> listing 5: changing order with ordinal figure 4: output of listing 5 box size you can set the size of xul elements explicitly using the width and height attributes, as shown in listing
6.
... <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.
...this produces the output seen in figure
6.
...And 9 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
in order to work with local files, first you need to create a nsilocalfile object representing the local file, as shown in listing
6.
... 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.
... listing 7: check that file exists, delete it, and create it file.initwithpath('c:\\temp\\temp.txt'); if (file.exists()) file.remove(false); file.create(file.normal_file_type, 0
666); the first parameter of the nsilocalfile.create() method gives the type of file to create.
...And 9 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="270340" parent="0"> <view va="47171904"> </view> <stylecontext va="15022232"> <font serif 240 240 0 /> <color data="-1
677721
6"/> <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 bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0" /> <list data="100 100 " /> <position data="left: a...
...lity 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-i58
6-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed.
...a typical part of the verify log would look like: type manifest file: e:\moz_src\mozilla\obj-i58
6-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed.
...And 9 more matches
Introduction to SSL - Archive of obsolete content
the details of the protocol are available in request for comments (rfc): 224
6,the tls protocol version 1.0.
... triple des with 1
68-bit encryption and sha-1 message authentication triple des is the strongest cipher supported by ssl, but it is not as fast as rc4.
... rc4 with 128-bit encryption and md5 message authentication because the rc4 and rc2 ciphers have 128-bit encryption, they are the second strongest next to triple des (data encryption standard), with 1
68-bit encryption.
...And 9 more matches
sample2
*/ /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <cryptohi.h> #include <keyhi.h> #include <pk11priv.h> #include <cert.h> #include <base
64.h> #include <secerr.h> #include <secport.h> #include <secoid.h> #include <secmodt.h> #include <secoidt.h> #include <sechash.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits 1024 /* header file constants */ #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey---...
...*/ #ifndef port_errortostring #define port_errortostring(err) pr_errortostring((err), pr_language_i_default) #endif /* 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...
...validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-d -d <dbdirpath> -b <headerfilename> -e <encryptfilename> -o <opfilename>\n"); exit(-1); } } /* * sign the contents of input file using private key and * return result as secitem */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, secitem *res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[409
6]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } /* sign using private key */ sgn = sgn_newcontext(sec_oid_pkcs1_md5_with_rsa_encryption, pk); if (!sgn) { pr_fprintf(pr_stderr, "unable to cr...
...And 9 more matches
NSS environment variables
pkcs #11 module logger 3.
6 nss_default_db_type string ("dbm", "sql", or "extern") determines the default database type to open if the app does not specify.
... nss_ssl_enable_renegotiation string ([0|n|n], [1|u|u], [2|r|r], [3|t|t]) (definition for nss 3.12.
6 and above) sets how tls renegotiation is handled [1|u|u]: ssl_renegotiate_unrestricted server and client are allowed to renegotiate without any restrictions.
... 3.12.5 modified in 3.12.
6 nss_ssl_require_safe_negotiation boolean (1 to enable) it controls whether safe renegotiation indication is required for initial handshake.
...And 9 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
65537.
... -
6 | --extkeyusage keyword,keyword add an extended key usage extension to a certificate that is being created or added to the database.
... for example: $ certutil -r -k ec -q nistb409 -g 512 -s "cn=john smith,o=example corp,l=mountain view,st=california,c=us" -d sql:/home/my/sharednssdb -p
650-555-0123 -a -o cert.cer generating key.
...And 9 more matches
Creating JavaScript jstest reftests
non2
62 tests the directory js/src/tests/non2
62/ should contain all tests of the following type: regressions of spidermonkey non-standard spidermonkey extensions to the javascript language test of "implementation-defined" details of the ecmascript standard for example, the exact definition of pi or some details of array sorting.
... performance tests or stress tests tests of spidermonkey's comformance to the ecmascript standard a brief history: in 2017, spidermonkey started comsuming test2
62, a comprehensive tests suite for ecmascript implementations.
... before using test2
62, spidermonkey had a fair number of internal tests of conformance to ecmascript, and many of those tests remain in the js/src/non2
62 directory as regressions.
...And 9 more matches
nsIWebBrowserChrome
inherits from: nsisupports last changed in gecko 0.9.
6 method overview void destroybrowserwindow(); void exitmodaleventloop(in nsresult astatus); boolean iswindowmodal(); void setstatus(in unsigned long statustype, in wstring status); void showasmodal(); void sizebrowserto(in long acx, in long acy); attributes attribute type description chromeflags unsigned long the chrome flags for this browser chrome.
... chrome_menubar 1
6 value for the chromeflags attribute.
... chrome_locationbar
64 value for the chromeflags attribute.
...And 9 more matches
Xptcall Porting Status
status status platform contributors and <font color="red">?</font> possible contributors notes <font color="white">done</font> win32 x8
6 john bandhauer <jband@netscape.com> win32 <font color="white">done</font> linux x8
6 john bandhauer <jband@netscape.com> ulrich drepper <drepper@cygnus.com> unix <font color="white">done</font> freebsd and netbsd x8
6 christoph toshok <toshok@hungry.com>, john bandhauer <jband@netscape.com> unix (same as linux 8
6 code) <font color="white">done</font> bsd/os x8
6 bert driehuis <bert_drieh...
...uis@nl.compuware.com> unix (same as linux 8
6 code) bert contributed patches that *should* do the right thing for all the unixish-x8
6 versions of this code for gcc 2.7 or 2.8 vs.
... <font color="white">done</font> solaris sparc v9 (
64bit) stuart parmenter <pavlov@netscape.com>, chris seawood <cls@seawood.org> unix this is checked in and (pavlov claims!) working.
...And 9 more matches
Plug-in Basics - Plugins
for example: #!/bin/bash export moz_plugin_path=/usr/lib
64/mozilla/plugins exec /usr/lib
64/firefox/firefox profile directory/plugins, where profile directory is the directory of the current user profile.
... /usr/lib/mozilla/plugins (the
64-bit firefox checks /usr/lib
64/mozilla/plugins as well).
... /usr/lib
64/firefox/plugins (for
64-bit firefox) note: firefox nightly checks a subset of these locations.
...And 9 more matches
SubtleCrypto.wrapKey() - Web APIs
to use aes-kw, the input must be a multiple of
64 bits.
...*/ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-25
6" }, keymaterial, { "name": "aes-kw", "length": 25
6}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key.
... */ async function wrapcryptokey(keytowrap) { // get the key encryption key const keymaterial = await getkeymaterial(); salt = window.crypto.getrandomvalues(new uint8array(1
6)); const wrappingkey = await getkey(keymaterial, salt); return window.crypto.subtle.wrapkey( "raw", keytowrap, wrappingkey, "aes-kw" ); } /* generate an encrypt/decrypt secret key, then wrap it.
...And 9 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
1
6 00:01:21.058 --> 00:01:23.8
68 - [ bats screeching ] - they won't get in your hair.
... example
6 - common comment usage webvtt - translation of that film i like note this translation was done by kyle so that some friends can watch it with their parents.
... 00:00:03.000 --> 00:00:0
6.500 position:90% align:right size:35% i think he went down this lane.
...And 9 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 9 more matches
min-width - CSS: Cascading Style Sheets
to as the initial value for min-width.edge full support 12notes full support 12notes notes edge uses auto as the initial value for min-width.firefox full support 34 full support 34 no support 1
6 — 22notes notes firefox 18 and later (until the value was removed), used auto as the initial value for min-width.ie no support noopera full support 12.1notes full support 12.1notes notes opera uses auto as the initial value for min-width.safari ...
...lue 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 34 full support 34 no support 1
6 — 22notes notes firefox 18 and later (until the value was removed), used auto as the initial value for min-width.opera android full support 14notes full support 14notes notes opera uses auto as the initial value for min-width.safari ios no support nosamsung int...
...ernet android full support 1.5notes full support 1.5notes notes samsung internet uses auto as the initial value for min-width.fit-contentchrome full support 4
6 full support 4
6 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 full support 3prefix...
...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 12345
67890 42 // caution when using leading zeros: 0888 // 888 parsed as decimal 0777 // 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; // 2147483
648 var flt_exponent = 0b01111111100000000000000000000000; // 2139095040 var flt_mantissa = 0b00000000011111111111111111111111; // 8388
607 octal numbers octal number syntax uses a leading zero.
...And 9 more matches
Finding window handles - Archive of obsolete content
erface(ci.nsidocshelltreeitem) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var hwndstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var user32 = ctypes.open('user32.dll'); /* http://msdn.microsoft.com/en-us/library/ms
633539%28v=vs.85%29.aspx * bool winapi setforegroundwindow( * __in_ hwnd hwnd * ); */ var setforegroundwindow = user32.declare('setforegroundwindow', ctypes.winapi_abi, ctypes.bool, // return bool ctypes.voidptr_t // hwnd ); var hwnd = ctypes.voidptr_t(ctypes.uint
64(hwndstring)); var rez_setforegroundwindow = setforegroundwindow(hwnd); console.log('rez_setforegroundwindow:', rez_set...
...let objc_msgsend = objc.declare('objc_msgsend', ctypes.default_abi, id, id, sel, '...'); /* https://developer.apple.com/library/mac/documentation/cocoa/reference/applicationkit/classes/nsapplication_class/index.html#//apple_ref/occ/instp/nsapplication/orderfront: * [nswindowptr orderfront:nil] */ var orderfront = sel_registername('orderfront:'); var nswindowptr = ctypes.voidptr_t(ctypes.uint
64(nswindowstring)); var rez_orderfront = objc_msgsend(nswindowptr, orderfront, nil); console.log('rez_orderfront:', rez_orderfront, rez_orderfront.tostring()); objc.close(); unix under unix systems, the nativehandle holds a string address to a gdkwindow* (the asterik/star means pointer).
... the string is made into an actual gdkwindow* like this: var gdkwindow = ctypes.structtype('gdkwindow'); var gdkwindowptrstring = basewindow.nativehandle; var gdkwinptr = gdkwindow.ptr(ctypes.uint
64(gdkwindowptrstring)); working with gdkwindow* gdkwindow* to xid var gdkwindow = ctypes.structtype('gdkwindow'); var gdkdrawable = ctypes.structtype('gdkdrawable'); var card32 = /^(alpha|hppa|ia
64|ppc
64|s390|x8
6_
64)-/.test(services.appinfo.xpcomabi) ?
...And 8 more matches
MMgc - Archive of obsolete content
sample stack trace: xmlclass.cpp:391 toplevel.cpp:1
64 toplevel.cpp:507 interpreter.cpp:1098 interpreter.cpp:20 methodenv.cpp:47 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
6007b 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% - 1
602 kb 15
675 items, avg 104b
65.
6% - 1051 kb - 14397 items - stringobject.cpp:4
6 avmcore.cpp:2300 … 20.4% - 32
6 kb - 10439 items - avmcore.cpp:2300 abcparser.cpp:1077 …
6.5% - 103 kb - 3311 item...
... output looks like this: [mem] ------- gross stats ----- [mem] private 5877 (23.0m) 100% [mem] mmgc 5792 (22.
6m) 98% [mem] unmanaged 13 (52k) 0% [mem] managed 259
6 (10.1m) 44% [mem] free 3081 (12.0m) 52% [mem] jit 0 (0k) 0% [mem] other 85 (340k) 1% [mem] bytes (interal fragmentation) 2527 (9.9m) 9
6% [mem] managed bytes 2520 (9.8m) 97% [mem] unmanaged bytes 7 (28k) 53% [mem] -------- gross stats end ----- numbers are in pages (with m and k in parens).
...And 8 more matches
jspage - Archive of obsolete content
var mootools={version:"1.2.4",build:"0d9113241a90b9cd5
643b92
6795852a202
6710d4"};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...
...;default:return c;}return b;}var browser=$merge({engine:{name:"unknown",version:0},platform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?9
60:((document.getelementsbyclassname)?950:925)); },trident:function(){return(!window.activexobject)?false:((window.xmlhttprequest)?((document.queryselectorall)?
6:5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.features.xpath)?((browser.features.query)?525:420):419); },gecko:function(){return(!document.getboxobjectfor&&window.mozinnerscreenx==null)?false:((document.getelemen...
...this.splice(a,1);}}return this;},empty:function(){this.length=0;return this;},flatten:function(){var d=[]; for(var b=0,a=this.length;b<a;b++){var c=$type(this[b]);if(!c){continue;}d=d.concat((c=="array"||c=="collection"||c=="arguments")?array.flatten(this[b]):this[b]); }return d;},hextorgb:function(b){if(this.length!=3){return null;}var a=this.map(function(c){if(c.length==1){c+=c;}return c.toint(1
6);});return(b)?a:"rgb("+a+")"; },rgbtohex:function(d){if(this.length<3){return null;}if(this.length==4&&this[3]==0&&!d){return"transparent";}var b=[];for(var a=0;a<3;a++){var c=(this[a]-0).tostring(1
6); b.push((c.length==1)?"0"+c:c);}return(d)?b:"#"+b.join("");}});function.implement({extend:function(a){for(var b in a){this[b]=a[b];}return this;},create:function(b){var a=this; b=b||{};return functi...
...And 8 more matches
Extentsions FAQ - Archive of obsolete content
return to mozilla-dev-extensions faq friday, september 22 - 29, 200
6 (↑ top) how to write an xpcom component in c++ that can communicate to a com component?
... friday, september 29 - october
6, 200
6 (↑ top) is there anyway, via plugin or extension, for firefox to mimic the functionality of ie in this respect?
... you can aes-128 or aes-25
6 symmetric encryption via aes.js (http://tinyurl.com/pp79t).
...And 8 more matches
Beginner's guide to media queries - Learn web development
for example, to change the body text color to red if the viewport is exactly
600 pixels, you would use the following media query.
... @media screen and (width:
600px) { body { color: red; } } open this example in the browser, or view the source.
...for example, to make the color blue if the viewport is narrower than
600 pixels, use max-width: @media screen and (max-width:
600px) { body { color: blue; } } open this example in the browser, or view the source.
...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 5
6.778
6543.
... hexadecimal — base 1
6, uses 0–9 and then a–f 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.
667; 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
Linux compatibility matrix
distribution kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3 released eol fedora 1
6 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 17 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.1
6 2.34 2.24 3.
6 0.2
6 4.7 4.7 3.1 n/a jan 2013 jan 2014 fedora 19 3.9 2.17 2.3
6 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.30 4.8.2 4.8 3.3 n/a dec 2013 jun 2015 fedora 21 3.17 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.1
6 0.32 5.1 4.9, 5.1 3.5 n/a may 2015 jul 201
6 fedora 23 4.2 2.22 2.4
6 2.24 3.18 0.33 5.1 5.1 3.7 n/a nov 2015 dec 201
6 fedora 24 4.5 2.23 2.48 2.24 3.20 0.34
6.1
6.1 3.8 n/a jun 201
6 aug 2017 fedora 25 4.8 2.24 2.50 2.24 3.22.2 0.34
6.2
6.2 3.8 n/a nov 201
6 dec 2017 fedora 2
6 4.11 2.25 2.52 2.24 3.22.1
6 0.34 7.1 7.1 4.0 n/a jul 2017 jun 2018 fed...
...ora 27 4.13 2.2
6 2.54 2.24 3.22.24 0.34 7.2 7.2 4.0 n/a nov 2017 dec 2018 fedora 28 4.1
6 2.27 2.5
6 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 8 more matches
PerfMeasurement.jsm
variable type description cpu_cycles uint
64 the number of cpu cycles elapsed.
... instructions uint
64 the number of instructions executed.
... cache_references uint
64 the number of memory accesses that occurred.
...And 8 more matches
DMD
desktop firefox (linux) build build firefox with these options: ac_add_options --enable-dmd if building via try server, modify browser/config/mozconfigs/linux
64/common-opt or a similar file before pushing.
... $ killall -34 firefox each one of these steps triggers all the memory reporters and then dmd analyzes the reports, printing commentary like this: dmd[5222] opened /tmp/dmd-141455
6492-5222.json.gz for writing dmd[5222] dump 1 { dmd[5222] constructing the heap block list...
... desktop firefox (mac) build build with these options: ac_add_options --enable-dmd if building via try server, modify browser/config/mozconfigs/macosx
64/common-opt or a similar file before pushing.
...And 8 more matches
NSS 3.15.1 release notes
distribution information nss 3.15.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_1_rtm/src/ new in nss 3.15.1 new functionality tls 1.2: tls 1.2 (rfc 524
6) is supported.
... hmac-sha25
6 cipher suites (rfc 524
6 and rfc 5289) are supported, allowing tls to be used without md5 and sha-1.
... the hash function used in the signature for tls 1.2 client authentication must be the hash function of the tls 1.2 prf, which is always sha-25
6 in nss 3.15.1.
...And 8 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
nss sample code
6: encryption/decryption and mac and output public as a pkcs 11 csr.
...header "-----begin certificate for signature verification-----" #define ns_cert_vfy_trailer "-----end certificate for signature verification-----" #define ns_sig_header "-----begin signature-----" #define ns_sig_trailer "-----end signature-----" #define ns_cert_header "-----begin certificate-----" #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 ...
... "-d -d <dbdirpath> -b <headerfilename> -e <encryptfilename> -o <opfilename>\n"); exit(-1); } } /* * sign the contents of input file using private key and * return result as secitem */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, secitem *res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[409
6]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } /* sign using private key */ sgn = sgn...
...And 8 more matches
SpiderMonkey 38
it is supported on x8
6, x8
6_
64, and arm architectures.
... js::clonefunctionobject (bug 1088228) interned_string_to_jsid (bug 1045900) js::construct (bug 1017109) js::createerror (bug 984048) js::falsehandlevalue (bug 959787) js::handlesymbol (bug
64541
6) js::identifystandardconstructor (bug 97
6148) js::iscallable (bug 10
65811) js::isconstructor (bug 10
65811) js::mutablehandlesymbol (bug
64541
6) js::ordinarytoprimitive (bug 1103152) js::propertyspecnameequalsid (bug 1082
672) js::propertyspecnameissymbol (bug 1082
672) js::propertyspecnametopermanentid (bug 1082
672) js::protokeytoid (bug 987
669) js::rootedsymbol (bug
64541
6) js::tru...
...ehandlevalue (bug 959787) jsconstintegerspec (bug 10
66020) jsid_is_symbol (bug
64541
6) jsid_to_symbol (bug
64541
6) jsprop_define_late (bug 825199) jsprop_ignore_enumerate (bug 1037770) jsprop_ignore_permanent (bug 1037770) jsprop_ignore_readonly (bug 1037770) jsprop_ignore_value (bug 1037770) jsprop_propop_accessors (bug 1088002) jsprop_redefine_nonconfigurable (bug 1101123) js_addfinalizecallback (bug 99
6785) js_defineconstintegers (bug 10
66020) js_getflatstringcharat (bug 1034
627) js_getfunctionscript (bug 10
69
694) js_getlatin1flatstringchars (bug 10378
69) js_getlatin1internedstringchars (bug 10378
69) js_getlatin1stringcharsandlength (bug 103272
6) js_getstringcharat (bug 1034
627) js_gettwobyteexternalstringchars (bug 1034
627) js_gettwobyteflatstringchars (bug 10378
69) ...
...And 8 more matches
A Web PKI x509 certificate primer
extensions while rfc 5280 defines 1
6 extensions for webpki in this document we will be describing the six extensions we considered critical for understanding.
...generate csr using this command: openssl req -new -key key.pem -days 109
6 -extensions v3_ca -batch -out example.csr -utf8 -subj '/cn=www.example.com' this creates a new certificate signing request (csr) that will be valid for 3 years.
...self-sign csr (using sha25
6) and append the extensions described in the file "openssl x509 -req -sha25
6 -days 3
650 -in example.csr -signkey key.pem -set_serial $any_integer -extfile openssl.ss.cnf -out example.pem" you can now use example.pem as your certfile cas included in firefox when you visit a secure website, firefox will validate the website’s certificate by checking that the certificate that signed it is valid, and checking that the certificate that signed the parent certificate is valid and so forth up to a root certificate that is known to be valid.
...And 8 more matches
nsINavBookmarkObserver
1.0
66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) method overview void onbeforeitemremoved(in long long aitemid, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); obsolete since gecko 21.0 void onbeginupdatebatch(); void onendupdatebatch(); void onfolderadded(in print
64 folder, in print
64 parent, in print32 index); obsolete since gecko 1.9 void onfolderchanged(in print
64 folder, in acstring property); obsolete since gecko 1.9 void onfoldermoved(in print
64 ...
...folder, in print
64 oldparent, in print32 oldindex, in print
64 newparent, in print32 newindex); obsolete since gecko 1.9 void onfolderremoved(in print
64 folder, in print
64 parent, in print32 index); obsolete since gecko 1.9 void onitemadded(in long long aitemid, in long long aparentid, in long aindex, in unsigned short aitemtype, in nsiuri auri, in autf8string atitle, in prtime adateadded, in acstring aguid, in acstring aparentguid); void onitemchanged(in long long aitemid, in acstring aproperty, in boolean aisannotationproperty, in autf8string anewvalue, in prtime alastmodified, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); void onitemmoved(in long long aitemid, in long long aoldparentid, in long aoldind...
...ex, in long long anewparentid, in long anewindex, in unsigned short aitemtype, in acstring aguid, in acstring aoldparentguid, in acstring anewparentguid); void onitemremoved(in long long aitemid, in long long aparentid, in long aindex, in unsigned short aitemtype, in nsiuri auri, in acstring aguid, in acstring aparentguid); void onitemreplaced(in print
64 folder, in nsiuri item, in nsiuri newitem); obsolete since gecko 1.9 void onitemvisited(in long long aitemid, in long long avisitid, in prtime atime, in unsigned long atransitiontype, in nsiuri auri, in long long aparentid, in acstring aguid, in acstring aparentguid); void onseparatoradded(in print
64 parent, in print32 index); obsolete since gecko 1.9 void onseparatorremoved(in print
64 parent, i...
...And 8 more matches
nsIWindowsRegKey
1.0
66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) the interface represents a single key in the registry.
... boolean haschanged(); boolean haschild(in astring name); boolean hasvalue(in astring name); boolean iswatching(); void open(in unsigned long rootkey, in astring relpath, in unsigned long mode); nsiwindowsregkey openchild(in astring relpath, in unsigned long mode); acstring readbinaryvalue(in astring name); unsigned long long readint
64value(in astring name); unsigned long readintvalue(in astring name); astring readstringvalue(in astring name); void removechild(in astring relpath); void removevalue(in astring name); void startwatching(in boolean recurse); void stopwatching(); void writebinaryvalue(in astring name, in acstring data); void writeint
64value(in ...
... access_create_sub_key 0x00000004 access_enumerate_sub_keys 0x00000008 access_notify 0x00000010 access_read access_basic | access_query_value | access_enumerate_sub_keys | access_notify access_write access_basic | access_set_value | access_create_sub_key access_all access_read | access_write wow
64_32 0x00000200 wow
64_
64 0x00000100 type constants values for the type of a registry value.
...And 8 more matches
Index
6 activity manager interfaces thunderbird this page describes the programmatic interfaces behind the activity manager component.
... notes: 1
6 cached compose window faq seth spitzer (sspitzer@mozilla.org) what is the "cached" compose window?
... 2
6 nsimsgcloudfileprovider nsimsgcloudfileprovider is the interface that must be implemented by new filelink providers.
...And 8 more matches
IDBIndex - Web APIs
ri on iossamsung internetidbindexchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
...th the vendor prefix: webkitcountchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
... 1.5getchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
...And 8 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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
conic-gradient() - CSS: Cascading Style Sheets
conic gradient rotated 45 degrees, starting blue 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(3
60, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 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.
... to create a conic gradient that repeats so as to fill a 3
60 degree rotation, use the repeating-conic-gradient() function instead.
...there are 3
60 degrees, 400 gradians, 2π radians, and 1 turn in a circle.
...And 8 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<datalist id="colorsxx"> <option>#ff0000</option> <option>#ee0000</option> <option>#dd0000</option> <option>#cc0000</option> <option>#bb0000</option> </datalist> <datalist id="numbersxx"> <option>0</option> <option>2</option> <option>4</option> <option>8</option> <option>1
6</option> <option>32</option> <option>
64</option> </datalist> <datalist id="fruitsxx"> <option>cherry</option> <option>banana</option> <option>mango</option> <option>orange</option> <option>blueberry</option> </datalist> <datalist id="urlsxx"> <option>https://developer.mozilla.org</option> <option>https://caniuse.com/</option> <option>https://mozilla.com</option> <option>http...
...s://mdn.github.io</option> <option>https://www.youtube.com/user/firefoxchannel</option> </datalist> <p><label for="textx">text</label> <input type="text" list="fruitsxx" id="textx"/></p> <p><label for="colorx">color</label> <input type="color" list="colorsxx" id="colorx"/></p> <p><label for="rangex">range</label> <input type="range" min="0" max="
64" list="numbersxx" id="rangex"/></p> <p><label for="numberx">number</label> <input type="number" min="0" max="
64" list="numbersxx" id="numberx"/></p> <p><label for="urlx">url</label> <input type="url" list="urlsxx" id="urlx"/></p> it is valid on text, search, url, tel, email, date, month, week, time, datetime-local, number, range, and color.
... maxlength valid for text, search, url, tel, email, and password, it defines the maximum number of characters (as utf-1
6 code units) the user can enter into the field.
...And 8 more matches
String.fromCharCode() - JavaScript
the static string.fromcharcode() method returns a string created from the specified sequence of utf-1
6 code units.
... syntax string.fromcharcode(num1[, ...[, numn]]) parameters num1, ..., numn a sequence of numbers that are utf-1
6 code units.
... the range is between 0 and
65535 (0xffff).
...And 8 more matches
Digital audio concepts - Web media technologies
most audio files use 1
6-bit signed integers for each sample, but others use 32-bit floating-point values or 24-bit or 32-bit integers.
... stereo audio is probably the most commonly used channel arrangement in web audio, and 1
6-bit samples are used for the majority of day-to-day audio in use today.
... for 1
6-bit stereo audio, each sample taken from the analog signal is recorded as two 1
6-bit integers, one for the left channel and one for the right.
...And 8 more matches
Unit Testing - Archive of obsolete content
to demonstrate how it works we'll write some unit tests for a simple base
64 encoding module.
... a simple base
64 module in a web page, you can perform base
64 encoding and decoding using the btoa() and atob() functions.
...so we'll create a base
64 module to expose these functions from the platform (see creating reusable modules).
...And 7 more matches
Creating regular expressions for a microsummary generator - Archive of obsolete content
warning: microsummary support was removed in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3) a regular expression is a special kind of string (i.e.
...here's a url for an auction item page on ebay: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=28001843910
6 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?viewitem&item=28001843910
6".
... here's a regular expression that matches our example url: http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item=28001843910
6 it looks almost the same as the url.
...And 7 more matches
URIs and URLs - Archive of obsolete content
resources are identified by uri "uniform resource identifier" (taken from rfc 239
6): uniform uniformity provides several benefits: it allows different types of resource identifiers to be used in the same context, even when the mechanisms used to access those resources may differ; it allows uniform semantic interpretation of common syntactic conventions across different types of resource identifiers; it allows introduction of new types of resource identifiers without interfering with the way that existing identifiers are used; and, it allows the identifiers to be reused in many different cont...
...it also might be necessary to implement a new urlparser for a new protocol but that might not be necessary because necko already provides uri implementations that can deal with a number of schemes, by implementing the generic urlparser defined in rfc 239
6.
...another quote from rfc 239
6: a uri is always in an "escaped" form, since escaping or unescaping a completed uri might change its semantics.
...And 7 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
searchsessions obsolete since gecko 2
6 type: space-separated list of session names set to a keyword indicating what type of data to look up for autocomplete.
... searchsessions obsolete since gecko 2
6 type: space-separated list of session names gets the value of the searchsessions attribute.
...defaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addsession( session ) obsolete since gecko 2
6 return type: nsiautocompletesession adds a new session object to the autocomplete widget.
...And 7 more matches
Choosing the right approach - Learn web development
let's say that the code takes 40 milliseconds to run — the interval then ends up being only
60 milliseconds.
... code example a simple animated spinner; you can find this example live on github (see the source code also): const spinner = document.queryselector('div'); let rotatecount = 0; let starttime = null; let raf; function draw(timestamp) { if(!starttime) { starttime = timestamp; } rotatecount = (timestamp - starttime) / 3; if(rotatecount > 359) { rotatecount %= 3
60; } spinner.style.transform = 'rotate(' + rotatecount + 'deg)'; raf = requestanimationframe(draw); } draw(); pitfalls you can't choose a specific framerate with requestanimationframe().
...ith no input parameters.ie full support 10opera full support 15 full support 15 full support 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 ≤37 full support ≤37 full support ≤37prefixed ...
...And 7 more matches
Creating a Language Pack
x-testing: changed:
6 missinginfiles:
6124 missing: 5 0% of entries changed this step is not necessary anymore to create the language pack, because it is included in the next command.
... $ cd ../../dist the xpi file can be found in the directory win32/xpi on windows, linux-i
68
6/xpi or linux-x8
6_
64 on linux or mac/xpi on mac.
... $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora if you're building on mac
64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla.o....en-us.mac.dmg to /users/your_id/mozilla/vc/firefox/browser/locales/../../dist/firefox-3.
6b5pre.en-us.
...And 7 more matches
NSS 3.14.2 release notes
the release is available for download from https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_2_rtm/src/ for the primary nss documentation pages please visit /docs/nss new in nss 3.14.2 nss will now make use of the intel aes-ni and avx instruction sets for hardware-accelerated aes-gcm on
64-bit linux systems.
... new types: in certt.h cert_pi_useonlytrustanchors in secoidt.h sec_oid_ms_ext_key_usage_ctl_signing notable changes in nss 3.14.2 bug 805
604 - support for aes-ni and avx accelerated aes-gcm was contributed by shay gueron of intel.
... if compiled on linux systems in
64-bit mode, nss will include runtime detection to check if the platform supports aes-ni and pclmulqdq.
...And 7 more matches
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.
...) domino-go-webserver/4.
6.2.
6 (and perhaps some later versions) ibm_http_server/1.3.
6.3 or earlier (* update to 1.3.
6.4) ibm_http_server/1.3.12.1 or earlier (* update to 1.3.12.2) java web server 2 osu/3.2 - decthreads http server for openvm stronghold/2.2 webmail v.
...And 7 more matches
NSS tools : modutil
modutil supports several mechanisms: rsa, dsa, rc2, rc4, rc5, aes, des, dh, sha1, sha25
6, sha512, ssl, tls, md5, md2, random (for random number generation), and friendly (meaning certificates are publicly readable).
...for example: platforms { linux:5.4.08:x8
6 { modulename { "example pkcs #11 module" } modulefile { crypto.so } defaultmechanismflags{0x0000} cipherenableflags{0x0000} files { crypto.so { path{ /tmp/crypto.so } } setup.sh { executable path{ /tmp/setup.sh } } } } linux:
6.0.0:x8
6 { equivalentplatform { linux...
...:5.4.08:x8
6 } } } both the install script and the required libraries must be bundled in a jar file, which is specified with the -jar argument.
...And 7 more matches
Starting WebLock
the xpidl for iweblock appears below: iweblock #include "nsisupports.idl" interface nsisimpleenumerator; [scriptable, uuid(ea54eee4-9548-4b
63-b94d-c519ffc91d09)] interface iweblock : nsisupports { void lock(); void unlock(); // assume strings are utf-8 void addsite(in string url); void removesite(in string url); attribute nsisimpleenumerator sites; }; the first line includes the file nsisupports.idl, which defines the nsisupports interface from which all xpcom interfaces must derive, and makes it possible for the iweblo...
... [scriptable, uuid(ea54eee4-9548-4b
63-b94d-c519ffc91d09)] the rest of the line provides a uuid for this interface.
... [scriptable, uuid(d1899240-f9d2-11d2-bdd
6-0000
64
657374)] interface nsisimpleenumerator : nsisupports { /** * called to determine whether or not the enumerator has * any elements that can be returned via getnext().
...And 7 more matches
nsIAccessibleText
boundary_line_start 5 boundary_line_end
6 boundary_attribute_range 7 coordinate type constants obsolete since gecko 1.9 (firefox 3)this feature is obsolete.
...nsiaccessible getattributerange( in long offset, out long rangestartoffset, out long rangeendoffset ); parameters offset rangestartoffset rangeendoffset return value getcharacteratoffset() it would be better to return an unsigned long here, to allow unicode chars > 1
6 bits.
... getselectionbounds() void getselectionbounds( in long selectionnum, out long startoffset, out long endoffset ); parameters selectionnum startoffset endoffset gettext() string methods may need to return multibyte-encoded strings, since some locales can not be encoded using 1
6-bit chars.
...And 7 more matches
WebIDL bindings
string& nsacstring& (outparam) nscstring double double double double float float float float interface: non-nullable foo& already_addrefed<foo> foo* owningnonnull<foo> interface: nullable foo* already_addrefed<foo> foo* refptr<foo> long int32_t int32_t int32_t long long int
64_t int
64_t int
64_t object js::handle<jsobject*> js::mutablehandle<jsobject*> jsobject* octet uint8_t uint8_t uint8_t sequence const sequence<t>& nstarray<t>& (outparam) short int1
6_t int1
6_t int1
6_t unrestricted double double double double unrestricted float float float float ...
... unsigned long uint32_t uint32_t uint32_t unsigned long long uint
64_t uint
64_t uint
64_t unsigned short uint1
6_t uint1
6_t uint1
6_t usvstring const nsastring& mozilla::dom::domstring& (outparam) nsastring& (outparam) nsstring& (outparam) nsstring any any is represented in three different ways, depending on use: any arguments become js::handle<js::value>.
...arg); }; will correspond to these c++ function declarations: int1
6_t myattr(); void setmyattr(int1
6_t value); int
64_t mymethod(const nullable<uint32_t>& arg); floating point types floating point webidl types are mapped to the c++ type of the same name.
...And 7 more matches
Using js-ctypes
the 1
6-bit system directory.
...line
6 declares msgbox() to be a method that calls the windows function messageboxw.
... note: this example will not work on
64bit os x, see below for core foundation for
64bit os x /* build a str255 ("pascal style") string from the passed-in string */ function makestr(str) { return string.fromcharcode(str.length) + str; } components.utils.import("resource://gre/modules/ctypes.jsm"); var carbon = ctypes.open("/system/library/frameworks/carbon.framework/carbon"); stdalert = carbon.declare("standardalert", /* ...
...And 7 more matches
Migrating from Firebug - Firefox Developer Tools
this may be changed in bug 12
69730.
...it is currently missing the preview for html, xml and svg, though, which is tracked in bug 1247392 and bug 12
6279
6, 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 10
67318 and bug 8154
64.
...And 7 more matches
Using the CSS Painting API - Web APIs
*/ paint(ctx) { ctx.fillstyle = 'hsla(55, 90%,
60%, 1.0)'; ctx.fillrect(0, 15, 200, 20); /* order: x, y, w, h */ } }); in this class example we have defined a single context option with the contextoptions() function: we returned a simple object stating alpha transparency is allowed.
... we define the fillstyle as being hsla(55, 90%,
60%, 1.0), which is a shade of yellow, and then call fillrect() to create a rectangle of that color.
... the code to do this looks like so: registerpaint('headerhighlight', class { static get contextoptions() { return { alpha: true }; } /* ctx is the 2d drawing context size is the paintsize, the dimensions (height and width) of the box being painted */ paint(ctx, size) { ctx.fillstyle = 'hsla(55, 90%,
60%, 1.0)'; ctx.fillrect( 0, size.height / 3, size.width * 0.4, size.height * 0.
6 ); } }); this code example has two differences from our first example: we've included a second argument, which is the paint size.
...And 7 more matches
Applying styles and colors - Web APIs
// these all set the fillstyle to 'orange' ctx.fillstyle = 'orange'; ctx.fillstyle = '#ffa500'; ctx.fillstyle = 'rgb(255, 1
65, 0)'; ctx.fillstyle = 'rgba(255, 1
65, 0, 1)'; a fillstyle example in this example, we once again use two for loops to draw a grid of rectangles, each in a different color.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i <
6; i++) { for (var j = 0; j <
6; j++) { ctx.fillstyle = 'rgb(' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ', 0)'; ctx.fillrect(j * 25, i * 25, 25, 25); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample a strokestyle example this example is similar to the ...
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i <
6; i++) { for (var j = 0; j <
6; j++) { ctx.strokestyle = 'rgb(0, ' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ')'; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample transparency in addition to drawing opaque shapes to the canvas, we can also draw semi-transparent (...
...And 7 more matches
Basic animations - Web APIs
the number of callbacks is usually
60 times per second and may be reduced to a lower rate when running in background tabs.
... var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/145
6/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ...
...ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) /
60) * time.getseconds() + ((2 * math.pi) /
60000) * time.getmilliseconds()); ctx.translate(105, 0); ctx.fillrect(0, -12, 40, 24); // shadow ctx.drawimage(earth, -12, -12); // moon ctx.save(); ctx.rotate(((2 * math.pi) /
6) * time.getseconds() + ((2 * math.pi) /
6000) * time.getmilliseconds()); ctx.translate(0, 28.5); ctx.drawimage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginpath(); ctx.arc(150, 150, 105, 0, math.pi * 2, false); // earth orbit ctx.stroke(); ctx.drawimage(sun, 0, 0, 300, 300); window.requestanimationframe(draw); } init(); <canvas id="canvas" width="300" height="300"></canvas...
...And 7 more matches
IDBKeyRange - Web APIs
on iossamsung internetidbkeyrangechrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
... yesboundchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
... 52chrome android full support 52firefox android full support yesopera android full support 41safari ios full support 10.3samsung internet android full support
6.0lowerchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full sup...
...And 7 more matches
NavigationPreloadManager - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreloadmanager experimentalchrome full support
62edge full support 18firefox no support nonotes no support nonotes notes implementation tracked in bug 1290958ie ?
... webview android full support
62chrome android full support
62firefox android no support nonotes no support nonotes notes implementation tracked in bug 1290958opera android full support 4
6safari ios ?
... samsung internet android full support 8.0disable experimentalchrome full support
62edge full support 18firefox no support nonotes no support nonotes notes implementation tracked in bug 1290958ie ?
...And 7 more matches
WindowOrWorkerGlobalScope.btoa() - Web APIs
the windoworworkerglobalscope.btoa() method creates a base
64-encoded ascii string from a binary string (i.e., a string object in which each character in the string is treated as a byte of binary data).
... return value an ascii string containing the base
64 representation of stringtoencode.
...in javascript strings are represented using the utf-1
6 character encoding: in this encoding, strings are represented as a sequence of 1
6-bit (2 byte) units.
...And 7 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 { f...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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
repeating-conic-gradient() - CSS: Cascading Style Sheets
syntax /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */ background: repeating-conic-gradient( from 3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%,
60%) 10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
... if neither the first nor the last color stops include include a a color stop angle greater than 0deg or less than 3
60 degrees respectively, the conic-gradient will not repeat.
... to create a conic gradient that doe not repeat, make the gradient a full 3
60 degree rotation, or use the conic-gradient() function instead.
...And 7 more matches
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.875rem; 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.0971
659919028340080971
659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to ...
...s mentioned earlier, a data-state attribute is now used to indicate whether the video controls are visible or not and these also need to be styled: .controls[data-state=hidden] { display:none; } .controls[data-state=visible] { display:block; } there are a number of properties that also need to be set for all elements within the video controls: .controls > * { float:left; width:3.90
625%; height:100%; margin-left:0.1953125%; display:block; } .controls > *:first-child { margin-left:0; } all elements are floated left, as they are to be aligned next to one another, and each element is set to have a width of nearly 4% (again the actual value was calculated based on the required dimensions of the buttons), and a height of 100%.
... 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.390
625%; } buttons the first major styling task to tackle is to make the video control's buttons actually look like and act like real buttons.
...And 7 more matches
<input type="tel"> - HTML: Hypertext Markup Language
additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, telephone number inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum length, in utf-1
6 characters, to accept as a valid input minlength the minimum length that is considered valid for the field's contents pattern a regular expression the entered value must match to pass constraint validation placeholder an example value to display inside the field when it has no value readonly a boolean attribute which, if present, indicates that the ...
... maxlength the maximum number of characters (as utf-1
6 code units) the user can enter into the telephone number field.
... the input will fail constraint validation if the length of the text entered into the field is greater than maxlength utf-1
6 code units long.
...And 7 more matches
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
html "0.c" - from january 23, 1991 though november 23, 1992 this early version of html introduced <nextid> in a non-sgml compliant form that simply used the numeric value alone as an "attribute." html "0.d" - from november 2
6, 1992 through may 24, 1993 during this span, next and the oldest surviving dtd's show <nextid> to take only a number for a value of its newly-introduced attribute n.
...this continues for the next three sections, z5, z
6, and z7 (and table of contents entries named z1, z2, and z3), each automatically given anchors with these names.
...as applicable for the head of this document> <nextid n="z20"> </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="#z
6">original third (now fifth) section heading</a> <a name="z3" href="#z7">original fourth (now sixth) section heading</a> <a name="z10" href="#z1
6">seventh section heading</a> <a name="z11" href="#z17">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">fir...
...And 7 more matches
Array.prototype.reduce() - JavaScript
lue }) the callback would be invoked four times, with the arguments and return values in each call being as follows: callback iteration accumulator currentvalue currentindex array return value first call 0 1 1 [0, 1, 2, 3, 4] 1 second call 1 2 2 [0, 1, 2, 3, 4] 3 third call 3 3 3 [0, 1, 2, 3, 4]
6 fourth call
6 4 4 [0, 1, 2, 3, 4] 10 the value returned by reduce() would be that of the last callback invocation (10).
...=> { return accumulator + currentvalue }, 10) callback iteration accumulator currentvalue currentindex array return value first call 10 0 0 [0, 1, 2, 3, 4] 10 second call 10 1 1 [0, 1, 2, 3, 4] 11 third call 11 2 2 [0, 1, 2, 3, 4] 13 fourth call 13 3 3 [0, 1, 2, 3, 4] 1
6 fifth call 1
6 4 4 [0, 1, 2, 3, 4] 20 the value returned by reduce() in this case would be 20.
... polyfill // production steps of ecma-2
62, edition 5, 15.4.4.21 // reference: http://es5.github.io/#x15.4.4.21 // https://tc39.github.io/ecma2
62/#sec-array.prototype.reduce if (!array.prototype.reduce) { object.defineproperty(array.prototype, 'reduce', { value: function(callback /*, initialvalue*/) { if (this === null) { throw new typeerror( 'array.prototype.reduce ' + 'called on null or undefined' ); } if (typeof callback !== 'function') { throw new typeerror( callback + ' is not a function'); } // 1.
...And 7 more matches
String.prototype.charCodeAt() - JavaScript
the charcodeat() method returns an integer between 0 and
65535 representing the utf-1
6 code unit at the given index.
... the utf-1
6 code unit matches the unicode code point for code points which can be represented in a single utf-1
6 code unit.
... if the unicode code point cannot be represented in a single utf-1
6 code unit (because its value is greater than 0xffff) then the code unit returned will be the first part of a surrogate pair for the code point.
...And 7 more matches
parseInt() - JavaScript
radix optional an integer between 2 and 3
6 that represents the radix (the base in mathematical numeral systems) of the string.
... or nan when the radix is smaller than 2 or bigger than 3
6, or the first non-whitespace character cannot be converted to a number.
...(for example, a radix of 10 converts from a decimal number, 8 converts from octal, 1
6 from hexadecimal, and so on.) for radices above 10, letters of the english alphabet indicate numerals greater than 9.
...And 7 more matches
begin - SVG: Scalable Vector Graphics
the time syntax is based upon the syntax defined in iso 8
601.
... examples offset example <svg width="120" height="120" viewbox="0 0 120 120" 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" dur="8s" fill="freeze" /> </rect> <rect x="35" y="
60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" begin="2s" dur="
6s" fill="freeze" /> </rect> <rect x="
60" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="4s" dur="4s" fill="freeze" /> </rect> <!-- grid --> <te...
...xt x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" /> <text x="
60" y="20" text-anchor="middle">4s</text> <line x1="
60" y1="25" x2="
60" y2="105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">
6s</text> <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" st...
...And 7 more matches
Forms related code snippets - Archive of obsolete content
nzindex++; 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"); ...
...document.attachevent("onmousedown", ondocclick) : (document.onmousedown = ondocclick); })(); </script> <style type="text/css"> table.zdp-calendar { border: 1px solid #
666666; border-collapse: collapse; background-color: #cccccc; cursor: default; font-family: verdana; font-size: 12px; } table.zdp-calendar th { border: 1px solid #
666666; font-weight: bold; background-color: #ff
6666; } table.zdp-calendar td { border: 1px solid #
666666; text-align: center; } table.zdp-calendar caption { background-color: #333333; padding: 2px; } span.zdp-...
...current-month { display: inline-block; width: auto; height: 1
6px; padding: 0 2px; line-height: 1
6px; margin: 0 auto; background-color: #999999; border-radius: 5px; } span.zdp-increase-month, span.zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; padding: 0 2px; height: 1
6px; font-weight: bold; background-color: #999999; border-radius: 5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer; color: #000000; text-align: center; vertical-align: middle; } td.zdp-active-cell:hover { background-color: #999999; cursor: ...
...And 6 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
<!-- 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>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</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>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</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>sha25
6:78fc1d2887eda35b4ad2e3a0b
60120ca271ce
6e
64ad2e3a0b
60120ca271ce
6e
6</em:updatehash> </rdf:description> </em:targetapplication...
... in the update manifest delivered from the updateurl the updatelink must be specified in one of the following ways: the updatelink to the xpi file must use https the updatelink can use http and you must include an updatehash for the xpi file using sha1, sha25
6, sha384 or sha512 hash algorithms.
...And 6 more matches
Adobe Flash - Archive of obsolete content
detecting the right flash plugin (and browser) adobe flash has exposed the scriptability feature in netscape gecko browsers since flash
6r49 and later.
... versions of flash prior to flash
6r49 (such as flash 5) are not scriptable in netscape gecko browsers.
...for example, the current flash plugin version is flash
6 r79.
...And 6 more matches
ECMAScript 2015 support in Mozilla - Archive of obsolete content
code-named "es.next", "harmony", or "ecmascript
6", the first working draft (based on ecmascript 5.1) was published on july 12, 2011 as "es.next".
...finally, ecma-2
62 edition
6 got officially approved and published as a standard on june 17, 2015 by the ecma general assembly.
... it will also appear as the international industry standard iso/iec 1
62
62:201
6.
...And 6 more matches
Examples - Archive of obsolete content
please note that the examples 4, 5 and
6 require a file named style.css to exist in the same directory as the example.
... </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/9e
64asf935.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html> back to the article problem 3 <!-- this file should have a .xhtml extension and will generate an error when parsed.
... </p> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e
64asf935.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html> back to the article example 2 <!-- this file should have a .xml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 2 - xht...
...And 6 more matches
How can we design for all types of users? - Learn web development
for instance, if in your css you declare this: body { font-size:1
6px; } … you are telling the browser that whatever happens, the font size must be 1
6 pixels.
... modern browsers get around this rule by pretending that you're asking for "1
6 pixels when the user sets a zoom factor of 100%".
... yet, for many years internet explorer adamantly displayed 1
6 pixels as 1
6 pixels.
...And 6 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: 1
6px; } .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.
...s long as you do not stop.</p> <p>i also love the concept of positive thinking, 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: 1
6px; } .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.
...ve focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 50px; width: 95%"> <p>nasa sure does some exciting work.</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: 1
6px; } .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.
...And 6 more matches
Firefox UI considerations for web developers
otherwise, bitmapped icons which are at least 9
6 pixels wide are considered.
... if one is found to have a width of exactly 9
6 pixels, it is used.
... otherwise, the smallest image larger than 9
6 pixels wide is selected.
...And 6 more matches
HTTP Cache
unimplemented or underimplemented functionality: asyncevictstorage (bug 9777
66), asyncvisitstorage (bug 91
6052) 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.
...immediately); there is currently no way to opt out of this feature (watch bug 93818
6).
... this can only be engaged for resumable responses that (bug 9
60902) don't need revalidation.
...And 6 more matches
Creating localizable web applications
bad: <p id="breadcrumbs"> <?printf(_("<a href=\"%s\">personas home</a> : <a href=\"%s\">sign in</a> : forgot your password?"), $locale_conf->url('/'), $locale_conf->url('/signin'));?> </p> snippet
6.
... snippet
6.
...printf( /* l10n: %s is a date */ _("<strong>added:</strong> %s"), $persona['date']);?></p> in snippet
6 the concatenation causes the ordering of the sentence to be fixed, while some grammars might require, for instance, to put the date in front of the "added" descriptor.
...And 6 more matches
TimerFirings logging
-99194
6880[7f4
6c3
65ba00]: [
6775] fn timer (slack 100 ms): layeractivitytracker -99194
6880[7f4
6c3
65ba00]: [
6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -99194
6880[7f4
6c3
65ba00]: [
6775] fn timer (one_shot 1
60 ms): nsbrowserstatusfilter::timeouthandler -99194
6880[7f4
6c3
65ba00]: [
6775] iface timer (one_shot 200 ms): 7f4
69
64d7f80 -1340
643584[7f4
6c3
65ec00]: [
6775] ...
... obs timer (slack 1000 ms): 7f4
6a95a0200 each line has the following information.
... -99194
6880[7f4
6c3
65ba00]: [
6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:181
6:0 711
6375
68[7f3219c48000]: [
6835] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:7231 711
6375
68[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 ja...
...And 6 more matches
about:memory
191.89 mb (100.0%) -- explicit ├───
63.15 mb (32.91%) -- window-objects │ ├──24.57 mb (12.80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.52%) -- active │ │ │ ├──10.57 mb (05.51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.
60 mb (01.3
6%) ++ 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(0x7f
69425b5800) │ ├──15.75 mb (08.21%) ++ top(http://techcrunch.com/, id=20) │ ├──12.85 mb (0
6.
69%) ++ top(http://arstechnica.com/, id=14) │ ├───
6.40 mb (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) │ └───3.59 mb (01.87%) ++ (4 tiny) ├───45.74 mb (23.84%) ++ js-non-window ├───33.73 mb (17.58%) ── heap-unclassified ├───22.51 mb (11.73%) ++ heap-overhead �...
...�────
6.
62 mb (03.45%) ++ images ├────5.82 mb (03.03%) ++ workers/workers(chrome) ├────5.3
6 mb (02.80%) ++ (1
6 tiny) ├────4.07 mb (02.12%) ++ storage ├────2.74 mb (01.43%) ++ startup-cache └────2.1
6 mb (01.12%) ++ xpconnect some expertise is required to understand the full details here, but there are various things worth pointing out.
...And 6 more matches
powermetrics
the following is example output from such an invocation: *** sampled system activity (fri sep 4 17: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 447.
66 274.83 120.35 221.74 firefox 84
627 77.59 55.55 15.37 2.59 91.42 42.12 204.47 ...
... plugin-container 84
628 377.22 37.18 43.91 18.5
6 178.
65 75.85 17.29 terminal
694 9.8
6 79.94 0.00 0.00 4.39 2.20 0.00 powermetrics 84
694 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 84
688 181.57 92.81 0.00 0.00 23.95 12.77 0.00 google chrome 84
681 57.2
6 7
6.07 4.39 0.00 23.75 12.97 0.00 google chrome helper 84
685 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.97 0.00 0.20 0.00 779.47 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 5
6.48 2
6.
65 com.apple.webkit.webcontent 84
679
64.21 84.
69 0.00 0.00 104.19 54.89 2
6.
66 com.apple.webkit.networking 84
678 2
6.89 58.89 0.40 0.00 1.
60 0.00 0.00 safari 84
67
6 1.5
6 55.74 0.00 0.00 ...
...And 6 more matches
Cryptography functions
ater pk11_changepw mxr 3.2 and later pk11_checkuserpassword mxr 3.2 and later pk11_cipherop mxr 3.2 and later pk11_clonecontext mxr 3.2 and later pk11_configurepkcs11 mxr 3.2 and later pk11_convertsessionprivkeytotokenprivkey mxr 3.
6 and later pk11_convertsessionsymkeytotokensymkey mxr 3.
6 and later pk11_copytokenprivkeytosessionprivkey mxr 3.11 and later pk11_createcontextbysymkey mxr 3.2 and later pk11_createdigestcontext mxr 3.2 and later pk11_creategenericobject mxr 3.12 and later ...
...mxr 3.2 and later pk11_getkeygen mxr 3.4 and later pk11_getkeylength mxr 3.2 and later pk11_getkeystrength mxr 3.2 and later pk11_getmechanism mxr 3.2 and later pk11_getminimumpwdlength mxr 3.4 and later pk11_getmodinfo mxr 3.
6 and later pk11_getmodule mxr 3.3 and later pk11_getmoduleid mxr 3.2 and later pk11_getnextgenericobject mxr 3.9.2 and later pk11_getnextsafe mxr 3.4 and later pk11_getnextsymkey mxr 3.4 and later pk11_getpadmechanism mxr 3.4 and la...
...ter pk11_getpbecryptomechanism mxr 3.12 and later pk11_getpbeiv mxr 3.
6 and later pk11_getpqgparamsfromprivatekey mxr 3.4 and later pk11_getprevgenericobject mxr 3.9.2 and later pk11_getprivatekeynickname mxr 3.4 and later pk11_getprivatemoduluslen mxr 3.2 and later pk11_getpublickeynickname mxr 3.4 and later pk11_getslotfromkey mxr 3.2 and later pk11_getslotfromprivatekey mxr 3.2 and later pk11_getslotid mxr 3.2 and later pk11_getslotinfo mxr 3.4 and later pk11_getslotna...
...And 6 more matches
NSS 3.21 release notes
201
6-01-07, this page has been updated to include additional information about the release.
... 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 7
627) is supported (bug 1117022) new info functions added for use during mid-handshake callbacks (bug 1084
669) 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 par...
...igured ssl_error_missing_extended_master_secret - error code for when the extended master secret is missing after having been negotiated ssl_error_unexpected_extended_master_secret - error code for receiving an extended master secret when previously not negotiated in sslt.h ssl_enable_extended_master_secret - configuration to enable the tls extended master secret extension (rfc 7
627) ssl_preinfo_version - used with sslpreliminarychannelinfo to indicate that a tls version has been selected ssl_preinfo_cipher_suite - used with sslpreliminarychannelinfo to indicate that a tls cipher suite has been selected ssl_preinfo_all - used with sslpreliminarychannelinfo to indicate that all preliminary information has been set notable changes in nss 3.21 nss now build...
...And 6 more matches
NSS tools : modutil
please contribute to the initial review in mozilla nss bug 83
6477[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.
... modutil supports several mechanisms: rsa, dsa, rc2, rc4, rc5, aes, des, dh, sha1, sha25
6, sha512, ssl, tls, md5, md2, random (for random number generation), and friendly (meaning certificates are publicly readable).
...for example: platforms { linux:5.4.08:x8
6 { modulename { "example pkcs #11 module" } modulefile { crypto.so } defaultmechanismflags{0x0000} cipherenableflags{0x0000} files { crypto.so { path{ /tmp/crypto.so } } setup.sh { executable path{ /tmp/setup.sh } } } } linux:
6.0.0:x8
6 { equivalentplatform { linux:5.4.08:x8
6 } } } both the install script and the required libraries must be bundled in a jar file, which is specifi...
...And 6 more matches
SpiderMonkey Internals
in addition to the interpreter, spidermonkey contains a just-in-time (jit) compiler, a garbage collector, code implementing the basic behavior of javascript values, a standard library implementing ecma 2
62-5.1 §15 with various extensions, and a few public apis.
... the representation is
64 bits and uses nan-boxing on all platforms, although the exact nan-boxing format depends on the platform.
...other values are encoded as a value and a type tag: on x8
6, arm, and similar 32-bit platforms, we use what we call "nunboxing", in which non-double values are a 32-bit type tag and a 32-bit payload, which is normally either a pointer or a signed 32-bit integer.
...And 6 more matches
Setting up the Gecko SDK
install the microsoft sdk, change all further in this example from c:\program files (x8
6)\ to c:\program files\ if you are running a 32-bit version of windows instead of a
64-bit.
... uncompress make.exe, libidl-0.
6.dll, glib-1.2.dll to the sdk's bin directory, d:\projects\xulrunner-sdk\bin.
... set include=c:\program files\microsoft sdks\windows\v7.0\include;c:\program files (x8
6)\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 6 more matches
Observer Notifications
the window id can be obtained from subject.queryinterface(components.interfaces.nsisupportspruint
64).data outer-window-destroyed nsidomwindow called when an outer window is disconnected from its docshell.
... the window id can be obtained from subject.queryinterface(components.interfaces.nsisupportspruint
64).data toplevel-window-ready nsiwindowwatcher called just after a new top level window has been opened and is ready, but has not yet loaded a document.
... http-on-examine-merged-response called instead of http-on-examine-response when a response will be read partially from cache, and partially from the network (http 20
6 or 304 response).
...And 6 more matches
nsIBinaryInputStream
inherits from: nsiinputstream last changed in gecko 1.7 method overview pruint8 read8(); pruint1
6 read1
6(); pruint32 read32(); pruint
64 read
64(); unsigned long readarraybuffer(in pruint32 alength, in jsval aarraybuffer); prbool readboolean(); void readbytearray(in pruint32 alength, [array, size_is(alength), retval] out pruint8 abytes); void readbytes(in pruint32 alength, [size_is(alength), retval] out string astring); acstring rea...
... read1
6() reads from the stream.
... pruint1
6 read1
6(); parameters none.
...And 6 more matches
nsIWebNavigation
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) this interface is implemented by the following components: * @mozilla.org/browser/shistory-internal;1 * @mozilla.org/browser/shistory;1 * @mozilla.org/embedding/browser/nswebbrowser;1 * @mozilla.org/docshell;1 gecko 1.9.2 note in gecko 1.9.2 (firefox 3.
6), the @mozilla.org/webshell;1 component no longer exists; you need to use @mozilla.org/docshell;1 instead.
... void goforward void gotoindex( in long index ) void loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiinputstream postdata, in nsiinputstream headers) void reload(in unsigned long reloadflags) void stop(in unsigned long stopflags) constants load flags constant value description load_flags_mask
65535 this flag defines the range of bits that may be specified.
... load_flags_is_refresh 1
6 this flag specifies that the load should have the semantics of an html meta-refresh tag (that is, that the cache should be bypassed).
...And 6 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.57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.5
6 mb (00.71%) -- objects │ │ │ │ │ ├──3.04 mb (00.
61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ malloc-heap │ │ │ │ │ └──0.00 mb (00.00%) ── non-hea...
...p/code/asm.js │ │ │ │ ├──2.43 mb (00.49%) -- shapes │ │ │ │ │ ├──1.47 mb (00.29%) ++ gc-heap │ │ │ │ │ └──0.9
6 mb (00.19%) ++ malloc-heap │ │ │ │ ├──1.03 mb (00.21%) -- scripts │ │ │ │ │ ├──0.72 mb (00.14%) ── gc-heap [2] │ │ │ │ │ └──0.31 mb (00.0
6%) ── malloc-heap/data [2] │ │ │ │ ├──0.80 mb (00.1
6%) -- 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.17%) -- (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.8
6 mb (01.78%) -- cached/window(https://www.google.de/?gws_rd=ssl) │ │ │ ├──4.23 mb (00.85%) -- layout │ │ │ │ ├──3.80 mb (00.7
6%) ── style-sets │ │ │ │ ├──0.29 mb (00.0
6%) ── pres-shell │ │ │ │ ├──0.05 mb (00.01%) ── rule-nodes │ │ │ ...
...And 6 more matches
Element.classList - Web APIs
g(div.classlist.contains("foo")); // add or remove multiple classes div.classlist.add("foo", "bar", "baz"); div.classlist.remove("foo", "bar", "baz"); // add or remove multiple classes using spread syntax const cls = ["foo", "bar"]; div.classlist.add(...cls); div.classlist.remove(...cls); // replace class "foo" with class "bar" div.classlist.replace("foo", "bar"); versions of firefox before 2
6 do not implement the use of several arguments in the add/remove/toggle methods.
... the following polyfill for both classlist and domtokenlist ensures full compliance (coverage) for all standard methods and properties of element.prototype.classlist for ie10-ie11 browsers plus nearly compliant behavior for ie
6-9.
...classlist", { enumerable: 1, get: function(val){ if (!hasownprop.call(this, "classlist")) polyfillclasslist(this); return this.classlist; }, configurable: 0, set: function(val){this.classname = val} }); } catch(e) { // less performant fallback for older browsers (ie
6-8): window[" ucl"] = polyfillclasslist; // the below code ensures polyfillclasslist is applied to all current and future elements in the doc.
...And 6 more matches
Guide to the Fullscreen API - Web APIs
prefixing note: currently, only firefox
64 and chrome 71 supports this unprefixed.
... alternate name uses the non-standard name: webkitisfullscreenedge full support ≤79 full support ≤79 full support ≤79alternate name alternate name uses the non-standard name: webkitisfullscreenfirefox full support
64 full support
64 no support 49 —
65disabled disabled from version 49 until version
65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true).
... no support 9 —
65alternate name alternate name uses the non-standard name: mozfullscreenie no support noopera full support 58 full support 58 full support 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 ...
...And 6 more matches
Basic concepts behind Web Audio API - Web APIs
say you've got a 1
6 x 1
6 image, but you want it to fill a 32x32 area.
...the left and right channels are stored like this: llllllllllllllllrrrrrrrrrrrrrrrr (for a buffer of 1
6 frames) this is very common in audio processing: it makes it easy to process each channel independently.
... the alternative is to use an interleaved buffer format: lrlrlrlrlrlrlrlrlrlrlrlrlrlrlrlr (for a buffer of 1
6 frames) this format is very common for storing and playing back audio without much processing, for example a decoded mp3 stream.
...And 6 more matches
Example and tutorial: Simple synth keyboard - Web APIs
pan>current waveform: </span> <select name="waveform"> <option value="sine">sine</option> <option value="square" selected>square</option> <option value="sawtooth">sawtooth</option> <option value="triangle">triangle</option> <option value="custom">custom</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width:
660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 1
6px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margi...
...-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0
6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; ...
... function createnotetable() { let notefreq = []; for (let i=0; i< 9; i++) { notefreq[i] = []; } notefreq[0]["a"] = 27.500000000000000; notefreq[0]["a#"] = 29.135235094880
619; notefreq[0]["b"] = 30.8
6770
632850775
6; notefreq[1]["c"] = 32.703195
662574829; notefreq[1]["c#"] = 34.
647828872109012; notefreq[1]["d"] = 3
6.708095989
675945; notefreq[1]["d#"] = 38.8908729
652
60113; notefreq[1]["e"] = 41.203444
614108741; notefreq[1]["f"] = 43.
653528929125485; notefreq[1]["f#"] = 4
6.249302838954299; notefreq[1]["g"] = 48.999429497718
661; notefreq[1]["g#"] = 5...
...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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 c...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 c...
...the first item in the example demonstrates this default alignment: * {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 c...
...And 6 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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">t...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; 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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; 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
font-size - CSS: Cascading Style Sheets
for example, if a parent element is set to 1
6px and its child element is set to larger, the child element displays larger than the parent element in the page.
...if you haven't set the font size anywhere on the page, then it is the browser default, which is often 1
6px.
... so, by default 1em = 1
6px, and 2em = 32px.
...And 6 more matches
max-width - CSS: Cascading Style Sheets
firefox supports applying max-width to table elements.opera android full support 14safari ios full support 1samsung internet android full support 1.0fit-content experimentalchrome full support 4
6 full support 4
6 full support 25prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 79 full support 79 full support 79prefixed prefixed implemented...
...also, the definition of fit-content is simpler than in css3 sizing.ie no support noopera full support 44safari full support
6.1prefixed full support
6.1prefixed prefixed implemented with the vendor prefix: -webkit- full support 2alternate name alternate name uses the non-standard name: intrinsicwebview android full support 4
6 full support 4
6 ...
... full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 4
6firefox android partial support 4prefixed notes partial support 4prefixed notes prefixed implemented with the vendor prefix: -moz-notes firefox implements the definitions given in css3 basic box.
...And 6 more matches
position - CSS: Cascading Style Sheets
depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at
60 fps, causing accessibility concerns for people with sensitivities and jank for everyone.
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/
6ff
6af
6fd4.jpg"></p> css body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to absolute positioning, with the exceptio...
...port 1edge full support 12firefox full support 1notes full support 1notes notes before firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 137930
6).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 ≤37chrome android ...
...And 6 more matches
text-overflow - CSS: Cascading Style Sheets
ellipsis this keyword value will display an ellipsis ('…', u+202
6 horizontal ellipsis) to represent clipped text.
... css value direction: ltr direction: rtl expected result live result expected result live result visible overflow 12345
67890 12345
67890 0987
654321 12345
67890 text-overflow: clip 12345
67890 12345
67890 text-overflow: '' 12345 12345
67890 54321 12345
67890 text-overflow: ellipsis 1234… 12345
67890 …4321 12345
67890 text-overflow: '.' 1234.
... 12345
67890 .4321 12345
67890 text-overflow: clip clip 12345
6 12345
67890
654321 12345
67890 text-overflow: clip ellipsis 1234… 12345
67890
6543… 12345
67890 text-overflow: clip '.' 1234.
...And 6 more matches
Microformats - HTML: Hypertext Markup Language
developer</a> on <time class="dt-published" datetime="2013-0
6-13 12:00:00">13<sup>th</sup> june 2013</time></p> <p class="p-summary">in which i extoll the virtues of using microformats.</p> <div class="e-content"> <p>blah blah blah</p> </div> </article> properties property description p-name entry name/title p-author who wrote the entry, optionally embedded h-card 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/jgmac110
6" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d
6c9cfed7ac8e849f492b5bc7e
6a
630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac110
6">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="https://quickthoughts.jgregorymcverry.com/profi...
...le/jgmac110
6">greg mcverry</a> published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published" datetime="2019-05-31t14:19:09+0000">31 may 2019</time></a></p> </div> { "items": [ { "type": [ "h-entry" ], "properties": { "in-reply-to": [ "/docs/web/html/microformats" ], "name": [ "hey thanks for making this microformats resource" ], "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ], "published": [ "2019-05-31t14:19:09+0000" ], "content": [ { "html": "hey thanks for making this microformats resource", "value": "hey thanks for ...
...And 6 more matches
HTTP response status codes - HTTP
the below status codes are defined by section 10 of rfc 2
61
6.
... 20
6 partial content this response code is used when the range header is sent from the client to request only part of a resource.
... 22
6 im used (http delta encoding) the server has fulfilled a get request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.
...And 6 more matches
Arrow function expressions - JavaScript
e the body of a function to return an object literal expression: params => ({foo: bar}) // rest parameters and default parameters are supported (param1, param2, ...rest) => { statements } (param1 = defaultvalue1, param2, …, paramn = defaultvaluen) => { statements } // destructuring within the parameter list is also supported var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); //
6 description see also "es
6 in depth: arrow functions" on hacks.mozilla.org.
... 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 arrow function is `return`, we can remove `return` and remove // the surrounding curly brackets elements.map(element => element.leng...
...th); // [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.
...And 6 more matches
Date.parse() - JavaScript
syntax direct call: date.parse(datestring) implicit call: new date(datestring) parameters datestring a string representing a simplification of the iso 8
601 calendar date extended format.
... date time string format the standard string representation of a date time string is a simplification of the iso 8
601 calendar date extended format.
... however, invalid values in date strings not recognized as simplified iso format as defined by ecma-2
62 may or may not result in nan, depending on the browser and values provided, e.g.: // non-iso string with invalid date values new date('23/25/2014'); will be treated as a local date of 25 november, 2015 in firefox 30 and an invalid date in safari 7.
...And 6 more matches
String.prototype.normalize() - JavaScript
the code point for "n" (u+00
6e) followed by the code point for the combining tilde (u+0303).
... let string1 = '\u00f1'; let string2 = '\u00
6e\u0303'; console.log(string1); // ñ console.log(string2); // ñ however, since the code points are different, string comparison will not treat them as equal.
... let string1 = '\u00f1'; // ñ let string2 = '\u00
6e\u0303'; // ñ console.log(string1 === string2); // false console.log(string1.length); // 1 console.log(string2.length); // 2 the normalize() method helps solve this problem by converting a string into a normalized form common for all sequences of code points that represent the same characters.
...And 6 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
svgexternalresourcesrequired removed never implemented svgelement.viewportelement and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 92145
6) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778
654) svgelement.tabindex implemented (bug 778
654) document.activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicseleme...
...nt.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 9999
64, bug 101932
6) allow leading and trailing whitespace in <length>, <angle>, <number> and <integer> implementation status unknown form feed (u+000c) in whitespace implementation status unknown svgelement.xmlbase, svgelement.xmllang and svgelement.xmlspace removed implementation status unknown svgviewspec removed implementation status unknown svgelement.style removed implementation status unknown svggraphicselement.gettransformtoelement() removed not removed yet svggraphicselement.getctm() on the outermost element implementation status unknown animval attribute alias of baseval implementation status unknown ...
... implementation status unknown auto as initial value for width and height attributes of <svg> implementation status unknown baseprofile and version attributes removed from <svg> implementation status unknown svgsvgelement.forceredraw() deprecated turned into a no-op (bug 7337
64) svgsvgelement.deselectall() deprecated not yet deprecated (bug 1302705) <switch> not affecting <style> implementation status unknown requiredfeatures attribute removed implementation status unknown svgsvgelement.currentview and svgsvgelement.usecurrentview removed svgsvgelement.currentview was never implemented, svgsvgelement.usecurrentview not re...
...And 6 more matches
Paths - SVG: Scalable Vector Graphics
<svg width="190" height="1
60" 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, 170 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, 170
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, 170 110" stroke="black" fill="transparent"/> </svg> the example above creates nine cubic bézier curves.
... <svg width="190" height="1
60" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 c 40 10,
65 10, 95 80 s 150 150, 180 80" stroke="black" fill="transparent"/> </svg> the other type of bézier curve, the quadratic curve called with q, is actually a simpler curve than the cubic one.
...And 6 more matches
Writing to Files - Archive of obsolete content
this example opens a file using the utf-1
6 encoding.
... var stream = io.newinputstream(file, "text", "utf-1
6"); this third argument is not needed to write using utf-8.
... write1
6 will write two bytes to the stream.
...And 5 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
this data should be base-
64 encoded, as described by rfc 1113.
... 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 17 18:3
6:25 1997 not after: sun oct 17 18:3
6: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:d7:de:e4:49:80:48:e
6:2a:2a:8
6: ed:27:40:4d:8
6:b3:05:c0:01:bb:50:15:c9:de:dc:85:19:22: 43:7d:45:
6d:71:4e:17:3d:f0:3
6:4b:5b:7f:a8:51:a3:a1:00: 98:ce:7f:47:50:2c:93:3
6:7c:...
...01:
6e:cb:89:0
6:41:72:b5:e9: 73:49:38:7
6:ef:b
6:8f:ac:49:bb:
63:0f:9b:ff:1
6:2a:e3:0e: 9d:3b:af:ce:9a:3e:48:
65:de:9
6:
61:d5:0a:11:2a:a2:80:b0: 7d:d8:99:cb:0c:99:34:c9:ab:25:0
6:a8:31:ad:8c:4b:aa:54: 91:f4:15 public exponent:
65537 (0x10001) extensions: identifier: certificate type critical: no certified usage: ssl client identifier: authority key identifier critical: no key identifier: f2:f2:0
6:59:90:18:47:51:f5:89:33:5a:31:7a:e
6:5c:fb:3
6: 2
6:c9 signature: algorithm: pkcs #1 md5 with rsa encryption signature:
6d:23:af:f3:d3:b
6:7a:df:90:df:cd:7e:18:
6c:01:
69:8e:54:
65:fc:0
6: 30:43:34:d1:
63:1f:0
6:7d:c3:40:a8:2a:82:c1:a4:83:2a:fb:2e:8f:fb: f0:
6d:ff:75:a3:78:f7:52:47:4
6:
62:97:1d:d9:c
6:11:0a:02:a2:e0:cc: 2a:75:
6c:8b:b
6:9b:...
...And 5 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(197,93,1
61); } a value in css is a way to define a collection of allowable sub-values.
... unit name equivalent to cm centimeters 1cm = 9
6px/2.54 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/40th of 1cm in inches 1in = 2.54cm = 9
6px pc picas 1pc = 1/
6th of 1in pt points 1pt = 1/72th of 1in px pixels 1px = 1/9
6th of 1in most of these values are more useful when used for print, rather than screen output.
... to start with, we set 1
6px as the font size on the <html> element.
...And 5 more matches
HTML text fundamentals - Learn web development
in html, each paragraph has to be wrapped in a <p> element, like so: <p>i am a paragraph, oh yes i am.</p> each heading has to be wrapped in a heading element: <h1>i am the title of the story.</h1> there are six heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, and <h
6>.
... 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: 1
6px; } .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; func...
...bel">press esc to move focus away from the code area (tab inserts a tab 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: 1
6px; } .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; func...
...And 5 more matches
Responsive images - Learn web development
you can see an example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width:
600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line.
...in this case, before each comma we write: a media condition ((max-width:
600px)) — you'll learn more about these in the css topic, but for now let's just say that a media condition describes a possible state that the screen can be in.
... in this case, we are saying "when the viewport width is
600 pixels or less".
...And 5 more matches
Handling common JavaScript problems - Learn web development
when developers make use of new/nascent javascript features (for example ecmascript
6 / ecmascript next features, modern web apis...) in their code, and find that such features don't work in older browsers.
... there are a number of modern javascript language features defined in recent versions of the specs (ecmascript
6 / ecmascript next) that simply won't work in older browsers.
...for example, you might use a polyfill like es
6-promise to make promises work in browsers where they are not supported natively.
...And 5 more matches
Debugging on Windows
changing/setting the executable to debug vc++
6.0: to change or set the executable to debug, go to project > settings..., debug tab and select general from the drop down list.
... command line parameters and environment variables vc++
6.0: to change or set the command line options, go to project > settings..., debug tab and select general from the drop down list.
... setting breakpoints in dlls which are not yet loaded in memory vc++
6.0: go to project > settings..., debug tab and select "additional dlls" from the drop down list.
...And 5 more matches
OS.File for the main thread
let promise = os.file.copy("oldname.txt", "newname.txt"); this example requires firefox 1
6 or a more recent version.
...reason) { console.log('writeatomic failed for reason:', areason); } ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/media/img/firefox/channel/toggler-beta.png?2013-0
6'; //do like this for images online img.src = path; example: append to file this example shows how to use open, write, and close to append to a file.
...if unspecified, files are created with a default mode of 0
600 (file is private to the user, the user can read and write).
...And 5 more matches
NSS 3.45 release notes
see bug 15483
60.
... note: in 3.45 the sslchannelinfo is left unmodified, while an upcoming change in 3.4
6 will set sslchannelinfo.authkeybits to that of the delegated credential for better policy enforcement.
... see bug 15
63078.
...And 5 more matches
NSS 3.51.1 release notes
notable changes in nss 3.51.1 bug 1
6179
68 - update delegated credentials implementation to draft-07.
... bugs fixed in nss 3.51.1 bug 1
619102 - add workaround option to include both dtls and tls versions in dtls supported_versions.
... bug 1
61905
6 - update readme: tls 1.3 is not experimental anymore.
...And 5 more matches
Enc Dec MAC Output Public Key as CSR
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include #include #include #include #include #include #include #include #include #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 1
6 #define ptext_mac_buffer_size 9
6 #define ciphersize 9
6 #define blocksize 32 #define default_key_bits 1024 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "...
..." #define pubkey_trailer "-----end pub key -----" #define ns_certreq_header "-----begin new certificate request-----" #define ns_certreq_trailer "-----end new certificate request-----" typedef enum { gen_csr, encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey = 5, lab =
6 } headertype; /* this is conditionalized because port_errortostring was introduced with nss 3.13.
... result; secstatus rv = secsuccess; print32 numbytes; void *exthandle; prarenapool *arena = null; prfiledesc *outfile = null; /* open the certificate request file to write */ outfile = pr_open(certreqfilename, pr_create_file | pr_rdwr | pr_truncate, 00
660); if (!outfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing (%ld, %ld).\n", certreqfilename, pr_geterror(), pr_getoserror()); goto cleanup; } /* create info about public key */ spki = seckey_createsubjectpublickeyinfo(pubk); if (!spki) { pr_fprintf(pr_stderr, "unable to create subject public key\n")...
...And 5 more matches
NSS Tools modutil
if so, the metainfo file for the netscape signing tool would include a line such as this: + pkcs11_install_script: pk11install the sample script file could contain the following: forwardcompatible { irix:
6.2:mips sunos:5.5.1:sparc }platforms { winnt::x8
6 { modulename { "fortezza module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { executable relativepath { %temp%/setup.exe } } win32/setup.hlp { relativepath { %temp%/setup.hlp } } ...
... win32/setup.cab { relativepath { %temp%/setup.cab } } } } win95::x8
6 { equivalentplatform {winnt::x8
6} } sunos:5.5.1:sparc { modulename { "fortezza unix module" } modulefile { unix/fort.so } defaultmechanismflags{0x0001} cipherenableflags{0x0001} files { unix/fort.so { relativepath{%root%/lib/fort.so} absolutepath{/usr/local/netscape/lib/fort.so} filepermissions{555} } xplat/instr.html { relativepath{%root%/docs/inst.html} absolutepath{/usr/local/netscape/docs/inst.html} filepermissions{555} } } } irix:
6.2:mips { equivalentplatform { sunos:5.5.1:sparc } }} script grammar the script file grammar is as follows: -...
...the following system names and platforms are currently defined by nspr: aix (rs
6000) bsdi (x8
6) freebsd (x8
6) hpux (hppa1.1) irix (mips) linux (ppc, alpha, x8
6) macos (powerpc) ncr (x8
6) nec (mips) os2 (x8
6) osf (alpha) reliantunix (mips) sco (x8
6) solaris (sparc) sony (mips) sunos (sparc) unixware (x8
6) win1
6 (x8
6) win95 (x8
6) winnt (x8
6) here are some examples of valid platform strings: irix:
6.2:mipssunos:5.5.1:sparclinux:2.0.32:x8
6win...
...And 5 more matches
Redis Tips
node.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
6379.
... in node, create client with explicit host and port like so: > var r = require('redis').createclient(
6379, '127.0.0.1') commands are asynchronous.
... redis> set foo 42 ok redis> incr foo (integer) 43 redis> incrby foo 17 (integer)
60 notice that these results come back as numbers, not strings.
...And 5 more matches
nsIStructuredCloneContainer
1.0
66 introduced gecko
6.0 inherits from: nsisupports last changed in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3) you can copy an object into an nsistructuredclonecontainer using initfromvariant() or initfrombase
64().
...you can also get a base-
64-encoded string containing a copy of the container's serialized data, using getdataasbase
64().
... method overview nsivariant deserializetovariant(); astring getdataasbase
64(); void initfrombase
64(in astring adata,in unsigned long aformatversion); void initfromvariant(in nsivariant adata); attributes attribute type description formatversion unsigned long get the version of the structured clone algorithm which was used to generate this container's serialized buffer.
...And 5 more matches
Standard OS Libraries
components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("user32.dll"); /* note: if you go to getcursorpos page on msdn, it says first argument is of structure point, so lets create that structure, * the link here shows that that x and y are type long which is ctypes.long */ // https://msdn.microsoft.com/en-us/library/windows/desktop/dd1
62805%28v=vs.85%29.aspx var point = new ctypes.structtype("tagpoint", [ { "x": ctypes.long }, { "y": ctypes.long } ]); /* declare the signature of the function we are going to call */ var getcursorpos = lib.declare('getcursorpos', ctypes.winapi_abi, ctypes.bool, point.ptr ); /* use it like this */ var point = point(); var ret = getcursorpos(point.address()); components.utils.repo...
...attempting to install firefox on a a non-gtk+ based linux build such as kaosx, which is qt based (details on kaosx at the time of this writing: kdelibs version 4.1.4.3, qt version 4.8.
6,
64bit) would install gtk+ libraries along with it in order to enable firefox to work on the qt system.
... // placeholder - example soon to come x11 x11 runs primarily on unix® and unix-like operating systems like linux, all of the bsd variants, sun solaris both native 32 and
64 bit support, solaris x8
6, mac os x (via darwin) as well as other platforms like os/2 and cygwin.
...And 5 more matches
Drawing shapes with canvas - Web APIs
rectangular shape example <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.fillrect(25, 25, 100, 100); ctx.clearrect(45, 45,
60,
60); ctx.strokerect(50, 50, 50, 50); } } this example's output is shown below.
...the clearrect() function then erases a
60x
60 pixel square from the center, and then strokerect() is called to create a rectangular outline 50x50 pixels within the cleared square.
...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 to see the connecting lines, you can remove the lines that call moveto().
...And 5 more matches
RTCPeerConnection.createDataChannel() - Web APIs
this string may not be longer than
65,535 bytes.
...while this value is a 1
6-bit unsigned number, each user agent may clamp it to whatever maximum it deems appropriate.
...while this value is a1
6-bit unsigned number, each user agent may clamp it to whatever maximum it deems appropriate.
...And 5 more matches
SubtleCrypto.digest() - Web APIs
supported values are: sha-1 (but don't use this in cryptographic applications) sha-25
6 sha-384 sha-512.
... sha-1 this algorithm is specified in fips 180-4, section
6.1, and produces an output 1
60 bits long.
... sha-25
6 this algorithm is specified in fips 180-4, section
6.2, and produces an output 25
6 bits long.
...And 5 more matches
WebGLRenderingContext.texImage2D() - Web APIs
possible values in both webgl1 and webgl2 format type channels bytes per pixel rgba unsigned_byte 4 4 rgb unsigned_byte 3 3 rgba unsigned_short_4_4_4_4 4 2 rgba unsigned_short_5_5_5_1 4 2 rgb unsigned_short_5_
6_5 3 2 luminance_alpha unsigned_byte 2 2 luminance unsigned_byte 1 1 alpha unsigned_byte 1 1 other possible values in webgl2 for the versions of teximage2d that take an arraybufferview or a glintptr offset sized format base format r bits g bits b bits a bi...
...derable texture filterable r8 red 8 ● ● r8_snorm red s8 ● rg8 rg 8 8 ● ● rg8_snorm rg s8 s8 ● rgb8 rgb 8 8 8 ● ● rgb8_snorm rgb s8 s8 s8 ● rgb5
65 rgb 5
6 5 ● ● rgba4 rgba 4 4 4 4 ● ● rgb5_a1 rgba 5 5 5 1 ● ● rgba8 rgba 8 8 8 8 ● ● rgba8_snorm rgba s8 s8 s8 s8 ● rgb10_a2 rgba 10 10 10 2 ● ● rgb10_a2ui rgba ui1...
...0 ui10 ui10 ui2 ● srgb8 rgb 8 8 8 ● srgb8_alpha8 rgba 8 8 8 8 ● ● r1
6f red f1
6 ● rg1
6f rg f1
6 f1
6 ● rgb1
6f rgb f1
6 f1
6 f1
6 ● rgba1
6f rgba f1
6 f1
6 f1
6 f1
6 ● r32f red f32 rg32f rg f32 f32 rgb32f rgb f32 f32 f32 rgba32f rgba f32 f32 f32 f32 r11f_g11f_b10f rgb f11 f11 f10 ● rgb9_e5 rgb 9 9 9 5 ● r8i red i8 ...
...And 5 more matches
Writing a WebSocket server in Java - Web APIs
this server conforms to rfc
6455, so it only handles connections from chrome version 1
6, firefox 11, ie 10 and higher.
... here's an implementation split into parts: import java.io.ioexception; import java.io.inputstream; import java.io.outputstream; import java.net.serversocket; import java.net.socket; import java.security.messagedigest; import java.security.nosuchalgorithmexception; import java.util.base
64; 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 127.0.0.1:80.\r\nwaiting for a connection..."); socket client = server.accept(); system.o...
... you must, obtain the value of sec-websocket-key request header without any leading and trailing whitespace link it with "258eafa5-e914-47da-95ca-c5ab0dc85b11" compute sha-1 and base
64 code of it write it back as value of sec-websocket-accept response header as part of a http response.
...And 5 more matches
Web Authentication API - Web APIs
note that it is absolutely critical that the challenge be a buffer of random information (at least 1
6 bytes) and it must be generated on the server in order to ensure the security of the registration process.
...the parameters to the create() call are passed to the authenticator, along with a sha-25
6 hash of the clientdatajson (only a hash is sent because the link to the authenticator may be a low-bandwidth nfc or bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
...the publickeycredential is sent back to the server using any desired formatting and protocol (note that the arraybuffer properties need to be be base
64 encoded or similar).
...And 5 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
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.212
6 * r + 0.7152 * g+ 0.0722 * 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 = b8b...
... according to the article, hypersensitive cones, the authors note that "by population, about
64% of the cones are red-sensitive, about 32% green sensitive, and about 2% are blue sensitive." surprisingly, although cones that are blue-sensitive typically make up the fewest number of cones, they are also the most "sensitive" to color.
... according to wikipedia's page on "shades of red", the color "carmine" is a saturated red in which, in its pigment form, mostly contains the red light with wavelengths longer than
600nm; the article makes the special note that "carmine" is close to the extreme spectrum.
...And 5 more matches
Border-radius generator - CSS: Cascading Style Sheets
<div class="ui-checkbox" data-topic='bottom-left'></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.4
6%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width:
66.08%; } .span_7 { width: 57.
62%; } .span_
6 { width: 49.1
6%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width:
6.8
6%; } /* sections * ========================================================================== */ .section {...
... clear: both; padding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .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 ie
6 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: 10...
...0%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 1
6px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5
679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5
679/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; backg...
...And 5 more matches
Using CSS gradients - CSS: Cascading Style Sheets
<div class="stacked-linear"></div> div { width: 200px; height: 200px; } .stacked-linear { background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(33
6deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); } using radial gradients radial gradients are similar to linear gradients, except that they radiate out from a central point.
... <div class="stacked-radial"></div> div { width: 200px; height: 200px; } .stacked-radial { background: radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), radial-gradient(circle at
6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), radial-gradient(circle at 93.3% 75%, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%) beige; border-radius: 50%; } using conic gradients the conic-gradient() css function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
...if the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 3
60 degrees.
...And 5 more matches
<length> - CSS: Cascading Style Sheets
ic equal to the used advance measure of the "水" (cjk water ideograph, u+
6c34) glyph found in the font used to render it.
...when used within the root element font-size, it represents its initial value (a common browser default is 1
6px, but user-defined preferences may modify this).
...thus, 1in is defined as 9
6px, which equals 72pt.
...And 5 more matches
perspective-origin - CSS: Cascading Style Sheets
html <section> <figure> <figcaption><code>perspective-origin: top left;</code></figcaption> <div class="container"> <div class="cube potl"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: top;</code></figcaption> <div class="container"> <div class="cube potm"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> <...
.../div> </div> </figure> <figure> <figcaption><code>perspective-origin: top right;</code></figcaption> <div class="container"> <div class="cube potr"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: left;</code></figcaption> <div class="container"> <div class="cube poml"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> </figure> ...
...<figure> <figcaption><code>perspective-origin: 50% 50%;</code></figcaption> <div class="container"> <div class="cube pomm"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: right;</code></figcaption> <div class="container"> <div class="cube pomr"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> </figure> <figure> <figcaption><cod...
...And 5 more matches
<hgroup> - HTML: Hypertext Markup Language
it groups a set of <h1>–<h
6> elements.
... permitted content one or more <h1>, <h2>, <h3>, <h4>, <h5>, and/or <h
6>.
... in other words, the <hgroup> element prevents any of its secondary <h1>–<h
6> children from creating separate sections of their own in the outline—as those <h1>–<h
6> elements otherwise normally would if they were not children of any <hgroup>.
...And 5 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>427311</td> <td><time datetime="2010-0
6-03">june 3, 2010</time></td> <td>0.00</td> </tr> <tr> <td>edvard galinski</td> <td>533175</td> <td><time datetime="2011-01-13">january 13, 2011</time></td> <td>37.00</td> </tr> <tr> <td>hoshi nakamura</td> <td>
601942</td> <td><time datetime="2012-07-23">july 23, 2012</time></td> <td>15.00</td> </tr> </table> css this simple css just adds a solid bla...
...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>427311</td> <td><time datetime="2010-0
6-03">june 3, 2010</time></td> <td>n/a</td> <td>0.00</td> </tr> <tr> <th>edvard galinski</td> <td>533175</td> <td><time datetime="2011-01013">january 13, 2011</time></td> <td><time datetime="2017-04008">april 8, 2017</time></td> <td>37.00</td> </tr> <tr> <th>hoshi nakamura</td> <td>
601942</td> <td><time datetime="2012-07-23">july 23, 2012</time></td> ...
... <table> <thead> <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> </thead> <tbody> <tr> <th scope="row">margaret nguyen</td> <td>427311</td> <td><time datetime="2010-0
6-03">june 3, 2010</time></td> <td>n/a</td> <td>0.00</td> </tr> <tr> <th scope="row">edvard galinski</td> <td>533175</td> <td><time datetime="2011-01013">january 13, 2011</time></td> <td><time datetime="2017-04008">april 8, 2017</time></td> <td>37.00</td> </tr> <tr> <th scope="row">hoshi nakamura</td> <td>
601942</td> <td><t...
...And 5 more matches
Evolution of HTTP - HTTP
on august
6th 1991, tim berners-lee's post on the public alt.hypertext newsgroup is now considered as the official start of the world wide web as a public project.
...in november 199
6, in order to solve these annoyances, an informational document describing the common practices has been published, rfc 1945.
...zilla/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, 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 201
6 10:55:30 gmt etag: "547fa7e3
69ef5
6031dd3bff2ace9fc0832eb251a" keep-alive: timeout=5, max=1000 last-modified: tue, 19 jul 201
6 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 ac...
...And 5 more matches
MIME types (IANA media types) - HTTP
it is defined and standardized in ietf's rfc
6838.
... with the exception of multipart/form-data, used in the post method of html forms, and multipart/byteranges, used with 20
6 partial content to send part of a document, http doesn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "save as" window if it doesn't know how to display the document).
...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 20
6 "partial content" response returned when the fetched data is only part of the content, such as is delivered using the range header).
...And 5 more matches
Configuring servers for Ogg media - HTTP
it must return 20
6: partial content to all byte range requests; otherwise, browsers can't be sure you actually support byte range requests.
... your server must also return 20
6: partial content for the request range: bytes=0- as well.
... by default, ffmpeg2theora uses one key frame every
64 frames (or about every 2 seconds at 30 frames per second), which works pretty well.
...And 5 more matches
Proxy Auto-Configuration (PAC) file - HTTP
examples: function alert_eval(str) { alert(str + ' is ' + eval(str)) } function findproxyforurl(url, host) { alert_eval('isinnet(host, "
63.245.213.24", "255.255.255.255")') // "pac-alert: isinnet(host, "
63.245.213.24", "255.255.255.255") is true" } dnsresolve() dnsresolve(host) parameters host hostname to resolve.
... example dnsresolve("www.mozilla.org"); // returns the string "104.1
6.41.2" convert_addr() syntax convert_addr(ipaddr) parameters ipaddr any dotted address such as an ip address or mask.
... example convert_addr("104.1
6.41.2"); // returns the decimal number 1745889538 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.
...And 5 more matches
HTTP resources and specifications - HTTP
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 hypertext transfer protocol (http/1.1): caching proposed standard rfc 58
61 http cache-control extensions for stale content informational rfc 824
6 http immutable responses proposed standard rfc 7235 hypertext transfer protocol (http/1.1): authentication proposed standard rfc
62
65 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 the 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 2397 the "data" url scheme proposed standard rfc 398
6 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 7578 returning values from forms: multipart/form-data proposed standard rfc
62
66 use of the content-disposition header field in the hypertext transfer protocol (http) proposed standard rfc 2183 communicating presentation information in internet messages: the content-disposition header field only a subset of syntax of the content-disposition header can be used in the context of http messages.
...And 5 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
javascript was first released with netscape 2 early in 199
6.
...many parts of the fourth edition formed the basis for ecmascript edition 5, published in december of 2009, and for the
6th major edition of the standard, published in june of 2015.
... 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.
...And 5 more matches
JavaScript language resources - JavaScript
ecmascript standardized by the ecma international standards organization in the ecma-2
62 and ecma-402 specifications.
... the following ecmascript standards have been approved or are being worked on: name links release date description current editions ecma-2
62 10th edition pdf, html, working draft, repository 2019 ecmascript 2019 language specification ecma-2
62 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-2
62 pdf june 1997 ecmascript: a general purpose, cross-platform programming language.
... ecma-2
62 2nd edition pdf august 1998 ecmascript language specification.
...And 5 more matches
RangeError: radix must be an integer - JavaScript
the javascript exception "radix must be an integer at least 2 and no greater than 3
6" occurs when the optional radix parameter of the number.prototype.tostring() or the bigint.prototype.tostring() method was specified and is not between 2 and 3
6.
... message rangeerror: invalid argument (edge) rangeerror: radix must be an integer at least 2 and no greater than 3
6 (firefox) rangeerror: tostring() radix argument must be between 2 and 3
6 (chrome) error type rangeerror what went wrong?
...its value must be an integer (a number) between 2 and 3
6, specifying the base of the number system to be used for representing numeric values.
...And 5 more matches
Features restricted to secure contexts - Web security
api chrome/opera edge safari 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
67 not supported not supported not supported...
...
61 15 11.1 in development (behind the dom.payments.request.enabled pref).
... push api 42 17 not supported 44 reporting api supported not supported not supported behind flag since fx
65 service workers 40 17 11.1 44 storage api 55 not supported not supported 51 web authentication api
65 in preview (17) in development
60 web bluetooth 5
6 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 contexts or apply other restrictions/security measures, despite the spec not requiring...
...And 5 more matches
panel - Archive of obsolete content
attaching panels to buttons you can attach a panel to a toggle button by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "1
6": "./icon-1
6.png", "32": "./icon-32.png", "
64": "./icon-
64.png" }, onchange: handlechange }); var mypanel = sdkpanels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } updatin...
... the add-on consists of six files: main.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-1
6.png, icon-32.png, and icon-
64.png: icons for the button in three different sizes "main.js" is saved in your add-on's lib directory, and the other files go in your add-on's data directory: my-addon/ data/ get-text.js icon-1
6.png icon-32.png icon-
64.png text-entry.html lib/ main.js the "main.js" looks like this: var data = require("sdk/s...
...var textentrypanel = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "1
6": "./icon-1
6.png", "32": "./icon-32.png", "
64": "./icon-
64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
...And 4 more matches
Signing an XPI - Archive of obsolete content
for windows, you'll want the nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc
6.0/winnt5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries.
...for windows you'll want the nspr-4.
6.zip package in the v4.
6/winnt5.0_opt.obj/ folder.
...in my case it's c:\apps\nspr-4.
6\ add path add the nss tools bin/ and lib/, and the nspr lib/ directories to the system path.
...And 4 more matches
Case Sensitivity in class and id Names - Archive of obsolete content
for example, there might be this css: p.warning {color: red; background: yellow;} ...coupled with this html: <p class="warning">warning!</p> in netscape
6, the paragraph in question will have neither red text nor a yellow background.
... as far as netscape
6 is concerned, warning and warning are two different identifiers, because html 4.01 defines class and id names to be case-sensitive.
...for example, you would not want to do something like: .urgent {color: purple;} .urgent {color: yellow;} even though these are technically two distinct class names, browsers other than netscape
6 will treat them as though they are the same thing.
...And 4 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
model (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-2
62, revision 3 (javascript 1.5): ecma-2
62 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform).
...browser sniffing is usually done through the useragent, such as: mozilla/5.0 (x11; u; linux i
68
6; en-us; rv:1.5) gecko/2003101
6 while using the useragent to sniff the browser provides detailed information on the browser in use, code that handles useragents often can make mistakes when new browser versions arrive, thus requiring code changes.
...for example, you can reference the non-breaking space character with 
60; or with its equivalent character reference .
...And 4 more matches
Monitoring downloads - Archive of obsolete content
try to avoid using it.this interface is deprecated as of firefox 2
6.
... var dbconn = this.storageservice.opendatabase(this.dbfile); statement = dbconn.createstatement("replace into items values " + "(?1, ?2, ?3, 0, 0.0, 0)"); statement.bindstringparameter(0, adownload.source.spec); statement.bindint
64parameter(1, adownload.size); statement.bindint
64parameter(2, adownload.starttime); statement.execute(); statement.reset(); dbconn.close(); break; // record the completion (whether failed or successful) of the download case components.interfaces.nsidownloadmanager.download_finished: case components.interfaces.nsidownloadmanager.download_failed: ...
... var dbconn = this.storageservice.opendatabase(this.dbfile); var statement = dbconn.createstatement("update items set size=?1, " + "endtime=?2, speed=?3, status=?4 where source=?5 and starttime=?
6"); statement.bindint
64parameter(0, adownload.size); statement.bindint
64parameter(1, endtime.gettime()); statement.binddoubleparameter(2, adownload.speed); statement.bindint32parameter(3, adownload.state); statement.bindstringparameter(4, adownload.source.spec); statement.bindint
64parameter(5, adownload.starttime); statement.execute(); statement.reset(); ...
...And 4 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
in the browser.xpi installation, this function appears at line 20: var err = initinstall("netscape seamonkey", "browser", "
6.0.0.2000110807"); 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.2000110807." see initinstall in the xpinstall api reference for more information on the initialization process.
...in the browser.xpi install script, the files are added in lines 2
6-41: err = adddirectory("program", "
6.0.0.2000110807", "bin", // jar source folder communicatorfolder, // target folder "", // target subdir true ); // force flag logcomment("adddirectory() returned: " + err); // create the plugins folder next t...
...And 4 more matches
SSL and TLS - Archive of obsolete content
for
64-bit machines, consider using stronger keys.
... all cas should use at least 2048-bit keys, and stronger keys (such as 3072 or 409
6 bits) if possible.
...advanced encryption standard (aes) ciphers have a fixed block size of 128-bits, and the keys can be either 128-bit or 25
6-bit.
...And 4 more matches
Browser Feature Detection - Archive of obsolete content
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% 9
6% / 9
6% dom css 2 100% 98%
67% 71% / 83% 38% / 42% test results cross reference dom co...
...re 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 document.createelement() true true true document.createdocumentfragment() 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 pres...
...ent 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.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.createcomment() true true true document.createcdatasection() true false true document.createprocessinginstruction() true false true ...
...And 4 more matches
Positioning - Learn web development
overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/
6ff
6af
6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: relative; background: yellow; top: 30px; left: 30px; } cool, huh?
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/
6ff
6af
6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } first of all, note that the gap where the positioned element should be in the document flow is no long...
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/
6ff
6af
6fd4.jpg"></p> body { width: 500px; margin: 0 auto; position: relative; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } the positioned element now sits relative to the <body> element.
...And 4 more matches
Fundamental text and font styling - Learn web development
this all starts with the root element of the entire document — <html> — the font-size of which is set to 1
6px as standard across browsers.
... any paragraph (or another element that doesn't have a different size set by the browser) inside the root element will have a final size of 1
6 px.
... <!-- document base font-size is 1
6px --> <article> <!-- if my font-size is 1.5em --> <p>my paragraph</p> <!-- how do i compute to 20px font-size?
...And 4 more matches
Styling lists - Learn web development
ese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 1
6px (1em) and a padding-left of 40px (2.5em.) the list items (<li> elements) have no set defaults for spacing.
... the <dl> element has a top and bottom margin of 1
6px (1em), but no padding set.
... the <dd> elements have margin-left of 40px (2.5em.) the <p> elements we've included for reference have a top and bottom margin of 1
6px (1em), the same as the different list types.
...And 4 more matches
Making decisions in your code — conditionals - Learn web development
for example, we could update our weather forecast application to show a further set of choices depending on what the temperature is: if (choice === 'sunny') { if (temperature < 8
6) { para.textcontent = 'it is ' + temperature + ' degrees outside — nice and sunny.
... let\'s go out to the beach, or the park, and get an ice cream.'; } else if (temperature >= 8
6) { para.textcontent = 'it is ' + temperature + ' degrees outside — really hot!
... to give you an and example, the previous example snippet can be rewritten to this: if (choice === 'sunny' && temperature < 8
6) { para.textcontent = 'it is ' + temperature + ' degrees outside — nice and sunny.
...And 4 more matches
Useful string methods - Learn web development
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.
...elow, replacing what's currently there if (greetings[i]) { let listitem = 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: 1
6px; } .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)...
...ities[i]; // write your code just below here let result = input; let listitem = document.createelement('li'); listitem.textcontent = result; 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: 1
6px; } .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)...
...And 4 more matches
Client-Server Overview - Learn web development
information about 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; wow
64) applewebkit/537.3
6 (khtml, like gecko) chrome/52.0.2743.11
6 safari/537.3
6 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=
6ynxs23n521lu21b1t13
6rhbv7ezngie; csrftoken=zipujsazv...
...
6pcgcbjscj1zu
6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1
68888
6003.1471911953; ffo=true the first and second lines contain most of the information we talked about above: the type of request (get).
... the final line contains information about the client-side cookies — you can see in this case the cookie includes an id for managing sessions (cookie: sessionid=
6ynxs23n521lu21b1t13
6rhbv7ezngie; ...).
...And 4 more matches
Simple Thunderbird build
this page covers the basic steps needed to build a bleeding-edge, development version of thunderbird
60 or later.
...you should copy 17 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 (x8
6)\windows kits\10\include\10.0.nnnnn.0\shared, where nnnnn is the highest number present on the system.
...do not copy mapi.h, it is already in c:\program files (x8
6)\windows kits\10\include\10.0.17134.0\um\mapi.h.
...And 4 more matches
About NSPR
nspr20, an effort started in 199
6, built on that original idea, though very little is left of the original code.
...the goal in this area is to provide a migration path between ipv4 and ipv
6.
... to that end it is possible to perform translations of ascii strings (dns names) into nspr's network address structures, with no regard to whether the addressing technology is ipv4 or ipv
6.
...And 4 more matches
NSS_3.12.2_release_notes.html
bug 200704: pkcs11: invalid session handle 0 bug 205434: fully implement new libpkix cert verification api from bug 294531 bug 302
670: use the installed libz.so where available bug 305
693: shlibsign generates pqg for every run bug 311483: exposing includecertchain as a parameter to sec_pkcs12addcertandkey bug 390527: get rid of pkixerrormsg variable in pkix_error bug 3915
60: libpkix does not consistently return pkix_validatenode tree that truly represent failure reasons bug 4082
60: certutil usage doesn't give enough...
... bug 4322
60: [[@ pkix_pl_httpdefaultclient_hdrcheckcomplete - pkix_pl_memcpy] crashes when there is no content-length header in the http response bug 43
6599: pkix: aia extension is not used in some bridge ca / known certs configuration bug 437804: certutil -r for cert renewal should derive the subject from the cert if none is specified.
... bug 444974: crash upon reinsertion of e-identity smartcard bug 4475
63: modutil -add prints no error explanation on failure bug 448431: pk11_createmergelog() declaration causes gcc warning when compiling with -wstrict-prototypes bug 449334: pk12util has duplicate options letters bug 449725: signver is still using static libraries.
...And 4 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 434
6) experimental support for dtls 1.0 (rfc 4347) and dtls-srtp (rfc 57
64) support for aes-ctr, aes-cts, and aes-gcm support for keying material exporters for tls (rfc 5705) 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 434
6) has been added (https://bugzilla.mozilla.org/show_bug.cgi?id=5
65047).
... experimental support for dtls (rfc 4347) and dtls-srtp (rfc 57
64) dtls client and server support has been added in nss 3.14.
...And 4 more matches
NSS 3.34 release notes
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-25
6 fingerprint: bf:ff:8f:d0:44:33:48:7d:
6a:8a:a
6:0c:1a:29:7
6: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-25
6 fingerprint: 85:
66:
6a:5
6:2e:e0:be:5c:e9:25:c1:d8:89:0a:
6f:7
6: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-25
6 fingerprint: 34:17:bb:0
6:cc:
60:07:da:1b:9
6:1c:92:0b:8a:b4:ce:3f:ad:82:0e:4a:a3:0b:9a:cb:c4:a7:4e:bd:ce:bc:
65 trust flags: websites, email cn = ssl.com ev root certification authority rsa r2 sha-25
6 fingerprint: 2e:7b:f1:
6c:c2:24:85:a7:bb:e2:aa:8
6:9
6:75:07:
61:b0:ae:39:be:3b:2f:e9:d0:cc:
6d:4e:f7:34:91:42:5c trust flags: websites cn = ssl.com ev root certification authority ecc sha-25
6 fingerprint: 22:a2:c1:f7:bd:ed:70:4c:c1:e7:01:b5:f4:08:c3:10:88:0f:e9:5
6:b5:de:2a:4a:44:f9:9c:87:3a:25:a7:c8 trust flags: websites cn = trustcor rootcert ca-1 sha-25
6 fingerprint: d4:0e:9c:8
6:cd:8f:e4:
68:c1:77:
69:59:f4:9e:a7:74:fa:54:8
6:84:b
6:c4:0
6:f3:90:92:
61:f4:dc:e2:57:5c trust flags: websites...
..., email cn = trustcor rootcert ca-2 sha-25
6 fingerprint: 07:53:e9:40:37:8c:1b:d5:e3:83:
6e:39:5d:ae:a5:cb:83:9e:50:4
6:f1:bd:0e:ae:19:51:cf:10:fe:c7:c9:
65 trust flags: websites, email cn = trustcor eca-1 sha-25
6 fingerprint: 5a:88:5d:b1:9c:01:d9:12:c5:75:93:88:93:8c:af:bb:df:03:1a:b2:d4:8e:91:ee:15:58:9b:42:97:1d:03:9c trust flags: websites, email the following ca certificates were removed: cn = certum ca, o=unizeto sp.
...And 4 more matches
TLS Cipher Suite Discovery
they must agree on these items: key establishment algorithm (such as rsa, dh, or ecdh) peer authentication algorithm (such as rsa, dsa, ecdsa) bulk data encryption algorithm (such as rc4, des, aes) and key size digest algorithm for message authentication checking (sha1, sha25
6) there are numerous available choices for each of those categories, and the number of possible combinations of all those choices is large.
... each cipher suite is represented by a 1
6-bit number.
...*/ ssl_import const pruint1
6 ssl_implementedciphers[]; /* number of entries in the above table.
...And 4 more matches
JS_ValueToECMAInt32
syntax jsbool js_valuetoecmaint32(jscontext *cx, jsval v, int32 *ip); jsbool js_valuetoecmauint32(jscontext *cx, jsval v, uint32 *ip); jsbool js_valuetouint1
6(jscontext *cx, jsval v, uint1
6 *ip); name type description cx jscontext * the context in which to perform the conversion.
... ip int32 * or uint32 * or int1
6 * out parameter.
... description js_valuetoecmaint32, js_valuetoecmauint32, and js_valuetouint1
6 convert a javascript value to various integer types as specified in the ecmascript specification.
...And 4 more matches
jschar
jschar is the type of javascript "characters", the 1
6-bit elements that make up strings.
... jschar, a typedef for the standard c++ type char1
6_t, will be removed in jsapi 38.
... functions that use jschar will use char1
6_t directly.
...And 4 more matches
nsIDOMWindowUtils
1.0
66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.4
6) implemented by: window.
..., in float ay, in unsigned long adirection, in double adelta, in long amodifiers); void sendtextevent(in astring acompositionstring, in long afirstclauselength, in unsigned long afirstclauseattr, in long asecondclauselength, in unsigned long asecondclauseattr, in long athirdclauselength, in unsigned long athirdclauseattr, in long acaretstart, in long acaretlength); obsolete since gecko 2
6 boolean sendtouchevent(in astring atype, [array, size_is(count)] in pruint32 aidentifiers, [array, size_is(count)] in print32 axs, [array, size_is(count)] in print32 ays, [array, size_is(count)] in pruint32 arxs, [array, size_is(count)] in pruint32 arys, [array, size_is(count)] in float arotationangles, [array, size_is(count)] in float aforces, in pruint32 count, in long amodifiers, [opt...
...pected_overflow_delta_x_negative 0x0040 wheel_event_expected_overflow_delta_y_zero 0x0100 wheel_event_expected_overflow_delta_y_positive 0x0200 wheel_event_expected_overflow_delta_y_negative 0x0400 mousescroll_prefer_widget_at_point 1 mousescroll_scroll_lines 2 mousescroll_win_scroll_lparam_not_null
6553
6 touch_hover 1 touch_contact 2 touch_remove 4 touch_cancel 8 ime_status_disabled 0 users cannot use ime at all.
...And 4 more matches
nsIHttpChannelInternal
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3) method overview void getrequestversion(out unsigned long major, out unsigned long minor); void getresponseversion(out unsigned long major, out unsigned long minor); void httpupgrade(in acstring aprotocolname, in nsihttpupgradelistener alistener); void setcookie(in string acookieheader); void setupfallbackchannel(in string afallbackkey); attributes attribute type description canceled boolean returns true if and only i...
...this may be either an ipv4 or ipv
6 address.
...see bug 534
698 and bug 52
6207.
...And 4 more matches
nsIPromptService
button_pos_1 25
6 this is the button used to cancel the prompt.
... button_pos_2
6553
6 this button can be used to give the user a choice of options, but still allowing the user to cancel the prompt.
... 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 127 this flag indicates that the label is passed as a separate string.
...And 4 more matches
nsIScrollable
inherits from: nsiscrollable last changed in gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.2
6) method overview long getcurscrollpos(in long scrollorientation); obsolete since gecko 29.0 long getdefaultscrollbarpreferences(in long scrollorientation); void getscrollbarvisibility(out boolean verticalvisible, out boolean horizontalvisible); void getscrollrange(in long scrollorientation, out long minpos, out long maxpos); obsolete since gecko 29.0 void setcurscrollpos(in long scrollorientation, in long curpos); obsolete since...
... methods getcurscrollpos() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.2
6) long getcurscrollpos( in long scrollorientation ); parameters scrollorientation an integer representing the orientation of the scrollbar.
... getscrollrange() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.2
6) void getscrollrange( in long scrollorientation, out long minpos, out long maxpos ); parameters scrollorientation an integer representing the orientation of the scrollbar.
...And 4 more matches
nsISupportsPrimitive
type_pruint1
6 6 corresponding to nsisupportspruint1
6.
... type_pruint
64 8 corresponding to nsisupportspruint
64.
... type_print1
6 11 corresponding to nsisupportsprint1
6.
...And 4 more matches
nsIURI
inherits from: nsisupports last changed in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3) see the following rfcs for details: rfc3490: internationalizing domain names in applications (idna) rfc398
6: uniform resource identifier (uri): generic syntax rfc3987: internationalized resource identifiers subclasses of nsiuri, such as nsiurl, impose further structure on the uri.
... note: ipv
6 addresses are not enclosed in square brackets.
...other parts are url-escaped per the rules of rfc398
6.
...And 4 more matches
nsIXPConnect
obsolete since gecko 2.0 void getdefaultsecuritymanager(out nsixpcsecuritymanager amanager, out pruint1
6 flags); nsixpcfunctionthistranslator getfunctionthistranslator(in nsiidref aiid); jsobjectptr getjsobjectofwrapper(in jscontextptr ajscontext, in jsobjectptr ajsobj); [noscript, notxpcom] nsisupports getnativeofwrapper(in jscontextptr ajscontext, in jsobjectptr ajsobj); void getsecuritymanagerforjscontext(in jscontextptr ajscontext, out nsixpcsecuritymanager ...
...amanager, out pruint1
6 flags); nsixpconnectwrappednative getwrappednativeofjsobject(in jscontextptr ajscontext, in jsobjectptr ajsobj); nsixpconnectwrappednative getwrappednativeofnativeobject(in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, in nsiidref aiid); nsixpconnectjsobjectholder getwrappednativeprototype(in jscontextptr ajscontext, in jsobjectptr ascope, in nsiclassinfo aclassinfo); jsval getwrapperforobject(in jscontextptr ajscontext, in jsobjectptr aobject, in jsobjectptr ascope, in nsiprincipal aprincipal, in unsigned long afilenameflags); native code only!
... void setdefaultsecuritymanager(in nsixpcsecuritymanager amanager, in pruint1
6 flags); nsixpcfunctionthistranslator setfunctionthistranslator(in nsiidref aiid, in nsixpcfunctionthistranslator atranslator); void setreportalljsexceptions(in boolean reportalljsexceptions); void setsafejscontextforcurrentthread(in jscontextptr cx); void setsecuritymanagerforjscontext(in jscontextptr ajscontext, in nsixpcsecuritymanager amanager, in pruint1
6 ...
...And 4 more matches
Using COM from js-ctypes
let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); // some groundwork let is
64bit; if (ctypes.voidptr_t.size == 4 /* 32-bit */) { is
64bit = false; } else if (ctypes.voidptr_t.size == 8 /*
64-bit */) { is
64bit = true; } let winabi = is
64bit ?
... ctypes.default_abi : ctypes.winapi_abi; let callback_abi = is
64bit ?
...etvolume': 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/ms
695279%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/ms
688715%28v=vs.85%29.aspx let couninitialize = lib.declare('couninitialize', winabi, void // return ); // http://msdn.microsoft.com/en-us/library/windows/desktop...
...And 4 more matches
Deprecated tools - Firefox Developer Tools
scratchpad scratchpad is deprecated as of firefox 70 (bug 15
65380), and will be removed as of firefox 72 (bug 1519103).
... webide and connect page webide was deprecated as of firefox
69 disabled as of firefox 70 (bug 1539451).
... removed as of firefox 71 (bug 15394
62).
...And 4 more matches
Network request details - Firefox Developer Tools
ect 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=7471
6 t=15
602580990744
60" }, { "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": "
673" }, { ...
...see https://en.wikipedia.org/wiki/special:centralautologin/p3p for more info.\"" }, { "name": "server", "value": "mw131
6.eqiad.wmnet" }, { "name": "server-timing", "value": "cache;desc=\"pass\"" }, { "name": "strict-transport-security", "value": "max-age=10
6384710; includesubdomains; preload" }, { "name": "vary", "value": "accept-encoding,treat-as-untrusted,x-forwarded-proto,cookie,authorization,x-seven" }, { "na...
... }, { "name": "x-analytics", "value": "ns=-1;special=badtitle;wmf-last-access=11-jun-2019;wmf-last-access-global=11-jun-2019;https=1" }, { "name": "x-cache", "value": "cp1075 pass, cp1075 pass" }, { "name": "x-cache-status", "value": "pass" }, { "name": "x-client-ip", "value": "204.210.158.13
6" }, { "name": "x-content-type-options", "value": "nosniff" }, { "name": "x-firefox-spdy", "value": "h2" }, { "name": "x-frame-options", "value": "sameorigin" }, { "name": "x-powered-by", "value": "hhvm/3.18.
6-dev" }, { "name": "x-search-id", "value": "esvan0r...
...And 4 more matches
Using images - Web APIs
data urls allow you to completely define an image as a base
64 encoded string of characters directly in your code.
... var img = new image(); // create new img element img.src = 'data:image/gif;base
64,r0lgodlhcwalaiaaaaaa3pn/zih5baeaaaealaaaaaalaasaaaiuha+hkcuo4lmnvindo7qyrixigbyaow=='; 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, 9
6); ctx.lineto(70,
66); ctx.lineto(103, 7
6); ctx.lineto(170, 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.
...And 4 more matches
SubtleCrypto.exportKey() - Web APIs
*/ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 25
6, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
... /* convert an arraybuffer into a string from https://developers.google.com/web/updates/2012/0
6/how-to-convert-arraybuffer-to-and-from-string */ function ab2str(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } /* export the given key and write it into the "exported-key" space.
... */ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase
64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase
64}\n-----end private key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
...And 4 more matches
WebGL best practices - Web APIs
in practice, effectively all systems support at least the following: max_cube_map_texture_size: 409
6 max_renderbuffer_size: 409
6 max_texture_size: 409
6 max_viewport_dims: [409
6,409
6] max_vertex_texture_image_units: 4 max_texture_image_units: 8 max_combined_texture_image_units: 8 max_vertex_attribs: 1
6 max_varying_vectors: 8 max_vertex_uniform_vectors: 128 max_fragment_uniform_vectors:
64 aliased_point_size_range: [1,100] your desktop may support 1
6k ...
...textures, or maybe 1
6 texture units in the vertex shader, but most other systems don't, and content that works for you will not work for them!
... a good pattern for "always give me the highest precision": #ifdef gl_fragment_precision_high precision highp float; #else precision mediump float; #endif essl100 minimum requirements (webgl 1) float think range min above zero precision highp float24* (-2^
62, 2^
62) 2^-
62 2^-1
6 relative mediump ieee float1
6 (-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 int17 (-2^1
6, 2^1
6) mediump int11 (-2^10, 2^10) lowp int9 (-2^8, 2^8) *float24: sign bit, 7-bit for exponent, 1
6-b...
...And 4 more matches
WindowOrWorkerGlobalScope.atob() - Web APIs
the windoworworkerglobalscope.atob() function decodes a string of data which has been encoded using base
64 encoding.
... syntax var decodeddata = scope.atob(encodeddata); parameters encodeddata a binary string contains an base
64 encoded data.
... exceptions domexception (name: invalidcharactererror) throws if encodeddata is not valid base
64.
...And 4 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
take this example: function cb() { f(); settimeout(cb, 0); } settimeout(cb, 0); setinterval(f, 0); in chrome and firefox, the 5th successive callback call is clamped; safari clamps on the
6th call; in edge its the 3rd one.
... gecko started to treat setinterval() like this in version 5
6 (it already did this with settimeout(); see below).
... firefox implements this behavior since version 5 (see bug
633421, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference).
...And 4 more matches
ARIA: grid role - Accessibility
eader" aria-label="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>2
6</td> <td>27</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 3
6</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 37</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 role="row"> <th scope="row" role="rowheader">week 38</th> <td role="gridcell" tabindex="-1"> 1
6 </td> <td role="gridcell" tabindex="-1"> 17 </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> ...
...And 4 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 ma...
...And 4 more matches
The stacking context - CSS: Cascading Style Sheets
the hierarchy of stacking contexts is organized as follows: root div #1 div #2 div #3 div #4 div #5 div #
6 it is important to note that div #4, div #5 and div #
6 are children of div #3, so stacking of those elements is completely resolved within div#3.
... notes: div #4 is rendered under div #1 because div #1's z-index (5) is valid within the stacking context of the root element, while div #4's z-index (
6) is valid within the stacking context of div #3.
... div #3's z-index is 4, but this value is independent from z-index of div #4, div #5 and div #
6, because it belongs to a different stacking context.
...And 4 more matches
max-height - CSS: Cascading Style Sheets
18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0fit-content experimentalchrome full support 4
6 full support 4
6 full support 25prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 79 full support 79 full support 79prefixed prefixed implemented...
...also, the definition of fit-content is simpler than in css3 sizing.ie no support noopera full support 44safari full support
6.1prefixed full support
6.1prefixed prefixed implemented with the vendor prefix: -webkit- full support 2alternate name alternate name uses the non-standard name: intrinsicwebview android full support 4
6 full support 4
6 ...
... full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 4
6 full support 4
6 full support 25prefixed prefixed implemented with the vendor prefix: -webkit-firefox android partial support 4prefixed notes partial support 4prefixed notes prefixed implemented with the vendor prefix: -moz-notes firefox implements the definitions given in css3 basic box.
...And 4 more matches
Setting up adaptive streaming media sources - Developer guides
<?xml version="1.0" encoding="utf-8"?> <mpd xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="urn:mpeg:dash:schema:mpd:2011" xsi:schemalocation="urn:mpeg:dash:schema:mpd:2011 dash-mpd.xsd" type="static" mediapresentationduration="pt
654s" minbuffertime="pt2s" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"> <baseurl>http://example.com/ondemand/</baseurl> <period> <!-- english audio --> <adaptationset mimetype="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="
64000"> <baseurl>elephantsdream_aac48k_0
64.mp4.dash</...
...baseurl> </representation> </adaptationset> <!-- video --> <adaptationset mimetype="video/mp4" codecs="avc1.42401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="2" bandwidth="100000" width="480" height="3
60"> <baseurl>elephantsdream_h2
64bpl30_0100.2
64.dash</baseurl> </representation> <representation id="3" bandwidth="175000" width="480" height="3
60"> <baseurl>elephantsdream_h2
64bpl30_0175.2
64.dash</baseurl> </representation> <representation id="4" bandwidth="250000" width="480" height="3
60"> <baseurl>elephantsdream_h2
64bpl30_0250.2
64.dash</baseurl> </representation> <representation id="5" bandwidth="500000" width="480" height="3
60"> <baseurl>elephantsdream_h2
64bpl30_050...
...0.2
64.dash</baseurl> </representation> </adaptationset> </period> </mpd> once you have generated your mpd file you can reference it from within the video tag.
...And 4 more matches
Audio and Video Delivery - Developer guides
for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="
640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="...
...norwegian"> <!-- fallback for browsers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions
640x480 pixels, displaying a poster image until the video is played.
... it's also possible to feed an <audio> element a base
64 encoded wav file, allowing to generate audio on the fly: <audio id="player" src="data:audio/x-wav;base
64,uklgrvc..."></audio> speak.js employs this technique.
...And 4 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
the value of the hue (h) component of an hsl color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 3
60°) that identifies what the base color is.
... here are some sample colors in hsl notation: table { border: 1px solid black; font: 1
6px "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><...
... .wrapper { width:
620px; height: 110px; margin: 0; padding: 10px; border:
6px solid mediumturquoise; } the .wrapper class is used to assign styles to the <div> that encloses all of our other content.
...And 4 more matches
<input type="password"> - HTML: Hypertext Markup Language
additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, password field inputs support the following attributes: attribute description maxlength the maximum length the value may be, in utf-1
6 characters minlength the minimum length in characters that will be considered valid pattern a regular expression the value must match in order to be valid placeholder an example value to display in the field when the field is empty readonly a boolean attribute which, if present, indicates that the field's contents should not be editable siz...
...e the number of characters wide the input field should be maxlength the maximum number of characters (as utf-1
6 code units) the user can enter into the password field.
... the input will fail constraint validation if the length of the text entered into the field is greater than maxlength utf-1
6 code units long.
...And 4 more matches
itemprop - HTML: Hypertext Markup Language
html <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 1
6, 1954)</span> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">trailer</a> </div> structured data item itemprop name itemprop value itemprop name avatar itemprop director james cameron itemprop genre science fiction itemprop trailer ../...
... <h1 itemscope> <data itemprop="product-id" value="9
678aou879">the instigator 2000</data> </h1> for numeric data, the meter element and its value attribute can be used.
... a meter element <div itemscope itemtype="http://schema.org/product"> <span itemprop="name">panasonic white
60l refrigerator</span> <img src="panasonic-fridge-
60l-white.jpg" alt=""> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <meter itemprop="ratingvalue" min=0 value=3.5 max=5>rated 3.5/5</meter> (based on <span itemprop="reviewcount">11</span> customer reviews) </div> </div> similarly, for date- and time-related data, the time element and its datetime attribute can be used.
...And 4 more matches
CSP: script-src - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
...And 4 more matches
HTTP range requests - HTTP
accept-ranges: bytes content-length: 14
6515 in this response, accept-ranges: bytes indicates that bytes can be used as unit to define a range.
... curl http://i.imgur.com/z4d4kwk.jpg -i -h "range: bytes=0-1023" the issued request looks like this: get /z4d4kwk.jpg http/1.1 host: i.imgur.com range: bytes=0-1023 the server responses with the 20
6 partial content status: http/1.1 20
6 partial content content-range: bytes 0-1023/14
6515 content-length: 1024 ...
... curl http://www.example.com -i -h "range: bytes=0-50, 100-150" the server responses with the 20
6 partial content status and a content-type: multipart/byteranges; boundary=3d
6b
6a41
6f9b5 header, indicating that a multipart byterange follows.
...And 4 more matches
Closures - JavaScript
here's the javascript: function makesizer(size) { return function() { document.body.style.fontsize = size + 'px'; }; } var size12 = makesizer(12); var size14 = makesizer(14); var size1
6 = makesizer(1
6); size12, size14, and size1
6 are now functions that resize the body text to 12, 14, and 1
6 pixels, respectively.
... document.getelementbyid('size-12').onclick = size12; document.getelementbyid('size-14').onclick = size14; document.getelementbyid('size-1
6').onclick = size1
6; <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id="size-1
6">1
6</a> run the code using jsfiddle.
...il"></p> <p>name: <input type="text" id="name" name="name"></p> <p>age: <input type="text" id="age" name="age"></p> function showhelp(help) { document.getelementbyid('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 1
6)'} ]; for (var i = 0; i < helptext.length; i++) { var item = helptext[i]; document.getelementbyid(item.id).onfocus = function() { showhelp(item.help); } } } setuphelp(); try running the code in jsfiddle.
...And 4 more matches
Expressions and operators - JavaScript
so, when the bitwise operators are applied to these values, the results are as follows: bitwise operator examples expression result binary description 15 & 9 9 1111 & 1001 = 1001 15 | 9 15 1111 | 1001 = 1111 15 ^ 9
6 1111 ^ 1001 = 0110 ~15 -1
6 ~ 0000 0000 ... 0000 1111 = 1111 1111 ... 1111 0000 ~9 -10 ~ 0000 0000 ... 0000 1001 = 1111 1111 ... 1111 0110 note that all 32 bits are inverted using the bitwise not operator, and that values with the most significant (left-most) bit set to 1 represent negative numbers (two's-complement repres...
... 9<<2 yields 3
6, because 1001 shifted 2 bits to the left becomes 100100, which is 3
6.
... 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 a
6 = false && 'cat'; // f && t returns false var a7 = 'cat' && false; // t && f returns false the following code shows examples of the || (logical or) operator.
...And 4 more matches
Functions - JavaScript
for example, the function square could have been defined as: const square = function(number) { return number * number } var x = square(4) // x gets the value 1
6 however, a name can be provided with a function expression.
...for example, here is a function that computes factorials recursively: function factorial(n) { if ((n === 0) || (n === 1)) return 1; else return (n * factorial(n - 1)); } you could then compute the factorials of 1 through 5 as follows: var a, b, c, d, e; a = factorial(1); // a gets the value 1 b = factorial(2); // b gets the value 2 c = factorial(3); // c gets the value
6 d = factorial(4); // d gets the value 24 e = factorial(5); // e gets the value 120 there are other ways to call functions.
... // the following variables are defined in the global scope var num1 = 20, num2 = 3, name = 'chamahk'; // this function is defined in the global scope function multiply() { return num1 * num2; } multiply(); // returns
60 // a nested function example function getscore() { var num1 = 2, num2 = 3; function add() { return name + ' scored ' + (num1 + num2); } return add(); } getscore(); // returns "chamahk scored 5" scope and the function stack recursion a function can refer to and call itself.
...And 4 more matches
Text formatting - JavaScript
it is a set of "elements" of 1
6-bit unsigned integer values (utf-1
6 code units).
...for example: const firststring = '2 + 2'; // creates a string literal value const secondstring = new string('2 + 2'); // creates a string object eval(firststring); // returns the number 4 eval(secondstring); // returns the string "2 + 2" a string object has one property, length, that indicates the number of utf-1
6 code units in the string.
... for example, the following code assigns hellolength the value 13, because "hello, world!" has 13 characters, each represented by one utf-1
6 code unit.
...And 4 more matches
Array.from() - JavaScript
polyfill array.from() was added to the ecma-2
62 standard in the
6th edition (es2015).
... polyfill notes: this algorithm is exactly as specified in ecma-2
62
6th edition (assuming object and typeerror have their original values and that callback.call() evaluates to the original value of function.prototype.call()).
... in addition, since true iterables cannot be polyfilled, this implementation does not support generic iterables as defined in the
6th edition of ecma-2
62.
...And 4 more matches
Math.fround() - JavaScript
description javascript uses
64-bit double floating-point numbers internally, which offer a very high precision.
...this can create confusion: checking a
64-bit float and a 32-bit float for equality may fail even though the numbers are seemingly identical.
... to solve this, math.fround() can be used to cast the
64-bit float to a 32-bit float.
...And 4 more matches
Operator precedence - JavaScript
console.log(3 + 10 * 2); // logs 23 console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous console.log((3 + 10) * 2); // logs 2
6 because the parentheses change the order left-associativity (left-to-right) means that it is processed as (a op1 b) op2 c, while right-associativity (right-to-left) means it is interpreted as a op1 (b op2 c).
... code output function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the division operator (/) console.log(echo("left",
6) / echo("right", 2)); evaluating the left side evaluating the right side 3 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the exponentiation operator (**) console.log(echo("left", 2) ** echo("right", 3)); evaluating the left side evaluating the right side 8 the difference in asso...
... code output function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the division operator (/) console.log(echo("left",
6) / echo("middle", 2) / echo("right", 3)); evaluating the left side evaluating the middle side evaluating the right side 1 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the exponentiation operator (**) console.log(echo("left", 2) ** echo("middle", 3) ** echo("right", 2)); evaluating the le...
...And 4 more matches
Animation performance and frame rate - Web Performance
responsive user interfaces have a frame rate of
60 frames per second (fps).
... while it is not always possible to maintain
60fps, it is important to maintain a high and steady frame rate for all animations.
...it's commonly accepted that
60 frames per second is the rate at which animations will appear smooth.
...And 4 more matches
end - SVG: Scalable Vector Graphics
the time syntax is based upon the syntax defined in iso 8
601.
... examples offset example <svg width="120" height="120" viewbox="0 0 120 120" 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 --> <te...
...xt x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" /> <text x="
60" y="20" text-anchor="middle">4s</text> <line x1="
60" y1="25" x2="
60" y2="105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">
6s</text> <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" st...
...And 4 more matches
Subresource Integrity - Web security
using subresource integrity you use the subresource integrity feature by specifying a base
64-encoded cryptographic hash of a resource (file) you’re telling the browser to fetch, in the value of the integrity attribute of any <script> or <link> element.
... an integrity value begins with at least one string, with each string including a prefix indicating a particular hash algorithm (currently the allowed prefixes are sha25
6, sha384, and sha512), followed by a dash, and ending with the actual base
64-encoded hash.
... example integrity string with base
64-encoded sha384 hash: sha384-oqvuafxrkap7fdgccy5uykm
6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc so oqvuafxrkap7fdgccy5uykm
6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc is the "hash" part, and the prefix sha384 indicates that it's a sha384 hash.
...And 4 more matches
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay length: 992 pages publisher: wrox; 2 edition (may 3, 2001) isbn: 07
64543814 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/07
64543814 xslt author: doug tidwell length: 473 pages publisher: o'reilly media; 1 edition (august 15, 2001) isbn: 059
6000537 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
... http://www.amazon.com/xslt-doug-tidwell/dp/059
6000537 learning xml, second edition author: erik t.
...And 4 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: 00
61 73
6d ; 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.
... each parameter has a type explicitly declared; wasm currently has four available number types (plus reference types; see the reference types) section below): i32: 32-bit integer i
64:
64-bit integer f32: 32-bit float f
64:
64-bit float a single parameter is written (param i32) and the return type is written (result i32), hence a binary function that takes two 32-bit integers and returns a
64-bit float would be written like this: (func (param i32) (param i32) (result f
64) ...
... so given the following function: (func (param i32) (param f32) (local f
64) local.get 0 local.get 1 local.get 2) the instruction local.get 0 would get the i32 parameter, local.get 1 would get the f32 parameter, and local.get 2 would get the f
64 local.
...And 4 more matches
widget - Archive of obsolete content
if the content is an image, it is automatically scaled to be 1
6x1
6 pixels.
... data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:1
60, contenturl: data.url("clock.html") }); require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png"), panel: clockpanel }); note that this is, at the moment, the only way you can attach a panel to a widget.
...if you assign the panel to the widget after construction, the panel can still be shown but will not be anchored to the widget: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:1
60, contenturl: data.url("clock.html") }); widget = require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png") }); widget.panel = clockpanel; // will not be anchored widget.panel.show(); also, if you try to call panel.show() inside your widget's click event listener, the panel will not be anchored: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:1
60, contenturl: data.url("clock.html...
...And 3 more matches
Actionscript Performance Tests - Archive of obsolete content
the runtests.py test harness works by parsing the abc stdout for lines like: 'metric time 5
66'.
...sunspider) $ ./runtests.py sunspider/*.as sunspider/as3/*.as test avm metric sunspider/access-binary-trees.as 584 time sunspider/access-fannkuch.as 3
64 time ...
...interp) $ ./runtests.py --vmargs="-dinterp" sunspider/*.as test avm metric sunspider/access-binary-trees.as
690 time sunspider/access-fannkuch.as 4
67 time ...
...And 3 more matches
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:37:0
6.410
67
6 current configuration: x
64-mac-tvm-release avm version: 52
60:
6d18992
61bac executing 2532 tests against vm: /users/build/hg/builds/52
60-
6d18992
61bac/mac/avmshell_
64 2532 running abcasm/abs_helper.as skipping...
...reason: inconsistencies in different debug output, need to implement regex matching of diffs 2527 running abcasm/branchtocommon.abs 2530 running abcasm/arithmetic.abs 2529 running abcasm/bkpt.abs 2528 running abcasm/bkptline.abs 252
6 running abcasm/bug_47
655
6.abs 2524 running abcasm/bug_49105
6.abs ...
...tests complete at 2010-09-28 10:39:2
6.751797 start date: 2010-09-28 10:38:07.221457 end date : 2010-09-28 10:39:2
6.751797 test time : 0:01:19.530340 passes : 59291 failures : 0 expected failures : 75 tests skipped : 7
6 the -f flag tells runtests.py to force recompilation of all the scripts.
...And 3 more matches
Reading from Files - Archive of obsolete content
this example opens a file using the utf-1
6 encoding.
... var stream = io.newinputstream(file, "text", "utf-1
6"); this third argument is not needed if the file is stored in utf-8.
...note that binary streams do not interpret characters within the stream, so the returned string will only have characters below 25
6, if you expect to use the data as text.
...And 3 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
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=1953371&start=
60 windows 7 aero not going into full screen mode properly on win7 with aero glass support firefox doesn't always go to full screen mode from a normal window properly.
... mac os x os x lion missing toolbar button icons due to firefox bug
679708 and bug 702558, some toolbar buttons icons may be missing on firefox 8 and later running on mac os x lion.
...the following css rules also need to be copied to the proper location in the browser.css file and modified as necessary: /* page proxy icon */ #page-proxy-favicon { width: 1
6px; height: 1
6px; margin: 1px 3px; list-style-image: url(chrome://browser/skin/identity-icons-generic.png); -moz-image-region: rect(0, 1
6px, 1
6px, 0); } .verifieddomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > ...
...And 3 more matches
Desktop gamepad controls - Game development
api status, browser and hardware support the gamepad api is still in working draft status, although browser support is already quite good — around
63% global coverage, according to caniuse.com.
...xbox 3
60 or ps3) should be suitable for web implementations.
...or storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on the screen when the device is connected: we can also show the id of the device — in the case above we're using the xbox 3
60 wireless controller.
...And 3 more matches
Responsive design - Learn web development
target / context = result for example, if our target column size is
60 pixels, and the context (or container) it is in is 9
60 pixels, we divide
60 by 9
60 to get a value we can use in our css, after moving the decimal point two places to the right.
... .col { width:
6.25%; /*
60 / 9
60 = 0.0
625 */ } this approach will be found in many places across the web today, and it is documented here in the layout section of our legacy layout methods article.
... h1 { font-size:
6vw; } the problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport.
...And 3 more matches
Styling links - Learn web development
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: #2
65301; } a:visited { color: #437a1
6; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px solid; background: #cdfeaa; } a:active { background: #2
65301; 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 ...
...eset.addeventlistener("click", function() { 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: #2
65301;\n}\n\na:visited {\n color: #437a1
6;\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: #2
65301;\n color: #cdfeaa;\n}'; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput); window.addeventlistener("load", draw...
...nt-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: blue; } a:visited { color: purple; } a:focus, a:hover { border-bottom: 1px solid; } a:active { color: red; } a[href*="http"] { background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; background-size: 1
6px 1
6px; padding-right: 19px; } so what's going on here?
...And 3 more matches
UI pseudo-classes - Learn web development
for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius:
6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.5
6, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox th...
...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: -2
6px; 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 generated on, for the purposes of positioning).
... 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: -2
6px; } 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 example, except that here we've split out the declarations t...
...And 3 more matches
What’s in the head? Metadata in HTML - Learn web development
in the mdn web docs sourcecode, you'll find this: <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f
6af.png"> <meta property="og:description" content="the mozilla developer network (mdn) provides information about open web technologies including html, css, and apis for both web sites and html5 apps.
...it is the first icon of this type: a 1
6-pixel square icon used in multiple places.
... a favicon can be added to your page by: saving it in the same directory as the site's index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ico format will ensure it works as far back as internet explorer
6.) adding the following line into your html's <head> block to reference it: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> here is an example of a favicon in a bookmarks panel: there are lots of other icon types to consider these days as well.
...And 3 more matches
Starting our Svelte Todo list app - Learn web development
replace the contents of the file public/global.css with the following: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font:
62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { ...
... border: 0; } button, input, optgroup, select, textarea { 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.31579; } } /*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-pre...
...ssed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn__primary:disabled { color: darkgrey; background-color:#5
65
65
6; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom...
...And 3 more matches
Working with Svelte stores - 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
6-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/0
6-stores remember to run npm install && npm run dev to start your app in development mode.
... repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a44943
66b179c87395940039?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.
...ert.subscribe(value => alertcontent = 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: #5
65
65
6; color: #fff; font-size: 0.875rem; 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.
...And 3 more matches
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={ec8030f7-c20a-4
64f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc
6} 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.
...see bug 43
6989.
...for example: binary-component component/mylib.dll abi=winnt_x8
6-msvc binary-component component/mylib.so abi=linux_x8
6-gcc3 see xpcom abi for more details.
...And 3 more matches
Command line options
user profile -allow-downgrade firefox
67'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
650078.
... note: on mac os x specifying a relative path is not supported anymore from firefox 4.0 and up due to a regression, see bug
673955.
...And 3 more matches
Debugging Frame Reflow
e 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 00b97c30 r=0 a=9180,4470 c=9180,4470 cnt=85
6 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=857 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=858 canvas 00b97c
6c r=0 a=9180,uc c=9180,4470 cnt=859 area 02d7afe4 r=0 a=9180,uc c=9180,uc cnt=8
60 text 02d7b150 r=0 a=9180,uc c=uc,uc cnt=8
61 text 02d7b150 d=0,0 block 02d7b210 r=0 a=9180,uc c=8940,uc cnt=8
62 block 02d7b210 d=8940,0 area 02d7afe4 d=9180,120 canvas 00b9...
...7c
6c d=9180,4470 scroll 00b97ee0 d=9180,4470 scroll 00b97ee0 d=9180,4470 vp 00b97c30 d=9180,4470 vp 00b97c30 r=1 a=9180,4470 c=9180,4470 cnt=8
63 scroll 00b97ee0 r=1 a=9180,4470 c=9180,4470 cnt=8
64 scroll 00b97ee0 r=1 a=9180,4470 c=9180,4470 cnt=8
65 canvas 00b97c
6c r=1 a=9180,uc c=9180,4470 cnt=8
66 area 02d7afe4 r=1 a=9180,uc c=9180,uc cnt=8
67 block 02d7b210 r=1 a=9180,uc c=8940,uc cnt=8
68 text 02d7b3f8 r=0 a=8940,uc c=uc,uc cnt=8
69 text 02d7b3f8 d=0,0 tblo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 tbl 02d7b7ec r=0 a=8940,uc c=1500,uc cnt=871 rowg 00b984a4 r=0 a=uc,uc c=uc,uc cnt=872 row 02d7baf8 r=0 a=uc,uc c=uc,uc cnt=873 cell 02d7bc98 r=0 a=uc,uc c=uc,uc cnt=874 block 02d7bcf8 r=0 a=uc,uc c=uc,uc cnt=875 text 02d7be...
...84 r=0 a=uc,uc c=uc,uc cnt=87
6 text 02d7be84 d=300,285 me=300 block 02d7bcf8 d=300,300 me=300 cell 02d7bc98 d=330,330 me=330 row 02d7baf8 d=uc,330 rowg 00b984a4 d=uc,330 colg 02d7bfb0 r=0 a=uc,uc c=uc,uc cnt=877 col 02d7c0d8 r=0 a=0,0 c=1500,uc cnt=878 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 row 02d7baf8 r=2 a=1500,uc c=1500,uc cnt=880 cell 02d7bc98 r=2 a=1440,uc c=1410,uc cnt=881 block 02d7bcf8 r=2 a=1410,uc c=1410,uc cnt=882 block 02d7bcf8 d=1410,300 cell 02d7bc98 d=1440,330 row 02d7baf8 d=1500,330 rowg 00b984a4 d=1500,330 colg 02d7bfb0 r=2 a=1500,uc c=1500,uc cnt=883 col 02d7c0d8 r=0 a=0,...
...And 3 more matches
How to get a stacktrace with WinDbg
(you'll want the 32-bit version, even if you are using a
64-bit version of windows) then install it, the standard settings in the installation process are fine.
... 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'.
...if you use the
64-bit version of windows, you need to replace "ntdll" in these commands with "ntdll32".
...And 3 more matches
MathML Demo: <mfrac> - fractions
inline, text style, normal line tan θ
67 , numerator and denominator should render script size.
... inline, display style, no line 1.2345
67 89 + x the end.
... inline, styles auto, display and text 1 2 - 1 2 + 1.2345
6 7890 , the rendering should be script-size, normal-size and script-size in this example.
...And 3 more matches
Using the viewport meta tag to control layout on mobile browsers
for example, if a mobile screen has a width of
640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the
640px space.
... enter viewport meta tag however, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at
640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.
...it can be set to a specific number of pixels like width=
600 or to the special value device-width, which is the width of the screen in css pixels at a scale of 100%.
...And 3 more matches
Mozilla Port Blocking
background on 08/15/2001, cert issued a vulnerability note vu#47
62
67 for a "cross-protocol" scripting attack, known as the html form protocol attack which allowed sending arbitrary data to most tcp ports.
... 101 hostriame 102 iso-tsap 103 gppitnp 104 acr-nema 109 pop2 110 pop3 111 sunrpc 113 auth 115 sftp 117 uucp-path 119 nntp 123 ntp 135 loc-srv / epmap 139 netbios 143 imap2 179 bgp 389 ldap 4
65 smtp+ssl 512 print / exec 513 login 514 shell 515 printer 52
6 tempo 530 courier 531 chat 532 netnews 540 uucp 55
6 remotefs 5
63 nntp+ssl 587 submission
601 syslog
63
6 ldap+ssl 993 imap+ssl 995 pop3+ssl ...
... 2049 nfs 4045 lockd
6000 x11 protocol specific exceptions each protocol handler can override the global blocked ports to allow it's own protocol to function.
...And 3 more matches
BloatView
== bloatview: all (cumulative) leak and bloat statistics, tab process 18
62 |<----------------class--------------->|<-----bytes------>|<----objects---->| | | per-inst leaked| total rem| 0 |total | 17 2484|253953338 38| 17 |asynctransactiontrackersholder | 40 40| 10594 1| 78 |compositorchild | 472 472| ...
... 1 1| 79 |condvar | 24 48| 308
6 2| 279 |messagepump | 8 8| 30 1| 285 |mutex | 20
60| 89987 3| 302 |pcompositorchild | 412 412| 1 1| 308 |pimagebridgechild | 41
6 41
6| 1 1| the first line tells you the pid of the leaking process, along with the type of process.
... class name instance size bytes allocated bytes allocated but not freed blank mozilla yahoo netscape total blank mozilla yahoo netscape total total 1754408 43255
6 179828 404184 277097
6 nsstr 20
62
61
600 3781900 1120920 1791340 129557
60 2227
60 487
60 13280 7
61
60 3
609
60 nshashkey 8
6105
68 1842400 2457872 1134592
6045432 32000 53
6 5
68 121
6 34320 nstexttransformer 548 8220 4
69088 141493
6 153275
6 3425000 0 0 0...
...And 3 more matches
Investigating leaks using DMD heap scan mode
the result of that grep will contain output that looks something like this: cc-edges.15873.log:0x7f0897082c00 [rc=1285] nsglobalwindowinner # 2147483
662 inner https://www.example.com/ * cc-edges.15873.log: the first part is the file name where it was found.
... the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483
662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
... known edges: 0x7f08975a24c0 [fragmentorelement (xhtml) head https://www.example.com] --[mattrsandchildren[i]]--> 0x7f0882fe3230 0x7f089
67e7b20 [js object (htmlscriptelement)] --[unwrapdomobject(obj)]--> 0x7f0882fe3230 the first two lines mean that the script element 0x7f0882fe3230 contains a strong reference to the eventlistenermanager 0x7f0899b4e550.
...And 3 more matches
NSPR Types
xamples of the use of these types: in dowhim.h: pr_extern( void ) dowhatimean( void ); static void pr_callback rootfunction(void *arg); in dowhim.c: pr_implement( void ) dowhatimean( void ) { return; }; prthread *thread = pr_createthread(..., rootfunction, ...); algebraic types nspr provides the following type definitions with unambiguous bit widths for algebraic operations: 8-, 1
6-, and 32-bit integer types
64-bit integer types floating-point number type for convenience, nspr also provides type definitions with platform-dependent bit widths: native os integer types 8-, 1
6-, and 32-bit integer types signed integers print8 print1
6 print32 unsigned integers pruint8 pruint1
6 pruint32
64-bit integer types different platforms treat
64-bit numeric fields ...
...some systems require emulation of
64-bit fields by using two 32-bit numeric fields bound in a structure.
... since the types (long long versus struct longlong) are not type compatible, nspr defines macros to manipulate
64-bit numeric fields.
...And 3 more matches
PRExplodedTime
syntax #include <prtime.h> typedef struct prexplodedtime { print32 tm_usec; print32 tm_sec; print32 tm_min; print32 tm_hour; print32 tm_mday; print32 tm_month; print1
6 tm_year; print8 tm_wday; print1
6 tm_yday; prtimeparameters tm_params; } prexplodedtime; description the prexplodedtime structure represents clock/calendar time.
...the range is [0,
61].
... the values
60 and
61 are for accommodating up to two leap seconds.
...And 3 more matches
PRNetAddr
syntax #include <prio.h> union prnetaddr { struct { pruint1
6 family; char data[14]; } raw; struct { pruint1
6 family; pruint1
6 port; pruint32 ip; char pad[8]; } inet; #if defined(_pr_inet
6) struct { pruint1
6 family; pruint1
6 port; pruint32 flowinfo; pripv
6addr ip; } ipv
6; #endif /* defined(_pr_inet
6) */ }; typedef union prnetaddr prnetaddr; fields the structure has the following fields: family address family: pr_af_inet|pr_af_inet
6 for raw.family, pr_af_inet for inet.family, pr_af_inet
6 for ipv
6.family.
... ip the actual 32 (for inet.ip) or 128 (for ipv
6.ip) bits of ip address.
...by default, nspr is built to support only ipv4, but it's possible to build the nspr library to support both ipv4 and ipv
6.
...And 3 more matches
Introduction to Network Security Services
support for ilp32 in nss 3.2 and later versions, there are two new shared libraries for the platforms hp-ux for parisc cpus and solaris for (ultra)sparc (not x8
6) cpus.
... these hp and solaris platforms allow programs that use the ilp32 program model to run on both 32-bit cpus and
64-bit cpus.
... platform for 32-bit cpus for
64-bit cpus solaris/sparc libfreebl_pure32_3.so libfreebl_hybrid_3.so hpux/parisc libfreebl_pure32_3.sl libfreebl_hybrid_3.sl aix (planned for a future release) libfreebl_pure32_3_shr.a libfreebl_hybrid_3_shr.a an application should not link against these libraries, because they are dynamically loaded by nss at run time.
...And 3 more matches
JSS FAQ
does jss have
64 bit support?
... does jss have
64 bit support?
... yes, jss 3.2 and higher supports
64 bit.
...And 3 more matches
NSS Key Log Format
wireshark 1.
6.0 and above can use these log files to decrypt packets.
...(see bug 1188
657.) notably, debian does not have this option enabled, see debian bug 842292.
... <clientrandom> is 32 bytes random value from the client hello message, encoded as
64 hexadecimal characters.
...And 3 more matches
NSS_3.12.1_release_notes.html
bug
67890: create self-signed cert with existing key that signed csr bug 129303: nss needs to expose interfaces to deal with multiple token sources of certs.
... bug 311432: ecc's ecl_use_fp code (for linux x8
6) fails pairwise consistency test bug 330
622: certutil's usage messages incorrectly document certain options bug 330
628: coreconf/linux.mk should _not_ default to x8
6 but result in an error if host is not recognized bug 359302: remove the sslsample code from nss source tree bug 372241: need more versatile form of cert_nametoascii bug 39029
6: nss ignores subject cn even when san contains no dnsname bug 401928: support generalized pkcs#5 v2 pbes bug 403543: pkix: need a way to enable/disable aia cert fetching bug 408847: pkix_ocspchecker_check does not support specified responder (and given signercert) bug 414003: crash [[@ cert_decodecertpackage] sometimes with this testcase bug 4151
67: memory leak in certutil bug 41739...
...9: arena allocation results are not checked in pkix_pl_infoaccess_parselocation bug 420
644: improve ssl tracing of key derivation bug 42
688
6: use const char* in pk11_importcertforkey bug 428103: cert_encodesubjectkeyid is not defined in any public header file bug 42971
6: debug builds of libpkix unconditionally dump socket traffic to stdout bug 4303
68: vfychain -t option is undocumented bug 4303
69: vfychain -o succeeds even if -pp is not specified bug 430399: vfychain -pp crashes bug 430405: error log is not produced by cert_pkixverifycert bug 430743: update ssltap to understand the tls session ticket extension bug 430859: pkix: policy mapping fails verification with error invalid arguments bug 430875: document the policy for the order of cipher suites in ssl_implemente...
...And 3 more matches
NSS 3.32 release notes
nss 3.32 requires netscape portable runtime (nspr) 4.1
6, or newer.
... cn = addtrust class 1 ca root sha-25
6 fingerprint: 8c:72:09:27:9a:c0:4e:27:5e:1
6:d0:7f:d3:b7:75:e8:01:54:b5:9
6:80:4
6:e3:1f:52:dd:25:7
6:
63:24:e9:a7 cn = swisscom root ca 2 sha-25
6 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:5
6:13:91:4c:38:41 the following ca certificates were removed: cn = addtrust public ca root sha-25
6 fingerprint: 07...
...:91:ca:07:49:b2:07:82:aa:d3:c7:d7:bd:0c:df:c9:48:58:35:84:3e:b2:d7:99:
60:09:ce:43:ab:
6c:
69:27 cn = addtrust qualified ca root sha-25
6 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:1
6 cn = china internet network information center ev certificates root sha-25
6 fingerprint: 1c:01:c
6:f4:db:b2:fe:fc:22:55:8b:2b:ca:32:5
6:3f:49:84:4a:cf:c3:2b:7b:e4:b0:ff:59:9f:9e:8c:7a:f7 cn = cnnic root sha-25
6 fingerprint: e2:83:93:77:3d:a8:45:a
6:79:f2:08:0c:c7:fb:44:a3:b7:a1:c3:79:2c:b7:eb:77:29:fd:cb:
6a:8d:99:ae:a7 cn = comsign secured ca sha-25
6 fingerprint: 50:79:41:c7:44:
60:a0:b4:70:8
6:22:0d:4e:99:32:57:2a:b5:d1:b5:bb:cb:89:80:ab:1c:b1:7
6:51:a8:44:d2 ...
...And 3 more matches
NSS 3.47 release notes
notable changes in nss 3.47 bug 1152
625 - support aes hw acceleration on armv8 bug 12
67894 - allow per-socket run-time ordering of the cipher suites presented in clienthello bug 1570501 - add cmac to freebl and pkcs #11 libraries bugs fixed in nss 3.47 bug 1459141 - make softoken cbc padding removal constant time bug 1589120 - more cbc padding tests bug 14
65
613 - add ability to distrust certificates issued after a certain da...
...te for a specified root cert bug 1588557 - bad debug statement in tls13con.c bug 15790
60 - mozilla::pkix tag definitions for issueruniqueid and subjectuniqueid shouldn't have the constructed bit set bug 15830
68 - nss 3.47 should pick up fix from bug 1575821 (nspr 4.23) bug 1152
625 - support aes hw acceleration on armv8 bug 1549225 - disable dsa signature schemes for tls 1.3 bug 158
6947 - pk11_importandreturnprivatekey does not store nickname for ec keys bug 158
645
6 - unnecessary conditional in pki3hack, pk11load and stanpcertdb bug 157
6307 - check mechanism param and param length before casting to mechanism-specific structs bug 1577953 - support longer (up to rfc maximum) hkdf outputs bug 150877
6 - remove refcounting from sftk_freesession (cve-2019-1175
6) bug 14940
63 - support tl...
...s exporter in tstclnt and selfserv bug 1581024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag sizes for ckm_aes_gcm bug 157
6295 - check all bounds when encrypting with seed_cbc bug 158028
6 - nss rejects tls 1.2 records with large padding with sha384 hmac bug 1577448 - create additional nested s/mime test messages for thunderbird bug 1399095 - allow nss-try to be used to test nspr changes bug 12
67894 - libssl should allow selecting the order of cipher suites in clienthello bug 1581507 - fix unportable grep expression in test scripts bug 1234830 - [cid 1242894][cid 1242852] unused values bug 158012
6 - fix build failure on aarch
64_be while building freebl/gcm bug 1385039 - build nspr tests as part...
...And 3 more matches
NSS 3.53 release notes
(bug 29052
6) seed is now moved into a new freebl directory freebl/deprecated (bug 1
63
6389).
...at that time, users will need to set the compile-time flag (bug 1
622033) to disable that deprecation in order to use the algorithm.
...(bug 1
618404, bug 1
621159) if a builtin certificate has a cka_nss_server_distrust_after timestamp before the sct or notbefore date of a certificate that builtin issued, then clients can elect not to trust it.
...And 3 more matches
Release notes for recent versions of NSS
the current stable release of nss is 3.5
6, which was released on 21 august 2020.
... (nss 3.5
6 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 1
6 june 2020.
... past releases nss 3.5
6 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.47.1 release notes nss 3.47 release notes nss 3.4
6.1 release notes nss 3.4
6 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.3
6.8 release notes nss 3.3
6.7 release notes nss 3.41 release notes nss 3.40...
...And 3 more matches
nss tech note5
f, inbuflen); s = pk11_digestfinal(enccontext, outbuf+tmp1_outlen, &tmp2_outlen, sizeof outbuf - tmp1_outlen); result_len = tmp1_outlen + tmp2_outlen; <big>destroy the context pk11_destroycontext(enccontext, pr_true);</big> <big>repeat step
6 any number of times.
... when all done with encrypt/decrypt ops, clean up</big> <big>pk11_freesymkey(symkey); secitem_freeitem(secparam, pr_true); pk11_freeslot(slot);</big> note: aes encryption, a fixed blocksize of 1
6 bytes is used.
... the rijndael algorithm permits 3 blocksizes (1
6, 24, 32 bytes), but the aes standard requires the blocksize to be 1
6 bytes.
...And 3 more matches
Overview of NSS
tls v1.3 (rfc 844
6), tls v1.2 (rfc 524
6), tls v1.1 (rfc 434
6), tls v1 (rfc 224
6).
... s/mime (rfc 2311 and rfc 2
633).
... ocsp (rfc 25
60).
...And 3 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 1
6 - pkcs12 decode error o 17 - pkcs12 decoder verify error o 18 - pkcs12 decoder validate bags error o 19 - pkc...
...s12 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 2
6 - pkcs12 add password itegrity error o 27 - 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:
67:37:
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 a...
...And 3 more matches
SpiderMonkey Build Documentation
start-shell-msvc2013.bat or start-shell-msvc2013-x
64.bat) determines whether the compiler toolchain will target 32-bit or
64-bit builds.
... to create a
64-bit build, note that you must configure with --target=x8
6_
64-pc-mingw32 --host=x8
6_
64-pc-mingw32.
... for example on debian linux you'll need the following to cross compile from x8
6_
64 to x8
6.
...And 3 more matches
JS_EncodeCharacters
convert a 1
6-bit string to an 8-bit string.
... src const jschar * the pointer to 1
6-bit values of jsstring.
... srclen size_t the length of the source string, in 1
6-bit values.
...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 sha25
6: 570530b1e551bf4a459d7cae875f33f99d5ef0c29ccc7742a1b
6f588e5eadbee md5: 2ca34f998d8b5ea79d8
61
6dd2
6b5fbab spidermonkey 45 is the javascript engine that shipped in firefox 45.
... — apr 14, 201
6 platform support spidermonkey 45 is supported on all platforms able to run firefox 45.
...it is supported on x8
6, x8
6_
64, and arm architectures.
...And 3 more matches
Setting up an update server
for example, if you want the nightly mar from 2019-09-17 for a
64 bit windows machine, you probably want the mar located at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-3
6-29-mozilla-central/firefox-71.0a1.en-us.win
64.complete.mar.
...here is an example of an appropriate mar file to use: https://archive.mozilla.org/pub/firefox/releases/
69.0b9/update/win
64/firefox-
69.0b9.complete.mar.
...most likely, a different maintenance service is already installed, probably at c:\program files (x8
6)\mozilla maintenance service\maintenanceservice.exe.
...And 3 more matches
imgIContainer
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: ?????????????????????????????????????.
... nsiframe getrootlayoutframe(); violates the xpcom interface guidelines pruint1
6 gettype(); violates the xpcom interface guidelines void init(in print32 awidth, in print32 aheight, in imgicontainerobserver aobserver); obsolete since gecko 2.0 void lockimage(); void removeframe(in gfxiimageframe item); obsolete since gecko 1.9.2 void requestdecode(); void requestdiscard(); void requestrefresh([const] in timestamp atime)...
...aheight missing description aformat missing description apalettedepth missing description imagedata missing description imagelength missing description palettedata missing description palettelength missing description exceptions thrown missing exception missing description clear() obsolete since gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0) void clear(); parameters none.
...And 3 more matches
mozIStorageStatement
inherits from: mozistoragevaluearray last changed in gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0) for an introduction on how to use this interface, see the storage overview document.
...ngparamsarray newbindingparamsarray(); void bindutf8stringparameter(in unsigned long aparamindex, in autf8string avalue); void bindstringparameter(in unsigned long aparamindex, in astring avalue); void binddoubleparameter(in unsigned long aparamindex, in double avalue); void bindint32parameter(in unsigned long aparamindex, in long avalue); void bindint
64parameter(in unsigned long aparamindex, in long long avalue); void bindnullparameter(in unsigned long aparamindex); void bindblobparameter(in unsigned long aparamindex, [array,const,size_is(avaluesize)] in octet avalue, in unsigned long avaluesize); mozistoragependingstatement executeasync(mozistoragestatementcallback acallback); boolean executestep(); ...
...see bug 5281
66 for details.
...And 3 more matches
nsIBinaryOutputStream
inherits from: nsioutputstream last changed in gecko 1.7 method overview void setoutputstream(in nsioutputstream aoutputstream); void write8(in pruint8 abyte); void write1
6(in pruint1
6 a1
6); void write32(in pruint32 a32); void write
64(in pruint
64 a
64); void writeboolean(in prbool aboolean); void writebytearray([array, size_is(alength)] in pruint8 abytes, in pruint32 alength); void writebytes(alength)] in string astring, in pruint32 alength); void writedouble(in double adouble); void writefloat(in float afloat); void writestringz(in string astring); ...
... write1
6() writes a 1
6-bit integer to the stream.
... void write1
6( in pruint1
6 a1
6 ); parameters a1
6 the 1
6-bit integer to write to the stream.
...And 3 more matches
nsIIdleService
1.0
66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1
6 (firefox 1
6 / thunderbird 1
6 / seamonkey 2.13) you can get the idle time directly, but in most cases you will want to register an observer for a predefined interval.
... the observer will get an 'idle' notification when the user is idle for that interval (or longer), and receive a 'back' (gecko 3 to 15) or 'active' (gecko 1
6+) notification when the user starts using their computer again.
...when the user goes idle, the observer topic is 'idle' and when they get back, the observer topic is 'back' in gecko 15 and earlier or 'active' in gecko 1
6 and later.
...And 3 more matches
nsISyncJPAKE
1.0
66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void final(in acstring ab, in acstring agvb, in acstring arb, in acstring ahkdfinfo, out acstring aaes25
6key, out acstring ahmac25
6key); void round1(in acstring asignerid, out acstring agx1, out acstring agv1, out acstring ar1, out acstring agx2, out acstring agv2, out acstring ar2); void round2(in acstring apeerid, in acstring apin, in acstring agx3, in acstring agv3, in acstring ar3, in acstring agx4, in acstring agv4, in acstring ar4, out acstring aa, out acstring agva, out acstring ara); methods final() perform th...
...this will compute the key and expand the key to two keys, an aes25
6 encryption key and a 25
6 bit hmac key.
... it returns a key confirmation value (sha25
6d of the key) and the encryption and hmac keys.
...And 3 more matches
Plugin Roadmap for Firefox - Plugins
schedule june 201
6 starting with firefox 47 in june 201
6, all plugins other than adobe flash are click-to-activate.
...in addition, the
64-bit firefox for windows only supports the flash plugin.
... september 2017 starting with firefox 5
6 in september 2017, firefox for android will remove all support for plugins (bug 138191
6).
...And 3 more matches
All keyboard shortcuts - Firefox Developer Tools
before firefox
66, the letter in this shortcut was s.
... decrement selected value by 100 shift + page down shift + page down shift + page down increment selected value by 10 shift + up arrow shift + up arrow shift + up arrow decrement selected value by 10 shift + down arrow shift + down arrow shift + down arrow increment selected value by 0.1 alt + up arrow (ctrl + up arrow from firefox
60 onwards.) alt + up arrow alt + up arrow (ctrl + up arrow from firefox
60 onwards.) decrement selected value by 0.1 alt + down arrow (ctrl + down arrow from firefox
60 onwards).
... alt + down arrow alt + down arrow (ctrl + down arrow from firefox
60 onwards).
...And 3 more matches
AudioNode.channelInterpretation - Web APIs
output.l = input.m output.r = input.m output.sl = 0 output.sr = 0 1 (mono)
6 (5.1) up-mix from mono to 5.1.
... output.l = input.l output.r = input.r output.sl = 0 output.sr = 0 2 (stereo)
6 (5.1) up-mix from stereo to 5.1.
... output.l = 0.5 * (input.l + input.sl) output.r = 0.5 * (input.r + input.sr) 4 (quad)
6 (5.1) up-mix from quad to 5.1.
...And 3 more matches
BudgetState - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetstate experimentaldeprecatednon-standardchrome full support
60edge full support ≤79firefox ?
... webview android no support nochrome android full support
60firefox android ?
... samsung internet android full support 8.0budgetat experimentaldeprecatednon-standardchrome full support
60edge full support ≤79firefox ?
...And 3 more matches
ByteLengthQueuingStrategy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbytelengthqueuingstrategy experimentalchrome full support 59edge full support 1
6firefox full support 57disabled full support 57disabled disabled from version 57: 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).
... to change preferences in firefox, visit about:config.ie no support noopera full support 4
6safari ?
... samsung internet android full support 7.0bytelengthqueuingstrategy() constructor experimentalchrome full support 59edge full support 1
6firefox full support 57disabled full support 57disabled disabled from version 57: 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 3 more matches
CountQueuingStrategy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountqueuingstrategy experimentalchrome full support 59edge full support 1
6firefox full support 57disabled full support 57disabled disabled from version 57: 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).
... to change preferences in firefox, visit about:config.ie no support noopera full support 4
6safari ?
... samsung internet android full support 7.0countqueuingstrategy() constructor experimentalchrome full support 59edge full support 1
6firefox full support 57disabled full support 57disabled disabled from version 57: 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 3 more matches
DOMMatrixReadOnly - Web APIs
dommatrixreadonly.tofloat32array() returns a new float32array containing all 1
6 elements (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) which comprise the matrix.
...(in other words, down the first column from top to bottom, then the second column, and so forth.) dommatrixreadonly.tofloat
64array() returns a new float
64array containing all 1
6 elements (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) which comprise the matrix.
... for a 3d matrix, the returned string contains all 1
6 elements and takes the form matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44).
...And 3 more matches
Document.cookie - Web APIs
note that each key and value may be surrounded by whitespace (space and tab characters): in fact, rfc
62
65 mandates a single space after each semicolon, but some user agents may not abide by this.
... note: prior to gecko
6.0, paths with quotes were treated as if the quotes were part of the string, instead of as if they were delimiters surrounding the actual path string.
... ;max-age=max-age-in-seconds (e.g.,
60*
60*24*3
65 or 3153
6000 for a year) ;expires=date-in-gmtstring-format if neither expires nor max-age specified it will expire at the end of session.
...And 3 more matches
Ajax navigation example - Web APIs
include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; background-color: #000000; opacity: 0.
65; } include/after_content.php: <p>this is the footer.
...tpstatus = /* http://www.iana.org/assignments/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", 20
6: "partial content", 207: "multi-status", 208: "already reported", 22
6: "im used", 300: "multiple choices", 301: "moved permanently", 302: "found", 303: "see other", 304: "not modified", 305: "use proxy", 30
6: "reserved", 307: "temporary redirect", 308: "p...
...ermanent redirect", 400: "bad request", 401: "unauthorized", 402: "payment required", 403: "forbidden", 404: "not found", 405: "method not allowed", 40
6: "not acceptable", 407: "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", 41
6: "requested range not satisfiable", 417: "expectation failed", 422: "unprocessable entity", 423: "locked", 424: "failed dependency", ...
...And 3 more matches
IDBFactory - Web APIs
on iossamsung internetidbfactorychrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
...with the vendor prefix: webkitcmpchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
... 8samsung internet android full support 1.5databases experimentalchrome full support 71edge full support 79firefox no support nonotes no support nonotes notes see bug 934
640.ie no support noopera full support 58safari no support nowebview android full support 71chrome android full support 71firefox android no support ...
...And 3 more matches
Using IndexedDB - Web APIs
see bug 870
645.
...5em; padding: 1em; } table { border-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } #pub-viewer { float: right; width: 48%; height: 20em; border: solid #d092ff 0.1em; } #pub-viewer iframe { width: 100%; height: 100%; } #pub-list { width: 4
6%; background-color: #eeeeee; border-radius: 0.3em; } #pub-list li { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; } #msg { margin-bottom: 1em; } .action-success { padding: 0.5em; color: #00d21e; background-color: #eeeeee; border-radius: 0.2em; } .action-failure { padding: 0.5em; color: #ff1408; background-color: #eeeeee; border-radius: 0.2em; } .
...note { font-size: smaller; } .destructive { background-color: orange; } .destructive:hover { background-color: #ff8000; } .destructive:active { background-color: red; } javascript content (function () { var compat_envs = [ ['firefox', ">= 1
6.0"], ['google chrome', ">= 24.0 (you may need to get google chrome canary), no blob storage support"] ]; var compat = $('#compat'); compat.empty(); compat.append('<ul id="compat-list"></ul>'); compat_envs.foreach(function(val, idx, array) { $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>'); }); const db_name = 'mdn-demo-indexeddb-epublications'; const db_version = 1; // use a long long for this value (don't use a float) const db_store_name = 'publications'; var db; // used to keep...
...And 3 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 1
6: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 tha...
...t the constrainable properties for which matches must be found are supported (width, height, 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 1
6:9 (1.777777778), and a frame rate no greater than 30 frames per second.
...And 3 more matches
PaymentAddress.toJSON() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettojson()chrome full support
61disabled full support
61disabled disabled from version
61: this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.edge full support 15firefox full support
62notes disabled full support
62notes disabled notes available only in nightly builds.
... requires the comma-delineated list in dom.payments.request.supportedregions to contain one or more of the supported 2-character iso locales, currently us and ca.disabled from version
62: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
...And 3 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' "8
66", "cp8
66", "csibm8
66", "ibm8
66" 'ibm8
66' "csisolatin2", "iso-8859-2", "iso-ir-101", "iso8859-2", "iso88592", "iso_8859-2", "iso_8859-2:1987", "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", "csiso8859
6e", "csiso8859
6i", "csisolatinarabic", "ecma-114", "iso-8859-
6", "iso-8859-
6-e", "iso-8859-
6-i", "iso-ir-127", "iso8859-
6", "iso8859
6", "iso_8859-
6", "iso_8859-
6:1987" 'iso-8859-
6' "csisolatingreek", "ecma-118", "elot_928", "greek", "greek8", "iso-8859-7", "iso-ir-12
6", "iso8859-7", "iso88597", "iso_8859-7", "iso_8859-7:1987", "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", "vi...
...sual" 'iso-8859-8' "csiso88598i", "iso-8859-8-i", "logical" 'iso-8859-8i' "csisolatin
6", "iso-8859-10", "iso-ir-157", "iso8859-10", "iso885910", "l
6", "latin
6" 'iso-8859-10' "iso-8859-13", "iso8859-13", "iso885913" 'iso-8859-13' "iso-8859-14", "iso8859-14", "iso885914" 'iso-8859-14' "csisolatin9", "iso-8859-15", "iso8859-15", "iso885915", "l9", "latin9" 'iso-8859-15' "iso-8859-1
6" 'iso-8859-1
6' "cskoi8r", "koi", "koi8", "koi8-r", "koi8_r" 'koi8-r' "koi8-u" 'koi8-u' "csmacintosh", "mac", "macintosh", "x-mac-roman" 'macintosh' "dos-874", "iso-8859-11", "iso8859-11", "iso885911", "tis-
620", "windows-874" 'windows-874' "c...
...And 3 more matches
WebGLRenderingContext.getParameter() - Web APIs
t.compressed_rgba_atc_interpolated_alpha_webgl when using the webgl_compressed_texture_astc extension: ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr ext.compressed_rgba_astc_5x4_khr ext.compressed_srgb8_alpha8_astc_5x4_khr ext.compressed_rgba_astc_5x5_khr ext.compressed_srgb8_alpha8_astc_5x5_khr ext.compressed_rgba_astc_
6x5_khr ext.compressed_srgb8_alpha8_astc_
6x5_khr ext.compressed_rgba_astc_
6x
6_khr ext.compressed_srgb8_alpha8_astc_
6x
6_khr ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr ext.compressed_rgba_astc_8x
6_khr ext.compressed_srgb8_alpha8_astc_8x
6_khr ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr ext.co...
...mpressed_rgba_astc_10x5_khr ext.compressed_srgb8_alpha8_astc_10x5_khr ext.compressed_rgba_astc_10x
6_khr ext.compressed_srgb8_alpha8_astc_10x
6_khr ext.compressed_rgba_astc_10x
6_khr ext.compressed_srgb8_alpha8_astc_10x
6_khr ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr gl.cull_face glboolean gl.cull_face_mode glenum gl.front, gl.back or gl.front_and_back.
... gl.max_3d_texture_size glint gl.max_array_texture_layers glint gl.max_client_wait_timeout_webgl glint
64 gl.max_color_attachments glint gl.max_combined_fragment_uniform_components glint
64 gl.max_combined_uniform_blocks glint gl.max_combined_vertex_uniform_components glint
64 gl.max_draw_buffers glint gl.max_element_index glint
64 gl.max_elements_indices glint gl.max_elements_ve...
...And 3 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
possible values: gl.byte: signed 8-bit integer, with values in [-128, 127] gl.short: signed 1
6-bit integer, with values in [-327
68, 327
67] gl.unsigned_byte: unsigned 8-bit integer, with values in [0, 255] gl.unsigned_short: unsigned 1
6-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: 1
6-bit ieee floating point number normalized a glboo...
...on high-end graphics cards, the maximum is 1
6, on lower-end graphics cards, the value will be lower.
... texture coordinate: we need to store the u and v coordinates; for this 1
6-bit unsigned integers offer enough precision, the total size is 4 bytes.
...And 3 more matches
A basic 2D WebGL animation example - Web APIs
that is, (0, 0) is at the top-left corner and the bottom-right corner is at (
600, 4
60).
... <canvas id="glcanvas" width="
600" height="4
60"> oh no!
...tratio]; vertexarray = new float32array([ -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5 ]); vertexbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, vertexbuffer); gl.bufferdata(gl.array_buffer, vertexarray, gl.static_draw); vertexnumcomponents = 2; vertexcount = vertexarray.length/vertexnumcomponents; currentangle = 0.0; rotationrate =
6; animatescene(); } after getting the webgl context, gl, we need to begin by building the shader program.
...And 3 more matches
Matrix math for the web - Web APIs
these matrices consist of a set of 1
6 values arranged in a 4x4 grid.
... example code we have 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 re...
...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, r...
...And 3 more matches
WebGL types - Web APIs
glshort short 1
6-bit twos complement signed integer.
... glushort unsigned short 1
6-bit twos complement unsigned integer.
... type web idl type description glint
64 long long signed
64-bit integer number.
...And 3 more matches
Writing WebSocket servers - Web APIs
note: read the latest official websockets specification, rfc
6455.
...to get it, concatenate the client's sec-websocket-key and the string "258eafa5-e914-47da-95ca-c5ab0dc85b11" together (it's a "magic string"), take the sha-1 hash of the result, and return the base
64 encoding of that hash.
... format each data frame (from the client to the server or vice-versa) follows this same format: frame format: 0 1 2 3 0 1 2 3 4 5
6 7 8 9 0 1 2 3 4 5
6 7 8 9 0 1 2 3 4 5
6 7 8 9 0 1 +-+-+-+-+-------+-+-------------+-------------------------------+ |f|r|r|r| opcode|m| payload len | extended payload length | |i|s|s|s| (4) |a| (7) | (1
6/
64) | |n|v|v|v| |s| | (if payload len==12
6/127) | | |1|2|3| |k| | ...
...And 3 more matches
Using the Web Animations API - Web APIs
browser support the basic web animations api features discussed in this article are available by default in firefox 48+ and chrome 3
6+.
...here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #43123
6; } 100% { color: #000; transform: rotate(3
60deg) translate3d(-50%, -50%, 0); } } this changes alice’s color and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely.
... representing keyframes the first thing we need is to create a keyframe object corresponding to our css @keyframes block: var alicetumbling = [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#43123
6', offset: 0.3}, { transform: 'rotate(3
60deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects.
...And 3 more matches
WritableStream - Web APIs
.catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint1
6array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message receiv...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwritablestream experimentalchrome full support 59edge full support 1
6firefox no support noie no support noopera full support 47safari ?
... samsung internet android full support 7.0writablestream() constructor experimentalchrome full support 59edge full support 1
6firefox no support noie no support noopera full support 47safari ?
...And 3 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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; 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 c...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; 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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; 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 3 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
this means that the available space in the container is split into
6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center.
... a flexible 12-column layout if you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 1
6-column flexible grid.
... <div class="wrapper"> <div class="item1">start column line 1, span 3 column tracks.</div> <div class="item2">start column line
6, span 4 column tracks.
...And 3 more matches
break-before - CSS: Cascading Style Sheets
olumn layout desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support
65ie full support 10opera full support 37 full support 37 no support 11.1 — 12.1safari no support nowebview android full support 50chrome android ...
... full support 50firefox android full support
65opera android full support 37 full support 37 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 ...
...pport in paged media desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in paged mediachrome full support 50edge full support 12firefox full support
65ie full support 10opera full support 37 full support 37 no support 11.1 — 12.1safari full support 10webview android full support 50chrome android ...
...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.
... 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.
... inherited value bolder lighter 100 400 100 200 400 100 300 400 100 400 700 100 500 700 100
600 900 400 700 900 400 800 900 700 900 900 700 common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names (see the opentype specification): value common weight name 100 thin (hairline) 200 extra light (ultra light) 300 light ...
...And 3 more matches
<textarea> - HTML: Hypertext Markup Language
maxlength the maximum number of characters (utf-1
6 code units) that the user can enter.
... minlength the minimum number of characters (utf-1
6 code units) required that the user should enter.
...roid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettextareachrome full support yesedge full support 12firefox full support yesnotes full support yesnotes notes before firefox
6, when a <textarea> was focused, the insertion point was placed at the end of the text by default.
...And 3 more matches
CSP: style-src - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
...And 3 more matches
Equality comparisons and sameness - JavaScript
there are four equality algorithms in es2015: abstract equality comparison (==) strict equality comparison (===): used by array.prototype.indexof, array.prototype.lastindexof, and case-matching samevaluezero: used by %typedarray% and arraybuffer constructors, as well as map and set operations, and also string.prototype.includes and array.prototype.includes since es201
6 samevalue: used in all other places javascript provides three different value-comparison operations: === - strict equality comparison ("strict equality", "identity", "triple equals") == - abstract equality comparison ("loose equality", "double equals") object.is provides samevalue (new in es2015).
...the === comparison is 11.9.
6, the strict equality algorithm.
...it's largely the same as the strict equality algorithm, except that 11.9.
6.4 and 9.12.4 differ in handling numbers.
...And 3 more matches
Array.prototype.filter() - JavaScript
polyfill filter() was added to the ecma-2
62 standard in the 5th edition.
... you can work around this by inserting the following code at the beginning of your scripts, allowing use of filter() in ecma-2
62 implementations which do not natively support it.
... this algorithm is exactly equivalent to the one specified in ecma-2
62, 5th edition, assuming that fn.call evaluates to the original value of function.prototype.bind(), and that array.prototype.push() has its original value.
...And 3 more matches
Array - JavaScript
let years = [1950, 19
60, 1970, 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).
...le.log(fruits.length) // 3 when setting a property on a javascript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's length property accordingly: fruits[5] = 'mango' console.log(fruits[5]) // 'mango' console.log(object.keys(fruits)) // ['0', '1', '2', '5'] console.log(fruits.length) //
6 increasing the length.
...the first move is made by copying the 'p' in board[
6][4] to board[4][4].
...And 3 more matches
Date.prototype.getYear() - JavaScript
for example, if the year is 202
6, getyear() returns 12
6.
...for example, if the year is 197
6, getyear() returns 7
6.
...for example, if the year is 197
6, the value returned is 7
6.
...And 3 more matches
Date - JavaScript
instead, it is defined in ecma-2
62 that a maximum of ±100,000,000 (one hundred million) days relative to january 1, 1970 utc (that is, april 20, 271821 bce ~ september 13, 2757
60 ce) can be represented by the standard date object (equivalent to ±8,
640,000,000,000,000 milliseconds).
... date.prototype.getday() returns the day of the week (0–
6) for the specified date according to local time.
... date.prototype.getutcday() returns the day of the week (0–
6) in the specified date according to universal time.
...And 3 more matches
String - JavaScript
ange of 0–377) iso-8859-1 character / unicode code point between u+0000 and u+00ff \' single quote \" double quote \\ backslash \n new line \r carriage return \v vertical tab \t tab \b backspace \f form feed \uxxxx (where xxxx is 4 hex digits; range of 0x0000–0xffff) utf-1
6 code unit / unicode code point between u+0000 and u+ffff \u{x} ...
... \u{xxxxxx} (where x…xxxxxx is 1–
6 hex digits; range of 0x0–0x10ffff) utf-32 code unit / unicode code point between u+0000 and u+10ffff \xxx (where xx is 2 hex digits; range of 0x00–0xff) iso-8859-1 character / unicode code point between u+0000 and u+00ff long literal strings sometimes, your code will include strings which are very long.
... instance methods string.prototype.charat(index) returns the character (exactly one utf-1
6 code unit) at the specified index.
...And 3 more matches
WebAssembly.Memory - JavaScript
instance methods memory.prototype.grow() increases the size of the memory instance by a specified number of webassembly pages (each one is
64kb in size).
...the following example creates a new webassembly memory instance with an initial size of 10 pages (
640kib), and a maximum size of 100 pages (
6.4mib).
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmemorychrome full support 57edge full support 1
6firefox 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 11w...
...And 3 more matches
WebAssembly.Table - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jstablechrome full support 57edge full support 1
6firefox 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 11w...
... 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0table() constructorchrome full support 57edge full support 1
6firefox 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 11w...
...support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0getchrome full support 57edge full support 1
6firefox 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 11w...
...And 3 more matches
encodeURIComponent() - JavaScript
()"; // unescaped characters var set3 = "#"; // number sign var set4 = "abc abc 123"; // alphanumeric characters + space console.log(encodeuri(set1)); // ;,/?:@&=+$ console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set3)); // # console.log(encodeuri(set4)); // abc%20abc%20123 (the space gets encoded as %20) console.log(encodeuricomponent(set1)); // %3b%2c%2f%3f%3a%40%2
6%3d%2b%24 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // %23 console.log(encodeuricomponent(set4)); // abc%20abc%20123 (the space gets encoded as %20) note that a urierror will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuricomponent('\ud800\udfff')); // lone hi...
... to be more stringent in adhering to rfc 398
6 (which reserves !, ', (, ), and *), even though these characters have no formalized uri delimiting uses, the following can be safely used: function fixedencodeuricomponent(str) { return encodeuricomponent(str).replace(/[!'()*]/g, function(c) { return '%' + c.charcodeat(0).tostring(1
6); }); } examples encoding for content-disposition and link headers the following example provides the...
... // note that although rfc398
6 reserves "!", rfc5987 does not, // so we do not need to escape it replace(/['()]/g, escape).
...And 3 more matches
OpenSearch description format
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/200
6/browser/search/"> <shortname>[snk]</shortname> <description>[search engine full name and summary]</description> <inputencoding>[utf-8]</inputencoding> <image width="1
6" height="1
6" type="image/x-icon">[https://example.com/favicon.ico]</image> <url type="text/html" template="[searchurl]"> <param name="[key name]" value="{searchterms}"/> <!-- other params if you need them… --> ...
...it must be 1
6 or fewer characters of plain text, with no html or other markup.
...when possible, include a 1
6×1
6 image of type image/x-icon (such as /favicon.ico) and a
64×
64 image of type image/jpeg or image/png.
...And 3 more matches
<metadata> - SVG: Scalable Vector Graphics
used by hub symbol --> <symbol id="hubplug"> <desc>a 10baset/100basetx socket</desc> <path d="m0,10 h5 v-9 h12 v9 h5 v1
6 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="227" cy="71" r="7" /> <!-- five groups each using the defined ...
...tle>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="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" transform="translate(1
60 20)"> <title>socket 4</title> <use xlink:href="#hubplug"/> </g> <g id="socket5" transform="translate(205 20)"> <title>socket 5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" transform="transl...
...21)"> <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="1
60" 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="1
60" height="
60"/> <g id="discdrive" transform="translate(70 8)"> <title>disc drive</title> <desc>...
...And 3 more matches
Basic shapes - SVG: Scalable Vector Graphics
the code 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 7...
...5 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 1
60 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.
...there are
6 basic attributes that control the position and shape of the rectangles on screen.
...And 3 more matches
Index - XPath
6 child axe, xpath the child axis indicates the children of the context node.
... 1
6 comparison of css selectors and xpath css, draft, needscontent, reference, selectors, xpath this article seeks to document the difference between css selectors and xpath for web developers to be able to better choose the right tool for the right job.
... 2
6 element-available xslt, xslt_reference the element-available function determines if an element is available and returns true or false.
...And 3 more matches
package.json - Archive of obsolete content
jpm looks for the sizes
64, 48 and 32.
... icon
64 note: this is deprecated along with cfx; it's not available when using jpm.
...defaults to icon
64.png.
...And 2 more matches
Creating Reusable Modules - Archive of obsolete content
we can adapt it like this: var {cc, ci} = require("chrome"); // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(1
6)).slice(-2); } function md5file(path) { var f = cc["@mozilla.org/file/local;1"] .createinstance(ci.nsilocalfile); f.initwithpath(path); var istream = cc["@mozilla.org/network/file-input-stream;1"] .createinstance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(...
... tohexstring(hash.charcodeat(i))).join(""); return s; } putting it together the complete add-on adds a button to firefox: when the user clicks the button, we ask them to select a file, compute the hash, and log the hash to the console: var {cc, ci} = require("chrome"); // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(1
6)).slice(-2); } function md5file(path) { var f = cc["@mozilla.org/file/local;1"] .createinstance(ci.nsilocalfile); f.initwithpath(path); var istream = cc["@mozilla.org/network/file-input-stream;1"] .createinstance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(...
... } return path; } require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "1
6": "./icon-1
6.png" }, onclick: function() { console.log(md5file(promptforfile())); } }); this works , but index.js is now getting longer and its logic is harder to understand.
...And 2 more matches
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
- #include "nsastring.h"- #include "nsstring.h"- #include "nsreadableutils.h"- #include "nsescape.h" + #include "nsstringapi.h" on windows, if you see the following error, you are including a header you shouldn't be: nsstringfwd.h(
60) : fatal error c1001: internal compiler error to debug this error, make in the failing directory, adding the /showincludes directive to figure out what is being included incorrectly: make -c directory/that/failed os_cppflags=-showincludes the frozen string api is similar but not identical to the nonfrozen string api.
...g secondstring = someotherstring; - nsstring combostring = firststring + secondstring; + nsstring combostring = firststring;+ combostring += secondstring; // or: combostring.append(secondstring); - nsresult rv = somefunc(promiseflatstring(combostring)); + nsresult rv = somefunc(combostring); removing the nsreadableutils.h from the headers list also means that we would not have access to appendutf1
6toutf8 kind of functions.
... all these functions are now available via the new string api - appendutf1
6toutf8(srcstring, deststring); + deststring.append(ns_convertutf1
6toutf8(srcstring)); the signatures of the find methods differ between the two apis.
...And 2 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
here are the key similarities and differences between the 3 themes: all systems use small icons that are 1
6x1
6 pixels.
...this doesn't really matter as long as the contents are 1
6x1
6 and they are centered in the frame.
...*/ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 1
6px, 1
6px, 0px); } mac os x: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes.
...And 2 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
f#"> <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>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</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.
...the manifest used in this extension is listed in example
6.
... example
6.
...And 2 more matches
Microsummary topics - Archive of obsolete content
warning: microsummary support was removed in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3) programmatically installing a microsummary generator to programmatically install a microsummary generator -- for example, in an extension that helps users create custom generators for their favorite sites -- obtain a reference to the nsimicrosummaryservice interface implemented by the nsimicrosummaryservice component, then call its installgenerator() method, passing it an xml document containing the generator.
... 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-
67
60-47fa-8f4f-8e4fdea1fb1
6}"> \ <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\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> \ '; var...
...the value of the attribute must be a valid uri, but you can specify an arbitrary identifier using a urn, for example: urn:{835daeb3-
67
60-47fa-8f4f-8e4fdea1fb1
6} to guarantee uniqueness, use urns containing uuids generated by the nsuuidgenerator component.
...And 2 more matches
Mozilla Crypto FAQ - Archive of obsolete content
on september
6, 2000, rsa security released the rsa patent into the public domain, two weeks before the patent was scheduled to expire (on september 20, 2000).
...("usc" stands for "united states code.") the eaa was passed as temporary legislation; however the president of the united states has periodically issued orders to continue the eaa and ear, exercising authority under the international emergency economic powers act, also known as 50 usc 1701-170
6.
...department of commerce by presidential executive order 1302
6 on november 15, 199
6, for regulation under the export administration regulations (ear), along with all other export-controlled commercial products.
...And 2 more matches
Reading textual data - Archive of obsolete content
converting read data if you read data from nsiscriptableinputstream as described on the file i/o code snippets page, you can convert it to utf-8 // sstream is nsiscriptableinputstream var str = sstream.read(409
6); var utf8converter = components.classes["@mozilla.org/intl/utf8converterservice;1"].
...: */ "utf-8"; const replacementchar = components.interfaces.nsiconverterinputstream.default_replacement_character; var is = components.classes["@mozilla.org/intl/converter-input-stream;1"] .createinstance(components.interfaces.nsiconverterinputstream); is.init(fis, charset, 1024, replacementchar); now you can read string from is: var str = {}; var numchars = is.readstring(409
6, str); if (numchars != 0 /* eof */) var read_string = str.value; to read the entire stream and do something with the data: var str = {}; while (is.readstring(409
6, str) != 0) { processdata(str.value); } don't forget to close the stream when you're done with it (is.close()).
...it can be used like nsilineinputstream, except that it supports non-ascii characters, and has no problems with charsets with embedded nulls (like utf-1
6 and utf-32).
...And 2 more matches
Return Codes - Archive of obsolete content
no_matching_certificate -20
6 extracted file was not signed by the certificate used to sign the installation script cant_read_archive -207 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 i...
... is_directory -21
6 the specified file cannot be deleted because it is a directory.
... filename_already_used -22
6 same filename being used in install install_cancelled -227 raised when installation is cancelled in medias res.
...And 2 more matches
Custom toolbar button - Archive of obsolete content
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="{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}" em:minversion="1.4" em:maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description em:id="{3550f703-e582-4d05-9a08-453d09bdfdc
6}" em:minversion="1.5" em:maxversion="51.0" /> </em:targetapplication> <em:targetapplication><!-- sunbird --> <description em:id="{718...
...e30fb-e89b-41dd-9da7-e25a45
638b28}" 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.
...
6.
...And 2 more matches
Creating a Skin - Archive of obsolete content
window > box { background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels { background-color: lightblue; border-top: 1px solid white; border-bottom: 1px solid #
666666; border-left: 1px solid white; border-right: 1px solid #
666666; } caption { background-color: lightblue; } the inner box of the window (which actually surrounds all of the window content) has been changed to have a medium blue color.
... tab:first-child { -moz-border-radius: 4px 0px 0px 0px; } tab:last-child { -moz-border-radius: 0px 4px 0px 0px; } tab[selected="true"] { color: #0000
66; font-weight: bold; text-decoration: underline; } two rules change the normal tab appearance, the first sets the rounding on the first tab and the second sets the rounding on the last tab.
... #opensearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48px 1
6px
64px 0); -moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80px 1
6px 9
6px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image.
...And 2 more matches
XULRunner 2.0 Release Notes - Archive of obsolete content
specific runtimes can be found at: download xulrunner for windows download xulrunner for mac os x download xulrunner for 32-bit linux download xulrunner for
64-bit linux (warning: links may become out-of-date at times).
...xulrunner 2.0 is a universal binary containing i38
6 and x8
6_
64 architectures.
... xulrunner 1.9.2 and earlier versions had powerpc (ppc) and i38
6 architectures.
...And 2 more matches
nsIContentPolicy - Archive of obsolete content
63 introduced gecko 1.0 inherits from: nsicontentpolicybase last changed in gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39) you can observe content that is being loaded into your browser by implementing nsicontentpolicy.
... type_document
6 indicates a dom document at the top-level (that is, directly within a browser tab).
... type_websocket 1
6 indicates a websocket load.
...And 2 more matches
Mozilla release FAQ - Archive of obsolete content
the old layout engine, networking engine, and several of the older modules were gutted, and much later, the sources reached the point where netscape was comfortable making a release, and so netscape
6.0 was released.
... netscape
6.0 and above are based off of the mozilla source.
...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!
...And 2 more matches
New in JavaScript 1.3 - Archive of obsolete content
the most significant change in javascript 1.3 was compliance with ecma-2
62 and unicode by removing inconsistencies between javascript 1.2 and the new ecma standard (which was published in june 1997).
... additional features of version 1.2, at the time not specified by ecma-2
62 were kept in the javascript language (see below for a list of differences).
... javascript versions netscape communicator and navigator 4.0
6 and 4.5 executes javascript language versions up to 1.3.
...And 2 more matches
LiveConnect Overview - Archive of obsolete content
alert(java.lang.integer.max_value); //alerts 2147483
647 the packages object if a java class is not part of the java, sun, or netscape packages, you access it with the packages object.
...(although this functionality (along with some others) had been broken in gecko 1.9 (see bug 391
642) as the mozilla-specific liveconnect code had not been maintained inside mozilla, with java
6 update 11 and 12 building support for reliance on mozilla's implementation of the generic (and cross-browser) npapi plugin code, this has again been fixed.) for example, suppose you are using the java forname method to assign the name of a java class to a variable called theclass.
... byte double float int long short all values are converted to numbers as described in ecma-2
62.
...And 2 more matches
background-size - Archive of obsolete content
are based on webkit, like netscape
6-8, seamonkey, camino, flock, fennec, blackbird etc.
... i'm guessing not, just asking because having both rules in for 3.
6 creates a strange effect: -moz-border-image gets inherited by every element on the page user:robertc 2009-08-08 -moz-border-image should not inherit.
...user:jürgen jeka 2009-08-09 ok, here's a page with both rules - the css is derived from the code on the page here, this is what it looks like in 3.
6a2pre on linux, the background image appears on the whole page, and then again behind the main content.
...And 2 more matches
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
this article applies to mozilla versions 0.9.2 and higher and netscape versions
6.1 and higher.
... it does not cover netscape
6 and
6.01 introduction plugins that used to take advantage of being scriptable via liveconnect in 4.x netscape browsers lost this possibility in the new world.
...sample .idl file #include "nsisupports.idl" [scriptable, uuid(bedb0778-2ee0-11d5-9cf8-00
60b0fbd8ac)] interface nsitestplugin : nsisupports { void nativemethod(); }; example 2.
...And 2 more matches
Plug-in Development Overview - Gecko Plugin API Reference
for more information about mime types, see these mime rfcs: rfc-2045: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-204
6: "multipurpose internet mail extensions (mime) part two: media types" rfc-4288: "media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms.
...see bug 1254
69.
...for example: str 128 mime type string 1 video/quicktime string 2 mov, moov string 3 audio/aiff string 4 aiff string 5 image/jpeg string
6 jpg several other optional strings may contain useful information about the plug-in.
...And 2 more matches
CSS and JavaScript accessibility best practices - Learn web development
"standard" text content structure headings, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two items.</li> </ul> some typical css might look like this: h1 { font-size: 5rem; } p, li { line-height: 1.5; font-size: 1.
6rem; } you should: select sensible font sizes, line heights, letter spacing, etc.
... emphasised text inline markup that confers specific emphasis to the text that it wraps: <p>the water is <em>very hot</em>.</p> <p>water droplets collecting on surfaces is called <strong>condensation</strong>.</p> you might want to add some simple coloring to your emphasised text: strong, em { color: #a
60000; } you will however rarely need to style emphasis elements in any significant way.
... abbreviations an element that allows an abbreviation, acronym, or initialization to be associated with its expansion: <p>web content is marked up using <abbr title="hypertext markup language">html</abbr>.</p> again, you might want to style it in some simple way: abbr { color: #a
60000; } the recognised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this.
...And 2 more matches
What is a Domain Name? - Learn web development
173.194.121.32) or an ipv
6 address (e.g., 2027:0da8:8b73:0000:0000:8a2e:0370:1337).
...a tld's maximum length is
63 characters, although most are around 2–3.
...a, 97, and hello-strange-person-1
6-how-are-you are all examples of valid labels.
...And 2 more matches
Advanced form styling - Learn web development
: <span><input type="checkbox"></span> span { display: inline-block; background: red; } input[type="checkbox"] { width: 100px; height: 100px; } different browsers handle this in many different, often ugly ways: browser rendering firefox 71 (macos) firefox 57 (windows 10) chrome 77 (macos), safari 13, opera chrome
63 (windows 10) internet explorer 11 (windows 10) edge 1
6 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with appearance:none; let's take this example html: <form> <fieldset> <legend>fruit preferences</legend> <p> <label> <inpu...
...r of the "ugly" form features in action: this example has the following css applied to it: body { font-family: 'josefin sans', sans-serif; margin: 20px auto; max-width: 400px; } form > div { margin-bottom: 20px; } select { -webkit-appearance: none; appearance: none; } .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top:
6px; right: 10px; position: absolute; } button, label, input, select, progress, meter { display: block; font-family: inherit; font-size: 100%; padding: 0; margin: 0; box-sizing: border-box; width: 100%; padding: 5px; height: 30px; } input[type="text"], input[type="datetime-local"], input[type="color"], select { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } l...
...abel { margin-bottom: 5px; } button { width:
60%; margin: 0 auto; } note: if you want to test these examples across a number of browsers simultaneously, you can find it live here (also see here for the source code).
...And 2 more matches
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/d
6ed7
6c
6c7.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> sp...
...xt <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
67</address> main street
67 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 with alternative sources <audio controls="controls"><source src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3" type="audio/mpeg"><source src="https://udn.realityripple.com/samples/f7/14a4179ee
6.ogg" type="audio/ogg"> your browser does not support audio.
...And 2 more matches
Images in HTML - Learn web development
you are provided with a basic <img> tag; we'd like you to embed the image located at the following url: https://udn.realityripple.com/samples/ec/5a13bd14f
6.jpg earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.
... class="a11y-label">press esc to move focus away from the code area (tab 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: 1
6px; } .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; func...
...on.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show 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/5a13bd14f
6.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="171"\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 c...
...And 2 more matches
Video and audio content - Learn web development
an mp4 container often packages aac or mp3 audio with h.2
64 video.
...it turns out that several popular formats, such as mp3 and mp4/h.2
64, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon.
... in the united states, patents covered mp3 until 2017, and h.2
64 is encumbered by patents through at least 2027.
...And 2 more matches
HTML table basics - Learn web development
look at the table below for example and find a jovian gas giant with
62 moons.
... name mass (1024kg) diameter (km) density (kg/m3) gravity (m/s2) length of day (hours) distance from sun (10
6km) mean temperature (°c) number of moons notes terrestial planets mercury 0.330 4,879 5427 3.7 4222.
6 57.9 1
67 0 closest to the sun venus 4.87 12,104 5243 8.9 2802.0 108.2 4
64 0 earth 5.97 12,75
6 5514 9.8 24.0 149.
6 15 1 our world mars 0.
642
6,792 3933 3.7 24.7 227.9 -
65 2 the red planet jovian planet...
...s gas giants jupiter 1898 142,984 132
6 23.1 9.9 778.
6 -110
67 the largest planet saturn 5
68 120,53
6 687 9.0 10.7 1433.5 -140
62 ice giants uranus 8
6.8 51,118 1271 8.7 17.2 2872.5 -195 27 neptune 102 49,528 1
638 11.0 1
6.1 4495.1 -200 14 dwarf planets pluto 0.014
6 2,370 2095 0.7 153.3 590
6.4 -225 5 declassified as a planet in 200
6, but this remains controversial.
...And 2 more matches
A first splash into JavaScript - Learn web development
first let's look at arithmetic operators, for example: operator name example + addition
6 + 9 - subtraction 20 - 15 * multiplication 3 * 7 / division 10 / 5 you can also use the + operator to join text strings together (in programming, this is called concatenation).
...me example === strict equality (is it exactly the same?) 5 === 2 + 4 // false 'chris' === 'bob' // false 5 === 2 + 3 // true 2 === '2' // false; number versus string !== non-equality (is it not the same?) 5 !== 2 + 4 // true 'chris' !== 'bob' // true 5 !== 2 + 3 // false 2 !== '2' // true; number versus string < less than
6 < 10 // true 20 < 10 // false > greater than
6 > 10 // false 20 > 10 // true conditionals returning to our checkguess() function, i think it's safe to say that we don't want it to just spit out a placeholder message.
... line
6 appends the current userguess value onto the end of the guesses paragraph, plus a blank space so there will be a space between each guess shown.
...And 2 more matches
Arrays - Learn web development
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).
...ode</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 410px;width: 95%"> const list = document.queryselector('.output ul'); const totalbox = document.queryselector('.output p'); let total = 0; list.innerhtml = ''; totalbox.textcontent = ''; // number 1 'underpants:
6.99' 'socks:5.99' 't-shirt:14.99' 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 let itemtext = 0; const listitem = document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } totalbox.textcontent = 'total: $' + total.to...
....value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');\nconst totalbox = document.queryselector(\'.output p\');\nlet total = 0;\nlist.innerhtml = \'\';\ntotalbox.textcontent = \'\';\n\nlet products = [\'underpants:
6.99\',\n \'socks:5.99\',\n \'t-shirt:14.99\',\n \'trousers:31.99\',\n \'shoes:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subarray = products[i].split(\':\');\n let name = subarray[0];\n let price = number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n ...
...And 2 more matches
Getting started with Svelte - Learn web development
me; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width:
640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created.
... the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width:
640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element.
... at this point you can try updating your app.svelte component — for example change the <h1> element on line
6 of app.svelte so that it reads like this: <h1>hello {name} from mdn!</h1> just save your changes and the app running at localhost:5000 will be automatically updated.
...And 2 more matches
Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font:
62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { ...
... border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } 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.31579; } } /*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.
...#000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [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) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large >...
...And 2 more matches
Gecko info for Windows accessibility vendors
the domenum { navrelation_flows_to = 0x100
6 }; enum { navrelation_flows_from = 0x1007 }; these two relations allow the reading flow to break out of the normal dom flow.
...the following html tags are exposed as bstr's: abbr, acronym, blockquote, dd, dl, dt, form, frame, h1, h2, h3, h4, h5, h
6, iframe, q, tbody, tfoot, thead in addition, an html list uses the bullet bstr role to expose bullets and numbers that are automatically inserted into the formatting by gecko.
...e_buttonmenu not supported, state_haspopup used with role_button instead role_buttondropdowngrid supported for xul <colorpicker> role_pagetablist xul: <tab> dhtml: role="wairole:tabs" "abbr", "acronym", "blockquote", "dd", "dl", "dt", "form", "frame", "h1", "h2", "h3", "h4", "h5", "h
6", "iframe", "q", "tbody", "tfoot", "thead" html tag mirrors the role string "bullet" indirectly created for bullets when <ol> or <ul> used to create an html list "abbr", "acronym", "blockquote", "form", "frame", "h1", "h2", "h3", "h4", "h5", "h
6", "iframe", "q", "tbody", "tfoot", "thead" created from the identical html markup ...
...And 2 more matches
Debugging Table Reflow
+ 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.
... leaving assignnonpctcolwidths shows that already to all columns a width of 3
60 twips has been assigned assignnonpctcolwidths ex ***start table dump*** mcolwidths=3
60 3
60 3
60 3
60 col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 **start col dump** colindex=0 isanonymous=0 constraint=0 widths=3
60 540 1230 -1 -1 -1 -1 -1 -1 3
60 **end col dump** **start col dump** colindex=1 isanonymous=0 constraint=0 widths=3
60 540 -1 -1 -1 -1 -1 -1 -1 3
60 **end col dump** **start col dump** colindex=2 isanonymous=0 constraint=3 widths=3
60 540 -1 -1 -1 -1 -1 -1 540 3
60 **end col dump** **start col dump** colindex=3 isanonymous=0 constraint=0 widths=3
60 540 -1 -1 -1 -1 -1 -1 -1 3
60 **end col dump** ***end table dump*** the first column has already the minimum content width, the...
...at this step the final size is 3
60 twips.
...And 2 more matches
How Mozilla's build system works
finished reading 109
6 moz.build files into 127
6 descriptors in 2.40s backend executed in 2.39s 2188 total backend files.
... 0 created; 1 updated; 2187 unchanged total wall time: 5.03s; cpu time: 3.79s; efficiency: 75% what this is saying is that a total of 1,09
6 moz.build files were read.
... altogether, 1,27
6 data structures describing the build configuration were derived from them.
...And 2 more matches
QA phase
to create and configure this file, follow these instructions: until the fix for bug 10
63880 lands on mozilla-aurora and mozilla-beta when building language packs against those two trees you should: remove ac_add_options --disable-compile-environment from .mozconfig in step 3 use ./mach build config after step 4 update the mozilla source code: $ cd mozilla-aurora $ hg pull -u enter the following command to create the .mozconfig file: $ nano -w .mozconfig ent...
... if you're using koala, this should be located at /path/to/your/koala.project/locale/3.
6/x-testing, otherwise, it should be located at /path/to/your/working_dir/l10n_base/x-testing.
... enter the following command: $ hg log -l 1 you should see an output similar to the one below: changeset: 0:7c543e8f3a
6a 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 changesets that ar...
...And 2 more matches
Leak-hunting strategies and tips
see bug 10
68
60 and bug 8413
6 for examples.
...see bug 7
6091 or bug 49
648 for an example.
...(this can happen equally with or without nscomptr.) see bug 3858
6 and bug 287847 for examples.
...And 2 more matches
Network Addresses
network address types and constants network address functions the api described in this chapter recognizes the emergence of internet protocol version
6 (ipv
6).
... to facilitate the transition to ipv
6, it is recommended that clients treat all structures containing network addresses as transparent objects and use the functions documented here to manipulate the information.
...by using these functions with other network address functions, clients can support either version 4 or version
6 of the internet protocol transparently.
...And 2 more matches
Building NSS
make -c nss nss_build_all use_
64=1 the make-based build system for nss uses a variety of variables to control the build.
... use_
64 0 build for a 32-bit environment/abi.
... 1 build for a
64-bit environment/abi.
...And 2 more matches
Encrypt Decrypt MAC Keys As Session Objects
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 1
6 #define ptext_mac_buffer_size 9
6 #define ciphersize 9
6 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define ma...
...pk11_freeslot(slot); return null; } return key; } /* * decrypt and verify mac */ secstatus decryptandverifymac(const char* outfilename, char *encryptedfilename, secitem *citem, secitem *macitem, pk11symkey* ek, pk11symkey* mk, secitem *ivitem, secitem *paditem) { secstatus rv; prfiledesc* infile; prfiledesc* outfile; unsigned char decbuf[
64]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[
64]; unsigned int ctextlen; unsigned char newmac[digestsize]; unsigned int newmaclen = 0; unsigned int newptextlen = 0; unsigned int count = 0; unsigned int temp = ...
... */ outfile = pr_open(outfilename, pr_create_file | pr_truncate | pr_rdwr , 00
660); if (!outfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", outfilename); return secfailure; } rv = macinit(ctxmac); if (rv != secsuccess) goto cleanup; ctxenc = decryptinit(ek, iv, ivlen, ckm_aes_cbc); filelength = filesize(encryptedfilename); while ((ctextlen = pr_read(infile, ctext, sizeo...
...And 2 more matches
Encrypt and decrypt MAC using token
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 1
6 #define ptext_mac_buffer_size 9
6 #define ciphersize 9
6 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define ma...
...pk11_freeslot(slot); return null; } return key; } /* * decrypt and verify mac */ secstatus decryptandverifymac(const char* outfilename, char *encryptedfilename, secitem *citem, secitem *macitem, pk11symkey* ek, pk11symkey* mk, secitem *ivitem, secitem *paditem) { secstatus rv; prfiledesc* infile; prfiledesc* outfile; unsigned char decbuf[
64]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[
64]; unsigned int ctextlen; unsigned char newmac[digestsize]; unsigned int newmaclen = 0; unsigned int newptextlen = 0; unsigned int count = 0; unsigned int temp = ...
... */ outfile = pr_open(outfilename, pr_create_file | pr_truncate | pr_rdwr , 00
660); if (!outfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", outfilename); return secfailure; } rv = macinit(ctxmac); if (rv != secsuccess) goto cleanup; ctxenc = decryptinit(ek, iv, ivlen, ckm_aes_cbc); filelength = filesize(encryptedfilename); while ((ctextlen = pr_read(infile, ctext, sizeo...
...And 2 more matches
NSS_3.11.10_release_notes.html
bug 291384: certutil -k behavior doesn't match usage bug 374247: modutil -disable command not disabling modules' slots bug 384459: certification path validation fails when authority key identifier extension contains key identifier bug 38594
6: can't import certificate into cert database in fips mode (certutil).
... bug 387892: add entrust root ca certificate(s) to nss bug 39
6999: pk11_authenticate bug 397478: lock from ssl_initsymwrapkeyslock not freed on selfserv shutdown.
... bug 39748
6: session cache locks not freed on strsclnt shutdown.
...And 2 more matches
NSS 3.12.9 release notes
bug
6090
68: implement j-pake in freebl bug
607058: crash [@ nss_cms_decoder_work_data] bug
613394: november/december 2010 batch of nss root ca changes bug
610843: need way to recover softoken in child after fork() bug
617492: add pk11_keygenwithtemplate function to pk11wrap (for firefox sync) bug
6101
62: sha-512 and sha-384 hashes are incorrect for inputs of 512mb or larger when running under...
... windows and other 32-bit platforms (fx 3.
6.12 and 4.0b
6) bug 518551: vfychain crashes in pkits tests.
... bug 53
6485: crash during ssl handshake in [@ intel_aes_decrypt_cbc_25
6] bug 4443
67: nss 3.12 softoken returns the certificate type of a certificate object as ckc_x_509_attr_cert.
...And 2 more matches
NSS 3.15 release notes
nss 3.15 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_15_rtm/src/ new in nss 3.15 new functionality support for ocsp stapling (rfc
60
66, certificate status request) has been added for both client and server sockets.
...for more details of the issues with secitem_reallocitem, see bug 298
649 and bug 298938.
... bug 5543
69: fixed correctness of cert_cacheocspresponsefromsidechannel and other ocsp caching behaviour.
...And 2 more matches
NSS 3.21.3 release notes
security fixes in nss 3.21.3 bug 130
6103 / cve-201
6-5285 - fixed a possible dos on nss servers due to a missing null check.
... bug 1221
620 - fixed a possible left-shift of a negative integer value when parsing der.
... bug 120
6283 - fixed an out-of-bound read when parsing invalid utf-1
6.
...And 2 more matches
NSS 3.23 release notes
notable changes in nss 3.23 the copy of sqlite shipped with nss has been updated to version 3.10.2 (bug 1234
698) the list of tls extensions sent in the tls handshake has been reordered to increase compatibility of the extended master secret with servers (bug 1243
641) the build time environment variable nss_enable_zlib has been renamed to nss_ssl_enable_zlib (bug 1243872).
... the following ca certificates were removed cn = staat der nederlanden root ca sha-25
6 fingerprint: d4:1d:82:9e:8c:1
6:59:82:2a:f9:3f:ce:
62:bf:fc:de:2
6:4f:c8:4e:8b:95:0c:5f:f2:75:d0:52:35:4
6:95:a3 cn = netlock minositett kozjegyzoi (class qa) tanusitvanykiado sha-25
6 fingerprint: e
6:0
6:dd:ee:e2:ee:7f:5c:de:f5:d9:05:8f:f8:b7:d0:a9:f0:42:87:7f:
6a:17:1e:d8:ff:
69:
60:e4:cc:5e:a5 cn = netlock kozjegyzoi (class a) tanusitvanykiado sha-25
6 fingerprint: 7f:12:cd:5f:7e:5e:29:0e:c7:d8:51:79:d5:b7:2c:20:a5:be:75:08:ff:db:5b:f8:1a:b9:
68:4a:7f:c9:f
6:
67 cn = netlock uzleti (class b) tanusitvany...
...kiado sha-25
6 fingerprint: 39:df:7b:
68:2b:7b:93:8f:84:71:54:81:cc:de:8d:
60:d8:f2:2e:c5:98:87:7d:0a:aa:c1:2b:59:18:2b:03:12 cn = netlock expressz (class c) tanusitvanykiado sha-25
6 fingerprint: 0b:5e:ed:4e:84:
64:03:cf:55:e0:
65:84:84:40:ed:2a:82:75:8b:f5:b9:aa:1f:25:3d:4
6:13:cf:a0:80:ff:3f friendly name: verisign class 1 public pca – g2 sha-25
6 fingerprint: 34:1d:e9:8b:13:92:ab:f7:f4:ab:90:a9:
60:cf:25:d4:bd:
6e:c
6:5b:9a:51:ce:
6e:d0:
67:d0:0e:c7:ce:9b:7f friendly name: verisign class 3 public pca sha-25
6 fingerprint: a4:b
6:b3:99:
6f:c2:f3:0
6:b3:fd:8
6:81:bd:
63:41:3d:8c:50:09:cc:4f:a3:29:c2:cc:f0:e2:fa:1b:14:03:05 friendly name: verisign class 3 public pca – g2 sha-25
6 fingerprint: 83:ce:3c:12:29:
6...
...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-25
6 fingerprint: 0f:4e:9c:dd:2
6:4b:02:55:50:d1:70:80:
63:40:21:4f:e9:44:34:c9:b0:2f:
69:7e:c7:10:fc:5f:ea:fb:5e:38 cn = root ca generalitat valenciana sha-25
6 fingerprint: 8c:4e:df:d0:43:48:f3:22:9
6:9e:7e:29:a4:cd:4d:ca:00:4
6:55:0
6:1c:1
6:e1:b0:7
6:42:2e:f3:42:ad:
63:0e ou = rsa security 2048 v3 sha-25
6 fingerprint: af:8b:
67:
62:a1:e5:28:22:81:
61:a9:5d:5c:55:9e:e...
...2:
66:27:8f:75:d7:9e:83:01:89:a5:03:50:
6a:bd:
6b:4c the following ca certificates were added ou = ac raiz fnmt-rcm sha-25
6 fingerprint: eb:c5:57:0c:29:01:8c:4d:
67:b1:aa:12:7b:af:12:f7:03:b4:
61:1e:bc:17:b7:da:b5:57:38:94:17:9b:93:fa cn = amazon root ca 1 sha-25
6 fingerprint: 8e:cd:e
6:88:4f:3d:87:b1:12:5b:a3:1a:c3:fc:b1:3d:70:1
6:de:7f:57:cc:90:4f:e1:cb:97:c
6:ae:98:19:
6e cn = amazon root ca 2 sha-25
6 fingerprint: 1b:a5:b2:aa:8c:
65:40:1a:82:9
6: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-25
6 fingerprint: 18:ce:
6c:fe:7b:f1:4e:
60:b2:e3:47:b8:df:e8:
68:cb:31:d0:2e:bb:3a:da:27:15:
69:f5:03:43:b4:
6d:b3:a4 cn = amazon root ca 4 sha-25
6 finge...
...rprint: e3:5d:28:41:9e:d0:20:25:cf:a
6:90:38:cd:
62:39:
62:45:8d:a5:c
6:95:fb:de:a3:c2:2b:0b:fb:25:89:70:92 cn = luxtrust global root 2 sha-25
6 fingerprint: 54:45:5f:71:29:c2:0b:14:47:c4:18:f9:97:1
6: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-25
6 fingerprint: 3
6:3f:3c:84:9e:ab:03:b0:a2:a0:f
6:3
6:d7:b8:
6d:04:d3:ac:7f:cf:e2:
6a:0a:91:21:ab:97:95:f
6:e1:7
6:df cn = symantec class 1 public primary certification authority - g
6 sha-25
6 fingerprint: 9d:19:0b:2e:31:45:
66:
68:5b:e8:a8:89:e2:7a:a8:c7:d7: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-25
6 fingerprint: fe:8
6:3d:08...
...And 2 more matches
NSS 3.28 release notes
key exporters for tls 1.3 are supported (bug 1310
610).
... nss will now detect the presence of tokens that support additional elliptic curves and enable those curves for use in tls (bug 1303
648).
... nss now uses the signature schemes definition in tls 1.3 (bug 130944
6).
...And 2 more matches
NSS 3.48 release notes
see bug 15
62
671 for details.
... certificate authority changes the following ca certificates were added: bug 1591178 - entrust root certification authority - g4 cert sha-25
6 fingerprint: db3517d1f
6732a2d5ab97c533ec70779ee3270a
62fb4ac42383724
60e
6f01e88 upcoming changes in nss 3.49 the legacy dbm database, libnssdbm, will no longer be built by default.
... bugs fixed in nss 3.48 bug 1
600775 - require nspr 4.24 for nss 3.48 bug 1593401 - fix race condition in self-encrypt functions bug 1599545 - fix assertion and add test for early key update bug 1597799 - fix a crash in nssckfwobject_getattributesize bug 1591178 - add entrust root certification authority - g4 certificate to nss bug 1590001 - prevent negotiation of versions lower than 1.3 after helloretryrequest bug 159
6450 - added a simplified and unified mac implementation for hmac and cmac behind pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 158
617
6 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "beginning-of-v...
...And 2 more matches
NSS 3.50 release notes
see bug 1
6095
69 for details.
...see bug 1599
603 for details.
... bugs fixed in nss 3.50 bug 1599514 - update dtls 1.3 implementation to draft-30 bug 1
603438 - fix native tools build failure due to lack of zlib include dir if external bug 1599
603 - nist sp800-108 kbkdf - pkcs#11 implementation bug 1
60
6992 - cache the most recent pbkdf1 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts.
...And 2 more matches
NSS 3.51 release notes
introduction the nss team has released network security services (nss) 3.51 on
6 march 2020, which is a minor release.
...see bug 1
608892 for details.
... bugs fixed in nss 3.51 bug 1
608892 - update dtls 1.3 implementation to draft-34.
...And 2 more matches
NSS API Guidelines
the library supports base-
64 encoding/decoding, reader-writer locks, the secitem data type, der encoding/decoding, error types and numbers, oid handling, and secure random number generation.
... utility for any layer lib/util base
64.h, ciferfam.h, nssb
64.h, nssb
64t.h, nsslocks.h, nssrwlk.h, nssrwlkt.h, portreg.h, pqgutil.h, secasn1.h, secasn1t.h, seccomon.h, secder.h, secdert.h, secdig.h, secdigt.h, secitem.h, secoid.h, secoidt.h, secport.h, secrng.h, secrngt.h, secerr.h, watcomfx.h naming conventions this section describes the rules that (ideally) should be followed for naming and identifying new files, functions, and data types.
...the preferred format is: "@(#) $rcsfile: nss-guidelines.html, v $ $revision: 4893
6 $ $date: 2009-08-11 07:45:57 -0700 (tue, 11 aug 2009) $ $name$" you can put the string in a comment or in a static char array.
...And 2 more matches
Encrypt Decrypt_MAC_Using Token
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 1
6 #define ptext_mac_buffer_size 9
6 #define ciphersize 9
6 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define ma...
... */ secstatus decryptandverifymac(const char* outfilename, char *encryptedfilename, secitem *citem, secitem *macitem, pk11symkey* ek, pk11symkey* mk, secitem *ivitem, secitem *paditem) { secstatus rv; prfiledesc* infile; prfiledesc* outfile; unsigned char decbuf[
64]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[
64]; unsigned int ctextlen; unsigned char newmac[digestsize]; unsigned int newmaclen = 0; unsigned int newptextlen = 0; unsigned int count = 0; unsigned int temp = ...
... */ outfile = pr_open(outfilename, pr_create_file | pr_truncate | pr_rdwr , 00
660); if (!outfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", outfilename); return secfailure; } rv = macinit(ctxmac); if (rv != secsuccess) goto cleanup; ctxenc = decryptinit(ek, iv, ivlen, ckm_aes_cbc); filelength = filesize(encryptedfilename); while ((ctextlen = pr_read(infile, ctext, sizeo...
...And 2 more matches
NSS Sample Code Sample1
//
6.
...// - the application sends or uses the result (possibly // after base
64 encoding it.
... rv = getprivatekey(&prvkey); if (rv == 0 && prvkey) goto done; rv = 0; // these could be parameters to the init function rsaparams.keysizeinbits = 1024; rsaparams.pe =
65537; 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.
...And 2 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
sample code 3 /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 1
6 #define ptext_mac_buffer_size 9
6 #define ciphersize 9
6 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define ma...
...freeslot(slot); return null; } return key; } /* * decrypt and verify mac */ secstatus decryptandverifymac( const char* outfilename, char *encryptedfilename, secitem *citem, secitem *macitem, pk11symkey* ek, pk11symkey* mk, secitem *ivitem, secitem *paditem) { secstatus rv; prfiledesc* infile; prfiledesc* outfile; unsigned char decbuf[
64]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[
64]; unsigned int ctextlen; unsigned char newmac[digestsize]; unsigned int newmaclen = 0; unsigned int newptextlen = 0; unsigned int count = 0; unsigned int temp = ...
... */ outfile = pr_open(outfilename, pr_create_file | pr_truncate | pr_rdwr , 00
660); if (!outfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", outfilename); return secfailure; } rv = macinit(ctxmac); if (rv != secsuccess) goto cleanup; ctxenc = decryptinit(ek, iv, ivlen, ckm_aes_cbc); filelength = filesize(encryptedfilename); while ((ctextlen = pr_read(infile, ctext, sizeo...
...And 2 more matches
EncDecMAC using token object - sample 3
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 1
6 #define ptext_mac_buffer_size 9
6 #define ciphersize 9
6 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-...
...err, "pk11_findfixedkey failed (err %d)\n", pr_geterror()); pk11_freeslot(slot); return null; } return key; } /* * decrypt and verify mac */ secstatus decryptandverifymac(const char* outfilename, char *encryptedfilename, secitem *citem, secitem *macitem, pk11symkey* ek, pk11symkey* mk, secitem *ivitem, secitem *paditem) { secstatus rv; prfiledesc* infile; prfiledesc* outfile; unsigned char decbuf[
64]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[
64]; unsigned int ctextlen; unsigned char newmac[digestsize]; unsigned int newmaclen = 0; unsigned int newptextlen = 0; unsigned int count = 0; unsigned int temp = 0; unsigned int blocknumber = 0; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null...
...*/ outfile = pr_open(outfilename, pr_create_file | pr_truncate | pr_rdwr , 00
660); if (!outfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", outfilename); return secfailure; } rv = macinit(ctxmac); if (rv != secsuccess) goto cleanup; ctxenc = decryptinit(ek, iv, ivlen, ckm_aes_cbc); filelength = filesize(encryptedfilename); while ((ctextlen = pr_read(infile, ctext, sizeof(ctext))) > 0) { count += ctextlen; /* decrypt cipher text buffer using cbc and iv *...
...And 2 more matches
nss tech note1
how to use the nss asn.1 and quickder decoders nss technical note: 1 nss 3.
6 contains several decoders for asn.1 and der.two of them are extensively used and are part of the public nss api : the "classic" asn.1 decoder, written by lisa repka .
... the "quickder" decoder, written by julien pierre for nss 3.
6 .
...it is specified in the upper 2 tag bits (number
6 and 7).
...And 2 more matches
PKCS #11 Module Specs
sample file: library= name="netscape internal crypto module" parameters="configdir=/u/relyea/.netscape certprefix= secmod=secmod.db" nss="flags=internal,pkcs11module trustorder=1 cipherorder=-1 ciphers= slotparams={0x1=[slotflags='rsa,dsa,dh,rc4,rc2,des,md2,md5,sha1,ssl,tls,publiccerts,random'] 0x2=[slotflags='rsa' askpw=only]}" library=dkck32.dll name="datakey signasure 3
600" nss="trustorder=50 ciphers= " library=swft32.dll name="netscape software fortezza" parameters="keyfile=/u/relyea/keyfile" nss="trustorder=50 ciphers=fortezza slotparams=0x1=[slotflags='fortezza']" library=core32.dll name="litronic netsign" softoken specific parameters the internal nss pkcs #11 implementation (softoken) requires applications parameters.
...this value will be truncated at
64 bytes (no null, partial utf8 characters dropped).
...this value will be truncated at
64 bytes (no null, partial utf8 characters dropped).
...And 2 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
65537.
... -
6 add an extended key usage extension to a certificate that is being created or added to the database.
... trusted peer c valid ca t trusted ca to issue client certs (implies c) c trusted ca to issue server certs(for ssl only) (implies c) u user cert w send warning creating a certificate request this example generates a binary certificate request file named e95c.req in the specified directory: certutil -r -s "cn=john smith, o=netscape, l=mountain view, st=california, c=us" -p "
650-555-8888" -o mycert.req -d certdir before it creates the request file, the certificate database tool prompts you for a password: enter password or pin for "communicator certificate db": creating a certificate a valid certificate must be issued by a trusted ca.
...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 1
6 - pkcs12 decode error o 17 - 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 2
6 - pkcs12 add password itegrity error o 27 - 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 t...
...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:
67:37:
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 ow...
...And 2 more matches
Introduction to the JavaScript shell
the name must be one of the parameter keys (such as 'maxbytes', 'maxmallocbytes' or 'gcnumber') defined by for_each_gc_param in https://searchfox.org/mozilla-central/source/js/src/builtin/testingfunctions.cpp#4
64.
...for example, if you want to display a message when line
6 of a function, dosomething() is executed, you can enter the following: trap(dosomething, line2pc(dosomething,
6), "print('line
6!\n')"); note: when a trap is set, the corresponding bytecode in the program is replaced with a trap bytecode until you use untrap() to remove the trap.
... 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: uint1
6 3 00003: setvar 0 0000
6: pop 00007: name "print" 00010: pushobj 00011: getvar 0 00014: uint1
6 2 00017: 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 progra...
...And 2 more matches
JSErrorReport
uclinebuf const char1
6_t * unicode line buffer.
... uctokenptr const char1
6_t * pointer to the error token in *uclinebuf.
... ucmessage const char1
6_t * the default unicode error message.
...And 2 more matches
JSProtoKey
iterator mxr search for jsproto_iterator jsproto_stopiteration stopiteration mxr search for jsproto_stopiteration jsproto_arraybuffer arraybuffer mxr search for jsproto_arraybuffer jsproto_int8array int8array mxr search for jsproto_int8array jsproto_uint8array uint8array mxr search for jsproto_uint8array jsproto_int1
6array int1
6array mxr search for jsproto_int1
6array jsproto_uint1
6array uint1
6array mxr search for jsproto_uint1
6array jsproto_int32array int32array mxr search for jsproto_int32array jsproto_uint32array uint32array mxr search for jsproto_uint32array jsproto_float32array float32array mxr search for jsproto_float32array ...
... jsproto_float
64array float
64array mxr search for jsproto_float
64array jsproto_uint8clampedarray uint8clampedarray mxr search for jsproto_uint8clampedarray jsproto_proxy proxy mxr search for jsproto_proxy jsproto_weakmap weakmap mxr search for jsproto_weakmap jsproto_map map mxr search for jsproto_map jsproto_set set mxr search for jsproto_set jsproto_dataview dataview mxr search for jsproto_dataview jsproto_symbol symbol added in spidermonkey 38 mxr search for jsproto_symbol jsproto_sharedarraybuffer sharedarraybuffer (nightly only) mxr search for jsproto_sharedarraybuffer jsproto_intl intl mxr search for jsproto_intl j...
...md (nightly only) mxr search for jsproto_simd jsproto_weakset weakset added in spidermonkey 38 mxr search for jsproto_weakset jsproto_sharedint8array sharedint8array (nightly only) mxr search for jsproto_sharedint8array jsproto_shareduint8array shareduint8array (nightly only) mxr search for jsproto_shareduint8array jsproto_sharedint1
6array sharedint1
6array (nightly only) mxr search for jsproto_sharedint1
6array jsproto_shareduint1
6array shareduint1
6array (nightly only) mxr search for jsproto_shareduint1
6array jsproto_sharedint32array sharedint32array (nightly only) mxr search for jsproto_sharedint32array jsproto_shareduint32array shareduint32array (nightly only) mxr sea...
...And 2 more matches
JS_DefineProperty
e, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, js::handleobject value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); boo...
...l js_defineucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, int32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, ...
...inepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handle<jspropertydescriptor> desc, js::objectopresult &result); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handle<jspropertydescriptor> desc); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, js::handle<jspropertydescriptor> desc); // ---- added in spidermonkey 1.8.1 ---- bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertybyid(jscontext *cx, js::hand...
...And 2 more matches
jsint
int1
6; typedef ...
... uint1
6; typedef ...
...int
64; typedef ...
...And 2 more matches
Places Developer Guide
accessing bookmarks and related items accessing item properties for all items: string getitemtitle(aitemid) - returns an item's title int
64 getitemindex(aitemid) - returns an item's position in it's parent folder prtime getitemtype(aitemid) - returns the type of an item (bookmark, folder, separator) prtime getitemdateadded(aitemid) - returns the time in microseconds that an item was added prtime getitemlastmodified(aitemid) - returns the time in microseconds that an item was last modified int
64 getfolderidforitem(aitemid) - ...
... for bookmarks: nsiuri getbookmarkuri(aitemid) - returns the uri of a bookmark item string getkeywordforbookmark(aitemid) - returns a bookmark's keyword, or null for folders: int
64 getchildfolder(afolderid, asubfoldertitle) - returns the id of the first subfolder matching the given title.
... int
64 getidforitemat(afolderid, aposition) - returns the id of the item at the given position (throws if there's no item there).
...And 2 more matches
How to build a binary XPCOM component using Visual Studio
you also need a couple of pre-built libraries (glib-1.2.dll & libidl-0.
6.dll) from the wintools.zip archive.
... copy glib-1.2.dll & libidl-0.
6.dll into the bin subfolder of gecko-sdk.
...recap: use the right gecko sdk for your xulrunner release use a microsoft compiler use pre-built glib-1.2.dll & libidl-0.
6.dll libraries from wintools.zip download the sample project here is what the folder structure looks like: create a vc++ project visual studio project and file templates (or wizards) for creating xpcom modules and components do not currently exist.
...And 2 more matches
nsCStringEncoding
« xpcom api reference summary the nscstringencoding enumeration describes the set of character encodings understood by the ns_cstringtoutf1
6 and ns_utf1
6tocstring functions.
... ns_cstring_encoding_ascii conversion between ascii and utf-1
6 assumes that all bytes in the source string are 7-bit ascii and can be inflated to utf-1
6 by inserting null bytes.
...ns_cstring_encoding_utf8 conversion between utf-8 and utf-1
6 is non-lossy.
...And 2 more matches
mozIStorageBindingParams
last changed in gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0) inherits from: nsisupports you can only create mozistoragebindingparams objects by calling the mozistoragebindingparamsarray.newbindingparams().
... void bindint
64byindex(in unsigned long aindex, in long long avalue); native code only!
... void bindint
64byname(in autf8string aname, in long long avalue); native code only!
...And 2 more matches
nsIChannel
inherits from: nsirequest last changed in gecko 19.0 (firefox 19.0 / thunderbird 19.0 / seamonkey 2.1
6) once a channel is created (via nsiioservice.newchannel()), parameters for that request may be set by using the channel attributes, or by calling queryinterface() to retrieve a subclass of nsichannel for protocol-specific parameters.
... contentlength int
64_t the length of the data associated with the channel if available.
... note: as of gecko 19.0, this parameter changed from long to int
64_t.
...And 2 more matches
nsIContentFrameMessageManager
methods void dump(in domstring astr); domstring atob(in domstring aasciistring); domstring btoa(in domstring abase
64data); dump() prints the specified string to standard output.
... atob() convert ascii base
64 data to binary data.
... btoa() convert binary data to ascii base
64 data .
...And 2 more matches
nsIDOMEvent
inherits from: nsisupports last changed in gecko 1
6.0 (firefox 1
6.0 / thunderbird 1
6.0 / seamonkey 2.13) note: as of gecko 1
6.0, the nsiprivatedomevent interface was merged into this interface.
... everything marked as gecko 1
6.0 was previously available in that interface.
... see bug 7
61
613.
...And 2 more matches
nsIEffectiveTLDService
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/effective-tld-service;1.
... ns_error_host_is_ip_address this exception is thrown if auri is a numeric ipv4 or ipv
6 address.
... ns_error_host_is_ip_address this exception is thrown if ahost is a numeric ipv4 or ipv
6 address.
...And 2 more matches
nsINetworkLinkService
1.0
66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by: @mozilla.org/network/network-link-service;1 as a service: var networklinkservice = components.classes["@mozilla.org/network/network-link-service;1"] .getservice(components.interfaces.nsinetworklinkservice); attributes attribute type description islinkup boolean this is set to true when the system is believed to have a usable network connection.
...android support was backed out due to perceived security concerns, see bug
691054.
... as of gecko 28.0 android support is available again, see bug 939
680.
...And 2 more matches
nsIPermissionManager
last changed in gecko 1
6 (firefox 1
6 / thunderbird 1
6 / seamonkey 2.13) inherits from: nsisupports method overview void add(in nsiuri uri, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print
64 expiretime); void addfromprincipal(in nsiprincipal principal, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print
64 expiretime); void remove(in autf8string host, in string type); void removefromprincipal(in nsiprinc...
...ipal principal, in string type); void removepermission(in nsipermission perm); void removeallsince(in int
64_t since); void removeall(); pruint32 testexactpermission(in nsiuri uri, in string type); pruint32 testexactpermissionfromprincipal(in nsiprincipal principal, in string type); pruint32 testpermission(in nsiuri uri, in string type); pruint32 testpermissionfromprincipal(in nsiprincipal principal, in string type); attributes attribute type description enumerator nsisimpleenumerator enumerates all stored permissions.
... void add( in nsiuri uri, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print
64 expiretime ); parameters uri the uri to add the permission for.
...And 2 more matches
nsIPropertyBag2
iew nsivariant get(in astring prop); acstring getpropertyasacstring(in astring prop); astring getpropertyasastring(in astring prop); autf8string getpropertyasautf8string(in astring prop); boolean getpropertyasbool(in astring prop); double getpropertyasdouble(in astring prop); print32 getpropertyasint32(in astring prop); print
64 getpropertyasint
64(in astring prop); void getpropertyasinterface(in astring prop, in nsiidref iid, [iid_is(iid), retval] out nsqiresult result); pruint32 getpropertyasuint32(in astring prop); pruint
64 getpropertyasuint
64(in astring prop); prbool haskey(in astring prop); methods get() this method returns null if the value does not exist, or exists but is...
...getpropertyasint
64() print
64 getpropertyasint
64( in astring prop ); parameters prop property to return the value of.
... return value the property value as a print
64.
...And 2 more matches
XPCOM primitive
(however, if you are designing 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-00
60089
62422)] interface nsisupportsid : nsisupportsprimitive { attribute nsidptr data; string tostring(); }; astring nsisupportsstring @mozilla.org/supports-string;1 [scriptable, uuid(d79dc970-4a1c-11d3-9890-00
60089
62422)] interface nsisupportsstring : nsisupportsprimitive { attribute astring data; wstring tostring(); }; prbool nsisupportsprbool @mozilla.org/supports-prbool;1 [sc...
...riptable, uuid(ddc3b490-4a1c-11d3-9890-00
60089
62422)] interface nsisupportsprbool : nsisupportsprimitive { attribute prbool data; string tostring(); }; pruint8 nsisupportspruint8 @mozilla.org/supports-pruint8;1 [scriptable, uuid(dec2e4e0-4a1c-11d3-9890-00
60089
62422)] interface nsisupportspruint8 : nsisupportsprimitive { attribute pruint8 data; string tostring(); }; pruint1
6 nsisupportspruint1
6 @mozilla.org/supports-pruint1
6;1 [scriptable, uuid(dfacb090-4a1c-11d3-9890-00
60089
62422)] interface nsisupportspruint1
6 : nsisupportsprimitive { attribute pruint1
6 data; string tostring(); }; pruint32 nsisupportspruint32 @mozilla.org/supports-pruint32;1 [scriptable, uuid(e01dc470-4a1c-11d3-9890-00
60089
62422)] interface nsisupportspruint32 : nsisupportsprimitive { attr...
...ibute pruint32 data; string tostring(); }; pruint
64 nsisupportspruint
64 @mozilla.org/supports-pruint
64;1 [scriptable, uuid(e135
67c0-4a1c-11d3-9890-00
60089
62422)] interface nsisupportspruint
64 : nsisupportsprimitive { attribute pruint
64 data; string tostring(); }; prtime nsisupportsprtime @mozilla.org/supports-prtime;1 [scriptable, uuid(e25
63
630-4a1c-11d3-9890-00
60089
62422)] interface nsisupportsprtime : nsisupportsprimitive { attribute prtime data; string tostring(); }; char nsisupportschar @mozilla.org/supports-char;1 [scriptable, uuid(e2b05e40-4a1c-11d3-9890-00
60089
62422)] interface nsisupportschar : nsisupportsprimitive { attribute char data; string tostring(); }; print1
6 nsisupportsprint1
6 @mozilla.org/supports-print1
6;1 [scriptable, uuid(e30d94b0-4a1...
...And 2 more matches
Working with Multiple Versions of Interfaces
to do this i used the accessibility framework: hwnd gethwnd(nsidomnode *node){ hwnd self = null; nsresult rv; nscomptr<nsiaccessibleretrieval> refp; refp = do_createinstance( "@mozilla.org/accessibleretrieval;1", &rv); if (ns_failed(rv)){ return self; } //line
6.
...unfortunately we compiled this in the latest sdk, and so this magic number happens to be: "244e4c
67-a1d3-44f2-9cab-cdaa31b
6804
6" whereas, inside firefox 2, the iid it happens to know about is: "
663ca4a8-d219-4000-925d-d8f
6640
6b
62
6".
... the optimist's solution the first thing we do is replace line
6 above by our plan b: if (ns_failed(rv)){ return gethwndb(node); } //new line
6.
...And 2 more matches
XPIDL
idl types idl c++ in parameter c++ out parameter js type notes boolean bool bool* boolean char char char* string only chars in range \u0000-\u00ff permitted double double double* number float float float* number long int32_t int32_t* number long long int
64_t int
64_t* number octet uint8_t uint8_t* number short int1
6_t int1
6_t* number string const char* char** string only chars in range \u0000-\u00ff permitted most of the time you don't want to use this type but autf8string or acstring unsigned long uint32_t uint32_t* number unsign...
...ed long long uint
64_t uint
64_t* number unsigned short uint1
6_t uint1
6_t* number wchar char1
6_t char1
6_t* string full unicode set permitted wstring const char1
6_t* char1
6_t** string full unicode set permitted most of the time you don't want to use this type but astring.
... in addition to this list, nearly every idl file includes nsrootidl.idl in some fashion, which also defines the following types: table 2: types provided by nsrootidl.idl idl typedef c++ in parameter c++ out parameter js type notes prtime (xpidl unsigned long long typedef,
64 bits) number prtime is in microseconds, while js date assumes time in milliseconds nsresult (xpidl unsigned long typedef, 32 bits) number nsrefcnt (xpidl unsigned long typedef, 32 bits) number size_t (xpidl unsigned long typedef, 32 bits) number voidptr void* void* not allowed charptr char* char**...
...And 2 more matches
Working with ArrayBuffers
bug 73293
6 includes a discussion of working with an arraybuffer.
...pixelbuffer.tostring(); // "ctypes.uint8_t.ptr(ctypes.uint
64("0x352e0000"))" var imgwidth = 400; var imgheight = 400; var myimgdat = new imagedata(imgwidth, imgheight); method 1: passing arraytype cdata to uint8clampedarray.prototype.set one method is to get into a js-ctypes array, and then set it into the imagedata, as illustrated by the following code example.
...var casted = ctypes.cast(pixelbuffer.address(), ctypes.uint8_t.array(myimgdata.data.length).ptr).contents; // myimgdat.data.length is imgwidth * imgheight * 4 because per pixel there is r, g, b, a numbers casted.tostring(); // "ctypes.uint8_t.array(
640000)([45,
66, 135, 255, 99, 8
6, 55, 255, ..........
...And 2 more matches
CData
methods available on string objects these methods must be called on objects that are arrays or pointers to 8-bit or 1
6-bit character or integer types, terminated by a null character.
... here is a method to read "malformed", it attempts to do readstring on it, if it errors then it tries to read it in another way, so this is an alternative to readstringreplacemalformed, it is an attempt at readingmalformed function readaschar8thenaschar1
6(stringptr, known_len, jschar) { // when reading as jschar it assumes max length of 500 // stringptr is either char or jschar, 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 tr...
...ied this: //"stringptr.contents.tostring()" "95" //"stringptr.tostring()" "ctypes.unsigned_char.ptr(ctypes.uint
64("0x7f73d5c87
650"))" // 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 ?
...And 2 more matches
Plug-in Development Overview - Plugins
for more information about mime types, see these mime rfcs: rfc-2045: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-204
6: "multipurpose internet mail extensions (mime) part two: media types" rfc-4288: "media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms.
...see bug 1254
69.
...for example: str 128 mime type string 1 video/quicktime string 2 mov, moov string 3 audio/aiff string 4 aiff string 5 image/jpeg string
6 jpg several other optional strings may contain useful information about the plug-in.
...And 2 more matches
Edit fonts - Firefox Developer Tools
note: the updated font tools as shown in this article are available in firefox
63 onwards; if you are using an older version of firefox the tools will not look or behave quite the same, but they will be similar (most notably the font editor will not be available).
...in firefox
61 and
62, this section does not exist.
...in firefox
61 and
62, this area is labeled "other fonts in page" and doesn't include the fonts mentioned in the "fonts used" section.
...And 2 more matches
Animating CSS properties - Firefox Developer Tools
it's commonly accepted that
60 frames per second is the rate at which animations will appear smooth.
... for a rate of
60 frames per second, that gives the browser 1
6.7 milliseconds to execute the complete flow.
...average frame rate here is 4
6.
67fps, well below the target of
60fps.
...And 2 more matches
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="5
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="22
6" 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?
... bluetoothdevice.vendorid read only the 1
6-bit vendor id field in the pnp_id characteristic in the device_information service.
...And 2 more matches
Using the CSS Typed Object Model - Web APIs
cssunit.appendchild( document.createtextnode( allcomputedstyles.get( ofinterest[i] ).unit )); row.appendchild( cssunit ); //add the row to the table stylestable.appendchild( row ); } for those of you using a non-supporting browser, the above output should looks something like this: property value unit padding-top 0 px margin-bottom 1
6 px font-size 1
6 px font-stretch 100 percent animation-duration 0 s animation-iteration-count 1 number width auto undefined height auto undefined you'll note the <length> unit returned is px, the <percentage> unit returned is percent, the <time> unit is s for 'seconds', and the unitless <number> uni...
...we'll take a look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 1
6%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198, 100%,
66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat 5% center url(https://mdn.mozillademos.org/files/1
6793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color:...
...ole.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "number"} console.log( transform.is2d ); // true // cssimagevalue let bgimage = allcomputedstyles.get('background-image'); console.log( bgimage ); // cssimagevalue console.log( bgimage.tostring() ); // url("https://mdn.mozillademos.org/files/1
6793/magicwand.png") // cssunparsedvalue let unit = allcomputedstyles.get('--unit'); console.log( unit ) // let parsedunit = cssnumericvalue.parse( unit ); console.log( parsedunit ); console.log( parsedunit.unit ); console.log( parsedunit.value ); for this example to work, the example must be closed out here.
...And 2 more matches
Advanced animations - Web APIs
<canvas id="canvas" width="
600" height="300"></canvas> as usual, we need a drawing context first.
... <canvas id="canvas" style="border: 1px solid" width="
600" height="300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw(...
... second demo <canvas id="canvas" style="border: 1px solid" width="
600" height="300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw(...
...And 2 more matches
DedicatedWorkerGlobalScope - Web APIs
properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase
64, and windoweventhandlers.
... event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from windowtimers, windowbase
64, and windoweventhandlers.
... methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from windowtimers, windowbase
64, and windoweventhandlers.
...And 2 more matches
Document.execCommand() - Web APIs
the grabber is disabled by default since firefox
64 (bug 1490
641).
...the controls are disabled by default since firefox
64 (bug 1490
641).
...the handles are disabled by default since firefox
64 (bug 1490
641).
...And 2 more matches
EXT_color_buffer_half_float - Web APIs
the ext_color_buffer_half_float extension is part of the webgl api and adds the ability to render to 1
6-bit floating-point color buffers.
... constants ext.rgba1
6f_ext rgba 1
6-bit floating-point color-renderable format.
... ext.rgb1
6f_ext rgb 1
6-bit floating-point color-renderable format.
...And 2 more matches
HTMLCanvasElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlcanvaselemen...
...And 2 more matches
HTMLIFrameElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmliframeelemen...
...And 2 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; 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="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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...
...And 2 more matches
HTMLMediaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0
600 180" 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="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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...
...And 2 more matches
Timing element visibility with the Intersection Observer API - Web APIs
the following style is applied to that: main { grid-column: 2; grid-row: 2; margin: 0; margin-left: 1
6px; font-size: 1
6px; } the primary feature here is that the grid position is set to place the body content in column 2, row 2.
... articles each article is contained in an <article> element, styled like this: article { background-color: white; padding:
6px; } article:not(:last-child) { margin-bottom: 8px; } article h2 { margin-top: 0; } this creates article boxes with a white background which float atop the blue background, with a small margin around the article.
... .ad { height: 9
6px; padding:
6px; border-color: #555; border-style: solid; border-width: 1px; } .ad:not(:last-child) { margin-bottom: 8px; } .ad h2 { margin-top: 0; } .ad div { position: relative; float: right; padding: 0 4px; height: 20px; width: 120px; font-size: 14px; bottom: 30px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.5); } there's nothing magic in here.
...And 2 more matches
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,monac...
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="11
6" 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" fil...
...l="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="29
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor keyboardevent() creates a new keyboardevent object.
...And 2 more matches
Recording a media element - Web APIs
<div class="left"> <div id="startbutton" class="button"> start </div> <h2>preview</h2> <video id="preview" width="1
60" height="120" autoplay muted></video> </div> we present our main interface in two columns.
... <div class="right"> <div id="stopbutton" class="button"> stop </div> <h2>recording</h2> <video id="recording" width="1
60" height="120" controls></video> <a id="downloadbutton" class="button"> download </a> </div> on the right we see a stop button and the <video> element which will be used to play back the recorded video.
... <div class="bottom"> <pre id="log"></pre> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; display: block; width: 1
60px; border: 1px solid black; font-size: 1
6px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; text-decoration: none; } h2 { margin-bottom: 4px; } .left { margin-right: 10px; float: left; width: 1
60px; padding: 0px; } .right { margin-left: 10px; float: left; width: 1
60px; padding: 0px; } .bottom { clear: ...
...And 2 more matches
PaymentResponse.shippingAddress - Web APIs
lue: '0.00'}, selected: true }; if (shippingaddress.region === 'mo') { shippingoption.id = 'mo'; shippingoption.label = 'free shipping in missouri'; details.total.amount.value = '55.00'; } else { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '5.00'; details.total.amount.value = '
60.00'; } details.displayitems.splice(2, 1, shippingoption); details.shippingoptions = [shippingoption]; } else { delete details.shippingoptions; } resolve(details); } specifications specification status comment payment request api candidate recommendation initial definition.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingaddresschrome full support
61edge full support 15firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support 5
6 full support 5
6 no support 53 — 5
6disabled disabled from version 53 until version 5
6 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
...And 2 more matches
PaymentResponse.shippingOption - Web APIs
ershippingoption; 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 = '
67.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 defin...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingoptionchrome full support
61edge full support 15firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support 5
6 full support 5
6 no support 53 — 5
6disabled disabled from version 53 until version 5
6 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
...And 2 more matches
PhotoCapabilities - Web APIs
opera full support 4
6safari ?
... opera full support 4
6safari ?
... opera full support 4
6safari ?
...And 2 more matches
RTCDataChannel: bufferedamountlow event - Web APIs
bubbles no cancelable no interface event event handler property onbufferedamountlow examples this example sets up a handler for bufferedamountlow to request more data any time the data channel's buffer falls below the number of bytes specified by bufferedamountlowthreshold, which we have set to
6553
6.
... in other words, we'll try to keep at least
64kb of data in the buffer, reading
64kb at a time from the source.
... let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold =
6553
6; pc.addeventlistener("bufferedamountlow", ev => { if (source.position <= source.length) { dc.send(source.readfile(
6553
6)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdatachannel() to create the data channel.
...And 2 more matches
RTCIceCandidateStats.address - Web APIs
while it's preferred that the address be specified as an ipv4 or ipv
6 numeric address, a fully-qualified domain name can be used as well.
... syntax candidateaddress = rtcicecandidatestats.address; value either an ipv4 or ipv
6 address or a fully-qualified domain name, which corresponds to the candidate.
... if the value is entirely comprised of hexadecimal digits and colon (":") characters, it is interpreted as an ipv
6 address.
...And 2 more matches
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="5
6" 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="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="23
6" 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 a...
...removed from the specification's may 13, 201
6 working draft.
...And 2 more matches
SVGEllipseElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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-baseli...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...And 2 more matches
SVGRectElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...And 2 more matches
SVGTSpanElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" stro...
...ke="#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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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 point...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...And 2 more matches
SVGTextElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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</tex...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...And 2 more matches
Using server-sent events - Web APIs
when not used over http/2, sse suffers from a limitation to the maximum number of open connections, which can be especially painful when opening multiple tabs, as the limit is per browser and is set to a very low number (
6).
...this limit is per browser + domain, which means that you can open
6 sse connections across all of the tabs to www.example1.com and another
6 sse connections to www.example2.com (per stackoverflow).
... echo "event: ping\n"; $curdate = date(date_iso8
601); echo 'data: {"time": "' .
...And 2 more matches
SharedWorkerGlobalScope - Web APIs
properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase
64, and windoweventhandlers.
... event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from windowtimers, windowbase
64, and windoweventhandlers.
... methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from windowtimers, windowbase
64, and windoweventhandlers.
...And 2 more matches
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).
... support noopera full support 40safari full support 10.1webview android full support 53chrome android full support 53firefox 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 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): t...
...And 2 more matches
TextEncoder.prototype.encodeInto() - Web APIs
return value a textencoderencodeintoresult dictionary, which contains two members: read the number of utf-1
6 units of code from the source that has been converted over to utf-8.
...lacement character if (0xdc00 <= nextcode && nextcode <= 0xdfff) { //point = ((point - 0xd800)<<10) + nextcode - 0xdc00 + 0x10000|0; point = (point<<10) + nextcode - 0x35fdc00|0; if (point > 0xffff) return fromcharcode( (0x1e/*0b11110*/<<3) | (point>>>18), (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 <= 0x007f) return nonasciichars; else */...
...if (point <= 0x07ff) { return fromcharcode((0x
6<<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(){}; textencoderprototype["encode"] = function(inputstring) { // 0xc0 => 0b11000000; 0xff => 0b11111111; 0xc0-0xff => 0b11xxxxxx // 0x80 => 0b10000000; 0xbf => 0b10111111; 0x80-0xbf => 0b10xxxxxx var encodedstring = inputstring === void 0 ?
...And 2 more matches
TextEncoder - Web APIs
example const encoder = new textencoder() const view = encoder.encode('€') console.log(view); // uint8array(3) [22
6, 130, 172] constructor textencoder() returns a newly constructed textencoder that will generate a byte stream with utf-8 encoding.
... if (typeof textencoder === "undefined") { textencoder=function textencoder(){}; textencoder.prototype.encode = function encode(str) { "use strict"; var len = str.length, respos = -1; // the uint8array's length must be at least 3x the length of the string because an invalid utf-1
6 // takes up the equivelent space of 3 utf-8 characters to encode it properly.
... nextcode = str.charcodeat(i); if (nextcode >= 0xdc00 && nextcode <= 0xdfff) { point = (point - 0xd800) * 0x400 + nextcode - 0xdc00 + 0x10000; i += 1; if (point > 0xffff) { resarr[respos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); resarr[respos += 1] = (0x2/*0b10*/<<
6) | ((point>>>12)&0x3f/*0b00111111*/); resarr[respos += 1] = (0x2/*0b10*/<<
6) | ((point>>>
6)&0x3f/*0b00111111*/); resarr[respos += 1] = (0x2/*0b10*/<<
6) | (point&0x3f/*0b00111111*/); continue; } } else { resarr[respos += 1] = 0xef/*0b11101111*/; resarr[respos += 1] = 0xbf...
...And 2 more matches
WebGLRenderingContext.renderbufferStorage() - Web APIs
gl.rgb5
65: 5 red bits,
6 green bits, 5 blue bits.
... gl.depth_component1
6: 1
6 depth bits.
... gl.depth_stencil when using a webgl 2 context, the following values are available additionally: gl.r8 gl.r8ui gl.r8i gl.r1
6ui gl.r1
6i gl.r32ui gl.r32i gl.rg8 gl.rg8ui gl.rg8i gl.rg1
6ui gl.rg1
6i gl.rg32ui gl.rg32i gl.rgb8 gl.rgba8 gl.srgb8_alpha8 (also available as an extension for webgl 1, see below) gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a2ui gl.rgba1
6ui gl.rgba1
6i gl.rgba32i gl.rgba32ui gl.depth_component24 gl.depth_component32f gl.depth24_stencil8 gl.depth32f_stencil8 when using the webgl_color_buffer_float extension: ext.rgba32f_ext: rgba 32-bit floating-point type.
...And 2 more matches
Using WebRTC data channels - Web APIs
messages smaller than 1
6kib can be sent without concern, as all major user agents handle them the same way.
... concerns with large messages currently, it's not practical to use rtcdatachannel for messages larger than
64kib (1
6kib if you want to support cross-browser exchange of data).
...with eor support in place, rtcdatachannel payloads can be much larger (officially up to 25
6kib, but firefox's implementation caps them at a whopping 1gib).
...And 2 more matches
Functions and classes available to Web Workers - Web APIs
by default, methods and properties of window are not available to them, but dedicatedworkerglobalscope, like window, implements windowtimers and windowbase
64.
... 4
6 (4
6) no support (yes) no support filereadersync this api allows synchronous read of blob and file objects.
... 21 (21) and 2
6 (2
6) for url() constructor no support no support no support webgl with offscreencanvas webgl (web graphics library) is a javascript api for rendering interactive 3d and 2d graphics within any compatible web browser without the use of plug-ins.
...And 2 more matches
Window.open() - Web APIs
an offset is universally implemented by browser manufacturers (it is 29 pixels in ie
6 sp2 with the default theme) and its purpose is to help users to notice new windows opening.
... toolbar and ui parts features in modern browsers (firefox 7
6 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 7
6) will render the tab bar if it is visible, present in the parent window.
...And 2 more matches
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
// adapted from the patch for moztcpsocket error reporting (bug 8
6119
6).
... case 13: // sec_error_unknown_issuer, sec(13) case 20: // sec_error_untrusted_issuer, sec(20) case 21: // sec_error_untrusted_cert, sec(21) case 3
6: // sec_error_ca_cert_invalid, sec(3
6) errname = 'securityuntrustedcertificateissuererror'; break; case 90: // sec_error_inadequate_key_usage, sec(90) errname = 'securityinadequatekeyusageerror'; break; case 17
6: // sec_error_cert_signature_algorithm_disabled, sec(17
6) errname = 'securitycertificatesignaturealgorithmdisablederror';...
...bug 8
67872 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
ARIA: gridcell role - Accessibility
<div role="row"> <div role="gridcell">jane</div> <div role="gridcell">smith</div> <div role="gridcell">49
6-
619-5098</div> … </div> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria.
...aria-colindex is being used to describe the rows' position and allows a person using assistive technology to infer that certain rows have been removed: <div role="grid" aria-colcount="
6"> <div role="rowgroup"> <div role="row"> <div role="columnheader" aria-colindex="1">first name</div> <div role="columnheader" aria-colindex="2">last name</div> <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-colin...
...dex="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">14127</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.
...And 2 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet 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 842157).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 842157).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 4notes alternate name notes doesn't support combinators.notes see bug 90
6353alternate name uses the non-standard name: :-moz-any()ie no support noopera full support 55notes disabled full support 55notes disabled notes combinators in the selector list argument may not match correctly (see bug 842157).disabled from version 55: this featu...
...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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; } .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
CSS Scrollbars - CSS: Cascading Style Sheets
scrollbar-width desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollbar-widthchrome no support noedge no support nofirefox full support
64 full support
64 full support
63disabled disabled from version
63: this feature is behind the layout.css.scrollbar-width.enabled preference (needs to be set to true).
... no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android full support
64 full support
64 full support
63disabled disabled from version
63: this feature is behind the layout.css.scrollbar-width.enabled preference (needs to be set to true).
... scrollbar-color desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollbar-colorchrome no support noedge no support nofirefox full support
64notes full support
64notes notes on macos, you need to set the general > show scroll bars setting in system preferences to "always" for this property to have any effect.
...And 2 more matches
animation-direction - CSS: Cascading Style Sheets
3prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12 full support 12 full support 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 1
6 full support 1
6 full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit pref...
...��37prefixed 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 1
6 full support 1
6 full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit pref...
... full support 4.0 full support 1.0prefixed prefixed implemented with the vendor prefix: -webkit-alternate-reversechrome full support 19edge full support 12firefox full support 1
6ie full support 10opera full support 12.1safari full support
6webview android full support ≤37chrome android full support 25firefox android full support ...
...And 2 more matches
animation - CSS: Cascading Style Sheets
lass="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: 27px; height: 27px; background-size: 1
6px; 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%201
6%201
6%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%20l7%2c4%20l7%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%2c
6%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%201
6%201
6%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%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m...
...9%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%2c
6%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%201
6%201
6%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%20l7%2c4%20l7%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%2c...
...And 2 more matches
break-inside - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support
65ie full support 10opera full support 37 full support 37 no support 11.1 — 12.1safari full support 10webview android full support 50chrome android ...
... full support 50firefox android full support
65opera android full support 37 full support 37 no support 11.1 — 12.1safari ios full support 10samsung internet android full support 5.0multicol_context: column and avoid-columnchrome full support 50edge full support 12firefox no support noie full support 10opera ...
... 37safari ios full support 10samsung internet android full support 5.0supported in paged mediachrome full support 50edge full support 12firefox full support
65ie full support 10opera full support 37 full support 37 no support 11.1 — 12.1safari full support 10webview android full support 50chrome android ...
...And 2 more matches
image-set() - CSS: Cascading Style Sheets
examples background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png"
600dpi); this example shows how to use image-set() to provide two alternative background-image options, chosen depending on the resolution needed: a normal version and a high-resolution version.
...xed 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 1107
64
6.ie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: -webkit-safari partial support
6prefixed notes partial support
6prefixed notes prefixed imple...
...see bug 1
60934.webview android full support 4.4prefixed full support 4.4prefixed prefixed implemented with 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 1107
64
6.opera android full support 14prefixed ...
...And 2 more matches
perspective - CSS: Cascading Style Sheets
th><code>perspective: 350px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers250"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers350"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> ...
... </div> </div> </td> </tr> <tr> <th><code>perspective: 500px;</code> </th> <th><code>perspective:
650px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers500"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers
650"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div clas...
...s="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> </td> </tr> </tbody> </table> css the css establishes classes that can be used to set the perspective to different distances.
...And 2 more matches
matrix3d() - CSS: Cascading Style Sheets
syntax the matrix3d() function is specified with 1
6 values.
... note: until firefox 1
6, gecko accepted a <length> value for a4, b4 and c4.
... html <section id="example-element" tabindex="0"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); 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-co...
...And 2 more matches
Index - Developer guides
6 audio and video delivery audio, guide, html, html5, media, video whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same.
... 1
6 audio and video manipulation audio, canvas, examples, guide, html5, media, video, web audio api, webgl, developer recommendation the ability to read the pixel values from each frame of a video can be very useful.
...you should instead use the standard touch events api, supported since gecko/firefox
6 with multi-touch support added in gecko/firefox 12.
...And 2 more matches
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
see bug 778
617 for details.
... 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=1
60:90 -b:v 250k -dash 1 video_1
60x90_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:3
60 -b:v 750k -dash 1 video_
640x3
60_750k.webm f...
...fmpeg -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:3
60 -b:v 1000k -dash 1 video_
640x3
60_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_1280x720_1500k.webm or do it in all in one command.
...And 2 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
<img src="https://udn.realityripple.com/samples/
6c/98485e5d8a.png" alt="mdn logo"> image link this example builds upon the previous one, showing how to turn the image into a link.
... <a href="https://developer.mozilla.org"> <img src="https://udn.realityripple.com/samples/
6c/98485e5d8a.png" alt="visit the mdn site"> </a> using the srcset attribute in this example we include a srcset attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the src image on high-resolution devices.
... <img src="https://udn.realityripple.com/samples/
61/8
69e27c81e.png" alt="mdn logo" srcset="/static/external/
6c/
6c98485e5d8acac9fecd7824ce30c9587f0d8548b94
6ee9fb1293d2eccdb
6cf1.png 2x"> using the srcset and sizes attributes the src attribute is ignored in user agents that support srcset when w descriptors are included.
...And 2 more matches
<input type="date"> - HTML: Hypertext Markup Language
the date is formatted according to iso8
601, described in format of a valid date string in date and time formats used in html.
... you can set a default value for the input with a date inside the value attribute, like so: <input type="date" value="2017-0
6-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 = '2017-0
6-01'; console.log(datecontrol.value); // prints "2017-0
6-01" console.log(datecontrol.valueasnumber); // prints 149
6275200000, a unix timestamp this code finds the first <input> element whose type is date, and sets its value to 2017-0
6-01 (june 1st, 2017).
...And 2 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="2017-0
6"> 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=1978-0
6.
... 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="2017-0
6"> var monthcontrol = document.queryselector('input[type="month"]'); monthcontrol.value = '1978-0
6'; 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 2 more matches
<input type="search"> - HTML: Hypertext Markup Language
maxlength the maximum number of characters (as utf-1
6 code units) the user can enter into the search field.
... the input will fail constraint validation if the length of the text entered into the field is greater than maxlength utf-1
6 code units long.
... minlength the minimum number of characters (as utf-1
6 code units) the user can enter into the search field.
...And 2 more matches
<input type="text"> - HTML: Hypertext Markup Language
maxlength the maximum number of characters (as utf-1
6 code units) the user can enter into the text input.
... the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-1
6 code units long.
... minlength the minimum number of characters (as utf-1
6 code units) the user can enter into the text input.
...And 2 more matches
<input type="time"> - HTML: Hypertext Markup Language
the default value of step is
60, indicating
60 seconds (or 1 minute, or
60,000 milliseconds).
... it takes an integer value that equates to the number of seconds you want to increment by; the default value is
60 seconds, or one minute.
... if you specify a value of less than
60 seconds (1 minute), the time input will show a seconds input area alongside the hours and minutes: <form> <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time" step="2"> </form> in chrome and opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn't affect the hours or minutes.
...And 2 more matches
<input type="url"> - HTML: Hypertext Markup Language
maxlength the maximum number of characters (as utf-1
6 code units) the user can enter into the url input.
... the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-1
6 code units long.
... minlength the minimum number of characters (as utf-1
6 code units) the user can enter into the url input.
...And 2 more matches
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 1
6, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data from the preceding example.
... <div itemscope itemtype="http://schema.org/recipe"> <h2 itemprop="name">grandma's holiday apple pie</h2> <img itemprop="image" src="https://udn.realityripple.com/samples/
60/d0
63c3
61c1.jpg" width="50" height="50" /> <p> by <span itemprop="author" itemscope itemtype="http://schema.org/person"> <span itemprop="name">carol smith</span> </span> </p> <p> published: <time datetime="2009-11-05" itemprop="datepublished">november 5, 2009</time> </p> <span itemprop="description">this is my grandmother's apple pie recipe.
...br> <span itemprop="nutrition" itemscope itemtype="http://schema.org/nutritioninformation"> serving size: <span itemprop="servingsize">1 medium slice</span><br> calories per serving: <span itemprop="calories">250 cal</span><br> fat per serving: <span itemprop="fatcontent">12 g</span><br> </span> <p> ingredients:<br> <span itemprop="recipeingredient">thinly-sliced apples:
6 cups<br></span> <span itemprop="recipeingredient">white sugar: 3/4 cup<br></span> ...
...And 2 more matches
HTTP authentication - HTTP
from firefox 59 onwards, image resources loaded from different origins to the current document are no longer able to trigger http authentication dialogs (bug 142314
6), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.
... firefox once used iso-8859-1, but changed to utf-8 for parity with other browsers and to avoid potential problems as described in bug 1419
658.
...common authentication schemes include: basic see rfc 7
617, base
64-encoded credentials.
...And 2 more matches
List of default Accept values - HTTP
user agent value comment firefox text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (since firefox
66) text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 (in firefox
65) text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (before) in firefox
65 and earlier, this value can be modified using the network.http.accept.default parameter.
... user agent value comment firefox image/webp,*/* (since firefox
65) */* (since firefox 47) 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 489071 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 speci...
...And 2 more matches
Authorization - HTTP
other types: iana registry of authentication schemes authentification for aws servers (aws4-hmac-sha25
6) <credentials> if the "basic" authentication scheme is used, the credentials are constructed like this: the username and the password are combined with a colon (aladdin:opensesame).
... the resulting string is base
64 encoded (ywxhzgrpbjpvcgvuc2vzyw1l).
... note: base
64 encoding does not mean encryption or hashing!
...And 2 more matches
ETag - HTTP
they are a string of ascii characters placed between double quotes, like "
675af345
63dc-tr34".
... examples etag: "33a
64df551425fcc55e4d42a148795d9f25f89d4" 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: "33a
64df551425fcc55e4d42a148795d9f25f89d4" 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 2 more matches
Public-Key-Pins-Report-Only - HTTP
header type response header forbidden header name no syntax public-key-pins-report-only: pin-sha25
6="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha25
6="<pin-value>" the quoted string is the base
64 encoded subject public key information (spki) fingerprint.
...some browsers might allow other hashing algorithms than sha-25
6 in the future.
... example public-key-pins-report-only: pin-sha25
6="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha25
6="m8hztczm3eluxkcjr2s5p4hhybnf
6lhkmjahkhpgpwe="; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha25
6="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
...And 2 more matches
Public-Key-Pins - HTTP
header type response header forbidden header name no syntax public-key-pins: pin-sha25
6="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha25
6="<pin-value>" the quoted string is the base
64 encoded subject public key information (spki) fingerprint.
...some browsers might allow other hashing algorithms than sha-25
6 in the future.
... public-key-pins: pin-sha25
6="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha25
6="m8hztczm3eluxkcjr2s5p4hhybnf
6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha25
6="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
...And 2 more matches
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).
...it is a set of "elements" of 1
6-bit unsigned integer values.
...s: type value range size in bytes description web idl type equivalent c type int8array -128 to 127 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 int1
6array -327
68 to 327
67 2 1
6-bit two's complement signed integer short int1
6_t uint1
6array 0 to
65535 2 1
6-bit unsigned integer unsigned short uint1
6_t int32array -2147483
648 to 2147483
647 4 32-bit two's complement signed integer long int32_t uint32array 0 to 42949
67295 4 32-bit unsigned integer unsigned long uint...
...And 2 more matches
Character classes - JavaScript
equivalent to [ \f\n\r\t\v\u00a0\u1
680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].
...equivalent to [^ \f\n\r\t\v\u00a0\u1
680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].
... \uhhhh matches a utf-1
6 code-unit with the value hhhh (four hexadecimal digits).
...And 2 more matches
Array.prototype.reduceRight() - JavaScript
polyfill reduceright was added to the ecma-2
62 standard in the 5th edition; as such it may not be present in all implementations of the standard.
... // production steps of ecma-2
62, edition 5, 15.4.4.22 // reference: http://es5.github.io/#x15.4.4.22 if ('function' !== typeof array.prototype.reduceright) { array.prototype.reduceright = function(callback /*, initialvalue*/) { 'use strict'; if (null === this || 'undefined' === typeof this) { throw new typeerror('array.prototype.reduce called on null or undefined'); } if ('function' !== typeof callback) { throw new typeerror(callback + ' is not a function'); } var t = object(this), len = t.length >>> 0, k = len - 1, value; if (arguments.length >= 2) { value = arguments[1];...
...; } if (k < 0) { throw new typeerror('reduce of empty array with no initial value'); } value = t[k--]; } for (; k >= 0; k--) { if (k in t) { value = callback(value, t[k], k, t); } } return value; }; } examples sum up all values within an array var sum = [0, 1, 2, 3].reduceright(function(a, b) { return a + b; }); // sum is
6 flatten an array of arrays var flattened = [[0, 1], [2, 3], [4, 5]].reduceright(function(a, b) { return a.concat(b); }, []); // flattened is [4, 5, 2, 3, 0, 1] run a list of asynchronous functions with callbacks in series each passing their results to the next const waterfall = (...functions) => (callback, ...args) => functions.reduceright( (composition, fn) => (...results) => fn...
...And 2 more matches
Array.prototype.indexOf() - JavaScript
polyfill indexof() was added to the ecma-2
62 standard in the 5th edition; as such it may not be present in all browsers.
...this algorithm matches the one specified in ecma-2
62, 5th edition, assuming typeerror and math.abs() have their original values.
... // production steps of ecma-2
62, edition 5, 15.4.4.14 // reference: http://es5.github.io/#x15.4.4.14 if (!array.prototype.indexof) { array.prototype.indexof = function(searchelement, fromindex) { "use strict"; var k; // 1.
...And 2 more matches
Array.prototype.map() - JavaScript
polyfill map was added to the ecma-2
62 standard in the 5th edition.
...this algorithm is exactly the one specified in ecma-2
62, 5th edition, assuming object, typeerror, and array have their original values and that callback.call evaluates to the original value of function.prototype.call.
... // production steps of ecma-2
62, edition 5, 15.4.4.19 // reference: http://es5.github.io/#x15.4.4.19 if (!array.prototype.map) { array.prototype.map = function(callback/*, thisarg*/) { var t, a, k; if (this == null) { throw new typeerror('this is null or not defined'); } // 1.
...And 2 more matches
Array.prototype.sort() - JavaScript
the default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of utf-1
6 code units values.
... description if comparefunction is not supplied, all non-undefined array elements are sorted by converting them to strings and comparing strings in utf-1
6 code units order.
... note : in utf-1
6, unicode characters above \uffff are encoded as two surrogate code units, of the range \ud800-\udfff.
...And 2 more matches
BigInt.prototype.toString() - JavaScript
an integer in the range 2 through 3
6 specifying the base to use for representing numeric values.
... exceptions rangeerror if tostring() is given a radix less than 2 or greater than 3
6, a rangeerror is thrown.
...for example, for hexadecimal numbers (base 1
6) a through f are used.
...And 2 more matches
Date.now() - JavaScript
polyfill this method was standardized in ecma-2
62 5th edition.
... in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20µs in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 date.now() // 1519211809934 // 15192118103
62 // 1519211811
670 // ...
...And 2 more matches
Function.prototype.apply() - JavaScript
// 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.
...(the javascriptcore engine has hard-coded argument limit of
6553
6.
...to illustrate this latter case: if such an engine had a limit of four arguments (actual limits are of course significantly higher), it would be as if the arguments 5,
6, 2, 3 had been passed to apply in the examples above, rather than the full array.
...And 2 more matches
JSON.stringify() - JavaScript
examples using json.stringify json.stringify({}); // '{}' json.stringify(true); // 'true' json.stringify('foo'); // '"foo"' json.stringify([1, 'false', false]); // '[1,"false",false]' json.stringify([nan, null, infinity]); // '[null,null,null]' json.stringify({ x: 5 }); // '{"x":5}' json.stringify(new date(200
6, 0, 2, 15, 4, 5)) // '"200
6-01-02t15:04:05.000z"' json.stringify({ x: 5, y:
6 }); // '{"x":5,"y":
6}' json.stringify([new number(3), new string('false'), new boolean(false)]); // '[3,"false",false]' // string-keyed array elements are not enumerable and make no sense in json let a = ['foo', 'bar']; a['baz'] = 'quux'; // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ] json.stringify(a); // '["foo","ba...
...r"]' json.stringify({ x: [10, undefined, function(){}, symbol('')] }); // '{"x":[10,null,null,null]}' // standard data structures json.stringify([new set([1]), new map([[1, 2]]), new weakset([{a: 1}]), new weakmap([[{a: 1}, 2]])]); // '[{},{},{},{}]' // typedarray json.stringify([new int8array([1]), new int1
6array([1]), new int32array([1])]); // '[{"0":1},{"0":1},{"0":1}]' json.stringify([new uint8array([1]), new uint8clampedarray([1]), new uint1
6array([1]), new uint32array([1])]); // '[{"0":1},{"0":1},{"0":1},{"0":1}]' json.stringify([new float32array([1]), new float
64array([1])]); // '[{"0":1},{"0":1}]' // tojson() json.stringify({ x: 5, y:
6, tojson(){ return this.x + this.y; } }); // '11' // symbols: json.stringify({ x: undefined, y: object, z: symbol('') }); // '{}' json.stringify...
...ant to store an object created by your user and allowing it to be restored 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 localstor...
...And 2 more matches
Math.clz32() - JavaScript
consider the following 32-bit word: var a = 3277
6; // 00000000000000001000000000001000 (1
6 leading zeros) math.clz32(a); // 1
6 var b = ~3277
6; // 11111111111111110111111111110111 (3277
6 inversed, 0 leading zeros) math.clz32(b); // 0 (this is equal to how many leading one's there are in a) using this logic, a clon function can be created as follows: var clz = math.clz32; function clon(integer){ return clz(~integer); } further, thi...
...fill in all the higher bits after the first one integer |= integer << 1
6; integer |= integer << 8; integer |= integer << 4; integer |= integer << 2; integer |= integer << 1; // 2.
...erase all the higher bits after the first zero integer &= (integer << 1
6) | 0xffff; integer &= (integer << 8 ) | 0x00ff; integer &= (integer << 4 ) | 0x000f; integer &= (integer << 2 ) | 0x0003; integer &= (integer << 1 ) | 0x0001; // 2.
...And 2 more matches
String length - JavaScript
the length property of a string object contains the length of the string, in utf-1
6 code units.
...utf-1
6, the string format used by javascript, uses a single 1
6-bit code unit to represent the most common characters, but needs to use two code units for less commonly-used characters, so it's possible for the value returned by length to not match the actual number of characters in the string.
... ecmascript 201
6 (ed.
...And 2 more matches
TypedArray - JavaScript
ts type value range size in bytes description web idl type equivalent c type int8array -128 to 127 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 int1
6array -327
68 to 327
67 2 1
6-bit two's complement signed integer short int1
6_t uint1
6array 0 to
65535 2 1
6-bit unsigned integer unsigned short uint1
6_t int32array -2147483
648 to 2147483
647 4 32-bit two's complement signed integer long int32_t uint32array 0 to 42949
67295 4 32-bit unsigned integer unsigned long uint...
...32_t float32array 1.2×10-38 to 3.4×1038 4 32-bit ieee floating point number (7 significant digits e.g., 1.12345
67) unrestricted float float float
64array 5.0×10-324 to 1.8×10308 8
64-bit ieee floating point number (1
6 significant digits e.g., 1.123...15) unrestricted double double bigint
64array -2
63 to 2
63-1 8
64-bit two's complement signed integer bigint int
64_t (signed long long) biguint
64array 0 to 2
64-1 8
64-bit unsigned integer bigint uint
64_t (unsigned long long) constructor this object cannot be instantiated directly.
... instead, you create an instance of an array of a particular type, such as a int8array or a bigint
64array.
...And 2 more matches
WebAssembly.Global - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsglobalchrome full support
69edge no support nofirefox full support
62ie no support noopera no support nosafari no support nowebview android full support
69ch...
...rome android full support
69firefox android full support
62opera android no support nosafari ios no support nosamsung internet android full support 10.0nodejs no support noglobal() constructorchrome full support
69edge no support nofirefox full support
62ie no support noopera no support nosafari ...
... no support nowebview android full support
69chrome android full support
69firefox android full support
62opera android no support nosafari ios no support nosamsung internet android full support 10.0nodejs no support novaluechrome full support
69edge no support nofirefox full support
62ie no support...
...And 2 more matches
WebAssembly.Module - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmodulechrome full support 57edge full support 1
6firefox 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 11w...
... 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0module() constructorchrome full support 57edge full support 1
6firefox 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 11w...
... 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0customsectionschrome full support 57edge full support 1
6firefox 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 11w...
...And 2 more matches
encodeURI() - JavaScript
note how certain characters are used to signify special meaning: http://username:password@www.example.com:80/path/to/file.php?foo=31
6&bar=this+has+spaces#anchor hence encodeuri() does not encode characters that are necessary to formulate a complete uri.
...(see rfc239
6) encodeuri() escapes all characters except: not escaped: a-z a-z 0-9 ; , / ?
... follows: var set1 = ";,/?:@&=+$#"; // reserved characters var set2 = "-_.!~*'()"; // unreserved marks var set3 = "abc abc 123"; // alphanumeric characters + space console.log(encodeuri(set1)); // ;,/?:@&=+$# console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set3)); // abc%20abc%20123 (the space gets encoded as %20) console.log(encodeuricomponent(set1)); // %3b%2c%2f%3f%3a%40%2
6%3d%2b%24%23 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // abc%20abc%20123 (the space gets encoded as %20) note that encodeuri() by itself cannot form proper http get and post requests, such as for xmlhttprequest, because "&", "+", and "=" are not encoded, which are treated as special characters in get and post requests.
...And 2 more matches
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 (1
6.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 1
6.7ms.
... the 1
6.7 milliseconds includes scripting, reflow, and repaint.
...And 2 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
nav { width: 100%; position: absolute; z-index: 1000; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } nav button { font-size:
6.8vw; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; border-left: 1px solid rgba(100,100,100,0.4); } nav button:first-child { border-left: 0; } } in this last set of rules, we change the display value of the <nav> to flex to make it show (it was set to none in the default css at the top of the stylesheet, as it wasn't needed for the other views.) we...
... next up, the font-size of the buttons is set to
6.8vw.
...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 = 17.
...And 2 more matches
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
doesn't completely follow <svg:use> cascading rules (bug 2
65894).
... doesn't deliver events to a svgelementinstance tree (bug 2
65895).
... recently implemented bindings: selectsubstring altglyph implemented as tspans, no font features as of gecko 2.0 (bug 45
628
6, bug 571808).
...And 2 more matches
Using templates and slots - Web Components
so for example: <template id="my-paragraph"> <style> 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).
... 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: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span { background: #217ac0; 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: 1
6px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="description">need d...
... adding a final bit of style as a finishing touch, we'll add a tiny bit more css for the <dl>, <dt>, and <dd> elements in our doc: dl { margin-left:
6px; } dt { font-weight: bold; color: #217ac0; font-size: 110% } dt { font-family: consolas, "liberation mono", courier } dd { margin-left: 1
6px } body { margin-top: 47px } result finally let’s put all the snippets together and see what the rendered result looks like.
...And 2 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
6 advanced example xslt this advanced example sorts several divs based on their content.
... 15 for further reading needscontent, needshelp, transforming_xml_with_xslt, xml, xslt http://www.amazon.com/xslt-programme.../dp/07
64543814 1
6 resources extensions, needscontent, needsexample, needslivesample, xml, xsl no summary!
... 2
6 <xsl:comment> comment, element, reference, xslt the <xsl:comment> element writes a comment to the output document.
...And 2 more matches
XUL Migration Guide - Archive of obsolete content
nction removeforwardbutton() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var forward = window.document.getelementbyid('forward-button'); var parent = window.document.getelementbyid('urlbar-container'); parent.removechild(forward); } require("sdk/ui/button/action").actionbutton({ id: "remove-forward-button", label: "remove forward button", icon: "./icon-1
6.png", onclick: removeforwardbutton }); there are more useful examples of this technique in the jetpack wiki's collection of third party modules.
...ar tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(255,255,100)','important'); } } require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-1
6.png", onclick: highlightactivetab }); security implications the sdk implements a security model in which an add-on only gets to access the apis it explicitly imports via require().
... getservice(ci.nsipromptservice); require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-1
6.png", onclick: function() { promptsvc.alert(null, "my add-on", "hello from xpcom"); } }); it's good practice to encapsulate code which uses xpcom by packaging it in its own module.
... getservice(ci.nsipromptservice); exports.alert = function(title, text) { promptsvc.alert(null, title, text); }; if we save this as "alert.js" in our add-on's lib directory, we can rewrite main.js to use it as follows: require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-1
6.png", onclick: function() { require("./alert").alert("my add-on", "hello from xpcom"); } }); one of the benefits of this is that we can control which parts of the add-on are granted chrome privileges, making it easier to review and secure the code.
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-f3boogbjqje
67a".
... 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-f3boogbjqje
67a", and the corresponding id in the install.rdf will be "jid1-f3boogbjqje
67a@jetpack".
... there is a known bug in simple options handling which may require the workaround described in https://bug
635044.bugzilla.mozilla.org/show_bug.cgi?id=12434
67 commands and command options permanently removed commands jpm has dropped support for all the "internal" cfx commands.
... permanently removed fields data fullname - use title instead lib packages tests icon
64 package.json escaping where with cfx you might have had to escape with 2 upto 3 backslashes ( \ ), jpm only needs one now.
Modifying the Page Hosted by a Tab - Archive of obsolete content
here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-1
6.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-1
6.png" in add-on's "data" directory.
... for example, if we save the script above under the add-on's data directory in a file called my-script.js: var self = require("sdk/self"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-1
6.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscriptfile: self.data.url("my-script.js") }); } }); you can load more than one script, and the scripts can interact directly with each other.
... // index.js var self = require("sdk/self"); var tabs = require("sdk/tabs"); require("sdk/ui/button/action").actionbutton({ id: "load-several", label: "load several scripts", icon: "./icon-1
6.png", onclick: function () { tabs.activetab.attach({ contentscriptfile: [self.data.url('first.js'), self.data.url('second.js')] }); } }); communicating with the content scripts your add-on script and content scripts can't directly access each other's variables or call each other's functions, but they can send each other messages.
....port.on("drawborder", function(color) { document.body.style.border = "5px solid " + color; }); in the add-on script, we'll send the content script a "drawborder" message using the object returned from attach(): var self = require("sdk/self"); var tabs = require("sdk/tabs"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-1
6.png", onclick: function() { var worker = tabs.activetab.attach({ contentscriptfile: self.data.url("my-script.js") }); worker.port.emit("drawborder", "red"); } }); the drawborder message isn't a built-in message, it's one that this add-on defines in the port.emit() call.
Miscellaneous - Archive of obsolete content
rce://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1
639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1
631 bug 338039 tracks improving this situation by providing a simple method to restart the application.
... <div id="scrollarea" style="overflow: scroll; height:
6em; width: 10em;"> this is the scrolling area.
... see also http://mxr.mozilla.org/seamonkey/source/browser/base/content/browser.js#4
674 discovering which element in the loaded document has focus // focusedcontrol stores the focused field, or null if there is none.
...()); scriptablestream.close(); input.close(); var begincert = "-----begin certificate-----"; var endcert = "-----end certificate-----"; 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.addcertfrombase
64(cert, certtrust, ""); }, classdescription: "certificate service", contractid: "@mozilla.org/certs-service;2", classid: components.id("{e9d2d37c-bf25-4e37-82a1-1
6b8fa089939}"), queryinterface: xpcomutils.generateqi([ci.nsiobserver]), _xpcom_categories: [{ category: "app-startup", service: true }] } function nsgetmodule(compmgr, filespec) { return ...
How to convert an overlay extension to restartless - Archive of obsolete content
reportedly xmlhttprequest doesn't work reliably when used in jsm under versions of firefox less than 1
6, however as previously mentioned, this guide should be taken as requiring firefox 17+.
...here are some functions to handle this: function getgenericpref(branch,prefname) { switch (branch.getpreftype(prefname)) { default: case 0: return undefined; // pref_invalid case 32: return getucharpref(prefname,branch); // pref_string case
64: return branch.getintpref(prefname); // pref_int case 128: return branch.getboolpref(prefname); // pref_bool } } function setgenericpref(branch,prefname,prefvalue) { switch (typeof prefvalue) { case "string": setucharpref(prefname,prefvalue,branch); return; case "number": branch.setintpref(prefname,prefvalue); return; ...
... step
6: no more xul overlays ok, now we're getting into some more drastic changes.
... step
6a.
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 87
6 strings.
... */ [scriptable, uuid(bd4
6f
689-
6c1d-47d0-bc07-bb52b54
6b8b5)] interface xsihellocounter : nsisupports { /* the maximum allowed count.
... [scriptable, uuid(bd4
6f
689-
6c1d-47d0-bc07-bb52b54
6b8b5)] the scriptable qualifier says that this component can be accessed from js code.
... const class_id = components.id("{37ed5d2a-e223-438
6-9854-b
64fd38932bf}"); 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.
Creating reusable content with CSS and XBL - Archive of obsolete content
action: an xbl demonstration make a new html document, doc
6.html.
... copy and paste the content from here: <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet" type="text/css" href="style
6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">click me</div> </body> </html> make a new css file, style
6.css.
...copy and paste the content from here: <?xml version="1.0"?> <!doctype bindings> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind
6.css"/> </resources> <content> <html:div anonid="square"/> <xul:button anonid="button" type="button"> <children/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.getanonymouselementbyattribute(th...
...quare.style.backgroundcolor = "transparent" me.square.style.marginleft = "0" me.button.removeattribute("disabled") ]]></body> </method> </implementation> <handlers> <handler event="click" button="0"><![cdata[ if (event.originaltarget == this.button) this.dodemo() ]]></handler> </handlers> </binding> </bindings> make a new css file, bind
6.css.
List of Former Mozilla-Based Applications - Archive of obsolete content
applications that switched to another technology name description additional information angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a web application autodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.
6 boxee media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing flock switched from being firefox-based to chromium-based when it released a new beta on june 1
6, 2010 jolicloud web operating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os j...
...oost tv over internet switched from xulrunner-based client to a web application liferea news aggregator switched to webkit in version 1.
6 manyone browser browser originally mozilla-based but now i believe the have a web-based tool (need reference for that) miro (formerly democracy player) video switched from xulrunner to webkit in version 3.0.2 moblin browser browser when moblin became meego it switched from a custom gecko-based browser to chrome nautilus file manager hasn't used mozilla code since version 2.0 raptr client gaming client was a xulrunner app initially but now uses adobe air rift technologies software installation over internet no longer using mozilla technology -- ne...
... name description additional information aphrodite browser inactive aol client for mac internet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 200
6 compuserve client internet software no longer available doczilla sgml/xml/html browser last release on site from july 2005 fabula language learning application inactive galeon browser last news item on site from september 200
6 gencatrss rss reader domain switched over to domain parking service ghostzilla browse...
...o longer available hp printer assistant printer utility hall of fame page mentions that this used an embedded version of mozilla at some point but i can't find reference to current status (may still be using mozilla code?) icebrowser java browser sdk uses mozilla rhino --eol'ed in 2009 (jin'sync) office app launcher download page last updated on 12/21/0
6 kylix compiler and integrated development environment borland discontinued this product.
Running Tamarin performance tests - Archive of obsolete content
$ cd tamarin-redux/test/performance $ python runtests.py executing tests at 2008-07-22 13:5
6: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 173.0 sunspider/access-nsieve.as
65.0 sunspider/bitops-3bit-bits-in-byte.as ...
... 13.0 sunspider/bitops-bits-in-byte.as 3
6.0 $ export avm2=c:/dev/tamarin-tracing2/bld/shell/avmshell.exe $ python ./runtests.py executing tests at 2008-07-22 14:03:51.957381 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 17
6.0 178.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-byte.as ...
... 3
6.0 3
6.0 0.0 by default tests sunspider and sunspider-as3 (optimized for as3) and run.
...if you've correctly edited and run the android-vars.sh script mentioned on the tamarin build documentation page you should already be pathed to the adb executable in the public sdk/ndk, but if not it exists at /android-public/android-sdk-mac_8
6/platform-tools.
Using XPInstall to Install Plugins - Archive of obsolete content
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
6r47 on windows, which consists of a dll (called npswf32.dll) and an xpt file for scriptability (called flashplayer.xpt).
... caveat: certain versions of mozilla-based browsers (such as netscape
6.x) treat the use of the equals character ("=") as an illegal token and thus do not allow invocation of initinstall with strings containing "=".
...here is an example: var plid = "myplugin.plug/version=
6.5"; err = initinstall(software_name, plid, version); if (err != 0) { // install may have failed because of n
6 and = // replace plid with a simple string err = initinstall(software_name, "mypluginstring", version); if (err != 0) cancelinstall(err); } note that above, the plid contains an "=" and in case the xpi package is running on browsers that treat "=" as an illegal token, the workaround is to handle the error and invoke initinstall again.
initInstall - Archive of obsolete content
a relative pathname is relative to the netscape
6 namespace.
...all other parts of the netscape
6 area of the registry are reserved for use by netscape.
... the client version registry is a hierarchical description of the software registered for use with netscape
6.
...if your script does not call performinstall or cancelinstall, netscape
6 will not be able to clean up properly after your script finishes.
MenuItems - Archive of obsolete content
although the exact size will vary depending on the theme being used, the size of menu item images should generally be around 1
6 by 1
6 pixels.
...in this example we use an image that is 1
6px wide and 32px high.
... the top 1
6px square is the icon in normal state the bottom part in hovered state.
...hence, -moz-image-region is not applied to the menu itself, but one level lower: <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> #add-bookmark { list-style-image: url('addbookmark.png'); } #add-bookmark .menu-iconic-icon { -moz-image-region: rect(0px, 1
6px, 1
6px, 0px) !important; } #add-bookmark:hover .menu-iconic-icon { -moz-image-region: rect(1
6px, 1
6px, 32px, 0px) !important; } this behavior is fundamentally different to other html elements, such as <li> or <div> where list-style-image and -moz-image-region can be applied at the same element level.
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
6.
...av-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 147px 72px 98px);} /* common style for all custom buttons - classic */ .custombutton {-moz-image-region: rect( 0px 145px 20px 12
6px);} .custombutton:hover {-moz-image-region: rect( 0px 1
64px 20px 145px);} .custombutton:active {-moz-image-region: rect( 0px 183px 20px 1
64px);} remove one of the common style sections, leaving the section for the theme that you use in seamonkey.
...the images supplied here have a 25
6-colour palette and a transparent background.
... (for instructions, see the section uninstalling the button, above.)
6.
Window icons - Archive of obsolete content
note: this feature was removed at firefox
67.
... see also bug 153183
6 for more details.
... starting with firefox 1.5, thunderbird 1.5, and xulrunner 1.8, you can specify an icon for a xul window by putting files named mywindow.ico (for windows) and mywindow.xpm or mywindow1
6.xpm (linux), where mywindow is the id of the <window> you want to attach the icon to, in the chrome/icons/default subfolder of your bundle.
...you can specify up to 4 different sizes of png icons using the suffixes .png, 1
6.png, 32.png and 48.png.
azimuth - Archive of obsolete content
initial valuecenterapplies toall elementsinheritedyescomputed valuenormalized angleanimation typediscrete syntax <angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] | behind ] | leftwards | rightwards values angle audible source position is described as an angle within the range -3
60deg to 3
60deg.
... center-right behind: same as 1
60deg.
... far-right: same as
60deg.
... examples h1 { azimuth: 30deg; } td.a { azimuth: far-right; } /*
60deg */ #12 { azimuth: behind far-right; } /* 120deg */ p.comment { azimuth: behind; } /* 180deg */ specifications specification status comment css level 2 (revision 1)the definition of 'azimuth' in that specification.
Array comprehensions - Archive of obsolete content
array comprehension was previously proposed to be standardized in ecmascript 201
6, it provide a useful shortcut for constructing a new array based on the contents of another.
... var numbers = [1, 2, 3, 4]; var doubled = [for (i of numbers) i * 2]; console.log(doubled); // logs 2,4,
6,8 this is equivalent to the following map() operation: var doubled = numbers.map(i => i * 2); comprehensions can also be used to select items that match a particular expression.
...here is one that filters just the even numbers, then creates an array containing their doubles: var numbers = [1, 2, 3, 21, 22, 30]; var doubledevens = [for (i of numbers) if (i % 2 === 0) i * 2]; console.log(doubledevens); // logs 4,44,
60 the square brackets of an array comprehension introduce an implicit block for scoping purposes.
... 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, 1974, 1990, 200
6, 2010, 2014]; [for (year of years) if (year > 2000) year]; // [200
6, 2010, 2014] [for (year of years) if (year > 2000) if (year < 2010) year]; // [200
6], the same as below: [for (year of years) if (year > 2000 && year < 2010) year]; // [200
6] array comprehensions compared to map and filter an easy way to understand array comprehension syntax, is to compare it with the array map and filter meth...
New in JavaScript 1.7 - Archive of obsolete content
this version was included in firefox 2 (october 200
6).
... new features in javascript 1.7 the following features added with javascript 1.7 were not part of an ecma-2
62 standard at the time.
... in more recent firefox versions, the implementation is updated to work with semantics as specified in ecmascript edition
6.
... iterators and generators array comprehensions let statement (support for let expression was dropped in gecko 41, see bug 1023
609).
New in JavaScript 1.8.5 - Archive of obsolete content
bug 518
663 object.preventextensions() prevents any extensions of an object.
...bug 520
69
6 function.apply() can accept any array-like object as the arguments list, instead of only true arrays.
... changed functionality in javascript 1.8.5 iso 8
601 support in date: the date object's parse() method now supports simple iso 8
601 format date strings.
...some information about why: spidermonkey change du jour: the special __parent__ property has been removed bug 551529 & bug 5525
60.
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 1103
60, which explains the problem and shows when the fix was applied.
... related links bug 1103
60 bug 97351 original document information author(s): eric a.
Mozilla's DOCTYPE sniffing - Archive of obsolete content
this page describes behavior of the old html parser in firefox 3.
6 and older.
...see bug 1312 and bug 552
64 for some of the history of the mode determination.
... the public identifier "-//softquad software//dtd hotmetal pro
6.0::19990
601::extensions to html 4.0//en".
... the public identifier "-//w3c//dtd html experimental 199
60712//en".
Parsing microformats in JavaScript - Archive of obsolete content
after getting the text, it is normalized into an iso 8
601 date.
...iso8
601fromdate converts a javascript date object into an iso 8
601 formatted date.
... isodate = microformats.parser.iso8
601fromdate(date, punctuation) parameters date the javascript date object to convert.
... return value a string containing the iso 8
601 formatted date.
Anatomy of a video game - Game development
all of the above steps must take place every 1
6-and-a-half milliseconds to keep up with a
60 hz display.
...this game removed control from the user in order to keep its calculation time at roughly 1
6ms (or roughly
60fps).
... simulation systems can basically assume that each full update is ~1
6ms apart.
... systems that are unable to keep up with
60 fps lose visual quality to keep the game running at optimal speed (eventually it outright fails, if quality becomes too low.) other ways to handle variable refresh rate needs other methods of tackling the problem exist.
Practical positioning examples - Learn web development
place the following css below your other styles: .info-box li a:focus, .info-box li a:hover { background-color: #a
60000; color: white; } .info-box li a.active { background-color: #a
60000; color: white; } styling the panels the next job is to style our panels.
... .info-box article { position: absolute; top: 0; left: 0; height: 352px; padding: 10px; color: white; background-color: #a
60000; } .info-box .active-panel { z-index: 1; } adding our javascript the final step to getting this feature working is to add some javascript.
...add the following rule underneath the rest of your css: .fake-content { background-color: #a
60000; color: white; padding: 10px; height: 2000px; margin-left: 470px; } 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: #a
60000; color: white; width: 340px; height: 100%; padding: 0 20px; position: fixed; top: 0; right: -370px; 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.
What is CSS? - Learn web development
see bug 153
6148.ie full support 3opera full support 3.5safari full support 1webview android full support 1chrome android full support 18firefox android full support ...
... 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0system-uichrome full support 5
6edge full support 79firefox no support no no support no full support 43notes alternate name notes supported on macos only.alternate name uses the non-standard name: -apple-systemie no support noopera full support ...
... 43safari full support 9notes alternate name full support 9notes alternate name notes supported since macos 10.11.alternate name uses the non-standard name: -apple-systemwebview android full support 5
6chrome android full support 5
6firefox android no support noopera android full support 43safari ios full support 9alternate name full support 9alternate name alternate name uses the non-standard name: -apple-systemsamsung inte...
...rnet android full support
6.0legend full support full support no support no supportsee implementation notes.see implementation notes.uses a non-standard name.uses a non-standard name.
create fancy boxes - Learn web development
manipulated as such */ background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a
68e 85%), linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a
68e 89%), linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%), linear-gradient( 85deg, rgba(0,0,0,0) 8
6%, #ba9499 8
6%), linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%), linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), ...
... linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a
6ae 70%), linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a
6ae 80%); } gradients can be used in some very creative ways.
...*/ border-bottom-right-radius: 0; } .fancy::after { /* this is the size of the clouds left ear */ width : 100px; height : 100px; /* we sligthly move it to the right */ right : -
60px; /* to make sure that the bottom of the cloud remains flat, we must make the bottom left corner of the right ear square.
...<i>pierre desproges</i></blockquote> so here comes our style: blockquote { min-height: 5em; padding : 1em 4em; font : 1em/150% sans-serif; position : relative; background-color: lightgoldenrodyellow; } blockquote::before, blockquote::after { position: absolute; height : 3rem; font :
6rem/100% georgia, "times new roman", times, serif; } blockquote::before { content: '“'; top : 0.3rem; left : 0.9rem; } blockquote::after { content: '”'; bottom : 0.3rem; right : 0.8rem; } blockquote:lang(fr)::before { content: '«'; top : -1.5rem; left : 0.5rem; } blockquote:lang(fr)::after { content: '»'; bottom : 2.
6rem; right : 0.5rem } blockquote i...
CSS basics - Learn web development
h1 { font-size:
60px; text-align: center; } p, li { font-size: 1
6px; line-height: 2; letter-spacing: 1px; } adjust the px values as you like.
... styling the body body { width:
600px; margin: 0 auto; background-color: #ff9500; padding: 0 20px 20px 20px; border: 5px solid black; } there are several declarations for the <body> element.
... let's go through these line-by-line: width:
600px; this forces the body to always be
600 pixels wide.
...(
600 pixels) if your image is larger, it will overflow the body, spilling into the rest of the page.
HTML table advanced features and accessibility - Learn web development
09</td> <td>great idea</td> <td>30</td> </tr> <tr> <td>lasagna</td> <td>restaurant</td> <td>12/09</td> <td>regrets</td> <td>18</td> </tr> <tr> <td>shoes</td> <td>shoeshop</td> <td>13/09</td> <td>big regrets</td> <td>
65</td> </tr> <tr> <td>toothpaste</td> <td>supermarket</td> <td>13/09</td> <td>good</td> <td>5</td> </tr> </tbody> </table> </body> </html> note: you can also find it on github as spending-record-finished.html (see it live also).
...imple nested table: <table id="table1"> <tr> <th>title1</th> <th>title2</th> <th>title3</th> </tr> <tr> <td id="nested"> <table id="table2"> <tr> <td>cell1</td> <td>cell2</td> <td>cell3</td> </tr> </table> </td> <td>cell2</td> <td>cell3</td> </tr> <tr> <td>cell4</td> <td>cell5</td> <td>cell
6</td> </tr> </table> the output of which looks something like this: title1 title2 title3 cell1 cell2 cell3 cell2 cell3 cell4 cell5 cell
6 tables for visually impaired users let's recap briefly on how we use data tables.
... items sold august 201
6 clothes accessories trousers skirts dresses bracelets rings belgium antwerp 5
6 22 43 72 23 gent 4
6 18 50
61 15 brussels 51 27 38
69 28 the netherlands amsterdam 89 34
69 85 38 utrecht 80 12 43 3
6 19 but what if you cannot make those visual a...
...if you look back at the "items sold august 201
6" table at the start of this section of the article, you'll see that the "clothes" cell sits above the "trousers", "skirts", and "dresses" cells.
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:345345
6', 'bill:7
654322', 'mary:99987
69', 'dianne:9384975']; 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].spl...
...'contact not 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:345345
6', 'bill:7
654322', 'mary:99987
69', 'dianne:9384975']; 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++) { ...
...tput = document.queryselector('.output'); output.innerhtml = ''; // let 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: 1
6px; } .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.valu...
...ed = document.queryselector('.refused'); admitted.textcontent = 'admit: '; refused.textcontent = 'refuse: ' // let i = 0; // refused.textcontent += ; // admitted.textcontent += ; </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: 1
6px; } .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)...
What went wrong? Troubleshooting JavaScript - Learn web development
in this case, we've got line 8
6, character number 3.
... if we look at line 8
6 in our code editor, we'll find this line: guesssubmit.addeventlistener('click', checkguess); the error message says "guesssubmit.addeventlistener is not a function", which means that the function we're calling is not recognized by the javascript interpreter.
...in this case, the code was not run and the error was not thrown until the checkguess() function was run by line 8
6.
...0.5
675493843.
The "why" of web performance - Learn web development
as an example, consider the loading experience of cnn.com, which at the time of this writing had over 400 http requests with a file size of over 22.
6mb.
... a 22.
6 mb site could take up to 83 seconds to load on a 3g network, with domcontentloaded (meaning the site's base html structure) at 31.8
6 seconds.
...our example 22.
6 mb cnn.com experience would cost about 11% of the average indian's daily wage to download.
... here's some real-world examples of performance improvements: tokopedia reduced render time from 14s to 2s for 3g connections and saw a 19% increase in visitors, 35% increase in total sessions, 7% increase in new users, 17% increase in active users and 1
6% increase in sessions per user.
Beginning our React todo list - Learn web development
implementing our styles paste the following css code into src/index.css so that it replaces what's currently there: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font:
62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { ...
... border: 0; } button, input, optgroup, select, textarea { 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.31579; } } /*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-pres...
...rgba(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.015
67; 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...
...) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #5
65
65
6; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.
6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; ...
Package management basics - Learn web development
in the index.js file, add the following code and save it: import { formatdistancetonow } from 'date-fns' const date = '199
6-09-13 10:00:00'; document.body.textcontent = formatdistancetonow(new date(date)) + ' ago'; go back to http://localhost:1234 and you'll see how long ago it is since the author turned 18.
... dist/my-project.fb7
6efcf.js.map
648.58 kb
64ms dist/my-project.fb7
6efcf.js 195.74 kb 8.43s dist/index.html 288 b 80
6ms again, the destination for our production files is the dist directory.
...the javascript bundle my-project.fb7
6efcf.js is a whopping 195k — very large, given that all it does is print a line of text.
... dist/my-project.8
6f8a5fc.js 10.34 kb 7.17s dist/index.html 288 b 753ms now the bundle is approximately 10k.
Creating a spell check dictionary add-on
<?xml 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>locale-code@dictionaries.addons.mozilla.org</em:id> <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>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</em:id> <em:minve...
...rsion>18.0a1</em:minversion> <em:maxversion>4
6.0</em:maxversion> </description> </em:targetapplication> <!-- thunderbird --> <em:targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc
6}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>22.0</em:maxversion> </description> </em:targetapplication> <!-- seamonkey --> <em:targetapplication> <description> <em:id>{92
650c4d-4b8e-4d2a-b7eb-24ecf4f
6b
63a}</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 c...
...type =
64 indicates that the add-on is in the restartless format, and unpack is required for hunspell to read the dictionary.
...if you set em:minversion to a lower value, gecko 10-17 will not be able to update your dictionary add-on once the restartless dictionary is installed (bug 782118), and gecko 10-1
6 may warn the user that your dictionary is not compatible, when users try to update to a newer version of firefox/thunderbird (bug 782115).
HTTP logging
you will see several files that look like: log.txt-main.180
6, log.txt-child.1954, log.txt-child.1970, etc.
...press the enter key after each one.: for
64-bit windows: set moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 set moz_log_file=%temp%\log.txt "c:\program files\mozilla firefox\firefox.exe" for 32-bit windows: set moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 set moz_log_file=%temp%\log.txt "c:\program files (x8
6)\mozilla firefox\firefox.exe"...
... start logging using command line arguments since firefox
61 it's possible to start logging in a bit simpler way than setting environment variables: using command line arguments.
... copy and paste the following line into the "run" command window and then press enter: for 32-bit windows: "c:\program files (x8
6)\mozilla firefox\firefox.exe" -moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 -moz_log_file=%temp%\log.txt for
64-bit windows: "c:\program files\mozilla firefox\firefox.exe" -moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 -moz_log_file=%temp%\log.txt (these instructions assume that you installed fi...
Old Thunderbird build
for thunderbird
60 and later, see the new build instructions.
... the source code requires 3.
6gb of free space or more and additionally 5gb or more for default build.
...for example, a mac user may get an object directory name of obj-x8
6_
64-apple-darwin10.7.3/.
...you should copy the header files to a windows sdk include directory so that the build process will find the files, for example to c:\program files (x8
6)\windows kits\8.1\include\shared and/or c:\program files (x8
6)\windows kits\10\include\10.0.nnnnn.0\shared respectively, where nnnnn is the highest number present on the system.
Index
rust code first shipped in august 201
6 with the release of firefox 48.
... 141 index firefox, index, mozilla found 1
68 pages: 142 linux compatibility matrix the following table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.
... 1
68 performance best practices for firefox front-end engineers best practices, developing firefox, developing mozilla, firefox, front-end, mozilla, performance this guide will help firefox developers working on front-end code produce code which is as performant as possible—not just on its own, but in terms of its impact on other parts of firefox.
... 1
69 privacy privacy, security this document lists privacy-related documentation.
HTML parser threading
once a unicode decoder has been set up, dodataavailable passes the byte data to the decoder whose output is accumulated into a linked list of nshtml5owningutf1
6buffer objects.
... nshtml5owningutf1
6buffer objects are then passed to the tokenizer in sequence by the parseavailabledata() method.
...the speculation object has a queue of tree ops (into which the tree builder will now flush ops to instead of the tree op stage), an owning reference to the nshtml5owningutf1
6buffer that contains the starting point of the speculation, an index into the nshtml5owningutf1
6buffer defining the exact starting point within the buffer, the line number of the tokenizer at that point and a snapshot of the tree op state.
...if there is data in document.write() input after a an external script (or any data at all if a previous document.write() call has contained an external script and blocked the parser), the data is left in a linked list of nshtml5owningutf1
6buffer objects.
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('x753d830-ba1e-11e0-9
62b-0800200c9a
66'); // ← 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.<string>} results * @pa...
...to do so put the following declaration in your chrome.manifest file: component {x753d830-ba1e-11e0-9
62b-0800200c9a
66} components/basic_autocomplete.js contract @mozilla.org/autocomplete/search;1?name=basic-autocomplete {x753d830-ba1e-11e0-9
62b-0800200c9a
66} 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)...
...es: add an nsgetfactory() function: function nsgetfactory(cid) { if (cid.tostring().touppercase() != class_id.tostring().touppercase()) { throw components.results.ns_error_factory_not_registered; } return simpleautocompletesearchfactory; } you need to explicitly register the component by adding these lines into your chrome.manifest file: component {
6224daa1-71x2-4d1a-ad90-01ca1c08e323} components/.js contract @mozilla.org/autocomplete/search;1?name=simple-autocomplete {
6224daa1-71x2-4d1a-ad90-01ca1c08e323} you need to add the following method: getlabelat: function(index) { return this._results[index]; } to simpleautocompleteresult use this newly available component in a xul file like this: <textbox id="...
CustomizableUI.jsm
('a widget moved to an area, arguments:', arguments); if (awidgetid != 'noida') { return } console.log('my widget moved'); var useicon; if (aarea == customizableui.area_panel) { useicon = 'chrome://branding/content/icon32.png'; } else { useicon = 'chrome://branding/content/icon1
6.png'; } var myinstances = customizableui.getwidget('noida').instances; for (var i=0; i<myinstances.length; i++) { myinstances[i].node.setattribute('image', useicon); } }, onwidgetdestroyed: function(awidgetid) { console.log('a widget destroyed so removing listener, arguments:', arguments); if...
...when the button is in the panel area, it needs a 32x32 icon, and when in other places it needs a 1
6x1
6 icon.
...tyle our widget to give it an icon cu.import('resource://gre/modules/services.jsm'); var sss = cc['@mozilla.org/content/style-sheet-service;1'].getservice(ci.nsistylesheetservice); var css = ''; css += '@-moz-document url("chrome://browser/content/browser.xul") {'; css += ' #id_of_my_widget_within_customizableui_and_dom {'; css += ' list-style-image: url("chrome://branding/content/icon1
6.png")'; //a 1
6px x 1
6px icon for when in toolbar css += ' }'; css += ' #id_of_my_widget_within_customizableui_and_dom[cui-areatype="menu-panel"],'; css += ' toolbarpaletteitem[place="palette"] > #id_of_my_widget_within_customizableui_and_dom {'; css += ' list-style-image: url("chrome://branding/content/icon32.png");'; //a 32px x 32px icon for when in toolbar css += ' }'; cs...
... defaultarea: customizableui.area_navbar, onbuild: function(adocument) { var toolbaritem = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbaritem'); var image = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'image'); image.setattribute('src', 'chrome://branding/content/icon1
6.png'); var props = { id: 'navigator-throbber', //id in dom // should match id of that in cui.jsm (line #2) title: 'activity indicator', align: 'center', pack: 'center', mousethrough: 'always', removable: 'true', sdkstylewidget: 'true', overflows: false }; for (var p in props) {...
Using JavaScript code modules
for example: components.utils.import("resource://app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.size + 3); // displays "
6" alert(dummy); // displays "dummy is not defined" because 'dummy' was not exported from the module note: when you're testing changes to a code module, be sure to change the application's build id (e.g., the version) before your next test run; otherwise, you may find yourself running the previous version of your module's code.
... scope 1: components.utils.import("resource://app/my_module.jsm"); alert(bar.size + 3); // displays "
6" bar.size = 10; scope 2: components.utils.import("resource://app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.size + 3); // displays "13" this sharing behavior can be used to create singleton objects that can share data across windows and between xul script and xpcom components.
...firefox 3.
6 doesn't support them at all, and there's only one case in which it's remotely useful: a firefox 4-only add-on which must be installed unpacked.
...you can import add-on sdk modules in just the same way you could from an sdk add-on: // import the sdk's base
64 module var base
64 = require("sdk/base
64"); base
64.encode("hello"); // "agvsbg8=" you can import other commonjs modules, too, as long as you know the path to them: // import my module var mymodule = require("resource://path/to/my/module.js"); in this case, though, you might be better off creating your own loader, so you can specify the paths property yourself.
Bootstrapping a new locale
for instance, for firefox 3.
6, we use mozilla-1.9.2.
... first, you should specify your locale's language identifier in ab-cd format, where "ab" is the iso
639 language code, and cd is the iso 31
66 country code.
... for instance, firefox 3.
6 is released from the 1.9.2 branch.
... the localization phase lists (firefox 3.5: ff35.phaselist, firefox 3.
6: ff3
6.phaselist).
Index
5 index localization found 42 pages:
6 l10n checks internationalization, localization, localization:tools, tools l10n checks is a python script and library similar to compare-locales.
... 1
6 translation phase localization, localization:tools congratulations on completing the initial setup!
... 2
6 localizing with pontoon junk, localization pontoon is a web-based, what-you-see-is-what-you-get (wysiwyg), localization (l10n) tool.
... 3
6 creating localizable web apps no summary!
Extras
ral log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </p> css content math.cue *[title] { color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="1
6" height="1
6" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-1
6" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <rad...
..."> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="3
60" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msub...
... fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(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="3
60" 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,27 152,42 203,5
6 239,257 275,1
61 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 displa...
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 55555 x + 1
666666 a b c 7777777 11 cols arg is"r|c:l".
... 1 22 333 4444 55555
666666 x 2 a b c 7777777 11 cols arg is "r|cl".
... [ 1
666666 x 2 c axis ] [ 1
666666 x 2 c center ] + ⌊ 1 55555 x + 1 c bottom ⌋ + ⌈ 1 4444 x c top ⌉ + ∥ 1 4444 4444 4444 x center ∥ post text.
JS::PerfMeasurement
ons fielded by the os ::major_page_faults .major_page_faults page faults that required disk access ::context_switches .context_switches context switches involving the profiled thread ::cpu_migrations .cpu_migrations migrations of the profiled thread from one cpu core to another these events map directly to "generic events" in the linux 2.
6.31+ <linux/perf_event.h> interface, and so unfortunately are a little vague in their specification; for instance, we can't tell you exactly which level of cache you get misses for if you measure cache_misses.
... at present, it returns true on linux when the <linux/perf_event.h> api is available (kernel 2.
6.31 or later), and false everywhere else.
... all the counter variables for events that are not being measured will have the fixed value (uint
64)-1.
...uint
64 cpu_cycles, uint
64 instructions, etc.
Leak Gauge
results of processing log leak2.log : leaked outer window 2c
6e410 at address 2c
6e410.
... leaked outer window 2c
6ead0 at address 2c
6ead0.
... leaked inner window 2c
6ec80 (outer 2c
6ead0) at address 2c
6ec80.
... summary: leaked 13 out of 15 dom windows leaked 35 out of 4
6 documents leaked 4 out of 4 docshells leaked content nodes in 42 out of 53 documents if you see such a results, please file a bug.
NSPR Poll Method
the prototype of the poll method is print1
6 poll_method(prfiledesc *fd, print1
6 in_flags, print1
6 *out_flags); the purpose of the poll method is to allow a layer to modify that flags that will ultimately be used in the call to the underlying network transport's select (or equivalent) function, and to indicate that a layer is already able to make progress in the manner suggested by the polling flags.
...declare two print1
6 variables to receive the return value and the out_flags output argument of the poll method.
... print1
6 new_flags, out_flags; if you are going to call pr_recv, pass pr_poll_read as the in_flags argument.
... original document information author: wan teh chang last updated date: june 27, 200
6 ...
PRHostEnt
syntax #include <prnetdb.h> typedef struct prhostent { char *h_name; char **h_aliases; #if defined(_win32) print1
6 h_addrtype; print1
6 h_length; #else print32 h_addrtype; print32 h_length; #endif char **h_addr_list; } prhostent; fields the structure has the following fields: h_name pointer to the official name of host.
...for valid nspr usage, this field must have a value indicating either an ipv4 or an ipv
6 address.
...to make the transition to ip version
6 easier, it's best to treat prhostent as an opaque structure.
... note winsock.h defines h_addrtype and h_length as a 1
6-bit field, whereas other platforms treat it as a 32-bit field.
PRIOMethods
syntax #include <prio.h> struct priomethods { prdesctype file_type; prclosefn close; prreadfn read; prwritefn write; pravailablefn available; pravailable
64fn available
64; prfsyncfn fsync; prseekfn seek; prseek
64fn seek
64; prfileinfofn fileinfo; prfileinfo
64fn fileinfo
64; prwritevfn writev; prconnectfn connect; pracceptfn accept; prbindfn bind; prlistenfn listen; prshutdownfn shutdown; prrecvfn recv; prsendfn send; prrecvfromfn recvfrom; prsendtofn sendto; prpollfn poll; pracceptreadfn acceptread; prtransmitfilefn transmitfile; prgetsocknamefn getsockname; prgetpeernamefn getpeername; prgetsockoptfn getsockopt; prsetsockoptfn setsockopt; }; typedef struct priomethods priomethods; ...
... available
64 same as previous field, except
64-bit.
... seek
64 same as previous field, except
64-bit.
... fileinfo
64 same as previous field, except
64-bit.
4.3 Release Notes
release date: 01 april 2009 introduction network security services for java (jss) 4.3 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 pkcs11 needslogin method support hmacsha25
6, hmacsha384, and hmacsha512 support for all nss 3.12 initialization options jss 4.3 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1.
... libpkix: an rfc 3280 compliant certificate path validation library (see pkixverify) pk11token.needslogin method (see needslogin) support hmacsha25
6, hmacsha384, and hmacsha512 (see hmactest.java) support for all nss 3.12 initialization options (see initializationvalues) new ssl error codes (see http://mxr.mozilla.org/security/sour...util/sslerrs.h) ssl_error_unsupported_extension_alert ssl_error_certificate_unobtainable_alert ssl_error_unrecognized_name_alert ssl_error_bad_cert_status_response_alert ssl_error_bad_cert...
..._hash_value_alert new tls cipher suites (see http://mxr.mozilla.org/security/sour...sslsocket.java): tls_rsa_with_camellia_128_cbc_sha tls_dhe_dss_with_camellia_128_cbc_sha tls_dhe_rsa_with_camellia_128_cbc_sha tls_rsa_with_camellia_25
6_cbc_sha tls_dhe_dss_with_camellia_25
6_cbc_sha tls_dhe_rsa_with_camellia_25
6_cbc_sha note: the following tls cipher suites are declared but are not yet implemented: tls_dh_dss_with_camellia_128_cbc_sha tls_dh_rsa_with_camellia_128_cbc_sha tls_dh_anon_with_camellia_128_cbc_sha tls_dh_dss_with_camellia_25
6_cbc_sha tls_dh_rsa_with_camellia_25
6_cbc_sha tls_dh_anon_with_camellia_25
6_cbc_sha tls_ecdh_anon_with_null_sha tls_ecdh_anon_with_rc4_128_sha tls_ecdh_anon_with_3des_ede_cbc_sha t...
...ls_ecdh_anon_with_aes_128_cbc_sha tls_ecdh_anon_with_aes_25
6_cbc_sha distribution information jss is checked into mozilla/security/jss/.
NSS 3.14.1 release notes
bug 812399 - in nss 3.14, a regression caused bug
641052 / cve-2011-3
640 to be re-introduced under certain situations.
... bug 802429 - the nss softoken is now the default token for sha-25
6 and sha-512.
... bug
611451 - when built with the current version of apple xcode on mac os x, the nss shared libraries will now only export the public nss functions.
... bugs fixed in nss 3.14.1 the following bugzilla query returns all of the bugs fixed in nss 3.14.1: https://bugzilla.mozilla.org/buglist.cgi?list_id=521
6669;resolution=fixed;query_format=advanced;bug_status=resolved;bug_status=verified;target_milestone=3.14.1;product=nss compatability nss 3.14.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.17.3 release notes
notable changes in nss 3.17.3 the quickder decoder now decodes lengths robustly (cve-2014-15
69).
... the following ca certificates were removed cn = gte cybertrust global root sha1 fingerprint: 97:81:79:50:d8:1c:9
6:70:cc:34:d8:09:cf:79:44:31:3
6:7e:f4:74 cn = thawte server ca sha1 fingerprint: 23:e5:94:94:51:95:f2:41:48:03:b4:d5:
64:d2:a3:a3:f5:d8:8b:8c cn = thawte premium server ca sha1 fingerprint:
62:7f:8d:78:27:
65:
63:99:d2:7d:7f:90:44:c9:fe:b3:f3:3e:fa:9a cn = america online root certification authority 1 sha-1 fingerprint: 39:21:c1:15:c1:5d:0e:ca:5c:cb:5b:c4:f0:7d:21:d8:05:0b:5
6:
6a cn = america online root certification authority 2 sha-1 fingerprint: 85:b5:ff:
67:9b:0c:79:9
6:1f:c8:
6e:44:22:00:4
6:13:db:17:92:84 the following ca certificates had the websites and code sig...
...ning trust bits turned off ou = class 3 public primary certification authority - g2 sha1 fingerprint: 85:37:1c:a
6:e5:50:14:3d:ce:28:03:47:1b:de:3a:09:e8:f8:77:0f cn = equifax secure ebusiness ca-1 sha1 fingerprint: da:40:18:8b:91:89:a3:ed:ee:ae:da:97:fe:2f:9d:f5:b7:d1:8a:41 the following ca certificates were added cn = comodo rsa certification authority sha1 fingerprint: af:e5:d2:44:a8:d1:19:42:30:ff:47:9f:e2:f8:97:bb:cd:7a:8c:b4 cn = usertrust rsa certification authority sha1 fingerprint: 2b:8f:1b:57:33:0d:bb:a2:d0:7a:
6c:51:f7:0e:e9:0d:da:b9:ad:8e cn = usertrust ecc certification authority sha1 fingerprint: d1:cb:ca:5d:b2:d5:2a:7f:
69:3b:
67:4d:e5:f0:5a:1d:0c:95:7d:f0 ...
... cn = globalsign ecc root ca - r4 sha1 fingerprint:
69:
69:5
6:2e:40:80:f4:24:a1:e7:19:9f:14:ba:f3:ee:58:ab:
6a:bb cn = globalsign ecc root ca - r5 sha1 fingerprint: 1f:24:c
6:30:cd:a4:18:ef:20:
69:ff:ad:4f:dd:5f:4
6:3a:1b:
69:aa the version number of the updated root ca list has been set to 2.2 bugs fixed in nss 3.17.3 this bugzilla query returns all the bugs fixed in nss 3.17.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.3 compatibility nss 3.17.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.27 release notes
added support for rsa-pss signatures in tls 1.2 and tls 1.3 new functions in ssl.h ssl_namedgroupconfig notable changes in nss 3.27 update 201
6-10-02: the maximum tls version supported has been increased to tls 1.3 (draft).
... the following ca certificates were removed cn = igc/a, o = pm/sgdn, ou = dcssi sha25
6 fingerprint: b9:be:a7:8
6:0a:9
6:2e:a3:
61:1d:ab:97:ab:
6d:a3:e2:1c:10:
68:b9:7d:55:57:5e:d0:e1:12:79:c1:1c:89:32 cn = juur-sk, o = as sertifitseerimiskeskus sha25
6 fingerprint: ec:c3:e9:c3:40:75:03:be:e0:91:aa:95:2f:41:34:8f:f8:8b:aa:8
6:3b:22:
64:be:fa:c8:07:90:15:74:e9:39 cn = ebg elektronik sertifika hizmet sağlayıcısı sha-25
6 fingerprint: 35:ae:5b:dd:...
...d8:f7:ae:
63:5c:ff:ba:5
6:82:a8:f0:0b:95:f4:84:
62:c7:10:8e:e9:a0:e5:29:2b:07:4a:af:b2 cn = s-trust authentication and encryption root ca 2005:pn sha-25
6 fingerprint: 37:d8:dc:8a:f7:8
6:78:45:da:33:44:a
6:b1:ba:de:44:8d:8a:80:e4:7b:55:79:f9:
6b:f
6:31:7
6:8f:9f:30:f
6 o = verisign, inc., ou = class 1 public primary certification authority sha-25
6 fingerprint: 51:84:7c:8c:bd:2e:9a:72:c9:1e:29:2d:2a:e2:47:d7:de:1e:3f:d2:70:54:7a:20:ef:7d:
61:0f:38:b8:84:2c o = verisign, inc., ou = class 2 public primary certification authority - g2 sha-25
6 fingerprint: 3a:43:e2:20:fe:7f:3e:a9:
65:3d:1e:21:74:2e:ac:2b:75:c2:0f:d8:98:03:05:bc:50:2c:af:8c:2d:9b:41:a1 o = verisign, inc., ou = class 3 public primary certification authority ...
... sha-25
6 fingerprint: e7:
68:5
6:34:ef:ac:f
6:9a:ce:93:9a:
6b:25:5b:7b:4f:ab:ef:42:93:5b:50:a2:
65:ac:b5:cb:
60:27:e4:4e:70 o = equifax, ou = equifax secure certificate authority sha-25
6 fingerprint: 08:29:7a:40:47:db:a2:3
6:80:c7:31:db:
6e:31:7
6:53:ca:78:48:e1:be:bd:3a:0b:01:79:a7:07:f9:2c:f1:78 cn = equifax secure ebusiness ca-1 sha-25
6 fingerprint: cf:5
6:ff:4
6:a4:a1:8
6:10:9d:d9:
65:84:b5:ee:b5:8a:51:0c:42:75:b0:e5:f9:4f:40:bb:ae:8
6:5e:19:f
6:73 cn = equifax secure global ebusiness ca-1 sha-25
6 fingerprint: 5f:0b:
62:ea:b5:e3:53:ea:
65:21:
65:1
6:58:fb:b
6:53:59:f4:43:28:0a:4a:fb:d1:04:d7:7d:10:f9:f0:4c:07 bugs fixed in nss 3.27 this bugzilla query returns all the bugs fixed in nss 3.27: https://bugzilla.mozilla.org/bug...
NSS 3.35 release notes
(conversely, nss will never synchronize data from sql to dbm format.) additional information can be found on this fedora linux project page: https://fedoraproject.org/wiki/changes/nssdefaultfileformatsql added formally verified implementations of non-vectorized chacha20 and non-vectorized poly1305
64-bit.
... the following ca certificates were removed: ou = security communication ev rootca1 sha-25
6 fingerprint: a2:2d:ba:
68:1e:97:37:
6e:2d:39:7d:72:8a:ae:3a:9b:
62:9
6:b9:fd:ba:
60:bc:2e:11:f
6:47:f2:c
6:75:fb:37 cn = ca disig root r1 sha-25
6 fingerprint: f9:
6f:23:f4:c3:e7:9c:07:7a:4
6:98:8d:5a:f5:90:0
6:7
6:a0:f0:39:cb:
64:5d:d1:75:49:b2:1
6:c8:24:40:ce cn = dst aces ca x
6 sha-25
6 fingerprint: 7
6:7c:95:5a:7
6:41:2c:89:af:
68:8e:90:a1:c7:0f:55:
6c:fd:
6b:
60:25:db:...
...ea:10:41:
6d:7e:b
6:83:1f:8c:40 subject cn = verisign class 3 secure server ca - g2 sha-25
6 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:7
6: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-25
6 fingerprint: 0c:25:8a:12:a5:
67:4a:ef:25:f2:8b:a7:dc:fa:ec:ee:a3:48:e5:41:e
6:f5:cc:4e:e
6:3b:71:b3:
61:
60:
6a:c3 cn = global chambersign root sha-25
6 fingerprint: ef:3c:b4:17:fc:8e:bf:
6f:97:87:
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.
NSS 3.39 release notes
notable changes in nss 3.39 the tls 1.3 implementation uses the final version number from rfc 844
6.
... the ca certificates list was updated to version 2.2
6.
... the following ca certificates were added: ou = globalsign root ca - r
6 sha-25
6 fingerprint: 2cabeafe37d0
6ca22aba7391c0033d25982952c453
6473497
63a3ab5ad
6ccf
69 cn = oiste wisekey global root gc ca sha-25
6 fingerprint: 85
60f91c3
624daba9570b5fea0dbe3
6ff11a8323be948
6854fb3f34a5571198d the following ca certificate was removed: cn = comsign sha-25
6 fingerprint: ae4457b40d9eda9
6677b0d3c92d57b5177abd7ac103795835
6d1e094518be5f2 the following ca certificates had the websites trust bit disabled: cn = certplus root ca g1 sha-25
6 fingerprint: 152a402bfcdf2cd548054d2275b39c7fca3ec0978078b0f0ea7
6e5
61a
6c7433e cn = certplus root ca g2 sha-25
6 fingerprint:
6cc05041e
6445e74
69
6c4cfbc9f80f54...
...3b7eabbb44b4ce
6f787c
6a9971c42f17 cn = opentrust root ca g1 sha-25
6 fingerprint: 5
6c77128d98c18d91b4cfdffbc25ee9103d4758ea2abad82
6a90f3457d4
60eb4 cn = opentrust root ca g2 sha-25
6 fingerprint: 27995829fe
6a7515c1bfe848f9c47
61db1
6c225929257bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-25
6 fingerprint: b7c3
623170
6e81078c3
67cb89
6198f1e3208dd92
6949dd8f5709a410f75b
6292 bugs fixed in nss 3.39 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) this bugzilla query returns all the bugs fixed in nss 3.39: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone...
NSS 3.41 release notes
bug 1493215 - enabled the following ciphersuites by default: tls_ecdhe_ecdsa_with_aes_25
6_gcm_sha384 tls_ecdhe_rsa_with_aes_25
6_gcm_sha384 tls_dhe_rsa_with_aes_25
6_gcm_sha384 tls_rsa_with_aes_25
6_gcm_sha384 new functions none notable changes in nss 3.41 the following ca certificates were added: cn = certigna root ca sha-25
6 fingerprint: d48d3d23eedb50a459e55197
601c27774b9d7b18c94d5a059511a10250b931
68 cn = gts root r1 sha-25
6 fingerprint: 2a...
...575471e31340bc21581cbd2cf13e1584
63203ece94bcf9d3cc19
6bf09a5472 cn = gts root r2 sha-25
6 fingerprint: c45d7bb08e
6d
67e
62e4235110b5
64e5f78fd92ef058c840aea4e
6455d7585c
60 cn = gts root r3 sha-25
6 fingerprint: 15d5b8774
619ea7d54ce1ca
6d0b0c403e037a917f131e8a04e1e
6b7a71babce5 cn = gts root r4 sha-25
6 fingerprint: 71cca5391f9e794b04802530b3
63e121da8a3043bb2
6662fea4dca7fc951a4bd cn = uca global g2 root sha-25
6 fingerprint: 9bea11c97
6fe0147
64c1be5
6a
6f914b5a5
60317abd9988393382e51
61aa0493c cn = uca extended validation root sha-25
6 fingerprint: d43af9b35473755c9
684fc0
6d7d8cb70ee5c28e773fb294eb41ee71722924d24 the following ca certificates were removed: cn = ac raíz certicámara s.a.
... sha-25
6 fingerprint: a
6c51e0da5ca0a9309d2e4c0e40c2af9107aae8203857fe198e3e7
69e343085c cn = certplus root ca g1 sha-25
6 fingerprint: 152a402bfcdf2cd548054d2275b39c7fca3ec0978078b0f0ea7
6e5
61a
6c7433e cn = certplus root ca g2 sha-25
6 fingerprint:
6cc05041e
6445e74
69
6c4cfbc9f80f543b7eabbb44b4ce
6f787c
6a9971c42f17 cn = opentrust root ca g1 sha-25
6 fingerprint: 5
6c77128d98c18d91b4cfdffbc25ee9103d4758ea2abad82
6a90f3457d4
60eb4 cn = opentrust root ca g2 sha-25
6 fingerprint: 27995829fe
6a7515c1bfe848f9c47
61db1
6c225929257bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-25
6 fingerprint: b7c3
623170
6e81078c3
67cb89
6198f1e3208dd92
6949dd8f5709a410f75b
6292 bugs fixed in nss 3.41 bug 1412829, reject empty supported_sign...
...ature_algorithms in certificate request in tls 1.2 bug 14858
64 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) bug 1481271 - resend the same ticket in clienthello after helloretryrequest bug 14937
69 - set session_id for external resumption tokens bug 1507179 - reject ccs after handshake is complete in tls 1.3 this bugzilla query returns all the bugs fixed in nss 3.41: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.41 compatibility nss 3.41 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS Sample Code Sample_1_Hashing
h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha25
6", sec_oid_sha25
6 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag.
...; 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 > 7
6 || (i % 1
6 == limit)) { newline(out); column = level; limit = i % 1
6; } } 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 ...
... */ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[409
6]; unsigned char digest[
64]; unsigned int len; unsigned int digestlen; hash_hashtype hashtype; hashcontext *hashcontext = null; hashtype = hash_gethashtypebyoidtag(hashoidtag); hashcontext = hash_create(hashtype); if (hashcontext == null) { return secfailure; } do { hash_begin(hashcontext); /* incrementally hash the file co...
...ntents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, digest, &len,
64); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustration let's print it in hex.
NSS Sample Code Utilities_1
this code shows the following: extract seed from noise file read der encoding from a file extract the password from a text file get the module password print as ascii or hexadecimal sample code #include <prlog.h> #include <termios.h> #include <base
64.h> #include <unistd.h> #include <sys/stat.h> #include <prprf.h> #include "util.h" /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
... */ /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printasascii */ void printasascii(prfiledesc* out, const unsigned char *data, unsigned int len) { char *b
64data = null; b
64data = btoa_datatoascii(data, len); pr_fprintf(out, "%s", b
64data); pr_fprintf(out, "\n"); if (b
64data) { port_free(b
64data); } } /* * printashex */ void printashex(prfiledesc* out, const unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; 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 > 7
6 || (i % 1
6 == limit)) { newline(out); column = level; limit = i % 1
6; } } 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; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } return -1; } /* * hextobuf */ int hextobuf(unsigned char *instring, secitem *outbuf, prbool ishexdata) { int len = strlen(instring); int outlen = len+1/2; int truelen = 0;...
...n the single password * case a line would just have the password whereas in the multi- * password variant they could be of the form * * token_1_name:its_password * token_2_name:its_password * */ char *filepasswd(pk11slotinfo *slot, prbool retry, void *arg) { char* phrases, *phrase; prfiledesc *fd; print32 nb; char *pwfile = arg; int i; const long maxpwdfilesize = 409
6; char* tokenname = null; int tokenlen = 0; if (!pwfile) return 0; if (retry) { return 0; /* no good retrying - the file contents will be the same */ } phrases = port_zalloc(maxpwdfilesize); if (!phrases) { return 0; /* out of memory */ } fd = pr_open(pwfile, pr_rdonly, 0); if (!fd) { fprintf(stderr, "no password file \"...
NSS Sample Code sample5
the public key & private key to use are * sourced from a base
64-encoded der subjectpublickeyinfo structure, * and a base
64-encoded der privatekeyinfo structure.
... */ #include "nss.h" #include "pk11pub.h" #define base
64_encoded_subjectpublickeyinfo "mfwwdqyjkozihvcnaqebbqadswawsajbal3f
6tic3jeysugo+a2fpu3w+epv/feix21dc8
6wynpftw4srftz2onuzyluzdhzdb+k//8dct3iaozuui3r2emcaweaaq==" #define base
64_encoded_privatekeyinfo "miibvqibadanbgkqhkig9w0baqefaascat8wgge7ageaakeavcxpmhzckriy
6cj5rz89tdb4sm/8v4hfbumlzpziekw1biysw3pag1tpittmmdl1v
6t//x1xpcga7nrsldhz4widaqabakeajh8+4qncwcmgivnm
6ytbpqt+k/jeoexg2bqhjojvnxn3fazgcefxvpuibcjvfaijs9ybcmozzrato0+k2hwnoqihaoc4nvbo8fqhzs4yxm1m8
6kml47fa9ui//oufbhladw1aiea2dbmixnsbokb+ohver
69p0gnewlvcjc9bjdvfdlvslcciqcp...
...tv3vgyjv2vdwxqzqahc+yb4gigaqoqbcbmjd3lyflqiga+vtydunoqwtzwve4grf7izk2v5ccnhg3gr5rgwxn58cigccaforruksm
66isg0iti04g9v/w+wmx91wjeeb+qbz" int main(int argc, char **argv) { secstatus rv; certcertificate *cert = null; seckeypublickey *pubkey = null; certsubjectpublickeyinfo *spki = null; seckeyprivatekey *pvtkey = null; int modulus_len, i, outlen; char *buf1 = null; char *buf2 = null; char *pubkstr = base
64_encoded_subjectpublickeyinfo; char *pvtkstr = base
64_encoded_privatekeyinfo; secitem der; secitem nickname; pk11slotinfo *slot = null; /* initialize nss * you need to explicitly authenticate to the internal token if you use * nss_init insteadf of nss_...
...i); if (pubkey == null) { fprintf(stderr, "couldn't extract public key (err %d)\n", pr_geterror()); goto cleanup; } modulus_len = seckey_publickeystrength(pubkey); fprintf(stderr, "public key modulus %d bytes\n", modulus_len); buf1 = (char *)malloc(modulus_len); buf2 = (char *)malloc(modulus_len); /* initialize buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= (i %2
6) + 'a'; } buf1[modulus_len-1] = '\0'; fprintf(stderr, "buffer being encrypted = \n%s\n", buf1); /* encrypt buf1, result will be in buf2 */ rv = pk11_pubencryptraw(pubkey, buf2, buf1, modulus_len, null); if (rv != secsuccess) { fprintf(stderr, "encrypt with public key failed (err %d)\n", pr_geterror()); goto cleanup; } nickname.type = sibuffer; nickname.da...
Hashing - sample 1
pes.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> #include <nss.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha25
6", sec_oid_sha25
6 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag.
...; 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 > 7
6 || (i % 1
6 == limit)) { newline(out); column = level; limit = i % 1
6; } } 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...
... */ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[409
6]; unsigned char digest[
64]; unsigned int len; hash_hashtype hashtype; hashcontext *hashcontext = null; hashtype = hash_gethashtypebyoidtag(hashoidtag); hashcontext = hash_create(hashtype); if (hashcontext == null) { return secfailure; } do { hash_begin(hashcontext); /* incrementally hash the file contents */ while ((nb ...
...= pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, digest, &len,
64); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustration let's print it in hex.
Utilities for nss samples
*/ #ifndef _util_h #define _util_h #include <prlog.h> #include <termios.h> #include <base
64.h> #include <unistd.h> #include <sys/stat.h> #include "util.h" #include <prprf.h> #include <prerror.h> #include <nss.h> #include <pk11func.h> /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
... */ /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printasascii */ void printasascii(prfiledesc* out, const unsigned char *data, unsigned int len) { char *b
64data = null; b
64data = btoa_datatoascii(data, len); pr_fprintf(out, "%s", b
64data); pr_fprintf(out, "\n"); if (b
64data) { port_free(b
64data); } } /* * printashex */ void printashex(prfiledesc* out, const unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; unsigned int level = 1; column = level; if (!le...
...n) { 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 > 7
6 || (i % 1
6 == limit)) { newline(out); column = level; limit = i % 1
6; } } 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; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; }...
...n the single password * case a line would just have the passord whereas in the multi- * password variant they could be of the form * * token_1_name:its_password * token_2_name:its_password * */ char * filepasswd(pk11slotinfo *slot, prbool retry, void *arg) { char* phrases, *phrase; prfiledesc *fd; print32 nb; char *pwfile = arg; int i; const long maxpwdfilesize = 409
6; char* tokenname = null; int tokenlen = 0; if (!pwfile) return 0; if (retry) { return 0; /* no good retrying - the files contents will be the same */ } phrases = port_zalloc(maxpwdfilesize); if (!phrases) { return 0; /* out of memory */ } fd = pr_open(pwfile, pr_rdonly, 0); if (!fd) { fprintf(stderr, "no password file \...
sample1
topt.h> #include <prio.h> #include <prprf.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha25
6", sec_oid_sha25
6 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* maps a hash name to a secoidtag.
...nt 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 > 7
6 || (i % 1
6 == limit)) { newline(out); column = level; limit = i % 1
6; } } 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 ...
... */ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[409
6]; unsigned char digest[
64]; unsigned int len; unsigned int digestlen; hash_hashtype hashtype; hashcontext *hashcontext = null; hashtype = hash_gethashtypebyoidtag(hashoidtag); hashcontext = hash_create(hashtype); if (hashcontext == null) { return secfailure; } do { hash_begin(hashcontext); /* incrementally h...
...ash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, digest, &len,
64); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustration let's print it in hex.
NSS tools : crlutil
please contribute to the initial review in mozilla nss bug 83
6477[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.
...list of possible algorithms: md2 | md4 | md5 | sha1 | sha25
6 | sha384 | sha512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
... reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliationchanged (3), superseded (4), cessationofoperation (5), certificatehold (
6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) * add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the certificate otherwise became invalid.
...mozilla nss bug 83
6477 - https://bugzilla.mozilla.org/show_bug.cgi?id=83
6477 visible links 1.
NSS tools : signtool
if the -c# option is not used with either the -j or the -z option, the default compression value used by both the -j and -z options is
6.
...if the -c# option is not used with the -j option, the default compression value is
6.
...if the -c# option is not used with the -z option, the default compression value is
6.
... expires: tue may 19, 1998 test object signing cert issued by: test object signing cert (signtool 1.0 testing certificate (9
60187
691)) expires: sun may 17, 1998 --------------------------------------- for a list including cas, use the -l option.
Installing Pork
building a 32-bit mcpp on a
64-bit system this is dark magic, and i hope i've got it right.
... first i built gcc in a separate --prefix=/builds/gcc-3.4.
6-installed.
...td.h - ${cxx} -e -xc++ -dm /dev/null | sort | grep -e ' *#define *[a-za-z]+' \ + ${cxx} ${cppflags} -e -xc++ -dm /dev/null | sort | grep -e ' *#define *[a-za-z]+' \ > gxx${gcc_maj_ver}${gcc_min_ver}_predef_old.h fi if test ${host_system} = sys_cygwin; then if you don't do this, mcpp will get the wrong set of automatic definitions and you'll end up with an unpleasant hybrid x8
6-
64/i
68
6 build system.
... $ export path=/builds/gcc-3.4.
6-installed/bin:$path $ export cppflags=-m32 $ cc=gcc34 cxx=g++34 cppflags=-m32 ldflags=-m32 ../src/configure --enable-replace-cpp --prefix=/builds/gcc-3.4.
6-installed --target=i
68
6-pc-linux $ make $ make install program_transform_name= ...
Rhino downloads archive
release release date change log download link rhino 1.7r4 2012-0
6-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-0
6 new in rhino 1.7r1 rhino1_7r1.zip rhino 1.
6r7 2007-08-20 new in rhino 1.
6r7 rhino1_
6r7.zip rhino 1.
6r
6 2007-07-30 new in rhino 1.
6r
6 rhino1_
6r
6.zip rhino 1.
6r5 200
6-11-19 same code as 1.
6r4, but relicensed under mpl/gpl.
... rhino1_
6r5.zip rhino 1.
6r4 200
6-09-10 bug 34397
6 rhino1_
6r4.zip rhino 1.
6r3 200
6-07-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-27 changes in 1.5r3 rhino15r3.zip rhino 1.5r2 2001-07-27 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...
...se rhino14r3.zip rhino 1.
6r1 through 1.
6r
6 implement e4x using xmlbeans library.
...in rhino 1.
6r
6 and later the e4x support has been rewritten to rely solely on the dom3 apis supported natively by java 1.5.
Scripting Java
these packages are likely not in the java package, so you'll need to prefix the package name with "packages." for example, to import the org.mozilla.javascript package you could use importpackage() as follows: $ java org.mozilla.javascript.tools.shell.main js> importpackage(packages.org.mozilla.javascript); js> context.currentcontext; org.mozilla.javascript.context@bb
6ab
6 occasionally, you will see examples that use the fully qualified name of the package instead of importing using the importpackage() method.
...using a fully qualified name, the above example would look as follows: $ java org.mozilla.javascript.tools.shell.main js> jspackage = packages.org.mozilla.javascript; [javapackage org.mozilla.javascript] js> jspackage.context.currentcontext; org.mozilla.javascript.context@bb
6ab
6 alternatively, if you want to import just one class from a package you can do so using the importclass() method.
... the above examples could be expressed as follows: $ java org.mozilla.javascript.tools.shell.main js> importclass(packages.org.mozilla.javascript.context); js> context.currentcontext; org.mozilla.javascript.context@bb
6ab
6 working with java now that we can access java classes, the next logical step is to create an object.
... this works just as in java, with the use of the new operator: js> new java.util.date() thu jan 24 1
6:18:17 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.141592
653589793 js> java.lang.math.cos(0) 1 in javascript, unlike java, the method by itself is an object and can be evaluated as well as being called.
Rhino shell
the string versionnumber must be one of 100, 110, 120, 130, 140, 150, 1
60 or 170.
...if an argument is supplied, it is expected to be one of 100, 110, 120, 130, 140, 150, 1
60 or 170 to indicate javascript version 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.
6 or 1.7 respectively.
... $ java org.mozilla.javascript.tools.shell.main -e "print('hi')" hi $ java org.mozilla.javascript.tools.shell.main js> print('hi') hi js>
6*7 42 js> function f() { return a; } js> var a = 34; js> f() 34 js> quit() $ cat echo.js for (i in arguments) { print(arguments[i]) } $ java org.mozilla.javascript.tools.shell.main echo.js foo bar foo bar $ spawn and sync the following example creates 2 threads via spawn and uses sync to create a synchronized version of the function test.
... js> runcommand('date') thu jan 23 1
6:49:3
6 cet 2003 0 // using input option to provide process input js> runcommand("sort", {input: "c\na\nb"}) a b c 0 js> // demo of output and err options js> var opt={input: "c\na\nb", output: 'sort output:\n'} js> runcommand("sort", opt) 0 js> print(opt.output) sort output: a b c js> var opt={input: "c\na\nb", output: 'sort output:\n', err: ''} js> runcommand("sort", "--bad-arg", opt) 2 js> print(opt.err) /bin/sort: u...
JSClass.flags
if the global object does not have this flag, then scripts may cause nonstandard behavior by replacing standard constructors or prototypes (such as function.prototype.) objects that can end up with the wrong prototype object, if this flag is not present, include: arguments objects (ecma 2
62-3 §10.1.8 specifies "the original object prototype"), function objects (ecma 2
62-3 §13.2 specifies "the original function prototype"), and objects created by many standard constructors (ecma 2
62-3 §15.4.2.1 and others).
... jsclass_new_resolve obsolete since jsapi 3
6 this class's resolve hook is actually a jsnewresolveop, not a jsresolveop.
... jsclass_new_resolve_gets_start obsolete since jsapi 1
6 the resolve hook expects to receive the starting object in the prototype chain passed in via the *objp in/out parameter.
... see also bug 527805 - removed jsclass_share_all_properties bug 571789 - removed jsclass_is_extended bug
638291 - removed jsclass_mark_is_trace bug
641025 - added jsclass_implements_barriers bug 702507 - removed jsclass_construct_prototype bug 758913 - removed jsclass_new_resolve_gets_start bug 7
66447 - added jsclass_is_domjsclass bug 792108 - added jsclass_emulates_undefined bug 99302
6 - removed jsclass_new_resolve bug 10972
67 - removed jsclass_new_enumerate ...
JSErrorFormatString
syntax typedef struct jserrorformatstring { const char *format; uint1
6_t argcount; int1
6_t exntype; } jserrorformatstring; name type description format const char * the error format string in ascii.
... argcount uint1
6_t the number of arguments to expand in the formatted error message.
... exntype int1
6_t one of the jsexntype constants.
... see also mxr id search for jserrorformatstring jsexntype js_reporterrornumber bug
68452
6 ...
JS_FS
nargs uint1
6_t the number of arguments the function expects.
... flags uint1
6 the bitwise or of any number of function flags.
...(in builds without es
6 symbols, it defines a method with the string id "@@iterator".) see an example in the jsapi user guide.
... bug 1082
672 - added js_sym_fn js_self_hosted_sym_fn js_sym_fnspec.
JS_GetStringLength
return the length, in 1
6-bit code units, of a javascript string.
... description js_getstringlength reports the length, in 1
6-bit code units, of the string str.
...this is the same as the length of the array returned by js_getstringchars, in char1
6_ts (not bytes).
... because some unicode characters are represented using two 1
6-bit code units, the result is not necessarily the same as the number of unicode characters in the string.
JS_ValueToInt32
description js_valuetoint32 converts a specified js value, v, to a 32-bit signed integer (-2147483
648 to 2147483
647).
... js_valuetoint32 is pre-ecma-2
62 edition 1, and rounds differently than js_valuetoecmaint32 and js::toint32.
...js::toint32 rounds as specified in ecma 2
62-3 §9.5, while this routine rounds by adding 0.5 to the converted float-point number and truncating the result at the decimal point.
... see also js_convertarguments js::toint32 bug 93394
6 ...
Secure Development Guidelines
introduction provide developers with information on specific security issues cover common coding mistakes and how they affect a product how to avoid making them how to mitigate them everything is oriented toward c/c++ introduction: gaining control specifics about the underlying architecture, using x8
6 as an example
6 basic registers (eax, ebx, ecx, edx, edi, esi) 2 stack-related registers (esp, ebp) mark top and bottom of current stack frame status register (eflags) contains various state information instruction pointer (eip) points to register being executed; can’t be modified directly introduction: gaining control (2) eip is modified using call or ...
... bits maximum value that can be represented data type 8 28-1 255 char 1
6 21
6-1
65535 short 32 232-1 42949
67295 int
64 2
64-1 1844
6744073709551
615 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...
... } 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 - +127 unsigned char 0 - +255 1
6 signed short -327
68 - +327
67 unsigned short 0 - +
65535 32 signed int -2147483
648 - +2147483
647 unsigned int 0 - +42949
67295
64 signed long long -922337203
6854775808 - +922337203
6854775807 unsigned long long 0 - +1844
6744073709551
615 int vuln_funct(int size) { char buf[1024]; if (size > sizeof(b...
...uf) - 1) return -1; } signedness issues: don’t mix signed and unsigned integers use unsigned integers for sizes, offsets, and indexes casting and truncation example: void vuln_funct() { u_int32_t size1 = 0xffffffff; u_int1
6_t size2 = size1; void *ptr = malloc(size2); if (!ptr) exit(exit_failure); memcpy(ptr, user_data, size1); } casting issues: sign extension example: int main() { int32_t new_size = 0; int8_t size = 0xff; new_size = size; printf("0x%08x\r\n", new_size); } casting issues: sign extension prevention be careful with signed integers use unsigned integers for sizes, offsets, and indexes denial of service: divide by zero example: int main() { int a, b; if (argc != 3) return 1; ...
Using the Places annotation service
from c++ you must use the setter for the explicit data type being saved: setpageannotationstring(auri, aname, avalue, aflags, aexpiration); setpageannotationint32(auri, aname, avalue, aflags, aexpiration); setpageannotationint
64(auri, aname, avalue, aflags, aexpiration); setpageannotationdouble(auri, aname, avalue, aflags, aexpiration); setpageannotationbinary(auri, aname, adata, adatalen, aflags, aexpiration); and likewise for items in the places database: setitemannotationstring(aitemid, aname, avalue, aflags, aexpiration); setitemannotationint32(aitemid, aname, avalue, aflags, aexpiration); setitemannotation...
...int
64(aitemid, aname, avalue, aflags, aexpiration); setitemannotationdouble(aitemid, aname, avalue, aflags, aexpiration); setitemannotationbinary(aitemid, aname, avalue, adatalen, aflags, aexpiration); from javascript there are two simple function to perform all of these operations: setpageannotation(auri, aname, avalue, aflags, aexpiration); setitemannotation(aitemid, aname, avalue, aflags, aexpiration); these annotations all take similar parameters: uri or itemid: this is the nsiuri of the page to annotate, or for items in the places database, the id of the item.
...://www.mozilla.org/", null, null); annotationservice.setpageannotation(uri, "my_extension/some_annotation", "this is the annotation value", 0, 0); retrieving annotations there are corresponding getters for the setters above (see nsiannotationservice.idl for the exact declarations): from c++: getpageannotationstring(auri, aname); getpageannotationint32(auri, aname); getpageannotationint
64(auri, aname); getpageannotationdouble(auri, aname); getpageannotationbinary(auri, aname, adata, adatalen, amimetype); getitemannotationstring(aitemid, aname); getitemannotationint32(aitemid, aname); getitemannotationint
64(aitemid, aname); getitemannotationdouble(aitemid, aname); getitemannotationbinary(aitemid, aname, adata, adatalen, amimetype); from javascript: getpageannotation...
...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 3770
66 the value_type_* type handling was changed to this: type_int32 = 1 type_double = 2 type_string = 3 type_binary = 4 type_int
64 = 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, r...
XPCOM changes in Gecko 2.0
chrome.manifest: # the {classid} here must match the classid in mycomponent.js component {e
6b8
66e3-41b2-4f05-a4d2-3d4bde0f7ef8} components/mycomponent.js contract @foobar/mycomponent;1 {e
6b8
66e3-41b2-4f05-a4d2-3d4bde0f7ef8} category profile-after-change mycomponent @foobar/mycomponent;1 the javascript code no longer exports a nsgetmodule() function.
... classid: components.id("{e
6b8
66e3-41b2-4f05-a4d2-3d4bde0f7ef8}"), queryinterface: xpcomutils.generateqi([components.interfaces.nsimycomponent]), /* nsimycomponent implementation goes here */ ...
...platform-specific directories the component/chrome system used to look in platform-specific subdirectories of an extension, such as platform/winnt_x8
6-msvc/chrome.manifest on windows.
...you can use the os and abi chrome registration directives to achieve the same effect: binary-component components/windows/mycomponent.dll abi=winnt_x8
6-msvc binary-component components/mac/mycomponent.dylib abi=darwin_x8
6-gcc3 binary-component components/mac/mycomponent
64.dylib abi=darwin_x8
6_
64-gcc3 binary-component components/linux/mycomponent.so abi=linux_x8
6-gcc3 this also means that platform-specific preferences are no longer possible.
mozIStorageValueArray
last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview long gettypeofindex(in unsigned long aindex); long getint32(in unsigned long aindex); long long getint
64(in unsigned long aindex); double getdouble(in unsigned long aindex); autf8string getutf8string(in unsigned long aindex); astring getstring(in unsigned long aindex); void getblob(in unsigned long aindex, out unsigned long adatasize, [array,size_is(adatasize)] out octet adata); boolean getisnull(in unsigned long aindex); attributes attr...
... getint
64() obtains a int
64 from the specified index.
... long long getint
64( in unsigned long aindex ); parameters aindex the zero-based numerical index for the column to get the data from.
... return value the int
64 for the specified entry.
nsICryptoHMAC
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm, in nsikeyobject akeyobject); void reset(); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long alen); constants hashing algorithms.
... constant value description md2 1 message digest algorithm 2 md5 2 message-digest algorithm 5 sha1 3 secure hash algorithm 1 sha25
6 4 secure hash algorithm 25
6 sha384 5 secure hash algorithm 384 sha512
6 secure hash algorithm 512 methods finish() completes this hmac object and produces the actual hmac diegest data.
...acstring finish( in prbool aascii ); parameters aascii if true then the returned value is a base-
64 encoded string.
...this can be either binary data or base
64 encoded.
nsIEditorSpellCheck
inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.
6) implemented by: @mozilla.org/editor/editorspellchecker;1.
... savedefaultdictionary() obsolete since gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.
6)this feature is obsolete.
... note: this method was removed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.
6).
...remarks prior to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.
6), this method took one parameter, a reference to the nsieditor for which to update the spell checker.
nsIFocusManager
1.0
66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) implemented by: @mozilla.org/focus-manager;1 as a service: var focusmanager = components.classes["@mozilla.org/focus-manager;1"] .getservice(components.interfaces.nsifocusmanager); method overview void clearfocus(in nsidomwindow awindow); void contentremoved(in nsidocument adocument, in nsicontent aelement); native code only!
... movefocus_forwarddoc 3 move focus forward to the next frame document, used when pressing f
6.
... movefocus_backwarddoc 4 move focus forward to the previous frame document, used when pressing shift+f
6.
... movefocus_last
6 move focus to the last focusable element.
nsILocalFileMac
filesizewithresfork print
64 returns the combined size of both the data fork and the resource fork (if present) rather than just the size of the data fork as returned by getfilesize() read only.
... native code only!initwithfsspec obsolete since gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0)this feature is obsolete.
... setfiletypeandcreatorfromextension() obsolete since gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0) sets the file type and creator code from a file extension internet config is used to determine the mapping.
... void setfiletypeandcreatorfromextension( in string aextension ); parameters aextension setfiletypeandcreatorfrommimetype() obsolete since gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0) sets the file type and creator code from a mime type.
nsIPlacesImportExportService
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) in the past, this interface also offered methods for importing places data, but those methods are now part of the bookmarkhtmlutils.jsm javascript code module.
...ice;1"] .getservice(components.interfaces.nsiplacesimportexportservice); method overview void backupbookmarksfile(); void exporthtmltofile(in nsilocalfile afile); void importhtmlfromfile(in nsilocalfile afile, in boolean aisinitialimport); obsolete since gecko 14.0 void importhtmlfromfiletofolder(in nsilocalfile afile, in print
64 afolder, in boolean aisinitialimport); obsolete since gecko 14.0 void importhtmlfromuri(in nsiuri auri, in boolean aisinitialimport); obsolete since gecko 14.0 methods backupbookmarksfile() backs up the bookmarks.html file.
...the observer subject will be an nsisupportsprint
64 whose value is afolder.
... void importhtmlfromfiletofolder( in nsilocalfile afile, in print
64 afolder, in boolean aisinitialimport ); parameters afile the file to import.
nsIProcess
note: this function does not work with application bundles on mac os x, see bug 3074
63 for details.
... initwithpid() obsolete since gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0) initializes the nsiprocess to represent an existing process, given that process's id.
... args an array of count arguments, using utf-1
6, to be passed to the executable on its command line.
... void runwasync( [array, size_is(count)] in wstring args, in unsigned long count, in nsiobserver observer, optional in boolean holdweak optional ); parameters args an array of arguments to pass into the process, using utf-1
6.
nsIPushSubscription
inherits from: nsisupports last changed in gecko 4
6.0 (firefox 4
6.0 / thunderbird 4
6.0 / seamonkey 2.43) each subscription is associated with a unique url generated by the push service.
...the following key names are supported: p25
6dh the ecdh public key, used as the input keying material in the hkdf invocation during encryption.
...er(subscription) { let request = cc["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(ci.nsixmlhttprequest); request.open("post", "https://example.com/register-for-push", true); request.addeventlistener("error", () => { cu.reporterror("error sending subscription to server"); }); request.send(json.stringify({ endpoint: subscription.endpoint, // base
64-encode the key and authentication secret.
... key: string.fromcharcode.apply(null, btoa(subscription.getkey("p25
6dh"))), secret: string.fromcharcode.apply(null, btoa(subscription.getkey("auth"))), })); } pushservice.subscribe( "chrome://my-module/push", scriptsecuritymanager.getsystemprincipal(), (code, subscription) => { if (!components.issuccesscode(code)) { cu.reporterror("error creating subscription: " + code); } else { sendsubscriptiontoserver(subscription); } } ); see also nsipushservice nsipushmessage pushsubscription ...
nsIWritablePropertyBag2
1.0
66 introduced gecko 1.8 inherits from: nsipropertybag2 last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void setpropertyasacstring(in astring prop, in acstring value); void setpropertyasastring(in astring prop, in astring value); void setpropertyasautf8string(in astring prop, in autf8string value); void setpropertyasbool(in astring prop, in boolean value); void setpropertyasdouble(in astring prop, in double value); void setpropertyasint32(in astring prop, in print32 value); void setpropertyasint
64(in astring prop, in print
64 value...
...); void setpropertyasinterface(in astring prop, in nsisupports value); void setpropertyasuint32(in astring prop, in pruint32 value); void setpropertyasuint
64(in astring prop, in pruint
64 value); methods setpropertyasacstring() void setpropertyasacstring( in astring prop, in acstring value ); parameters prop property to set the value of.
... setpropertyasint
64() void setpropertyasint
64( in astring prop, in print
64 value ); parameters prop property to set the value of.
... setpropertyasuint
64() void setpropertyasuint
64( in astring prop, in pruint
64 value ); parameters prop property to set the value of.
nsMsgSearchAttrib
*/ [scriptable, uuid(a83ca7e8-4591-4111-8fb8-fd7
6ac73c8
66)] 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 = 1
6; // keywords are the internal representation of tags.
... 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 = 2
6; const nsmsgsearchattribvalue pager = 27; const nsmsgsearchattribvalue mobile = 28; const nsmsgsearchattribvalue city = 29; const nsmsgsearchattribvalue street = 30; const nsmsgsearchattribvalue title = 31; const nsmsgsearchattribvalue organization = 32; const nsmsgsearchattribvalue department = 33; // 34 - 43, reserved for ab / ldap; const nsmsgsear...
...chattribvalue hasattachmentstatus = 44; const nsmsgsearchattribvalue junkstatus = 45; const nsmsgsearchattribvalue junkpercent = 4
6; const nsmsgsearchattribvalue junkscoreorigin = 47; 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.
nsMsgViewCommandType
togglethreadwatched
6 toggle the watched state of the selected thread.
... downloadselectedforoffline 1
6 download the selected messages for offline.
... label5 2
6 attach a label to the selected messages.
... lastlabel 2
6 attach a label to the selected messages.
Xptcall Porting Guide
here are examples of this implementation for win32 and linux x8
6, netbsd x8
6, and freebsd.
... ns_imethod getinterfaceinfo(nsiinterfaceinfo** info) = 0; // call this method and return result ns_imethod callmethod(pruint1
6 methodindex, const nsxptmethodinfo* info, nsxptcminivariant* params) = 0; }; code that wishes to make use of this stubs functionality (such as xpconnect) implement a class which inherits from nsxptcstubbase and implements the getinterfaceinfo and callmethod to let the platform specific code know how to get interface information and how to dispa...
...here are examples of this implementation for win32 and linux x8
6, netbsd x8
6, and freebsd.
...i opted to use inline assembler for the gcc linux x8
6 port.
Constants - Plugins
nperr_invalid_plugin_error
6 plug-in missing or invalid.
... npvers_win1
6_has_liveconnect 9 liveconnect (win1
6).
... npvers_
68k_has_liveconnect 11 liveconnect (
68k).
... npvers_has_popups_enabled_state 1
6 the npn_pushpopupsenabledstate() and npn_poppopupsenabledstate() functions are supported.
Accessibility Inspector - Firefox Developer Tools
note that this works correctly as of firefox
62 (bug 14
67381).
... in the following example, you can see that the image has been highlighted and its role, graphic, name, "road, asphalt, sky, clouds, fall", and the color contrast ratio, 3.4
6, appears in the information bar above it.
... for example: the color contrast in the image above is 2.8
6, so potentially not enough contrast to make it easy to read.
... as of firefox
65, viewing this information for some foreground text that has a complex background image (e.g.
Dominators view - Firefox Developer Tools
the dominators view is new in firefox 4
6.
... starting in firefox 4
6, the memory tool includes a new view called the dominators view.
... this option is called "allocation stack" in firefox 4
6.
...each monster has a relatively small shallow size of 1
60 bytes.
Network request list - Firefox Developer Tools
starting in firefox 7
6 you can double-click a column divider to resize the column to the left of it to fit its contents.
...starting with firefox
68, the transferred column lists either "cached (raced)" or "[size] (raced)" depending on the faster source.
... remote-ip:
63.245.215.53 remote-ip:[2400:cb00:2048:1::
6810:2802] cause shows resources matching a specific cause type.
...(starting in firefox 7
6) managing har data the har format enables you to export detailed information about network requests.
Page inspector 3-pane mode - Firefox Developer Tools
feature summary from firefox
62 onwards, the page inspector has a new mode available — 3-pane mode.
... enabling the 3-pane inspector pre-firefox
62 in earlier versions of firefox (since firefox 59/
60), you can enable 3 pane mode in release/beta by going to about:config and flipping the following prefs to true: devtools.inspector.split-rule-enabled — this switches 3-pane mode on and off.
... in firefox
61, these preferences got renamed to: devtools.inspector.three-pane-enabled devtools.inspector.three-pane-toggle you need to flip these two to true in release/beta to test the feature in firefox
61.
... note: the 3-pane inspector is already enabled in nightly/developer edition before firefox
62.
Waterfall - Firefox Developer Tools
new in firefox 4
6: if the gc event was caused by allocation pressure, a link appears, labeled "show allocation triggers".
...it's commonly accepted that
60 frames per second is the rate at which animations will appear smooth.
... for a rate of
60 frames per second, that gives the browser 1
6.7 milliseconds to execute the complete flow.
... a lot of memory is being allocated non-incremental gc is usually needed when the memory allocation rate is high enough that spidermonkey may run out of memory during incremental gc when the waterfall records a gc marker it indicates: whether the gc was incremental or not the reason the gc was performed if the gc was non-incremental, the reason it was non-incremental starting in firefox 4
6, if the gc event was caused by allocation pressure, a link appears, labeled "show allocation triggers".
AesGcmParams - Web APIs
the aes-gcm specification recommends that the iv should be 9
6 bits long, and typically contains bits from a random number generator.
... the bit length of additionaldata must be ≤ 2
64-1.
... according to the web crypto specification this must have one of the following values: 32,
64, 9
6, 104, 112, 120, or 128.
... the aes-gcm specification recommends that it should be 9
6, 104, 112, 120 or 128, although 32 or
64 bits may be acceptable in some applications: appendix c of the specification provides additional guidance here.
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="5
6" y="30" font-size="12px" font-family="consolas,mon...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="2
66" y="1" width="75" height="50" fill="#f4f7f8" 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...
...this note was removed again in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.4
6).
... this change is implemented in chrome since version 4
6.0 and firefox since version 48.0.
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="5
6" y="30" font-size="12px" font-family="consolas,...
...no,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="19
6" 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.
... // constructor const analysernode = new analysernode(audioctx, { fftsize: 2048, maxdecibels: -25, mindecibels: -
60, smoothingtimeconstant: 0.5, }); // factory method const analysernode = audioctx.createanalyser(); analysernode.fftsize = 2048; analysernode.maxdecibels = -25; analysernode.mindecibels = -
60; analysernode.smoothingtimeconstant = 0.5; you are free to use either constructors or factory methods, or mix both, however there are advantages to using the constructors: all parameters can be set du...
...the constructors were added to the spec from august to october 201
6.
AudioParam.cancelAndHoldAtTime() - Web APIs
— 5
6alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()edge full support ≤79firefox no support noie no support noopera full support 44 full support ...
...— 5
6alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()chrome android full support 57 full support 57 no support ?
... — 5
6alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()firefox android no support noopera android full support 43 full support 43 no support ?
...—
6.0alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()legend full support full support no support no supportuses a non-standard name.uses a non-standard name.
AuthenticatorAssertionResponse.authenticatorData - Web APIs
syntax var authnrdata = authenticatorassertionresponse.authenticatordata; value an arraybuffer that has a arraybuffer.bytelength of at least 37 bytes, containing the following fields: rpidhash (32 bytes) - a sha25
6 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 37 bytes of this authenticatordata.
...this is a sequence of bytes with the following format: aaguid (1
6 bytes) - authenticator attestation globally unique identifier, a unique number that identifies the model of the authenticator (not the specific instance of the authenticator) so that a relying party can understand the characteristics of the authenticator by looking up its metadata statement.
... examples var options = { challenge: new uint8array(2
6), // will be another value, provided by the relying party server timeout:
60000 }; navigator.credentials.get({ publickey: options }) .then(function (assertionpkcred) { var authenticatordata = assertionpkcred.response.authenticatordata; // maybe try to convert the authenticatordata to see what's inside // send response and client extensions to the server so that it can // go...
BudgetService - Web APIs
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 ?
... samsung internet android full support
6.0legend full support full support compatibility unknown compatibility unknownexperimental.
CDATASection - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="2
66" 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" alig...
...nment-baseline="middle">characterdata</text></a><polyline points="39
6,25 40
6,20 40
6,30 39
6,25" stroke="#d4dde4" fill="none"/><line x1="40
6" y1="25" x2="43
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="43
6" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="473.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" targ...
...et="_top"><rect x="391" y="
65" width="120" height="50" fill="#f4f7f8" 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.
CanvasRenderingContext2D.shadowColor - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 10; ctx.shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth =
6; ctx.strokerect(170, 20, 100, 100); result shadows on translucent shapes a shadow's opacity is affected by the transparency level of its parent object (even when shadowcolor specifies a completely opaque value).
... html <canvas id="canvas"></canvas> javascript the resulting alpha value of the fill shadow is .8 * .2, or .1
6.
... the alpha of the stroke shadow is .8 * .
6, or .48.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'rgba(255, 0, 0, .8)'; ctx.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(10, 10, 150, 100); // stroked rectangle ctx.linewidth = 10; ctx.strokestyle = 'rgba(0, 0, 255, .
6)'; ctx.strokerect(10, 10, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowcolor' in that specification.
DOMHighResTimeStamp - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20 µs in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 event.timestamp // 1519211809934 // 15192118103
62 // 1519211811
670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled event.timestamp; // 1519129853500 // 1519129858900 // 15191298
64400 // ...
... 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 ...
DOMMatrix - Web APIs
if the array has six values, the result is a 2d matrix; if the array has 1
6 values, the result is a 3d matrix.
... fromfloat
64array() creates a new mutable dommatrix object given an array of double-precision (
64-bit) floating-point values.
... if the array has six values, the result is a 2d matrix; if the array has 1
6 values, the result is a 3d matrix.
... [m11m21m31m41m12m22m32m42m13m23m33m43m14m24m34m44]\left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ] the positions of the 1
6 elements (m11 through m44) which comprise the 4×4 abstract matrix.
Binary strings - Web APIs
javascript strings are utf-1
6 encoded strings.
... this means that each code unit requires two bytes of memory and is able to represent
65535 different code points.
... a subset of these strings is represented by utf-1
6 strings containing only ascii characters (i.e., characters whose code point does not exceed 127).
... the reason that brought to use utf-1
6 code units as placeholders for uint8 numbers is that as web applications become more and more powerful (adding features such as audio and video manipulation, access to raw data using websockets, and so forth) it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data.
EXT_texture_compression_rgtc - Web APIs
ext.compressed_red_rgtc1_ext each 4x4 block of texels consists of
64 bits of unsigned red image data.
... ext.compressed_signed_red_rgtc1_ext each 4x4 block of texels consists of
64 bits of signed red image data.
... ext.compressed_red_green_rgtc2_ext each 4x4 block of texels consists of
64 bits of compressed unsigned red image data followed by
64 bits of compressed unsigned green image data.
... ext.compressed_signed_red_green_rgtc2_ext each 4x4 block of texels consists of
64 bits of compressed signed red image data followed by
64 bits of compressed signed green image data.
File.lastModified - Web APIs
const filewithdate = new file([], 'file.bin', { lastmodified: new date(2017, 1, 1), }); console.log(filewithdate.lastmodified); //returns 1485903
600000 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.
... in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 somefile.lastmodified; // 1519211809934 // 15192118103
62 // 1519211811
670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled somefile.lastmodified; // 1519129853500 // 1519129858900 // 15191298
64400 // ...
FileReader.readAsDataURL() - Web APIs
at that time, the result attribute contains the data as a data: url representing the file's data as a base
64 encoded string.
... note: the blob's result cannot be directly decoded as base
64 without first removing the data-url declaration preceding the base
64-encoded data.
... to retrieve only the base
64 encoded string, first remove data:*/*;base
64, from the result.
... example html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base
64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=fil...
FileSystemSync - Web APIs
efix: webkitfirefox no support noie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: webkitsafari full support
6prefixed full support
6prefixed prefixed implemented with the vendor prefix: webkitwebview android full support ≤37prefixed full support ≤37prefixed prefixed implemented with the vendor prefix: webkitchrome android full support ...
...d prefixed implemented with the vendor prefix: webkitfirefox android no support noopera android full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: webkitsafari ios full support
6prefixed full support
6prefixed prefixed implemented 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 ≤37chrome android full support 18firefox android no support noopera android full support 14safari ios full support
6samsung internet android full support ...
...tandardchrome full support 13edge full support ≤79firefox no support noie no support noopera full support 15safari full support
6webview android full support ≤37chrome android full support 18firefox android no support noopera android full support 14safari ios full support
6samsung internet android ...
HTMLAnchorElement - Web APIs
this interface corresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) <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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlanchorelemen...
...t" target="_top"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#fff" 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><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="1
60" height="50" fill="#f4f7f8" 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...
HTMLBRElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="_t...
...op"><rect x="3
61" y="
65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="42
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlbuttonelemen...
...t" target="_top"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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.
HTMLDListElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmldatalistelem...
...ent" target="_top"><rect x="301" y="
65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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 contained option elements.
HTMLDivElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" 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.
HTMLEmbedElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlfieldsetelem...
...ent" target="_top"><rect x="301" y="
65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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" t...
...arget="_top"><rect x="3
61" y="
65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="42
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
the htmlheadingelement interface represents the different heading elements, <h1> through <h
6>.
... <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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="2...
...5" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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><polylin...
...e 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="43
6" 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=...
HTMLHtmlElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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.
HTMLImageElement.alt - Web APIs
<div class="container"> <div class="left-margin"> <img src="/files/1
68
61/margin-flourish.svg" alt=""> </div> <div class="contents"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
... 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: 1
6px arial,helvetica,sans-serif; } .left-margin { background-color: rgb(241, 240, 237, 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;...
... <div class="container"> <img src="https://udn.realityripple.com/samples/87/eace
6b7d
6a.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: 1
6px 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 - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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,2...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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" t...
...arget="_top"><rect x="3
61" y="
65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="42
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmllegendelemen...
...t" target="_top"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" 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.
HTMLMarqueeElement - 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/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" 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">htmlmarqueeelement</text></...
...the default value is
6.
...note that any value smaller than
60 is ignored and the value
60 is used instead, unless truespeed is true.
... htmlmarqueeelement.truespeed by default, scrolldelay values lower than
60 are ignored.
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; 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="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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) { ...
HTMLMenuElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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 specifications specification status comment html living standardthe definition of 'htmlmenuelement' in that specification.
HTMLMenuItemElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlmenuitemelem...
...ent" target="_top"><rect x="301" y="
65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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 specifications specification status comment html 5.1the definition of 'htmlmenuitemelement' in that specification.
HTMLMetaElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlobjectelemen...
...t" target="_top"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmloptgroupelem...
...ent" target="_top"><rect x="301" y="
65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmloptionelemen...
...t" target="_top"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmloutputelemen...
...t" target="_top"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlparagraphele...
...ment" target="_top"><rect x="291" y="
65" width="200" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" s...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlpictureeleme...
...nt" target="_top"><rect x="311" y="
65" width="180" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlprogresselem...
...ent" target="_top"><rect x="301" y="
65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlscriptelemen...
...t" target="_top"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlselectelemen...
...t" target="_top"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="mi...
...ddle">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="43
6" 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="_t...
...op"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlsourceelemen...
...t" target="_top"><rect x="321" y="
65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmltablecaption...
...element" target="_top"><rect x="2
61" y="
65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="37
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmltablecellele...
...ment" target="_top"><rect x="291" y="
65" width="200" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmltablecolelem...
...ent" target="_top"><rect x="301" y="
65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmltablerowelem...
...ent" target="_top"><rect x="301" y="
65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmltablesection...
...element" target="_top"><rect x="2
61" y="
65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="37
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="middl...
...e">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="43
6" 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="_to...
...p"><rect x="301" y="
65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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 ...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmltextareaelem...
...ent" target="_top"><rect x="301" y="
65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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 - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="41
6" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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/htmlunknowneleme...
...nt" target="_top"><rect x="311" y="
65" width="180" height="50" fill="#f4f7f8" 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
<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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="43
6" 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="1
60" height="50" fill="#fff" 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><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="1
60" height="50" fill="#f4f7f8" 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...
MediaDevices.ondevicechange - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="1
60" height="120" autoplay></video><br> <div class="left"> <h2>audio devices:</h2> <ul class="devicelist" id="audiolist"></ul> </div> <div class="right"> <h2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </div> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { c...
...ursor: pointer; width: 1
60px; border: 1px solid black; font-size: 1
6px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; margin-right: 2% } .right { float:right; width: 48%; margin-left: 2% } .devicelist { border: 1px solid black; list-style-type: none; margin-top: 2px; padding:
6px; } javascript content other code below is other code which, while needed to make this example work, isn'tt related directly to ondevicechange, so we won't go into any detail.
... let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 1
60, height: 120, framerate: 30 }, audio: { samplerate: 44100, samplesize: 1
6, volume: 0.25 } }).then(stream => { videoelement.srcobject = stream; updatedevicelist(); }) .catch(err => log(err.name + ": " + err.message)); }, false); we set up global variables that contain references to the <ul> elements that are used to list the audio and video devices: let audiolist = document.getelementbyid("audiolist"); let videolist...
...this uses destructuring assignment (a new feature of ecmascript
6) to assign the values of the first three items in the array returned by string.match() to the variables kind, type, and direction.
Transcoding assets for Media Source Extensions - Web APIs
currently, mp4 containers with h.2
64 video and aac audio codecs have support across all modern browsers, while others don't.
... because the audio codec in the mov container is already aac and the video codec is h.2
64, we can instruct ffmpeg not to perform transcoding.
... 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=
640x3
60 encoding bitrate: 500, resolution: 25
6x144 encoding bitrate: 875, resolution: 384x21
6 encoding bitrate: 1250, resolution: 480x270 encoding bitrate: 1
625, resolution: 5
60x31
6 encoding bitrate: 2000, resolution:
640x3
60 $ python mp4-dash.py video_0* parsing media file 1: video_00500.mp4 parsing media file 2: video_00875.mp4 parsing media file 3: video_01250.mp4 parsing media file 4: video_01...
...
625.mp4 parsing media file 5: video_02000.mp4 splitting media file (audio) video_00500.mp4 splitting media file (video) video_00500.mp4 splitting media file (video) video_00875.mp4 splitting media file (video) video_01250.mp4 splitting media file (video) video_01
625.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.
Navigator - Web APIs
20181001000000 in firefox
64 onwards.
... navigator.productsub returns the build number of the current browser (e.g., "200
60909").
... navigator.vendor returns the vendor name of the current browser (e.g., "netscape
6").
..."
6.1").
PaymentResponse.complete() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcomplete()chrome full support
61edge full support 15firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support 5
6 full support 5
6 no support 53 — 5
6disabled disabled from version 53 until version 5
6 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android no support nosafari ios full support yessamsung internet android full support
6.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.details - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdetailschrome full support
61edge full support 15firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support 5
6 full support 5
6 no support 53 — 5
6disabled disabled from version 53 until version 5
6 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android no support nosafari ios full support yessamsung internet android full support
6.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.payerEmail - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayeremailchrome full support
61edge full support 15firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support 5
6 full support 5
6 no support 53 — 5
6disabled disabled from version 53 until version 5
6 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android no support nosafari ios full support yessamsung internet android full support
6.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.
PublicKeyCredentialCreationOptions - Web APIs
examples // some examples of cose algorithms const cose_alg_ecdsa_w_sha25
6 = -7; const cose_alg_ecdsa_w_sha512 = -3
6; 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 uint8arra...
...y(2
6), // user user: { id: new uint8array(1
6), name: "john.p.smith@example.com", displayname: "john p.
... smith", }, // requested format of new keypair pubkeycredparams: [{ type: "public-key", alg: cose_alg_ecdsa_w_sha25
6, }], // timeout after 1 minute timeout:
60000, // do not send the authenticator's origin attestation attestation: "none", extensions: { uvm: true, exts: true }, // filter out authenticators which are bound to the device authenticatorselection:{ authenticatorattachment: "cross-platform", requireresidentkey: true, userverification: "preferred" }, // exclude already existing credentials for the user excludecredentials: [ { type: "public-key", // the id fo...
...r john.doe@example.com id : new uint8array(2
6) /* this actually is given by the server */ }, { type: "public-key", // the id for john-doe@example.com id : new uint8array(2
6) /* another id */ } ] } }; // create the new credential with the options above navigator.credentials.create(createcredentialoptions) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; var clientextensionsoutputs = newcredentialinfo.getclientextensionsresults(); // send the response to the relying party server // it will verify the content and integrity before // creating a new credential }).catch(function (err) { // deal with any error properly console.error...
PushSubscription.getKey() - Web APIs
the value can be: p25
6dh: an elliptic curve diffie–hellman public key on the p-25
6 curve (that is, the nist secp25
6r1 elliptic curve).
... the resulting key is an uncompressed point in ansi x9.
62 format.
...allow the user to enable push return; } // set your ui to show they have subscribed for // push messages subbtn.textcontent = 'unsubscribe from push messaging'; ispushenabled = true; // initialize status, which includes setting ui elements for subscribed status // and updating subscribers list via push var endpoint = subscription.endpoint; var key = subscription.getkey('p25
6dh'); var auth = subscription.getkey('auth'); ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkey()chrome full support 42edge full support 1
6firefox 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...
SVGAnimateElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38
6" 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="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="1
66" 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 its parent, svganimationelement.
SVGAnimateMotionElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="mid...
...anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38
6" 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/svganimatemotionelement" target="_top"><rect x="21" y="
65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="13
6" 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, svganimationelement.
SVGAnimateTransformElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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-baselin...
...anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38
6" 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/svganimatetransformelement" target="_top"><rect x="-9" y="
65" width="2
60" height="50" fill="#f4f7f8" 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, svganimationelement.
SVGCircleElement - Web APIs
ine-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="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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=...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" 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="171" 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="1
60" height="50" fill="#f4f7f8" 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">svgcircleeleme...
SVGDefsElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" x...
...2="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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svgdefselement" target="_top"><rect x="121" y="
65" width="140" height="50" fill="#f4f7f8" 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 parent, svggraphicselement.
SVGFECompositeElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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"...
...chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="271" y="
65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="37
6" 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_arithmetic
6 corresponds to arithmetic value.
SVGFEFuncAElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="30
6" 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" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncaelement" target="_top"><rect x="-79" y="
65" width="170" height="50" fill="#f4f7f8" 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 properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEFuncBElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="30
6" 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" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncbelement" target="_top"><rect x="-79" y="
65" width="170" height="50" fill="#f4f7f8" 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 properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEFuncGElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="30
6" 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" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncgelement" target="_top"><rect x="-79" y="
65" width="170" height="50" fill="#f4f7f8" 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 properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEFuncRElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="30
6" 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" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncrelement" target="_top"><rect x="-79" y="
65" width="170" height="50" fill="#f4f7f8" 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 properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGForeignObjectElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svgforeignobjectelement" target="_top"><rect x="31" y="
65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="14
6" 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 implements properties from svgurireference.
SVGGElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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><...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svggelement" target="_top"><rect x="151" y="
65" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="20
6" 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 parent interface, svggraphicselement.
SVGGeometryElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="
65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="171" 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 originally part of the svgpathelement interface.
SVGImageElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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</te...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="
65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="18
6" 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.
SVGLineElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" 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="171" 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" height="50" fill="#f4f7f8" 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</t...
SVGLinearGradientElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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"/><lin...
...e 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="m...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="
65" width="240" height="50" fill="#f4f7f8" 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.
SVGPathElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" x...
...2="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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" 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="171" 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" height="50" fill="#f4f7f8" 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</t...
SVGPathSeg - Web APIs
nsigned short pathsegtype domstring 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 pat...
...hseg_curveto_cubic_smooth_abs = 1
6 pathseg_curveto_cubic_smooth_rel = 17 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_abs
6 corresponds to an "absolute cubic bézier curveto" (c) path data command.
... pathseg_curveto_cubic_smooth_abs 1
6 corresponds to an "absolute smooth cubic curveto" (s) path data command.
SVGPolygonElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" 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="171" 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="170" height="50" fill="#f4f7f8" 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">svgpolygonele...
SVGPolylineElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" 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="171" 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="#f4f7f8" 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">svgpolylinee...
SVGRadialGradientElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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"/><lin...
...e 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="m...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svgradialgradientelement" target="_top"><rect x="21" y="
65" width="240" height="50" fill="#f4f7f8" 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.
SVGSVGElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svgsvgelement" target="_top"><rect x="131" y="
65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="19
6" 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 implements the ones from svgzoomandpan, svgfittoviewbox, and windoweventhandlers.
SVGSetElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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><...
...anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38
6" 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/svgsetelement" target="_top"><rect x="121" y="
65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="18
6" 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 parent interface, svganimationelement.
SVGSwitchElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="2...
...5" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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</...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svgswitchelement" target="_top"><rect x="101" y="
65" width="1
60" height="50" fill="#f4f7f8" 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 its parent interface, svggraphicselement.
SVGTextContentElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svgtextcontentelement" target="_top"><rect x="51" y="
65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="15
6" 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 other value.
SVGTextPathElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" y...
...1="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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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">eleme...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svgtextcontentelement" target="_top"><rect x="51" y="
65" width="210" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="15
6" y="94" font-size="12px" 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="-1
69" y="
65" width="180" height="50" fill="#f4f7f8" 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">svgtex...
SVGTextPositioningElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svgtextcontentelement" target="_top"><rect x="51" y="
65" width="210" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="15
6" y="94" font-size="12px" 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/svgtextpositioningelement" target="_top"><rect x="-239" y="
65" width="250" height="50" fill="#f4f7f8" 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...
SVGUseElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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"/><li...
...ne 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#fff" 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><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="2
61" y2="89" stroke="#d4dde4"/><...
...a xlink:href="/docs/web/api/svguseelement" target="_top"><rect x="131" y="
65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="19
6" 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 implements properties from svgurireference.
ScriptProcessorNode.bufferSize - Web APIs
its value can be a power of 2 value in the range 25
6–1
6384.
... syntax var audioctx = new audiocontext(); var scriptnode = audioctx.createscriptprocessor(409
6, 1, 1); console.log(scriptnode.buffersize); value an integer.
... example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 409
6 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(409
6, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; ...
...ains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(channel); // loop through the 409
6 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode...
ScriptProcessorNode - Web APIs
the buffer size must be a power of 2 between 25
6 and 1
6384, that is 25
6, 512, 1024, 2048, 409
6, 8192 or 1
6384.
...its value can be a power of 2 value in the range 25
6–1
6384.
... example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 409
6 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(409
6, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; ...
...ains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(channel); // loop through the 409
6 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode...
SubtleCrypto.deriveKey() - Web APIs
ecdh is specified in rfc
6090.
... hkdf is specified in rfc 58
69.
... /* derive an aes key, given: - our ecdh private key - their ecdh public key */ function derivesecretkey(privatekey, publickey) { return window.crypto.subtle.derivekey( { name: "ecdh", public: publickey }, privatekey, { name: "aes-gcm", length: 25
6 }, false, ["encrypt", "decrypt"] ); } async function agreesharedsecretkey() { // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely let aliceskeypair = await window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false,...
... new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), "pbkdf2", false, ["derivebits", "derivekey"] ); } async function encrypt(plaintext, salt, iv) { let keymaterial = await getkeymaterial(); let key = await window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-25
6" }, keymaterial, { "name": "aes-gcm", "length": 25
6}, true, [ "encrypt", "decrypt" ] ); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, plaintext ); } specifications specification status comment web cryptography apithe definition of 'subtlecrypto.derivekey()' in that specification.
WEBGL_compressed_texture_astc - Web APIs
constants blocks bits per pixel arraybuffer bytelength bytes if height and width are 512 ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr 4x4 8.00 floor((width + 3) / 4) * floor((height + 3) / 4) * 1
6 2
62144 ext.compressed_rgba_astc_5x4_khr ext.compressed_srgb8_alpha8_astc_5x4_khr 5x4
6.40 floor((width + 4) / 5) * floor((height + 3) / 4) * 1
6 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) * 1
6 1
69744 ext.compressed_rgba_astc_
6x5_khr ext...
....compressed_srgb8_alpha8_astc_
6x5_khr
6x5 4.27 floor((width + 5) /
6) * floor((height + 4) / 5) * 1
6 141728 ext.compressed_rgba_astc_
6x
6_khr ext.compressed_srgb8_alpha8_astc_
6x
6_khr
6x
6 3.5
6 floor((width + 5) /
6) * floor((height + 5) /
6) * 1
6 11833
6 ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr 8x5 3.20 floor((width + 7) / 8) * floor((height + 4) / 5) * 1
6 105472 ext.compressed_rgba_astc_8x
6_khr ext.compressed_srgb8_alpha8_astc_8x
6_khr 8x
6 2.
67 floor((width + 7) / 8) * floor((height + 5) /
6) * 1
6 880
64 ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr 8x8 2.00 floor((width + 7) / 8) * floor((height + 7) / 8) * 1
6 6553
6 ...
... ext.compressed_rgba_astc_10x5_khr ext.compressed_srgb8_alpha8_astc_10x5_khr 10x5 2.5
6 floor((width + 9) / 10) * floor((height + 4) / 5) * 1
6 85
69
6 ext.compressed_rgba_astc_10x
6_khr ext.compressed_srgb8_alpha8_astc_10x
6_khr 10x
6 2.13 floor((width + 9) / 10) * floor((height + 5) /
6) * 1
6 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) * 1
6 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) * 1
6 432
64 ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr 12x10 1.07 ...
... floor((width + 11) / 12) * floor((height + 9) / 10) * 1
6 3577
6 ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr 12x12 0.89 floor((width + 11) / 12) * floor((height + 11) / 12) * 1
6 29584 examples var ext = gl.getextension('webgl_compressed_texture_astc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_astc_12x12_khr, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification.
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 17ms, or roughly
60fps – frames per second).
...here to <strong>[verb goes here]</strong> the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.
6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
...var size = [
60,
60], velocity = 3.0; function drawanimation () { gl.scissor(position[0], position[1], size[0] , size[1]); gl.clear(gl.color_buffer_bit); // every frame the vertical position of the square is // decreased, to create the illusion of movement.
... 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.getcontext("webgl") ||...
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
thus a matrix that looks like this: [a1a5a9a13a2a
6a10a14a3a7a11a15a4a8a12a1
6]\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_{1
6} \end{matrix} \right ] is represented in array form like this: let matrixarray = [a1, a2, a3, a4, a5, a
6, a7, a8, a9, a10, a11, a12, a13, a14, a15, a1
6]; in this array, the leftmost column cont...
... recall that the circumference of a circle is 2π⋅r radians (3
60°); as such, this is the theoretical maximum fov.
...human eyes typically have a horizontal field of view of around 135° (about 2.35
6 radians) and a vertical fov of about 180° (π or around 3.142 radians).
... for example, consider a device which uses a 25
60x1440 pixel frame buffer.
Geometry and reference spaces in WebXR - Web APIs
this means that the time will usually step in 1/
60th of a second intervals, assuming a
60 fps frame rate.
... doing the math, we find that this means that each frame will ideally be rendered 1
6.
6667 milliseconds apart.
... for devices with six degrees of freedom (
6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.
... while you can use webxr for everything from augmenting the world with annotations to 3
60° video playback to scientific simulations to virtual reality training systems or anything else you can imagine, let's take a 3d video game as an example of a typical webxr application.
Obsolete features - Web APIs
supported in gecko up to 1.9.2 and in ie up to
6.
... fullscreen this feature no longer works in msie
6 sp2 the way it worked in msie 5.x.
... fullscreen does not really work in msie
6 sp2.
... personalbar obsolete since gecko 7
6 if this feature is on, then the new secondary window renders the personal toolbar in netscape
6.x, netscape 7.x and mozilla browser.
Sending and Receiving Binary Data - Web APIs
function load_binary_resource(url) { var req = new xmlhttprequest(); req.open('get', url, false); //xhr binary charset opt by marcus granado 200
6 [http://mgran.blogspot.com] req.overridemimetype('text\/plain; charset=x-user-defined'); req.send(null); if (req.status != 200) return ''; return req.responsetext; } the magic happens in line 5, which overrides the mime type, forcing the browser to treat it as plain text, using a user-defined character set.
... var myarray = new arraybuffer(512); var longint8view = new uint8array(myarray); // generate some data for (var i=0; i< longint8view.length; i++) { longint8view[i] = i % 25
6; } var xhr = new xmlhttprequest; xhr.open("post", url, false); xhr.send(myarray); this is building a 512-byte array of 8-bit integers and sending it; you can use any binary data you'd like, of course.
... note: support for sending arraybuffer objects using xmlhttprequest was added to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.
6).
...var stream = components.classes["@mozilla.org/network/file-input-stream;1"] .createinstance(components.interfaces.nsifileinputstream); stream.init(file, 0x04 | 0x08, 0
644, 0x04); // file is an nsifile instance // try to determine the mime type of the file var mimetype = "text\/plain"; try { var mimeservice = components.classes["@mozilla.org/mime;1"] .getservice(components.interfaces.nsimimeservice); mimetype = mimeservice.gettypefromfile(file); // file is an nsifile instance } catch (oevent) { /* eat it; just use text/plain */ } // send var req =...
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
for example, consider a device which uses a 25
60x1440 pixel frame buffer (which is used to render two views, for the left and right eyes, side by side each at a resolution of 1280x1440 pixels).
... 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
640x720 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
640x720 portion of the buffer with the viewport's x and y at 0, the width at
640, and the height set to 720.
... the right eye gets the other half of the frame buffer, with its viewport's x set at
639.
XSL Transformations in Mozilla FAQ - Web APIs
see the discussion on bug #338
621 for more information.
...sadly, current builds don't error, but just give unexpected results, like crashes (bug 2027
65).
... ie up to version
6 required a deprecated namespace of a xslt working draft, please update to mozilla ;-), ie
6+ or msxml3+, as it is fixed there.
... original document information author(s): axel hecht last updated date: february 2, 2005 copyright information: portions of this content are © 1998–200
6 by individual mozilla.org contributors; content available under a creative commons license ...
ARIA: cell role - Accessibility
<div role="row"> <span role="cell">france</span> <span role="cell">
67 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">
67 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.
...er" aria-sort="none" aria-rowindex="1">aria role</span> <span role="columnheader" aria-sort="none" aria-rowindex="1">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell" aria-rowindex="11">header</span> <span role="cell" aria-rowindex="11">h1</span> </div> <div role="row"> <span role="cell" aria-rowindex="1
6">header</span> <span role="cell" aria-rowindex="1
6">h
6</span> </div> <div role="row"> <span role="cell" aria-rowindex="18">rowgroup</span> <span role="cell" aria-rowindex="18">thead</span> </div> <div role="row"> <span role="cell" aria-rowindex="24">term</span> <span role="cell" aria-rowindex="24">dt</span> </div> </div> </div> the above is a ...
...ria-sort="none" aria-rowindex="1">aria role</th> <th role="columnheader" aria-sort="none" aria-rowindex="1">semantic element</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <td role="cell" aria-rowindex="11">header</td> <td role="cell" aria-rowindex="11">h1</td> </tr> <tr role="row"> <td role="cell" aria-rowindex="1
6">header</td> <td role="cell" aria-rowindex="1
6">h
6</td> </tr> <tr role="row"> <td role="cell" aria-rowindex="18">rowgroup</td> <td role="cell" aria-rowindex="18">thead</td> </tr> <tr role="row"> <td role="cell" aria-rowindex="24">term</td> <td role="cell" aria-rowindex="24">dt</td> </tr> </tbody> </table> above is the semantic way o...
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">
67 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, in a table with 15 columns, and columns 4, 5, and
6 are in the dom, aria-colindex="4" could be set on every row.
...iv> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="row" aria-rowindex="1
6"> <span role="cell">header</span> <span role="cell">h
6</span> </div> <div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </div> <div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </div> </div> </div> the above is a non-semantic aria table with f...
...e="rowgroup"> <tr role="row"> <th role="columnheader" aria-sort="none">aria role</th> <th role="columnheader" aria-sort="none">semantic element</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row" aria-rowindex="11"> <td role="cell">header</td> <td role="cell">h1</td> </tr> <tr role="row" aria-rowindex="1
6"> <td role="cell">header</td> <td role="cell">h
6</td> </tr> <tr role="row" aria-rowindex="18"> <td role="cell">rowgroup</td> <td role="cell">thead</td> </tr> <tr role="row" aria-rowindex="24"> <td role="cell">term</td> <td role="cell">dt</td> </tr> </tbody> </table> above is the semantic way of writing a table.
Color contrast - Accessibility
examples let's have a look at some simple html and css code: <div class="good">good contrast</div> <div class="bad">bad contrast</div> div { /* general div styles here */ } .good { background-color: #fae
6fa; } .bad { background-color: #4000
64; } both pieces of text have their default black color.
... the "good" <div> has a light purple background, which makes the text easy to read: example1 <div class="good"> good contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .good { background-color: #fae
6fa; } the "bad" <div> on the other hand has a very dark purple background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #4000
64; } solution wh...
...make the color contrast as good as it can be within your design constraints — ideally go for the aaa rating (see 1.4.
6 below), but at least meet the aa rating (see 1.4.3 below).
... 1.4.
6 enhanced contrast (aaa) this follows, and builds on, criterion 1.4.3.
Perceivable - Accessibility
1.2.
6 provide sign language equivalent to prerecorded audio (aaa) an equivalent sign language video should be provided for any prerecorded content containing audio.
... understanding identify input purpose 1.3.
6 identify purpose (aaa) added in 2.1 in content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically determined.
... 1.4.
6 enhanced contrast (aaa) this follows, and builds on, criterion 1.4.3.
... non-text contrast 1.4.12 text spacing (aa) added in 2.1 no loss of content or functionality occurs when the following styles are applied: line height (line spacing) to at least 1.5 times the font size spacing following paragraphs to at least 2 times the font size letter spacing (tracking) to at least 0.12 times the font size word spacing to at least 0.1
6 times the font size understanding text spacing 1.4.13 content on hover or focus (aa) added in 2.1 while additional content may appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met: dismissable (can be closed/removed) hoverable (the additional content does not disappear wh...
-moz-image-rect - CSS: Cascading Style Sheets
the container looks like this: #container { width:2
67px; height:272px; top:100px; left:100px; position:absolute; font-size:1
6px; text-shadow:white 0px 0px
6px; text-align:center; } then the four boxes defining the segments of the image are defined.
... #box1 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); width:133px; height:13
6px; position:absolute; } this is the top-left corner of the image.
... #box2 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%); width:133px; height:13
6px; position:absolute; } this defines the top-right corner of the image.
... the other corners follow a similar pattern: #box3 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); width:133px; height:13
6px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); width:133px; height:13
6px; position:absolute; } html the html is quite simple: <div id="container" onclick="rotate()"> <div id="box1" style="left:0px;top:0px;">top left</div> <div id="box2" style="left:133px;top:0px;">top right</div> <div id="box3" style="left:0px;top:13
6px;">bottom left</div> <div id="box4" style="left:133px;top:13
6px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box g...
:nth-child() - CSS: Cascading Style Sheets
even represents elements whose numeric position in a series of siblings is even: 2, 4,
6, etc.
... tr:nth-child(even) or tr:nth-child(2n) represents the even rows of an html table: 2, 4,
6, 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 a child, but it isn't selected because it isn't a <code><span></code>.</p> <div class="second"> <span>span!</span> <span>span</span> <em>this is an `e...
...m`.</em> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> </div> <br> <h3><code>span:nth-of-type(2n+1)</code>, with an <code><em></code> among the child elements.</h3> <p>children 1, 4,
6, and 8 are selected.<br> 3 isn't used in the counting or selected because it is an <code><em></code>, not a <code><span></code>, and <code>nth-of-type</code> only selects children of that type.
@font-face - CSS: Cascading Style Sheets
since firefox
61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%; font-style a font-style value.
... since firefox
61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg; font-weight a font-weight value.
... since firefox
61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400; font-variant a font-variant value.
...ustom-ident>+ examples specifying a downloadable font this example simply specifies a downloadable font to use, applying it to the entire body of the document: view the live example <html> <head> <title>web font sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "bitstream vera serif bold"; src: url("https://mdn.mozillademos.org/files/24
68/verasebd.ttf"); } body { font-family: "bitstream vera serif bold", serif } </style> </head> <body> this is bitstream vera serif bold.
size - CSS: Cascading Style Sheets
syntax /* keyword values for scalable size */ size: auto; size: portrait; size: landscape; /* <length> values */ /* 1 value: height = width */ size:
6in; /* 2 values: width then height */ size: 4in
6in; /* keyword values for absolute size */ size: a4; size: b5; size: jis-b4; size: letter; /* mixing size and orientation */ size: a4 portrait; values auto the user agent decides the size of the page.
... b5 this matches the standard, iso dimensions: 17
6mm x 250mm.
... jis-b4 this correspond to the jis standard dimensions: 257mm x 3
64mm.
... formal definition related at-rule@pageinitial valueautocomputed valueas specified, but with relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in
6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications specification status comment css paged media module level 3the definition of 'size' in that specification.
Resizing background images with background-size - CSS: Cascading Style Sheets
html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e9
6634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background.
... here we scale a 32x32 pixel favicon to 300x300 pixels: .square2 { background-image: url(favicon.png); background-size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 1
6px; } as you can see, the css is actually essentially identical, save the name of the image file.
... html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e9
6634f92.png); background-size: contain; width: 1
60px; height: 1
60px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
... html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e9
6634f92.png); background-size: cover; width: 1
60px; height: 1
60px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
in the next example i have ten items all with a flex-basis of 1
60px and the ability to grow and shrink.
... once the first row gets to a point where there is not enough space to place another 1
60 pixel item, a new flex line is created for the items and so on until all of the items are placed.
... as the items can grow, they will expand larger than 1
60 px in order to fill each row completely.
...the following live sample uses css grid layout to create a layout that has as many columns of at least 1
60 pixels as will fit, distributing the extra space between all columns.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; 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-self...
...to create gaps between the cards, i use a margin on the items, and then a negative margin on the container: * {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; max-width:
600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333...
...the layout now works, even if there is more content in one of the cards, than the others: * {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; max-width:
600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333...
...i have used the vertical-align property on my item when in the inline-block display mode, but this property does not apply to grid items and, therefore, is ignored once the item becomes a grid item: * {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; max-width:
600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width:...
<angle> - CSS: Cascading Style Sheets
one full circle is 3
60deg.
...one full circle is 2π radians which approximates to
6.2832rad.
...examples: 0rad, 1.0708rad,
6.2832rad.
... examples setting a clockwise right angle 90deg = 100grad = 0.25turn ≈ 1.5708rad setting a flat angle 180deg = 200grad = 0.5turn ≈ 3.141
6rad setting a counterclockwise right angle -90deg = -100grad = -0.25turn ≈ -1.5708rad 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.
backface-visibility - CSS: Cascading Style Sheets
le;</code></th> <th><code>backface-visibility: hidden;</code></th> </tr> <tr> <td> <div class="container"> <div class="cube showbf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> <p> since all faces are partially transparent, the back faces (2, 4, 5) are visible through the front faces (1, 3,
6).
... </p> </td> <td> <div class="container"> <div class="cube hidebf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </div> </div> <p> the three back faces (2, 4, 5) are hidden.
...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 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(19
6, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, ...
...19
6, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(19
6, 19
6, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(19
6, 0, 19
6, 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 comment css transforms level 2the definition of 'backface-visibility' in that specification.
break-after - CSS: Cascading Style Sheets
pport in paged media desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in paged mediachrome full support 50edge full support 12firefox full support
65ie full support 10opera full support 37 full support 37 no support 11.1 — 12.1safari full support 10webview android full support 50chrome android ...
... full support 50firefox android full support
65opera android full support 37 full support 37 no support 11.1 — 12.1safari ios full support 10samsung internet android full support 5.0alwayschrome no support noedge no support 12 — 79firefox no support noie full support 10opera no support 11.1 — 12.1safari ...
... nosafari ios no support nosamsung internet android no support nopage and avoid-pagechrome full support 50edge full support 12firefox full support
65ie full support 10opera no support 11.1 — 12.1safari full support 10webview android full support 50chrome android full support 50firefox android full support ...
...
65opera android full support 37safari ios full support 10samsung internet android full support 5.0recto and versochrome no support noedge no support nofirefox no support noie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox an...
content - CSS: Cascading Style Sheets
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e
664
65, #9198e5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(val...
...</p> <h1>
6</h1> <p>according to the mozilla manifesto, <q cite="http://www.mozilla.org/about/manifesto/">individuals must have the ability to shape the internet and their own experiences on the internet.</q> therefore, we can infer that contributing to the open web can protect our own individual experiences on it.
...zilla home page</a></li> <li><a id="mdn" href="https://developer.mozilla.org/"> mozilla developer network</a></li> </ul> css a { text-decoration: none; border-bottom: 3px dotted navy; } a::after { content: " (" attr(id) ")"; } #moz::before { content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); } #mdn::before { content: url("https://mdn.mozillademos.org/files/7
691/mdn-favicon1
6.png"); } li { margin: 1em; } result element replacement this example replaces an element's content with an image.
... html <div id="replaced">mozilla</div> css #replaced { content: url("https://mdn.mozillademos.org/files/12
668/mdn.svg"); } #replaced::after { /* will not show if element replacement is supported */ content: " (" attr(id) ")"; } result specifications specification status comment css generated content module level 3the definition of 'content' in that specification.
image-orientation - CSS: Cascading Style Sheets
the flip and <angle> values were made obsolete in firefox
63.
...obsolete since gecko
63 */ image-orientation: 90deg; /* rotate 90deg */ image-orientation: 90deg flip; /* rotate 90deg, and flip it horizontally */ image-orientation: flip; /* no rotation, only applies a horizontal flip */ syntax values none default initial value.
... <angle> obsolete since gecko
63 the <angle> of rotation to apply to the image.
... flip obsolete since gecko
63 the image is flipped horizontally (i.e., reflected) after the rotation given by the <angle> value is applied.
image() - CSS: Cascading Style Sheets
the syntax looks like so: background-image: image('myimage.webp#xywh=0,20,40,
60'); the background image of the element will be the portion of the image myimage.webp that starts at the coordinate 0px, 20px (the top left hand corner) and is 40px wide and
60px tall.
...the spacial dimension definition in the media specification indicates that percentages will be supported as well: xywh=1
60,120,320,240 /* results in a 320x240 image at x=1
60 and y=120 */ xywh=pixel:1
60,120,320,240 /* results in a 320x240 image at x=1
60 and y=120 */ xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ the image fragments can be used in url() notation as well.
... examples directionally-sensitive images <ul> <li dir="ltr">bullet is a right facing arrow on the left</li> <li dir="rtl">bullet is the same arrow, flipped to point left.</li> </ul> ul { list-style-image: image(ltr 'https://mdn.mozillademos.org/files/1
6412/rightarrow.png'); } in the left-to-right list items — those with dir="ltr" set on the element itself or inheriting the directionality from an ancestor or default value for the page — the image will be used as-is.
...what cursor do you see?</div> .box:hover { cursor: image("https://mdn.mozillademos.org/files/1
6411/sprite.png#xywh=32,
64,1
6,1
6"); } when the user hovers over the box, the cursor will change to display the 1
6x1
6 px section of the sprite image, starting at x=32 and y=
64.
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 2
60,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 box and proceeds in the direction defined by the specified angle similar to the css ...
... <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="377" fill="blue" /> <polygon points="50
6,423 900,190 1294,423" fill="yellow" /> <polygon points="993,245 993,190 108
6,190 108
6,300" fill="red" /> <path id="house" d="m900,190 l993,245 v201 a11,11 0 0,1 1004,190 h1075 a11,11 0 0,1 108
6,201 v300 l1294,423 h121
6 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,800 h
60
6 a11,11 0 0,1 595,789 v434 a11,...
...11 0 0,0 584,423 h50
6 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="forestgr...
...een" 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 h1075 a11,11 0 0,1 108
6,201 v300 l1294,423 h121
6 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,800 h
60
6 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h50
6 l900,190'); animation: followpath 4s linear infinite; } @keyframes followpath { to { motion-offset: 100%; offset-distance: 100%; } } result specifications <body> specification status comment motion path module level 1the definition of 'offset-path' in that specification.
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 1
6</li> <li>item 17</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/hil...
...ite.js'); li { --boxcolor: hsla(55, 90%,
60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%,
60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%,
60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
... 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
65...
...chrome android full support
65firefox android no support noopera android full support 47safari 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 ...
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(17px); 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: transl...
...nsform-list> = <transform-function>+where <transform-function> = <matrix()> | <translate()> | <translatex()> | <translatey()> | <scale()> | <scalex()> | <scaley()> | <rotate()> | <skew()> | <skewx()> | <skewy()> | <matrix3d()> | <translate3d()> | <translatez()> | <scale3d()> | <scalez()> | <rotate3d()> | <rotatex()> | <rotatey()> | <rotatez()> | <perspective()>where <matrix()> = matrix( <number>#{
6} )<translate()> = translate( <length-percentage> , <length-percentage>?
...)<skewx()> = skewx( [ <angle> | <zero> ] )<skewy()> = skewy( [ <angle> | <zero> ] )<matrix3d()> = matrix3d( <number>#{1
6} )<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )<translatez()> = translatez( <length> )<scale3d()> = scale3d( <number> , <number> , <number> )<scalez()> = scalez( <number> )<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )<rotatex()> = rotatex( [ <angle> | <zero> ] )<rotatey()> = rotatey( [ <angle> | <zero> ] )<rotatez()> = rot...
...atez( [ <angle> | <zero> ] )<perspective()> = perspective( <length> )where <length-percentage> = <length> | <percentage> examples translating and rotating an element html <div>transformed element</div> css div { border: solid red; transform: translate(30px, 20px) rotate(20deg); width: 140px; height:
60px; } result more examples please see using css transforms and <transform-function> for more examples.
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="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd
6da9c
65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/
6f/08
625b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="270"></canvas> javascript this code handles altering the frames.
... var processor = { timercallback: function() { if (this.video.paused || this.video.ended) { return; } this.computeframe(); var self = this; settimeout(function () { self.timercallback(); }, 1
6); // roughly
60 frames per second }, doload: function() { this.video = document.getelementbyid("my-video"); this.c1 = document.getelementbyid("my-canvas"); this.ctx1 = this.c1.getcontext("2d"); var self = this; this.video.addeventlistener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this...
... html <video id="my-video" controls src="https://udn.realityripple.com/samples/
6f/08
625b424a.m4v"> </video> javascript var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd
6da9c
65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/
6f/08
625b424a.m4v" type="video/mp4"> </video> <div class=...
...elementbyid("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="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd
6da9c
65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/
6f/08
625b424a.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"> filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textar...
<a>: The Anchor element - HTML: Hypertext Markup Language
linking to an email address to create links that open in the user's email program to let them send a new message, use the mailto: scheme: <a href="mailto:nowhere@mozilla.org">send email to nowhere</a> for details about mailto: urls, such as including a subject or body, see email links or rfc
60
68.
... linking to telephone numbers <a href="tel:+49.157.015
6">+49 157 015
6</a> <a href="tel:+1(555)5309">(555) 5309</a> tel: link behavior varies with device capabilities: cellular devices autodial the number.
... see rfc 39
66 for syntax, additional features, and other details about the tel: url scheme.
... <a href="" download="my_painting.png">download my painting</a> </p> <canvas width="300" height="300"></canvas> css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #
69c; color: #fff; padding: 5px 10px; } javascript var canvas = document.queryselector('canvas'), c = canvas.getcontext('2d'); c.fillstyle = 'hotpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlistener('mousemove', event => draw(event.offsetx, event.offsety) ); canvas.addeventlis...
<button>: The Button element - HTML: Hypertext Markup Language
setting autocomplete="off" on the button disables this feature; see bug
654072.
... example <button name="favorite"> <svg aria-hidden="true" viewbox="0 0 10 10"><path d="m7 9l5 8 3 9v
6l1 4h3l1-3 1 3h3l7
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.
...(large text is defined as 18.
66px and bold or larger, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 clicking and focus whether clicking on a <button> causes it to (by default) become focused varies by browser and os.
... desktop browsers windows 8.1 os x 10.x firefox yes - firefox 30.0 no (even with a tabindex) firefox
63 chrome yes - chrome 35 yes - chrome
65 safari n/a no (even with a tabindex) safari 12 (bug 222
61) internet explorer yes - internet explorer 11 n/a presto yes - opera 12 yes - opera 12 does tapping on a <button> give it focus?
<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 l...
... 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.
...version
66 (
66.0.3359.181) of chrome supports labels but the <datalist> tag has to be styled with css as its display property is set to none by default, hiding the labels.
...(see firefox bug 98191
6, chrome bug 341071).
<keygen> - HTML: Hypertext Markup Language
the value of the pqg parameter is the the base
64 encoded, der encoded dss-parms as specified in ietf rfc 3279.
...(note that only a subset of the curves named there may actually be supported in any particular browser.) if the keyparams parameter string is not a recognized curve name string, then a curve is chosen according to the user's chosen key strength (low, medium, high), using the curve named "secp384r1" for high, and the curve named "secp25
6r1" for medium keys.
...the signedpublickeyandchallenge is base
64 encoded, and the ascii data is finally submitted to the server as the value of a form name/value pair, where the name is name as specified by the name attribute of the keygen element.
... here is an example form submission as it would be delivered to 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%2bptwbre
6xfv%0awtkqbsshxk5zhcuwcwyvcniq9b82qhjdoacdd34rqfcaind4
6fxkqunb0mvkzqid%0aaqabfhfnb3ppbgxhsxnneuzyawvuzdanbgkqhkig9w0baqqfaanbaakv2eex2n%2fs%0ar%2f7ijnrowlszsmttiqteb%2badwhgj9u1xruroilq%2fo2cuqxifzcnzkyakwp4dubqw%0ai0%2f%2frgbvmco%3d specifications specification status comment html5the definition of 'the <keygen> element' in that specification.
Browser detection using the user agent - HTTP
for example, webkit
6 has a bug whereby when the device orientation changes, the browser might not fire mediaquerylist listeners when it should.
...they indicate the os, but also often its version and information on the relying hardware (32 or
64 bits, or intel/ppc for mac).
... mozilla/5.0 (linux; android 4.4.2); nexus 5 build/kot49h) applewebkit/537.3
6 (khtml, like gecko) chrome/33.0.1750.117 mobile safari/537.3
6 opr/20.0.139
6.72047 presto-based (opera 12-) opera mobi/xyz token in the comment (opera 12-) opera/9.80 (android 2.3.3; linux; opera mobi/adr-1111101157; u; es-es) presto/2.9.201 version/11.50 internet explorer iemobile/xyz token in the comment.
... mozilla/5.0 (windows phone 10.0; android
6.0.1; xbox; xbox one) applewebkit/537.3
6 (khtml, like gecko) chrome/58.0.3029.110 mobile safari/537.3
6 edge/1
6.1
6299 in summary, we recommend looking for the string “mobi” anywhere in the user agent to detect a mobile device.
Cross-Origin Resource Sharing (CORS) - HTTP
nnection: 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-control-allow-origin: https://foo.example access-control-allow-methods: post, get, options access-control-allow-headers: x-pingother, content-type access-control-max-age: 8
6400 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-en...
...in particular, let's look at lines 1
6-19: access-control-allow-origin: http://foo.example access-control-allow-methods: post, get, options access-control-allow-headers: x-pingother, content-type access-control-max-age: 8
6400 the server responds with access-control-allow-methods and says that post and get are viable methods to query the resource in question.
...in this case, 8
6400 seconds is 24 hours.
.../credential.html origin: http://foo.example cookie: pageaccess=2 http/1.1 200 ok date: mon, 01 dec 2008 01:34:52 gmt server: apache/2 access-control-allow-origin: https://foo.example access-control-allow-credentials: true cache-control: no-cache pragma: no-cache set-cookie: pageaccess=3; expires=wed, 31-dec-2008 01:34:53 gmt vary: accept-encoding, origin content-encoding: gzip content-length: 10
6 keep-alive: timeout=2, max=100 connection: keep-alive content-type: text/plain [text/plain payload] although line 10 contains the cookie destined for the content on http://bar.other, if bar.other did not respond with an access-control-allow-credentials: true (line 17) the response would be ignored and not made available to web content.
Content negotiation - HTTP
the 300 (multiple choices) or 40
6 (not acceptable) http response codes by the server (agent-driven negotiation or reactive negotiation), that are used as fallback mechanisms.
...initial support is in chrome 4
6 or later.
... the device-memory value is in chrome
61 or later.
... the accept-ch-lifetime header this is part of an experimental technology called client hints and is only available in chrome
61 or later.
Access-Control-Max-Age - HTTP
uxp caps this at 24 hours (8
6400 seconds).
... chromium (prior to v7
6) caps at 10 minutes (
600 seconds).
... chromium (starting in v7
6) caps at 2 hours (7200 seconds).
... examples cache results of a preflight request for 10 minutes: access-control-max-age:
600 specifications specification status comment fetchthe definition of 'access-control-max-age' in that specification.
CSP: form-action - HTTP
firefox 57 doesn't block the redirects whereas chrome
63 does).
... 'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
Forwarded - HTTP
this can be either: an ip address (v4 or v
6, optionally with a port, and ipv
6 quoted and enclosed in square brackets), an obfuscated identifier (such as "_hidden" or "_secret"), or "unknown" when the preceding entity is not known (and you still want to indicate that forwarding of the request was made).
... examples using the forwarded header forwarded: for="_mdn" # case insensitive forwarded: for="[2001:db8:cafe::17]:4711" # 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.17 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.
... note that ipv
6 address are quoted and enclosed in square brackets in forwarded.
... x-forwarded-for: 123.34.5
67.89 forwarded: for=123.34.5
67.89 x-forwarded-for: 192.0.2.43, "[2001:db8:cafe::17]" forwarded: for=192.0.2.43, for="[2001:db8:cafe::17]" specifications specification title rfc 7239, section 4: forwarded forwarded http extension ...
Proxy-Authorization - HTTP
the resulting string is base
64 encoded (ywxhzgrpbjpvcgvuc2vzyw1l).
... note: base
64 encoding does not mean encryption or hashing!
... this method is equally secure as sending the credentials in clear text (base
64 is a reversible encoding).
... examples proxy-authorization: basic ywxhzgrpbjpvcgvuc2vzyw1l specifications specification title rfc 7235, section 4.4: proxy-authorization http/1.1: authentication rfc 7
617 the 'basic' http authentication scheme ...
User-Agent - HTTP
examples mozilla/5.0 (windows nt
6.1; win
64; x
64; rv:47.0) gecko/20100101 firefox/47.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.
... examples mozilla/5.0 (x11; linux x8
6_
64) applewebkit/537.3
6 (khtml, like gecko) chrome/51.0.2704.103 safari/537.3
6 opera ua string the opera browser is also based on the blink engine, which is why it almost looks the same, but adds "opr/<version>".
... examples mozilla/5.0 (x11; linux x8
6_
64) applewebkit/537.3
6 (khtml, like gecko) chrome/51.0.2704.10
6 safari/537.3
6 opr/38.0.2220.41 older, presto-based opera releases used: opera/9.80 (macintosh; intel mac os x; u; en) presto/2.2.15 version/10.00 opera/9.
60 (windows nt
6.0; u; en) presto/2.1.1 safari ua string in this example, the user agent string is mobile safari’s version.
... examples mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/
605.1.15 (khtml, like gecko) version/13.1.1 mobile/15e148 safari/
604.1 internet explorer ua string examples mozilla/5.0 (compatible; msie 9.0; windows phone os 7.5; trident/5.0; iemobile/9.0) crawler and bot ua strings examples googlebot/2.1 (+http://www.google.com/bot.html) specifications specification title rfc 7231, section 5.5.3: user-agent hypertext transfer protocol (http/1.1): semantics and content rfc 2
61
6, section 14.43: user-agent hypertext transfer protocol -- http/1.1 ...
HTTP headers - HTTP
custom proprietary headers have historically been used with an x- prefix, but this convention was deprecated in june 2012 because of the inconveniences it caused when nonstandard fields became standard in rfc
6648; others are listed in an iana registry, whose original content was defined in rfc 4229.
... accept-ch-lifetime servers can ask the client to remember the set of client hints that the server supports for a specified period of time, to enable delivery of client hints on subsequent requests to the server’s origin ([rfc
6454]).
... upgrade the relevant rfc document for the upgrade header field is rfc 7230, section
6.7.
...for details on the connection header field please see section
6.1 of the aforementioned rfc.
Protocol upgrade mechanism - HTTP
for example: sec-websocket-extensions: superspeed, colormode; depth=1
6 sec-websocket-key provides information to the server which is needed in order to confirm that the client is entitled to request an upgrade to websocket.
... response header if the server can't communicate using the specified version of the websocket protocol, it will respond with an error (such as 42
6 upgrade required) that includes in its headers a sec-websocket-version header with a comma-separated list of the supported protocol versions.
...that value is then base
64 encoded to obtain the value of this property.
... references websocket api http specifications and rfcs: rfc 7230 rfc
6455 rfc 7540 ...
A typical HTTP session - HTTP
for example, sending the result of a form: post /contact_form.php http/1.1 host: developer.mozilla.org content-length:
64 content-type: application/x-www-form-urlencoded name=joe%20user&request=send%20me%20one%20of%20your%20catalogue request methods http defines a set of request methods indicating the desired action to be performed upon a resource.
... example responses successful web page response: http/1.1 200 ok content-type: text/html; charset=utf-8 content-length: 55743 connection: keep-alive cache-control: s-maxage=300, public, max-age=0 content-language: en-us date: thu, 0
6 dec 2018 17:37:18 gmt etag: "2e77ad1dc
6ab0b53a299
6dfd4
653c1c3" server: meinheld/0.
6.1 strict-transport-security: max-age=
63072000 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"> <head> <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.37 (red hat) content-type: text/html; charset=utf-8 date: thu, 0
6 dec 2018 17: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: 38217 connection: keep-alive cache-control: no-cache, no-store, must-revalidate, max-age=0 content-language: en-us date: thu, 0
6 dec 2018 17:35:13 gmt expires: thu, 0
6 dec 2018 17:35:13 gmt server: meinheld/0.
6.1 strict-transport-security: max-age=
63072000 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...
Indexed collections - JavaScript
let a = [10, 20, 30] let total = a.reduce(function(accumulator, currentvalue) { return accumulator + currentvalue }, 0) console.log(total) // prints
60 reduceright(callback[, initialvalue]) works like reduce(), but starts with the last element.
... typed array views typed array views have self descriptive names and provide views for all the usual numeric types like int8, uint32, float
64 and so forth.
... type value range size in bytes description web idl type equivalent c type int8array -128 to 127 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 int1
6array -327
68 to 327
67 2 1
6-bit two's complement signed integer short int1
6_t uint1
6array 0 to
65535 2 1
6-bit unsigned integer unsigned short uint1
6_t int32array -2147483
648 to 2147483
647 4 32-bit two's complement signed integer long int32_t uint32array 0 to 42949
67295 4 32-bit unsigned integer unsigned long uint...
...32_t float32array 1.2×10-38 to 3.4×1038 4 32-bit ieee floating point number (7 significant digits e.g., 1.12345
67) unrestricted float float float
64array 5.0×10-324 to 1.8×10308 8
64-bit ieee floating point number (1
6 significant digits e.g., 1.123...15) unrestricted double double bigint
64array -2
63 to 2
63-1 8
64-bit two's complement signed integer bigint int
64_t (signed long long) biguint
64array 0 to 2
64-1 8
64-bit unsigned integer bigint uint
64_t (unsigned long long) for more information, see javascript typed arrays and the reference documentation for the different typedarray objects.
Working with objects - JavaScript
for example, let's create an object named mycar and give it properties named make, model, and year as follows: var mycar = new object(); mycar.make = 'ford'; mycar.model = 'mustang'; mycar.year = 19
69; the above example could also be written using an object initializer, which is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}): var mycar = { make: 'ford', model: 'mustang', year: 19
69 }; unassigned properties of an object are undefined (and not null).
...so, for example, you could access the properties of the mycar object as follows: mycar['make'] = 'ford'; mycar['model'] = 'mustang'; mycar['year'] = 19
69; an object property name can be any valid javascript string, or anything that can be converted to a string, including the empty string.
...s(obj, objname) { var result = ``; for (var i in obj) { // obj.hasownproperty() is used to filter out properties from the object's prototype chain if (obj.hasownproperty(i)) { result += `${objname}.${i} = ${obj[i]}\n`; } } return result; } so, the function call showprops(mycar, "mycar") would return the following: mycar.make = ford mycar.model = mustang mycar.year = 19
69 enumerate the properties of an object starting with ecmascript 5, there are three native ways to list/traverse object properties: for...in loops this method traverses all enumerable properties of an object and its prototype chain.
...here's an example that defines the same getter and setter used in the previous example: var o = { a: 0 }; object.defineproperties(o, { 'b': { get: function() { return this.a + 1; } }, 'c': { set: function(x) { this.a = x / 2; } } }); o.c = 10; // runs the setter, which assigns 10 / 2 (5) to the 'a' property console.log(o.b); // runs the getter, which yields a + 1 or
6 which of the two forms to choose depends on your programming style and task at hand.
Rest parameters - JavaScript
however, the third argument, manymoreargs, will be an array that contains the 3rd, 4th, 5th,
6th ...
... // 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.
... each one of them is then multiplied by the first parameter, and the array is returned: function multiply(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 conv...
... 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-2
62)the definition of 'function definitions' in that specification.
Array.prototype.every() - JavaScript
(it is vacuously true that all elements of the empty set satisfy any given condition.) polyfill every was added to the ecma-2
62 standard in the 5th edition, and it may not be present in other implementations of the standard.
... this algorithm is exactly the one specified in ecma-2
62, 5th edition, assuming object and typeerror have their original values, and that callbackfn.call evaluates to the original value of function.prototype.call.
... if (arguments.length > 1) { t = thisarg; } //
6.
...----- // deleting items // --------------- arr = [1, 2, 3, 4]; arr.every( (elem, index, arr) => { arr.pop() console.log(`[${arr}][${index}] -> ${elem}`) return elem < 4 }) // loop runs for 2 iterations only, as the remaining // items are `pop()`ed off // // 1st iteration: [1,2,3][0] -> 1 // 2nd iteration: [1,2][1] -> 2 specifications specification ecmascript (ecma-2
62)the definition of 'array.prototype.every' in that specification.
Array.prototype.find() - JavaScript
however, you can polyfill array.prototype.find with the following snippet: // https://tc39.github.io/ecma2
62/#sec-array.prototype.find if (!array.prototype.find) { object.defineproperty(array.prototype, 'find', { value: function(predicate) { // 1.
... var k = 0; //
6.
... { name: 'cherries', quantity: 5 } find a prime number in an array the following example finds an element in the array that is a prime number (or returns undefined if there is no prime number): function isprime(element, index, array) { let start = 2; while (start <= math.sqrt(element)) { if (element % start++ < 1) { return false; } } return element > 1; } console.log([4,
6, 8, 12].find(isprime)); // undefined, not found console.log([4, 5, 8, 12].find(isprime)); // 5 the following examples show that nonexistent and deleted elements are visited, and that the value passed to the callback is their value when visited: // declare array with no elements at indexes 2, 3, and 4 const array = [0,1,,,,5,
6]; // shows all indexes, not just those with assigned values array.f...
... is still visited even though deleted console.log('visited index ', index, ' with value ', value); }); // expected output: // deleting array[5] with value 5 // visited index 0 with value 0 // visited index 1 with value 1 // visited index 2 with value undefined // visited index 3 with value undefined // visited index 4 with value undefined // visited index 5 with value undefined // visited index
6 with value
6 specifications specification ecmascript (ecma-2
62)the definition of 'array.prototype.find' in that specification.
Array.prototype.findIndex() - JavaScript
polyfill // https://tc39.github.io/ecma2
62/#sec-array.prototype.findindex if (!array.prototype.findindex) { object.defineproperty(array.prototype, 'findindex', { value: function(predicate) { // 1.
... var k = 0; //
6.
... 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 specification ecmascript (ecma-2
62)the definition of 'array.prototype.findindex' in that specification.
Array.prototype.flat() - JavaScript
alternatives reduce and concat const arr = [1, 2, [3, 4]]; // to flat single level array arr.flat(); // is equivalent to arr.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4] // or with decomposition syntax const flattened = arr => [].concat(...arr); reduce + concat + isarray + recursivity const arr = [1, 2, [3, 4, [5,
6]]]; // to enable deep level flatten use recursion with reduce and concat function flatdeep(arr, d = 1) { return d > 0 ?
...flatdeep(val, d - 1) : val), []) : arr.slice(); }; flatdeep(arr, infinity); // [1, 2, 3, 4, 5,
6] use a stack // non recursive flatten deep using a stack // note that depth control is hard/inefficient as we will need to tag each value with its own depth // also possible w/o reversing on shift/unshift, but array ops on the end tends to be faster function flatten(input) { const stack = [...input]; const res = []; while(stack.length) { // pop value from stack const next = stack.pop(); if(array.isarray(next)) { // push back array items, won't modify the original input stack.push(...next); } else { res.push(next); } } // reverse to restore input order return res.reverse...
...(); } const arr = [1, 2, [3, 4, [5,
6]]]; flatten(arr); // [1, 2, 3, 4, 5,
6] use generator function function* flatten(array, depth) { if(depth === undefined) { depth = 1; } for(const item of array) { if(array.isarray(item) && depth > 0) { yield* flatten(item, depth - 1); } else { yield item; } } } const arr = [1, 2, [3, 4, [5,
6]]]; const flattened = [...flatten(arr, infinity)]; // [1, 2, 3, 4, 5,
6] please do not add polyfills on this article.
... for reference, 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-2
62)the definition of 'array.prototype.flat' in that specification.
Array.prototype.flatMap() - JavaScript
alternative reduce() and concat() var arr = [1, 2, 3, 4]; arr.flatmap(x => [x, x * 2]); // is equivalent to arr.reduce((acc, x) => acc.concat([x, x * 2]), []); // [1, 2, 2, 4, 3,
6, 4, 8] note, however, that this is inefficient and should be avoided for large arrays: in each iteration, it creates a new temporary array that must be garbage-collected, and it copies elements from the current accumulator array into a new array instead of just adding the new elements to the existing array.
...for reference, please check: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 examples map() and flatmap() let arr1 = [1, 2, 3, 4]; arr1.map(x => [x * 2]); // [[2], [4], [
6], [8]] arr1.flatmap(x => [x * 2]); // [2, 4,
6, 8] // only one level is flattened arr1.flatmap(x => [[x * 2]]); // [[2], [4], [
6], [8]] while the above could have been achieved by using map itself, here is an example that better showcases the use of flatmap.
... // 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, 17, -33, -4, 18] // |\ \ x | | \ x x | // [4,1, 4, 20, 1
6, 1, 18] a.flatmap( (n) => (n < 0) ?
...[n] : [n-1, 1] ) // expected output: [4, 1, 4, 20, 1
6, 1, 18] specifications specification ecmascript (ecma-2
62)the definition of 'array.prototype.flatmap' in that specification.
Array.prototype.lastIndexOf() - JavaScript
polyfill lastindexof was added to the ecma-2
62 standard in the 5th edition; as such it may not be present in other implementations of the standard.
...this algorithm is exactly the one specified in ecma-2
62, 5th edition, assuming object, typeerror, number, math.floor, math.abs, and math.min have their original values.
... // production steps of ecma-2
62, edition 5, 15.4.4.15 // reference: http://es5.github.io/#x15.4.4.15 if (!array.prototype.lastindexof) { array.prototype.lastindexof = function(searchelement /*, fromindex*/) { 'use strict'; if (this === void 0 || this === null) { throw new typeerror(); } var n, k, t = object(this), len = t.length >>> 0; if (len === 0) { return -1; } n = len - 1; if (arguments.length > 1) { n = number(arguments[1]); if (n != n) { n = 0; } else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { n = (n > 0 || -1) * math.floor(math.abs(n)); } } for (k = n >= 0 ?
... specifications specification ecmascript (ecma-2
62)the definition of 'array.prototype.lastindexof' in that specification.
Array.prototype.some() - JavaScript
polyfill some() was added to the ecma-2
62 standard in the 5th edition, and it may not be present in all implementations of the standard.
... this algorithm is exactly the one specified in ecma-2
62, 5th edition, assuming object and typeerror have their original values and that fun.call evaluates to the original value of function.prototype.call().
... // production steps of ecma-2
62, edition 5, 15.4.4.17 // reference: http://es5.github.io/#x15.4.4.17 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 = 0; i < len; i++) { if (i in t && fun.call(thisarg, t[i], i, t)) { return true; } } return false; }; } examples testing value of array elements the following example tests whether any element in the array is bigger than 10.
...ue', 1]; function getboolean(value) { 'use strict'; if (typeof value === 'string') { value = value.tolowercase().trim(); } return truthy_values.some(function(t) { return t === value; }); } getboolean(false); // false getboolean('false'); // false getboolean(1); // true getboolean('true'); // true specifications specification ecmascript (ecma-2
62)the definition of 'array.prototype.some' in that specification.
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 = 12345
678912345
6789n; // german uses period for thousands console.log(bigint.tolocalestring('de-de')); // → 123.45
6.789.123.45
6.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,...
...23,45,
67,89,12,34,5
6,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.45
6.789.123.45
6.789 using options the results provided by tolocalestring can be customized using the options argument: var bigint = 12345
678912345
6789n; // request a currency format console.log(bigint.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.45
6.789.123.45
6.789,00 € // the japanese yen doesn't use a minor unit console.log(bigint.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ¥123,45
6,78...
...9,123,45
6,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-2
62)the definition of 'bigint.prototype.tolocalestring()' in that specification.
Date.prototype.getTime() - JavaScript
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20µs in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 new date().gettime(); // 1519211809934 // 15192118103
62 // 1519211811
670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled new date().gettime(); // 1519129853500 // 1519129858900 // 15191298
64400 // ...
... var end, start; start = new date(); for (var i = 0; i < 1000; i++) { math.sqrt(i); } end = new date(); console.log('operation took ' + (end.gettime() - start.gettime()) + ' msec'); specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.gettime' in that specification.
Date.prototype.toISOString() - JavaScript
the toisostring() method returns a string in simplified extended iso format (iso 8
601), which is always 24 or 27 characters long (yyyy-mm-ddthh:mm:ss.sssz or ±yyyyyy-mm-ddthh:mm:ss.sssz, respectively).
... syntax dateobj.toisostring() return value a string representing the given date in the iso 8
601 format according to universal time.
... polyfill this method was standardized in ecma-2
62 5th edition.
... specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.toisostring' in that specification.
Date.prototype.toString() - JavaScript
date.prototype.tostring() returns a string representation of the date in the format specified in ecma-2
62 which can be summarised as: week day: 3 letter english week day name, e.g.
..."2
6" space the string "gmt" timezone offset sign, either: "+" for positive offsets (0 or greater) "-" for negative offsets (less than zero) two digit hour offset, e.g.
..."sat sep 01 2018 14:53:2
6 gmt+1400 (lint)" until ecmascript 2018 (edition 9), the format of the string returned by date.prototype.tostring was implementation dependent.
... examples using tostring() the following assigns the tostring() value of a date object to myvar: var x = new date(); var myvar = x.tostring(); // assigns a string value to myvar in the same format as: // mon sep 08 1998 14:3
6:22 gmt-0700 (pdt) specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.tostring' in that specification.
Function.prototype.bind() - JavaScript
(proper bound functions have none.) the partial implementation creates bound functions whose length property does not agree with that mandated by ecma-2
62: it creates functions with length of 0.
...according to ecma-2
62, name of the returned bound function should be "bound " + name of target function (note the space character).
... if you choose to use this partial implementation, you must not rely on those cases where behavior deviates from ecma-2
62, 5th edition!
... slice(arguments); specifications specification ecmascript (ecma-2
62)the definition of 'function.prototype.bind' in that specification.
Intl.NumberFormat() constructor - JavaScript
"percent" for percent formatting "unit" for unit formatting unit the unit to use in unit formatting, possible values are core unit identifiers, defined in uts #35, part 2, section
6.
... "long" (e.g., 1
6 litres) "short" (e.g., 1
6 l) "narrow" (e.g., 1
6l) usegrouping whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
...ount); // → '-3,500.00 us dollars' new intl.numberformat('bn', { style: 'currency', currency: 'usd', currencysign: 'accounting' }).format(amount); // → '($3,500.00)' scientific, engineering or compact notations scientific and compact notation are represented by the notation option and can be formatted like this: new intl.numberformat('en-us', { notation: "scientific" }).format(987
654321); // → 9.877e8 new intl.numberformat('pt-pt', { notation: "scientific" }).format(987
654321); // → 9,877e8 new intl.numberformat('en-gb', { notation: "engineering" }).format(987
654321); // → 987.
654e
6 new intl.numberformat('de', { notation: "engineering" }).format(987
654321); // → 987,
654e
6 new intl.numberformat('zh-cn', { notation: "compact" }).format(987
654321); // → 9.9亿 n...
...ew intl.numberformat('fr', { notation: "compact", compactdisplay: "long" }).format(987
654321); // → 988 millions new intl.numberformat('en-gb', { notation: "compact", compactdisplay: "short" }).format(987
654321); // → 988m displaying signs display a sign for positive and negative numbers, but not zero: new intl.numberformat("en-us", { style: "percent", signdisplay: "exceptzero" }).format(0.55); // → '+55%' note that when the currency sign is "accounting", parentheses might be used instead of a minus sign: new intl.numberformat('bn', { style: 'currency', currency: 'usd', currencysign: 'accounting', signdisplay: 'always' }).format(-3500); // → '($3,500.00)' specifications specification ecmascript internationalization api (ecma-402...
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 = 12345
6.789; // german uses comma as decimal separator and period for thousands console.log(new intl.numberformat('de-de').format(number)); // → 123.45
6,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').
...format(number)); // → 1,23,45
6.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.45
6,789 using options the results can be customized using the options argument: var number = 12345
6.789; // request a currency format console.log(new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }).format(number)); // → 123.45
6,79 € // the japanese yen doesn't use a minor unit console.log(new intl.numberformat('ja-jp', { style: 'currency', currency: 'jpy' }).format(number)); // → ¥123,457 // limit to three significant digi...
...ts console.log(new intl.numberformat('en-in', { maximumsignificantdigits: 3 }).format(number)); // → 1,23,000 using style and unit console.log(new intl.numberformat("pt-pt", { style: 'unit', unit: "mile-per-hour" }).format(50)); // → 50 mi/h console.log((1
6).tolocalestring('en-gb', { style: "unit", unit: "liter", unitdisplay: "long" })); // → 1
6 litres specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat' in that specification.
JSON.parse() - JavaScript
polyfill // from https://github.com/douglascrockford/json-js/blob/master/json2.js if (typeof json.parse !== "function") { var rx_one = /^[\],:{}\s]*$/; var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fa-f]{4})/g; var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[ee][+\-]?\d+)?/g; var rx_four = /(?:^|:|,)(?:\s*\[)+/g; var rx_dangerous = /[\u0000\u00ad\u0
600-\u0
604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u20
60-\u20
6f\ufeff\ufff0-\uffff]/g; json.parse = function(text, reviver) { // the parse method takes a text and an optional reviver function, and returns // a javascript value if the text is a valid json text.
... text = string(text); rx_dangerous.lastindex = 0; if (rx_dangerous.test(text)) { text = text.replace(rx_dangerous, function(a) { return ( "\\u" + ("0000" + a.charcodeat(0).tostring(1
6)).slice(-4) ); }); } // in the second stage, we run the text against regular expressions that look // for non-json patterns.
...value * 2 // return value * 2 for numbers : value // return everything else unchanged ); // { p: 10 } json.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"
6":
6}}}', (key, value) => { console.log(key); // log the current property name, the last is "".
...}); // 1 // 2 // 4 //
6 // 5 // 3 // "" json.parse() does not allow trailing commas // both will throw a syntaxerror json.parse('[1, 2, 3, 4, ]'); json.parse('{"foo" : 1, }'); json.parse() does not allow single quotes // will throw a syntaxerror json.parse("{'foo': 1}"); specifications specification ecmascript (ecma-2
62)the definition of 'json.parse' in that specification.
Math - JavaScript
math.ln2 natural logarithm of 2; approximately 0.
693.
... in javascript, we can do this with the following: 50 * math.tan(degtorad(
60)).
... we use our degtorad() function to convert
60 degrees to radians, as math.tan() expects an input value in radians.
... returning a random integer between two bounds this can be achieved with a combination of math.random() and math.floor(): function random(min, max) { const num = math.floor(math.random() * (max - min + 1)) + min; return num; } random(1, 10); specifications specification ecmascript (ecma-2
62)the definition of 'math' in that specification.
Number.prototype.toLocaleString() - JavaScript
a check that works in all hosts, including those supporting ecma-2
62 prior to ed 5.1, is to test for the features specified in ecma-402 that are required to support regional options for number.prototype.tolocalestring directly: function tolocalestringsupportsoptions() { return !!(typeof intl == 'object' && intl && typeof intl.numberformat == 'function'); } this tests for a global intl object, checks that it's not null and that it has a numberformat property ...
...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 = 12345
6.789; // german uses comma as decimal separator and period for thousands console.log(number.tolocalestring('de-de')); // → 123.45
6,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,45
6.789 // the nu extension key requests a numbering system, e.g.
... 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.45
6,789 using options the results provided by tolocalestring can be customized using the options argument: var number = 12345
6.789; // request a currency format console.log(number.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.45
6,79 € // the japanese yen doesn't use a minor unit console.log(number.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ¥123,457 // limit to three significant digits console.log(number.tolocalestri...
...ng('en-in', { maximumsignificantdigits: 3 })); // → 1,23,000 // use the host default language with options for number formatting var num = 30000.
65; console.log(num.tolocalestring(undefined, {minimumfractiondigits: 2, maximumfractiondigits: 2})); // → "30,000.
65" where english is the default language, or // → "30.000,
65" where german is the default language, or // → "30 000,
65" where french is the default language specifications specification ecmascript (ecma-2
62)the definition of 'number.prototype.tolocalestring' in that specification.
Number.prototype.toString() - JavaScript
an integer in the range 2 through 3
6 specifying the base to use for representing numeric values.
... exceptions rangeerror if tostring() is given a radix less than 2 or greater than 3
6, a rangeerror is thrown.
...for example, for hexadecimal numbers (base 1
6), a through f are used.
... examples using tostring let count = 10 console.log(count.tostring()) // displays '10' console.log((17).tostring()) // displays '17' console.log((17.2).tostring()) // displays '17.2' let x =
6 console.log(x.tostring(2)) // displays '110' console.log((254).tostring(1
6)) // displays 'fe' console.log((-10).tostring(2)) // displays '-1010' console.log((-0xff).tostring(2)) // displays '-11111111' specifications specification ecmascript (ecma-2
62)the definition of 'number.prototype.tostring' in that specification.
Object.prototype.toString() - JavaScript
parameters for numbers and bigints tostring() takes an optional parameter radix the value of radix must be minimum 2 and maximum 3
6.
...r base numbers, in example below we are converting base 10 number to a base 2 (binary) number let basetenint = 10; console.log(basetenint.tostring(2)); // expected output is "1010" and same for big integers let bignum = bigint(20); console.log(bignum.tostring(2)); // expected output is "10100" some common radix are 2 for binary numbers, 8 for octal numbers, 10 for decimal numbers, 1
6 for hexadecimal numbers.
... dog.prototype.tostring = function dogtostring() { const ret = 'dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed; return ret; } or, using es
6 template strings: dog.prototype.tostring = function dogtostring() { return `dog ${this.name} is a ${this.sex} ${this.color} ${this.breed}`; } with the preceding code in place, any time thedog is used in a string context, javascript automatically calls the dogtostring() function, which returns the following string: "dog gabby is a female chocolate lab" using tostring() to detect object cla...
... const mydate = new date(); object.prototype.tostring.call(mydate); // [object date] mydate[symbol.tostringtag] = 'mydate'; object.prototype.tostring.call(mydate); // [object mydate] date.prototype[symbol.tostringtag] = 'prototype polluted'; object.prototype.tostring.call(new date()); // [object prototype polluted] specifications specification ecmascript (ecma-2
62)the definition of 'object.prototype.tostring' in that specification.
RegExp - JavaScript
flags in constructor starting with ecmascript
6, new regexp(/ab+c/, 'i') no longer throws a typeerror ("can't supply flags when constructing one regexp from another") when the first argument is a regexp and the second flags argument is present.
...gex.test(str) // false (lastindex is taken into account with sticky flag) regex.lastindex // 0 (reset after match failure) the difference between the sticky flag and the global flag with the sticky flag y, the next match has to happen at the lastindex position, while with the global flag g, the match can happen at the lastindex position or later: re = /\d/y; while (r = re.exec("123 45
6")) console.log(r, "and re.lastindex", re.lastindex); // [ '1', index: 0, input: '123 45
6', groups: undefined ] and re.lastindex 1 // [ '2', index: 1, input: '123 45
6', groups: undefined ] and re.lastindex 2 // [ '3', index: 2, input: '123 45
6', groups: undefined ] and re.lastindex 3 // ...
... with the global flag g, all
6 digits would be matched, not just 3.
... specifications specification ecmascript (ecma-2
62)the definition of 'regexp' in that specification.
String.prototype.charAt() - JavaScript
the string object's charat() method returns a new string consisting of the single utf-1
6 code unit located at the specified offset into the string.
... return value a string representing the character (exactly one utf-1
6 code unit) at the specified index.
...te'; } var prev = str.charcodeat(i - 1); // (could change last hex to 0xdb7f 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 201
6 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).
... } else { break } } if (idx >= end || idx < 0) { return '' } ret += str.charat(idx) if (/[\ud800-\udbff]/.test(ret) && /[\udc00-\udfff]/.test(str.charat(idx + 1))) { // go one further, since one of the "characters" is part of a surrogate pair ret += str.charat(idx + 1) } return ret } specifications specification ecmascript (ecma-2
62)the definition of 'string.prototype.charat' in that specification.
WebAssembly.CompileError - JavaScript
although ecma-2
62 specifies that urierror should provide its own message property, in spidermonkey, it inherits error.prototype.message.
... ecmascript (ecma-2
62)the definition of 'nativeerror' in that specification.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompileerrorchrome full support 57edge full support 1
6firefox 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 11w...
... 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerror() constructorchrome full support 57edge full support 1
6firefox 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 11w...
WebAssembly.LinkError - JavaScript
although ecma-2
62 specifies that urierror should provide its own message property, in spidermonkey, it inherits error.prototype.message.
... ecmascript (ecma-2
62)the definition of 'nativeerror' in that specification.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslinkerrorchrome full support 57edge full support 1
6firefox 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 11w...
... 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0linkerror() constructorchrome full support 57edge full support 1
6firefox 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 11w...
WebAssembly.Memory() constructor - JavaScript
note: a webassembly page has a constant size of
65,53
6 bytes, i.e.,
64kib.
...the following example creates a new webassembly memory instance with an initial size of 10 pages (
640kib), and a maximum size of 100 pages (
6.4mib).
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmemory() constructorchrome full support 57edge full support 1
6firefox 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 11w...
... 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 ...
WebAssembly.Memory.prototype.grow() - JavaScript
syntax memory.grow(number); parameters number the number of webassembly pages you want to grow the memory by (each one is
64kib in size).
... examples using grow the following example creates a new webassembly memory instance with an initial size of 1 page (
64kib), and a maximum size of 10 pages (
640kib).
... var memory = new webassembly.memory({initial:1, maximum:10}); we can then grow the instance by one page like so: const bytesperpage =
64 * 1024; console.log(memory.buffer.bytelength / bytesperpage); // "1" console.log(memory.grow(1)); // "1" console.log(memory.buffer.bytelength / bytesperpage); // "2" note the return value of grow() here is the previous number of webassembly pages.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support 57edge full support 1
6firefox 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 11w...
WebAssembly.RuntimeError - JavaScript
although ecma-2
62 specifies that urierror should provide its own message property, in spidermonkey, it inherits error.prototype.message.
... ecmascript (ecma-2
62)the definition of 'nativeerror' in that specification.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsruntimeerrorchrome full support 57edge full support 1
6firefox 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 11w...
... 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0runtimeerror() constructorchrome full support 57edge full support 1
6firefox 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 11w...
Spread syntax (...) - JavaScript
syntax for function calls: myfunction(...iterableobj); for array literals or strings: [...iterableobj, '4', 'five',
6]; for object literals (new in ecmascript 2018): let objclone = { ...obj }; rest syntax (parameters) rest syntax looks exactly like spread syntax.
... myconstructor () { console.log("arguments.length: " + arguments.length); console.log(arguments); this.prop1="val1"; this.prop2="val2"; }; const myarguments = ["hi", "how", "are", "you", "mr", null]; const myconstructorwitharguments = applyandnew(myconstructor, myarguments); console.log(new myconstructorwitharguments); // (internal log of myconstructor): arguments.length:
6 // (internal log of myconstructor): ["hi", "how", "are", "you", "mr", null] // (log of "new myconstructorwitharguments"): {prop1: "val1", prop2: "val2"} spread in array literals a more powerful array literal without spread syntax, to create a new array using an existing array as one part of it, the array literal syntax is no longer sufficient and imperative code must be used instea...
... specifications specification ecmascript (ecma-2
62)the definition of 'array initializer' in that specification.
... ecmascript (ecma-2
62)the definition of 'object initializer' in that specification.
Template literals (Template strings) - JavaScript
let str = string.raw`hi\n${2+3}!`; // "hi\n5!" str.length; //
6 array.from(str).join(','); // "h,i,\,n,5,!" tagged templates and escape sequences es201
6 behavior as of ecmascript 201
6, tagged templates conform to the rules of the following escape sequences: unicode escapes started by "\u", for example \u00a9 unicode code point escapes indicated by "\u{}", for example \u{2f804} hexadecimal escapes started by "\x", for example \xa9 octal literal esca...
...pes started by "\0o" and followed by one or more digits, for example \0o251 this means that a tagged template like the following is problematic, because, per ecmascript grammar, a parser looks for valid unicode escape sequences, but finds malformed syntax: latex`\unicode` // throws in older ecmascript versions (es201
6 and earlier) // syntaxerror: malformed unicode character escape sequence es2018 revision of illegal escape sequences tagged templates should allow the embedding of languages (for example dsls, or latex), where other escapes sequences are common.
...nt in the “cooked” array: function latex(str) { return { "cooked": str[0], "raw": str.raw[0] } } latex`\unicode` // { cooked: undefined, raw: "\\unicode" } note that the escape sequence restriction is only dropped from tagged templates—not from untagged template literals: let bad = `bad escape sequence: \unicode`; specifications specification ecmascript (ecma-2
62)the definition of 'template literals' in that specification.
... ecmascript (ecma-2
62)the definition of 'tagged templates literals' in that specification.
MathML documentation index - MathML
5 proving the pythagorean theorem beginner, example, guide, html5 math, math education, mathml, needsbeginnerupdate we will now prove the pythagorean theorem:
6 mathml attribute reference mathml, mathml reference this is an alphabetical list of mathml attributes.
... 1
6 <mglyph> mathml, mathml reference, mathml:element the mathml <mglyph> element is used to display non-standard symbols where existing unicode characters are not available.
... 2
6 <mrow> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <mrow> element is used to group sub-expressions, which usually contain one or more operators with their respective operands (such as <mi> and <mn>).
... 3
6 <mtext> mathml, mathml reference, mathml:element, mathml:token elements the mathml element is used to render arbitrary text with no notational meaning, such as comments or annotations.
Mobile first - Progressive web apps (PWAs)
to create something more suitable for desktop, i put in the following media queries: @media (min-width: 480px) { #bottom, #top { display: none; } article, nav { display: block; } nav ul { text-align: center; } nav li { display: inline; } nav li a { border-right: 1px solid #ad
66d5; border-bottom: none; display: inline-block; padding: 0 5px; font-size: 1.
6em; } nav li:last-child a { border-right: none; } } @media (min-width:
600px) { html { background: #eee; height: 100%; } body { width:
600px; height: inherit; margin: 0 auto; background: url(../img/firefox-os.png) bottom left no-repeat, linear-gradient(to bott...
... the second one sets the width of the content at
600px and centers it in the space available, then adds in a gradient and a nice background image for the wider layout.
... this is a key point - the background image is 12
6kb, and not ideal for narrow layouts.
... having it included in the "
600 pixels or wider" media query means that narrow screen devices won't read that media query, so they will not waste their time and bandwidth downloading that image.
d - SVG: Scalable Vector Graphics
three elements have this attribute: <path>, <glyph>, and <missing-glyph> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,
60 50,90 q 10,
60 10,30 z" /> </svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn.
... svg defines
6 types of path commands, for a total of 20 commands: moveto: m, m lineto: l, l, h, h, v, v cubic bézier curve: c, c, s, s quadratic bézier curve: q, q, t, t elliptical arc curve: a, a closepath: z, z note: commands are case-sensitive.
... <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" r="1.5" /> </g> <use xlink:href="#smoothquadraticdown" x="
60" /> <use xlink:href="#smoothquadraticup" x="
60" /> <use xlink:href="#smoothquadraticdown" x="120" /> </g> </svg> elliptical arc curve elliptical arc curves are curves defined as a portion of an ellipse.
... examples html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <!-- the influence of the arc flags with which the arc is drawn --> <path fill="none" stroke="red" d="m
6,10 a
6 4 10 1 0 14,10" /> <path fill="none" stroke="lime" d="m
6,10 a
6 4 10 1 1 14,10" /> <path fill="none" stroke="purple" d="m
6,10 a
6 4 10 0 1 14,10" /> <path fill="none" stroke="pink" d="m
6,10 a
6 4 10 0 0 14,10" /> </svg> closepath closepath instructions draw a straight line from the current position to the f...
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="
67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" x1="33%" x2="
67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="repeatgradient" spreadmethod="re...
...peat" x1="33%" x2="
67%"> <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="17%"> <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="17%"> <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="17%"> <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.
stroke-linecap - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0
6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" ...
... example html,body,svg { height:100% } <svg viewbox="0 0
6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke=...
... example html,body,svg { height:100% } <svg viewbox="0 0
6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "round" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="round" /> <!-- effect of the "round" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="round" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" str...
... example html,body,svg { height:100% } <svg viewbox="0 0
6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "square" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="square" /> <!-- effect of the "square" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4"...
stroke-linejoin - SVG: Scalable Vector Graphics
pink lines highlight the position of the path for each stroke --> <g id="highlight"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" 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.5" r="0.05" fill="pink" /> </g> <use xlink:href="#highlight" x="
6" /> <use xlink:href="#highlight" x="12" /> <use xlink:href="#highlight" x="2" y="
6" /> <use xlink:href="#highlight" x="8" y="
6" /> </svg> usage context value arcs | bevel |miter | miter-clip | round default value miter animatable yes arcs note: the arcs value as been introduced in svg2 and it isn't widely supported yet, see browser compatibi...
... example html,body,svg { height:100% } <svg viewbox="0 0
6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx...
... example html,body,svg { height:100% } <svg viewbox="0 0
6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "bevel" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <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" /> </g> </svg> miter the...
... example html,body,svg { height:100% } <svg viewbox="0 0
6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "round" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="round" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05"...
transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-3
6 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,
60 50,90 q 10,
60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
... as a presentation attribute, transform can be used by any element (in svg 1.1, only these 1
6 elements were allowed to use it: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text>, and <use>).
... example html,body,svg { height:100% } <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="
6" height="
6" /> <rect x="-3" y="-3" width="
6" height="
6" fill="red" transform="skewx(30)" /> </svg> skewy the skewy(<a>) transform function specifies a skew transformation along the y axis by a degrees.
... example html,body,svg { height:100% } <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="
6" height="
6" /> <rect x="-3" y="-3" width="
6" height="
6" fill="red" transform="skewy(30)" /> </svg> specification specification status comment css transforms level 2the definition of 'transform' in that specification.
<feComposite> - SVG: Scalable Vector Graphics
example svg <svg width="330" height="195" viewbox="0 0 1100
650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> <defs> <desc>defi...
...ty=".5" /> <g id="twobluetriangles"> <use xlink:href="#blue100"/> <use xlink:href="#blue50"/> </g> <g id="bluetriangles"> <use transform="translate(275,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="#twobluetriangles"/> </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 filte...
...e xlink:href="#red100" filter="url(#inflood)" /> <use xlink:href="#red50" filter="url(#inflood)" /> <text x="35" y="275">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="275">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="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#red100" filter="url(#xorflood)" /> <use xlink:href="#red50" filter="url(#xorflood)" /> <text x="15" y="275">xor</text> </g> ...
...href="#red100" filter="url(#innoflood)" /> <use xlink:href="#red50" filter="url(#innoflood)" /> <text x="35" y="275">in</text> </g> <g transform="translate(525,25)"> <use xlink:href="#red100" filter="url(#outnoflood)" /> <use xlink:href="#red50" filter="url(#outnoflood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(
650,25)"> <use xlink:href="#red100" filter="url(#atopnoflood)" /> <use xlink:href="#red50" filter="url(#atopnoflood)" /> <text x="10" y="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#red100" filter="url(#xornoflood)" /> <use xlink:href="#red50" filter="url(#xornoflood)" /> <text x="15" y="275">xor</text> <...
Transport Layer Security - Web security
the internet engineering task force (ietf) specified tls 1.0 in rfc 224
6 in january, 1999.
... the current version of tls is 1.3 (rfc 844
6).
... tls 1.3 rfc 844
6: tls 1.3 is a major revision to tls.
... from version 74 onwards, firefox will return a secure connection failed error when connecting to servers using the older tls versions (bug 1
60
6734).
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 903372.
... <html> <head> <base href="https://mydomain.com"> <style> .link { stroke: #999; stroke-opacity: .
6; } marker#arrow { fill: black; } </style> </head> <body> <svg width="100%" height="100%" xml:base=""> <defs> <marker id="arrow" viewbox="0 -5 10 10" refx="0" refy="0" markerwidth="20" markerheight="20" orient="auto"> <path d="m0,-5l10,0l0,5"></path> </marker> </defs> <line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line> </svg> </body> </html> imagine a svg with font references.
... <svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/150
66845
653
629" width="909" height="128
6" viewbox="0 0 909 128
6"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.17px; font-family: zapfdingbats_ghr; fill: #1
61
615; } ]]></style> <text x="
647" 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 issue while not changing the base uri for your entire document.
... work-arounds xml:base support in old browsers https://gist.github.com/leonderijke/c5cf7c5b2e424c00
61d2 specifications specification status comment xml base (second edition) recommendation ...
clipboard - Archive of obsolete content
the following types are supported: text (plain text) html (a string of html) image (a base-
64 encoded png) if no data type is provided, then the module will detect it for you.
... var clipboard = require("sdk/clipboard"); clipboard.set("data:image/png;base
64,ivborw0kggoaaaansuheugaaacaaaaagcaya" + "aabzenr0aaaasuleqvryhe3o0qkaiawd0eyqe3q993aq3cbsukpygfsnty" + "n5ugbqpk0baadgp0brdwxwlweaaaaagpsa3rzdaaaaahgpcgrpganzq2fg" + "bwrr9aaaaabjru5erkjggg%3d%3d"); if the clipboard contains an image, open it in a new tab.
... var clipboard = require("sdk/clipboard"); clipboard.set("data:image/png;base
64,ivborw0kggoaaaansuheugaaacaaaaagcaya" + "aabzenr0aaaasuleqvryhe3o0qkaiawd0eyqe3q993aq3cbsukpygfsnty" + "n5ugbqpk0baadgp0brdwxwlweaaaaagpsa3rzdaaaaahgpcgrpganzq2fg" + "bwrr9aaaaabjru5erkjggg%3d%3d", "text"); globals functions set(data, datatype) replace the contents of the user's clipboard with the provided data.
url - Archive of obsolete content
if base
64 is true, the data property is encoded using base-
64 encoding.
... base
64 defines the encoding for the value in data property.
...if the uri given to the constructor contains base
64 parameter, this string is decoded.
Display a Popup - Archive of obsolete content
the add-on consists of seven files: package.json: created when you run jpm init index.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-1
6.png, icon-32.png, and icon-
64.png: icons for the button in three different sizes the "index.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it.
... var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "1
6": "./icon-1
6.png", "32": "./icon-32.png", "
64": "./icon-
64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
...y.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-1
6.png icon-32.png icon-
64.png try it out: "index.js" is saved in the top level, and the other five files go in your add-on's data directory: my-addon/ data/ get-text.js icon-1
6.png icon-32.png icon-
64.png text-entry.html index.js run the add-on, click the button, and you should see the panel.
Getting Started (jpm) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "1
6": "./icon-1
6.png", "32": "./icon-32.png", "
64": "./icon-
64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root.
... next, create a directory called "data" in your add-on's root, mkdir data and save these three icon files to the "data" directory: icon-1
6.png icon-32.png icon-
64.png back at the command prompt, type: jpm run this is the jpm command to run a new instance of firefox with your add-on installed.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "1
6": "./icon-1
6.png", "32": "./icon-32.png", "
64": "./icon-
64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute jpm run again.
Getting started (cfx) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "1
6": "./icon-1
6.png", "32": "./icon-32.png", "
64": "./icon-
64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file.
... next, save these three icon files to the "data" directory: icon-1
6.png icon-32.png icon-
64.png back at the command prompt, type: cfx run this is the sdk command to run a new instance of firefox with your add-on installed.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "1
6": "./icon-1
6.png", "32": "./icon-32.png", "
64": "./icon-
64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute cfx run again.
File I/O - Archive of obsolete content
fostream.init(file, 0x02 | 0x08 | 0x20, 0
666, 0); // write, create, truncate // in a c file operation, we have no need to set file mode with or operation, // directly using "r" or "w" usually.
... createinstance(components.interfaces.nsilocalfile); afile.initwithpath( "/tmp/mypicture.png" ); afile.createunique(components.interfaces.nsifile.normal_file_type, 0
600); var stream = components.classes["@mozilla.org/network/safe-file-output-stream;1"].
... createinstance(components.interfaces.nsifileoutputstream); stream.init(afile, 0x04 | 0x08 | 0x20, 0
600, 0); // readwrite, create, truncate stream.write(pngbinary, pngbinary.length); if (stream instanceof components.interfaces.nsisafeoutputstream) { stream.finish(); } else { stream.close(); } more there are more methods and properties on nsifile and nsilocalfile interfaces; please refer to their documentation for more details.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
look something like this: <?xml 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>myextension@mycompany.com</em:id> <em:version>0.1</em:version> <em:targetapplication> <!-- firefox --> <description> <em:id>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.0+</em:minversion> <em:maxversion>1.0+</em:maxversion> </description> </em:targetapplication> <!-- front-end metadata --> <em:name>my first extension</em:name> <em:description>just an example.</em:description> <em:creator>allpeers.com</em:creator> <em:homepageurl>http://www.allpeers.com/blog/</em:homepage...
... building for multiple platforms todo original document information author: matthew gertner - july 2
6, 2005.
... permission granted to migrate in jan 200
6, including permission to relicense under the cc:by-sa.
Jetpack Processes - Archive of obsolete content
note: the above statement is not currently true, as js-ctypes is now provided to jetpack processes as of bug 5885
63.
... a mechanism to optionally disable this feature has been proposed in bug
614351.
... history see bug 55
684
6 and bug 578821 for details.
Extensions support in SeaMonkey 2 - Archive of obsolete content
the code for that will look something like this: <em:targetapplication> <!-- seamonkey --> <description> <em:id>{92
650c4d-4b8e-4d2a-b7eb-24ecf4f
6b
63a}</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 = "{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}"; const thunderbird_id = "{3550f703-e582-4d05-9a08-453d09bdfdc
6}"; const seamonkey_id = "{92
650c4d-4b8e-4d2a-b7eb-24ecf4f
6b
63a}"; 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) { // runni...
...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={ec8030f7-c20a-4
64f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc
6} overlay chrome://navigator/content/navigator.xul chrome://myaddon/content/smoverlay.xul application={92
650c4d-4b8e-4d2a-b7eb-24ecf4f
6b
63a} ...
Adding preferences to an extension - Archive of obsolete content
e changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice) .getbranch("extensions.stockwatcher2."); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.refreshinformation(); window.setinterval(this.refreshinformation, 10*
60*1000); } }, our object has two member variables.
... // remove any whitespace from the end of 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.
... « previousnext » override chrome://myaddon/content/options.xul chrome://myaddon/content/oldoptions.xul application={ec8030f7-c20a-4
64f-9b0e-13a3a9e97384} 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.
Underscores in class and ID Names - Archive of obsolete content
the css1 specification, published in its final form in 199
6, did not allow for the use of underscores in class and id names unless they were "escaped." an escaped underscore would look something like this: p.urgent\_note {color: maroon;} this was not well supported by browsers at the time, however, and the practice has never caught on.
... netscape
6.x permits underscores and escaped underscores.
... internet explorer
6 for windows, published after the errata, permits underscores and escaped underscores.
Creating a dynamic status bar extension - Archive of obsolete content
we end up reloading data from each of the windows once in 10 minutes - fixing this by creating a js component responsible for communication with the server is a good idea for one of the future articles startup: function() { this.refreshinformation(); window.setinterval(this.refreshinformation, 10*
60*1000); }, this starts by calling our refreshinformation() function, which is responsible for fetching and displaying stock ticker information in the status bar panel.
...ring; // this gets rid of the end-of-line 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/200
6","1:3
6pm",-3.74,417.85,419.44,412.19,47
60215 we then parse the text.
MozOrientation - Archive of obsolete content
warning: this experimental api was removed in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3), when support for the standard deviceorientationevent was implemented.
... in firefox versions 3.
6, 4, and 5 gecko utilized mozorientation which was also built to support orientation data but with different apis from the specified deviceorientationevent.
... to normalize between the two you can do something like this: function orientationhandler(evt){ // for ff3.
6+ if (!evt.gamma && !evt.beta) { evt.gamma = -(evt.x * (180 / math.pi)); evt.beta = -(evt.y * (180 / math.pi)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation } window.addeventlistener('deviceorientation', orientationhandler, false); window.addeventlistener('mozorientation', orientationhandler, false); example window.addeventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the browser window as the events arrive.
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).
...the following xml datasources are used in this sample: http://web.archive.org/web/20090
624020048/http://devedge-temp.mozilla.org/central/dom/catalog-new_en.xml http://web.archive.org/web/20090218052509/http://devedge-temp.mozilla.org/central/xml/catalog-new_en.xml http://web.archive.org/web/20100913225355/http://devedge-temp.mozilla.org/central/css/catalog-new_en.xml http://web.archive.org/web/2009021805253
6/http://devedge-temp.mozilla.org/viewsource/catalog-new_en.xml data binder co...
...n>"); } </script> <!-- ***** this represents the container ***** --> <div style="margin-left:0px;border:1px solid #dddddd;" > <div style="padding:10px;" id="container"> </div> </div> </body> </html> original document information author(s): marcio galli, netscape communications; roger soares, intelinet.com.br; ian oeschger, netscape communications last updated date: published 1
6 may 2003 copyright information: copyright © 2001-2003 netscape.
List of Mozilla-Based Applications - Archive of obsolete content
mplex event processing platform seems to use xulrunner stylizer css editor css editor css editor with built-in firebug-like diagnostics and gecko 1.8 preview sun java enterprise system server products uses nss sundial browser with advanced domain name technology based on firefox surfeasy private and secure web browsing sweet1
6 apple ii computer emulator uses spidermonkey as a scriptable debugger for software running in the emulator mozilla sunbird/mozilla lightning calendar tabpress authoring tool talend open studo data integration software seems to use xulrunner talking clipboard text to speech software read epub books, web pages, chm, pdf, ms word, r...
... uox3 ultima online server-emulator uses mozilla spidermonkey verbosio xml editor no releases available verseminder bible passage app virgin media security security tools seems to use xulrunner virtualbox virtualization tool use xpcom as its component model on linux waterfox
64-bit variant of firefox based on firefox webissimo web browser based on xulrunner websecurify web application security testing environment wesabe money management tool automatic uploader is a xulrunner application that runs headless in xvfb wikipediaondvd and wikimedia by moulin offline versions of wikipedia blog post about projects ...
... 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/2007/0
6/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/4eb91
62c9c3054b0/1d4115b40373ca3b?lnk=raot http://www.ohloh.net/tags/xulrunner ...
cert_override.txt - Archive of obsolete content
example here is an example for a sha1-25
6 hash algorithm.
...some.website.com:443 oid.2.1
6.840.1.101.3.4.2.1 00:11:22:33:44:55:
66:77:88:99:aa:bb:cc:dd:ee:ff:ff:ee:dd:cc:bb:aa:99:88:77:
66:55:44:33:22:11:00 u aaaaaaaaaaaaaaabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa== fields fields are separated by a tab character.
... domainname:port : port 443 for https (ssl) hash algorithm oid sha1-25
6: oid.2.1
6.840.1.101.3.4.2.1 (most used) sha-384: oid.2.1
6.840.1.101.3.4.2.2 sha-512: oid.2.1
6.840.1.101.3.4.2.3 certificate fingerprint using previous hash algorithm one or more characters for override type: m : allow mismatches in the hostname u : allow untrusted certs (whether it's self signed cert or a missing or invalid issuer cert) t : allow errors in the validity time, for example, for expired or not yet valid certs certificate's serial number and the issuer name as a base
64 encoded string ...
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.
...a quick check of various user agents showed that title attribute contents were displayed as a "tooltip" in: gecko-based browsers (mozilla firefox, netscape
6+, etc.) internet explorer 5.5+/win internet explorer 5.x/mac safari opera
6.x+ of these, only ie/win treated alt text as a "tooltip"; the other browsers did not reproduce this behavior.
...meyer, netscape communications last updated date: published 1
6 aug 2002 copyright information: copyright © 2001-2003 netscape.
No Proxy For configuration - Archive of obsolete content
note: when ipv
6 support is added, additional addresses will need to be added and tested.
... communicator used "network.proxy.none" limitations no ipv
6 support - the backend stores ipv4 addresses as ipv
6, but ipv
6 formats are not supported.
...filter comparison notable bugs bug 172083 - [meta] proxy: "no proxy for" items bug 80917 - proxy: "no proxy" w/ form based ui bug 91587 - proxy: "no proxy for" default domain filtering fails w/ non-fqdn (e.g., http://web/) bug 201
685 - no proxy for: support ipv
6 address literals bug 13
6789 - proxy: no proxy ip entries do not block dns resolved ips bug 314712 - no proxy for: "hostname.domain.com" should block only "hostname.domain.com" bug 72444 - proxy: "bypass proxy server for local addresses" (ie pref) bug 2
60883 - "no proxy for" does not use fqdn wildcards "*" like ie bugzilla sources bug 17158 comment 21: the co...
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
there is no support for mozilla or ns
6.x yet.
... a note to developers if you intend to modify this control in any way then you must also change the clsid from {dbb2de32-
61f1-4f7f-beb8-a37f5bc24ee2} 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-4f7f-beb8-a37f5bc24ee2" 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 ...
Structure of an installable bundle - Archive of obsolete content
(>=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) /icon
64.png extension icon, for display in the add-ons manager,
64px ×
64px (>=2.0) /options.xul extension options, for display in the add-ons manager (>=7.0) ...
... for example: binary-component components/windows/mycomponent.dll abi=winnt_x8
6-msvc binary-component components/mac/mycomponent.dylib abi=darwin_x8
6-gcc3 binary-component components/mac/mycomponent
64.dylib abi=darwin_x8
6_
64-gcc3 binary-component components/linux/mycomponent.so abi=linux_x8
6-gcc3 this also means you can no longer have platform-specific preference files in your bundle.
...for example, if a plugin vendor wanted to make a plugin available for consumer computers running linux(of the form: /platform/linux*/), macintosh(of the form: /platform/darwin*/), and windows(of the form: /platform/win*/), it would provide the following files: /platform/linux_x8
6-gcc3/plugins/libmyplugin.so /platform/winnt_x8
6-msvc/plugins/myplugin.dll /platform/darwin_ppc-gcc3/plugins/libmyplugin.dylib because xpt files are not platform-specific, any associated xpt files would go in the generic components directory: /components/myplugin.xpt if an extension has non-binary platform-specific code (such as code which uses the windows registry from script), it can also u...
In-Depth - Archive of obsolete content
other sites which list mozilla specific css properties xulplanet.com [dead link, 2
6.03.13] mozilla-prefixed properties on the standard track 2
6.03.13 -moz-appearance makes a widget look like it's from your operating system.
...example: -moz-image-region: rect(1
68px
69px 189px 4
6px); -moz-opacity makes boxes semi-transparent.
...to cut the pieces out you need to define rectangles in the css file like this: #button-send { -moz-image-region: rect(294px 23px 315px 0px); } #button-send:hover { -moz-image-region: rect(294px 4
6px 315px 23px); } #button-send:hover:active { -moz-image-region: rect(294px
69px 315px 4
6px); } #button-send[disabled="true"] { -moz-image-region: rect(294px 92px 315px
69px) !important; } the properties for rect are listed in a clockwise fashion - top, right, bottom, left.
Installing Dehydra - Archive of obsolete content
v2.
68.
...you can skip the next section "building gcc 4.5" if you are using gcc 4.
6 or above.
...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://bug5599
64.bugzilla.mozilla.o....cgi?id=457
60
6 -o finish_decl.diff cd gcc-4.5.3 patch -p0 < ../finish_decl.diff # build gcc cd ..
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="575,418,821,418,821,455,
629,455,
629,484,575,484" href="#categorymanager" shape="poly"> <area alt="(12)" coords="539,133,583,1
63" href="#stream-converter"> <area alt="(11)" coords="485,133,537,1
63" href="#contenthandler"> <area alt="(9)" coords="445,132,484,1
65" href="#nsdocumentopeninfo::dispatchcontent"> <area alt="(8)" coords="405,133,439,1
62" href="#onstartrequest-innards"> <area alt="(7) onstartrequest()" coords="
639,...
...129,703,129,703,1
65,833,1
65,833,204,
639,204" href="#onstartrequest" shape="poly"> <area alt="(
6) asyncopen()" coords="
637,121,709,121,709,9
6,783,9
6,783,58,
637,58" href="#asyncopen" shape="poly"> <area alt="(5) open()" coords="311,30
6,432,371" href="#open"> <area alt="(4)" coords="90,384,127,417" href="#openuri-innards"> <area alt="(0) registercontentlistener()" coords="37,474,34
6,474,34
6,505,88,505,88,535,37,535" href="#registercontentlistener" shape="poly"> <area alt="(3) openuri() (nsuriloader)" coords="5,207,312,2
69" href="#openuri"> <area alt="(2)" coords="102,114,139,148" href="#internalload"> <area alt="(1) loaduri/onlinkclick" coords="77,5,449,59" href="#loaduri"> <area alt="nsiexternalhelperappservice" coords="527,305,839,339" href="#nsiexternalhelperappservice"> <area alt="category...
... manager" coords="
683,4
67,807,527" href="#nscategorymanager"> <area alt="nsdocumentopeninfo" coords="371,71,
635,185" href="#nsdocumentopeninfo"> <area alt="necko" coords="721,113,821,157" href="#necko"> <area alt="nsuriloader" coords="23,335,215,455" href="#nsuriloader"> <area coords="227,515,485,575" href="#nsiuricontentlistener"> <area alt="nsdocshell" coords="47,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.
JavaScript crypto - Archive of obsolete content
pkcs11_mech_rsa_flag = 0x1<<0; pkcs11_mech_dsa_flag = 0x1<<1; pkcs11_mech_rc2_flag = 0x1<<2; pkcs11_mech_rc4_flag = 0x1<<3; pkcs11_mech_des_flag = 0x1<<4; pkcs11_mech_dh_flag = 0x1<<5; //diffie-hellman pkcs11_mech_skipjack_flag = 0x1<<
6; //skipjack algorithm as in fortezza cards pkcs11_mech_rc5_flag = 0x1<<7; pkcs11_mech_sha1_flag = 0x1<<8; pkcs11_mech_md5_flag = 0x1<<9; pkcs11_mech_md2_flag = 0x1<<10; pkcs11_mech_random_flag = 0x1<<27; //random number generator pkcs11_pub_readable_cert_flag = 0x1<<28; //stored certs can be read off the token w/o logging in pkcs11_disable_flag...
..., 0x1<<2
6, 0x1<<29, and 0x1<<31 are reserved for internal use in mozilla.
...ccessfully added a module js_err_other = -1 // errors other than the following js_err_user_cancel_action = -2 // user aborted an action js_err_incorrect_num_of_arguments = -3 // calling a method w/ incorrect # of // arguments js_err_add_module = -5 // error adding a module js_err_bad_module_name = -
6 // the module name is invalid js_err_add_module_duplicate = -10 // the module being installed has the // same name as one of the modules that // has already been installed miscellaneous domstring random(in long numbytes); unimplementedyou can use window.crypto.getrandomvalues instead.
Java in Firefox Extensions - Archive of obsolete content
note: the global java object has been removed in gecko 1
6.0, so this page is out of date.
...the following approach is taken from the extension xquseme (note you must use the latest version, currently still in the sandbox, as prior versions only worked with liveconnect before java
6 update 11) which borrows some of the code of the java firefox extension in order to grant full privileges to java within a firefox extension, but it is easier to understand and doesn't require creation of a xpcom component.
...see also liveconnect overview https://jdk
6.dev.java.net/plugin2/#liveconnect https://jdk
6.dev.java.net/plugin2/liveconnect/ http://forums.sun.com/thread.jspa?th...
66932&start=15 ...
Modularization techniques - Archive of obsolete content
for those who like gory details, their structure is this: struct nsid { pruint32 m0; pruint1
6 m1, m2; pruint8 m3[8]; }; frequently you see them represented as strings, like this: {221ffe10-ae3c-11d1-b
66c-00805f8a2
67
6} to initialize an id struct you declare them like this: id = {0x221ffe10, 0xae3c, 0x11d1, {0xb
6, 0x
6c, 0x00, 0x80, 0x5f, 0x8a, 0x2
6, 0x7
6}}; why the b
66c couplet gets broken up and grouped with the last set of bytes is probably a footnote somewhere.
... #include "nsisupports.h" // {57ecad90-ae1a-11d1-b
66c-00805f8a2
67
6} #define ns_isample_iid \ {0x57ecad90, 0xae1a, 0x11d1, \ {0xb
6, 0x
6c, 0x00, 0x80, 0x5f, 0x8a, 0x2
6, 0x7
6}} /* * 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-b
66c-00805f8a2
67
6} #define ns_sample_cid \ {0xd3944dd0, 0xae1a, 0x11d1, \ {0xb
6, 0x
6c, 0x00, 0x80, 0x5f, 0x8a, 0x2
6, 0x7
6}} 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.
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 | // +-----+ // firs...
... case #
6: the rect shares the bottom and height with the bandrect,so just add the rect to the band.
... 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.
Table Cellmap - Archive of obsolete content
83 union { 84 nstablecellframe* morigcell; 85 long mbits; 8
6 }; the idea behind this construction is a entry in the cellmap can be either the origin of a row- or colspan (a cell cell without a defined row- or colspan attribute assumes 1 as a default value), or a entry which is only covered by a row- or colspan.
... insertrowsbefore firstrow=0 ***start table dump*** mcolwidths= row(0)=027
63344 cell(0)=027
63528 cell(0)=027
6381c row(0)=027
63940 cell(0)=027
63990 cell(0)=027
63ab4 ***** start table cell map dump ***** 0235
66b0 cols array orig/span-> 0235
66b0 ***** start group cell map dump ***** 0235
65b0 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)=027
63344 cell(0)=027
63528 cell(1)=027
6381c row(1)=027
63940 cell(0)=027
63990 cell(1)=027
63ab4 ***** start table cell map dump ***** 0235
66b0 cols array orig/span-> 0235
66b00=2/0 1=2/0 ***** start group cell map dump ***** 0235
65b0 maprowcount=2 tablerowcount=2 row 0 : c0,0 c0,1 row 1 : c1,0 c1,1 c0,0=027
63528(0) c0,1=027
6381c(1) c1,0=027
63990(0) c1,1=027
63ab4(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.
Using gdb on wimpy computers - Archive of obsolete content
if your computer has less than 25
6 mb of memory, your computer will become unhappy as gdb loads mozilla's shared libraries.
...this gdb was configured as "i38
6-redhat-linux"...
...you can see what libraries you already have loaded with the info sharedlibrary command: (gdb) info shar from to syms read shared object library 0x4044a000 0x4044d08c yes /lib/libdl.so.2 0x4044e000 0x4048ff90 yes /usr/lib/libstdc++-libc
6.1-1.so.2 0x40491000 0x404ad9d8 yes /lib/libm.so.
6 0x404ae000 0x405a285c yes /lib/libc.so.
6 0x40000000 0x40013ed0 yes /lib/ld-linux.so.2 0x40
607000 0x40
61554c no /usr/lib/libz.so.1 0x407
63000 0x4088af74 no /usr/lib/libgtk-1.2.so.0 0x4088b000 0x408c04d4 no /usr/lib/libgdk-1.2.so.0 [...] gdb is taking forever to load a shared library.
Writing textual data - Archive of obsolete content
some character encodings (utf-8, utf-1
6, utf-32) can represent "all" characters (the full repertoire of unicode) while others can only represent a subset of the full repertoire.
...passing 0 ensures that data will be immediately written to the underlying stream; however, for better perfomance you should pass a value like 409
6 instead.
... alternative ways usable from javascript do not support character encodings that use embedded nulls (such as utf-1
6 and utf-32).
Building accessible custom components in XUL - Archive of obsolete content
<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/1
6/05" flex="1"/> <label value="03/1
6/05" flex="1"/> <label value="03/1
6/05" flex="1"/> <label value="03/1
6/05" flex="1"/> </co...
...tion x2:role="wairole:rowheader" value="entry #"/> <description x2:role="wairole:rowheader" value="1"/> <description x2:role="wairole:rowheader" value="2"/> <description x2:role="wairole:rowheader" value="3"/> <description x2:role="wairole:rowheader" value="4"/> <description x2:role="wairole:rowheader" value="5"/> <description x2:role="wairole:rowheader" value="
6"/> <description x2:role="wairole:rowheader" value="7"/> </column> <column flex="1"> <description x2:role="wairole:columnheader" value="date"/> <label x2:role="wairole:gridcell" value="03/14/05" flex="1"/> <label x2:role="wairole:gridcell" value="03/15/05" flex="1"/> <label x2:role="wairole:gridcell" value="03/15/05" flex="1"/> <label x2:role="wairole:gr...
...idcell" value="03/1
6/05" flex="1"/> <label x2:role="wairole:gridcell" value="03/1
6/05" flex="1"/> <label x2:role="wairole:gridcell" value="03/1
6/05" flex="1"/> <label x2:role="wairole:gridcell" value="03/1
6/05" flex="1"/> </column> <column flex="1"> <description x2:role="wairole:columnheader" value="expense"/> <label x2:role="wairole:gridcell" value="conference fee" flex="1"/> <label x2:role="wairole:gridcell" value="lodging" flex="1"/> <label x2:role="wairole:gridcell" value="dinner" flex="1"/> <label x2:role="wairole:gridcell" value="lodging" flex="1"/> <label x2:role="wairole:gridcell" value="breakfast" flex="1"/> <label x2:role="wairole:gridcell" value="lunch" flex="1"/> <label x2:role="wairole:gridcell" value="di...
Using Spacers - Archive of obsolete content
for example, if a box is 200 pixels wide and contains two flexible buttons, the first 50 pixels and the other 90 pixels, there will be
60 pixels of space left over.
...flex="10"/> <button label="cancel" flex="1"/> example 3: <button label="find" flex="2"/> <button label="replace"/> <button label="cancel" flex="4"/> example 4: <button label="find" flex="2"/> <button label="replace" flex="2"/> <button label="cancel" flex="3"/> example 5: <html:div> <button label="find" flex="2"/> <button label="replace" flex="2"/> </html:div> example
6: <button label="find" flex="145"/> <button label="replace" flex="145"/> example 1 in this case the flexibility is divided up evenly between both buttons.
... example
6 because the flex values are the same on both buttons, they will flex equally.
XUL Questions and Answers - Archive of obsolete content
the following bugs were reported on this issue: bug 22942, bug 133
698.
...he said the code will be open-source, but it is not released yet (as of oct 200
6).
... if you have a similar code base as the following: onbookmarkcontextmenu: function(event, id) { document.getelementbyid("bookmarkpopup").showpopup(document.getelementbyid(id), event.screenx +
6, event.screeny +
6, "popup", "bottomright", "bottomright"); } use the hidepopup() function to solve this issue.
XULRunner 1.9.2 Release Notes - Archive of obsolete content
xulrunner 1.9.2.x is built from the same source code snapshot as firefox 3.
6.x.
... current version the current version of xulrunner 1.9.2 is 3.
6.2
6, matching firefox 3.
6.2
6 detailed release notes can be found here.
... linux unpack the tarball to a new directory using tar -xjf xulrunner-3.
6.2
6.en-us.linux-i
68
6.tar.bz2.
Application Update - Archive of obsolete content
application settings you will need to configure the following settings in your application: branding the update process uses branding information, setup branding for your application as described here: xulrunner tips icons the updater process for linux systems requires updater.png to be in your <application folder>/icons/, see https://bugzilla.mozilla.org/show_bug.cgi?id=70
684
6 preferences // whether or not app updates are enabled pref("app.update.enabled", true); // this preference turns on app.update.mode and allows automatic download and // install to take place.
...//pref("app.update.url.override", ""); // interval: time between checks for a new version (in seconds) // default=1 day pref("app.update.interval", 8
6400); // interval: time before prompting the user to download a new version that // is available (in seconds) default=1 day pref("app.update.nagtimer.download", 8
6400); // interval: time before prompting the user to restart to install the latest // download (in seconds) default=30 minutes pref("app.update.nagtimer.restart", 1800); // interval: when all registered timers shou...
...ld be checked (in milliseconds) // default=5 seconds pref("app.update.timer",
600000); // whether or not we show a dialog box informing the user that the update was // successfully applied.
Debugging a XULRunner Application - Archive of obsolete content
see bug 12441
63.
... debuggerserver.addbrowseractors("myxulrunnerappwindowtype"); } debuggerserver.openlistener(
6000); for xulrunner version 37+ 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(); a...
... 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:xvlr7odilbyhn
6v7+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...
Getting started with XULRunner - Archive of obsolete content
here is the application root chrome.manifest: manifest chrome/chrome.manifest step
6: set up preferences the prefs.js file tells xulrunner the name of the xul file to use as the main window.
... windows from a windows command prompt opened to the myapp folder, we should be able to execute this: c:\path\to\xulrunner.exe application.ini of course, if you opted to install xulrunner then you could simply do %programfiles%\xulrunner.exe application.ini or on
64 bit systems %programfiles(x8
6)%\xulrunner.exe application.ini note: you can also install your application when you're finished debugging it.
... next » original document information author: mark finkle, october 2, 200
6 ...
XULRunner tips - Archive of obsolete content
//mozapps/content/extensions/extensions.xul?type=themes"); pref("xpinstall.dialog.progress.chrome", "chrome://mozapps/content/extensions/extensions.xul?type=extensions"); pref("xpinstall.dialog.progress.type.skin", "extension:manager-themes"); pref("xpinstall.dialog.progress.type.chrome", "extension:manager-extensions"); pref("extensions.update.enabled", true); pref("extensions.update.interval", 8
6400); pref("extensions.dss.enabled", false); pref("extensions.dss.switchpending", false); pref("extensions.ignoremtimechanges", false); pref("extensions.logging.enabled", false); pref("general.skins.selectedskin", "classic/1.0"); // nb these point at amo pref("extensions.update.url", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmoreextensionsurl", "chrome://moza...
...in addition, a branding content package must be registered to include the application logos: content branding chrome/branding/ 3 files should be provided in this folder: about.png, icon48.png and icon
64.png.
... \myapp\extensions{972ce4c
6-7e08-4474-a285-3208198ce
6fd}\install.rdf it should also have an <em:internalname>classic/1.0</em:internalname> as that is the default theme in firefox.
mozilla.dev.platform FAQ - Archive of obsolete content
0x0001
6b50 in xre_createappdata () a: when you <tt>--disable-libxul</tt>, the xpcom glue doesn't have information about how to load all the dependent libraries like <tt>libgfx.dylib</tt>.
... in order to use xr successfully in <tt>--disable-libxul</tt> mode, you have to setup dyld_library_path to include <tt>/library/frameworks/xul.framework/versions/1.9a1</tt> - benjamin smedberg, fri, oct 20 200
6 9:12 am q: when i try to build a completely standalone xul app on os x (10.4.8).
... visual studio express 2005 q: when i try to run xulrunner-stub.exe i get the error "this application failed to start because msvcr80.dll was not found." a: see bug 350
61
6 ...
Archived Mozilla and build documentation - Archive of obsolete content
porting nspr to unix platforms last modified 1
6 july 1998 priority content update: i've removed documents from this list that have been migrated into the wiki.
...resources are identified by uri "uniform resource identifier" (taken from rfc 239
6): urischeme list of mozilla supported uri schemes using addresses of stack variables with nspr threads on win1
6 this is a cautionary note that may be old information for some of you.
... xpinstall xpjs components proposal draft 1.0 xre xtech 2005 presentations xtech 200
6 presentations xul explorer xul explorer is a xulrunner application that provides an easy way to experiment with xul.
Format - Archive of obsolete content
summary: mozilla.dev.planning - july 17-23, 200
6 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 - 200
6/07/2
6 discussions firefox survey feedback requested rachel werner (mozilla corp marketing intern) requested feedback on a proposed user survey.
... meetings mozilla project weekly status meeting - 200
6/07/24 1:00p pdt (last meeting notes) firefox 2 (bon echo) status meeting - 200
6/07/25 11:00a pdt (last meeting notes) firefox 3 (gran paradiso) status meeting - 200
6/07/2
6 11:00a pdt ...
JS-Engine FAQ - Archive of obsolete content
newly created threads in js from mozilla_1_8_branch causes to hang in windows patch from bug 351
602 should fix the problem.
... to write wrappers in pure javascript to interface with any c library on the system there are mechanisms such as xpcshell, wxjs, jsdb, jsni coding spidermonkey in c check out this tutorial how to compile tamarin on linux/x8
6 there is a patch that allows you to compile it.
...<tt>rhino 1.
6 release 2 2005 09 19</tt>.
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
platform-specific files gecko 1.9.2 (firefox 3.
6) and earlier prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), it was possible to package multiple plugin libraries for different operating systems into a single xpi bundle.
... in the xpi you can use the following structure: platform/ linux_x8
6-gcc3/ plugins/ libplugin.so darwin_ppc-gcc3/ plugins/ libplugin.dylib more specific information can be found in the platform-specific subdirectories documentation.
...or a plugin the manifest only needs to be very simple: <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>mypluginid@myplugin.com</em:id> <em:name>my plugin</em:name> <em:version>1.0</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>4.0.*</em:maxversion> </description> </em:targetapplication> <em:unpack>true</em:unpack> </description> </rdf> this contains 5 required pieces of information.
The First Install Problem - Archive of obsolete content
at present plugins registered using the hkey_current_user\software\mozillaplugins\ tree are ignored by firefox (bug 2930
62) but this is fixed in trunk builds (bug 2930
62).
...the bugzilla bug open on mozilla and netscape
6.x is bug 44973.
... (it should be noted that the "classid" attribute discussion here is a potential future direction; it doesn't yet work, at least as of firefox 3.
6.8.
Theme changes in Firefox 2 - Archive of obsolete content
browser/feeds/feedicon1
6.png new file; the 1
6x1
6 pixel version of the rss feed icon.
... browser/safebrowsing/close1
6x1
6.png new file; this is the icon displayed in the safe browsing warning window as a close box for the window.
... browser/safebrowsing/warning1
6x1
6.png new file; this is the 1
6x1
6 pixel version of the warning icon displayed in the url bar when the safe browsing warning window is displayed.
Theme changes in Firefox 3 - Archive of obsolete content
the rule that's needed to show and hide the go button and other location bar icons is: #urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) , #urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button { visibility: collapse; } images to add add the following images: chrome://global/skin/icons/information-1
6.png used when presenting information notices.
... chrome://global/skin/icons/warning-1
6.png used when displaying warnings.
... image changes chrome://global/skin/icons/loading_1
6.gif was replaced with chrome://global/skin/icons/loading_1
6.png .
Using workers in extensions - Archive of obsolete content
l1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var output = httprequest.responsetext; if (output) { postmessage(output.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); }, 10*
60*1000); onmessage = function(event) { if (event.data) { symbol = event.data.touppercase(); } refreshinformation(); } when the worker thread is started, the main body of this code (in lines 2
6-35) is executed.
... it starts by setting up an interval handler (in lines 2
6-28) that calls refreshinformation() every 10 minutes.
... the refreshinformation() method is fairly similar to the previous versions, with two notable exceptions: if the ticker symbol has not been set yet, an exception is thrown (lines 4-
6).
Processing XML with E4X - Archive of obsolete content
first introduced in javascript 1.
6, e4x introduces a native xml object to the javascript language, and adds syntax for embedding literal xml documents in javascript code.
... we can also use the for each...in statement introduced in javascript 1.
6 as part of javascript's e4x support: for each (var lang in languages.lang) { alert(lang); } for each...in can also be used with regular javascript objects to iterate over the values (as opposed to the keys) contained in the object.
... consequently, filters can also run against the value of a single node contained within the current element: var people = <people> <person> <name>bob</name> <age>32</age> </person> <person> <name>joe</name> <age>4
6</age> </person> </people>; alert(people.person.(name == "joe").age); // alerts 4
6 filter expressions can even use javascript functions: function over40(i) { return i > 40; } alert(people.person.(over40(parseint(age))).name); // alerts joe handling namespaces e4x is fully namespace aware.
Error.number - Archive of obsolete content
the upper 1
6-bit word is the facility code, and the lower word is the error code.
... var x = y; } catch(e) { document.write ("error code: "); document.write (e.number & 0xffff) document.write ("<br />"); document.write ("facility code: ") document.write(e.number>>1
6 & 0x1fff) document.write ("<br />"); document.write ("error message: ") document.write (e.message) } example the output of this code is as follows.
... 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.
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.
...="text/javascript"> <!-- function 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.
Archived JavaScript Reference - Archive of obsolete content
see also the newer version of date.prototype.tolocaledatestring().ecmascript 201
6 to es.next support in mozillaexpression closuresexpression closures are a shorthand function syntax for writing simple functions.for each...inthe for each...in statement iterates a specified variable over all values of object's properties.
...do not use it!handler.enumerate()the handler.enumerate() method used to be a trap for for...in statements, but has been removed from the ecmascript standard in es201
6 and is deprecated in browsers.legacy generator functionthe legacy generator function statement declares legacy generator functions with the specified parameters.legacy generator function expressionthe function keyword can be used to define a legacy generator function inside an expression.
...you can use the more general proxy object instead.reflect.enumerate()the static reflect.enumerate() method used to return an iterator with the enumerable own and inherited properties of the target object, but has been removed in ecmascript 201
6 and is deprecated in browsers.string.prototype.quote()the non-standard quote() method returns a copy of the string, replacing various special characters in the string with their escape sequences and wrapping the result in double-quotes (").
LiveConnect - Archive of obsolete content
older versions of gecko included special support for the java<->javascript bridge (such as the java and packages global objects), but as of mozilla 1
6 (firefox 1
6 / thunderbird 1
6 / seamonkey 2.13) liveconnect functionality is provided solely by the oracle's java plugin.
... removal of java and packages global objects in mozilla 1
6 see bug 748343 for the rationale and workarounds.
... mailing list newsgroup rss feed related topics javascript, plugins older notes (please update or remove as needed.) while the bloated liveconnect code in the mozilla source was removed in version 1.9.2 of the platform (see bug 442399), its former api has been restored (see also the specification and this thread) (building on npapi?), and as of java
6 update 12, extensions as well as applets can make use of this restored api.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
listing
6 shows the beginning of our application which takes advantage of some of these concepts.
... listing
6 - creating the user interface <link href="/jaxer_examples/js/ext-2.1/resources/css/ext-all.css" type="text/css" rel="stylesheet"/> <script src="/jaxer_examples/js/ext-2.1/adapter/ext/ext-base.js"/> <script src="/jaxer_examples/js/ext-2.1/ext-all.js"/> <link href="/jaxer_examples/css/main.css" type="text/css" rel="stylesheet"/> <script runat="both" src="/jaxer_examples/js/validatecomments.js"/> <script> var txt_name; var txt_email; var txt_message; var btn_comments; var form_comments; ext.onready( function() { // create the name text field txt_name = new ext.form.textfield({ name: "name", fieldlabel: "name", width: 200 }); // create the e-mail text field txt_email = new ext.form.textfield({ name: "email", fieldlabel: "e-mail", width:...
... = new ext.button({ text: "submit", fieldlabel: "", handler: formhandler }); // create the form panel, attach the inputs form_comments = new ext.form.formpanel({ labelalign: "right", width: 400, title: "comments", items: [ txt_name, txt_email, txt_message, btn_comments ], renderto: "form-comments" }); }); </script> the code in listing
6 starts by hooking in the ext js library which is used to produce the ui elements of the form.
Building Mozilla XForms - Archive of obsolete content
want to build: firefox version gecko/toolkit version source code notes status firefox 2.0 gecko 1.8.1 cvs, branch mozilla_1_8_branch not developed any more last release: 0.8.5ff2 firefox 3.0 gecko 1.9.0 cvs, branch head not developed 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.
...for xforms, you will need to add the following line: ac_add_options --enable-extensions="default,xforms" # if you're using a mozilla source before 2010-11-0
6 (e.g.
... an old firefox 3.
6 release) use this instead (see bug
601570 for details): ac_add_options --enable-extensions="default,xforms,schema-validation" a complete .mozconfig file for a release build might look like that: .
Implementing controls using the Gamepad API - Game development
the most popular gamepads right now are those from the xbox 3
60, xbox one, ps3 and ps4 — they have been heavily tested and work well with the gamepad api implementation in browsers across windows and mac os x.
...the code discussed in this article was tested with a few gamepads, but the author's favorite configuration is a wireless xbox 3
60 controller and the firefox browser on mac os x.
...y by the user or due to inactivity.) in the demo, the gamepadapi object is used to store everything related to the api: var gamepadapi = { controller: {}, turbo: false, connect: function() {}, disconnect: function() {}, update: function() {}, buttonpressed: function() {}, buttons: [], buttonscache: [], buttonsstatus: [], axesstatus: [] }; the buttons array contains the xbox 3
60 button layout: buttons: [ 'dpad-up','dpad-down','dpad-left','dpad-right', 'start','back','axis-left','axis-right', 'lb','rb','power','a','b','x','y', ], this can be different for other types of gamepads like the ps3 controller (or a no-name, generic one), so you have to be careful and not just assume the button you're expecting will be the same button you'll actually get.
Build the brick field - Game development
« previousnext » this is the 9th step out of 1
6 of the gamedev phaser tutorial.
...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 row and column of bricks.
... 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.top; newbrick = game.add.sprite(brickx, bricky, 'brick');...
CSS pixel - MDN Web Docs Glossary: Definitions of Web-related terms
by definition, this is the physical size of a single pixel at a pixel density of 9
6 dpi, located an arm's length away from the viewer's eyes.
... as such, it generally suffices to say that when the unit px is used, the goal is to try to have the distance 9
6px equal about 1 inch on the screen, regardless of the actual pixel density of the screen.
... in other words, if the user is on a phone with a pixel density of 2
66 dpi, and an element is placed on the screen with a width of 9
6px, the actual width of the element would be 2
66 device pixels.
Endianness - MDN Web Docs Glossary: Definitions of Web-related terms
also, older mac computers using
68000-series and powerpc microprocessors formerly used big-endian.
... examples with the number 0x12345
678 (i.e.
... 305 419 89
6 in decimal): little-endian: 0x78 0x5
6 0x34 0x12 big-endian: 0x12 0x34 0x5
6 0x78 mixed-endian (historic and very rare): 0x34 0x12 0x78 0x5
6 ...
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f7
6707; border-radius: 5px; background-color: #fff4e
6; 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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; 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 #f7
6707; border-radius: 5px; background-color: #fff4e
6; 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:...
JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
javascript enjoyed immediate success and internet explorer 3.0 introduced javascript support under the name jscript in august 199
6.
... in november 199
6, netscape began working with ecma international to make javascript an industry standard.
... since then, the standardized javascript is called ecmascript and specified under ecma-2
62, whose latest (tenth, es2019) edition is available as of june 2019.
What is accessibility? - Learn web development
in terms of statistics, the world health organization estimates that "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 24
6 have low vision." (see visual impairment and blindness).
... hearing-impaired people also represent a significant userbase — "4
66 million people worldwide have disabling hearing loss", says the world health organization's deafness and hearing loss fact sheet.
...centers for disease control and prevention disability and functioning (noninstitutionalized adults 18 years and over) reports the usa "percent of adults with any physical functioning difficulty: 1
6.1%".
Organizing your CSS - Learn web development
some developers put all of the rules onto a single line, like so: .box { background-color: #5
67895; } h2 { background-color: black; color: white; } other developers prefer to break everything onto a new line: .box { background-color: #5
67895; } h2 { background-color: black; color: white; } css doesn't mind which one you use.
... $base-color: #c
6538c; .alert { border: 1px solid $base-color; } once compiled to css, you would end up with the following css in the final stylesheet.
... .alert { border: 1px solid #c
6538c; } compiling component stylesheets i mentioned above that one way to organise css is to break down stylesheets into smaller stylesheets.
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>197
6</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>197
6</td> <td>
6</td> <td>london calling</td> </tr> ...
...the formula 2n-1 would select all the odd numbered children (1, 3, 5, etc.) and the formula 2n would select all the even numbered children (2, 4,
6, etc.) we've used the odd and even keywords in our code, which do exactly the same things as the aforementioned formulae.
...to do this, add the following to the bottom of your style.css file: /* caption */ caption { font-family: 'rock salt', cursive; padding: 20px; font-style: italic; caption-side: bottom; color: #
666; text-align: right; letter-spacing: 1px; } there is nothing remarkable here, except for the caption-side property, which has been given a value of bottom.
Example 1 - Learn web development
--------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; 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.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : lin...
... --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; 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 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcf...
... --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; 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.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */ background : #f0f0f0; background : ...
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: 1
6px; } .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; fun...
...way from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>a link to my favorite website.</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: 1
6px; } .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; func...
...m the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>this is my page</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; } h1 { color: blue; } h2 { font-size: 1
6px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } img { max-width: 100%; } 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 usere...
Storing the information you need — Variables - Learn web development
numbers you can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.45
6 (also called floats or floating point numbers).
...so for example, a simple case would be: let iamalive = true; whereas in reality it would be used more like this: let test =
6 < 3; this is using the "less than" operator (<) to test whether
6 is less than 3.
... as you might expect, it returns false, because
6 is not less than 3!
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/7
6cc90c43a37452e8c7f70521f88b
698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/0
6-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/0
6-stores remember to run npm install && npm run dev to start your app in development mode.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/d1fa84a5a44943
66b179c87395940039?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.
Setting up your own test automation environment - Learn web development
let driver = new webdriver.builder() .forbrowser('firefox') .build(); note that it is possible to set specific configuration options for browsers to be tested, for example you can set a specific version and os to test in the forbrowser() method: let driver = new webdriver.builder() .forbrowser('firefox', '4
6', 'mac') .build(); you could also set these options using an environment variable, for example: selenium_browser=firefox:4
6:mac let's create a new test to allow us to explore this code as we talk about it.
...'{username}'; // accesskey: accesskey can be generated from automation dashboard or profile section const key = '{accesskey}'; // gridurl: gridurl can be found at automation dashboard const grid_host = 'hub.lambdatest.com/wd/hub'; function searchtextongoogle() { // setup input capabilities const capabilities = { platform: 'windows 10', browsername: 'chrome', version: '
67.0', resolution: '1280x800', network: true, visual: true, console: true, video: true, name: 'test 1', // name of the test build: 'nodejs build' // name of the build }; // url: https://{username}:{accesstoken}@hub.lambdatest.com/wd/hub const gridurl = 'https://' + username + ':' + key + '@' + grid_host; // setup and build selenium driver obj...
... give it the following contents: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; // input capabilities let capabilities = { 'browsername' : 'firefox', 'browser_version' : '5
6.0 beta', 'os' : 'os x', 'os_version' : 'sierra', 'resolution' : '1280x1024', 'browserstack.user' : 'your-user-name', 'browserstack.key' : 'your-access-key', 'browserstack.debug' : 'true', 'build' : 'first build' }; let driver = new webdriver.builder().
Introducing a complete toolchain - Learn web development
here is an example eslint output: ./my-project/src/index.js 2:8 error 'react' is defined but never used no-unused-vars 22:20 error 'body' is defined but never used no-unused-vars 9
6:19 error 'b' is defined but never used no-unused-vars ✖ 3 problems (3 errors, 0 warnings) note: we'll install eslint in the next section; don't worry about this for now.
... next up, we’ll configure eslint — create another file in the root of your will-it-miss directory called .eslintrc.json, and give it the following contents: { "env": { "es
6": true, "browser": true }, "extends": "eslint:recommended", "parseroptions": { "ecmaversion":
6, "sourcetype": "module" }, "rules": { "no-console": 0 } } the above eslint configuration says that we want to use the "recommended" eslint settings, that we're going to allow usage of es
6 features (such as map() or set()), that we can use module import statements, and tha...
... the final config file should look like this — add in the bolded parts and save it: { "env": { "es
6": true, "browser": true }, "extends": ["eslint:recommended", "plugin:react/recommended"], "parseroptions": { "ecmaversion":
6, "sourcetype": "module", "ecmafeatures": { "jsx": true } }, "plugins": ["react"], "rules": { "semi": "error", "no-console": 0, "react/jsx-uses-vars": "error" } } as the configuration now uses a plugin called "react", t...
Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/200
6/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="1
6" height="1
6">data:image/x-icon;base
64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yah...
... <searchplugin xmlns="http://www.mozilla.org/200
6/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="1
6" height="1
6">data:image/x-icon;base
64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk
6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7f...
...fu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx
6b8w7od
6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa
6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%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...
Debugging on Mac OS X
official builds at this time, official builds of firefox
69 and later are notarized.
... uplifts to firefox
68 and esr
68 to enable notarization are planned.
...these directions were written using xcode
6.3.1 complete all the steps above under "creating the project" from the "product" menu, ensure the scheme you created is selected under "scheme", then choose "scheme > edit scheme" in the resulting popup, click "duplicate scheme" give the resulting scheme a more descriptive name than "copy of scheme" select "run" on the left-hand side of the settings window, then select the "info" tab.
Eclipse CDT
to quickly switch to a recently viewed document use cmd-f
6/ctrl-f
6.
...(having to move the mouse slightly is eclipse bug 2
6873).
... fixing eclipse bug 381
601 would considerably reduce the impact of the "unresolved inclusion" issue.
Obsolete Build Caveats and Tips
to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.
6) code for the firefox 3.
6 (gecko 1.9.2) release lives in releases/mozilla-1.9.2.
... warning: due to a bug in old versions of mozillabuild (prior to 1.
6), if you download version 7.1 of the windows 7 sdk (which is the current version available), your build will fail, often while building cairo with "ocidl.h" errors.
... gecko 1.9.2 through 11: if you would like to use this sdk, add ac_add_options --with-windows-version=
600 to your .mozconfig.
Displaying Places information using views
warning: until bug 47
6952 is fixed, you may experience problems using some of these methods in conjunction with the place attribute and property.
... warning: until bug 47
6952 is fixed, you may experience problems using some of these properties in conjunction with the place attribute and property.
... in firefox 3.
6 and earlier requires gecko 1.9.2(firefox 3.
6 / thunderbird 3.1 / fennec 1.0) create a built-in menu view by setting the type attribute to "places" on an empty menupopup element (which would be a child of some parent menu element): <menu> <menupopup type="places" /> </menu> the place attribute or property should be set on the menupopup as well.
Gecko SDK
download link latest gecko (latest firefox) gecko 1.9.2 (firefox 3.
6) gecko 1.9.1 (firefox 3.5) gecko 1.9 (firefox 3.0) gecko 1.8 (firefox 1.5 and 2.0) windows download download download download download mac x8
6_
64 download n/a n/a n/a n/a mac i38
6 download download download download n/a mac ppc n/a download download download download linux x8
6_
64 ...
...download n/a n/a n/a n/a linux i
68
6 download download download download download the sdk is not officially released for other platforms; if you need it, you will probably need to build it yourself.
...on
64-bit versions of mac os x, you'll need to install libidl with the +universal flag.
Gecko Keypress Event
gecko 1.9 key handling changed significantly after beta 5 (bug 359
638, bug 429510 and the bugs on which they depend).
... (bug 359
638 partially addressed this issue by trying both characters on the key, but bug 303192 would provide a complete solution.) solution the following rules apply: key handlers should be provided with information about all the possible meanings of the event.
...see bug 30
6585).
Gecko versions and application versions
gecko version applications based on it gecko 55 firefox 55, seamonkey 2.52 gecko 52 firefox 52, seamonkey 2.49 gecko 49 firefox 49, seamonkey 2.4
6 gecko 43 firefox 43, seamonkey 2.40 gecko 42 firefox 42, seamonkey 2.39 gecko 41 firefox 41, seamonkey 2.38 gecko 38 firefox 38, seamonkey 2.35 gecko 3
6 firefox 3
6, 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.2
6 gecko 28 firefox 28, seamonkey 2.25 gecko 27 firefox 27, seamonkey 2.24 gecko 2
6 firefox 2
6, 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.17 gecko 19 firefox 19, seamonkey 2.1
6 gecko 18 firefox 18, firefox os 1.0, seamonkey 2.15 gecko 17 firefox 17, thunderbird 17, seamonkey 2.14 gecko 1
6 firefox 1
6, thunderbird 1
6, seamonkey 2.13 gecko 15 firefox 15,...
...rbird 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
6, thunderbird
6, seamonkey 2.3 gecko 5 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, thunder...
Extending a Protocol
end of the file, add: partial interface navigator { [throws] promise<domstring> echo(domstring astring); }; now we need to implement the echo() method in c++, so open up ./dom/base/navigator.h and let's add the method definition, so under public:: already_addrefed<promise> echo(const nsastring& astring, errorresult& arv); we use nsastring& as the domstring comes in from js as utf-1
6.
... to be sure, ipdl looks like a crazy mix of webidl, c++ header files, and es
6.
... // we convert the string to utf8 echochild->sendecho(ns_convertutf1
6toutf8(astring)) ->then( getmainthreadserialeventtarget(), __func__, // resolve lambda [echopromise](const nscstring& returnedstring) { puts("[navigator.cpp] yay, we got a message back!"); // send the string back out a utf1
6 echopromise->mayberesolve(ns_convertutf8toutf1
6(returnedstring)); }, // reject lamb...
OS.File.Info
there is talk of reinstating this with proper functionality in bugzilla :: bug 11
67143.
...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 11
67143 explores implementing solutions for all these different filesystems) lastaccessdate the date at which the file was last accessed, as a javascript date object.
...(as of firefox 38 this attribute is not found, see screen shots below, bugzilla :: bug 115
60
60) screenshot of info object in variable viewer macosx 10.10.1 ubuntu 14.04.1 windows 8.1 see also os.file.directoryiterator.entry ...
Localization content best practices
html does not prefer one over the other, and our codebase uses them interchangeably as of march 201
6.
... u+202
6 (\u202
6) is the horizontal ellipsis character.
...see bug
658191 for more details.
Basics
you can also make displayed equations, such as the following ones: x → maps to y = f n ( x ) = ( 1 + 1 x n ) n ∫ a b f ( x ) d x = b - a
6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 !
... </mrow> </maction> </mtd> <mtd> <maction id="a33" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>4</mn> </msup> <mrow> <msup> <mi>x</mi> <mn>4</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo>&invisibletimes;</mo> <msup> <mi>x</mi> <mn>3</mn> </msup> <mo>&invisibletimes;</mo> <mi>y</mi> </mrow> <mo>+</mo> <mrow> <mn>
6</mn> <mo>&invisibletimes;</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mo>+</mo> <mrow> <mn>4</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>3</mn> </msup> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>4</mn> </msup> </mrow> </maction> </mtd> </mtr> <mtr> <mtd> <maction id="a41" actiontype="...
... </mrow> </maction> </mtd> <mtd> <maction id="a42" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>4</mn> </msup> <mrow> <msup> <mi>x</mi> <mn>4</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo>&invisibletimes;</mo> <msup> <mi>x</mi> <mn>3</mn> </msup> <mo>&invisibletimes;</mo> <mi>y</mi> </mrow> <mo>+</mo> <mrow> <mn>
6</mn> <mo>&invisibletimes;</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mo>+</mo> <mrow> <mn>4</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>3</mn> </msup> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>4</mn> </msup> </mrow> </maction> </mtd> <mtd> <maction id="a43" actiontype="toggle" selec...
Mozilla DOM Hacking Guide
each helper class has a public docreate member function that is called by getclassinfoinstance (see also section 1.
6) to create a new instance of the class if needed.
...the implementation is detailed in section 1.
6.
...the implementation is detailed in section 1.
6.
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 4754774 7
613
6 65
66453 27194 1811
679 100.00 nstokenallocator 17 110007
60 3882
60 43 278253 15.3
6 nsimagegtk 47
6 2197708 341 23
665
64 -135 1
6885
6 9.32 nsmemcacherecord 843 457
67 2328 1247
67 1485 79000 4.3
6 nstextnode 209 11704 1
614 90384 1405 78
680 4.34 htmlattributesimpl 482 14288 2...
...824 88400 2342 74112 4.09 nsscanner 58 7
6824 94 14
6300 3
6 6947
6 3.83 nsscripterror 253 25070 842 91548 589
66478 3.
67 nshtmldocument.mreferrer 177 21550
691 854
60 514
63910 3.53 nshtmlvalue 139 784
6 1215
68734 107
6 60888 3.3
6 htmlcontentsink
6 481
6 12 57782
6 529
66 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by size.
...leaks: 382739 bytes, 34
65 allocations maximum heap size: 7751799 bytes
62095212 bytes were allocated in 391091 allocations.
tools/power/rapl
total w = _pkg_ (cores + _gpu_ + other) + _ram_ w #01 5.17 w = 1.78 ( 0.12 + 0.10 + 1.5
6) + 3.39 w #02 9.43 w = 5.44 ( 1.44 + 1.20 + 2.80) + 3.98 w #03 14.2
6 w = 10.21 ( 5.47 + 0.19 + 4.55) + 4.04 w #04 10.02 w =
6.15 ( 2.
62 + 0.43 + 3.10) + 3.8
6 w #05 14.
63 w = 10.43 ( 4.41 + 0.81 + 5.22) + 4.19 w #0
6 11.1
6 w =
6.90 ( 1.91 + 1.
68 + 3.31) + 4.2
6 w #07 5.40 w = 1.97 ( 0.20 + 0.10 + 1.
67) + 3.44 w #08 5.17 w = 1.7
6 ( 0.07 + 0.08 + 1.
60) + 3.41 w #09 5.17 ...
...w = 1.7
6 ( 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.
...e 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.17 w (min) 5th percentile = 5.17 w 25th percentile = 5.17 w 50th percentile = 8.13 w 75th percentile = 11.1
6 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%c
6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc
6 pkg%pc7 pkgwatt corwatt gfxwatt - - 799 21.
63 3
694 3398 0 12.02 3.1
6 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 3
657 3398 0 9.92 2.43 2.25
62.9
6 39 49 0.00 0.00 0.00 0.00 22.
68 15.13 1.
...13 0 4 708 19.14 3
698 3398 0 13.22 1 1 743 20.2
6 3
666 3398 0 21.40 4.01 1.42 52.90 49 1 5 120
6 31.98 3770 3398 0 9.
69 2 2 784 21.29 3
681 3398 0 11.78 3.10 1.13
62.70 40 2
6 782 21.15 3
698 3398 0 11.92 3 3 702 19.14 3
670 3398 0 8.39 3.09 2.03
67.3
6 39 3 7
648 17.
67 3
667 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%c
6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc
6 pkg%pc7 pkgwatt corwatt gfxwatt 3
614 97.83 3
694 3399 0 2.17 0.00 0.00 0.00 77 77 0.00 0.00 0.00 0.00
67.50 57.77 0.4
6 ...
Profile Manager
firefox provides a built-in applet to manage these profiles, but it will eventually be going away (see bug 214
675), so a new standalone profile manager application has been created, which works with any xulrunner application, and has many features not found in firefox's built-in version.
... system requirements: mac: an intel processor, i38
6 or x8
6_
64 linux: any version capable of running firefox 4.0 windows: xp or later source code you can download the source as well: hg clone http://hg.mozilla.org/automation/profilemanager/ instructions for building can be found in build.txt.
... for example, profilea might be linked with a copy of firefox 3.
6.10, while profileb might be linked with a copy of firefox 3.5.3.
NSPR build instructions
--enable-
64bit on a dual 32-bit/
64-bit platform, nspr build generates a 32-bit build by default.
... to generate a
64-bit build, specify the --enable-
64bit configure option.
... --target=x8
6_
64-pc-mingw32 for
64-bit builds on windows, when using the mozillabuild environment.
Logging
logging is not compiled in for the win1
6 platform.
...xposed in the api: prlogmoduleinfo prlogmodulelevel two environment variables control the behavior of logging at execution time: nspr_log_modules nspr_log_file logging functions and macros the functions and macros for logging are: pr_newlogmodule pr_setlogfile pr_setlogbuffering pr_logprint pr_logflush pr_log_test pr_log pr_assert pr_assert pr_static_assert (new in nspr 4.
6.
6xxx this hasn't been released yet; the number is a logical guess) pr_not_reached use example the following sample code fragment demonstrates use of the logging and debugging aids.
... before running the compiled program, set the environment variable nspr_log_modules to userstuff:5 static void userlogstuff( void ) { prlogmoduleinfo *mylm; printn i; pr_static_assert(5 > 4); /* nspr 4.
6.
6 or newer */ mylm = pr_newlogmodule( "userstuff" ); pr_assert( mylm ); pr_log( mylm, pr_log_notice, ("log a notice %d\n", 999 )); for (i = 0; i < 10 ; i++ ) { pr_log( mylm, pr_log_debug, ("log debug number: %d\n", i)); pr_sleep( 500 ); } pr_log( mylm, pr_log_notice, "that's all folks\n"); } /* end userlogstuff() */ see also nspr logging reference ...
PR_NetAddrToString
description the network address to be converted (addr) may be either an ipv4 or ipv
6 address structure, assuming that the nspr library and the host system are both configured to utilize ipv
6 addressing.
... if addr is an ipv4 address, size needs to be at least 1
6.
... if addr is an ipv
6 address, size needs to be at least 4
6.
PR_Seek
deprecated in favor of pr_seek
64.
... description here's an idiom for obtaining the current location of the file pointer for the file descriptor fd: pr_seek(fd, 0, pr_seek_cur) see also if you need to move the file pointer by a large offset that's out of the range of a 32-bit integer, use pr_seek
64.
... new code should use pr_seek
64 so that it can handle files larger than 2 gb.
NSS Certificate Download Specification
this data must be base
64 encoded as described by rfc 1113.
...between those two lines, there must be exactly one item of any of the supported binary formats described above, and that one item must be base
64 encoded.
... object identifiers the base of all netscape object ids is: netscape object identifier ::= { 2 1
6 840 1 113730 } the hexadecimal byte value of this oid when der encoded is: 0x
60, 0x8
6, 0x48, 0x01, 0x8
6, 0xf8, 0x42 the following oids are mentioned in this document: netscape-data-type object identifier :: = { netscape 2 } netscape-cert-sequence object identifier :: = { netscape-data-type 5 } ...
NSS Code Coverage
numbers in tested files example: 72.
69% (1
65/227/731) 72.
69% - ratio of tested blocks and total blocks in file (generated by tcov).
... 1
65 - tested blocks in file (generated by tcov).
... 1
65 - tested blocks in all files in directory (sum of numbers generated by tcov).
NSS FAQ
it contains bugs that were never fixed, doesn't support tls or or the new 5
6-bit export cipher suites, and does not contain the fix to the bleichenbacher attack on pkcs#1.
... this section is out of date iplanet e-commerce solutions has certified nss 3.1 on 18 platforms, including aix 4.3, hp-ux 11.0, red hat linux
6.0, solaris (2.
6 or later), windows nt (4.0 or later), and windows 2000.
...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.
NSS 3.12.5 release_notes
bug 510435: remove unused make variable dso_ldflags bug 51043
6: add macros for build numbers (4th component of version number) to nssutil.h bug 511227: firefox 3.0.13 fails to compile on freebsd/powerpc bug 511312: nss fails to load softoken, looking for sqlite3.dll bug 511781: add new tls 1.2 cipher suites implemented in windows 7 to ssltap bug 51
6101: if pk11_importcert fails, it leaves the certificate undiscoverable by cert_pkixverifycert bug 518443:...
... pk11_importandreturnprivatekey leaks an arena bug 51844
6: pk11_derencodepublickey leaks a certsubjectpublickeyinfo bug 518457: 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.
... bug 52505
6: timing attack against ssl3ext.c:ssl3_serverhandlesessionticketxtn() bug 52
6689: ssl3 & tls renegotiation vulnerability documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
NSS 3.14.3 release notes
this release is a patch release to address cve-2013-1
620.
... notable changes in nss 3.14.3 cve-2013-1
620 recent research by nadhem alfardan and kenny patterson has highlighted a weakness in the handling of cbc padding as used in ssl, tls, and dtls that allows an attacker to exploit timing differences in mac processing.
...bugs fixed in nss 3.14.3 https://bugzilla.mozilla.org/buglist.cgi?list_id=5
68925
6;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.14.3;product=nss compatibility nss 3.14.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.14.5 release notes
bug 93401
6 - (cve-2013-5
605) handle invalid handshake packets new in nss 3.14.5 new functionality no new major functionality is introduced in this release.
... this release is a patch release to address cve-2013-5
605.
... bugs fixed in nss 3.14.5 https://bugzilla.mozilla.org/buglist.cgi?bug_id=93401
6&bug_id_type=anyexact&resolution=fixed&classification=components&query_format=advanced&product=nss compatibility nss 3.14.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.2 release notes
specifically, the following cipher suites are now supported: tls_ecdhe_ecdsa_with_aes_128_gcm_sha25
6 tls_ecdhe_rsa_with_aes_128_gcm_sha25
6 tls_dhe_rsa_with_aes_128_gcm_sha25
6 tls_rsa_with_aes_128_gcm_sha25
6 new functions pk11_cipherfinal has been introduced, which is a simple alias for pk11_digestfinal.
...new pkcs #11 mechanisms no new pkcs#11 mechanisms have been introduced notable changes in nss 3.15.2 bug 880543 - support for aes-gcm ciphersuites that use the sha-25
6 prf bug
663313 - md2, md4, and md5 signatures are no longer accepted for ocsp or crls, consistent with their handling for general certificate signatures.
... bug 884178 - add pk11_cipherfinal macro bugs fixed in nss 3.15.2 bug 734007 - sizeof() used incorrectly bug 900971 - nssutil_readsecmoddb() leaks memory bug
681839 - allow ssl_handshakenegotiatedextension to be called before the handshake is finished.
NSS 3.15.3 release notes
bug 925100 - (cve-2013-1741) ensure a size is <= half of the maximum pruint32 value bug 93401
6 - (cve-2013-5
605) handle invalid handshake packets bug 910438 - (cve-2013-5
60
6) 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-1741, cve-2013-5
605 and cve-2013-5
60
6.
... bugs fixed in nss 3.15.3 bug 850478 - list rc4_128 cipher suites after aes_128 cipher suites bug 919
677 - 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.17.1 release notes
bug 10
64
63
6 - (cve-2014-15
68) rsa signature forgery in nss.
... notable changes in nss 3.17.1 signature algorithms now use sha-25
6 instead of sha-1 by default.
... added support for linux on little-endian powerpc
64.
NSS 3.17.2 release notes
this fixes a regression introduced in nss 3.1
6.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries.
... bug 10571
61: check that an imported elliptic curve public key is valid.
... bug 1078
669: certutil crashes when an argument is passed to the --certversion option.
NSS 3.17.4 release notes
notable changes in nss 3.17.4 bug 108498
6: if an ssl/tls connection fails, because client and server don't have any common protocol version enabled, nss has been changed to report error code ssl_error_unsupported_version (instead of reporting ssl_error_no_cypher_overlap).
... bug 11124
61: libpkix was fixed to prefer the newest certificate, if multiple certificates match.
... bug 1113
632: fixed a failure to reload a pkcs#11 module in fips mode.
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:97:8
6:
63:3a cn = equifax secure global ebusiness ca-1 sha1 fingerprint: 7e:78:4a:10:1c:82:
65:cc:2d:e1:f1:
6d:47: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 root ca - g3 ...
... sha1 fingerprint: d8:eb:
6b:41:51:92:59:e0:f3:e7:85:00:c0:3d:b
6:88:97:c9:ee:fc cn = staat der nederlanden ev root ca sha1 fingerprint: 7
6:e2:7e:c1:4f:db:82:c1:c0:a
6: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:27:fd:79:0c:3a:d1:
66:0
6:8d:e8:1e:57:ef:bb:93:22:72:d4 cn = entrust ro...
...ot certification authority - ec1 sha1 fingerprint: 20:d8:0
6:40:df:9b:25:f5:12:25:3a:11:ea:f7:59:8a:eb:14:b5:47 cn = cfca ev root sha1 fingerprint: e2:b8:29:4b:55:84:ab:
6b:58:c2:90:4
6:
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 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 108
6145 / cve-2015-2721 - 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 75313
6).
... bugs fixed in nss 3.19 this bugzilla query returns all the bugs fixed in nss 3.19: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19 acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 108
6145.
NSS 3.20 release notes
the server side implementation of the tls does not support session tickets while using a dhe ciphersuite (see bug 1174
677).
... support for the following ciphersuites has been added: tls_dhe_dss_with_aes_128_gcm_sha25
6 tls_dhe_dss_with_aes_128_cbc_sha25
6 tls_dhe_dss_with_aes_25
6_cbc_sha25
6 by default, the server side tls implementation will use dhe parameters with a size of 2048 bits when using dhe ciphersuites.
... nss embeds fixed dhe parameters sized 2048, 3072, 409
6,
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.22 release notes
pk11_createpbev2algorithmid() now supports sec_oid_pkcs5_pbkdf2 with cipheralgtag and prfalgtag set to sec_oid_hmac_sha25
6, sec_oid_hmac_sha224, sec_oid_hmac_sha384, or sec_oid_hmac_sha512.
... in ssl.h ssl_peersignedcerttimestamps - get signed_certificate_timestamp tls extension data ssl_setsignedcerttimestamps - set signed_certificate_timestamp tls extension data new types in secoidt.h the following are added to secoidtag: sec_oid_aes_128_gcm sec_oid_aes_192_gcm sec_oid_aes_25
6_gcm sec_oid_idea_cbc sec_oid_rc2_40_cbc sec_oid_des_40_cbc sec_oid_rc4_40 sec_oid_rc4_5
6 sec_oid_null_cipher sec_oid_hmac_md5 sec_oid_tls_rsa sec_oid_tls_dhe_rsa sec_oid_tls_dhe_dss sec_oid_tls_dh_rsa sec_oid_tls_dh_dss sec_oid_tls_dh_anon sec_oid_tls_ecdhe_ecdsa sec_oid_tls_ecdhe_rsa sec_oid_tls_ecdh_ecdsa sec_o...
...n_key_size nss_dh_min_key_size nss_dsa_min_key_size nss_tls_version_min_policy nss_tls_version_max_policy nss_dtls_version_min_policy nss_dtls_version_max_policy in pkcs11t.h ckp_pkcs5_pbkd2_hmac_gostr3411 - prf based on hmac with gostr3411 for pbkdf (not supported) ckp_pkcs5_pbkd2_hmac_sha224 - prf based on hmac with sha-224 for pbkdf ckp_pkcs5_pbkd2_hmac_sha25
6 - prf based on hmac with sha-25
6 for pbkdf ckp_pkcs5_pbkd2_hmac_sha384 - prf based on hmac with sha-25
6 for pbkdf ckp_pkcs5_pbkd2_hmac_sha512 - prf based on hmac with sha-25
6 for pbkdf ckp_pkcs5_pbkd2_hmac_sha512_224 - prf based on hmac with sha-512 truncated to 224 bits for pbkdf (not supported) ckp_pkcs5_pbkd2_hmac_sha512_25
6 - prf based on hmac with sha-512 truncated to 25
6 bits fo...
NSS 3.25 release notes
the following ca certificate was removed cn = sonera class1 ca sha-25
6 fingerprint: cd:80:82:84:cf:74:
6f:f2:fd:
6e:b5:8a:a1:d5:9c:4a:d4:b3:ca:5
6:fd:c
6:27:4a:89:2
6:a7:83:5f:32:31:3d the following ca certificates were added cn = hellenic academic and research institutions rootca 2015 sha-25
6 fingerprint: a0:40:92:9a:02:ce:53:b4:ac:f4:f2:ff:c
6:98:1c:e4:49:
6f:75:5e:
6d:45:fe:0b:2a:
69:2b:cd:52:52:3f:3
6 cn = hellenic academic and r...
...esearch institutions ecc rootca 2015 sha-25
6 fingerprint: 44:b5:45:aa:8a:25:e
6:5a:73:ca:15:dc:27:fc:3
6:d2:4c:1c:b9:95:3a:0
6:
65:39:b1:15:82:dc:48:7b:48:33 cn = certplus root ca g1 sha-25
6 fingerprint: 15:2a:40:2b:fc:df:2c:d5:48:05:4d:22:75:b3:9c:7f:ca:3e:c0:97:80:78:b0:f0:ea:7
6:e5:
61:a
6:c7:43:3e cn = certplus root ca g2 sha-25
6 fingerprint:
6c:c0:50:41:e
6: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:17 cn = opentrust root ca g1 sha-25
6 fingerprint: 5
6:c7: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:4
6:0e:b4 cn = opentrust root ca g2 sha-25
6 fingerprint: 27:99:58:29:fe:
6a:75:15:c1:bf:e8:48:f9:c4:7
6:1d:b1:
6c:22:59:29:25:7b:f4:0d:...
...08:94:f2:9e:a8:ba:f2 cn = opentrust root ca g3 sha-25
6 fingerprint: b7:c3:
62:31:70:
6e:81:07:8c:3
6:7c:b8:9
6:19:8f:1e:32:08:dd:92:
69:49:dd:8f:57:09:a4:10:f7: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.37 release notes
starting with nss version 3.31, an alternative implementation for rng seeding on the linux/unix platform was available (bug 134
6735), which performed seeding exclusively based on /dev/urandom.
... the following ca certificates were removed: cn = s-trust universal root ca sha-25
6 fingerprint: d8:0f:ef:91:0a:e3:f1:04:72:3b:04:5c:ec:2d:01:9f:44:1c:e
6:21:3a:df:15:
67:91:e7:0c:17:90:11:0a:31 cn = tc trustcenter class 3 ca ii sha-25
6 fingerprint: 8d:a0:84:fc:f9:9c:e0:77:22:f8:9b:32:05:93:98:0
6:fa:5c:b8:11:e1:c8:13:f
6:a1:08:c7:d3:3
6:b3:40:8e cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h5 sha-25
6 fingerprint: 49:35:1b:90...
...:34:44:c1:85:cc:dc:5c:
69:3d:24:d8:55:5c:b2:08:d
6:a8:14:13:07:
69:9f:4a:f0:
63:19:9d:78 bugs fixed in nss 3.37 this bugzilla query returns all the bugs fixed in nss 3.37: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.37 compatibility nss 3.37 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.42 release notes
new in nss 3.42 new functionality bug 818
68
6 - 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 1508
666 - added aes-gcm test cases bug 1508
673 - added chacha20-poly1305 test cases ...
... bugs fixed in nss 3.42 bug 149000
6 - reject invalid ch.legacy_version in tls 1.3 bug 1507135 and bug 1507174 - add additional null checks to several cms functions to fix a rare cms crash.
... bug 1513913 - a fix for solaris where firefox
60 core dumps during start when using profile from version 52 this bugzilla query returns all the bugs fixed in nss 3.42: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.42 compatibility nss 3.42 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.43 release notes
introduction the nss team has released network security services (nss) 3.43 on 1
6 march 2019, which is a minor release.
...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-25
6 fingerprint: 40f
6af034
6a99aa1cd1d555a4e9cce
62c7f9
634
603ee40
6615833dc8c8d003
67 cn = emsign ecc root ca - g3 sha-25
6 fingerprint: 8
6a1ecba089c4a8d3bbe2734c
612ba341d813e043cf9e8a8
62cd5c57a3
6bbe
6b cn = emsign root ca - c1 sha-25
6 fingerprint: 125
609aa301da0a249b97a8239cb
6a3421
6f44dcac9f3954b14292f2e8c8
608f cn = emsign ecc root ca - c3 sha-25
6 fingerprint: bc4...
...d809b15189d78db3e1d8cf4f972
6a795da1
643ca5f1358e1ddb0edc0d7eb3 cn = hongkong post root ca 3 sha-25
6 fingerprint: 5a2fc03f0c83b090bbfa40
604b098844
6c7
63
6183df984
6e17101a447fb8efd
6 the following ca certificates were removed: none bugs fixed in nss 3.43 bug 1528
669 and bug 1529308 - improve gyp build system handling bug 1529950 and bug 1521174 - improve nss s/mime tests for thunderbird bug 1530134 - if docker isn't installed, try running a local clang-format as a fallback bug 15312
67 - enable fips mode automatically if the system fips mode flag is set bug 15282
62 - add a -j option to the strsclnt command to specify sigschemes bug 1513909 - add manual for nss-policy-check bug 1531074 - fix a deref after a null check in seckey_setpublicvalue bug 1517714...
NSS 3.44 release notes
bugs fixed in nss 3.44 1501542 - implement checkarmsupport for android 1531244 - use __builtin_bswap
64 in crypto_primitives.h 153321
6 - cert_decodecertpackage() crash with netscape certificate sequences 1533
61
6 - sdb_getattributevaluenolock should make at most one sql query, rather than one for each attribute 153123
6 - provide accessor for certcertificate.dercert 153
6734 - lib/freebl/crypto_primitives.c assumes a big endian machine 1532384 - in nss test certificates, use @example.com (not @b...
...ogus.com) 1538479 - post-handshake messages after async server authentication break when using record layer separation 1521578 - x25519 support in pk11pars.c 1540205 - freebl build fails with -dnss_disable_chachapoly 1532312 - post-handshake auth doesn't interoperate with openssl 1542741 - certutil -f crashes with segmentation fault 154
6925 - allow preceding text in try comment 15344
68 - expose chacha20 primitive 1418944 - quote cc/cxx variables passed to nspr 1543545 - allow to build nss as a static library 1487597 - early data that arrives before the handshake completes can be read afterwards 1548398 - freebl_gtest not building on linux/mac 1548722 - fix some coverity warnings 1540
652 - softoken/sdb.c: logically dead code 1549413 - android log lib is not included in build 1...
...537927 - ipsec usage is too restrictive for existing deployments 1549
608 - signature fails with dbm disabled 1549848 - allow building nss for ios using gyp 1549847 - nss's sqlite compilation warnings make the build fail on ios 1550041 - freebl not building on ios simulator 1542950 - macos cipher test timeouts this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49 release notes
bugs fixed in nss 3.49 bug 151358
6 - set downgrade sentinel for client tls versions lower than 1.2.
... bug 1
60
6025 - remove -wmaybe-uninitialized warning in sslsnce.c bug 1
60
6119 - fix ppc hw crypto build failure bug 1
605545 - memory leak in pk11install_platform_generate bug 1
602288 - fix build failure due to missing posix signal.h bug 1588714 - implement checkarmsupport for win
64/aarch
64 bug 1585189 - nss database uses 3des instead of aes to encrypt db entries bug 1
603257 - fix ubsan issue in softoken ckm_nss_chacha20_ctr initialization bug 1590001 - additional hrr tests (cve-2019-17023) bug 1
600144 - treat clienthello with message_seq of 1 as a second clienthello bug 1
603027 - test that esni is regenerated after helloretryrequest bug 15931
67 - intermittent mis-reporting potential security risk sec_error_unknown_issuer bug 1535787 - fix automation/release/nss-release-helper.py ...
...on macos bug 1594933 - disable building dbm by default bug 15
62548 - 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 Config Options
nss config options format the specified ciphers will be allowed by policy, but an application may allow more by policy explicitly: config="allow=curve1:curve2:hash1:hash2:rsa-1024..." only the specified hashes and curves will be allowed: config="disallow=all allow=sha1:sha25
6:secp25
6r1:secp384r1" only the specified hashes and curves will be allowed, and rsa keys of 2048 or more will be accepted, and dh key exchange with 1024-bit primes or more: config="disallow=all allow=sha1:sha25
6:secp25
6r1:secp384r1:min-rsa=2048:min-dh=1024" a policy that enables the aes ciphersuites and the secp25
6/384 curves: config="allow=aes128-cbc:aes128-gcm::hmac-sha1:sha1:sha25
6:sha384:rsa:ecdhe-rsa:secp25
6r1:secp384r1" turn off md5 config="disallow=md5" turn off md5 and sha1 only for ssl c...
... ecc curves prime192v1 prime192v2 prime192v3 prime239v1 prime239v2 prime239v3 prime25
6v1 secp112r1 secp112r2 secp128r1 secp128r2 secp1
60k1 secp1
60r1 secp1
60r2 secp192k1 secp192r1 secp224k1 secp25
6k1 secp25
6r1 secp384r1 secp521r1 c2pnb1
63v1 c2pnb1
63v2 c2pnb1
63v3 c2pnb17
6v1 c2tnb191v1 c2tnb191v2 c2tnb191v3 c2onb191v4 c2onb191v5 c2pnb208w1 c2tnb239v1 c2tnb239v2 c2tnb239v3 c2onb239v4 c2onb239v5 c2pnb272w1 c2pnb304w1 c2tnb359v1 c2pnb3
68w1 c2tnb431r1 se...
...ct113r1 sect131r1 sect131r1 sect131r2 sect1
63k1 sect1
63r1 sect1
63r2 sect193r1 sect193r2 sect233k1 sect233r1 sect239k1 sect283k1 sect283r1 sect409k1 sect409r1 sect571k1 sect571r1 hashes md2 md4 md5 sha1 sha224 sha25
6 sha384 sha512 macs hmac-sha1 hmac-sha224 hmac-sha25
6 hmac-sha384 hmac-sha512 hmac-md5 ciphers aes128-cbc aes192-cbc aes25
6-cbc aes128-gcm aes192-gcm aes25
6-gcm camellia128-cbc camellia192-cbc camellia25
6-cbc seed-cbc des-ede3-cbc des-40-cbc des-cbc null-cipher rc2 rc4 idea ssl key exchanges rsa rsa-export dhe-rsa dhe-dss dh-rsa dh-dss ecdhe-ecdsa ecdhe-rsa ecdh-ecdsa ecdh-rsa restrictions for asymmetric keys (integers) rsa-min dh-min dsa-min constraints on ssl protocols versions (integers) tls-version-min tls...
nss tech note3
the oid for this extension is { 2 1
6 840 1 113730 1 1 } encoded in hex as 0x
60, 0x8
6, 0x48, 0x01, 0x8
6, 0xf8, 0x42, 0x01, 0x01 in addition to netscape's own cert type extension, nss recognizes various x.509 extensions.
...tal_signature (0x80) /* bit 0 */ #define ku_non_repudiation (0x40) /* bit 1 */ #define ku_key_encipherment (0x20) /* bit 2 */ #define ku_data_encipherment (0x10) /* bit 3 */ #define ku_key_agreement (0x08) /* bit 4 */ #define ku_key_cert_sign (0x04) /* bit 5 */ #define ku_crl_sign (0x02) /* bit
6 */ #define ns_cert_type_ssl_client (0x80) /* bit 0 */ #define ns_cert_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> ...
troubleshoot.html
building nss having /usr/ucb/bin in the path before /usr/ccs/bin breaks the build on
64-bit solaris.
... the
64-bit builds don't support gcc.
... if the build fails early on the gmakein coreconf try updating your cvs tree with -p: cd mozilla cvs update -p building a 32-bit version on a
64-bit may fail with: /usr/include/features.h:324:2
6: fatal error: bits/predefs.h: no such file or directory in this case remember to set use_
64=1 testing nss the ssl stress test opens 2,048 tcp connections in quick succession.
gtstd.html
>certutil -c -d ca_db -c "myco's root ca" -a -i server_db/server.req -o server_db/server.crt -2 -
6 enter password or pin for "communicator certificate db": import (add) the new server certificate to the server's certificate database in the server_db directory with the appropriate nickname.
... >certutil -c -d ca_db -c "myco's root ca" -a -i client_db/client.req -o client_db/client.crt -2 -
6 enter password or pin for "communicator certificate db": add the new client certificate to the client's certificate database in the client_db directory with the appropriate nickname.
...in addition, you must use the following compiler flags: solaris flags: -c -o -kpic -dsvr4 -dsysv -d__svr4 -d__svr4__ -dsolaris -d_reentrant -dsolaris2_5 -d_svid_gettod -dxp_unix -udebug -dndebug windows nt flags: -c -o2 -md -w3 -nologo -d_x8
6_ -gt -dwinnt -dxp_pc -udebug -u_debug -dndebug -dwin32 -d_windows ...
Utility functions
function name/documentation source code nss versions atob_asciitodata mxr deprecated 3.2 use nssbase
64_decodebuffer atob_convertasciitoitem mxr deprecated 3.2 use nssbase
64_decodebuffer btoa_convertitemtoascii mxr deprecated 3.2 use nssbase
64_encodeitem btoa_datatoascii mxr deprecated 3.2 use nssbase
64_encodeitem der_asciitotime mxr 3.5 and later der_decodetimechoice ...
... nss_nodb_init mxr 3.2 and later nss_putenv mxr 3.2 and later nss_registershutdown mxr 3.11.1 and later nss_shutdown mxr 3.2 and later nss_unregistershutdown mxr 3.11.1 and later nss_versioncheck mxr 3.2 and later nssbase
64_decodebuffer mxr 3.4 and later nssbase
64decoder_create mxr 3.2 and later nssbase
64decoder_destroy mxr 3.2 and later nssbase
64decoder_update mxr 3.2 and later nssbase
64_encodeitem mxr 3.4 and later nssbase
64encoder_create mxr 3.2 and later ...
... nssbase
64encoder_destroy mxr 3.2 and later nssbase
64encoder_update mxr 3.2 and later nssrwlock_destroy mxr 3.2 and later nssrwlock_havewritelock mxr 3.2 and later nssrwlock_lockread mxr 3.2 and later nssrwlock_lockwrite mxr 3.2 and later nssrwlock_new mxr 3.2 and later nssrwlock_unlockread mxr 3.2 and later nssrwlock_unlockwrite mxr 3.2 and later nsssmime_versioncheck mxr 3.2.1 and later port_alloc mxr 3.2 and later port_arenaalloc mxr 3.2 and later po...
NSS Tools crlutil
list of possible algorithms: md2 | md4 | md5 | sha1 | sha25
6 | sha384 | sha512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
... where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliationchanged (3), superseded (4), cessationofoperation (5), certificatehold (
6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the certificate otherwise became invalid.
... modifying crl in a database this example modifies a new crl and importing it in to a database in the specified directory: crlutil -g -d certdir -n cert-nickname -c crl-script-file or crlutil -m -d certdir -n cert-nickname <<eof update=20050204153000z addcert 40-
60 20050105153000z eof the crl management tool extracts existing crl from a database, will modify and sign with certificate cert-nickname and will store it in database.
NSS Tools pk12util
symmetric cbc ciphers for pkcs #5 v2: "des_cbc" "rc2-cbc" "rc5-cbcpad" "des-ede3-cbc" --- default for key encryption "aes-128-cbc" "aes-192-cbc" "aes-25
6-cbc" "camellia-128-cbc" "camellia-192-cbc" "camellia-25
6-cbc" pkcs #12 pbe ciphers: "pkcs #12 pbe with sha1 and 128 bit rc4" "pkcs #12 pbe with sha1 and 40 bit rc4" "pkcs #12 pbe with sha1 and triple des cbc" "pkcs #12 pbe with sha1 and 128 bit rc2 cbc" "pkcs #12 pbe with sha1 and 40 bit rc2 cbc" "pkcs12 v2 pbe with sha1 and 128 bit rc4" "pkcs12 v2 pbe with sha1 and 40 bit rc4" --- default f...
... error codes pk12util can return the following values: 0 - no error 1 - user cancelled 2 - usage error
6 - nls init error 8 - certificate db open error 9 - key db open error 10 - file initialization error 11 - unicode conversion error 12 - temporary file creation error 13 - pkcs11 get slot error 14 - pkcs12 decoder start error 15 - error read from import file 1
6 - pkcs12 decode error 17 - pkcs12 decoder verify error 18 - pkcs12 decoder validate bags error 19 - pkcs12 decoder import bags error 20 - k...
...ey db conversion version 3 to version 2 error 21 - cert db conversion version 7 to version 5 error 22 - cert and key dbs patch error 23 - get default cert db error 24 - find cert by nickname error 25 - create export context error 2
6 - pkcs12 add password itegrity error 27 - cert and key safes creation error 28 - pkcs12 add cert and key error 29 - pkcs12 encode error ...
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-2
62 ecmascript: a general purpose, cross-platform programming language.
... rhino 1.
6 and greater implement ecma-357 ecmascript for xml (e4x).
... see the specification for more information on the standard, and rhino version 1.
6r1 release notes for details on the implementation in rhino.
JSAPI User Guide
this function returns the pointer to an object's private data: pdata = js_getprivate(cx, obj); special topics unicode to pass unicode data between javascript and native code, represent the data in utf-1
6 in memory.
... javascript strings, property names, and programs are all made up of jschars, which are 1
6-bit unsigned integers.
...these functions convert their char * arguments to 1
6-bit strings by zero-extending each 8-bit char to 1
6 bits—unless js_c_strings_are_utf8 is defined or js_setcstringsareutf8 has been called, in which case each char * string is interpreted as utf-8 unicode text.
JS::Compile
const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char1
6_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlescript script); // obsolete since jsapi 39 bool js::com...
... js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char1
6_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlescript script...
... chars const char1
6_t * string containing the script to compile.
JS::CompileOffThread
syntax bool js::cancompileoffthread(jscontext *cx, const js::readonlycompileoptions &options, size_t length); bool js::compileoffthread(jscontext *cx, const js::readonlycompileoptions &options, const char1
6_t *chars, size_t length, js::offthreadcompilecallback callback, void *callbackdata); jsscript * js::finishoffthreadscript(jscontext *maybecx, jsruntime *rt, void *token); typedef void (*js::offthreadcompilecallback)(void *token, void *callbackdata); name type description cx / maybe jscontext * pointer to a js context from which to derive runtime information.
... chars const char1
6_t * string containing the script to compile.
... mxr id search for js::compileoffthread js::evaluate js::compile js::compilefunction js_decompilescript bug 897
655 ...
JS::CompileOptions
const char1
6_t *sourcemapurl() const returns the url of the source map.
... bool setsourcemapurl(jscontext *cx, const char1
6_t *s) duplicate null-terminated string s for sourcemapurl.
... compileoptions &setline(unsigned l) compileoptions &setfileandline(const char *f, unsigned l) compileoptions &setsourcemapurl(const char1
6_t *s) compileoptions &setelement(jsobject *e) compileoptions &setelementattributename(jsstring *p) compileoptions &setintroductionscript(jsscript *s) compileoptions &setmutederrors(bool mute) compileoptions &setversion(jsversion v) compileoptions &setutf8(bool u) compileoptions &setcolumn(unsigned c) compileoptions &setcompil...
JS::Evaluate
syntax // added in spidermonkey 45 bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char1
6_t *chars, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlevalue rval); bool js::evaluate(jsc...
...ontext *cx, js::autoobjectvector &scopechain, const readonlycompileoptions &options, const char1
6_t *chars, size_t length, js::mutablehandlevalue rval); // added in spidermonkey 17 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::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char1
6_t *chars, size_t length, js::mutablehandl...
... chars const char1
6_t * string containing the script to compile and execute.
JSClass
obsolete since jsapi 3
6 the jsclass_new_resolve flag instructs spidermonkey to call this as a jsnewresolveop.
... obsolete since jsapi 1
6the jsclass_new_resolve_gets_start flag further affects this hook.
....rval().setobject(*obj); /* 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 702507 - removed jsclass_construct_prototype bug 72
6944 - removed xdrobject, reserved0 and reserved1 bug 88
6829 - made finalize optional bug 957
688 - removed checkaccess bug 11033
68 - made most of members optional bug 10972
67 - removed jsclass_new_enumerate bug 105475
6 - removed convert bug 12
61723 - class ops are moved to a sub-structure jsclassops ...
JSFunctionSpec
syntax struct jsfunctionspec { const char *name; jsnativewrapper call; uint1
6_t nargs; uint1
6_t flags; const char *selfhostedname; }; typedef struct jsnativewrapper { jsnative op; const jsjitinfo *info; } jsnativewrapper; name type description name const char * the function's name.
... nargs uint1
6_t the value used for function.length.
... flags uint1
6_t the bitwise or of any number of function flags.
JSResolveOp
syntax typedef bool (* jsresolveop)(jscontext *cx, js::handleobject obj, js::handleid id, bool *resolvedp); // added in jsapi 3
6 typedef bool (* jsresolveop)(jscontext *cx, js::handleobject obj, js::handleid id); // obsolete since jsapi 3
6 name type description cx jscontext * pointer to the js context in which the property access is taking place.
... obsolete since jsapi 3
6 the callback must return true if the property is resolved, or if the object has no lazy property with the given id; or false to indicate any other error.
... see also mxr id search for jsresolveop jsclass jsnewresolveop bug 99302
6 ...
JS_AlreadyHasOwnProperty
syntax boo js_alreadyhasownproperty(jscontext *cx, js::handleobject obj, const char *name, bool *foundp); boo js_alreadyhasownucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, bool *foundp); boo js_alreadyhasownpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, bool *foundp); // added in spidermonkey 1.8.1 boo js_alreadyhasownelement(jscontext *cx, js::handleobject obj, uint32_t index, bool *foundp); name type description cx jscontext * pointer to a js context.
... name or id const char * or const char1
6_t *or js::handleid (in js_alreadyhasownproperty, alreadyhasownucproperty, and js_alreadyhasownpropertybyid) the name of the property to search for.
...see also mxr id search for js_alreadyhasownproperty mxr id search for js_alreadyhasownucproperty mxr id search for js_alreadyhasownpropertybyid mxr id search for js_alreadyhasownelement bug 400793 bug 4
611
63 ...
JS_ConvertArguments
format can contain one or more instances of the following characters, as appropriate: character c type description b bool boolean c uint1
6_t ecma uint1
6_t, unicode character i int32_t ecma int32_t j int32_t ecma int32_t (used to be different, behaves like i now) obsolete since jsapi 28 u uint32_t ecma uint32_t d double ieee double i double integral ieee double s char * (c string) bug
607292 s jsstring * unicode string, acces...
...sed by a jsstring pointer w char1
6_t * unicode character vector, 0-terminated (w for wide) o jsobject * object reference f jsfunction * the argument is converted to a function as though by a call to js_valuetofunction.
... see also mxr id search for js_convertarguments js_convertargumentsva bug
607292 - obsolete s format bug 93394
6 - obsolete j format bug 9
69798 - added args bug 1125784 ...
JS_DefineFunction
syntax jsfunction * js_definefunction(jscontext *cx, js::handle<jsobject*> obj, const char *name, jsnative call, unsigned nargs, unsigned attrs); jsfunction * js_defineucfunction(jscontext *cx, js::handle<jsobject*> obj, const char1
6_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 17 name type description cx jscontext * the context in which to define the fu...
... name const char * or const char1
6_t * name to assign to the 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
607
695 - added js_definefunctionbyid ...
JS_DeleteProperty
d id); // added in spidermonkey 1.8.1 // added in spidermonkey 45 bool js_deleteproperty(jscontext *cx, js::handleobject obj, const char *name, js::objectopresult &result); bool js_deletepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::objectopresult &result); bool js_deleteucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, js::objectopresult &result); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... name or id const char * or jsid or const char1
6_t * name of the property to delete.
... see also mxr id search for js_deleteproperty mxr id search for js_deletepropertybyid js_deleteproperty2 js_deletepropertybyid2 bug 4
611
63 bug 11133
69 -- added result parameter and js_deleteucproperty ...
JS_DeleteProperty2
syntax bool js_deleteproperty2(jscontext *cx, js::handleobject obj, const char *name, bool *succeeded); bool js_deleteucproperty2(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, bool *succeeded); bool js_deletepropertybyid2(jscontext *cx, js::handleobject obj, js::handleid id, bool *succeeded); // added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from which to derive runtime information.
... name or id const char * or const char1
6_t or js::handleid name of the property to delete.
... see also mxr id search for js_deleteproperty2 mxr id search for js_deleteucproperty2 mxr id search for js_deletepropertybyid2 bug 4
611
63 bug 11133
69 -- renamed to js_deleteproperty ...
JS_DumpHeap
jstrace_null = 0x0
6, // a kind that indicates the real kind should be looked up in the arena.
... jstrace_base_shape = 0x0f, jstrace_jitcode = 0x1f, jstrace_lazy_script = 0x2f, jstrace_type_object = 0x3f, jstrace_last = jstrace_type_object }; description see bug 3782
61 for detail.
... see also bug 3782
61 bug 1122842 ...
JS_ExecuteScriptVersion
obsolete since jsapi 3
6this feature is obsolete.
... in ecmascript terms, the script is executed in a new execution context, but that context is not initialized quite as described in any of the three cases in ecma 2
62-3 §10.2.
... see also js::compile js_executescript js::evaluate bug 1095
660 ...
JS_GetOwnPropertyDescriptor
ertydescriptor(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandle<jspropertydescriptor> desc); bool js_getownpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandle<jspropertydescriptor> desc); bool js_getownucpropertydescriptor(jscontext *cx, js::handleobject obj, const char1
6_t *name, js::mutablehandle desc); // added in spidermonkey 45 name type description cx jscontext * a context.
... id const char * or js::handleid or const char1
6_t the name of the property to look up.
... see also mxr id search for js_getownpropertydescriptor mxr id search for js_getownpropertydescriptorbyid mxr id search for js_getownucpropertydescriptor js_getpropertydescriptor js_getpropertydescriptorbyid jspropertydescriptor bug 89318
6 bug 1135731 -- added js_getownpropertydescriptor ...
JS_GetProperty
syntax bool js_getproperty(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandlevalue vp); bool js_getucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, js::mutablehandlevalue vp); bool js_getpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 name type description cx jscontext * a context.
... name or id const char * or const char1
6_t * or js::handleid name of the property to look up.
... see also mxr id search for js_getproperty mxr id search for js_getucproperty mxr id search for js_getpropertybyid example in the jsapi phrasebook js_defineproperty js_definepropertywithtinyid js_deleteproperty js_deleteproperty2 js_lookupproperty js_propertystub js_setproperty bug 4
611
63 ...
JS_GetStringCharAt
syntax bool js_getstringcharat(jscontext *cx, jsstring *str, size_t index, char1
6_t *res); char1
6_t js_getflatstringcharat(jsflatstring *str, size_t index); name type description cx jscontext * the context in which to create the new string.
... res char1
6_t * (js_getstringcharat only) out parameter.
... see also mxr id search for js_getstringcharat mxr id search for js_getflatstringcharat bug 1034
627 ...
JS_GetStringChars
retrieve a pointer to the 1
6-bit values that make up a given string.
... the content of a js string is not guaranteed to be valid utf-1
6.
...see also bug
609440 - removed js_getstringchars bug 10378
69 - removed js_getstringcharsz ...
JS_HasProperty
syntax bool js_hasproperty(jscontext *cx, js::handleobject obj, const char *name, bool *foundp); bool js_hasucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, bool *vp); bool js_haspropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, bool *foundp); // added in spidermonkey 1.8.1 name type description cx jscontext * a context.
... name or id const char * or const char1
6_t or js::handleid name of the property to look up.
... see also mxr id search for js_hasproperty mxr id search for js_hasucproperty mxr id search for js_haspropertybyid bug 4
611
63 ...
JS_IsConstructing
obsolete since jsapi 2
6this feature is obsolete.
... js_isconstructing has been removed in bug 9184
62.
... mxr id search for js_isconstructing bug 9184
62 ...
JS_IsIdentifier
syntax bool js_isidentifier(jscontext *cx, js::handlestring str, bool *isidentifier); bool js_isidentifier(const char1
6_t *chars, size_t length); // added in spidermonkey 38 name type description cx jscontext * pointer to a js context from which to derive runtime information.
... chars const char1
6_t * the pointer of the string to test.
... see also mxr id search for js_isidentifier js_valuetoid bug
692
627 bug 990484 ...
JS_LookupElement
for example, obj[
6] is always exactly the same as obj["
6"].
... the ecmascript standard also specifies this behavior: see ecma 2
62-3 §11.2.1, step
6.
... see also js_defineelement js_deleteelement js_getarraylength js_getelement js_isarrayobject js_newarrayobject js_setarraylength js_setelement bug 109417
6 ...
JS_LookupProperty
syntax bool js_lookupproperty(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandlevalue vp); bool js_lookupucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, js::mutablehandlevalue vp); bool js_lookuppropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 bool js_lookupelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mutablehandlevalue vp); // ---- obsolete since spidermonkey 31 --...
... name or id const char * or const char1
6_t *or js::handleid name of the property to look up.
...see also bug 547140 -- removed *withflags bug 109417
6 ...
JS_NewCompartmentAndGlobalObject
obsolete since jsapi 1
6this feature is obsolete.
... this article covers features introduced in spidermonkey 1.8.1 js_newcompartmentandglobalobject has been removed in bug 75518
6.
...see also js_newglobalobject bug 75518
6 bug 5
63099 ...
JS_NewUCString
syntax jsstring * js_newucstring(jscontext *cx, char1
6_t *chars, size_t length); jsstring * js_newstring(jscontext *cx, char *buf, size_t length); // obsolete since jsapi 1.8.5 name type description cx jscontext * the context in which to create the new string.
... buf char * or char1
6_t * pointer to a character array, allocated with js_malloc, containing the characters for the js string to create.
...see also js_convertvalue js_getemptystringvalue js_getstringbytes js_getstringchars js_getstringlength js_internstring js_internucstring js_internucstringn js_newstringcopyn js_newstringcopyz js_newucstringcopyn js_newucstringcopyz js_valuetostring bug
6182
62 - removed js_newstring ...
JS_NewStringCopyN
syntax jsstring * js_newstringcopyn(jscontext *cx, const char *s, size_t n); jsstring * js_newucstringcopyn(jscontext *cx, const char1
6_t *s, size_t n); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... s const char* or const char1
6_t * pointer to the array of characters containing the text for the js string to create.
...the two functions differ only in the type of the character array s; both functions create ordinary javascript strings, and all javascript strings are made up of 1
6-bit characters.
JS_ReportErrorNumber
bool js_reporterrorflagsandnumberuc(jscontext *cx, unsigned flags, jserrorcallback errorcallback, void *userref, const unsigned errornumber, ...); void js_reporterrornumberucarray(jscontext *cx, jserrorcallback errorcallback, void *userref, const unsigned errornumber, const char1
6_t **args); // added in spidermonkey 19 name type description cx jscontext * the context in which to report the error.
.../ const char1
6_t ** additional arguments for the error message.
... these arguments must be of type char * for js_reporterrornumber or js_reporterrorflagsandnumber, or char1
6_t * for js_reporterrornumberuc or js_reporterrorflagsandnumberuc.
JS_SetProperty
syntax bool js_setproperty(jscontext *cx, js::handleobject obj, const char *name, js::handlevalue v); bool js_setucproperty(jscontext *cx, js::handleobject obj, const char1
6_t *name, size_t namelen, js::handlevalue v); bool js_setpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlevalue v); // added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from which to derive runtime information.
... name or id const char * or const char1
6_t *or js::handleid name of the property to set.
... see also mxr id search for js_setproperty mxr id search for js_setucproperty mxr id search for js_setpropertybyid bug 4
611
63 ...
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: eaad8815dcc
66a717ddb87e9724d9
64e).
...this includes iterators and generators (bug 3492
63) and arrays (bug 417501).
...the new behavior conforms to the ecmascript standard, ecma 2
62-3 §11.13.1.
SpiderMonkey 17
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5 checksum: 20b
6f8f1140ef
6e47daa3b1
69
65c9202).
...it is supported on x8
6, x8
6_
64, and arm architectures.
... obsolete typedef replacement type provided by uint8, int8, uint1
6, int1
6, uint32, int32, uint
64, int
64 uint8_t, int8_t, uint1
6_t, int1
6_t, uint32_t, int32_t, uint
64_t, int
64_t mozilla/stdint.h uintn, intn unsigned (also known as unsigned int), int n/a jsdouble double n/a jsuintn, jsintn unsigned (also known as unsigned int), int n/a jspackedbool n/a n/a jsrefcount n/a ...
SpiderMonkey 24
you can download full source code here: https://ftp.mozilla.org/pub/mozilla.org/js/mozjs-24.2.0.tar.bz2 (sha1: ce779081cc11bd0c871c
6f303fc4a0091cf4fe
66) spidermonkey 24 is the javascript engine that shipped in firefox 24.
... — dec 1
6, 2013 the download url still available, but spidermonkey not release alone!
...it is supported on x8
6, x8
6_
64, and arm architectures.
WebReplayRoadmap
similarly, when the debugger supports dom mutation breakpoints (bug 1547
692), the recording can be searched for dom mutations, and mutations can be logged to the console and seeked to later.
... media elements (bug 130414
6) web audio (bug 1304147) webrtc (bug 1304149) webassembly (bug 1481007) webgl (bug 150
64
67) support more operating systems (not yet implemented) only macos is supported right now.
... this is partially underway and is tracked in bug 15215
66.
Animated PNG graphics
for purposes of chunk descriptions, an unsigned int shall be a 32-bit unsigned integer in network byte order limited to the range 0 to (2^32)-1; an unsigned short shall be a 1
6-bit unsigned integer in network byte order with the range 0 to (2^1
6)-1; and a byte shall be an 8-bit unsigned integer with the range 0 to (2^8)-1.
... 1
6 y_offset unsigned int y position at which to render the following frame.
...om adat into fctl changed contents of adat to fctl+idats+fend added clarifications on what's allowed and what isn't renamed actl to actl, fctl to fctl, adat to fdat and fend to fend to comply with the png spec chunk naming requirements from 0.5 added the ihdr and plte crcs to the actl chunk the actl fctl and adat are now copy safe, renamed them to actl, fctl and adat from 0.
6 the fdat chunk is no longer a container for other chunks, but rather a replacement for an idat chunk removed the fend chunk added a sequence number field to fdat reintroduced the width and height fields in fctl from 0.7 removed hidden flag, instead only the first frame can be hidden and it is signaled with a missing fctl idat, fctl and fdat are no longer required to have n...
Querying Places
ort group_by_domain = 2 const unsigned short group_by_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 unsign...
...ed short sort_by_lastmodified_descending = 14 const unsigned short sort_by_annotation_ascending = 15 const unsigned short sort_by_annotation_descending = 1
6 const unsigned short results_as_uri = 0 const unsigned short results_as_visit = 1 const unsigned short results_as_full_visit = 2 (not yet implemented -- see bug 320831) attribute unsigned short sortingmode attribute autf8string sortingannotation attribute unsigned short resulttype attribute boolean 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 shor...
... // first query object searches for "firefox" in title/url var query1 = placesutils.history.getnewquery(); query1.searchterms = "firefox"; // second query object searches for visited in past 24 hours and from mozilla.org var query2 = placesutils.history.getnewquery(); query2.begintimereference = query2.time_relative_now; query2.begintime = -24 *
60 *
60 * 1000000; // 24 hours ago in microseconds query2.endtimereference = query2.time_relative_now; query2.endtime = 0; // now query2.domain = "mozilla.org"; var result = placesutils.history.executequeries([query1, query2], 2, options); note: keyword searching doesn't work correctly across or queries.
Accessing the Windows Registry Using XPCOM
the data types supported by this interface are defined as named constants on the interface as follows: type_none — probably not useful type_string — a unicode string value type_binary — binary data type_int — a 32 bit integer type_int
64 — a
64 bit integer each of these types (except type_none) has a corresponding method to read the value data: readstringvalue() readbinaryvalue() readintvalue() readint
64value() since javascript is a dynamically-typed language, you may wish to use the following code to handle all types of data.
... function readregistryvalue(wrk, value) { switch (wrk.getvaluetype(value)) { case wrk.type_string: return wrk.readstringvalue(value); case wrk.type_binary: return wrk.readbinaryvalue(value); case wrk.type_int: return wrk.readintvalue(value); case wrk.type_int
64: return wrk.readint
64value(value); } // unknown type return null; } writing registry values writing registry values is quite similar to reading.
...this example demonstrates a trivial registry value cache for one key: var cache = {}; function readregistryvaluenocache(wrk, value) { switch (wrk.getvaluetype(value)) { case wrk.type_string: return wrk.readstringvalue(value); case wrk.type_binary: return wrk.readbinaryvalue(value); case wrk.type_int: return wrk.readintvalue(value); case wrk.type_int
64: return wrk.readint
64value(value); } // unknown type return null; } function readregistryvalue(wrk, value) { if (wrk.haschanged()) { // wipe out the cache cache = {}; } if (value in cache) { return cache[value]; } cache[value] = readregistryvaluenocache(wrk, value); return cache[value]; } var wrk = components.classes["@mozilla.org/windows-registry-key;1"] ...
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-44a7-bd
6e-0d8c83d94883)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void change(in string avalue); }; this is the same as the nsisimple interface used here.
...for example: xpidl.exe -m typelib -w -v -i c:\source\mozilla\obj-i
68
6-pc-mingw32\dist\idl foo.idl xpidl will then create nsipysimple.xpt, which should be placed correctly (e.g., in the 'components' directory).
...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_ = "{c45
6ceb5-f142-40a8-becc-7
64911bc8ca5}" _reg_contractid_ = "@mozilla.org/pysimple;1" def __init__(self): self.yourname = "a default name" # or mname ?
Avoiding leaks in JavaScript XPCOM components
if you implement nsiobserver in javascript and register that observer (without using weak references) with a service (for example, with the observer service bug 239833 or with the pref service bug 25
6822), the service will do exactly what you tell it to do: notify the observer you just created until you unregister the observer.
...consider this example from bug 2850
65: function _filterradiogroup(anode) { switch (anode.localname) { case "radio": return nodefilter.filter_accept; case "template": case "radiogroup": return nodefilter.filter_reject; default: return nodefilter.filter_skip; } } var iterator = this.ownerdocument.createtreewalker(thi...
...consider the example of bug 170022 (which also demonstrates a leak via a global variable, fixed later in bug 2312
66): const observer = { observe: function(subject, topic, data) { if (topic != "open-new-tab-request" || subject != window) return; delayedopentab(data); } }; const service = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); service.addobserver(observer, "open-new-tab-request", false); in this example, there is a s...
nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,
6,109
6,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="571,198,707,24
6" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,24
6" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,24
6" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcst...
...ring_(external)"> <area alt="" coords="1147,198,1259,24
6" 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,475,342" href="http://developer.mozilla.org/en/ns_convertutf1
6toutf8_external" shape="rect" title="ns_convertutf1
6toutf8_external"> <area alt="" coords="499,294,779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf1
6toascii_external" shape="rect" title="ns_lossyconvertutf1
6toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(ex...
...@param aradix must be 10 or 1
6 parameters nsresult* aerrorcode pruint32 aradix ...
nsACString_internal
<map id="classes" name="classes"> <area alt="" coords="45
6,5,
605,53" href="http://developer.mozilla.org/en/nsacstring_internal" shape="rect" title="nsacstring_internal"> <area alt="" coords="415,101,497,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="172,1...
...97,289,245" href="http://developer.mozilla.org/en/nsfixedcstring" shape="rect" title="nsfixedcstring"> <area alt="" coords="315,197,437,245" href="http://developer.mozilla.org/en/nsxpidlcstring" shape="rect" title="nsxpidlcstring"> <area alt="" coords="4
61,197,
611,245" href="http://developer.mozilla.org/en/nsdependentcstring" shape="rect" title="nsdependentcstring"> <area alt="" coords="
635,197,787,245" href="http://developer.mozilla.org/en/nspromiseflatcstring" shape="rect" title="nspromiseflatcstring"> <area alt="" coords="173,293,285,341" href="http://developer.mozilla.org/en/nscautostring" shape="rect" title="nscautostring"> <area alt="" coords="5,389,227,437" href="http://developer.mozilla.org/en/ns_lossyconvertutf1
6toascii" shape="rect" title="ns_lossyconvertutf1
6toascii"> <area alt="...
..." coords="251,389,435,437" href="http://developer.mozilla.org/en/ns_convertutf1
6toutf8" shape="rect" title="ns_convertutf1
6toutf8"> <area alt="" coords="309,293,445,341" href="http://developer.mozilla.org/en/nsadoptingcstring" shape="rect" title="nsadoptingcstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace repla...
nsAString (External)
<map id="classes" name="classes"> <area alt="" coords="9
63,
6,1045,54" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,10
69,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,
67
6,24
6" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,24
6" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="93...
...7,198,1071,24
6" href="http://developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promiseflatstring_(external)"> <area alt="" coords="1095,198,119
6,24
6" href="http://developer.mozilla.org/en/nsautostring_(external)" shape="rect" title="nsautostring_(external)"> <area alt="" coords="5,294,197,342" href="http://developer.mozilla.org/en/nsdependentstring_external" shape="rect" title="nsdependentstring_external"> <area alt="" coords="221,294,4
67,342" href="http://developer.mozilla.org/en/ns_convertasciitoutf1
6_external" shape="rect" title="ns_convertasciitoutf1
6_external"> <area alt="" coords="491,294,733,342" href="http://developer.mozilla.org/en/ns_convertutf8toutf1
6_external" shape="rect" title="ns_convertutf8toutf1
6_external"> <area alt="" coords="757,294,8
69,342" href...
...@param aradix must be 10 or 1
6 parameters nsresult* aerrorcode pruint32 aradix ...
mozIStorageError
empty 1
6 the database is empty.
... notadb 2
6 the opened file is not a database.
... locked
6 a table in the database is locked.
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x0000100
6 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x0000102
6 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x0...
...0001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x0000101
6 xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface.
... xformsinputdate 0x0000200
6 used for input[xsd:date] element.
nsIApplicationCache
1.0
66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) each application cache has a unique client id for use with nsicacheservice.opensession() method, to access the cache's entries.
... item_foreign 1
6 this item was listed in the application manifest, but named a different cache group as its manifest.
... item_opportunistic
64 this item matched an opportunistic cache namespace and was cached for that reason.
nsIAuthInformation
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the caller of nsiauthprompt2.promptusernameandpassword() or nsiauthprompt2.promptpasswordasync() provides an object implementing this interface; the prompt implementation can then read the values here to prefill the dialog.
... realm astring the server-supplied realm of the authentication as defined in rfc 2
617.
... previous_failed 1
6 we have already tried to log in for this channel (with auth values from a previous promptauth call), but it failed, so we now ask the user to provide a new, correct login.
nsIBidiKeyboard
a user is a bidirectional writer if they have keyboard layouts in both left-to-right and right-to-left directions (that is users who use arabic, iranian (persian), or israel (hebrew) keyboard layout, beside an us (english) layout.) inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.
6) method overview boolean islangrtl(); void setlangfrombidilevel(in pruint8 alevel); attributes attribute type description havebidikeyboards boolean indicates whether or not the system has at least one keyboard for each direction (left-to-right and right-to-left) installed.
...more info: bug 348724, bug 348724, and gnome bug: 11
662
6 mac only islangrtl is supported on this platform.
... bug 2
66551 see also documentation for bidi mozilla ...
nsICompositionStringSynthesizer
dom/interfaces/base/nsicompositionstringsynthesizer.idlscriptable this interface is a composition string synthesizer interface that synthesizes composition string with arbitrary clauses and a caret 1.0
66 introduced gecko 2
6 obsolete gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface is obsoleted in gecko 38.
...ause("bar".length, compositionstringsynthesizer.attr_selectedconvertedtext); compositionstringsynthesizer.appendclause("-buzz".length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.setcaret("foo-bar".length, 0); compositionstringsynthesizer.dispatchevent(); finally, when you commits composition with the last composition string "foo-bar-buzz": // deprecated in 3
6, first, dispatch commit string without clause information compositionstringsynthesizer.setstring("foo-bar-buzz"); compositionstringsynthesizer.dispatchevent(); // then, dispatch compositionend with the commit string domwindowutils.sendcompositionevent("compositionend", "foo-bar-buzz", ""); starting gecko 3
6, you can do it simpler: domwindowutils.sendcompositionevent("compositioncommitasis", "...
...", ""); if you need to commit composition with different commit string gecko 3
6 or later, you can use "compositioncommit": domwindowutils.sendcompositionevent("compositioncommit", "foo-bar-buzz", ""); method overview void appendclause(in unsigned long alength, in unsigned long aattribute); boolean dispatchevent(); void setcaret(in unsigned long aoffset, in unsigned long alength); void setstring(in astring astring); constants constant value description attr_raw_input 0x02 a clause attribute.
nsIContentView
1.0
66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) see working with content views for details on how to use this api.
...support for using this api for all scrollable elements is coming; see bug
618975 for details.
... id nscontentviewid id that can be used in conjunction with nsidomwindowutils to change the actual document, instead of just how it is transformed; this is a
64-bit unsigned integer.
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 print
64 the creation time of the cookie, in microseconds since midnight (00:00:00), january 1, 1970 utc.
... expiry print
64 the actual expiry time of the cookie, in seconds since midnight (00:00:00), january 1, 1970 utc.
... lastaccessed print
64 the last time the cookie was accessed, in microseconds since midnight (00:00:00) on january 1, 1970 utc.
nsICookieManager2
last changed in gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0) inherits from: nsicookiemanager this interface is included in the services.jsm javascript code module.
... to create an object implementing this interface: components.utils.import("resource://gre/modules/services.jsm"); var cookieservice = services.cookies; method overview void add(in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print
64 aexpiry); boolean cookieexists(in nsicookie2 acookie); unsigned long countcookiesfromhost(in autf8string ahost); boolean findmatchingcookie(in nsicookie2 acookie, out unsigned long acountfromhost); obsolete since gecko 1.9 nsisimpleenumerator getcookiesfromhost(in autf8string ahost); void importcookies(in nsifile acookiefile); methods add() adds a cookie.
... void add( in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print
64 aexpiry ); parameters ahost the host or domain for which the cookie is set.
nsIDNSService
to access the service, use: var dnsservice = components.classes["@mozilla.org/network/dns-service;1"] .createinstance(components.interfaces.nsidnsservice); note: starting in gecko 7.0, the "happy eyeballs" strategy is used to reduce lengthy timeouts when attempting backup connections during attempts to connect from clients that have broken ipv
6 connectivity.
... this is done by disabling ipv
6 on backup connections.
... resolve_disable_ipv
6 (1 << 5) if this flag is set, only ipv4 addresses will be returned by asyncresolve() and resolve().
nsIDOMNSHTMLDocument
inherits from: nsisupports last changed in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring getselection(); nsidomdocument open(in acstring acontenttype, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); ...
...obsolete since gecko
6.0 linkcolor domstring same as body.link plugins nsidomhtmlcollection same as embeds for compatibility with netscape 4.x read only.
...obsolete since gecko
6.0 methods captureevents() provided for compatibility with netscape 4.x, but does not actually do anything.
nsIDataSignatureVerifier
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview boolean verifydata(in acstring adata, in acstring asignature, in acstring apublickey); methods verifydata() verifies that the data matches the data that was used to generate the signature.
...asignature the signature of the data, base
64 encoded.
... apublickey the public part of the key used for signing, der encoded then base
64 encoded.
nsIDownloadManager
this interface is deprecated as of firefox 2
6.
... download_blocked_parental
6 the download has been blocked, either by parental controls or the virus scanner determining that a file is infected and cannot be cleaned.
...(see bug 41
6683) download_type_download 0 the download type used by adddownload.
nsIEditor
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) method overview [noscript] void init(in nsidomdocument doc, in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags); void setattributeorequivalent(in nsidomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframe...
...ode node); direction controller void switchtextdirection(); output methods astring outputtostring(in astring formattype, in unsigned long flags); example: // flags are declared in base/public/nsidocumentencoder.idl // outputselectiononly = 1, outputformatted = 2, // outputraw = 4, outputbodyonly = 8, // outputpreformatted = 1
6, outputwrap = 32, // outputformatflowed =
64, outputabsolutelinks = 258, // outputencodew3centities = 25
6, outputcrlinebreak = 512, // outputlflinebreak = 1024, outputnoscriptcontent = 2048, // outputnoframescontent = 409
6, outputnoformattinginpre = 8192, // outputencodebasicentities=1
6384, outputencodelatin1entities=327
68, // outputencodehtmlentities=
6553
6, outputper...
...ut long outnumtests, out long outnumtestsfailed); [notxpcom] boolean ismodifiablenode(in nsidomnode anode); constants load flags constant value description enone 0 enext 1 eprevious 2 enextword 3 epreviousword 4 etobeginningofline 5 etoendofline
6 attributes attribute type description contentsmimetype string the mime type of the document.
nsIFaviconService
1.0
66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/favicon-service;1.
...this function will also ignore the error page favicon uri (chrome://global/skin/icons/warning-1
6.png).
...this function tries to optimize the favicon size; if it's bigger than a defined limit, gecko attempts to convert it to a 1
6x1
6 pixel png image.
nsIHttpActivityObserver
1.0
66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void observeactivity(in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint
64 aextrasizedata, in acstring aextrastringdata); attributes attribute type description isactive boolean true when the interface is active and should observe http activity, otherwise false.
... activity_subtype_transaction_close 0x500
6 the http transaction has been closed.
...void observeactivity( in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint
64 aextrasizedata, in acstring aextrastringdata ); parameters ahttpchannel the nsihttpchannel on which the activity occurred.
nsIHttpServer
var resp = new httpresponse(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-faa
6-4013-939
6-f993
6cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port.
...if it doesn't * match the field-value production in rfc 2
61
6 * @note * no syntax checking is done of the given type, beyond ensuring that it is * a valid header field value.
... behavior when not given a string matching * the media-type production in rfc 2
61
6 section 3.7 is undefined.
nsIIOService
extractscheme() utility to extract the scheme from a url string, consistently and according to spec (see rfc 398
6).
... exceptions thrown ns_error_malformed_uri if uri does not begin with a valid scheme (as defined by rfc 398
6) followed by a colon.
... see also rfc 398
6 ...
nsILocalFile
66 introduced gecko 1.0 deprecated gecko 14 inherits from: nsifile last changed in gecko 1.0 implemented by: @mozilla.org/file/local;1.
... void reveal(); void setrelativedescriptor(in nsilocalfile fromfile, in acstring relativedesc); attributes attribute type description diskspaceavailable print
64 the number of bytes available to non-superuser on the disk volume containing the nsilocalfile.
...for example, the octal value 0
600 may be used to limit read and write access to the current user of the system.
nsILoginManager
toolkit/components/passwordmgr/public/nsiloginmanager.idlscriptable used to interface with the built-in password manager 1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0) replaces nsipasswordmanager which was used in older versions of gecko.
... ahttprealm for protocol logins, specify the http realm for which the login applies; this is obtained from the www-authenticate header (see rfc 2
617).
... ahttprealm for protocol logins, specify the http realm for which the login applies; this is obtained from the www-authenticate header (see rfc 2
617).
nsIMacDockSupport
1.0
66 introduced gecko 2.0 inherits from: nsimacdocksupport last changed in gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) implemented by: @mozilla.org/cookie-monster;1.
...this is created by using the dockmenu attribute of nsimacdocksupport here: http://mxr.mozilla.org/mozilla-release/source/browser/base/content/browser.js#15
62 this is seen here: if you were to copy and follow that example you would replace the default native menu.
... var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyid('mainpopupset'); mainpopupset.appendchild(macmenu); let dockmenuelement = macmenu; //document.getelementbyid("menu_mac_dockmenu");
66 let nativemenu = cc["@mozilla.org/widget/standalonenativemenu;1"].createinstance(ci.nsistandalonenativemenu); console.log('dockmenuelement:', dockmenuelement); nativemenu.init(dockmenuelement); docksupport.dockmenu = nativemenu; this replaces the default menu with this one menuitem that says "show most recent window".
nsIMemoryReporter
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) any piece of code that wishes to allow its memory use to be monitored may create an nsimemoryreporter object and then register it by calling nsimemoryreportermanager.registerreporter().
...attributes attribute type description amount print
64 the numeric value reported by the memory reporter, specified in the units indicated by the units attribute.
...as of gecko
6.0, the path should start with "explicit/" if the memory report accounts for all memory reported under sub-paths.
nsINavHistoryQueryOptions
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) method overview nsinavhistoryqueryoptions clone(); attributes attribute type description applyoptionstocontainers boolean if true, the query options are only applied to the containers.
... sort_by_uri_descending
6 sort by the descending uri order.
... results_as_tag_query
6 returns nsinavhistoryqueryresultnode nodes for each tag.
nsIRadioInterfaceLayer
1.0
66 introduced gecko 12.0 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: @mozilla.org/telephony/system-worker-manager;1.
... speakerenabled bool constants call state constants constant value description call_state_unknown 0 call_state_dialing 1 call_state_alerting 2 call_state_busy 3 call_state_connecting 4 call_state_connected 5 call_state_holding
6 call_state_held 7 call_state_resuming 8 call_state_disconnecting 9 call_state_disconnected 10 call_state_incoming 11 datacall_state_unknown 0 datacall_state_connecting 1 datacall_state_connected 2 datacall_state_disconnecting 3 datacall_state_disconnected 4 call_state_ringing 2 obsolete since gecko 14.0 methods answercall() void answercall( in unsi...
...exceptions thrown missing exception missing description getnumberofmessagesfortext() returns the number of multi-part sms needed for a given text (1
60 characters for one sms).
nsISHEntry
inherits from: nsihistoryentry last changed in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3) implemented by: @mozilla.org/browser/session-history-entry;1.
... obsolete since gecko
6.0 parent nsishentry parent of this entry.
...(prior to gecko
6.0 returned a json encoded string.) sticky boolean whether the content viewer is marked "sticky" windowstate nsisupports saved state of the global window object.
nsISocketTransport
inherits from: nsitransport last changed in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3) note: connection setup is triggered by opening an input or output stream, it does not start on its own.
... status_connecting_to 0x804b0007 status_connected_to 0x804b0004 status_sending_to 0x804b0005 status_waiting_for 0x804b000a status_receiving_from 0x804b000
6 connection flags values for the connectionflags attribute constant value description bypass_cache 0 when making a new connection bypass_cache will force the necko dns cache entry to be refreshed with a new call to nspr if it is set before opening the new stream.
... disable_ipv
6 2 when this flag is set, the socket will ignore any ipv
6 addresses the host may offer and will only attempt to connect to ipv4 addresses.
nsIWebProgressListener2
last changed in gecko 1.9 (firefox 3) inherits from: nsiwebprogresslistener method overview void onprogresschange
64(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress); boolean onrefreshattempted(in nsiwebprogress awebprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri); methods onprogresschange
64() notification that the progress has changed for one of the requests associated with awebprogress.
...this function is identical to nsiwebprogresslistener.onprogresschange(), except that this function supports
64-bit values.
...void onprogresschange
64( in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress ); parameters awebprogress the nsiwebprogress instance that fired the notification.
nsIXULRuntime
1.0
66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/xre/app-info;1.
... is
64bit boolean indicates whether the current firefox build is
64-bit.
... the result takes the form <processor>-<compilerabi>, for example: x8
6-msvc ppc-gcc3.
nsIXmlRpcClient
supported arguments are: nsisupportspruint8, nsisupportspruint1
6, nsisupportsprint1
6, nsisupportsprint32: i4, nsisupportsprbool: boolean, nsisupportschar, nsisupportscstring: string, nsisupportsfloat, nsisupportsdouble: double, nsisupportsprtime: datetime.iso8
601, nsiinputstream: base
64, nsisupportsarray: array, nsidictionary: struct note that both nsisupportsarray and nsidictionary can only hold any of the supported input types.
... return value will be converted as follows: i4 or int: nsisupportsprint32 boolean: nsisupportsprbool string: nsisupportscstring double: nsisupportsdouble datetime.iso8
601: nsisupportsprtime base
64: nsisupportscstring array: nsisupportsarray struct: nsidictionary faults (server side errors) are indicated by returning ns_error_failure.
...'base
64' isn't supported.
nsPIPromptService
inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.
6 / thunderbird 3.1 / fennec 1.0) implemented by: the contract id isn't defined.
...eeditfield1value the value is
6.
...edelaybuttonenable the value is
6.
nsMsgSearchOpValue
nsmsgsearchopvalue defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl 14
6 typedef long nsmsgsearchopvalue; 147 148 [scriptable, uuid(91
60b19
6-
6fcb-4eba-aaaf-
6c80
6c4ee420)] 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 15
6 const nsmsgsearchopvalue isbefore = 5; /* for date attributes */ 157 const nsmsgsearchopvalue isafter =
6; 158 159 const nsmsgsearchopvalue ishigherthan = 7; /* for priority.
... is also applies */ 1
60 const nsmsgsearchopvalue islowerthan = 8; 1
61 1
62 const nsmsgsearchopvalue beginswith = 9; 1
63 const nsmsgsearchopvalue endswith = 10; 1
64 1
65 const nsmsgsearchopvalue soundslike = 11; /* for ldap phoenetic matching */ 1
66 const nsmsgsearchopvalue ldapdwim = 12; /* do what i mean for simple search */ 1
67 1
68 const nsmsgsearchopvalue isgreaterthan = 13; 1
69 const nsmsgsearchopvalue islessthan = 14; 170 171 const nsmsgsearchopvalue namecompletion = 15; /* name completion operator...as the name implies =) */ 172 const nsmsgsearchopvalue isinab = 1
6; 173 const nsmsgsearchopvalue isntinab = 17; 174 const nsmsgsearchopvalue isntempty = 18; /* primarily for tags */ 175 const nsmsgsearchopvalue matches = 19; /* generic te...
...rm for use by custom terms */ 17
6 const nsmsgsearchopvalue doesntmatch = 20; /* generic term for use by custom terms */ 177 const nsmsgsearchopvalue knummsgsearchoperators = 21; /* must be last operator */ 178 }; ...
Theme Packaging
sample install.rdf file <?xml 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>{18b
64b5
6-d42f-428d-a88c-baa413bc413f}</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this extension can install into, with minimum and maximum supported versions.
... --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</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> <em: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 {35...
...50f703-e582-4d05-9a08-453d09bdfdc
6} seamonkey {92
650c4d-4b8e-4d2a-b7eb-24ecf4f
6b
63a} pale moon {8de7fcbb-c55c-4fbe-bfc5-fc555c87dbc4} official references for toolkit api official references.
Add to iPhoto
note: this extension uses carbon routines, which can no longer be used in firefox add-ons now that firefox is a
64-bit application.
...this is done using the js-ctypes library object's declare() method, just like importing a function: this.kcftypearraycallbacks = this.lib.declare("kcftypearraycallbacks", this.cfarraycallbacks); note: for the record, this is the part that requires a nightly build of firefox 3.7a5pre dated april 1
6, 2010 or later; this capability was introduced in that build.
...ownload from the url var filename = src.slice(src.lastindexof("/")+1); // build the path to download to var dest = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .get("tmpd", components.interfaces.nsifile); dest.append(filename); dest.createunique(dest.normal_file_type, 0
600); var wbp = components.classes['@mozilla.org/embedding/browser/nswebbrowserpersist;1'] .createinstance(components.interfaces.nsiwebbrowserpersist); var ios = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri(src, document.characterset, gbrowser.selectedbrowser.contentdocument.documenturiob...
Drawing and Event Handling - Plugins
nperror npp_new(npmimetype plugintype, npp instance, uint1
6 mode, int1
6 argc, char *argn[], char *argv[], npsaveddata *saved) { ...
... int1
6 npp_handleevent(npp instance, npevent *event); the instance parameter represents the current plug-in.
... this code shows the specific data passed through this method for each platform: #ifdef xp_mac typedef eventrecord npevent; #elif defined(xp_win) typedef struct _npevent { int1
6 event; int1
6 wparam; int32 lparam; } npevent; #elif defined(xp_unix) typedef xevent npevent; #else typedef void npevent; #endif /* xp_mac */ int1
6 npp_handleevent(npp instance, npevent* event); on mac os, when npp_handleevent is called, the current port is set up correctly so that its origin matches the upper-left corner of the plug-in.
Frame rate - Firefox Developer Tools
a frame rate of
60fps is the target for smooth performance, giving you a time budget of 1
6.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 1
6.7ms for all the updates that need to be made synchronously in response to some event.
... however, consistency is especially important: if you can't deliver
60fps, it's better to deliver lower frame rates more consistently, and avoid sudden dips in the frame rate which cause the site to freeze.
Settings - Firefox Developer Tools
opening settings beginning with firefox
62, the icon to open developer tools settings has been moved into a menu accessed by clicking/touching ...
... as of firefox
62, if the option to "select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the settings tab is displayed, even if the current page doesn't include any iframes.
... note: this option got removed from the ui in firefox 5
6, because this version ships with a new debugger ui, but it can still be enabled for the old ui by setting the preference devtools.debugger.workers to true.
The JavaScript input interpreter - Firefox Developer Tools
starting in firefox 7
6, 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 (…).
... help()deprecated since gecko
62 :help displays help text.
... :screenshot new in firefox
62.
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 7
6 and above, the message can look like the following: see connection for firefox for android
68 for more information.
... connection to firefox for android
68 releases of firefox for android that are based on version
68 cannot be debugged from desktop firefox versions
69 or later, because of the difference in release versions.
... until such time as firefox for android is updated to a newer major release, in synch with desktop firefox, you should use one of the following firefox for android versions: firefox preview, if your desktop firefox is the main release or developer edition firefox for android nightly if you prefer to test with the main release of firefox for android (i.e., based on release
68), you can do so with the desktop firefox extended support release (esr), which is also based on version
68.
AesCtrParams - Web APIs
this must be 1
6 bytes long (the aes block size).
...for example, if length is set to
64, then the first half of counter is the nonce and the second half is used for the counter.
...the nist sp800-38a standard, which defines ctr, suggests that the counter should occupy half of the counter block (see appendix b.2), so for aes it would be
64.
Animation.currentTime - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 animation.currenttime; // 23.404 // 24.192 // 25.514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled animation.currenttime; // 49.8 // 50.
6 // 51.7 // ...
Animation.startTime - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 animation.starttime; // 23.404 // 24.192 // 25.514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled animation.starttime; // 49.8 // 50.
6 // 51.7 // ...
AnimationPlaybackEvent.currentTime - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 playbackevent.currenttime; // 23.404 // 24.192 // 25.514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled playbackevent.currenttime; // 49.8 // 50.
6 // 51.7 // ...
AnimationTimeline.currentTime - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 animationtimeline.currenttime; // 23.404 // 24.192 // 25.514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled animationtimeline.currenttime; // 49.8 // 50.
6 // 51.7 // ...
AudioBufferSourceNode - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="19
6" y="30" font-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/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="30" font-size="12px" font-family="consolas,monaco,anda...
...le mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y1="25" x2="5
61" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="5
61" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which has the same number of channels as the audiobuffer ...
AudioParam.setTargetAtTime() - Web APIs
the decay rate as defined by the timeconstant parameter is exponential; therefore the value will never reach target completely, but after each timestep of length timeconstant, the value will have approached target by another 1-e-1≈
63.2%1 - e^{-1} \approx
63.2%.
... choosing a good timeconstant as mentioned above, the value changes exponentially, with each timeconstant bringing you another
63.2% toward the target value.
... time since starttime value 0 * timeconstant 0% 0.5 * timeconstant 39.3% 1 * timeconstant
63.2% 2 * timeconstant 8
6.5% 3 * timeconstant 95.0% 4 * timeconstant 98.2% 5 * timeconstant 99.3% n * timeconstant 1-e-n1 - e^{-n} examples in this example, we have a media source with two control buttons (see the webaudio-examples repo for the source code, or view the example live.) when these buttons are pressed, settargetattime(...
AudioParam.value - Web APIs
usage notes value precision and variation the data type used internally to store value is a single-precision (32-bit) floating point number, while javascript uses
64-bit double-precision floating point numbers.
... 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.3000001907348
63.
... one solution is to use the math.fround() method, which returns the single-precision value equivalent to the
64-bit javascript value specified—when setting value, like this: const source = new audiobuffersourcenode(...); const rate = math.fround(5.3); source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); in this case, the log output will be true.
AuthenticatorAssertionResponse.signature - Web APIs
the signature read-only property of the authenticatorassertionresponse interface is an arraybuffer object which is the signature of the authenticator for both authenticatorassertionresponse.authenticatordata and a sha-25
6 hash of the client data (authenticatorassertionresponse.clientdatajson).
... syntax signature = authenticatorassertionresponse.signature value an arraybuffer object which the signature of the authenticator (using its private key) for both authenticatorassertionresponse.authenticatordata and a sha-25
6 hash given by the client for its data (the challenge, the origin, etc.
... examples var options = { challenge: new uint8array(2
6), // will be another value, provided by the relying party server timeout:
60000 }; navigator.credentials.get({ publickey: options }) .then(function (assertionpkcred) { var signature = assertionpkcred.response.signature; // send response and client extensions to the server so that it can // go on with the authentication }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'signature' in that specification.
AuthenticatorResponse.clientDataJSON - Web APIs
challenge the base
64url encoded version of the cryptographic challenge sent from the relying party's server.
...it has two properties: status: a string which is either "supported" which indicates the client support token binding but did not negotiate with the relying party or "present" when token binding was used already id: a domstring which is the base
64url encoding of the token binding id which was used for the communication.
...arraybuffertostr(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } // pk is a publickeycredential that is the result of a create() or get() promise var clientdatastr = arraybuffertostr(pk.clientdatajson); var clientdataobj = json.parse(clientdatastr); console.log(clientdataobj.type); // "webauthn.create" or "webauthn.get" console.log(clientdataobj.challenge); // base
64 encoded string containing the original challenge console.log(clientdataobj.origin); // the window.origin specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'clientdatajson' in that specification.
BaseAudioContext.createScriptProcessor() - Web APIs
if specified, the buffersize must be one of the following values: 25
6, 512, 1024, 2048, 409
6, 8192, 1
6384.
...le, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 409
6 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(409
6, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; ...
...ains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(channel); // loop through the 409
6 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); s...
BaseAudioContext.currentTime - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 audioctx.currenttime; // 23.404 // 24.192 // 25.514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled audioctx.currenttime; // 49.8 // 50.
6 // 51.7 // ...
BiquadFilterNode() - Web APIs
e 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 4
6, the default values were not supported.safari ?
... 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42notes full support 42notes notes before opera 4
6, the default values were not supported.safari 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.
Bluetooth.requestDevice() - Web APIs
both 1
6-bit service ids 0x1802 and 0x1803.
...a proprietary 128-bit uuid service c48e
60
67-5295-48d3-8d5c-0395f
61792b1.
...let options = { filters: [ {services: ['heart_rate']}, {services: [0x1802, 0x1803]}, {services: ['c48e
60
67-5295-48d3-8d5c-0395f
61792b1']}, {name: 'examplename'}, {nameprefix: 'prefix'} ], optionalservices: ['battery_service'] } navigator.bluetooth.requestdevice(options).then(function(device) { console.log('name: ' + device.name); // do something with the device.
CSSRule - Web APIs
"h1,h2 { font-size: 1
6pt }" or "@import 'url'".
...(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.suppo...
...rts_rule 12 csssupportsrule cssrule.document_rule 13 cssdocumentrule cssrule.font_feature_values_rule 14 cssfontfeaturevaluesrule cssrule.viewport_rule 15 cssviewportrule cssrule.region_style_rule 1
6 cssregionstylerule cssrule.unknown_rule 0 cssunknownrule cssrule.charset_rule 2 csscharsetrule (removed in most browsers.) an up-to-date informal list of constants can be found on the csswg wiki.
CanvasRenderingContext2D.drawImage() - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f374e9c
6fc.jpg" width="300" height="227"> </div> javascript the source image is taken from the coordinates (33, 71), with a width of 104 and a height of 124.
... 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 300x227 in css pixels image.src = 'https://udn.realityripple.com/samples/db/f374e9c
6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in css pixels for the canvas element canvas.width = this.naturalwidth; canvas.height = th...
...is.naturalheight; // will draw the image as 300x227, ignoring the custom size of
60x45 // given in the constructor ctx.drawimage(this, 0, 0); // to use the custom size we'll have to specify the scale parameters // using the element's width and height properties - lets draw one // on top in the corner: ctx.drawimage(this, 0, 0, this.width, this.height); } result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d: drawimage' in that specification.
CanvasRenderingContext2D.rotate() - Web APIs
html <canvas id="canvas"></canvas> javascript the shape is a rectangle with its corner at (80,
60), a width of 140, a height of 30.
...its vertical center is at (
60 + 30 / 2), or 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.
CanvasRenderingContext2D.strokeRect() - Web APIs
it has a width of 1
60 and a height of 100.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.strokestyle = 'green'; ctx.strokerect(20, 10, 1
60, 100); result applying various context settings this example draws a rectangle with a drop shadow and thick, beveled outlines.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 1
60, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification.
Compositing example - Web APIs
etcontext("2d"); ctx.save(); ctx.globalcompositeoperation = "lighter"; ctx.beginpath(); ctx.fillstyle = "rgba(255,0,0,1)"; ctx.arc(100, 200, 100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,0,255,1)"; ctx.arc(220, 200, 100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,255,0,1)"; ctx.arc(1
60, 100, 100, math.pi*2, 0, false); ctx.fill(); ctx.restore(); ctx.beginpath(); ctx.fillstyle = "#f00"; ctx.fillrect(0,0,30,30) ctx.fill(); }; var colorsphere = function(element) { var ctx = canvas1.getcontext("2d"); var width = 3
60; var halfwidth = width / 2; var rotate = (1 / 3
60) * math.pi * 2; // per degree var offset = 0; // scrollbar offset va...
...r 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) % 3
60, 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 + h...
...alfwidth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,30,30) ctx.fill(); return ctx.canvas; }; // hsv (1978) = h: hue / s: saturation / v: value color = {}; color.hsv_rgb = function (o) { var h = o.h / 3
60, 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: r = v; g = c; ...
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="5
6" y="30" font-size="12px" font-family="consolas,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="2
66" 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" alig...
...nment-baseline="middle">characterdata</text></a><polyline points="39
6,25 40
6,20 40
6,30 39
6,25" stroke="#d4dde4" fill="none"/><line x1="40
6" y1="25" x2="43
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="43
6" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.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.
Document.createNodeIterator() - Web APIs
nodefilter.show_document 25
6 shows document nodes.
... nodefilter.show_entity_reference 1
6 shows entityreference nodes.
... nodefilter.show_processing_instruction
64 shows processinginstruction nodes.
Document.createTreeWalker() - Web APIs
nodefilter.show_document 25
6 shows document nodes.
... nodefilter.show_entity_reference 1
6 shows entityreference nodes.
... nodefilter.show_processing_instruction
64 shows processinginstruction nodes.
Document: keydown event - Web APIs
for example, a lowercase "a" will be reported as
65 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as
65 by all events.
... since firefox
65, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
Document: keyup event - Web APIs
for example, a lowercase "a" will be reported as
65 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as
65 by all events.
... since firefox
65, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
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="5
6" y="30" font-size="12px" font-family="consolas,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="2
66" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="30
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
... document.loadoverlay()obsolete since gecko
61 loads a xul overlay dynamically.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
consider this example (again, the whitespace characters in the html are marked so they are visible): .people-list { list-style-type: none; margin: 0; padding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em; background: #f0
6; border: 1px solid; } <ul class="people-list">⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ </ul> this renders as follows: hidden example 3 .people-list { list-style-type: none; margin: 0; padding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em; background: #f0
6; border: 1px solid; } <ul class="people-list...
... */ function is_all_ws( nod ) { // use ecma-2
62 edition 3 string and regexp features return !(/[^\t\n\r ]/.test(nod.textcontent)); } /** * determine if a node should be ignored by the iterator functions.
... */ function data_of( txt ) { var data = txt.textcontent; // use ecma-2
62 edition 3 string and regexp features data = data.replace(/[\t\n\r ]+/g, " "); if (data.charat(0) == " ") data = data.substring(1, data.length); if (data.charat(data.length - 1) == " ") data = data.substring(0, data.length - 1); return data; } example the following code demonstrates the use of the functions above.
Element: keydown event - Web APIs
for example, a lowercase "a" will be reported as
65 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as
65 by all events.
... since firefox
65, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
Element: keyup event - Web APIs
for example, a lowercase "a" will be reported as
65 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as
65 by all events.
... since firefox
65, the keyup and keydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
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="5
6" y="30" font-size="12px" font-family="consolas,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" y="1" width="75" height="50" fill="#f4f7f8" 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" alignm...
... this change is implemented in chrome since version 4
6.0 and firefox since version 48.0.
Event.timeStamp - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 event.timestamp; // 1519211809934 // 15192118103
62 // 1519211811
670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled event.timestamp; // 1519129853500 // 1519129858900 // 15191298
64400 // ...
ExtendableEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; 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="7
6,25 8
6,20 8
6,30 7
6,25" st...
...roke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="11
6" y="1" width="150" height="50" fill="#f4f7f8" 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.
... var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/130228
621
600
6/config/customlogo.gif' ]; console.log('handling install event.
Using files from web applications - Web APIs
size the size of the file in bytes as a read-only
64-bit integer.
...tml = "<p>no files selected!</p>"; } else { filelist.innerhtml = ""; const list = document.createelement("ul"); filelist.appendchild(list); for (let i = 0; i < this.files.length; i++) { const li = document.createelement("li"); list.appendchild(li); const img = document.createelement("img"); img.src = url.createobjecturl(this.files[i]); img.height =
60; img.onload = function() { url.revokeobjecturl(this.src); } li.appendchild(img); const info = document.createelement("span"); info.innerhtml = this.files[i].name + ": " + this.files[i].size + " bytes"; li.appendchild(info); } } } this starts by fetching the url of the <div> with the id filelist.
... set the image's height to
60 pixels.
File.lastModifiedDate - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in
60 it will be 2ms.
... // reduced time precision (2ms) in firefox
60 somefile.lastmodifieddate.gettime(); // 1519211809934 // 15192118103
62 // 1519211811
670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled somefile.lastmodifieddate.gettime(); // 1519129853500 // 1519129858900 // 15191298
64400 // ...
FileReaderSync - Web APIs
—
61ie no support noopera no support ?
... — 4
6safari no support nowebview android no support ?
...—
61opera android no support ?
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="5
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="2
66" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="30
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-...
...baseline="middle">document</text></a><polyline points="34
6,25 35
6,20 35
6,30 34
6,25" stroke="#d4dde4" fill="none"/><line x1="35
6" y1="25" x2="38
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="38
6" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="44
6" 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="5
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><pol...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="43
6" 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 toucheventhandlers.
HTMLIFrameElement.allowPaymentRequest - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetallowpaymentrequest experimentalchrome full support
60disabled full support
60disabled disabled from version
60: this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.edge full support 15firefox full support 5
6ie ?
... webview android no support nochrome android full support
61disabled full support
61disabled disabled from version
61: this feature is behind the #web-payments preference (needs to be set to enabled).
HTMLImageElement.srcset - Web APIs
"header
640.png
640w, header9
60.png 9
60w, header1024.png 1024w, header.png" this string provides versions of a header image to use when the user agent's renderer needs an image of width
640px, 9
60px, or 1024px.
... "icon32px.png 32w, icon
64px.png
64w, icon-retina.png 2x icon-ultra.png 3x icon.svg" here, options are provided for an icon at widths of 32px and
64px, as well as at pixel densities of 2x and 3x.
... <div class="box"> <img src="/files/1
6797/clock-demo-200px.png" alt="clock" srcset="/files/1
68
64/clock-demo-200px.png 1x, /files/1
6797/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.
HTMLSlotElement.name - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetname 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).
... support noopera full support 40safari full support 10.1webview android full support 53chrome android full support 53firefox 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 41safari ios full support 10.3samsung internet android full support
6.0legend full support full support no support no supportexperimental.
Working with the History API - Web APIs
because firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of
640k characters on the serialized representation of a state object.
...starting in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3), the object is serialized using the structured clone algorithm.
...starting in gecko
6.0 (firefox
6.0 / thunderbird
6.0 / seamonkey 2.3), the object is serialized using the structured clone algorithm.
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="4
6" y="30" font-size="12px" font-family="consolas,mon...
...amsung internetidbcursorwithvaluechrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
...th the vendor prefix: webkitvaluechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
ImageCapture.takePhoto() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome 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 47 full support 47 no support 4
6 — 47notes notes photosettings argument not supported.safari ?
... webview android full support
60 full support
60 no support 59 —
60notes notes photosettings argument not supported.chrome android full support
60 full support
60 no support 59 —
60notes notes photosettings argument not supported.firefox android ?
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; 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="7
6,25 8
6,20 8
6,30 7
6,25" st...
...roke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="11
6" 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="2
66,25 27
6,20 27
6,30 2
66,25" stroke="#d4dde4" fill="none"/><line x1="27
6" y1="25" x2="30
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="30
6" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace...
... var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/130228
621
600
6/config/customlogo.gif' ]; console.log('handling install event.
installChrome - Web APIs
installchrome installs new skin or locale packages in netscape
6 and mozilla.
...description installchrome is a special method for installing new chrome in netscape
6 and mozilla.
... the method performs a simplified installation of language packs or netscape
6/mozilla skins, and saves you the trouble of writing separate installation scripts in the xpi files or using the more sophisticated methods of the install and file objects.
Intersection Observer API - Web APIs
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: 1725px; } .wrapper { position: relative; top:
600px; } .samplebox { position: relative; left: 175px; width: 150px; background-color: rgb(245, 170, 140); border: 2px solid rgb(201, 12
6, 17); padding: 4px; margin-bottom:
6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; position: absolute; margin: 0; b...
... let thresholdsets = [ [], [0.5], [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.
6, 0.7, 0.8, 0.9, 1.0], [0, 0.25, 0.5, 0.75, 1.0] ]; for (let i=0; i<=1.0; i+= 0.01) { thresholdsets[0].push(i); } // add each box, creating a new observer for each for (let i=0; i<4; i++) { let template = document.queryselector("#boxtemplate").content.clonenode(true); let boxid = "box" + (i+1); template.queryselector(".samplebox").id = boxid; wrapper.appendchil...
...the result, given the default value of numsteps (20), is the following list of thresholds: # ratio # ratio 1 0.05 11 0.55 2 0.1 12 0.
6 3 0.15 13 0.
65 4 0.2 14 0.7 5 0.25 15 0.75
6 0.3 1
6 0.8 7 0.35 17 0.85 8 0.4 18 0.9 9 0.45 19 0.95 10 0.5 20 1.0 we could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing.
MediaStreamConstraints.audio - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 1
60px; } .button { cursor: pointer; width: 1
60px; border: 1px solid black; font-size: 1
6px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } ...
...f constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 1
60px; } .button { cursor: pointer; width: 1
60px; border: 1px solid black; font-size: 1
6px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } ...
... echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellation be enabled and that, if possible, the sample rate be 8 bits per sample instead of the more common 1
6 bits (possibly as a bandwidth saving measure).
MediaStreamConstraints.video - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="1
60" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 1
60px; border: 1px solid black; font-size: 1
6px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javasc...
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="1
60" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 1
60px; border: 1px solid black; font-size: 1
6px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javasc...
...ript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 1
60, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of video constraints that indicate a preference for a video track whose dimensions are as close as possible to 1
60x120 pixels, and whose frame rate is as close to 15 frames per second as possible.
Using the Media Capabilities API - Web APIs
const videoconfiguration = { type: "file", video: { contenttype: "video/webm;codecs=vp8", width: 800, height:
600, bitrate: 10000, 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", channe...
...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>7
680x4320</option> <option>3840x21
60</option> <option>25
60x1440</option> <option>1920x1080</option> <option>1280x720</option> <option selected>800x
600</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">...
... <option>
60</option> <option>50</option> <option>30</option> <option>24</option> <option selected>15</option> </select> </li> <li> <label for="bitrate">select a bitrate</label> <select id="bitrate"> <option>4000</option> <option>2500</option> <option>800</option> </select> </li> </ul> <p><input type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul> javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(); }, createconfiguration: function () { var size = document.getelementbyid('size').value.split('x'); mc.videoconfiguration = { type: 'file', video: { contenttype: docum...
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="5
6" y="30" font-size="12px" font-family="consolas,...
...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.
... node.nodeprincipal obsolete since gecko 4
6 a nsiprincipal representing the node principal.
NodeIterator.whatToShow - Web APIs
nodefilter.show_document 25
6 shows document nodes.
... nodefilter.show_entity_reference 1
6 shows entityreference nodes.
... nodefilter.show_processing_instruction
64 shows processinginstruction nodes.
NodeIterator - Web APIs
nodefilter.show_document 25
6 shows document nodes.
... nodefilter.show_entity_reference 1
6 shows entityreference nodes.
... nodefilter.show_processing_instruction
64 shows processinginstruction nodes.
OES_texture_half_float - Web APIs
the oes_texture_half_float extension is part of the webgl api and adds texture formats with 1
6- (aka half float) and 32-bit floating-point components.
... constants ext.half_float_oes half floating-point type (1
6-bit).
... half floating-point color buffers this extension implicitly enables the ext_color_buffer_half_float extension (if supported), which allows rendering to 1
6-bit floating point formats.
OffscreenCanvas.getContext() - Web APIs
see bug 80117
6 for canvas 2d api support from workers.
... depth: boolean that indicates that the drawing buffer has a depth buffer of at least 1
6 bits.
... examples var offscreen = new offscreencanvas(25
6, 25
6); var gl = offscreen.getcontext("webgl"); gl; // webglrenderingcontext gl.canvas; // offscreencanvas specifications specification status comment html living standardthe definition of 'offscreencanvas.getcontext()' in that specification.
PasswordCredential - Web APIs
samsung internet android full support
6.0idname experimentaldeprecatedchrome full support 51edge full support ≤79firefox ?
... samsung internet android full support
6.0password experimentalchrome full support
60edge full support ≤79firefox ?
... webview android full support
60chrome android full support
60firefox android ?
PaymentAddress - Web APIs
paymentaddress.country read only a domstring specifying the country in which the address is located, using the iso-31
66-1 alpha-2 standard.
... paymentaddress.regioncode read only a domstring specifying the region of the address, represented as a "code element" of an iso31
66-2 country subdivision name (e.g.
... const supportedinstruments = [ { supportedmethods: "basic-card", }, ]; const details = { total: { label: "donation", amount: { currency: "usd", value: "
65.00" } }, displayitems: [ { label: "original donation amount", amount: { currency: "usd", value: "
65.00" }, }, ], shippingoptions: [ { id: "standard", label: "standard shipping", amount: { currency: "usd", value: "0.00" }, selected: true, }, ], }; const options = { requestshipping: true }; async function dopaymentrequest() { const re...
PaymentRequest.abort() - Web APIs
var request = new paymentrequest(supportedinstruments, details, options); var paymenttimeout = window.settimeout(() => { window.cleartimeout(paymenttimeout); request.abort().then(() => { print('payment timed out after 20 minutes.'); }).catch(() => { print('unable to abort, because the user is currently in the process ' + 'of paying.'); }); }, 20 *
60 * 1000); /* 20 minutes */ specifications specification status comment payment request apithe definition of 'abort()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetabort()chrome full support
61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.3samsung internet android full support
6.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.
PaymentRequest.prototype.id - Web APIs
const details = { id: "super-store-order-123-12312", total: { label: "total due", amount: { currency: "usd", value: "
65.00" }, }, }; const request = new paymentrequest(methoddata, details); console.log(request.id); // super-store-order-123-12312 the id is then also available in the paymentresponse returned from the show() method, but under the requestid attribute.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidchrome full support
61edge full support 1
6firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support
60firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentRequest.onshippingoptionchange - Web APIs
n.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '0.00'; details.total.amount.value = '55.00'; // shipping to jp is supported } else if (addr.country === 'jp') { shippingoption.id = 'jp'; shippingoption.label = 'international shipping'; shippingoption.amount.value = '10.00'; details.total.amount.value = '
65.00'; // shipping to elsewhere is unsupported } else { // empty array indicates rejection of the address details.shippingoptions = []; return promise.resolve(details); console.log(details.error); } // hardcode for simplicity if (details.displayitems.length === 2) { details.displayitems[2] = shippingoption; } else { details.displayitems.p...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonshippingoptionchangechrome full support
61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.3samsung internet android full support
6.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.
PerformanceFrameTiming - Web APIs
a frame rate of
60fps (frames per second) for a
60hz refresh rate is the target for a good responsive user experience.
... this means the browser should process a frame in about 1
6.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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,...
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="1
60" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="1
61,25 171,20 171,30 1
61,25" stroke="#d4dde4" fill="none"/><line x1="171" 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="#f4f7f8" 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 "pa...
...the time to first-contentful-paint was 2787.4
60 milliseconds.
ProcessingInstruction - Web APIs
line-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="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="2
66" 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="39
6,25 40
6,20 40
6,30 39
6,25" stroke="#d4dde4" fill="none"/><line x1="40
6" y1="25" x2="43
6" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="43
6" y="1" width="210" height="50" fill="#f4f7f8" 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 specification status comment domthe definition of 'processinginstruction' in that specification.
PublicKeyCredential.id - Web APIs
this property is a base
64url encoded version of publickeycredential.rawid.
... syntax id = publickeycredential.id value a domstring being the base
64url encoded version of publickeycredential.rawid.
... examples var publickey = { challenge: new uint8array(2
6) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(2
6), /* 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 status comment ...
PublicKeyCredentialCreationOptions.challenge - Web APIs
note: a challenge will be at least 1
6 bytes long.
... syntax challenge = publickeycredentialcreationoptions.challenge value a buffersource which is at least 1
6 bytes long.
... examples var publickey = { challenge: new uint8array(2
6) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(2
6), /* 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...
PushEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushevent experimentalchrome full support 42edge full support 1
6disabled full support 1
6disabled disabled from version 1
6: this feature is behind the enable service workers preference.
...ult.opera android full support 37safari ios no support nosamsung internet android full support 4.0pushevent() constructor experimentalchrome full support 42edge full support 1
6disabled full support 1
6disabled disabled from version 1
6: this feature is behind the enable service workers preference.
...ush enabled by default.opera android full support 37safari ios no support nosamsung internet android full support 4.0data experimentalchrome full support 57edge full support 1
6disabled full support 1
6disabled disabled from version 1
6: this feature is behind the enable service workers preference.
RTCDataChannel.id - Web APIs
the read-only rtcdatachannel property id returns an id number (between 0 and
65,534) which uniquely identifies the rtcdatachannel.
... each rtcpeerconnection can therefore have up to a theoretical maximum of
65,534 data channels on it, although the actual maximum may vary from browser to browser.
... syntax var id = adatachannel.id; value an unsigned short value (that is, an integer between 0 and
65,535) which uniquely identifies the data channel.
RTCDataChannel - Web APIs
every data channel is associated with an rtcpeerconnection, and each peer connection can have up to a theoretical maximum of
65,534 data channels (the actual limit may vary from browser to browser).
... property bufferedamount returns the number of bytes of data currently queued to be sent over the data channel.bufferedamountlowthreshold the rtcdatachannel property bufferedamountlowthreshold is used to specify the number of bytes of buffered outgoing data that is considered "low." the default value is 0.id read only the read-only rtcdatachannel property id returns an id number (between 0 and
65,534) which uniquely identifies the rtcdatachannel.label read only the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel.
...urns an enum of type rtcdatachannelstate which indicates the state of the data channel's underlying data connection.reliable read only the read-only rtcdatachannel property reliable indicates whether or not the data channel is reliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and
65,535) which uniquely identifies the rtcdatachannel.event handlersalso inherits event handlers from: eventtargetonbufferedamountlow the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the browser calls when the bufferedamountlow event is sent to the rtcdatachannel.
RTCIceCandidate.candidate - Web APIs
for an a-line (attribute line) that looks like this: a=candidate:4234997325 1 udp 2043278322 192.1
68.0.5
6 44323 typ host the corresponding candidate string's value will be "candidate:4234997325 1 udp 2043278322 192.1
68.0.5
6 44323 typ host".
...the complete list of attributes for this example candidate is: foundation = 4234997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.1
68.0.5
6" 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.
... this example could be simplified somewhat; you may more often see the code look something like this, taking advantage of more advanced ecmascript 201
6 features: let handlenewicecandidate = candidatesdp => mypeerconnection.addicecandidate(new rtcicecandidate(candidatesdp)); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.candidate' in that specification.
RTCInboundRtpStreamStats.qpSum - Web APIs
syntax var qpsum = rtcinboundrtpstreamstats.qpsum; value an unsigned
64-bit integer value which indicates the sum of the quantization parameter (qp) value for every frame sent or received so far on the track described by the rtcinboundrtpstreamstats object.
...for example, for the vp8 codec, the qp value can be anywhere from 1 to 127 and is found in the frame header element "y_ac_qi", whose value is defined in rfc
638
6: 19.2.
... h.2
64 uses a qp which ranges from 0 to 51; in this case, it's an index used to derive a scaling matrix used during the quantization process.
RTCOutboundRtpStreamStats.qpSum - Web APIs
syntax var qpsum = rtcoutboundrtpstreamstats.qpsum; value an unsigned
64-bit integer value which indicates the sum of the quantization parameter (qp) value for every frame sent so far on the track described by the rtcoutboundrtpstreamstats object.
...for example, for the vp8 codec, the qp value can be anywhere from 1 to 127 and is found in the frame header element "y_ac_qi", whose value is defined in rfc
638
6: 19.2.
... h.2
64 uses a qp which ranges from 0 to 51; in this case, it's an index used to derive a scaling matrix used during the quantization process.
RTCPeerConnection.onicecandidateerror - Web APIs
example pc.onicecandidateerror = function(event) { if (event.errorcode >= 300 && event.errorcode <=
699) { // stun errors are in the range 300-
699.
... see rfc 5389, section 15.
6 // for a list of codes.
... turn adds a few more error codes; see // rfc 57
66, section 15 for details.
RTCRtpReceiver.getCapabilities() static function - Web APIs
example the function below returns a boolean indicating whether or not the device supports receiving h.2
64 video on a webrtc connection.
... since rtcrtpreceiver.getcapabilities() actually only indicates probable support, attempting to receive h.2
64 video might still fail even after getting a positive response from this function.
... function canreceiveh2
64() { let capabilities = rtcrtpreceiver.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mimetype === "video/h2
64") { return true; } }); return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.getcapabilities()' in that specification.
RTCRtpSender.getCapabilities() static function - Web APIs
example the function below returns a boolean indicating whether or not the device supports sending h.2
64 video on an rtcrtpsender.
... since rtcrtpsender.getcapabilities() actually only indicates probable support, h.2
64 support might still fail even after getting a positive response from this function.
... function cansendh2
64() { let capabilities = rtcrtpsender.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mimetype === "video/h2
64") { return true; } }); return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.getcapabilities()' in that specification.
RTCRtpStreamStats.qpSum - Web APIs
syntax var qpsum = rtcrtpstreamstats.qpsum; value an unsigned
64-bit integer value which indicates the sum of the quantization parameter (qp) value for every frame sent or received so far on the track described by the rtcrtpstreamstats object.
...for example, for the vp8 codec, the qp value can be anywhere from 1 to 127 and is found in the frame header element "y_ac_qi", whose value is defined in rfc
638
6: 19.2.
... h.2
64 uses a qp which ranges from 0 to 51; in this case, it's an index used to derive a scaling matrix used during the quantization process.
RsaHashedKeyGenParams - Web APIs
some organizations are now recommending that it should be 409
6.
...unless you have a good reason to use something else, specify
65537 here ([0x01, 0x00, 0x01]).
...you can pass any of sha-25
6, sha-384, or sha-512 here.
SVGAnimationElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38
6" 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...
SVGClipPathElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" 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 ...
SVGComponentTransferFunctionElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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 ...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="30
6" 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 descrip...
SVGCursorElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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 ...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...xt-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="1
60" height="50" fill="#f4f7f8" 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 pa...
SVGDescElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" x...
...2="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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" 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 pare...
SVGFEBlendElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...t-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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_...
SVGFEColorMatrixElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="mid...
...or="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
66" 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 ...
SVGFEComponentTransferElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="n...
...one"/><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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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-b...
...ddle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="33
6" 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 propertie...
SVGFEConvolveMatrixElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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-baselin...
..."middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="2
60" height="50" fill="#f4f7f8" 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 ...
SVGFEDiffuseLightingElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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-basel...
...middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="34
6" 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 ...
SVGFEDisplacementMapElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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-basel...
...middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="34
6" 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 ...
SVGFEDistantLightElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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"/><lin...
...e 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="m...
...r="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
61" 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 fro...
SVGFEDropShadowElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="middl...
...ext-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="2
61" y="
65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" 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 propertie...
SVGFEFloodElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...t-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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 prop...
SVGFEGaussianBlurElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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"/><lin...
...e 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="m...
...r="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
61" 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 ...
SVGFEImageElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...t-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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 p...
SVGFEMergeElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...t-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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...
SVGFEMergeNodeElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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"...
...chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="271" y="
65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="37
6" 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 i...
SVGFEMorphologyElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="middl...
...ext-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="2
61" y="
65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" 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 ...
SVGFEOffsetElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" y...
...1="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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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">eleme...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" 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 ...
SVGFEPointLightElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="middl...
...ext-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="2
61" y="
65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" 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 propertie...
SVGFESpecularLightingElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="non...
...e"/><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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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-bas...
...iddle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" 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...
SVGFESpotLightElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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"...
...chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="271" y="
65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="37
6" 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 i...
SVGFETileElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="2...
...5" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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</...
...xt-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="1
60" height="50" fill="#f4f7f8" 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 pa...
SVGFETurbulenceElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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="middl...
...ext-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="2
61" y="
65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" 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 valu...
SVGFilterElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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 ...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...xt-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="1
60" height="50" fill="#f4f7f8" 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 svgan...
SVGGradientElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="#...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" 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...
SVGGraphicsElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="#d...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" 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 th...
SVGLength - Web APIs
) properties 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"); va...
...+ 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: 37.79527
66418457, valueinspecifiedunits:
6: 1, valueasstring: 1cm value: 2
6.
66666603088379, valueinspecifiedunits 9: 20, valueasstring: 20pt value: 2
6.
66666603088379, valueinspecifiedunits 8: 0.2777777
61220932, valueasstring: 0.277778in constants name value description svg_lengthtype_unknown 0 the unit type is not one of predefined unit types.
... svg_lengthtype_cm
6 a value was specified using the cm units defined in css2.
SVGMPathElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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</te...
...ext-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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 proper...
SVGMaskElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" 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 pare...
SVGMetadataElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" y...
...1="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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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">eleme...
...-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" 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 pro...
SVGPatternElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...t-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="39
6" 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 p...
SVGScriptElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" y...
...1="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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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">eleme...
...xt-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="1
60" height="50" fill="#f4f7f8" 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 cor...
SVGStopElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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" x...
...2="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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
...text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" 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 pare...
SVGStyleElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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-base...
...ext-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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 par...
SVGSymbolElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="2...
...5" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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</...
...xt-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="1
60" height="50" fill="#f4f7f8" 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 prope...
SVGTitleElement - 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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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</te...
...ext-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" 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 proper...
ScriptProcessorNode.onaudioprocess - Web APIs
syntax var audioctx = new audiocontext(); var scriptnode = audioctx.createscriptprocessor(409
6, 1, 1); scriptnode.onaudioprocess = function() { ...
...le, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 409
6 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(409
6, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; ...
...ains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(channel); // loop through the 409
6 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); s...
ServiceWorkerGlobalScope - Web APIs
this interface inherits from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase
64, and windoweventhandlers.
...tion: relative; width: 100%; padding-bottom: 12.142857142857142%; 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="5
6" 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/workerglobalscope" target="_top"><rect x="151" y="1" width="170" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="23
6" 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="3
61" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="3
61" y="1" width="240" height="50" fill="#f4f7f8" 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...
Slottable: assignedSlot - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedslot 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).
... support noopera full support 40safari full support 10.1webview android full support 53chrome android full support 53firefox 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 41safari ios full support 10.3samsung internet android full support
6.0legend full support full support no support no supportexperimental.
SubtleCrypto.encrypt() - Web APIs
algorithm parameters of invalid sizes, or aes-gcm plaintext longer than 2³⁹−25
6 bytes).
... function getmessageencoding() { const messagebox = document.queryselector(".aes-ctr #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded = getmessageencoding(); // counter will be needed for decryption counter = window.crypto.getrandomvalues(new uint8array(1
6)); return window.crypto.subtle.encrypt( { name: "aes-ctr", counter, length:
64 }, key, encoded ); } let iv = new uint8array(1
6); let key = new uint8array(1
6); let data = new uint8array(12345); //crypto functions are wrapped in promises so we have to use await and make sure the function that //contains this code is an async function //encrypt function wants ...
... function getmessageencoding() { const messagebox = document.queryselector(".aes-cbc #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded = getmessageencoding(); // iv will be needed for decryption iv = window.crypto.getrandomvalues(new uint8array(1
6)); return window.crypto.subtle.encrypt( { name: "aes-cbc", iv }, key, encoded ); } aes-gcm this code fetches the contents of a text box, encodes it for encryption, and encrypts it using aes in gcm mode.
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="5
6" y="30" font-size="12px" font-family="consolas,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="2
66" 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" alig...
...nment-baseline="middle">characterdata</text></a><polyline points="39
6,25 40
6,20 40
6,30 39
6,25" stroke="#d4dde4" fill="none"/><line x1="40
6" y1="25" x2="43
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="43
6" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.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.
TextDecoder - Web APIs
examples representing text with typed arrays this example shows how to decode a chinese/japanese character , as represented by five different typed arrays: uint8array, int8array, uint1
6array, int1
6array, and int32array.
... let utf8decoder = new textdecoder(); // default 'utf-8' or 'utf8' let u8arr = new uint8array([240, 1
60, 174, 183]); let i8arr = new int8array([-1
6, -9
6, -82, -73]); let u1
6arr = new uint1
6array([41200, 47022]); let i1
6arr = new int1
6array([-2433
6, -18514]); let i32arr = new int32array([-1213292304]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8arr)); console.log(utf8decoder.decode(u1
6arr)); console.log(utf8decoder.decode(i1
6arr)); console.log(utf8decoder.decode(i32arr)); handling non-utf8 text in this example, we decode the russian text "Привет, мир!", which means "hello, world." in our textdecoder() constructor, we specify the windows-1251 character encoding, which is appropriate for cyrillic script.
... let win1251decoder = new textdecoder('windows-1251'); let bytes = new uint8array([207, 240, 232, 22
6, 229, 242, 44, 32, 23
6, 232, 240, 33]); console.log(win1251decoder.decode(bytes)); // Привет, мир!
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,monac...
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="11
6" 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="...
... the exception to this is chrome, starting with version 5
6 (desktop, chrome for android, and android webview), where the default value for the passive option for touchstart and touchmove is true and calls to preventdefault() will have no effect.
TreeWalker.whatToShow - Web APIs
nodefilter.show_document 25
6 shows document nodes.
... nodefilter.show_entity_reference 1
6 shows entityreference nodes.
... nodefilter.show_processing_instruction
64 shows processinginstruction nodes.
TreeWalker - Web APIs
nodefilter.show_document 25
6 shows document nodes.
... nodefilter.show_entity_reference 1
6 shows entityreference nodes.
... nodefilter.show_processing_instruction
64 shows processinginstruction nodes.
WebGL2RenderingContext.texSubImage3D() - Web APIs
gl.r8 gl.r1
6f gl.r32f gl.r8ui gl.rg8 gl.rg1
6f gl.rg32f gl.rgui gl.rgb8 gl.srgb8 gl.rgb5
65 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb1
6f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb5_a1 gl.rgba4444 gl.rgba1
6f gl.rgba32f gl.rgba8ui type a glenum specifying the data type of the texel data.
... possible values: gl.unsigned_byte: 8 bits per channel for gl.rgba gl.unsigned_short_5_
6_5: 5 red bits,
6 green bits, 5 blue bits.
... a uint1
6array must be used if type is either gl.unsigned_short_5_
6_5, gl.unsigned_short_4_4_4_4, gl.unsigned_short_5_5_5_1, or ext.half_float_oes.
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
ext.compressed_rgba_atc_interpolated_alpha_webgl when using the webgl_compressed_texture_astc extension: ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr ext.compressed_rgba_astc_5x4_khr ext.compressed_srgb8_alpha8_astc_5x4_khr ext.compressed_rgba_astc_5x5_khr ext.compressed_srgb8_alpha8_astc_5x5_khr ext.compressed_rgba_astc_
6x5_khr ext.compressed_srgb8_alpha8_astc_
6x5_khr ext.compressed_rgba_astc_
6x
6_khr ext.compressed_srgb8_alpha8_astc_
6x
6_khr ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr ext.compressed_rgba_astc_8x
6_khr ext.compressed_srgb8_alpha8_astc_8x
6_khr ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr ext.compres...
...sed_rgba_astc_10x5_khr ext.compressed_srgb8_alpha8_astc_10x5_khr ext.compressed_rgba_astc_10x
6_khr ext.compressed_srgb8_alpha8_astc_10x
6_khr ext.compressed_rgba_astc_10x
6_khr ext.compressed_srgb8_alpha8_astc_10x
6_khr ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr when using the ext_texture_compression_bptc extension: ext.compressed_rgba_bptc_unorm_ext ext.compressed_srgb_alpha_bptc_unorm_ext ext.compressed_rgb_bptc_signed_float_ext ext.compressed_rgb_bptc_unsigned_float_ext when using the ext_texture_compression_rgtc ext...
... examples var ext = ( gl.getextension('webgl_compressed_texture_s3tc') || gl.getextension('moz_webgl_compressed_texture_s3tc') || gl.getextension('webkit_webgl_compressed_texture_s3tc') ); gl.compressedtexsubimage2d(gl.texture_2d, 0, 25
6, 25
6, 512, 512, ext.compressed_rgba_s3tc_dxt5_ext, texturedata); specifications specification status comment webgl 1.0the definition of 'compressedtexsubimage2d' in that specification.
WebGLRenderingContext.readPixels() - Web APIs
possible values: gl.unsigned_byte gl.unsigned_short_5_
6_5 gl.unsigned_short_4_4_4_4 gl.unsigned_short_5_5_5_1 gl.float webgl2 adds gl.byte gl.unsigned_int_2_10_10_10_rev gl.half_float gl.short gl.unsigned_short gl.int gl.unsigned_int gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev pixels an arraybufferview object to read data into.
... uint1
6array for gl.unsigned_short_5_
6_5, gl.unsigned_short_4_4_4_4, or gl.unsigned_short_5_5_5_1.
... a gl.invalid_operation error is thrown if type is gl.unsigned_short_5_
6_5 and format is not gl.rgb.
Advanced techniques: Creating and sequencing audio - Web APIs
one will change the tone and the other will change how the pulse modulates the first wave: <label for="hz">hz</label> <input name="hz" id="hz" type="range" min="
660" max="1320" value="880" step="1" /> <label for="lfo">lfo</label> <input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" /> as before, we'll vary the parameters when the range input values are changed by the user.
... let tempo =
60.0; const bpmcontrol = document.queryselector('#bpm'); bpmcontrol.addeventlistener('input', function() { tempo = number(this.value); }, false); then we'll create variables to define how far ahead we want to look, and how far ahead we want to schedule: let lookahead = 25.0; // how frequently to call scheduling function (in milliseconds) let scheduleaheadtime = 0.1; // how far ahead to schedu...
... function nextnote() { const secondsperbeat =
60.0 / tempo; nextnotetime += secondsperbeat; // add beat length to last beat time // advance the beat number, wrap to zero currentnote++; if (currentnote === 4) { currentnote = 0; } } we want to create a reference queue for the notes that are to be played, and the functionality to play them using the functions we've previously created: const notesinqueue = []; function schedulenote(beatnumber, time) { // push the note on the queue, even if we're not playing.
Web audio spatialization basics - Web APIs
by default, both are 3
60 degrees.
...let's create constants that store the values we'll use for these parameters later on: const innercone =
60; const outercone = 90; const outergain = 0.3; the next parameter is distancemodel — this can only be set to linear, inverse, or exponential.
... let's set up a rotation rate, which we'll convert into a radian range value for use in math.sin and math.cos later, when we want to figure out the new coordinates when we're rotating our boombox: // set up rotation constants const rotationrate =
60; // bigger number equals slower sound rotation const q = math.pi/rotationrate; //rotation increment in radians we can also use this to work out degrees rotated, which will help with the css transforms we will have to create (note we need both an x and y-axis for the css transforms): // get degrees for css const degreesx = (q * 180)/math.pi; const degreesy = (q * 180)/math.pi; let's take a ...
Window.customElements - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcustomelementschrome full support 54edge 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.customelements.enabled preference (needs to be set to true).
... support noopera full support 41safari full support 10.1webview android full support 54chrome android full support 54firefox 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.customelements.enabled preference (needs to be set to true).
...to change preferences in firefox, visit about:config.opera android full support 41safari ios full support 10.3samsung internet android full support
6.0legend full support full support no support no supportuser must explicitly enable this feature.user must explicitly enable this feature.
Window.navigator - Web APIs
if (susrag.indexof("firefox") > -1) { sbrowser = "mozilla firefox"; // "mozilla/5.0 (x11; ubuntu; linux x8
6_
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.180
610.011) applewebkit/537.3
6 (khtml, like gecko) samsungbrowser/9.4 chrome/
67.0.339
6.87 mobile safari/537.3
6 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; ...
... // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/537.3
6 (khtml, like gecko) chrome/70.0.3538.102 safari/537.3
6 opr/57.0.3098.10
6" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft internet explorer"; // "mozilla/5.0 (windows nt 10.0; wow
64; 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; win
64; x
64) applewebkit/537.3
6 (khtml, like gecko) chrome/58.0.3029.110 safari/537.3
6 edge/1
6.1
6299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x8
6_
64) applewebkit/537.3
6 (khtml, like gecko) ubuntu chromium/
66.0.3359.181 chrome/
66.0.3359.181 safari/537.3
6" } 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 980x130
6" } else { sbrowser = "unknown"; } alert("you are using: " + sbrowser); specifications specification status comment html living standardthe definition of 'window: navigator' in that specification.
Privileged features - Web APIs
the dependent feature is currently under revision to be removed (bug 2148
67) in msie
6, the nearest equivalent to this feature is the showmodelessdialog() method.
...in ns
6.x, the alwayslowered window has no minimize system command icon and no restore/maximize system command.
...this was added in firefox
66 (see bug 1519893).
Window.openDialog() - Web APIs
example var win = opendialog("http://example.tld/zzz.xul", "dlg", "", "pizza",
6.98); notes new features all - initially activates (or deactivates ("all=no")) all chrome (except the behavior flags chrome, dialog and modal).
... passing extra parameters to the dialog to pass extra parameters into the dialog, you can simply supply them after the windowfeatures parameter: opendialog("http://example.tld/zzz.xul", "dlg", "", "pizza",
6.98); the extra parameters will then get packed into a property named arguments of type array, and this property gets added to the newly opened dialog window.
... var retvals = { address: null, delivery: null }; opendialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza",
6.98, retvals); if you set the properties of the retvals object in the dialog code as described below, you can now access them via the retvals array after the opendialog() call returns.
Window.pkcs11 - Web APIs
obsolete since gecko 29 (firefox 29 / thunderbird 29 / seamonkey 2.2
6)this feature is obsolete.
... note: this property has been returned null since gecko 1.9.0.14 (firefox 3.0.14) and removed in gecko 29.0 (firefox 29 / thunderbird 29 / seamonkey 2.2
6)) for security reasons.
...see bug 32
6628 for details on why the property was removed.
Window.print() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprintchrome full support 1notes full support 1notes notes starting with chrome 4
6, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support 12firefox full support 1ie full support 5opera full support
6notes full support ...
...
6notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari full support 1.1webview android full support 1notes full support 1notes notes starting with webview 4
6, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.chrome android full support 18notes full support 18notes notes starting with chrome 4
6, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.firefox android ...
... no support nonotes no support nonotes notes see bug 1247
609.opera android full support 10.1notes full support 10.1notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari ios full support 1samsung internet android full support 1.0notes full support 1.0notes notes starting with samsung internet 5.0, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.legen...
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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,m...
... windoworworkerglobalscope.atob() decodes a string of data which has been encoded using base-
64 encoding.
... windoworworkerglobalscope.btoa() creates a base-
64 encoded ascii string from a string of binary data.
WorkerGlobalScope - Web APIs
methods implemented from elsewhere windoworworkerglobalscope.atob() decodes a string of data which has been encoded using base-
64 encoding.
... windoworworkerglobalscope.btoa() creates a base-
64 encoded ascii string from a string of binary data.
...this change was made to stop close() being available on service workers, as it isn't supposed to be used there and always throws an exception when called (see bug 133
6043).
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="5
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="2
66" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="30
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-...
...baseline="middle">document</text></a><polyline points="34
6,25 35
6,20 35
6,30 34
6,25" stroke="#d4dde4" fill="none"/><line x1="35
6" y1="25" x2="38
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="38
6" y="1" width="110" height="50" fill="#f4f7f8" 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.
Using XMLHttpRequest - Web APIs
} else { // unable to compute progress information since the total size is unknown } } function transfercomplete(evt) { console.log("the transfer is complete."); } function transferfailed(evt) { console.log("an error occurred while transferring the file."); } function transfercanceled(evt) { console.log("the transfer has been canceled by the user."); } lines 3-
6 add event listeners for the various events that are sent while performing a data transfer using xmlhttprequest.
..."?" + odata.segments.join("&") : ""), true); oajaxreq.send(null); } else { /* method is post */ oajaxreq.open("post", odata.receiver, true); if (odata.technique === 3) { /* enctype is multipart/form-data */ var sboundary = "---------------------------" + date.now().tostring(1
6); oajaxreq.setrequestheader("content-type", "multipart\/form-data; boundary=" + sboundary); oajaxreq.sendasbinary("--" + sboundary + "\r\n" + odata.segments.join("--" + sboundary + "\r\n") + "--" + sboundary + "--\r\n"); } else { /* enctype is application/x-www-form-urlencoded or text/plain */ oajaxreq.setrequestheader("content-type", odata.conten...
...see bug
678057 for more details.
XMLHttpRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.07
692307
6923077%; 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="5
6" y="30" font-size="12px" font-family="consolas,m...
...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="27
6" 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" width...
... xmlhttprequest.mozresponsearraybuffer obsolete since gecko
6 read only arraybuffer.
XRRigidTransform.matrix - Web APIs
syntax let matrix = xrrigidtransform.matrix; value a float32array containing 1
6 entries which represents the 4x4 transform matrix which is described by the position and orientation properties.
... usage notes matrix format all 4x4 transform matrices used in webgl are stored in 1
6-element float32arrays.
...thus, for an array [a0, a1, a2, ..., a13, a14, a15], the matrix looks like this: [a[0]a[4]a[8]a[12]a[1]a[5]a[9]a[13]a[2]a[
6]a[10]a[14]a[3]a[7]a[11]a[15]]\begin{bmatrix} a[0] & a[4] & a[8] & a[12]\\ a[1] & a[5] & a[9] & a[13]\\ a[2] & a[
6] & a[10] & a[14]\\ a[3] & a[7] & a[11] & a[15]\\ \end{bmatrix} the first time matrix is requested, it gets computed; after that, it's should be cached to avoid slowing down to compute it every time you need it.
Generating HTML - Web APIs
<xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #
639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> </br> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> <p class="mybox"> <xsl:apply-templates select="//myns:body"/> ...
... the final xslt stylesheet looks as follows: figure
6 : final xslt stylesheetview example | view source xsl stylesheet: <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> ...
... <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #
639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> <p class="mybox"> <xsl:apply-templates select="//myns:body"/> </p> </body> </html> </xsl:template> <xsl:template match="myns:author"> -- <xsl:value-of select="." /> <xsl:if test="@company">...
ARIA: rowgroup 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">
67 million</span> </div> </div> </div> description rowgroup establishes a relationship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in html.
...iv> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="row" aria-rowindex="1
6"> <span role="cell">header</span> <span role="cell">h
6</span> </div> <div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </div> <div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </div> </div> </div> the above is a non-semantic aria table with a...
...e="rowgroup"> <tr role="row"> <th role="columnheader" aria-sort="none">aria role</th> <th role="columnheader" aria-sort="none">semantic element</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row" aria-rowindex="11"> <td role="cell">header</td> <td role="cell">h1</td> </tr> <tr role="row" aria-rowindex="1
6"> <td role="cell">header</td> <td role="cell">h
6</td> </tr> </tbody> </table> above is the semantic way of writing a table.
ARIA: heading role - Accessibility
instead of using a <div> or <span> with a heading role and aria-level, consider using a native <h1> through <h
6> element instead to indicate that this text is a heading, and what part of the structure it represents.
...div> however, instead, you should do: <div id="container"> <h1>the main page heading</h1> <p>this article is about showing a page structure.</p> <h2>introduction</h2> <p>an introductory text.</p> <h2>chapter 1</h2> <p>text</p> <h3>chapter 1.1</h3> <p>more text in a sub section.</p> ...</div> accessibility concerns if you must use the heading role and aria-level attribute, do not go over level
6 so that you are consistent with html.
... best practices the best way to use this role is to not use it at all, and instead use the native heading tags <h1> through <h
6> as shown in the example above.
Web accessibility for seizures and physical reactions - Accessibility
because of this condition, their brain will produce seizure-like discharges when exposed to this type of visual stimulation gamma oscillations and photosensitive epilepsy current biology volume 27, issue 9, 8 may 2017, pages r33
6-r338 certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy.
...eplepsia 2005 sept, 4
6(9):1423-5 pubmed.gov ncbi harding g1, wilkins aj, erba g, barkley gl, fisher rs; epilepsy foundation of america working group.
...editor harding along with the peat tool, is generaly recognized to be one of the two "gold standards" for analyzing flashes harding flash and pattern analyzer iso iec
619
66-2-2:2003(en) multimedia systems and equipment — colour measurement and management — part 2-2: colour management — extended rgb colour space — scrgb photosensitive epilepsy analysis tool along with the harding tool, is generaly recognized to be one of the two "gold standards" for analyzing flashes trace research and development center using peat to create seizureless web animations w3c css color module level 3 personalization semantics explainer 1.0.
Operable - Accessibility
2.2.
6 timeouts (aaa) added in 2.1 if there is a timeout (caused by user inactivity) warn users at the start of a process so they will not be surprised that a timeout exists (or only allow the timeout to occur after 20 hours of inactivity.
... 2.4.
6 headings and labels (aa) heading (e.g.
... understanding target size 2.5.
6 concurrent input mechanisms (aaa) added in 2.1 make sure people can use and switch between different modes of input when interacting with digital content including touchscreen, keyboard, mouse, voice commands, or alternative input devices.
:host() - CSS: Cascading Style Sheets
browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host()chrome full support 54edge full support 79firefox full support
63 full support
63 no support
61 —
63disabled disabled from version
61 until version
63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
... full support 10notes notes certain css selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.webview android full support 54chrome android full support 54firefox android full support
63 full support
63 no support
61 —
63disabled disabled from version
61 until version
63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
... full support 41safari ios full support 10notes full support 10notes notes certain css selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.samsung internet android full support
6.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.
:host - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:hostchrome full support 54edge full support 79firefox full support
63 full support
63 no support
61 —
63disabled disabled from version
61 until version
63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
...no support noopera full support 41safari full support 10webview android full support 54chrome android full support 54firefox android full support
63 full support
63 no support
61 —
63disabled disabled from version
61 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 41safari ios full support 10samsung internet android full support
6.0legend full support full support no support no supportuser must explicitly enable this feature.user must explicitly enable this feature.
:nth-last-child() - CSS: Cascading Style Sheets
even represents elements whose numeric position in a series of siblings is even: 2, 4,
6, etc., counting from the end.
... tr:nth-last-child(even) or tr:nth-last-child(2n) represents the even rows of an html table: 2, 4,
6, etc., counting from the end.
... </tr> <tr> <td>fifth line</td> </tr> </tbody> </table> css table { border: 1px solid blue; } /* selects the last three elements */ tr:nth-last-child(-n+3) { background-color: pink; } /* selects every element starting from the second to last item */ tr:nth-last-child(n+2) { color: blue; } /* select only the last second element */ tr:nth-last-child(2) { font-weight:
600; } result quantity query a quantity query styles elements depending on how many of them there are.
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
.box { margin-block: 5px 10px; } note: the shorthand properties margin-inline and margin-block shipped in firefox
66.
... in a horizontal writing-mode this css would apply 5px of padding to the top of the box and 10px of padding to the bottom: .box { padding-block: 5px 10px; } note: the shorthand properties padding-inline and padding-block shipped in firefox
66.
... .box { border-block: 2px solid green; border-inline-width: 4px; border-inline-style: dotted; border-inline-color: rebeccapurple; } note: these two value shorthands shipped in firefox
66, check browser support before using as other browsers may not have implemented them yet.
Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
in firefox
68 the new version of the specification will be shipped and these old properties removed.
...if you do not do this your scroll snapping will no longer work in firefox
68 and up.
...we also added the scroll-snap-type property twice, once with the y axis value needed for browsers that support the new spec, and once for firefox pre-
68, which supports the property but without the y value.
CSS values and units - CSS: Cascading Style Sheets
ic average character advance of a full width glyph in the element’s font, as represented by the “水” (cjk water ideograph, u+
6c34) glyph.
... absolute length units unit name equivalent to cm centimeters 1cm = 9
6px/2.54 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/40th of 1cm in inches 1in = 2.54cm = 9
6px pc picas 1pc = 1/1
6th of 1in pt points 1pt = 1/72th of 1in px pixels 1px = 1/9
6th of 1in when including a length value, if the length is 0, the unit identifier is not required.
... angle units angle values are represented by the type <angle> and accept the following values: unit name description deg degrees there are 3
60 degrees in a full circle.
Layout and the containing block - CSS: Cascading Style Sheets
<body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { display: block; width: 400px; height: 1
60px; background: lightgray; } p { width: 50%; /* == 400px * .5 = 200px */ height: 25%; /* == 1
60px * .25 = 40px */ margin: 5%; /* == 400px * .05 = 20px */ padding: 5%; /* == 400px * .05 = 20px */ background: cyan; } example 2 in this example, the paragraph's containing block is the <body> element, because <section> is not a block container (because of display: inline) and d...
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { position: absolute; left: 30px; top: 30px; width: 400px; height: 1
60px; padding: 30px 20px; background: lightgray; } p { position: absolute; width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */ height: 25%; /* == (1
60px + 30px + 30px) * .25 = 55px */ margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ background: cyan; } example 4 in this example, the paragraph's position ...
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { transform: rotate(0deg); width: 400px; height: 1
60px; background: lightgray; } p { position: absolute; left: 80px; top: 30px; width: 50%; /* == 200px */ height: 25%; /* == 40px */ margin: 5%; /* == 20px */ padding: 5%; /* == 20px */ background: cyan; } ...
Mozilla CSS extensions - CSS: Cascading Style Sheets
r toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 130
6214); use currentcolor instead.
...tregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover -moz-menuhovertext -moz-win-communicationstext -moz-win-mediatext -moz-nativehyperlinktext display -moz-box -moz-inline-block -moz-inline-box -moz-inline-gridobsolete since gecko
62 -moz-inline-stackobsolete since gecko
62 -moz-inline-table -moz-gridobsolete since gecko
62 -moz-grid-groupobsolete since gecko
62 -moz-grid-lineobsolete since gecko
62 -moz-groupbox -moz-deckobsolete since gecko
62 -moz-popupobsolete since gecko
62 -moz-stackobsolete since gecko
62 -moz-markerobsolete since gecko
62 empty-cells -moz-show-background (default value in quirks m...
...-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::-moz-range-track :-moz-read-only :-moz-read-write s ::-moz-scrolled-canvas ::-moz-scrolled-content ::-moz-scrolled-page-sequence ::-moz-selectiondeprecated since gecko
62 :-moz-submit-invalid :-moz-suppressed ::-moz-svg-foreign-content t ::-moz-table ::-moz-table-cell ::-moz-table-column ::-moz-table-column-group ::-moz-table-outer ::-moz-table-row ::-moz-table-row-group :-moz-tree-cell :-moz-tree-cell-text :-moz-tree-cell-text(hover) :-moz-tree-checkbox :-moz-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-...
aspect-ratio - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version
69 onwards) that applies to replaced elements and other related elements that accept width and height attributes.
...pport 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 firefox 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).
... no support nointernal mapping of width and height experimentalchrome full support 79edge full support 79firefox full support 71 full support 71 no support
69 — 71disabled disabled 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).
background-position - CSS: Cascading Style Sheets
*/ .examplethree { background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), url("https://mdn.mozillademos.org/files/7
693/catfront.png"); background-position: 0px 0px, right 3em bottom 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-position' in that specification.
... 14safari ios full support 1samsung internet android full support 1.0multiple backgroundschrome full support 1edge full support 12firefox full support 3.
6ie full support 9opera full support 10.5safari full support 1.3webview android full support ≤37chrome android full support 18firefox android full support ...
... 1.5legend full support full support quantum css notes gecko has a bug meaning that background-position can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 139044
6).
background-size - CSS: Cascading Style Sheets
/* keyword values */ background-size: cover; background-size: contain; /* one-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size: 3em 25%; background-size: auto
6px; background-size: auto auto; /* multiple backgrounds */ background-size: auto, auto; /* not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size:
6px, auto, contain; /* global values */ background-size: inherit; background-size: initial; background-size: unset; the background-size property is specified in one of the following ways: using the keyword values c...
...es not include the contain or cover keywords.edge full support 12firefox full support 4 full support 4 full support 49prefixed prefixed implemented with the vendor prefix: -webkit- no support 3.
6 — 4prefixed prefixed implemented with the vendor prefix: -moz-ie full support 9opera full support 10 full support 10 full support 15prefixed notes prefixed implemented with the vendor prefix: -webkit-notes webkit-base...
...mplemented 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.contain and coverchrome full support 3edge full support 12firefox full support 3.
6ie full support 9opera full support 10safari full support 5webview android full support 37chrome android full support 18firefox android full support ...
border-radius - CSS: Cascading Style Sheets
is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; border-radius: 4px 3px
6px / 2px 4px; /* ...
... is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius:
6px 2px; border-bottom-left-radius: 3px 4px; formal definition initial valueas each of the properties of the shorthand:border-top-left-radius: 0border-top-right-radius: 0border-bottom-right-radius: 0border-bottom-left-radius: 0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...0%; border: dotted; border-width: 10px 4px; border-radius: 10px 40px; border: dashed; border-width: 2px 4px; border-radius: 40px; live samples sample 1 : http://jsfiddle.net/tripad/qngkj/2/ sample 2 : http://jsfiddle.net/tripad/qngkj/3/ sample 3 : http://jsfiddle.net/tripad/qngkj/4/ sample 4 : http://jsfiddle.net/tripad/qngkj/5/ sample 5 : http://jsfiddle.net/tripad/qngkj/
6/ specifications specification status comment css backgrounds and borders module level 3the definition of 'border-radius' in that specification.
<easing-function> - CSS: Cascading Style Sheets
/div> </div> <ul> <li> <button class="animation-button">start animation</button> </li> <li> <label for="easing-select">choose an easing function:</label> <select id="easing-select"> <option selected>linear</option> <option>ease</option> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezier(0.1, -0.
6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > div { position: relative; height: 100px; } div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient(circl...
...*/ cubic-bezier(0, 0, 1, 1) /* negative values for ordinates are valid, leading to bouncing effects.*/ cubic-bezier(0.1, -0.
6, 0.2, 0) /* values > 1.0 for ordinates are also valid.
...*/ cubic-bezier(2.45, 0.
6, 4, 0.1) /* the two points must be defined, there is no default value.
flex-basis - CSS: Cascading Style Sheets
then, that change was reverted in bug 109331
6, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing.
...l syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex
6">
6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #
6ab
6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e8
6bb; color: white; font-size: 14px; text-align: center; position: relative; } .flex:after { position: absolute; z-i...
... .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:after { content: 'max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { flex-basis: fit-content; } .flex4:after { content: 'fit-content'; } .flex5 { flex-basis: content; } .flex5:after { content: 'content'; } .flex
6 { flex-basis: fill; } .flex
6:after { content: 'fill'; } results specifications specification status comment css flexible box layout modulethe definition of 'flex-basis' in that specification.
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 87.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% 87.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.
...mal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> </div> css /* this example uses the league mono variable font, developed by tyler finck (https://www.tylerfinck.com/) 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 { src: url('https://mdn.mozillademos.org/files/1
6014/leaguemonovariable.ttf'); font-family:'leaguemonovariable'; font-style: normal; font-stretch: 1% 500%; /* required by chrome */ } .container { border: 10px solid #f5f9fa; padding: 0 1rem; font: 1.5rem 'leaguemonovariable', sans-serif; } .condensed { font-stretch: 50%; } .normal { font-stretch: 100%; } .expanded { font-stretch: 200%; } result specifications ...
linear-gradient() - CSS: Cascading Style Sheets
the following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient linear-gradient(red 40%, yellow 30%, blue
65%); multi-position color stop are allowed.
... examples gradient at a 45-degree angle body { width: 100vw; height: 100vh; } body { background: linear-gradient(45deg, red, blue); } gradient that starts at
60% of the gradient line body { width: 100vw; height: 100vh; } body { background: linear-gradient(135deg, orange
60%, cyan); } gradient with multi-position color stops this example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
... body { width: 100vw; height: 100vh; } body { background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40%
60%, green
60% 80%, blue 80%); } more linear-gradient examples please see using css gradients for more examples.
object-position - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobject-positionchrome full support 31edge full support 1
6firefox full support 3
6ie no support noopera full support 19 full support 19 full support 11.
6prefixed prefixed implemented with the vendor prefix: -o-safari f...
...ull support 10webview android full support 4.4.3chrome android full support 31firefox android full support 3
6opera android full support 19 full support 19 full 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 s...
...upport 1
6 — 79firefox no support 3
6 — 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 10webview android no support 4.4.3 —
68chrome android no support 31 —
68firefox android full support 3
6opera android no support 19 — 48 no support 19 — 48 full support 12pr...
<ratio> - CSS: Cascading Style Sheets
examples use in a media query @media screen and (min-aspect-ratio: 1
6/9) { ...
... 1
6/9 modern "widescreen" tv format.
... 185/100 = 91/50 the most common movie format since the 19
60s.
<resolution> - CSS: Cascading Style Sheets
screens typically contains 72 or 9
6 dots per inch, but the dpi for printed documents is usually much greater.
...due to the 1:9
6 fixed ratio of css in to css px, 1dppx is equivalent to 9
6dpi, which corresponds to the default resolution of images displayed in css as defined by image-resolution.
...} valid resolutions 9
6dpi 50.82dpcm 3dppx invalid resolutions 72 dpi spaces are not allowed between the number and the unit.
<time> - CSS: Cascading Style Sheets
examples: 0s, 1.5s, -
60s.
...examples: 0ms, 150.25ms, -
60000ms.
... examples valid times 12s positive integer -45
6ms negative integer 4.3ms non-integer 14ms the unit is case-insensitive, although capital letters are not recommended.
url() - CSS: Cascading Style Sheets
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base
64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/1
67
61/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.mozillademos.org/files/1
67
61/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/") { ...
... 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/1
67
61/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 10h
60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m10 20h
60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m10 30h
60' str...
Adding captions and subtitles to HTML5 video - Developer guides
no image is used for the captions button, so it is simply styled as: .controls button[data-state="subtitles"] { height:85%; text-indent:0; font-size:1
6px; font-size:1rem; font-weight:bold; color:#
666; background:#000; border-radius:2px; } there are also other css changes that are specific to some extra javascript implementation, but these will be mentioned at the appropriate place below.
...'none' : 'block'); } }); subtitle menu css we also added some rudimentary styling for the newly created subtitles menu: .subtitles-menu { display:none; position:absolute; bottom:14.8%; right:20px; background:#
666; list-style-type:none; margin:0; padding:0; width:100px; padding:10px; } .subtitles-menu li { padding:0; text-align:center; } .subtitles-menu li button { border:none; background:#000; color:#fff; cursor:pointer; width:90%; padding:2px 5px; border-radius:2px; } styling the displayed subtitles one of the less well known about and support...
... safari safari
6.1+ has similar support to internet explorer 10+, displaying a menu with the different available options, with the addition of an "auto" option, which allows the browser to choose.
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
for example, if the audio's media timeline starts at 12 hours, setting currenttime to 3
600 would be an attempt to set the current playback position well before the beginning of the media, and would fail.
... 1 00:00:00 --> 00:00:45 [energetic techno music] 2 00:00:4
6 --> 00:00:51 welcome to the time keeper's podcast!
... 1
6 00:00:52 --> 00:01:02 [laughing] sorry!
<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 #3f87a
6; 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 #3f87a
6; 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 #3f87a
6; 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.
<input type="hidden"> - HTML: Hypertext Markup Language
the edit form's html might look a little bit like this: <form> <div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="
60" rows="5"> this is the content of my excellent blog post.
... </textarea> </div> <div> <button type="submit">update post</button> </div> <input type="hidden" id="postid" name="postid" value="34
657"> </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 the hidden input with the id "postid" to the id of the post in its database before sending the form to the user's browser and would use that information when the form is returned to know which database record to update with modi...
... 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=34
657 even though the hidden input cannot be seen at all, its data is still submitted.
<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/
62ac2ecddbec0e0b540098c28451e57203e5cab4
6dfed7ab0115d5a
659fcfb7b.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/
62ac2ecddbec0e0b540098c28451e57203e5cab4
6dfed7ab0115d5a
659fcfb7b.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 exa...
... 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/
62ac2ecddbec0e0b540098c28451e57203e5cab4
6dfed7ab0115d5a
659fcfb7b.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 dra...
<link>: The External Resource Link element - HTML: Hypertext Markup Language
for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width:
600px)"> some interesting new performance and security features have been added to the <link> element too.
... integrity contains inline metadata — a base
64-encoded cryptographic hash of the resource (file) you’re telling the browser to fetch.
...for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="all"> <link href="desktop.css" rel="stylesheet" media="screen and (min-width:
600px)"> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> stylesheet load events you can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event: <script> var mystylesheet = document.queryselector('#my-stylesheet'...
<table>: The Table element - HTML: Hypertext Markup Language
it is a
6-digit hexadecimal rgb code, prefixed by a '#'.
... example <table> <caption>color names and values</caption> <tbody> <tr> <th scope="col">name</th> <th scope="col">hex</th> <th scope="col">hsla</th> <th scope="col">rgba</th> </tr> <tr> <th scope="row">teal</th> <td><code>#51f
6f
6</code></td> <td><code>hsla(180, 90%,
64%, 1)</code></td> <td><code>rgba(81, 24
6, 24
6, 1)</code></td> </tr> <tr> <th scope="row">goldenrod</th> <td><code>#f
6bc57</code></td> <td><code>hsla(38, 90%,
65%, 1)</code></td> <td><code>rgba(24
6, 188, 87, 1)</code></td> </tr> </tbody> </table> providing a declaration of scope="col" on a <th> element wil...
... mdn tables for visually impaired users tables with two headers • tables • w3c wai web accessibility tutorials tables with irregular headers • tables • w3c wai web accessibility tutorials h
63: using the scope attribute to associate header cells and data cells in data tables | w3c techniques for wcag 2.0 complicated tables assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
it is a
6-digit hexadecimal rgb code, prefixed by a '#'.
... table { border: 2px solid #555; border-collapse: collapse; font: 1
6px "lucida grande", "helvetica", "arial", sans-serif; } first, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using border-collapse to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between.
... css table { border: 2px solid #555; border-collapse: collapse; font: 1
6px "lucida grande", "helvetica", "arial", sans-serif; } th, td { border: 1px solid #bbb; padding: 2px 8px 0; text-align: left; } thead > tr > th { background-color: #cce; font-size: 18px; border-bottom: 2px solid #999; } most of the css is unchanged.
<video>: The Video Embed element - HTML: Hypertext Markup Language
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?x11217" 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!
... <!-- using multiple sources as fallbacks for a video tag --> <!-- 'elephants dream' by orange open movie project studio, licensed under cc-3.0, hosted by archive.org --> <!-- poster hosted by wikimedia --> <video width="
620" controls poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/elephants_dream_s5_both.jpg" > <source src="https://archive.org/download/elephantsdream/ed_1024_512kb.mp4" type="video/mp4"> <source src="https://archive.org/download/elephantsdream/ed_hd.ogv" type="video/ogg"> <source src="https://archive.org/download/elephantsdream/ed_hd.avi" type="video/avi"...
... 1
6 00:03:22 --> 00:03:24 it's… it's a… 1
6 00:03:25 --> 00:03:32 [loud thumping] [dishes clattering] captions should not obstruct the main subject of the video.
Link types - HTML: Hypertext Markup Language
sidebar obsolete since gecko
63 indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a sidebar.
... while once part of the html specification, this has been removed from the spec and is only implemented by versions of firefox prior to firefox
63.
... rfc 18
66: html 2.0 obsolete initial definition.
CSP: base-uri - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: child-src - HTTP
'nonce-<base
64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: connect-src - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: default-src - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: font-src - HTTP
'nonce-<base
64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: frame-src - HTTP
'nonce-<base
64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: img-src - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: manifest-src - HTTP
'nonce-<base
64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: media-src - HTTP
'nonce-<base
64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: navigate-to - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: object-src - HTTP
'nonce-<base
64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: prefetch-src - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: script-src-attr - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: script-src-elem - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: style-src-attr - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: style-src-elem - HTTP
'nonce-<base
64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
CSP: worker-src - HTTP
'nonce-<base
64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base
64-value>' a sha25
6, sha384 or sha512 hash of scripts or styles.
... the use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base
64-encoded hash of the script or style.
Digest - HTTP
header type response header forbidden header name no syntax digest: <digest-algorithm>=<digest-value> digest: <digest-algorithm>=<digest-value>,<digest-algorithm>=<digest-value> directives <digest-algorithm> supported digest algorithms are defined in rfc 3230 and rfc 5843, and include sha-25
6 and sha-512.
...the choice of digest algorithm also determines the encoding to use: for example sha-25
6 uses base
64 encoding.
... examples digest: sha-25
6=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= digest: sha-25
6=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe=,unixsum=30
637 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.
If-Match - HTTP
if it doesn't match, then a 41
6 (range not satisfiable) response is returned.
...they are a string of ascii characters placed between double quotes (like "
675af345
63dc-tr34").
... examples if-match: "bfc13a
64729c4290ef5b2c2730249c88ca92d82d" if-match: "
67ab43", "54ed21", "7892dd" if-match: * specifications specification title rfc 7232, section 3.1: if-match hypertext transfer protocol (http/1.1): conditional requests ...
If-Range - HTTP
the if-range http request header makes a range request conditional: if the condition is fulfilled, the range request will be issued and the server sends back a 20
6 partial content answer with the appropriate body.
...it is a string of ascii characters placed between double quotes (like "
675af345
63dc-tr34") and may be prefixed by w/ to indicate that the weak comparison algorithm should be used.
..."1990" or "201
6".
Origin - HTTP
note: the origin header is not set on fetch requests with a method of head or get (this behavior was corrected in firefox
65 — see bug 1508
661).
... examples origin: https://developer.mozilla.org specifications specification comment rfc
6454, section 7: origin the web origin concept fetchthe definition of 'origin header' in that specification.
... supplants the origin header as defined in rfc
6454.
Range - HTTP
if the server sends back ranges, it uses the 20
6 partial content for the response.
... if the ranges are invalid, the server returns the 41
6 range not satisfiable error.
... range: bytes=200-1000, 2000-
657
6, 19000- requesting the first 500 and last 500 bytes of the file.
Want-Digest - HTTP
header type general header forbidden header name no syntax want-digest: <digest-algorithm> // multiple algorithms, weighted with the quality value syntax: want-digest: <digest-algorithm><q-value>,<digest-algorithm><q-value> directives <digest-algorithm> supported digest algorithms are defined in rfc 3230 and rfc 5843, and include sha-25
6 and sha-512.
... examples want-digest: sha-25
6 want-digest: sha-512;q=0.3, sha-25
6;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-25
6;q=0.3, sha;q=1 response: http/1.1 200 ok digest: sha-25
6=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= 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-25
6=...
...x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= the server does not support any of the requested digest algorithms, so responds with a 400 error and includes another want-digest header, listing the algorithms that it does support: request: get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-25
6, 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.
OPTIONS - HTTP
ml http/1.1 options * http/1.1 examples identifying allowed request methods to find out which request methods a server supports, one can use the curl command-line program to issue an options request: curl -x options https://example.org -i the response then contains an allow header that holds the allowed methods: http/1.1 204 no content allow: options, get, head, post cache-control: max-age=
604800 date: thu, 13 oct 201
6 11:45:00 gmt server: eos (lax004/2813) preflighted requests in cors in cors, a preflight request is sent with the options method so that the server can respond if it is acceptable to send the request.
... access-control-max-age the above permissions may be cached for 8
6,400 seconds (1 day).
... http/1.1 204 no content date: mon, 01 dec 2008 01:15:39 gmt server: apache/2.0.
61 (unix) access-control-allow-origin: https://foo.example access-control-allow-methods: post, get, options access-control-allow-headers: x-pingother, content-type access-control-max-age: 8
6400 vary: accept-encoding, origin keep-alive: timeout=2, max=100 connection: keep-alive specifications specification title rfc 7231, section 4.3.7: options hypertext transfer protocol (http/1.1): semantics and content ...
Network Error Logging - HTTP
usage web applications opt in to this behaviour with the nel header, which is a json-encoded object: nel: { "report_to": "nel", "max_age": 3155
6952 } an origin considered secure by the browser is required.
... the reporting group referenced above is defined in the usual manner within the report-to header, for example: report-to: { "group": "nel", "max_age": 3155
6952, "endpoints": [ { "url": "https://example.com/csp-reports" } ] } error reports in these examples, the entire reporting api payload is shown.
... http 400 (bad request) response { "age": 20, "type": "network-error", "url": "https://example.com/previous-page", "body": { "elapsed_time": 338, "method": "post", "phase": "application", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "137.205.28.
66", "status_code": 400, "type": "http.error", "url": "https://example.com/bad-request" } } dns name not resolved note that the phase is set to dns in this report and no server_ip is available to include.
412 Precondition Failed - HTTP
status 412 precondition failed examples etag: "33a
64df551425fcc55e4d42a148795d9f25f89d4" 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: "33a
64df551425fcc55e4d42a148795d9f25f89d4" 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: "33a
64df551425fcc55e4d42a148795d9f25f89d4" if the hashes don't match, it means that the document has been edited in-between and a 412 precondition failed error is thrown.
Grammar and types - JavaScript
numeric literals number and bigint types can be written in decimal (base 10), hexadecimal (base 1
6), octal (base 8) and binary (base 2).
... some examples of numeric literals are: 0, 117, -345, 12345
678912345
6789n (decimal, base 10) 015, 0001, -0o77, 0o777777777777n (octal, base 8) 0x1123, 0x00111, -0xf1a7, 0x12345
6789abcdefn (hexadecimal, "hex" or base 1
6) 0b11, 0b0011, -0b11, 0b11101001010101010101n (binary, base 2) for more information, see numeric literals in the lexical grammar reference.
... more succinctly, the syntax is: [(+|-)][digits].[digits][(e|e)[(+|-)]digits] for example: 3.141592
6 -.12345
6789 -3.1e+12 .1e-23 object literals an object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).
Regular expression syntax cheatsheet - JavaScript
equivalent to [ \f\n\r\t\v\u00a0\u1
680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].
...equivalent to [^ \f\n\r\t\v\u00a0\u1
680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].
... \uhhhh matches a utf-1
6 code-unit with the value hhhh (four hexadecimal digits).
Array.prototype.copyWithin() - JavaScript
var len = o.length >>> 0; // steps
6-8.
... var count = math.min(final - from, len - to); // steps 1
6-17.
... 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // es2015 typed arrays are subclasses of array var i32a = new int32array([1, 2, 3, 4, 5]) i32a.copywithin(0, 2) // int32array [3, 4, 5, 4, 5] // on platforms that are not yet es2015 compliant: [].copywithin.call(new int32array([1, 2, 3, 4, 5]), 0, 3, 4); // int32array [4, 2, 3, 4, 5] specifications specification ecmascript (ecma-2
62)the definition of 'array.prototype.copywithin' in that specification.
Array.prototype.length - JavaScript
var namelista = new array(42949
6729
6); //2 to the 32nd power = 42949
6729
6 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); //42949
67295 you can set the lengt...
... var numbers = [1, 2, 3, 4, 5]; var length = numbers.length; for (var i = 0; i < length; i++) { numbers[i] *= 2; } // numbers is now [2, 4,
6, 8, 10] shortening an array the following example shortens the array numbers to a length of 3 if the current length is greater than 3.
... var numbers = [1, 2, 3, 4, 5]; if (numbers.length > 3) { numbers.length = 3; } console.log(numbers); // [1, 2, 3] console.log(numbers.length); // 3 create empty array of fixed length var numbers = []; numbers.length = 3; console.log(numbers); // [undefined, undefined, undefined] specifications specification ecmascript (ecma-2
62)the definition of 'array.length' in that specification.
BigInt - JavaScript
n / 2n // ↪ 2n const rounded = 5n / 2n // ↪ 2n, not 2.5n comparisons a bigint is not strictly equal to a number, but it is loosely so: 0n === 0 // ↪ false 0n == 0 // ↪ true a number and a bigint may be compared as usual: 1n < 2 // ↪ true 2n > 1 // ↪ true 2 > 2 // ↪ false 2n > 2 // ↪ false 2n >= 2 // ↪ true they may be mixed in arrays and sorted: const mixed = [4n,
6, -12n, 10, 4, 0, 0n] // ↪ [4n,
6, -12n, 10, 4, 0, 0n] mixed.sort() // default sorting behavior // ↪ [ -12n, 0, 0n, 10, 4n, 4,
6 ] mixed.sort((a, b) => a - b) // won't work since subtraction will not work with mixed types // typeerror: can't convert bigint to number // sort with an appropriate numeric comparator mixed.sort((a, b) => (a < b) ?
...1 : 0)) // ↪ [ -12n, 0, 0n, 4n, 4,
6, 10 ] note that comparisons with object-wrapped bigints act as with other objects, only indicating equality when the same object instance is compared: 0n === object(0n) // false object(0n) === object(0n) // false const o = object(0n) o === o // true conditionals a bigint behaves like a number in cases where: it is converted to a boolean: via the boolean function; when used with logical operators ||, &&, and !; or within a conditional test like an if statement.
...eturn 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-2
62)the definition of 'bigint objects' in that specification.
Date() constructor - JavaScript
(these formats are ietf-compliant rfc 2822 timestamps, and also strings in a version of iso8
601.) note: parsing of date strings with the date constructor (and date.parse(), which works the same way) is strongly discouraged due to browser differences and inconsistencies.
... support for iso 8
601 formats differs in that date-only strings (e.g.
... let today = new date() let birthday = new date('december 17, 1995 03:24:00') let birthday = new date('1995-12-17t03:24:00') let birthday = new date(1995, 11, 17) // the month is 0-indexed let birthday = new date(1995, 11, 17, 3, 24, 0) specifications specification ecmascript (ecma-2
62)the definition of 'date' in that specification.
Date.UTC() - JavaScript
syntax since ecmascript 2017: date.utc(year[, month[, day[, hour[, minute[, second[, millisecond]]]]]]) ecmascript 201
6 and earlier: (month used to be required) date.utc(year, month[, day[, hour[, minute[, second[, millisecond]]]]]) parameters year a full year.
...(up through ecmascript 201
6, month was a required parameter.
... examples using date.utc() the following statement creates a date object with the arguments treated as utc instead of local: let utcdate = new date(date.utc(2018, 11, 1, 0, 0, 0)); specifications specification ecmascript (ecma-2
62)the definition of 'date.utc' in that specification.
Date.prototype.setMonth() - JavaScript
for example, if the current value is 31st august 201
6, calling setmonth with a value of 1 will return 2nd march 201
6.
... this is because in 201
6 february had 29 days.
... examples using setmonth() var thebigday = new date(); thebigday.setmonth(
6); //watch out for end of month transitions var endofmonth = new date(201
6, 7, 31); endofmonth.setmonth(1); console.log(endofmonth); //wed mar 02 201
6 00:00:00 specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.setmonth' in that specification.
Date.prototype.toDateString() - JavaScript
the todatestring() method is especially useful because compliant engines implementing ecma-2
62 may differ in the string obtained from tostring() for date objects, as the format is implementation-dependent and simple string slicing approaches may not produce consistent results across multiple engines.
... 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:07 gmt-0
600 (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).
... specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.todatestring' in that specification.
Error.prototype.stack - JavaScript
however, safari
6+ and opera 12- use a very similar format.
...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:17 b@file:///c:/example.html:1
6: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:1
6 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])@file:///c:/example.html:1
6 a...
... 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.
Math.floor() - JavaScript
examples using math.floor() math.floor( 45.95); // 45 math.floor( 45.05); // 45 math.floor( 4 ); // 4 math.floor(-45.05); // -4
6 math.floor(-45.95); // -4
6 decimal adjustment /** * decimal adjustment of a number.
...(+value[1] + exp) : exp)); } // decimal round const round10 = (value, exp) => decimaladjust('round', value, exp); // decimal floor const floor10 = (value, exp) => decimaladjust('floor', value, exp); // decimal ceil const ceil10 = (value, exp) => decimaladjust('ceil', value, exp); // round round10(55.55, -1); // 55.
6 round10(55.549, -1); // 55.5 round10(55, 1); //
60 round10(54.9, 1); // 50 round10(-55.55, -1); // -55.5 round10(-55.551, -1); // -55.
6 round10(-55, 1); // -50 round10(-55.1, 1); // -
60 // floor floor10(55.59, -1); // 55.5 floor10(59, 1); // 50 floor10(-55.51, -1); // -55.
6 floor10(-51, 1); // -
60 // ceil ceil10(55.51, -1); // 55.
6 ceil10(51, 1); //
60 ...
...ceil10(-55.59, -1); // -55.5 ceil10(-59, 1); // -50 specifications specification ecmascript (ecma-2
62)the definition of 'math.floor' in that specification.
Math.log() - JavaScript
examples using math.log() math.log(-1); // nan, out of range math.log(0); // -infinity math.log(1); // 0 math.log(10); // 2.30258509299404
6 using math.log() with a different base the following function returns the logarithm of y with base x (ie.
... logxy\log_x y): function getbaselog(x, y) { return math.log(y) / math.log(x); } if you run getbaselog(10, 1000) it returns 2.999999999999999
6 due to floating-point rounding, which is very close to the actual answer of 3.
... specifications specification ecmascript (ecma-2
62)the definition of 'math.log' in that specification.
Math.log1p() - JavaScript
1 + 1e-15 = 1.000000000000001, but 1 + 1e-1
6 = 1.000000000000000 and therefore exactly 1.0 in that arithmetic, because digits past 15 are rounded off.
... if, instead, you calculate math.log1p(1.1111111111e-15) you will get a much more accurate answer 1.1111111110999995e-15 with 15 correct digits of precision (actually 1
6 in this case).
...x : x * (math.log(x + 1) / nearx); }; examples using math.log1p() math.log1p(1); // 0.
6931471805599453 math.log1p(0); // 0 math.log1p(-1); // -infinity math.log1p(-2); // nan specifications specification ecmascript (ecma-2
62)the definition of 'math.log1p' in that specification.
Number.parseInt() - JavaScript
radix optional an integer between 2 and 3
6 that represents the radix (the base in mathematical numeral systems) of the string.
... if the radix is smaller than 2 or bigger than 3
6, and the first non-whitespace character cannot be converted to a number, nan is returned.
... specifications specification ecmascript (ecma-2
62)the definition of 'number.parseint' in that specification.
Number - JavaScript
the javascript number type is a double-precision
64-bit binary format ieee 754 value, like double in java or c#.
...(more details on this are described in the ecmascript standard, chapter
6.1.
6 the number type.) const biggestint = number.max_safe_integer // (253 - 1) => 9007199254740991 const smallestint = number.min_safe_integer // -(253 - 1) => -9007199254740991 when parsing data that has been serialized to json, integer values falling outside of this range can be expected to become corrupted when json parser coerces them to number type.
...umber('123') // 123 number('123') === 123 /// true number('12.3') // 12.3 number('12.00') // 12 number('123e-1') // 12.3 number('') // 0 number(null) // 0 number('0x11') // 17 number('0b11') // 3 number('0o11') // 9 number('foo') // nan number('100a') // nan number('-infinity') //-infinity specifications specification ecmascript (ecma-2
62)the definition of 'number' in that specification.
ReferenceError - JavaScript
although ecma-2
62 specifies that referenceerror should provide its own message property, in spidermonkey, it inherits error.prototype.message.
...{ let a = undefinedvariable } catch (e) { console.log(e instanceof 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) // "somef...
...ile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-2
62)the definition of 'referenceerror' in that specification.
RegExp.prototype[@@match]() - JavaScript
let re = /[0-9]+/g; let str = '201
6-01-02'; let result = re[symbol.match](str); console.log(result); // ["201
6", "01", "02"] using @@match in subclasses subclasses of regexp can override the [@@match]() method to modify the default behavior.
... class myregexp extends regexp { [symbol.match](str) { let result = regexp.prototype[symbol.match].call(this, str); if (!result) return null; return { group(n) { return result[n]; } }; } } let re = new myregexp('([0-9]+)-([0-9]+)-([0-9]+)'); let str = '201
6-01-02'; let result = str.match(re); // string.prototype.match calls re[@@match].
... console.log(result.group(1)); // 201
6 console.log(result.group(2)); // 01 console.log(result.group(3)); // 02 specifications specification ecmascript (ecma-2
62)the definition of 'regexp.prototype[@@match]' in that specification.
RegExp.prototype[@@replace]() - JavaScript
var re = /-/g; var str = '201
6-01-01'; var newstr = re[symbol.replace](str, '.'); console.log(newstr); // 201
6.01.01 using @@replace in subclasses subclasses of regexp can override the [@@replace]() method to modify the default behavior.
... 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 = '012345
67'; var newstr = str.replace(re, '#'); // string.prototype.replace calls re[@@replace].
... console.log(newstr); // ###345
67 specifications specification ecmascript (ecma-2
62)the definition of 'regexp.prototype[@@replace]' in that specification.
RegExp.prototype[@@split]() - JavaScript
let re = /-/g; let str = '201
6-01-02'; let result = re[symbol.split](str); console.log(result); // ["201
6", "01", "02"] using @@split in subclasses subclasses of regexp can override the [@@split]() method to modify the default behavior.
... class myregexp extends regexp { [symbol.split](str, limit) { let result = regexp.prototype[symbol.split].call(this, str, limit); return result.map(x => "(" + x + ")"); } } let re = new myregexp('-'); let str = '201
6-01-02'; let result = str.split(re); // string.prototype.split calls re[@@split].
... console.log(result); // ["(201
6)", "(01)", "(02)"] specifications specification ecmascript (ecma-2
62)the definition of 'regexp.prototype[@@split]' in that specification.
String.fromCodePoint() - JavaScript
// ie 8 only supports `object.defineproperty` on dom elements object.defineproperty(string, "fromcodepoint", { "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); // "\ud87e\udc04" string.fromcodepoint(1945
64); // "\ud87e\udc04" string.fromcodepoint(0x1d30
6, 0x
61, 0x1d307); // "\ud834\udf0
6a\ud834\udf07" invalid input: string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerr...
...instead, it requires the utf-1
6 surrogate pair in order to return a supplementary character: string.fromcharcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(5535
6, 57091); // 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 127747 in d...
...ecimal specifications specification ecmascript (ecma-2
62)the definition of 'string.fromcodepoint' in that specification.
String.prototype.match() - JavaScript
infinity contains -infinity and +infinity in javascript.", str2 = "my grandfather is
65 years old and my grandmother is
63 years old.", str3 = "the contract was declared null and void."; str1.match("number"); // "number" is a string.
...returns ["infinity"] str1.match(+infinity); // returns ["infinity"] str1.match(-infinity); // returns ["-infinity"] str2.match(
65); // returns ["
65"] str2.match(+
65); // a number with a positive sign.
... returns ["
65"] str3.match(null); // returns ["null"] specifications specification ecmascript (ecma-2
62)the definition of 'string.prototype.match' in that specification.
String.prototype.matchAll() - JavaScript
atchall to javascript, it was possible to use calls to regexp.exec (and regexes with the /g flag) in a loop to obtain all the matches: const regexp = regexp('foo[a-z]*','g'); const str = 'table football, foosball'; let match; while ((match = regexp.exec(str)) !== null) { console.log(`found ${match[0]} start=${match.index} end=${regexp.lastindex}.`); // expected output: "found football start=
6 end=14." // expected output: "found foosball start=1
6 end=24." } with matchall available, you can avoid the while loop and exec with g.
...hall, you get an iterator to use with the more convenient for...of, array spread, or array.from() constructs: const regexp = regexp('foo[a-z]*','g'); const str = 'table football, foosball'; const matches = str.matchall(regexp); for (const match of matches) { console.log(`found ${match[0]} start=${match.index} end=${match.index + match[0].length}.`); } // expected output: "found football start=
6 end=14." // expected output: "found foosball start=1
6 end=24." // matches iterator is exhausted after the for..of iteration // call matchall again to create a new iterator array.from(str.matchall(regexp), m => m[0]); // array [ "football", "foosball" ] matchall will throw an exception if the g flag is missing.
...str = 'test1test2'; str.match(regexp); // array ['test1', 'test2'] using matchall, you can access capture groups easily: let array = [...str.matchall(regexp)]; array[0]; // ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4] array[1]; // ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4] specifications specification ecmascript (ecma-2
62)the definition of 'string.prototype.matchall' in that specification.
String.prototype.slice() - JavaScript
let str = 'the morning is upon us.' str.slice(-3) // returns 'us.' str.slice(-3, -1) // returns 'us' str.slice(0, -1) // returns 'the morning is upon us' this example counts backwards from the end of the string by 11 to find the start index and forwards from the start of the string by 1
6 to find the end index.
... console.log(str.slice(-11, 1
6)) // => "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(-5, -1)) // => "n us" specifications specification ecmascript (ecma-2
62)the definition of 'string.prototype.slice' in that specification.
String.prototype.split() - JavaScript
if separator is an empty string (""), str is converted to an array of each of its utf-1
6 "characters".
... warning: when the empty string ("") is used as a separator, the string is not split by user-perceived characters (grapheme clusters) or unicode characters (codepoints), but by utf-1
6 codeunits.
... specifications specification ecmascript (ecma-2
62)the definition of 'string.prototype.split' in that specification.
TypedArray.from() - JavaScript
syntax typedarray.from(source[, mapfn[, thisarg]]) where typedarray is one of: int8array uint8array uint8clampedarray int1
6array uint1
6array int32array uint32array float32array float
64array bigint
64array biguint
64array parameters source an array-like or iterable object to convert to a typed array.
...opy_data.map(func, thisobj); var typed_array = new this(copy_data.length); for(var i = 0; i < typed_array.length; i++) { typed_array[i] = copy_data[i]; } return typed_array; } })(); } examples from an iterable object (set) const s = new set([1, 2, 3]); uint8array.from(s); // uint8array [ 1, 2, 3 ] from a string int1
6array.from('123'); // int1
6array [ 1, 2, 3 ] use with arrow function and map using an arrow function as the map function to manipulate the elements float32array.from([1, 2, 3], x => x + x); // float32array [ 2, 4,
6 ] generate a sequence of numbers uint8array.from({length: 5}, (v, k) => k); // uint8array [ 0, 1, 2, 3, 4 ] specifications specification ecmascript (ecm...
...a-2
62)the definition of '%typedarray%.from' in that specification.
WebAssembly.Global() constructor - JavaScript
this can be one of i32, i
64, f32, and f
64.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsglobal() constructorchrome full support
69edge no support nofirefox full support
62ie no support noopera no support nosafari no support nowebview android full support
69ch...
...rome android full support
69firefox android full support
62opera android no support nosafari ios no support nosamsung internet android full support 10.0nodejs no support nolegend full support full support no support no support ...
WebAssembly.Instance - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstancechrome full support 57edge full support 1
6firefox 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 11w...
... 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0instance() constructorchrome full support 57edge full support 1
6firefox 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 11w...
...ort 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0exportschrome full support 57edge full support 1
6firefox 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 11w...
Left shift (<<) - JavaScript
for example, 9 << 2 yields 3
6: .
... 9 (base 10): 00000000000000000000000000001001 (base 2) -------------------------------- 9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 3
6 (base 10) bitwise shifting any number x to the left by y bits yields x * 2 ** y.
... examples using left shift 9 << 3; // 72 // 9 * (2 ** 3) = 9 * (8) = 72 specifications specification ecmascript (ecma-2
62)the definition of 'bitwise shift operators' in that specification.
async function expression - JavaScript
amples simple example function resolveafter2seconds(x) { return new promise(resolve => { settimeout(() => { resolve(x); }, 2000); }); }; const add = async function(x) { // async function expression assigned to a variable let a = await resolveafter2seconds(20); let b = await resolveafter2seconds(30); return x + a + b; }; add(10).then(v => { console.log(v); // prints
60 after 4 seconds.
... }); (async function(x) { // async function expression used as an iife let p_a = resolveafter2seconds(20); let p_b = resolveafter2seconds(30); return x + await p_a + await p_b; })(10).then(v => { console.log(v); // prints
60 after 2 seconds.
... }); specifications specification ecmascript (ecma-2
62)the definition of 'async function' in that specification.
this - JavaScript
his.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); // 1
6 // 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.
... function sum() { return this.a + this.b + this.c; } var o = { a: 1, b: 2, c: 3, get average() { return (this.a + this.b + this.c) / 3; } }; object.defineproperty(o, 'sum', { get: sum, enumerable: true, configurable: true}); console.log(o.average, o.sum); // 2,
6 as a constructor when a function is used as a constructor (with the new keyword), its this is bound to the new object being constructed.
... specifications specification ecmascript (ecma-2
62)the definition of 'the this keyword' in that specification.
throw - JavaScript
* * accepted formats for a zip code are: * 12345 * 12345-
6789 * 12345
6789 * 12345
6789 * * if the argument passed to the zipcode constructor does not * conform to one of these patterns, an exception is thrown.
... */ const zipcode_invalid = -1; const zipcode_unknown_error = -2; function verifyzipcode(z) { try { z = new zipcode(z); } catch (e) { if (e instanceof zipcodeformatexception) { return zipcode_invalid; } else { return zipcode_unknown_error; } } return z; } a = verifyzipcode(950
60); // returns 950
60 b = verifyzipcode(95
60); // returns -1 c = verifyzipcode('a'); // returns -1 d = verifyzipcode('950
60'); // returns 950
60 e = verifyzipcode('950
60 1234'); // returns 950
60 1234 rethrow an exception you can use throw to rethrow an exception after you catch it.
... try { throw n; // throws an exception with a numeric value } catch (e) { if (e <= 50) { // statements to handle exceptions 1-50 } else { // cannot handle this exception, so rethrow throw e; } } specifications specification ecmascript (ecma-2
62)the definition of 'throw statement' in that specification.
Strict mode - JavaScript
the octal syntax isn't part of ecmascript 5, but it's supported in all browsers by prefixing the octal number with a zero: 0
644 === 420 and "\045" === "%".
...syntax error 197 + 142; var sumwithoctal = 0o10 + 8; console.log(sumwithoctal); // 1
6 seventh, strict mode in ecmascript 2015 forbids setting properties on primitive values.
... specifications specification ecmascript (ecma-2
62)the definition of 'strict mode code' in that specification.
Populating the page: how browsers work - Web Performance
if you navigate to https://example.com, the html page is located on the server with ip address of 93.184.21
6.34.
... to ensure smooth scrolling and animation, everything occupying the main thread, including calculating styles, along with reflow and paint, must take the browser less than 1
6.
67ms to accomplish.
... at 2048 x 153
6, the ipad has over 3,145,000 pixels to be painted to the screen.
Graphic design for responsive sites - Progressive web apps (PWAs)
in 199
6, many people involved in building the web would have laughed at you if you had told them that less than 20 years in the future we would be developing web sites that worked well on mobile phones, tablets, tvs, even cars and home lighting.
...the downsides here are that css3 properties and svg don't work on old browsers such as ie
6-8 (although polyfills are available, and you could build in fallbacks), and svg isn't suitable for high detail images, such as photographs.
...these may not be supported in older browsers like ie
6-8, but they generally degrade gracefully, are fairly easy to write, and become much more flexible and powerful when combined with javascript and other technologies.
preserveAspectRatio - SVG: Scalable Vector Graphics
example <svg viewbox="-1 -1 1
62 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 q3
6,35,42,40 m58,40 q
64,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 preserveaspectrati...
...e href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="135" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid slice" x="150" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <!-- none --> <svg preserveaspectratio="none" x="0" y="30" viewbox="0 0 100 100" width="1
60" height="
60"><use href="#smiley" /></svg> </svg> topexample html,body,svg { height:100% } <svg viewbox="-1 -1 1
62 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 q3
6,35,42,40 m58,40 q
64,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="1...
...dth="10" height="25" preserveaspectratio="xmidymid slice" x="135" y="0"> <use href="#smiley" /> </svg> <rect x="150" y="0" width="10" height="25"> <title>xmaxymid slice</title> </rect> <svg viewbox="0 0 100 100" width="10" height="25" preserveaspectratio="xmaxymid slice" x="150" y="0"> <use href="#smiley" /> </svg> <!-- none --> <rect x="0" y="30" width="1
60" height="
60"> <title>none</title> </rect> <svg viewbox="0 0 100 100" width="1
60" height="
60" preserveaspectratio="none" x="0" y="30"> <use href="#smiley" /> </svg> </svg> path { fill: yellow; stroke: black; stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } rect:hover, rect:active { outline: 1px solid red; } syntax ...
textLength - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200
60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlength="
6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percentage> | <number> default value none animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as abso...
... css .controls { font: 1
6px "open sans", "arial", sans-serif; } svg let's start with the svg.
... <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="10" y="150" font-family="sans-serif" font-size="
60" fill="green"> hello world!
y - SVG: Scalable Vector Graphics
sianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="
60" height="
60" /> <rect y="120" x="20" width="
60" height="
60" /> <rect y="220" x="20" width="
60" height="
60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { 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="
60%" x2="100%" y2="
60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <!-- y with a single value --> <text y="40%" x="5%">svg</text> <!-- y with multiple values --> <text y="40%,
60%,80%" x="55%">svg</text> </svg> text { font: 40px sa...
... value list of (<length> | <percentage>) default value none animatable yes example html,body,svg { 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="
60%" x2="100%" y2="
60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <text> <!-- y with a single value --> <tspan y="40%" x="5%">svg</tspan> <!-- y with multiple values --> <tspan y="40%,
60%,80%" x="55%">svg</tspan> </text ...
<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.
... example svg <svg width="200" height="200" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="emboss"> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="/files/12
668/mdn.svg" x="0" y="0" height="200" width="200" style="filter:url(#emboss);" /> </svg> result specifications specification status comment filter effects module level 1the definition of '<feconvolvematrix>' in that specification.
Filter effects - SVG: Scalable Vector Graphics
rator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litpaint"/> <!-- merge offsetblur + litpaint --> <femerge> <femergenode in="offsetblur"/> <femergenode in="litpaint"/> </femerge> </filter> </defs> <!-- graphic elements --> <g filter="url(#myfilter)"> <path fill="none" stroke="#d90000" stroke-width="10" d="m50,
66 c-50,0 -50,-
60 0,-
60 h100 c50,0 50,
60 0,
60z" /> <path fill="#d90000" d="m
60,5
6 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> <g fill="#ffffff" stroke="black" font-size="45" font-family="verdana" > <text x="52" y="52">svg</text> </g> </g> </svg> step 1 <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <...
... step
6 <femerge> <femergenode in="offsetblur"/> <femergenode in="litpaint"/> </femerge> finallly, <femerge> merges together "offsetblur", which is the drop shadow, and "litpaint", which is the original source graphic with a lighting effect.
... source graphic primitive 1 primitive 2 primitive 3 primitive 4 primitive 5 primitive
6 « previousnext » ...
Texts - SVG: Scalable Vector Graphics
<text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable code <svg width="350" height="
60" xmlns="http://www.w3.org/2000/svg"> <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> <style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> the tspan element has the following custom attributes: x set a new absolute x coordinate for the containing text.
... textpath this element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path: <path id="my_path" d="m 20,20 c 80,
60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
... </textpath> </text> playable code 2 <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="m 20,20 c 80,
60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
Using custom elements - Web Components
note: custom elements are supported by default in firefox, chrome, and edge (7
6).
...classes please note that es2015 classes cannot reliably be transpiled in babel
6 or typescript targeting legacy browsers.
... 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
<?xml version="1.0"?> <people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <person> <name first="george" last="bush" /> <address street="1
600 pennsylvania avenue" city="washington" country="usa"/> <phonenumber>202-45
6-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...
... unordered_node_snapshot_type
6 a result node-set containing snapshots of all the nodes matching the expression.
... last updated date: 200
6-3-25.
Using the WebAssembly JavaScript API - WebAssembly
now add the following line to the top of your script, to create a memory instance: var memory = new webassembly.memory({initial:10, maximum:100}); the unit of initial and maximum is webassembly pages — these are fixed to
64kb in size.
... this means that the above memory instance has an initial size of
640kb, and a maximum size of
6.4mb.
... instance from inside your javascript, you use the webassembly.global() constructor, which looks like this: const global = new webassembly.global({value:'i32', mutable:true}, 0); you can see that this takes two parameters: an object that contains two properties describing the global variable: value: its data type, which can be any data type accepted within webassembly modules — i32, i
64, f32, or f
64.
Reddit Example - Archive of obsolete content
this is the complete add-on script: var data = require("sdk/self").data; var button = require("sdk/ui/button/action").actionbutton({ id: "reddit-panel", label: "reddit panel", icon: "./icon-1
6.png", onclick: function() { reddit_panel.show(); } }); var reddit_panel = require("sdk/panel").panel({ width: 240, height: 320, contenturl: "http://www.reddit.com/.mobile?keep_extension=true", contentscriptfile: [data.url("jquery-2.1.0.min.js"), data.url("panel.js")] }); reddit_panel.port.on("click", function(url) { require("sdk/tabs").open(url); }); th...
... to run this example you'll also have to have an icon file named "icon-1
6.png" saved in your add-on's "data" directory.
port - Archive of obsolete content
the button sends the content script a message called "get-first-para" when it is clicked: // main.js pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-1
6.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script listens for "get-first-para".
... due to bug 81
6272 the page-mod's removelistener() function does not prevent the listener from receiving messages that are already queued.
Communicating using "port" - Archive of obsolete content
the button sends the content script a message called "get-first-para" when it is clicked: pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-1
6.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script "listener.js" listens for "get-first-para".
... due to bug 81
6272 the page-mod's removelistener() function does not prevent the listener from receiving messages that are already queued.
Working with Events - Archive of obsolete content
that object, and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-1
6.png", onclick: handleclick }); function handleclick(state) { panel.show({ position: button }); } this wildcard feature does not yet work for the tabs or windows modules.
...the listener loads https://developer.mozilla.org/: require("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-1
6.png", onclick: function() { require("sdk/tabs").open("https://developer.mozilla.org/"); } }); this is exactly equivalent to constructing the button and then calling the button's on() method: var button = require("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-1
6.png" }); button.on("click", function() { require("sdk/tabs").open(...
context-menu - Archive of obsolete content
your context listener is called even if any declarative contexts are not current (since firefox 3
6).
... is a tooltip", label: "just a tigger, will never show up", contentscript: 'self.on("context", function(){self.postmessage(); return false;})', onmessage: function(){ var cmitems = getmostrecentbrowserwindow().document.queryselectorall(".addon-context-menu-item[value^='"+ uuidstr +"']"); for(var i=0; i < cmitems.length; i++) cmitems[i].tooltiptext = cmitems[i].value.substring(3
6); } }); globals constructors item(options) creates a labeled menu item that can perform an action when clicked.
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 2
617.
... realm the www-authenticate response header sent by the server may include a "realm" field as detailed in rfc 2
617.
simple-prefs - Archive of obsolete content
{ "type": "string", "name": "monstername", "value": "kraken", "title": "monster name" } color displayed as a colorpicker and stores a string in the #12345
6 format.
... { "type": "color", "name": "highlightcolor", "value": "#
6a5acd", "title": "highlight color" } file displayed as a "browse" button that opens a file picker and stores the full path and name of the file selected.
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('{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}'); 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-4a1
6-11e2-aef7-c1a5
6188709b" optional.
cfx - Archive of obsolete content
for example, if you type: cfx run ---no-run you will see something like: to launch the application, enter the following command: /path/to/firefox/firefox-bin -profile /path/to/profile/tmpjdnlp
6.mozrunner -foreground -no-remote this enables you to run the add-on without going through cfx, which might be useful if you want to run it inside a debugger like gdb.
... for example, if you type: cfx run ---no-run you will see something like: to launch the application, enter the following command: /path/to/firefox/firefox-bin -profile /path/to/profile/tmpjdnlp
6.mozrunner -foreground -no-remote this enables you to run the add-on without going through cfx, which might be useful if you want to run it inside a debugger like gdb.
jpmignore - Archive of obsolete content
for example: .* * !/data/** !/lib/** !/locale/** !/node_modules/** !/package.json !/icon.png !/icon
64.png !/copying !/bootstrap.js !/install.rdf this would include all editor backup files and similar in the whitelisted subdirectories, to avoid that you can append another blacklist after the whitelist.
... this one would work for xemacs: .* * !/data/** !/lib/** !/locale/** !/node_modules/** !/package.json !/icon.png !/icon
64.png !/copying !/bootstrap.js !/install.rdf *~ \#* ...
Add a Context Menu Item - Archive of obsolete content
this is a url pointing to a 1
6x1
6 icon that's displayed at the left side of the context menu item.
...self = require("sdk/self"); var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', image: self.data.url("icon-1
6.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35.
List Open Tabs - Archive of obsolete content
the following add-on adds an action button that logs the urls of open tabs when the user clicks it: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-1
6.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.url); } note: to get this working, you will need to save an icon for the button to your add-on's "data" directory as "icon-1
6.png".
...the script adds a red border to the tab's document: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-1
6.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) runscript(tab); } function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Developing for Firefox Mobile - Archive of obsolete content
then type: adb devices you should see some output like: list of devices attached 51800f220f015
64 device (the long hex string will be different.) if you do, then adb has found your device and you can get started.
... high-level apis addon-page not supported base
64 supported clipboard not supported context-menu not supported hotkeys supported indexed-db supported l10n supported notifications supported page-mod supported page-worker supported panel not supported passwords supported private-browsing not supported que...
Localization - Archive of obsolete content
id attribute to the html tag where you want the localized string to appear, and assign the identifier to it: <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-1
6.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 nod...
... using localized strings in add-on meta data this feature is new in jpm 1.0.
6.
Canvas code snippets - Archive of obsolete content
t); ctx.save(); ctx.scale(remotecanvas.canvas_width / windowwidth, remotecanvas.canvas_height / windowheight); ctx.drawwindow(remotewindow, 0, 0, windowwidth, windowheight, 'rgb(255, 255, 255)'); ctx.restore(); }; usage: var remotecanvas = new remotecanvas(); remotecanvas.load(); convert image files to base
64 strings the following code gets a remote image and converts its content to data uri scheme.
...ar image = new image(); image.src = url; return new promise((accept, reject) => { image.onload = accept; image.onerror = reject; }).then(accept => { canvas.width = this.width; canvas.height = this.height; ctxt.clearrect(0, 0, this.width, this.height); ctxt.drawimage(this, 0, 0); accept(canvas.todataurl()); }); } usage: loadimagefile('myimage.jpg').then(string
64 => { alert(string
64); }); if you want to get instead the base
64 content of a local file using the file <input> element, you must use the filereader object.
Dialogs and Prompts - Archive of obsolete content
help — help button (doesn't work in thunderbird 1.0 bug 25
6915) extra1, extra2 — two buttons without any predefined labels or meaning.
...xt/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ondialogaccept="alert('ok!');"> <hbox> <label value="hey!"/> <spacer flex="1"/> <vbox> <button dlgtype="accept"/> <button dlgtype="cancel"/> </vbox> </hbox> </dialog> default button since firefox 1.5, there are defaultbutton attributes and properties on the <dialog> element bug 28477
6.
JavaScript Daemons Management - Archive of obsolete content
() { [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.
...[custom 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.
XPath - Archive of obsolete content
ate) obj.evaluate(xpathexpression,contextnode,namespaceresolver,resulttype,result); //obj and contextnode should be the same object, if context is a ajax xml object (example: returnedxml) this should be used as : returnedxml.evaluate(xpathexpression,returnedxml,namespaceresolver,returntype,result); //contextnode should be used in the one in which it was created //add by mooring 2008-11-15 1
6:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your browser does't support this script!"); return; } var fields = [];//store the results if(window.activexobject) { var tobj =...
... tobj.iteratenext(); } } alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <field> <item>art_id</item> <item>psection</item> <item>qkind</item> <item>qtitle</item> <item>question</item> <item>pic</item> <item>answer1</item> <item>answer2</item> <item>answer3</item> <item>answer4</item> </field> </root> //add by mooring 2008-11-15 1
6:1
6 china ...
Installing Extensions and Themes From Web Pages - Archive of obsolete content
s = { "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:28857e
60d043447c5f4550853f2d40770b32
6a13" 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:28857e
60d043447c5f4550853f2d40770b32
6a13.
Migrating raw components to add-ons - Archive of obsolete content
historically, firefox has allowed third party contributions to be added to the application's components/ directory, but beginning with firefox 3.
6, this is no longer permitted.
...if this is the only reason you are using a binary component instead of javascript, take a look at the new javascript c-types support introduced in firefox 3.
6.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
draft 1 was first circulated in september 200
6, and after four drafts, it was published in june 2007.
...0.php gnu general public license (gpl) http://www.gnu.org/licenses/gpl.html gnu lesser general public license (lgpl) http://www.gnu.org/licenses/lgpl.html various licenses and comments about them http://www.gnu.org/licenses/license-list.html the bsd license problem http://www.gnu.org/philosophy/bsd.html the free software license diagnostic (in japanese) http://www.rubyist.net/~matz/20030
608.html#p02 openoffice.org joint copyright assignment (jca) http://www.openoffice.org/licenses/jca.pdf gnu free documentation license (gfdl) http://www.gnu.org/licenses/fdl.html creative commons http://www.creativecommons.cc/ gnu gplv3 second discussion draft http://gplv3.fsf.org/gpl-draft-200
6-07-27.html gnu gplv3 third discussion draft http://gplv3.fsf.org/gpl-draft-2007-03-28.html gn...
Adding menus and submenus - Archive of obsolete content
it's best to show an item with a throbber image (see chrome://global/skin/icons/loading_1
6.png) so the user knows there's something going on, and asynchronously fill its contents.
...menu icons are typically 1
6px by 1
6px.
Introduction - Archive of obsolete content
version 1.0 of firefox was released in november 2004, version 2.0 in october 200
6, and version 3.0 in june 2008.
...a release that is more than
6 months old is likely vulnerable to published security bugs.
Setting Up a Development Environment - Archive of obsolete content
adding: install.rdf (deflated 50%) adding: chrome.manifest (deflated 50%) adding: content/browseroverlay.js (deflated 42%) adding: content/browseroverlay.xul (deflated
69%) adding: skin/browseroverlay.css (stored 0%) adding: locale/browseroverlay.dtd (deflated 52%) adding: locale/browseroverlay.properties (stored 0%) creating xpi file.
...for instance, you may want to test your extension in firefox 3.5 and firefox 3.
6, or test it in a localized version of firefox.
Session store API - Archive of obsolete content
restoring without restarting firefox 3.
6 note this section applies to firefox 3.
6 and later.
... firefox 3.
6 knows how to save session store data when the last browser window closes, even if there are still other windows open.
Setting up an extension development environment - Archive of obsolete content
on ubuntu (and many other linux distributions): /usr/bin/firefox -no-remote -p dev on other distributions of linux/unix: /usr/local/bin/firefox -no-remote -p dev on macos mavericks (10.9) and newer: /applications/firefox.app/contents/macos/firefox-bin -no-remote -p dev & on windows: start -> run "%programfiles%\mozilla firefox\firefox.exe" -no-remote -p dev on windows
64 bit: start -> run "%programfiles(x8
6)%\mozilla firefox\firefox.exe" -no-remote -p dev to start thunderbird or seamonkey instead of firefox, substitute thunderbird, or seamonkey for the firefox used in our examples.
... create a file in the "extensions" directory under your profile directory with the extension's id as the file name (for example "your_profile_directory/extensions/{4
6d1b3c0-db7a-4b1a-8
63a-
6ee
6f77ecb58}").
Using the Stylesheet Service - Archive of obsolete content
'#' must be percent-encoded, details see bug
659
650.
... 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('{41d979dc-ea03-4235-8
6ff-1e3c090c5
630}') .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-firefox 1.5 behavi...
Search Extension Tutorial (Draft) - Archive of obsolete content
cu.import("resource://gre/modules/services.jsm"); // the details of the engine to add const engine_details = { name: "example engine", iconurl: "data:image/png;base
64,...", alias: "example-engine", description: "an example search engine", method: "get", // the http request method url: "https://www.example.com/?q=_searchterms_" }; // keep track of whether this is the first run.
...search.xml <?xml version="1.0" encoding="utf-8"?> <searchplugin xmlns="http://www.mozilla.org/200
6/browser/search/"> <shortname>example engine</shortname> <description>example search engine</description> <inputencoding>utf-8</inputencoding> <image width="1
6" height="1
6" type="image/png">data:image/png;base
64, ...
Creating a status bar extension - Archive of obsolete content
ont 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>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</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.
..."{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}" is a guid that uniquely identifies firefox as the target.
Source code directories overview - Archive of obsolete content
mac contains source code for macos: both the powerpc and
68000 versions.
... original document information author(s): daniel howard other contributors: heikki toivonen (11-nov-1999), hervé renault (for the french translation) (1
6-nov-1999) last updated date: michael kaply 2-june-2005 copyright information: portions of this content are © 1998-2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Using content preferences - Archive of obsolete content
var value = prefservice.getpref(uri, "devmo.somesetting"); built-in site-specific preferences preference name menu equivalent values notes browser.content.full-zoom view / zoom example: "1.1000000238418
6" (rounding variant of "1.1") related about:config preferences: browser.zoom.full boolean, set by the menu item view / zoom / zoom text only.
... spellcheck.lang language code (e.g., "en-us") private browsing requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 2.
6) prior to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.
6), the content preference service always stores preferences on disk.
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 1
6084
6, bug 1
67
624, and bug 1
6084
6.
...bug 1
66134 describes how the aol client installs itself as a dialer, but it doesn't behave like other dialers.
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
add the following preprocessor definitions to project properties|(all configurations)|c++|preprocessor|preprocessor definitions: win32;_windows;xp_win32;xp_win;_x8
6_;npsimple_exports disable precompiled headers using project properties|(all configurations)|c++|precompiled headers|create/use precompiled header.
...make sure the mimetypes of your html embed tags match the mimetype specified in your nprt.rc file and the top of your npp_gate.cpp file version issues if vc++ compiler throws you error c2
664 on 'drawtext' function call, you may replace it by 'drawtexta'.
Enabling the behavior - updating the status periodically - Archive of obsolete content
function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus,
60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time.
... we use it inside the loadtinderboxstatus function to make that function run a second (1,000 milliseconds) after startup and a minute (
60,000 milliseconds) after each invocation.
Creating a hybrid CD - Archive of obsolete content
mkhybrid -o ~/party.iso -r -j -hfs -v mozilla.party -map ~/hfsmapping ~/party/ cdrecord -v speed=2 dev=0,
6,0 ~/party.iso its also handy to be able to mount an image file to test it.
... mount ~/party.iso /mnt/cdrom -t iso9
660 -o loop=/dev/loop3,blocksize=1024 umount /mnt/cdrom here is the hfs mapping that i used.
Downloading Nightly or Trunk Builds - Archive of obsolete content
firefox 3.0 corresponds to mozilla 1.9.0; firefox 3.5 corresponds to mozilla 1.9.1; firefox 3.
6 corresponds to mozilla 1.9.2.
...for the trunk and the latest two branches, there are machines at mozilla and maybe elsewhere compiling builds as fast as they can make them for at least all three of firefox, thunderbird and seamonkey on all three of linux-i
68
6, mac-universalbinary and win32.
Layout FAQ - Archive of obsolete content
block(body)(1)@035ff490 {120,120,8820,
600} [state=00000010] sc=035ff2
64(i=2,b=0)< line 035ffc18: count=1 state=inline,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:linebr[0x5100] {0,0,330,300} < inline(span)(0)@035ffa04 next=035ffc48 next-continuation=035ffc48 {0,7,330,285} [content=0359ed50] [sc=035ff990]< text(0)@035ffa8c[0,4,t] next=035ffb1c {0,0,330,285} [state=41
600020] sc=035ffa3c pst=:-moz-non-el...
... this function converts an nsastring to an nsacstring by assuming that all the 1
6-bit units are ascii and just dropping the high byte on them all.
popChallengeResponse - Archive of obsolete content
resultstring = crypto.popchallengeresponse("challengestring"); argument description "challengestring" a base-
64 encoded cmmf popodeckeychallcontent message.
... the resultstring will either be a base-
64 encoded popodeckeyrespcontent message, or one of the following error strings: error string description "error:invalidparameter:xxx" the parameter xxx was an invalid value.
Makefile.mozextension.2 - Archive of obsolete content
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.manifest: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec8030f7-c20a-4
64f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc
6} #nvu {13
6c295a-4a5a-41cf-bf24-5cee52
6720d5} #mozilla suite {8
6c18b42-e4
66-45a9-ae7a-9b95ba
6f5
640} #seamonkey {92
650c4d-4b8e-4d2a-b7eb-24ecf4f
6b
63a} #sunbird {718e30fb-e89b-41dd-9da7-e25a45
638b28} #netscape browser {3db10fab-e4
61-4c80-8b97-957ad5f8ea47} ###### define install_rdf <rdf xmlns="http://www.w3.org/1999/02/22-...
...ed 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>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</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/gatekeeper/the...
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-b871-42cd-b33f-bfee4fcbf
682} components/commandline.js contract @mozilla.org/commandlinehandler/general-startup;1?type=myapp {2991c315-b871-42cd-b33f-bfee4fcbf
682} 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/xpcomutils.jsm"); compone...
...pec, 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-b871-42cd-b33f-bfee4fcbf
682}'), // 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.
The Joy of XUL - Archive of obsolete content
applications written in xul are based on additional w3c standard technologies featuring html 4.0; cascading style sheets (css) 1 and 2; document object model (dom) levels 1 and 2; javascript 1.5, including ecma-2
62 edition 3 (ecmascript); xml 1.0.
...libical is an open source implementation of the ietf's icalendar calendaring and scheduling protocols (rfc 2445, rfc 244
6, and rfc 2447).
Element Positioning - Archive of obsolete content
example
6 the description element is constrained to have a maximum width of 50 pixels.
...the following shows this attribute in use: example
6: source view <button label="push me please!" crop="right" flex="1"/> notice how the text on the button has had the right side of it cropped after the window is made smaller.
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_numpad
6 vk_numpad7 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_f
6 vk_f7 vk_f8 vk_f9 vk_f10 vk_f11 vk_f12 vk_f13 vk_f14 vk_f15 vk_f1
6 vk_f17 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"/> </...
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" /> ...
...tter" /> <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:0
6:00" /> <treecell label="9:10:2
6" /> </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 attribute t...
Splitters - Archive of obsolete content
splitter example an example would be helpful here: example 1 : source view <hbox flex="1"> <iframe id="content-1" width="
60" height="20" src="w1.html"/> <splitter collapse="before" resizeafter="farthest"> <grippy/> </splitter> <iframe id="content-2" width="
60" height="20" src="w2.html"/> <iframe id="content-3" width="
60" height="20" src="w3.html"/> <iframe id="content-4" width="
60" height="20" src="w4.html"/> </hbox> here, four iframes have been created and a splitter has been placed in-between the ...
...if you set the minimum width of panel 1 to 50 pixels, you would only be able to drag the splitter 10 pixels to the left (as it starts at
60 pixels wide).
Stack Positioning - Archive of obsolete content
example 1 : source view <stack> <button label="goblins" left="5" top="5"/> <button label="trolls" left="
60" top="20"/> <button label="vampires" left="10" top="
60"/> </stack> the stack here contains three elements, each positioned at the coordinates given by the left and top attributes.
... in this example, the resulting width of the top-most hbox will be 400px: <stack width="
600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here.
Templates - Archive of obsolete content
e-window" title="bookmarks list" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <rule rdf:type="http://home.netscape.com/nc-rdf#bookmarkseparator"> <spacer uri="rdf:*" height="1
6"/> </rule> <rule> <button uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </vbox> </window> by using two rules, we have allowed the contents of the template to be selectively generated.
...that means that separators will follow rule one and generate a spacer element, which will display a 1
6 pixel gap.
Using nsIXULAppInfo - Archive of obsolete content
const firefox_id = "{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}"; const thunderbird_id = "{3550f703-e582-4d05-9a08-453d09bdfdc
6}"; const seamonkey_id = "{92
650c4d-4b8e-4d2a-b7eb-24ecf4f
6b
63a}"; 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) { // runni...
...ervice(components.interfaces.nsiversioncomparator); if(versionchecker.compare(appinfo.version, "1.5") >= 0) { // running under firefox 1.5 or later } see nsiversioncomparator for details example 2: dealing with nightlies var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.appbuildid >= "200509300
6") { // running on a build after 200509300
6 } you shouldn't rely on build ids for releases, as build id might be different for custom build or a localized version of an application.
datepicker - Archive of obsolete content
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="2007-03-2
6"/> attributes disabled type: boolean indicates whether the element is disabled or not.
...the values range from 0 to
6, where 0 is sunday and
6 is saturday.
panel - Archive of obsolete content
warning: for firefox versions between 3.
6 and 4.0, placing an iframe, browser or editor inside a panel is not supported.
... <panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have
6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="
6 new messages" popup="thepanel"/> attributes backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its background area.
resizer - Archive of obsolete content
le="cursor: e-resize;"/> <resizer dir="bottomright" height="2" style="cursor: se-resize;"/> </vbox> </hbox> </window> resizing an element <stack style="border: 1px solid black;"> <button id="button" label="resizable" left="18" top="18" right="18" bottom="18"/> <resizer dir="topleft" style="background: black; -moz-appearance: none;" element="button" left="0" top="0" width="1
6" height="1
6"/> <resizer dir="topright" style="background: black; -moz-appearance: none;" element="button" right="0" top="0" width="1
6" height="1
6"/> <resizer dir="bottomleft" style="background: black; -moz-appearance: none;" element="button" left="0" bottom="0" width="1
6" height="1
6"/> <resizer dir="bottomright" style="background: black; -moz-appearance: none;" ...
... element="button" right="0" bottom="0" width="1
6" height="1
6"/> </stack> attributes dir type: one of the values below the direction that the window is resized.
scrollbox - Archive of obsolete content
<vbox> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="0
6 that all men are created equal."/> </vbox> the next bunch of labels is similar, but if the container doesn't give enough room for it, scroll bars will sprout out of nowhere and allow the user to scroll around the big content in the small view space.
... <vbox flex="1" style="overflow:auto"> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="0
6 that all men are created equal."/> </vbox> the flex="1" above may or may not be needed, or even desired.
tabbrowser - Archive of obsolete content
firefox 3.
6 note the second form of this method was added in firefox 3.
6; it allows you to specify the parameters by name, in any order.
... firefox 3.
6 note the second form of this method was added in firefox 3.
6; it adds the relatedtocurrent parameter, and allows the parameters to be specified by name, in any order.
NPEvent - Archive of obsolete content
syntax microsoft windows typedef struct _npevent { uint1
6 event; uint32 wparam; uint32 lparam; } npevent; mac os typedef eventrecord npevent; type eventrecord = record { what: integer; message: longint; when: longint; where: point; modifiers: integer; end; xwindows typedef xevent npevent; fields npevent on microsoft windows the data structure has the following fields: event one of the following event types: wm_paint wm_lbuttondown wm_lbuttonup wm_lbuttondblclk wm_rbuttondown wm_rbuttonup wm_rbuttondblclk wm_mbuttondown wm_mbuttonup wm_mbuttondblclk wm_mousemo...
...values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey
6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os developer documentation.
What is RSS - Archive of obsolete content
k> <item> <title>news flash: i like bread</title> <guid ispermalink="false">4d4a0a12-f188-4c97-908b-eea27213c2fe</guid> <pubdate>wed, 27 jul 2005 00:30:30 -0700</pubdate> <link>http://news.example.com/artcle/554</link> </item> <item> <title>big news today: birds fly</title> <guid ispermalink="false">c4a
63f09-b45b-4
66b-8773-
6ff2
64001ab7</guid> <pubdate>tue, 19 jul 2005 04:32:51 -0700</pubdate> <link>http://news.example.com/artcle/553</link> </item> <item> <title>fire is hot</title> <guid ispermalink="false">c1795324-d5ea-44fa-95b1-b5ce2090d4f1</guid> <pubdate>sun, 15 may 2005 13:02:08 -0700</pubdate> <link>http...
...ow you want to.</description> <lastbuilddate>tue, 23 aug 2005 21:02:05 -0800</lastbuilddate> <link>http://katetv.example.com/</link> <item> <title>this is fun</title> <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="191114
6" type="application/ogg"/> </item> <item> <title>watch this</title> <guid>http://katetv.example.com/show/3</guid> <pubdate>tue, 1
6 aug 2005 1
6:11:57 -0400</pubdate> <enclosure url="http://katetv.example.com/show/3" length="1387442" type="application/ogg"/> </item> <item> <title>it is me again</title> ...
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 03017
6cc r=0 a=8940,uc c=0,0 cnt=429 tbl 030178c4 r=0 a=8940,uc c=4470,uc cnt=430 rowg 03017a7c r=0 a=uc,uc c=uc,uc cnt=431 row 03017c08 r=0 a=uc,uc c=uc,uc cnt=432 cell 03017da8 r=0 a=uc,uc c=uc,uc cnt=433 block 03017e08 r=0 a=uc,uc c=uc,uc cnt=434 block 03017e08 d=870,300 me=480 cell 03017da8 d=930,3
60 me=540 cell 0301a8cc r=0 a=uc,uc c=uc,uc cnt=43
6 ...
...block 0301a92c r=0 a=uc,uc c=uc,uc cnt=437 block 0301a92c d=1335,300 me=4
65 cell 0301a8cc d=1395,3
60 me=525 row 03017c08 d=uc,3
60 rowg 03017a7c d=uc,3
60 rowg 03017a7c r=2 a=4470,uc c=4470,uc cnt=442 row 03017c08 r=2 a=4470,uc c=4470,uc cnt=443 cell 03017da8 r=2 a=1755,uc c=1
695,uc cnt=444 block 03017e08 r=2 a=1
695,uc c=1
695,uc cnt=445 block 03017e08 d=1
695,300 cell 03017da8 d=1755,3
60 cell 0301a8cc r=2 a=2
625,uc c=25
65,uc cnt=44
6 block 0301a92c r=2 a=25
65,uc c=25
65,uc cnt=447 block 0301a92c d=25
65,300 cell 0301a8cc d=2
625,3
60 row 03017c08 d=4470,3
60 rowg 03017a7c d=4470,3
60 tbl 030178c4 d=4500,450 tblo 03017
6cc d=4500,450 table reflow optimizations if the table is already balanced, pass 1 cons...
Building a Theme - Archive of obsolete content
--> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-4
64f-9b0e-13a3a9e97384}</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:homepageurl>http...
... {ec8030f7-c20a-4
64f-9b0e-13a3a9e97384} - firefox's application id.
Making sure your theme works with RTL locales - Archive of obsolete content
example toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 39
6px 34px 3
60px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 51
6px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
... toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 398px 34px 3
60px); } toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px 51
6px 34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.
E4X - Archive of obsolete content
<?xml version=...?>) (see bug 33
6551).
... workaround: var response = xmlhttprequest.responsetext; // bug 270553 response = response.replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>/, ""); // bug 33
6551 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-357 standard brendan's presentation e4x at faqts.com e4x quick reference at rephrase.net ...
Expression closures - Archive of obsolete content
the expression closure syntax is a deprecated firefox-specific feature and has been removed starting with firefox
60.
... examples a shorthand for binding event listeners: document.addeventlistener('click', function() false, true); using this notation with some of the array functions from javascript 1.
6: elems.some(function(elem) elem.type == 'text'); ...
New in JavaScript 1.5 - Archive of obsolete content
this version was included in netscape navigator
6.0 was released on november 14, 2000 and was also used in later versions of netscape navigator and firefox 1.0.
...the corresponding ecma standard is ecma-2
62 edition 3 (from december 1999).
for each...in - Archive of obsolete content
please see warning: javascript 1.
6's for-each-in loops are deprecated for migration help.
... the following snippet iterates over an object's properties, calculating their sum: var sum = 0; var obj = {prop1: 5, prop2: 13, prop3: 8}; for each (var item in obj) { sum += item; } console.log(sum); // logs "2
6", which is 5+13+8 specifications not part of any standard.
Packages - Archive of obsolete content
obsolete since gecko 1
6.0 (firefox 1
6.0 / thunderbird 1
6.0 / seamonkey 2.13)this feature is obsolete.
... the support for this object was removed in gecko 1
6, see liveconnect for details.
MSX Emulator (jsMSX) - Archive of obsolete content
therefore, jsmsx requires a very fast computer to emulate msx at the normal 50-
60 interrupts per second inside a web browser.
...external links view the online demo (requires firefox 2+) jsmsx project see also drawing graphics with canvas canvas tutorial jsc
64 the 100% javascript / canvas commodore
64 emulator ...
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
therefore, i just added a half-em margins on card paragraphs, and then changed the left margin to be 1
60px, which makes sure the text in the paragraphs won't wrap under the floated images.
...iv.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} div.card p {margin: 0.5em 0.5em 0.5em 1
60px;} and voila!
Troubleshooting XForms Forms - Archive of obsolete content
ensure that your <html> element contains the supported namespace declaration: xmlns="http://www.w3.org/1999/xhtml" (instead of the newer, unratified version, xhtml 2.0, located at http://www.w3.org/2002/0
6/xhtml2 ) inline instance, no controls get bound have you remembered to use the correct namespace for the instance nodes?
...you either have to use css tables or repeat attributes, which at the moment are not working properly in the firefox xforms extension :( should be fixed by bug 30
6247 and bug 2803
68 respectively.
Mozilla XForms Specials - Archive of obsolete content
(limitation tracked in bug 2803
68) mixing repeat and table or ul it is not possible to mix repeats with either table or ul.
...instead of using digest('abc', 'sha-1') explicitly use the third parameter (the results are equal): digest('abc', 'sha-1', 'base
64') (limitation tracked in bug 477857) extensions enumerating instances the standardized nsixformsmodelelement does not allow one to enumerate over all possible instances, but only to retrieve instances by their name.
RFE to the Custom Controls - Archive of obsolete content
output that shows the dom if output contains cdata section or text node and its data is any mozilla known language like xhtml/xul/svg then output should parse and display it (see bug 31
6817).
...the related bug is bug 3485
62.
XForms - Archive of obsolete content
obsolete since gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.1
6)this feature is obsolete.
...the last official release has been done for firefox 3.
6 and is available for download on addons.mozilla.org.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
gecko behavior in browsers based on netscape gecko builds later than 20020410 (netscape
6.1+), :hover styles can be applied to any element in a document.
...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 1
69078 for details).
Building up a basic demo with A-Frame - Game development
add the <a-animation> element seen below to the <a-box> element as a child, as shown: <a-box color="#0095dd" rotation="20 40 0" position="0 1 0"> <a-animation attribute="rotation" from="20 0 0" to="20 3
60 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"> </a-animation> </a-box> as with any other entities, you can define key properties for the animation.
... we'll be animating the rotation attribute from 20 0 0 to 20 3
60 0, so it will do a full spin.
Building up a basic demo with Three.js - Game development
we could set a fixed ratio — for example 1
6 ⁄ 9, which is the aspect ratio of a widescreen tv.
... 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.
GLSL Shaders - Game development
the texture shader code now we'll add the texture shader to the code — add the code below to the body's second <script> tag: void main() { gl_fragcolor = vec4(0.0, 0.58, 0.8
6, 1.0); } this will set an rgba color to recreate the current light blue one — the first three float values (ranging from 0.0 to 1.0) represent the red, green, and blue channels while the fourth one is the alpha transparency (ranging from 0.0 — fully transparent — to 1.0 — fully opaque).
...cript src="https://end3r.github.io/mdn-games-3d/shaders/js/three.min.js"></script> <script id="vertexshader" type="x-shader/x-vertex"> void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } </script> <script id="fragmentshader" type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(0.0, 0.58, 0.8
6, 1.0); } </script> javascript var width = window.innerwidth; var height = window.innerheight; var renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); renderer.setclearcolor(0xdddddd, 1); document.body.appendchild(renderer.domelement); var scene = new three.scene(); var camera = new three.perspectivecamera(70, width/heigh...
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 4
6+ y y y y safari (ios) 7+ y/n* n n y android browser
67+ y y y y there's a full compatibility chart for mobile and desktop htmlmediaelement support here.
... 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/2909c1
6512.mp3"></audio> <button data-start="18" data-stop="19">0</button> <button data-start="1
6" data-stop="17">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=...
Square tilemaps implementation: Static maps - Game development
we need to supply the atlas image, the coordinates and dimensions of the tile inside the atlas, and the target coordinates and size (a different tile size in here would scale the tile.) so, for instance, to draw the tree tile, which is the third in the atlas, at the screen coordinates (128, 320), we would call drawimage() with these values: context.drawimage(atlasimage, 192, 0,
64,
64, 128, 320,
64,
64); in order to support atlases with multiple rows and columns, you would need to know how many rows and columns there are to be able to compute the source x and y.
...this features an 8 x 8 map with tiles
64 x
64 pixels in size: var map = { cols: 8, rows: 8, tsize:
64, tiles: [ 1, 3, 3, 3, 1, 1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1 ], gettile: function(col, row) { return this.tiles[row * map.cols + col] } }; render...
Build the brick field - Game development
« previousnext » this is the
6th step out of 10 of the gamedev canvas tutorial.
... you can find the source code as it would look after completing this lesson at gamedev-canvas-workshop/lesson
6.html.
Create the Canvas and draw on it - Game development
try adding this to the bottom of your javascript, saving and refreshing: ctx.beginpath(); ctx.arc(240, 1
60, 20, 0, math.pi*2, false); ctx.fillstyle = "green"; ctx.fill(); ctx.closepath(); as you can see we're using the beginpath() and closepath() methods again.
...try adding this code to your javascript too: ctx.beginpath(); ctx.rect(1
60, 10, 100, 40); ctx.strokestyle = "rgba(0, 0, 255, 0.5)"; ctx.stroke(); ctx.closepath(); the code above prints a blue-stroked empty rectangle.
Bounce off the walls - Game development
« previousnext » this is the
6th step out of 1
6 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
6.html.
Randomizing gameplay - Game development
« previous this is the 1
6th step out of 1
6 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/lesson1
6.html.
2D maze game with device orientation - Game development
this.load.spritesheet('button-start', 'img/button-start.png', 14
6, 51); // ...
...in the initlevels function we have: this.leveldata = [ [ { x: 9
6, y: 224, t: 'w' } ], [ { x: 72, y: 320, t: 'w' }, { x: 200, y: 320, t: 'h' }, { x: 72, y: 150, t: 'w' } ], // ...
Visual-js game engine - Game development
1) click create application 2) enter new application name in input prompt 3) select folder for server part of application (important : www is not secure place) 4) select folder for client part of application ( any path in www) 5) new app 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/7d0d8v
6d/ help about new 2d part - implementation of matter.js based typescript .
Visual typescript game engine - Game development
*/ private aspectratio: number = 1.333; /** * domain is simple url address, * recommendent to use for local propose lan ip * like : 192.1
68.0.xxx if you wanna run ant test app with server.
... this.networkdeeplogs = false; this.rtcserverport = 12034; this.rtc3serverport = 12034; this.connectorport = 1234; this.domain = "192.1
68.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:27017"; - the running server is easy : npm run rtc with this cmd: npm run rtc we run server.js and connector.ts...
Gecko FAQ - Gecko Redirect 1
xml 1.0: full support, except for processing to manipulate default attributes rdf: full support, except for abouteach, abouteachprefix, and parsetype javascript 1.5, including ecma-2
62 edition 3 (ecmascript) compliance, except for date.todatestring and date.totimestring, which are not implemented transfer protocols: http 1.1 (including gzip compression), ftp ssl unicode oji (open java interface) image formats png gif jpeg, pjpeg does "full support" mean that gecko has zero bugs today or will have zero bugs at some point in the future?
...sets for win32, x, and mac user preferences library mozilla plug-in api (npapi) to support the navigator plug-in interface open java interface (oji), with sun java 1.2 jvm rdf back end font library security library (nss) original document information author(s): angus other contributors: ekrock, vidur, hidday, drunclear copyright information: portions of this content are © 1998–200
6 by individual mozilla.org contributors; content available under a creative commons license ...
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
6347: datagram transport layer security version 1.2 datagram transport layer security protocol version 1.3 draft specification related specifications rfc 57
63: framework for establishing a secure real-time transport protocol (srtp) security context using dtls rfc 57
64: dtls extension to establish keys for the secure real-time transport protocol (srtp) rfc
6083: dtls for stream control trans...
...mission protocol (sctp) rfc 82
61: 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 ...
Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms
for example: console.log(num); // returns undefined, as only declaration was hoisted, no initialization has happened at this stage var num; // declaration num =
6; // initialization the example below only has initialization.
... console.log(num); // throws referenceerror exception num =
6; // initialization below are more examples demonstrating hoisting.
Round Trip Time (RTT) - MDN Web Docs Glossary: Definitions of Web-related terms
$ ping example.com ping example.com (21
6.58.194.174): 5
6 data bytes
64 bytes from 21
6.58.194.174: icmp_seq=0 ttl=55 time=25.050 ms
64 bytes from 21
6.58.194.174: icmp_seq=1 ttl=55 time=23.781 ms
64 bytes from 21
6.58.194.174: icmp_seq=2 ttl=55 time=24.287 ms
64 bytes from 21
6.58.194.174: icmp_seq=3 ttl=55 time=34.904 ms
64 bytes from 21
6.58.194.174: icmp_seq=4 ttl=55 time=2
6.119 ms --- google.com ping statistics --- 5 packets transmitted, 5 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 23.781/2...
...
6.828/34.904/4.114 ms in the above example, the average round trip time is shown on the final line as 2
6.8ms.
Percent-encoding - MDN Web Docs Glossary: Definitions of Web-related terms
':' '/' '?' '#' '[' ']' '@' '!' '$' '&' "'" '(' ')' '*' '+' ',' ';' '=' '%' ' ' %3a %2f %3f %23 %5b %5d %40 %21 %24 %2
6 %27 %28 %29 %2a %2b %2c %3b %3d %25 %20 or + depending on the context, the character ' ' is translated to a '+' (like in the percent-encoding version used in an application/x-www-form-urlencoded message), or in '%20' like on urls.
... technical knowledge rfc 398
6, section 2.1, where this encoding is defined.
User agent - MDN Web Docs Glossary: Definitions of Web-related terms
a typical user agent string looks like this: "mozilla/5.0 (x11; ubuntu; linux x8
6_
64; rv:35.0) gecko/20100101 firefox/35.0".
... learn more general knowledge user agent on wikipedia technical reference navigator.useragent browser detection using the user agent rfc 2
61
6: 14.43: the user-agent header ...
MDN Web Docs Glossary: Definitions of Web-related terms
ash ajax algorithm alignment container alignment subject alpha (alpha channel) alpn api apple safari application context argument aria arpa arpanet array ascii asynchronous atag attribute b bandwidth base
64 baseline beacon bézier curve bidi bigint blink block block (css) block (scripting) block cipher mode of operation boolean boot2gecko bootstrap bounding box breadcrumb brotli browser browsing context buffer c ...
...icann ice ide idempotent identifier idl ietf iife imap immutable index indexeddb information architecture inheritance input method editor instance internationalization internet intrinsic size ip address ipv4 ipv
6 irc iso isp itu j jank java javascript jpeg jquery json k key keyword l latency layout viewport lazy load lgpl ligature local scope local variable locale localiza...
HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="
6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td...
...<!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"> <td colspan="
6"> <p>©copyright 2050 by nobody.
HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="
6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td...
...<!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"> <td colspan="
6"> <p>©copyright 2050 by nobody.
Accessible multimedia - Learn web development
last of all, add the following to the end of the code, to control the time elapsed display: player.ontimeupdate = function() { let minutes = math.floor(player.currenttime /
60); let seconds = math.floor(player.currenttime - minutes *
60); let minutevalue; let secondvalue; if (minutes<10) { minutevalue = "0" + minutes; } else { minutevalue = minutes; } if (seconds<10) { secondvalue = "0" + seconds; } else { secondvalue = seconds; } mediatime = minutevalue + ":" + secondvalue; timelabel.textcontent = mediatime; }; each time the ...
... a typical webvtt file will look something like this: webvtt 1 00:00:22.230 --> 00:00:24.
60
6 this is the first subtitle.
Using CSS generated content - Learn web development
for example, "\2
65b" is the chess symbol for a black queen ♛.
... this rule adds a space and an icon after every link that has the class glossary: html <a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a> css a.glossary::after { content: " " url("https://mdn.mozillademos.org/files/1
6322/glossary-icon.gif"); } ...
How do you make sure your website works properly? - Learn web development
ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not: $ ping mozilla.org ping mozilla.org (
63.245.215.20): 5
6 data bytes
64 bytes from
63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
64 bytes from
63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
64 bytes from
63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
64 bytes from
63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms ^c --- mozilla.org ping statistics --- 4 packets transmitted, 4 packets received, 0.0% packet loss round-trip min/avg/m...
...ax/stddev = 147.857/148.4
68/148.741/0.3
62 ms just keep in mind a handy keyboard shortcut: ctrl+c.
How does the Internet work? - Learn web development
it began in the 19
60s as a us-army-funded research project, then evolved into a public infrastructure in the 1980s with the support of many public universities and private companies.
...it's an address made of a series of four numbers separated by dots, for example: 192.1
68.2.10.
Basic native form controls - Learn web development
<input type="hidden" id="timestamp" name="timestamp" value="128
6705410"> if you create such an element, it's required to set its name and value attributes.
... so for example when you click on the image at coordinate (123, 45
6) and it submits via the get method, you'll see the values appended to the url as follows: http://foo.com?pos.x=123&pos.y=45
6 this is a very convenient way to build a "hot map".
Client-side form validation - Learn web development
now delete the contents of the <body> element, and replace it with the following: <form> <div> <label for="choose">would you prefer a banana or a cherry?</label> <input type="text" id="choose" name="i_like" required minlength="
6" maxlength="
6"> </div> <div> <label for="number">how many would you like?</label> <input type="number" id="number" name="amount" value="1" min="1" max="10"> </div> <div> <button>submit</button> </div> </form> here you'll see that we've given the text field a minlength and maxlength of six, which is the same length as banana and cherry.
...></span> </label> </p> <!-- some legacy browsers need to have the `type` attribute explicitly set to `submit` on the `button`element --> <button type="submit">submit</button> </form> similarly, the css doesn't need to change very much; we've just turned the :invalid css pseudo-class into a real class and avoided using the attribute selector that doesn't work on internet explorer
6.
The HTML5 input types - Learn web development
<label for="mydate">when are you available this summer?</label> <input type="date" name="mydate" min="2013-0
6-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.
...the following screenshot taken on firefox for macos provides an example: and here is a live example for you to try out: the value returned is always a lowercase
6-value hexidecimal color.
How to build custom form controls - Learn web development
.select { /* the computations are made assuming 1em == 1
6px which is the default value in most browsers.
... if you are lost with px to em conversion, try http://riddle.pl/emcalc/ */ font-size : 0.
625em; /* this (10px) is the new font size context for em value in this context */ font-family : verdana, arial, sans-serif; box-sizing : border-box; /* we need extra room for the down arrow we will add */ padding : .1em 2.5em .2em .5em; width : 10em; /* 100px */ border : .2em solid #000; border-radius : .4em; box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* the first declaration is for browsers that do not support linear gradients.
Other form controls - Learn web development
the following screenshot shows the datalist fallback as rendered in safari
6: if you use this fallback, ensure the data for both the <input> and the <select> are collected server-side.
... <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.
Styling web forms - Learn web development
form controls were added to html in the html 2 specification in 1995; css wasn't released until late 199
6, and wasn't supported very well by browsers for a few years after that.
...l use auto: textarea { display : block; padding : 10px; margin : 10px 0 0 -10px; width : 100%; height : 90%; border-right: 1px solid; /* resize : none; */ overflow: auto; } styling the submit button the <button> element is really convenient to style with css; you can do whatever you want, even using pseudo-elements: button { padding : 5px; font : bold .
6em sans-serif; border : 2px solid #333; border-radius: 5px; background : none; cursor : pointer; transform : rotate(-1.5deg); } button:after { content : " >>>"; } button:hover, button:focus { outline : none; background : #000; color : #fff; } the final result and voila!
Front-end web developer - Learn web development
modules web forms (40–50 hours) making the web work for everyone time to complete:
60–75 hours prerequisites it is a good idea to know html, css, and javascript before working through this section.
... modules git and github (5 hour read) understanding client-side web development tools (20–25 hour read) understanding client-side javascript frameworks (30-
60 hour read/exercises) ...
Mozilla splash page - Learn web development
next, create a 1200px wide landscape version of red-panda.jpg, and a
600px wide portrait version that shows the panda in more of a close up shot.
... an art directed red panda inside the <div> with the class of red-panda, we want to insert a <picture> element that serves the small portrait panda image if the viewport is
600px wide or less, and the large landscape image otherwise.
From object to iframe — other embedding technologies - Learn web development
h2> <p class="a11y-label">press esc to move focus away from the code area (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: 1
6px; } .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.valu...
... 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!1d37995.
65748333395!2d-2.2735
681
66412784!3d53.47331047191
6975!2m3!1f0!2f0!3f0!3m2!1i1024!2i7
68!4f13.1!3m3!1m2!1s0x487bae
6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="
600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatec...
Introduction to events - Learn web development
you might, for example, have a set of 1
6 tiles that disappear when selected.
...in the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 1
6 <div> elements using javascript.
Third-party APIs - Learn web development
for example: let map = l.mapquest.map('map', { center: [53.480759, -2.242
631], 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.480759, -2.242
631], { icon: l.mapquest.icons.marker({ primarycolor: '#22407f', 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 defines the...
Multimedia: video - Learn web development
compress the video and export to multiple video formats, including webm, mpeg-4/h.2
64, and ogg/theora.
... for example, given video compressions in three different formats at 10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" controls="controls"> <!-- webm: 10 mb --> <source src="video.webm" type="video/webm" /> <!-- mpeg-4/h.2
64: 12 mb --> <source src="video.mp4" type="video/mp4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv" type="video/ogv" /> </video> the browser downloads the first format it understands.
Properly configuring server MIME types - Learn web development
gecko 1.9.1.11 (firefox 3.5.11) and gecko 1.9.2.5 (firefox 3.
6.5) also implement this security fix, but to improve compatibility, there was a temporary heuristic that allows the load if the first line in the style sheet appears to be a well-formed css construct; the heuristic has been removed in firefox 4, and you have to properly set the text/css mime types to have your css pages recognized.
... related links incorrect mime type for css files iana | mime media types hypertext transfer protocol — http/1.1 microsoft - 29333
6 - info: webcast: mime type handling in microsoft internet explorer microsoft - appendix a: mime type detection in internet explorer microsoft - security update, march 29, 2001 microsoft - security update, december 13, 2001 original document information author: bob clary, date: 20 feb 2003 ...
Getting started with React - Learn web development
for instance, react native can be used to build mobile applications; react 3
60 can be used to build virtual reality applications; and there are other possibilities besides.
... take a moment to change the <p> tag on line
6 so that it reads "hello, world!", then save your file.
React resources - Learn web development
class components although this tutorial doesn’t mention them, it is possible to build react components using es
6 classes – these are called class components.
... until the arrival of hooks, es
6 classes were the only way to bring state into components or manage rendering side effects.
HTMLIFrameElement.sendTouchEvent()
warning: removed in firefox
65.
... modifiers a number representing a key pressed at the same time the mouse button was clicked: 1 : alt 2 : ctrl 4 : shift 8 : meta 1
6 : alt gr 32 : caps lock
64 : fn 128 : num lock 25
6 : scroll 512 : symbol lock 1024 : win note: you can specify multiple key modifiers separated by a pipe symbol, for example 1 | 1014.
Browser API
browser api methods removed in firefox
65 in firefox
65, several of the mozilla browser api methods were removed in an effort to cut down on domrequest usage in the browser, and remove the parts of the browser api that are no longer needed (it is used only by the firefox devtools at this point).
... the methods removed in firefox
65 are: htmliframeelement.addnextpaintlistener() defines a handler to listen for the next mozafterpaint event in the browser <iframe>.
Geckoview-Junit Tests
@test fun contentcrashignored() { // cannot test x8
6 debug builds due to gecko's "ah_crap_handler" // that waits for debugger to attach during a sigsegv.
... assumethat(sessionrule.env.isdebugbuild && sessionrule.env.cpuarch == "x8
6", equalto(false)) running tests on try to run these tests on try, use something like: mach try fuzzy -q geckoview-junit --artifact or mach try -b do -p android-x8
6_
64 -u geckoview-junit --artifact currently, geckoview-junit is only run on android-x8
6_
64.
Getting Started with Chat
you will need to use the following information to configure the server connection: server: irc.mozilla.org port:
6667 (default) or
6697 (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
6697 or
6667 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.
How Mozilla determines MIME Types
similar handling happens for <a href="..." type="foo/bar">, starting in mozilla 1.
6alpha.
...riloader/exthandler/nsexternalhelperappservice.cpp) the file->mime type mapping works like this: on beos, the operating system is asked for the type of the file (not quite yet, bug 217723) on macos, the type and creator code will be used to lookup the type of the file from the os a hardcoded list of extensions is checked (containing currently 13 entries, nsexternalhelperappservice.cpp line 4
63 (this is done for speed – it is faster to find data in the hardcoded list than asking the os or looking in preferences) if the extension is not listed there, it becomes interesting.
IME handling guide
android widget still does not use texteventdispatcher to dispatch widgetcompositionevents, see bug 11375
67.
...therefore, tsftextstore will use insertion point relative query for them bug 128
6157.
Downloads.jsm
close the message to stop."); } finally { yield list.remove(download); yield download.finalize(true); } } finally { yield list.removeview(view); } }).then(null, components.utils.reporterror); conversion from nsidownloadmanager starting in firefox for desktop version 2
6, the nsidownloadmanager and nsidownload interfaces are not available anymore.
... components.manager.queryinterface(components.interfaces.nsicomponentregistrar) .registerfactory(components.id("{1b4c85df-cbdd-4bb
6-b04e-
613caece083c}"), "", "@mozilla.org/transfer;1", null); ...
FileUtils.jsm
to the pr_rdonly parameter to pr_open mode_wronly 0x02 corresponds to the pr_wronly parameter to pr_open mode_create 0x08 corresponds to the pr_create_file parameter to pr_open mode_append 0x10 corresponds to the pr_append parameter to pr_open mode_truncate 0x20 corresponds to the pr_truncate parameter to pr_open perms_file 0
644 default permissions when creating files.
... remarks note: starting in gecko
6 the stream is opened with the defer_open nsifileoutputstream behavior flag constant; this means the file is not actually opened until the first time it's accessed.
WebRequest.jsm
see bug 117
6092.
... modifying headers 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; wow
64; 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.requesthe...
XPCOMUtils.jsm
details can be found here: bug
628
669 itersimpleenumerator() wraps an nsisimpleenumerator instance into a javascript generator that can be easily iterated over.
... examples definelazygetter var myservices = {}; cu.import('resource://gre/modules/xpcomutils.jsm'); //set it up xpcomutils.definelazygetter(myservices, 'as', function () { return cc['@mozilla.org/alerts-service;1'].getservice(ci.nsialertsservice) }); //when you need to use it myservices.as.showalertnotification('chrome://branding/content/icon
64.png', 'this was lazyloaded', 'this is a notification from myservices.as', null, null); ...
Encodings for localization files
nstaller.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 cp1257 18
6 chinesebig5_charset cp950 13
6 easteurope_charset cp1250 238 gb2312_charset cp93
6 134 greek_charset cp1253 1
61 hangul_charset cp949 129 russian_charset cp1251 204 shiftjis_charset cp932 128 turkish_charset cp1254 1
62 vietnamese_charset cp1258 1
63 middle ea...
...st language editions of windows: arabic_charset cp125
6 178 hebrew_charset cp1255 177 thai language editions of windows: thai_charset cp874 222 ...
Localizing without a specialized tool
x-testing: unchanged: 2 changed: 3 missinginfiles:
6117 missing: 13 0% of entries changed the beauty of the compare-locales output is that it tells you all the missing files and which files you need to add and localize.
... the localization phase lists (firefox 3.5: ff35.phaselist, firefox 3.
6: ff3
6.phaselist).
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:7c543e8f3a
6a 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:7c543e8f3a
6a 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 4
6 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 5131e147fa50c28ec858c7d9fd1ba201ea2a433b 4da525ed77
699794c5
6081791bd4
6cc85983f
6f8 9bc7e
6c58fc091c8cd0e8d9e1dbc7e
6f592772a7 gecko20b12_2011022218_relbranch 230e99fada
602842d9
630e
6...
...73077ef9f1ab34247 gecko20b12pre_2011021
6_relbranch 41a4357884d7bcc50e
69c71014124d3af2482afe comm20b11_20110203_relbranch 2ec
6ad14e71
68ebeb999b1e8ae10
632ae4c9df23 gecko20b11_2011020209_relbranch d
68e
647ac3c0fee709c13abb0f03fac24a1a5d29 gecko20b11pre_2011012
6_relbranch 7ff37dc
6837
6693
63a51ad3fd2874ac845d312d5 gecko20b10_2011012115_relbranch
6c31fe9bc0
65a8
6aea2223ba48
698f18ae75
63ad gecko20b9_2011011018_relbranch here you can see that there are two changesets without a branch.
What every Mozilla translator should know
some branch/release names identified: mozilla source + en-us localization files for [ab-cd] locale corresponding firefox version branches in hg mozilla-central l10n-central firefox.next (trunk) mozilla-1.9.2 l10n-mozilla-1.9.2 firefox 3.
6 mozilla-1.9.1 l10n-mozilla-1.9.1 firefox 3.5 and, on the former revision control system, cvs: cvs trunk (the default branch) -> firefox/thunderbird 3.0.x branch mozilla_1_8_branch -> firefox/thunderbird 2.0 branch mozilla cross-reference mozilla cross-reference is a web site mirroring the content of the hg server.
...specify the branch (1.9.2 for firefox 3.
6, 1.9.2.1 for firefox 3.
6.1, ...) attach the diff file to the bug: content type: patch mark the approval1.9.xxx with ?
PR_dtoa
syntax #include <prdtoa.h> prstatus pr_dtoa( prfloat
64 d, printn mode, printn ndigits, printn *decpt, printn *sign, char **rve, char *buf, prsize bufsz); parameters the function has these parameters: d the floating point number to be converted to a string.
...
6-9 same as modes 2 and 3, but do not try fast floating-point estimate (if applicable).
PR_htons
performs 1
6-bit conversion from host byte order to network byte order.
... syntax #include <prnetdb.h> pruint1
6 pr_htons(pruint1
6 conversion); parameter the function has the following parameter: conversion the 1
6-bit unsigned integer, in host byte order, to be converted.
PR_ntohs
performs 1
6-bit conversion from network byte order to host byte order.
... syntax #include <prnetdb.h> pruint1
6 pr_ntohs(pruint1
6 conversion); parameter the function has the following parameter: conversion the 1
6-bit unsigned integer, in network byte order, to be converted.
PR_strtod
syntax #include <prdtoa.h> prfloat
64 pr_strtod(const char *s00, char **se); parameters the function has these parameters: s00 the input string to be scanned.
... returns the result of the conversion is a prfloat
64 value equivalent to the input string.
NSPR API Reference
introduction to nspr nspr naming conventions nspr threads thread scheduling setting thread priorities preempting threads interrupting threads nspr thread synchronization locks and monitors condition variables nspr sample code nspr types calling convention types algebraic types 8-, 1
6-, and 32-bit integer types signed integers unsigned integers
64-bit integer types floating-point integer type native os integer types miscellaneous types size type pointer difference types boolean types status type for return values threads threading types and constants threading functions creating, joining, and identifying threads controlling thread priorities co...
...terval timing interval time type and constants interval functions date and time types and constants time parameter callback functions functions memory management operations memory allocation functions memory allocation macros string operations pl_strlen pl_strcpy pl_strdup pl_strfree floating point number to string conversion pr_strtod pr_dtoa pr_cnvtf long long (
64-bit) integers bitmaps formatted printing linked lists linked list types prclist linked list macros pr_init_clist pr_init_static_clist pr_append_link pr_insert_link pr_next_link pr_prev_link pr_remove_link pr_remove_and_init_link pr_insert_before pr_insert_after dynamic library linking library linking types prlibrary prstatic...
An overview of NSS Internals
data described as pem is a base
64 encoded presentation of der, usually wrapped between human readable begin/end lines.
... nss prefers the binary presentation, but is often capable to use base
64 or ascii presentations, especially when importing data from files.
JSS
as of april
6, 2018, jss has been migrated from mercurial on mozilla to git on github.
...note that java 1.5 claimed no fips compliance, and java 1.
6 or higher needs to be used.
JSS 4.4.0 Release Notes
support for ipv
6.
...s 4.4.0 this bugzilla query returns all the bugs fixed in nss 4.4.0: https://bugzilla.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 055aa3ce8a
61 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.
NSS 3.15.3.1 release notes
bug 94
6351 - misissued google certificates from dcssi new in nss 3.15.3.1 new functionality no new major functionality is introduced in this release.
...bugs fixed in nss 3.15.3.1 bug 94
6351 - misissued google certificates from dcssi 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.1&product=nss compatibility nss 3.15.3.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.5 release notes
the extension type value is 35
655, which may change when an official extension type value is assigned by iana.
... notable changes in nss 3.15.5 bug 950129: improve the ocsp fetching policy when verifying ocsp responses bug 9490
60: validate the iov input argument (an array of priovec structures) of ssl_writev (called via pr_writev).
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:97:8
6:
63:3a the following ca certificate was removed after discussion about it in the mozilla.dev.security.policy forum.
... cn=mcsholding test, o=mcsholding, c=eg sha1 fingerprint: e1:f3:59:1e:7
6:98:
65:c4:e4:47:ac:c3:7e:af:c9:e2:bf:e4:c5:7
6 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 libra...
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:57:3a:11:df:0e:d8:7e:d5:92:
65:22:ea:d0:5
6:d7:44:b3:23:71 cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı sha1 fingerprint: 79:98:a3:08:e1:4d:
65:85:e
6: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:57:fa:fd:38:3f:b0:3d:7b:7d:d7:b9:c
6 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:c
6: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:7
6:24:c1:8f:bd:f0:f0:ab:b
6:45:b8:f7:fe:d5:7a the following ca certificates were added cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h5 sha1 fingerprint: c4:18:f
6:4d:4
6:d1:df:00:3d:27:30:13:72:43:a9:12:11:c
6:75:fb cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h
6 sha1 fingerprint: 8a:5c:8c:ee:a5:03:e
6:05:5
6:ba:d8:1b:d4:f
6:c9:b0:ed:e5:2f:e0 ...
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-25
6 fingerprint: 2d:47:43:7d:e1:79:51:21:5a:12:f3:c5:8e:51:c7:29:a5:80:2
6:ef:1f:cc:0a:5f:b3:d9:dc:01:2f:
60:0d:19 cn = wellssecure public root certificate authority sha-25
6 fingerprint: a7:12:72:ae:aa:a3:cf:e8:72:7f:7f:b3:9f:0f:b3:d1:e5:42:
6e:90:
60:b0:
6e:e
6:f1:3e:9a:3c:58:33:cd:43 cn=tÜrktrust elektronik sertifika hizmet sağlayıcısı h
6 sha-25
6 fingerpri...
...nt: 8d:e7:8
6:55:e1:be:7f:78:47:80:0b:93:f
6:94:d2:1d:3
6:8c:c0:
6e:03:3e:7f:ab:04:bb:5e:b9:9d:a
6:b7:00 cn=microsec e-szigno root sha-25
6 fingerprint: 32:7a:3d:7
6:1a:ba:de:a0:34:eb:99:84:0
6:27:5c:b1:a4:77:
6e:fd:ae:2f:df:
6d:01:
68:ea:1c:4f:55:
67:d0 the following ca certificates were added: cn = d-trust root ca 3 2013 sha-25
6 fingerprint: a1:a8:
6d:04:12:1e:b8:7f:02:7c:
66:f5:33:03:c2:8e:57:39:f9:43:fc:84:b3:8a:d
6:af:00:90:35:dd:94:57 trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-25
6 fingerprint: 4
6:ed:c3:
68:90:4
6:d5:3a:45:3f:b3:10:4a:b8:0d:ca:ec:
65:8b:2
6:
60:ea:1
6:29:dd:7e:8
6:79:90:
64:87:1
6 trust flags: websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.
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-25
6 fingerprint: 2d:47:43:7d:e1:79:51:21:5a:12:f3:c5:8e:51:c7:29:a5:80:2
6:ef:1f:cc:0a:5f:b3:d9:dc:01:2f:
60:0d:19 cn = wellssecure public root certificate authority sha-25
6 fingerprint: a7:12:72:ae:aa:a3:cf:e8:72:7f:7f:b3:9f:0f:b3:d1:e5:42:
6e:90:
60:b0:
6e:e
6:f1:3e:9a:3c:58:33:cd:43 cn=tÜrktrust elektronik sertifika hizmet sağlayıcısı h
6 sha-25
6 fingerpri...
...nt: 8d:e7:8
6:55:e1:be:7f:78:47:80:0b:93:f
6:94:d2:1d:3
6:8c:c0:
6e:03:3e:7f:ab:04:bb:5e:b9:9d:a
6:b7:00 cn=microsec e-szigno root sha-25
6 fingerprint: 32:7a:3d:7
6:1a:ba:de:a0:34:eb:99:84:0
6:27:5c:b1:a4:77:
6e:fd:ae:2f:df:
6d:01:
68:ea:1c:4f:55:
67:d0 the following ca certificates were added: cn = d-trust root ca 3 2013 sha-25
6 fingerprint: a1:a8:
6d:04:12:1e:b8:7f:02:7c:
66:f5:33:03:c2:8e:57:39:f9:43:fc:84:b3:8a:d
6:af:00:90:35:dd:94:57 trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-25
6 fingerprint: 4
6:ed:c3:
68:90:4
6:d5:3a:45:3f:b3:10:4a:b8:0d:ca:ec:
65:8b:2
6:
60:ea:1
6:29:dd:7e:8
6:79:90:
64:87:1
6 trust flags: websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.
NSS 3.34.1 release notes
(bug 1418
678) cn = certum ca, o=unizeto sp.
... sha-25
6 fingerprint: d8:e0:fe:bc:1d:b2:e3:8d:00:94:0f:37:d2:7d:41:34:4d:99:3e:73:4b:99:d5:
65:
6d:97:78:d4:d8:14:3
6:24 removed entries from certdata.txt for actively distrusted certificates that have expired (bug 1409872).
NSS 3.37.1 release notes
bugs fixed in nss 3.37.1 bug 14
62303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error.
... bug 14
60
673 - fix a rare bug with pkcs#12 files.
NSS 3.37.3 release notes
bugs fixed in nss 3.37.3 bug 1459739 - fix build on armv
6/armv7 and other platforms.
... bug 14
61731 - fix crash on macos related to authentication tokens, e.g.
NSS 3.44.1 release notes
new in nss 3.44.1 new functionality 154
6229 - add ipsec ike support to softoken many new fips test cases (note: this has increased the source archive by approximately 50 megabytes for this release.) bugs fixed in nss 3.44.1 155433
6 - optimize away unneeded loop in mpi.c 1515342 - more thorough input checking (cve-2019-11729) 1540541 - don't unnecessarily strip leading 0's from key material during pkcs11 impor...
...t (cve-2019-11719) 151523
6 - add a sslkeylogfile enable/disable flag at build.sh 147380
6 - fix seckey_converttopublickey handling of non-rsa keys 154
6477 - updates to testing for fips validation 1552208 - prohibit use of rsassa-pkcs1-v1_5 algorithms in tls 1.3 (cve-2019-11727) 1551041 - unbreak build on gcc < 4.3 big-endian compatibility nss 3.44.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49.2 release notes
bugs fixed in nss 3.49.2 bug 1
60
6992 - cache the most recent pbkdf1 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts.
... bug 1
608327 - fix compilation problems with neon-specific code in freebl bug 1
608895 - 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 with all older nss 3.x shared libraries.
NSS Developer Tutorial
unfortunately, this can be a source of integer overflow bugs on
64-bit systems.
... universal character names are not permitted, as are wide character types (char1
6_t and char32_t).
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 .
...{ fprintf(stderr, "couldn't extract public key from cert testca (err %d)\n", pr_geterror()); goto cleanup; } modulus_len = seckey_publickeystrength(pubkey); fprintf(stderr, "public key modulus %d bytes\n", modulus_len); buf1 = (char *)malloc(modulus_len); buf2 = (char *)malloc(modulus_len); /* initialize buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= (i %2
6) + 'a'; } buf1[modulus_len-1] = '\0'; fprintf(stderr, "buffer being encrypted = \n%s\n", buf1); /* encrypt buf1, result will be in buf2 */ rv = pk11_pubencryptraw(pubkey, buf2, buf1, modulus_len, null); if (rv != secsuccess) { fprintf(stderr, "encrypt with public key failed (err %d)\n", pr_geterror()); goto cleanup; } pvtkey = pk11_findkeybyanycert(cert, nu...
NSS sources building testing
in case you built nss in
64 bits, you need to set the use_
64 environment variable to 1 to run the tests.
... if you get name resolution errors, try to disable ipv
6 on the loopback device.
nss tech note2
_findobjectsinit 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: ptemplate = 0xbffff410 1024[805ef10]: ulcount = 3 1024[805ef10]: cka_label = localhost.nyc.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 = 0x80
6d810 1024[805ef10]: ulmaxobjectcount = 1
6 1024[805ef10]: pulobjectcount = 0xbffff38c 1024[805ef10]: *pulobjectcount = 0x1 1024[805ef10]: phobject[0] = 0xf
6457d04 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 = 0xf
645...
...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 = 0xf
6457d04 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.
Build instructions
use_
64: on platforms that support both 32-bit and
64-bit abis, tells nss to build for the
64-bit abi.
... on unix platforms, except alpha/osf1, if you want a build for the system's
64-bit abi, set use_
64=1 in your environment.
FC_GetTokenInfo
model: model of the device, "nss 3", padded with spaces to 1
6 characters and not null-terminated.
... serialnumber: the device's serial number as a string, "0000000000000000", 1
6 characters and not null-terminated.
NSS tools : vfychain
options -a the following certfile is base
64 encoded -b yymmddhhmmz validate date (default: now) -d directory database directory -f enable cert fetching from aia url -o oid set policy oid for cert validation(format oid.1.2.3) -p use pkix library to validate certificate by calling: * cert_verifycertificate if specified once, * cert_pkixverifycert if specified twice and more.
... -r following certfile is raw binary der (default) -t following cert is explicitly trusted (overrides db trust) -u usage 0=ssl client, 1=ssl server, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient,
6=object signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose mode.
NSS tools : crlutil
list of possible algorithms: md2 | md4 | md5 | sha1 | sha25
6 | sha384 | sha512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
... reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliationchanged (3), superseded (4), cessationofoperation (5), certificatehold (
6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) * add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the certificate otherwise became invalid.
NSS tools : vfychain
options -a the following certfile is base
64 encoded -b yymmddhhmmz validate date (default: now) -d directory database directory -f enable cert fetching from aia url -o oid set policy oid for cert validation(format oid.1.2.3) -p use pkix library to validate certificate by calling: * cert_verifycertificate if specified once, * cert_pkixverify...
... -r following certfile is raw binary der (default) -t following cert is explicitly trusted (overrides db trust) -u usage 0=ssl client, 1=ssl server, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient,
6=object signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose mode.
The Necko HTTP module
references rfc 2
61
6 for the http/1.1 specification.
... rfc 2
617 for the http/1.1 basic and digest authentication specifications.
Small Footprint
on a recent build, the length of js.jar was
603,127 bytes corresponding to 1,171,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.
Using XPCOM Components
i added |pr_false| as a fourth parameter because the interface seems to require it: http://lxr.mozilla.org/mozilla/source/netwerk/cookie/public/nsicookiemanager.idl#
64 this problem also appears in the javascript version below, and i've added |false| as a fourth parameter there as well.
...i added |false| as a fourth parameter because the interface seems to require it: http://lxr.mozilla.org/mozilla/source/netwerk/cookie/public/nsicookiemanager.idl#
64 this problem also appears in the c++ version above, and i've added |pr_false| as a fourth parameter there as well.
XPCOM hashtable guide
hashtables should not be used for sets that need to be sorted; very small datasets (less than 12-1
6 items); data that does not need random access.
... key type hashkey class strings nsstringhashkey/nscstringhashkey integers nsuint32hashkey/nsuint
64hashkey pointers nsptrhashkey<t> owned interface pointers nsisupportshashkey reference-counted concrete classes nsrefptrhashkey there are a number of more esoteric hashkey classes in nshashkeys.h, and you can always roll your own if none of these fit your needs (make sure you're not duplicating an existing hashkey class though!) once you've determined w...
XPCOM Stream Guide
however, javascript strings contain 1
6-bit characters.
... */ store.init(
64,
64, null); var out = store.getoutputstream(0); netutil.asynccopy(baseinputstream, out, function(status) { if (status != components.results.ns_ok) return; /* due to a crash, we can't create input streams until the storage output stream * has some data in it.
Components.lastResult
// given that foo.bar is a method that might return // the success codes ns_ok, '5', and '
6' or some error code...
... break; case 5: // do something with 5 here break; case
6: // do something with
6 here break; default: // this was a success code we did not expect.
HOWTO
ader;1"] .getservice(components.interfaces.mozijssubscriptloader); loader.loadsubscript("chrome://myall/content/file.jsm"); see: http://mxr.mozilla.org/comm-central/...figutils.js#54 solution 2 append the following at the top of your js file which you want to run in xpcshell { // <https://developer.mozilla.org/en/xpconnect/xpcshell/howto> // <https://bugzilla.mozilla.org/show_bug.cgi?id=54
6628> let cc = components.classes; let ci = components.interfaces; // register resource://app/ uri let ios = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice); let reshandler = ios.getprotocolhandler("resource") .queryinterface(ci.nsiresprotocolhandler); let mozdir = cc["@mozilla.org/file/directory_service;1"] .getservice(ci.nsiproperties) .get(...
..."curprocd", ci.nsilocalfile); let mozdiruri = ios.newfileuri(mozdir); reshandler.setsubstitution("app", mozdiruri); // register chrome://* uris let cr = cc["@mozilla.org/chrome/chrome-registry;1"] .getservice(ci.nsichromeregistry); cr.checkfornewchrome(); } bug 54
6628 would make this unnecessary.
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="379,101,451,149" href="http://developer.mozilla.org/en/nsstring" shape="rect" title="nsstring"> <area alt="" coords="475,101,
635,149" href="http://developer.mozilla.org/en/nsdependentsubstring" shape="rect" title="nsdependentsubstring"> <area alt="" coords="151,197,257,245" href="http://developer.mozilla.org/en/nsfixedstring" shape="rect" title="nsfixedstring"> <area alt="" coords="284,197,39
6,245" href="http://developer.mozilla.org/en/nsxpidlstring" shape="rect" title="nsxpidlstring"> <area alt="" coords="420,197,559,24...
... shape="rect" title="nsdependentstring"> <area alt="" coords="583,197,727,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,437" href="http://developer.mozilla.org/en/ns_convertasciitoutf1
6" shape="rect" title="ns_convertasciitoutf1
6"> <area alt="" coords="21
6,389,400,437" href="http://developer.mozilla.org/en/ns_convertutf8toutf1
6" shape="rect" title="ns_convertutf8toutf1
6"> <area alt="" coords="277,293,405,341" href="http://developer.mozilla.org/en/nsadoptingstring" shape="rect" title="nsadoptingstring"> </map> method overview constructors beginreading endreading b...
nsAutoString
it is normally not a good idea to use this class on the heap, because it will allocate space which may be wasted if the string it contains is significantly smaller or any larger than
64 characters.
...ndwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print
64, print32) - source parameters print
64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source parameters double afloat beginreading prunichar* beginreading() const - source reading iterators nsreadingiterator<short unsigned int>& beginreading(nsreadingiterato...
nsCAutoString
it is normally not a good idea to use this class on the heap, because it will allocate space which may be wasted if the string it contains is significantly smaller or any larger than
64 characters.
... - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print
64, print32) - source parameters print
64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source parameters double afloat beginreading char* beginreading() const - source reading iterators nsreadingiterator<char>& beginreading(nsre...
RefPtr
bug 75
6640 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 75
6640 comment 1).
XPCOM glue classes
ns convertasciitoutf1
6 externalclass declarationns convertutf1
6toutf8 externalclass declarationns convertutf8toutf1
6 externalclass declarationns lossyconvertutf1
6toascii externalclass declarationns_convertasciitoutf1
6class declarationns_convertutf1
6toutf8class declarationns_convertutf8toutf1
6class declarationns_lossyconvertutf1
6toasciiclass declarationns_overridens_override is a macro which allows c++ code in mozilla to specify that a method is intended to override a base class method.
...late class implementing an object that takes a strong reference to a reference-counted resource that must be released, typically on destruction of the object.</t>nscstringclass declarationnscstring externalclass declarationnscstringcontainer (external)class declaration nscstringencodingthe nscstringencoding enumeration describes the set of character encodings understood by the ns_cstringtoutf1
6 and ns_utf1
6tocstring functions.nsdependentcstringclass declarationnsdependentcstring externalclass declarationnsdependentcsubstringclass declarationnsdependentcsubstring externalclass declarationnsdependentstringclass declarationnsdependentstring externalclass declarationnsdependentsubstringclass declarationnsdependentsubstring externalclass declarationnsembedcstringthe nsembedcstring concrete c...
inIDOMUtils
value state 1 :active 2 :focus 4 :hover 8 :-moz-drag-over 1
6 :target 1<<29 :-moz-focusring methods getbindingurls() returns an array of nsiuri objects representing the current xml binding for the specified element.
... return value a bitmask of one of the
6 supported content state flags specified in content state flags.
mozIColorAnalyzer
toolkit/components/places/mozicoloranalyzer.idlscriptable provides methods to analyze colors in an image 1.0
66 introduced gecko 17.0 inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) method overview void findrepresentativecolor(in nsiuri imageuri, in mozirepresentativecolorcallback callback); methods findrepresentativecolor() given an image uri, find the most representative color for that image based on the frequency of each color.
... remarks below are some images with the result of findrepresentativecolor: image representative color 0xb28d3a 0x502e1e 0x53ba3f 0x00a400 see also mozirepresentativecolorcallback bug
634139 ...
mozIJSSubScriptLoader
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 28 (firefox 28 / thunderbird 28 / seamonkey 2.25 / firefox os 1.3) implemented by: @mozilla.org/moz/jssubscript-loader;1.
...it must be a local chrome:, resource: or file: url (see bug 307
68
6 and bug 41835
6).
mozIPlacesAutoComplete
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) method overview void registeropenpage(in nsiuri auri); void unregisteropenpage(in nsiuri auri); constants constant value description match_anywhere 0 match anywhere in each searchable term.
... behavior_javascript 1 <<
6 search javascript: urls.
mozIStorageConnection
1.0
68 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) for a general overview on how to use this interface, see storage.
... sqlite database page size constant constant value description default_page_size 327
68 the default size for sqlite database pages.
nsIXMLHttpRequest
obsolete since gecko
60 (firefox
60 / thunderbird
60 / seamonkey 2.57)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/eb9895ade1bd
6627e054429d1e18b57
6?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(...
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 << 1
6 use_jsstub_for_addproperty 1 << 17 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 << 2
6 dont_reflect_interface_names 1 << 27 want_equality 1 << 28 want_outer_object 1 << 29 want_inner_object 1 << 30 rese...
nsIXULAppInfo
1.0
66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) in xulrunner applications nsixulappinfo obtains app-specific information from application.ini.
...attributes attribute type description appbuildid acstring the application's build id/date, for example "2004051
604".
nsIZipWriter
1.0
66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) once all the operations you wish to perform are added to the queue, a call to processqueue() will perform the operations in the order they were added to the queue.
... compression_default
6 use the default compression method when adding the file to the archive.
nsMsgRuleActionType
defined in comm-central/ mailnews/ base/ search/ public/ nsmsgfiltercore.idl typedef long nsmsgruleactiontype; [scriptable, uuid(59af7
69
6-1e28-4
642-a400-fa327ae0b8d8)] 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=1
6; const long addtag=17; const long killsubthread=18; const long markunread=19; }; ...
nsMsgSearchOp
defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl typedef long nsmsgsearchopvalue; [scriptable, uuid(91
60b19
6-
6fcb-4eba-aaaf-
6c80
6c4ee420)] interface nsmsgsearchop { const nsmsgsearchopvalue contains = 0; /* for text attributes */ 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.
...archopvalue soundslike = 11; /* for ldap phoenetic 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 = 1
6; const nsmsgsearchopvalue isntinab = 17; 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 */ }; ...
nsMsgSearchScope
defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl [scriptable, uuid(
6e893e59-af98-4f
62-a32
6-0f00f32147cd)] interface nsmsgsearchscope { const nsmsgsearchscopevalue offlinemail = 0; const nsmsgsearchscopevalue offlinemailfilter = 1; const nsmsgsearchscopevalue onlinemail = 2; const nsmsgsearchscopevalue onlinemailfilter = 3; /// offline news, base table, no body or junk const nsmsgsearchscopevalue localnews = 4; const nsmsgsearchscopevalue news = 5; const nsmsgsearchscopevalue newsex =
6; const nsmsgsearchscopevalue ldap = 7; const nsmsgsearchscopevalue localab = 8; const nsmsgsearchscopevalue allsearchablegroups = 9; const nsmsgsearchscopevalue newsfilter = 10; const nsmsgsearchscopevalue localaband = 11; const nsmsgsearchscop...
...evalue ldapand = 12; // imap and news, searched using local headers const nsmsgsearchscopevalue onlinemanual = 13; /// local news + junk const nsmsgsearchscopevalue localnewsjunk = 14; /// local news + body const nsmsgsearchscopevalue localnewsbody = 15; /// local news + junk + body const nsmsgsearchscopevalue localnewsjunkbody = 1
6; }; ...
XPCOM string functions
this is a low-level api.ns_cstringtoutf1
6the ns_cstringtoutf1
6 function converts the value of a nsacstring instance to utf-1
6 and stores the result in a nsastring instance.
...this is a low-level api.ns_utf1
6tocstringthe ns_utf1
6tocstring function converts the value of a nsastring instance from utf-1
6 to the specified multi-byte encoding and stores the result in a nsacstring instance.
nsMsgNavigationType
firstunreadmessage
6 go to the first unread message in the view.
... nextunreadthread 10 nextunreadfolder 11 nextfolder 12 readmore 13 back 15 go back to the previous visited message forward 1
6 go forward to the previous visited message firstflagged 17 nextflagged 18 previousflagged 19 firstnew 20 editundo 21 editredo 22 togglesubthreadkilled 23 ...
Setting HTTP request headers
(in our example, our made up http header is x-hello and not hello because we correctly added the x- in front of our name.) no longer the case: http://tools.ietf.org/html/rfc
6648 notifications the question that may be coming to your mind right now is, how do you get the nsihttpchannel when an http request is made.
...lasses["@mozilla.org/categorymanager;1"].getservice(components.interfaces.nsicategorymanager); catmgr.addcategoryentry("app-startup", this.myname, this.myprogid, true, true); }, getclassobject: function (compmgr, cid, iid) { log("----------------------------> getclassobject"); return this.myfactory; }, mycid: components.id("{9cf5f3df-2505-42dd-9094-c1
631bd1be1c}"), myprogid: "@dougt/myhttplistener;1", myname: "simple http listener", myfactory: { queryinterface: function (aiid) { if (!aiid.equals(components.interfaces.nsisupports) && !aiid.equals(components.interfaces.nsifactory)) throw components.results.ns_error_no_interface; return this; }, creat...
Storage
binding multiple sets of parameters starting in gecko 1.9.2 (firefox 3.
6), there's a new, more convenient way to bind multiple sets of parameters at once prior to executing your statement asynchronously.
...due to bug
62
6193, locked databases get unlocked when you call this.
Getting Started Guide
use do_queryinterface whenever you assign in a pointer to a xpcom interface of a different type, even if that type happens to derive from the base type of the nscomptr comparison
6.
... you may not assign in a pointer to a different interface type; you must first query it to the right type (see, e.g., comparison
6 and the surrounding discussion).
Using the clipboard
if (source instanceof ci.nsidomwindow) // note: in gecko versions >1
6, you can import the privatebrowsingutils.jsm module // and use privatebrowsingutils.privacycontextfromwindow(sourcewindow) instead source = source.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation); res.init(source); } return res; } here, the string "text to copy" will be copied but you can replace this...
...now that we have the object to copy, a transferring object needs to be created: var str = "text to copy"; var trans = transferable(sourcewindow); trans.adddataflavor("text/unicode"); // we multiply the length of the string by 2, since it's stored in 2-byte utf-1
6 // format internally.
XPCOM ABI
abi naming each abi is named with a string [target_xpcom_abi] of the following format: {cpu_arch}-{target_compiler_abi} {cpu_arch} [platforms] represents the cpu architecture and may be either: x8
6 - i38
6 and higher series (including x8
6-
64 cpus in 32-bit mode) ppc - powerpc series alpha - alpha series x8
6_
64 - amd
64/emt
64 series in
64-bit mode (32-bit mode is still considered x8
6) sparc - sparc series ia
64 - itanium series {target_compiler_abi}[platforms] represents the compiler abi and may be either: msvc - microsoft visual c++ n32 - irix
6 c++ compiler gcc2 - gnu c++ compiler...
... 2.x gcc3 - gnu c++ compiler 3.x or 4.x sunc - sun c++ compiler ibmc - ibm c++ compiler for example: firefox built with the gnu c++ compiler 4.0.0 for the intel pentium processor would have xpcom abi of x8
6-gcc3 the xpcom abi string can be retrieved programmatically by using the nsixulruntime interface.
XPCOM tasks
see bug 2588
6.
...see bug 1
67
63 p3 improve the performance of the registry.
Rich output - Firefox Developer Tools
click on the triangle, and the object will be expanded to show its contents: starting with firefox
67 (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: 1552404478137 } 1: object { status: "in progress", description: "refactor styles", datecreated: 15524044931
69 } 2: object { status: "to do", description: "create feedback form", datecreated: 1552404512
630 } 3: object { status: "to do", description: "normalize table", datecreated: 1552404533790 } length: 4 <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the...
AbsoluteOrientationSensor - Web APIs
examples basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an absoluteorientationsensor with a frequency of
60 times a second.
... const options = { frequency:
60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
AbstractRange - 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
66" y="30" font-size="12px" font-family="cons...
...the code to do that looks like the following: let paranode = document.queryselector("p"); let paratextnode = paranode.childnodes[1]; let range = document.createrange(); range.setstart(paratextnode,
6); range.setend(paratextnode, paratextnode.length-1); let fragment = range.clonecontents(); document.body.appendchild(fragment); first we get references to the paragraph node itelf as well as to the second child node within the paragraph.
AddressErrors - Web APIs
let supportedhandlers = [ { supportedmethods: "basic-card", data: { supportednetworks: ["visa", "mastercard", "amex", "discover"], supportedtypes: ["credit", "debit"] } } ]; let defaultpaymentdetails = { total: {label: 'donation', amount: {currency: 'usd', value: '
65.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '
65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; supportedhandlers describes the supported payment handlers and the details for those.
... <p>donate us $
65 to our worthwhile cause and we will send you a totally not-useless gift as a token of our thanks!</p> <button id="pay">donate now</button> result the final product is below.
AnalyserNode.AnalyserNode() - Web APIs
uctorchrome full support 55edge full support ≤79firefox full support 53ie no support noopera full support 42safari full support
6webview android full support 55chrome android full support 55firefox android full support 53opera android full support 42safari ios full support
6samsung internet android ...
... full support
6.0legend full support full support no support no support ...
AnalyserNode.frequencyBinCount - Web APIs
therefore, it will be one of 1
6, 32,
64, 128, 25
6, 512, 1024, 2048, 409
6, 8192, and 1
6384.
... analyser.fftsize = 25
6; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height); var barwidth = (width / bufferlength) * ...
AnalyserNode - Web APIs
number of inputs 1 number of outputs 1 (but may be left unconnected) channel count mode "max" channel count 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="5
6" y="30" font-size="12px" font-family="consolas,...
... 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="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="19
6" y="30" font-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"...
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="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><l...
...ine x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target="_top"><rect x="11
6" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="18
6" 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.
AudioBuffer() - Web APIs
user agents are required to support sample rates from 8,000 hz to 9
6,000 hz (but are allowed to go farther outside this range).
... 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 ...
AudioParam.maxValue - Web APIs
the default value of maxvalue is the maximum positive single-precision floating-point value (+340,282,34
6,
638,528,859,811,704,183,484,51
6,925,440).
... example const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); console.log(gainnode.gain.maxvalue); // 3.4028234
66385288
6e38 specifications specification status comment web audio apithe definition of 'maxvalue' in that specification.
AudioParam.minValue - Web APIs
the default value of minvalue is the minimum negative single-precision floating-point value (-340,282,34
6,
638,528,859,811,704,183,484,51
6,925,440).
... example const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); console.log(gainnode.gain.minvalue); // -3.4028234
66385288
6e38 specifications specification status comment web audio apithe definition of 'minvalue' in that specification.
AudioProcessingEvent - Web APIs
le, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 409
6 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(409
6, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; ...
...ains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(channel); // loop through the 409
6 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); s...
AudioTrack - Web APIs
the language is specified as a bcp 47 (rfc 5
64
6) language code, such as "en-us" or "pt-br".
... tracks.foreach(function(track) { if (track.language === userlanguage) { track.enabled = true; } else { track.enabled = false; } }); the language is in standard (rfc 5
64
6) format.
Background Tasks API - Web APIs
css content body { font-family: "open sans", "lucida grande", "arial", sans-serif; font-size: 1
6px; } .logbox { margin-top: 1
6px; width: 400px; height:500px; border-radius:
6px; border: 1px solid black; box-shadow: 4px 4px 2px black; } .logheader { margin: 0; padding: 0
6px 4px; height: 22px; background-color: lightblue; border-bottom: 1px solid black; border-radius:
6px
6px 0 0; } #log { font: 12px "courier", monospace; padding:
6px; overflow: auto; overfl...
...ow-y: scroll; width: 388px; height: 4
60px; } .container { width: 400px; padding:
6px; border-radius:
6px; border: 1px solid black; box-shadow: 4px 4px 2px black; display: block; overflow: auto; } .label { display: inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; margin-top: 0; color: white; background-color: darkgreen; } #progress { width: 100%; padding-top:
6px; } javascript content now that the document structure is defined, construct the javascript code that will do the work.
BaseAudioContext.createBuffer() - Web APIs
all browsers must support sample rates in at least the range 8,000 hz to 9
6,000 hz.
... note: audio resampling is very similar to image resizing: say you've got a 1
6 x 1
6 image, but you want it to fill a 32x32 area: you resize (resample) it.
BaseAudioContext.createConstantSource() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateconstantsourcechrome full support 5
6edge full support ≤79firefox full support 53ie no support noopera full support 43safari no support nowebview android full support ...
... 5
6chrome android full support 5
6firefox android full support 53opera android full support 43safari ios no support nosamsung internet android full support
6.0legend full support full support no support no support ...
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="5
6" 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="1
60" height="50" fill="#f4f7f8" 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 creat...
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 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 57firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.billingAddress - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbillingaddresschrome no support noedge no support ≤18 — 79firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 57firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.cardNumber - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardnumberchrome no support noedge no support ≤18 — 79firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 57firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.cardSecurityCode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardsecuritycodechrome no support noedge no support ≤18 — 79firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 57firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.cardholderName - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardholdernamechrome no support noedge no support ≤18 — 79firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 57firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.expiryMonth - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpirymonthchrome no support noedge no support ≤18 — 79firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 57firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.expiryYear - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpiryyearchrome no support noedge no support ≤18 — 79firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support 57firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BeforeInstallPromptEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; 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="7
6,25 8
6,20 8
6,30 7
6,25" st...
...roke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="11
6" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="23
6" 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="7
6,25 8
6,20 8
6,30 7
6,2...
...5" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="11
6" y="1" width="170" height="50" fill="#f4f7f8" 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", functi...
productID - Web APIs
the bluetoothdevice.productid read-only property returns the 1
6-bit product id field in the pnp_id characteristic in the device_information service.
... syntax var productid = instanceofbluetoothdevice.productid returns the 1
6-bit product id field.
productVersion - Web APIs
the bluetoothdevice.productversion read-only property returns the 1
6-bit product version field in the pnp_id characteristic in the device_information service.
... syntax var productversion = instanceofbluetoothdevice.productversion returns the 1
6-bit product version field.
vendorID - Web APIs
the bluetoothdevice.vendorid read-only property returns the 1
6-bit vendor id field in the pnp_id characteristic in the device_information service.
... syntax var vendorid = instanceofbluetoothdevice.vendorid returns the the 1
6-bit vendor id field.
BroadcastChannel: message event - Web APIs
sender <h1>sender</h1> <label for="message">type a message to broadcast:</label><br/> <textarea id="message" name="message" rows="1" cols="40">hello</textarea> <button id="broadcast-message" type="button">broadcast message</button> body { border: 1px solid black; padding: .5rem; height: 150px; font-family: "fira sans", sans-serif; } h1 { font: 1.
6em "fira sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton...
....addeventlistener('click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.
6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.
6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'...
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="5
6" 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="1
60" height="50" fill="#f4f7f8" 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.
BudgetState.budgetAt - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetat experimentaldeprecatednon-standardchrome full support
60edge full support ≤79firefox ?
... webview android no support nochrome android full support
60firefox android ?
BudgetState.time - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettime experimentaldeprecatednon-standardchrome full support
60edge full support ≤79firefox ?
... webview android no support nochrome android full support
60firefox android ?
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="7
6,25 8
6,...
...20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="11
6" y="1" width="190" height="50" fill="#f4f7f8" 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,mona...
...o,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="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="20
6" 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.
CSS Painting API - Web APIs
width + (start * 10) + 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 1
6</li> <li>item 17</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/hil...
...ite.js'); then we can use the <image> with the css paint() function: li { --boxcolor: hsla(55, 90%,
60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%,
60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%,
60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
the first control point is placed at (120, 1
60), and the second at (180, 10).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,1
60, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.ellipse() - Web APIs
to make a full ellipse, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (3
60°).
... 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 defin...
CanvasRenderingContext2D.lineDashOffset - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([4, 1
6]); // dashed line with no offset ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // dashed line with offset of 4 ctx.beginpath(); ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result the line with a dash offset is drawn in red.
... html <canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(10, 10, 100, 100); } function march() { offset++; if (offset > 1
6) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linedashoffset' in that specification.
CanvasRenderingContext2D.stroke() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // first sub-path ctx.linewidth = 2
6; ctx.strokestyle = 'orange'; ctx.moveto(20, 20); ctx.lineto(1
60, 20); ctx.stroke(); // second sub-path ctx.linewidth = 14; ctx.strokestyle = 'green'; ctx.moveto(20, 80); ctx.lineto(220, 80); ctx.stroke(); // third sub-path ctx.linewidth = 4; ctx.strokestyle = 'pink'; ctx.moveto(20, 140); ctx.lineto(280, 140); ctx.stroke(); result stroking and filling if you want to both stroke and fill a ...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 1
6; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroke' in that specification.
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.
... non-standard apis blink and webkit most of these apis are deprecated and were removed shortly after chrome 3
6.
Manipulating video using canvas - Web APIs
ge: url(media/foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="1
60" height="9
6"></canvas> <canvas id="c2" width="1
60" height="9
6"></canvas> </div> <script type="text/javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this document establishes two canvas elements, with the ids c1 and c2.
... the for loop that begins on line
6 scans through the frame's pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from foo.png.
Transformations - Web APIs
make changes to the settings ctx.fillrect(15, 15, 120, 120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fillstyle = '#fff'; // make changes to the settings ctx.globalalpha = 0.5; ctx.fillrect(30, 30, 90, 90); // draw a rectangle with new settings ctx.restore(); // restore previous state ctx.fillrect(45, 45,
60,
60); // draw a rectangle with restored settings ctx.restore(); // restore original state ctx.fillrect(
60,
60, 30, 30); // draw a rectangle with restored settings } <canvas id="canvas" width="150" height="150"></canvas> draw(); the first step is to draw a large rectangle with the default settings.
...this is the same as calling: ctx.settransform(1, 0, 0, 1, 0, 0); example for transform and settransform function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var sin = math.sin(math.pi /
6); var cos = math.cos(math.pi /
6); ctx.translate(100, 100); var c = 0; for (var i = 0; i <= 12; i++) { c = math.floor(255 / 12 * i); ctx.fillstyle = 'rgb(' + c + ', ' + c + ', ' + c + ')'; ctx.fillrect(0, 0, 100, 10); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.settransform(-1, 0, 0, 1, 100, 100); ctx.fillstyle = 'rgba(255, 128, 255, 0.5)'; ctx.fillrect(0, 50,...
ChannelSplitterNode - Web APIs
in the case that no value is given, it will default to
6.
... number of inputs 1 number of outputs variable; default to
6.
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="5
6" y="30" font-size="12px" font-family="consolas,mona...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="2
66" y="1" width="130" height="50" fill="#f4f7f8" 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" a...
CloseEvent - Web APIs
100
6 abnormal closure reserved.
... 101
6–1999 reserved for future use by the websocket standard.
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="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1...
...="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="11
6" 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="1
60" height="50" fill="#f4f7f8" 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...
console.assert() - Web APIs
firefox v
60.0.2): // assertion failed: the word is foo // incorrect output in some browsers // (e.g.
... chrome v
67.0.339
6.87): // assertion failed: the word is %s foo see outputting text to the console in the documentation of console for further details.
Console.group() - Web APIs
using groups in the console requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 2.
6) you can use nested groups to help organize your output by visually associating related messages.
...see bug 10883
60.
Crypto.getRandomValues() - Web APIs
syntax typedarray = cryptoobj.getrandomvalues(typedarray); parameters typedarray an integer-based typedarray, that is an int8array, a uint8array, an int1
6array, a uint1
6array, an int32array, or a uint32array.
... domexception (name: quotaexceedederror) the requested length exceeds
65,53
6 bytes.
DOMImplementation.createHTMLDocument() - Web APIs
lines 5 and
6 create a new paragraph element with some simple content, and then lines 8–12 handle inserting the new paragraph into the new document.
... line 1
6 pulls the contentdocument of the frame; this is the document into which we'll be injecting the new content.
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="7
6" y="30" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 1
61,20 1
61,30 151,25" stroke="#d4dde4" fill="none"/><line x1="1
61" 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="#f4f7f8" 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.
DeviceOrientationEvent - Web APIs
deviceorientationevent.alpha read only a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 3
60.
... deviceorientationevent.webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 3
60.
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 ...
...to change preferences in firefox, visit about:config.ie no support noopera full support 47safari 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 ...
Document.lastModified - Web APIs
alert(document.lastmodified); // returns: tuesday, december 1
6, 2017 11:09:42 transforming lastmodified into a date object this example transforms lastmodified into a date object.
...(see: bug 43
63 – document.lastmodified returns date in utc time, but should return it in local time) if you want to know whether an external page has changed, please read this paragraph about the xmlhttprequest() api.
Document.xmlEncoding - Web APIs
if the xml declaration states: <?xml version="1.0" encoding="utf-1
6"?> ...the result should be "utf-1
6".
... however, firefox 3.0 includes information on endianness (e.g., utf-1
6be for big endian encoding), and while this extra information is removed as of firefox 3.1b3, firefox 3.1b3 is still consulting the file's encoding, rather than the xml declaration as the spec defines it ("an attribute specifying, as part of the xml declaration, the encoding of this document.").
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="5
6" y="30" font-size="12px" font-family="consolas,...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="2
66" y="1" width="1
60" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="34
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
DocumentOrShadowRoot.getSelection() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetselection experimentalchrome full support 53edge full support 12firefox full support
63ie full support yesopera full support 40safari full support yeswebview android full support 53chrome android full support 53firefox android full support ...
...
63opera android full support 41safari ios full support yessamsung internet android full support
6.0legend full support full supportexperimental.
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="5
6" 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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="2
66" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="32
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">docu...
Examples of web and XML development using the DOM - Web APIs
ev.stoppropagation(); alert("event propagation halted."); } function load() { elem = document.getelementbyid("tbl1"); elem.addeventlistener("click", stopevent, false); } </script> </head> <body onload="load();"> <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(173, 21
6, 230)").
..._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(173, 21
6, 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: displ...
EXT_color_buffer_float - Web APIs
extended methods the following sized formats become color-renderable: gl.r1
6f, gl.rg1
6f, gl.rgba1
6f, gl.r32f, gl.rg32f, gl.rgba32f, gl.r11f_g11f_b10f.
... var ext = gl.getextension('ext_color_buffer_float'); gl.renderbufferstorage(gl.renderbuffer, gl.rgba1
6f, 25
6, 25
6); specifications specification status comment ext_color_buffer_floatthe definition of 'ext_color_buffer_float' in that specification.
EXT_disjoint_timer_query - Web APIs
types this extension exposes a new type: gluint
64ext unsigned
64-bit integer number.
... ext.query_result_ext a gluint
64ext containing the query result.
Element.scroll() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollchrome full support 45edge full support 79firefox full support 3
6ie no support noopera full support 32safari full support 10webview android full support 45chrome android full support 45firefox android full support ...
... 3
6opera 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.scrollLeftMax - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollleftmax non-standardchrome no support noedge no support nofirefox full support 1
6ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android full support ...
... 1
6opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportnon-standard.
Element.scrollTo() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrolltochrome full support 45edge full support 79firefox full support 3
6ie no support noopera full support 32safari full support 10webview android full support 45chrome android full support 45firefox android full support ...
... 3
6opera 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.slot - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetslotchrome full support 53edge full support ≤79firefox full support
63ie ?
... opera full support yessafari full support 10webview android full support 53chrome android full support 53firefox android full support
63opera android full support yessafari ios full support yessamsung internet android full support
6.0legend full support full support compatibility unknown ...
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="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6...
..." y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="11
6" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="1
66" 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.
EventSource - Web APIs
when not used over http/2, sse suffers from a limitation to the maximum number of open connections, which can be specially painful when opening various tabs as the limit is per browser and set to a very low number (
6).
...this limit is per browser + domain, so that means that you can open
6 sse connections across all of the tabs to www.example1.com and another
6 sse connections to www.example2.com.
EventTarget.addEventListener() - Web APIs
href="https://developer.mozilla.org/" target="_blank"> inner2, none-passive & preventdefault(not open new page) </a> </div> </div> css .outer, .middle, .inner1, .inner2 { display: block; width: 520px; padding: 15px; margin: 15px; text-decoration: none; } .outer { border: 1px solid red; color: red; } .middle { border: 1px solid green; color: green; width: 4
60px; } .inner1, .inner2 { border: 1px solid purple; color: purple; width: 400px; } javascript const outer = document.queryselector('.outer'); const middle = document.queryselector('.middle'); const inner1 = document.queryselector('.inner1'); const inner2 = document.queryselector('.inner2'); const capture = { capture : true }; const nonecapture = { capture : false }; const once = {...
... break; case
6: // some code here...
Fetch API - Web APIs
the following browsers shipped and outdated native fetch, and were updated in these versions: firefox version
61.0b13.
... chrome version
68.
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="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/file" target="_top"><rect x="11
6" y="1" width="75" height="50" fill="#f4f7f8" 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.
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="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/>...
...<line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="11
6" 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="#f4f7f8" 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 47safari 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 ...
Using FormData Objects - Web APIs
creating a formdata object from scratch you can build a formdata object yourself, instantiating it then appending fields to it by calling its append() method, like this: var formdata = new formdata(); formdata.append("username", "groucho"); formdata.append("accountnum", 12345
6); // number 12345
6 is immediately converted to a string "12345
6" // html file input, chosen by user formdata.append("userfile", fileinputelement.files[0]); // javascript file-like object var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
...simply include an <input> element of type file in your <form>: <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="
64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('submit...
Using the Frame Timing API - Web APIs
a frame rate of
60 fps (frames per second) for a
60 hz refresh rate is a common target for a good responsive user experience.
... this means the browser should process a frame in about 1
6.7ms.
Frame Timing API - Web APIs
a frame rate of
60 fps (frames per second) for a
60 hz refresh rate is a common target for a good responsive user experience.
... this means the browser should process a frame in about 1
6.7 ms.
HTMLCanvasElement.toDataURL() - Web APIs
the returned image is in a resolution of 9
6 dpi.
... examples given this <canvas> element: <canvas id="canvas" width="5" height="5"></canvas> you can get a data-url of the canvas with the following lines: var canvas = document.getelementbyid('canvas'); var dataurl = canvas.todataurl(); console.log(dataurl); // "data:image/png;base
64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnby // blaaaadeleqvqimwngobmaaabpaafei8araaaaaelftksuqmcc" setting image quality with jpegs var fullquality = canvas.todataurl('image/jpeg', 1.0); // data:image/jpeg;base
64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/
6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically...
HTMLElement.innerText - Web APIs
html <h3>source element:</h3> <p id="source"> <style>#source { color: red; } #text { text-transform: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentoutput" rows="
6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="innertextoutput" rows="
6" cols="30" readonly>...</textarea> javascript const source = document.getelementbyid("source"); const textcontentoutput = document.getelementbyid("textcontentoutput"); const innertextoutput = document.getelementbyid("innertextoutput"); textcontentoutput.value = source.textcontent; innertexto...
...see whatwg/html#4
65 and whatwg/compat#5 for history.
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="consol...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 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="2
60" height="50" fill="#f4f7f8" 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.
HTMLIFrameElement.csp - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcsp experimentalchrome full support
61edge full support ≤79firefox ?
... webview android full support
61chrome android full support
61firefox android ?
HTMLImageElement.decoding - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdecodingchrome full support
65edge full support ≤79firefox full support
63ie no support noopera full support yessafari full support 11.1webview android full support ...
...
65chrome android full support
65firefox android full support
63opera android ?
HTMLImageElement.sizes - Web APIs
award-winning stuff, i'm sure.</p> <img src="/files/1
6870/new-york-skyline-wide.jpg" srcset="/files/1
6870/new-york-skyline-wide.jpg 3724w, /files/1
68
69/new-york-skyline-4by3.jpg 19
61w, /files/1
6871/new-york-skyline-tall.jpg 10
60w" 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 ...
...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: 1
6px "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 o...
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 9
6 dpi displays).
... examples specifying a single image html <img src="https://udn.realityripple.com/samples/d
6/7ab3
6d79bb.jpg" width="1
60" 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.
HTMLInputElement.stepDown() - Web APIs
given <input id="mytime" type="time" max="17:00" step="900" value="17:00">, invoking mytime.step(3) will change the value to 1
6:15, decrementing the time by 3 * 900, or 45 minutes.
... mytime.step(), with no parameter, would have resulted in 1
6:45, as n defaults to 1.
HTMLLinkElement.as - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetas experimentalchrome full support 50edge full support 17firefox full support 5
6ie full support yesopera full support 37safari full support yeswebview android full support 50chrome android full support 50firefox android full support ...
... 5
6opera android full support 37safari ios full support yessamsung internet android full support 5.0legend full support full supportexperimental.
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="consol...
...ll="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="28
6" 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-on...
HTMLOrForeignElement.nonce - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnoncechrome full support
61edge full support 79firefox full support 75ie no support noopera full support yessafari full support 10webview android full support ...
...
61chrome android full support
61firefox android no support noopera android full support yessafari ios full support 10samsung internet android full support 8.0legend full support full support no support no support ...
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 ...
HTMLSlotElement.assignedElements() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedelements experimentalchrome full support
65edge full support 79firefox full support
66ie no support noopera full support yessafari ?
... webview android full support
65chrome android full support
65firefox android full support
66opera android full support yessafari ios ?
HTMLTimeElement.dateTime - Web APIs
valid yearless date string mm-dd 11-12 valid time string hh:mm hh:mm:ss hh:mm:ss.mmm 23:59 12:15:47 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 1972-07-25 13:43:07 1941-03-15 07:0
6:23.
678 2013-12-25t11:12 1972-07-25t13:43:07 1941-03-15t07:0
6:23.
678 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 1972-07-25 13...
...:43:07+04:30 1941-03-15 07:0
6:23.
678z 2013-12-25t11:12-08:00 valid week string yyyy-www 2013-w4
6 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 p12dt7h12m13s p12dt7h12m13.3s p12dt7h12m13.45s p12dt7h12m13.455s pt7h12m13s pt7h12m13.2s pt7h12m13.5
6s pt7h12m13.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...
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="mid...
...dle">event</text></a><polyline points="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="11
6" y="1" width="150" height="50" fill="#f4f7f8" 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.
History.scrollRestoration - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollrestorationchrome full support 4
6edge full support 79firefox full support 4
6ie no support noopera full support 33safari full support yeswebview android no support ...
...nochrome android full support 4
6firefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support 5.0legend full support full support no support no support ...
IDBCursor.request - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestchrome full support 7
6edge full support 79firefox full support 77ie no support noopera full support
63safari ?
... webview android full support 7
6chrome android full support 7
6firefox 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 117
61
65.) constrainterror an object store with the given name (based on case-sensitive comparison) already exists in the connected database.
...samsung internetcreateobjectstorechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
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 117
61
65.) notfounderror you are trying to delete an object store that does not exist.
...samsung internetdeleteobjectstorechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
IDBDatabase.version - Web APIs
the version property of the idbdatabase interface is a
64-bit integer that contains the version of the connected database.
...ari on iossamsung internetversionchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
databases - Web APIs
d 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 934
640.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 934
640.opera android full support yessafari ios no support nosamsung internet android full support 10.0legend full support full support no support no supportexperimental.
IDBFactory.deleteDatabase() - Web APIs
optionsnon-standard in gecko, since version 2
6, you can include a non-standard optional storage parameter that specifies whether you want to delete a permanent (the default value) indexeddb, or an indexeddb in temporary storage (aka shared pool.) return value a idbopendbrequest on which subsequent events related to this request are fired.
...iossamsung internetdeletedatabasechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
IDBFactory.open() - Web APIs
experimental gecko options object options (version and storage) optional in gecko, since version 2
6, you can include a non-standard options object as a parameter of idbfactory.open that contains the version number of the database, plus a storage value that specifies whether you want to use persistent or temporary storage.
...safari on iossamsung internetopenchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
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 117
61
65.) 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.
...on iossamsung internetcreateindexchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
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 117
61
65.) notfounderror occurs if there is no index with the given name (case-sensitive) in the database.
...on iossamsung internetdeleteindexchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full 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="5
6" y="30" font-size="12px" font-family="consolas,monac...
...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="#fff" 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><polyline points="251,25 2
61,20 2
61,30 251,25" stroke="#d4dde4" fill="none"/><line x1="2
61" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="1
60" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" align...
IDBTransaction.commit() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcommitchrome full support 7
6edge full support 79firefox full support 74ie no support noopera full support
63safari no support nowebview android full support 7...
...
6chrome android full support 7
6firefox 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 ...
IDBVersionChangeEvent.newVersion - Web APIs
syntax var newversion = idbversionchangeevent.newversion value a
64-bit integer.
... on iossamsung internetnewversionchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
IDBVersionChangeEvent.oldVersion - Web APIs
syntax var oldversion = idbversionchangeevent.oldversion value a
64-bit integer.
... on iossamsung internetoldversionchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 1
6 full support 1
6 no support 10 — 1
6prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support ...
IDBVersionChangeEvent.version - Web APIs
version; value a
64-bit integer.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetversion deprecatednon-standardchrome full support 12edge full support ≤18firefox full support 1
6 full support 1
6 full support 10prefixed prefixed implemented with the vendor prefix: mozie no support noopera no support nosafari no support nowebview android ...
IIRFilterNode() - Web APIs
examples let feedforward = [0.00020298, 0.0004059599, 0.00020298]; let feedbackward = [1.012
69
64558, -1.9991880801, 0.9873035442]; 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.
... 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 ...
ImageBitmap.close() - Web APIs
syntax void imagebitmap.close() examples var offscreen = new offscreencanvas(25
6, 25
6); var gl = offscreen.getcontext('webgl'); // ...
... var bitmap = offscreen.transfertoimagebitmap(); // imagebitmap { width: 25
6, height: 25
6 } bitmap.close(); // imagebitmap { width: 0, height: 0 } -- disposed specifications specification status comment html living standardthe definition of 'close()' in that specification.
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
67ie no support noopera full support 47safari no support nowebview android full support ...
...
60chrome android full support
60firefox android full support
67opera android full support 44safari ios no support nosamsung internet android full support 8.0legend full support full support no support no supportexperimental.
InputEvent.getTargetRanges() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgettargetranges experimentalchrome full support
60edge full support 79firefox no support noie no support noopera full support 47safari full support 10.1webview android full support ...
...
60chrome android full support
60firefox android no support noopera android full support 44safari ios full support 10.3samsung 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="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8...
...
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="11
6" 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="#f4f7f8" 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...
InstallTrigger - Web APIs
the following is a basic example of an install trigger on a web page: xpi={'xpinstall dialog display name':'simple.xpi'}; installtrigger.install(xpi); you can also use the installtrigger object to install netscape
6/mozilla skins and language packs, and perform multiple-package installations with install.
... installchrome installs new skin or locale packages in netscape
6 and mozilla.
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="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="11
6" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="21
6" 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.571428571428571%; 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="5
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="22
6" 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.571428571428571%; 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="5
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="22
6" 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) { ...
MediaQueryList.media - Web APIs
examples this example runs the media query (max-width:
600px) and displays the value of the resulting mediaquerylist's media property in a <span>.
... javascript let mql = window.matchmedia('(max-width:
600px)'); document.queryselector(".mq-value").innertext = mql.media; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the result's media property.
MediaRecorder.audioBitsPerSecond - Web APIs
ra for androidsafari on iossamsung internetaudiobitspersecond experimentalchrome full support 49edge full support 79firefox full support 71ie no support noopera full support 3
6safari no support nowebview android full support 49chrome android full support 49firefox android ?
... opera android full support 3
6safari ios no support nosamsung internet android full support 5.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
MediaRecorder.ignoreMutedMedia - Web APIs
ie no support noopera no support 3
6 — 44safari no support nowebview android no support 49 — 57chrome android no support 49 — 57firefox android ?
... opera android no support 3
6 — 44safari ios no support nosamsung internet android no support 5.0 — 7.0legend no support no support compatibility unknown compatibility unknownnon-standard.
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="5
6" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="20
6" 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.
MediaStream.id - Web APIs
the mediastream.id() read-only property is a domstring containing 3
6 characters denoting a unique identifier (guid) for the object.
...—
6.0legend full support full support no support no support see also mediastream, the interface this property belongs to.
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" t...
...ext-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="11
6" y="1" width="210" height="50" fill="#f4f7f8" 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.
MediaTrackSettings.sampleSize - Web APIs
the most commonly used sample size for many years now is 1
6 bits per sample, which was used for cd audio among others.
...for example, 1
6-bit stereo audio requires (1
6/8)*2 or 4 bytes per sample.
MediaTrackSettings - Web APIs
cd-quality audio, for example, is 1
6-bit, so this value would be 1
6 in that case.
...common values include 1.3333333333 (for the classic television 4:3 "standard" aspect ratio, also used on tablets such as apple's ipad), 1.7777777778 (for the 1
6:9 high-definition widescreen aspect ratio), and 1.
6 (for the 1
6:10 aspect ratio common among widescreen computers and tablets).
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="7
6,25 8
6,20 8
6,30 7
6,25...
..." stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="11
6" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="17
6" 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.
MouseEvent.buttons - Web APIs
for example, if the secondary (2) and auxilary (4) buttons are pressed simultaneously, the value is
6 (i.e., 2 + 4).
... 0 : no button or un-initialized 1 : primary button (usually the left button) 2 : secondary button (usually the right button) 4 : auxiliary button (usually the mouse wheel button or middle button) 8 : 4th button (typically the "browser back" button) 1
6 : 5th button (typically the "browser forward" button) example this example logs the buttons property when you trigger a mousedown event.
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,monac...
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="11
6" 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="...
Using Navigation Timing - Web APIs
html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 1
6px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above.
... html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 1
6px "open sans", "helvetica", "arial", sans-serif; } with this code in place, the result looks like this: the values listed are for the <iframe> in which the sample is presented.
Navigator.oscpu - Web APIs
operating system oscpuinfo string format os/2 os/2 warp x (either 3, 4 or 4.5) windows ce windowsce x.y1 windows
64-bit (
64-bit build) windows nt x.y; win
64; x
64 windows
64-bit (32-bit build) windows nt x.y; wow
64 windows 32-bit windows nt x.y mac os x (ppc build) powerpc mac os x version x.y mac os x (i38
6/x
64 build) intel mac os x or macos version x.y linux
64-bit (32-bit build) output of uname -s plus "i
68
6 on x8
6_
64" linux output o...
...f uname -sm x.y refers to the version of the operating system example function osinfo() { alert(window.navigator.oscpu); } osinfo(); // alerts "windows nt
6.0" for example usage notes unless your code is privileged (chrome or at least has the universalbrowserread privilege), it may get the value of the general.oscpu.override preference instead of the true platform.
NavigatorID.platform - Web APIs
for example: "macintel", "win32", "freebsd i38
6", "webtv os" example console.log(navigator.platform); usage notes most browsers, including chrome, edge, and firefox
63 and later, return "win32" even if running on a
64-bit version of windows.
... internet explorer and versions of firefox prior to version
63 still report "win
64".
NavigatorID.userAgent - Web APIs
opera
6+ allows users to set the browser identification string via a menu.
...gecko-based browsers comply with the following general structure: useragent = appcodename/appversion number (platform; security; os-or-cpu; localization; rv: revision-version-number) product/productsub application-name application-name-version example alert(window.navigator.useragent) // alerts "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape
6/
6.1" specifications specification status comment html living standardthe definition of 'navigatorid.useragent' in that specification.
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment
6 gl.color_attachment7 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_web...
...gl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment
6_webgl ext.color_attachment7_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.
OVR_multiview2 - Web APIs
for more information, see also: multiview on webxr three.js multiview demo multiview in babylon.js optimizing virtual reality: understanding multiview multiview webgl rendering for oculus browser
6.0+ webgl extensions are available using the webglrenderingcontext.getextension() method.
...however, the oculus browser (
6+) also supports multisampling using the oculus_multiview extension.
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="5
6" y="30" font-size="12px" font-family="consolas,...
..." fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="40
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor offlineaudiocontext.offlineaudiocontext() creates a new offlineaudiocontext instance.
OffscreenCanvas.transferToImageBitmap() - Web APIs
examples var offscreen = new offscreencanvas(25
6, 25
6); var gl = offscreen.getcontext("webgl"); // ...
... offscreen.transfertoimagebitmap(); // imagebitmap { width: 25
6, height: 25
6 } specifications specification status comment html living standardthe definition of 'offscreencanvas.transfertoimagebitmap()' in that specification.
OrientationSensor - Web APIs
examples basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an absoluteorientationsensor with a frequency of
60 times a second.
... const options = { frequency:
60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
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="7
6,25 8
6,20 8
6,30 7
6,2...
...5" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><rect x="11
6" y="1" width="190" height="50" fill="#f4f7f8" 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.
PannerNode.coneInnerAngle - Web APIs
the coneinnerangle property's default value is 3
60, suitable for a non-directional source.
... syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.coneinnerangle = 3
60; value a double.
PaymentAddress.country - Web APIs
the country read-only property of the paymentaddress interface is a string identifying the address's country using the iso 31
66-1 alpha-2 standard.
... syntax var paymentcountry = paymentaddress.country; value a domstring which contains the iso31
66-1 alpha-2 code identifying the country in which the address is located, or an empty string if no country is available, which frequently can be assumed to mean "same country as the site owner." usage notes if the payment handler validates the address and determines that the value of country is invalid, a call to paymentrequestupdateevent.updatewith() will be made with a details object containing a shippingaddresserrors field.
PaymentAddress.regionCode - Web APIs
the code is derived from the iso 31
66-2 standard, which defines codes for identifying the subdivisions (e.g., states, provinces, autonomous regions, etc.) of all countries in the world.
...this should correspond to region, but should be the iso 31
66--2 standard's region code.
PaymentRequest.canMakePayment() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcanmakepayment()chrome full support
61edge full support 1
6firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.3samsung internet android full support
6.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.
PaymentRequest.onshippingaddresschange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonshippingaddresschangechrome full support
61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.3samsung internet android full support
6.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.
PaymentRequest.shippingOption - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingoptionchrome full support
61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.3samsung internet android full support
6.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.
PaymentRequest.shippingType - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingtypechrome full support
61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.3samsung internet android full support
6.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.
PaymentRequest.payerName - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayernamechrome full support
61edge full support 15firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... no support noopera no support nosafari full support yeswebview android no support nochrome android full support 58firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentResponse.requestId - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestidchrome full support
61edge full support 1
6firefox full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support
60firefox android full support 5
6notes disabled full support 5
6notes disabled notes available only in nightly builds.disabled from version 5
6: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
Pbkdf2Params - Web APIs
this may be one of: sha-1 sha-25
6 sha-384 sha-512 warning: sha-1 is considered vulnerable in most cryptographic applications, but is still considered safe in pbkdf2.
...this should be a random or pseudo-random value of at least 1
6 bytes.
performance.now() - Web APIs
// reduced time precision (1ms) in firefox
60 performance.now(); // 878141
6 // 8781815 // 878220
6 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled performance.now(); // 88
65400 // 88
66200 // 88
66700 // ...
Performance.timeOrigin - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimeorigin experimentalchrome full support
62edge full support 1
6firefox full support 53ie ?
... opera full support 49safari no support nowebview android full support
62chrome android full support
62firefox android full support 53opera android full support 4
6safari ios no support nosamsung internet android full support 8.0legend full support full support no support no support ...
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="1
60" 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="1
61,25 171,20 171,30 1
61,25" stroke="...
...#d4dde4" fill="none"/><line x1="171" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="32
6" 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.
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="1
60" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
...l="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="1
61,25 171,20 171,30 1
61,25" stroke="#d4dde4" fill="none"/><line x1="171" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="27
6" 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: per...
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="1
60" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,mon...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="1
61,25 171,20 171,30 1
61,25" stroke="#d4dde4" fill="none"/><line x1="171" 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="#f4f7f8" 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/constraint...
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="1
60" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...no,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="1
61,25 171,20 171,30 1
61,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="33
6" 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 qu...
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="1
60" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="1
61,25 171,20 171,30 1
61,25" stroke="#d4dde4" fill="none"/><line x1="171" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="32
6" 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.
Using Pointer Events - Web APIs
<canvas id="canvas" width="
600" height="
600" style="border:solid black 1px; touch-action:none"> your browser does not support canvas element.
... function colorfortouch(touch) { var r = touch.pointerid % 1
6; var g = math.floor(touch.pointerid / 3) % 1
6; var b = math.floor(touch.pointerid / 7) % 1
6; r = r.tostring(1
6); // make it a hex digit g = g.tostring(1
6); // make it a hex digit b = b.tostring(1
6); // 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 stri...
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="mid...
...dle" alignment-baseline="middle">event</text></a><polyline points="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="11
6" y="1" width="130" height="50" fill="#f4f7f8" 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="7
6,25 8
6,20 8
6,30 7
6,2...
...5" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="11
6" y="1" width="210" height="50" fill="#f4f7f8" 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.
PublicKeyCredential.rawId - Web APIs
the publickeycredential.id property is a base
64url encoded version of this identifier.
... examples var options = { challenge: new uint8array(2
6) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(2
6), /* 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...
PublicKeyCredential - Web APIs
publickeycredential.id read only secure context inherited from credential and overridden to be the base
64url encoding of publickeycredential.rawid.
... var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(1
6), 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.
PublicKeyCredentialCreationOptions.pubKeyCredParams - Web APIs
-7 indicates the elliptic curve algorithm ecdsa with sha-25
6).
... 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: -37 } ], challenge: new uint8array(2
6) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(2
6), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", } }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions //...
PublicKeyCredentialCreationOptions.timeout - Web APIs
examples var publickey = { timeout:
6000, // accepting to wait for a minute before giving up.
... challenge: new uint8array(2
6) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(2
6), /* 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 public key credentials level 1the definition...
PushManager.supportedContentEncodings - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupportedcontentencodings experimentalchrome full support
60edge full support 1
6disabled full support 1
6disabled disabled from version 1
6: this feature is behind the enable service workers preference.
...refox 78 esr do not support service workers and the push api.ie no support noopera full support 47safari no support nowebview android no support nochrome android full support
60firefox android full support 48notes full support 48notes notes push enabled by default.opera android full support 44safari ios no support nosamsung internet android full support ...
PushSubscription.expirationTime - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpirationtimechrome full support
60edge full support 1
6firefox no support noie no support noopera full support 47safari no support nowebview android no support noch...
...rome 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 ...
PushSubscription.options - Web APIs
this value is part of a signing key pair generated by your application server, and usable with elliptic curve digital signature (ecdsa), over the p-25
6 curve.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoptionschrome full support 42edge full support 1
6firefox 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...
Web Push API Notifications best practices - Web APIs
building trust some studies have shown that as many as
60% of push notifications are blocked.
... [1] in the case of firefox, see bug 1524
619, in which we find that firefox
68 implements this, disabled by default, behind the preference dom.webnotifications.requireuserinteraction.
RTCConfiguration - Web APIs
icecandidatepoolsize optional an unsigned 1
6-bit integer value which specifies the size of the prefetched ice candidate pool.
...removed from the specification's may 13, 201
6 working draft.
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="5
6" y="30" font-size="12px" font-family="consolas,...
...nospace" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="21
6" 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 hav...
RTCDataChannel.bufferedAmountLowThreshold - Web APIs
syntax var threshold = adatachannel.bufferedamountlowthreshold; adatachannel.bufferedamountlowthreshold = threshold; value the number of queued outgoing data bytes below which the buffer is considered to be "low." example in this snippet of code, bufferedamountlowthreshold is set to
64kb, and a handler for the bufferedamountlow event is established by setting the rtcdatachannel.onbufferedamountlow property to a function which should send more data into the buffer by calling send().
... var dc = peerconnection.createdatachannel("file transfer"); dc.bufferedamountlowthreshold =
65535; dc.onbufferedamountlow = function() { /* use send() to queue more data to be sent */ }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.bufferedamountlowthreshold' in that specification.
RTCDataChannel.onbufferedamountlow - Web APIs
example this example responds to the bufferedamountlow event by fetching up to
64kb of a file represented by an object source and calling rtcdatachannel.send() to queue up the retrieved data for sending on the data channel.
...*/ dc.onbufferedamountlow = function() { if (source.position <= source.length) { dc.send(source.readfile(
6553
6)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onbufferedamountlow' in that specification.
RTCDataChannel.stream - Web APIs
the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and
65,535) which uniquely identifies the rtcdatachannel.
... syntax var stream = adatachannel.stream; value an unsigned short value (that is, an integer between 0 and
65,535) which uniquely identifies the data channel.
RTCIceCandidate.port - Web APIs
syntax var port = rtcicecandidate.port; value a 1
6-bit number indicating the port number on the device at the address indicated by ip at which the candidate's peer can be reached.
... usage notes consider this sdp attribute line (a-line) which describes an ice candidate: a=candidate:4234997325 1 udp 2043278322 192.1
68.0.5
6 44323 typ host the port number is found in the sixth field, which is "44323".
RTCIceCandidate.relatedPort - Web APIs
syntax var relport = rtcicecandidate.relatedport; value an unsigned 1
6-bit value containing the candidate's related port number, if any.
... here's an sdp attribute line (a-line) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.1
68.0.5
6 6502 typ srflx raddr 192.1
68.2.77 rport 327
68 generation 0 the remote port, relatedport, is the number immediately following the "rport" label on the a-line, or 327
68.
RTCIceCandidateInit.candidate - Web APIs
for an a-line (attribute line) that looks like this: a=candidate:4234997325 1 udp 2043278322 192.1
68.0.5
6 44323 typ host the corresponding candidate string's value will be "candidate:4234997325 1 udp 2043278322 192.1
68.0.5
6 44323 typ host".
...the complete list of attributes for this example candidate is: foundation = 4234997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.1
68.0.5
6" 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.
RTCIceCandidateStats.priority - Web APIs
the value may be anywhere from 1 to 2,147,483,
647.
...he candidate type (local, server reflexive, peer reflexive, or relayed) the preferability of the candidate's specific ip address (for multihomed agents) the candidate's component id (1 for rtp, 2 for rtcp) the candidate's priority is computed using the formula (ptype is the priority of the candidate's type and plocal is the priority of the ip address): priority = 224×ptype + 28×plocal + (25
6 - componentid)priority\quad =\quad { 2 }^{ 24 }\times { p }_{ type }\quad +\quad { 2 }^{ 8 }\times { p }_{ local }\quad +\quad (25
6\quad -\quad componentid) this is equivalent to mapping the priorities of teh candidate type, the local ip, and the component id into various bit ranges within the 32-bit priority value.
RTCIceCredentialType - Web APIs
this process is detailed in rfc 7
635.
... token authenticating with the ice server requires the use of an oauth 2.0 token as defined in rfc 7
635.
RTCInboundRtpStreamStats - Web APIs
bytesreceived a
64-bit integer which indicats the total numer of bytes that have been received so far for this media source.
... qpsum a
64-bit value containing the sum of the qp values for every frame decoded by this rtp receiver.
RTCRtcpParameters - Web APIs
this is used, for example, in sdes (sdp security descriptions) messages, described in rfc 45
68.
...if this value is true, reduced size rtcp (described in rfc 550
6) is in effect.
RTCRtpContributingSource.audioLevel - Web APIs
audiolevel will be the level value defined in [rfc
64
65] if the rfc
64
65 header extension is present, and otherwise null.
...a value of 1.0 represents 0 dbov (maximum volume), a value of 0.0 represents silence, and a value of 0.5 represents approximately
6 db spl (decibels of sound pressure level) change in the sound pressure level from 0 dbov.
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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="18
6" 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>
67801<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">012345
6789</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 com...
RelativeOrientationSensor - Web APIs
examples basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an relativeorientationsensor with a frequency of
60 times a second.
... const options = { frequency:
60, referenceframe: 'device' }; const sensor = new relativeorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
ResizeObserver - Web APIs
the javascript looks like so: const h1elem = document.queryselector('h1'); const pelem = document.queryselector('p'); const divelem = document.queryselector('body > div'); const slider = document.queryselector('input[type="range"]'); const checkbox = document.queryselector('input[type="checkbox"]'); divelem.style.width = '
600px'; slider.addeventlistener('input', () => { divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize /
600) + 'rem'; ...
... } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width /
600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if (checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status comment resize observerthe definition of 'resizeobserver' in that specification.
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="5
6" 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...
..."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="22
6,25 23
6,20 23
6,30 22
6,25" stroke="#d4dde4" fill="none"/><line x1="23
6" y1="25" x2="2
66" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="2
66" 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...
SVGImageElement.decoding - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdecoding experimentalchrome full support
65edge full support ≤79firefox ?
... webview android full support
65chrome android full support
65firefox android ?
SVGPreserveAspectRatio - Web APIs
operties unsigned short align 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_xmidymid
6 corresponds to value xmidymid for attribute preserveaspectratio.
SVGTransform - Web APIs
setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly svgmatrix matrix constants svg_transform_unknown = 0 svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale = 3 svg_transform_rotate = 4 svg_transform_skewx = 5 svg_transform_skewy =
6 normative document svg 1.1 (2nd edition) constants name value description svg_transform_unknown 0 the unit type is not one of predefined unit types.
... svg_transform_matrix 1 a matrix(…) transformation svg_transform_translate 2 a translate(…) transformation svg_transform_scale 3 a scale(…) transformation svg_transform_rotate 4 a rotate(…) transformation svg_transform_skewx 5 a skewx(…) transformation svg_transform_skewy
6 a skewy(…) transformation properties name type description type unsigned short the type of the value as specified by one of the svg_transform_* constants defined on this interface.
Using the Screen Capture API - Web APIs
max-width is set to 8
60px to set an absolute upper limit on the video's size, the error, warn, and info classes are used to style the corresponding console output types.
... #video { border: 1px solid #999; width: 98%; max-width: 8
60px; } .error { color: red; } .warn { color: orange; } .info { color: darkgreen; } result the final product looks like this.
ServiceWorkerRegistration.navigationPreload - Web APIs
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload experimentalchrome full support 59edge full support 17 full support 17 full support 1
6disabled disabled from version 1
6: this feature is behind the enable service workers preference.firefox 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
6safari 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 full support no support no supportexperime...
Using Service Workers - Web APIs
to access the resolved promise values, we then access this function as you’d then expect (see app.js lines
60-
64).
... enter service workers note : we're using the es
6 arrow functions syntax in the service worker implementation now let’s get on to service workers!
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 1354175, currently nightly/beta only).
... 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 yesfirefox android full support 29opera android full support yessafari ios ?
SharedWorkerGlobalScope.onconnect - Web APIs
as of version
65 it is now initialized to an empty string, as per spec (bug 1508824).
...fox for androidopera for androidsafari on iossamsung internetonconnectchrome 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 18firefox android full support 29opera android full support yessafari ios ?
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="5
6" 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="1
60" height="50" fill="#f4f7f8" 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="consola...
...nospace" 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="171" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="22
6" 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.
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="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4...
...dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="11
6" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="17
6" 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.generateKey() - Web APIs
let keypair = window.crypto.subtle.generatekey( { name: "rsa-oaep", moduluslength: 409
6, publicexponent: new uint8array([1, 0, 1]), hash: "sha-25
6" }, true, ["encrypt", "decrypt"] ); elliptic curve key pair generation this code generates an ecdsa signing key pair.
... let key = window.crypto.subtle.generatekey( { name: "aes-gcm", length: 25
6 }, true, ["encrypt", "decrypt"] ); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.generatekey()' in that specification.
SyncEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; 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="7
6,25 8
6,20 8
6,30 7
6,25" st...
...roke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="11
6" 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="2
66,25 27
6,20 27
6,30 2
66,25" stroke="#d4dde4" fill="none"/><line x1="27
6" y1="25" x2="30
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="30
6" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fi...
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="1
60" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="1
61,25 171,20 171,30 1
61,25" stroke="#d4dde4" fill="none"/><line x1="171" 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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="30
6" 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...
TextDecoder.prototype.encoding - Web APIs
the legacy single-byte encodings: 'ibm8
66', '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-1
6', 'koi8-r', 'koi8-u', 'macintosh', 'windows-874', 'windows-1250', 'windows-1251', 'windows-1252', 'windows-1253', 'windows-1254', 'windows-1255', 'windows-125
6', 'windows-1257', 'windows-1258', or 'x-mac-cyrillic'.
... the legacy miscelleanous encodings: 'utf-1
6be', 'utf-1
6le', and 'x-user-defined'.
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="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#...
...d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="11
6" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="1
61" 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.
Touch events - Web APIs
create a canvas <canvas id="canvas" width="
600" height="
600" style="border:solid black 1px;"> your browser does not support canvas element.
... function colorfortouch(touch) { var r = touch.identifier % 1
6; var g = math.floor(touch.identifier / 3) % 1
6; var b = math.floor(touch.identifier / 7) % 1
6; r = r.tostring(1
6); // make it a hex digit g = g.tostring(1
6); // make it a hex digit b = b.tostring(1
6); // 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 functio...
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,monac...
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="11
6" y="1" width="75" height="50" fill="#f4f7f8" 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
support noedge no support nofirefox full support 57 full support 57 no support 3.5 — 57notes notes firefox has a bug whereby single quotes contained in urls are escaped when accessed via url apis (see bug 138
6683).ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android full support ...
... 57 full support 57 no support 4 — 57notes notes firefox has a bug whereby single quotes contained in urls are escaped when accessed via url apis (see bug 138
6683).opera android no support nosafari ios no support nosamsung internet android no support nohash experimentalchrome no support noedge no support nofirefox full support 38 full support 38 no support 3.5 — 38not...
VTTCue - Web APIs
example html <video controls src="https://udn.realityripple.com/samples/c
6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cue...
...en = new vttcue(2.
6, 4, 'subtitles will display between 2.
6 and 4 seconds'); track.addcue(cueen); }); result chrome: please open in jsfiddle to view the live sample.
VideoTrack - Web APIs
the language is specified as a bcp 47 (rfc 5
64
6) language code, such as "en-us" or "pt-br".
... for (var i = 0; i < tracks.length; i++) { if (tracks[i].language === userlanguage) { tracks[i].selected = true; break; } }); the language is in standard (rfc 5
64
6) format.
WEBGL_depth_texture - Web APIs
the pixels parameter now accepts an arraybufferview of type uint1
6array and uint32array.
... incorrectly stated as the target parameter in the specification, see https://www.khronos.org/bugzilla/show_bug.cgi?id=
674.
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_attachment
6_webgl ext.color_attachment7_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_buffer
6_webgl ext.draw_buffer7_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.
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
possible values: gl.r8 gl.r8ui gl.r8i gl.r1
6ui gl.r1
6i gl.r32ui gl.r32i gl.rg8 gl.rg8ui gl.rg8i gl.rg1
6ui gl.rg1
6i gl.rg32ui gl.rg32i gl.rgb8 gl.rgba8 gl.srgb8_alpha8 gl.rgba4 gl.rgb5
65 gl.rgb5_a1 gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a2ui gl.rgba1
6ui gl.rgba1
6i gl.rgba32i gl.rgba32ui gl.depth_component1
6 gl.depth_component24 gl.depth_component32f gl.depth_stencil gl.depth24_sten...
... examples gl.renderbufferstoragemultisample(gl.renderbuffer, 4, gl.rbga4, 25
6, 25
6); specifications specification status comment webgl 2.0the definition of 'glrenderbufferstoragemultisample' in that specification.
WebGL2RenderingContext.texImage3D() - Web APIs
gl.r8 gl.r1
6f gl.r32f gl.r8ui gl.rg8 gl.rg1
6f gl.rg32f gl.rgui gl.rgb8 gl.srgb8 gl.rgb5
65 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb1
6f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb5_a1 gl.rgba4444 gl.rgba1
6f gl.rgba32f gl.rgba8ui width a glsizei specifying the width of the texture.
...possible values: gl.unsigned_byte: 8 bits per channel for gl.rgba gl.unsigned_short_5_
6_5: 5 red bits,
6 green bits, 5 blue bits.
WebGL2RenderingContext.texStorage2D() - Web APIs
possible values: gl.r8 gl.r1
6f gl.r32f gl.r8ui gl.rg8 gl.rg1
6f gl.rg32f gl.rg8ui gl.rgb8 gl.srgb8 gl.rgb5
65 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb1
6f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_aplha8 gl.rgb5_a1 gl.rgba4 gl.rgba1
6f gl.rgba32f gl.rgba8ui unlike opengl 3.0, webgl 2 doesn't support the following etc2 and eac compressed texture formats (see section 5.37 in the webgl 2 spec).
... examples gl.texstorage2d(gl.texture_2d, 1, gl.rgb8, 25
6, 25
6); specifications specification status comment webgl 2.0the definition of 'texstorage2d' in that specification.
WebGL2RenderingContext.texStorage3D() - Web APIs
possible values: gl.r8 gl.r1
6f gl.r32f gl.r8ui gl.rg8 gl.rg1
6f gl.rg32f gl.rgui gl.rgb8 gl.srgb8 gl.rgb5
65 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb1
6f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb5_a1 gl.rgba4444 gl.rgba1
6f gl.rgba32f gl.rgba8ui gl.compressed_r11_eac gl.compressed_signed_r11_eac gl.compressed_rg11_eac gl.compressed_signed_rg11_eac gl.compressed_rgb8_etc2 g...
... examples gl.texstorage3d(gl.texture_3d, 1, gl.rgb8, 25
6, 25
6, 25
6); specifications specification status comment webgl 2.0the definition of 'texstorage3d' in that specification.
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,monosp...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="11
6" y="1" width="170" height="50" fill="#f4f7f8" 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.compressedTexImage[23]D() - Web APIs
ext.compressed_rgba_atc_interpolated_alpha_webgl when using the webgl_compressed_texture_astc extension: ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr ext.compressed_rgba_astc_5x4_khr ext.compressed_srgb8_alpha8_astc_5x4_khr ext.compressed_rgba_astc_5x5_khr ext.compressed_srgb8_alpha8_astc_5x5_khr ext.compressed_rgba_astc_
6x5_khr ext.compressed_srgb8_alpha8_astc_
6x5_khr ext.compressed_rgba_astc_
6x
6_khr ext.compressed_srgb8_alpha8_astc_
6x
6_khr ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr ext.compressed_rgba_astc_8x
6_khr ext.compressed_srgb8_alpha8_astc_8x
6_khr ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr ext.compres...
...sed_rgba_astc_10x5_khr ext.compressed_srgb8_alpha8_astc_10x5_khr ext.compressed_rgba_astc_10x
6_khr ext.compressed_srgb8_alpha8_astc_10x
6_khr ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr when using the ext_texture_compression_bptc extension: ext.compressed_rgba_bptc_unorm_ext ext.compressed_srgb_alpha_bptc_unorm_ext ext.compressed_rgb_bptc_signed_float_ext ext.compressed_rgb_bptc_unsigned_float_ext when using the ext_texture_compression_rgtc extension: ext.compressed_red_rgtc1_ext ext.compressed_signed_red_rgtc1_ext ...
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_attachment
6 gl.color_attachment7 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_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment
6_webgl ext.color_attachment7_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_attachment
6 gl.color_attachment7 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_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment
6_webgl ext.color_attachment7_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_attachment
6 gl.color_attachment7 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_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment
6_webgl ext.color_attachment7_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.getUniform() - Web APIs
th 3 elements) ivec3 int32array (with 3 elements) bvec3 array of glboolean (with 3 elements) vec4 float32array (with 4 elements) ivec4 int32array (with 4 elements) bvec4 array of glboolean (with 4 elements) mat2 float32array (with 4 elements) mat3 float32array (with 9 elements) mat4 float32array (with 1
6 elements) sampler2d glint samplercube glint additionally available in webgl 2 uint gluint uvec2 uint32array (with 2 elements) uvec3 uint32array (with 3 elements) uvec4 uint32array (with 4 elements) mat2x3 float32array (with
6 elements) mat2x4 float32array (with 8 elements) mat3x2 f...
...loat32array (with
6 elements) mat3x4 float32array (with 12 elements) mat4x2 float32array (with 8 elements) mat4x3 float32array (with 12 elements) any sampler type glint examples var loc = gl.getuniformlocation(program, 'u_foobar'); gl.getuniform(program, loc); specifications specification status comment webgl 1.0the definition of 'getuniform' in that specification.
WebGLRenderingContext.texSubImage2D() - Web APIs
possible values: gl.unsigned_byte: 8 bits per channel for gl.rgba gl.unsigned_short_5_
6_5: 5 red bits,
6 green bits, 5 blue bits.
... a uint1
6array must be used if type is either gl.unsigned_short_5_
6_5, gl.unsigned_short_4_4_4_4, gl.unsigned_short_5_5_5_1, or ext.half_float_oes.
WebGLRenderingContext.viewport() - Web APIs
int32array[1
6384, 1
6384] to get the current viewport, query the viewport constant.
...int32array[0, 0,
640, 480] specifications specification status comment webgl 1.0the definition of 'viewport' in that specification.
Raining rectangles - Web APIs
you missed <strong>0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.
6em; } ;(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(drawanimat...
... var randnums = getrandomvector(); rect.size = [ 5 + 120 * randnums[0], 5 + 120 * randnums[1] ]; rect.position = [ randnums[2]*(gl.drawingbufferwidth - rect.size[0]), gl.drawingbufferheight ]; rect.velocity = 1.0 +
6.0*math.random(); rect.color = getrandomvector(); gl.clearcolor(rect.color[0], rect.color[1], rect.color[2], 1.0); function getrandomvector() { 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.getcont...
Adding 2D content to a WebGL context - Web APIs
mat4.translate(modelviewmatrix, // destination matrix modelviewmatrix, // matrix to translate [-0.0, 0.0, -
6.0]); // amount to translate // tell webgl how to pull out the positions from the position // buffer into the vertexposition attribute.
... then we establish the position of the square plane by loading the identity position and translating away from the camera by
6 units.
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 1
6, 17, 18, 1
6, 18, 19, // right 20, 21, 22, 20, 22, 23, // left ]; // now send the element array to gl gl.bufferdata(gl.element_array_buffer, new uint1
6array(indices), gl.static_draw); return { position: positionbuffer, color: colorbuffer, ...
... { const vertexcount = 3
6; const type = gl.unsigned_short; const offset = 0; gl.drawelements(gl.triangles, vertexcount, type, offset); } since each face of our cube is comprised of two triangles, there are
6 vertices per side, or 3
6 total vertices in the cube, even though many of them are duplicates.
Signaling and video calling - Web APIs
the main body of this code is found in the connect() function: it opens up a websocket server on port
6503, and establishes a handler to receive messages in json object format.
... note: technically speaking, the string returned by createoffer() is an rfc 32
64 offer.
Fundamentals of WebXR - Web APIs
support for all six degrees of freedom is referred to as
6dof.
...for example, if a headset uses a 25
60x1440 screen, with the left half being used for the left eye's view and the right half or the right eye's view, the framebuffer is used like this: the simplest headsets have no integrated sensors, and simply focus each half of the screen into the corresponding eye.
Movement, orientation, and motion: A WebXR example - Web APIs
jectionmatrix'), 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=1575
659351244'); 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) => { ...
...rojectionmatrix); gl.uniformmatrix4fv( programinfo.uniformlocations.modelviewmatrix, false, modelviewmatrix); gl.uniformmatrix4fv( programinfo.uniformlocations.normalmatrix, false, normalmatrix); gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture); gl.uniform1i(programinfo.uniformlocations.usampler, 0); { const vertexcount = 3
6; const type = gl.unsigned_short; const offset = 0; gl.drawelements(gl.triangles, vertexcount, type, offset); } } renderscene() begins by calculating how much rotation should occur around each of the three axes in the amount of time that has elapsed since the previous frame was rendered.
Starting up and shutting down a WebXR session - Web APIs
version 0.4.0 of the extension was announced on march 2
6, 2020.
... session.onvisibilitychange = (event) => { switch(event.session.visibilitystate) { case "hidden": myframerate = 10; break; case "blurred-visible": myframerate = 30; break; case "visible": default: myframerate =
60; break; } }; this example changes a variable myframerate depending on the visibility state as it changes.
Background audio processing using AudioWorklet - Web APIs
the second parameter is named frequency and defaults to 440.0, with a range from 275 to 418
6.009, inclusively.
... static get parameterdescriptors() { return [ { name: "gain", defaultvalue: 0.5, minvalue: 0, maxvalue: 1 }, { name: "frequency", defaultvalue: 440.0; minvalue: 27.5, maxvalue: 418
6.009 } ]; } accessing your processor node's parameters is as simple as looking them up in the parameters object passed into your implementation of process().
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.012
69
64558, -1.9991880801, 0.9873035442]; note: these values are calculated based on the lowpass filter specified in the filter characteristics of the web audio api specification.
...appendchild(canvasel); // set 2d context and set dimesions const canvasctx = canvasel.getcontext('2d'); const width = canvascontainer.offsetwidth; const height = canvascontainer.offsetheight; canvasel.width = width; canvasel.height = height; // set background fill canvasctx.fillstyle = 'white'; canvasctx.fillrect(0, 0, width, height); // set up some spacing based on size const spacing = width/1
6; const fontsize = math.floor(spacing/1.5); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = fontsize+'px sans-serif'; canvasctx.fillstyle =...
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,monac...
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="7
6,25 8
6,20 8
6,30 7
6,25" stroke="#d4dde4" fill="none"/><line x1="8
6" y1="25" x2="11
6" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="11
6" 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="...
Window.devicePixelRatio - Web APIs
a value of 1 indicates a classic 9
6 dpi (7
6 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 9
6 or 7
6 dpi.
Window.event - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneteventchrome 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 152075
6).disabled from version
63: this feature is behind the dom.window.event.enabled preference (needs to be set to true).
...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 152075
6).disabled from version
63: this feature is behind the dom.window.event.enabled preference (needs to be set to true).
Window.matchMedia() - Web APIs
examples this example runs the media query (max-width:
600px) and displays the value of the resulting mediaquerylist's matches property in a <span>; as a result, the output will say "true" if the viewport is less than or equal to
600 pixels wide, and will say "false" if the window is wider than that.
... javascript let mql = window.matchmedia('(max-width:
600px)'); document.queryselector(".mq-value").innertext = mql.matches; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded.
Window.prompt() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpromptchrome full support 1notes full support 1notes notes starting with chrome 4
6, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support 12firefox full support 1ie full support 4notes full support 4notes notes this function has no effect ...
... 3notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari full support 1webview android full support 1notes full support 1notes notes starting with webview 4
6, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.chrome android full support 18notes full support 18notes notes starting with chrome 4
6, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.firefox android ...
Window.showModalDialog() - Web APIs
this method was removed in chrome 43 and firefox 5
6.
...— 43edge no support nofirefox no support 3 — 5
6ie full support 4opera no support nosafari full support 5.1notes full support 5.1notes notes see webkit bug 151885 for possible future removal from safari.webview android no support ...
WindowOrWorkerGlobalScope.fetch() - Web APIs
(this behavior was corrected in firefox
65 — see bug 1508
661).
... integrity contains the subresource integrity value of the request (e.g., sha25
6-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=).
WindowOrWorkerGlobalScope.setInterval() - Web APIs
this effectively limits delay to 2147483
647 ms, since it's specified as a signed integer in the idl.
... minidaemon.js /*\ |*| |*| :: minidaemon :: |*| |*| revision #2 - september 2
6, 2014 |*| |*| /docs/web/api/window.setinterval |*| https://developer.mozilla.org/user:fusionchess |*| https://github.com/madmurphy/minidaemon.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later.
WindowOrWorkerGlobalScope - Web APIs
windoworworkerglobalscope.atob() decodes a string of data which has been encoded using base-
64 encoding.
... windoworworkerglobalscope.btoa() creates a base-
64 encoded ascii string from a string of binary data.
WorkerGlobalScope.navigator - Web APIs
d 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/537.3
6", 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/537.3
6"…} appcodename: "mozilla" appname: "netscape" appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebkit/537.3
6 (khtml, like gecko) chrome/40.0.2214.93 safari/537.3
6" hardwareconcurrency: 4 online: true platfo...
...rm: "macintel" product: "gecko" useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) applewebkit/537.3
6 (khtml, like gecko) chrome/40.0.2214.93 safari/537.3
6" __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.
XMLHttpRequest() - Web APIs
non-standard firefox syntax firefox 1
6 added a non-standard parameter to the constructor that can enable anonymous mode (see bug
692
677).
...this only works in privileged (reviewed) apps (bug
692
677); 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="5
6" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline poin...
...ts="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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="27
6" 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.
Browser Differences - Web APIs
browser differences netscape 7.x (all platforms) and internet explorer
6 (windows) support the w3c xslt 1.0 standard (http://www.w3.org/tr/xslt).
...netscape
6.x only partially supported xslt 1.0.
ARIA: switch role - Accessibility
button.switch { margin: 0; padding: 0; width: 70px; height: 2
6px; border: 2px solid black; display: inline-block; margin-right: 0.25em; line-height: 20px; vertical-align: middle; text-align: center; font: 12px "open sans", "arial", serif; } button.switch span { padding: 0 4px; pointer-events: none; } [role="switch"][aria-checked="false"] :first-child, [role="switch"][aria-checked="true"] :last-child { background: #2
62; color: #eef; } ...
... [role="switch"][aria-checked="false"] :last-child, [role="switch"][aria-checked="true"] :first-child { color: #bbd; } label.switch { font: 1
6px "open sans", "arial", sans-serif; line-height: 20px; user-select: none; vertical-align: middle; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; } the most interesting part is probably the use of attribute selectors and the :first-child and :last-child pseudo-classes to do all the heavy lifting of changing the appearance of the switch based on whether it's on or off.
ARIA: table role - Accessibility
roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="row" aria-rowindex="1
6"> <span role="cell">header</span> <span role="cell">h
6</span> </div> <div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </div> <div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </div> </div> </div> description an element with role="table" is a ...
...iv> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="row" aria-rowindex="1
6"> <span role="cell">header</span> <span role="cell">h
6</span> </div> <div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </div> <div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </div> </div> </div> the above is part of a table.
Understandable - Accessibility
3.1.
6 pronunciation (aaa) a mechanism should be provided to give users access to pronounciation of words where they are is needed to understand the content fully.
... 3.3.
6 error prevention (all) (aaa) this principle builds on 3.3.4, extending its requirements to all user input situations, not just ones involving sensitive data.
::before (:before) - CSS: Cascading Style Sheets
> <li>relax</li> </ul> css li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.
6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code example running live.
...into a smooth batter</li> <li>pour a ladleful of batter onto a hot, greased, flat frying pan</li> <li>fry until the top of the pancake loses its gloss</li> <li>flip it over and fry for a couple more minutes</li> <li>serve with your favorite topping</li> </ol> css li { padding:0.5em; } li[aria-current='step'] { font-weight:bold; } li[aria-current='step']::after { content: " \21e
6"; /* hexadecimal for unicode leftwards white arrow*/ display: inline; } result specifications specification status comment css pseudo-elements level 4the definition of '::before' in that specification.
::selection - CSS: Cascading Style Sheets
syntax /* legacy firefox syntax (version
61 and below) */ ::-moz-selection ::selection examples html this text has special styles when you highlight it.
...(wcag defines large text as between 18.
66px and 24px and bold, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 specifications specification status comment css pseudo-elements level 4the definition of '::selection' in that specification.
::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).
...no support noopera full support 37safari 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).
:checked - CSS: Cascading Style Sheets
styling <option&rt; elements has no effect.edge full support 12notes full support 12notes notes on macos, styling <option&rt; elements has no effect.firefox full support 1notes full support 1notes notes from firefox 5
6, <option&rt; elements cannot be styled.notes on macos, styling <option&rt; elements has no effect.ie full support 9opera full support 9notes full support 9notes notes on macos, styling <option&rt; elements has no effect.safari full support ...
... 3.1notes notes styling <option&rt; elements has no effect.webview android full support 2chrome android full support 18firefox android full support 4notes full support 4notes notes from firefox 5
6, <option&rt; elements cannot be styled.opera android full support 10.1safari ios full support 3.1notes full support 3.1notes notes styling <option&rt; elements has no effect.samsung internet android full support 1.0leg...
:defined - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:definedchrome full support 54edge full support 79firefox full support
63ie no support noopera full support 41safari full support 10webview android full support 54chrome android full support 54firefox android full support ...
...
63opera android full support 41safari ios full support 10samsung internet android full support
6.0legend full support full support no support no support ...
:host-context() - CSS: Cascading Style Sheets
ndroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host-context()chrome full support 54edge full support 79firefox no support nonotes no support nonotes notes see bug 10820
60.ie no support noopera full support 41safari no support nowebview android full support 54chrome android full support 54firefox android no support ...
... nonotes no support nonotes notes see bug 10820
60.opera android full support 41safari ios no support nosamsung internet android full support
6.0legend full support full support no support no supportsee implementation notes.see implementation notes.
range - CSS: Cascading Style Sheets
syntax /* keyword value */ range: auto; /* range values */ range: 2 5; range: infinite 10; range:
6 infinite; range: infinite infinite; /* multiple range values */ range: 2 5, 8 10; range: infinite
6, 10 infinite; values auto the range depends on the counter system: for cyclic, numeric, and fixed systems, the range is negative infinity to positive infinity.
...five
6.
system - CSS: Cascading Style Sheets
if the characters "a" to "z" are specified as symbols in a counter style, with the alphabetic system, then the first 2
6 counter representations will be "a", "b" upto "z".
... css <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 numbers { system: numeric; symbols: 0 1 2 3 4 5
6 7 8 9; suffix: ": "; } ul { list-style: numbers; } result additive counter this example renders a list using roman numerals.
font-weight - CSS: Cascading Style Sheets
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.
unicode-range - CSS: Cascading Style Sheets
syntax /* <unicode-range> values */ unicode-range: u+2
6; /* single codepoint */ unicode-range: u+0-7f; unicode-range: u+0025-00ff; /* codepoint range */ unicode-range: u+4??; /* wildcard range */ unicode-range: u+0025-00ff, u+4??; /* multiple values */ values single codepoint a single unicode character code point, for example u+2
6.
... html <div>me & you = us</div> css @font-face { font-family: 'ampersand'; src: local('times new roman'); unicode-range: u+2
6; } div { font-size: 4em; font-family: ampersand, helvetica, sans-serif; } result specifications specification status comment css fonts module level 3the definition of 'unicode-range' in that specification.
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
media: media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 1
6, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dppx.
... example: @media (-webkit-min-device-pixel-ratio: 2), /* webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox browsers (prior to firefox 1
6) */ (min-resolution: 2dppx), /* the standard way */ (min-resolution: 192dpi) /* dppx fallback */ note: see this csswg article for compatibility good practices regarding resolution and dppx.
aspect-ratio - CSS: Cascading Style Sheets
{ background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w">width:1
65</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="1
65"> <label id="hf" for="w">height:1
65</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="1
65"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-rat...
...io: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="1
65px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specification status comment media queries level 4the definition of 'aspect-ratio' in that specification.
color-index - CSS: Cascading Style Sheets
examples basic example html <p>this is a test.</p> css p { color: black; } @media (color-index) { p { color: red; } } @media (min-color-index: 15000) { p { color: #1475ef; } } result custom stylesheet this html will apply a special stylesheet for devices that have at least 25
6 colors.
... <link rel="stylesheet" href="http://foo.bar.com/base.css" /> <link rel="stylesheet" media="all and (min-color-index: 25
6)" href="http://foo.bar.com/color-stylesheet.css" /> specifications specification status comment media queries level 4the definition of 'color-index' in that specification.
@supports - CSS: Cascading Style Sheets
rt 12.1safari ios full support 9samsung internet android full support 1.5selector()chrome full support 83edge full support 83firefox full support
69 full support
69 full support
64disabled disabled from version
64: this feature is behind the layout.css.supports-selector.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 199237webview 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 preference (needs to be set to true).
max-width - CSS: Cascading Style Sheets
syntax /* keyword value */ max-width: auto; /* <length> values */ max-width:
600px; max-width: 80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values.
...agesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width:
600px; } specifications specification status comment css device adaptationthe definition of '"max-width" descriptor' in that specification.
@viewport - CSS: Cascading Style Sheets
note: see https://github.com/w3c/csswg-drafts/issues/47
66 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.
Variable fonts guide - CSS: Cascading Style Sheets
conversely, when a much larger size was being used (like 48 or
60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent.
... font-optical-sizing: auto; font-variation-settings: 'opsz' 3
6; the following live example's css can be edited to allow you to play with optical size values.
Consistent list indentation - CSS: Cascading Style Sheets
gecko, on the other hand, sets a left padding of 40 pixels for the <ul> element, so given the exact same styles as were used to produce figure 5, loading the example into a gecko-based browser gives us figure
6.
...if you want to reproduce the default display in netscape
6.x, you write: ul {margin-left: 0; padding-left: 40px;} if you're more interested in following the internet explorer/opera model, then: ul {margin-left: 40px; padding-left: 0;} of course, you can fill in your own preferred values.
Using z-index - CSS: Cascading Style Sheets
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 #
69
6; background-color: #cfc; margin: 0px 50px 0px 50px; } #rel2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #
69
6; 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; } #sta...
...1 { z-index: 8; height: 70px; border: 1px dashed #99
6; background-color: #ffc; margin: 0px 50px 0px 50px; } ...
Basic Shapes - CSS: Cascading Style Sheets
you can see this by moving the centre of our circle towards the content by setting the position to
60%.
... img { float: left; shape-outside: circle(50% at
60%); } ellipse() an ellipse is essentially a squashed circle and so ellipse() acts in a very similar way to circle() except that we have to specify two radii x and y in that order.
Using CSS transitions - CSS: Cascading Style Sheets
: <property> <duration> <timing-function> <delay>; } examples simple example this example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect: #delay { font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; } #delay:hover { font-size: 3
6px; } multiple animated properties example html content <body> <p>the box below combines transitions for: width, height, background-color, transform.
...simply add a transition to the element and any change will happen smoothly: p { padding-left:
60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; } you can play with this here: http://jsfiddle.net/9h2
61pzo/291/ detecting the start and completion of a transition you can use the transitionend event to detect that an animation has finished running.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
html <p>this paragraph is initial black.</p> css :root { --text-color: 1
6px; } p { color: blue; } p { color: var(--text-color); } as expected, the browser substitutes the value of --text-color in place of var(--text-color), but 1
6px is not a valid property value for color.
...if you had written color: 1
6px without any variable substitutes, then it was a syntax error.
Viewport concepts - CSS: Cascading Style Sheets
when zoomed in you may get: document.documentelement.clientwidth /* 800 */ window.innerwidth /* 800 */ window.outerwidth /* 800 in firefox, 1200 in chrome */ document.documentelement.clientheight /* 533 */ window.innerheight /* 533 */ window.outerheight /* 59
6 in firefox, 900 in chrome */ the viewport was originally 1200 x 800 pixels.
... iframe { width: 50vw; } if the iframe is set to 50vw, it will be 50% of the width of the 1200px parent document in our example above, or
600px, with 1vw being
6px.
animation-delay - CSS: Cascading Style Sheets
netanimation-delaychrome full support 43 full support 43 full support 3prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12firefox full support 1
6notes full support 1
6notes notes before firefox 57, firefox does not repaint elements outside the viewport that are animated into the viewport with a delay.
...��37prefixed 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 1
6 full support 1
6 full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit pref...
animation-timing-function - CSS: Cascading Style Sheets
tion: 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 */ animation-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...
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-f...
...e> examples 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/4574), linear-gradient(rgb(219, 1
66, 1
66), rgb(0, 0, 172)); 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 specif...
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/7
693/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: #fe7f88; background-image: none; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/
6457/mdn_logo_only_color.png"); } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7
693/catfront.png"); background-color: transparent; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'backgro...
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/07/29/17350/3b4892b7e820122ac
6dd7
678891d4507/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.
...t exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-position-xchrome full support 1edge full support 12firefox full support 49ie full support
6opera full support 15safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 49opera android full sup...
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/07/29/17350/3b4892b7e820122ac
6dd7
678891d4507/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.
...t exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-position-ychrome full support 1edge full support 12firefox full support 49ie full support
6opera full support 15safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 49opera android full sup...
background-repeat - CSS: Cascading Style Sheets
example: an image with an original width of 2
60px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added.
...li> <li>space <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: 1
60px; 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)...
border-bottom-style - CSS: Cascading Style Sheets
mation typediscrete formal syntax <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="b
6">double</td> <td class="b7">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: hidde...
...n;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b
6 {border-bottom-style: double;} .b7 {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-image - CSS: Cascading Style Sheets
#bitmap { width: 200px; background-color: #ffa; border: 3
6px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 3
6px 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 30px)
60; padding: 20px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image' in that specification.
border-left-style - CSS: Cascading Style Sheets
ednocomputed valueas specifiedanimation 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="b
6">double</td> <td class="b7">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;} .b...
...3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b
6 {border-left-style: double;} .b7 {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-right-style - CSS: Cascading Style Sheets
lueas specifiedanimation typediscrete 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="b
6">double</td> <td class="b7">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: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b
6 {border-right-style: double;} .b7 {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.
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="b
6">double</td> <td class="b7">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: #52e39
6; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:d...
...otted;} .b4 {border-style:dashed;} .b5 {border-style:solid;} .b
6 {border-style:double;} .b7 {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
ednocomputed valueas specifiedanimation 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="b
6">double</td> <td class="b7">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;} .b
6 {border-top-style: double;} .b7 {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.
border-width - CSS: Cascading Style Sheets
-width: the absolute length or 0 if border-top-style is none or hiddenanimation typeas each of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length formal syntax <line-width>{1,4}where <line-width> = <length> | thin | medium | thick examples a mix of values and lengths html <p id="sval"> one value:
6px wide border on all 4 sides</p> <p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border</p> <p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and left</p> <p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width:...
...
6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-width' in that specification.
box-shadow - CSS: Cascading Style Sheets
syntax /* keyword values */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow:
60px -1
6px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* global keywords ...
... html <div><p>hello world</p></div> css p { box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #
66ccff; margin: 4em; padding:1em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'box-shadow' in that specification.
box-sizing - CSS: Cascading Style Sheets
html <div class="content-box">content box</div> <br> <div class="border-box">border box</div> css div { width: 1
60px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box { box-sizing: content-box; /* total width: 1
60px + (2 * 20px) + (2 * 8px) = 21
6px total height: 80px + (2 * 20px) + (2 * 8px) = 13
6px content box width: 1
60px content box height: 80px */ } .border-box { box-sizing: border-box; /* total width: 1
60px total height: 80px ...
... content box width: 1
60px - (2 * 20px) - (2 * 8px) = 104px content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ } result specifications specification status comment css basic user interface module level 3the definition of 'box-sizing' in that specification.
calc() - CSS: Cascading Style Sheets
in this example, the css creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding:
6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.
... let's look at some css: input { padding: 2px; display: block; width: calc(100% - 1em); } #formbox { width: calc(100% /
6); border: 1px solid black; padding: 4px; } here, the form itself is established to use 1/
6 of the available window width.
color - CSS: Cascading Style Sheets
syntax /* keyword values */ color: currentcolor; /* <named-color> values */ color: red; color: orange; color: tan; color: rebeccapurple; /* <hex-color> values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* <rgb()> values */ color: rgb(34, 12,
64, 0.
6); color: rgba(34, 12,
64, 0.
6); color: rgb(34 12
64 / 0.
6); color: rgba(34 12
64 / 0.3); color: rgb(34.0 12
64 /
60%); color: rgba(34.
6 12
64 / 30%); /* <hsl()> values */ color: hsl(30, 100%, 50%, 0.
6); color: hsla(30, 100%, 50%, 0.
6); color: hsl(30 100% 50% / 0.
6); color: hsla(30 100% 50% / 0.
6); color: hsl(30.0 100% 50% /
60%); color: hsla(30.2 100% 50% /
60%); /* global values */ color...
...large text is defined as 18.
66px and bold or larger, or 24px or larger.
<filter-function> - CSS: Cascading Style Sheets
<option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac
6dd7
678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width:
60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); const slider = document.
... 0; slider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { slider.value = 0; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'hue-rotate') { slider.value = 0; slider.min = 0; slider.max = 3
60; slider.step = 1; slider.setattribute('data-unit', 'deg'); } } function setdiv(filter) { if(filter === 'drop-shadow') { divelem.style.filter = `${selectelem.value}(${math.round(slider.value)}${slider.getattribute('data-unit')} ${math.round(slider.value)}${slider.getattribute('data-unit')} ${math.round(math.abs(slider.value/2))}${slider.getattribute('data-unit')})`; } else { ...
font - CSS: Cascading Style Sheets
line-height must immediately follow font-size, preceded by "/", like this: "1
6px/3" font-family must be the last value specified.
...e="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setcss()"> <label for="font-weight-bold">bold</label> </div> <div class="setpropcont"> font-size<br/> <input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setcss()"> <label for="font-size-12px">12px</label><br/> <input type="radio" id="font-size-1
6px" name="font_size" value="1
6px" checked="" onchange="setcss()"> <label for="font-size-1
6px">1
6px</label><br/> <input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setcss()"> <label for="font-size-24px">24px</label> </div> <div class="setpropcont"> line-height<br/> <input type="radio" id="line-height-none" name="line_...
grid-row - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: grid-row-end grid-row-start syntax /* keyword values */ grid-row: auto; grid-row: auto / auto; /* <custom-ident> values */ grid-row: somegridarea; grid-row: somegridarea / someothergridarea; /* <integer> + <custom-ident> values */ grid-row: somegridarea 4; grid-row: 4 somegridarea /
6; /* span + <integer> + <custom-ident> values */ grid-row: span 3; grid-row: span somegridarea; grid-row: 5 somegridarea span; grid-row: span 3 /
6; grid-row: span somegridarea / span someothergridarea; grid-row: 5 somegridarea span / 2 span; /* global values */ grid-row: inherit; grid-row: initial; grid-row: unset; values auto is a keyword indicating that the property contributes nothing ...
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid row size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(
6, 1fr); } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-row: 2 / 4; } #item3 { background-color: blue; grid-row: span 2 / 7; } result specifications specification status comment css grid layoutthe definition of 'grid-row' in that specification.
mask-position - CSS: Cascading Style Sheets
| [ [ 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/12
67
6/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> <...
...option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="
60% 20%">
60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
mask-repeat - CSS: Cascading Style Sheets
example: an image with an original width of 2
60px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added.
...itednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12
67
6/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option val...
mask-size - CSS: Cascading Style Sheets
/* keywords syntax */ mask-size: cover; mask-size: contain; /* one-value syntax */ /* the width of the image (height set to 'auto') */ mask-size: 50%; mask-size: 3em; mask-size: 12px; mask-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ mask-size: 50% auto; mask-size: 3em 25%; mask-size: auto
6px; mask-size: auto auto; /* multiple values */ /* do not confuse this with mask-size: auto auto */ mask-size: auto, auto; mask-size: 50%, 25%, 25%; mask-size:
6px, auto, contain; /* global values */ mask-size: inherit; mask-size: initial; mask-size: unset; note: if the value of this property is not set in a mask shorthand property that is applied to the element after the mask-size css propert...
...t of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12
668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12
668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px...
object-fit - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobject-fitchrome full support 31edge full support 1
6notes full support 1
6notes notes edge supports object-fit on img elements only.
... see edge issue 13
603873 for details.firefox full support 3
6ie no support noopera full support 19 full support 19 full support 11.
6prefixed prefixed implemented with the vendor prefix: -o-safari full support 10webview android full support 4.4.3chrome android full support 31firefox android full support 3
6opera android full support 19 ...
opacity - CSS: Cascading Style Sheets
large text is defined as 18.
66px and bold or larger, or 24px or larger.
...nd-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ } result setting opacity on hover html <img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width="128" height="14
6" class="opacity"> css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; /* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; } result specifications specification status comment css color module level 4the definition of 'opacity' in that specificatio...
outline-color - CSS: Cascading Style Sheets
large text is defined as 18.
66px and bold or larger, or 24px or larger.
...me for androidfirefox for androidopera for androidsafari on iossamsung internetoutline-colorchrome full support 1edge full support 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 37chrome android full support ...
overflow - CSS: Cascading Style Sheets
[1] as of firefox
63, this feature is behind a feature preference setting.
...n respectively if one of overflow-x or overflow-y is neither visible nor clipoverflow-y: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax [ visible | hidden | clip | scroll | auto ]{1,2} examples setting different overflow values for text p { width: 12em; height:
6em; border: dotted; overflow: visible; /* content is not clipped */ } visible (default) sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
repeat() - CSS: Cascading Style Sheets
/* <track-repeat> values */ repeat(4, 1fr) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start]
60% [col-end]) repeat(4, [col-start] 1fr [col-end]) repeat(4, [col-start] min-content [col-end]) repeat(4, [col-start] max-content [col-end]) repeat(4, [col-start] auto [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) repeat(4, [col-start] min-content [col-middle] max-content [c...
...uto-repeat> values */ repeat(auto-fill, 250px) repeat(auto-fit, 250px) repeat(auto-fill, [col-start] 250px [col-end]) repeat(auto-fit, [col-start] 250px [col-end]) repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) /* <fixed-repeat> values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start]
60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) syntax values <length> a positive integer length.
scroll-snap-stop - CSS: Cascading Style Sheets
css /* setup */ :root, body { height: 100%; display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 25
6px; height: 25
6px; flex-flow: column nowrap; } /* definite scroll snap */ .mandatory-scroll-snapping > div { scroll-snap-stop: always; } .proximity-scroll-snapping > div { scroll-snap-stop: normal; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-...
...snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size:
64px; width: 100%; height: 128px; } .y.container > div { line-height: 25
6px; font-size: 128px; width: 25
6px; height: 25
6px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size:
64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } html <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>x mand.
scroll-snap-type - CSS: Cascading Style Sheets
css /* setup */ html, body, .holster { height: 100%; } .holster { display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 25
6px; height: 25
6px; flex-flow: column nowrap; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: center; scroll-snap-align: c...
...enter; flex: none; } .x.container > div { line-height: 128px; font-size:
64px; width: 100%; height: 128px; } .y.container > div { line-height: 25
6px; font-size: 128px; width: 25
6px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size:
64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } results specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-type' in that specification.
translateZ() - CSS: Cascading Style Sheets
in the above interactive examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the
6 sides of the cube, are also positioned in the 3d space), have been set on the cube.
... html <div>static</div> <div class="moved">moved</div> css div { position: relative; width:
60px; height:
60px; left: 100px; background-color: skyblue; } .moved { transform: perspective(500px) translatez(200px); background-color: pink; } what really matters here is the class "moved"; let's take a look at what it does.
<transform-function> - CSS: Cascading Style Sheets
html <main> <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </section> <div class="select-form"> <label>select a transform function</label> <select> <option selected>choose a function</option> <option>rotate(3
60deg)</option> <option>rotatex(3
60deg)</option> <option>rotatey(3
60deg)</option> <option>rotatez(3
60deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option> <option>scale(1.5)</option> ...
...x; background-image: linear-gradient(135deg, white, cyan, white); } #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: rg...
transform-style - CSS: Cascading Style Sheets
html <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">
6</div> </section> <div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </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', () =...
transition-timing-function - CSS: Cascading Style Sheets
nd; /* 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, step-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 corre...
...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-con...
vertical-align - CSS: Cascading Style Sheets
for example, it could be used to vertically position an <img> in a line of text: <p> top:<img style="vertical-align:top" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> middle:<img style="vertical-align:middle" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> bottom:<img style="vertical-align:bottom" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> super:<img style="vertical-align:super" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> sub:<img style="vertical-align:sub" src="https://udn.realityrippl...
...e.com/samples/1
6/ed9c
61c3b
6.png"/> </p> <p> text-top:<img style="vertical-align:text-top" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> text-bottom:<img style="vertical-align:text-bottom" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> 0.2em:<img style="vertical-align:0.2em" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> -1em:<img style="vertical-align:-1em" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> 20%:<img style="vertical-align:20%" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/1
6/ed9c
61c3b
6.png"/> </p> #* { box-sizing: border-box; } img { margin-right: 0.5em; } p { height: 3em; padding: 0 .5em; font...
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/191a7bd2a5.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="dis...
... desktop desktop browser version chrome 4+ firefox 3.5+ internet explorer 9+ opera 10.5+ safari 4+ mobile mobile browser version chrome (android) 32+ firefox (android) 2
6+ 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+ ✓ ✓ *2
6+ ✓ ✓ *14+ safari 5+ ✓ ✓ chrome
6+ ✓ ✓ ✓ ✓ *9+ ...
Live streaming web audio and video - Developer guides
streaming file format support browser dash hls opus (audio) firefox 32 ✓ [1] ✓ [2] ✓ 14+ safari
6+ ✓ chrome 24+ ✓ [1] ✓ opera 20+ ✓ [1] internet explorer 10+ ✓ 11 ✓ [2] firefox mobile ✓ ✓ ✓ safari ios
6+ ✓ chrome mobile ✓ ✓ [2] opera mobile ✓ [1] ✓ internet explorer mobile ✓ 11 ✓ [2] ...
...through its plugin system, gstreamer provides support for more than a hundred codecs (including mpeg-1, mpeg-2, mpeg-4, h.2
61, h.2
63, h.2
64, realvideo, mp3, wmv, and flv.) gstreamer plugins such as souphttpclientsink and shout2send exist to stream media over http.
Web Audio playbackRate explained - Developer guides
next we set playbackrate to 0.5, which represents half normal speed (the playbackrate is a multiplier applied to the original rate.) a complete example let's create a <video> element first, and set up video and playback rate controls in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/
6f/08
625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd
6da9c
65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var...
... browser support chrome 20+ ✔ firefox 20+ ✔ ie 9+ ✔ safari
6+ ✔ opera 15+ ✔ mobile chrome (android) ✖ mobile firefox 24+ ✔ ie mobile ✖ mobile safari
6+ (ios) ✔ opera mobile ✖ notes most browsers stop playing audio outside playbackrate bounds of 0.5 and 4, leaving the video playing silently.
Creating a cross-browser video player - Developer guides
s-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="57
6"> <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 al...
...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:2147483
647; } 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
box!</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, 20
6, 247); 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...
... 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, 20
6, 247); 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; }...
Content categories - Developer guides
they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h
6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and ...
... elements belonging to this category are <h1>, <h2>, <h3>, <h4>, <h5>, <h
6> and <hgroup>.
The Unicode Bidirectional Text Algorithm - Developer guides
initial unicode bidi algorithm control characters character code point html entity markup equivalent description left-to-right isolate (lri) u+20
66  
66; dir="ltr" sets the base direction to ltr, isolating the embedded content from the surrounding text right-to-left isolate (lri) u+20
67  
67; dir="rtl" sets the base direction to rtl, isolating the embedded content from the surrounding text first strong isolate (fsi) u+20
68  
68; dir="auto" isolates the content and sets the base dir...
... order, from right to left closing unicode bidi algorithm control characters character code point html entity markup equivalent description pop directional formatting (pdf) u+202c ‬ closing whatever opening tag used the dir attribute used for rle or lre </bdo> used for rlo or lro pop directional isolate (pdi) u+20
69  
69; closing whatever opening tag used the dir attribute used for rli, lri, or fsi ...
HTML attribute: max - HTML: Hypertext Markup Language
ax="2019-12" step="12"> week yyyy-w## <input type="week" max="2019-w23" step=""> time hh:mm <input type="time" max="17: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 contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and rangeoverflow for more information.
... 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: maxlength - HTML: Hypertext Markup Language
the maxlength attribute defines the maximum number of characters (as utf-1
6 code units) the user can enter into an <input> or <textarea>.
...the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-1
6 code units long.
HTML attribute: min - HTML: Hypertext Markup Language
in="2019-12" step="12"> week yyyy-w## <input type="week" min="2019-w23" step=""> time hh:mm <input type="time" min="09:00" step="900"> datetime-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t19:30"> 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 min value set, the value is considered invalid in contraint validation and will match the :invalid pseudoclass see client-side validation and rangeunderflow for more information.
... syntax for min values for other elements input type syntax example <meter> <number> <meter id="fuel" min="0" max="100" low="33" high="
66" optimum="80" value="40"> at 40/100</meter> impact on step the value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0.
HTML attribute: minlength - HTML: Hypertext Markup Language
the minlength attribute defines the minimum number of characters (as utf-1
6 code units) the user can enter into an <input> or <textarea>.
... the input will fail constraint validation if the length of the text value of the field is less than minlength utf-1
6 code units long, with validitystate.tooshort returning true.
<article>: The Article Contents element - HTML: Hypertext Markup Language
usage notes each <article> should be identified, typically by including a heading (<h1>-<h
6> element) as a child of the <article> element.
... examples <article class="film_review"> <header> <h2>jurassic park</h2> </header> <section class="main_review"> <p>dinos were great!</p> </section> <section class="user_reviews"> <article class="user_review"> <p>way too scary for me.</p> <footer> <p> posted on <time datetime="2015-05-1
6 19:00">may 1
6</time> by lisa.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
css details { font: 1
6px "open sans", calibri, sans-serif; width:
620px; } details > summary { padding: 2px
6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px
6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interf...
... css details { font: 1
6px "open sans", calibri, sans-serif; width:
620px; } details > summary { padding: 2px
6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px
6px; margin: 0; b...
<input type="file"> - HTML: Hypertext Markup Language
ubmit</button> </div> </form> html { font-family: sans-serif; } form { width: 580px; background: #ccc; margin: 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; col...
... function returnfilesize(number) { if(number < 1024) { return number + 'bytes'; } else if(number >= 1024 && number < 104857
6) { return (number/1024).tofixed(1) + 'kb'; } else if(number >= 104857
6) { return (number/104857
6).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.
<input type="week"> - HTML: Hypertext Markup Language
<input> elements of type week create input fields allowing easy entry of a year plus the iso 8
601 week number during that year (i.e., week 1 to 52 or 53).
... for week inputs, the value of step is given in weeks, with a scaling factor of
604,800,000 (since the underlying numeric value is in milliseconds).
<picture>: The Picture element - HTML: Hypertext Markup Language
<picture> <source srcset="mdn-logo-wide.png" media="(min-width:
600px)"> <img src="mdn-logo-narrow.png" alt="mdn"> </picture> the srcset attribute the srcset attribute is used to offer list of possible images based on size.
... <picture> <source srcset="logo-7
68.png 7
68w, logo-7
68-1.5x.png 1.5x"> <source srcset="logo-480.png, logo-480-2x.png 2x"> <img src="logo-320.png" alt="logo"> </picture> the type attribute the type attribute specifies a mime type for the resource url(s) in the <source> element's srcset attribute.
<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.
itemid - HTML: Hypertext Markup Language
hamilton <dt>publication date <dd><time itemprop="pubdate" datetime="199
6-01-2
6">2
6 january 199
6</time> </dl> structured data itemscope itemtype: itemid http://vocab.example.net/book: urn:isbn:0-330-34032-8 itemprop title the reality dysfunction itemprop author peter f.
... hamilton itemprop pubdate 199
6-01-2
6 result specifications specification status comment html living standardthe definition of 'itemid' in that specification.
itemtype - HTML: Hypertext Markup Language
itemscope itemtype schema.org product itemprop name executive anvil itemprop brand [thing] itemprop name acme example html <div itemscope itemtype="http://schema.org/product"> <span itemprop="brand">acme<br></span> <span itemprop="name">executive anvil<br></span> <img itemprop="image" src="https://udn.realityripple.com/samples/
61/fa8ee
62aba.png" width="50" height="50" alt="executive anvil logo" /><br> <span 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.
...</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-924
605_9
60_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.
Microdata - HTML: Hypertext Markup Language
html <div itemscope itemtype="http://schema.org/softwareapplication"> <span itemprop="name">angry birds</span> - requires <span itemprop="operatingsystem">android</span><br> <link itemprop="applicationcategory" href="http://schema.org/gameapplication"/> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">4.
6</span> ( <span itemprop="ratingcount">88
64</span> ratings ) </div> <div itemprop="offers" itemscope itemtype="http://schema.org/offer"> price: $<span itemprop="price">1.00</span> <meta itemprop="pricecurrency" content="usd" /> </div> </div> structured data itemscope itemtype softwareapplication (http://schema.org/softwareapplication) itemprop n...
...ame angry birds itemprop operatingsystem android itemprop applicationcategory gameapplication (http://schema.org/gameapplication) itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.
6 itemprop ratingcount 88
64 itemscope itemprop[itemtype] offers [offer] itemprop price 1.00 itemprop pricecurrency usd result note: a handy tool for extracting microdata structures from html is google's structured data testing tool.
Identifying resources on the Web - HTTP
urn:isbn:978014103
6144 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-81
6-555-1212 git@github.com:mdn/browser-compat-data.git ftp://example.org/resource.txt urn:isbn:978014103
6144 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/48ea452803907f2575d81021e8
678
634e80
67fc2/browser/app/profile/firefox.js#575 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 8
6324
6, which landed in firefox 57 (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
67 and earlier, the origin of the page was defined as the directory from which the page was opened.
... in response to cve-2019-11730, firefox
68 and later define the origin of a page opened using a file:/// uri as unique.
HTTP caching - HTTP
incomplete results: a 20
6 (partial content) response.
... cache-control: max-age=3153
6000 validation when using the "must-revalidate" directive, the cache must verify the status of the stale resources before using it and expired ones should not be used.
Connection management in HTTP/1.x - HTTP
default was once 2 to 3 connections, but this has now increased to a more common use of
6 parallel connections.
...each of these domains resolve to the same server, and the web browser will open
6 connections to each (in our example, boosting the connections to 18).
Accept-Language - HTTP
if the server cannot serve any matching language, it can theoretically send back a 40
6 (not acceptable) error code.
...other variants like the type of orthography ('de-de-199
6') are usually not used in the context of this header.
Cache-Control - HTTP
cache-control: public, max-age=
604800, immutable requiring revalidation specifying no-cache or max-age=0 indicates that clients can cache a resource and must revalidate each time before using it.
... cache-control: no-cache cache-control: no-cache, max-age=0 specifications specification status comment rfc 824
6: http immutable responses ietf rfc rfc 7234: hypertext transfer protocol (http/1.1): caching ietf rfc rfc 58
61: http cache-control extensions for stale content ietf rfc initial definition ...
CSP: report-to - HTTP
report-to: { "group": "csp-endpoint", "max_age": 1088
6400, "endpoints": [ { "url": "https://example.com/csp-reports" } ] }, { "group": "hpkp-endpoint", "max_age": 1088
6400, "endpoints": [ { "url": "https://example.com/hpkp-reports" } ] } content-security-policy: ...; report-to csp-endpoint report-to: { "group": "endpoint-1", "max_a...
...ge": 1088
6400, "endpoints": [ { "url": "https://example.com/reports" }, { "url": "https://backup.com/reports" } ] } content-security-policy: ...; report-to endpoint-1 ...
Content-Type - HTTP
<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:
68137 content-type: multipart/form-data; boundary=---------------------------9747
67299852498929531
610575 -----------------------------9747
67299852498929531
610575 content-disposition: form-data; name="description" some text -----------------------------9747
67299852498929531
610575 content-disposition: form-data; name="myfile"; filename="foo.txt" content-type: text/plain (content of the uploaded fi...
...le foo.txt) -----------------------------9747
67299852498929531
610575-- 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 ...
Expect-CT - HTTP
if a cache receives a value greater than it can represent, or if any of its subsequent calculations overflows, the cache will consider this value to be either 2,147,483,
648 (231) or the greatest positive integer it can represent.
... expect-ct: max-age=8
6400, enforce, report-uri="https://foo.example/report" notes root cas manually added to the trust store override and suppress expect-ct reports/enforcement.
If-None-Match - HTTP
they are a string of ascii characters placed between double quotes (like "
675af345
63dc-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: "bfc13a
64729c4290ef5b2c2730249c88ca92d82d" if-none-match: w/"
67ab43", "54ed21", "7892dd" if-none-match: * specifications specification title rfc 7232, section 3.2: if-none-match hypertext transfer protocol (http/1.1): conditional requests ...
Sec-WebSocket-Accept - HTTP
header type response header forbidden header name no syntax sec-websocket-accept: <hashed key> directives <hashed key> the server takes the value of the sec-websocket-key sent in the handshake request, appends 258eafa5-e914-47da-95ca-c5ab0dc85b11, takes sha-1 of the new value, and is then base
64 encoded.
... examples sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo= specification specification title rfc
6455, section 11.3.3: sec-websocket-accept the websocket protocol ...
Strict-Transport-Security - HTTP
strict-transport-security: max-age=3153
6000; includesubdomains in the following example, max-age is set to 2 years, raised from what was a former limit max-age of 1 year.
... strict-transport-security: max-age=
63072000; includesubdomains; preload specifications specification status comment http strict transport security (hsts) ietf rfc initial definition ...
Upgrade - HTTP
a server may also send the header as part of a 42
6 upgrade required response, to indicate that the server won't perform the request using the current protocol, but might do so if the protocol is changed.
... examples connection: upgrade upgrade: http/2.0, shttp/1.3, irc/
6.9, rta/x11 connection: upgrade upgrade: websocket specifications specification hypertext transfer protocol (http/1.1): message syntax and routing (http/1.1)# header.upgrade hypertext transfer protocol (http/1.1): semantics and content (http/1.1)# status.42
6 hypertext transfer protocol version 2 (http/2) (http/2)# informational-responses ...
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-479b075b2891b" accept-ranges: bytes content-length: 297
69 content-type: text/html <!doctype html...
... (here comes the 297
69 bytes of the requested web page) close or reuse the connection for further requests.
About JavaScript - JavaScript
the first ever javascript was created by brendan eich at netscape, and has since been updated to conform to ecma-2
62 edition 5 and later versions.
...like spidermonkey, rhino is ecma-2
62 edition 5 compliant.
Control flow and error handling - JavaScript
important: javascript before ecmascript2015 (
6th edition) does not have block scope!
... switch (fruittype) { case 'oranges': console.log('oranges are $0.59 a pound.'); break; case 'apples': console.log('apples are $0.32 a pound.'); break; case 'bananas': console.log('bananas are $0.48 a pound.'); break; case 'cherries': console.log('cherries are $3.00 a pound.'); break; case 'mangoes': console.log('mangoes are $0.5
6 a pound.'); break; case 'papayas': console.log('mangoes and papayas are $2.79 a pound.'); break; default: console.log(`sorry, we are out of ${fruittype}.`); } console.log("is there anything else you'd like?"); exception handling statements you can throw exceptions using the throw statement and handle them using the try...catch statements.
Introduction - JavaScript
the ecmascript standard is documented in the ecma-2
62 specification.
... the ecma-2
62 standard is also approved by the iso (international organization for standardization) as iso-1
62
62.
Loops and iteration - JavaScript
therefore, x and n take on the following values: after the first pass: n = 1 and x = 1 after the second pass: n = 2 and x = 3 after the third pass: n = 3 and x =
6 after completing the third pass, the condition n < 3 is no longer true, so the loop terminates.
... 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.
Quantifiers - JavaScript
ar> </foo> thing": /<.*>/ will match "<foo> <bar> new </bar> </foo>" /<.*?>/ will match "<foo>" examples repeated pattern var wordendingwithas = /\w+a+\b/; var delicatemessage = "this is spartaaaaaaa"; console.table(delicatemessage.match(wordendingwithas)); // [ "spartaaaaaaa" ] counting characters var singleletterword = /\b\w\b/g; var notsolongword = /\b\w{1,
6}\b/g; var loooongword = /\b\w{13,}\b/g; var sentence = "why do i have to learn multiplication table?"; console.table(sentence.match(singleletterword)); // ["i"] console.table(sentence.match(notsolongword)); // [ "why", "do", "i", "have", "to", "learn", "table" ] console.table(sentence.match(loooongword)); // ["multiplication"] optional character var britishtext = "he asked his neighb...
...al times console.log(text.match(greedyregexp)[0]); // "i must be getting somewhere near the centre of the earth" // almost all of the text matches (leaves out the dot character) var nongreedyregexp = /[\w ]+?/; // notice the question mark console.log(text.match(nongreedyregexp)); // "i" // the match is the smallest one possible specifications specification ecmascript (ecma-2
62)the definition of 'regexp: quantifiers' in that specification.
JavaScript technologies overview - JavaScript
a prototype-based inheritance mechanism built-in objects and functions (json, math, array.prototype methods, object introspection methods, etc.) strict mode browser support as of october 201
6, the current versions of the major web browsers implement ecmascript 5.1 and ecmascript 2015, but older versions (still in use) implement ecmascript 5 only.
... future the major
6th edition of ecmascript was officially approved and published as a standard on june 17, 2015 by the ecma general assembly.
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" (2007) kangax article on how to register event handler and avoid memory leaks (2010) performance ...
static - JavaScript
class triple { static triple(n = 1) { return n * 3; } } class biggertriple extends triple { static triple(n) { return super.triple(n) * super.triple(n); } } console.log(triple.triple()); // 3 console.log(triple.triple(
6)); // 18 var tp = new triple(); console.log(biggertriple.triple(3)); // 81 (not affected by parent's instantiation) console.log(tp.triple()); // 'tp.triple is not a function'.
... class staticmethodcall { constructor() { console.log(staticmethodcall.staticmethod()); // 'static method has been called.' console.log(this.constructor.staticmethod()); // 'static method has been called.' } static staticmethod() { return 'static method has been called.'; } } specifications specification ecmascript (ecma-2
62)the definition of 'class definitions' in that specification.
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.0710
678118
654755 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.
...put can be used to implement mix-ins in ecmascript: let calculatormixin = base => class extends base { calc() { } }; let randomizermixin = base => class extends base { randomize() { } }; a class that uses these mix-ins can then be written like this: class foo { } class bar extends calculatormixin(randomizermixin(foo)) { } specifications specification ecmascript (ecma-2
62)the definition of 'class definitions' in that specification.
Deprecated and obsolete features - JavaScript
the following traps are obsolete: hasown (bug 9805
65, firefox 33).
... string.prototype.substr probably won't be removed anytime soon, but it's defined in annex b of the ecma-2
62 standard, whose introduction states: "… programmers should not use or assume the existence of these features and behaviours when writing new ecmascript code.
SyntaxError: illegal character - JavaScript
var colors = ['#000', #333', '#
666']; // syntaxerror: illegal character add the missing quote for '#333'.
... var colors = ['#000', '#333', '#
666']; hidden characters when copy pasting code from external sources, there might be invalid characters.
Default parameters - JavaScript
' } function withdefaults(a, b = 5, c = b, d = go(), e = this, f = arguments, g = this.value) { return [a, b, c, d, e, f, g] } function withoutdefaults(a, b, c, d, e, f, g) { switch (arguments.length) { case 0: a; case 1: b = 5; case 2: c = b; case 3: d = go(); case 4: e = this; case 5: f = arguments; case
6: g = this.value; default: } return [a, b, c, d, e, f, g]; } withdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] withoutdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] scope effects if default parameters are defined for one or more parameter, then a second scope (environment record)...
... function f(x = 1, y) { return [x, y] } f() // [1, undefined] f(2) // [2, undefined] destructured parameter with default value assignment you can use default value assignment with the destructuring assignment notation: function f([x, y] = [1, 2], {z: z} = {z: 3}) { return x + y + z } f() //
6 specifications specification ecmascript (ecma-2
62)the definition of 'function definitions' in that specification.
Method definitions - JavaScript
const obja = { method() {} } new obja.method // typeerror: obj.method is not a constructor const objb = { * g() {} } new objb.g // typeerror: obj.g is not a constructor (changed in es201
6) examples simple test case const obj = { a: 'foo', b() { return this.a } }; console.log(obj.b()) // "foo" computed property names the shorthand syntax also supports computed property names.
... const bar = { foo0: function() { return 0 }, foo1() { return 1 }, ['foo' + 2]() { return 2 } } console.log(bar.foo0()) // 0 console.log(bar.foo1()) // 1 console.log(bar.foo2()) // 2 // a global function function foo() { return 1 } let name = 'foo' console.log(window[name]()) // 1 specifications specification ecmascript (ecma-2
62)the definition of 'method definitions' in that specification.
arguments[@@iterator]() - JavaScript
syntax arguments[symbol.iterator]() examples iteration using for...of loop function f() { // your browser must support for..of loop // and let-scoped variables in for loops for (let letter of arguments) { console.log(letter); } } f('w', 'y', 'k', 'o', 'p'); specifications specification ecmascript (ecma-2
62)the definition of 'createunmappedargumentsobject' in that specification.
... ecmascript (ecma-2
62)the definition of 'createmappedargumentsobject' in that specification.
The arguments object - JavaScript
description note: if you're writing es
6 compatible code, then rest parameters should be preferred.
...ts[0] does not also update a console.log(a); } func(10); // 10 and also: function func(a = 55) { a = 99; // updating a does not also update arguments[0] console.log(arguments[0]); } func(10); // 10 and also: // an untracked default parameter function func(a = 55) { console.log(arguments[0]); } func(); // undefined specifications specification ecmascript (ecma-2
62)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...
... the following code concatenates nested arrays and demonstrates retention of references: const num1 = [[1]]; const num2 = [2, [3]]; const numbers = num1.concat(num2); console.log(numbers); // results in [[1], 2, [3]] // modify the first element of num1 num1[0].push(4); console.log(numbers); // results in [[1, 4], 2, [3]] specifications specification ecmascript (ecma-2
62)the definition of 'array.prototype.concat' in that specification.
Array.prototype.fill() - JavaScript
var len = o.length >>> 0; // steps
6-7.
... 2, 3].fill(4, 3, 5) // [1, 2, 3] array(3).fill(4) // [4, 4, 4] [].fill.call({ length: 3 }, 4) // {0: 4, 1: 4, 2: 4, length: 3} // a single object, referenced by each slot of the array: let arr = array(3).fill({}) // [{}, {}, {}] arr[0].hi = "hi" // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] specifications specification ecmascript (ecma-2
62)the definition of 'array.prototype.fill' in that specification.
Array.prototype.forEach() - JavaScript
[1] = 5 // a[3] = 9 using thisarg the following (contrived) example updates an object's properties from each entry in the array: function counter() { this.sum = 0 this.count = 0 } counter.prototype.add = function(array) { array.foreach((entry) => { this.sum += entry ++this.count }, this) // ^---- note } const obj = new counter() obj.add([2, 5, 9]) obj.count // 3 obj.sum // 1
6 since the thisarg parameter (this) is provided to foreach(), it is passed to callback each time it's invoked.
... 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-2
62)the definition of 'array.prototype.foreach' in that specification.
Array.prototype.unshift() - JavaScript
see example: let arr = [4, 5,
6] arr.unshift(1, 2, 3) console.log(arr); // [1, 2, 3, 4, 5,
6] arr = [4, 5,
6] // resetting the array arr.unshift(1) arr.unshift(2) arr.unshift(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-2
62)the definition of 'array.prototype.unshift' in that specification.
ArrayBuffer - JavaScript
you can also get an array buffer from existing data, for example from a base
64 string or from a local file.
... examples creating an arraybuffer in this example, we create a 8-byte buffer with a int32array view referring to the buffer: const buffer = new arraybuffer(8); const view = new int32array(buffer); specifications specification ecmascript (ecma-2
62)the definition of 'arraybuffer' in that specification.
Atomics.add() - JavaScript
one of int8array, uint8array, int1
6array, uint1
6array, int32array, uint32array, bigint
64array, or biguint
64array.
... examples using add() const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); atomics.add(ta, 0, 12); // returns 0, the old value atomics.load(ta, 0); // 12 specifications specification ecmascript (ecma-2
62)the definition of 'atomics.add' in that specification.
Atomics.and() - JavaScript
one of int8array, uint8array, int1
6array, uint1
6array, int32array, uint32array, bigint
64array, or biguint
64array.
... 5 0101 1 0001 ---- 1 0001 examples using and() const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 5; atomics.and(ta, 0, 1); // returns 0, the old value atomics.load(ta, 0); // 1 specifications specification ecmascript (ecma-2
62)the definition of 'atomics.and' in that specification.
Atomics.compareExchange() - JavaScript
one of int8array, uint8array, int1
6array, uint1
6array, int32array, uint32array, bigint
64array, or biguint
64array.
... examples using compareexchange() const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 7; atomics.compareexchange(ta, 0, 7, 12); // returns 7, the old value atomics.load(ta, 0); // 12 specifications specification ecmascript (ecma-2
62)the definition of 'atomics.compareexchange' in that specification.
Atomics.exchange() - JavaScript
one of int8array, uint8array, int1
6array, uint1
6array, int32array, uint32array, bigint
64array, or biguint
64array.
... examples using exchange() const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); atomics.exchange(ta, 0, 12); // returns 0, the old value atomics.load(ta, 0); // 12 specifications specification ecmascript (ecma-2
62)the definition of 'atomics.exchange' in that specification.
Atomics.load() - JavaScript
one of int8array, uint8array, int1
6array, uint1
6array, int32array, uint32array, bigint
64array, or biguint
64array.
... examples using load const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); atomics.add(ta, 0, 12); atomics.load(ta, 0); // 12 specifications specification ecmascript (ecma-2
62)the definition of 'atomics.load' in that specification.
Atomics.or() - JavaScript
one of int8array, uint8array, int1
6array, uint1
6array, int32array, uint32array, bigint
64array, or biguint
64array.
... 5 0101 1 0001 ---- 5 0101 examples using or const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 2; atomics.or(ta, 0, 1); // returns 2, the old value atomics.load(ta, 0); // 3 specifications specification ecmascript (ecma-2
62)the definition of 'atomics.or' in that specification.
Atomics.store() - JavaScript
one of int8array, uint8array, int1
6array, uint1
6array, int32array, uint32array, bigint
64array, or biguint
64array.
... examples using store() var sab = new sharedarraybuffer(1024); var ta = new uint8array(sab); atomics.store(ta, 0, 12); // 12 specifications specification ecmascript (ecma-2
62)the definition of 'atomics.store' in that specification.
Atomics.sub() - JavaScript
one of int8array, uint8array, int1
6array, uint1
6array, int32array, uint32array, bigint
64array, or biguint
64array.
... examples using sub const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 48; atomics.sub(ta, 0, 12); // returns 48, the old value atomics.load(ta, 0); // 3
6 specifications specification ecmascript (ecma-2
62)the definition of 'atomics.sub' in that specification.
Atomics.xor() - JavaScript
one of int8array, uint8array, int1
6array, uint1
6array, int32array, uint32array, bigint
64array, or biguint
64array.
... 5 0101 1 0001 ---- 4 0100 examples using xor const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 5; atomics.xor(ta, 0, 1); // returns 5, the old value atomics.load(ta, 0); // 4 specifications specification ecmascript (ecma-2
62)the definition of 'atomics.xor' in that specification.
BigInt.asIntN() - JavaScript
examples staying in
64-bit ranges the bigint.asintn() method can be useful to stay in the range of
64-bit arithmetic.
... const max = 2n ** (
64n - 1n) - 1n; bigint.asintn(
64, max); // ↪ 922337203
6854775807n bigint.asintn(
64, max + 1n); // ↪ -922337203
6854775807n // negative because of overflow specifications specification ecmascript (ecma-2
62)the definition of 'bigint.asintn()' in that specification.
BigInt.asUintN() - JavaScript
examples staying in
64-bit ranges the bigint.asuintn() method can be useful to stay in the range of
64-bit arithmetic.
... const max = 2n **
64n - 1n; bigint.asuintn(
64, max); // ↪ 1844
6744073709551
615n bigint.asuintn(
64, max + 1n); // ↪ 0n // zero because of overflow specifications specification ecmascript (ecma-2
62)the definition of 'bigint.asuintn()' in that specification.
DataView() constructor - JavaScript
for example, if the buffer is 1
6 bytes long, the byteoffset is 8, and the bytelength is 10, this error is thrown because the resulting view tries to extend 2 bytes past the total length of the buffer.
... examples using dataview var buffer = new arraybuffer(1
6); var view = new dataview(buffer, 0); view.setint1
6(1, 42); view.getint1
6(1); // 42 specifications specification ecmascript (ecma-2
62)the definition of 'dataview constructor' in that specification.
Date.prototype.getDay() - JavaScript
syntax dateobj.getday() return value an integer number, between 0 and
6, corresponding to the day of the week for the given date, according to local time: 0 for sunday, 1 for monday, 2 for tuesday, and so on.
...using this method, the internationalization is made easier: var options = { weekday: 'long'}; console.log(new intl.datetimeformat('en-us', options).format(xmas95)); // monday console.log(new intl.datetimeformat('de-de', options).format(xmas95)); // montag specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.getday' in that specification.
Date.prototype.getTimezoneOffset() - JavaScript
for example, for time zone utc+10:00 (australian eastern standard time, vladivostok time, chamorro standard time), -
600 will be returned.
... examples using gettimezoneoffset() // get current timezone offset for host device let x = new date(); let currenttimezoneoffsetinhours = x.gettimezoneoffset() /
60; // 1 // get timezone offset for international labour day (may 1) in 201
6 // be careful, the date() constructor uses 0-indexed months, so may is // represented with 4 (and not 5) let labourday = new date(201
6, 4, 1) let labourdayoffset = labourday.gettimezoneoffset() /
60; specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.gettimezoneoff...
Date.prototype.setDate() - JavaScript
examples using setdate() var thebigday = new date(19
62,
6, 7); // 19
62-07-07 (7th of july 19
62) thebigday.setdate(24); // 19
62-07-24 (24th of july 19
62) thebigday.setdate(32); // 19
62-08-01 (1st of august 19
62) thebigday.setdate(22); // 19
62-08-22 (22th of august 19
62) thebigday.setdate(0); // 19
62-07-31 (31th of july 19
62) thebigday.setdate(98); // 19
62-10-0
6 (
6th of october 19
62) thebigday.setdate(-50); // 19
62-08-11 (11th of august 19
62) ...
...specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.setdate' in that specification.
Date.prototype.setYear() - JavaScript
examples using setyear() the first two lines set the year to 199
6.
... var thebigday = new date(); thebigday.setyear(9
6); thebigday.setyear(199
6); thebigday.setyear(2000); specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.setyear' in that specification.
Date.prototype.toTimeString() - JavaScript
the totimestring() method is especially useful because compliant engines implementing ecma-2
62 may differ in the string obtained from tostring() for date objects, as the format is implementation-dependent; simple string slicing approaches may not produce consistent results across multiple engines.
... examples a basic usage of totimestring() var d = new date(1993,
6, 28, 14, 39, 7); console.log(d.tostring()); // wed jul 28 1993 14:39:07 gmt-0
600 (pdt) console.log(d.totimestring()); // 14:39:07 gmt-0
600 (pdt) specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.totimestring' in that specification.
Date.prototype.toUTCString() - JavaScript
based on rfc7231 and modified according to ecma-2
62 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 2017 00:00:00 pdt'); let utcstring = today.toutcstring(); // wed, 14 jun 2017 07:00:00 gmt specifications specification ecmascript (ecma-2
62)the definition of 'date.prototype.toutcstring' in that specification.
Error - JavaScript
es
6 custom error class versions of babel prior to 7 can handle customerror class methods, but only when they are declared with object.defineproperty().
...e, configurable: true } }); if (object.setprototypeof){ object.setprototypeof(customerror, error); } else { customerror.__proto__ = error; } try { throw new customerror('baz', 'bazmessage'); } catch(e){ console.error(e.name); //customerror console.error(e.foo); //baz console.error(e.message); //bazmessage } specifications specification ecmascript (ecma-2
62)the definition of 'error' in that specification.
EvalError - JavaScript
although ecma-2
62 specifies that evalerror should provide its own message property, in spidermonkey, it inherits error.prototype.message.
...lerror); // true console.log(e.message); // "hello" console.log(e.name); // "evalerror" console.log(e.filename); // "somefile.js" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-2
62)the definition of 'evalerror' in that specification.
Function() constructor - JavaScript
// example can be run directly in your javascript console // create a function that takes two arguments, and returns the sum of those arguments const adder = new function('a', 'b', 'return a + b'); // call the function adder(2,
6); // 8 the arguments "a" and "b" are formal argument names that are used in the function body, "return a + b".
... specifications specification ecmascript (ecma-2
62)the definition of 'function constructor' in that specification.
Function.prototype.call() - JavaScript
function greet() { const reply = [this.animal, 'typically sleep between', this.sleepduration].join(' '); console.log(reply); } const obj = { animal: 'cats', sleepduration: '12 and 1
6 hours' }; greet.call(obj); // cats typically sleep between 12 and 1
6 hours using call to invoke a function and without specifying the first argument in the example below, we invoke the display function without passing the first argument.
... 'use strict'; var sdata = 'wisen'; function display() { console.log('sdata value is %s ', this.sdata); } display.call(); // cannot read the property of 'sdata' of undefined specifications specification ecmascript (ecma-2
62)the definition of 'function.prototype.call' in that specification.
Function.name - JavaScript
however, es2015 specifies the static keyword such that static methods will be set as ownproperty of the class constructor function (ecmascript2015, 14.5.14.21.b + 12.2.
6.9).
... let sym1 = symbol("foo"); let sym2 = symbol(); let o = { [sym1]: function(){}, [sym2]: function(){} }; o[sym1].name; // "[foo]" o[sym2].name; // "" specifications specification ecmascript (ecma-2
62)the definition of 'name' in that specification.
Generator.prototype.next() - JavaScript
xt(); // "object { value: undefined, done: true }" using next() with a list function* getpage(pagesize = 1, list) { let output = []; let index = 0; while (index < list.length) { output = []; for (let i = index; i < index + pagesize; i++) { if (list[i]) { output.push(list[i]); } } yield output; index += pagesize; } } list = [1, 2, 3, 4, 5,
6, 7, 8] var page = getpage(3, list); // generator { } page.next(); // object {value: (3) [1, 2, 3], done: false} page.next(); // object {value: (3) [4, 5,
6], done: false} page.next(); // object {value: (2) [7, 8], done: false} page.next(); // object {value: undefined, ...
... function* gen() { while (true) { let value = yield null; console.log(value); } } const g = gen(); g.next(1); // "{ value: null, done: false }" g.next(2); // 2 // "{ value: null, done: false }" specifications specification ecmascript (ecma-2
62)the definition of 'generator.prototype.next' in that specification.
Intl.DateTimeFormat() constructor - JavaScript
possible values include: "buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "iso8
601", "japanese", "persian", "roc".
...possible values include: "buddhist", "chinese", " coptic", "ethiopia", "ethiopic", "gregory", " hebrew", "indian", "islamic", "iso8
601", " japanese", "persian", "roc".
Intl.DisplayNames.prototype.of() - JavaScript
syntax displaynames.of(code); parameters code the code to provide depends on the type: if the type is "region", code should be either an iso-31
66 two letters region code, or a three digits un m49 geographic regions.
...languagecode is either a two letters iso
639-1 language code or a three letters iso
639-2 language code.
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.987)); // → "
654 321,99 руб." using format with map use the format getter function for formatting all numbers in an array.
... var a = [12345
6.789, 987
654.321, 45
6789.123]; var numberformat = new intl.numberformat('es-es'); var formatted = a.map(n => numberformat.format(n)); console.log(formatted.join('; ')); // → "123.45
6,789; 987.
654,321; 45
6.789,123" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.prototype.format' in that specification.
JSON - JavaScript
...but only in javascript engines that have implemented the proposal to make all json text valid ecma-2
62.
... examples example json { "browsers": { "firefox": { "name": "firefox", "pref_url": "about:config", "releases": { "1": { "release_date": "2004-11-09", "status": "retired", "engine": "gecko", "engine_version": "1.7" } } } } } specifications specification ecmascript (ecma-2
62)the definition of 'json' in that specification.
Map.prototype.delete() - JavaScript
specifications specification ecmascript (ecma-2
62)the definition of 'map.prototype.delete' in that specification.
... ecmascript 2015 (
6th edition, ecma-2
62)the definition of 'map.prototype.delete' in that specification.
Map - JavaScript
let contacts = new map() contacts.set('jessie', {phone: "213-555-1234", address: "123 n 1st ave"}) contacts.has('jessie') // true contacts.get('hilary') // undefined contacts.set('hilary', {phone: "
617-555-4321", address: "321 s 2nd st"}) contacts.get('jessie') // {phone: "213-555-1234", address: "123 n 1st ave"} contacts.delete('raymond') // false contacts.delete('jessie') // true console.log(contacts.size) // 1 constructor map() creates a new map object.
...let merged = new map([...first, ...second, [1, 'eins']]) console.log(merged.get(1)) // eins console.log(merged.get(2)) // dos console.log(merged.get(3)) // three specifications specification ecmascript (ecma-2
62)the definition of 'map' in that specification.
Math.LN2 - JavaScript
the math.ln2 property represents the natural logarithm of 2, approximately 0.
693: math.ln2=ln(2)≈0.
693\mathtt{\mi{math.ln2}} = \ln(2) \approx 0.
693 the source for this interactive example is stored in a github repository.
... examples using math.ln2 the following function returns the natural log of 2: function getnatlog2() { return math.ln2; } getnatlog2(); // 0.
6931471805599453 specifications specification ecmascript (ecma-2
62)the definition of 'math.ln2' in that specification.
Math.acos() - JavaScript
examples using math.acos() math.acos(-2); // nan math.acos(-1); // 3.141592
653589793 math.acos(0); // 1.57079
632
679489
66 math.acos(0.5); // 1.04719755119
65979 math.acos(1); // 0 math.acos(2); // nan for values less than -1 or greater than 1, math.acos() returns nan.
... specifications specification ecmascript (ecma-2
62)the definition of 'math.acos' in that specification.
Math.acosh() - JavaScript
geq 1, we have arcosh(x)=ln(x+x2-1)\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right) and so this can be emulated with the following function: math.acosh = math.acosh || function(x) { return math.log(x + math.sqrt(x * x - 1)); }; examples using math.acosh() math.acosh(-1); // nan math.acosh(0); // nan math.acosh(0.5); // nan math.acosh(1); // 0 math.acosh(2); // 1.31
695789
692481
66 for values less than 1 math.acosh() returns nan.
... specifications specification ecmascript (ecma-2
62)the definition of 'math.acosh' in that specification.
Math.asin() - JavaScript
examples using math.asin() math.asin(-2); // nan math.asin(-1); // -1.57079
632
679489
66 (-pi/2) math.asin(0); // 0 math.asin(0.5); // 0.5235987755982989 math.asin(1); // 1.57079
632
679489
66 (pi/2) math.asin(2); // nan for values less than -1 or greater than 1, math.asin() returns nan.
... specifications specification ecmascript (ecma-2
62)the definition of 'math.asin' 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.7252902984
61914e-9) // |x| < 2^-28 return x if (absx > 2
6843545
6) // |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.881373587019543 math.asinh(0); // 0 specifications specification ecmascript (ecma-2
62)the definition of 'math.asinh' in that specification.
Math.atan() - JavaScript
examples using math.atan() math.atan(1); // 0.7853981
633974483 math.atan(0); // 0 math.atan(-0); // -0 math.atan(infinity); // 1.57079
632
679489
66 math.atan(-infinity); // -1.57079
632
679489
66 // the angle that the line [(0,0);(x,y)] forms with the x-axis in a cartesian coordinate system math.atan(y / x); note that you may want to avoid using ±infinity for stylistic reasons.
... specifications specification ecmascript (ecma-2
62)the definition of 'math.atan' in that specification.
Math.atan2() - JavaScript
examples using math.atan2() math.atan2(90, 15); // 1.405
647
6493802
699 math.atan2(15, 90); // 0.1
65148
677414
62
683 math.atan2(±0, -0); // ±pi.
... specifications specification ecmascript (ecma-2
62)the definition of 'math.atan2' in that specification.
Math.atanh() - JavaScript
x|<1\left|x\right| < 1, we have artanh(x)=12ln(1+x1-x)\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right) so this can be emulated by the following function: math.atanh = math.atanh || function(x) { return math.log((1+x)/(1-x)) / 2; }; examples using math.atanh() math.atanh(-2); // nan math.atanh(-1); // -infinity math.atanh(0); // 0 math.atanh(0.5); // 0.54930
61443340548 math.atanh(1); // infinity math.atanh(2); // nan for values greater than 1 or less than -1, nan is returned.
... specifications specification ecmascript (ecma-2
62)the definition of 'math.atanh' in that specification.
Math.ceil() - JavaScript
exp) { return decimaladjust('round', value, exp); }; } // decimal floor if (!math.floor10) { math.floor10 = function(value, exp) { return decimaladjust('floor', value, exp); }; } // decimal ceil if (!math.ceil10) { math.ceil10 = function(value, exp) { return decimaladjust('ceil', value, exp); }; } })(); // round math.round10(55.55, -1); // 55.
6 math.round10(55.549, -1); // 55.5 math.round10(55, 1); //
60 math.round10(54.9, 1); // 50 math.round10(-55.55, -1); // -55.5 math.round10(-55.551, -1); // -55.
6 math.round10(-55, 1); // -50 math.round10(-55.1, 1); // -
60 // floor math.floor10(55.59, -1); // 55.5 math.floor10(59, 1); // 50 math.floor10(-55.51, -1); // -55.
6 math.floor10(-51, 1); // -
60 // ceil mat...
...h.ceil10(55.51, -1); // 55.
6 math.ceil10(51, 1); //
60 math.ceil10(-55.59, -1); // -55.5 math.ceil10(-59, 1); // -50 specifications specification ecmascript (ecma-2
62)the definition of 'math.ceil' in that specification.
Math.imul() - JavaScript
polyfill this can be emulated with the following function: if (!math.imul) math.imul = function(a, b) { var ahi = (a >>> 1
6) & 0xffff; var alo = a & 0xffff; var bhi = (b >>> 1
6) & 0xffff; var blo = b & 0xffff; // the shift by 0 fixes the sign on the high part // the final |0 converts the unsigned value into a signed value return ((alo * blo) + (((ahi * blo + alo * bhi) << 1
6) >>> 0) | 0); }; however, the following function is more performant because it is likely that browsers in which this polyfill would ...
... 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-2
62)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.4142135
623730951 (square root of 2) math.pow(2, 1/3); // 1.2599210498948732 (cube root of 2) // signed exponents math.pow(7, -2); // 0.0204081
632
6530
612 (1/49) math.pow(8, -1/3); // 0.5 // signed bases 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" ro...
...ots 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-2
62)the definition of 'math.pow' in that specification.
Math.tan() - JavaScript
examples using math.tan() math.tan(1); // 1.557407724
6549023 because the math.tan() function accepts radians, but it is often easier to work with degrees, the following function accepts a value in degrees, converts it to radians and returns the tangent.
... function gettandeg(deg) { var rad = deg * math.pi/180; return math.tan(rad); } specifications specification ecmascript (ecma-2
62)the definition of 'math.tan' in that specification.
Number.EPSILON - JavaScript
property attributes of number.epsilon writable no enumerable no configurable no description the epsilon property has a value of approximately 2.22044
60492503130808472
6333
6181
6e-1
6, or 2-52.
... polyfill if (number.epsilon === undefined) { number.epsilon = math.pow(2, -52); } examples testing equality x = 0.2; y = 0.3; z = 0.1; equal = (math.abs(x - y + z) < number.epsilon); specifications specification ecmascript (ecma-2
62)the definition of 'number.epsilon' in that specification.
Number.prototype.toFixed() - JavaScript
examples using tofixed let numobj = 12345.
6789 numobj.tofixed() // returns '1234
6': note rounding, no fractional part numobj.tofixed(1) // returns '12345.7': note rounding numobj.tofixed(
6) // returns '12345.
678900': 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'.
...note it rounds down - see warning above -2.34.tofixed(1) // returns -2.3 (due to operator precedence, negative number literals don't return a string...) (-2.34).tofixed(1) // returns '-2.3' specifications specification ecmascript (ecma-2
62)the definition of 'number.prototype.tofixed' in that specification.
Number.prototype.toPrecision() - JavaScript
ecma-2
62 only requires a precision of up to 21 significant digits.
... examples using toprecision let numobj = 5.12345
6 console.log(numobj.toprecision()) // logs '5.12345
6' console.log(numobj.toprecision(5)) // logs '5.1235' console.log(numobj.toprecision(2)) // logs '5.1' console.log(numobj.toprecision(1)) // logs '5' numobj = 0.000123 console.log(numobj.toprecision()) // logs '0.000123' console.log(numobj.toprecision(5)) // logs '0.00012300' console.log(numobj.toprecision(2)) // logs '0.00012' console.log(numobj.toprecision(1)) // logs '0.0001' // note that exponential notation might be returned in some circumstances console.log((1234.5).toprecision(2)) // logs '1.2e+3' specifications specification ecmascript (ecma-2
62)the definition of 'number.prototype.toprecision' in that specification.
Object.prototype.constructor - JavaScript
s added for reference): function type() {},false, // new array() function type() {},false, // [] function type() {},false,false // new boolean() function boolean() { [native code] },false,true // true function type() {},false,mon sep 01 2014 1
6:03:49 gmt+0
600 // new date() function type() {},false,error // new error() function type() {},false,function anonymous() { } // new function() function type() {},false,function () {} // function () {} function type() {},false,[object math] // math function ty...
... specifications specification ecmascript (ecma-2
62)the definition of 'object.prototype.constructor' in that specification.
Object.defineProperty() - JavaScript
ue: 1, enumerable: true }); object.defineproperty(o, 'b', { value: 2, enumerable: false }); object.defineproperty(o, 'c', { value: 3 }); // enumerable defaults to false o.d = 4; // enumerable defaults to true // when creating a property by setting it object.defineproperty(o, symbol.for('e'), { value: 5, enumerable: true }); object.defineproperty(o, symbol.for('f'), { value:
6, enumerable: false }); for (var i in o) { console.log(i); } // logs 'a' and 'd' (in undefined order) object.keys(o); // ['a', 'd'] o.propertyisenumerable('a'); // true o.propertyisenumerable('b'); // false o.propertyisenumerable('c'); // false o.propertyisenumerable('d'); // true o.propertyisenumerable(symbol.for('e')); // true o.propertyisenumerable(symbol.for('f')); // false var p = { .
...ction myclass() { } myclass.prototype.x = 1; object.defineproperty(myclass.prototype, "y", { writable: false, value: 1 }); var a = new myclass(); a.x = 2; console.log(a.x); // 2 console.log(myclass.prototype.x); // 1 a.y = 2; // ignored, throws in strict mode console.log(a.y); // 1 console.log(myclass.prototype.y); // 1 specifications specification ecmascript (ecma-2
62)the definition of 'object.defineproperty' in that specification.
Object.freeze() - JavaScript
ew with elements will cause a typeerror, as they are views over memory and will definitely cause other possible issues: > object.freeze(new uint8array(0)) // no elements uint8array [] > object.freeze(new uint8array(1)) // has elements typeerror: cannot freeze array buffer views with elements > object.freeze(new dataview(new arraybuffer(32))) // no elements dataview {} > object.freeze(new float
64array(new arraybuffer(
64),
63, 0)) // no elements float
64array [] > object.freeze(new float
64array(new arraybuffer(
64), 32, 2)) // has elements typeerror: cannot freeze array buffer views with elements note that; as the standard three properties (buf.bytelength, buf.byteoffset and buf.buffer) are read-only (as are those of an arraybuffer or sharedarraybuffer), there is no reason for attempting...
...e of propnames) { let value = object[name]; if(value && typeof value === "object") { deepfreeze(value); } } return object.freeze(object); } var obj2 = { internal: { a: null } }; deepfreeze(obj2); obj2.internal.a = 'anothervalue'; // fails silently in non-strict mode obj2.internal.a; // null specifications specification ecmascript (ecma-2
62)the definition of 'object.freeze' in that specification.
Object.fromEntries() - JavaScript
ole.log(obj); // { 0: "a", 1: "b", 2: "c" } object transformations with object.fromentries, its reverse method object.entries(), and array manipulation methods, you are able to transform objects like this: const object1 = { a: 1, b: 2, c: 3 }; const object2 = object.fromentries( object.entries(object1) .map(([ key, val ]) => [ key, val * 2 ]) ); console.log(object2); // { a: 2, b: 4, c:
6 } please do not add polyfills on mdn pages.
... for more details, refer to: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 specifications specification ecmascript (ecma-2
62)the definition of 'object.fromentries' in that specification.
Object.getOwnPropertyDescriptor() - JavaScript
ar: 42 }; d = object.getownpropertydescriptor(o, 'bar'); // d is { // configurable: true, // enumerable: true, // value: 42, // writable: true // } o = { [symbol.for('baz')]: 73 } d = object.getownpropertydescriptor(o, symbol.for('baz')); // d is { // configurable: true, // enumerable: true, // value: 73, // writable: true // } o = {}; object.defineproperty(o, 'qux', { value: 8
675309, writable: false, enumerable: false }); d = object.getownpropertydescriptor(o, 'qux'); // d is { // value: 8
675309, // 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.getownpropertydescriptor('foo', 0); // typeerror: "foo" is not an object // es5 code object.getownpropertydescriptor('foo', 0); // object returned by es2015 code: { // configurable: false, // enumerable: true, // value: "f", // writable: false // } specifications specification ecmascript (ecma-2
62)the definition of 'object.getownpropertydescriptor' in that specification.
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, foo); // t...
...rue object.is(foo, bar); // false object.is(null, null); // true // special cases object.is(0, -0); // false object.is(-0, -0); // true object.is(nan, 0/0); // true specifications specification ecmascript (ecma-2
62)the definition of 'object.is' in that specification.
Object.preventExtensions() - JavaScript
var nonextensible = { removable: true }; object.preventextensions(nonextensible); object.defineproperty(nonextensible, 'new', { value: 8
675309 }); // throws a typeerror // in strict mode, attempting to add new properties // to a non-extensible object throws a typeerror.
... object.preventextensions(1); // typeerror: 1 is not an object (es5 code) object.preventextensions(1); // 1 (es2015 code) specifications specification ecmascript (ecma-2
62)the definition of 'object.preventextensions' in that specification.
Promise - JavaScript
that is forced because an es
6 promise chain goes through all the .then() promises, even after an error, and without the "throw()", the error would seem "fixed".
... specifications specification ecmascript (ecma-2
62)the definition of 'promise' in that specification.
RangeError - JavaScript
although ecma-2
62 specifies that rangeerror should provide its own message property, in spidermonkey, it inherits error.prototype.message.
...meric values) function check(value) { if(["apple", "banana", "carrot"].includes(value) === false) { throw new rangeerror('the argument must be an "apple", "banana", or "carrot".') } } try { check("cabbage") } catch(error) { if(error instanceof rangeerror) { // handle the error } } specifications specification ecmascript (ecma-2
62)the definition of 'rangeerror' in that specification.
ReferenceError() constructor - JavaScript
{ let a = undefinedvariable } catch (e) { console.log(e instanceof 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) // "somef...
...ile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-2
62)the definition of 'nativeerror constructor' in that specification.
RegExp.prototype[@@matchAll]() - JavaScript
let re = /[0-9]+/g; let str = '201
6-01-02'; let result = re[symbol.matchall](str); console.log(array.from(result, x => x[0])); // ["201
6", "01", "02"] using @@matchall in subclasses subclasses of regexp can override the [@@matchall]() method to modify the default behavior.
... 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 = '201
6-01-02|2019-03-07'; const result = str.matchall(re); console.log(result[0]); // [ "201
6-01-02", "201
6", "01", "02" ] console.log(result[1]); // [ "2019-03-07", "2019", "03", "07" ] specifications specification ecmascript (ecma-2
62)the definition of 'regexp.prototype[@@matchall]' in that specification.
RegExp.prototype[@@search]() - JavaScript
var re = /-/g; var str = '201
6-01-02'; var result = re[symbol.search](str); console.log(result); // 4 using @@search in subclasses subclass of regexp can override [@@search]() method to modify the behavior.
...console.log(result); // 3 specifications specification ecmascript (ecma-2
62)the definition of 'regexp.prototype[@@search]' in that specification.
RegExp.prototype.sticky - JavaScript
the bug was introduced some time after firefox 3.
6 (which had the sticky flag but not the bug) and fixed in 2015.
...x = /^foo/y; regex.lastindex = 2; regex.test('..foo'); // false - index 2 is not the beginning of the string var regex2 = /^foo/my; regex2.lastindex = 2; regex2.test('..foo'); // false - index 2 is not the beginning of the string or line regex2.lastindex = 2; regex2.test('.\nfoo'); // true - index 2 is the beginning of a line specifications specification ecmascript (ecma-2
62)the definition of 'regexp.prototype.sticky' in that specification.
Set - JavaScript
)) { _difference.delete(elem) } else { _difference.add(elem) } } return _difference } function difference(seta, setb) { let _difference = new set(seta) for (let elem of setb) { _difference.delete(elem) } return _difference } // examples let seta = new set([1, 2, 3, 4]) let setb = new set([2, 3]) let setc = new set([3, 4, 5,
6]) issuperset(seta, setb) // => true union(seta, setc) // => set [1, 2, 3, 4, 5,
6] intersection(seta, setc) // => set [3, 4] symmetricdifference(seta, setc) // => set [1, 2, 5,
6] difference(seta, setc) // => set [1, 2] relation with array objects let myarray = ['value1', 'value2', 'value3'] // use the regular set constructor to transform an array into...
...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 specification ecmascript (ecma-2
62)the ...
SharedArrayBuffer() constructor - JavaScript
chrome re-enabled it in v
67 on platforms where its site-isolation feature is enabled to protect against spectre-style vulnerabilities.
... var sab = sharedarraybuffer(1024); // typeerror: calling a builtin sharedarraybuffer constructor // without new is forbidden var sab = new sharedarraybuffer(1024); specifications specification ecmascript (ecma-2
62)the definition of 'sharedarraybuffer constructor' in that specification.
String.prototype[@@iterator]() - JavaScript
examples using [@@iterator]() var str = 'a\ud835\udc
68'; var striter = str[symbol.iterator](); console.log(striter.next().value); // "a" console.log(striter.next().value); // "\ud835\udc
68" using [@@iterator]() with for..of var str = 'a\ud835\udc
68b\ud835\udc
69c\ud835\udc
6a'; for (var v of str) { console.log(v); } // "a" // "\ud835\udc
68" // "b" // "\ud835\udc
69" // "c" // "\ud835\udc
6a" specifications specification ecma...
...script (ecma-2
62)the definition of 'string.prototype[@@iterator]()' in that specification.
String.prototype.codePointAt() - JavaScript
if no utf-1
6 surrogate pair begins at pos, the code unit at pos is returned.
...00 + second - 0xdc00 + 0x10000; } } return first; }; if (defineproperty) { defineproperty(string.prototype, 'codepointat', { 'value': codepointat, 'configurable': true, 'writable': true }); } else { string.prototype.codepointat = codepointat; } }()); } examples using codepointat() 'abc'.codepointat(1) //
66 '\ud800\udc00'.codepointat(0) //
6553
6 'xyz'.codepointat(42) // undefined looping with codepointat() for (let codepoint of '\ud83d\udc0e\ud83d\udc71\u27
64') { console.log(codepoint.codepointat(0).tostring(1
6)) } // '1f40e', '1f471', '27
64' specifications specification ecmascript (ecma-2
62)the definition of 'string.prototype.codepointat' in that specificati...
String.prototype.endsWith() - JavaScript
polyfill this method has been added to the ecmascript
6 specification and may not be available in all javascript implementations yet.
...en = this.length; } return this.substring(this_len - search.length, this_len) === search; }; } examples using endswith() let str = 'to be, or not to be, that is the question.' console.log(str.endswith('question.')) // true console.log(str.endswith('to be')) // false console.log(str.endswith('to be', 19)) // true specifications specification ecmascript (ecma-2
62)the definition of 'string.prototype.endswith' in that specification.
String.prototype.indexOf() - JavaScript
const str = 'brave new world' console.log('index of first w from start is ' + str.indexof('w')) // logs 8 console.log('index of "new" from start is ' + str.indexof('new')) // logs
6 indexof() and case-sensitivity the following example defines two string variables.
... string the following example sets count to the number of occurrences of the letter e in the string str: const str = 'to be, or not to be, that is the question.' let count = 0 let position = str.indexof('e') while (position !== -1) { count++ position = str.indexof('e', position + 1) } console.log(count) // displays 4 specifications specification ecmascript (ecma-2
62)the definition of 'string.prototype.indexof' in that specification.
String.prototype.padStart() - JavaScript
examples basic examples 'abc'.padstart(10); // " abc" 'abc'.padstart(10, "foo"); // "foofoofabc" 'abc'.padstart(
6,"1234
65"); // "123abc" 'abc'.padstart(8, "0"); // "00000abc" 'abc'.padstart(1); // "abc" fixed width string number conversion // javascript version of: (unsigned) // printf "%0*d" width num function leftfillnum(num, targetlength) { return num.tostring().padstart(targetlength, 0); } const num = 123; console.log(leftfillnum(num, 5)); // expected output: "00123" specifications...
... specification ecmascript (ecma-2
62)the definition of 'string.prototype.padstart' in that specification.
String.raw() - JavaScript
string.raw`hi\u000a!`; // 'hi\u000a!', same here, this time we will get the // \, u, 0, 0, 0, a,
6 characters.
...// the following is equivalent to // `t${0}e${1}s${2}t`: string.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t' specifications specification ecmascript (ecma-2
62)the definition of 'string.raw' 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 str...
... specifications specification ecmascript (ecma-2
62)the definition of 'string.prototype.substring' in that specification.
String.prototype.trimStart() - JavaScript
e === "trimstart"; polyfill //https://github.com/fabiovergani/js-polyfill_string-trimstart (function(w){ var string=w.string, proto=string.prototype; (function(o,p){ if(p in o?o[p]?false:true:true){ var r=/^\s+/; o[p]=o.trimleft||function(){ return this.replace(r,'') } } })(proto,'trimstart'); })(window); /* es
6: (w=>{ const string=w.string, proto=string.prototype; ((o,p)=>{ if(p in o?o[p]?false:true:true){ const r=/^\s+/; o[p]=o.trimleft||function(){ return this.replace(r,'') } } })(proto,'trimstart'); })(window); */ examples using trimstart() the following example displays the lowercase string 'foo ': var str = ' ...
...foo '; console.log(str.length); // 8 str = str.trimstart(); console.log(str.length); // 5 console.log(str); // 'foo ' specifications specification ecmascript (ecma-2
62)the definition of ' string.prototype.trimstart' in that specification.
Symbol.matchAll - JavaScript
property attributes of symbol.matchall writable no enumerable no configurable no examples using symbol.matchall let re = /[0-9]+/g; let str = '201
6-01-02|2019-03-07'; const numbers = { *[symbol.matchall] (str) { for (const n of str.matchall(/[0-9]+/g)) yield n[0]; } }; console.log(array.from(str.matchall(numbers))); // array ["201
6", "01", "02", "2019", "03", "07"] see string.prototype.matchall() and regexp.prototype[@@matchall]() for more examples.
... specifications specification ecmascript (ecma-2
62)the definition of 'symbol.matchall' in that specification.
SyntaxError - JavaScript
although ecma-2
62 specifies that syntaxerror should provide its own message property, in spidermonkey, it inherits error.prototype.message.
....error(e.message); // hello console.error(e.name); // syntaxerror console.error(e.filename); // somefile.js console.error(e.linenumber); // 10 console.error(e.columnnumber); // 0 console.error(e.stack); // @debugger eval code:3:9 } specifications specification ecmascript (ecma-2
62)the definition of 'syntaxerror' in that specification.
TypeError - JavaScript
although ecma-2
62 specifies that typeerror should provide its own message property, in spidermonkey, it inherits error.prototype.message.
...eerror) // true console.log(e.message) // "hello" console.log(e.name) // "typeerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-2
62)the definition of 'typeerror' in that specification.
TypedArray.prototype.fill() - JavaScript
// https://tc39.github.io/ecma2
62/#sec-%typedarray%.prototype.fill if (!uint8array.prototype.fill) { uint8array.prototype.fill = array.prototype.fill; } examples using fill new uint8array([1, 2, 3]).fill(4); // uint8array [4, 4, 4] new uint8array([1, 2, 3]).fill(4, 1); // uint8array [1, 4, 4] new uint8array([1, 2, 3]).fill(4, 1, 2); // uint8array [1, 4, 3] new uint8array([1, 2, 3]).fill(4, 1, 1); // uint8a...
...rray [1, 2, 3] new uint8array([1, 2, 3]).fill(4, -3, -2); // uint8array [4, 2, 3] specifications specification ecmascript (ecma-2
62)the definition of 'typedarray.prototype.fill' in that specification.
TypedArray.prototype.join() - JavaScript
// https://tc39.github.io/ecma2
62/#sec-%typedarray%.prototype.join if (!uint8array.prototype.join) { object.defineproperty(uint8array.prototype, 'join', { value: array.prototype.join }); } if you need to support truly obsolete javascript engines that don't support object.defineproperty, it's best not to polyfill array.prototype methods at all, as you can't make them non-enumerable.
... examples using join var uint8 = new uint8array([1,2,3]); uint8.join(); // '1,2,3' uint8.join(' / '); // '1 / 2 / 3' uint8.join(''); // '123' specifications specification ecmascript (ecma-2
62)the definition of 'typedarray.prototype.join' in that specification.
TypedArray.of() - JavaScript
syntax typedarray.of(element0[, element1[, ...[, elementn]]]) where typedarray is one of: int8array uint8array uint8clampedarray int1
6array uint1
6array int32array uint32array float32array float
64array bigint
64array biguint
64array parameters elementn elements of which to create the typed array.
... examples using of uint8array.of(1); // uint8array [ 1 ] int8array.of('1', '2', '3'); // int8array [ 1, 2, 3 ] float32array.of(1, 2, 3); // float32array [ 1, 2, 3 ] int1
6array.of(undefined); // int1
6array [ 0 ] specifications specification ecmascript (ecma-2
62)the definition of '%typedarray%.of' in that specification.
TypedArray.prototype.some() - JavaScript
// https://tc39.github.io/ecma2
62/#sec-%typedarray%.prototype.some if (!uint8array.prototype.some) { object.defineproperty(uint8array.prototype, 'some', { value: array.prototype.some }); } if you need to support truly obsolete javascript engines that don't support object.defineproperty, it's best not to polyfill array.prototype methods at all, as you can't make them non-enumerable.
... new uint8array([2, 5, 8, 1, 4]).some(elem => elem > 10); // false new uint8array([12, 5, 8, 1, 4]).some(elem => elem > 10); // true specifications specification ecmascript (ecma-2
62)the definition of 'typedarray.prototype.some' in that specification.
URIError - JavaScript
although ecma-2
62 specifies that urierror should provide its own message property, in spidermonkey, it inherits error.prototype.message.
...ceof urierror) // true console.log(e.message) // "hello" console.log(e.name) // "urierror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications specification ecmascript (ecma-2
62)the definition of 'urierror' in that specification.
WebAssembly.CompileError() constructor - JavaScript
ecmascript (ecma-2
62)the definition of 'nativeerror constructor' in that specification.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompileerror() constructorchrome full support 57edge full support 1
6firefox 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 11w...
WebAssembly.LinkError() constructor - JavaScript
ecmascript (ecma-2
62)the definition of 'nativeerror constructors' in that specification.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslinkerror() constructorchrome full support 57edge full support 1
6firefox 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 11w...
WebAssembly.RuntimeError() constructor - JavaScript
ecmascript (ecma-2
62)the definition of 'nativeerror constructor' in that specification.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsruntimeerror() constructorchrome full support 57edge full support 1
6firefox 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 11w...
WebAssembly.compileStreaming() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompilestreamingchrome full support
61edge full support 1
6firefox full support 58ie no support noopera full support 47safari no support nowebview android full support ...
...
61chrome android full support
61firefox android full support 58opera android full support 45safari ios no support nosamsung internet android full support 8.0nodejs no support nolegend full support full support no support no support ...
WebAssembly.instantiateStreaming() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstantiatestreamingchrome full support
61edge full support 1
6firefox full support 58ie no support noopera full support 47safari no support nowebview android full support ...
...
61chrome android full support
61firefox android full support 58opera android full support 45safari ios no support nosamsung internet android full support 8.0nodejs no support nolegend full support full support no support no support ...
escape() - JavaScript
warning: although escape() is not strictly deprecated (as in "removed from the web standards"), it is defined in annex b of the ecma-2
62 standard, whose introduction states: … all of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification.
... examples using escape escape('abc123'); // "abc123" escape('äöü'); // "%e4%f
6%fc" escape('ć'); // "%u0107" // special characters escape('@*_+-./'); // "@*_+-./" specifications specification ecmascript (ecma-2
62)the definition of 'escape' in that specification.
eval() - JavaScript
function test() { var x = 2, y = 4; console.log(eval('x + y')); // direct call, uses local scope, result is
6 var geval = eval; // equivalent to calling eval in the global scope console.log(geval('x + y')); // indirect call, uses global scope, throws referenceerror because `x` is undefined (0, eval)('x + y'); // another example of indirect call } never use eval()!
...log('b is : ' + b); a = false; b = eval(str); // returns 3 console.log('b is : ' + b); eval as a string defining function requires "(" and ")" as prefix and suffix var fctstr1 = 'function a() {}' var fctstr2 = '(function a() {})' var fct1 = eval(fctstr1) // return undefined var fct2 = eval(fctstr2) // return a function specifications specification ecmascript (ecma-2
62)the definition of 'eval' in that specification.
globalThis - JavaScript
however, this causes csp violations in some settings, so es
6-shim uses a check like this, for example: var getglobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new error('unable to locate global object'); }; var globals = getglobal(); if (typeof globals.settimeout !== 'function') { // no settimeout in this en...
...} specifications specification ecmascript (ecma-2
62)the definition of 'globalthis' in that specification.
unescape() - JavaScript
warning: although unescape() is not strictly deprecated (as in "removed from the web standards"), it is defined in annex b of the ecma-2
62 standard, whose introduction states: … all of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification.
... examples using unescape unescape('abc123'); // "abc123" unescape('%e4%f
6%fc'); // "äöü" unescape('%u0107'); // "ć" specifications specification ecmascript (ecma-2
62)the definition of 'unescape' in that specification.
Bitwise NOT (~) - JavaScript
note that due to using 32-bit representation for numbers both ~-1 and ~42949
67295 (232-1) results in 0.
... examples using bitwise not ~0; // -1 ~-1; // 0 ~1; // -2 specifications specification ecmascript (ecma-2
62)the definition of 'unary not expression' in that specification.
Comma operator (,) - JavaScript
var a, b, c; a = b = 3, c = 4; // returns 4 in console console.log(a); // 3 (left-most) var x, y, z; x = (y = 5, z =
6); // returns
6 in console console.log(x); //
6 (right-most) processing and then returning another example that one could make with comma operator is processing before returning.
...so, one could do: function myfunc() { var x = 0; return (x += 1, x); // the same as return ++x; } specifications specification ecmascript (ecma-2
62)the definition of 'comma operator' in that specification.
Conditional (ternary) operator - JavaScript
examples a simple example var age = 2
6; var beverage = (age >= 21) ?
...value3 : value4; } // equivalent to: function example(…) { if (condition1) { return value1; } else if (condition2) { return value2; } else if (condition3) { return value3; } else { return value4; } } specifications specification ecmascript (ecma-2
62)the definition of 'conditional operator' in that specification.
Logical AND (&&) - JavaScript
a1 = true && true // t && t returns true a2 = true && false // t && f returns false a3 = false && true // f && t returns false a4 = false && (3 == 4) // f && f returns false a5 = 'cat' && 'dog' // t && t returns "dog" a
6 = false && 'cat' // f && t returns false a7 = 'cat' && false // t && f returns false a8 = '' && false // f && f returns "" a9 = false && '' // f && f returns false conversion rules for booleans converting and to or the following operation involving booleans: bcondition1 && bcondition2 is always equal to: !(!bcondition1 || !bcondition2) converting or to and the fo...
... the following composite operation involving booleans: bcondition1 || (bcondition2 && bcondition3) is always equal to: bcondition1 || bcondition2 && bcondition3 specifications specification ecmascript (ecma-2
62)the definition of 'logical and expression' in that specification.
Logical OR (||) - JavaScript
o1 = true || true // t || t returns true o2 = false || true // f || t returns true o3 = true || false // t || f returns true o4 = false || (3 == 4) // f || f returns false o5 = 'cat' || 'dog' // t || t returns "cat" o
6 = false || 'cat' // f || t returns "cat" o7 = 'cat' || false // t || f returns "cat" o8 = '' || false // f || f returns false o9 = false || '' // f || f returns "" o10 = false || varobject // f || object returns varobject note: if you use this operator to provide a default value to some variable, be aware that any falsy value will not be used.
... the following composite operation involving booleans: bcondition1 && (bcondition2 || bcondition3) is always equal to: !(!bcondition1 || !bcondition2 && !bcondition3) specifications specification ecmascript (ecma-2
62)the definition of 'logical or expression' in that specification.
in operator - JavaScript
// arrays let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'] 0 in trees // returns true 3 in trees // returns true
6 in trees // returns false 'bay' in trees // returns false (you must specify the index number, not the value at that index) 'length' in trees // returns true (length is an array property) symbol.iterator in trees // returns true (arrays are iterable, works only in es2015+) // predefined objects 'pi' in math // returns true // custom objects let mycar = {make: 'honda', model: '...
...(if you want to check for only non-inherited properties, use object.prototype.hasownproperty() instead.) 'tostring' in {} // returns true specifications specification ecmascript (ecma-2
62)the definition of 'relational operators' in that specification.
typeof - JavaScript
type result undefined "undefined" null "object" (see below) boolean "boolean" number "number" bigint (new in ecmascript 2020) "bigint" string "string" symbol (new in ecmascript 2015) "symbol" function object (implements [[call]] in ecma-2
62 terms) "function" any other object "object" note: ecmascript 2019 and older permitted implementations to have typeof return any implementation-defined string value for non-callable non-standard exotic objects.
... specifications specification ecmascript (ecma-2
62)the definition of 'the typeof operator' in that specification.
yield* - JavaScript
function* g3() { yield* [1, 2]; yield* '34'; yield* array.from(arguments); } const iterator = g3(5,
6); console.log(iterator.next()); // {value: 1, done: false} console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value: "3", done: false} console.log(iterator.next()); // {value: "4", done: false} console.log(iterator.next()); // {value: 5, done: false} console.log(iterator.next()); // {value:
6, done: false} console.log(iterator.next()); // {value: undefined...
...turnvalue; } const iterator = g5(); console.log(iterator.next()); // {value: 1, done: false} console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value: 3, done: false} done is false because g5 generator isn't finished, only g4 console.log(iterator.next()); // {value: 'foo', done: true} specifications specification ecmascript (ecma-2
62)the definition of 'yield' in that specification.
break - JavaScript
function testbreak(x) { var i = 0; while (i <
6) { if (i == 3) { break; } i += 1; } return i * x; } break in labeled blocks the following code uses break statements with labeled blocks.
... function testbreak(x) { var i = 0; while (i <
6) { if (i == 3) { (function() { break; })(); } i += 1; } return i * x; } testbreak(1); // syntaxerror: illegal break statement block_1: { console.log('1'); ( function() { break block_1; // syntaxerror: undefined label 'block_1' })(); } specifications specification ecmascript (ecma-2
62)the definition of 'break statement' in that s...
continue - JavaScript
j: 7 j:
6 5 is odd.
... j: 5 // end checkj i = 1 j = 4 i: 1 i = 2 j = 4 i: 2 i = 3 j = 4 i: 3 i = 4 j = 4 specifications specification ecmascript (ecma-2
62)the definition of 'continue statement' in that specification.
export - JavaScript
'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)); // 27 console.log(foo); // 4.55580
62159
62888 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.
...to re-export them export { myfunction, myvariable } from 'childmodule1.js'; export { myclass } from 'childmodule2.js'; // in top-level module // we can consume the exports from a single module since parentmodule // "collected"/"bundled" them in a single source import { myfunction, myvariable, myclass } from 'parentmodule.js' specifications specification ecmascript (ecma-2
62)the definition of 'exports' in that specification.
import - JavaScript
eryselector("main"); for (const link of document.queryselectorall("nav > a")) { link.addeventlistener("click", e => { e.preventdefault(); import('/modules/my-module.js') .then(module => { module.loadpageinto(main); }) .catch(err => { main.textcontent = err.message; }); }); } specifications specification ecmascript (ecma-2
62)the definition of 'imports' in that specification.
... ecmascript (ecma-2
62)the definition of 'import calls' in that specification.
switch - JavaScript
block-scope variables within switch statements with ecmascript 2015 (es
6) support made available in most modern browsers, there will be cases where you would want to use let and const statements to declare block-scoped variables.
... specifications specification ecmascript (ecma-2
62)the definition of 'switch statement' in that specification.
while - JavaScript
therefore, x and n take on the following values: after the first pass: n = 1 and x = 1 after the second pass: n = 2 and x = 3 after the third pass: n = 3 and x =
6 after completing the third pass, the condition n < 3 is no longer true, so the loop terminates.
... specifications specification ecmascript (ecma-2
62)the definition of 'while statement' in that specification.
Values - MathML
constants a replacement for the deprecated constants below is: veryverythinmathspace => 0.05555555555555555em verythinmathspace => 0.1111111111111111em thinmathspace => 0.1
6666666666666666em mediummathspace => 0.2222222222222222em thickmathspace => 0.2777777777777778em verythickmathspace => 0.3333333333333333em veryverythickmathspace => 0.3888888888888889em constant value veryverythinmathspace 1/18em verythinmathspace 2/18em thinmathspace 3/18em mediummathspace 4/18em thickma...
...thspace 5/18em verythickmathspace
6/18em veryverythickmathspace 7/18em negative contstants are introduced in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 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
673759).
Authoring MathML - MathML
\end{abstract} \section{first section} $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{
6} $$ \end{document} </div> ...
... jqmath is another script to parse a simple latex-like syntax but which also accepts non-ascii characters like √{∑↙{n=1}↖{+∞}
6/n^2} = π to write ∑ n = 1 + ∞
6 n 2 = π .
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.
...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.212
6r' + 0.7152g' + 0.0722b'.
Critical rendering path - Web Performance
understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at
60 frames per second, to ensure performant user interactions and avoid jank.
...without it, the browser uses the default viewport width, which on by-default full screen browsers is generally 9
60px.
Performance fundamentals - Web Performance
this is a familiar concept: everyone prefers, say, games that display
60 frames per second over ones that display 10 frames per second, even if they can't explain why.
... note: humans usually cannot perceive differences in framerate above
60hz.
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
67 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
67 and earlier from calling the install prompt automatically (this behavior changed in chrome
68).
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
registering the service worker we'll start by looking at the code that registers a new service worker, in the app.js file: note : we're using the es
6 arrow functions syntax in the service worker implementation if('serviceworker' in navigator) { navigator.serviceworker.register('./pwa-examples/js13kpwa/sw.js'); }; if the service worker api is supported in the browser, it is registered against the site using the serviceworkercontainer.register() method.
...a/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', '/pwa-examples/js13kpwa/fonts/graduate.ttf', '/pwa-examples/js13kpwa/fonts/graduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-
64.png', '/pwa-examples/js13kpwa/icons/icon-9
6.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-1
68.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-25
6.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; next, the links to images to be loaded along with the content from the data/games.js file are generated in t...
alignment-baseline - SVG: Scalable Vector Graphics
example <svg width="300" height="120" viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m
60,10 l
60,110 m30,10 l300,10 m30,
65 l300,
65 m30,110 l300,110 " stroke="grey" /> <!-- anchors in action --> <text alignment-baseline="hanging" x="
60" y="10">a hanging</text> <text alignment-baseline="middle" x="
60" y="
65">a middle</text> <text alignment-baseline="baseline" x="
60" y="110">a bas...
...eline</text> <!-- materialisation of anchors --> <circle cx="
60" cy="10" r="3" fill="red" /> <circle cx="
60" cy="
65" r="3" fill="red" /> <circle cx="
60" cy="110" r="3" fill="red" /> <style><![cdata[ text{ font: bold 3
6px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> for object alignment in other elements (such as <text>), see dominant-baseline.
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="m
60,20 l
60,270 m30,20 l400,20 m30,70 l400,70 m30,120 l400,120 m30,170 l400,170 m30,220 l400,220 m30,270 l400,270" 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">baseline</text> <text dominant-baseline="hanging" x="70" y="170">hanging</text> <text dominant-baseline="mathematical" x="70" y="220">mathematical</text> <text dominant-baseline="text-top" x="70" y="270">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="170" r="3" fill="red" /> <circle cx="
60" cy="220" r="3" fill="red" /> <circle cx="
60" cy="270" 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...
dx - SVG: Scalable Vector Graphics
seven elements are using this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="
60%" x2="
60%" y1="0" y2="100%" /> <!-- some reference text --> <text x="10%" y="50%" fill="grey">svg</text> <!-- the same text with a shift along the x-axis --> <text dx="50%" x="10%" y="50%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
...ml,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="25%" y2="25%" /> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="0" x2="100%" y1="75%" y2="75%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="30%" x2="30%" y1="0" y2="100%" /> <line x1="
60%" x2="
60%" y1="0" y2="100%" /> <!-- behaviors change based on the number of values in the attributes --> <text dx="20%" x="10%" y="25%">svg</text> <text dx="0 10%" x="10%" y="50%">svg</text> <text dx="0 10% 20%" x="10%" y="75%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated an...
font-size-adjust - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="
600" height="80" viewbox="0 0 500 80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-size="10px"> this text uses the times font (10px), which is hard to read in small sizes.
... </text> <text y="
60" font-family="times, serif" font-size="10px" font-size-adjust="0.58"> this is the 10px times, but now adjusted to the same aspect ratio as the verdana.
in - SVG: Scalable Vector Graphics
--> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/
6457/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/
6457/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.
orient - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="
6" markerheight="
6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 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 57,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 is pointing in a direction relative to the path at the position the marker is placed.
rotate - SVG: Scalable Vector Graphics
s="http://www.w3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="
6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g transform="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="
6s" repeatcount="indefinite" rotate="...
...auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> <use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="
6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="
6s" repeatcount="indefinite" rotate="210"> <mpath href=...
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="m
60,15 l
60,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 c...
...x="
60" cy="110" r="3" fill="red" /> <style><![cdata[ text { font: bold 3
6px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> usage notes default value start value start | middle | end animatable yes start the rendered characters are aligned such that the start of the text string is at the initial current text position.
unicode-range - SVG: Scalable Vector Graphics
the unicode-range attribute defines the range of iso 10
64
6 characters possibly covered by the glyphs in a font.
... only one element is using this attribute: <font-face> usage notes value <urange># default value none animatable no <urange># this value is a comma-separated list of iso 10
64
6 characters possibly covered by the glyphs in the font.
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 1
60" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
... scale="30" xchannelselector="b"/> </filter> <text x="10" y="
60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 1
60" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
... scale="30" ychannelselector="b"/> </filter> <text x="10" y="
60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
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.4
67 = 12 seconds and 4
67 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) -2147483
648 to 2147483
647.
<clipPath> - SVG: Scalable Vector Graphics
--> <circle cx="40" cy="35" r="35" /> </clippath> <!-- the original black heart, for reference --> <path id="heart" d="m10,30 a20,20,0,0,1,50,30 a20,20,0,0,1,90,30 q90,
60,50,90 q10,
60,10,30 z" /> <!-- only the portion of the red heart inside the clip circle is visible.
...*/ @keyframes openyourheart {from {r: 0} to {r:
60px}} #myclip circle { animation: openyourheart 15s infinite; } a clipping path is conceptually equivalent to a custom viewport for the referencing element.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied --> <text text-anchor="middle" x="
60" y="22">no light</text> <circle cx="
60" cy="80" r="50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="middle" x="170" y="22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fepointlight x="150" y="
60" z="20" /> </fediffuselighting> <fecomposite in="...
... operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightme2)" /> <!-- the light source is a fespotlight source --> <text text-anchor="middle" x="390" y="22">fespotlight</text> <filter id="lightme3"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fespotlight x="3
60" y="5" z="30" limitingconeangle="20" pointsatx="390" pointsaty="80" pointsatz="0"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightme3)" /> </svg> expected rendering: live rendering: specifica...
<feGaussianBlur> - SVG: Scalable Vector Graphics
example simple example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="5" /> </filter> <circle cx="
60" cy="
60" r="50" fill="green" /> <circle cx="170" cy="
60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample drop shadow example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviation="3" /> <feoffset dx="2" ...
...dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx="
60" cy="
60" r="50" fill="green" filter="url(#dropshadow)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fegaussianblur>' in that specification.
<marker> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- arrowhead marker definition --> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="
6" markerheight="
6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" 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 --> <polylin...
...e 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 57,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.
<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.0
6" /> <circle cx="100" cy="250" r="17.
64" fill="blue" /> <circle cx="250" cy="100" r="17.
64" fill="blue" /> <circle cx="400" cy="250" r="17.
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,-87.5 z" fill="yellow" stroke="red" stroke-width="7.0
6" > <!-- 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.
<view> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="
600" height="200" viewbox="0 0
600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox=...
..."0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0
600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizeview"> <text x="5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalsizeview"> <text x="5" y="40" font-size="20">normal size</text> </a> <a xlink:href="#doublesizeview"> <text x="5" y="
60" font-size="20">double size</text> </a> </svg> result dom interface this element implements the svgviewelement interface.
Example - SVG: Scalable Vector Graphics
</p> <div> (c) 200
6 <a id='emailme' href='#'>nick johnson</a> <script type='text/javascript'> <![cdata[ // foil spam bots var email = '@riovia.net'; email ='nick' + email; document.getelementbyid('emailme').href = 'mailto:'+email; ]]> </script> this software is free for you to use in any way whatsoever, and comes with no warranty at all.
...velocity:</label> <input id='max_velocity' value='15'/> <br/> <label>attraction to cursor:</label> <input id='attract_cursor' value='
6'/> <br/> <label>repulsion from peers:</label> <input id='repel_peer' value='5'/> <br/> </p> </form> <script type='text/javascript'> <![cdata[ // array of motes var motes; // get the display element.
ResizeObserver() - Web APIs
ver itself } } examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/
600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/
600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status comment resize observerthe definition of 'resizeobserver' in that specification.
ResizeObserver.observe() - Web APIs
examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/
600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/
600) + 'rem'; } } }); resizeobserver.observe(divelem); an observe() call with an options object would look like so: resizeobserver.observe(divelem, { box : 'border-box' }); specifications specification st...
ResizeObserver.unobserve() - Web APIs
examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/
600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/
600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if(checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); ...
ResizeObserverEntry.contentRect - Web APIs
const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/
600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/
600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status comment resize observerthe definition of 'contentrect' in that specification.
ResizeObserverEntry - Web APIs
const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/
600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/
600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status comment resize observerthe definition of 'resizeobserverentry' in that specification.
Using the Resource Timing API - Web APIs
r_full(event) { console.log("warning: resource timing buffer is full!"); set_resource_timing_buffer_size(200); } function init() { // load some image to trigger "resource" fetch events var image1 = new image(); image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; var image2 = new image(); image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-25
6.e2c1fc55
681
6.jpg" // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } coping with cors when cors is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits these values to be shared.
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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="10
6" 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="#f4f7f8" 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
<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/svganimatecolorelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" 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-event...
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="#f4f7f8" 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="m...
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="3
60" height="50" fill="#f4f7f8" 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">svgfilterprimitivesta...
SVGFontElement - 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/svgfontelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" 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:hove...
SVGFontFaceElement - 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/svgfontfaceelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" 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> ...
WorkerGlobalScope.performance - Web APIs
note: firefox has a bug with using console.log inside shared/service workers (see bug 1058
644), which may return strange results, but this should be fixed soon.
WritableStream.WritableStream() - Web APIs
.catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint1
6array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message receiv...
WritableStream.getWriter() - Web APIs
.catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint1
6array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message receiv...
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
.catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint1
6array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message receiv...
WritableStreamDefaultWriter.close() - Web APIs
.catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint1
6array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message receiv...
WritableStreamDefaultWriter.ready - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetready experimentalchrome full support 59edge full support 1
6firefox no support noie no support noopera full support 4
6safari ?
WritableStreamDefaultWriter.write() - Web APIs
.catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint1
6array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message receiv...
WritableStreamDefaultWriter - Web APIs
rr) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint1
6array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[me...
XMLHttpRequest: abort event - Web APIs
ner('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: error event - Web APIs
ner('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest.getAllResponseHeaders() - Web APIs
an example of what a raw header string looks like: date: fri, 08 dec 2017 21:04:30 gmt\r\n content-encoding: gzip\r\n x-content-type-options: nosniff\r\n server: meinheld/0.
6.1\r\n x-frame-options: deny\r\n content-type: text/html; charset=utf-8\r\n connection: keep-alive\r\n strict-transport-security: max-age=
63072000\r\n vary: cookie, accept-encoding\r\n content-length:
6502\r\n x-xss-protection: 1; mode=block\r\n each line is terminated by both carriage return and line feed characters (\r\n).
XMLHttpRequest: load event - Web APIs
ner('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadend event - Web APIs
ner('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadstart event - Web APIs
ner('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/1
6553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
fx - SVG: Scalable Vector Graphics
s="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <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(#gradient)" stroke="black" stroke-width="2"/> <circle cx="
60" cy="
60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="
60" cy="
60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="
63" y="
63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specificati...
fy - SVG: Scalable Vector Graphics
s="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <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(#gradient)" stroke="black" stroke-width="2"/> <circle cx="
60" cy="
60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="
60" cy="
60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="
63" y="
63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specificati...
height - SVG: Scalable Vector Graphics
morphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="
60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primitive.
href - SVG: Scalable Vector Graphics
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 1
60 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
id - SVG: Scalable Vector Graphics
<svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> <![cdata[ #smallrect { stroke: #0000
66; fill: #00cc00; } ]]> </style> <rect id="smallrect" x="10" y="10" width="100" height="100" /> </svg> usage notes value <id> default value none animatable no <id> specifies the element's id.
k1 - SVG: Scalable Vector Graphics
000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications ...
k2 - SVG: Scalable Vector Graphics
000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications ...
k3 - SVG: Scalable Vector Graphics
000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications ...
k4 - SVG: Scalable Vector Graphics
0/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12
668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications ...
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/
6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/
6457/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: 3
6px 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 ...
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.2...
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> ]* ;?
lighting-color - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="white"> <fepointlight x="
60" y="
60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="blue"> <fepointlight x="
60" y="
60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" heig...
marker-end - SVG: Scalable Vector Graphics
00%; } <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
ellipse>, <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
00%; } <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 prop...
maskUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskunits="userspaceonuse" x="20%" y="20%" width="
60%" height="
60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskunits="objectboundingbox" x="20%" y="20%" width="
60%" height="
60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" ...
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> specif...
media - SVG: Scalable Vector Graphics
only one element is using this attribute: <style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width:
600px)"> rect { fill: seagreen; } </style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied.
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...
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/
6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/
6457/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 des...
operator - SVG: Scalable Vector Graphics
0%; 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 performed.
paint-order - SVG: Scalable Vector Graphics
example <svg xmlns="http://www.w3.org/2000/svg" width="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 { pain...
pathLength - SVG: Scalable Vector Graphics
seven elements are using this attribute: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 100
60" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: none; stroke: black; stroke-width: 2; stroke-dasharray: 10; } </style> <!-- no pathlength, the real length of the path is used.
pointer-events - SVG: Scalable Vector Graphics
--> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(1
6).padstart(
6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline...
pointsAtX - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="
60" y="
60" z="50" pointsatx="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="
60" y="
60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200...
pointsAtY - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="
60" y="
60" z="50" pointsaty="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="
60" y="
60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200...
preserveAlpha - SVG: Scalable Vector Graphics
ww.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/
6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/
6457/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 ...
r - SVG: Scalable Vector Graphics
ffset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="100%" id="mygradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> <rect x="20" y="120" width="
60" height="
60" fill="url(#mygradient000)" /> <rect x="120" y="120" width="
60" height="
60" fill="url(#mygradient050)" /> <rect x="220" y="120" width="
60" height="
60" fill="url(#mygradient100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its size.
rx - SVG: Scalable Vector Graphics
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="0" ry="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" width="
60" height="
60" rx="0" ry="15"/> <rect x="120" y="120" width="
60" height="
60" rx="15" ry="15"/> <rect x="220" y="120" width="
60" height="
60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the shape.
ry - SVG: Scalable Vector Graphics
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="
60" height="
60" ry="0" rx="15"/> <rect x="120" y="120" width="
60" height="
60" ry="15" rx="15"/> <rect x="220" y="120" width="
60" height="
60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape.
specularConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="specularlighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="1.2"> <fepointlight x="
60" y="
60" z="20" /> </fespecularlighting> </filter> <filter id="specularlighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="0.8"> <fepointlight x="
60" y="
60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting1);" /> <rect x="0" y="0" width="200...
specularExponent - SVG: Scalable Vector Graphics
two elements are using this attribute: <fespecularlighting> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="1"> <fepointlight x="
60" y="
60" z="20" /> </fespecularlighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="5"> <fepointlight x="
60" y="
60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" he...
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 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 1
65,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
stdDeviation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fegaussianblur> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="gaussianblur1"> <fegaussianblur stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="1
60%" height="1
60%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur3); transform: translatex(280px);" /> </svg> usage notes value ...
style - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100
60" xmlns="http://www.w3.org/2000/svg"> <rect width="80" height="40" x="10" y="10" style="fill: skyblue; stroke: cadetblue; stroke-width: 2;"/> </svg> usage notes value <style> default value none animatable no <style> the syntax of style data depends on the style sheet language.
surfaceScale - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="1"> <fepointlight x="
60" y="
60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="15"> <fepointlight x="
60" y="
60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="...
tabindex - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <?xml version="1.0"?> <svg viewbox="0 0 2
60 2
60" xmlns="http://www.w3.org/2000/svg"> <circle cx="
60" cy="
60" r="15" tabindex="1" /> <circle cx="
60" cy="1
60" r="30" tabindex="3" /> <circle cx="1
60" cy="
60" r="30" tabindex="2" /> <circle cx="1
60" cy="1
60" r="
60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer relative order of the element for the purposes of sequential focus navigation.
target - SVG: Scalable Vector Graphics
> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla.org" target="_blank"> <text x="0" y="
60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or window</text> </a> </svg> usage notes value _self | _parent | _top | _blank | <xml-name> default value _self animatable yes _replace the current svg image is replaced by the linked content ...
unicode - SVG: Scalable Vector Graphics
for example, unicode="ffl" could be expressed as xml character references in hexadecimal notation as unicode="&#x
66;&#x
66;&#x
6c;" or in decimal notation as unicode="ffl".
visibility - SVG: Scalable Vector Graphics
html <button id="nav-toggle-button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> <path d="m1
6.59 8.59l12 13.17 7.41 8.59
6 10l
6 6 6-
6z" /> <path d="m12 8l-
6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselec...
width - SVG: Scalable Vector Graphics
femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="
60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primitive.
widths - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no <number> this value is a comma-separated list of ucs range values as defined in iso 10
64
6, each followed by one or more glyph widths.
x - SVG: Scalable Vector Graphics
sianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="
60" height="
60" /> <rect x="120" y="20" width="
60" height="
60" /> <rect x="220" y="20" width="
60" height="
60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 1
60 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object.
z - SVG: Scalable Vector Graphics
two elements are using this attribute: <fepointlight> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="
60" y="
60" z="10" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="
60" y="
60" z="50" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter...
zoomAndPan - SVG: Scalable Vector Graphics
two elements are using this attribute: <svg> and <view> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" zoomandpan="disable"> <filter id="diffuselighting" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="
60" y="
60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting);" /> </svg> usage notes value disable | magnify default value magnify animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the ...
<animateColor> - SVG: Scalable Vector Graphics
example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="
60" cy="
60" r="50"> <animatecolor attributename="fill" attributetype="xml" from="black" to="red" dur="
6s" repeatcount="indefinite"/> </circle> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<animatecolor>' in that specification.
<animateTransform> - SVG: Scalable Vector Graphics
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="
60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0
60 70" to="3
60
60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes global attributes c...
<feBlend> - SVG: Scalable Vector Graphics
height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/
6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feblend>' in that specification.
<feColorMatrix> - SVG: Scalable Vector Graphics
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="2
60">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" ...
<feComponentTransfer> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0
600 300"> <defs> <lineargradient id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.
6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset...
<feImage> - SVG: Scalable Vector Graphics
example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/
6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feimage>' in that specification.
<feMerge> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<femergenode> example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="
60" dy="
60" /> <fegaussianblur stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> </svg> result attributes global attributes core attributes presentation attributes filt...
<feMergeNode> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> example <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="
60" dy="
60" /> <fegaussianblur in="sourcegraphic" stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> <rect x="40" y="40" width="100" height="100" ...
<feOffset> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="
60" dy="
60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feoffset>' in that specification.
<fePointLight> - SVG: Scalable Vector Graphics
defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/
6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fepointlight>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
example html content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="
600" y="
600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/
6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specifica...