Search completed in 2.94 seconds.
DataView.prototype.getFloat64() - JavaScript
the getfloat6
4() method gets a signed 6
4-bit float (double) at the specified byte offset from the start of the dataview.
... syntax dataview.getfloat6
4(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the 6
4-bit float is stored in little- or big-endian format.
...And 2 more matches
DataView.prototype.setBigUint64() - JavaScript
the setbiguint6
4() method stores an unsigned 6
4-bit integer (unsigned long long) value at the specified byte offset from the start of the dataview.
... syntax dataview.setbiguint6
4(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 6
4-bit integer is 2n ** 6
4n - 1n (18
4467
44073709551615n).
...And 2 more matches
base64 - Archive of obsolete content
data encoding and decoding using base6
4 algorithms.
... var base6
4 = require("sdk/base6
4"); var encodeddata = base6
4.encode("hello, world"); var decodeddata = base6
4.decode(encodeddata); globals functions encode(data, charset) creates a base-6
4 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 base6
4 = require("sdk/base6
4"); var encodeddata = base6
4.encode(unicodestring, "utf-8"); returns string : the encoded string decode(data, charset) decodes a string of data which has been encoded using base-6
4 encoding.
...in order to encode and decode unicode strings, the charset parameter needs to be set: var base6
4 = require("sdk/base6
4"); var decodeddata = base6
4.decode(encodeddata, "utf-8"); returns string : the decoded string ...
Mozilla E4X - Archive of obsolete content
e
4x marries xml and javascript syntax, and extends javascript to include namespaces, qualified names, and xml elements and lists.
... e
4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants.
... another e
4x feature: the ability to bind a w3c dom document to a new xml object, reflecting the dom in e
4x terms so that updates to either the dom or the e
4x object hierarchy show up in the other.
... questions and discussion mozilla e
4x - discussion ...
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.builds - november 17th to november 2
4th 2006 trouble building xulrunner 1.8.
4 on winxp using mingw32 november 20th: joe is trying to build xulrunner using the ming compiler on windowsxp.
... he is using make 3.80, working with the source tarball for xulrunner 1.8.
4,running "make -f client.mk distclean" followed by "make -f client.mk build_all".
..."component returned failure code: 0x80570016 (ns_error_xpc_gs_returned_failure) [nsijscid.getservice]" nsresult: "0x80570016 (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 35
4866).
E4X Tutorial - Archive of obsolete content
next » warning: e
4x is deprecated.
... this tutorial walks you through the basic syntax of e
4x (ecmascript for xml).
... with e
4x, programmers can manipulate an xml document with a syntax more familiar to javascript programming.
... subjects introduction accessing xml children descendants and filters namespaces the global xml object see also e
4x processing xml with e
4x next » ...
PRFileInfo64
file information structure used with pr_getfileinfo6
4 and pr_getopenfileinfo6
4.
... syntax #include <prio.h> struct prfileinfo6
4 { prfiletype type; pruint6
4 size; prtime creationtime; prtime modifytime; }; typedef struct prfileinfo6
4 prfileinfo6
4; fields the structure has the following fields: type type of file.
... size 6
4-bit size, in bytes, of file's contents.
... description the prfileinfo6
4 structure provides information about a file, a directory, or some other kind of file system object, as specified by the type field.
WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
the webgl2renderingcontext.uniform[123
4][uif][v]() methods of the webgl api specify values of uniform variables.
...equivalent regex: uniform[123
4](u?i|f)v?
... syntax void gl.uniform1ui(location, v0); void gl.uniform2ui(location, v0, v1); void gl.uniform3ui(location, v0, v1, v2); void gl.uniform
4ui(location, v0, v1, v2, v3); void gl.uniform1fv(location, data, optional srcoffset, optional srclength); void gl.uniform2fv(location, data, optional srcoffset, optional srclength); void gl.uniform3fv(location, data, optional srcoffset, optional srclength); void gl.uniform
4fv(location, data, optional srcoffset, optional srclength); void gl.uniform1iv(location, data, optional srcoffset, optional srclength); void gl.uniform2iv(location, data, optional srcoffset, optional srclength); void gl.uniform3iv(location, data, optional srcoffset, optional srclength); void gl.uniform
4iv(location, data, optional srcoffset, optional srclength); void gl.uniform1uiv(lo...
...cation, data, optional srcoffset, optional srclength); void gl.uniform2uiv(location, data, optional srcoffset, optional srclength); void gl.uniform3uiv(location, data, optional srcoffset, optional srclength); void gl.uniform
4uiv(location, data, optional srcoffset, optional srclength); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
WebGLRenderingContext.uniformMatrix[234]fv() - Web APIs
the webglrenderingcontext.uniformmatrix[23
4]fv() methods of the webgl api specify matrix values for uniform variables.
... the three versions of this method (uniformmatrix2fv(), uniformmatrix3fv(), and uniformmatrix
4fv()) take as the input value 2-component, 3-component, and
4-component square matrices, respectively.
... they are expected to have
4, 9 or 16 floats.
... syntax webglrenderingcontext.uniformmatrix2fv(location, transpose, value); webglrenderingcontext.uniformmatrix3fv(location, transpose, value); webglrenderingcontext.uniformmatrix
4fv(location, transpose, value); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
204 No Content - HTTP
the http 20
4 no content success status response code indicates that the request has succeeded, but that the client doesn't need to go away from its current page.
... a 20
4 response is cacheable by default.
... the common use case is to return 20
4 as a result of a put request, updating a resource, without changing the current content of the page displayed to the user.
... status 20
4 no content specifications specification title rfc 7231, section 6.3.5: 20
4 no content hypertext transfer protocol (http/1.1): semantics and content ...
410 Gone - HTTP
the hypertext transfer protocol (http)
410 gone client error response code indicates that access to the target resource is no longer available at the origin server and that this condition is likely to be permanent.
... if you don't know whether this condition is temporary or permanent, a
40
4 status code should be used instead.
... note: a
410 response is cacheable by default.
... status
410 gone specifications specification title rfc 7231, section 6.5.9:
410 gone hypertext transfer protocol (http/1.1): semantics and content ...
451 Unavailable For Legal Reasons - HTTP
the hypertext transfer protocol (http)
451 unavailable for legal reasons client error response code indicates that the user requested a resource that is not available due to legal reasons, such as a web page for which a legal action has been issued.
... status
451 unavailable for legal reasons example this example response is taken from the ietf rfc (see below) and contains a reference to monty python's life of brian.
... http/1.1
451 unavailable for legal reasons link: <https://spqr.example.org/legislatione>; rel="blocked-by" content-type: text/html <html> <head><title>unavailable for legal reasons</title></head> <body> <h1>unavailable for legal reasons</h1> <p>this request may not be serviced in the roman province of judea due to the lex julia majestatis, which disallows ...
... access to resources hosted on servers deemed to be operated by the people's front of judea.</p> </body> </html> specifications specification title rfc 7725:
451 unavailable for legal reasons an http status code to report legal obstacles ...
BigInt64Array() constructor - JavaScript
the bigint6
4array() typed array constructor creates a new bigint6
4array object, which is, an array of 6
4-bit signed integers in the platform byte order.
... syntax new bigint6
4array(); new bigint6
4array(length); new bigint6
4array(typedarray); new bigint6
4array(object); new bigint6
4array(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 bigint6
4array // from a length var bigint6
4 = new bigint6
4array(2); bigint6
4[0] =
42n; console.log(bigint6
4[0]); //
42n console.log(bigint6
4.length); // 2 console.log(bigint6
4.bytes_per_element); // 8 // from an array var arr = new bigint6
4array([21n,31n]); console.log(arr[1]); // 31n // from another typedarray var x = new bigint6
4array([21n, 31n]); var y = new bigint6
4array(x); console.log(y[0]); // 2...
...1n // from an arraybuffer var buffer = new arraybuffer(32); var z = new bigint6
4array(buffer, 0,
4); // from an iterable var iterable = function*(){ yield* [1n, 2n, 3n]; }(); var bigint6
4 = new bigint6
4array(iterable); // bigint6
4array[1n, 2n, 3n] specifications specification ecmascript (ecma-262)the definition of 'bigint6
4array' in that specification.
BigUint64Array() constructor - JavaScript
the biguint6
4array() typed array constructor creates a new biguint6
4array object, which is, an array of 6
4-bit unsigned integers in the platform byte order.
... syntax new biguint6
4array(); new biguint6
4array(length); new biguint6
4array(typedarray); new biguint6
4array(object); new biguint6
4array(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 biguint6
4array // from a length var biguint6
4 = new biguint6
4array(2); biguint6
4[0] =
42n; console.log(biguint6
4[0]); //
42n console.log(biguint6
4.length); // 2 console.log(biguint6
4.bytes_per_element); // 8 // from an array var arr = new biguint6
4array([21n,31n]); console.log(arr[1]); // 31n // from another typedarray var x = new biguint6
4array([21n, 31n]); var y = new biguint6
4array(x); console.log(y[...
...0]); // 21n // from an arraybuffer var buffer = new arraybuffer(32); var z = new biguint6
4array(buffer, 0,
4); // from an iterable var iterable = function*(){ yield* [1n, 2n, 3n]; }(); var biguint6
4 = new biguint6
4array(iterable); // biguint6
4array[1n, 2n, 3n] specifications specification ecmascript (ecma-262)the definition of 'biguint6
4array' in that specification.
DataView.prototype.getBigInt64() - JavaScript
the getbigint6
4() method gets a signed 6
4-bit integer (long long) at the specified byte offset from the start of the dataview.
... syntax dataview.getbigint6
4(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... littleendian optional indicates whether the 6
4-bit int is stored in little- or big-endian format.
... examples using the getbigint6
4 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.getbigint6
4(0); // 0n specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.getbigint6
4()' in that specification.
DataView.prototype.getBigUint64() - JavaScript
the getbiguint6
4() method gets an unsigned 6
4-bit integer (unsigned long long) at the specified byte offset from the start of the dataview.
... syntax dataview.getbiguint6
4(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... littleendian optional indicates whether the 6
4-bit int is stored in little- or big-endian format.
... examples using the getbiguint6
4 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.getbiguint6
4(0); // 0n specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.getbiguint6
4()' in that specification.
DataView.prototype.setFloat64() - JavaScript
the setfloat6
4() method stores a signed 6
4-bit float (double) value at the specified byte offset from the start of the dataview.
... syntax dataview.setfloat6
4(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 6
4-bit float is stored in little- or big-endian format.
... examples using the setfloat6
4 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.setfloat6
4(0, 3); dataview.getfloat6
4(0); // 3 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.setfloat6
4' in that specification.
Float64Array() constructor - JavaScript
the float6
4array() typed array constructor creates a new float6
4array object, which is, an array of 6
4-bit floating point numbers (corresponding to the c double data type) in the platform byte order.
... syntax new float6
4array(); // new in es2017 new float6
4array(length); new float6
4array(typedarray); new float6
4array(object); new float6
4array(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 float6
4array // from a length var float6
4 = new float6
4array(2); float6
4[0] =
42; console.log(float6
4[0]); //
42 console.log(float6
4.length); // 2 console.log(float6
4.bytes_per_element); // 8 // from an array var arr = new float6
4array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new float6
4array([21, 31]); var y = new float6
4array(x); console.log(y[0]); // 21 // from an ar...
...raybuffer var buffer = new arraybuffer(32); var z = new float6
4array(buffer, 0,
4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var float6
4 = new float6
4array(iterable); // float6
4array[1, 2, 3] specifications specification ecmascript (ecma-262)the definition of 'typedarray constructors' in that specification.
k4 - SVG: Scalable Vector Graphics
the k
4 attribute defines one of the values to be used within the the arithmetic operation of the <fecomposite> filter primitive.
... the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k
4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0
420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k
4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k
4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/...
...12668/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 specification status comment filter effects module level 1the definition of 'k
4' in that specification.
... working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'k
4' in that specification.
Example 4 - Learn web development
ight: 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 : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertica...
...adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .
4em .
4em; box-shadow: 0 .2em .
4em rgba(0,0,0,.
4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.for...
...lectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode ===
40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
PRUint64
guaranteed to be an unsigned 6
4-bit integer on all platforms.
... syntax #include <prtypes.h> typedef definition pruint6
4; description may be defined in several different ways, depending on the platform.
... notes note: prior to gecko 12.0, pruint6
4 was actually treated as a signed 6
4-bit integer by xpconnect.
PR_Seek64
moves the current read-write file pointer by an offset expressed as a 6
4-bit integer.
... syntax #include <prio.h> print6
4 pr_seek6
4( prfiledesc *fd, print6
4 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 6
4-bit integer) of the file pointer for the file descriptor fd: pr_seek6
4(fd, 0, pr_seek_cur) if the operating system can handle only a 32-bit file offset, pr_seek6
4 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.
nsISupportsPRInt64
xpcom/ds/nsisupportsprimitives.idlscriptable this interface provides scriptable access for 6
4-bit signed integers.
... inherits from: nsisupportsprimitive last changed in gecko 1.2 method overview string tostring(); attributes attribute type description data print6
4 provides access to the native type represented by the object.
...see bug 166
426 for details.
nsISupportsPRUint64
xpcom/ds/nsisupportsprimitives.idlscriptable this interface provides scriptable access for 6
4-bit unsigned integers.
... inherits from: nsisupportsprimitive last changed in gecko 1.2 method overview string tostring(); attributes attribute type description data pruint6
4 provides access to the native type represented by the object.
...see bug 166
426 for details.
WebGL2RenderingContext.vertexAttribI4[u]i[v]() - Web APIs
the webgl2renderingcontext.vertexattribi
4[u]i[v]() methods of the webgl 2 api specify integer values for generic vertex attributes.
... syntax void gl.vertexattribi
4i(index, v0, v1, v2, v3); void gl.vertexattribi
4ui(index, v0, v1, v2, v3); void gl.vertexattribi
4iv(index, value); void gl.vertexattribi
4uiv(index, value); parameters index a gluint specifying the position of the vertex attribute to be modified.
... examples gl.vertexattribi
4i(a_foobar, 10); specifications specification status comment webgl 2.0the definition of 'vertexattribi' in that specification.
WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
the webglrenderingcontext.uniform[123
4][fi][v]() methods of the webgl api specify values of uniform variables.
... many of the functions described here have expanded webgl 2 interfaces, which can be found under webgl2renderingcontext.uniform[123
4][uif][v]().
...value); void gl.uniform1i(location, v0); void gl.uniform1iv(location, value); void gl.uniform2f(location, v0, v1); void gl.uniform2fv(location, value); void gl.uniform2i(location, v0, v1); void gl.uniform2iv(location, value); void gl.uniform3f(location, v0, v1, v2); void gl.uniform3fv(location, value); void gl.uniform3i(location, v0, v1, v2); void gl.uniform3iv(location, value); void gl.uniform
4f(location, v0, v1, v2, v3); void gl.uniform
4fv(location, value); void gl.uniform
4i(location, v0, v1, v2, v3); void gl.uniform
4iv(location, value); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
the webglrenderingcontext.vertexattrib[123
4]f[v]() methods of the webgl api specify constant values for generic vertex attributes.
... syntax void gl.vertexattrib1f(index, v0); void gl.vertexattrib2f(index, v0, v1); void gl.vertexattrib3f(index, v0, v1, v2); void gl.vertexattrib
4f(index, v0, v1, v2, v3); void gl.vertexattrib1fv(index, value); void gl.vertexattrib2fv(index, value); void gl.vertexattrib3fv(index, value); void gl.vertexattrib
4fv(index, value); parameters index a gluint specifying the position of the vertex attribute to be modified.
... examples const a_foobar = gl.getattriblocation(shaderprogram, 'foobar'); //either set each component individually: gl.vertexattrib3f(a_foobar, 10.0, 5.0, 2.0); //or provide a float32array: const floatarray = new float32array([10.0, 5.0, 2.0]); gl.vertexattrib3fv(a_foobar, floatarray); // we want to load the following 3x3 matrix into attribute named "matrix3x3" // 0 1 2 // 3
4 5 // 6 7 8 const matrix3x3location = gl.getattriblocation(shaderprogram, 'matrix3x3'); gl.vertexattrib3f(matrix3x3location, 0, 3, 6); gl.vertexattrib3f(matrix3x3location + 1, 1,
4, 7); gl.vertexattrib3f(matrix3x3location + 2, 2, 5, 8); specifications specification status comment webgl 1.0the definition of 'vertexattrib' in that specification.
304 Not Modified - HTTP
the http 30
4 not modified client redirection response code indicates that there is no need to retransmit the requested resources.
... many developer tools' network panels of browsers create extraneous requests leading to 30
4 responses, so that access to the local cache is visible to developers.
... status 30
4 not modified specifications specification title rfc 7232, section
4.1: 30
4 not modified hypertext transfer protocol (http/1.1): conditional requests ...
401 Unauthorized - HTTP
the http
401 unauthorized client error status response code indicates that the request has not been applied because it lacks valid authentication credentials for the target resource.
... this status is similar to
403, but in this case, authentication is possible.
... status
401 unauthorized example response http/1.1
401 unauthorized date: wed, 21 oct 2015 07:28:00 gmt www-authenticate: basic realm="access to staging site" specifications specification title rfc 7235, section 3.1:
401 unauthorized http/1.1: authentication ...
403 Forbidden - HTTP
the http
403 forbidden client error status response code indicates that the server understood the request but refuses to authorize it.
... this status is similar to
401, but in this case, re-authenticating will make no difference.
... status
403 forbidden example response http/1.1
403 forbidden date: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 7231, section 6.5.3:
403 forbidden http/1.1: semantics and content ...
Index - Web APIs
4 angle_instanced_arrays.drawelementsinstancedangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.drawelementsinstancedangle() method of the webgl api renders primitives from array data like the gl.drawelements() method.
... 1
4 absoluteorientationsensor api, absoluteorientationsensor, generic sensor api, interface, orientation sensor api, orientationsensor, reference, sensor, sensor apis, sensors the absoluteorientationsensor interface of the sensor apis describes the device's physical orientation in relation to the earth's reference coordinate system.
... 2
4 accelerometer api, accelerometer, accelerometer api, generic sensor api, interface, reference, sensor, sensor apis, sensors the accelerometer interface of the sensor apis provides on each reading the acceleration applied to the device along all three axes.
...And 2021 more matches
Index - Archive of obsolete content
4 api api, archive archived documentation about obsolete web standards apis.
... 1
4 communicating with other scripts no summary!
... 2
4 classes and inheritance add-on sdk no summary!
...And 735 more matches
Index
4 binary compatibility xpcom if mozilla decides to upgrade to a compiler that does not have the same abi as the current version, any built component may fail.
... 1
4 introduction to xpcom for the dom developing mozilla warning: this document has not yet been reviewed by the dom gurus, it might contain some errors.
... 2
4 components.issuccesscode xpcom, xpcom:language bindings, xpconnect determines whether a given xpcom return code (that is, an nsresult value) indicates the success or failure of an operation, returning true or false respectively.
...And 313 more matches
Index - Archive of obsolete content
4 accessibility/xul accessibility reference accessibility, xul this table is designed to show how to expose text properly for various xul element types.
... 1
4 allowevents xul attributes, xul reference no summary!
... 2
4 autocompletesearchparam xul attributes, xul reference no summary!
...And 299 more matches
Index
data described as pem is a base6
4 encoded presentation of der, usually wrapped between human readable begin/end lines.
... nss prefers the binary presentation, but is often capable to use base6
4 or ascii presentations, especially when importing data from files.
... it should be noted that the first database format that can be accessed simultaneously by multiple applications is key
4.db/cert9.db – database files with lower numbers will most likely experience unrecoverable corruption if you access them with multiple applications at the same time.
...And 219 more matches
Index
4 foss guide, spidermonkey feel free to add your own spidermonkey-based open source projects (and if necessary add categories)!
... 1
4 jit optimization strategies junk, spidermonkey spidermonkey's optimizing jit, ionmonkey, uses various strategies to optimize operations.
... 2
4 js::autosaveexceptionstate jsapi reference, reference, référence(2), spidermonkey js::autosaveexceptionstate saves and later restores the current exception state of a given jscontext.
...And 192 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
2
40
4 glossary, http errors, infrastructure, navigation a
40
4 is a standard response code meaning that the server cannot find the requested resource.
...
4 alpn alpn, draft, glossary, needscontent, tls application-layer protocol negotiation (alpn) is a tls extension which indicates what application layer protocol is negotiating the encryped connection without requiring additional round trips.
... 1
4 ajax ajax, codingscripting, glossary, infrastructure, l10n:priority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest.
...And 188 more matches
Key Values - Web APIs
vk_menu (0x12) vk_lmenu (0xa
4) vk_rmenu (0xa5) kvk_option (0x3a) kvk_rightoption (0x3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x01000023) keycode_alt_left (57) keycode_alt_right (58) "altgraph" [5] the altgr or altgraph (alternate graphics) key.
... gdk_key_mode_switch (0xff7e) gdk_key_iso_level3_shift (0xfe03) gdk_key_iso_level3_latch (0xfe0
4) gdk_key_iso_level3_lock (0xfe05) gdk_key_iso_level5_shift (0xfe11) gdk_key_iso_level5_latch (0xfe12) gdk_key_iso_level5_lock (0xfe13) qt::key_altgr (0x01001103 qt::key_mode_switch (0x0100117e) "capslock" the caps lock key.
... vk_capital (0x1
4) kvk_capslock (0x39) gdk_key_caps_lock (0xffe5) qt::key_capslock (0x0100002
4) keycode_caps_lock (115) "control" the control, ctrl, or ctl key.
...And 109 more matches
HTTP Index - HTTP
a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more
4 basics of http guide, http, overview http is a pretty extensible protocol.
... 6 data urls base6
4, guide, http, intermediate, url data urls, urls prefixed with the data: scheme, allow content creators to embed small files inline in documents.
... 1
4 configuring servers for ogg media audio, http, media, ogg, video this guide covers a few server configuration changes that may be necessary for your web server to correctly serve ogg media files.
...And 82 more matches
StringView - Archive of obsolete content
the code stringview.js "use strict"; /*\ |*| |*| :: number.isinteger() polyfill :: |*| |*| /docs/web/javascript/reference/global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = function isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -900719925
47
40992 && nval < 900719925
47
40992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper network |*| |*| revision #12, march 21st, 2017 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/stringview |*| https://developer.mozilla.org/docs/user:fusionchess |*| https://github.com/madmurphy/stringview.js |*| |*| this framework is released under the gnu lesser general p...
... fputoutptcode = stringview.pututf8charcode; fgetoutptchrsize = stringview.getutf8charlength; ftaview = uint8array; break encswitch; case "utf-16": fputoutptcode = stringview.pututf16charcode; fgetoutptchrsize = stringview.getutf16charlength; ftaview = uint16array; break encswitch; case "utf-32": ftaview = uint32array; ntranscrtype &= 1
4; break encswitch; default: /* case "ascii", or case "binarystring" or unknown cases */ ftaview = uint8array; ntranscrtype &= 1
4; } typeswitch: switch (typeof vinput) { case "string": /* the input argument is a primitive string: a new buffer will be created.
...*/ awhole = araw = new ftaview(number(vinput) || 0); } if (ntranscrtype < 8) { var vsource, noutptlen, ncharstart, ncharend, nendidx, fgetinptchrsize, fgetinptchrcode; if (ntranscrtype &
4) { /* input is string */ vsource = vinput; noutptlen = ninptlen = vsource.length; ntranscrtype ^= this.encoding === "utf-32" ?
...And 75 more matches
SVG documentation index - SVG: Scalable Vector Graphics
3 compatibility sources svg the following sources are used for the compatibility tables on svg elements and attributes:
4 content type needstechnicalreview, svg, types, data types svg makes use of a number of data types.
... 1
4 svg conditional processing attributes intermediate, needsexample, property, reference, svg the svg conditional processing attributes are all the attributes that can be specified on some svg elements to control whether or not the element on which it appears should be rendered.
... 2
4 amplitude needscompattable, svg, svg attribute the amplitude attribute controls the amplitude of the gamma function of a component transfer element when its type attribute is gamma.
...And 74 more matches
WebGL constants - Web APIs
stencil_buffer_bit 0x00000
400 passed to clear to clear the current stencil buffer.
... color_buffer_bit 0x0000
4000 passed to clear to clear the current color buffer.
... triangles 0x000
4 passed to drawelements or drawarrays to draw triangles.
...And 69 more matches
Web video codec guide - Web media technologies
imagine the amount of data needed to store uncompressed video: a single frame of high definition (1920x1080) video in full color (
4 bytes per pixel) is 8,29
4,
400 bytes.
... at a typical 30 frames per second, each second of hd video would occupy 2
48,832,000 bytes (~2
49 mb).
... a minute of hd video would need 1
4.93 gb of storage.
...And 67 more matches
The "codecs" parameter in common media types - Web media technologies
at a fundamental level, you can specify the type of a media file using a simple mime type, such as video/mp
4 or audio/mpeg.
...for instance, just describing a video in an mpeg-
4 file with the mime type video/mp
4 doesn't say anything about what format the actual media within takes.
... video/mp
4 a video file using the mpeg-
4 file type.
...And 67 more matches
MathML Accessibility in Mozilla
we started exposing generic accessible objects for mathml in bug 9205
47 and so these can be retrieved by nvda starting with gecko 27.0 (firefox 27.0 / thunderbird 27.0 / seamonkey 2.2
4).
...in bug 1175269 and bug 10016
41, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions.
... hence basic support is available in gecko
41.0 (firefox
41.0 / thunderbird
41.0 / seamonkey 2.38) and we are still trying to keep in sync with webkit/voiceover.
...And 66 more matches
Index - Learn web development
found 3
48 pages: # page tags and summary 1 learn web development beginner, css, html, index, intro, landing, learn, web welcome to the mdn learning area.
...
4 assessment: accessibility troubleshooting accessibility, assessment, beginner, css, codingscripting, html, javascript, learn, wai-aria in the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
... 1
4 common questions codingscripting, infrastructure, learn, web, webmechanics this section of the learning area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g.
...And 63 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
abstract this document is a concrete example of a centralized auto-configuration of mozilla apps, that are; firefox, thunderbird, mozilla suite 1.x.x, seamonkey and for the record, old netscape
4.x.
...the old netscape
4.x the file is encoded (byte-shift/rotary is 7), and the presence of the file (netscape.cfg) in the mozilla_home directory suffices for it to be read and executed.
... that prefcalls.js is now archive in omni.jar file located at the root of the mozilla apps installation, example of tb5: # jar -tvf /usr/lib/thunderbird/omni.jar | grep prefcalls.js 7
499 sat nov 05 09:21:3
4 cet 2011 defaults/autoconfig/prefcalls.js traditionally (previous apps versions) is was in mozilla_home/default/autoconfig/prefcalls.js.
...And 57 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
syntax /* css basic user interface module level
4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; a...
... value browser description button-arrow-down firefox removed in firefox 6
4 button-arrow-next firefox removed in firefox 6
4 button-arrow-previous firefox removed in firefox 6
4 button-arrow-up firefox removed in firefox 6
4 button-focus firefox removed in firefox 6
4 dualbutton firefox removed in firefox 6
4 groupbox firefox removed in firefox 6
4 menuarr...
...ow firefox removed in firefox 6
4 menubar firefox removed in firefox 6
4 menucheckbox firefox removed in firefox 6
4 menuimage firefox removed in firefox 6
4 menuitem firefox removed in firefox 6
4.
...And 50 more matches
NSS functions
and later ssl_clearsessioncache mxr 3.2 and later ssl_configmpserversidcache mxr 3.2 and later ssl_configsecureserver mxr 3.2 and later ssl_configserversessionidcache mxr 3.2 and later ssl_datapending mxr 3.2 and later ssl_forcehandshake mxr 3.2 and later ssl_forcehandshakewithtimeout mxr 3.11.
4 and later ssl_getchannelinfo mxr 3.
4 and later ssl_getciphersuiteinfo mxr 3.
4 and later ssl_getclientauthdatahook mxr 3.2 and later ssl_getmaxservercachelocks mxr 3.
4 and later ssl_getsessionid mxr 3.2 and later ssl_getstatistics mxr 3.2 and later ssl_handshakecallback mxr 3.2 and later ...
... ssl_importfd mxr 3.2 and later ssl_inheritmpserversidcache mxr 3.2 and later ssl_invalidatesession mxr 3.2 and later ssl_localcertificate mxr 3.
4 and later ssl_optionget mxr 3.2 and later ssl_optiongetdefault mxr 3.2 and later ssl_optionset mxr 3.2 and later ssl_optionsetdefault mxr 3.2 and later ssl_peercertificate mxr 3.2 and later ssl_preencryptedfiletostream mxr 3.2 and later ssl_preencryptedstreamtofile mxr 3.2 and later ssl_rehandshake mxr 3.2 and later ssl_rehandshakewithtimeout mxr 3.11.
4 and later ssl_resethandshake mxr 3.2 and later ssl_restarthandshakeaftercertreq mxr...
... 3.2 and later ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelocks mxr 3.
4 and later ssl_setpkcs11pinarg mxr 3.2 and later ssl_setsockpeerid mxr 3.2 and later ssl_seturl mxr 3.2 and later ssl_shutdownserversessionidcache mxr 3.7.
4 and later deprecated ssl functions the following ssl functions have been replaced with newer versions.
...And 43 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 19
45 - hypertext transfer protocol 1.0 and rfc 2068 - hypertext transfer protocol 1.1).
... netscape navigator
4 and internet explorer
4 introduced the ability to manipulate html content in a browser (dynamic html or dhtml) rather than on the web server and began the introduction of support for css to style content.
...And 42 more matches
HTML documentation index - HTML: Hypertext Markup Language
4 block-level elements beginner, development, guide, html, html5, web html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
... 1
4 dir bidi, global attributes, html, reference the dir global attribute is an enumerated attribute that indicates the directionality of the element's text.
... 2
4 itemscope attribute, global attribute, html, html microdata, microdata, reference itemscope is a boolean global attribute that defines the scope of associated metadata.
...And 39 more matches
NSS_3.12_release_notes.html
nss 3.12 requires nspr
4.7.1.
...the tar.gz or zip file expands to an nss-3.12 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr
4.7.1 binary distributions to get the nspr
4.7.1 header files and shared libraries, which nss 3.12 requires.
... nspr
4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v
4.7.1/.
...And 38 more matches
sslerr.html
ssl_error_bad_certificate -1228
4 "unable to communicate securely with peer: peers's certificate was rejected." a certificate was received from the remote system and was passed to the certificate authentication callback function provided by the local application.
... ssl_error_post_warning -12275 (unused) ssl_error_ssl2_disabled -1227
4 "peer only supports ssl version 2, which is locally disabled." the remote server has asked to use ssl version 2, and ssl version 2 is disabled in the local client's configuration.
... ssl_error_bad_block_padding -1226
4 "ssl received a record with bad block padding." ssl was using a block cipher, and the last block in an ssl record had incorrect padding information in it.
...And 37 more matches
IDBObjectStore - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in db.
...{ unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; }; // create a new item to add in to the object store var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: 'december', year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) {...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbobjectstorechrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...And 37 more matches
Hacking Tips
$ gdb --args js […] (gdb) b js::reportoverrecursed (gdb) r js> function f(i) { if (i % 2) f(i + 1); else f(i + 3); } js> f(0) breakpoint 1, js::reportoverrecursed (maybecx=0xfdca70) at /home/nicolas/mozilla/ionmonkey/js/src/jscntxt.cpp:
495
495 if (maybecx) (gdb) call js::dumpbacktrace(maybecx) #0 (nil) typein:2 (0x7fffef1231c0 @ 0) #1 (nil) typein:2 (0x7fffef1231c0 @ 2
4) #2 (nil) typein:3 (0x7fffef1231c0 @
47) #3 (nil) typein:2 (0x7fffef1231c0 @ 2
4) #
4 (nil) typein:3 (0x7fffef1231c0 @
47) […] #25157 0x7fffefbbc250 typein:2 (0x7fffef1231c0 @ 2
4) #25158 0x7fffefbbc1...
...c8 typein:3 (0x7fffef1231c0 @
47) #25159 0x7fffefbbc1
40 typein:2 (0x7fffef1231c0 @ 2
4) #25160 0x7fffefbbc0b8 typein:3 (0x7fffef1231c0 @
47) #25161 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.
... since spidermonkey
48, we have a gdb unwinder.
...And 35 more matches
Error codes returned by Mozilla APIs
ns_error_not_implemented (0x8000
4001) this error is caused by methods which are not implemented.
... ns_error_no_interface (0x8000
4002) an attempt was made to call queryinterface to retrieve an interface which an object does not support.
... ns_error_null_pointer (0x8000
4003) an error occurred because a value was set to null when this was not expected.
...And 34 more matches
HTTP response status codes - HTTP
responses are grouped in five classes: informational responses (100–199), successful responses (200–299), redirects (300–399), client errors (
400–
499), and server errors (500–599).
... 20
4 no content there is no content to send for this request, but the headers may be useful.
... 30
4 not modified this is used for caching purposes.
...And 33 more matches
Web audio codec guide - Web media technologies
codec name (short) full codec name container support aac advanced audio coding mp
4, adts, 3gp alac apple lossless audio codec mp
4, quicktime (mov) amr adaptive multi-rate 3gp flac free lossless audio codec mp
4, ogg, flac g.711 pulse code modulation (pcm) of voice frequencies rtp / webrtc g.722 7 khz audio coding within 6
4 kbps (for telephony/voip) rtp / webrtc mp3 mpeg-1 audio layer iii mp...
...
4, adts, mpeg1, 3gp opus opus webm, mp
4, 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.
... audio encoder configuration effects on quality and size feature effect on quality effect on size lossless compression no loss of fidelity unlikely to get more than
40-50% compression lossy compression always some loss of fidelity; the higher the compression, the more the loss compression of up to 80-95% possible quality setting the higher the quality, the better the fidelity of the encoded audio the higher the fidelity, the larger the resulting file becomes, though the amount of change varies from codec to codec bit rate...
...And 33 more matches
Mozilla’s UAAG evaluation report
we are claiming to support html
4, css 2, png, jpg and gif.
...when filing mozilla bugs based on uaag requirements, please use bug 2
4413 as the uaag meta bug.
...see meta bug
4192
4 for open issues with the alt attribute.
...And 32 more matches
KeyboardEvent: code values - Web APIs
keyboardevent.code value code firefox chrome 0x0000 "unidentified" "" 0x0001 "escape" "escape" 0x0002 "digit0" "digit0" 0x0003 "digit1" "digit1" 0x000
4 "digit2" "digit2" 0x0005 "digit3" "digit3" 0x0006 "digit
4" "digit
4" 0x0007 "digit5" "digit5" 0x0008 "digit6" "digit6" 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" 0x001
4 "keyt" "keyt" 0x0015 "keyy" "keyy" 0x0016 "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" 0...
...x0023 "keyh" "keyh" 0x002
4 "keyj" "keyj" 0x0025 "keyk" "keyk" 0x0026 "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" 0x003
4 "period" "period" 0x0035 "slash" "slash" 0x0036 "shiftright" "shiftright" 0x0037 "numpadmul...
...And 32 more matches
Index - Firefox Developer Tools
4 color vision simulation accessibility, accessibility inspector, color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
... 1
4 browser console browser, debugging, tools, web development, webdevelopment:tools the browser console is like the web console, but applied to the whole browser rather than a single content tab.
... 2
4 debugger.source a debugger.source instance represents either a piece of javascript source code or the serialized text of a block of webassembly code.
...And 31 more matches
nsINavBookmarksService
1.0 67 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1
4.0 (firefox 1
4.0 / thunderbird 1
4.0 / seamonkey 2.11) implemented by: @mozilla.org/browser/nav-bookmarks-service;1.
...atecontainer 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 print6
4array 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 print6
4array aresult); native code only!
...And 29 more matches
NSS Tools ssltap
availability this tool is known to build on solaris 2.5.1 (sunos 5.5.1) and windows nt
4.0.
... -p port change the default rendezvous port (192
4) to another port.
... the following are well-known port numbers: http 80 https
443 smtp 25 ftp 21 imap 1
43 imaps 993 (imap over ssl) nntp 119 nntps 563 (nntp over ssl) examples you can use the ssl debugging tool to intercept any connection information.
...And 28 more matches
filter - CSS: Cascading Style Sheets
syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.
4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the...
...except where noted, the functions that take a value expressed with a percent sign (as in 3
4%) also accept the value expressed as decimal (as in 0.3
4).
...terpolation-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="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="img
4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 1
4px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-f...
...And 28 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
you can learn more about chromebug and download it at http://getfirebug.com/wiki/index.php/chromebug_user_guide you may also find this extension to be valuable: extension developer https://addons.mozilla.org/firefox/addon/7
43
4 developing extensions: what you need to know let’s delve into chrome, something you’ll need to know about in order to develop extensions.
...source files represented through chrome urls run with universalxpconnect privileges; even if they haven’t been granted “use xpconnect as local file” privileges, as discussed in chapter
4, they will be able to use xpcom functions (figure 1).
...create folders and files in your work folder as shown in figure
4.
...And 27 more matches
NSS tools : ssltap
-p port change the default rendezvous port (192
4) to another port.
... the following are well-known port numbers: * http 80 * https
443 * smtp 25 * ftp 21 * imap 1
43 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 192
4.
...And 27 more matches
Implementation Status - Archive of obsolete content
section title status notes bugs 3.1 namespaces supported 3.2.1 common attributes supported 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 302168; 3.3.1 model supported 3.3.2 instance partial instance element with two child element does not trigger excep...
...tion 337302; 3.3.3 submission partial no support for @indent and complex schema validation 278761; 278762; 3.3.
4 bind partial using the index() function in binds does not work.
... 292333; 3.
4 extension module unsupported 300760; 3.5 mustunderstand module unsupported 300757;
4.
...And 26 more matches
Bytecode Descriptions
jsop::zero, jsop::one, jsop::int8, jsop::uint16, and jsop::uint2
4 are all compact encodings for jsop::int32.
... uint2
4 operands: (uint2
4_t val) stack: ⇒ val push the uint2
4_t immediate operand as an int32value.
... double operands: (double val) stack: ⇒ val push the 6
4-bit floating-point immediate operand as a doublevalue.
...And 26 more matches
Permissions - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpermissionschrome full support
43edge full support 79firefox full support
46ie no support noopera full support yessafari no support nowebview android full support ...
...
43chrome android full support
43firefox android full support
46opera android full support yessafari ios no support nosamsung internet android full support
4.0accelerometer permissionchrome full support 62edge full support 79firefox ?
... safari ios no support nosamsung internet android full support 8.0camera permissionchrome full support 6
4edge full support 79firefox ?
...And 26 more matches
Index - HTTP
4 accept-encoding content negotiation, http, http header, reference, request header the accept-encoding request http header advertises which content encoding, usually a compression algorithm, the client is able to understand.
... 1
4 access-control-request-method cors, http, reference, header the access-control-request-method request header is used when issuing a preflight request to let the server know which http method will be used when the actual request is made.
... 18 authorization http, http header, reference, request header, header the http authorization request header contains the credentials to authenticate a user agent with a server, usually after the server has responded with a
401 unauthorized status and the www-authenticate header.
...And 26 more matches
MathML Torture Test
/option> <option value="texgyreschola">tex gyre schola</option> <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, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td>2</td> <td><img src="https://udn.rea...
...lityripple.com/samples/b8/da
4a50ea3
4.png" width="30" height="17" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <!-- <mrow> <msub><mi></mi><mn>2</mn></msub> <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</mn><none/> <mprescripts/> <mn>2</mn><none/> </mmultiscripts> </mrow> </math> </td></tr> <tr> <td>3</td> <td><img src="https://udn.realityripple.com/samples/8a/1d0e6e073c.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="76" 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> ...
...And 25 more matches
NSS tools : ssltab
-p port change the default rendezvous port (192
4) to another port.
... the following are well-known port numbers: * http 80 * https
443 * smtp 25 * ftp 21 * imap 1
43 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 192
4.
...And 25 more matches
NSS tools : ssltap
-p port change the default rendezvous port (192
4) to another port.
... the following are well-known port numbers: * http 80 * https
443 * smtp 25 * ftp 21 * imap 1
43 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 192
4.
...And 25 more matches
Introduction to SSL - Archive of obsolete content
the details of the protocol are available in request for comments (rfc): 22
46,the tls protocol version 1.0.
...government restrictions on products that support anything stronger than
40-bit encryption, disabling support for all
40-bit ciphers effectively restricts access to network browsers that are available only in the united states (unless the server involved has a special global server id that permits the international client to "step up" to stronger encryption).
... however, since
40-bit ciphers can be broken relatively quickly, administrators whose user communities can use stronger ciphers without violating export restrictions should disable the
40-bit ciphers if they are concerned about access to data by eavesdroppers.
...And 24 more matches
Mozilla Quirks Mode Behavior
miscellaneous & style all of the style rules in layout/style/res/quirk.css apply only in quirks mode: orphaned li has an inside bullet (bug 10
49).
...removed in firefox 50 (bug 6
48331).
... indent nested dl elements (bug 87
49).
...And 24 more matches
NSS_3.12.3_release_notes.html
nss 3.12.3 release notes 2009-0
4-01 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.3 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.3 is a patch release for nss 3.12.
... nss 3.12.3 requires nspr
4.7.
4.
...the tar.gz or zip file expands to an nss-3.12.3 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr
4.7.
4 binary distributions to get the nspr
4.7.
4 header files and shared libraries, which nss 3.12.3 requires.
...And 24 more matches
Media container formats (file types) - Web media technologies
the mime types and extensions for each are listed.the most commonly used containers for media on the web are probably mpeg-
4 (mp
4), quicktime movie (mov), and the wavefile audio file format (wav).
... 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 56, edge 16, firefox 51, safari 11 mpeg / mpeg-2 moving picture experts group (1 and 2) — mpeg-
4 (mp
4) moving picture experts group
4 chrome 3, edge 12, firefox, internet explorer 9, opera 2
4, 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 older 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.
...And 24 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
as a result, mozilla is not fully backwards-compatible with netscape navigator
4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later.
... browsers, like internet explorer
4, that were built before the conception of w3c standards inherited many quirks.
...they include: html
4.01, xhtml 1.0 and xhtml 1.1 cascade style sheets (css): css level 1, css level 2.1 and parts of css level 3 document object 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 descrip...
...And 23 more matches
sslfnc.html
upgraded documentation may be found in the current nss reference ssl functions chapter
4 ssl functions this chapter describes the core ssl functions.
...the ietf standard transport layer security (tls) protocol, rfc 22
46, is a modified version of ssl3.
... syntax #include "ssl.h" secstatus 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_rc
4_128_with_md5 ssl_en_rc
4_128_export
40_with_md5 ssl_en_rc2_128_cbc_with_md5 ssl_en_rc2_128_cbc_export
40_with_md5 ssl_en_des_6
4_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_256_cbc_sha (not enabled by default; client side on...
...And 23 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 6
4 full support 6
4 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).
... 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 6
4 full support 6
4 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: mozfullscreenopera android full support 50 full support 50 full support 1
4alternate name alternate name uses the non-standard name: webkitisfullscreensafari ios full support 6alternate name full support 6alternate name alternate name uses the non-standard name: webkitisfullscreensamsung internet android full support 10.0 full support ...
...And 23 more matches
WebGL model view projection - Web APIs
buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, data, gl.static_draw); // setup the pointer to our attribute data (the triangles) gl.enablevertexattribarray(this.positionlocation); gl.vertexattribpointer(this.positionlocation, 3, gl.float, false, 0, 0); // setup the color uniform that will be shared across all triangles gl.uniform
4fv(this.colorlocation, settings.color); // draw the triangles to the screen gl.drawarrays(gl.triangles, 0, 6); } the shaders are the bits of code written in glsl that take our data points and ultimately render them to the screen.
... first take a look at the vertex shader that will move the vertices on the screen: // the individual position vertex attribute vec3 position; void main() { // the gl_position is the final position in clip space after the vertex shader modifies it gl_position = vec
4(position, 1.0); } next, to actually rasterize the data into pixels, the fragment shader evaluates everything on a per pixel basis, setting a single color.
... precision mediump float; uniform vec
4 color; void main() { gl_fragcolor = color; } with those settings included, it's time to directly draw to the screen using clip space coordinates.
...And 23 more matches
JSAPI reference
a note on versioning: up until the release of firefox
4, spidermonkey, and thus the jsapi, was versioned in an ad-hoc way, with releases happening at times that roughly, but not really, corresponded to firefox releases.
...firefox
4 is the last release that has a corresponding spidermonkey release with the old scheme, where the jsapi has the version 1.8.5.
...key 31 js_getobjectruntime added in spidermonkey 17 js_getcontextprivate js_setcontextprivate js_getsecondcontextprivate added in spidermonkey 17 js_setsecondcontextprivate added in spidermonkey 17 js_setinterruptcallback added in spidermonkey 31 js_getinterruptcallback added in spidermonkey 31 js_requestinterruptcallback added in spidermonkey 31 js_checkforinterrupt added in jsapi
45 js_destroycontextmaybegc obsolete since jsapi 1
4 js_setbranchcallback obsolete since javascript 1.9.1 js_setoperationcallback obsolete since jsapi 30 js_getoperationcallback obsolete since jsapi 30 js_triggeroperationcallback obsolete since jsapi 30 js_clearoperationcallback obsolete since javascript 1.9.1 js_getoperationlimit obsolete since javascript 1.9.1 js_setoperationlimit obsol...
...And 22 more matches
Working with data
myarray.constructor.size is 20; the total size of the array's data buffer is 20 bytes (5 entries,
4 bytes apiece).
... var mycarray_ofstrings = ctypes.jschar.ptr.array(2)([cstr1, cstr2]); // specifying length of 2 is optional, can omit it, so can just do `ctypes.jschar.ptr.array()([cstr1, cstr2])` mycarray_ofstrings.addressofelement(0).contents.readstring(); // outputs: "rawr" mycarray_ofstrings.addressofelement(1).contents.readstring(); // outputs: "boo" example: creating an array of integers var jsarr = [
4, 10]; var mycarr = ctypes.int.array(jsarr.length)(jsarr); // specifying length is optional, can omit.
... this will also work: `ctypes.int.array()(jsarr)` mycarr.addressofelement(0).contents; // outputs:
4 mycarr.addressofelement(1).contents; // outputs: 10 type casting you can type cast data from one type to another by using the ctypes.cast() function: var newobj = ctypes.cast(origobj, newtype); this will return a new object whose data block is shared with the original object, but whose type is newtype.
...And 22 more matches
Image file type and format guide - Web media technologies
mime type image/apng file extension(s) .apng specification wiki.mozilla.org/apng_specification browser compatibility chrome 59, edge 12, firefox 3, opera
46, safari 8 maximum dimensions 2,1
47,
483,6
47×2,1
47,
483,6
47 pixels supported color modes color mode bits per component (d) description greyscale 1, 2,
4, 8, and 16 each pixel consists of a single d-bit value indicating the brightness of the greyscale pixel.
... indexed color 1, 2,
4, and 8 each pixel is a d-bit value indicating an index into a color palette which is contained within a plte chunk in the apng file; the colors in the palette all use an 8-bit depth.
...the simplest, and most commonly used, form of bmp file is an uncompressed raster image, with each pixel occupying 3 bytes representing its red, green, and blue components, and each row padded with 0x00 bytes to a multiple of
4 bytes wide.
...And 22 more matches
Gecko Compatibility Handbook - Archive of obsolete content
4.x vs.
... gecko since 1997, much of the web's content has been developed for microsoft internet explorer
4 or netscape navigator
4.
... internet explorer
4 and netscape navigator
4 share support for a large part of the html 3.2 standard and basic javascript.
...And 21 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
the object element: w3c standards and cross-browser issues the object element is part of the html
4.01 specification, and is the recommended mechanism to invoke plugins.
...here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-
4445535
40000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="1
42" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> </object> in the above example, the classid attribute that goes along with the object element points t...
...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="366" height="1
42" 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 invoke the netscap...
...And 21 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.
... 30edge full support 12firefox full support 1 full support 1 full support 52notes notes setinterval now defined on windoworworkerglobalscope mixin.ie full support
4opera full support
4safari full support 1webview android full support
4.
4chrome android full support 30firefox android full support
4 full support ...
...
4 full support 52notes notes setinterval now defined on windoworworkerglobalscope mixin.opera android full support 10.1safari ios full support 1samsung internet android full support 3.0supports parameters for callbackchrome full support yesedge full support 12firefox full support yesie full support 10opera full support yessafari ?
...And 21 more matches
IDBTransaction - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top">...
...<rect x="151" y="1" width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = trans1.objectstore("foo") objectstore2.put("2", "key"); objectstore1.put("1", "key"); after the code is executed the object store should contain the value "2", s...
... firefox durability guarantees note that as of firefox
40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702.) previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk.
...And 21 more matches
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, 1
4, 15, 16, 17, 18, 19, 20, 21, 22, 23, 2
4, 25, 26, 27, 28, 29, 30, 31, 32, 33, 3
4, 35, 36, 37, 38, 39,
40,
41,
42,
43,
44,
45,
46,
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, 1
4, 15, 16, 17, 18, 19, 20, 21, 22, 23, 2
4, 25, 26, 27, 28, 29, 30, 31, 32, 33, 3
4, 35, 36, 37, 38, 39,
40,
41,
42,
43,
44,
45,
46,
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, 1
4, 15, 16, 17, 18, 19, 20, 21, 22, 23, 2
4, 25, 26, 27, 28, 29, 30, 31, 32, 33, 3
4, 35, 36, 37, 38, 39,
40,
41,
42,
43,
44,
45,
46,
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, 1
41, 151, 161, 171, 181, 191, 201, 221,...
... 231, 2
41, 251, 261, 271, 281, 291, … everything else: 2, 3,
4, 5, 6, 7, 8, 9, 11, 12, 13, 1
4, 15, 16, 17, 18, 19, 22, 23, 2
4, 25, 26, 27, 28, 29, 32, 33, 3
4, 35, 36, 37, 38, 39,
42,
43,
44,
45,
46,
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, 1
4, 15, 16, 17, 18, 19 everything else: 0, 20, 21, 22, 23, 2
4, 25, 26, 27, 28, 29, 30, 31, 32, 33, 3
4, 35, 36, 37, 38, 39,
40,
41,
42,
43,
44,
45,
46,
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, 1
4, 15, 16, 17, 18, 19, 101, 102, 103, 10
4, 105, 106, 107, 108, 109, 110, 111, 112, 113, 11
4, 115, 116, 11...
...And 20 more matches
NSS tools : certutil
this is used to migrate legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key
4.db).
... certutil supports two types of databases: the legacy security databases (cert8.db, key3.db, and secmod.db) and new sqlite databases (cert9.db, key
4.db, and pkcs11.txt).
... · oid (example): 1.2.3.
4 · critical-flag: critical or not-critical · filename: full path to a file containing an encoded extension -f password-file specify a file that will automatically supply the password to include in a certificate or to access a certificate database.
...And 20 more matches
Accessibility documentation index - Accessibility
4 aria test cases aria, accessibility for each example we test the "expected" results with assistive technologies, for each browser that at supports wai-aria in.
... 11 multipart labels: using aria for labels with embedded fields inside them aria, accessibility, ben millard, firefox, guide, help, html, html
4, jaws, needscontent, aria-labelledby, label, solution, trouble shoot, troubleshoot the solution is in an aria attribute called aria-labelledby.
... 1
4 aria technique template accessibility no summary!
...And 20 more matches
@font-feature-values - CSS: Cascading Style Sheets
a swash feature value definition allows only one value: ident1: 2 is valid, but ident2: 2
4 isn't.
...an annotation feature value definition allows only one value: ident1: 2 is valid, but ident2: 2
4 isn't.
...an ornaments feature value definition allows only one value: ident1: 2 is valid, but ident2: 2
4 isn't.
...And 20 more matches
Box-shadow generator - CSS: Cascading Style Sheets
" data-topic="width" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> height </div> <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> <div class="ui-slider" data-topic="height" data-min="0" data-max="
400" data-step="1" data-value="200"> </div> <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> <div class="ui-slider-input" data-topic="height" data-unit="px"></div> </div> </div> </div> <div id="output" class="category"> <div id...
...t;"] 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.
46%; } .span_10 { width: 83%; } .span_9 { width: 7
4.5
4%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width:
49.16%; } .span_5 { width:
40.7%; } .span_
4 { width: 32.2
4%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { ...
...0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin:
4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; lef...
...And 20 more matches
Codecs used by WebRTC - Web media technologies
however, rfc 77
42 specifies that all webrtc-compatible browsers must support vp8 and h.26
4's constrained baseline profile for video, and rfc 787
4 specifies that browsers must support at least the opus codec as well as g.711's pcma and pcmu formats.
... unless the sdp specifically signals otherwise, the web browser receiving a webrtc video stream must be able to handle video at at least 20 fps at a minimum resolution of 320 pixels wide by 2
40 pixels tall.
... mandatory video codecs codec name profile(s) browser compatibility vp8 — chrome, edge, firefox, safari (12.1+) avc / h.26
4 constrained baseline (cb) chrome (52+), edge, firefox[1], safari [1] firefox for android 68 and later do not support avc (h.26
4) anymore.
...And 20 more matches
NSS 3.55 release notes
introduction the nss team has released network security services (nss) 3.55 on 2
4 july 2020, which is a minor release.
...nss 3.55 requires nspr
4.27 or newer.
... notable changes in nss 3.55 p38
4 and p521 elliptic curve implementations are replaced with verifiable implementations from fiat-crypto and ecckiila.
...And 19 more matches
Python binding for NSS
nss is fips-1
40 certified.
...`pip wheel -w dist .` the following constants were added: ssl.tls_aes_128_gcm_sha256 ssl.tls_aes_256_gcm_sha38
4 ssl.tls_chacha20_poly1305_sha256 release 1.0.0 release date 2016-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.0beta1 release.
... the following class methods were added: pk11slot.check_security_officer_passwd pk11slot.check_user_passwd pk11slot.change_passwd pk11slot.init_pin release 0.17.0 release date 201
4-11-07 scm tag pynss_release_0_17_0 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_0_17_0/src/ change log the primary enhancement in this version is adding support for pbkdf2 the following module functions were added: nss.create_pbev2_algorithm_id the following cl...
...And 19 more matches
imgIContainer
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 1
4.0 (firefox 1
4.0 / thunderbird 1
4.0 / seamonkey 2.11) implemented by: ?????????????????????????????????????.
... flag_sync_decode 0x1 flag_decode_no_premultiply_alpha 0x2 flag_decode_no_colorspace_conversion 0x
4 flag_clamp 0x8 frame_first 0 constants for specifying various "special" frames.
... obsolete since gecko 2.0 methods native code only!addrestoredata obsolete since gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
...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_grip
4 represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows.
... role_application 1
4 represents a main window for an application.
...And 19 more matches
IDBDatabase - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><re...
...ct x="151" y="1" width="110" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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 6
4-bit integer that contains the version of the connected database.
...And 19 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
this gives us
4 lines in each dimension.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .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">two</div> <div class="box3">three</div> <div class=...
..."box
4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid.
...And 19 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width:
420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default;...
...%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1px solid #fff; position: absolute; top:
45%; left:
45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("images/hue_mask.png"); background: -moz-linear-gradient(le...
...lid #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: 6
4px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 1
4px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text;...
...And 19 more matches
<color> - CSS: Cascading Style Sheets
css colors level
4 added the rebeccapurple keyword to honor web pioneer eric meyer.
...00 lime #00ff00 olive #808000 yellow #ffff00 navy #000080 blue #0000ff teal #008080 aqua #00ffff css level 2 (revision 1) orange #ffa500 css color module level 3 aliceblue #f0f8ff antiquewhite #faebd7 aquamarine #7fffd
4 azure #f0ffff beige #f5f5dc bisque #ffe
4c
4 blanchedalmond #ffebcd blueviolet #8a2be2 brown #a52a2a burlywood #deb887 cadetblue #5f9ea0 chartreuse #7fff00 chocolate #d2691e coral #ff7f50 cornflowerblue #6
495e...
...d cornsilk #fff8dc crimson #dc1
43c cyan (synonym of aqua) #00ffff darkblue #00008b darkcyan #008b8b darkgoldenrod #b8860b darkgray #a9a9a9 darkgreen #006
400 darkgrey #a9a9a9 darkkhaki #bdb76b darkmagenta #8b008b darkolivegreen #556b2f darkorange #ff8c00 darkorchid #9932cc darkred #8b0000 darksalmon #e9967a darkseagreen #8fbc8f darkslateblue #
483d8b darkslategray #2f
4f
4f darkslategrey #2f
4f
4f darkturquoise #00ced1 darkviolet #9
400d3 ...
...And 19 more matches
JXON - Archive of obsolete content
rgundy_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>rrx9856</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...
... the algorithms proposed here (see: #1, #2, #3, #
4) will consider only the following types of nodes and their attributes: document (only as function argument), documentfragment (only as function argument), element, text (never as function argument), cdatasection (never as function argument), attr (never as function argument).
... the following algorithms are somewhat based on the parker convention, version 0.
4, which prescribes the transformation of tags names into object properties names and the recognition of the typeof of all the collected text content of each tag (plain text parsing); but with some differences (so, one can say that we follow a our convention).
...And 18 more matches
Tamarin build documentation - Archive of obsolete content
windows 32 and 6
4 bit mac osx 10.
4, 10.5 on ppc mac osx 10.5, 10.6 on intel linux 32 and 6
4 bit solaris 10 on sparc android 2.2 on arm windows mobile 6.5 mips (linux) sh
4 (linux) getting the tamarin source the tamarin source resides in mercurial at tamarin central.
...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.
... its options are '10
4u', '105' or '106' (note: no '.') if you don't pass the --mac-sdk switch you will get no sdk in your build.
...And 18 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 2006 terminology we need a terminology appendix.
...--maian 01:
43, 30 september 2005 (pdt) we should define the terms we are using.
...--nickolay 18:
40, 16 july 2006 (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.
...And 18 more matches
nsIAccessibleEvent
inherits from: nsisupports last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description accessible nsiaccessible the nsiaccessible associated with the event.
... event_reorder 0x800
4 0x005c 0x0003 an object's children have changed.
... event_active_decendent_changed 0x0007 0x000
4 the active descendant of a component has changed.
...And 18 more matches
Index
4 account interfaces code snippets, extension development, thunderbird this page contains a list of the interfaces that you'll will most likely use when writing extensions that work with email or other accounts.
... 13 autoconfig: how to create a configuration file autoconfiguration, thunderbird authoritative definition 1
4 autoconfiguration in thunderbird moved to autoconfiguration 15 buddy icons in mail seth spitzer mozilla is now able to show icons in the message header area and the addressbook card pane.
...these are the main view classes: 2
4 events there are a lot of events that can be fired in mail code.
...And 18 more matches
Using media queries - CSS: Cascading Style Sheets
deprecated media types: css2.1 and media queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries
4 and shouldn't be used.
... added in media queries level
4.
... added in media queries level
4.
...And 18 more matches
requiredFeatures - SVG: Scalable Vector Graphics
his attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250
45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-features...
...rn>, <font-face-src>, <font-face-uri>, <font-face-format> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#basicfont the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <font-face-src> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#extensibility the browser supports the <foreignobject> element example svg <svg width="
450" height="1170" xmlns="http://www.w3.org/2000/svg"> <!-- testing : http://www.w3.org/tr/svg11/feature#svg --> <rect class="ko" x="10" y="10" height="25" width="
430" /> <rect class="ok" x="10" y="10" height="25" width="
430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svg" /> <text x="20" y="27">http://www.w3.org/tr/svg11/feature#svg</text> <!-- testing : 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" height="25" width="
430"...
...And 18 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<label value="horizontal layout"/> <hbox> <button label="horizontal1"/> <button label="horizontal2"/> </hbox> <label value="vertical layout"/> <vbox> <button label="vertical1"/> <button label="vertical2"/> </vbox> <label value="mixed"/> <hbox> <button label="mixed1"/> <vbox> <button label="mixed2"/> <button label="mixed3"/> </vbox> <button label="mixed
4"/> </hbox> listing 3: horizontal and vertical boxes figure 1: output of listing 3 there is also a grid element, which can be used for layouts similar to those achieved using the html table element, a stack element for layering other elements, and so on.
...in listing
4, the second label will be displayed twice as big as the first (figure 3).
... <hbox> <label value="label1" flex="1" style="border: 1px solid;"/> <label value="label2" flex="2" style="border: 1px solid;"/> </hbox> listing
4: growing with flex figure 3: output of listing
4 ordinal within a xul box, elements will ordinarily be laid out following their order of appearance in the source code (laid out left to right or top to bottom).
...And 17 more matches
ctypes
method overview ctype arraytype(type[, length]); cdata cast(data, type); ctype functiontype(abi, returntype[, argtype1, ...]); cdata int6
4(n); string libraryname(name); library open(libspec); ctype pointertype(typespec); ctype structtype(name[, fields]); cdata uint6
4(n); properties property type description errno number the value of the latest system error.
... int6
4_t signed 6
4-bit integer.
... uint6
4_t unsigned 6
4-bit integer.
...And 17 more matches
Web Console remoting - Firefox Developer Tools
in firefox 25 we added the getpreferences request packet: { "to": "conn0.console3
4", "type": "getpreferences", "preferences": [ "networkmonitor.saverequestandresponsebodies" ] } reply packet: { "preferences": { "networkmonitor.saverequestandresponsebodies": false }, "from": "conn0.console3
4" } you can also use the webconsoleclient.getpreferences(prefs, onresponse).
... this notification has been introduced in firefox 2
4.
... ], }, } the response packet is a network event actor grip: { "to": "conn0.console9", "eventactor": { "actor": "conn0.netevent1
4", "starteddatetime": "2013-08-26t19:50:03.699z", "url": "http://localhost", "method": "get" "isxhr": true, "private": false } } you can also use the webconsoleclient.sendhttprequest(request, onresponse) method.
...And 17 more matches
IDBIndex - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbindexchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitcountchrome full support 2
4 ...
... full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7webview android full support yes full support yes no ...
...And 17 more matches
Transcoding assets for Media Source Extensions - Web APIs
bento
4 — a set of command-line utilities for getting asset metadata and creating content for dash.
... python2 — bento
4 uses it.
... sample media should be placed in the bento
4 utils directory and worked here.
...And 17 more matches
Border-image generator - CSS: Cascading Style Sheets
0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd63e77.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/dd37c1d691.png" data-stateid="border
4"/> <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="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div>...
...separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> <div class="ui-input-slider" data-topic="preview-area-height" data-min="
400" data-max="1000"> </div> </div> </div> <div id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <div class="guideline" data-axis="y" data-topic="...
...v 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.
46%; } .span_10 { width: 83%; } .span_9 { width: 7
4.5
4%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width:
49.16%; } .span_5 { width:
40.7%; } .span_
4 { width: 32.2
4%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { ...
...And 17 more matches
Firefox user agent string reference - HTTP
this document describes the user agent string used in firefox
4 and later and applications based on gecko 2.0 and later.
... for a breakdown of changes to the string in gecko 2.0, see final user agent string for firefox
4 (blog post).
... though fixed in firefox 69, previous 32-bit versions of firefox running on 6
4-bit processors would report that the system is using a 32-bit cpu.
...And 17 more matches
Experimental features in Firefox
see bug 8
406
40 for more details.
... nightly
43 yes developer edition
43 no beta
43 no release
43 no preference name layout.css.control-characters.enabled or layout.css.control-characters.visible property: initial-letter the initial-letter css property is part of the css inline layout specification and allows you to specify how dropped, raised, and sunken initial letters are ...
...see bug 160795
4 for more details.
...And 16 more matches
certutil
this is used to merge legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key
4.db).
...this is used to migrate legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key
4.db).
... certutil supports two types of databases: the legacy security databases (cert8.db, key3.db, and secmod.db) and new sqlite databases (cert9.db, key
4.db, and pkcs11.txt).
...And 16 more matches
BluetoothRemoteGATTDescriptor - Web APIs
bluetoothremotegattdescriptor.uuidread only returns the uuid of the characteristic descriptor, for example '00002902-0000-1000-8000-00805f9b3
4fb' for theclient characteristic configuration descriptor.
... full support ≤79notes notes windows 10.firefox no support noie no support noopera full support
44notes full support
44notes notes macos only.
... full support
44notes disabled notes linux and versions of windows earlier than 10.disabled from version
44: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
...And 16 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
thus a matrix that looks like this: [a1a5a9a13a2a6a10a1
4a3a7a11a15a
4a8a12a16]\left [ \begin{matrix} a_{1} & a_{5} & a_{9} & a_{13} \\ a_{2} & a_{6} & a_{10} & a_{1
4} \\ a_{3} & a_{7} & a_{11} & a_{15} \\ a_{
4} & a_{8} & a_{12} & a_{16} \end{matrix} \right ] is represented in array form like this: let matrixarray = [a1, a2, a3, a
4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a1
4, a15, a16]; in this array, the leftmost column contains t...
...he entries a1, a2, a3, and a
4.
...human eyes typically have a horizontal field of view of around 135° (about 2.356 radians) and a vertical fov of about 180° (π or around 3.1
42 radians).
...And 16 more matches
Perceivable - Accessibility
1.2.
4 provide captions for live audio (aa) you should provide synchronized captions for all live multimedia that contains audio (e.g., video conferences, live audio broadcasts).
... note: conveying instructions solely by color is related, but covered in a different guideline — 1.
4.1.
... 1.3.
4 orientation (aa) added in 2.1 content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
...And 16 more matches
Color picker tool - CSS: Cascading Style Sheets
</div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width:
420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default;...
... hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; position: absolute; top:
45%; left:
45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; ...
...ackground: 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: 6
4px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 1
4px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text;...
...And 16 more matches
Proxy Auto-Configuration (PAC) file - HTTP
in chrome (versions 52 to 73), you can disable this by setting pachttpsurlstrippingenabled to false in policy or by launching with the --unsafe-pac-url command-line flag (in chrome 7
4, only the flag works, and from 75 onward, there is no way to disable path-stripping; as of chrome 81, path-stripping does not apply to http urls, but there is interest in changing this behavior to match https); in firefox, the preference is network.proxy.autoconfig_url.include_path.
...following building blocks, separated by a semicolon: direct connections should be made directly, without any proxies proxy host:port the specified proxy should be used socks host:port the specified socks server should be used recent versions of firefox support as well: http host:port the specified proxy should be used https host:port the specified https proxy should be used socks
4 host:port socks5 host:port the specified socks server (with the specified sock version) should be used if there are multiple semicolon-separated settings, the left-most setting will be used, until firefox fails to establish the connection to the proxy.
...after 20 minutes, the browser will ask if proxies should be retried, asking again after an additional
40 minutes.
...And 16 more matches
WebAssembly - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support ...
...
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0globalchrome full support ...
...And 16 more matches
WebAssembly
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support ...
...
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0globalchrome full support ...
...And 16 more matches
Mozilla's DOCTYPE sniffing - Archive of obsolete content
obsolete since gecko 2 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) this feature is obsolete.
...it has been replaced by a new html 5 parser in firefox
4 and newer.
...see bug 1312 and bug 5526
4 for some of the history of the mode determination.
...And 15 more matches
Index - Game development
found 7
4 pages: # page tags and summary 1 game development apps, game development, gamedev, games, html5 games, javascript games, web gaming is one of the most popular computer activities.
...
4 index meta found 7
4 pages: 5 introduction to html5 game development (summary) firefox os, games, html5, mobile games built with html5 work on smartphones, tablets, pcs and smart tvs.update your game whenever you want.players can play the game anywhere, anytime.
...the algorithm works by ensuring there is no gap between any of the
4 sides of the rectangles.
...And 15 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 96%, leaving us
4% free to act as a gutter between the two columns, giving the content some space to breathe.
... now we just need to float the columns, like so: div:nth-of-type(1) { width:
48%; float: left; } div:nth-of-type(2) { width:
48%; float: right; } putting this all together should give us a result like so: simple two-column layout <h1>2 column layout example</h1> <div> <h2>first column</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 15 more matches
min-width - CSS: Cascading Style Sheets
imation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status comment css box sizing module level
4the definition of 'min-width' in that specification.
...firefox supports applying min-width to table elements.ie full support 7opera full support
4notes full support
4notes notes css 2.1 leaves the behavior of min-width with table undefined.
... opera supports applying min-width to table elements.safari full support 1webview android full support
4.
4chrome android full support 18firefox android full support
4notes full support
4notes notes css 2.1 leaves the behavior of min-width with table undefined.
...And 15 more matches
Understanding WebAssembly text format - WebAssembly
if we convert our module to binary now (see converting webassembly text format to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061 736d ; wasm_binary_magic 000000
4: 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 i6
4: 6
4-bit integer f32: 32-bit float f6
4: 6
4-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 6
4-bit float would be written like this: (func (param i32) (param i32) (result f6
4) ...
... so given the following function: (func (param i32) (param f32) (local f6
4) 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 f6
4 local.
...And 15 more matches
reftest opportunities files - Archive of obsolete content
tests from dbaron http://dbaron.org/css/test/cachetest 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/parsing
4 http://dbaron.org/css/test/parsing5 http://dbaron.org/css/test/parsing6 http://dbaron.org/css/test/sec0
40102 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/sec0
40310 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_con...
...t/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/sec060
402 http://dbaron.org/css/test/sec060
403b 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/shortbor...
...der2 http://dbaron.org/css/test/sec0805 http://dbaron.org/css/test/dborder http://dbaron.org/css/test/sec090102 http://dbaron.org/css/test/sec090201 http://dbaron.org/css/test/sec090203 http://dbaron.org/css/test/sec09020
4 http://dbaron.org/css/test/sec090205 http://dbaron.org/css/test/sec090301 http://dbaron.org/css/test/sec090302a http://dbaron.org/css/test/sec090302b http://dbaron.org/css/test/sec090302c http://dbaron.org/css/test/sec090302d http://dbaron.org/css/test/sec0905 http://dbaron.org/css/test/sec
41
4 http://dbaron.org/css/test/floatpos http://dbaron.org/css/test/floatpos2 http://dbaron.org/css/test/sec0907 http://dbaron.org/css/test/sec0909 http://dbaron.org/css/test/bidi http://dbaron.org/css/test/bidi2 http://dbaron.org/css/test/sec1001a http://dbaron.org/css/test/sec1001b htt...
...And 14 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: a
457
4365938222adca0a6bd33329cb32).
... spidermonkey 1.8.5 is the javascript engine that shipped in firefox
4.0.
... —22 march 2011 platform support spidermonkey 1.8.5 is supported on all the platforms where firefox
4 runs.
...And 14 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".
...string 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 setpageannotationint6
4(in nsiuri auri, in autf8string aname, in long long avalue, in long aflags, in unsigned short aexpiration); void setitemannotationint6
4(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); ...
...ong 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 getpageannotationint6
4(in nsiuri auri, in autf8string aname); long long getitemannotationint6
4(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 oct...
...And 14 more matches
Using IndexedDB - Web APIs
so for example, don't use 2.
4 as a version number: var request = indexeddb.open("mytestdatabase", 2.
4); // don't do this, as the version will be rounded to 2 generating handlers the first thing you'll want to do with almost all of the requests you generate is to add success and error handlers: request.onerror = function(event) { // do something with request.errorcode!
...const customerdata = [ { ssn: "
444-
44-
4444", name: "bill", age: 35, email: "bill@company.com" }, { ssn: "555-55-5555", name: "donna", age: 32, email: "donna@home.org" } ]; of course, you wouldn't use someone's social security number as the primary key to a customer table because not everyone has a social security number, and you would store their birth date instead of their age, but let's ignore those unfortunate choices for...
... note: as of firefox
40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702.) previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk.
...And 14 more matches
Basic concepts behind Web Audio API - Web APIs
let's look at a mono and a stereo audio buffer, each is one second long, and playing at
44100hz: the mono buffer will have
44100 samples, and
44100 frames.
... the length property will be
44100.
... the stereo buffer will have 88200 samples, but still
44100 frames.
...And 14 more matches
Operable - Accessibility
see ui controls and building keyboard accessibility back in 2.1.
4 character key shortcuts (a) added in 2.1 if a single character key shortcut exists, then at least one of the following is true: single character key shortcuts can be turned off, remapped or are only active when the relevant user interface component is in focus.
... 2.2.
4 surpress interruptions (aaa) any interruptions such as alerts or interstitial adverts should have functionality available to suppress or postpone them, unless it is an emergency alert.
... guideline 2.
4 — navigable: provide ways to help users navigate, find content, and determine where they are the conformance criteria under this guideline relate to ways in which users can be expected to orientate themselves, and find the content and functionality they are looking for on the current page or other pages of the site.
...And 14 more matches
<blend-mode> - CSS: Cascading Style Sheets
<div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/85
43/br.png'), url('https://mdn.mozillademos.org/files/85
45/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/85
43/br.png'), url('https://mdn.mozillademos.org/files/85
45/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/85
43/br.png'), url('https://mdn.mozillademos.org/files/85
45/tr.png'); background-blend-mode: screen; } overlay the final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
...And 14 more matches
Rich-Text Editing in Mozilla - Developer guides
--fumble 18:13, 2
4 apr 2005 (pdt) example 1 the first example is an html document setting its own designmode to "on".
... figure
4 : executing rich editing commands html: <button onclick="doricheditcommand('bold')" style="font-weight:bold;">b</button> javascript: function doricheditcommand(aname, aarg){ getiframedocument('editorwindow').execcommand(aname,false, aarg); document.getelementbyid('editorwindow').contentwindow.focus() } example: a simple but complete rich text editor <!doctype html> <html> <head> <title>...
...d(opre); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=
450,height=
470,left=
400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 selec...
...And 14 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes found 5
4 pages: # page tags and summary 1 xslt: extensible stylesheet language transformations landing, web, xslt extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml documents.
... 3 index index, reference, xslt found 5
4 pages:
4 pi parameters xslt no summary!
... 1
4 an overview needshelp, needsmarkupwork, transforming_xml_with_xslt, xml, xslt the extensible stylesheet language/transform is a very powerful language, and a complete discussion of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netscape's capabilities that follows.
...And 14 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
in fact, the next javascript engine from mozilla, tracemonkey, is poised to boost javascript performance by factors of 20 to
40 times according to brendan eich, mozilla cto and the creator of javascript.
...next we’ll take a look at another powerful feature in rhino, e
4x processing.
... e
4x (ecmascript for xml) is an extension of javascript which provides direct support for xml, greatly simplifying the process of consuming xml via javascript.
...And 13 more matches
Creating localizable web applications
bad: <p><?= _("<strong class=\"legal\">design acceptance:</strong> if a design is accepted, we will send the following message:");?></p> <p><?= _("<strong class=\"legal\">design rejection:</strong> if a design is rejected, we will send the following message:");?></p> snippet
4.
... snippet
4.
...bad: <p><?=_("if you are interested in supporting the approval process by becoming an approver, please email <a href=\"mailto:personas@mozilla.com\">personas@mozilla.com</a>.")?></p> snippet
4.
...And 13 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: a
457
4365938222adca0a6bd33329cb32).
... spidermonkey 1.8.5 is the javascript engine that shipped in firefox
4.0.
...the jit is supported only on x86, x86_6
4 and arm architectures.
...And 13 more matches
@media - CSS: Cascading Style Sheets
deprecated media types: css2.1 and media queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries
4 and shouldn't be used.
... added in media queries level
4.
... added in media queries level
4.
...And 13 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } 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 #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } 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 #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } in this next example, we create a definition with a 2fr track then two 1fr tracks.
...And 13 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 #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .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 d d d d" "c c c c d d d d"; align-items: start; }...
... .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item
4 { grid-area: d; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item
4">item
4</div> </div> keep in mind that once you set align-items: start, the height of each child <div> will be determined by the contents of the <div>.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .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 d d d d" "c c c c d d d d"; } .item1 { grid-area:...
...And 13 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
if the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9,
4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio.
...it also specifies an intrinsic aspect ratio of 3:
4.
... this ensures that its width:height ratio is always 3:
4, unless it's deliberately scaled to a disproportionate size (that is, by explicitly specifying both width and height that aren't of that ratio).
...And 13 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
numbers numbers in javascript are "double-precision 6
4-bit format ieee 75
4 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.
... also, watch out for stuff like: 0.1 + 0.2 == 0.3000000000000000
4; in practice, integer values are treated as 32-bit ints, and some implementations even store it that way until they are asked to perform an instruction that's valid on a number but not on a 32-bit integer.
... you can also use the unary + operator to convert values to numbers: + '
42'; //
42 + '010'; // 10 + '0x10'; // 16 a special value called nan (short for "not a number") is returned if the string is non-numeric: parseint('hello', 10); // nan nan is toxic: if you provide it as an operand to any mathematical operation, the result will also be nan: nan + 5; // nan you can test for nan using the built-in isnan() function: isnan(nan); // true javascript also has...
...And 13 more matches
jspage - Archive of obsolete content
var mootools={version:"1.2.
4",build:"0d91132
41a90b9cd56
43b926795852a2026710d
4"};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...
...ac|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)?960:((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.getelementsbyclassname)?19:18);}}},browser||{});browser.platform[browser.platform.name]=true; browser.detect=function(){for(var b in this.engines){var a=this.engines[b]();if(...
...rn new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(window.execscript){window.execscript(b);}else{var a=document.createelement("script");a.setattribute("type","text/javascript"); a[(browser.engine.webkit&&browser.engine.version<
420)?"innertext":"text"]=b;document.head.appendchild(a);document.head.removechild(a);}return b;}native.uid=1; var $uid=(browser.engine.trident)?function(a){return(a.uid||(a.uid=[native.uid++]))[0];}:function(a){return a.uid||(a.uid=native.uid++);};var window=new native({name:"window",legacy:(browser.engine.trident)?null:window.window,initialize:function(a){$uid(a); if(!a.element){a.element=$empty;i...
...And 12 more matches
Video and audio content - Learn web development
formats like mp3, mp
4 and webm are called container formats.
...as we talked about before, different browsers support different video and audio formats, and different container formats (like mp3, mp
4, and webm, which in turn can contain different types of video and audio).
... an mp
4 container often packages aac or mp3 audio with h.26
4 video.
...And 12 more matches
NSS tools : modutil
please contribute to the initial review in mozilla nss bug 836
477[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 can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 1
40-2 compliance, and assign default providers for cryptographic operations.
... -fips [true | false] enable (true) or disable (false) fips 1
40-2 compliance for the default nss module.
...And 12 more matches
NSS tools : modutil
modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 1
40-2 compliance, and assign default providers for cryptographic operations.
... -fips [true | false] enable (true) or disable (false) fips 1
40-2 compliance for the default nss module.
... modutil supports two types of databases: the legacy security databases (cert8.db, key3.db, and secmod.db) and new sqlite databases (cert9.db, key
4.db, and pkcs11.txt).
...And 12 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.
46) implemented by: window.
... modifier_shift 0x000
4 getmodifierstate("shift") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event().
... modifier_fn 0x00
40 getmodifierstate("fn") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event().
...And 12 more matches
Attr - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">attr</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: startin...
...g in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4), a number of deprecated properties and methods output warning messages to the console.
...And 12 more matches
Writing a WebSocket server in C# - Web APIs
this server conforms to rfc 6
455 so it will only handle connections from chrome version 16, firefox 11, ie 10 and over.
...the full explanation of the server handshake can be found in rfc 6
455, 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-e91
4-
47da-95ca-c5ab0dc85b11" (a special guid specified by rfc 6
455) compute sha-1 and base6
4 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.tobase6
4str...
...And 12 more matches
Writing WebSocket servers - Web APIs
note: read the latest official websockets specification, rfc 6
455.
... sections 1 and
4-7 are especially interesting to server implementors.
... warning: the server may listen on any port it chooses, but if it chooses any port other than 80 or
443, it may have problems with firewalls and/or proxies.
...And 12 more matches
clip-path - CSS: Cascading Style Sheets
as specified, but with <url> values made absoluteanimation typeyes, as specified for <basic-shape>, otherwise no formal syntax <clip-source> | [ <basic-shape> | <geometry-box> ] | nonewhere <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <inset()> = inset( <length-percentage>{1,
4} [ round <'border-radius'> ]?
...ip-path: none</div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="none"> <rect x="2
4" y="2
4" width="1
44" height="1
44" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: url(#mypath)<br><br> assuming the following clippath definition: <pre> <svg> <clippath id="mypath" clippathunits="objectbou...
...></pre> </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="2
4" y="2
4" width="1
44" height="1
44" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: 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"> <spa...
...And 12 more matches
max-width - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.
4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc(); formal syntax ...
... </div> </div> css #parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: 150px; } result specifications specification status comment css box sizing module level
4the definition of 'max-width' in that specification.
...firefox supports applying max-width to table elements.ie full support 7opera full support
4notes full support
4notes notes css 2.1 leaves the behavior of max-width with table undefined.
...And 12 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="pt65
4s" minbuffertime="pt2s" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"> <baseurl>http://example.com/ondemand/</baseurl> <period> <!-- english audio --> <adaptationset mimetype="audio/mp
4" codecs="mp
4a.
40.5" lang="en" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="6
4000"> <baseurl>elephantsdream_aac
48k_06
4.mp
4.dash</ba...
...seurl> </representation> </adaptationset> <!-- video --> <adaptationset mimetype="video/mp
4" codecs="avc1.
42
401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="2" bandwidth="100000" width="
480" height="360"> <baseurl>elephantsdream_h26
4bpl30_0100.26
4.dash</baseurl> </representation> <representation id="3" bandwidth="175000" width="
480" height="360"> <baseurl>elephantsdream_h26
4bpl30_0175.26
4.dash</baseurl> </representation> <representation id="
4" bandwidth="250000" width="
480" height="360"> <baseurl>elephantsdream_h26
4bpl30_0250.26
4.dash</baseurl> </representation> <representation id="5" bandwidth="500000" width="
480" height="360"> <baseurl>elephantsdream_h26
4bpl30_0500.
...26
4.dash</baseurl> </representation> </adaptationset> </period> </mpd> once you have generated your mpd file you can reference it from within the video tag.
...And 12 more matches
Making content editable - Developer guides
see bug 1
44956
4 and firefox-specific html editing ui has been deprecated for additional details.
... "div"); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=
450,height=
470,left=
400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 selec...
...t { font-size:10px; } #textbox { width: 5
40px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width:
498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <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 valu...
...And 12 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
to get these sitting side-by-side we have used the following rules: x-card { width: 100%; } x-card:nth-child(1), x-card:nth-child(2) { width: 30%; float: left; padding: 2rem; } x-card:nth-child(3) { width:
40%; float: left; height: 100%; overflow: auto; padding: 2rem; } so we're giving the first two columns a width of 30%, and the third a width of
40%, floating the columns all left.
...so if you set width:
40%, the box width will always be
40% of its parent, and any padding and border widths set on the box will be subtracted from the content width, not added to it.
...this is created by all of the css inside the first media query: @media all and (max-width: 102
4px) { x-card:nth-child(1), x-card:nth-child(2) { width: 50%; } x-card:nth-child(3) { width: 100%; clear: left; } x-card:nth-child(3) img { width: 20%; } } so here we're altering the widths of the columns and removing the float of the third column (and adding clearing to guard against any float funny business).
...And 12 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
cript> element in content model of all elements implementation status unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 12
40357) rendering model change notes svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status unknown allow overflow: scroll; to show scroll bars on <svg> elements implementation status unknown basic data types and interfa...
... svgexternalresourcesrequired removed never implemented svgelement.viewportelement and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921
456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 77865
4) svgelement.tabindex implemented (bug 77865
4) document.activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicsele...
...ment.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 99996
4, bug 1019326) 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 ...
...And 12 more matches
Index - XPath
4 ancestor-or-self axe, xpath the ancestor-or-self axis indicates the context node and all of its ancestors, including the root node.
... 1
4 preceding-sibling axe, xpath the preceding-sibling axis indicates all the nodes that have the same parent as the context node and appear before the context node in the source document.
... 2
4 current xslt, xslt_reference the current function can be used to get the context node in an xslt instruction.
...And 12 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
it varies depending on what type of add-on you are providing information for: for an extension or plugin bundle it must be urn:mozilla:extension:<id> for a theme it must be urn:mozilla:theme:<id> for any other type of add-on it must be urn:mozilla:item:<id> note: prior to gecko 2.0 (firefox
4.0), the ordering of the versions within the <rdf:seq> is significant.
... <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
... <!-- 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-
46
4f-9b0e-13a3a9e9738
4}</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 --> ...
...And 11 more matches
MMgc - Archive of obsolete content
another way to think about it: unmanaged memory is c++ operators new and delete managed memory is c++ operator new, with optional delete mmgc contains a page allocator called gcheap, which allocates large blocks (megabytes) of memory from the system and doles out
4kb pages to the unmanaged memory allocator (fixedmalloc) and the managed memory allocator (gc).
.../** * flags to be passed as second argument to alloc */ enum allocflags { kzero=1, kcontainspointers=2, kfinalize=
4, krcobject=8 }; kzero zeros out the memory.
...here's what the different poison values mean: 0xfafafafa uninitialized unmanaged memory 0xedededed unmanaged memory that was freed explicitly 0xbabababa managed memory that was freed by the sweep phase of the garbage collector 0xcacacaca managed memory that was freed by an explicit call to gc::free (including drc reaping) 0xdeadbeef this is written to the
4 bytes just after any object allocated via mmgc.
...And 11 more matches
Basic math in JavaScript — numbers and operators - Learn web development
10,
400, or -5.
... floating point numbers (floats) have decimal points and decimal places, for example 12.5, and 56.77865
43.
...type the following lines into your browser's console: let lotsofdecimal = 1.76658
49586757
4636
4; lotsofdecimal; let twodecimalplaces = lotsofdecimal.tofixed(2); twodecimalplaces; converting to number data types sometimes you might end up with a number that is stored as a string type, which makes it difficult to perform calculations with it.
...And 11 more matches
PerfMeasurement.jsm
variable type description cpu_cycles uint6
4 the number of cpu cycles elapsed.
... instructions uint6
4 the number of instructions executed.
... cache_references uint6
4 the number of memory accesses that occurred.
...And 11 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/linux6
4/common-opt or a similar file before pushing.
... (linux only) you can send signal 3
4 to the firefox process, e.g.
... $ killall -3
4 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-1
41
4556
492-5222.json.gz for writing dmd[5222] dump 1 { dmd[5222] constructing the heap block list...
...And 11 more matches
NSS_3.12.2_release_notes.html
nss 3.12.2 requires nspr
4.7.1.
...the tar.gz or zip file expands to an nss-3.12.2 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin< - nss tools and test programs you also need to download the nspr
4.7.1 binary distributions to get the nspr
4.7.1 header files and shared libraries, which nss 3.12.2 requires.
... nspr
4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v
4.7.1/.
...And 11 more matches
NSS 3.52 release notes
nss 3.52 requires nspr
4.25 or newer.
... bug 162337
4 - support new pkcs #11 v3.0 message interface for aes-gcm and chachapoly.
... bug 1612
493 - integrate avx2 chacha20, poly1305, and chacha20poly1305 from hacl*.
...And 11 more matches
nsIWebBrowserChrome
chrome_window_close
4 value for the chromeflags attribute.
... chrome_locationbar 6
4 value for the chromeflags attribute.
... chrome_titlebar 102
4 value for the chromeflags attribute.
...And 11 more matches
nsIWebBrowserPersist
persist_flags_ignore_redirected_data
4 ignore any redirected data (usually adverts).
... persist_flags_replace_existing_files 32 replace existing files on the disk (use with due diligence!) persist_flags_no_base_tag_modifications 6
4 don't modify or add base tags.
... persist_flags_serialize_output 102
4 force serialization of output (one file at a time; not concurrent) persist_flags_dont_change_filenames 20
48 don't make any adjustments to filenames.
...And 11 more matches
Plug-in Basics - Plugins
for example: #!/bin/bash export moz_plugin_path=/usr/lib6
4/mozilla/plugins exec /usr/lib6
4/firefox/firefox profile directory/plugins, where profile directory is the directory of the current user profile.
... /usr/lib/mozilla/plugins (the 6
4-bit firefox checks /usr/lib6
4/mozilla/plugins as well).
... /usr/lib6
4/firefox/plugins (for 6
4-bit firefox) note: firefox nightly checks a subset of these locations.
...And 11 more matches
Applying styles and colors - Web APIs
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 one above, but uses the strokestyle property to change the colors of the shapes' outlines.
... 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 (or translucent) shapes.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = 'rgb(255, 221, 0)'; ctx.fillrect(0, 0, 150, 37.5); ctx.fillstyle = 'rgb(102, 20
4, 0)'; ctx.fillrect(0, 37.5, 150, 37.5); ctx.fillstyle = 'rgb(0, 153, 255)'; ctx.fillrect(0, 75, 150, 37.5); ctx.fillstyle = 'rgb(255, 51, 0)'; ctx.fillrect(0, 112.5, 150, 37.5); // draw semi transparent rectangles for (var i = 0; i < 10; i++) { ctx.fillstyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')'; for (var j = 0; j <
4; j++) { ctx.fillrect(5 + i * 1
4, 5 + j * 3...
...And 11 more matches
Basic animations - Web APIs
var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1
456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1
443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1
429/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.f...
...illstyle = '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, 2
4); // 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...
... function clock() { var now = new date(); var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 150, 150); ctx.translate(75, 75); ctx.scale(0.
4, 0.
4); ctx.rotate(-math.pi / 2); ctx.strokestyle = 'black'; ctx.fillstyle = 'white'; ctx.linewidth = 8; ctx.linecap = 'round'; // hour marks ctx.save(); for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(100, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); ctx.linewidth = 5; for (i = 0; i < 60; i++) { if (i % 5!= 0) { ctx.beginpa...
...And 11 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .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>five</div> </div> default rules for auto-placement ...
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } <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); grid-gap: 10px; grid-auto-rows: 100px; } ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 11 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } <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 { flex: 1 1 150px; } in the image, you can see tha...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } <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 question to ask yourself when deciding between grid ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } <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 { align-self: stretch; } .box2 { align-self: fle...
...And 11 more matches
SVG and CSS - SVG: Scalable Vector Graphics
t> </defs> <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 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a
40,
40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="m0,0 v-200 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a
40,
40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(36)"> <path class="segment-...
...fill" d="m0,0 v-200 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a
40,
40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(5
4)"> <path class="segment-fill" d="m0,0 v-200 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a
40,
40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="m0,0 v-200 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a
40,
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 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a
40,
40 0 0,0 -62,10"/> </g> ...
... <g class="segment" transform="rotate(108)"> <path class="segment-fill" d="m0,0 v-200 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a
40,
40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(126)"> <path class="segment-fill" d="m0,0 v-200 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a
40,
40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(1
44)"> <path class="segment-fill" d="m0,0 v-200 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a
40,
40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(162)"> <path class="segment-fill" d="m0,0 v-200 a
40,
40 0 0,0 -62,10 z"/> <path class="segment-edge" ...
...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 base6
4 clipboard context-menu hotkeys indexed-db l10n notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs ...
...ay extensions firefox addons developer guide appendix: what you 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 addi...
...in acceptance test template actionscript performance tests cmdline tests running tamarin acceptance tests running tamarin performance tests tamarin build system documentation tamarin releases tamarin-central rev 703:2cee
46be9ce0 tamarin roadmap tamarin build documentation tamarin mercurial commit hook the download manager schema the life of an html http request the new nsstring class implementation (1999) tracevis transforming xml with xslt:mozilla xslt transforming xml ...
...And 10 more matches
LIR - Archive of obsolete content
4 paramq quad 6
4 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 6
4 bit return a quad 8 retd void return a double 9 livei void extend live range of an int 10 liveq void 6
4 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 1
4 comment void a comment shown, on its own line, in lir dumps 15 not in use load 16 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 6
4 bit load quad 23 ldd double load double 2
4 ldf2d double load float and extend to a double store 25 sti2c void store int truncated to char 26 sti2s void store int truncated to short 27 sti void store int 28 stq void 6
4 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 3
4 calli ...
...And 10 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
password-based authentication figure
4 shows the basic steps involved in authenticating a client by means of a name and password.
... figure
4 assumes the following: the user has already decided to trust the server, either without authentication or on the basis of server authentication via ssl.
... these are the steps shown in figure
4: in response to an authentication request from the server, the client displays a dialog box requesting the user's name and password for that server.
...And 10 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.
...below, some of the salient points are illustrated in a code snippet: if (window.activexobject && navigator.useragent.indexof('windows') != -1) { // ie for windows object instantiation -- use of activexobject } else if(window.geckoactivexobject) { // netscape 7.1 object instantiation --use of geckoactivexobject } else if(navigator.mimetypes) { // plugin architecture, such as in netscape
4x - 7.02 and opera browsers } since ie for mac also exposes window.activexobject it is wise to determine if the browser in question is on windows.
...netscape 7.1 works with both windows media player 6.
4 and with windows media players 7 and 9, but they have unique classids: windows media player 6.
4 has this classid:22d6f312-b0f6-11d0-9
4ab-0080c7
4c7e95 windows media players 7 and 9 have this classid: 6bf52a52-39
4a-11d3-b153-00c0
4f79faa6 windows media player 6.
4 and windows media player 7 and up are not backwards compatible in terms of apis (and thus have different classi...
...And 10 more matches
How do you make sure your website works properly? - Learn web development
open firefox's network tool (tools ➤ web developer ➤ network) and reload the page: there's the problem, that "
40
4" at the bottom.
... "
40
4" means "resource not found", and that's why we didn't see the image.
... 30
4: not modified the file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.
...And 10 more matches
Drawing graphics - Learn web development
the situation started to improve when browsers began to support the <canvas> element and associated canvas api — apple invented it in around 200
4, and other browsers followed by implementing it in the years that followed.
...this is as simple as including the element on the page: <canvas width="320" height="2
40"></canvas> this will create a canvas on the page with a size of 320 by 2
40 pixels.
... <canvas width="320" height="2
40"> <p>your browser doesn't support canvas.
...And 10 more matches
Cryptography functions
_createdigestcontext mxr 3.2 and later pk11_creategenericobject mxr 3.12 and later pk11_createmergelog mxr 3.12 and later pk11_createpbealgorithmid mxr 3.2 and later pk11_createpbev2algorithmid mxr 3.12 and later pk11_deletetokenprivatekey mxr 3.
4 and later pk11_deletetokenpublickey mxr 3.
4 and later pk11_deletetokensymkey mxr 3.
4 and later pk11_derive mxr 3.2 and later pk11_derivewithflags mxr 3.2 and later pk11_derivewithflagsperm mxr 3.9 and later pk11_destroycontext mxr ...
...3.8 and later pk11_getdefaultflags mxr 3.8 and later pk11_getdisabledreason mxr 3.8 and later pk11_getfirstsafe mxr 3.2 and later pk11_getinternalkeyslot mxr 3.2 and later pk11_getinternalslot 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 later 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_getpublickeynickn...
...And 10 more matches
NSS Tools certutil
it means that cert9.db and key
4.db files may be targeted instead.
...the default is 102
4 bits.
...the subject identification format follows rfc 1
485.
...And 10 more matches
Parser API
example: > var expr = reflect.parse("obj.foo +
42").body[0].expression > expr.left.property ({loc:null, type:"identifier", name:"foo"}) > expr.right ({loc:{source:null, start:{line:1, column:10}, end:{line:1, column:12}}, type:"literal", value:
42}) it is also available since firefox 7; it can be imported into the global object via: components.utils.import("resource://gre/modules/reflect.jsm") or into a specified object via: components.uti...
...operator is e
4x-specific.
... e
4x this section describes node types that are provided for e
4x support.
...And 10 more matches
SubtleCrypto.importKey() - Web APIs
it consists of a header and a footer, and in between, the base6
4-encoded binary data.
... a pem-encoded privatekeyinfo looks like this: -----begin private key----- mig2ageambagbyqgsm
49agegbsubbaaibigemigbagebbdau9bd0jxdff5ov380z 9vieun2w5kjdz3hbuadencxliamsoquktffaou71eldn0tshzaniaarmuhcee/cp xmjgc1roj0d0k6vluqta+jvcwigxciaukoethcngzdkcrd
4pkxdbvbcijdzkvo+l ml2fikoovzh/8yetkmjumb80
4g6omjuc9vvojcrv0ydasmykkjmjblg= -----end private key----- to get this into a format you can give to importkey() you need to do two things: base6
4-decode the part between header and footer, using window.atob().
... subjectpublickey is defined in rfc 5280, section
4.1 using the asn.1 notation: subjectpublickeyinfo ::= sequence { algorithm algorithmidentifier, subjectpublickey bit string } just like pkcs #8, the importkey() method expects to receive this object as an arraybuffer containing the der-encoded form of the subjectpublickeyinfo.
...And 10 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:0
4.000 - never drink liquid nitrogen.
... 1
4 00:01:1
4.815 --> 00:01:18.11
4 - what?
... webvtt 00:01.000 --> 00:0
4.000 - never drink liquid nitrogen.
...And 10 more matches
Using CSS gradients - CSS: Cascading Style Sheets
<div class="multiposition-stops"></div> <div class="multiposition-stop2"></div> div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; } .multiposition-stops { background: linear-gradient(to left, lime 20%, red 30%, red
45%, cyan 55%, cyan 70%, yellow 80% ); background: linear-gradient(to left, lime 20%, red 30%
45%, cyan 55% 70%, yellow 80% ); } .multiposition-stop2 { background: linear-gradient(to left, lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); background: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); } in the first example above, ...
...the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until
45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.
... in both examples, the gradient is written twice: the first is the css images level 3 method of repeating the color for each stop and the second example is the css images level
4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.
...And 10 more matches
position - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations visual presentation: understanding sc 1.
4.8 | understanding wcag 2.0 performance & accessibility scrolling elements containing fixed or sticky content can cause performance and accessibility issues.
...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/6ff6af6fd
4.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 exception that th...
...>converge</dd> <dd>crystal castles</dd> <dd>cursive</dd> </div> <div> <dt>e</dt> <dd>explosions in the sky</dd> </div> <div> <dt>t</dt> <dd>ted leo & the pharmacists</dd> <dd>t-pain</dd> <dd>thrice</dd> <dd>tv on the radio</dd> <dd>two gallants</dd> </div> </dl> css * { box-sizing: border-box; } dl > div { background: #fff; padding: 2
4px 0 0 0; } dt { background: #b8c1c8; border-bottom: 1px solid #989ea
4; border-top: 1px solid #717d85; color: #fff; font: bold 18px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/
45px helvetica, arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } ...
...And 10 more matches
Date and time formats used in HTML - HTML: Hypertext Markup Language
example html date and time strings string date and/or time 2005-06-07 june 7, 2005 [details] 08:
45 8:
45 am [details] 08:
45:25 8:
45 am and 25 seconds [details] 0033-08-0
4t03:
40 3:
40 am on august
4, 33 [details] 1977-0
4-01t1
4: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-0
4:00 1 second past midnight eastern standard time (est) ...
... leap years a leap year is any year which is divisible by
400 or the year is divisible by
4 but not by 100.
... although the calendar year is normally 365 days long, it actually takes the planet earth approximately 365.2
422 days to complete a single orbit around the sun.
...And 10 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-06-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>6019
42</td> <td><time datetime="2012-07-23">july 23, 2012</time></td> <td>15.00</td> </tr> </table> ...
...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-06-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-0
4008">april 8, 2017</time></td> <td>37.00</td> </tr> <tr> <th>hoshi nakamura</td> <td>6019
42</td> <td><time dateti...
... <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-06-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-0
4008">april 8, 2017</time></td> <td>37.00</td> </tr> <tr> <th scope="row">hoshi naka...
...And 10 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 base6
4 token if non-textual, and the data itself: data:[<mediatype>][;base6
4],<data> the mediatype is a mime type string, such as 'image/jpeg' for a jpeg image file.
...otherwise, you can specify base6
4 to embed base6
4-encoded binary data.
... data:text/plain;base6
4,sgvsbg8sifdvcmxkiq== base6
4-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 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-sha256="base6
4=="; max-age=expiretime [; includesubdomains][; report-uri="reporturi"] pin-sha256 the quoted string is the base6
4 encoded subject public key information (spki) fingerprint.
... extracting the base6
4 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.
... first you need to extract the public key information from your certificate or key file and encode them using base6
4.
...And 10 more matches
Digital audio concepts - Web media technologies
most audio files use 16-bit signed integers for each sample, but others use 32-bit floating-point values or 2
4-bit or 32-bit integers.
...at the common sample rate of
48 khz (
48,000 samples per second), this means each second of audio occupies 192 kb of memory.
... therefore, a typical three-minute song requires about 3
4.5 mb of memory.
...And 10 more matches
panel - Archive of obsolete content
to do this, save the html in your add-on's data directory and load it using the data.url() method exported by the self module, like this: var mypanel = require("sdk/panel").panel({ contenturl: require("sdk/self").data.url("myfile.html") }); mypanel.show(); from firefox 3
4, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
...h 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: { "16": "./icon-16.png", "32": "./icon-32.png", "6
4": "./icon-6
4.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}); } updating panel content you can update the panel's content by...
... 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-16.png, icon-32.png, and icon-6
4.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-16.png icon-32.png icon-6
4.png text-entry.html lib/ main.js the "main.js" looks like this: var data = require("sdk/self").data; // construct a pan...
...And 9 more matches
Finding window handles - Archive of obsolete content
that means if you use the top level nsibasewindow as a param, null will be returned in the chain and cause crash of firefox, that's a bug of firefox.(https://bugzilla.mozilla.org/show_bug.cgi?id=
4890
45) now, let's move forward.
...urce://gre/modules/ctypes.jsm'); var user32 = ctypes.open('user32.dll'); /* http://msdn.microsoft.com/en-us/library/ms633539%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.uint6
4(hwndstring)); var rez_setforegroundwindow = setforegroundwindow(hwnd); console.log('rez_setforegroundwindow:', rez_setforegroundwindow, rez_setforegroundwindow.tostring()); user32.close(); mac os x objective-c components.utils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no ...
...et 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.uint6
4(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).
...And 9 more matches
Install Manifests - Archive of obsolete content
layout the basic layout of an install manifest is like so: <?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- properties --> </description> </rdf> some properties are required, some are optional.
... examples <em:id>extensionname@example.org</em:id> <em:id>{daf
44bf7-a
45e-
4450-979c-91cf07
43
4c3d}</em:id> name the name of the add-on; intended for display in the ui.
... examples <em:targetapplication> <description> <em:id>{ec8030f7-c20a-
46
4f-9b0e-13a3a9e9738
4}</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.
...And 9 more matches
New Skin Notes - Archive of obsolete content
--gandalf 00:
45, 31 aug 2005 (pdt) i don't like the current color too, but i strongly disagree that we don't need to give visited links different color.
...--nickolay 01:3
4, 31 aug 2005 (pdt) ok, so i'm asking just to change this color.
... --gandalf 0
4:55, 31 aug 2005 (pdt) fine, changed.
...And 9 more matches
Table Layout Regression Tests - Archive of obsolete content
a typical beginning of a dump (*.rgd file) looks like: <frame va="15022
440" type="viewport(-1)" state="2703
40" parent="0"> <view va="
4717190
4"> </view> <stylecontext va="15022232"> <font serif 2
40 2
40 0 /> <color data="-16777216"/> <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 le...
...null bottom: null 1[0x1]enum 0" /> <list data="100 100 " /> <position data="left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto " /> <text data="0 0 0 normal normal 0[0x0]tw normal " /> <textreset data="0 10[0xa]enum " /> <display data="0 1 0 0 0 0 0 0 0 0 0 0 " /> <visibility data="0 1 1.000000" /> <table data="0 0
4 -1 1 " /> <tableborder data="1 null null 0 2 " /> <content data="0 0 0 null " /> <quotes data="0 " /> <ui data="3 0 0 1 " /> <uireset data="7 0
4" /> <xul data="0 0 0 0 0 1 <svg data="0 1.000000 1.000000 0 1.000000" /> </stylecontext> the baseline log will look like: type manifest file: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat +++ javascr...
...writing regression data to e:\moz_src\mozilla\layout\html\tests\table\core\verify\standards1.rgd comparing to regression data from e:\moz_src\mozilla\layout\html\tests\table\core\baseline\standards1.rgd frame bbox mismatch: 0,26
437,
482
4,600 vs.
...And 9 more matches
SSL and TLS - Archive of obsolete content
the recommended rsa key-length is 20
48 bits.
... though many web servers continue to use 102
4-bit keys, web servers should migrate to at least 20
48 bits.
... for 6
4-bit machines, consider using stronger keys.
...And 9 more matches
Debugging Frame Reflow
log file analysis the log file for a simple table like <!doctype html public "-//w3c//dtd html
4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100"> <tbody> <tr> <td>foo</td> </tr> </tbody> </table> </body> </html> will create the following log: vp 00b97c30 r=0 a=9180,
4470 c=9180,
4470 cnt=856 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 00b97c6c r=0 a=9180,uc c=9180,
4470 cnt=859 area 02d7afe
4 r=0 a=9180,uc c=9180,uc cnt=860 text 02d7b150 r=0 a=9180,uc c=uc,uc cnt=861 text 02d7b150 d=0,0 block 02d7b210 r=0 a=9180,uc c=89
40,uc cnt=862 block 02d7b210 d=89
40,0 area 02d7afe
4 d=9180,120 canvas 00b97c6c 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=863 scroll 00b97ee0 r=1 a=9180,
4470 c=9180,
4470 cnt=86
4 scroll 00b97ee0 r=1 a=9180,
4470 c=9180,
4470 cnt=865 canvas 00b97c6c r=1 a=9180,uc c=9180,
4470 cnt=866 area 02d7afe
4 r=1 a=9180,uc c=9180,uc cnt=867 block 02d7b210 r=1 a=9180,uc c=89
40,uc cnt=868 text 02d7b3f8 r=0 a=89
40,uc c=uc,uc cnt=869 text 02d7b3f8 d=0,0 tblo ...
...02d7b5f0 r=0 a=89
40,uc c=0,0 cnt=870 tbl 02d7b7ec r=0 a=89
40,uc c=1500,uc cnt=871 rowg 00b98
4a
4 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=87
4 block 02d7bcf8 r=0 a=uc,uc c=uc,uc cnt=875 text 02d7be8
4 r=0 a=uc,uc c=uc,uc cnt=876 text 02d7be8
4 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 00b98
4a
4 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 00b98
4a
4 r=2 a=1500,uc c=1500,uc cnt=879 row 02d7baf8 r=2 a=1500,uc c=1500,uc cnt=880 cell 02...
...And 9 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_certtimesvalid mxr 3.2 and later cert_changecert...
... 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 cer...
...t_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 3.2 and later cert_decodecrldistributionpoints mxr 3.10 and later cert_decodedercrl ...
...And 9 more matches
JSS Provider Notes
rsakpg.initialize(102
4); keypair rsapair = rsakpg.generatekeypair(); // generate a dsa keypair.
...dsakpg.initialize(102
4); keypair dsapair = dsakpg.generatekeypair(); supported classes cipher dsaprivatekey dsapublickey keyfactory keygenerator keypairgenerator mac messagedigest rsaprivatekey rsapublickey secretkeyfactory secretkey securerandom signature what's not supported the following classes don't work very well: keystore: there are many serious problems mapping the jca keystore interface onto nss's model of pkcs #11 modules.
... cipher supported algorithms notes aes des desede (des3 ) rc2 rc
4 rsa the following modes and padding schemes are supported: algorithm mode padding des ecb nopadding cbc nopadding pkcs5 padding ...
...And 9 more matches
Mozilla-JSS JCA Provider notes
the maintainers of jss, sun, red hat, and mozilla, have this approval and signs the official builds of jss
4.jar.
...rsakpg.initialize(102
4); keypair rsapair = rsakpg.generatekeypair(); // generate a dsa keypair.
...dsakpg.initialize(102
4); keypair dsapair = dsakpg.generatekeypair(); supported classes cipher dsaprivatekey dsapublickey keyfactory keygenerator keypairgenerator mac messagedigest rsaprivatekey rsapublickey secretkeyfactory secretkey securerandom signature cipher supported algorithms notes aes des desede (des3) rc2 rc
4 rsa the following modes and padding schemes are supported: algorithm mode padding des ecb nopadding cbc nopadding pkcs5 padding desede des3 ecb nopadding cbc ...
...And 9 more matches
Redis Tips
> r.set('foo',
42, console.log) null 'ok' > r.get('foo', console.log) null '
42' for the rest of this, i'm going to use the synchronous redis-cli for demonstrations.
... redis> get foo (nil) redis> setnx foo 17 (integer) 1 redis> get foo "17" redis> setnx foo
42 (integer) 0 the return value from setnx is 1 if the value was set, 0 otherwise.
... 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 9 more matches
Mozilla internal string guide
ted buffers (a buffer that the string class owns, but is not reference counted, because it came from somewhere else) dependent buffers, that is, an underlying buffer that the string class does not own, but that the caller that constructed the string guarantees will outlive the string instance in addition, there is a special string class, ns[c]autostring, that additionally contains an internal 6
4-unit buffer (intended primarily for use on the stack), leading to a fourth ownership model: storage within an auto string's stack buffer auto strings will prefer reference counting an existing reference-counted buffer over their stack buffer, but will otherwise use their stack buffer for anything that will fit in it.
... nsautostring / nsautocstring- derived from nsstring, a string which owns a 6
4 code unit buffer in the same storage space as the string itself.
... if a string less than 6
4 code units is assigned to an nsautostring, then no extra storage will be allocated.
...And 9 more matches
Observer Notifications
[nsobserverservice.cpp] topic description xpcom-startup note: an extension can no longer be registered to receive this notification in firefox
4 and later.
... app-startup note: an extension can no longer be registered to receive this notification in firefox
4 and later.
... the window id can be obtained from subject.queryinterface(components.interfaces.nsisupportspruint6
4).data outer-window-destroyed nsidomwindow called when an outer window is disconnected from its docshell.
...And 9 more matches
CSS3 - Archive of obsolete content
some modules, like selectors
4 or css borders and backgrounds level
4 already have an editor's draft, though they haven't yet reached the first published working draft status.
... at risk: due to insufficient browser support, standardization of the icon property and the icon value may be postponed to css
4.
... the css
4 iteration of the backgrounds and borders specification is already in progress, though it still hasn't reached the first public working draft stage, it plans to add the ability to clip a border (with the css border-clip, border-clip-top, border-clip-right, border-clip-bottom, and border-clip-left properties) or to control the shape of the border in a corner (using the css border-corner-shape prope...
...And 8 more matches
Mozilla release FAQ - Archive of obsolete content
the mozilla project started near the end of life of the
4.x line of netscape communicator.
...for this particular example, you would want to go look at relevant topics stuart cheshire's discussion on latency versus bandwidth internet -- under the covers (by me) the rfc for http the w3's html
4.0 definition building mozilla i get x error when trying to build mozilla - what's wrong?
...regarding shells, i would like to recommend the following: if you are using unix, use bash-family shells for the build because of the better control over redirection (in case you want to log errors and messages) if you are using win32, using the default shell cmd.exe (as opposed to
4dos or
4nt) will probably yield better results.
...And 8 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 6r
49 and later.
... versions of flash prior to flash 6r
49 (such as flash 5) are not scriptable in netscape gecko browsers.
...determine if the flash version is greater than 6r.
49 // 3.
...And 8 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.
...for each one, we write: an image filename (elva-fairy-
480w.jpg) a space the image's intrinsic width in pixels (
480w) — note that this uses the w unit, not px as you might expect.
... a space the width of the slot the image will fill when the media condition is true (
480px) note: for the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages.
...And 8 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
the earliest instance you'll find in the javascript is on line
48: const loworhi = document.queryselector('loworhi'); at this point we are trying to make the variable contain a reference to an element in the document's html.
...add the following code on line
49: console.log(loworhi); note: console.log() is a really useful debugging function that prints a value to the console.
... so it will print the value of loworhi to the console as soon as we have tried to set it in line
48.
...And 8 more matches
Linux compatibility matrix
distribution kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3 released eol fedora 16 3.1 2.1
4 2.30 2.2
4 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.2
4 3.
4 0.2
4 4.7
4.7 3.0 n/a may 2012 jul 2013 fedora 18 3.6 2.16 2.3
4 2.2
4 3.6 0.26
4.7
4.7 3.1 n/a jan 2013 jan 201
4 fedora 19 3.9 2.17 2.36 2.2
4 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.2
4 ...
... 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.2
4 3.1
4 0.32
4.9
4.9 3.
4 n/a dec 201
4 dec 2015 fedora 22
4.0 2.21 2.
44 2.2
4 3.16 0.32 5.1
4.9, 5.1 3.5 n/a may 2015 jul 2016 fedora 23
4.2 2.22 2.
46 2.2
4 3.18 0.33 5.1 5.1 3.7 n/a nov 2015 dec 2016 fedora 2
4 4.5 2.23 2.
48 2.2
4 3.20 0.3
4 6.1 6.1 3.8 n/a jun 2016 aug 2017 fedora 25
4.8 2.2
4 2.50 2.2
4 3.22.2 0.3
4 6.2 6.2 3.8 n/a nov 2016 dec 2017 fedora 26
4.11 2.25 2.52 2.2
4 3.22.16 0.3
4 7.1 7.1
4.0 n/a jul 2017 jun 2018 fed...
...ora 27
4.13 2.26 2.5
4 2.2
4 3.22.2
4 0.3
4 7.2 7.2
4.0 n/a nov 2017 dec 2018 fedora 28
4.16 2.27 2.56 2.2
4 3.22.30 0.3
4 8.0.1 8.0.1 6.0 n/a may 2018 may 2019 fedora 29
4.18 2.28 2.58 2.2
4 3.2
4.1 0.3
4 8.2.1 8.2.1 7.0 3.7 oct 2018 nov 2019 fedora 30 5.0 2.29 2.60 2.2
4 3.2
4.8 0.3
4 9.0.1 9.0.1 8.0 3.7 apr 2019 ?
...And 8 more matches
Internationalized Domain Names (IDN) Support in Mozilla Browsers
rfc's 3
490, 3
491, 3
492.) these new rfc's now make it possible for domain name servers to register non-ascii domain names and application/client vendors to implement standardized support for handling non-ascii characters in domain names.
...rfc 3
490 (internationalizing domain names in applications (idna)) defines characters used in idn to be drawn from unicode standard 3.2.
... this process is called "nameprep" and is performed according to rfc 3
491 (nameprep: a stringprep profile for internationalized domain names (idn)) and rfc 3
45
4 (preparation of internationalized strings ("stringprep")).
...And 8 more matches
about:memory
for example: 585 (100.0%) -- preference-service └──585 (100.0%) -- referent ├──
493 (8
4.27%) ── strong └───92 (15.73%) -- weak ├──92 (15.73%) ── alive └───0 (00.00%) ── dead leaf nodes represent actual measurements; the value of each internal node is the sum of all its children.
... 191.89 mb (100.0%) -- explicit ├───63.15 mb (32.91%) -- window-objects │ ├──2
4.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.36%) ++ layout │ │ │ │ ├───1.9
4 mb (01.01%) ── style-shee...
...ts │ │ │ │ └───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(0x7f69
425b5800) │ ├──15.75 mb (08.21%) ++ top(http://techcrunch.com/, id=20) │ ├──12.85 mb (06.69%) ++ top(http://arstechnica.com/, id=1
4) │ ├───6.
40 mb (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) │ └───3.59 mb (01.87%) ++ (
4 tiny) ├───
45.7
4 mb (23.8
4%) ++ js-non-window ├───33.73 mb (17.58%) ── heap-unclassified ├───22.51 mb (11.73%) ++ heap-overhead ├────6.62 mb (03.
45%) ++ images ├───...
...And 8 more matches
FIPS Mode - an explanation
one of the fips regulations, fips 1
40, governs the use of encryption and cryptographic services.
... so, in order for mozilla firefox and thunderbird to be usable by people who are subject to the fips regulations, mozilla's cryptographic software must be able to operate in a mode that is fully compliant with fips 1
40.
... to that end, mozilla products can function in a "fips mode", which is really "fips 1
40 mode", when paired with a compliant copy of nss.
...And 8 more matches
NSS_3.12.1_release_notes.html
nss 3.12.1 requires nspr
4.7.1.
...the tar.gz or zip file expands to an nss-3.12.1 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr
4.7.1 binary distributions to get the nspr
4.7.1 header files and shared libraries, which nss 3.12.1 requires.
... nspr
4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v
4.7.1/.
...And 8 more matches
NSS 3.56 release notes
nss 3.56 requires nspr
4.28 or newer.
... notable changes in nss 3.56 nspr dependency updated to
4.28.
... bugs fixed in nss 3.56 bug 1650702 - support sha-1 hw acceleration on armv8 bug 1656981 - use mpi comba and mulq optimizations on x86-6
4 macos.
...And 8 more matches
nss tech note6
nss .chk files for the fips 1
40 mode nss technical note: 6 in nss 3.8, we added checksum files required for the nss softoken to operate in fips 1
40 mode.
...when in fips 1
40 mode, the softoken is required to compute its checksum and compare it with the value in libsoftokn3.chk/softokn3.chk.
... the following applies to nss 3.8 through 3.10 : on 32-bit solaris sparc (i.e., not x86, and not 6
4-bit sparc) and 32-bit hp-ux pa-risc (i.e., not itanium, and not 6
4-bit pa-risc), there are two more .chk files: libfreebl_pure32_3.chk and libfreebl_hybrid_3.chk.
...And 8 more matches
Utility functions
function name/documentation source code nss versions atob_asciitodata mxr deprecated 3.2 use nssbase6
4_decodebuffer atob_convertasciitoitem mxr deprecated 3.2 use nssbase6
4_decodebuffer btoa_convertitemtoascii mxr deprecated 3.2 use nssbase6
4_encodeitem btoa_datatoascii mxr deprecated 3.2 use nssbase6
4_encodeitem der_asciitotime mxr 3.5 and later der_decodetimechoice ...
... mxr 3.9 and later der_encode mxr 3.
4 and later der_encodetimechoice mxr 3.9 and later der_generalizedtimetotime mxr 3.2 and later der_getinteger mxr 3.2 and later der_generalizeddaytoascii mxr 3.11.7 and later der_lengths mxr 3.2 and later der_timetoutctime mxr 3.2 and later der_timechoicedaytoascii mxr 3.11.7 and later der_timetogeneralizedtime mxr 3.11.7 and later der_timetogeneralizedtimearena mxr 3.11.7 and later der_utcdaytoascii mxr 3.2 and later der_utctimet...
...xr 3.2 and later der_utctimetotime mxr 3.2 and later dsau_decodedersig mxr 3.2 and later dsau_decodedersigtolen mxr 3.9 and later dsau_encodedersig mxr 3.2 and later dsau_encodedersigwithlen mxr 3.9 and later hash_begin mxr 3.
4 and later hash_clone mxr 3.10 and later hash_create mxr 3.
4 and later hash_destroy mxr 3.
4 and later hash_end mxr 3.
4 and later hash_gethashobject mxr 3.2 and later hash_gethashobjectbyoidtag mxr 3.8 and later hash_...
...And 8 more matches
NSS Tools modutil
you can use the tool to add and delete pkcs #11 modules, change passwords, set defaults, list module contents, enable or disable slots, enable or disable fips 1
40-2 compliance, and assign default providers for cryptographic operations.
... availability this tool is known to build on solaris 2.5.1 (sunos 5.5.1) and windows nt
4.0.
... -fips [true | false] enable (true) or disable (false) fips 1
40-2 compliance for the netscape communicator internal module.
...And 8 more matches
Starting WebLock
pr_true); // persist a complete code listing for registering weblock as a startup observer follows: #define mozilla_strict_api #include "nsigenericfactory.h" #include "nscomptr.h" #include "nsxpcom.h" #include "nsiservicemanager.h" #include "nsicategorymanager.h" #include "nsmemory.h" #include "nsiobserver.h" #include "nsembedstring.h" #define weblock_cid \ { 0x777f7150, 0x
4a2b, 0x
4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} #define weblock_contractid "@dougt/weblock" class weblock: public nsiobserver { public: weblock(); virtual ~weblock(); ns_decl_isupports ns_decl_nsiobserver }; weblock::weblock() { ns_init_isupports(); } weblock::~weblock() { } ns_impl_isupports1(weblock, nsiobserver); ns_imethodimp weblock::observe(nsisup...
...the xpidl for iweblock appears below: iweblock #include "nsisupports.idl" interface nsisimpleenumerator; [scriptable, uuid(ea5
4eee
4-95
48-
4b63-b9
4d-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 f...
... [scriptable, uuid(ea5
4eee
4-95
48-
4b63-b9
4d-c519ffc91d09)] the rest of the line provides a uuid for this interface.
...And 8 more matches
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 1
4.0 domstring getselection(); nsidomdocument open(in acstring acontenttype, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); boolean querycommandstate(in domstring commandid); boolean querycommandsupported(in domstring commandid); domstring querycommandtext(...
...in domstring commandid); obsolete since gecko 1
4.0 domstring querycommandvalue(in domstring commandid); void releaseevents(in long eventflags); void routeevent(in nsidomevent evt); void write(); obsolete since gecko 2.0 void writeln(); obsolete since gecko 2.0 attributes attribute type description alinkcolor domstring same as body.alink bgcolor domstring same as body.bgcolor compatmode domstring returns "backcompat" if the document is in quirks mode or "css1compat" if the document is in full standards or almost standards mode.
...obsolete since gecko 6.0 linkcolor domstring same as body.link plugins nsidomhtmlcollection same as embeds for compatibility with netscape
4.x read only.
...And 8 more matches
nsIWindowsRegKey
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 readint6
4value(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 writeint6
4value(in a...
... constant value description access_basic 0x00020000 access_query_value 0x00000001 access_set_value 0x00000002 access_create_sub_key 0x0000000
4 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 wow6
4_32 0x00000200 wow6...
...
4_6
4 0x00000100 type constants values for the type of a registry value.
...And 8 more matches
Zombie compartments
that more fine-graned representation may look like this │ ├───28.
45 mb (05.71%) -- top(https://www.google.de/, id=1
41) │ │ ├──13.66 mb (02.7
4%) -- active/window(https://www.google.de/) │ │ │ ├───7.83 mb (01.57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.56 mb (00.71%) -- objects │ │ │ │ │ ├──3.0
4 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ ma...
...lloc-heap │ │ │ │ │ └──0.00 mb (00.00%) ── non-heap/code/asm.js │ │ │ │ ├──2.
43 mb (00.
49%) -- shapes │ │ │ │ │ ├──1.
47 mb (00.29%) ++ gc-heap │ │ │ │ │ └──0.96 mb (00.19%) ++ malloc-heap │ │ │ │ ├──1.03 mb (00.21%) -- scripts │ │ │ │ │ ├──0.72 mb (00.1
4%) ── gc-heap [2] │ │ │ │ │ └──0.31 mb (00.06%) ── malloc-heap/data [2] │ │ │ │ ├──0.80 mb (00.16%) -- type-inference │ │ │ │ │ ├──0.66 mb (00.13%) ── type-scripts [2] │ │ │ │ │ ├──0.13 mb (00.03%) ── allocation-site-tables [2] │ │ │ │ │ └──0.02 mb (00.00%) ── object-type-tables...
... [2] │ │ │ │ └──0.01 mb (00.00%) -- sundries │ │ │ │ ├──0.01 mb (00.00%) ── malloc-heap [2] │ │ │ │ └──0.00 mb (00.00%) ── gc-heap [2] │ │ │ └───5.83 mb (01.17%) -- (
4 tiny) │ │ │ ├──
4.19 mb (00.8
4%) ++ layout │ │ │ ├──1.03 mb (00.21%) ── style-sheets [2] │ │ │ ├──0.60 mb (00.12%) ++ dom │ │ │ └──0.01 mb (00.00%) ── property-tables [2] │ │ ├───8.86 mb (01.78%) -- cached/window(https://www.google.de/?gws_rd=ssl) │ │ │ ├──
4.23 mb (00.85%) -- layout │ │ │ │ ├──3.80 mb (00.76%) ── style-sets │ │ │ │ ├──0.29 mb (00.06%) ── pres-shell │ �...
...And 8 more matches
IDBKeyRange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbkeyrangechrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yesboundchrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yesincludeschrome full support 52edge full support ≤18firefox full support
47ie ?
...And 8 more matches
SubtleCrypto.unwrapKey() - Web APIs
*/ const saltbytes = [89,113,135,23
4,168,20
4,21,36,55,93,1,132,2
42,2
42,192,156]; /* the wrapped key itself.
... */ const wrappedkeybytes = [171,223,1
4,36,201,233,233,120,16
4,68,217,192,226,80, 22
4,39,199,235,239,60,212,169,100,23,61,5
4,2
44,197,160,80,109,230,207, 225,57,197,175,71,80,209]; /* convert an array of byte values to an arraybuffer.
...*/ const saltbytes = [180,253,62,216,
47,35,90,55,218,233,103,10,172,1
43,161,177]; /* iv that is to be used in decrypting the key to unwrap.
...And 8 more matches
Adding 2D content to a WebGL context - Web APIs
that position is then multiplied by two
4x
4 matrices we provide called uprojectionmatrix and umodelviewmatrix; gl_position is set to the result.
... // vertex shader program const vssource = ` attribute vec
4 avertexposition; uniform mat
4 umodelviewmatrix; uniform mat
4 uprojectionmatrix; void main() { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; } `; it's worth noting that we're using a vec
4 attribute for the vertex position, which doesn't actually use a
4-component vector; that is, it could be handled as a vec2 or vec3 depending on the situation.
... but when we do our math, we will need it to be a vec
4, so rather than convert it to a vec
4 every time we do math, we'll just use a vec
4 from the beginning.
...And 8 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
(see understanding success criterion 1.
4.3: contrast) a viewer's distance from the screen, the ambient background, the health of his eyes, and more all affect how that color is received by the viewer.
... for example, the color "crimson red" may be described in hex values as #990000 by some and #dc1
43c by others.
... there's movement towards adopting the use of hsl color values rather than rgb values is css color module 3 (see section
4.2.
4), the rationale being that rgb is hardware-oriented, reflecting the use of crts, and that rgb is non-intuitive.
...And 8 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
specifications specification status comment selectors level
4the definition of ':is()' in that specification.
...esktopmobilechromeedgefirefoxinternet 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 8
42157).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 8
42157).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).
...And 8 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } when defining the grid, i name my lines inside square brackets.
... .box1 { grid-column-start: main-start; grid-row-start: main-start; grid-row-end: main-end; } .box2 { grid-column-start: content-end; grid-row-start: main-start; grid-row-end: content-end; } .box3 { grid-column-start: content-start; grid-row-start: main-start; } .box
4 { grid-column-start: content-start; grid-column-end: main-end; grid-row-start: content-end; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box
4">four</div> </div> everything else about line-based placement still works in the same way and you can mix named lines and line numbers.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } 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.
...And 8 more matches
max-height - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.
4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
...e or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } specifications specification status comment css box sizing module level
4the definition of 'max-height' in that specification.
...opera supports applying max-height to table elements.safari full support 1.3webview android full support ≤37chrome android full support 18firefox android full support
4opera android full support 1
4safari ios full support 1samsung internet android full support 1.0fit-content experimentalchrome full support
46 full support
46 f...
...And 8 more matches
Index - Developer guides
found
43 pages: # page tags and summary 1 developer guides api, guide, landing, web these articles provide how-to information to help make use of specific web technologies and apis.
...
4 getting started ajax, api, advanced, javascript, webmechanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
...currently, to support all browsers we need to specify two formats, although with the adoption of mp3 and mp
4 formats in firefox and opera, this is changing fast.
...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>16</option> <option>32</option> <option>6
4</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>https://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="6
4" list="numbersxx" id="rangex"/></p> <p><label for="numberx">number</label> <input type="number" min="0" max="6
4" 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.
... there is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 pm to
4 am.
...And 8 more matches
JavaScript modules - JavaScript
16 full support 16 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 5
4 — 60disabled disabled from version 5
4 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 5
4 — 60disabled disabled from version 5
4 until version 60 (exclusive): this feature is behind the dom.modulescripts.enabled preference.
... to change preferences in firefox, visit about:config.opera android full support
45safari ios full support 10.3samsung internet android full support 8.0nodejs full support 13.2.0notes full support 13.2.0notes notes modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module".
...And 8 more matches
Numbers and dates - JavaScript
numbers in javascript, numbers are implemented in double-precision 6
4-bit binary format ieee 75
4 (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 123
4567890
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; // 21
47
4836
48 var flt_exponent = 0b01111111100000000000000000000000; // 21390950
40 var flt_mantissa = 0b00000000011111111111111111111111; // 8388607 octal numbers octal number syntax uses a leading zero.
...And 8 more matches
eval() - JavaScript
eval(new string('2 + 2')); // returns a string object containing "2 + 2" eval('2 + 2'); // returns
4 you can work around this limitation in a generic fashion by using tostring().
... var expression = new string('2 + 2'); eval(expression.tostring()); // returns
4 if you use the eval function indirectly, by invoking it via a reference other than eval, as of ecmascript 5 it works in the global scope rather than the local scope.
... 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()!
...And 8 more matches
Lexical grammar - JavaScript
decimal 123
4567890
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.
... var flt_signbit = 0b10000000000000000000000000000000; // 21
47
4836
48 var flt_exponent = 0b01111111100000000000000000000000; // 21390950
40 var flt_mantissa = 0b00000000011111111111111111111111; // 8388607 octal octal number syntax uses a leading zero followed by a lowercase or uppercase latin letter "o" (0o or 0o).
...if the digits after the 0o are outside the range (0123
4567), the following syntaxerror is thrown: "missing octal digits after 0o".
...And 8 more matches
Using the WebAssembly JavaScript API - WebAssembly
now, to help us understand what is going on here, let’s look at the text representation of our wasm module (which we also meet in converting webassembly format to wasm): (module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") i32.const
42 call $i)) in the second line, you will see that the import has a two-level namespace — the internal function $i is imported from imports.imported_func.
... add the following to your script, below the first block: webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the net result of this is that we call our exported webassembly function exported_func, which in turn calls our imported javascript function imported_func, which logs the value provided inside the webassembly instance (
42) to the console.
... the equivalent code would look like this: fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(results => { results.instance.exports.exported_func(); }); viewing wasm in developer tools in firefox 5
4+, the developer tool debugger panel has functionality to expose the text representation of any wasm code included in a web page.
...And 8 more matches
Unit Testing - Archive of obsolete content
to demonstrate how it works we'll write some unit tests for a simple base6
4 encoding module.
... a simple base6
4 module in a web page, you can perform base6
4 encoding and decoding using the btoa() and atob() functions.
...so we'll create a base6
4 module to expose these functions from the platform (see creating reusable modules).
...And 7 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
address bar identity box is missing padlock icons for secure sites in firefox 1
4 and later the identity box has been significantly changed and the favicon has been replaced by an icon that indicates the website's status.
...kin/identity-icons-https-ev.png); } #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0,
48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme review guidelines no visual clue for disabled url bars there needs to be a visual clue when url bar is disabled.
... to test this please go to bug 32
4777 using the default theme and activate the "click me" link.
...And 7 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/6ff6af6fd
4.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/6ff6af6fd
4.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 longer there ...
...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/6ff6af6fd
4.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 7 more matches
Client-Server Overview - Learn web development
"200 ok" for success, "
40
4 not found" if the resource cannot be found, "
403 forbidden" if the user isn't authorised to see the resource, etc).
...nformation 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; wow6
4) applewebkit/537.36 (khtml, like gecko) chrome/52.0.27
43.116 safari/537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zipujsazv6...
...pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.1
471911953; ffo=true the first and second lines contain most of the information we talked about above: the type of request (get).
...And 7 more matches
Package management basics - Learn web development
you'll see that npm has added a new field, dependencies: "dependencies": { "parcel-bundler": "^1.12.
4" } this is part of the npm magic — if in future you move your codebase to another location, on another machine, you can recreate the same set up by running the command npm install, and npm will look at the dependencies and install them for you.
...in your terminal, run the following command: parcel index.html you should see something like this printed to your terminal: server running at http://localhost:123
4 ✨ built in 193ms.
...for a start, there is now a local web server running at http://localhost:123
4.
...And 7 more matches
Debugging Table Reflow
it can be invoked by set gecko_block_debug_flags=reflow the available options are: reflow really-noisy-reflow max-element-size space-manager verify-lines damage-repair lame-paint-metrics lame-reflow-metrics disable-resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be5ac
4: reflowing dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowstate.
... the table layout strategy can be visualized by defining in the makefiles the constant debug_table_strategy.if one takes for instance the following table code: <table border width="300"> <colgroup> <col> <col width="50%"> <col width="1*"> <col> </colgroup> <tr> <td style="width:80px">cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell
4</td> </tr> </table> rendering: <colgroup><col><col width="50%"><col width="1*"><col></colgroup>cell 1cell 2cell 3cell
4 it will produce the following log at the entrance of assignnonpctcolwidths: assignnonpctcolwidths en max=
4500 count=0 ***start table dump*** mcolwidths=-1 -1 -1 -1 col frame cache -> 0=00b93138 1=00b931f0 2=02
4dd728 3=02
4dd780 **start col dump** colindex=0 isanonymous=0 c...
...the first line of the data dump shows that no width has yet been assigned to the columns mcolwidths=-1 -1 -1 -1, -1 stands for: #define width_not_set -1 this is followed by a reference to the column frame pointers: col frame cache -> 0=00b93138 1=00b931f0 2=02
4dd728 3=02
4dd780 this is followed by the information which width has been set for each column.
...And 7 more matches
Index
found
42 pages: # page tags and summary 1 localization at mozilla landing, localization, mozilla, translation, l10n localization (l10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture.
... 3 bootstrapping a new locale localization, mercurial, translate, bit bucket (see also https://developer.mozilla.org/en/create_a_new_localization)
4 encodings for localization files internationalization, localization when creating a localization for mozilla products, it’s important to be aware of the encoding of the files that you generate.
... 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.
...And 7 more matches
Basics
with mathml, one can build sets such as (go on, right-click any of these equations to experiment the zoom) { 0 , 1 , 2 , 3 ,
4 } or { ⌊ a b ⌋ | a 2 + b 2 ≤ 3 } , write calculus d y d x = 1 y 2 , form rather complicated expressions lim n → n ( 1 + 1 n ) n − e n , k = ∂ 2 z ∂ x 2 ∂ 2 z ∂ y 2 - ( ∂ 2 z ∂ x ∂ y ) 2 ( 1 + ( ∂ z ∂ x ) 2 + ( ∂ z ∂ y ) 2 ) 2 , write vector equations...
...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 !
... f (
4 ) ( η ) , a ≤ η ≤ b | x | = { - x if x < 0 x otherwise you can also typeset 2d mathematical constructs such as matrices.
...And 7 more matches
TimerFirings logging
nspr_log_modules=timerfirings:
4 output once enabled, timerfirings will print one line of logging output per timer fired.
... -9919
46880[7f
46c365ba00]: [6775] fn timer (slack 100 ms): layeractivitytracker -9919
46880[7f
46c365ba00]: [6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -9919
46880[7f
46c365ba00]: [6775] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -9919
46880[7f
46c365ba00]: [6775] iface timer (one_shot 200 ms): 7f
4696
4d7f80 -13
406
4358
4[7f
46c365ec00]: [6775] obs timer (slack 1000 ms): 7f
46a95a0200 each line has the following information.
... -9919
46880[7f
46c365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0 711637568[7f3219c
48000]: [6835] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:7231 711637568[7f3219c
48000]: [6835] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9
423 these js timers are annotated with [content] and show the j...
...And 7 more matches
NSS 3.12.6 release notes
nss 3.12.6 requires nspr
4.8.
4.
... you also need to download the nspr
4.8.
4 binary distributions to get the nspr
4.8.
4 header files and shared libraries, which nss 3.12.6 requires.
... nspr
4.8.
4 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v
4.8.
4/.
...And 7 more matches
NSS tools : pk12util
pk12util supports two types of databases: the legacy security databases (cert8.db, key3.db, and secmod.db) and new sqlite databases (cert9.db, key
4.db, and pkcs11.txt).
... 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 1
4 - pkcs12 decoder start error o 15 - error read from import file o 16 - 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 2...
...
4 - find cert by nickname error o 25 - create export context error o 26 - 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).
...And 7 more matches
Installing Pork
prerequisites flex >2.5.
4 (flex-old on ubuntu) bison gcc pork uses gcc to generate .i/.ii files (preprocessed c/c++) for elsa to parse.
... the recommended version of gcc is gcc
4.2.
...our recent work has gotten mozilla to compile with gcc
4.2.
...And 7 more matches
SpiderMonkey Build Documentation
note: if you are on mac and getting an error similar to "checking whether the c compiler (gcc-
4.2 ) works...
...refer the release notes under command line tools -> new features the release notes also states that this compatibility package will no longer be provided in the near future, so the build system on macos will have to be adapted to look for headers in the sdk until then, the following should help, open /library/developer/commandlinetools/packages/macos_sdk_headers_for_macos_10.1
4.pk this builds an executable named js in the directory build-release/dist/bin.
...start-shell-msvc2013.bat or start-shell-msvc2013-x6
4.bat) determines whether the compiler toolchain will target 32-bit or 6
4-bit builds.
...And 7 more matches
How to embed the JavaScript engine
spidermonkey 2
4 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the global object.
... */ static jsclass global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, }; int main(int argc, const char *argv[]) { jsruntime *rt = js_newruntime(8l * 102
4 * 102
4, js_use_helper_threads); if (!rt) return 1; jscontext *cx = js_newcontext(rt, 8192); if (!cx) return 1; { // scope for our various stack objects (jsautorequest, rootedobject), so they all go // out of scope before we js_destroycontext.
... global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, nullptr, nullptr, nullptr, nullptr, js_globalobjecttracehook }; int main(int argc, const char *argv[]) { js_init(); jsruntime *rt = js_newruntime(8l * 102
4 * 102
4, js_use_helper_threads); if (!rt) return 1; jscontext *cx = js_newcontext(rt, 8192); if (!cx) return 1; { // scope for our various stack objects (jsautorequest, rootedobject), so they all go // out of scope before we js_destroycontext.
...And 7 more matches
nsINavBookmarkObserver
rom: 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 print6
4 folder, in print6
4 parent, in print32 index); obsolete since gecko 1.9 void onfolderchanged(in print6
4 folder, in acstring property); obsolete since gecko 1.9 void onfoldermoved(in print6
4 folder, in print6
4 oldparent, in print32 oldindex, in print6
4 newparent, in print32 newindex); obsolete since gecko 1.9 void onfolderremoved(in print6
4 folder, in print6
4 parent, in p...
...dparentid, in long aoldindex, 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 print6
4 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 print6
4 parent, in print32 index); obsolete since gecko 1.9 void onseparatorre...
...moved(in print6
4 parent, in print32 index); obsolete since gecko 1.9 methods onbeforeitemremoved() obsolete since gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) note: this method was removed in gecko 21.0 as part of bug 826
409.
...And 7 more matches
Type conversion
eger types target type source converted value ctypes.char16_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.char16_t } ])(); mystruct.v = 0x
41; console.log(mystruct.v.tostring()); // "a" mystruct.v = true; console.log(mystruct.v.tostring()); // "\x01" mystruct.v = "x"; console.log(mystruct.v.tostring()); // "x" mystruct.v = "xx"; // throws error var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t } ])(); mystruct.v = 0x
41; console.log(mystruct.v.tostring()); // 65 mystruct.v = true; console.l...
...16_t ctypes.unsigned_short ctypes.unsigned_int ctypes.int ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint16_t ctypes.short ctypes.unsigned_short ctypes.int32_t ctypes.unsigned_int ctypes.uint8_t ctypes.uint16_t ctypes.unsigned_short ctypes.uint32_t ctypes.int6
4_t ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint16_t ctypes.short ctypes.unsigned_short ctypes.int32_t ctypes.uint32_t ctypes.int ctypes.unsigned_int ctypes.long_long ctypes.uint6
4_t ctypes.uint8_t ctypes.uint16_t ctypes.unsigned_short ctypes.uint32_t ...
... ctypes.unsigned_int ctypes.unsigned_long_long ctypes.long_long ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint16_t ctypes.short ctypes.unsigned_short ctypes.int32_t ctypes.uint32_t ctypes.int ctypes.unsigned_int ctypes.int6
4_t ctypes.unsigned_long_long ctypes.uint8_t ctypes.uint16_t ctypes.unsigned_short ctypes.uint32_t ctypes.unsigned_int ctypes.uint6
4_t ctypes.float32_t ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint16_t ctypes.short ctypes.unsigned_short ctypes.float6
4_t ctypes.int8_t ctypes.uint8_t ctypes.int16_t ...
...And 7 more matches
Network request details - Firefox Developer Tools
select copy all, the entire header is copied in json format, giving you something like this (after running the results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-timing", "value": "d=7
4716 t=156025809907
4460" }, { "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": "mw1316.eqiad.wmnet" }, { "name": "server-timing", "value": "cache;desc=\"pass\"" }, { "name": "strict-transport-security", "value": "max-age=10638
4710; includesubdomains; preload" }, { "name": "vary", "value": "accept-encoding,treat-as-untrusted,x-forwarded-proto,cookie,authorization,x-seven" }, { "name": "via", "value": "1.1 varnish (varnish/5.1), 1.1 varnish (varnish/5.1)" }, { "name": "x-analytics", "value": "ns=-1;special=badtitle;wmf-last-access=11-jun-2...
...019;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": "20
4.210.158.136" }, { "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": "esvan0r5bnnwscyk2wq09i1im" }, { "name": "x-varnish", "value": "766019
457,
4175
49316" ...
...And 7 more matches
about:debugging (before Firefox 68) - Firefox Developer Tools
before firefox
48 if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
... note that before firefox
48, loading the add-on again by pressing "load temporary add-on" without restarting firefox does not work.
... firefox
48 onwards from firefox
48 onwards: as before: if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
...And 7 more matches
NavigationPreloadManager - Web APIs
opera full support
49safari ?
...roid full support 62chrome android full support 62firefox android no support nonotes no support nonotes notes implementation tracked in bug 1290958opera android full support
46safari ios ?
... opera full support
49safari ?
...And 7 more matches
PhotoCapabilities - Web APIs
opera full support
46safari ?
... opera android full support
43safari ios ?
... opera full support
46safari ?
...And 7 more matches
URLUtilsReadOnly - Web APIs
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 1386683).opera android no support nosafari ios no support nosamsung internet android no support nohash experimentalchrome no...
... nosafari no support nowebview android no support nochrome android no support nofirefox android full support 38 full support 38 no support
4 — 38notes notes before firefox 38, firefox returned the hash percent encoded.
... no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android full support
4opera android no support nosafari ios no support nosamsung internet android no support nohostname experimentalchrome no support noedge no support nofirefox ful...
...And 7 more matches
WebGLRenderingContext.getParameter() - Web APIs
ant returned type description gl.active_texture glenum gl.aliased_line_width_range float32array (with 2 elements) gl.aliased_point_size_range float32array (with 2 elements) gl.alpha_bits glint gl.array_buffer_binding webglbuffer gl.blend glboolean gl.blend_color float32array (with
4 values) gl.blend_dst_alpha glenum gl.blend_dst_rgb glenum gl.blend_equation glenum gl.blend_equation_alpha glenum gl.blend_equation_rgb glenum gl.blend_src_alpha glenum gl.blend_src_rgb glenum gl.blue_bits glint gl.color_clear_value float32array (with
4 v...
...alues) gl.color_writemask sequence<glboolean> (with
4 values) gl.compressed_texture_formats uint32array returns the compressed texture formats.
...xt.compressed_rg11_eac ext.compressed_signed_rg11_eac ext.compressed_rgb8_etc2 ext.compressed_rgba8_etc2_eac ext.compressed_srgb8_etc2 ext.compressed_srgb8_alpha8_etc2_eac ext.compressed_rgb8_punchthrough_alpha1_etc2 ext.compressed_srgb8_punchthrough_alpha1_etc2 when using the webgl_compressed_texture_pvrtc extension: ext.compressed_rgb_pvrtc_
4bppv1_img ext.compressed_rgba_pvrtc_
4bppv1_img ext.compressed_rgb_pvrtc_2bppv1_img ext.compressed_rgba_pvrtc_2bppv1_img when using the webgl_compressed_texture_etc1 extension: ext.compressed_rgb_etc1_webgl when using the webgl_compressed_texture_atc extension: ext.compressed_rgb_atc_webgl ext.compressed_rgba_atc_explicit_alpha_webgl ...
...And 7 more matches
Color contrast - Accessibility
when designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text
4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1
4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text.
... 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: #fae6fa; } .bad { background-color: #
40006
4; } both pieces of text have their default black color.
...a; } 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: #
40006
4; } solution when choosing a color scheme for your website, choose foreground and background colors that have good contrast.
...And 7 more matches
CSS values and units - CSS: Cascading Style Sheets
a fourth value of revert was added in the cascade level
4 specification, but it does not currently have good browser support.
... numeric data types <integer> <number> <dimension> <percentage> integers an integer is one or more decimal digits, 0 through 9, such as 102
4 or -55.
... dimensions a <dimension> is a <number> with a unit attached to it, for example
45deg, 100ms, or 10px.
...And 7 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="11
4x11
4" href="apple-icon-11
4.png" type="image/png"> the sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked.
...allowed values are determined by bcp
47.
... integrity contains inline metadata — a base6
4-encoded cryptographic hash of the resource (file) you’re telling the browser to fetch.
...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 26, 1992 through may 2
4, 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.
...the first of these would produce an entry in the table of contents like this: <a name="z0" href="#z
4">first section name</a> and the section header would be marked like this: <h2><a name="z
4">first section name</a></h2>.
...when opening the document, the next editor finds and reads this <nextid n="z8"> tag, and now knows to give the first of these new sections the name of z8 in the table of contents, and z1
4 to the content body.
...And 7 more matches
<object> - HTML: Hypertext Markup Language
archivehtml
4 onlyobsolete since html5 a space-separated list of uris for archives of resources for the object.
... borderdeprecated since html
4.01obsolete since html5 the width of a border around the control, in pixels.
... classidhtml
4 onlyobsolete since html5 the uri of the object's implementation.
...And 7 more matches
HTTP authentication - HTTP
the challenge and response flow works like this: the server responds to a client with a
401 (unauthorized) response status and provides information on how to authorize with a www-authenticate response header containing at least one challenge.
...in the case of proxies, the challenging status code is
407 (proxy authentication required), the proxy-authenticate response header contains at least one challenge applicable to the proxy, and the proxy-authorization request header is used for providing the credentials to the proxy server.
... access forbidden if a (proxy) server receives valid credentials that are inadequate to access a given resource, the server should respond with the
403 forbidden status code.
...And 7 more matches
Array.prototype.reduce() - JavaScript
it is almost always safer to provide an initialvalue, because there can be up to four possible output types without initialvalue, as shown in the following example: let maxcallback = ( acc, cur ) => math.max( acc.x, cur.x ); let maxcallback2 = ( max, cur ) => math.max( max, cur ); // reduce without initialvalue [ { x: 2 }, { x: 22 }, { x:
42 } ].reduce( maxcallback ); // nan [ { x: 2 }, { x: 22 } ].reduce( maxcallback ); // 22 [ { x: 2 } ].reduce( maxcallback ); // { x: 2 } [ ].reduce( maxcallback ); // typeerror // map & reduce with initialvalue; better solution, also works for empty or larger arrays [ { x: 22 }, { x:
42 } ].map( el => el.x ) .
...reduce( maxcallback2, -infinity ); how reduce() works suppose the following use of reduce() occurred: [0, 1, 2, 3,
4].reduce(function(accumulator, currentvalue, currentindex, array) { return accumulator + currentvalue }) 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).
...the code below will produce the same output as the code in the block above: [0, 1, 2, 3,
4].reduce( (accumulator, currentvalue, currentindex, array) => accumulator + currentvalue ) if you were to provide an initialvalue as the second argument to reduce(), the result would look like this: [0, 1, 2, 3,
4].reduce((accumulator, currentvalue, currentindex, array) => { 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 ...
...And 7 more matches
WebAssembly.Table - JavaScript
the table2.wasm module contains two functions (one that returns
42 and another that returns 83) and stores both into elements 0 and 1 of the imported table (see text representation).
... 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0table() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support ...
...And 7 more matches
Destructuring assignment - JavaScript
syntax let a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30,
40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30,
40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 // stage
4(finished) proposal ({a, b, ...rest} = {a: 10, b: 20, c: 30, d:
40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); // {c: 30, d:
40} description the object and array literal expressions provide an easy wa...
... const x = [1, 2, 3,
4, 5]; the destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable.
... const x = [1, 2, 3,
4, 5]; const [y, z] = x; console.log(y); // 1 console.log(z); // 2 this capability is similar to features present in languages such as perl and python.
...And 7 more matches
<metadata> - SVG: Scalable Vector Graphics
example <svg width="
400" viewbox="0 0
400 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <metadata> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-rdf#"> <rdf:description about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#com...
...f:description> <rdf:description about="#cablen"> <connect:ends rdf:resource="#socket5"/> <connect:ends>everything</connect:ends> </rdf:description> <rdf:description about="#hub"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#socket3"/> <connect:ends rdf:resource="#socket
4"/> <connect:ends rdf:resource="#socket5"/> </rdf:description> </rdf:rdf> </metadata> <title>network</title> <desc>an example of a computer network based on a hub.</desc> <style> svg { /* default styles to be inherited */ fill: white; stroke: black; } text { fill: black; stroke: none; } path { fill: none; } </style> <!-- define symb...
...used by hub symbol --> <symbol id="hubplug"> <desc>a 10baset/100basetx socket</desc> <path d="m0,10 h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <text x="0" y="15">hub</text> <g transform="translate(0 20)"> <rect width="253" height="8
4"/> <rect width="229" height="
44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined socket --> <g id="sock1et" transform="translate(25 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform="translate(70 20)"> <title>socket 2</title> ...
...And 7 more matches
Local Storage - Archive of obsolete content
the structure could be something like this: s
435l.default (your profile directory) xulschool log.txt somedbfile.sqlite the directory service and the nsifile interface are used to create the local directory.
... localdir.create(ci.nsifile.directory_type, 077
4); } return localdir; }, profd is a special identifier for the profile directory that exists so that you don't need to figure out its location.
... it used to be the case that custom logging solutions were necessary, but mozilla labs have come up with a javascript implementation of a logger similar to the log
4j logger used in java projects.
...And 6 more matches
Creating regular expressions for a microsummary generator - Archive of obsolete content
here's a url for an auction item page on ebay: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=280018
439106 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?viewitem&item=280018
439106".
... here's a regular expression that matches our example url: http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item=280018
439106 it looks almost the same as the url.
... matching from the start of the url while this expression matches the url, it also matches other urls that contain this url in their query parameters, for example: http://www.example.com/redirect.php?url=http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=280018
439106 that's probably not what we want, since urls that contain our example url probably aren't auction item pages themselves.
...And 6 more matches
Mozilla Crypto FAQ - Archive of obsolete content
encryption export regulations published on january 1
4, 2000, the release on february 11, 2000, of source code for ssl, s/mime, and general pki functionality for use in the mozilla project, and the "bernstein advisory" issued by the bureau of export administration on february 17, 2000.
...export of source code for open source software is addressed in part 7
40 (pdf), section 7
40.13(e), "unrestricted encryption source code"; export of binaries is addressed in 7
40.17.
... finally, note that nss (and thus psm) can also be built using a licensed copy of the rsa bsafe crypto-c library (versions
4.1 or 5.0).
...And 6 more matches
What is RSS - Archive of obsolete content
in august 2002 userland released a draft for rss 0.9
4.
...(although some were using rss 0.93 and rss 0.9
4 even though they weren't supposed to.) in september 2002 userland released rss 2.0.
... rss 2.0 was meant to be a replacement for rss 0.92 (and the rss 0.93 and rss 0.9
4 drafts that no one was supposed to use).
...And 6 more matches
New in JavaScript 1.8.5 - Archive of obsolete content
this version was included in firefox
4.
...bug
4928
40 object.defineproperty() adds the named property described by a given descriptor to an object.
...bug
4928
49 object.isextensible() determines if extending of an object is allowed.
...And 6 more matches
LiveConnect Overview - Archive of obsolete content
alert(java.lang.integer.max_value); //alerts 21
47
4836
47 the packages object if a java class is not part of the java, sun, or netscape packages, you access it with the packages object.
...// javascript 1.3 var theclass = java.lang.class.forname("java.lang.string"); var thearray = java.lang.reflect.array.newinstance(theclass, 5); in javascript 1.
4 and later, you can pass a javaclass object directly to a method, as shown in the following example: // javascript 1.
4 var thearray = java.lang.reflect.array.newinstance(java.lang.string, 5); arguments of type char in javascript 1.
4 and later, you can pass a one-character string to a java method which requires an argument of type char.
...beginning with javascript 1.
4, you can catch this exception in a try...catch statement.
...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/9e6
4asf935.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/9e6
4asf935.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 - xhtm...
...And 6 more matches
2D maze game with device orientation - Game development
> body { margin: 0; background: #333; } </style> <script src="src/phaser-arcade-physics.2.2.2.min.js"></script> <script src="src/boot.js"></script> <script src="src/preloader.js"></script> <script src="src/mainmenu.js"></script> <script src="src/howto.js"></script> <script src="src/game.js"></script> </head> <body> <script> (function() { var game = new phaser.game(320,
480, phaser.canvas, 'game'); game.state.add('boot', ball.boot); game.state.add('preloader', ball.preloader); game.state.add('mainmenu', ball.mainmenu); game.state.add('howto', ball.howto); game.state.add('game', ball.game); game.state.start('boot'); })(); </script> </body> </html> so far we have a simple html website with some basic content in the <head> section: charset, t...
... var game = new phaser.game(320,
480, phaser.canvas, 'game'); the line above will initialize the phaser instance — the arguments are the width of the canvas, height of the canvas, rendering method (we're using canvas, but there are also webgl and auto options available) and the optional id of the dom container we want to put the canvas in.
...without the framework, to add the canvas element to the page, you would have to write something like this inside the <body> tag: <canvas id='game' width='320' height='
480'></canvas> the important thing to remember is that the framework is setting up helpful methods to speed up a lot of things like image manipulation or assets management, which would be a lot harder to do manually.
...And 6 more matches
CSS values and units - Learn web development
the following are all classed as numeric: data type description <integer> an <integer> is a whole number such as 102
4 or -55.
... <dimension> a <dimension> is a <number> with a unit attached to it, for example
45deg, 5s, or 10px.
... unit name equivalent to cm centimeters 1cm = 96px/2.5
4 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/
40th of 1cm in inches 1in = 2.5
4cm = 96px pc picas 1pc = 1/6th of 1in pt points 1pt = 1/72th of 1in px pixels 1px = 1/96th of 1in most of these values are more useful when used for print, rather than screen output.
...And 6 more matches
Starting our Svelte Todo list app - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/b7b831ea3a35
4d3789cefbc31e2ca
495?version=3.23.2 todo list app features this is how our todo list app wil look like once it's ready: using this ui our user will be able to: browse their tasks.
..."88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> the compiler will issue the following warning: (!) plugin svelte: a11y: <img> element should have an alt attribute src/components/todos.svelte 1: <h1>svelte to-do list</h1> 2: 3: <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> ^ created public/build/bundle.js in 220ms [2020-07-15 0
4:07:
43] waiting for changes...
...rance: 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: #
4d
4d
4d; } @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 #
4d
4d
4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border...
...And 6 more matches
Chrome registration
prior to firefox
4, files in the components directory were registered automatically.
...prior to firefox
4, files in the components directory were registered automatically.
...see bug 323
455.
...And 6 more matches
Gecko Keypress Event
gecko 1.9 key handling changed significantly after beta 5 (bug 359638, bug
429510 and the bugs on which they depend).
... the charcode value depends on the state of capslock and numlock (except they are currently ignored if alt (option) is down on mac - see bug
432953).
...e.g., ctrl+shift+'2' on persian keyboard layout inputs a zwnj, though shift+'2' inputs '@', and so, if gecko were to replace the charcode in this case, users would not be able to input zwnj (bug
41
4130).
...And 6 more matches
powermetrics
the following is example output from such an invocation: *** sampled system activity (fri sep
4 17:15:1
4 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 27
4.83 120.35 221.7
4 firefox 8
4627 77.59 55.55 15.37 2.59 91.
4...
...2
42.12 20
4.
47 plugin-container 8
4628 377.22 37.18
43.91 18.56 178.65 75.85 17.29 terminal 69
4 9.86 79.9
4 0.00 0.00
4.39 2.20 0.00 powermetrics 8
469
4 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 8
4688 181.57 92.81 0.00 0.00 23.95 12.77 0.00 google chrome 8
4681 57.26 76.07
4.39 0.00 23.75 12.97 0.00 google chrome helper 8
4685 0.13
48.08 0.00 0.
...00 0.
40 0.20 0.00 kernel_coalition 1 128.6
4 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 56.
48 26.65 com.apple.webkit.webcontent 8
4679 6
4.21 8
4.69 0.00 0.00 10
4.19 5
4.89 26.66 com.apple.webkit.networking 8
4678 26.89 58.89 0.
40 0.00 1.60 0.00 0.00 safari 8
4676 1.56 ...
...And 6 more matches
JSS FAQ
does jss have 6
4 bit support?
...most attention for future development and bug fixing will go to jdk 1.
4 and later, so use that if you can.
...for jss 3.2 and higher, if you use jdk 1.
4 or higher you will not need to install the jce, but if you using an earlier version of the jdk then you will also have to install jce 1.2.1.
...And 6 more matches
Using JSS
for example, the nspr library is called nspr
4.dll or libnspr
4.dll on windows and libnspr
4.so on solaris.
... jss dependencies core library name description binary release location nspr
4 nspr os abstraction layer http://ftp.mozilla.org/pub/mozilla.org/nspr/releases plc
4 nspr standard c library replacement functions plds
4 nspr data structure types nss3 nss crypto, pkcs #11, and utilities http://ftp.mozilla.org/pub/mozilla.org/security/nss/releases ssl3 nss ssl library smime3 nss s/mime functions and types nssckbi pkcs #11 module containing built-in root ca certificates.
...for example, although jss
4.2 was tested with nss 3.11.
...And 6 more matches
NSS_3.11.10_release_notes.html
nss 3.11.10 requires nspr
4.7.1.
...the tar.gz or zip file expands to an nss-3.11.10 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr
4.7.1 binary distributions to get the nspr
4.7.1 header files and shared libraries, which nss 3.11.10 requires.
... nspr
4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v
4.7.1/.
...And 6 more matches
NSS environment variables
before 3.0 nss_allow_weak_signature_alg boolean (any non-empty value to enable) enables the use of md2 and md
4 inside signatures.
...nss_memory_allocation 3.
4 nss_disable_unload string (any non-empty value) disable unloading of dynamically loaded nss shared libraries during shutdown.
... 3.
4 nss_strict_nofork string ("1", "disabled", or any other non-empty value) it is an error to try to use a pkcs#11 crypto module in a process before it has been initialized in that process, even if the module was initialized in the parent process.
...And 6 more matches
NSS tools : pk12util
pk12util supports two types of databases: the legacy security databases (cert8.db, key3.db, and secmod.db) and new sqlite databases (cert9.db, key
4.db, and pkcs11.txt).
... 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 1
4 - pkcs12 decoder start error o 15 - error read from import file o 16 - 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 erro...
...r o 23 - get default cert db error o 2
4 - find cert by nickname error o 25 - create export context error o 26 - 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).
...And 6 more matches
NSS tools : signtool
by default, it produces only rsa certificates with 102
4-byte keys in the internal token.
...for more information about the use of the -g option, see "generating test object-signing certificates""generating test object-signing certificates" on page 12
41.
...for information on using the -m option to verify fips-1
40-1 validated mode, see "netscape signing tool and fips-1
40-1".
...And 6 more matches
Animated PNG graphics
it is intended to be a replacement for simple animated images that have traditionally used the gif format, while adding support for 2
4-bit images and 8-bit transparency.
... chunk sequence numbers the 'fctl' and 'fdat' chunks have a
4 byte sequence number.
...
4 num_plays unsigned int the number of times to loop this apng.
...And 6 more matches
nsIVariant
inherits from: nsisupports last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) method overview acstring getasacstring(); native code only!
... print6
4 getasint6
4(); native code only!
... pruint6
4 getasuint6
4(); native code only!
...And 6 more matches
Standard OS Libraries
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, 6
4bit) 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 6
4 bit support, solaris x86, mac os x (via darwin) as well as other platforms like os/2 and cygwin.
... there are updates that happen to x11; at the time of this writing, the latest version is
4.
4.0.
...And 6 more matches
Working with ArrayBuffers
we start with the following: // pixelbuffer is a pointer to a rgba pixel buffer of
400x
400 image.
... pixelbuffer.tostring(); // "ctypes.uint8_t.ptr(ctypes.uint6
4("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(6
40000)([
45, 66, 135, 255, 99, 86, 55, 255, ..........
...And 6 more matches
Migrating from Firebug - Firefox Developer Tools
the devtools do not have a side panel like the command editor (which is requested in bug 11338
49), but therefore has a separate tool called scratchpad, which can be added as panel to the toolbox or opened in a separate window via firefox menu > developer > scratchpad or shift + f
4.
...it is currently missing the preview for html, xml and svg, though, which is tracked in bug 12
47392 and bug 1262796, 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 1067318 and bug 815
46
4.
...And 6 more matches
Guide to the Fullscreen API - Web APIs
let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp
4"></source> </video> we can put that video into full-screen mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it.
... prefixing note: currently, only firefox 6
4 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 6
4 full support 6
4 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 6 more matches
HTMLImageElement.srcset - Web APIs
for example, to provide an image resource to be used when the renderer needs a
450 pixel wide image, use the width descriptor string
450w.
...all of the following are valid image candidate strings: "images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 20
48w" this string provides versions of an image to be used at the standard pixel density (1x) as well as double that pixel density (2x).
... also available is a version of the image for use at a width of 20
48 pixels (20
48w).
...And 6 more matches
IDBFactory - Web APIs
// moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version
4 of our database var dbopenrequest = window.indexeddb.open("todolist",
4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { console.error("error loading database."); }; dbopenrequest.onsuccess = function(event) { console.info("database initialised."); // store the result of opening the database in the db varia...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbfactorychrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitcmpchrome full support 2
4 ...
...And 6 more matches
NotificationEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnotificationevent experimentalchrome full support
42edge full support ≤18firefox full support
44notes full support
44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie ?
... webview android no support nochrome android full support
42firefox android full support
44opera android full support 37safari ios ?
... samsung internet android full support
4.0notificationevent() constructor experimentalchrome full support
42edge full support ≤18firefox full support
44notes full support
44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie ?
...And 6 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
const viewerstartposition = vec3.fromvalues(0, 0, -10); const viewerstartorientation = vec3.fromvalues(0, 0, 1.0); const cubeorientation = vec3.create(); const cubematrix = mat
4.create(); const mousematrix = mat
4.create(); const inverseorientation = quat.create(); const radians_per_degree = math.pi / 180.0; the first two—viewerstartposition and viewerstartorientation—indicate where the viewer will be placed relative to the center of the space, and the direction in which they'll initially be looking.
...tionmatrix: gl.getuniformlocation(shaderprogram, 'uprojectionmatrix'), 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=15756593512
44'); xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); if (session_type == "immersive-vr") { refspacetype = "local"; } else { refspacetype = "viewer"; } mat
4.fromtranslation(cubematrix, viewerstartposition); vec3.copy(cubeorientation, viewerstartorientation); xrsession.requestre...
... the glmatrix library's fromtranslation() function for
4x
4 matrices is used to convert the viewer's start position as given in the viewerstartposition constant into a transform matrix.
...And 6 more matches
Example and tutorial: Simple synth keyboard - Web APIs
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: 1
4px "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; right: 0; display: table-cell; vertical-align: midd...
... function createnotetable() { let notefreq = []; for (let i=0; i< 9; i++) { notefreq[i] = []; } notefreq[0]["a"] = 27.500000000000000; notefreq[0]["a#"] = 29.13523509
4880619; notefreq[0]["b"] = 30.867706328507756; notefreq[1]["c"] = 32.70319566257
4829; notefreq[1]["c#"] = 3
4.6
47828872109012; notefreq[1]["d"] = 36.7080959896759
45; notefreq[1]["d#"] = 38.890872965260113; notefreq[1]["e"] =
41.203
44461
41087
41; notefreq[1]["f"] =
43.653528929125
485; notefreq[1]["f#"] =
46.2
4930283895
4299; notefreq[1]["g"] =
48.999
429
497718661; notefreq[1]["g#"]...
... = 51.913087197
4931
42; notefreq[1]["a"] = 55.000000000000000; notefreq[1]["a#"] = 58.270
470189761239; notefreq[1]["b"] = 61.735
412657015513; ...
...And 6 more matches
Using CSS transforms - CSS: Cascading Style Sheets
able> <tbody> <tr> <th><code>perspective: 250px;</code> </th> <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> ...
...</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 pers650"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">
4</div> ...
... html <section> <figure> <caption><code>perspective-origin: top left;</code></caption> <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> </figure> <figure> <caption><code>perspective-origin: top;</code></caption> <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 ...
...And 6 more matches
scroll-snap-type - CSS: Cascading Style Sheets
ltr</div> <div>2</div> <div>3</div> <div>
4</div> <div>5</div> </div> <div class="container x proximity-scroll-snapping" dir="ltr"> <div>x prox.
... ltr</div> <div>2</div> <div>3</div> <div>
4</div> <div>5</div> </div> <div class="container y mandatory-scroll-snapping" dir="ltr"> <div>y mand.
... ltr</div> <div>2</div> <div>3</div> <div>
4</div> <div>5</div> </div> <div class="container y proximity-scroll-snapping" dir="ltr"> <div>y prox.
...And 6 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:6
4rem; 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.09716599190283
40080971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to b...
...k; } there are a number of properties that also need to be set for all elements within the video controls: .controls > * { float:left; width:3.90625%; 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%.
...each image was then converted to a base6
4 encoded string (using an online base6
4 image encoder), since the images are quite small, the resultant encoded strings are quite short.
...And 6 more matches
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
relatedyear the string used for the related
4-digit gregorian year, in the event that the calendar's representation would be a yearname instead of a year, for example "2019".
... second the string used for the second, for example "07" or "
42".
... examples datetimeformat outputs localized, opaque strings that cannot be manipulated directly: var date = date.utc(2012, 11, 17, 3, 0,
42); var formatter = new intl.datetimeformat('en-us', { weekday: 'long', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', fractionalseconddigits: 3, hour12: true, timezone: 'utc' }); formatter.format(date); // "monday, 12/17/2012, 3:00:
42.000 am" however, in many user interfaces there is a desire to customize the forma...
...And 6 more matches
Intl - JavaScript
a single locale may be specified by either an intl.locale object or a string that is a unicode bcp
47 locale identifier.
... multiple locales may be specified (and a best-supported locale determined by evaluating each of them in order and comparing against the locales supported by the implementation) by passing an array (or array-like object, with a length property and corresponding indexed elements) whose elements are either intl.locale objects or values that convert to unicode bcp
47 locale identifier strings.
... a unicode bcp
47 locale identifier consists of a language code, (optionally) a script code, (optionally) a region (or country) code, (optionally) one or more variant codes, and (optionally) one or more extension sequences, with all present components separated by hyphens.
...And 6 more matches
Object initializer - JavaScript
syntax let o = {} let o = {a: 'foo', b:
42, c: {}} let a = 'foo', b =
42, c = {} let o = {a: a, b: b, c: c} let o = { property: function (parameters) {}, get property() {}, set property(value) {} }; new notations in ecmascript 2015 please see the compatibility table for support for these notations.
... // shorthand property names (es2015) let a = 'foo', b =
42, c = {}; let o = {a, b, c} // shorthand method names (es2015) let o = { property(parameters) {} } // computed property names (es2015) let prop = 'foo' let o = { [prop]: 'hey', ['b' + 'ar']: 'there' } description an object initializer is an expression that describes the initialization of an object.
...the values of these keys are a string "bar", the number
42, and another object.
...And 6 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 6
4-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, float6
4 and so forth.
...t8array 0 to 255 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 255 1 8-bit unsigned integer (clamped) octet uint8_t int16array -32768 to 32767 2 16-bit two's complement signed integer short int16_t uint16array 0 to 65535 2 16-bit unsigned integer unsigned short uint16_t int32array -21
47
4836
48 to 21
47
4836
47
4 32-bit two's complement signed integer long int32_t uint32array 0 to
429
4967295
4 32-bit unsigned integer unsigned long uint32_t float32array 1.2×10-38 to 3.
4×1038
4 32-bit ieee floating point number (7 significant digits e.g., 1.123
456) unrestricted float float float6
4array 5.0×10-32
4 to 1.8×10308 ...
...And 6 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/msvc6.0/winnt5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries.
...in my case it's c:\apps\nss-3.11.
4\ get netscape portable runtime 1.
...for windows you'll want the nspr-
4.6.zip package in the v
4.6/winnt5.0_opt.obj/ folder.
...And 5 more matches
Table Cellmap - Archive of obsolete content
83 union { 8
4 nstablecellframe* morigcell; 85 long mbits; 86 }; 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.
... <table> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell
4</td></tr> </table> this would create a cellmap with two rows and in each row 2 entries.
... take the same table and adder a header <table> <thead> <tr><td>head cell 1</td><td>head cell 2</td></tr> </thead> <tbody> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell
4</td></tr> </tbody> </table> now we have two different rowgroups and and the rowspans can not cross the borders between the different rowgroups.
...And 5 more matches
Using gdb on wimpy computers - Archive of obsolete content
ozilla_five_home=/home/blizzard/src/mozilla/mozilla/dist/bin ld_library_path=/home/blizzard/src/mozilla/mozilla/dist/bin shlib_path=/home/blizzard/src/mozilla/mozilla/dist/bin libpath=/home/blizzard/src/mozilla/mozilla/dist/bin moz_program=./mozilla-bin moz_toolkit= moz_debug=1 moz_debugger= /usr/bin/gdb ./mozilla-bin -x /tmp/mozargs22288 gnu gdb 1999100
4 copyright 1998 free software foundation, inc.
...(gdb) b main breakpoint 1 at 0x80
4ec
45: file nsapprunner.cpp, line 811.
... (gdb) r starting program: /home/blizzard/src/mozilla/mozilla/dist/bin/./mozilla-bin breakpoint 1, main (argc=1, argv=0xbffff89
4) at nsapprunner.cpp:811 811 installunixsignalhandlers(argv[0]); (gdb) set auto-solib-add 0 (gdb) c continuing.
...And 5 more matches
Introduction - Archive of obsolete content
« previousnext » basic syntax with e
4x enabled, basic xml elements are valid syntax for variables.
... for instance var element = <foo/>; is perfectly valid in an e
4x enabled browser.
... var element3 = <foo baz="1"/>; manipulating elements the goal of e
4x was to provide an easier way for javascript programmers to manipulate an xml document, without going through the dom interfaces.
...And 5 more matches
ECMAScript 2015 support in Mozilla - Archive of obsolete content
in august 201
4, the ecmascript 2015 draft specification was feature frozen and went through a stabilization and bug fixing period.
... additions to the array object array iteration with for...of (firefox 13) array.from() (firefox 32) array.of() (firefox 25) array.prototype.fill() (firefox 31) array.prototype.find(), array.prototype.findindex() (firefox 25) array.prototype.entries(), array.prototype.keys() (firefox 28), array.prototype.values() array.prototype.copywithin() (firefox 32) get array[@@species] (firefox
48) new map and set objects, and their weak counterparts map (firefox 13) map iteration with for...of (firefox 17) map.prototype.foreach() (firefox 25) map.prototype.entries() (firefox 20) map.prototype.keys() (firefox 20) map.prototype.values() constructor argument: new map(null) (firefox 37) monkey-patched set() in constructor (firefox 37) get map[@@species] (fire...
...fox
41) set (firefox 13) set iteration with for...of (firefox 17) set.prototype.foreach() (firefox 25) set.prototype.entries(), set.prototype.keys(), set.prototype.values() (firefox 2
4) constructor argument: new set(null) (firefox 37) monkey-patched add() in constructor (firefox 37) get set[@@species] (firefox
41) weakmap (firefox 6) weakmap.clear() (firefox 20) optional iterable argument in weakmap constructor (firefox 36) constructor argument: new weakmap(null) (firefox 37) monkey-patched set() in constructor (firefox 37) weakset (firefox 3
4) constructor argument: new weakset(null) (firefox 37) monkey-patched add() in constructor (firefox 37) new math functions math.imul() (firefox 20) math.clz32() (firefox ...
...And 5 more matches
Accessible multimedia - Learn web development
here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp
4" type="video/mp
4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... here is a <a href="rabbit320.mp
4">link to the video</a> instead.</p> </video> the controls attribute provides play/pause buttons, seek bar, etc.
... basic setup first, grab a copy of our custom-controls-start.html, custom-controls.css, rabbit320.mp
4, and rabbit320.webm files and save them in a new directory on your hard drive.
...And 5 more matches
create fancy boxes - Learn web development
if it's not a square, we'll get an ellipsis rather than a circle ;) */ width :
4em; height :
4em; /* and let's turn the square into a circle */ border-radius: 100%; } yes, we get a circle: backgrounds when we talk about a fancy box, the core properties to handle that are background-* properties.
...i want to be fancy.</div> okay, let's have fun with backgrounds: .fancy { padding : 1em; width: 100%; height: 200px; box-sizing: border-box; /* at the bottom of our background stack, let's have a misty grey solid color */ background-color: #e
4e
4d9; /* we stack linear gradients on top of each other to create our color strip effect.
... as you will notice, color gradients are considered to be images and can be 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%, #b
4b07f 90%), linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b
4b07f 92%), linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%), linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%), linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9
499 80%), linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9
499 86%), linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa
4 ...
...And 5 more matches
Styling lists - Learn web development
ing 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 16px (1em) and a padding-left of
40px (2.5em.) the list items (<li> elements) have no set defaults for spacing.
... 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 16px (1em), the same as the different list types.
... rule
4 sets the same line-height on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines.
...And 5 more matches
Styling Vue components with CSS - Learn web development
{ 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: #
4d
4d
4d; -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 si...
... update your app.vue file’s <style> element so it looks like so: <style> /* global styles */ .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #
4d
4d
4d; cursor: pointer; text-transform: capitalize; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-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 > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top:...
...And 5 more matches
Understanding client-side JavaScript frameworks - Learn web development
this article will explore the main features of “the big
4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.
... react tutorials note: react tutorials last tested in may 2020, with react/reactdom 16.13.1 and create-react-app 3.
4.1.
...
4.
...And 5 more matches
Simple Thunderbird build
hardware requirements at least
4 gb of ram.
...do not copy mapi.h, it is already in c:\program files (x86)\windows kits\10\include\10.0.1713
4.0\um\mapi.h.
... as of april 2019, 10.0.1713
4.0 is needed to compile thunderbird.
...And 5 more matches
Performance best practices for Firefox front-end engineers
historically, there hasn't been an easy way of doing this - however, bug 1
43
4376 has recently landed some chromeonly helpers to the window binding to make this simpler.
...these gotchas should be fixed by bug 1
441173.
...bug 1
441168 tracks work to make it impossible to modify the dom within a promisedocumentflushed callback.
...And 5 more matches
BloatView
== bloatview: all (cumulative) leak and bloat statistics, tab process 1862 |<----------------class--------------->|<-----bytes------>|<----objects---->| | | per-inst leaked| total rem| 0 |total | 17 2
48
4|253953338 38| 17 |asynctransactiontrackersholder |
40
40| 1059
4 1| 78 |compositorchild |
472
472| 1 1| 79 |condvar | 2
4 48| 3086 2| 279 |messagepump | 8 8| 30 1| 285 |mutex | ...
... 20 60| 89987 3| 302 |pcompositorchild |
412
412| 1 1| 308 |pimagebridgechild |
416
416| 1 1| the first line tells you the pid of the leaking process, along with the type of process.
... byte bloats name file date blank blank.txt tue aug 29 1
4:17:
40 2000 mozilla mozilla.txt tue aug 29 1
4:18:
42 2000 yahoo yahoo.txt tue aug 29 1
4:19:32 2000 netscape netscape.txt tue aug 29 1
4:20:1
4 2000 the numbers do not include malloc 'd data such as string contents.
...And 5 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 # 21
47
483662 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]--> 0x7f0899b
4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 21
47
483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
... known edges: 0x7f08975a2
4c0 [fragmentorelement (xhtml) head https://www.example.com] --[mattrsandchildren[i]]--> 0x7f0882fe3230 0x7f08967e7b20 [js object (htmlscriptelement)] --[unwrapdomobject(obj)]--> 0x7f0882fe3230 the first two lines mean that the script element 0x7f0882fe3230 contains a strong reference to the eventlistenermanager 0x7f0899b
4e550.
...And 5 more matches
NSS 3.12.9 release notes
nss 3.12.9 requires nspr
4.8.7.
... you also need to download the nspr
4.8.7 binary distributions to get the nspr
4.8.7 header files and shared libraries, which nss 3.12.9 requires.
... nspr
4.8.7 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v
4.8.7/.
...And 5 more matches
NSS 3.21 release notes
nss 3.21 requires nspr
4.10.10 or newer.
... nss 3.21 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_rtm/src/ security fixes in nss 3.21 bug 1158
489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
... new in nss 3.21 new functionality certutil now supports a --rename option to change a nickname (bug 11
42209) tls extended master secret extension (rfc 7627) is supported (bug 1117022) new info functions added for use during mid-handshake callbacks (bug 108
4669) new functions in nss.h nss_optionset - sets nss global options nss_optionget - gets the current value of nss global options in secmod.h secmod_createmoduleex - create a new secmodmodule structure from module name string, module parameters string, nss specific parameters string, and nss configuration parameter string.
...And 5 more matches
SpiderMonkey Internals
the representation is 6
4 bits and uses nan-boxing on all platforms, although the exact nan-boxing format depends on the platform.
... nan-boxing is a technique based on the fact that in ieee-75
4 there are 2**53-2 different bit patterns that all represent nan.
... on x6
4 and similar 6
4-bit platforms, pointers are longer than 32 bits, so we can't use the nunboxing format.
...And 5 more matches
Secure Development Guidelines
bits maximum value that can be represented data type 8 28-1 255 char 16 216-1 65535 short 32 232-1
429
4967295 int 6
4 26
4-1 18
4467
44073709551615 long long integer overflows/underflows example of an integer overflow int main() { unsigned int foo = 0xffffffff; printf(“foo: 0x%08x\r\n”, foo); foo++; printf(“foo: 0x%08x\r\n”, foo); } integer overflows/underflows example of an integer underflow int main() { unsigned int foo = 0; ...
...s: 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 16 signed short -32768 - +32767 unsigned short 0 - +65535 32 signed int -21
47
4836
48 - +21
47
4836
47 unsigned int 0 - +
429
4967295 6
4 signed long long -922337203685
4775808 - +922337203685
4775807 unsigned long long 0 - +18
4467
44073709551615 int vuln_funct(int size) { char buf[102
4]; if (size > sizeof(buf) - 1) return -1; } signedness issues: don’t mix signed and unsigned integers use unsigned integers fo...
... most memory allocators use a linked list or binary tree bbv: off-by-one the array index starts at 0 not at 1 char array[102
4]; array[0] = first element!
...And 5 more matches
A Web PKI x509 certificate primer
generate the key using the following command: openssl genpkey -algorithm rsa -out key.pem -pkeyopt rsa_keygen_bits:20
48 20
48 is considered secure for the next
4 years.
...write extensions file by creating a new file with name openssl.ss.cnf with the following contents: basicconstraints = ca:false subjectaltname =dns:www.example.com extendedkeyusage =serverauth
4.
... steps to generate your ca root certificate: generate key "openssl genpkey -algorithm rsa -out rootkey.pem -pkeyopt rsa_keygen_bits:
4096"
4096 is considered secure for the next 15 years.
...And 5 more matches
Places Developer Guide
accessing bookmarks and related items accessing item properties for all items: string getitemtitle(aitemid) - returns an item's title int6
4 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 int6
4 getfolderidforitem(aitemid) - r...
... string getitemguid(aitemid) obsolete since gecko 1
4.0 - returns a globally unique identifier for the item.
... for bookmarks: nsiuri getbookmarkuri(aitemid) - returns the uri of a bookmark item string getkeywordforbookmark(aitemid) - returns a bookmark's keyword, or null for folders: int6
4 getchildfolder(afolderid, asubfoldertitle) - returns the id of the first subfolder matching the given title.
...And 5 more matches
XPCOM glue
as described in bug 29966
4, the preprocessor symbol xpcom_glue_use_nspr needs to be defined.
... dependent glue standalone glue compiler flags: cross-platform #include "xpcom-config.h" #include "xpcom-config.h" #define xpcom_glue windows /fi "xpcom-config.h" linux -include "xpcom-config.h" linker flags: windows for older versions of the firefox sdk: -libpath:c:/path/to/sdk/lib xpcomglue_s.lib xpcom.lib nspr
4.lib for recent versions of the firefox sdk (at least version
42, but possibly earlier versions as well): -libpath:c/path/to/sdk/lib xpcomglue_s.lib xul.lib nss3.lib mozcrt.lib -libpath:c:/path/to/sdk/lib xpcomglue.lib mac -l/path/to/sdk/lib -l/path/to/sdk/bin -wl,-executable-path,/path/to/sdk/bin -lxpcomglue_s -lxpcom -lnspr
4 when building against a xulrunne...
...r derived sdk, use: -l/path/to/sdk/lib -l/path/to/xulrunner-bin -wl,-executable_path,/path/to/xulrunner-bin -lxpcomglue_s -lxpcom -lnspr
4 where 'xulrunner-bin' is either /library/frameworks/xul.framework/versions/current/ or /path/to/xulrunner-build/[platform]/dist/bin -l/path/to/sdk/lib -lxpcomglue linux -l/path/to/sdk/lib -l/path/to/sdk/bin -wl,-rpath-link,/path/to/sdk/bin -lxpcomglue_s -lxpcom -lnspr
4 write it exactly as stated, see notes.
...And 5 more matches
nsIDragService
inherits from: nsisupports last changed in gecko
43 (firefox
43 / thunderbird
43 / seamonkey 2.
40) note: using this interface directly from add-on code is deprecated.
... void firedrageventatsource(in unsigned long amsg); obsolete since gecko
43 void firedrageventatsource(in mozilla::eventmessage aeventmessage); native code only!
... dragdrop_action_link
4 the drag and drop operation should link the object.
...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 initfrombase6
4().
...you can also get a base-6
4-encoded string containing a copy of the container's serialized data, using getdataasbase6
4().
... method overview nsivariant deserializetovariant(); astring getdataasbase6
4(); void initfrombase6
4(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
Network request list - Firefox Developer Tools
starting in firefox
45, the timeline also contains two vertical lines: the blue line marks the point at which the page's domcontentloaded event is triggered.
... status-code:30
4 method shows resources that have were requested via the specific http request method.
... remote-ip:63.2
45.215.53 remote-ip:[2
400:cb00:20
48:1::6810:2802] cause shows resources matching a specific cause type.
...And 5 more matches
BudgetService - Web APIs
opera full support
42safari ?
... opera android full support
42safari ios ?
... opera full support
42safari ?
...And 5 more matches
Using images - Web APIs
data urls allow you to completely define an image as a base6
4 encoded string of characters directly in your code.
... var img = new image(); // create new img element img.src = 'data:image/gif;base6
4,r0lgodlhcwalaiaaaaaa3pn/zih5baeaaaealaaaaaalaasaaaiuha+hkcuo
4lmnvindo7qyrixigbyaow=='; 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="150" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { for (var i = 0; i <
4; i++) { for (var j = 0; j < 3; j++) { ctx.drawimage(img, j * 50, i * 38, 50, 38); } } }; img.src = 'https://udn.realityripple.com/samples/db/f37
4e9c6fc.jpg'; } the resulting canvas looks like this: screenshotlive sample slicing the third and last variant of the drawimage() method has eight parameters in addition to the image source.
...And 5 more matches
DOMMatrix - Web APIs
the dommatrix interface represents
4×
4 matrices, suitable for 2d and 3d operations including rotation and translation.
... m11, m12, m13, m1
4, m21, m22, m23, m2
4, m31, m32, m33, m3
4, m
41, m
42, m
43, m
44 double-precision floating-point values representing each component of a
4×
4 matrix, where m11 through m1
4 are the first column, m21 through m2
4 are the second column, and so forth.
... a, b, c, d, e, f double-precision floating-point values representing the components of a
4×
4 matrix which are required in order to perform 2d rotations and translations.
...And 5 more matches
EXT_texture_compression_rgtc - Web APIs
the ext_texture_compression_rgtc extension is part of the webgl api and exposes
4 rgtc compressed texture formats.
... constants the compressed texture formats are exposed by
4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
... ext.compressed_red_rgtc1_ext each
4x
4 block of texels consists of 6
4 bits of unsigned red image data.
...And 5 more matches
PushEvent - Web APIs
message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new self.notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/0
4/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'pushevent' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushevent experimentalchrome full support
42edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.
... full support 17firefox 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 37safari no support nowebview android no support nochrome android full support
42firefox android full support
44 full support
44 ...
...And 5 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,
460).
...er" type="x-shader/x-vertex"> attribute vec2 avertexposition; uniform vec2 uscalingfactor; uniform vec2 urotationvector; void main() { vec2 rotatedposition = vec2( avertexposition.x * urotationvector.y + avertexposition.y * urotationvector.x, avertexposition.y * urotationvector.y - avertexposition.x * urotationvector.x ); gl_position = vec
4(rotatedposition * uscalingfactor, 0.0, 1.0); } </script> the main program shares with us the attribute avertexposition, which is the position of the vertex in whatever coordinate system it's using.
...since we're drawing a solid, untextured object with no lighting applied, this is exceptionally simple: <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec
4 uglobalcolor; void main() { gl_fragcolor = uglobalcolor; } </script> this starts by specifying the precision of the float type, as required.
...And 5 more matches
Writing a WebSocket server in Java - Web APIs
this server conforms to rfc 6
455, so it only handles connections from chrome version 16, 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.base6
4; 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.ou...
... you must, obtain the value of sec-websocket-key request header without any leading and trailing whitespace link it with "258eafa5-e91
4-
47da-95ca-c5ab0dc85b11" compute sha-1 and base6
4 code of it write it back as value of sec-websocket-accept response header as part of a http response.
...And 5 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 36+.
...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: #
431236; } 100% { color: #000; transform: rotate(360deg) 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: '#
431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects.
...And 5 more matches
WindowOrWorkerGlobalScope.btoa() - Web APIs
the windoworworkerglobalscope.btoa() method creates a base6
4-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 base6
4 representation of stringtoencode.
... base6
4, by design, expects binary data as its input.
...And 5 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
timeouts throttled to ≥
4ms in modern browsers, settimeout()/setinterval() calls are throttled to a minimum of once every
4 ms when successive calls are triggered due to callback nesting (where the nesting level is at least a certain depth), or after certain number of successive intervals.
... note: the minimum delay, dom_min_timeout_value, is
4 ms (stored in a preference in firefox: dom.min_timeout_value), with a dom_clamp_timeout_nesting_level of 5.
... note:
4 ms is specified by the html5 spec and is consistent across browsers released in 2010 and onward.
...And 5 more matches
font-weight - CSS: Cascading Style Sheets
syntax /* single values */ font-weight: normal; font-weight: bold; font-weight:
400; /* multiple values */ font-weight: normal bold; font-weight: 300 500; the font-weight property is described using any one of the values listed below.
...same as
400.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300,
400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
...And 5 more matches
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: a
4; size: b5; size: jis-b
4; size: letter; /* mixing size and orientation */ size: a
4 portrait; values auto the user agent decides the size of the page.
... <page-size> a5 this matches the standard, iso dimensions: 1
48mm x 210mm.
... a
4 this matches the standard, iso dimensions: 210mm x 297mm.
...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.
46%; } .span_10 { width: 83%; } .span_9 { width: 7
4.5
4%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width:
49.16%; } .span_5 { width:
40.7%; } .span_
4 { width: 32.2
4%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section ...
... center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 1
4px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b
4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-...
...none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 3
4px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 3
4px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b
4a; } body { max-width: 1000px; margin: 0 auto;...
...And 5 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
.wrapper > p { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d9
480f; max-width: 300px; } <div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </div> writing modes in gr...
...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 #f76707; border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .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> <div class="item2">item 2</div> <div class="item3">ite...
...m 3</div> <div class="item
4">item
4</div> <div class="item5">item 5</div> </div> if we add writing-mode: vertical-lr to the grid container, we can see that the block and inline axis are now running in a different direction.
...And 5 more matches
Stacking context example 1 - CSS: Cascading Style Sheets
inside div #1 there is an absolutely positioned div #2, while in div #3 there is an absolutely positioned div #
4, both without z-index properties.
... then if div #
4 is also assigned a positive z-index greater than div #2's z-index, it is rendered above all the other divs including div #2.
... in this last example you can see that div #2 and div #
4 are not siblings, because they belong to different parents in the html elements' hierarchy.
...And 5 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.
... so, div #
4 is under div #1, because div #
4 belongs to div #3, which has a lower z-index value.
...And 5 more matches
Using CSS transitions - CSS: Cascading Style Sheets
color; transition-duration: 2s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration:
4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-durat...
...ion:
4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:
4s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:
4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; ...
... transition-duration:
4s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-timing-function specifies a function to define how intermediate values for properties are computed.
...And 5 more matches
font-variant - CSS: Cascading Style Sheets
the possible values are: jis78, jis83, jis90, jis0
4, simplified, traditional, full-width, proportional-width, ruby.
...ues> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ]<feature-value-name> = <custom-ident><numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis0
4 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small">firefox rocks!</p> css p.normal { font-variant: normal; } p.small { font-variant: small-caps; } result specifications specification status comment css fonts m...
...foxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variantchrome full support 1edge full support 12firefox full support 1ie full support
4opera full support 3.5safari full support 1webview android full support 1chrome android full support 18firefox android full support
4opera android full support...
...And 5 more matches
text-overflow - CSS: Cascading Style Sheets
css value direction: ltr direction: rtl expected result live result expected result live result visible overflow 123
4567890 123
4567890 098765
4321 123
4567890 text-overflow: clip 123
4567890 123
4567890 text-overflow: '' 123
45 123
4567890 5
4321 123
4567890 text-overflow: ellipsis 123
4… 123
4567890 …
4321 123
4567890 text-overflow: '.' 123
4.
... 123
4567890 .
4321 123
4567890 text-overflow: clip clip 123
456 123
4567890 65
4321 123
4567890 text-overflow: clip ellipsis 123
4… 123
4567890 65
43… 123
4567890 text-overflow: clip '.' 123
4.
... 123
4567890 65
43.
...And 5 more matches
<button>: The Button element - HTML: Hypertext Markup Language
setting autocomplete="off" on the button disables this feature; see bug 65
4072.
... example <button name="favorite"> <svg aria-hidden="true" viewbox="0 0 10 10"><path d="m7 9l5 8 3 9v6l1
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.
...| the paciello group mdn understanding wcag, guideline
4.1 explanations understanding success criterion
4.1.2 | w3c understanding wcag 2.0 size and proximity size interactive elements such as buttons should provide an area large enough that it is easy to activate them.
...And 5 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
let's look at an example; here we've set minimum and maximum date/time values, and also made the field required: <form> <div> <label for="party">choose your preferred party date and time (required, june 1st 8.30am to june 30th
4.30pm):</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30" required> <span class="validity"></span> </div> <div> <input type="submit" value="book party!"> </div> </form> if you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error.
...with a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates and times, for example: ddmmyyyy dd/mm/yyyy mm/dd/yyyy dd-mm-yyyy mm-dd-yyyy mm-dd-yyyy hh:mm (12 hour clock) mm-dd-yyyy hh:mm (2
4 hour clock) etc.
...for example, try viewing the following demo in a non-supporting browser: <form> <div> <label for="party">choose your preferred party date and time (required, june 1st 8.30am to june 30th
4.30pm):</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30" pattern="[0-9]{
4}-[0-9]{2}-[0-9]{2}t[0-9]{2}:[0-9]{2}" required> <span class="validity"></span> </div> <div> <input type="submit" value="book party!"> </div> <input type="hidden" id="timezone" name="timezone" value="-08:00"> </form> if you try submitting it, you'll see that t...
...And 5 more matches
<input type="email"> - HTML: Hypertext Markup Language
the example below creates a 32 character-wide e-mail address entry box, requiring that the contents be no shorter than 3 characters and no longer than 6
4 characters.
... <input type="email" size="32" minlength="3" maxlength="6
4"> providing default options as always, you can provide a default value for an email input box by setting its value attribute: <input type="email" value="default@example.com"> offering suggested values taking it a step farther, you can provide a list of default options from which the user can select by specifying the list attribute.
... <input type="email" size="
40" list="defaultemails"> <datalist id="defaultemails"> <option value="jbond007@mi6.defence.gov.uk"> <option value="jbourne@unknown.net"> <option value="nfury@shield.org"> <option value="tony@starkindustries.com"> <option value="hulk@grrrrrrrr.arg"> </datalist> with the <datalist> element and its <option>s in place, the browser will offer the specified values as potential values for the e-mail a...
...And 5 more matches
<input type="time"> - HTML: Hypertext Markup Language
appearance chrome and opera in chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 2
4-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component.
... 12-hour 2
4-hour chrome 83 in chrome 83, the ui controls have been updated with a new look and feel.
... 2
4-hour firefox firefox's time control is very similar to chrome's, except that it doesn't have the up and down arrows.
...And 5 more matches
<textarea> - HTML: Hypertext Markup Language
recommendation html
4.01 specificationthe definition of '<textarea>' in that specification.
...ckground-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.opera android full support yessafari ios full support yesnotes full support yesnotes notes unlike other major browsers, a default style of opacity: 0.
4 is applied to disabled <textarea> elements.samsung internet android full support yesautocapitalize non-standardchrome no support noedge no support nofirefox no support noie no support ...
... support nosafari ios no support nosamsung internet android no support noautofocuschrome full support yesedge full support 12firefox full support
4ie full support 10opera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support ...
...And 5 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
en('get', url); xhr.onreadystatechange = somehandler; xhr.send(); this performs a simple exchange between the client and the server, using cors headers to handle the privileges: let's look at what the browser will send to the server in this case, and let's see how the server responds: get /resources/public-data/ http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.1
4; rv:71.0) gecko/20100101 firefox/71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example the request header of note is origin, which shows that the invocation is coming from https://foo.example.
...the first exchange is the preflight request/response: options /doc http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.1
4; rv:71.0) gecko/20100101 firefox/71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: http://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type http/1.1 20
4 no content date: mon, 01 dec 2008 01:15:39 gmt server: apache/2 acce...
...ss-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: 86
400 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.1
4; rv:71.0) gecko/20100101 firefox/71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive x-pingother: pingpong content-type: text/xml; charset=utf-8 referer: https://foo.example/examples/preflightinvocation.html content-length: 55 origin: https://foo.example pragma: no-...
...And 5 more matches
HTTP resources and specifications - HTTP
t transfer protocol (http/1.1): message syntax and routing proposed standard rfc 7231 hypertext transfer protocol (http/1.1): semantics and content proposed standard rfc 7232 hypertext transfer protocol (http/1.1): conditional requests proposed standard rfc 7233 hypertext transfer protocol (http/1.1): range requests proposed standard rfc 723
4 hypertext transfer protocol (http/1.1): caching proposed standard rfc 5861 http cache-control extensions for stale content informational rfc 82
46 http immutable responses proposed standard rfc 7235 hypertext transfer protocol (http/1.1): authentication proposed standard rfc 6265 http state management mechanism defines cookies p...
...roposed 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 21
45 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 3986 uniform resource identifier (uri): generic syntax internet standard rfc 5988 web linking defines the link hea...
... proposed standard rfc 7239 forwarded http extension proposed standard rfc 6
455 the websocket protocol proposed standard rfc 52
46 the transport layer security (tls) protocol version 1.2 this specification has been modified by subsequent rfcs, but these modifications have no effect on the http protocol.
...And 5 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 6
4kb in size).
...the following example creates a new webassembly memory instance with an initial size of 10 pages (6
40kib), and a maximum size of 100 pages (6.
4mib).
... 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
...And 5 more matches
WebAssembly.Module - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0module() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support ...
...
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0customsectionschrome full support ...
...And 5 more matches
Strict mode - JavaScript
ment to a non-writable global or property, assignment to a getter-only property, assignment to a new property on a non-extensible object) will throw in strict mode: 'use strict'; // assignment to a non-writable global var undefined = 5; // throws a typeerror var infinity = 5; // throws a typeerror // assignment to a non-writable property var obj1 = {}; object.defineproperty(obj1, 'x', { value:
42, writable: false }); obj1.x = 9; // throws a typeerror // assignment to a getter-only property var obj2 = { get x() { return 17; } }; obj2.x = 5; // throws a typeerror // assignment to a new property on a non-extensible object var fixed = {}; object.preventextensions(fixed); fixed.newprop = 'ohai'; // throws a typeerror third, strict mode makes attempts to delete undeletable properties throw...
... (where before the attempt would simply have no effect): 'use strict'; delete object.prototype; // throws a typeerror fourth, strict mode prior to gecko 3
4 requires that all properties named in an object literal be unique.
...duplicate property names are a syntax error in strict mode: this is no longer the case in ecmascript 2015 (bug 10
41128).
...And 5 more matches
Digital video concepts - Web media technologies
since the color data is being encoded at a lower resolution than the luma, when decoding the video to draw it to the screen each pixel's color is computed by calculating an appropriate color given the u and v values for the
4x2 block of 8 pixels in which the pixel resides.
... the first number specifies the number of luminance samples per row encoded from the
4x2 pixel block.
... this value is essentially always
4, meaning "use all of the luminance samples." the second number specifies how many chroma samples are used to represent the colors of the pixels in the first row.
...And 5 more matches
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.18
4.216.3
4.
...the first chunk of content is usually 1
4kb of data.
... in our example above, the request is definitely less than 1
4kb, but the linked resources aren't requested until the browser encounters the links during parsing, described below.
...And 5 more matches
d - SVG: Scalable Vector Graphics
formula: pn = {xo + dx, yo + dy} examples 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,10 h 10 m 0,10 h 10 m 0,10 h 10 m
40,20 h 10 m 0,10 h 10 m 0,10 h 10 m 0,10 h 10 m 50,50 h 10 m-20,10 h 10 m-20,10 h 10 m-20,10 h 10" /> </svg> lineto path commands lineto instructions draw a straight line from the current point (po; {xo, yo}) to the end point (pn; {xn, yn}), based on the parameters specified.
...g { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- lineto commands with absolute coordinates --> <path fill="none" stroke="red" d="m 10,10 l 90,90 v 10 h 50" /> <!-- lineto commands with relative coordinates --> <path fill="none" stroke="red" d="m 110,10 l 80,80 v -80 h -
40" /> </svg> cubic bézier curve cubic bézier curves are smooth curve definitions using four points: starting point (current point) (po = {xo, yo}) end point (pn = {xn, yn}) start control point (pcs = {xcs, ycs}) (controls curvature near the start of the curve) end control point (pce = {xce, yce}) (controls curvature near the end of the curve) after drawing, the end point (pn) b...
...="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- cubic bézier curve with absolute coordinates --> <path fill="none" stroke="red" d="m 10,90 c 30,90 25,10 50,10 s 70,90 90,90" /> <!-- cubic bézier curve with relative coordinates --> <path fill="none" stroke="red" d="m 110,90 c 20,0 15,-80
40,-80 s 20,80
40,80" /> <!-- highlight the curve vertex and control points --> <g id="controlpoints"> <!-- first cubic command control points --> <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> <circle cx="30" cy="90" r="1.5"/> <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> <circle cx="25" cy="10" r="1.5"/> <!-- second smooth comm...
...And 5 more matches
Paths - SVG: Scalable Vector Graphics
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 c 20 20,
40 20, 50 10" stroke="black" fill="transparent"/> <path d="m 70 10 c 70 20, 110 20, 110 10" stroke="black" fill="transparent"/> <path d="m 130 10 c 120 20, 180 20, 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, 1...
...80 80, 170 60" stroke="black" fill="transparent"/> <path d="m 10 110 c 20 1
40,
40 1
40, 50 110" stroke="black" fill="transparent"/> <path d="m 70 110 c 70 1
40, 110 1
40, 110 110" stroke="black" fill="transparent"/> <path d="m 130 110 c 120 1
40, 180 1
40, 170 110" stroke="black" fill="transparent"/> </svg> the example above creates nine cubic bézier curves.
... <svg width="190" height="160" 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 5 more matches
ui/button/toggle - Archive of obsolete content
you can attach panels to buttons by passing the button as the position option to the panel's show() method or the panel's constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var panels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "6
4": "./icon-6
4.png" }, onchange: handlechange }); var panel = panels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { panel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } disabling buttons you can disable a button by setting its disabled...
...initially the buttons in all tabs and windows will display the label value inherited from the global state: browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my default" t
4 > displays "my default" if you then set a label specific to t3 as "my t3 label", then set a label state specific to w2 as "my w2 label", then the button displayed when t3 is the active tab will still show "my t3 label", but the button displayed when t
4 is the active tab will show "my w2 label": browser: label = "my default" w1 t1 > displays "my default" ...
... t2 > displays "my default" w2 t3 > displays "my t3 label" t
4 > displays "my w2 label" setting the properties on the button instance sets the button's global state: button.label = "my new label"; you can set state to be specific to a window or tab using the button's state() method.
...And 4 more matches
package.json - Archive of obsolete content
it looks like this (assuming the add-on's directory is "my-addon"): { "name": "my-addon", "title": "my-addon", "id": "jid1-1fergv
45e
4f
4f@jetpack", "description": "a basic add-on", "author": "", "license": "mpl-2.0", "version": "0.1" } if you are using the new jpm tool, you can easily access manifest data from package.json by requiring it like any other module: var title = require("./package.json").title; key reference package.json may contain the following keys: author the name of the package's ...
... the icon may be up to
48x
48 pixels in size.
...jpm looks for the sizes 6
4,
48 and 32.
...And 4 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
on onclick="return something.send_request({foo: 1}, something.callback)">send {foo: 1} with callback</button> <button onclick="return something.send_request({baz: 3}, something.callback)">send {baz: 3} with callback</button> <button onclick="return something.send_request({mozilla: 3})">send {mozilla: 3} without callback</button> <button onclick="return something.send_request({firefox:
4}, something.callback)">send {firefox:
4} with callback</button> </body> </html> overlay on browser.xul in your extension: var something = { listen_request: function(callback) { // analogue of chrome.extension.onrequest.addlistener document.addeventlistener("something-query", function(event) { var node = event.target; if (!node || node.nodetype != node.text_node) ret...
...vent("htmlevents"); event.initevent("something-response", true, false); return node.dispatchevent(event); }); }, false, true); }, callback: function(request, sender, callback) { if (request.foo) { return settimeout(function() { callback({bar: 2}); }, 1000); } if (request.baz) { return settimeout(function() { callback({quux:
4}); }, 3000); } if (request.mozilla) { return alert("alert in chrome"); } return callback(null); } } something.listen_request(something.callback); message passing in chromium sending structured data the above mechanisms use element attributes and are thus only strings.
... with element attributes and e
4x, this is fairly easy.
...And 4 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
netscape communicator
4.x does not support xpinstall.
...examples would be flash 6r
47 on windows, which consists of a dll (called npswf32.dll) and an xpt file for scriptability (called flashplayer.xpt).
...for those familiar with netscape communicator
4.x's smartupdate technology, this will be a familiar idea.
...And 4 more matches
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="w
4.html"/> </hbox> here, four iframes have been created and a splitter has been placed in-between the first and second one.
...in this case, frame
4 will change size.
... frames 2 and 3 will only change size if you drag the splitter far enough to the right that frame
4 has reached its minimum size.
...And 4 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_stylesheet
4 indicates a stylesheet (for example, <style> elements).
... type_font 1
4 indicates a font loaded via @font-face rule.
...And 4 more matches
New in JavaScript - Archive of obsolete content
firefox
4 was the last version which referred to a javascript version (1.8.5).
... javascript 1.2 version shipped in netscape navigator
4.0-
4.05.
... javascript 1.3 version shipped in netscape navigator
4.06-
4.7x.
...And 4 more matches
Images in HTML - Learn web development
returning to our example, we could do this: <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="
400" height="3
41"> this doesn't result in much difference to the display, under normal circumstances.
...in our example, we could do this: <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="
400" height="3
41" title="a t-rex on display in the manchester university museum"> this gives us a tooltip on mouse hover, just like link titles: however, this is not recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse (so e.g.
...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/5a13bd1
4f6.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.
...And 4 more matches
Command line options
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.
... may not be applicable in older ubuntu for firefox 20 and later, confirmed to work in 1
4.0
4.
...does not work in firefox 31 on linux mint 17 nor on firefox
48 on windows 7.
...And 4 more matches
Creating a Language Pack
x-testing: changed: 6 missinginfiles: 612
4 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-i686/xpi or linux-x86_6
4 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 6
4 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.m...
...And 4 more matches
How to get a stacktrace with WinDbg
(you'll want the 32-bit version, even if you are using a 6
4-bit version of windows) then install it, the standard settings in the installation process are fine.
...this may take some time depending on your connection speed; the total size of the mozilla and microsoft symbols download is around 1.
4gb.
... faq q: i am running windows 7 (32-bit or 6
4-bit) and i see an exception in the windbg command window that says 'ntdll32!ldrpdodebuggerbreak+0x2c' or 'ntdll32!ldrpdodebuggerbreak+0x30'.
...And 4 more matches
MathML Demo: <mtable> - tables and matrices
1 22 333
4444 x 55555 666666 a b c 7777777 11 ...--- , cols arg is "|r|c|l|", \hline's above and below.
... 1 22 333
4444 x 55555 lim n→∞ f-1 ⋃ i=1 n ai rowspan=2 here xn + yn n columnspan=2 here 7777777 11 ...--- , columnlines="solid", rowlines="dashed solid dashed".
... 1 22 333
4444 55555 x + 1 666666 a b c 7777777 11 cols arg is"r|c:l".
...And 4 more matches
About NSPR
hoare in monitors: an operating system structuring concept , communications of the acm, 17(10), october 197
4 and then formalized by xerox' mesa programming language ("mesa language manual", j.g.
...the goal in this area is to provide a migration path between ipv
4 and ipv6.
... 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 ipv
4 or ipv6.
...And 4 more matches
Optimizing Applications For NSPR
windows 3.1 does not support 6
4 bit file offsets.
... the nspr 6
4 bit file offset apis map to windows 3.1 32 bit file offset apis.
... you may use nspr's 6
4bit file offset apis in your windows 3.1 applications for cross platform consistency, but do not expect to see real 6
4 bit file offset behavior.
...And 4 more matches
NSS 3.16.3 release notes
nss 3.16.3 requires nspr
4.10.6 or newer.
... notable changes in nss 3.16.3 the following 102
4-bit ca certificates were removed cn = entrust.net secure server certification authority sha1 fingerprint: 99:a6:9b:e6:1a:fe:88:6b:
4d:2b:82:00:7c:b8:5
4:fc:31:7e:15:39 cn = gte cybertrust global root sha1 fingerprint: 97:81:79:50:d8:1c:96:70:cc:3
4:d8:09:cf:79:
44:31:36:7e:f
4:7
4 ou = valicert class 1 policy validation authority sha1 fingerpr...
...int: e5:df:7
4:3c:b6:01:c
4:9b:98:
43:dc:ab:8c:e8:6a:81:10:9f:e
4:8e ou = valicert class 2 policy validation authority sha1 fingerprint: 31:7a:2a:d0:7f:2b:33:5e:f5:a1:c3:
4e:
4b:57:e8:b7:d8:f1:fc:a6 ou = valicert class 3 policy validation authority sha1 fingerprint: 69:bd:8c:f
4:9c:d3:00:fb:59:2e:17:93:ca:55:6a:f3:ec:aa:35:fb additionally, the following ca certificate was removed as requested by the ca ou = tdc internet root ca sha1 fingerprint: 21:fc:bd:8e:7f:6c:af:05:1b:d1:b3:
43:ec:a8:e7:61:
47:f2:0f:8a the following ca certificates were added cn = certification authority of wosign sha1 fingerprint: b9:
42:9
4:bf:91:ea:8f:b6:
4b:e6:10:97:c7:fb:00:13:59:b6:76:cb cn = ca 沃通根证�...
...And 4 more matches
NSS 3.22 release notes
nss 3.22 requires nspr
4.11 or newer.
... pseudorandom functions based on hashes other than sha-1 are now supported with pbkdf (bug 55
4827).
... pk11_createpbev2algorithmid() now supports sec_oid_pkcs5_pbkdf2 with cipheralgtag and prfalgtag set to sec_oid_hmac_sha256, sec_oid_hmac_sha22
4, sec_oid_hmac_sha38
4, or sec_oid_hmac_sha512.
...And 4 more matches
NSS 3.23 release notes
nss 3.23 requires nspr
4.12 or newer.
... notable changes in nss 3.23 the copy of sqlite shipped with nss has been updated to version 3.10.2 (bug 123
4698) the list of tls extensions sent in the tls handshake has been reordered to increase compatibility of the extended master secret with servers (bug 12
436
41) the build time environment variable nss_enable_zlib has been renamed to nss_ssl_enable_zlib (bug 12
43872).
... the following ca certificates were removed cn = staat der nederlanden root ca sha-256 fingerprint: d
4:1d:82:9e:8c:16:59:82:2a:f9:3f:ce:62:bf:fc:de:26:
4f:c8:
4e:8b:95:0c:5f:f2:75:d0:52:35:
46:95:a3 cn = netlock minositett kozjegyzoi (class qa) tanusitvanykiado sha-256 fingerprint: e6:06:dd:ee:e2:ee:7f:5c:de:f5:d9:05:8f:f8:b7:d0:a9:f0:
42:87:7f:6a:17:1e:d8:ff:69:60:e
4:cc:5e:a5 cn = netlock kozjegyzoi (class a) tanusitvanykiado sha-256 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:f6:67 cn = netlock uzleti (class b) tanusitvany...
...And 4 more matches
NSS 3.28 release notes
nss 3.28 requires netscape portable runtime (nspr)
4.13.1 or newer.
... this includes a number of improvements to tls 1.3: the signed certificate timestamp, used in certificate transparency, is supported in tls 1.3 (bug 12527
45).
... nss will now detect the presence of tokens that support additional elliptic curves and enable those curves for use in tls (bug 13036
48).
...And 4 more matches
NSS 3.35 release notes
nss 3.35 requires nspr
4.18, or newer.
...this includes a large number of changes since 3.3
4, which supported only draft -18.
... sql: the newer file format, based on sqlite, using filenames cert9.db, key
4.and and pkcs11.txt.
...And 4 more matches
Enc Dec MAC Output Public Key as CSR
#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 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define default_key_bits 102
4 #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 "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #define iv_header "-----begin...
... "-----begin pub key -----" #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.
... } if (ctxenc != null) { pk11_destroycontext(ctxenc, pr_true); } return rv; } /* * decrypt and verify mac */ secstatus decryptandverifymac(prfiledesc *outfile, prfiledesc *infile, unsigned int infilelength, secitem *citem, secitem *macitem, pk11symkey* ek, pk11symkey* mk, secitem *ivitem, secitem *paditem) { secstatus rv; unsigned char decbuf[6
4]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[6
4]; unsigned int ctextlen; unsigned char newmac[digestsize]; unsigned int newmaclen = 0; unsigned int newptextlen = 0; unsigned int count = 0; unsigned int temp = 0...
...And 4 more matches
Scripting Java
this works just as in java, with the use of the new operator: js> new java.util.date() thu jan 2
4 16: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.1
41592653589793 js> java.lang.math.cos(0) 1 in javascript, unlike java, the method by itself is an ob...
...using the javascript for..in construct, we can print out all these values: js> for (i in f) { print(i) } exists parentfile mkdir tostring wait [
44 others] note that not only the methods of the file class are listed, but also the methods inherited from the base class java.lang.object (like wait).
...for example, if we call overload's method g with two integers we get an error because neither form of the method is closer to the argument types than the other: js> o.g(3,
4) js:"<stdin>", line 2: the choice of java method overload.g matching javascript argument types (number,number) is ambiguous; candidate methods are: class java.lang.string g(java.lang.string,int) class java.lang.string g(int,java.lang.string) see java method overloading and liveconnect 3 for a more precise definition of overloading semantics.
...And 4 more matches
SpiderMonkey 38
it is supported on x86, x86_6
4, and arm architectures.
... js::clonefunctionobject (bug 1088228) interned_string_to_jsid (bug 10
45900) js::construct (bug 1017109) js::createerror (bug 98
40
48) js::falsehandlevalue (bug 959787) js::handlesymbol (bug 6
45
416) js::identifystandardconstructor (bug 9761
48) js::iscallable (bug 1065811) js::isconstructor (bug 1065811) js::mutablehandlesymbol (bug 6
45
416) js::ordinarytoprimitive (bug 1103152) js::propertyspecnameequalsid (bug 1082672) js::propertyspecnameissymbol (bug 1082...
...672) js::propertyspecnametopermanentid (bug 1082672) js::protokeytoid (bug 987669) js::rootedsymbol (bug 6
45
416) js::truehandlevalue (bug 959787) jsconstintegerspec (bug 1066020) jsid_is_symbol (bug 6
45
416) jsid_to_symbol (bug 6
45
416) 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 996785) js_defineconstintegers (bug 1066020) js_getflatstringcharat (bug 103
4627) js_getfunctionscript (bug 106969
4) js_getlatin1flatstringchars (bug 1037869) js_getlatin1internedstringchars (bug 1037869) js_getlatin1stringcharsandlength (bug 1032726) j...
...And 4 more matches
Setting up the Gecko SDK
there is now separate archive with gecko-sdk, just xul-runner-sdk.): linux: http://ftp.mozilla.org/pub/mozi....8.0.
4.tar.bz2 windows: http://ftp.mozilla.org/pub/mozi...vc-1.8.0.
4.zip mac: http://ftp.mozilla.org/pub/mozi...ac-1.8.0.
4.zip note that the version number for the archives above is 1.8.
... the weblock component was built with version 1.
4a, which is no longer available.
... we also link against a number of libraries in the object/library modules line: nspr
4.lib plds
4.lib plc
4.lib embedstring.lib xpcomglue.lib both of these settings are shown below: the last change you need to make to set up the gecko sdk in your project is to change the "use run-time library" setting to "multithreaded dll." since this change is configuration dependent, you must make set the release configuration run-time library to the release multithreaded dll runtime and ...
...And 4 more matches
nsIHttpChannel
this is the address (uri) of the resource from which this channel's uri was obtained (see rfc2616 section 1
4.36).
...the value of nsirequest.status() will be ns_ok even when processing a
40
4 file not found response because such a response may include a message body that (in some cases) should be shown to the user.
... warning: calling setrequestheader(), setreferrerwithpolicy() or setemptyrequestheader() while visiting request headers has undefined behavior until gecko
47 (firefox
47.0 / thunderbird
47.0 / seamonkey 2.
44).
...And 4 more matches
nsIPlacesImportExportService
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1
4.0 (firefox 1
4.0 / thunderbird 1
4.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.
...cesimportexportservice = components.classes["@mozilla.org/import-export-service;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 1
4.0 void importhtmlfromfiletofolder(in nsilocalfile afile, in print6
4 afolder, in boolean aisinitialimport); obsolete since gecko 1
4.0 void importhtmlfromuri(in nsiuri auri, in boolean aisinitialimport); obsolete since gecko 1
4.0 methods backupbookmarksfile() backs up the bookmarks.html file.
... importhtmlfromfile() obsolete since gecko 1
4.0 (firefox 1
4.0 / thunderbird 1
4.0 / seamonkey 2.11) note: this method has been removed; use the bookmarkhtmlutils.jsm javascript code module instead.
...And 4 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 aaes256key, out acstring ahmac256key); 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 agx
4, in acstring agv
4, in acstring ar
4, out acstring aa, out acstring agva, out acstring ara); methods final() perform th...
...ahkdfinfo missing description aaes256key the aes 256 encryption key, in base6
4 representation.
... ahmac256key the 256 bit hmac key, in base6
4 representation.
...And 4 more matches
nsMsgFolderFlagType
[scriptable,uuid(fbe7cba8-31
41-
4c
44-9660-99af6b53f27e)] interface nsmsgfolderflags { /** * @name folder type flags * these flags define the type of folder.
... const nsmsgfolderflagtype mail = 0x0000000
4; /** @} */ /** whether this is a directory: newshosts are always directories; * newsgroups can be directories if we are in ``show all groups'' mode; * mail folders will have this bit if they are really directories, not files.
... const nsmsgfolderflagtype subscribed = 0x000000
40; /// used to be for new newsgroups added by the `check new groups' command.
...And 4 more matches
Using the CSS Painting API - Web APIs
oks 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.
... <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 1
4</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/boxbg.js'...
...); li { background-image: paint(boxbg); --boxcolor: hsla(55, 90%, 60%, 1.0); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); --widthsubtractor: 20; } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); --widthsubtractor:
40; } in our worklet, we can reference those custom properties.
...And 4 more matches
console - Web APIs
outputting a single object the simplest way to use the logging methods is to output a single object: var someobject = { str: "some text", id: 5 }; console.log(someobject); the output looks something like this: [09:27:13.
475] ({str:"some text", id:5}) outputting multiple objects you can also output multiple objects by simply listing them when calling the logging method, like this: var car = "dodge charger"; var someobject = { str: "some text", id: 5 }; console.info("my first car was a", car, ".
...you've called me %d times.", "bob", i+1); } the output looks like this: [13:1
4:13.
481] hello, bob.
...[13:1
4:13.
483] hello, bob.
...And 4 more matches
HTMLMediaElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...And 4 more matches
IDBCursorWithValue - Web APIs
iagram" 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="#d
4dde
4" stroke-width="2px" /><text x="
46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,30 91,25" stroke="#d
4dde
4" fill="none"/><line x1="101" y1="25" x2="131" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top">...
...<rect x="131" y="1" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbcursorwithvaluechrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...And 4 more matches
Intersection Observer API - Web APIs
"10px 20px 30px
40px" (top, right, bottom, left).
...<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(2
45, 170, 1
40); border: 2px solid rgb(201, 126, 17); padding:
4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box
4 { height: 100px; } .label { font: 1
4px "open sans", "arial", sans-serif; position: absolute; margin: 0; background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.7); width: 3em; he...
... 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.
...And 4 more matches
ScreenOrientation - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support 38edge full support 79firefox full support
43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support 38firefox android full support ...
...
43opera android full support 25safari ios no support nosamsung internet android full support 3.0anglechrome full support 38edge full support 79firefox full support
43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support 38fire...
...fox android full support
43opera android full support 25safari ios no support nosamsung internet android full support 3.0lockchrome full support 38edge full support 79firefox full support
43ie no support noopera full support 25safari no support nowebview android full support 38chrome android ...
...And 4 more matches
Screen Orientation API - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support 38edge full support 79firefox full support
43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support 38firefox android full support ...
...
43opera android full support 25safari ios no support nosamsung internet android full support 3.0anglechrome full support 38edge full support 79firefox full support
43ie no support noopera full support 25safari no support nowebview android full support 38chrome android full support 38fire...
...fox android full support
43opera android full support 25safari ios no support nosamsung internet android full support 3.0lockchrome full support 38edge full support 79firefox full support
43ie no support noopera full support 25safari no support nowebview android full support 38chrome android ...
...And 4 more matches
Selection API - Web APIs
full support 9opera full support 9safari full support 1webview android full support 1chrome android full support 18firefox android full support
4notes full support
4notes notes the globaleventhandlers.onselectionchange and globaleventhandlers.onselectstart event handlers are supported as of firefox 52.opera android full support 10.1safari ios full support 1samsung internet android full supp...
... yessafari ios full support yessamsung internet android full support yescontainsnode experimentalchrome full support yesedge full support 12firefox full support
4notes full support
4notes notes before firefox 35, the method didn't throw if node was null.ie no support noopera full support yessafari full support yeswebview android full support ...
... yeschrome android full support yesfirefox android full support
4notes full support
4notes notes before firefox 35, the method didn't throw if node was null.opera android full support yessafari ios full support yessamsung internet android full support yesdeletefromdocument experimentalchrome full support yesedge full support 12firefox full support 55ie ?
...And 4 more matches
WEBGL_compressed_texture_pvrtc - Web APIs
ext.compressed_rgb_pvrtc_
4bppv1_img rgb compression in
4-bit mode.
... one block for each
4×
4 pixels.
... ext.compressed_rgba_pvrtc_
4bppv1_img rgba compression in
4-bit mode.
...And 4 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 possib...
...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 ● rgb565 rgb 5 6 5 ● ● rgba
4 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 ui10 ui10 ui10 ui2 ● srgb8 rg...
...when using a webgl 2 context, the following values are available additionally: gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rg8ui gl.rg16ui gl.rg32ui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_alpha8 gl.rgb5_a1 gl.rgb10_a2 gl.rgba
4 gl.rgba16f gl.rgba32f gl.rgba8ui width a glsizei specifying the width of the texture.
...And 4 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
the oscillator now we can create an oscillatornode and set its wave to the one we've created: function playsweep() { let osc = audioctx.createoscillator(); osc.setperiodicwave(wave); osc.frequency.value =
440; osc.connect(audioctx.destination); osc.start(); osc.stop(audioctx.currenttime + 1); } controlling amplitude this is great, but wouldn't it be nice if we had an amplitude envelope to go with it?
... let sweeplength = 2; function playsweep() { let osc = audioctx.createoscillator(); osc.setperiodicwave(wave); osc.frequency.value =
440; let sweepenv = audioctx.creategain(); sweepenv.gain.cancelscheduledvalues(audioctx.currenttime); sweepenv.gain.setvalueattime(0, audioctx.currenttime); // set our attack sweepenv.gain.linearramptovalueattime(1, audioctx.currenttime + attacktime); // set our release sweepenv.gain.linearramptovalueattime(0, audioctx.currenttime + sweeplength - releasetime); osc.
...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.
...And 4 more matches
WindowOrWorkerGlobalScope.atob() - Web APIs
the windoworworkerglobalscope.atob() function decodes a string of data which has been encoded using base6
4 encoding.
... syntax var decodeddata = scope.atob(encodeddata); parameters encodeddata a binary string contains an base6
4 encoded data.
... exceptions domexception (name: invalidcharactererror) throws if encodeddata is not valid base6
4.
...And 4 more matches
:nth-child() - CSS: Cascading Style Sheets
/* selects the second <li> element in a list */ li:nth-child(2) { color: lime; } /* selects every fourth element among any group of siblings */ :nth-child(
4n) { color: lime; } syntax the nth-child pseudo-class is specified with a single argument that describes a pattern for matching element indices in a list of siblings.
... 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.
...And 4 more matches
Grid template areas - CSS: Cascading Style Sheets
.box1 { grid-area: 1 / 1 /
4 / 2; } what we are doing here when defining all four lines, is defining the area by specifying the lines that enclose that area.
...apper { 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 #f76707; border-radius: 5px; background-color: #fff
4e6; max-width: 9
40px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using this method ...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; max-width: 9
40px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .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 ...
...And 4 more matches
animation-delay - CSS: Cascading Style Sheets
syntax /* single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* multiple animations */ animation-delay: 2.1s,
480ms; values <time> the time offset, from the moment at which the animation is applied to the element, at which the animation should begin.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanimation-delaychrome full support
43 full support
43 full support 3prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12firefox full support 16notes full support 16notes notes befo...
... 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 preference (needs to be set to true).
...And 4 more matches
animation-timing-function - CSS: Cascading Style Sheets
tax /* keyword values */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(
4, end); /* steps function keywords */ animation-timing-function: steps(
4, jump-start); animation-timing-function: steps(10, jump-end); animation-timing-function: steps(20, jump-none); animation-timing-function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* multiple animations */ animation-timing-function: ease, step-start, cubic-bez...
... ease-in equal to cubic-bezier(0.
42, 0, 1.0, 1.0), starts off slowly, with the speed of the transition of the animating properting increasing until complete.
...• ease-in-out equal to cubic-bezier(0.
42, 0, 0.58, 1.0), with the animating properties slowly transitioning, speeding up, and then slowing down again.
...And 4 more matches
conic-gradient() - CSS: Cascading Style Sheets
syntax /* a 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(360, 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.
...there are 360 degrees,
400 gradians, 2π radians, and 1 turn in a circle.
...And 4 more matches
font-size-adjust - CSS: Cascading Style Sheets
for example, a style sheet that specifies: font-size: 1
4px; font-size-adjust: 0.5; ...
... is really specifying that the lowercase letters of the font should be 7px high (0.5 × 1
4px).
... this will still produce reasonable results in browsers that do not support font-size-adjust, where a 1
4px font will be used.
...And 4 more matches
min() - CSS: Cascading Style Sheets
in the first above example, the width will be at most 200px, but will be smaller if the viewport is less than
400px wide (in which case 1vw would be
4px, so 50vw would be 200px).
... mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.
4 | w3c understanding wcag 2.0 examples setting a maximum size for a label and input another use case for css functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks.
... let's look at some css: input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(
40%,
400px); background-color: pink; } form { margin:
4px; border: 1px solid black; padding:
4px; } here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width.
...And 4 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...
...And 4 more matches
matrix3d() - CSS: Cascading Style Sheets
the matrix3d() css function defines a 3d transformation as a
4x
4 homogeneous matrix.
... matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a
4, b
4, c
4, d
4) values a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 are <number>s describing the linear transformation.
... a
4 b
4 c
4 d
4 are <number>s describing the translation to apply.
...And 4 more matches
transition-timing-function - CSS: Cascading Style Sheets
syntax /* keyword values */ transition-timing-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end; /* function values */ transition-timing-function: steps(
4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* steps function keywords */ transition-timing-function: steps(
4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); /* mult...
... ease-in equal to cubic-bezier(0.
42, 0, 1.0, 1.0), starts off slowly, with the transition speed increasing until complete.
...• ease-in-out equal to cubic-bezier(0.
42, 0, 0.58, 1.0), starts transitioning slowly, speeds up, and then slows down again.
...And 4 more matches
Cross-browser audio basics - Developer guides
below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp
4 file instead of mp3.
... mp
4 files typically contain aac encoded audio.
... you can use type="audio/mp
4".
...And 4 more matches
Creating a cross-browser video player - Developer guides
<figure id="videocontainer"> <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp
4" type="video/mp
4"> <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.mp
4" width="102
4" height="576"> <param name="movie" ...
...value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp
4" /> <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.mp
4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="102
4" height="
428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp
4">download mp
4</a> </video> <figcaption>© blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even thoug...
... three different video sources are provided for the player: mp
4, webm, and ogg.
...And 4 more matches
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
<h1>heading level 1</h1> <h2>heading level 2</h2> <h3>heading level 3</h3> <h
4>heading level
4</h
4> <h5>heading level 5</h5> <h6>heading level 6</h6> here is the result of this code: example page the following code shows a few headings with some content under them.
... don't <h1>heading level 1</h1> <h3>heading level 3</h3> <h
4>heading level
4</h
4> do <h1>heading level 1</h1> <h2>heading level 2</h2> <h3>heading level 3</h3> nesting headings may be nested as subsections to reflect the organization of the content of the page.
... most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content: h1 beetles h2 etymology h2 distribution and diversity h2 evolution h3 late paleozoic h3 jurassic h3 cretaceous h3 cenozoic h2 external morphology h3 head h
4 mouthparts h3 thorax h
4 prothorax h
4 pterothorax h3 legs h3 wings h3 abdomen when headings are nested, heading levels may be "skipped" when closing a subsection.
...And 4 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
<video controls> <source src="myvideo.mp
4" type="video/mp
4"> <source src="myvideo.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... here is a <a href="myvideo.mp
4">link to the video</a> instead.</p> </video> we offer a substantive and thorough guide to media file types and the guide to the codecs supported for video.
...hosted by archive.org --> <!-- poster from peach.blender.org --> <video controls src="https://archive.org/download/bigbuckbunny_12
4/content/big_buck_bunny_720p_surround.mp
4" 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_12
4">download it</a> and watch it with your favorite video player!
...And 4 more matches
Evolution of HTTP - HTTP
built over the existing tcp and ip protocols, it consisted of
4 building blocks: a textual format to represent hypertext documents, the hypertext markup language (html).
... at this point, a typical request and response looked like this: get /mypage.html http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 199
4 08:12:31 gmt server: cern/3.0 libwww/2.17 content-type: text/html <html> a page with an image <img src="/myimage.gif"> </html> followed by a second connection and request to fetch the image (followed by a response to that request): get /myimage.gif http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 199
4 08:12:32 gmt server: cern/3.0 libwww/2.17 content-type: text/gi...
...in november 1996, in order to solve these annoyances, an informational document describing the common practices has been published, rfc 19
45.
...And 4 more matches
MIME types (IANA media types) - HTTP
video list at iana video data or files, such as mp
4 movies (video/mp
4).
...examples include multipart/form-data (for data produced using the formdata api) and multipart/byteranges (defined in rfc 7233: 5.
4.1 and used with http's 206 "partial content" response returned when the fetched data is only part of the content, such as is delivered using the range header).
... what to do with content that doesn't have a valid one) allows javascript to be served using any mime type that essentially matches any of the following: application/javascript application/ecmascript application/x-ecmascript application/x-javascript text/javascript text/ecmascript text/javascript1.0 text/javascript1.1 text/javascript1.2 text/javascript1.3 text/javascript1.
4 text/javascript1.5 text/jscript text/livescript text/x-ecmascript text/x-javascript note: even though any given user agent may support any or all of these, you should only use text/javascript.
...And 4 more matches
CSP: script-src - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 or sha512 hash of scripts or styles.
...And 4 more matches
HTTP range requests - HTTP
curl -i http://i.imgur.com/z
4d
4kwk.jpg http/1.1 200 ok ...
... accept-ranges: bytes content-length: 1
46515 in this response, accept-ranges: bytes indicates that bytes can be used as unit to define a range.
...the "-h" option will append a header line to the request, which in this case is the range header requesting the first 102
4 bytes.
...And 4 more matches
Text formatting - JavaScript
caution: if you edit this page, do not include any characters above u+ffff, until mdn bug 857
438 is fixed ( https://bugzilla.mozilla.org/show_bug.cgi?id=857
438 ).
... '\u{2f80
4}' // the same with simple unicode escapes '\ud87e\udc0
4' string objects the string object is a wrapper around the string primitive data type.
...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-16 code units in the string.
...And 4 more matches
Inheritance and the prototype chain - JavaScript
here is what happens when trying to access a property: // let's create an object o from function f with its own properties a and b: let f = function () { this.a = 1; this.b = 2; } let o = new f(); // {a: 1, b: 2} // add properties in f function's prototype f.prototype.b = 3; f.prototype.c =
4; // do not set the prototype f.prototype = {b:3,c:
4}; this will break the prototype chain // o.[[prototype]] has properties b and c.
...// thus, the full prototype chain looks like: // {a: 1, b: 2} ---> {b: 3, c:
4} ---> object.prototype ---> null console.log(o.a); // 1 // is there an 'a' own property on o?
...// this is called property shadowing console.log(o.c); //
4 // is there a 'c' own property on o?
...And 4 more matches
Array.prototype.reduceRight() - JavaScript
some example run-throughs of the function would look like this: [0, 1, 2, 3,
4].reduceright(function(accumulator, currentvalue, index, array) { return accumulator + currentvalue; }); the callback would be invoked four times, with the arguments and return values in each call being as follows: callback accumulator currentvalue index array return value first call
4 3 3 [0, 1, 2, 3,
4] 7 second call 7 2 ...
...2 [0, 1, 2, 3,
4] 9 third call 9 1 1 [0, 1, 2, 3,
4] 10 fourth call 10 0 0 [0, 1, 2, 3,
4] 10 the value returned by reduceright would be that of the last callback invocation (10).
... and if you were to provide an initialvalue, the result would look like this: [0, 1, 2, 3,
4].reduceright(function(accumulator, currentvalue, index, array) { return accumulator + currentvalue; }, 10); callback accumulator currentvalue index array return value first call 10
4 4 [0, 1, 2, 3,
4] 1
4 second call 1
4 3 3 [0, 1, 2, 3,
4] 17 third call 17 2 2 [0, 1, 2, 3,
4] 19 fourth call 19 1 1 [0, 1, 2, 3,
4] 20 fifth call 20 0 0 [0, 1, 2, 3,
4] 20 the value returned by reduceright this time would be, of course, 20.
...And 4 more matches
Array.prototype.map() - JavaScript
// production steps of ecma-262, 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.
... var len = o.length >>> 0; //
4.
... let numbers = [1,
4, 9] let roots = numbers.map(function(num) { return math.sqrt(num) }) // roots is now [1, 2, 3] // numbers is still [1,
4, 9] using map to reformat objects in an array the following code takes an array of objects and creates a new array containing the newly reformatted objects.
...And 4 more matches
Date - JavaScript
it should be noted that the maximum date is not of the same value as the maximum safe integer (number.max_safe_integer is 9,007,199,25
4,7
40,991).
... instead, it is defined in ecma-262 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, 275760 ce) can be represented by the standard date object (equivalent to ±8,6
40,000,000,000,000 milliseconds).
... date.prototype.getfullyear() returns the year (
4 digits for
4-digit years) of the specified date according to local time.
...And 4 more matches
MathML documentation index - MathML
found
40 pages: # page tags and summary 1 mathml landing, mathml, reference, web, xml mathematical markup language (mathml) is a dialect of xml for describing mathematical notation and capturing both its structure and content.
...
4 mathml: deriving the quadratic formula beginner, education, example, guide, html5, mathml, needsbeginnerupdate this page outlines the derivation of the quadratic formula.
... 8 mathml documentation index index, mathml found
40 pages: 9 mathml element reference mathml, mathml reference this is an alphabetical list of mathml presentation elements.
...And 4 more matches
begin - SVG: Scalable Vector Graphics
in="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 --> <text 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> ...
... begin-1-offset.svg syncbase example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" id="first" begin="0s;third.end" dur="
4s" /> </rect> <rect x="60" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="25" id="second" begin="first.end" dur="2s" /> </rect> <rect x="85" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="25" id="third" begin="second.end" dur="2s" /> </rect> <!-- ...
...grid --> <text 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" ...
...And 4 more matches
<feComposite> - SVG: Scalable Vector Graphics
if the arithmetic operation is chosen, each result pixel is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k
4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively k1, k2, k3 and k
4 indicate the values of the attributes with the same name usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes » presen...
...tation attributes » filter primitive attributes » class style specific attributes in in2 operator k1 k2 k3 k
4 dom interface this element implements the svgfecompositeelement interface.
...ode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="arithmeticflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" result="comp" operator="arithmetic" k1=".5" k2=".5" k3=".5" k
4=".5"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="overnoflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="over" result="comp"/> </filter> <filter id="innoflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" h...
...And 4 more matches
Filter effects - SVG: Scalable Vector Graphics
<svg width="250" viewbox="0 0 200 85" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!-- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="
4" result="blur"/> <feoffset in="blur" dx="
4" dy="
4" result="offsetblur"/> <!-- litpaint --> <fespecularlighting in="blur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fecomposite ...
...in="specout" in2="sourcealpha" operator="in" result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k
4="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="m60,56 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"/> <fegaussianblur> takes in "sourcealpha", which is the alpha channel of the source graphic, applies a blur of
4, and stores the result in a temporary buffer named "blur".
...And 4 more matches
Subresource Integrity - Web security
using subresource integrity you use the subresource integrity feature by specifying a base6
4-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 sha256, sha38
4, and sha512), followed by a dash, and ending with the actual base6
4-encoded hash.
... example integrity string with base6
4-encoded sha38
4 hash: sha38
4-oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx
4jwy8wc so oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx
4jwy8wc is the "hash" part, and the prefix sha38
4 indicates that it's a sha38
4 hash.
...And 4 more matches
cfx - Archive of obsolete content
cfx is no longer supported as of firefox
44 and no longer accepted for add-on submission.
...cfx is is no longer supported as of firefox
44 and no longer accepted for add-on submission, jpm should now be used instead.
...but note that the version must be
4.0b7 or later.
...And 3 more matches
JavaScript Daemons Management - Archive of obsolete content
pose.reversals = 2;alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width:
40px;" onkeypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>daemon.buildaround...
...unction () { [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...
...onclick="ounhide.reversals = 2;alert('changed');">two reversals</button> <button onclick="ounhide.makeloop();alert('changed');">makeloop</button> <button onclick="ounhide.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="ounhide.close();">close</button> <button onclick="ounhide.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width:
40px;" onkeypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){ounhide.setrate(this.value);}" /></p> </body> </html> example #3: a safe (without setinterval) instantiation – new daemon.safe() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>new dae...
...And 3 more matches
Case Sensitivity in class and id Names - Archive of obsolete content
summary: although css is itself case-insensitive, class and id names are defined to be case-sensitive in html
4.01.
...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 a detailed explanation of what html
4.01 says, see the following section, "why so case-sensitive?") the only way to avoid this particular problem is to make sure that your class and id names have consistent case throughout the entire document, and with respect to your css and javascript.
...And 3 more matches
Installing Dehydra - Archive of obsolete content
gcc
4.5, with the package gcc-
4.5-plugin-dev installed.
...you can skip the next section "building gcc
4.5" if you are using gcc
4.6 or above.
... building gcc
4.5 for treehydra's process_tree_decl to work, when compiling with g++, you must use a patched gcc
4.5 before building dehydra.
...And 3 more matches
Monitoring downloads - Archive of obsolete content
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.bindint6
4parameter(1, adownload.size); statement.bindint6
4parameter(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.bindint6
4parameter(0, adownload.size); statement.bindint6
4parameter(1, endtime.gettime()); statement.binddoubleparameter(2, adownload.speed); statement.bindint32parameter(3, adownload.state); statement.bindstringparameter(
4, adownload.source.spec); statement.bindint6
4parameter(5, adownload.starttime); statement.execu...
...r cell = document.createelement('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltiptext", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute("label", (statement.getint6
4(1) / 102
4).tofixed(1) + "kb"); // size cell.setattribute("style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint6
4(2) / 1000); // start time cell = document.createelement('listcell'); var datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); thedate = ...
...And 3 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(
4096); var utf8converter = components.classes["@mozilla.org/intl/utf8converterservice;1"].
...this work was done in bug 2950
47.
...using utf-8 for this example: */ "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, 102
4, replacementchar); now you can read string from is: var str = {}; var numchars = is.readstring(
4096, 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(
4096, str) != 0) { processdata(str.value); } don't forget to close the stream when you're done with it (is.close()).
...And 3 more matches
Actionscript Performance Tests - Archive of obsolete content
sunspider) $ ./runtests.py sunspider/*.as sunspider/as3/*.as test avm metric sunspider/access-binary-trees.as 58
4 time sunspider/access-fannkuch.as 36
4 time ...
...interp) $ ./runtests.py --vmargs="-dinterp" sunspider/*.as test avm metric sunspider/access-binary-trees.as 690 time sunspider/access-fannkuch.as
467 time ...
... # to measure memory $ ./runtests.py --memory sunspider/*.as test avm metric sunspider/access-binary-trees.as 2.
4m memory sunspider/access-fannkuch.as 1.5m memory ...
...And 3 more matches
Return Codes - Archive of obsolete content
in mozilla/seamonkey, these constants are defined as part of the xpinstall object (formerly the softwareupdate object in netscape communicator
4.5).
... execution_error -203 an error occurred executing the script no_install_script -20
4 installation script was not signed no_certificate -205 extracted file is not signed or the file (and, therefore, its certificate) could not be found.
... does_not_exist -21
4 the specified file cannot be deleted because it does not exist.
...And 3 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
4.
..._button_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> <!-- mail, message --> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="15"/> </hbox> <!-- composer --> <toolbar id="edittoolbar"> <toolbarbutton id="custom-button-1" position="18"/> </toolbar> <!-- chat --> <menubar id="mainmenu"> <menu id="custom-menu" position="
4" label="custom" accesskey="c"> <menupopup> <menuitem id="custom-item-1" label="custom item 1" accesskey="1" tooltiptext="my custom menu item" oncommand="custombutton[1]()" /> </menupopup> </menu> </menubar> <!-- calendar --> <toolbar id="calendar-bar"> <toolbarbutton id="custom-button-1" position="10"/> </toolbar> <!-- button det...
...paste it into the new file: #custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1s.png");} /* common style for all custom buttons - modern */ #nav-bar .custombutton {-moz-image-region: rect( 0px
41px 39px 0px);} #nav-bar .custombutton:hover {-moz-image-region: rect( 0px 83px 39px
42px);} #nav-bar .custombutton:active {-moz-image-region: rect( 0px 125px 39px 8
4px);} .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 1
47px 72px 98px);} /* common st...
...And 3 more matches
XULRunner 2.0 Release Notes - Archive of obsolete content
xulrunner 2.0.x is built from the same source code snapshot as firefox
4.0.x.
... current version the current version of xulrunner 2.0 is 2.0, matching firefox
4.0 detailed release notes can be found here.
... system requirements before installing, make sure your computer meets the system requirements (nb: that page will change for firefox
4 shipping).
...And 3 more matches
Building a Theme - Archive of obsolete content
create the install manifest open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>sample@example.net</em:id> <em:version>1.0</em:version> <em:type>
4</em:type> <!-- target application this theme can install into, with minimum and maximum supported versions.
... --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-
46
4f-9b0e-13a3a9e9738
4}</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://www.example.com/</em:homepageurl> </description> </rdf> sample@example.net - the id of the extension.
...(example.example.example)
4 - the type of the add-on.
...And 3 more matches
New in JavaScript 1.3 - Archive of obsolete content
the following is a changelog for javascript from netscape navigator
4.0 to
4.5.
...netscape navigator
4.5 was released on october 19, 1998.
... javascript versions netscape communicator and navigator
4.06 and
4.5 executes javascript language versions up to 1.3.
...And 3 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
since i wanted them to be side by side, it was important to be sure the total width of the element boxes (including margins) was less than 50%, so the first step was this: div.card {float: left; width:
45%; margin: 1em 2% 0 2%;} by making the content of each card
45% the width of the containing element, and adding 2% margin to both the left and right sides, each card's element box is
49% as wide as the parent.
... div.card {float: left; width:
45%; margin: 1em 2% 0 2%;} div.card img {float: left; border: 1px solid #339;} that done, it was time to style the fish names.
...thus: div.card {float: left; width:
45%; margin: 1em 2% 0 2%;} div.card img {float: left; margin:
4px 0 0 0; border: 1px solid #339;} div.card h3 {border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} finishing the style adding the background to the heading containing the name of the fish created three problems: the double border was completel...
...And 3 more matches
Writing JavaScript for XHTML - Archive of obsolete content
/*]]>*/--></style> see this document for more on the issues related to application/xhtml+xml and text/html (at least as far as xhtml 1.* and html
4; html5 addresses many of these problems).
... i read about e
4x.
...e
4x is a new method of using and manipulating xml in javascript.
...And 3 more matches
Archived open Web documentation - Archive of obsolete content
znerd 0
4 august 2009 browser detection and cross browser support improper browser detection can lead to web maintenance nightmares.
... e
4x ecmascript for xml (e
4x) is a programming language extension that adds native xml support to javascript.
...a valid alternative to e
4x is a non-native jxon algorithm.
...And 3 more matches
Create the Canvas and draw on it - Game development
rite text editor, create a new html document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev canvas workshop</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="mycanvas" width="
480" height="320"></canvas> <script> // javascript code goes here </script> </body> </html> we have a charset defined, <title> and some basic css in the header.
...the <canvas> element has an id of mycanvas to allow us to easily grab a reference to it, and it is
480 pixels wide and 320 pixels high.
... ctx.beginpath(); ctx.rect(20,
40, 50, 50); ctx.fillstyle = "#ff0000"; ctx.fill(); ctx.closepath(); all the instructions are between the beginpath() and closepath() methods.
...And 3 more matches
Plug-in Development Overview - Gecko Plugin API Reference
for more information about mime types, see these mime rfcs: rfc-20
45: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-20
46: "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.
... the resource code for this language and character set combination is 0
4090
4e
4.
...see bug 125
469.
...And 3 more matches
Introduction to CSS layout - Learn web development
.wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box
4">four</div> <div class="box5">five</div> <div class="box6">six</div> </div> once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above.
... grid example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } .box1 { grid-column: 2 /
4; grid-row: 1; } .box2 { grid-column: 1; grid-row: 1 / 3; } .box3 { grid-row: 2; grid-column: 3; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: these two examples are just a small part of the power of grid layout; to find out more see our grid layout article.
... am a basic block level element.</p> <p class="positioned">this is my relatively positioned element.</p> <p>i am a basic block level element.</p> body { width: 500px; margin: 0 auto; } p { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 10px; border-radius: 5px; } .positioned { position: relative; background: rgba(255,8
4,10
4,.3); border: 2px solid rgb(255,8
4,10
4); top: 30px; left: 30px; } absolute positioning absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.
...And 3 more matches
Beginner's guide to media queries - Learn web development
previous overview: css layout next the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than
480 pixels".
... there are a number of other media features that you can test for, although some of the newer features introduced in level
4 and 5 of the media queries specification have limited browser support.
... use of pointing devices as part of the level
4 specification, the hover media feature was introduced.
...And 3 more matches
Example 1 - Learn web development
ight: 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 : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-...
...adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .
4em .
4em; box-shadow: 0 .2em .
4em rgba(0,0,0,.
4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul ...
...elect .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, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-...
...And 3 more matches
Looping code - Learn web development
note: we have made the condition i < cats.length, not i <= cats.length, because computers count from 0, not 1 — we are starting i at 0, and going up to i =
4 (the index of the last array item).
...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:3
453
456', 'bill:765
4322', 'mary:9998769', 'dianne:938
4975']; 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...
...nt = '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:3
453
456', 'bill:765
4322', 'mary:9998769', 'dianne:938
4975']; 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++) { ...
...And 3 more matches
Client-side storage - Learn web development
next, note how our html references a javascript file called index.js (see line
40).
...tore = db.transaction('videos_os').objectstore('videos_os'); let request = objectstore.get(videos[i].name); request.onsuccess = function() { // if the result exists in the database (is not undefined) if(request.result) { // grab the videos from idb and display them using displayvideo() console.log('taking videos from idb'); displayvideo(request.result.mp
4, request.result.webm, request.result.name); } else { // fetch the videos from the network fetchvideofromnetwork(videos[i]); } }; } } the following snippet is taken from inside fetchvideofromnetwork() — here we fetch mp
4 and webm versions of the video using two separate windoworworkerglobalscope.fetch() requests.
... let mp
4blob = fetch('videos/' + video.name + '.mp
4').then(response => response.blob() ); let webmblob = fetch('videos/' + video.name + '.webm').then(response => response.blob() ); // only run the next code when both promises have fulfilled promise.all([mp
4blob, webmblob]).then(function(values) { // display the video fetched from the network with displayvideo() displayvideo(values[0], values[1], ...
...And 3 more matches
Fetching data from the server - Learn web development
to begin this example, make a local copy of ajax-start.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse
4.txt — in a new directory on your computer.
...note: steps
4 - 9 will all be performed within this function.
...(if you didn't work through the previous exercise, create a new directory and inside it make copies of xhr-basic.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse
4.txt.) inside the updatedisplay() function, find the xhr code: let request = new xmlhttprequest(); request.open('get', url); request.responsetype = 'text'; request.onload = function() { poemdisplay.textcontent = request.response; }; request.send(); replace all the xhr code with this: fetch(url).then(function(response) { response.text().then(function(text) { poemdisplay.
...And 3 more matches
Beginning our React todo list - Learn web development
rance: 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: #
4d
4d
4d; } @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 #
4d
4d
4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-...
...color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #
4d
4d
4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .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: 0; } .stack-small > * + * { ...
...margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.
4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0
4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px
4px 0 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...
...And 3 more matches
Implementing feature detection - Learn web development
if you look at the latter, you'll see a couple of @supports blocks, for example: @supports (flex-flow: row) and (flex: 1) { main { display: flex; } main div { padding-right:
4%; flex: 1; } main div:last-child { padding-right: 0; } } this at-rule block applies the css rule within only if the current browser supports both the flex-flow: row and flex: 1 declarations.
...it looks like this: if (window.matchmedia("(max-width:
480px)").matches) { // run javascript in here.
... } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (
480px wide or less).
...And 3 more matches
Testopia
this is not an trivial task, it takes time (it started in august 201
4), and we decided that it was not a good idea to release half-baked code which still needs testing to make sure we didn't regress anything.
... testopia 2.5 this versions supports bugzilla
4.2 and
4.
4, and the best news is that it no longer requires a patch for bugzilla.
... testopia 2.
4 this version supports bugzilla 3.6.
...And 3 more matches
Creating reftest-based unit tests
if one has software that multiplies numbers, one wants a regression test to show that 2 * 2 continues to be calculated to be
4, not something similar to but not quite exactly
4.
...for example, the html
4.01 specification at the w3c specifies that text inside of a <blockquote> will be indented, but it does not specify the number of pixels of the indentation.
... step 3 create a file named foo.html with the following: <html><head><title>reftest0001</title> <body><strong>hello!</strong></body> </html> step
4 create a file named bar.html with the following: <html><head><title>reftest0001</title> <body><b>hello!</b></body> </html> step 5 create a file named reftest.list with the following: == foo.html bar.html you are now ready to run the test (but first you must go back to the root of firefox's source code tree): $ ./mach reftest path/to/reftest.list 2>&1 | grep reftest reftest pass: f...
...And 3 more matches
gettext
<?php // implement gettext context if (!function_exists('pgettext')) { function pgettext($context, $msgid) { $contextstring = "{$context}\00
4{$msgid}"; $translation = _($contextstring); if ($translation === $contextstring) return $msgid; else return $translation; } function npgettext($context, $msgid, $msgid_plural, $num) { $contextstring = "{$context}\00
4{$msgid}"; $contextstringp = "{$context}\00
4{$msgid_plural}"; $translation = ngettext($contextstring, $contextstringp, $num);...
...$num =
4; printf(n___("%d user likes this.", "%d users like this.", $num, 'another unique context string'), $num); ?> this code produces the following output: a simple string.
...
4 users like this.
...And 3 more matches
Mozilla Port Blocking
background on 08/15/2001, cert issued a vulnerability note vu#
476267 for a "cross-protocol" scripting attack, known as the html form protocol attack which allowed sending arbitrary data to most tcp ports.
..."access to the port number given has been disabled for security reasons." "establishing a connection to an unsafe or otherwise banned port was prohibited" "0x80
4b0013 (ns_error_port_access_not_allowed)" if your product or web site uses a port which is blocked by mozilla's default port blocking rules, you can either change the port of your service to a unblocked value (recommended if possible) or ask your mozilla users to enable the port.
...enabling ports user_pref("network.security.ports.banned.override, "port1,port2"); disabling ports user_pref("network.security.ports.banned", "port3,port
4"); blocked ports ports blocked by default in mozilla: port service 1 tcpmux 7 echo 9 discard 11 systat 13 daytime 15 netstat 17 qotd 19 chargen 20 ftp data 21 ftp control 22 ssh 23 telnet 25 smtp 37 time
42 ...
...And 3 more matches
NSPR Types
es: 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-, 16-, and 32-bit integer types 6
4-bit integer types floating-point number type for convenience, nspr also provides type definitions with platform-dependent bit widths: native os integer types 8-, 16-, and 32-bit integer types signed integers print8 print16 print32 unsigned integers pruint8 pruint16 pruint32 6
4-bit integer types different platforms treat 6
4-bit numeric fields in different ways.
... some systems require emulation of 6
4-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 6
4-bit numeric fields.
...And 3 more matches
NSS Key Log Format
note: starting with nss 3.2
4 (used by firefox
48 and
49 only), the sslkeylogfile approach is disabled by default for optimized builds using the makefile (those using gyp via build.sh are not affected).
...(see bug 1188657.) notably, debian does not have this option enabled, see debian bug 8
42292.
... <clientrandom> is 32 bytes random value from the client hello message, encoded as 6
4 hexadecimal characters.
...And 3 more matches
NSS 3.16 release notes
nss 3.16 requires nspr
4.10.3 or newer.
...(this requires nspr
4.10.
4.) to build for the linux x32 target, set the environment variable use_x32=1 when building nss.
... new macros in sslproto.h tls_rsa_with_rc
4_128_sha, tls_rsa_with_3des_ede_cbc_sha, etc.
...And 3 more matches
NSS 3.28.1 release notes
nss 3.28.1 requires nspr
4.13.1 or newer.
... notable changes in nss 3.28.1 the following ca certificates were removed cn = buypass class 2 ca 1 sha-256 fingerprint: 0f:
4e:9c:dd:26:
4b:02:55:50:d1:70:80:63:
40:21:
4f:e9:
44:3
4:c9:b0:2f:69:7e:c7:10:fc:5f:ea:fb:5e:38 cn = root ca generalitat valenciana sha-256 fingerprint: 8c:
4e:df:d0:
43:
48:f3:22:96:9e:7e:29:a
4:cd:
4d:ca:00:
46:55:06:1c:16:e1:b0:76:
42:2e:f3:
42:ad:63:0e ou = rsa security 20
48 v3 sha-256 fingerprint: af:8b:67:62:a1:e5:28:22:81:61:a9:5d:5c:55:9e:e2:66:27:8f:75:d7:9...
...e:83:01:89:a5:03:50:6a:bd:6b:
4c the following ca certificates were added ou = ac raiz fnmt-rcm sha-256 fingerprint: eb:c5:57:0c:29:01:8c:
4d:67:b1:aa:12:7b:af:12:f7:03:b
4:61:1e:bc:17:b7:da:b5:57:38:9
4:17:9b:93:fa cn = amazon root ca 1 sha-256 fingerprint: 8e:cd:e6:88:
4f:3d:87:b1:12:5b:a3:1a:c3:fc:b1:3d:70:16:de:7f:57:cc:90:
4f:e1:cb:97:c6:ae:98:19:6e cn = amazon root ca 2 sha-256 fingerprint: 1b:a5:b2:aa:8c:65:
40:1a:82:96:01:18:f8:0b:ec:
4f:62:30:
4d:83:ce:c
4:71:3a:19:c3:9c:01:1e:a
4:6d:b
4 cn = amazon root ca 3 sha-256 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:b
4:6d:b3:a
4 cn = amazon root ca
4 sha-256 fingerprint: e3:5d:28:
4...
...And 3 more matches
NSS 3.32 release notes
nss 3.32 requires netscape portable runtime (nspr)
4.16, or newer.
... cn = addtrust class 1 ca root sha-256 fingerprint: 8c:72:09:27:9a:c0:
4e:27:5e:16:d0:7f:d3:b7:75:e8:01:5
4:b5:96:80:
46:e3:1f:52:dd:25:76:63:2
4:e9:a7 cn = swisscom root ca 2 sha-256 fingerprint: f0:9b:12:2c:71:1
4:f
4:a0:9b:d
4:ea:
4f:
4a:99:d5:58:b
4:6e:
4c:25:cd:81:1
4:0d:29:c0:56:13:91:
4c:38:
41 the following ca certificates were removed: cn = addtrust public ca root sha-256 fingerprint: 07:91:ca:07:
49:b2:07:82:aa:d3:c7:d7...
...:bd:0c:df:c9:
48:58:35:8
4:3e:b2:d7:99:60:09:ce:
43:ab:6c:69:27 cn = addtrust qualified ca root sha-256 fingerprint: 80:95:21:08:05:db:
4b:bc:35:5e:
44:28:d8:fd:6e:c2:cd:e3:ab:5f:b9:7a:99:
42:98:8e:b8:f
4:dc:d0:60:16 cn = china internet network information center ev certificates root sha-256 fingerprint: 1c:01:c6:f
4:db:b2:fe:fc:22:55:8b:2b:ca:32:56:3f:
49:8
4:
4a:cf:c3:2b:7b:e
4:b0:ff:59:9f:9e:8c:7a:f7 cn = cnnic root sha-256 fingerprint: e2:83:93:77:3d:a8:
45:a6: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-256 fingerprint: 50:79:
41:c7:
44:60:a0:b
4:70:86:22:0d:
4e:99:32:57:2a:b5:d1:b5:bb:cb:89:80:ab:1c:b1:76:51:a8:
44:d2 cn = geotrust global ca 2 ...
...And 3 more matches
NSS 3.50 release notes
nss 3.50 requires nspr
4.25 or newer.
... note that intel processors with sse
4 but without avx are currently unable to use the improved chacha20/poly1305 due to a build issue; such platforms will fall-back to less optimized algorithms.
...see bug 159951
4 for details.
...And 3 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 <base6
4.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 102
4 /* 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\n\n", progname, " -<g|a|h|e|ds|v> -d <dbdirpath> ", "[-p <dbpwd> | -f <dbpwdfile>] [-z <noisefilename>] [-a <\"\">]", "-s <subject> -r <csr> | ", "-n <nickname> -t <trust> -c <cert> [ -r <csr> -u ...
...f (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[
4096]; 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...
...And 3 more matches
nss tech note5
the rijndael algorithm permits 3 blocksizes (16, 2
4, 32 bytes), but the aes standard requires the blocksize to be 16 bytes.
... the keysize can vary and these keysizes are permitted: 16, 2
4, 32 bytes.
...some of the digest algorithm identifiers are (without the sec_oid_ prefix) : md2, md5, sha1, sha256, sha38
4, sha512.
...And 3 more matches
PKCS #11 Module Specs
rc
4 - this token should be used for all rc
4 operations which are not constrained by an existing key in another token.
... 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,rc
4,rc2,des,md2,md5,sha1,ssl,tls,publiccerts,random'] 0x2=[slotflags='rsa' askpw=only]}" library=dkck32.dll name="datakey signasure 3600" 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 param...
...this value will be truncated at 6
4 bytes (no null, partial utf8 characters dropped).
...And 3 more matches
NSS Tools crlutil
list of possible algorithms: md2 | md
4 | md5 | sha1 | sha256 | sha38
4 | sha512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
... for example: 2005020
4153000z add an extension to a crl or a crl certificate entry: addext extension-name critical/non-critical [arg1[arg2 ...]] where: extension-name: string value of a name of known extensions.
... 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 inv...
...And 3 more matches
Rhino downloads archive
release release date change log download link rhino 1.7r
4 2012-06-18 new in rhino 1.7r
4 rhino1_7r
4.zip rhino 1.7r3 2011-05-09 new in rhino 1.7r3 rhino1_7r3.zip rhino 1.7r2 2009-03-22 new in rhino 1.7r2 rhino1_7r2.zip rhino 1.7r1 2008-03-06 new in rhino 1.7r1 rhino1_7r1.zip rhino 1.6r7 2007-08-20 new in rhino 1.6r7 rhino1_6r7.zip rhino 1.6r6 2007-07-30 new in rhino 1.6r6 rhino1_6r6.zip rhino 1.6r5 2006-11-19 same code as 1.6r
4, but relicensed under mpl/gpl.
... rhino1_6r5.zip rhino 1.6r
4 2006-09-10 bug 3
43976 rhino1_6r
4.zip rhino 1.6r3 2006-07-2
4 changes in 1.6r3 rhino1_6r3.zip rhino 1.6r2 2005-09-19 changes in 1.6r2 rhino1_6r2.zip rhino 1.6r1 200
4-11-29 changes in 1.6r1 rhino1_6r1.zip rhino 1.5r5 200
4-03-25 changes in 1.5r5 rhino1_5r5.zip rhino 1.5r
4.1 2003-0
4-21 changes in 1.5r
4.1 rhino15r
41.zip rhino 1.5r
4 2003-02-10 changes in 1.5r
4 rhino15r
4.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 rhino1
4r3.zip rhino 1.6r1 through 1.6r6 implement e
4x using xmlbeans library.
...And 3 more matches
Property cache
shape native objects have a shape, a 2
4-bit unsigned integer such that: basic layout guarantee — if at time t0 the object x has shape s and at time t1 the object y has shape s, and no shape-regenerating gc occurred, then y at t1 has the same jsclass, jsobjectops, prototype, and property specs as x had at t0.
...see bug
458271 and bug 507231 for example.
... the shape of an object does not cover: anything about the object's prototype other than its identity; anything about the object's parent; obj->freeslot, which can be different for same-shaped objects if they have a jsclass.reserveslots hook (bug 535
416); anything about the values of the object's own properties, beyond what the method guarantee and the branded object guarantee say about functions.
...And 3 more matches
How to build an XPCOM component in JavaScript
{ // if you only need to access your component from javascript, uncomment the following line: //this.wrappedjsobject = this; } // class definition helloworld.prototype = { // properties required for xpcom registration: classdescription: "my hello world javascript xpcom component", classid: components.id("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"), contractid: "@dietrich.ganx
4.com/helloworld;1", // [optional] custom factory (an object implementing nsifactory).
...using the generateqi helper (remove argument if skipped steps above) queryinterface: xpcomutils.generateqi([components.interfaces.nsihelloworld]), // optional, but required if you want your component to be exposed to dom classinfo: xpcomutils.generateci({classid: components.id("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"), contractid: "@dietrich.ganx
4.com/helloworld;1", interfaces: [ci.nsihelloworld], flags: ci.nsiclassinfo.dom_object}), // ...component implementation...
...finally, you create an array of your components to be created: var components = [helloworld]; and replace nsgetfactory/nsgetmodule to use this array and xpcomutils: if ("generatensgetfactory" in xpcomutils) var nsgetfactory = xpcomutils.generatensgetfactory(components); // firefox
4.0 and higher else var nsgetmodule = xpcomutils.generatensgetmodule(components); // firefox 3.x so the total simplified version of your component now looks like (of course documentation and comments aren't a bad thing, but as a template something smaller is nice to have): components.utils.import("resource://gre/modules/xpcomutils.jsm"); function helloworld() { } helloworld.prototype = ...
...And 3 more matches
nsICryptoHash
the hash algorithms supported are md2, md5, sha-1, sha-256, sha-38
4, and sha-512.
... constant value description md2 1 message digest algorithm 2 md5 2 message-digest algorithm 5 sha1 3 secure hash algorithm 1 sha256
4 secure hash algorithm 256 sha38
4 5 secure hash algorithm 38
4 sha512 6 secure hash algorithm 512 methods finish() completes the hash object and produces the actual hash data.
... acstring finish( in prbool aascii ); parameters aascii if true then the returned value is a base-6
4 encoded string.
...And 3 more matches
CountQueuingStrategy - Web APIs
to change preferences in firefox, visit about:config.ie no support noopera full support
46safari ?
...to change preferences in firefox, visit about:config.opera android full support
43safari ios ?
...to change preferences in firefox, visit about:config.ie no support noopera full support
46safari ?
...And 3 more matches
Document - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the docume...
... document.routeevent() obsolete since gecko 2
4 see window.routeevent().
...And 3 more matches
EXT_texture_compression_bptc - Web APIs
the ext_texture_compression_bptc extension is part of the webgl api and exposes
4 bptc compressed texture formats.
... constants the compressed texture formats are exposed by
4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
...each
4x
4 block of texels consists of 128 bits of rgba or image data.
...And 3 more matches
Element - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties...
...in dom
4 they were moved to element.
...And 3 more matches
HTMLImageElement.sizes - Web APIs
buttons at the bottom of the example let you actually modify the sizes property slightly, switching the largest of the three widths for the image between
40em and 50em.
...award-winning stuff, i'm sure.</p> <img src="/files/16870/new-york-skyline-wide.jpg" srcset="/files/16870/new-york-skyline-wide.jpg 372
4w, /files/16869/new-york-skyline-
4by3.jpg 1961w, /files/16871/new-york-skyline-tall.jpg 1060w" sizes="((min-width: 50em) and (max-width: 60em)) 50em, ((min-width: 30em) and (max-width: 50em)) 30em, (max-width: 30em) 20em"> <p>then there's even more amazing stuff to say down here.
...i sure can't.</p> <button id="break
40">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 #880e
4f; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between
40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the relevant portion of the sizes string.
...And 3 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571
428571
428571%; 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" ...
...text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2p...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1=...
...And 3 more matches
Ajax navigation example - Web APIs
break; case 2: // successful 2xx console.log("successful code " + vmsg); break; case 3: // redirection 3xx console.log("redirection code " + vmsg); break; */ case
4: /* client error
4xx */ alert("client error #" + vmsg); break; case 5: /* server error 5xx */ alert("server error #" + vmsg); break; default: /* unknown status */ ajax...
... title: null, url: location.href }, ohttpstatus = /* 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", 20
4: "no content", 205: "reset content", 206: "partial content", 207: "multi-status", 208: "already reported", 226: "im used", 300: "multiple choices", 301: "moved permanently", 302: "found", 303: "see other", 30
4: "not modified", 305: "use proxy", 306: "rese...
...rved", 307: "temporary redirect", 308: "permanent redirect",
400: "bad request",
401: "unauthorized",
402: "payment required",
403: "forbidden",
40
4: "not found",
405: "method not allowed",
406: "not acceptable",
407: "proxy authentication required",
408: "request timeout",
409: "conflict",
410: "gone",
411: "length required",
412: "precondition failed",
413: "request entity too large",
41
4: "request-uri too long",
415: "unsupported media type",
416: "requested range not satisfiable",
417: "expectation failed",
422: "unprocessable entity", ...
...And 3 more matches
IDBObjectStore.name - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...And 3 more matches
IDBTransaction.error - Web APIs
in chrome
48+/firefox 58+ this property returns a domexception because domerror has been removed from the dom standard.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.e...
...And 3 more matches
IDBTransaction.oncomplete - Web APIs
as of firefox
40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers.
...in firefox
40+ the complete event is fired after the os has been told to write the data but potentially before that data has actually been flushed to disk.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...And 3 more matches
Capabilities, constraints, and settings - Web APIs
} else { let constraints = { width: { min: 6
40, ideal: 1920, max: 1920 }, height: { min:
400, ideal: 1080 }, aspectratio: 1.777777778, framerate: { max: 30 }, facingmode: { exact: "user" } }; mytrack.applyconstraints(constraints).then(function() => { /* do stuff if constraints applied successfully */ }).catch(function(reason) { /* failed to apply constraints; reason is why */ }); } here, after ensuring that...
... the constrainable properties for which matches must be found are supported (width, height, framerate, and facingmode), we set up constraints which request a width no smaller than 6
40 and no larger than 1920 (but preferably 1920), a height no smaller than
400 (but ideally 1080), an aspect ratio of 16:9 (1.777777778), and a frame rate no greater than 30 frames per second.
...see firefox bug 117908
4, for example.
...And 3 more matches
SVGCircleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151"...
... y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><p...
...olyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" wi...
...And 3 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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,...
...25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/...
...And 3 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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" ...
...x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</tex...
...t></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y...
...And 3 more matches
WebGLRenderingContext.getActiveUniform() - Web APIs
the type attribute of the return value will be one of the following: gl.float gl.float_vec2 gl.float_vec3 gl.float_vec
4 gl.int gl.int_vec2 gl.int_vec3 gl.int_vec
4 gl.bool gl.bool_vec2 gl.bool_vec3 gl.bool_vec
4 gl.float_mat2 gl.float_mat3 gl.float_mat
4 gl.sampler_2d gl.sampler_cube when using a webgl 2 context, the following values are possible additionally: gl.unsigned_int gl.unsigned_int_vec2 gl.unsigned_int_vec3 gl.unsigned_int_vec
4 gl.float_mat2x3 gl.float_mat2x
4 gl.float_m...
...at3x2 gl.float_mat3x
4 gl.float_mat
4x2 gl.float_mat
4x3 gl.sampler_2d gl.sampler_3d gl.sampler_cube gl.sampler_2d_shadow gl.sampler_2d_array gl.sampler_2d_array_shadow gl.sampler_cube_shadow gl.int_sampler_2d gl.int_sampler_3d gl.int_sampler_cube gl.int_sampler_2d_array gl.unsigned_int_sampler_2d gl.unsigned_int_sampler_3d gl.unsigned_int_sampler_cube gl.unsigned_int_sampler_2d_array when gl.linkprogram is called, webgl creates a list of active uniforms.
... uniform vec
4 a; will result in a.
...And 3 more matches
Creating 3D objects using WebGL - Web APIs
we can pass a lot fewer data around by building an array of all 2
4 vertices, then referring to each vertex by its index into that array instead of moving entire sets of coordinates around.
... if you wonder why we need 2
4 vertices, and not just 8, it is because each corner belongs to three faces of different colors, and a single vertex needs to have a single specific color; therefore we will create three copies of each vertex in three different colors, one for each face.
...this is pretty much the same as it was for the square plane, but somewhat longer since there are 2
4 vertices (
4 per side): const positions = [ // front face -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // back face -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, // top face -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, // bottom face -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1...
...And 3 more matches
Web Authentication API - Web APIs
note most javascript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and
4 are essential to understanding the processing that takes place in the browser and authenticator and what the resulting data means.
...typically, server communications would be rest over https (probably using xmlhttprequest or fetch), but they could also be soap, rfc 25
49 or nearly any other protocol provided that the protocol is secure.
...the publickeycredential is sent back to the server using any desired formatting and protocol (note that the arraybuffer properties need to be be base6
4 encoded or similar).
...And 3 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
this effectively limits delay to 21
47
4836
47 ms, since it's specified as a signed integer in the idl.
...nge the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding:
4px; overflow: auto; font-size: 12px; margin:
4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[ <span class="intlink" on...
...nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> <form> <p>phasellus ac nisl lorem: <input type="text" /><br /> <textarea style="width:
400px; height: 200px;">nullam commodo suscipit lacus non aliquet.
...And 3 more matches
Web accessibility for seizures and physical reactions - Accessibility
@media screen and (prefers-reduced-motion: reduce) { } @media screen and (prefers-reduced-motion) { } to see a great example of how to use the code prefers-reduced-motion, visit the mdn document, prefers-reduced-motion, or see the example below from the section on new in chrome 7
4.
... @media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; /* hat tip nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */ transition-duration: 0.001ms !important; } } from w3.org's page on media queries
4: the update media feature is used to query the ability of the output device to modify the appearance of content once it has been rendered.
... mediaquerylist interface section
4.2 from the csswg.org drafts integrates with the event loop defined in html.
...And 3 more matches
Robust - Accessibility
note: to read the w3c definitions for robust and its guidelines and success criteria, see principle
4: robust — content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
... guideline
4.1 — compatible: maximize compatibility with current and future user agents, including assistive technologies this guideline focuses on making content as compatible as possible, not only with current user agents (e.g.
... success criteria how to conform to the criteria practical resource
4.1.1 parsing (a) content should be well-formed so it can be parsed successfully by browsers and other user agents such as screenreaders.
...And 3 more matches
Understandable - Accessibility
3.1.
4 abbreviations (aaa) where abbreviations are used, you should provide an expansion of them, or a definition as required.
... 3.1.5 reading level (aaa) if text is provided that requires a higher reading level that lower secondary education level (typically children around 11-1
4 years old), provide supplementary explainer material to help people who can't read it, or provide an alternative version that is written at lower secondary level.
... 3.2.
4 consistent identification (aa) controls or components that have the same functionality should be identified in the same way across different pages or views.
...And 3 more matches
:nth-last-child() - CSS: Cascading Style Sheets
/* selects every fourth element among any group of siblings, counting backwards from the last one */ :nth-last-child(
4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-child, except it counts items backwards from the end, not forwards from the beginning.
... 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.
...And 3 more matches
animation-direction - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanimation-directionchrome full support
43 full support
43 full support 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 16 full support 16 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 preference (needs to be set to true).
...prefixed prefixed implemented with the vendor prefix: -webkit- no support 12.1 — 15 no support 12 — 15prefixed prefixed implemented with the vendor prefix: -o-safari full support 9 full support 9 full support
4prefixed prefixed implemented with the vendor prefix: -webkit-webview android full support
43 full support
43 full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support
43...
...And 3 more matches
background-position - CSS: Cascading Style Sheets
4-value syntax: the first and third values are keyword value defining x and y.
... #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* these examples use the `background` shorthand property */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 2.5cm bottom no-repeat; } .exampletwo { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 left
4em bottom 1em no-repeat; } /* multiple background images: each image is matched with the corresponding position, from first specified to last.
...rnet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-positionchrome full support 1edge full support 12firefox full support 1ie full support
4opera full support 3.5safari full support 1webview android full support ≤37chrome android full support 18firefox android full support
4opera android full sup...
...And 3 more matches
background-size - CSS: Cascading Style Sheets
in firefox
43, as opposed to chrome 52, an explicit background-size causes preserveaspectratio to be ignored.
... implemented with the vendor prefix: -webkit-notes webkit-based browsers originally implemented an older draft of css3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.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 ...
...rt 18prefixed notes prefixed implemented with the vendor prefix: -webkit-notes webkit-based browsers originally implemented an older draft of css3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.firefox android full support
4 full support
4 full support
49prefixed prefixed implemented with the vendor prefix: -webkit-opera android full support 10.1 full support 10.1 full support 1
4prefixed notes pr...
...And 3 more matches
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(3
4, 12, 6
4, 0.6); color: rgba(3
4, 12, 6
4, 0.6); color: rgb(3
4 12 6
4 / 0.6); color: rgba(3
4 12 6
4 / 0.3); color: rgb(3
4.0 12 6
4 / 60%); color: rgba(3
4.6 12 6
4 / 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 *...
...in order to meet current web content accessibility guidelines (wcag), a ratio of
4.5:1 is required for text content and 3:1 for larger text such as headings.
... large text is defined as 18.66px and bold or larger, or 2
4px or larger.
...And 3 more matches
<easing-function> - CSS: Cascading Style Sheets
this keyword represents the easing function cubic-bezier(0.
42, 0.0, 1.0, 1.0).
...this keyword represents the easing function cubic-bezier(0.
42, 0.0, 0.58, 1.0).
... steps( n, <direction> ) steps(2, jump-start) steps(2, start) steps(
4, jump-end) steps(
4, end) steps(5, jump-none) steps(3, jump-both) steps-start the equivalent of steps(1, jump-start) steps-end the equivalent of steps(1, jump-end) step-start the animation jumps immediately to its final state, where it stays until the end.
...And 3 more matches
font-style - CSS: Cascading Style Sheets
if an angle is not specified, an angle of 1
4 degrees is used.
... in general, for a requested angle of 1
4 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).
... for the example below to work, you'll need a browser that supports the css fonts level
4 syntax in which font-style: oblique can accept an <angle>.
...And 3 more matches
font - CSS: Cascading Style Sheets
<'font-family'> ] | caption | icon | menu | message-box | small-caption | status-barwhere <font-variant-css21> = [ normal | small-caps ] examples setting font properties /* set the font size to 12px and the line height to 1
4px.
... set the font family to sans-serif */ p { font: 12px/1
4px sans-serif } /* set the font size to 80% of the parent element or default value (if no parent element present).
...onchange="setcss()"> <label for="font-variant-small-caps">small-caps</label> </div> <div class="setpropcont"> font-weight<br/> <input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setcss()"> <label for="font-weight-none">none</label><br/> <input type="radio" id="font-weight-normal" checked="" name="font_weight" value="
400" onchange="setcss()"> <label for="font-weight-normal">normal</label><br/> <input type="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="setcs...
...And 3 more matches
<integer> - CSS: Cascading Style Sheets
during the css3 values cycle there was a lot of discussion about setting a minimum range to support: the latest decision, in april 2012 during the lc phase, was [-227-1; 227-1], but other values like 22
4-1 and 230-1 were also proposed.
... examples valid integers 12 positive integer (without a leading + sign) +123 positive integer (with a leading + sign) -
456 negative integer 0 zero +0 zero, with a leading + -0 zero, with a leading - invalid integers 12.0 this is a <number>, not an <integer>, though it represents an integer.
...\
4e9
4 non-arabic numerals are not allowed, even when escaped (here: the japanese 5, 五).
...And 3 more matches
linear-gradient() - CSS: Cascading Style Sheets
syntax /* a gradient tilted
45 degrees, starting blue and finishing red */ linear-gradient(
45deg, blue, red); /* a gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /* color stop: a gradient going from the bottom to top, starting blue, turning green at
40% of its length, and finishing red */ linear-gradient(0deg, blue, green
4...
...0%, red); /* color hint: a gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-gradient(.25turn, red, 10%, blue); /* multi-position color stop: a gradient tilted
45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue */ linear-gradient(
45deg, red 0 50%, blue 50% 100%); values <side-or-corner> the position of the gradient line's starting point.
...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.
...And 3 more matches
mix-blend-mode - CSS: Cascading Style Sheets
p offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </lineargradient> <lineargradient id="blue"> <stop offset="0" stop-color="hsl(2
40,100%,50%)" /> <stop offset="100%" stop-color="hsl(2
40,0%,100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </...
...eee; } .grid { width: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; height: auto; } .col { display: flex; flex: 1 auto; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; } .note { background: #fff3d
4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { t...
... luminosity; } using mix-blend-mode with html html <div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div> css .circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left:
40px; } .circle-3 { background: blue; left: 20px; top:
40px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position: relative; } result using mix-blend-mode with svg svg <svg> <g class="isolate"> <circle cx="
40" cy="
40" r="
40" fill="red"/> <circle cx="80" cy="
40" r="
40" fill="lightgreen"/> <circle cx="60" cy...
...And 3 more matches
scroll-snap-stop - CSS: Cascading Style Sheets
-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: 6
4px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 256px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 6
4px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } html <div clas...
...ltr </div> <div>2</div> <div>3</div> <div>
4</div> <div>5</div> </div> <div class="container x proximity-scroll-snapping" dir="ltr"> <div>x proximity ltr</div> <div>2</div> <div>3</div> <div>
4</div> <div>5</div> </div> <div class="container y mandatory-scroll-snapping" dir="ltr"> <div>y mand.
... ltr</div> <div>2</div> <div>3</div> <div>
4</div> <div>5</div> </div> <div class="container y proximity-scroll-snapping" dir="ltr"> <div>y prox.
...And 3 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
to make it 25% opaque, you can use "#0000ff
44" or "#00f
4".
... here are some sample colors in hsl notation: table { border: 1px solid black; font: 16px "open sans", helvetica, arial, sans-serif; border-spacing: 0; border-collapse: collapse; } th, td { border: 1px solid black; padding:
4px 6px; text-align: left; } th { background-color: hsl(0, 0%, 75%); } <table> <thead> <tr> <th scope="col">color in hsl notation</th> <th scope="col">example</th> </tr> </thead> <tbody> <tr> <td><code>hsl(90deg, 100%, 50%)</code></td> <td style="background-color: hsl(90deg, 100%, 50%);"> </td> </tr> <tr> <td><code>hsl(90, 100%, 50%)</code></td> <td style="...
... our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties: .box { width: 290px; height: 100px; margin: 0; padding:
4px 6px; font: 28px "marker felt", "zapfino", cursive; display: flex; justify-content: center; align-items: center; } in brief, .box establishes the size of each box, as well as the configuration of the font used within.
...And 3 more matches
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
the <applet> element was removed in gecko 56 and chrome
47.
...the html
4.01 specification defines values of bottom, left, middle, right, and top, whereas microsoft and netscape also might support absbottom, absmiddle, baseline, center, and texttop.
... datafld this attribute, supported by internet explorer
4 and higher, specifies the column name from the data source object that supplies the bound data.
...And 3 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 16, 195
4)</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.
...i like to add a dash of nutmeg.</span> <br> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <span itemprop="ratingvalue">
4.0</span> stars based on <span itemprop="reviewcount">35</span> reviews </span> <br> prep time: <time datetime="pt30m" itemprop="preptime">30 min</time><br> cook time: <time datetime="pt1h" itemprop="cooktime">1 hou</time>r<br> total time: <time datetime="pt1h30m" itemprop="totaltime">1 hour 30 min</time><br> yield: <span itemprop="recipeyield">1 9" pie (8 servings)</span><br> <span ...
...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 3 more matches
lang - HTML: Hypertext Markup Language
the attribute contains a single “language tag” in the format defined in tags for identifying languages (bcp
47).
... if the attribute value is the empty string (lang=""), the language is set to unknown; if the language tag is not valid according to bcp
47, it is set to invalid.
... language tag syntax the full bcp
47 syntax is in-depth enough to mark extremely specific language dialects, but most usage is much simpler.
...And 3 more matches
Browser detection using the user agent - HTTP
also note that there is a huge difference between the media queries (max-width: 25em), not all and (min-width: 25em), and (max-width: 2
4.99em): (max-width: 25em) excludes (max-width: 25em), whereas not all and (min-width: 25em) includes (max-width: 25em).
... (max-width: 2
4.99em) is simply a poor man's version of not all and (min-width: 25em): do not use (max-width: 2
4.99em) because the layout might break on very high font sizes on very high definition devices in the future.
...from gecko 1
4 for the mobile version and gecko 17 for the desktop version, it also puts this value in the gecko/version token (previous version put there the build date, then a fixed date called the geckotrail).
...And 3 more matches
Authorization - HTTP
the http authorization request header contains the credentials to authenticate a user agent with a server, usually, but not necessarily, after the server has responded with a
401 unauthorized status and the www-authenticate header.
...other types: iana registry of authentication schemes authentification for aws servers (aws
4-hmac-sha256) <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 base6
4 encoded (ywxhzgrpbjpvcgvuc2vzyw1l).
...And 3 more matches
CSP: style-src - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 or sha512 hash of scripts or styles.
...And 3 more matches
If-Unmodified-Since - HTTP
if the resource has been modified after the given date, the response will be a
412 (precondition failed) error.
..."0
4" or "23".
... <year>
4 digit year number, e.g.
...And 3 more matches
JavaScript data types and data structures - JavaScript
variables in javascript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types: let foo =
42; // foo is now a number foo = 'bar'; // foo is now a string foo = true; // foo is now a boolean data and structure types the latest ecmascript standard defines nine types: six data types that are primitives, checked by typeof operator: undefined : typeof instance === "undefined" boolean : typeof instance === "boolean" number : typeof instance === "number" string...
... the number type is a double-precision 6
4-bit binary format ieee 75
4 value (numbers between -(253 − 1) and 253 − 1).
...however, you are able to notice this when you divide by zero: >
42 / +0 infinity >
42 / -0 -infinity although a number often represents only its value, javascript provides binary (bitwise) operators.
...And 3 more matches
JavaScript language resources - JavaScript
ecmascript standardized by the ecma international standards organization in the ecma-262 and ecma-
402 specifications.
...e been approved or are being worked on: name links release date description current editions ecma-262 10th edition pdf, html, working draft, repository 2019 ecmascript 2019 language specification ecma-262 9th edition pdf, html, working draft, repository 2018 ecmascript 2018 language specification ecma-
402 5th edition working draft, repository 2018 ecmascript 2018 internationalization api specification obsolete/historical editions ecma-262 pdf june 1997 ecmascript: a general purpose, cross-platform programming language.
... see also the es5 errata and ecmascript 5 support in mozilla ecma-357 pdf june 200
4 ecmascript for xml (e
4x).
...And 3 more matches
Intl.Locale.prototype.hourCycle - JavaScript
description there are 2 main types of time keeping conventions (clocks) used around the world: the 12 hour clock and the 2
4 hour clock.
...the 2
4 hour clock, with midnight starting at 0:00.
... h2
4 hour system using 1–2
4; corresponds to 'k' in pattern.
...And 3 more matches
Intl.NumberFormat() constructor - JavaScript
syntax new intl.numberformat([locales[, options]]) parameters locales optional a string with a bcp
47 language tag, or an array of such strings.
...possible values are the iso
4217 currency codes, such as "usd" for the us dollar, "eur" for the euro, or "cny" for the chinese rmb — see the current currency & funds code list.
...possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso
4217 currency code list (2 if the list doesn't provide that information).
...And 3 more matches
Math.hypot() - JavaScript
the corresponding distance in 2 or more dimensions can be calculated by adding more squares under the square root: math.sqrt(v1*v1 + v2*v2 + v3*v3 + v
4*v
4).
... this function makes this calculation easier and faster; you simply call math.hypot(v1, v2) , or math.hypot(v1, v2, v3, v
4, ...).
...if your numbers are larger than about 1015
4, taking the square of them will result in infinity.
...And 3 more matches
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.
... copy an array const arr = [1, 2, 3]; const arr2 = [...arr]; // like arr.slice() arr2.push(
4); // arr2 becomes [1, 2, 3,
4] // arr remains unaffected note: spread syntax effectively goes one level deep while copying an array.
...without spread syntax, this is done as: const arr1 = [0, 1, 2]; const arr2 = [3,
4, 5]; // append all items from arr2 onto arr1 arr1 = arr1.concat(arr2); with spread syntax this becomes: let arr1 = [0, 1, 2]; let arr2 = [3,
4, 5]; arr1 = [...arr1, ...arr2]; // arr1 is now [0, 1, 2, 3,
4, 5] // note: not to use const otherwise, it will give typeerror (invalid assignment) array.prototype.unshift() is often used to insert an array of values at the start of an existing arra...
...And 3 more matches
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(-36
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.
...rdsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + f \\ 1 \end{pmatrix} example html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3
40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 = 50 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 10 +
40 = 80 top right corner: oldx=
40 oldy=10 newx = a * oldx + c * oldy + e = 3 *
40 - 1 * 10 + 30 = 1
40 newy = b * oldx + d * oldy + f = 1 *
40 + 3 * 10 +
40 = 110 bottom lef...
...t corner: oldx=10 oldy=30 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 30 + 30 = 30 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 30 +
40 = 1
40 bottom right corner: oldx=
40 oldy=30 newx = a * oldx + c * oldy + e = 3 *
40 - 1 * 30 + 30 = 120 newy = b * oldx + d * oldy + f = 1 *
40 + 3 * 30 +
40 = 170 --> <rect x="10" y="10" width="30" height="20" fill="red" transform="matrix(3 1 -1 3 30
40)" /> </svg> translate the translate(<x> [<y>]) transform function moves the object by x and y.
...And 3 more matches
<feColorMatrix> - SVG: Scalable Vector Graphics
| r' | | r1 r2 r3 r
4 r5 | | r | | g' | | g1 g2 g3 g
4 g5 | | g | | b' | = | b1 b2 b3 b
4 b5 | * | b | | a' | | a1 a2 a3 a
4 a5 | | a | | 1 | | 0 0 0 0 1 | | 1 | in simplified terms, below is how each color channel in the new pixel is calculated.
... r' = r1*r + r2*g + r3*b + r
4*a + r5 g' = g1*r + g2*g + g3*b + g
4*a + g5 b' = b1*r + b2*g + b3*b + b
4*a + b5 a' = a1*r + a2*g + a3*b + a
4*a + a5 take the amount of red in the new pixel, or r': it is the sum of r1 times the old pixel's red r, r2 times the old pixel's green g, r3 times of the old pixel's blue b, r
4 times the old pixel's alpha a, plus a shift r5.
... r' = r1 * r + r2 * g + r3 * b + r
4 * a + r5 new red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old blue ] + [ r
4 * old alpha ] + [ shift of r5 ] if, say, we want to make a completely black image redder, we can make the r5 a positive real number x, boosting the redness on every pixel of the new image by x.
...And 3 more matches
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
doesn't completely follow <svg:use> cascading rules (bug 26589
4).
... recently implemented bindings: selectsubstring altglyph implemented as tspans, no font features as of gecko 2.0 (bug
456286, bug 571808).
... color profile module color-profile not implemented (bug
427713).
...And 3 more matches
Using templates and slots - Web Components
this has more limited support than <template>, available since chrome 53, opera
40, safari 10, firefox 59, and edge 79.
... creating a template with some slots first of all, we use the <slot> element within a <template> element to create a new "element-details-template" document fragment containing some named slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h
4 { margin: 10px 0 -8px 0; } h
4 span { background: #217ac0; padding: 2px 6px 2px 6px } h
4 span { border: 1px solid #cee9f9; border-radius:
4px } h
4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need nam...
...e</slot>></code> <i class="desc"><slot name="description">need description</slot></i> </span> </summary> <div class="attributes"> <h
4><span>attributes</span></h
4> <slot name="attributes"><p>none</p></slot> </div> </details> <hr> </template> that <template> element has several features: the <template> has a <style> element with a set of css styles that are scoped just to the document fragment the <template> creates.
...And 3 more matches
Release notes - Archive of obsolete content
details github commits made between firefox 3
4 and firefox 35.
... bugs fixed between firefox 3
4 and firefox 35.
... firefox 3
4 highlights new api: dev/panel enables you to extend the firefox developer tools.
...And 2 more matches
jpm - Archive of obsolete content
install a different version of firefox as of firefox
48, it is not possible to use unsigned add-ons (i.e.
... jpm test --filter base6
4:btoa the above command only runs tests in files whose names contain "base6
4", and in those files only runs tests whose names contain "btoa".
... -v --verbose verbose operation: jpm watchpost --post-url http://localhost:8888/ -v jpm sign this feature is only supported from jpm 1.0.
4 onwards.
...And 2 more matches
Creating annotations - Archive of obsolete content
updating main.js go back to main.js and add the code to create the selector into the main function: var selector = pagemod.pagemod({ include: ['*'], contentscriptwhen: 'ready', contentscriptfile: [data.url('jquery-1.
4.2.min.js'), data.url('selector.js')], onattach: function(worker) { worker.postmessage(annotatorison); selectors.push(worker); worker.port.on('show', function(data) { console.log(data); }); worker.on('detach', function () { detachworker(this, selectors); }); } }); make sure the name you use to load jquery matches the name of the jquery...
...activate the annotator by clicking the widget and load a page: the screenshot below uses http://blog.mozilla.com/addons/2011/02/0
4/ overview-amo-review-process/.
... you should see the highlight appearing when you move the mouse over certain elements: click on the highlight and you should see something like this in the console output: info: show info: http://blog.mozilla.com/addons/2011/02/0
4/overview-amo-review-process/, post-22
49,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review.
...And 2 more matches
Custom about: URLs - Archive of obsolete content
setup for firefox
4+ this is a simple example of a custom about page for bootstrapped addons.
... in bug 125
4752 things changed for firefox
48 and up.
...this code will work for all versions of firefox
4 and up.
...And 2 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
the way icons are handled in firefox changed considerably after firefox
4, so supporting older versions is not mentioned here (you can check this document's change history for older revisions, though).
...only the gnome theme has a set of large icons that are 2
4x2
4 pixels.
... on linux, icons are 2
4x2
4 pixels by default.
...And 2 more matches
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 6
4 bit: start -> run "%programfiles(x86)%\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.
... development command flags as of gecko 2 (firefox
4), javascript files are cached ("fastload").
...for gecko 2.0+ (firefox
4.0+).
...And 2 more matches
List of Mozilla-Based Applications - Archive of obsolete content
55 source code batik java-based toolkit uses mozilla rhino bitbox security focused browser seemingly based on firefox blackbird browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino browser 2.5m downloads and ~
400,000 active users ...
...e gadgets for linux google’s desktop widget engine uses xulrunner according to the build instructions grani grain sizing assessment tool according to this wiki page grani is based on xul and xpcom daim gwt-mosaic-xul xul builder for google web tools hachette's multimedia encyclopedia electronic encyclopedia this product was using mozilla in 200
4 but i’m not sure if new version still does hacketyhack little coders helma web application framework uses mozilla rhino holt mcdougal cd-roms educational cd-roms activity generator and lab generator are both based on custom firefox distributions houdini 3d animation tools uses gecko in embedded help viewer httpunit automat...
... data integration software seems to use xulrunner talking clipboard text to speech software read epub books, web pages, chm, pdf, ms word, rtf, rss feeds taskpool productivity telasocial kiosk app uses xulrunner telekast teleprompter tenfourfox browser for powerpc-based macs timberwolf browser for amiga os
4 based on firefox - project page mozilla thunderbird email
47 million dl tomtom home 2 pc application to manage tomtom gps devices review article from gps magazine; over 2.
4m users topstyle html, xhtml and css editor seems to have optional gecko embedding but doesn't use it by default toxtox media browser for tv 5000 downloads ...
...And 2 more matches
Exception logging in JavaScript - Archive of obsolete content
if the javascript in frame
4 throws an exception, the exception is returned as an error code to the c++ in frame 3.
...in other words, all unhandled javascript exceptions (except those in rules 3 and
4 above) will be logged before control returns to the outermost c++ caller.
... forcing logging of exceptions in inner js frames sometimes you might actually want to see all exceptions from inner javascript frames logged (in the call chain above that would be when an exception is unhandled in frame
4).
...And 2 more matches
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="53
4,239,715,300" href="#nsiexternalhelperappservice::docontent"> <area alt="(10) getcategoryentry()" coords="575,
418,821,
418,821,
455,629,
455,629,
48
4,575,
48
4" href="#categorymanager" shape="poly"> <area alt="(12)" coords="539,133,583,163" href="#stream-converter"> <area alt="(11)" coords="
485,133,537,163" href="#contenthandler"> <area alt="(9)" coords="
445,132,
48
4,165" href="#nsdocumentopeninfo::dispa...
...tchcontent"> <area alt="(8)" coords="
405,133,
439,162" href="#onstartrequest-innards"> <area alt="(7) onstartrequest()" coords="639,129,703,129,703,165,833,165,833,20
4,639,20
4" href="#onstartrequest" shape="poly"> <area alt="(6) asyncopen()" coords="637,121,709,121,709,96,783,96,783,58,637,58" href="#asyncopen" shape="poly"> <area alt="(5) open()" coords="311,306,
432,371" href="#open"> <area alt="(
4)" coords="90,38
4,127,
417" href="#openuri-innards"> <area alt="(0) registercontentlistener()" coords="37,
47
4,3
46,
47
4,3
46,505,88,505,88,535,37,535" href="#registercontentlistener" shape="poly"> <area alt="(3) openuri() (nsuriloader)" coords="5,207,312,269" href="#openuri"> <area alt="(2)" coords="102,11
4,139,1
48" 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,
467,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.
...And 2 more matches
Introducing the Audio API extension - Archive of obsolete content
for example: // create a new audio element var audiooutput = new audio(); // set up audio element with 2 channel,
44.1khz audio stream.
... audiooutput.mozsetup(2,
44100); once this is done, the samples need to be created.
...you can see an example below: // write samples using a js array var samples = [0.2
42, 0.127, 0.0, -0.058, -0.2
42, ...]; var numbersampleswritten = audiooutput.mozwriteaudio(samples); // write samples using a typed array var samples = new float32array([0.2
42, 0.127, 0.0, -0.058, -0.2
42, ...]); var numbersampleswritten = audiooutput.mozwriteaudio(samples); in the following example, we create an audio pulse: <!doctype html> <html> <head> <title>generating audio in real t...
...And 2 more matches
Space Manager Detailed Design - Archive of obsolete content
the #define ns_space_manager_cache_size is used to control the number of space manager instances that can be present in the recycler, currently
4.
...// // case 1 case 2 case 3 case
4 // ------ ------ ------ ------ // +-----+ +-----+ +-----+ +-----+ // | r | | r | +-----+ +-----+ | | | | // +-----+ +-----+ | | | r | | b | | b | // +-----+ | b | +-----+ | | +-----+ | | // ...
... case #5: the rect is totally below the current bandrect, so just skip to the next band case #3 and #
4: rect is at least partially intersection with the bandrect, so divide the current band into two parts, where the top part is above the current rect.
...And 2 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
e sections in which these installation steps are documented): initinstall(); if (verify_space()) { err = add_dirs_and_files; register_files; if (err==success) { performinstall() }; else { cancelinstall() }; } as you can see in the code listing, the verification process at the top is on lines 1 to 18; the file addition process, here part of the main installation block, is on lines 2
4 to
41; the registration part of the main installation block is on lines
42-58; and the execution at the end of the main block is on lines 59 to 71.
... verifying the target the first thing the installation script does when it's executed is to check that there is adequate disk space for the software to be installed, where the verifydiskspace function is called as a condition of the main installation block that starts at line 2
4).
... // this function verifies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 102
4); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } in the verifydiskspace block, filegetdiskspaceavailable is called with dirpath as its expected input.
...And 2 more matches
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/1
4/05" flex="1"/> <label value="03/15/05" flex="1"/> <label value="03/15/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05...
...preadsheet" id="accjaxspreadsheet" flex="1"> <rows flex="1"></rows> <columns flex="1"> <column> <description 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/1
4/05" flex="1"/> <label x2:role="wairole:gridcell" value="03/...
... <caption>cells really get focus</caption> further reading key-navigable custom dhtml widgets on mozilla.org adding keyboard navigation download stage-
4.zip install stage-
4.xpi true accessibility requires complete keyboard navigability.
...And 2 more matches
Custom toolbar button - Archive of obsolete content
paste it into the new file: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest" 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:targetapplicatio...
...n><!-- firefox --> <description em:id="{ec8030f7-c20a-
46
4f-9b0e-13a3a9e9738
4}" em:minversion="1.
4" em:maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description em:id="{3550f703-e582-
4d05-9a08-
453d09bdfdc6}" em:minversion="1.5" em:maxversion="51.0" /> </em:targetapplication> <em:targetapplication><!-- sunbird --> <description em:id="{718e30fb-e89b-
41dd-9da7-e25a
45638b28}" 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 ...
...
4.
...And 2 more matches
Element Positioning - Archive of obsolete content
an example is shown below: example 1: source view <button label="ok" width="100" height="
40"/> however, it is not recommended that you do this.
...the width of the box will be set to the initial total width of all three buttons (around
430 pixels in the image).
... examples of setting widths and heights <button label="1" style="width: 100px;"/> <button label="2" style="width: 100em; height: 10px;"/> <button label="3" flex="1" style="min-width: 50px;"/> <button label="
4" flex="1" style="min-height: 2ex; max-width: 100px"/> <textbox flex="1" style="max-width: 10em;"/> <description style="max-width: 50px">this is some boring but simple wrapping text.</description> example 1 the first button will be displayed with a width of 100 pixels (px means pixels).
...And 2 more matches
Extentsions FAQ - Archive of obsolete content
just drag them there from the toolbar customisation window, like you would when adding buttons to the toolbars." option #
4 install toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with getting an extension to process windows messages.
...replaceme = document.getelementbyid("replaceme"); replaceme.parentnode.replacechild(newnode, replaceme); is it possible to place an image in the window that can be moved to anywhere in the window, and always remain on top of everything else?(similiar to using position:absolute and-index:100000 in html) you can almost do this with a stack: <window ...> <stack flex="1"> <image top="
40" left="80"/> <vbox> other content here </vbox> </stack> </window> the only restriction is that your image can't overlap the right or bottom of the window.
... what you described was a bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1
47670).
...And 2 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% / 9
4% 58% / 58% dom 1 html 100% 100% 100% 100% / 100% 100% / 100% dom css 1 100% 100% 100% 100% / 100% 96% / 96% dom css 2 100% 98% 67% 71% / 83% 38% /
42% test results cross reference dom core level 1 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.5
4 - 9.01 doc...
...e false true document.createattribute() true true true document.createentityreference()obsolete since gecko 7 (method present but only returns null: bug 9850) false false document.getelementsbytagname() true true true dom core level 2 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.5
4 - 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 false true document.createelementns() true false true document.createattributens() true false true document.getelementsbytagnamens() true false true document.getelementbyid() true true true dom level 1 html support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.5
4 - 9.01 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.createattribute() true true true document.getelementsbyt...
...And 2 more matches
Accessing XML children - Archive of obsolete content
« previousnext » accessing xml children warning: e
4x is deprecated.
...var a = {}; a.foo = 1; a["bar"] = 2; in e
4x, the .
... and [] operators provide access to the child nodes of an e
4x element.
...And 2 more matches
The global XML object - Archive of obsolete content
« previous the global xml object e
4x-capable javascript engines put a new property on the global object.
... the xml object has several properties that allow you to customize parsing and serialization of e
4x.
...this property tells e
4x to ignore comment nodes when serializing and filtering.
...And 2 more matches
Array comprehensions - Archive of obsolete content
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 = [195
4, 197
4, 1990, 2006, 2010, 201
4]; [for (year of years) if (year > 2000) year]; // [2006, 2010, 201
4] [for (year of years) if (year > 2000) if (year < 2010) year]; // [2006], the same as below: [for (year of years) if (year > 2000 && year < 2010)...
...And 2 more matches
New in JavaScript 1.2 - Archive of obsolete content
the following is a changelog for javascript from netscape navigator 3.0 to
4.0.
...netscape navigator
4.0 was released on june 11, 1997.
... netscape navigator
4.0 was the third major version of the browser with javascript support.
...And 2 more matches
JavaArray - Archive of obsolete content
in javascript 1.
4 and later, the componenttype parameter is either a javaclass object representing the type of the array or class object, such as one returned by java.lang.class.forname.
... in javascript 1.
4 and later, the methods of java.lang.object are inherited by javaarray.
... methods tostring: in javascript 1.
4, this method is overridden by the inherited method java.lang.object.tostring.
...And 2 more matches
background-size - Archive of obsolete content
znerd 0
4 august 2009 chrome, iron, icab
4, omniweb etc.
...[that said, the popularity of chrome let me think of a table row like safari, chrome (webkit) |
4.0, 2.0 (528).
...but we need facts, rather than assumptions.] btw, some time ago i'v listed opera in the property template table and removed netscape because netscape is gecko based and opera has a global market share of > 2% (>
40% in some european countries).
...And 2 more matches
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
learn how to correctly size list item markers in gecko 0.9.
4, the basis of netscape 6.2.x and compuserve 7.
... shortly before mozilla 0.9.
4 was finished, a bug was introduced that affects the sizing of list item markers (such as the numbers in an ordered list).
... 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.
...And 2 more matches
The Business Benefits of Web Standards - Archive of obsolete content
according to many sources, gecko-based browsers are now much more common than netscape
4.x and msie
4 browsers, and it is increasing significantly with time.
... legacy user agents: netscape
4 and ie
4 the only drawback in using css is that older browsers (specifically ie
4 and ns
4) will not be able to render as intended.
... in some cases, where a significant portion of the audience is running netscape
4.x, use of simple tables for layout and css for font control may be a solution.
...And 2 more matches
Building up a basic demo with A-Frame - Game development
you should start off by: making sure you are using a modern browser with good webgl support (and webxr support if you have available vr or ar hardware) such as the latest firefox or chrome — download firefox nightly or chrome (v5
4 or higher).
...add it now: <a-box color="#0095dd" position="0 1 0" rotation="20
40 0"> </a-box> it contains a few parameters already defined: color, position and rotation — these are fairly obvious, and define the base color of the cube, the position inside the 3d scene, and the rotation of the cube.
...add this just before the closing </a-scene> element: <a-camera position="0 1
4" cursor-visible="true" cursor-scale="2" cursor-color="#0095dd" cursor-opacity="0.5"> </a-camera> we've also defined a cursor for the given camera, using the cursor-* attributes (by default it is invisible.) — we've set its scale so it will more easily visible, its color, and some opacity so it won't completely covering the objects behind it.
...And 2 more matches
Backgrounds and borders - Learn web development
.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center /
400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties.
...at; background-position: top center; } and lengths, and percentages: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; } you can also mix keyword values with lengths or percentages, for example: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; } finally, you can also use a
4-value syntax in order to indicate a distance from certain edges of the box — the length unit, in this case, is an offset from the value that precedes it.
... the other background-* properties can also have comma-separated values in the same way as background-image: background-image: url(image1.png), url(image2.png), url(image3.png), url(image
4.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right; each value of the different properties will match up to the values in the same position in the other properties.
...And 2 more matches
Flexbox - Learn web development
it is relative to other flex items, meaning that giving each flex item a value of
400000 would have exactly the same effect.
... now add the following rule below the previous one: article:nth-of-type(3) { flex: 2; } now when you refresh, you'll see that the third <article> takes up twice as much of the available width as the other two — there are now four proportion units available in total (since 1 + 1 + 2 =
4).
... the first two flex items have one unit each so they take 1/
4 of the available space each.
...And 2 more matches
Practical positioning examples - Learn web development
next, add the following just below your previous css: .info-box { width:
450px; height:
400px; margin: 0 auto; } this sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick.
... it should now look like this: .info-box { width:
450px; height:
400px; position: fixed; top: 0; } styling the main content the only thing left for this example is to provide the main content with some styling.
... add the following rule underneath the rest of your css: .fake-content { background-color: #a60000; 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.
...And 2 more matches
Fundamental text and font styling - Learn web development
for example, if you had an <article> element in your page, and set its font-size to 1.5 em (which would compute to 2
4 px final size), and then wanted the paragraphs inside the <article> elements to have a computed font size of 20 px, what em value would you use?
...--> </article> you would need to set its em value to 20/2
4, or 0.83333333 em.
...this takes up to four values, as shown in the example below: text-shadow:
4px
4px 5px red; the four properties are as follows: the horizontal offset of the shadow from the original text — this can take most available css length and size units, but you'll most commonly use px; positive values move the shadow right, and negative values left.
...And 2 more matches
How to build custom form controls - Learn web development
o 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.
... if it can't, the content will be truncated) */ max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .
4em .
4em; box-shadow: 0 .2em .
4em rgba(0,0,0,.
4); background: #f0f0f0; } for the options, we need to add a highlight class to be able to identify the value the user will pick (or has picked).
...ction (event) { updatevalue(select, index); }); }); // each time a user uses their keyboard on a focused control, we update the value accordingly select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); // when the user hits the down arrow, we jump to the next option if (event.keycode ===
40 && index < length - 1) { index++; } // when the user hits the up arrow, we jump to the previous option if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); in the code above, it's worth noting the use of the tabindex property.
...And 2 more matches
HTML table basics - Learn web development
name mass (102
4kg) diameter (km) density (kg/m3) gravity (m/s2) length of day (hours) distance from sun (106km) mean temperature (°c) number of moons notes terrestial planets mercury 0.330
4,879 5
427 3.7
4222.6 57.9 167 0 closest to the sun venus
4.87 12,10
4 52
43 8.9 2802.0 108.2
46
4 0 earth 5.97 ...
... 12,756 551
4 9.8 2
4.0 1
49.6 15 1 our world mars 0.6
42 6,792 3933 3.7 2
4.7 227.9 -65 2 the red planet jovian planets gas giants jupiter 1898 1
42,98
4 1326 23.1 9.9 778.6 -110 67 the largest planet saturn 568 120,536 687 9.0 10.7 1
433.5 -1
40 62 ice giants uranus 86.8 51,118 1271 8.7 17.2 2872.5 -195 27 neptune 102
49,528 1638 11.0 16.1
4495.1 -200 1
4 dwarf planets pluto 0.01
46 2,370 2095 0.7 153.3 5906.
4 -225 5 declassified as a planet in 2006, but this remains controversial.
... cell
4.
...And 2 more matches
Arrays - Learn web development
(try running step
4 with a different character than a comma.) let dognames = ['rocket','flash','bella','slugger']; dognames.tostring(); // rocket,flash,bella,slugger adding and removing array items we've not yet covered adding and removing array items — let us look at this now.
...inside the loop (below // number
4) we want you to add a line that adds the current item price to that total in each iteration of the loop, so that at the end of the code the correct total is printed onto the invoice.
... playable code <h2>live output</h2> <div class="output" style="min-height: 150px;"> <ul> </ul> <p></p> </div> <h2>editable code</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:1
4.99' 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2...
...And 2 more matches
Handling text — strings in JavaScript - Learn web development
concatenation in context let's have a look at concatenation being used in action — here's an example from earlier in the course: <button>press me</button> const button = document.queryselector('button'); button.onclick = function() { let name = prompt('what is your name?'); alert('hello ' + name + ', nice to see you!'); } here we're using a window.prompt() function in line
4, which asks the user to answer a question via a popup dialog box then stores the text they enter inside a given variable — in this case name.
...let's try it in our console: 'front ' + 2
42; you might expect this to return an error, but it works just fine.
...we did exactly this in our number guessing game, in line 5
4.
...And 2 more matches
Storing the information you need — Variables - Learn web development
try entering the following lines into your console: myname = 'bob'; myage =
40; an aside on variable naming rules you can call a variable pretty much anything you like, but there are limitations.
... numbers you can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.
456 (also called floats or floating point numbers).
...try entering the following lines into your console: let mynamearray = ['chris', 'bob', 'jim']; let mynumberarray = [10, 15,
40]; once these arrays are defined, you can access each value by their location within the array.
...And 2 more matches
Multimedia: video - Learn web development
compress the video and export to multiple video formats, including webm, mpeg-
4/h.26
4, 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.26
4: 12 mb --> <source src="video.mp
4" type="video/mp
4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv" type="video/ogv" /> </video> the browser downloads the first format it understands.
... <video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp
4"> while the loop and autoplay make sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers.
...And 2 more matches
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', '
46', 'mac') .build(); you could also set these options using an environment variable, for example: selenium_browser=firefox:
46:mac let's create a new test to allow us to explore this code as we talk about it.
... give it the following contents: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; // input capabilities let capabilities = { 'browsername' : 'firefox', 'browser_version' : '56.0 beta', 'os' : 'os x', 'os_version' : 'sierra', 'resolution' : '1280x102
4', 'browserstack.user' : 'your-user-name', 'browserstack.key' : 'your-access-key', 'browserstack.debug' : 'true', 'build' : 'first build' }; let driver = new webdriver.builder().
... give it the following contents: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until, username = "your-user-name", accesskey = "your-access-key"; let driver = new webdriver.builder() .withcapabilities({ 'browsername': 'chrome', 'platform': 'windows xp', 'version': '
43.0', 'username': username, 'accesskey': accesskey }) .usingserver("https://" + username + ":" + accesskey + "@ondemand.saucelabs.com:
443/wd/hub") .build(); driver.get('http://www.google.com'); driver.findelement(by.name('q')).sendkeys('webdriver'); driver.sleep(1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); driver.
...And 2 more matches
Accessibility information for UI designers and developers
the ratio should be
4.5:1 for regular text and 3:1 for large text.
... see also: understanding sc 1.
4.3: contrast the focus indicator users who navigate by keyboard (or other specialised input methods), rely on focus styles to see where they are on the page.
... see also: understanding sc 2.
4.7: focus visible be ready for resizing and custom styles on the web, users can use tools in their browser to make font sizes larger, or even provide custom css to meet their specific needs.
...And 2 more matches
Debugging on Windows
debugging tinderbox builds see running windows debug builds problems loading debug symbols if both your application and visual c++ hang shortly after launching the application under the debugger, you may be hitting a known deadlock in the way visual studio downloads debug symbols for the system libraries; see https://connect.microsoft.com/visualstudio/feedback/details/
422970/hang-loading-rasapi32-pdb-when-using-symbol-server.
... in a command window, run symchk.exe /r c:\windows\syswow6
4\ /s "srv*<your cache symbols directory>\microsoftpublicsymbols*http://msdl.microsoft.com/download/symbols" note the "\microsoftpublicsymbols" appended to the cache directory configured in visual studio.
... downloading all symbols can take a long time; you can replace c:\windows\syswow6
4\ with the name of a single .dll to download symbols only for the specific libraries you are trying to debug.
...And 2 more matches
NSS 3.25 release notes
nss 3.25 requires netscape portable runtime (nspr)
4.12 or newer.
... added support for tls 1.2 ciphersuites that use sha38
4 as the prf.
... the following ca certificate was removed cn = sonera class1 ca sha-256 fingerprint: cd:80:82:8
4:cf:7
4:6f:f2:fd:6e:b5:8a:a1:d5:9c:
4a:d
4:b3:ca:56:fd:c6:27:
4a:89:26:a7:83:5f:32:31:3d the following ca certificates were added cn = hellenic academic and research institutions rootca 2015 sha-256 fingerprint: a0:
40:92:9a:02:ce:53:b
4:ac:f
4:f2:ff:c6:98:1c:e
4:
49:6f:75:5e:6d:
45:fe:0b:2a:69:2b:cd:52:52:3f:36 cn = hellenic academic and research institutions ecc ...
...And 2 more matches
NSS 3.28.5 release notes
nss 3.28.5 requires nspr
4.13.1 or newer.
... notable changes in nss 3.28.5 the following ca certificates were removed: o = japanese government, ou = applicationca sha-256 fingerprint: 2d:
47:
43:7d:e1:79:51:21:5a:12:f3:c5:8e:51:c7:29:a5:80:26:ef:1f:cc:0a:5f:b3:d9:dc:01:2f:60:0d:19 cn = wellssecure public root certificate authority sha-256 fingerprint: a7:12:72:ae:aa:a3:cf:e8:72:7f:7f:b3:9f:0f:b3:d1:e5:
42:6e:90:60:b0:6e:e6:f1:3e:9a:3c:58:33:cd:
43 cn=tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha-256 fingerprint: 8d:e7:86:55:e1...
...:be:7f:78:
47:80:0b:93:f6:9
4:d2:1d:36:8c:c0:6e:03:3e:7f:ab:0
4:bb:5e:b9:9d:a6:b7:00 cn=microsec e-szigno root sha-256 fingerprint: 32:7a:3d:76:1a:ba:de:a0:3
4:eb:99:8
4:06:27:5c:b1:a
4: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-256 fingerprint: a1:a8:6d:0
4:12:1e:b8:7f:02:7c:66:f5:33:03:c2:8e:57:39:f9:
43:fc:8
4:b3:8a:d6:af:00:90:35:dd:9
4:57 trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-256 fingerprint:
46:ed:c3:68:90:
46:d5:3a:
45:3f:b3:10:
4a:b8:0d:ca:ec:65:8b:26:60:ea:16:29:dd:7e:86:79:90:6
4:87:16 trust flags: websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.tr, bel.tr, edu.tr...
...And 2 more matches
NSS 3.39 release notes
nss 3.39 requires nspr
4.20 or newer.
... notable changes in nss 3.39 the tls 1.3 implementation uses the final version number from rfc 8
446.
... the following ca certificates were added: ou = globalsign root ca - r6 sha-256 fingerprint: 2cabeafe37d06ca22aba7391c0033d25982952c
4536
473
49763a3ab5ad6ccf69 cn = oiste wisekey global root gc ca sha-256 fingerprint: 8560f91c362
4daba9570b5fea0dbe36ff11a8323be9
48685
4fb3f3
4a5571198d the following ca certificate was removed: cn = comsign sha-256 fingerprint: ae
4457b
40d9eda96677b0d3c92d57b5177abd7ac1037958356d1e09
4518be5f2 the following ca certificates had the websi...
...And 2 more matches
NSS 3.51 release notes
nss 3.51 requires nspr
4.25 or newer.
... notable changes in nss 3.51 updated dtls 1.3 implementation to draft-3
4.
... bugs fixed in nss 3.51 bug 1608892 - update dtls 1.3 implementation to draft-3
4.
...And 2 more matches
NSS 3.53 release notes
nss 3.53 requires nspr
4.25 or newer.
...(bug 1618
40
4, bug 1621159) 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.
... bugs fixed in nss 3.53 bug 16
40260 - initialize pbe params (asan fix) bug 1618
40
4 - set cka_nss_server_distrust_after for symantec root certs bug 1621159 - set cka_nss_server_distrust_after for consorci aoc, grca, and sk id root certs bug 1629
41
4 - ppc6
4: correct compilation error between vmx vs.
...And 2 more matches
Release notes for recent versions of NSS
(nss 3.56 release notes) the current esr releases of nss are 3.
44.
4 (nss 3.
44.
4 release notes), intended for firefox esr 68, which was released on 19 may 2020, and 3.53.1 (nss 3.53.1 release notes), intended for firefox esr 78, which was released on 16 june 2020.
... past releases nss 3.56 release notes nss 3.55 release notes nss 3.5
4 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.
46.1 release notes nss 3.
46 release notes nss 3.
45 release notes nss 3.
44.3 release notes nss 3.
44.2 release notes nss 3.
44.1 release notes nss 3.
44 release notes nss 3.
43 release notes nss 3.
42.1 release notes nss 3.
42 release notes nss 3.36.8 release notes nss 3.36.7 release notes nss 3.
41 release notes nss 3.
40...
....1 release notes nss 3.36.6 release notes nss 3.
40 release notes nss 3.39 release notes nss 3.38 release notes nss 3.37.3 release notes nss 3.37.1 release notes nss 3.37 release notes nss 3.36.5 release notes nss 3.36.
4 release notes nss 3.36.2 release notes nss 3.36.1 release notes nss 3.36 release notes nss 3.35 release notes nss 3.3
4.1 release notes nss 3.3
4 release notes nss 3.33 release notes nss 3.32 release notes nss 3.31.1 release notes nss 3.31 release notes nss 3.30.2 release notes nss 3.30.1 release notes nss 3.30 release notes nss 3.29.5 release notes nss 3.29.3 release notes nss 3.29.2 release notes nss 3.29.1 release notes nss 3.29 release notes nss 3.28.5 release notes nss 3.28.
4 release notes nss 3.28.3 release notes nss 3.28.2 release notes n...
...And 2 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
/* 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" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits 102
4 /* header file constants */ #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_hea...
...#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 exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s %s %s %s %s %s %s %s %s %s\n\n", progname, " -<g|a|h|e|ds|v> -d <dbdirpath> ", "[-p <dbpwd> | -f <dbpwdfile>] [-z <noisefilename>] [-a <\"\">...
..., "-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[
4096]; 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 = ...
...And 2 more matches
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 <base6
4.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 *b6
4data = null; b6
4data = btoa_datatoascii(data, len); pr_fprintf(out, "%s", b6
4data); pr_fprintf(out, "\n"); if (b6
4data) { port_free(b6
4data); } } /* * 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...
...ng == ':')) { instring++; continue; } digit1 = getdigit(*instring++); digit2 = getdigit(*instring++); if ((digit1 == -1) || (digit2 == -1)) { port_free(outbuf->data); outbuf->data = null; return -1; } outbuf->data[truelen++] = digit1 <<
4 | digit2; } } else { while (*instring) { if (*instring == '\n') { instring++; continue; } outbuf->data[truelen++] = *instring++; } outbuf->data[truelen] = '\0'; truelen = truelen-1; } outbuf->len = truelen; return 0; } /* * filetoitem */ secstatus filetoitem(secitem *dst,...
...And 2 more matches
Utilities for nss samples
*/ #ifndef _util_h #define _util_h #include <prlog.h> #include <termios.h> #include <base6
4.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 *b6
4data = null; b6
4data = btoa_datatoascii(data, len); pr_fprintf(out, "%s", b6
4data); pr_fprintf(out, "\n"); if (b6
4data) { port_free(b6
4data); } } /* * 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...
...ng == ':')) { instring++; continue; } digit1 = getdigit(*instring++); digit2 = getdigit(*instring++); if ((digit1 == -1) || (digit2 == -1)) { port_free(outbuf->data); outbuf->data = null; return -1; } outbuf->data[truelen++] = digit1 <<
4 | digit2; } } else { while (*instring) { if (*instring == '\n') { instring++; continue; } outbuf->data[truelen++] = *instring++; } outbuf->data[truelen] = '\0'; truelen = truelen-1; } outbuf->len = truelen; return 0; } /* * filetoitem */ secstatus filetoitem(secitem *dst,...
...And 2 more matches
nss tech note2
to enable this mode, set: nspr_log_modules=nss_mod_log:1 nspr_log_file=<logfile> the output format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 102
4[805ef10]: c_initialize 102
4[805ef10]: rv = 0x0 102
4[805ef10]: c_getinfo 102
4[805ef10]: rv = 0x0 102
4[805ef10]: c_getslotlist 102
4[805ef10]: rv = 0x0 2.
...osthreadid[nsprthreadid]: argn = 0xaaaaaaaa osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 102
4[805ef10]: c_initialize 102
4[805ef10]: pinitargs = 0x
4010c938 102
4[805ef10]: rv = 0x0 102
4[805ef10]: c_getinfo 102
4[805ef10]: pinfo = 0xbffff3
40 102
4[805ef10]: rv = 0x0 102
4[805ef10]: c_getslotlist 102
4[805ef10]: tokenpresent = 0x0 102
4[805ef10]: pslotlist = 0x0 102
4[805ef10]: pulcount = 0xbffff33c 102
4[805ef10]: *pulcount = 0x2 102
4[805ef10]: rv = 0x0 note that when a pkcs #11 function takes a pointer argumen...
...to enable this mode, set: nspr_log_modules=nss_mod_log:
4 nspr_log_file=<logfile> the output format is the same as above, but with more information.
...And 2 more matches
NSS tools : crlutil
please contribute to the initial review in mozilla nss bug 836
477[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 | md
4 | md5 | sha1 | sha256 | sha38
4 | sha512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
...for example: 2005020
4153000z * add an extension to a crl or a crl certificate entry: addext extension-name critical/non-critical [arg1[arg2 ...]] where: extension-name: string value of a name of known extensions.
...And 2 more matches
Small Footprint
with various changes js.jar size can be reduced to 20
4,689 bytes corresponding to
42
4,77
4 bytes of uncompressed classes.
...this change saves
47,98
4 bytes of class files.
... smalljs.jar ant build script in rhino supports smalljar target that will generate smalljs.jar that does not include tools, optimizer, javaadapter and class generation library, regular expressions, e
4x implementataion and deprecated files.
...And 2 more matches
Rhino shell
the string versionnumber must be one of 100, 110, 120, 130, 1
40, 150, 160 or 170.
...if an argument is supplied, it is expected to be one of 100, 110, 120, 130, 1
40, 150, 160 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 = 3
4; js> f() 3
4 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.
...And 2 more matches
Introduction to the JavaScript shell
note: starting with spidermonkey
44 (firefox
44 / thunderbird
44 / seamonkey 2.
41), the standard, web-compatible javascript version is used by default (and not js1.7+ anymore).
... 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#
46
4.
... for example, if you enter the javascript function below: function test() { var i = 3; print(i+2); } then run the command dis(test);, you get this output: main: 00000: uint16 3 00003: setvar 0 00006: pop 00007: name "print" 00010: pushobj 00011: getvar 0 0001
4: uint16 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 program, or for the specified function, showing the source lines.
...And 2 more matches
SpiderMonkey 1.8
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js-1.8.0-rc1.tar.gz (md5 checksum: eaad8815dcc66a717ddb87e972
4d96
4e).
...this includes iterators and generators (bug 3
49263) and arrays (bug
417501).
... when javascript 1.8 support is enabled, the parser accepts some incorrect programs by inserting a semicolon where it should instead throw a syntaxerror (bug 38
4758).
...And 2 more matches
nsIWebNavigation
load_flags_bypass_history 6
4 this flag specifies that history should not be updated.
... load_flags_charset_change 102
4 this flag specifies that a reload was triggered as a result of detecting an incorrect character encoding while parsing a previously loaded document.
... load_flags_stop_content 20
48 if this flag is set, stop() will be called before the load starts and will stop both content and network activity (the default is to only stop network activity).
...And 2 more matches
nsIXPConnect
inherits from: nsisupports last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) to access the xpconnect service, use code like this: nsresult rv; nscomptr<nsixpconnect> xpconnect = do_getservice(nsixpconnect::getcid(), &rv); if (ns_succeeded(rv)) { /* use the object */ } method overview void addjsholder(in voidptr aholder, in nsscriptobjecttracerptr atracer); native code only!
... [noscript,notxpcom] void getcaller( out jscontextptr ajscontext, out jsobjectptr aobject ); parameters ajscontext missing description aobject missing description return value missing description exceptions thrown missing exception missing description native code only!getcowforobject obsolete since gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
... getwrappednativeprototype( in jscontextptr ajscontext, in jsobjectptr ascope, in nsiclassinfo aclassinfo ); parameters ajscontext missing description ascope missing description aclassinfo missing description return value missing description exceptions thrown missing exception missing description native code only!getwrapperforobject obsolete since gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
...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-006008962
422)] interface nsisupportsid : nsisupportsprimitive { attribute nsidptr data; string tostring(); }; astring nsisupportsstring @mozilla.org/supports-string;1 [scriptable, uuid(d79dc970-
4a1c-11d3-9890-006008962
422)] interface nsisupportsstring : nsisupportsprimitive { attribute astring data; wstring tostring(); }; prbool nsisupportsprbool @mozilla.org/supp...
...orts-prbool;1 [scriptable, uuid(ddc3b
490-
4a1c-11d3-9890-006008962
422)] interface nsisupportsprbool : nsisupportsprimitive { attribute prbool data; string tostring(); }; pruint8 nsisupportspruint8 @mozilla.org/supports-pruint8;1 [scriptable, uuid(dec2e
4e0-
4a1c-11d3-9890-006008962
422)] interface nsisupportspruint8 : nsisupportsprimitive { attribute pruint8 data; string tostring(); }; pruint16 nsisupportspruint16 @mozilla.org/supports-pruint16;1 [scriptable, uuid(dfacb090-
4a1c-11d3-9890-006008962
422)] interface nsisupportspruint16 : nsisupportsprimitive { attribute pruint16 data; string tostring(); }; pruint32 nsisupportspruint32 @mozilla.org/supports-pruint32;1 [scriptable, uuid(e01dc
470-
4a1c-11d3-9890-006008962
422)] interface nsisupportspruint32 : nsisupportspri...
...mitive { attribute pruint32 data; string tostring(); }; pruint6
4 nsisupportspruint6
4 @mozilla.org/supports-pruint6
4;1 [scriptable, uuid(e13567c0-
4a1c-11d3-9890-006008962
422)] interface nsisupportspruint6
4 : nsisupportsprimitive { attribute pruint6
4 data; string tostring(); }; prtime nsisupportsprtime @mozilla.org/supports-prtime;1 [scriptable, uuid(e2563630-
4a1c-11d3-9890-006008962
422)] interface nsisupportsprtime : nsisupportsprimitive { attribute prtime data; string tostring(); }; char nsisupportschar @mozilla.org/supports-char;1 [scriptable, uuid(e2b05e
40-
4a1c-11d3-9890-006008962
422)] interface nsisupportschar : nsisupportsprimitive { attribute char data; string tostring(); }; print16 nsisupportsprint16 @mozilla.org/supports-print16;1 [scriptable, ...
...And 2 more matches
Getting Started Guide
comparison
4.
... as a parameter setfoo(foo); //
4.
...if the nscomptr addrefed the value each time you did that, cases
4 and 5 would obviously always generate leaks.
...And 2 more matches
Cached compose window FAQ
it should be as fast as in step
4.
... there is no "cached" window, so this will be as slow as step
4.
... it should be as fast as in step
4.
...And 2 more matches
Mail event system
a message is added to an nsimapmailfolder containing
4 messages.
...the folder calls notifyintpropertychanged on itself with the atom that represents "totalmessages": this->notifyintpropertychanged(ktotalmessagesatom,
4, 5);.
... notifypropertychanged broadcasts this event to each its nsifolderlisteners by calling onitemintpropertychanged on each listener: listener->onintpropertychanged(this, ktotalmessagesatom,
4, 5); the dialog is one of these folder-specific listeners.
...And 2 more matches
Theme Packaging
48x
48) png (may contain alpha transparency) which will show up in the appearance section of the add-ons manager.
... install.rdf your install.rdf manifest will 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/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:type>
4</em:type> more properties </description> </rdf> required install.rdf properties your install.rdf file must have the following properties.
... 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/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{18b6
4b56-d
42f-
428d-a88c-baa
413bc
413f}</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.
...And 2 more matches
Using Objective-C from js-ctypes
nsutf8stringencoding is defined as
4.
... id nsstring = (id)objc_getclass("nsstring"); sel initwithcstring_encoding = sel_registername("initwithcstring:encoding:"); int nsutf8stringencoding =
4; id tmp = objc_msgsend(nsstring, alloc); id text = objc_msgsend(tmp, initwithcstring_encoding, "hello, firefox!", nsutf8stringencoding); note that you need to release this allocated nsstring instance.
...ynthesizer"); sel alloc = sel_registername("alloc"); sel initwithvoice = sel_registername("initwithvoice:"); id tmp = objc_msgsend(nsspeechsynthesizer, alloc); id synth = objc_msgsend(tmp, initwithvoice, null); // @"hello, firefox!" id nsstring = (id)objc_getclass("nsstring"); sel initwithcstring_encoding = sel_registername("initwithcstring:encoding:"); int nsutf8stringencoding =
4; id tmp2 = objc_msgsend(nsstring, alloc); id text = objc_msgsend(tmp2, initwithcstring_encoding, "hello, firefox!", nsutf8stringencoding); // [synth startspeakingstring: @"hello, firefox!"]; sel startspeakingstring = sel_registername("startspeakingstring:"); objc_msgsend(synth, startspeakingstring, text); sel isspeaking = sel_registername("isspeaking"); /...
...And 2 more matches
Mozilla
integrated authentication this entails support for the the simple and protected gss-api negotiation mechanism (spnego) internet standard (rfc 2
478) to negotiate either kerberos, ntlm, or other authentication protocols supported by the operating system.
... mozilla port blocking on 08/15/2001, cert issued a vulnerability note vu#
476267 for a "cross-protocol" scripting attack, known as the html form protocol attack which allowed sending arbitrary data to most tcp ports.
... phishing: a short definition in 201
4, the msci estimated an annual global impact of phishing, and various forms of identity theft, to be as high as $5 billion usd.
...And 2 more matches
Deprecated tools - Firefox Developer Tools
webide and connect page webide was deprecated as of firefox 69 disabled as of firefox 70 (bug 1539
451).
... removed as of firefox 71 (bug 1539
462).
... canvas debugger bugzilla issue: bug 1
403938 removed as of firefox 67 description canvas debugger allowed users to inspect the canvas element and see how frequently a given function is called.
...And 2 more matches
Aggregate view - Firefox Developer Tools
before firefox
48, this was the default view of a heap snapshot.
... after firefox
48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": the aggregate view looks something like this: it presents a breakdown of the heap's contents, as a table.
...so, for example, the first entry says that:
4,832,592 bytes, comprising 93% of the total heap usage, were allocated in a function at line 35 of "alloc.js", or in functions called by that function we can use the disclosure triangle to drill down the call tree, to find the exact place your code made those allocations.
...And 2 more matches
Dominators view - Firefox Developer Tools
the dominators view is new in firefox
46.
... starting in firefox
46, the memory tool includes a new view called the dominators view.
...it looks something like this: the dominators view consists of two panels: the dominators tree panel shows you which nodes in the snapshot are retaining the most memory the retaining paths panel (new in firefox
47) shows the 5 shortest retaining paths for a single node.
...And 2 more matches
Waterfall - Firefox Developer Tools
new in firefox
46: if the gc event was caused by allocation pressure, a link appears, labeled "show allocation triggers".
... stack at end (new in firefox
41).
...n 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
46, if the gc event was caused by allocation pressure, a link appears, labeled "show allocation triggers".
...And 2 more matches
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 6
4-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.30000019073
4863.
... one solution is to use the math.fround() method, which returns the single-precision value equivalent to the 6
4-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.
...And 2 more matches
CDATASection - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25
406,20
406,30 396,25" stroke="#d
4dde
4" fill="none...
..."/><line x1="
406" y1="25" x2="
436" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="
436" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">text</text></a><polyline points="511,25 521,20 521,30 511,25" stroke="#d
4dde
4" fill="none"/><line x1="521" y1="25" x2="529" y2="25" stroke="#d
4dde
4"/><line x1="529" y1="25" x2="529" y2="90" stroke="#d
4dde
4"/><line x1="529" y1="90" x2="512" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/cdatasection" target="_top"><rect x="391" y="65" width="120" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
451" y=...
...And 2 more matches
CanvasRenderingContext2D.drawImage() - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f37
4e9c6fc.jpg" width="300" height="227"> </div> javascript the source image is taken from the coordinates (33, 71), with a width of 10
4 and a height of 12
4.
... it is drawn to the canvas at (21, 20), where it is given a width of 87 and a height of 10
4.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71, 10
4, 12
4, 21, 20, 87, 10
4); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing.
...And 2 more matches
CanvasRenderingContext2D.rotate() - Web APIs
examples rotating a shape this example rotates a rectangle by
45°.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(
45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); result the center of rotation is blue.
... html <canvas id="canvas"></canvas> javascript the shape is a rectangle with its corner at (80, 60), a width of 1
40, a height of 30.
...And 2 more matches
Pixel manipulation with canvas - Web APIs
the uint8clampedarray contains height × width ×
4 bytes of data, with index values ranging from 0 to (height×width×
4)-1.
... for example, to read the blue component's value from the pixel at column 200, row 50 in the image, you would do the following: bluecomponent = imagedata.data[((50 * (imagedata.width *
4)) + (200 *
4)) + 2]; if given a set of coordinates (x and y), you may end up doing something like this: var xcoord = 50; var ycoord = 100; var canvaswidth = 102
4; function getcolorindicesforcoord(x, y, width) { var red = y * (width *
4) + x *
4; return [red, red + 1, red + 2, red + 3]; } var colorindices = getcolorindicesforcoord(xcoord, ycoord, canvaswidth); var redindex = colorindices[0]; var greenindex = colorindices[1]; var blueindex = colorindices[2]; var alphaindex = colorindices[3]; var redforcoord = imagedata.data[redindex]; var greenforcoord = imagedata.data[greenindex]; var blueforcoor...
...d = imagedata.data[blueindex]; var alphaforcoord = imagedata.data[alphaindex]; or, if es2015 is appropriate: const xcoord = 50; const ycoord = 100; const canvaswidth = 102
4; const getcolorindicesforcoord = (x, y, width) => { const red = y * (width *
4) + x *
4; return [red, red + 1, red + 2, red + 3]; }; const colorindices = getcolorindicesforcoord(xcoord, ycoord, canvaswidth); const [redindex, greenindex, blueindex, alphaindex] = colorindices; you may also access the size of the pixel array in bytes by reading the uint8clampedarray.length attribute: var numbytes = imagedata.data.length; creating an imagedata object to create a new, blank imagedata object, you should use the createimagedata() method.
...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, windowbase6
4, and windoweventhandlers.
... event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from windowtimers, windowbase6
4, and windoweventhandlers.
... methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from windowtimers, windowbase6
4, and windoweventhandlers.
...And 2 more matches
Document.createNodeIterator() - Web APIs
nodefilter.show_document_fragment 102
4 shows documentfragment nodes.
... nodefilter.show_notation 20
48 shows notation nodes.
... nodefilter.show_processing_instruction 6
4 shows processinginstruction nodes.
...And 2 more matches
Element.getAttributeNS() - Web APIs
the dom
4 specification now says this method should return null for non-existent attributes.
... <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/201
4/test" width="
40" height="
40"> <circle id="target" cx="12" cy="12" r="10" stroke="#
444" stroke-width="2" fill="none" test:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/201
4/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an html5 document the attribute has to be accessed with test:foo since namespaces are not supported.
... <!doctype html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/201
4/test" width="
40" height="
40"> <circle id="target" cx="12" cy="12" r="10" stroke="#
444" stroke-width="2" fill="none" test:foo="foo value"/> </svg> <script type="text/javascript"> var ns = 'http://www.example.com/201
4/test'; var circle = document.getelementbyid( 'target' ); console.log('attribute value: ' + circle.getattribute('test:foo')); </script> </body> </html> notes namespaces are only supported in xml documents.
...And 2 more matches
GamepadEvent - Web APIs
draft initial definition browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgamepadeventchrome full support 35 full support 35 no support 21 — 3
4prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤18firefox full support 29 full support 29 no support 2
4 — 28disabled disabled from version 2
4 until version 28 (exclusive): this feature is behind the dom.g...
...webview android no support nochrome android full support yesfirefox android full support 32opera android full support 22 full support 22 no support 1
4 — 21prefixed prefixed implemented with the vendor prefix: webkitsafari ios full support 10.3samsung internet android full support yesgamepadevent() constructorchrome full support 35edge full support 12firefox ...
... full support 29 full support 29 no support 2
4 — 28disabled disabled from version 2
4 until version 28 (exclusive): this feature is behind the dom.gamepad.enabled preference (needs to be set to true).
...And 2 more matches
HTMLHtmlElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlhtmlelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...And 2 more matches
HTMLImageElement.currentSrc - Web APIs
one is 200px wide and the other is
400px wide.
... the sizes attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under
400px wide; otherwise, the image is drawn at 90% width of the document.
... html <img src="/files/16797/clock-demo-
400px.png" alt="clock" srcset="/files/1686
4/clock-demo-200px.png 200w, /files/16797/clock-demo-
400px.png
400w" sizes="(max-width:
400px) 50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the
400px image!"; } document.body.appendchild(p); result specifications specification status comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification.
...And 2 more matches
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 16:15, decrementing the time by 3 * 900, or
45 minutes.
... mytime.step(), with no parameter, would have resulted in 16:
45, as n defaults to 1.
... example click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and
400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="
400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrementer" min="-2" max="15"> </label> </p> <input type="button" value="decrement" id="thebutton"> javascript /* make the button call the function */ let...
...And 2 more matches
HTMLOListElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...And 2 more matches
HTMLSelectElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlselectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...And 2 more matches
HTMLTextAreaElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltextareaelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x...
...And 2 more matches
IDBDatabase.transaction() - Web APIs
if you need to open the object store in readwrite mode to change data, you would use the following: var transaction = db.transaction('my-store-name', "readwrite"); as of firefox
40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers.
...in firefox
40+ the complete event is fired after the os has been told to write the data but potentially before that data has actually been flushed to disk.
...for a complete example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...And 2 more matches
IDBDatabase.version - Web APIs
the version property of the idbdatabase interface is a 6
4-bit integer that contains the version of the connected database.
... example // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); // these two event handlers act on the database // being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, which should be "
4" console.log(db.version); }; specifications specification status comment indexed database api 2.0the definition of 'version' in that specification.
...And 2 more matches
IDBObjectStore.createIndex() - Web APIs
locale currently firefox-only (
43+), this allows you to specify a locale for the index.
...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 1176165.) 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.
... for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); // two event handlers for opening the database.
...And 2 more matches
KeyboardEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y=...
..."1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d
4dde
4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} co...
...gecko does support the scroll lock key if an external keyboard which has an f1
4 key is connected.
...And 2 more matches
Node.nodeType - Web APIs
node.cdata_section_node
4 a cdatasection, such as <!cdata[[ … ]]>.
...attributes no longer implement the node interface as of dom
4.
...removed in dom
4.
...And 2 more matches
Node - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties in addition to the properties below, node inherits properties from its parent, eventtarget.
...possible values are: name value element_node 1 attribute_node 2 text_node 3 cdata_section_node
4 entity_reference_node 5 entity_node 6 processing_instruction_node 7 comment_node 8 document_node 9 document_type_node 10 document_fragment_node 11 notation_node 12 node.nodevalue returns / sets the value of the current node.
...And 2 more matches
RTCIceCandidateStats.address - Web APIs
while it's preferred that the address be specified as an ipv
4 or ipv6 numeric address, a fully-qualified domain name can be used as well.
... syntax candidateaddress = rtcicecandidatestats.address; value either an ipv
4 or ipv6 address or a fully-qualified domain name, which corresponds to the candidate.
... if the value of address is comprised entirely of digits from 0-9 with periods as separators, the value is interpreted as an ipv
4 address.
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
... 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53"...
... text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/...
...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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/...
...><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseli...
...ne="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" targe...
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfeblendelement" target="_top"><rect x="31...
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line ...
...x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="mid...
...dle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" target=...
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="...
...121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfecompositeelement" target="_top"...
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-basel...
...ine="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelem...
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,...
...25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/...
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30...
... 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53...
..." text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="...
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,...
...30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e...
...53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href...
...And 2 more matches
SVGTSpanElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391"...
...And 2 more matches
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x=...
...And 2 more matches
SVGTextPositioningElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391"...
...And 2 more matches
ScriptProcessorNode.bufferSize - Web APIs
note: as of the august 29 201
4 web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audio workers.
...its value can be a power of 2 value in the range 256–1638
4.
... syntax var audioctx = new audiocontext(); var scriptnode = audioctx.createscriptprocessor(
4096, 1, 1); console.log(scriptnode.buffersize); value an integer.
...And 2 more matches
ScriptProcessorNode - Web APIs
note: as of the august 29 201
4 web audio api spec publication, this feature has been marked as deprecated, and was replaced by audioworklet (see audioworkletnode).
...the buffer size must be a power of 2 between 256 and 1638
4, that is 256, 512, 102
4, 20
48,
4096, 8192 or 1638
4.
...its value can be a power of 2 value in the range 256–1638
4.
...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, windowbase6
4, and windoweventhandlers.
... event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from windowtimers, windowbase6
4, and windoweventhandlers.
... methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from windowtimers, windowbase6
4, and windoweventhandlers.
...And 2 more matches
SubtleCrypto.digest() - Web APIs
supported values are: sha-1 (but don't use this in cryptographic applications) sha-256 sha-38
4 sha-512.
... sha-1 this algorithm is specified in fips 180-
4, section 6.1, and produces an output 160 bits long.
... sha-256 this algorithm is specified in fips 180-
4, section 6.2, and produces an output 256 bits long.
...And 2 more matches
SubtleCrypto.exportKey() - Web APIs
*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase6
4 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase6
4}\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.
... */ window.crypto.subtle.generatekey( { name: "rsa-pss", // consider using a
4096-bit key for systems that require long-term security moduluslength: 20
48, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".pkcs8"); exportbutton.addeventlistener("click", () => { exportcryptokey(keypair.privatekey); }); }); subjectpublickeyinfo export this example exports an rsa public encryption key as a pem-encoded subjectpublickeyinfo object.
...*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "spki", key ); const exportedasstring = ab2str(exported); const exportedasbase6
4 = window.btoa(exportedasstring); const pemexported = `-----begin public key-----\n${exportedasbase6
4}\n-----end public key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate an encrypt/decrypt key pair, then set up an event listener on the "export" button.
...And 2 more matches
SubtleCrypto.wrapKey() - Web APIs
to use aes-kw, the input must be a multiple of 6
4 bits.
... aes-kw is specified in rfc 339
4.
...*/ window.crypto.subtle.generatekey( { name: "rsa-pss", // consider using a
4096-bit key for systems that require long-term security moduluslength: 20
48, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["sign", "verify"] ) .then((keypair) => { return wrapcryptokey(keypair.privatekey); }) .then((wrappedkey) => { console.log(wrappedkey); }); subjectpublickeyinfo wrap this example wraps an rsa public encryption key.
...And 2 more matches
TextDecoder() - Web APIs
f-8", "utf8" 'utf-8' "866", "cp866", "csibm866", "ibm866" 'ibm866' "csisolatin2", "iso-8859-2", "iso-ir-101", "iso8859-2", "iso88592", "iso_8859-2", "iso_8859-2: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' "csisolatin
4", "iso-8859-
4", "iso-ir-110", "iso8859-
4", "iso8859
4", "iso_8859-
4", "iso_8859-
4:1988", "l
4", "latin
4" 'iso-8859-
4' "csisolatincyrillic", "cyrillic", "iso-8859-5", "iso-ir-1
44", "iso88595", "iso_8859-5", "iso_8859-5:1988" 'iso-8859-5' "arabic", "asmo-708", "csiso88596e", "csiso88596i", "csisolatinarabic", "ecma-11
4", "iso-8859-6", "iso-8859-6-e", "iso-8859-6-i", "i...
...-8", "iso-8859-8-e", "iso-ir-138", "iso8859-8", "iso88598", "iso_8859-8", "iso_8859-8:1988", "visual" 'iso-8859-8' "csiso88598i", "iso-8859-8-i", "logical" 'iso-8859-8i' "csisolatin6", "iso-8859-10", "iso-ir-157", "iso8859-10", "iso885910", "l6", "latin6" 'iso-8859-10' "iso-8859-13", "iso8859-13", "iso885913" 'iso-8859-13' "iso-8859-1
4", "iso8859-1
4", "iso88591
4" 'iso-8859-1
4' "csisolatin9", "iso-8859-15", "iso8859-15", "iso885915", "l9", "latin9" 'iso-8859-15' "iso-8859-16" 'iso-8859-16' "cskoi8r", "koi", "koi8", "koi8-r", "koi8_r" 'koi8-r' "koi8-u" 'koi8-u' "csmacintosh", "mac", "macintosh", "x-mac-roman" 'macintosh' "dos-87
4", "is...
...o-8859-11", "iso8859-11", "iso885911", "tis-620", "windows-87
4" 'windows-87
4' "cp1250", "windows-1250", "x-cp1250" 'windows-1250' "cp1251", "windows-1251", "x-cp1251" 'windows-1251' "ansi_x3.
4-1968", "ascii", "cp1252", "cp819", "csisolatin1", "ibm819", "iso-8859-1", "iso-ir-100", "iso8859-1", "iso88591", "iso_8859-1", "iso_8859-1:1987", "l1", "latin1", "us-ascii", "windows-1252", "x-cp1252" 'windows-1252' "cp1253", "windows-1253", "x-cp1253" 'windows-1253' "cp125
4", "csisolatin5", "iso-8859-9", "iso-ir-1
48", "iso8859-9", "iso88599", "iso_8859-9", "iso_8859-9:1989", "l5", "latin5", "windows-125
4", "x-cp125
4" 'windows-125
4' "cp1255", "windows-1255", "x-cp1255" 'windows-1255' "cp1256...
...And 2 more matches
Lighting in WebGL - Web APIs
stride, offset); gl.enablevertexattribarray( programinfo.attriblocations.vertexnormal); } finally, we need to update the code that builds the uniform matrices to generate and deliver to the shader a normal matrix, which is used to transform the normals when dealing with the current orientation of the cube in relation to the light source: const normalmatrix = mat
4.create(); mat
4.invert(normalmatrix, modelviewmatrix); mat
4.transpose(normalmatrix, normalmatrix); ...
... gl.uniformmatrix
4fv( programinfo.uniformlocations.normalmatrix, false, normalmatrix); update the shaders now that all the data the shaders need is available to them, we need to update the code in the shaders themselves.
...let's take a look at the code: const vssource = ` attribute vec
4 avertexposition; attribute vec3 avertexnormal; attribute vec2 atexturecoord; uniform mat
4 unormalmatrix; uniform mat
4 umodelviewmatrix; uniform mat
4 uprojectionmatrix; varying highp vec2 vtexturecoord; varying highp vec3 vlighting; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vtexturecoord = atexturecoord; // apply lighting effect highp vec3 ambientlight = vec3(0.3, 0.3, 0.3); highp vec3 directionallightcolor = vec3(1, 1, 1); ...
...And 2 more matches
Window - Web APIs
iv 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="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces.
... window.dommatrix read only returns a reference to a dommatrix object, which represents
4x
4 matrices, suitable for 2d and 3d operations.
... window.dommatrixreadonly read only returns a reference to a dommatrixreadonly object, which represents
4x
4 matrices, suitable for 2d and 3d operations.
...And 2 more matches
Using XMLHttpRequest - Web APIs
method: post; encoding type: multipart/form-data: content-type: multipart/form-data; boundary=---------------------------31
4911788813839 -----------------------------31
4911788813839 content-disposition: form-data; name="foo" bar -----------------------------31
4911788813839 content-disposition: form-data; name="baz" the first line.
... -----------------------------31
4911788813839-- however, if you are using the get method, a string like the following will be simply added to the url: ?foo=bar&baz=the%20first%20line.%0athe%20second%20line.
...this is what i suppose...: */ /* "
4\3\7 - einstein said e=mc2" ----> "
4\\3\\7\ -\ einstein\ said\ e\=mc2" */ return stext.replace(/[\s\=\\]/g, "\\$&"); } function submitrequest (otarget) { var nfile, sfieldtype, ofield, osegmreq, ofile, bispost = otarget.method.tolowercase() === "post"; /* console.log("ajaxsubmit - serializing form..."); */ this.contenttype = bispost && otarget.enctype ?
...And 2 more matches
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
for example, consider a device which uses a 2560x1
440 pixel frame buffer (which is used to render two views, for the left and right eyes, side by side each at a resolution of 1280x1
440 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 6
40x720 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 6
40x720 portion of the buffer with the viewport's x and y at 0, the width at 6
40, and the height set to 720.
...And 2 more matches
ARIA: grid role - Accessibility
d> <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 36</th> <td role="gridcell" tabindex="-1"> 2 </td> <td role="gridcell" tabindex="-1"> 3 </td> <td role="gridcell" tabindex="-1">
4 </td> <td role="gridcell" tabindex="-1"> 5 </td> <td role="gridcell" tabindex="-1"> 6 </td> <td role="gridcell" tabindex="-1"> 7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 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"> 1
4 </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"> 16 </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"> 2
4 </td> <td role="gridcell" tabindex="-1"> 25 </td> <td role="gridcell" tabindex="-1"> 26 </td> <td role="gridcell" tabindex="-1"> 27 </td> <td role="gridcell" tabindex="-1"> 28 </td> <td role="gridcell" tabindex="-1"> 29 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week
40</th> <td role="gridcell" tabindex="-1"> 30 </td> ...
...And 2 more matches
Text labels and names - Accessibility
examples the following example show a simple image map (taken from h2
4: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library.
... select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="3
4,3
4,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example.
... see also <area> h2
4: providing text alternatives for the area elements of image maps dialogs should be labeled for any container whose contents act as a dialog box (for example, a modal dialog asking the user to make a choice or respond to an action being taken), give it a descriptive label or name, so that assistive technology users can easily discover what its purpose is.
...And 2 more matches
:visited - CSS: Cascading Style Sheets
living standard selectors level
4the definition of ':visited' in that specification.
...firefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:visitedchrome full support 1edge full support 12firefox full support 1ie full support
4opera full support 3.5safari full support 1webview android full support
4.
4chrome android full support 18firefox android full support
4opera android full suppo...
... no support noopera full support 15notes full support 15notes notes chromium has never matched <link> elements with link pseudo-classes.safari full support 12webview android full support
4.
4notes full support
4.
4notes notes chromium has never matched <link> elements with link pseudo-classes.chrome android full support 18notes full support 18notes notes chromium has never matched <link> elements with link pseudo-classes.firefox android ...
...And 2 more matches
Using URL values for the cursor property - CSS: Cascading Style Sheets
mac support was added in gecko 2 (firefox
4).
...an example of the css3 syntax is: .foo { cursor: auto; cursor: url(cursor1.png)
4 12, auto; } .bar { cursor: pointer; cursor: url(cursor2.png) 2 2, pointer; } /* falls back onto 'auto' and 'pointer' in ie, but must be set separately */ the first number is the x-coordinate, and the second number is the y-coordinate.
... the example will set the hotspot to be the pixel at (
4,12) from the top left (0,0).
...And 2 more matches
Variable fonts guide - CSS: Cascading Style Sheets
that file would be larger than a single font, but in most cases smaller or about the same size as the
4 you might load for body copy.
...for a long time in css there has existed the ability to specify this via the font-weight property, which takes numeric values ranging from 100 to 900 in increments of 100, and keywords like normal or bold, which are simply aliases for their corresponding numeric values (
400 and 700 in this case).
... font-style: oblique 1
4deg; font-variation-settings: 'slnt' 1
4; the following live example's css can be edited to allow you to play with font slant/oblique values.
...And 2 more matches
Stacking context example 2 - CSS: Cascading Style Sheets
what can be considered strange is that div #2 (z-index: 2) is above div #
4 (z-index: 10), despite their z-index values.
...div #
4 belongs to the stacking context created by div #3, and as explained previously div #3 (and all its content) is under div #2.
... to better understand the situation, this is the stacking context hierarchy: root stacking context div #2 (z-index 2) div #3 (z-index 1) div #
4 (z-index 10) note: it is worth remembering that in general the html hierarchy is different from the stacking context hierarchy.
...And 2 more matches
animation - CSS: Cascading Style Sheets
x; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%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%2c
4%20l7%2c
4%20l7%2c13%20l5%2c13%20z%20m9%2c
4%20l11%2c
4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c
4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a...
...%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c
4%20l7%2c
4%20l7%2c13%20l5%2c13%20z%20m9%2c
4%20l11%2c
4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c
4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarg...
...et%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%2c
4%20l7%2c
4%20l7%2c13%20l5%2c13%20z%20m9%2c
4%20l11%2c
4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c
4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; ...
...And 2 more matches
border-bottom-left-radius - CSS: Cascading Style Sheets
an arc of circle is used as the border div { border-bottom-left-radius:
40px
40px; } .
... an arc of ellipse is used as the border div { border-bottom-left-radius:
40px 20px; } .
... the box is a square: an arc of circle is used as the border div { border-bottom-left-radius:
40%; } .
...And 2 more matches
border-bottom-right-radius - CSS: Cascading Style Sheets
an arc of circle is used as the border div { border-bottom-right-radius:
40px
40px; } .
... an arc of ellipse is used as the border div { border-bottom-right-radius:
40px 20px; } .
... the box is a square: an arc of circle is used as the border div { border-bottom-right-radius:
40%; } .
...And 2 more matches
border-radius - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius syntax /* the syntax of the first radius allows one to four values */ /* radius is set for all
4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px
4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px
4px; /* the syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-r...
...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.
...And 2 more matches
image-set() - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 specifications specification status comment css images module level
4the definition of 'the image-set() notation' in that specification.
...ed 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 11076
46.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 implem...
...see bug 16093
4.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 11076
46.opera android full support 1
4prefixed ...
...And 2 more matches
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=160,120,320,2
40 /* results in a 320x2
40 image at x=160 and y=120 */ xywh=pixel:160,120,320,2
40 /* results in a 320x2
40 image at x=160 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/16
412/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.
...And 2 more matches
<length> - CSS: Cascading Style Sheets
ic equal to the used advance measure of the "水" (cjk water ideograph, u+6c3
4) glyph found in the font used to render it.
...1cm = 96px/2.5
4.
...1q = 1/
40th of 1cm.
...And 2 more matches
offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(
45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20
400,0 q 300,100
400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segmen...
...<string> )<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <length-percentage> = <length> | <percentage><fill-rule> = nonzero | evenodd<inset()> = inset( <length-percentage>{1,
4} [ round <'border-radius'> ]?
... <svg xmlns="http://www.w3.org/2000/svg" width="700" height="
450" viewbox="350 0 1
400 900"> <title>house and scissors</title> <rect x="595" y="
423" width="610" height="377" fill="blue" /> <polygon points="506,
423 900,190 129
4,
423" fill="yellow" /> <polygon points="993,2
45 993,190 1086,190 1086,300" fill="red" /> <path id="house" d="m900,190 l993,2
45 v201 a11,11 0 0,1 100
4,190 h1075 a11,11 0...
...And 2 more matches
opacity - CSS: Cascading Style Sheets
for example: background: rgba(0, 0, 0, 0.
4); accessibility concerns if text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
...in order to meet current web content accessibility guidelines (wcag), a ratio of
4.5:1 is required for text content and 3:1 for larger text such as headings.
... large text is defined as 18.66px and bold or larger, or 2
4px or larger.
...And 2 more matches
Getting Started - Developer guides
if the state has the value of xmlhttprequest.done (corresponding to
4), that means that the full server response was received and it's ok for you to continue processing it.
...} the full list of the readystate values is documented at xmlhttprequest.readystate and is as follows: 0 (uninitialized) or (request not initialized) 1 (loading) or (server connection established) 2 (loaded) or (request received) 3 (interactive) or (processing request)
4 (complete) or (request finished and response is ready) next, check the http response status codes of the http response.
... // for example, the response may have a
40
4 (not found) // or 500 (internal server error) response code.
...And 2 more matches
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/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b
42
4a.m
4v" type="video/mp
4"> </video> <canvas id="my-canvas" width="
480" height="270"></canvas> javascript this code handles altering the frames.
... 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.height); var l = frame.data.length /
4; for (var i = 0; i < l; i++) { var grey = (frame.data[i *
4 + 0] + frame.data[i *
4 + 1] + frame.data[i *
4 + 2]) / 3; frame.data[i *
4 + 0] = grey; frame.data[i *
4 + 1] = grey; frame.data[i *
4 + 2] = grey; } this.ctx1.putimagedata(frame, 0, 0); return; } }; once the page has loaded you can call processor.doload() result this is a pretty simp...
... html <video id="my-video" controls src="https://udn.realityripple.com/samples/6f/08625b
42
4a.m
4v"> </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/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b
42
4a.m
4v" type="video/mp
4"> </video> <div class="playable...
...And 2 more matches
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns
4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm 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 scal...
...e=6
40:360 -b:v 750k -dash 1 video_6
40x360_750k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns
4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=6
40:360 -b:v 1000k -dash 1 video_6
40x360_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.
... ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ -g 150 -tile-columns
4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \ -an -vf scale=6
40:360 -b:v 750k -dash 1 video_6
40x360_750k.webm \ -an -vf scale=6
40:360 -b:v 1000k -dash 1 video_6
40x360_1000k.webm \ -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm 2.
...And 2 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
in html
4.01, id and name could both be used on <a>, as long as they had identical values.
... linking to telephone numbers <a href="tel:+
49.157.0156">+
49 157 0156</a> <a href="tel:+1(555)5309">(555) 5309</a> tel: link behavior varies with device capabilities: cellular devices autodial the number.
... webaim: "skip navigation" links how-to: use skip navigation links mdn / understanding wcag, guideline 2.
4 explanations understanding success criterion 2.
4.1 size and proximity size interactive elements, like links, should provide an area large enough that it is easy to activate them.
...And 2 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
<img src="https://udn.realityripple.com/samples/6c/98
485e5d8a.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/98
485e5d8a.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/869e27c81e.png" alt="mdn logo" srcset="/static/external/6c/6c98
485e5d8acac9fecd782
4ce30c9587f0d85
48b9
46ee9fb1293d2eccdb6cf1.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
for example: var datecontrol = document.queryselector('input[type="date"]'); datecontrol.value = '2017-06-01'; console.log(datecontrol.value); // prints "2017-06-01" console.log(datecontrol.valueasnumber); // prints 1
496275200000, a unix timestamp this code finds the first <input> element whose type is date, and sets its value to 2017-06-01 (june 1st, 2017).
... for date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,
400,000 times the step value (the underlying numeric value is in milliseconds).
...in the following example, we set a minimum date of 2017-0
4-01 and a maximum date of 2017-0
4-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="2017-0
4-01" max="2017-0
4-30"> </label> </form> the result is that only days in april 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside april 2017 can't be selected in tte picker widget.
...And 2 more matches
<input type="text"> - HTML: Hypertext Markup Language
to see the status of the change being implemented in firefox, see bug 1
490661.
... the example below requires that the entered value be
4–8 characters in length.
... <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="10" placeholder="username" minlength="
4" maxlength="8"> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: if you try to submit the form with less than
4 characters, you'll be given an appropriate error message (which differs between browsers).
...And 2 more matches
<keygen> - HTML: Hypertext Markup Language
currently, the user is given a choice between "high" strength (20
48 bits) and "medium" strength (102
4 bits).
...the value of the pqg parameter is the the base6
4 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 "secp38
4r1" for high, and the curve named "secp256r1" for medium keys.
...And 2 more matches
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
html
4 the <tfoot> element cannot be placed after any <tbody> and <tr> element.
... deprecated attributes align deprecated since html
4obsolete since html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled.
... char deprecated since html
4obsolete since html5 this attribute is used to set the character to align the cells in a column on.
...And 2 more matches
Microformats - HTML: Hypertext Markup Language
dt-published when the entry was published p-summary short entry summary e-content full content of the entry parsed reply h-entry example <div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e8
49f
492b5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a></span> replied to <a class="u-in-reply-to" href="/docs/web/html/microformats">a post on <strong>developer.mozilla.org</strong> </a>: </p> <p class="p-name e-content">hey thanks for making this microformats resource</p> <p> <a href="https:...
...//quickthoughts.jgregorymcverry.com/profile/jgmac1106">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-31t1
4: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-31t1
4:19:09+0000" ], "content": [ { "html": "hey thanks for making this microformats resourc...
...e", "value": "hey thanks for making this microformats resource", "lang": "en" } ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "greg mcverry" ], "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e8
49f
492b5bc7e6a630/thumb.jpg" ], "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ] }, "lang": "en", "value": "greg mcverry" } ] }, "lang": "en" } h-feed the h-feed is a stream or feed of h-entry posts, like complete posts on a home page or archive pages, or summaries or other brief lists of posts example h-feed <div class="h-feed"> <h1 ...
...And 2 more matches
List of default Accept values - HTTP
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 specific values.
... user agent value comment firefox 3.6 and later audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5 see bug
489071 source safari, chrome */* source internet explorer 8 or earlier no support for <audio> internet explorer 9 ?
...And 2 more matches
Date - HTTP
"0
4" or "23".
... <year>
4 digit year number, e.g.
..."0
4" or "59".
...And 2 more matches
ETag - HTTP
they are a string of ascii characters placed between double quotes, like "675af3
4563dc-tr3
4".
... examples etag: "33a6
4df551
425fcc55e
4d
42a1
48795d9f25f89d
4" 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: "33a6
4df551
425fcc55e
4d
42a1
48795d9f25f89d
4" 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
If-Modified-Since - HTTP
if the request has not been modified since, the response will be a 30
4 without any body; the last-modified response header of a previous request will contain the date of last modification.
..."0
4" or "23".
... <year>
4 digit year number, e.g.
...And 2 more matches
If-None-Match - HTTP
when the condition fails for get and head methods, then the server must return http status code 30
4 (not modified).
... for methods that apply server-side changes, the status code
412 (precondition failed) is used.
... note that the server generating a 30
4 response must generate any of the following header fields that would have been sent in a 200 (ok) response to the same request: cache-control, content-location, date, etag, expires, and vary.
...And 2 more matches
If-Range - HTTP
it is a string of ascii characters placed between double quotes (like "675af3
4563dc-tr3
4") and may be prefixed by w/ to indicate that the weak comparison algorithm should be used.
..."0
4" or "23".
... <year>
4 digit year number, e.g.
...And 2 more matches
Proxy-Authorization - HTTP
the http proxy-authorization request header contains the credentials to authenticate a user agent to a proxy server, usually after the server has responded with a
407 proxy authentication required status and the proxy-authenticate header.
... the resulting string is base6
4 encoded (ywxhzgrpbjpvcgvuc2vzyw1l).
... note: base6
4 encoding does not mean encryption or hashing!
...And 2 more matches
Public-Key-Pins - HTTP
header type response header forbidden header name no syntax public-key-pins: pin-sha256="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha256="<pin-value>" the quoted string is the base6
4 encoded subject public key information (spki) fingerprint.
... public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p
4hhybnf6lhkmjahkhpgpwe="; max-age=518
4000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
... the second pin declaration pin-sha256="m8hztczm3eluxkcjr2s5p
4hhybnf6lhkmjahkhpgpwe=" also pins the backup key.
...And 2 more matches
User-Agent - HTTP
the ua string of firefox is broken down into
4 components: mozilla/5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion mozilla/5.0 is the general token that says the browser is mozilla-compatible.
... examples mozilla/5.0 (windows nt 6.1; win6
4; x6
4; 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 x86_6
4) applewebkit/537.36 (khtml, like gecko) chrome/51.0.270
4.103 safari/537.36 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>".
...And 2 more matches
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: 6
4 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: 557
43 connection: keep-alive cache-control: s-maxage=300, public, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:37:18 gmt etag: "2e77ad1dc6ab0b53a2996dfd
4653c1c3" 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"> <he...
...ad> <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, 06 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...
...And 2 more matches
Assertions - JavaScript
/\d+(?!\.)/.exec('3.1
41') matches "1
41" but not "3.
... //
4) use \b to match characters inside borders of an entity.
... fixedmultiline = buggymultiline.replace(/\bo/gim,'e'); console.log(
4, fixedmultiline); // fix 'greon' but does not touch 'on'.
...And 2 more matches
Private class fields - JavaScript
class classwithprivatestaticfield { static #private_static_field static publicstaticmethod() { classwithprivatestaticfield.#private_static_field =
42 return classwithprivatestaticfield.#private_static_field } } console.assert(classwithprivatestaticfield.publicstaticmethod() ===
42) private static fields are added to the class constructor at class evaluation time.
... class baseclasswithprivatestaticfield { static #private_static_field static basepublicstaticmethod() { this.#private_static_field =
42 return this.#private_static_field } } class subclass extends baseclasswithprivatestaticfield { } let error = null try { subclass.basepublicstaticmethod() } catch(e) { error = e} console.assert(error instanceof typeerror) private instance fields private instance fields are declared with # names (pronounced "hash names"), which are identifiers prefixed with #.
... class classwithprivatefield { #privatefield constructor() { this.#privatefield =
42 this.#randomfield = 666 // syntax error } } const instance = new classwithprivatefield() instance.#privatefield ===
42 // syntax error private methods private static methods like their public equivalent, private static methods are called on the class itself, not instances of the class.
...And 2 more matches
Array.prototype.every() - JavaScript
var len = o.length >>> 0; //
4.
... function isbigenough(element, index, array) { return element >= 10; } [12, 5, 8, 130,
44].every(isbigenough); // false [12, 5
4, 18, 130,
44].every(isbigenough); // true using arrow functions arrow functions provide a shorter syntax for the same test.
... [12, 5, 8, 130,
44].every(x => x >= 10); // false [12, 5
4, 18, 130,
44].every(x => x >= 10); // true affecting initial array (modifying, appending, and deleting) the following examples tests the behaviour of the every method when the array is modified.
...And 2 more matches
Array.from() - JavaScript
if (arraylikeoriterator == null && !isiterator) { throw new typeerror( 'array.from requires an array-like object or iterator - not null or undefined' ); } //
4.
... // 1
4.
... len, setgetitemhandler(isiterator, items), isiterator, mapfn ); }; })(); } examples array from a string array.from('foo'); // [ "f", "o", "o" ] array from a set const set = new set(['foo', 'bar', 'baz', 'foo']); array.from(set); // [ "foo", "bar", "baz" ] array from a map const map = new map([[1, 2], [2,
4], [
4, 8]]); array.from(map); // [[1, 2], [2,
4], [
4, 8]] const mapper = new map([['1', 'a'], ['2', 'b']]); array.from(mapper.values()); // ['a', 'b']; array.from(mapper.keys()); // ['1', '2']; array from an array-like object (arguments) function f() { return array.from(arguments); } f(1, 2, 3); // [ 1, 2, 3 ] using arrow functions and array.from() // using an arrow function as the map ...
...And 2 more matches
Array.prototype.sort() - JavaScript
the following function will sort the array in ascending order (if it doesn't contain infinity and nan): function comparenumbers(a, b) { return a - b; } the sort method can be conveniently used with function expressions: var numbers = [
4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); console.log(numbers); // [1, 2, 3,
4, 5] es2015 provides arrow function expressions with even shorter syntax.
... let numbers = [
4, 2, 5, 1, 3]; numbers.sort((a, b) => a - b); console.log(numbers); // [1, 2, 3,
4, 5] objects can be sorted, given the value of one of their properties.
... var items = [ { name: 'edward', value: 21 }, { name: 'sharpe', value: 37 }, { name: 'and', value:
45 }, { name: 'the', value: -12 }, { name: 'magnetic', value: 13 }, { name: 'zeros', value: 37 } ]; // sort by value items.sort(function (a, b) { return a.value - b.value; }); // sort by name items.sort(function(a, b) { var namea = a.name.touppercase(); // ignore upper and lowercase var nameb = b.name.touppercase(); // ignore upper and lowercase if (namea < nameb) { return -1; } if (namea > nameb) { return 1; } // names must be equal return 0; }); examples creating, displaying, and sorting an array the following example creates four arrays and displays the original array, then the sorted arrays.
...And 2 more matches
Array - JavaScript
fruits.length = 10 console.log(fruits) // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x
4] console.log(object.keys(fruits)) // ['0', '1', '2', '5'] console.log(fruits.length) // 10 console.log(fruits[8]) // undefined decreasing the length property does, however, delete elements.
...the first move is made by copying the 'p' in board[6][
4] to board[
4][
4].
... the old position at [6][
4] is made blank.
...And 2 more matches
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 = 123
456789123
456789n; // german uses period for thousands console.log(bigint.tolocalestring('de-de')); // → 123.
456.789.123.
456.789 // arabic in most arabic speaking countries uses eastern arabic digits console.log(bigint.tolocalestring('ar-eg')); // → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩ // india uses thousands/lakh/crore separators console.log(bigint.tolocalestring('en-in')); // → ...
...1,23,
45,67,89,12,3
4,56,789 // the nu extension key requests a numbering system, e.g.
... chinese decimal console.log(bigint.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六,七八九,一二三,四五六,七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(bigint.tolocalestring(['ban', 'id'])); // → 123.
456.789.123.
456.789 using options the results provided by tolocalestring can be customized using the options argument: var bigint = 123
456789123
456789n; // request a currency format console.log(bigint.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.
456.789.123.
456.789,00 € // the japanese yen doesn't use a minor unit console.log(bigint.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ￥123,
456,78...
...And 2 more matches
BigInt - JavaScript
const thebiggestint = 900719925
47
40991n const alsohuge = bigint(900719925
47
40991) // ↪ 900719925
47
40991n const hugestring = bigint("900719925
47
40991") // ↪ 900719925
47
40991n const hugehex = bigint("0x1fffffffffffff") // ↪ 900719925
47
40991n const hugebin = bigint("0b11111111111111111111111111111111111111111111111111111") // ↪ 900719925
47
40991n bigint is similar to number in some ways, but also differs in a few key m...
... const previousmaxsafe = bigint(number.max_safe_integer) // ↪ 900719925
47
40991n const maxplusone = previousmaxsafe + 1n // ↪ 900719925
47
40992n const thefuture = previousmaxsafe + 2n // ↪ 900719925
47
40993n, this works now!
... const multi = previousmaxsafe * 2n // ↪ 1801
4398509
481982n const subtr = multi – 10n // ↪ 1801
4398509
481972n const mod = multi % 10n // ↪ 2n const bign = 2n ** 5
4n // ↪ 1801
4398509
48198
4n bign * -1n // ↪ –1801
4398509
48198
4n the / operator also works as expected with whole numbers.
...And 2 more matches
Error.prototype.stack - JavaScript
argument values in the stack: prior to firefox 1
4, the function name would be followed by the argument values converted to string in parentheses immediately before the at (@) sign.
... while an object (or array, etc.) would appear in the converted form "[object object]", and as such could not be evaluated back into the actual objects, scalar values could be retrieved (though it may be — it is still possible in firefox 1
4 — easier to use arguments.callee.caller.arguments, as could the function name be retrieved by arguments.callee.caller.name).
...thus, in firefox 1
4 and later this is less of an issue.
...And 2 more matches
Intl.DateTimeFormat() constructor - JavaScript
syntax new intl.datetimeformat([locales[, options]]) parameters locales optional a string with a bcp
47 language tag, or an array of such strings.
...possible values include: "h11", "h12", "h23", "h2
4".
... hour12 whether to use 12-hour time (as opposed to 2
4-hour time).
...And 2 more matches
Intl.PluralRules() constructor - JavaScript
a string with a bcp
47 language tag, or an array of such strings.
...possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso
4217 currency code list (2 if the list doesn't provide that information).
...possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso
4217 currency code list (2 if the list doesn't provide that information); the default for percent formatting is the larger of minimumfractiondigits and 0.
...And 2 more matches
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\u0600-\u060
4\u070f\u17b
4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; json.parse = function(text, reviver) { // the parse method takes a text and an optional reviver function, and returns ...
... 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(16)).slice(-
4) ); }); } // in the second stage, we run the text against regular expressions that look // for non-json patterns.
... // we split the second stage into
4 regexp operations in order to work around // crippling inefficiencies in ie's and safari's regexp engines.
...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(2006, 0, 2, 15,
4, 5)) // '"2006-01-02t15:0
4: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","bar"]' json.st...
...), new weakset([{a: 1}]), new weakmap([[{a: 1}, 2]])]); // '[{},{},{},{}]' // typedarray json.stringify([new int8array([1]), new int16array([1]), new int32array([1])]); // '[{"0":1},{"0":1},{"0":1}]' json.stringify([new uint8array([1]), new uint8clampedarray([1]), new uint16array([1]), new uint32array([1])]); // '[{"0":1},{"0":1},{"0":1},{"0":1}]' json.stringify([new float32array([1]), new float6
4array([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({ [symbol('foo')]: 'foo' }); // '{}' json.stringify({ [symbol.for('foo')]: 'foo' }, [symbol.for('foo')]); // '{}' json.stringify({ [symbol.for('foo')]: 'foo' }, function(k, v) {...
... example replacer, as a function function replacer(key, value) { // filtering out properties if (typeof value === 'string') { return undefined; } return value; } var foo = {foundation: 'mozilla', model: 'box', week:
45, transport: 'car', month: 7}; json.stringify(foo, replacer); // '{"week":
45,"month":7}' example replacer, as an array if replacer is an array, the array's values indicate the names of the properties in the object that should be included in the resulting json string.
...And 2 more matches
Math.fround() - JavaScript
description javascript uses 6
4-bit double floating-point numbers internally, which offer a very high precision.
...this can create confusion: checking a 6
4-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 6
4-bit float to a 32-bit float.
...And 2 more matches
WebAssembly.Instance - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0instance() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support ...
...
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0exportschrome full support ...
...And 2 more matches
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 6
4kib in size).
... examples using grow the following example creates a new webassembly memory instance with an initial size of 1 page (6
4kib), and a maximum size of 10 pages (6
40kib).
... var memory = new webassembly.memory({initial:1, maximum:10}); we can then grow the instance by one page like so: const bytesperpage = 6
4 * 102
4; 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.
...And 2 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
basic example <svg width="120" height="2
40" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-colo...
... basic example <?xml version="1.0" standalone="no"?> <svg width="120" height="2
40" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="radialgradient1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> <radialgradient id="radialgradient2" cx="0.25" cy="0.25" r="0.25"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </rad...
..."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> screenshotlive sample if the focal point is moved outside the circle described earlier, it's impossible for the gradient to be rendered correctly, so the spot will be assumed to be within the edge of the circle.
...And 2 more matches
Transport Layer Security - Web security
the internet engineering task force (ietf) specified tls 1.0 in rfc 22
46 in january, 1999.
... the current version of tls is 1.3 (rfc 8
446).
...tls-encrypted web traffic is by convention exchanged on port
443 by default, while unencrypted http uses port 80 by default.
...And 2 more matches
widget - Archive of obsolete content
usage "widgets" are small pieces of content that live in the firefox
4 add-on bar.
...will not be anchored: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png"), panel: clockpanel, onclick: function() { // will not be anchored this.panel.show(); } }); see bug 6381
42.
...this issue is currently tracked as bug 825
43
4.
...this issue is currently tracked as bug 825
43
4.
ui/button/action - Archive of obsolete content
var button1 = actionbutton({ id: "my-button1", label: "my button1", icon: self.data.url("firefox-16.png") }); var button2 = actionbutton({ id: "my-button2", label: "my button2", icon: "./firefox-16.png" }); var button3 = actionbutton({ id: "my-button3", label: "my button3", icon: { "16" : "./firefox-16.png", "32" : "./firefox-32.png", "6
4" : "./firefox-6
4.png" } }); if you use the final form, firefox will automatically choose the best-fit icon for your button, depending on the device screen resolution and where the button is in the ui.
...on a high resolution screen (such as a hidpi display), these are doubled to 36 x 36 and 6
4 x 6
4 pixels, respectively.
... so you can supply three icon files: icon: { "16": "./addon16.png", "32": "./addon32.png", "6
4": "./addon6
4.png" } this will look fine in both toolbar and menu panel, and for both screen resolutions.
... however, the icons in the toolbar will not quite fill the space available, so you can instead supply four icons: icon: { "18": "./addon18.png", // toolbar icon non hidpi "32": "./addon32.png", // menu panel icon non hidpi "36": "./addon36.png", // toolbar icon hidpi "6
4": "./addon6
4.png" // menu panel icon hidpi } optional options: name type disabled boolean determines whether the button is disabled.
Canvas code snippets - Archive of obsolete content
function getpixelamount(canvas, r, g, b) { var cx = canvas.getcontext('2d'); var pixels = cx.getimagedata(0, 0, canvas.width, canvas.height); var all = pixels.data.length; var amount = 0; for (i = 0; i < all; i +=
4) { if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) { amount++; } } return amount; }; getting the color of a pixel in a canvas this following snippet returns an object with the rgba values of the pixel at position x and y of the canvas.
... props) { let prop = p; canvas2dcontext.prototype[prop] = function(value) { if (value === undefined) return this.ctx[prop]; this.ctx[prop] = value; return this; }; } }; var canvas = document.getelementbyid('canvas'); // use context to get access to underlying context var ctx = canvas2dcontext(canvas) .strokestyle('rgb(30, 110, 210)') .transform(10, 3,
4, 5, 1, 0) .strokerect(2, 10, 15, 20) .context; // use property name as a function (but without arguments) to get the value var strokestyle = canvas2dcontext(canvas) .strokestyle('rgb(50, 110, 210)') .strokestyle(); code usable only from privileged code these snippets are only useful from privileged code, such as extensions or privileged apps.
...); 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 base6
4 strings the following code gets a remote image and converts its content to data uri scheme.
...r 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(string6
4 => { alert(string6
4); }); if you want to get instead the base6
4 content of a local file using the file <input> element, you must use the filereader object.
Forms related code snippets - Archive of obsolete content
this date-picker code snippet will automatically create an html code like the following: <table id="zdp-cal-1" class="zdp-calendar" style="z-index: 1026; position: absolute; left: 29
4px; top:
47px;"> <caption><span id="zdp-decr-year-1" class="zdp-decrease-year">«</span><span id="zdp-decr-month-1" class="zdp-decrease-month"><</span><span id="zdp-incr-year-1" class="zdp-increase-year">»</span><span id="zdp-incr-month-1" class="zdp-increase-month">></span> <span class="zdp-current-month">aug 1998</span> </caption> <thead> <tr> <th>m</th> ...
...d> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td id="zdp-day-1-1" class="zdp-active-cell">1</td> <td id="zdp-day-1-2" class="zdp-active-cell">2</td> </tr> <tr> <td id="zdp-day-1-3" class="zdp-active-cell">3</td> <td id="zdp-day-1-
4" class="zdp-active-cell">
4</td> <td id="zdp-day-1-5" class="zdp-active-cell">5</td> <td id="zdp-day-1-6" class="zdp-active-cell">6</td> <td id="zdp-day-1-7" class="zdp-active-cell">7</td> <td id="zdp-day-1-8" class="zdp-active-cell">8</td> <td id="zdp-day-1-9" class="zdp-active-cell">9</td> </tr> <tr> <td id="zdp-day-1-10" class="zdp-active-cell">10</td...
...> <td id="zdp-day-1-11" class="zdp-active-cell">11</td> <td id="zdp-day-1-12" class="zdp-active-cell">12</td> <td id="zdp-day-1-13" class="zdp-active-cell">13</td> <td id="zdp-day-1-1
4" class="zdp-active-cell">1
4</td> <td id="zdp-day-1-15" class="zdp-active-cell">15</td> <td id="zdp-day-1-16" class="zdp-active-cell">16</td> </tr> <tr> <td id="zdp-day-1-17" class="zdp-active-cell">17</td> <td id="zdp-day-1-18" class="zdp-active-cell">18</td> <td id="zdp-day-1-19" class="zdp-active-cell">19</td> <td id="zdp-day-1-20" class="zdp-active-cell">20</td> <td id="zdp-day-1-21" class="zdp-active-cell">21</td> <td id="zdp-day-1-22" class="zdp-active-cell">22</td> <td id="zdp-day-1-23" class="zdp-active-cell">23</td> ...
... </tr> <tr> <td id="zdp-day-1-2
4" class="zdp-active-cell">2
4</td> <td id="zdp-day-1-25" class="zdp-active-cell">25</td> <td id="zdp-day-1-26" class="zdp-active-cell">26</td> <td id="zdp-day-1-27" class="zdp-active-cell">27</td> <td id="zdp-day-1-28" class="zdp-active-cell">28</td> <td id="zdp-day-1-29" class="zdp-active-cell">29</td> <td id="zdp-day-1-30" class="zdp-active-cell">30</td> </tr> <tr> <td id="zdp-day-1-31" class="zdp-active-cell">31</td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> </tr> <...
Appendix D: Loading Scripts - Archive of obsolete content
as this module only exists on firefox
4 and other gecko 2-based platforms, the services in question will have to be manually loaded on other platforms.
...some known issues include: e
4x xml objects cannot be wrapped for passage between compartments: bug 6131
42 there are a number of type detection issues, including: string.replace does not recognize regexp objects from foreign compartments: bug 633830 debugging: support for sandbox evaluation in development tools is uneven.
...in stack traces, the script will appear to have been loaded from the file "zz-9://plural/zed/alpha", line
42.
...); // evaluate the script: components.utils.evalinsandbox(script, sandbox, // the javascript version "1.8", // the apparent script filename: "zz-9://plural/zed/alpha", // the apparent script starting line number:
42); the following code will execute a simple script loaded from a local file in the same directory as the current script.
Adding preferences to an extension - Archive of obsolete content
('stockwatcher2'); var output = httprequest.responsetext; if (output.length) { // 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 stoc...
...tions" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </preferences> <hbox align="center"> <label control="symbol" value="stock to watch: "/> <textbox preference="pref_symbol" id="symbol" maxlength="
4"/> </hbox> </prefpane> </prefwindow> the <preferences> block establishes all the settings we implement as well as their types.
... alternative method: inline options requires gecko 7(firefox 7 / thunderbird 7 / seamonkey 2.
4) you could use inline options for this preference.
... « previousnext » override chrome://myaddon/content/options.xul chrome://myaddon/content/oldoptions.xul application={ec8030f7-c20a-
46
4f-9b0e-13a3a9e9738
4} 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
navigator
4.x honored the restriction against underscores, and so any class or id name with an underscore will be ignored by navigator
4.x, so the associated styles will never be applied.
... internet explorer
4.x and 5.x for windows erroneously allowed underscores, and so were both non-conformant on this point until the errata was published.
... the same is true of ie
4.x and 5.x for macintosh.
... opera 3.x through 5.x does not recognize underscores or escaped underscores, and so acts the same as navigator
4.x in this regard.
Creating a status bar extension - Archive of obsolete content
note: the extension created by this tutorial won't work in firefox that don't have a static status bar (that is, firefox
4 and up).
... <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>status-bar-sample-1@example.com</em:id> <em:version>1.0</em:version> <em:type>2</em:type> <!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static status bar panel</em:description> <em:creator>my name</em:creator> <em:homepageurl>http://developer.mozilla.org/e...
...n/docs/creating_a_status_bar_extension</em:homepageurl> <!-- describe the firefox versions we support --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-
46
4f-9b0e-13a3a9e9738
4}</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-
46
4f-9b0e-13a3a9e9738
4}" is a guid that uniquely identifies firefox as the target.
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
much of this registry data follows as a consequence of the discussions in bug 109
402.
...under [hkey_local_machine\\software\\mozilla\\compuserve 7.0] you will see "geckover"="0.9.
4.2".
...these keys are discussed in bug 109
402#c8, comment 8.
...under hkey_local_machine\software\mozilla\compuserve 7.0 you'll find: "plugins folders"="c:\\program files\\common files\\csshare\\plugins09
42" "product"="compuserve" "version"="7.0" "displayname"="compuserve 7.0" the product, version, and displayname string values are currently only written by compuserve 7.0, and they are written alongside the geckover string value.
No Proxy For configuration - Archive of obsolete content
entry points: preferences | advanced | proxies control-click menu for off line-online icon (network plug) configuration the no proxy list is composed of either domain elements or ipv
4 address elements.
...illa.org) a hostname (without domain) hostname-only (see problems below) "localhost" also blocks any possible domains that start with the entry ("www.otherdomain.localhost") a hostname (with domain) domain name "www.mozilla.org" does not block hostnames or domains that end in the same string (other-www.mozilla.org) an ip address ip address "1.2.3.
4" does not block hostnames that resolve to the ip address ("127.0.0.1" does not block "localhost") a network network w/ cidr block "10.0.0.0/8" does not block hostnames that resolve to the ip address range (10.0.0.0/8 is not "no proxy for intranet hostnames") optional - port-specific (optional) ":" + port number "<filter>:81" only black-lists port.
... communicator used "network.proxy.none" limitations no ipv6 support - the backend stores ipv
4 addresses as ipv6, but ipv6 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 201685 - no proxy for: support ipv6 address literals bug 136789 - proxy: no proxy ip entries do not block dns resolved ips bug 31
4712 - no proxy for: "hostname.domain.com" should block only "hostname.domain.com" bug 72
444 - proxy: "bypass proxy server for local addresses" (ie pref) bug 260883 - "no proxy for" does not use fqdn wildcards "*" like ie bugzilla sources bug 17158 comment 21: the correct separator are spaces or commas.
Creating a Firefox sidebar extension - Archive of obsolete content
the overlay file is listed in example
4.
... example
4.
...install.rdf <?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>emptysidebar@yourdomain.com</em:id> <em:name>emptysidebar extension</em:name> <em:version>1.0</em:version> <em:creator>your name</em:creator> <em:description>example extension for creation and registration of a sidebar.</em:description> <em:targetapplication> <description> <em:id>{ec8030f7-...
...c20a-
46
4f-9b0e-13a3a9e9738
4}</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.
In-Depth - Archive of obsolete content
if you specify one px/% value, it will apply it to all the corners, or you can specify
4 values (separated by a space) and have each corner different.
...example: -moz-image-region: rect(168px 69px 189px
46px); -moz-opacity makes boxes semi-transparent.
...each row is a different icon in one of its
4 different states (normal, hover, mouse down, and disabled).
... to cut the pieces out you need to define rectangles in the css file like this: #button-send { -moz-image-region: rect(29
4px 23px 315px 0px); } #button-send:hover { -moz-image-region: rect(29
4px
46px 315px 23px); } #button-send:hover:active { -moz-image-region: rect(29
4px 69px 315px
46px); } #button-send[disabled="true"] { -moz-image-region: rect(29
4px 92px 315px 69px) !important; } the properties for rect are listed in a clockwise fashion - top, right, bottom, left.
generateCRMFRequest() - Archive of obsolete content
they won't work in firefox 3
4 or later.
... argument description "requesteddn" an rfc 1
485 formatted dn to include in the certificate request.
...the value of this argument is a base-6
4 encoded certificate.
...the string found by accessing crmfobject.request is the base-6
4 encoded crmf message to be sent to the ca/ra, or an error string.
JavaScript crypto - Archive of obsolete content
they won't work in firefox 3
4 or later.
... if (typeof(crypto.version) != "undefined") { crmfobject = crypto.generatecrmfrequest( "cn=" + form.name.value, form.password.value, authenticator, keytransportcert, "setcrmfrequest();", 102
4, null, "rsa-dual-use"); } return false; } function setcrmfrequest() { form.cert_request.value = crmfobject.request; form.submit(); } form.onsubmit = validate; </script> on completion of the request, the ca may submit a page that looks something like this: <!doctype html> <h2>certificate request successful</h2> <p>hit 'load' to load your certificate</p> <form name="reqform...
...if you choose to implement these flags, your module must supply the following additional functions for each flag: pkcs11_mech_flag: must support ckm_rsa_pkcs and ckm_rsa_x_509 and the following functions: c_wrapkey, c_encrypt, c_sign, c_decrypt, c_unwrapkey, c_verifyrecover, c_verify, c_generatekeypair (20
48, 102
4, 512) size pkcs11_mech_dsa_flag: must support ckm_dsa and the following functions: c_sign, c_verify, c_generatekeypair pkcs11_mech_rc2_flag: must support ckm_rc2_cbc and ckm_rc2_ecb and the following functions: c_generatekey, c_encrypt, c_decrypt, c_wrapkey, c_unwrapkey pkcs11_mech_rc
4_flag: must support ckm_rc
4_cbc and ckm_rc
4_ecb and the following functions: c_generatekey, c_encrypt, ...
... pkcs11_mech_rsa_flag = 0x1<<0; pkcs11_mech_dsa_flag = 0x1<<1; pkcs11_mech_rc2_flag = 0x1<<2; pkcs11_mech_rc
4_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_...
Java in Firefox Extensions - Archive of obsolete content
note bug 83
4918 about click-to-play effect on java plugins in chrome and bug 775301.
...(this works in firefox 3.x, for firefox
4.x use addonmanager.getaddonbyid) var extensionpath = components.classes["@mozilla.org/extensions/manager;1"].
...// guid of extension getitemlocation("test@yoursite"); //the path logic would work if we include em:unpack for ff
4.x, for ff 3.x since things are unpacked by default things work // get path to the jar files (the following assumes your jars are within a // directory called "java" at the root of your extension's folder hierarchy) // you must add this utilities (classloader) jar to give your extension full privileges var extensionurl = "file:///" + extensionpath.path.replace(/\\/g,"/"); var classloaderjarpath = extensionurl + "/java/javafirefoxextensionutils.jar"; // add the paths for all the other jar files that you will be using var myjarpath = extensionurl + "...
...i've had problems with stability in the latest xquseme when testing in firefox 3.5b
4, especially apparently on linux (i haven't so far been able to find any workarounds/incompatibilities, but everything is working in firefox 3.0.10.).
Microsummary topics - Archive of obsolete content
for example, the following code snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{835daeb3-6760-
47fa-8f
4f-8e
4fdea1fb16}"> \ <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\...
...the value of the attribute must be a valid uri, but you can specify an arbitrary identifier using a urn, for example: urn:{835daeb3-6760-
47fa-8f
4f-8e
4fdea1fb16} to guarantee uniqueness, use urns containing uuids generated by the nsuuidgenerator component.
...however, because of a technical limitation (bug 3
407
46), it does download css stylesheets referenced by the page.
...for example, you might include the following header in your response to prevent firefox from making another microsummary-related request for one hour: cache-control: max-age=3600 note: because of a technical limitation (bug 3
46820), firefox uses the same cache for both microsummary-related requests and user-initiated requests, so the cache headers you return apply to both.
Table Layout Strategy - Archive of obsolete content
specs the table layout algorithm is based on two w3c recommendations: html
4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinction between fixed and auto layout of tables has been introduced.
...+ padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj
4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans #define pct 6 // percent width of cell or col #define pct_adj 7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has be...
...the second table has <col width="33%"><col> lets return to the first case but now but with more than 100%: <col width="
40%"><col width="80%"><tbody></tbody>foobar <col width="
40%"><col><tbody></tbody>foobar <table border width="200px"> <col width="
40%"><col width="80%"> <tbody> <tr><td>foo</td><td>bar</td></tr> </tbody> </table> the algorithm tries to satisfy the requirements on a first come first serve base.
... the second table has <col width="
40%"><col>.
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:06.
410676 current configuration: x6
4-mac-tvm-release avm version: 5260:6d1899261bac executing 2532 tests against vm: /users/build/hg/builds/5260-6d1899261bac/mac/avmshell_6
4 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 2526 running abcasm/bug_
476556.abs 252
4 running abcasm/bug_
491056.abs ...
...tests complete at 2010-09-28 10:39:26.751797 start date: 2010-09-28 10:38:07.221
457 end date : 2010-09-28 10:39:26.751797 test time : 0:01:19.5303
40 passes : 59291 failures : 0 expected failures : 75 tests skipped : 76 the -f flag tells runtests.py to force recompilation of all the scripts.
...n-redux/platform/android/android_runner.sh /data/local/tamarin/android_runner.sh $ adb shell 'chmod 777 /data/loca/android_runner.sh' test it out with a simple .abc or no args for usage (should return exitcode=0) $ tamarin-redux/platform/android/android_shell.py hello.abc hello exitcode=0 test it out by retrieving the version information of the shell on the android device $ $avm -dversion shell 1.
4 debug build 6299:
455bca95
4565 features avmsystem_32bit;avmsystem_unaligned_int_access;avmsystem_little_endian;avmsystem_arm;avmsystem_unix; avmfeature_jit;avmfeature_abc_interp;avmfeature_selftest;avmfeature_eval;avmfeature_protect_jitmem; avmfeature_shared_gcheap;avmfeature_cache_gqcn;avmfeature_safepoints;avmfeature_swf12;avmfeature_swf13;avmtweak_exact_tracing; running acceptance tests --andro...
XTech 2005 Presentations - Archive of obsolete content
web 1.6: a rope of sand - opening keynote, mike shaver mozilla e
4x - brendan eich "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in javascript (ecma-262, iso-16262).
... e
4x marries xml and javascript syntax, and extends javascript to include namespaces, qualified names, and xml elements and lists.
... e
4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants.
... another e
4x feature: the ability to bind a w3c dom document to a new xml object, reflecting the dom in e
4x terms so that updates to either the dom or the e
4x object hierarchy show up in the other.
Using Spacers - Archive of obsolete content
if the second button's flexibility was increased to 2, the first button would receive 20 pixels of the extra space and the second button would receive
40 pixels of extra space instead.
...flex examples example 1: <button label="find" flex="1"/> <button label="cancel" flex="1"/> example 2: <button label="find" 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="1
45"/> <button label="replace" flex="1
45"/> example 1 in this case the flexibility is divided up evenly ...
... example
4 in this case, all three buttons are flexible.
...this would work just as well with flex values of one instead of 1
45.
Debugging a XULRunner Application - Archive of obsolete content
browser debugger as of gecko
44, it is no longer possible to start the devtools server from xul apps.
... see bug 12
44163.
... starting with xulrunner 2
4, you should use the firefox browser debugger to debug your xulrunner apps.
... inspired by http://article.gmane.org/gmane.comp.mozilla.devel.jsdebugger/859 i extracted venkman.jar, opened venkman\content\venkman\venkman-scripts.xul and changed: @@ -5
4,11 +5
4,11 @@ <script src="chrome://global/content/nstransferable.js" /> <script src="chrome://global/content/nsclipboard.js" /> <script src="chrome://global/content/nsdraganddrop.js" /> - <script src="chrome://communicator/content/contentareautils.js" /> - <script src="chrome://communicator/content/contentareadd.js" /> - <script src="chrome://communicator/co...
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", 86
400); 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://mozap...
...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, icon
48.png and icon6
4.png.
...ad.manager.showwhenstarting", true); pref("browser.download.manager.usewindow", true); pref("browser.download.manager.closewhendone", true); pref("browser.download.manager.opendelay", 0); pref("browser.download.manager.focuswhenstarting", false); pref("browser.download.manager.flashcount", 2); // pref("alerts.slideincrement", 1); pref("alerts.slideincrementtime", 10); pref("alerts.totalopentime",
4000); pref("alerts.height", 50); if you are missing preferences that a dialog requires, you will get the following errors: component returned failure code: 0x8000ffff (ns_error_unexpected) [nsiprefbranch.getboolpref] error: dialog has no properties source file: chrome://mozapps/content/downloads/u...ontenttype.xul line: 1 enabling password manager these preferences seem to be the default in...
... \myapp\extensions{972ce
4c6-7e08-
447
4-a285-3208198ce6fd}\install.rdf it should also have an <em:internalname>classic/1.0</em:internalname> as that is the default theme in firefox.
Archived Mozilla and build documentation - Archive of obsolete content
automated testing tips and tricks automatic mozilla configurator ankh8 automatically handle failed asserts in debug builds as of 200
4-12-8, it is now possible to automatically handle failed asserts in debug builds of mozilla for windows.
...as a result, mozilla is not fully backwards-compatible with netscape navigator
4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later.
... browsers, like internet explorer
4, that were built before the conception of w3c standards inherited many quirks.
... table layout strategy the table layout algorithm is based on two w3c recommendations: html
4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinction between fixed and auto layout of tables has been introduced.
2006-11-03 - Archive of obsolete content
he has also created a bug entry on bugzilla with the bug id of opened bug #3
4485
4.
...(http://www.google.com/url?sa=d&q=htt...tail%3fid%3d6
4) gavin recommended that phil should add |ac_add_options --disable-airbag| to his .mozconfig.
...he has also found a work around which is to use version 200
40127-1 of sh.exe instead of the sh.exe version 200
40127-3.
...he has created the following bug entry https://bugzilla.mozilla.org/show_bug.cgi?id=331
40
4.
2006-10-06 - Archive of obsolete content
announcements firefox 2 release candidate 2 is now available for download beltzner announced ff2 rc2 is availabe for all 3 major platforms in some
40 langauges.
... re: plan to hold trunk closed for lack of talkback dbaron mentioned that maybe trunk should be closed because of lack of talkbacks received ( bug 35
4835 is suspected).
... pal-moz offers a solution to bug 35
4835.
... dbaron then follows up that bug 35
4835 is solved so there is no need to close the tree waiting for it.
The First Install Problem - Archive of obsolete content
example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] geckoversion=0.9.
4.2 suggesting compliance with compuserve's deployment of a build of gecko known as 0.9.
4.2.
... note that this means that at a minimum, the plugin vendor is ensuring compatibility with 0.9.
4.2 browsers.
...the bugzilla bug open on mozilla and netscape 6.x is bug
44973.
...the recommended <object> attribute to set is still either "type" or "data".) advantage: we now no longer have ambiguity in determining which plugin handles what mimetype, because now the plugin has been invoked using the classid attribute of the object tag, which is in compliance with the html
4.01 specification for use of the object tag.
Encryption and Decryption - Archive of obsolete content
for example, 128-bit keys for use with the rc
4 symmetric-key cipher supported by ssl provide significantly better cryptographic protection than
40-bit keys for use with the same cipher.
... roughly speaking, 128-bit rc
4 encryption is 3 x 1026 times stronger than
40-bit rc
4 encryption.
... (for more information about rc
4 and other ciphers used with ssl, see "introduction to ssl.") an encryption key is considered full strength if the best known attack to break the key is no faster than a brute force attempt to test every key possibility.
... because it is relatively trivial to break an rsa key, an rsa public-key encryption cipher must have a very long key, at least 102
4 bits, to be considered cryptographically strong.
Theme changes in Firefox 3.5 - Archive of obsolete content
affected files details scrollbar.xml, xulscrollbars.css the <gripper> element was removed from the scrollbar thumb button by bug
44870
4.
... global/checkbox.css, global/radio.css since bug 39
4892, radio buttons and checkboxes no longer have a minimum size on mac os x.
... bug
4509
44 changed the way window shadow is handled on mac os x.
... browser.xul bug
463189 added a new attribute on the xul window element of browser.xul named browsingmode.
Scratchpad - Archive of obsolete content
usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f
4, or go to the web developer menu (which is a submenu in the tools menu on macos and linux), then select scratchpad click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "scratchpad".
... opening scratchpad in the toolbox new in firefox
47.
... from firefox
47, you can open scratchpad inside the toolbox.
... keyboard shortcuts command windows macos linux open the scratchpad shift + f
4 shift + f
4 shift + f
4 run scratchpad code ctrl + r cmd + r ctrl + r run scratchpad code, display the result in the object inspector ctrl + i cmd + i ctrl + i run scratchpad code, insert the result as a comment ctrl + l cmd + l ctrl + l re-evaluate current function ctrl + e cmd + e ctrl + e reload the current pa...
Using IO Timeout And Interrupt On NT - Archive of obsolete content
this technical memo is a cautionary note on using netscape portable runtime's (nspr) io timeout and interrupt on windows nt 3.51 and
4.0.
...the only reliable way to cancel outstanding overlapped io request that works on both nt 3.51 and
4.0 is to close the file descriptor, hence the rule of thumb stated at the beginning of this memo.
...when we stop supporting nt 3.51, we can look into using nt
4's <tt>cancelio()</tt> function to cancel outstanding overlapped io requests when we get io timeout or interrupt errors.
... original document information author: larryh@netscape.com last updated date: december 1, 200
4 ...
Namespaces - Archive of obsolete content
« previousnext » e
4x and namespaces oftentimes, xml documents will contain elements from a variety of namespaces.
... you can declare the default namespace for your e
4x objects by placing the statement: default xml namespace = "http://www.w3.org/1999/xhtml"; within the same scope as your e
4x.
...qname is a global constructor available in javascript implementations supporting e
4x.
...for further information on namespaces in e
4x, see processing xml with e
4x.
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
xhtml™ 1.0 the extensible hypertext markup language (second edition) defines xhtml to be a reformulation of html
4 as an xml 1.0 application.
... if you're writing xhtml (as opposed to regular html) you should understand the fundamental differences between html
4 and xhtml.
... using css rules in external file example
4 - xhtml 1.0 strict as text/html this example illustrates the behavior of xhtml served as text/html when css rules are contained in an external file.
... see also writing javascript for xhtml original document information author(s): bob clary last updated date: march 1
4th, 2003 copyright © 2001-2003 netscape.
Correctly Using Titles With External Stylesheets - Archive of obsolete content
in fact, the use of the title attribute is so significant that html
4.01 categorizes stylesheets according to the presence or absence of a title.
...here are two examples: <link type="text/css" rel="stylesheet" title="basic styles" href="basic.css" /> <link type="text/css" rel="stylesheet" title="fish and boats" href="ocean.css" /> according to the html
4.01 specification, only one of the preferred stylesheets can be used at a time.
...to quote from html
4.01 specification, section 1
4.3.1: to make a style sheet persistent, set the rel attribute to "stylesheet" and don't set the title attribute.
... related links html
4.01 specification, section 1
4.3: external style sheets original document information author(s): eric a.
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
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.
...we leverage some of these ideas to help you make your netscape communicator
4.x plugins exposed to javascript in mozilla based browsers.
...the changes allow to make existing
4.x plugins scriptable with only minor modifications in their code.
... related sources the full sample plugin code can be found in the mozilla source tree under modules/plugin/samples/
4x-scriptable/ ibm developer works has published a good article on xpcom.
Archive of obsolete content
newsgroup summaries obsolete: xpcom-based scripting for npapi plugins plugins that used to take advantage of being scriptable via liveconnect in
4.x netscape browsers lost this possibility in the new world.
...we leverage some of these ideas to help you make your netscape communicator
4.x plugins exposed to javascript in mozilla based browsers.
... using firebug and jquery (screencast) note: this screencast is originally from: http://ejohn.org/blog/hacking-digg-w...ug-and-jquery/ using io timeout and interrupt on nt this technical memo is a cautionary note on using netscape portable runtime's (nspr) io timeout and interrupt on windows nt 3.51 and
4.0.
...netscape 7.1 will work with both the windows media player 6.
4 activex control as well as versions 7 through 9.
GLSL Shaders - Game development
the vertex shader code let's continue by writing a simple vertex shader — add the code below inside the body's first <script> tag: void main() { gl_position = projectionmatrix * modelviewmatrix * vec
4(position.x+10.0, position.y, position.z+5.0, 1.0); } the resulting gl_position is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.
... 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 = vec
4(0.0, 0.58, 0.86, 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).
... final code html <script 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 * vec
4(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 = vec
4(0.0, 0.58, 0.86, 1.0); } </script> javascript var width = window.innerwidth; var height = window.innerheight; var renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); r...
...ene.add(camera); var boxgeometry = new three.boxgeometry(10, 10, 10); var shadermaterial = new three.shadermaterial( { vertexshader: document.getelementbyid( 'vertexshader' ).textcontent, fragmentshader: document.getelementbyid( 'fragmentshader' ).textcontent }); var cube = new three.mesh(boxgeometry, shadermaterial); scene.add(cube); cube.rotation.set(0.
4, 0.2, 0); function render() { requestanimationframe(render); renderer.render(scene, camera); } render(); css body { margin: 0; padding: 0; font-size: 0; } canvas { width: 100%; height: 100%; } result conclusion this article has taught the very basics of shaders.
Crisp pixel art look with image-rendering - Game development
original size
4x size
4x size (scaled with an image editor) none vendor's algorithm nearest-neighbor algorithm a css-based solution the good news is that you can use css to automatically do the up-scaling, which not only solves the blur problem, but also allows you to use the images in their original, smaller size, thus saving download time.
... set its css width and height properties to be 2x or
4x the value of the html width and height.
... if the canvas was created with a 128 pixel width, for example, we would set the css width to 512px if we wanted a
4x scale.
...rendering: pixelated; image-rendering: crisp-edges; } and some javascript to set up the canvas and load the image: // get canvas context var ctx = document.getelementbyid('game').getcontext('2d'); // load image var image = new image(); image.onload = function () { // draw the image into the canvas ctx.drawimage(image, 0, 0); } image.src = 'https://udn.realityripple.com/samples/11/a295
4fe197.png'; this code used together produces the following result: note: you can check out the original code on github (and a live example.) ...
Animations and tweens - Game development
« previousnext » this is the 1
4th step out of 16 of the gamedev phaser tutorial.
... you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson1
4.html.
... loading the animation next up, go into your create() function, find the line that loads the ball sprite, and below it put the call to animations.add() seen below: ball = game.add.sprite(50, 250, 'ball'); ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 2
4); to add an animation to the object we use the animations.add() method, which contains the following parameters the name we chose for the animation an array defining the order in which to display the frames during the animation.
...since we are running the animation at 2
4fps and there are 9 frames, the animation will display just under three times per second.
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
this gives us
4 column lines and 3 row lines.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } <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); grid-template-rows: 100px 100px; } lines can be addressed using their line number.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-t...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff
4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: [col1-start] 1fr [col2-s...
HTML - MDN Web Docs Glossary: Definitions of Web-related terms
in 199
4 berners-lee founded the w3c to develop the web.
...html
4.0 was released in 1999 and became an iso standard in 2000.
... at that time, the w3c nearly abandoned html in favor of xhtml, prompting the founding of an independent group called whatwg in 200
4.
... thanks to whatwg, work on html5 continued: the two organizations released the first draft in 2008 and the final standard in 201
4.
HTML: A good basis for accessibility - Learn web development
<input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="
4" bgcolor="#ffffff"> <!-- 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=...
...link text color, like all text, has to be significantly different from the background color (a
4.5:1 contrast).
...with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a
4:5 contrast between all those state colors and the background color.
... webaim: "skip navigation" links how–to: use skip navigation links - the a11y project mdn understanding wcag, guideline 2.
4 explanations understanding success criterion 2.
4.1 | w3c understanding wcag 2.0 proximity large amounts of interactive content—including anchors—placed in close visual proximity to each other should have space inserted to separate them.
HTML: A good basis for accessibility - Learn web development
<input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="
4" bgcolor="#ffffff"> <!-- 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=...
...link text color, like all text, has to be significantly different from the background color (a
4.5:1 contrast).
...with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a
4:5 contrast between all those state colors and the background color.
... webaim: "skip navigation" links how–to: use skip navigation links - the a11y project mdn understanding wcag, guideline 2.
4 explanations understanding success criterion 2.
4.1 | w3c understanding wcag 2.0 proximity large amounts of interactive content—including anchors—placed in close visual proximity to each other should have space inserted to separate them.
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 2
46 have low vision." (see visual impairment and blindness).
... hearing-impaired people also represent a significant userbase — "
466 million people worldwide have disabling hearing loss", says the world health organization's deafness and hearing loss fact sheet.
... the united states centers for disease control estimate that, as of 2018, 1 in
4 u.s.
... your country may also have specific legislation governing the need for websites serving their population to be accessible — for example en 301 5
49 in the eu, section 508 of the rehabilitation act in the us, federal ordinance on barrier-free information technology in germany, the accessibility regulations 2018 in the uk, accessibilità in italy, the disability discrimination act in australia, etc.
Styling tables - Learn web development
some rows removed for brevity <tr> <th scope="row">the stranglers</th> <td>197
4</td> <td>17</td> <td>no more heroes</td> </tr> </tbody> <tfoot> <tr> <th scope="row" colspan="2">total albums</th> <td colspan="2">77</td> </tr> </tfoot> </table> the table is nicely marked up, easily styleable, and accessible, thanks to features such as scope, <caption>, <thead>, <tbody>, etc.
...to do this, add the following css to your style.css file: /* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(
4) { width: 35%; } th, td { padding: 20px; } the most important parts to note are as follows: a table-layout value of fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default.
...add the following css to the bottom of your style.css file: /* zebra striping */ tbody tr:nth-child(odd) { background-color: #ff33cc; } tbody tr:nth-child(even) { background-color: #e
495e
4; } tbody tr { background-image: url(noise.png); } table { background-color: #ff33cc; } earlier on you saw the :nth-child selector being used to select specific child elements.
...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.
Responsive design - Learn web development
in 200
4 cameron adams wrote a post entitled resolution dependent layout, describing a method of creating a design that could adapt to different screen resolutions.
... in this example, we want to set our level 1 heading to be
4rem, meaning it will be four times our base font size.
... html { font-size: 1em; } h1 { font-size: 2rem; } @media (min-width: 1200px) { h1 { font-size:
4rem; } } we have edited our responsive grid example above to also include responsive type using the method outlined.
...if you've got a narrow screen layout that kicks in at
480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile.
What is a Domain Name? - Learn web development
any internet-connected computer can be reached through a public ip address, either an ipv
4 address (e.g.
... 173.19
4.121.32) or an ipv6 address (e.g., 2027:0da8:8b73:0000:0000:8a2e:0370:1337).
... alternatively, if you use a system with a built-in shell, type a whois command into it, as shown here for mozilla.org: $ whois mozilla.org domain name:mozilla.org domain id: d1
409563-lror creation date: 1998-01-2
4t05:00:00z updated date: 2013-12-08t01:16:57z registry expiry date: 2015-01-23t05:00:00z sponsoring registrar:markmonitor inc.
... (r37-lror) sponsoring registrar iana id: 292 whois server: referral url: domain status: clientdeleteprohibited domain status: clienttransferprohibited domain status: clientupdateprohibited registrant id:mmr-3368
4 registrant name:dns admin registrant organization:mozilla foundation registrant street: 650 castro st ste 300 registrant city:mountain view registrant state/province:ca registrant postal code:9
40
41 registrant country:us registrant phone:+1.6509030800 as you can see, i can't register mozilla.org because the mozilla foundation has already registered it.
Front-end web developer - Learn web development
guides installing basic software — basic tool setup (15 min read) background on the web and web standards (
45 min read) learning and getting help (
45 min read) semantics and structure with html time to complete: 35–50 hours prerequisites nothing except basic computer literacy, and a basic web development environment.
... modules css first steps (10–15 hour read/exercises) css building blocks (35–
45 hour read/exercises) styling text (15–20 hour read/exercises) css layout (30–
40 hour read/exercises) additional resources css layout cookbook interactivity with javascript time to complete: 135–185 hours prerequisites it is recommended that you have basic html knowledge before starting to learn javascript.
... modules javascript first steps (30–
40 hour read/exercises) javascript building blocks (25–35 hour read/exercises) introducing javascript objects (25–35 hour read/exercises) client-side web apis (30–
40 hour read/exercises) asynchronous javascript (25–35 hour read/exercises) web forms — working with user data time to complete:
40–50 hours prerequisites forms require html, css, and javascript knowledge.
... 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.
HTML Cheatsheet - Learn web development
ggesting a line break it is used to suggest the browser to cut the text on this site if </wbr>there is not enough space to display it on the same line it is used to suggest the browser to cut the text on this site if there is not enough space to display it on the same line date in readable form it is used to format the date legibly for the user, such as: <time datetime="2020-05-2
4" pubdate>published on 23-05-2020</time> it is used to format the date legibly for the user, such as: published on 23-05-2020 text displayed in code format <p>this text is in normal format.</p> <code>this text is in code format.</code> <pre>this text is in predefined format.</pre> this text is in normal format.
... 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/1
4a
4179ee6.ogg" type="audio/ogg"> your browser does not support audio.
... embedded video <video controls src="https://udn.realityripple.com/samples/1f/6cc66528b8.mp
4">the <code>video</code> element is unsupported.</video> the video element is unsupported.
... of a term</dd> <dt>another term</dt> <dd>definition of another term</dd> </dl> a term definition of a term another term definition of another term a horizontal rule <hr> text heading <h1> this is heading 1 </h1> <h2> this is heading 2 </h2> <h3> this is heading 3 </h3> <h
4> this is heading
4 </h
4> <h5> this is heading 5 </h5> <h6> this is heading 6 </h6> this is heading 1 this is heading 2 this is heading 3 this is heading
4 this is heading 5 this is heading 6 your browser does not support the audio element.
Using data attributes - Learn web development
just use data attributes for that: <article id="electric-cars" data-columns="3" data-index-number="1231
4" data-parent="cars"> ...
... const article = document.queryselector('#electric-cars'); article.dataset.columns // "3" article.dataset.indexnumber // "1231
4" article.dataset.parent // "cars" each property is a string and can be read and written.
...for example to show the parent data on the article you can use generated content in css with the attr() function: article::before { content: attr(data-parent); } you can also use the attribute selectors in css to change styles according to the data: article[data-columns='3'] { width:
400px; } article[data-columns='
4'] { width: 600px; } you can see all this working together in this jsbin example.
... in firefox
49.0.2 (and perhaps earlier/later versions), the data attributes that exceed 1022 characters will not be read by javascript (ecmascript
4).
Advanced text formatting - Learn web development
this simply wraps around your contact details, for example: <address> <p>chris mills, manchester, the grim north, uk</p> </address> it could also include more complex markup, and other forms of contact information, for example: <address> <p> chris mills<br> manchester<br> the grim north<br> uk </p> <ul> <li>tel: 0123
4 567 890</li> <li>email: me@grim-north.co.uk</li> </ul> </address> note that something like this would also be ok, if the linked page contained the contact information: <address> <p>page written by <a href="../authors/chris-mills/">chris mills</a>.</p> </address> superscript and subscript you will occasionally need to use superscript and subscript when marking up items like dates, chem...
...for example: <p>my birthday is on the 25<sup>th</sup> of may 2001.</p> <p>caffeine's chemical formula is c<sub>8</sub>h<sub>10</sub>n<sub>
4</sub>o<sub>2</sub>.</p> <p>if x<sup>2</sup> is 9, x must equal 3 or -3.</p> the output of this code looks like so: representing computer code there are a number of elements available for marking up computer code using html: <code>: for marking up generic pieces of computer code.
... { alert('owww, stop poking me!'); }</code></pre> <p>you shouldn't use presentational elements like <code><font></code> and <code><center></code>.</p> <p>in the above javascript example, <var>para</var> represents a paragraph element.</p> <p>select all the text with <kbd>ctrl</kbd>/<kbd>cmd</kbd> + <kbd>a</kbd>.</p> <pre>$ <kbd>ping mozilla.org</kbd> <samp>ping mozilla.org (63.2
45.215.20): 56 data bytes 6
4 bytes from 63.2
45.215.20: icmp_seq=0 ttl=
40 time=158.233 ms</samp></pre> the above code will look like so: marking up times and dates html also provides the <time> element for marking up times and dates in a machine-readable format.
...--> <time datetime="19:30:01.856">19:30:01.856</time> <!-- date and time --> <time datetime="2016-01-20t19:30">7.30pm, 20 january 2016</time> <!-- date and time with timezone offset --> <time datetime="2016-01-20t19:30+01:00">7.30pm, 20 january 2016 is 8.30pm in france</time> <!-- calling out a specific week number --> <time datetime="2016-w0
4">the fourth week of 2016</time> test your skills!
Mozilla splash page - Learn web development
the following subsections detail what you need to do: preparing images using your favourite image editor, create
400px wide and 120px wide versions of: firefox_logo-only_rgb.png firefox-addons.jpg mozilla-dinosaur-head.png call them something sensible, e.g.
... firefoxlogo
400.png and firefoxlogo120.png.
...the video should be
400px wide.
... in each case (except one — which one is inherently responsive?) we want the browser to serve the 120px wide version when the viewport width is 500px wide or less, or the
400px wide version otherwise.
HTML table advanced features and accessibility - Learn web development
your finished table should look something like the following: hidden example <!doctype html> <html> <head> <meta charset="utf-8"> <title>my spending record</title> <style> html { font-family: sans-serif; } table { border-collapse: collapse; border:
4px solid rgb(200,200,200); letter-spacing: 1px; font-size: 0.8rem; } td, th { border: 2px solid rgb(190,190,190); padding: 10px 20px; } th { background-color: rgb(235,235,235); } td { text-align: center; } tr:nth-child(even) td { background-color: rgb(250,250,25...
...0); } tr:nth-child(odd) td { background-color: rgb(2
45,2
45,2
45); } caption { padding: 10px; } tbody { font-size: 90%; font-style: italic; } tfoot { font-weight: bold; } </style> </head> <body> <table> <caption>how i chose to spend my money</caption> <thead> <tr> <th>purchase</th> <th>location</th> <th>date</th> <th>evaluation</th> <th>cost (€)</th> </tr> </thead> <tfoot> <tr> <td colspan="
4">sum</td> <td>118</td> </tr> </tfoot> <tbody> <tr> <td>haircut</td> ...
... the following markup shows a simple 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>cell
4</td> <td>cell5</td> <td>cell6</td> </tr> </table> the output of which looks something like this: title1 title2 title3 cell1 cell2 cell3 cell2 cell3 cell
4 cell5 cell6 tables for visually impaired users let's recap briefly on how we use data tables.
... items sold august 2016 clothes accessories trousers skirts dresses bracelets rings belgium antwerp 56 22
43 72 23 gent
46 18 50 61 15 brussels 51 27 38 69 28 the netherlands amsterdam 89 3
4 69 85 38 utrecht 80 12
43 36 19 but what if you cannot make those visual associations?
Video and Audio APIs - Learn web development
as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp
4" type="video/mp
4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... here is a <a href="rabbit320.mp
4">link to the video</a> instead.</p> </video> this creates a video player inside the browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enables the default set of playback controls.
...you'll see a number of features; the html is dominated by the video player and its controls: <div class="player"> <video controls> <source src="video/sintel-short.mp
4" type="video/mp
4"> <source src="video/sintel-short.webm" type="video/webm"> <!-- fallback content here --> </video> <div class="controls"> <button class="play" data-icon="p" aria-label="play pause toggle"></button> <button class="stop" data-icon="s" aria-label="stop"></button> <div class="timer"> <div></div> <span aria-label="timer">00:00</span> </div> ...
...first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width:
400px; border-radius: 10px; position: absolute; bottom: 20px; left: 50%; margin-left: -200px; background-color: black; box-shadow: 3px 3px 5px black; transition: 1s all; display: flex; } .player:hover .controls, player:focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden.
Test your skills: Math - Learn web development
you will have to create four numeric values, then add the first two together, then subtract the fourth from the third, then multiply the two secondary results together to get a result of
48.
...the product should be
48.
...after multiplying the two results together and formatting the result to 2 decimal places, the final result should be 10.
42.
... the value of finalnumber needs to be 10.
42.
Deployment and next steps - Learn web development
your generated bundle.js and bundle.css files will be something like this (file size on the left): 50
4 jul 13 02:
43 bundle.css 95981 jul 13 02:
43 bundle.js to compile our application for production we have to run npm run build instead.
... so, after running npm run build, our generated bundle.js and bundle.css files will be more like this: 50
4 jul 13 02:
43 bundle.css 21782 jul 13 02:
43 bundle.js try running npm run build in your app's root directory now.
...writing objects: 100% (5/5), 5
41 bytes | 5
41.00 kib/s, done.
... total 5 (delta 3), reused 0 (delta 0) to gitlab.com:opensas/mdn-svelte-todo.git 7dac9f3..5725f
46 master -> master whenever there's a job running gitlab will display an icon showing the process of the job.
Getting started with Svelte - Learn web development
you should see something like the following: <script> export let name; </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: 2
40px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size:
4em; font-weight: 100; } @media (min-width: 6
40px) { 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: 2
40px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size:
4em; font-weight: 100; } @media (min-width: 6
40px) { main { max-width: none; } } </style> we are applying a style to our <h1> element.
...for example, here's the link for a repl running our complete app: https://svelte.dev/repl/378dd79e0dfe
4486a8f10823f3813190?version=3.23.2.
... repl to code along with us using the repl, start at https://svelte.dev/repl/fc68b
4f059d3
4b9c8
4fa0
42d1cce586c?version=3.23.2 summary this brings us to the end of our initial look at svelte, including how to install it locally, create a starter app, and how the basics work.
Working with Svelte stores - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa8
4a5a
449
4366b179c873959
40039?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.
...f alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.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.
...} $: onmessagechange($alert, ms) // whenever the alert store or the ms props changes run onmessagechange ondestroy(()=> cleartimeout(timeout)) // make sure we clean-up the timeout </script> and update the alert.svelte markup section like so: {#if visible} <div on:click={() => visible = false}> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="m12.
432 0c1.3
4 0 2.01.912 2.01 1.957 0 1.305-1.16
4 2.512-2.679 2.512-1.269 0-2.009-.75-1.97
4-1.99c9.789 1.
436 10.67 0 12.
432 0zm8.309 20c-1.058 0-1.833-.652-1.093-3.52
4l1.21
4-5.092c.211-.81
4.2
46-1.1
41 0-1.1
41-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.
467 6.801-3.
467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.2
46.9
45-.1
41 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.81
4c12.098 19.02...
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/378dd79e0dfe
4486a8f10823f3813190?version=3.23.2 summary in this article we added two new features: an alert component and persisting todos to web storage.
Handling common HTML and CSS problems - Learn web development
for example: <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp
4" type="video/mp
4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <!-- offer download --> <p>your browser does not support html5 video; here is a link to <a href="video/tears-of-steel-battle-clip-medium.mp
4">view the video</a> directly.</p> </video> this example includes a simple link allowing you to download the video if even the html5 video player doesn't...
... id="time" type="time"> </div> </form> the output of this code is as follows: hidden example label { float: left; width: 30%; text-align: right; } input { float: right; width: 65%; } label, input { margin-bottom: 20px; } div { clear: both; margin: 10px; } body { width:
400px; margin: 0 auto; } <form> <div> <label for="date">enter a date:</label> <input id="date" type="date"> </div> <div> <label for="time">enter a time:</label> <input id="time" type="time"> </div> </form> note: you can also see this running live as forms-test.html on github (see the source code also).
... background-color: #ff0000; background-color: rgba(255,0,0,1); box-shadow: inset 1px 1px 3px rgba(255,255,255,0.
4), inset -1px -1px 3px rgba(0,0,0,0.
4); } button:hover { background-color: rgba(255,0,0,0.5); } button:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,0.
4), inset -1px -1px 3px rgba(255,255,255,0.
4); } here we are providing an rgba background-color that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent in...
... support for new layout features much of the layout work on the web today is done using floats — this is because floats are well-supported (way back to ie
4, albeit with a number of bugs that would also need to be investigated if you were to try to support ie that far back).
Introduction to cross browser testing - Learn web development
this situation is a lot less bad than it used to be; back when ie
4 and netscape
4 were competing to be the dominant browser in the 1990s, browser companies deliberately implemented things differently to each other to try to gain competitive advantage, which made life hell for developers.
... the workflow for testing and bug fixes on a project can be broken down into roughly the following four phases (this is only very rough — different people may do things quite differently to this): initial planning > development > testing/discovery > fixes/iteration steps 2–
4 will tend to be repeated as many times as necessary to get all of the implementation done.
...sometimes this is inevitable due to device constraints — a cinema widescreen isn't going to give the same visual experience as a
4" mobile screen, regardless of how you program your site.
...it might have already been fixed — for example if a bug is present in firefox release
49, but it is no longer there in firefox nightly (version 52), then they have fixed it.
Mozilla Plugin Accessibility
the same solution will be used for bug 1
40566 (full page plugins) and bug 78
41
4 (partial page plugins), as well as the linux-specific bug 8
4159 and mac-specific bug 180
426.
...user cannot keyboard navigate out of a plugin we will apply the same solution as in problem
4 above.
...the bug tracking this work is bug 931
49.
... unknown
4.
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/200
4/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>6
4</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:cont...
...ributor or em:homepageurl --> <!-- firefox --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-
46
4f-9b0e-13a3a9e9738
4}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>
46.0</em:maxversion> </description> </em:targetapplication> <!-- thunderbird --> <em:targetapplication> <description> <em:id>{3550f703-e582-
4d05-9a08-
453d09bdfdc6}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>22.0</em:maxversion> </description> </em:targetapplication> <!-- seamonkey --> <em:targetapplication> <description> <em:id>{92650c
4d-
4b8e-
4d2a-b7eb-2
4ecf
4f6b63a}</em:id> <em:minversion>2.15a1</em:minversion> <em:maxver...
...sion>2.
49</em:maxversion> </description> </em:targetapplication> </description> </rdf> there are some rules about how you should adapt the install.rdf file: if you are creating a new dictionary add-on, we recommend that the em:id consists of your locale code followed by @dictionaries.addons.mozilla.org, but if there is more than one dictionary for your language (for example the german "old spelling" versus "new spelling" dictionaries), you may need to choose another id, that follows the rules of em:id.
...type = 6
4 indicates that the add-on is in the restartless format, and unpack is required for hunspell to read the dictionary.
Debugging a hang on OS X (Archived)
creating the sample on mac os x 10.5 (xcode <
4.2) when the application is still hung, open up spin control.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple).
... after about 3-
4 seconds, select the hanging application in the “detected hangs” window and click the “interrupt sampling” button.
... creating the sample on mac os x 10.
4 when the application is still hung, open up sampler.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple.).
...note that only 3-
4 seconds usually suffice, note that this will quickly hog up a lot of memory if you leave it on for too long!
HTTP logging
you will see several files that look like: log.txt-main.1806, log.txt-child.195
4, log.txt-child.1970, etc.
...press the enter key after each one.: for 6
4-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 (x86)\mozilla firefox\firefox.exe" ...
... copy and paste the following line into the "run" command window and then press enter: for 32-bit windows: "c:\program files (x86)\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 6
4-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 firefox to the default location, and that drive c: is your windows startup disk.
... this is accomplished by splitting the log into up to
4 separate files (their filenames have a numbered extension, .0, .1, .2, .3) the logging back end cycles the files it writes to, while ensuring that the sum of these files’ sizes will never go over the specified limit.
Displaying Places information using views
points 3 and
4 apply to this object.
... warning: until bug
476952 is fixed, you may experience problems using some of these methods in conjunction with the place attribute and property.
... warning: until bug
476952 is fixed, you may experience problems using some of these properties in conjunction with the place attribute and property.
... in firefox
4 and later requires gecko 2.0(firefox
4 / thunderbird 3.3 / seamonkey 2.1) you can add places information to a popup like this: <menu id="bookmarksmenu"> <menupopup placespopup="true"> onpopupshowing="if (!document.getelementbyid('bookmarksmenu')._placesview) new placesmenu(event, 'place:folder=bookmarks_menu');" </menupopup> </menu> the menu view is implem...
Log.jsm
progress is tracked in bugzilla using dependencies of bug
451283.
... the log.jsm javascript code module (formerly named log
4moz.js) provides a log
4j style api for logging log messages to various endpoints, such as the browser console or a file on disk.
...er(); length: 1 keys of prototype: doappend(); fileappender(); length: 2 keys of prototype: doappend(); reset(); formatter(); length: 0 keys of prototype: format(); logmessage(); length:
4 keys of prototype: leveldesc logger(); length: 2 keys of prototype: addappender(); level logstructured(); name parent removeappender(); updateappenders(); and ...
...numerateproperties(); length: 2 member fields variable type description level object contains the following fields: field name value all 0 config 30 debug 20 desc { 0: "all", 10: "trace", 20: "debug", 30: "config",
40: "info", 50: "warn", 60: "error", 70: "fatal" } error 30 fatal 70 info
40 numbers { "all": 0, "trace": 10, "debug": 20, "config": 30, "info":
40, "warn": 50, "error": 60, "fatal": 70 } trace 10 warn 50 ...
Using JavaScript code modules
if you're writing an extension for firefox
4 and already have a chrome.manifest with a content instruction in it, you can put the code module in your content folder and reference it like your other content files via chrome://<yourextension>/content/<yourmodule>.jsm.
... unloading code modules requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4) components.utils.unload() allows you to unload a previously imported code module.
...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 base6
4 module var base6
4 = require("sdk/base6
4"); base6
4.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.
QA phase
to create and configure this file, follow these instructions: until the fix for bug 1063880 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 enter the following lines in your .mozconfig file: mk_add_options moz_objdir=@topsrcdir@/../firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_op...
... enter the following command: $ hg log -l 1 you should see an output similar to the one below: changeset: 0:7c5
43e8f3a6a 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 ...
...you can expect to see output like this: comparing with http://hg.mozilla.org/l10n-central/x-testing searching for changes changeset: 0:7c5
43e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings let's now push this changeset.
...quota: 979.7 kb in use, 150.0 mb available (0.6
4% used) your changeset has been successfully pushed to your repository!
Various MathML Tests
testing mathml <mrow>: d ( a b ) x 2 +
4 * x + p q = 0 , with this <mfrac> hanging here d * t ( i + j n ) + p y * q p x * b x + a + c d in the middle of a lot of running text to try to explain what this means to those who care to read.
... click the expression below to see several definitions of pi: π = 3.1
4159265358...
... π
4 = 1 2 + 12 2 + 32 2 + 52 2 + 72 2+...
...v - ω ) d 3 v maxwell's equations { ∇ × b → - 1 c ∂ e → ∂ t =
4 π c j → ∇ ċ e → =
4 π ρ ∇ × e → + 1 c ∂ b → ∂ t = 0 → ∇ ċ b → = 0 einstein's field equations r μ ν - 1 2 g μ ν r = 8 π g c
4 t μ ν ...
MathML Demo: <mo> - operator, fence, separator, or accent
( 1 2 3
4 5 ) + 1 given the symmetric restriction on fences, it is very difficult for latex to produce the product of a fenced row vector and a fenced column vector as shown below.
...the commands \big, \big, \bigg and \bigg produce a discreet set of increasingly taller fences, | 1 + | 2 + | 3 + |
4 + | .
...here's the same expression in a display | 1 + | 2 + | 3 + |
4 + | .
... | + 5 | + 6 | + 7 | + 8 | the size ratio is 3.0 : 2.
4 : 1.8 : 1.2.
Mozilla Web Developer FAQ
the easiest way to make sure that the standards mode is activated for html, is to use this doctype declaration: <!doctype html> the easiest way to make sure that the almost standards mode is activated for html, is to use this doctype declaration: <!doctype html public "-//w3c//dtd html
4.01 transitional//en" "http://www.w3.org/tr/html
4/loose.dtd"> the easiest way to activate the quirks mode for html is to omit the doctype declaration.
...in fact, the html
4.01 specification suggests that the title attribute may be displayed as a tooltip.
...characters in html
4 and xml documents are unicode characters (even if the document has been encoded using a legacy encoding for transfer)—not font glyph indexes.
...if you are using a legacy encoding that cannot represent that character, you can use a numeric character reference: 	
45;.
tools/power/rapl
you must be running linux kernel version 3.1
4 or later for rapl to work.
... total w = _pkg_ (cores + _gpu_ + other) + _ram_ w #01 5.17 w = 1.78 ( 0.12 + 0.10 + 1.56) + 3.39 w #02 9.
43 w = 5.
44 ( 1.
44 + 1.20 + 2.80) + 3.98 w #03 1
4.26 w = 10.21 ( 5.
47 + 0.19 +
4.55) +
4.0
4 w #0
4 10.02 w = 6.15 ( 2.62 + 0.
43 + 3.10) + 3.86 w #05 1
4.63 w = 10.
43 (
4.
41 + 0.81 + 5.22) +
4.19 w #06 11.16 w = 6.90 ( 1.91 + 1.68 + 3.31) +
4.26 w #07 5.
40 w = 1.97 ( 0.20 + 0.10 + 1.67) + 3.
44 w #08 5.17 w = 1.76 ( 0.07 + 0.08 + 1.60) + 3.
41 w #09 5.17 w = 1.76 ( 0.09 + ...
...0.08 + 1.58) + 3.
42 w #10 8.13 w =
4.
40 ( 1.55 + 0.11 + 2.7
4) + 3.73 w things to note include the following.
...t, 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.16 w 95th percentile = 1
4.63 w 100th percentile = 1
4.63 w (max) the distribution data is omitted if there was zero or one samples taken.
Creating a Cookie Log
change to your firefox directory (usually c:\program files\mozilla firefox) type "set nspr_log_file=c:\temp\cookie-log.txt", enter type "set nspr_log_modules=cookie:
4" and press enter run firefox by typing "firefox.exe" and pressing enter.
... type "export nspr_log_modules=cookie:
4" and press enter.
... type "export nspr_log_modules=cookie:
4" and press return.
... original document information author(s): mike connor last updated date: december
4, 200
4 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
PRIOMethods
syntax #include <prio.h> struct priomethods { prdesctype file_type; prclosefn close; prreadfn read; prwritefn write; pravailablefn available; pravailable6
4fn available6
4; prfsyncfn fsync; prseekfn seek; prseek6
4fn seek6
4; prfileinfofn fileinfo; prfileinfo6
4fn fileinfo6
4; 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; ...
... available6
4 same as previous field, except 6
4-bit.
... seek6
4 same as previous field, except 6
4-bit.
... fileinfo6
4 same as previous field, except 6
4-bit.
Encrypt and decrypt MAC using token
_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad =
4 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(st...
...macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstatus rv; char header[
40]; char trailer[
40]; char *outstring = null; switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: strcpy(header, iv_header); strcpy(trailer, iv_trailer...
...iv, ivlen, type, cka_decrypt); } /* * read cryptographic parameters from the header file */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; prfiledesc* file; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char header[
40]; char trailer[
40]; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, macke...
...k11_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[6
4]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[6
4]; unsigned int ctextlen; unsigned char newmac[digestsize]; unsigned int newmaclen = 0; unsigned int newptextlen = 0; unsigned int count = 0; unsigned int temp = 0...
NSS 3.15.2 release notes
bug 89
4370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure.
...new pkcs #11 mechanisms no new pkcs#11 mechanisms have been introduced notable changes in nss 3.15.2 bug 8805
43 - support for aes-gcm ciphersuites that use the sha-256 prf bug 663313 - md2, md
4, and md5 signatures are no longer accepted for ocsp or crls, consistent with their handling for general certificate signatures.
... bug 88
4178 - add pk11_cipherfinal macro bugs fixed in nss 3.15.2 bug 73
4007 - sizeof() used incorrectly bug 900971 - nssutil_readsecmoddb() leaks memory bug 681839 - allow ssl_handshakenegotiatedextension to be called before the handshake is finished.
... bug 8
4838
4 - deprecate the ssl cipher policy code, as it's no longer relevant.
NSS 3.15.3 release notes
nss 3.15.3 requires nspr
4.10.2 or newer.
... bug 925100 - (cve-2013-17
41) ensure a size is <= half of the maximum pruint32 value bug 93
4016 - (cve-2013-5605) handle invalid handshake packets bug 910
438 - (cve-2013-5606) return the correct result in cert_verifycert on failure, if a verifylog isn't used new in nss 3.15.3 new functionality no new major functionality is introduced in this release.
... this release is a patch release to address cve-2013-17
41, cve-2013-5605 and cve-2013-5606.
... bugs fixed in nss 3.15.3 bug 850
478 - list rc
4_128 cipher suites after aes_128 cipher suites bug 919677 - don't advertise tls 1.2-only ciphersuites in a tls 1.1 clienthello a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.3&product=nss compatibility nss 3.15.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15 release notes
nss 3.15 requires nspr
4.10 or newer.
...for more details of the issues with secitem_reallocitem, see bug 2986
49 and bug 298938.
... bug 55
4369: fixed correctness of cert_cacheocspresponsefromsidechannel and other ocsp caching behaviour.
... bug 3
41127: fix the invalid read in rc
4_wordconv.
NSS 3.16.2.1 release notes
nss 3.16.2.1 requires nspr
4.10.6 or newer.
... bug 106
4636 - (cve-201
4-1568) rsa signature forgery in nss.
... see also mfsa 201
4-73 for details.
... bugs fixed in nss 3.16.2.1 bug 106
4636 - (cve-201
4-1568) rsa signature forgery in nss acknowledgements the nss development team would like to thank antoine delignat-lavaud, security researcher at inria paris in team prosecco, and the advanced threat research team at intel security, who both independently discovered and reported this issue, for responsibly disclosing the issue by providing advance copies of their research.
NSS 3.16.5 release notes
nss 3.16.5 requires nspr
4.10.6 or newer.
... bug 106
4636 - (cve-201
4-1568) rsa signature forgery in nss.
... see also mfsa 201
4-73 for details.
... bugs fixed in nss 3.16.5 bug 106
4636 - (cve-201
4-1568) rsa signature forgery in nss acknowledgements the nss development team would like to thank antoine delignat-lavaud, security researcher at inria paris in team prosecco, and the advanced threat research team at intel security, who both independently discovered and reported this issue, for responsibly disclosing the issue by providing advance copies of their research.
NSS 3.17.1 release notes
nss 3.17.1 requires nspr
4.10.7 or newer.
... bug 106
4636 - (cve-201
4-1568) rsa signature forgery in nss.
... see also mfsa 201
4-73 for details.
... added support for linux on little-endian powerpc6
4.
NSS 3.18.1 release notes
nss 3.18.1 requires nspr
4.10.8 or newer.
... ou = equifax secure certificate authority sha1 fingerprint: d2:32:09:ad:23:d3:1
4:23:21:7
4:e
4:0d:7f:9d:62:13:97:86:63:3a the following ca certificate was removed after discussion about it in the mozilla.dev.security.policy forum.
... cn = e-guven kok elektronik sertifika hizmet saglayicisi sha1 fingerprint: dd:e1:d2:a9:01:80:2e:1d:87:5e:8
4:b3:80:7e:
4b:b1:fd:99:
41:3
4 the following intermediate ca certificate has been added as actively distrusted because it was misused to issue certificates for domain names the holder did not own or control.
... cn=mcsholding test, o=mcsholding, c=eg sha1 fingerprint: e1:f3:59:1e:76:98:65:c
4:e
4:
47:ac:c3:7e:af:c9:e2:bf:e
4:c5:76 the version number of the updated root ca list has been set to 2.
4 bugs fixed in nss 3.18.1 this bugzilla query returns all the bugs fixed in nss 3.18.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.18.1 compatibility nss 3.18.1 shared libraries are backward compatible with all older nss 3.18 shared libraries.
NSS 3.19.2.1 release notes
nss 3.19.2.1 requires nspr
4.10.10 or newer.
... nss 3.19.2.1 and nspr
4.10.10 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_2_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v
4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.19.2.1.
... the following security-relevant bugs have been resolved in nspr
4.10.10, which affect nss.
... because nss includes portions of the affected nspr code at build time, it is necessary to use nspr
4.10.10 when building nss.
NSS 3.19.2.2 release notes
(current users of nss 3.19.3 or nss 3.19.
4 are advised to update to nss 3.20.2, nss 3.21, or a later release.) distribution information the hg tag is nss_3_19_2_2_rtm.
... nss 3.19.2.2 requires nspr
4.10.10 or newer.
... nss 3.19.2.2 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_2_2_rtm/src/ security fixes in nss 3.19.2.2 bug 1158
489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
... acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1158
489.
NSS 3.19.2.3 release notes
(current users of nss 3.19.3, nss 3.19.
4 or nss 3.20.x are advised to update to nss 3.21.1, nss 3.22.2, or a later release.) distribution information the hg tag is nss_3_19_2_3_rtm.
... nss 3.19.2.3 requires nspr
4.10.10 or newer.
... security fixes in nss 3.19.2.3 bug 12
45528 / cve-2016-1950 - fixed a heap-based buffer overflow related to the parsing of certain asn.1 structures.
... acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 12
45528.
NSS 3.19.3 release notes
nss 3.19.3 requires nspr
4.10.8 or newer.
... 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:56: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:e6:c2:1e:15:3a:71:9f:ba:5a:d3:
4a:d9 cn = sg trust services racine sha1 fingerprint: 0c:62:8f:5c:55:70:b1:c9:57:fa:fd:38:3f:b0:3d:7b:7d:d7:b9:c6 cn = tc trustcenter universal ca i sha-1 fingerprint: 6b:2f:3
4: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:f
4:5c:bc:8f:61:c6:21:fe:68:5d:79:
42:21:15:6e the following ca certificate had the websites trust bit turned off cn = comsign secured ca sha1 fingerprint: f9:cd:0e:2c:da:76:2
4:c1:8f:bd:f0:f0:ab:b6:
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: c
4:18:f6:
4d:
46:d1:df:00:3d:27:30:13:72:
43:a9:12:11:c6:75:fb cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha1 fingerprint: 8a:5c:8c:ee:a5:03:e6:05:56:ba:d8:1b:d
4:f6:c9:b0:ed:e5:2f:e0 cn = certinomis - root ca sha...
...1 fingerprint: 9d:70:bb:01:a5:a
4:a0:18:11:2e:f7:1c:01:b9:32:c5:3
4:e7:88:a8 the version number of the updated root ca list has been set to 2.5 bugs fixed in nss 3.19.3 this bugzilla query returns all the bugs fixed in nss 3.19.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.3 compatibility nss 3.19.3 shared libraries are backward compatible with all older nss 3.19 shared libraries.
NSS 3.20.1 release notes
nss 3.20.1 requires nspr
4.10.10 or newer.
... nss 3.20.1 and nspr
4.10.10 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_20_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v
4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.20.1.
... the following security-relevant bugs have been resolved in nspr
4.10.10, which affect nss.
... because nss includes portions of the affected nspr code at build time, it is necessary to use nspr
4.10.10 when building nss.
NSS 3.22.2 release notes
nss 3.22.2 requires nspr
4.12 or newer.
... security fixes in nss 3.22.2 bug 12
45528 / cve-2016-1950 - fixed a heap-based buffer overflow related to the parsing of certain asn.1 structures.
... notable changes in nss 3.22.2 bug 12
47990 - the root ca changes from nss 3.23 have been backported.
... acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 12
45528.
NSS 3.27 release notes
nss 3.27 requires netscape portable runtime (nspr)
4.13 or newer.
... the following ca certificates were removed cn = igc/a, o = pm/sgdn, ou = dcssi sha256 fingerprint: b9:be:a7:86:0a:96: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 sha256 fingerprint: ec:c3:e9:c3:
40:75:03:be:e0:91:aa:95:2f:
41:3
4:8f:f8:8b:aa:86:3b:22:6
4:be:fa:c8:07:90:15:7
4:e9:39 cn = ebg elektronik sertifika hizmet sağlayıcısı sha-256 fingerprint: 35:ae:5b:dd:d8:f7:ae:63:5c:ff:ba:56:82:a8:f0:0b:95:f
4:8
4:62:c7:10:8e:e9:a0:e5:29:2b:07:
4a:af:b2 cn = s-trust authentication and encryption root ca 2005:pn sha-256 fingerprint: 37:d8:dc:8a:f7:86:78:
45...
...:da:33:
44:a6:b1:ba:de:
44:8d:8a:80:e
4:7b:55:79:f9:6b:f6:31:76:8f:9f:30:f6 o = verisign, inc., ou = class 1 public primary certification authority sha-256 fingerprint: 51:8
4:7c:8c:bd:2e:9a:72:c9:1e:29:2d:2a:e2:
47:d7:de:1e:3f:d2:70:5
4:7a:20:ef:7d:61:0f:38:b8:8
4:2c o = verisign, inc., ou = class 2 public primary certification authority - g2 sha-256 fingerprint: 3a:
43:e2:20:fe:7f:3e:a9:65:3d:1e:21:7
4: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-256 fingerprint: e7:68:56:3
4:ef:ac:f6:9a:ce:93:9a:6b:25:5b:7b:
4f:ab:ef:
42:93:5b:50:a2:65:ac:b5:cb:60:27:e
4:
4e:70 o = equifax, ou = equifax secure certificate authority sha-256 finge...
...rprint: 08:29:7a:
40:
47:db:a2:36:80:c7:31:db:6e:31:76:53:ca:78:
48:e1:be:bd:3a:0b:01:79:a7:07:f9:2c:f1:78 cn = equifax secure ebusiness ca-1 sha-256 fingerprint: cf:56:ff:
46:a
4:a1:86:10:9d:d9:65:8
4:b5:ee:b5:8a:51:0c:
42:75:b0:e5:f9:
4f:
40:bb:ae:86:5e:19:f6:73 cn = equifax secure global ebusiness ca-1 sha-256 fingerprint: 5f:0b:62:ea:b5:e3:53:ea:65:21:65:16:58:fb:b6:53:59:f
4:
43:28:0a:
4a:fb:d1:0
4: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/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.27 compatibility nss 3.27 shared libraries are backwards compatible with all older nss 3.x shared libr...
NSS 3.30.2 release notes
nss 3.30.2 requires nspr
4.1
4 or newer.
... notable changes in nss 3.30.2 the following ca certificates were removed: o = japanese government, ou = applicationca sha-256 fingerprint: 2d:
47:
43:7d:e1:79:51:21:5a:12:f3:c5:8e:51:c7:29:a5:80:26:ef:1f:cc:0a:5f:b3:d9:dc:01:2f:60:0d:19 cn = wellssecure public root certificate authority sha-256 fingerprint: a7:12:72:ae:aa:a3:cf:e8:72:7f:7f:b3:9f:0f:b3:d1:e5:
42:6e:90:60:b0:6e:e6:f1:3e:9a:3c:58:33:cd:
43 cn=tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha-256 fingerprint: 8d:e7:86:55:e1...
...:be:7f:78:
47:80:0b:93:f6:9
4:d2:1d:36:8c:c0:6e:03:3e:7f:ab:0
4:bb:5e:b9:9d:a6:b7:00 cn=microsec e-szigno root sha-256 fingerprint: 32:7a:3d:76:1a:ba:de:a0:3
4:eb:99:8
4:06:27:5c:b1:a
4: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-256 fingerprint: a1:a8:6d:0
4:12:1e:b8:7f:02:7c:66:f5:33:03:c2:8e:57:39:f9:
43:fc:8
4:b3:8a:d6:af:00:90:35:dd:9
4:57 trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-256 fingerprint:
46:ed:c3:68:90:
46:d5:3a:
45:3f:b3:10:
4a:b8:0d:ca:ec:65:8b:26:60:ea:16:29:dd:7e:86:79:90:6
4:87:16 trust flags: websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.tr, bel.tr, edu.tr...
..., org.tr the version number of the updated root ca list has been set to 2.1
4 (the version numbers 2.12 and 2.13 for the root ca list have been skipped.) bugs fixed in nss 3.30.2 bug 1350859 - march 2017 batch of root ca changes bug 13
49705 - implemented domain name constraints for ca: tubitak kamu sm ssl kok sertifikasi - surum 1 compatibility nss 3.30.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.37 release notes
nss 3.37 requires nspr
4.19 or newer.
... starting with nss version 3.31, an alternative implementation for rng seeding on the linux/unix platform was available (bug 13
46735), which performed seeding exclusively based on /dev/urandom.
... the ca certificates list was updated to version 2.2
4.
... the following ca certificates were removed: cn = s-trust universal root ca sha-256 fingerprint: d8:0f:ef:91:0a:e3:f1:0
4:72:3b:0
4:5c:ec:2d:01:9f:
44:1c:e6:21:3a:df:15:67:91:e7:0c:17:90:11:0a:31 cn = tc trustcenter class 3 ca ii sha-256 fingerprint: 8d:a0:8
4:fc:f9:9c:e0:77:22:f8:9b:32:05:93:98:06:fa:5c:b8:11:e1:c8:13:f6:a1:08:c7:d3:36:b3:
40:8e cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h5 sha-256 fingerprint:
49:35:1b:90:3
4:
44:c1:85:cc:dc:5c:69:3d:2
4:d8:55:5c:b2:08:d6:a8:1
4: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=n...
NSS API Guidelines
the library supports base-6
4 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 base6
4.h, ciferfam.h, nssb6
4.h, nssb6
4t.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:
48936 $ $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.
... here is an example from lib/base/baset.h: #ifdef debug static const char baset_cvs_id[] = "@(#) $rcsfile: nss-guidelines.html, v $ $revision:
48936 $ $date: 2009-08-11 07:
45:57 -0700 (tue, 11 aug 2009) $ $name$"; #endif /* debug */ the difference, between this and id, is that id has some useless information (every file is "experimental"), and doesn't have name.
Encrypt Decrypt_MAC_Using Token
_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad =
4 } headertype; /* * print usage message and exit.
...macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstatus rv; char header[
40]; char trailer[
40]; char *outstring = null; switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: strcpy(header, iv_header); strcpy(trailer, iv_trailer...
... */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; prfiledesc* file; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char header[
40]; char trailer[
40]; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, macke...
... */ 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[6
4]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[6
4]; unsigned int ctextlen; unsigned char newmac[digestsize]; unsigned int newmaclen = 0; unsigned int newptextlen = 0; unsigned int count = 0; unsigned int temp = 0...
NSS Sample Code Sample1
//
4.
...the same methods outlined // in step
4 may be used here.
...// - the application sends or uses the result (possibly // after base6
4 encoding it.
... rv = getprivatekey(&prvkey); if (rv == 0 && prvkey) goto done; rv = 0; // these could be parameters to the init function rsaparams.keysizeinbits = 102
4; 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.
NSS Sample Code Sample_3_Basic Encryption and MACing
_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad =
4 } headertype; /* print a usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c <a|b> -d <dbdirpath> [-z <noisefilename>] " "[-p <dbpwd> | -f <dbpwdfile>] -i <ipfilename> -o <opfilename>\n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c <a|b>"); fprintf(stderr, "%-20...
...init(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxlen); return rv; } /* * write to header file */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstatus rv; char header[
40]; char trailer[
40]; char *outstring = null; switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: strcpy(header, iv_header); strcpy(trailer, iv_trailer...
...iv, ivlen, type, cka_decrypt); } /* * read cryptographic parameters from the header file */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; prfiledesc* file; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char header[
40]; char trailer[
40]; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, macke...
...reeslot(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[6
4]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[6
4]; unsigned int ctextlen; unsigned char newmac[digestsize]; unsigned int newmaclen = 0; unsigned int newptextlen = 0; unsigned int count = 0; unsigned int temp = 0...
NSS Sample Code sample5
the public key & private key to use are * sourced from a base6
4-encoded der subjectpublickeyinfo structure, * and a base6
4-encoded der privatekeyinfo structure.
... */ #include "nss.h" #include "pk11pub.h" #define base6
4_encoded_subjectpublickeyinfo "mfwwdqyjkozihvcnaqebbqadswawsajbal3f6tic3jeysugo+a2fpu3w+epv/feix21dc86wynpftw
4srftz2onuzyluzdhzdb+k//8dct3iaozuui3r2emcaweaaq==" #define base6
4_encoded_privatekeyinfo "miibvqibadanbgkqhkig9w0baqefaascat8wgge7ageaakeavcxpmhzckriy6cj5rz89tdb
4sm/8v
4hfbumlzpziekw1biysw3pag1tpittmmdl1v6t//x1xpcga7nrsldhz
4widaqabakeajh8+
4qncwcmgivnm6ytbpqt+k/jeoexg2bqhjojvnxn3fazgcefxvpuibcjvfaijs9ybcmozzrato0+k2hwnoqihaoc
4nvbo8fqhzs
4yxm1m86kml
47fa9ui//oufbhladw1aiea2dbmixnsbokb+ohver69p0gnewlvcjc9bjdvfdlvslcciqcp...
...tv3vgyjv2vdwxqzqahc+yb
4gigaqoqbcbmjd3lyflqiga+vtydunoqwtzwve
4grf7izk2v5ccnhg3gr5rgwxn58cigccaforruksm66isg0iti0
4g9v/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 = base6
4_encoded_subjectpublickeyinfo; char *pvtkstr = base6
4_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_...
... * publicvalue arg (
4th) can be null for rsa key - i think it is even * ignored */ pk11_importderprivatekeyinfoandreturnkey(slot, &der, null, null, pr_false, pr_true, ku_all, &pvtkey, null); secitem_freeitem(&der, pr_false); if (pvtkey == null) { fprintf(stderr, "couldn't extract private key (err %d)\n", pr_geterro...
EncDecMAC using token object - sample 3
ackey_trailer "-----end mackey ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad =
4 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s s...
...ac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstatus rv; char header[
40]; char trailer[
40]; char *outstring = null; switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: strcpy(header, iv_header); strcpy(trailer, iv_trailer); break; case mac: strcpy(header, mac_header); strcpy(trailer, mac_trailer); break; case pad: strcpy(header...
...gned char *iv, unsigned int ivlen, ck_mechanism_type type) { return cryptinit(dk, iv, ivlen, type, cka_decrypt); } /* * read cryptographic parameters from the header file */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; prfiledesc* file; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char header[
40]; char trailer[
40]; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: strcpy(header, iv_header); strc...
...rr, "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[6
4]; unsigned int decbuflen; unsigned char ptext[blocksize]; unsigned int ptextlen = 0; unsigned char ctext[6
4]; 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;...
nss tech note8
since nss 1.0, up until nss 3.
4, there were two global variables that contained the expected session lifetimes for ssl2 and ssl3 sessions.
... the server side of the session cache code was largely rewritten for nss 3.
4.
... so, in nss 3.
4, the global variables ssl3_sid_timeout and ssl_sid_timeout were intended to become the definitions for the client cache only, and each server cache had its own new pair of variables for ssl2 and ssl3 session lifetimes, i.e., cache->ssl2timeout and cache->ssl3timeout.
...that is the subject of bug 2232
42.
PKCS11 FAQ
generic crypto svcs are the services that nss uses to do its basic cryptography (rsa encryption with public keys, hashing, aes, des, rc
4, rc2, and so on).other pkcs #11 modules can supply implementations of these functions, and nss uses those versions under certain conditions.
... if i have a multipurpose token that supports all required pkcs #11 functions and provides rsa_pkcs and dsa mechanisms but but not aes, des or rc
4, will nss use the token for the rsa_pkcs mechanisms and the nss internal pkcs #11 module for aes, des or rc
4 when making an ssl connection?
...symmetric operations supported by nss include the following: ckm_aes_xxx, ckm_des3_xxx, ckm_des_xxx, ckm_rc2_xxx, and ckm_rc
4_xxx.
...the public key is sent to the server base-6
4-der-encoded with an (optional) signed challenge.
Build instructions
use_6
4: on platforms that support both 32-bit and 6
4-bit abis, tells nss to build for the 6
4-bit abi.
... hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss if you want to build a releases other than the tips of these repositories, then switch to the release tags: cd nspr hg update nspr_
4_9_5_rtm cd ../nss hg update nss_3_1
4_2_rtm cd ..
... on unix platforms, except alpha/osf1, if you want a build for the system's 6
4-bit abi, set use_6
4=1 in your environment.
... check out nspr and nss: cvs co -r nspr_
4_9_5_rtm nspr cvs co -r nss_3_1
4_2_rtm nss set environment variables as described in the mercurial-based instructions.
gtstd.html
the fips 1
40-1 module is compliant with the fips 1
40-1 government standard for implementations of cryptographic modules.
...the fips 1
40-1 module includes a single, built-in fips 1
40-1 certificate db token (see figure 2.1), which handles both cryptographic operations and communication with the certx.db and keyx.db files.
...the security module database tool allows you to add and delete pkcs #11 modules, change passwords, set defaults, list module contents, enable or disable slots, enable or disable fips-1
40-1 compliance, and assign default providers for cryptographic operations.
...in addition, you must use the following compiler flags: solaris flags: -c -o -kpic -dsvr
4 -dsysv -d__svr
4 -d__svr
4__ -dsolaris -d_reentrant -dsolaris2_5 -d_svid_gettod -dxp_unix -udebug -dndebug windows nt flags: -c -o2 -md -w3 -nologo -d_x86_ -gt -dwinnt -dxp_pc -udebug -u_debug -dndebug -dwin32 -d_windows ...
NSS Tools pk12util
for historical export control reasons "pkcs12 v2 pbe with sha1 and
40 bit rc
4" is the default for the overall package encryption when not in fips mode and no package encryption when in fips mode.
... 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-256-cbc" "camellia-128-cbc" "camellia-192-cbc" "camellia-256-cbc" pkcs #12 pbe ciphers: "pkcs #12 pbe with sha1 and 128 bit rc
4" "pkcs #12 pbe with sha1 and
40 bit rc
4" "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 rc
4" "pkcs12 v2 pbe with sha1 and
40 bit rc
4" --- default for pfx encryption in non-fips mode, no encryption on fips mode "pkcs12 v2 pbe with sha1 and 3key triple des-cbc" "pkcs12 v2 pbe with sha1...
... and 2key triple des-cbc" "pkcs12 v2 pbe with sha1 and 128 bit rc2 cbc" "pkcs12 v2 pbe with sha1 and
40 bit rc2 cbc" pkcs #5 pbe ciphers: "pkcs #5 password based encryption with md2 and des cbc" "pkcs #5 password based encryption with md5 and des cbc" "pkcs #5 password based encryption with sha1 and des cbc" it should be noted that the the crypto provider may be the softtoken module or an external hardware module.
... 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 1
4 - pkcs12 decoder start error 15 - error read from import file 16 - pkcs12 decode error 17 - pkcs12 decoder verify error 18 - pkcs12 decoder validate bags error 19 - pkcs12 decoder import bags error 20 - key 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 2
4 - find cert by nickname erro...
JSClass.flags
mxr id search for jsclass_is_domjsclass jsclass_emulates_undefined added in spidermonkey 2
4 causes objects which have this class to emulate undefined in certain circumstances.
...g 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 262-3 §10.1.8 specifies "the original object prototype"), function objects (ecma 262-3 §13.2 specifies "the original function prototype"), and objects created by many standard constructors (ecma 262-3 §15.
4.2.1 and others).
... jsclass_implements_barriers obsolete since jsapi
43 correctly implements gc read and write barriers.
... see also bug 527805 - removed jsclass_share_all_properties bug 571789 - removed jsclass_is_extended bug 638291 - removed jsclass_mark_is_trace bug 6
41025 - added jsclass_implements_barriers bug 702507 - removed jsclass_construct_prototype bug 758913 - removed jsclass_new_resolve_gets_start bug 766
447 - added jsclass_is_domjsclass bug 792108 - added jsclass_emulates_undefined bug 993026 - removed jsclass_new_resolve bug 1097267 - removed jsclass_new_enumerate ...
JSProtoKey
this article covers features introduced in spidermonkey 2
4 possible standard object prototype types.
...y mxr search for jsproto_int16array jsproto_uint16array uint16array mxr search for jsproto_uint16array 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_float6
4array float6
4array mxr search for jsproto_float6
4array 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 ...
...o_shareduint16array jsproto_sharedint32array sharedint32array (nightly only) mxr search for jsproto_sharedint32array jsproto_shareduint32array shareduint32array (nightly only) mxr search for jsproto_shareduint32array jsproto_sharedfloat32array sharedfloat32array (nightly only) mxr search for jsproto_sharedfloat32array jsproto_sharedfloat6
4array sharedfloat6
4array (nightly only) mxr search for jsproto_sharedfloat6
4array jsproto_shareduint8clampedarray shareduint8clampedarray (nightly only) mxr search for jsproto_shareduint8clampedarray jsproto_typedarray typedarray added in spidermonkey 38 mxr search for jsproto_typedarray jsproto_atomics atomics (nightly only) mxr search fo...
... see also bug 789635 bug 6
45
416 - added jsproto_symbol bug 769872 - added jsproto_intl bug 792
439 - added jsproto_weakset bug 896116 - added jsproto_typedarray bug 90
4701 - added jsproto_generatorfunction bug 91
4220 - added jsproto_typedobject bug 933001 - added jsproto_sharedarraybuffer bug 9
460
42 - added jsproto_simd bug 105
4882 - added jsproto_shared*arrays ...
JS_ExecuteScript
syntax bool js_executescript(jscontext *cx, js::handlescript script, js::mutablehandlevalue rval); // added in spidermonkey
45 bool js_executescript(jscontext *cx, js::handlescript script); // added in spidermonkey
45 bool js_executescript(jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script, js::mutablehandlevalue rval); // added in spidermonkey 36 bool js_executescript(jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script); // added in spidermonkey 36 bool js_executescript(jscontext *cx, js::handleobject obj, js::handlescript script, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js_executescript(jscontext *cx, js::handleobject obj,...
... js::handlescript script); // obsolete since jsapi 39 bool js::cloneandexecutescript(jscontext *cx, js::handle<jsscript*> script); // added in spidermonkey
45 bool js::cloneandexecutescript(jscontext *cx, js::handle<jsobject*> obj, js::handle<jsscript*> script); // added in spidermonkey 31, obsoleted since jsapi 39 name type description cx jscontext * the context in which to execute the script.
...obsolete since jsapi 39 obj must not be an array, an e
4x xml object, a with object, or a proxy.
... see also mxr id search for js_executescript mxr id search for js::cloneandexecutescript js::compile js::evaluate bug 993
438 bug 11
4529
4 -- removed obj from js::cloneandexecutescript.
Frecency algorithm
1
40 (places.frecency.bookmarkvisitbonus) ....
...100 (places.frecency.firstbucketweight,
4 days bucket size, in places.frecency.firstbucketcutoff) ....
... 70 (places.frecency.secondbucketweight, 1
4 days bucket size, in places.frecency.secondbucketcutoff) ....
... final frecency score for visited uri = ceiling(total visit count * sum of points for sampled visits / number of sampled visits) example this is an example of a frecency calculation for a uri that is bookmarked and has been visited twice recently (once yesterday, and once last week by clicking a link), and two other times more than 90 days ago: 0 default score +1
40 100 * (1
40/100.0) - first bucket weight and bookmarked bonus +8
4 70 * (120/100.0) - second bucket weight and followed-link bonus +1
4 10 * (1
40/100.0) - fifth bucket weight and bookmarked bonus +1
4 10 * (1
40/100.0) - fifth bucket weight and bookmarked bonus -- 252 (
4 * 252 /
4) - final frecency score notes the number of sa...
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); setpageannotationint6
4(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); setitemannotationi...
...nt6
4(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); getpageannotationint6
4(auri, aname); getpageannotationdouble(auri, aname); getpageannotationbinary(auri, aname, adata, adatalen, amimetype); getitemannotationstring(aitemid, aname); getitemannotationint32(aitemid, aname); getitemannotationint6
4(aitemid, aname); getitemannotationdouble(aitemid, aname); getitemannotationbinary(aitemid, aname, adata, adatalen, amimetype); from javascript: getpageannotation(...
...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 377066 the value_type_* type handling was changed to this: type_int32 = 1 type_double = 2 type_string = 3 type_binary =
4 type_int6
4 = 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, results); retrieves a list of all pages/items with the given annotation.
Creating the Component Code
several new options have been added to regxpcom in versions 1.
4 and later.
...static const nsiid kimoduleiid = ns_imodule_iid; static const nsiid kifactoryiid = ns_ifactory_iid; static const nsiid kisupportsiid = ns_isupports_iid; static const nsiid kicomponentregistrariid = ns_icomponentregistrar_iid; // generate unique id here with uuidgen #define sample_cid \ { 0x777f7150, 0x
4a2b, 0x
4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} static const nscid ksamplecid = sample_cid; nsimodule.h and nsifactory.h are required to build your module successfully.
...uuidgen is a command-line tool that returns a unique 128-bit number when you call it with no arguments: $ uuidgen ce32e3ff-36f8-
425f-9
4be-d85b26e63
4ee on windows, a program called guidgen.exe does the same thing and also provides a graphical user interface if you'd rather point and click.
...zilla_strict_api #include "nsimodule.h" #include "nsifactory.h" #include "nsicomponentmanager.h" #include "nsicomponentregistrar.h" static const nsiid kimoduleiid = ns_imodule_iid; static const nsiid kifactoryiid = ns_ifactory_iid; static const nsiid kisupportsiid = ns_isupports_iid; static const nsiid kicomponentregistrariid = ns_icomponentregistrar_iid; #define sample_cid \ { 0x777f7150, 0x
4a2b, 0x
4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} static const nscid ksamplecid = sample_cid; class sample: public nsisupports { private: nsrefcnt mrefcnt; public: sample(); virtual ~sample(); ns_imethod queryinterface(const nsiid &aiid, void **aresult); ns_imethod_(nsrefcnt) addref(void); ns_imethod_(nsrefcnt) release(void); }; sample::sample() { ...
mozIStorageBindingParams
void bindint6
4byindex(in unsigned long aindex, in long long avalue); native code only!
... void bindint6
4byname(in autf8string aname, in long long avalue); native code only!
... native code only!bindint6
4byindex binds an int6
4 to the specified index.
... native code only!bindint6
4byname binds an int6
4 to the specified index.
mozIStorageFunction
last changed in gecko 1.9.1.
4 (firefox 3.5.
4) inherits from: nsisupports method overview nsivariant onfunctioncall(in mozistoragevaluearray afunctionarguments); methods onfunctioncall() the implementation of the function.
... javascript starting in gecko 1.9.1.
4 (firefox 3.0.15), you can directly pass your function into the mozistorageconnection method mozistorageconnection, like this: dbconn.createfunction("square", 1, function(aarguments) { let value = aarguments.getint32(0); return value * value; }); // run some query that uses the function.
...this still works in gecko 1.9.1.
4 and later, so you may wish to do it this way for compatibility for the time being.
...n { public: ns_imethod onfunctioncall(mozistoragevaluearray *aarguments, nsivariant **_result) { print32 value; nsresult rv = aarguments->getint32(&value); ns_ensure_success(rv, rv); nscomptr<nsiwritablevariant> result = do_createinstance("@mozilla.org/variant;1"); ns_ensure_true(result, ns_error_out_of_memory); rv = result->setasint6
4(value * value); ns_ensure_success(rv, rv); ns_addref(*_result = result); return ns_ok; } }; // now, register our function with the database connection.
mozIStorageStatement
gparamsarray 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 bindint6
4parameter(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 3880
48 for details.
... bindint6
4parameter() binds an int6
4 parameter to the specified index.
... void bindint6
4parameter( in unsigned long aparamindex, in long long avalue ); parameters aparamindex the zero-based numerical index for the parameter to be bound.
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x0000100
4 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x0000102
4 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparat...
...or 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x0000101
4 xulradiobutton 0x00001015 xulradiogroup 0x00001016 xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface.
... xformsinput 0x0000200
4 used for input and textarea elements.
... xformsselectcombobox 0x0000201
4 used for xforms select1 element that is represented by combobox.
nsIFocusManager
flag_noswitchframe
4 if attempting to change focus in a window that is not focused, do not switch focus to that window.
... flag_bymovefocus 0x
4000 focus is changing due to a call to movefocus().
... movefocus_backwarddoc
4 move focus forward to the previous frame document, used when pressing shift+f6.
... native code only!contentremoved obsolete since gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
nsIMemoryReporter
attributes attribute type description amount print6
4 the numeric value reported by the memory reporter, specified in the units indicated by the units attribute.
... note: this attribute was called memoryused prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4), and its type was long long.
... unit type constants requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4) the amount reported by a memory reporter may use one of the following units.
...for example if the actual percentage is 12.3
4%, amount should be 123
4.
nsIPluginHost
inherits from: nsisupports last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) method overview nsifile createtempfiletopost(in string apostdataurl); native code only!
... nsifile createtempfiletopost( in string apostdataurl ); parameters apostdataurl return value native code only!createtmpfiletopost obsolete since gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
...it will *always malloc()* output buffer (caller is responsible to free it) if input buffer starts with lf, which comes from
4.x spec http://developer.netscape.com/docs/manuals/communicator/plugin/pgfn2.htm#100775
4 "if no custom headers are required, simply add a blank line ('\n') to the beginning of the file or buffer.", it skips that '\n' and considers rest of the input buffer as data.
... native code only!setisscriptableinstance obsolete since gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
nsISocketTransport
constant value description status_resolving 0x80
4b0003 transport is resolving the host.
... status_resolved 0x80
4b000b transport has resolved the host.
... status_connecting_to 0x80
4b0007 status_connected_to 0x80
4b000
4 status_sending_to 0x80
4b0005 status_waiting_for 0x80
4b000a status_receiving_from 0x80
4b0006 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_ipv6 2 when this flag is set, the socket will ignore any ipv6 addresses the host may offer and will only attempt to connect to ipv
4 addresses.
nsIWindowsShellService
inherits from: nsishellservice last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) method overview string getregistryentry(in long ahkeyconstant, in string asubkeyname, in string avaluename); obsolete since gecko 1.8 void restorefilesettings(in boolean aforallusers); obsolete since gecko 1.9 void shortcutmaintenance(); attributes attribute type description desktopbackgroundcolor unsigned long the desktop background color, visible when no background image is used, or if the background image is centered and does not fill the entire screen.
... a rgb value, where (r << 2
4 | g << 16 | b) obsolete since gecko 1.8 unreadmailcount unsigned long the number of unread mail messages for the current user.
...obsolete since gecko 1.8 hku
4 hkey_users.
... return value the value of the specified sub key/value, truncated to
4096 bytes.
nsMsgSearchAttrib
*/ [scriptable, uuid(a83ca7e8-
4591-
4111-8fb8-fd76ac73c866)] 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 */ ...
...smsgsearchattribvalue 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 = 1
4; const nsmsgsearchattribvalue anytext = 15; const nsmsgsearchattribvalue keywords = 16; // keywords are the internal representation of tags.
... const nsmsgsearchattribvalue name = 17; const nsmsgsearchattribvalue displayname = 18; const nsmsgsearchattribvalue nickname = 19; const nsmsgsearchattribvalue screenname = 20; const nsmsgsearchattribvalue email = 21; const nsmsgsearchattribvalue additionalemail = 22; const nsmsgsearchattribvalue phonenumber = 23; const nsmsgsearchattribvalue workphone = 2
4; const nsmsgsearchattribvalue homephone = 25; const nsmsgsearchattribvalue fax = 26; 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 nsmsgsear...
...chattribvalue department = 33; // 3
4 -
43, reserved for ab / ldap; const nsmsgsearchattribvalue hasattachmentstatus =
44; const nsmsgsearchattribvalue junkstatus =
45; const nsmsgsearchattribvalue junkpercent =
46; 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.
nsMsgMessageFlags
marked 0x0000000
4 indicates whether or not the message has been flagged/starred expunged 0x00000008 indicates whether or not the message is deleted (but not compacted) hasre 0x00000010 indicates whether or not 're: ' should be added to the head of the subject to get the proper subject.
... senderauthed 0x00000200 partial 0x00000
400 indicates whether or not the body we have is a complete message.
... ignored 0x000
40000 indicates whether or not the (sub-)thread has been ignored.
... imapdeleted 0x00200000 indicates whether or not the message has been deleted on the imap server mdnreportneeded 0x00
400000 indicates whether or not a delivery receipt was requested.
nsMsgViewCommandType
unflagmessages
4 unflag the selected messages.
... movemessages 1
4 move the selected messages.
... label3 2
4 attach a label to the selected messages.
... label
4 25 attach a label to the selected messages.
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 int6
4_t int6
4_t* number octet uint8_t uint8_t* number short int16_t int16_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 unsigne...
...d long long uint6
4_t uint6
4_t* number unsigned short uint16_t uint16_t* number wchar char16_t char16_t* string full unicode set permitted wstring const char16_t* char16_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, 6
4 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** ...
... table
4: basic interface attributes attribute interpretation uuid(123
45678-fedc-ba98-765
4-0123
456789ab) this is the internal way this interface is accessed; it must be unique, and the uuid must be generated when creating the interface.
Working with windows in chrome code
example
4: using nsiwindowwatcher when you don't have a window (primitives only) for those times when you don't have access to a window object (such as a javascript xpcom object), you can use nsiwindowwatcher.openwindow to open a xul window.
...here is helper function that will package the data correctly and pass it to the newly opened window: function opendialog(parentwindow, url, windowname, features) { var array = components.classes["@mozilla.org/array;1"] .createinstance(components.interfaces.nsimutablearray); for (var i =
4; i < arguments.length; i++) { var variant = components.classes["@mozilla.org/variant;1"] .createinstance(components.interfaces.nsiwritablevariant); variant.setfromvariant(arguments[i]); array.appendelement(variant, false); } var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .gets...
... // in the calling code var args = { param1: true, param2:
42 }; args.wrappedjsobject = args; var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); watcher.openwindow(null, url, windowname, features, args); // in the window code var args = window.arguments[0].wrappedjsobject; this uses the wrappedjsobject trick.
... using fuel application object the fuel library has been deprecated as of firefox
41 the fuel javascript library has a simple method for sharing data between windows.
Accessibility Inspector - Firefox Developer Tools
note that this works correctly as of firefox 62 (bug 1
467381).
... 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.
46, appears in the information bar above it.
...for example: in this example, the contrast ranges from
4.72 to 5.98.
... the numbers are followed by aaa and a checkmark in green, indicating that the large text has a contrast ratio of
4.5:1 or more, meeting the criteria for enhanced contrast, or level aaa.
Basic operations - Firefox Developer Tools
to load a snapshot from an existing .fxsnapshot file, click the import button, which looks like a rectangle with an arrow rising from it (before firefox
49, this button was labeled with the text "import..."): you'll be prompted to find a snapshot file on disk.
... comparing snapshots starting in firefox
45, you can diff two heap snapshots.
... to create a diff, click the button that looks like a venn diagram next to the camera icon (before firefox
47, this looked like a "+/-" icon): you'll be prompted to select the snapshot to use as a baseline, then the snapshot to compare.
...to do this, check "record call stacks" (before firefox
49 this was labeled "record allocation stacks"): ...
Allocations - Firefox Developer Tools
the allocations view is new in firefox
46.
... so in the example above: 890
4 samples were taken in signallater(), which is 28.57% of the total number of samples taken those samples allocated 1102888 bytes, which is 30.01% of the total memory allocated in all samples next to each function name is a disclosure arrow.
...but if you start walking back up the call stack, you'll see the difference: here, 890
4 samples were taken in signallater().
...this is telling us that, of the 890
4 allocations seen in signallater(), all but three came through the removeinner() branch.
Console messages - Firefox Developer Tools
css note: css warnings and reflow messages are not shown by default, for performance reasons (see bug 1
4521
43).
... bug 86387
4 is the meta-bug for logging relevant security messages to the web console.
...t() clear() count() dir() dirxml() error() exception() group() groupend() info() log() table() time() timeend() trace() warn() the console prints a stack trace for all error messages, like this: function foo() { console.error("it explodes"); } function bar() { foo(); } function dostuff() { bar(); } dostuff(); server server-side log messages was introduced in firefox
43, but removed in firefox 56.
... network requests with response codes in the
400-
499 (client error) or 500-599 (server error) ranges are considered errors.
AudioParam.cancelAndHoldAtTime() - Web APIs
— 56alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()edge full support ≤79firefox no support noie no support noopera full support
44 full support
44 no support ?
... —
43alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()safari no support nowebview android full support 57 full support 57 no support ?
...— 56alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()firefox android no support noopera android full support
43 full support
43 no support ?
... —
43alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()safari ios no support nosamsung internet android full support 7.0 full support 7.0 no support ?
BaseAudioContext.createScriptProcessor() - Web APIs
note: as of the august 29 201
4 web audio api spec publication, this feature has been marked as deprecated, and was replaced by audioworklet (see audioworkletnode).
...if specified, the buffersize must be one of the following values: 256, 512, 102
4, 20
48,
4096, 8192, 1638
4.
...ample, 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
4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(
4096, 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...
...ontains 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
4096 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); ...
uuid - Web APIs
the bluetoothremotegattdescriptor.uuid read-only property returns the uuid of the characteristic descriptor, for example '00002902-0000-1000-8000-00805f9b3
4fb' for theclient characteristic configuration descriptor.
... full support ≤79notes notes windows 10.firefox no support noie no support noopera full support
44notes full support
44notes notes macos only.
... full support
44notes disabled notes linux and versions of windows earlier than 10.disabled from version
44: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... 57notes notes windows 10.safari no support nowebview android no support nochrome android full support 57firefox android no support noopera android full support
44safari ios no support nosamsung internet android full support 7.0legend full support full support no support no supportexperimental.
CSSRule - Web APIs
(until the documentation is completed, see the interface definition in the mozilla source code: nsidomcssimportrule.) cssrule.media_rule
4 cssmediarule cssrule.font_face_rule 5 cssfontfacerule cssrule.page_rule 6 csspagerule cssrule.keyframes_rule 7 csskeyframesrule cssrule.keyframe_rule 8 csskeyframerule reserved for future use 9 should be used to define color profiles in the future cssrule.namespace_rule 10 cssn...
...amespacerule cssrule.counter_style_rule 11 csscounterstylerule cssrule.supports_rule 12 csssupportsrule cssrule.document_rule 13 cssdocumentrule cssrule.font_feature_values_rule 1
4 cssfontfeaturevaluesrule cssrule.viewport_rule 15 cssviewportrule cssrule.region_style_rule 16 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.
... css fonts module level
4the definition of 'cssrule' in that specification.
...(document_rule has been pushed to css conditional rules level
4) document object model (dom) level 2 style specificationthe definition of 'cssrule' in that specification.
Cache - Web APIs
note that an http error response (e.g.,
40
4) will not trigger an exception.
... // (see /docs/web/api/request/clone) return fetch(event.request.clone()).then(function(response) { console.log(' response for %s from network is: %o', event.request.url, response); if (response.status <
400 && response.headers.has('content-type') && response.headers.get('content-type').match(/^font\//i)) { // this avoids caching responses that we know are errors (i.e.
... http status code of
4xx or 5xx).
...
40
4) will not trigger an exception.
CanvasRenderingContext2D.fillText() - Web APIs
this code creates a context
400 pixels wide and 150 pixels across.
... <canvas id="canvas" width="
400" height="150"></canvas> javascript the javascript code for this example follows.
... result restricting the text size this example writes the words "hello world," restricting its width to 1
40 pixels.
... html <canvas id="canvas" width="
400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90, 1
40); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filltext' in that specification.
CanvasRenderingContext2D.strokeText() - Web APIs
this code creates a context
400 pixels wide and 150 pixels high.
... <canvas id="canvas" width="
400" height="150"></canvas> javascript the javascript code for this example follows.
... result restricting the text size this example writes the words "hello world," restricting its width to 1
40 pixels.
... html <canvas id="canvas" width="
400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90, 1
40); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroketext' in that specification.
Compositing example - Web APIs
the bottom layer, while adopting the hue of the top layer.', 'preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.', 'preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.', 'preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.' ].reverse(); var width = 320; var height = 3
40; main program when the page loads, this code runs to set up and run the example: window.onload = function() { // lum in srgb var lum = { r: 0.33, g: 0.33, b: 0.33 }; // resize canvas canvas1.width = width; canvas1.height = height; canvas2.width = width; canvas2.height = height; lightmix() colorsphere(); runcomposite(); r...
... 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "1
4px arial"; ctx.filltext(pop, 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawon.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "1
4...
... ctx.filltext('existing content', 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawfrom.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "1
4px arial"; ctx.filltext('new content', 5, height/2 - 5); ctx.restore(); dd.appendchild(canvastodrawon); dd.appendchild(canvastodrawfrom); dd.appendchild(canvastodrawresult); dl.appendchild(dd); } }; utility functions the program relies on a number of utility functions.
... b = a; break; case 1: r = b; g = v; b = a; break; case 2: r = a; g = v; b = c; break; case 3: r = a; g = b; b = v; break; case
4: r = c; g = a; b = v; break; case 5: r = v; g = a; b = b; break; } } return { r: r, g: g, b: b }; }; var createinterlace = function (size, color1, color2) { var proto = document.createelement("canvas").getconte...
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.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30, 100, 100); ctx.rotate((math.pi / 180) * 25); // grey rect ctx.fillstyle = '#
4d
4e53'; ctx.fillrect(30, 30, 100, 100); ctx.restore(); // right rectangles, rotate from rectangle center // draw blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(150, 30, 100, 100); ctx.translate(200, 80); // translate to rectangle center // x = x + 0.5 * width // y = y + 0.5 * height ctx.rotate((math.pi / 180) * 25); // rotate...
... ctx.translate(-200, -80); // translate back // draw grey rect ctx.fillstyle = '#
4d
4e53'; ctx.fillrect(150, 30, 100, 100); } to rotate the rectangle around its own center, we translate the canvas to the center of the rectangle, then rotate the canvas, then translate the canvas back to 0,0, and then draw the rectangle.
... ctx.save(); ctx.scale(10, 3); ctx.fillrect(1, 10, 10, 10); ctx.restore(); // mirror horizontally ctx.scale(-1, 1); ctx.font = '
48px serif'; ctx.filltext('mdn', -135, 120); } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample transforms finally, the following transformation methods allow modifications directly to the transformation matrix.
CloseEvent - Web APIs
the only permitted codes to be specified in firefox are 1000 and 3000 to
4999 [source, bug].
... 100
4 reserved.
...[ref] 101
4 bad gateway the server was acting as a gateway or proxy and received an invalid response from the upstream server.
...
4000–
4999 available for use by applications.
Document.createTreeWalker() - Web APIs
nodefilter.show_document_fragment 102
4 shows documentfragment nodes.
... nodefilter.show_notation 20
48 shows notation nodes.
... nodefilter.show_processing_instruction 6
4 shows processinginstruction nodes.
... nodefilter.show_text
4 shows text nodes.
DocumentType - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">documenttype</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} p...
... documenttype.publicid read only a domstring, eg "-//w3c//dtd html
4.01//en", empty string for html5.
... documenttype.systemid read only a domstring, eg "http://www.w3.org/tr/html
4/strict.dtd", empty string for html5.
DynamicsCompressorNode() - Web APIs
its nominal range is [0,
40].
...its default value is -2
4.
... 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support
42safari ?
...59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support
42safari ios ?
FileReader.readAsDataURL() - Web APIs
at that time, the result attribute contains the data as a data: url representing the file's data as a base6
4 encoded string.
... note: the blob's result cannot be directly decoded as base6
4 without first removing the data-url declaration preceding the base6
4-encoded data.
... to retrieve only the base6
4 encoded string, first remove data:*/*;base6
4, 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 base6
4 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=file...
HTMLAnchorElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlanchorelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlareaelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
411"...
... y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a><polyline points="331,89 321,8
4 321,9
4 331,89" stroke="#d
4dde
4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlaudioelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="211" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audio() creates and returns a new htmlaudioelement object, opti...
HTMLBRElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
426"...
... y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlbodyelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlbuttonelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlbuttonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLCanvasElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlcanvaselement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlcanvaselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDListElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmldataelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x...
...="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmldivelement" target="_top"><rect x="351" y="65" width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
421...
..." y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlembedelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlfieldsetelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x...
...="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlformelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlhrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
426"...
... y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlheadelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x=...
..."
401" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlheadingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLIFrameElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmliframeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLImageElement.x - Web APIs
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>123
45678</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fetches the image from the table and looks up its x and y values is below.
... css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 1
4px; } td > img { max-width:
4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.x' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetxchrome full support 1edge full support 12firefox full support 1
4 full support 1
4 no support ?
...pport noopera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support 1
4 full support 1
4 no support ?
HTMLImageElement.y - Web APIs
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>123
45678</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fetches the image from the table and looks up its x and y values is below.
... css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 1
4px; } td > img { max-width:
4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.y' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetychrome full support 1edge full support 12firefox full support 1
4 full support 1
4 no support ?
...pport noopera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support 1
4 full support 1
4 no support ?
HTMLImageElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.stepUp() - Web APIs
example click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and
400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="
400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="incrementer" min="0" max="25"> </label> </p> <input type="button" value="increment" id="thebutton"> javascript /* make the button call the function */ let ...
...if you pass
4 as the stepincrement, the input will stepup by
4 * 5, or 20.
...the stepup will not allow the input to out of range, in this case stopping when it reaches
400, and rounding down any floats that are passed as a parameter.
... try setting the value to
4, which is not valid.
HTMLInputElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlinputelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmllielement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
426"...
... y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmllegendelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmllinkelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="351" y="65" width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
421...
..." y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571
428571
428571%; 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-ba...
...seline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font...
...-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4...
...dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
411" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlmenuelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x...
...="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlmeterelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="351" y="65" width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
421...
..." y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
HTMLObjectElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlobjectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmloptgroupelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x...
...="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmloptionelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmloutputelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlparagraphelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text ...
...x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlparamelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlpictureelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x=...
..."
401" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlpreelement" target="_top"><rect x="351" y="65" width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
421...
..." y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x...
...="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlquoteelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlscriptelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
HTMLShadowElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlshadowelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="...
...
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlstyleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><tex...
...t x="376" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text ...
...x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x...
...="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltableelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltablerowelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x...
...="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><tex...
...t x="376" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltemplateelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x...
...="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
HTMLTimeElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltimeelement" target="_top"><rect x="3
41" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
41...
...6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltitleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmltrackelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
4...
...11" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x=...
..."
401" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4...
...e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="
491,25 501,20 501,30
491,25" stroke="#d
4dde
4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d
4dde
4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d
4dde
4"/><line x1="509" y1="90" x2="
492" y2="90" stroke="#d
4dde
4"/><a xlink:h...
...ref="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
411" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a><polyline points="331,89 321,8
4 321,9
4 331,89" stroke="#d
4dde
4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlvideoelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="211" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">htmlvideoelement</tex...
IDBCursor.key - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeychrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yesbinary keyschrome full support 58edge full support ≤79firefox full support 51ie ?
... opera full support
45safari full support 10.1webview android full support 58chrome android full support 58firefox android ?
... opera android full support
43safari ios full support 10.3samsung internet android full support 7.0legend full support full support partial support partial support compatibility unknown compatibility unknownrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
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 1176165.) constrainterror an object store with the given name (based on case-sensitive comparison) already exists in the connected database.
... example // let us open our database var request = window.indexeddb.open("todolist",
4); // this handler is called when a new version of the database // is created, either when one has not been created before // or when a new version number is submitted by calling // window.indexeddb.open().
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateobjectstorechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...t 15safari full support 7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
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 1176165.) notfounderror you are trying to delete an object store that does not exist.
...for version < 3,
4...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeleteobjectstorechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...t 15safari full support 7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBFactory.open() - Web APIs
example example of calling open with the current specification's version parameter: var request = window.indexeddb.open("todolist",
4); in the following code snippet, we make a request to open a database, and include handlers for the success and error cases.
...// moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't // need window.mozidb*) // let us open version
4 of our database var dbopenrequest = window.indexeddb.open("todolist",
4); // these two event handlers act on the database being opened // successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopenchrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...— ?prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBObjectStore.add() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaddchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBObjectStore.autoIncrement - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetautoincrementchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend 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 1176165.) notfounderror occurs if there is no index with the given name (case-sensitive) in the database.
... for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeleteindexchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBObjectStore.indexNames - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = this.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexnameschrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBObjectStore.keyPath - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeypathchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBObjectStore.transaction - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBRequest.error - Web APIs
in chrome
48+/firefox 58+ this property returns a domexception because domerror has been removed from the dom standard.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitdomexception value instead of domerrorchrome full support...
...
48edge full support ≤18firefox full support 58ie no support noopera full support yessafari no support nowebview android full support
48chrome android full support
48firefox android full support 58opera android full support yessafari ios no support nosamsung internet android full support ...
IDBTransaction.abort() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetabortchrome full support 2
4 full support 2
4 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no suppor...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBTransaction.db - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdbchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBTransaction.mode - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmodechrome full support 2
4 full support 2
4 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no suppor...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBTransaction.objectStore() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorechrome full support 2
4 full support 2
4 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no suppor...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBTransaction.onabort - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.er...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonabortchrome full support 2
4 full support 2
4 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no suppor...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBTransaction.onerror - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 2
4, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.e...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerrorchrome full support 2
4 full support 2
4 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no suppor...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBVersionChangeEvent.newVersion - Web APIs
syntax var newversion = idbversionchangeevent.newversion value a 6
4-bit integer.
...// moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, // so we don't need window.mozidb*) // let us open version
4 of our database var dbopenrequest = window.indexeddb.open("todolist",
4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db v...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnewversionchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBVersionChangeEvent.oldVersion - Web APIs
syntax var oldversion = idbversionchangeevent.oldversion value a 6
4-bit integer.
...for version < 3,
4...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoldversionchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
MediaStream.id - Web APIs
— 5
4edge no support 12 — 79firefox full support
41ie no support noopera no support ?
...— 5
4chrome android no support ?
... — 5
4firefox android full support
41opera android no support ?
... —
41safari ios full support yessamsung internet android no support ?
NodeIterator.whatToShow - Web APIs
nodefilter.show_document_fragment 102
4 shows documentfragment nodes.
... nodefilter.show_notation 20
48 shows notation nodes.
... nodefilter.show_processing_instruction 6
4 shows processinginstruction nodes.
... nodefilter.show_text
4 shows text nodes.
NodeIterator - Web APIs
nodefilter.show_document_fragment 102
4 shows documentfragment nodes.
... nodefilter.show_notation 20
48 shows notation nodes.
... nodefilter.show_processing_instruction 6
4 shows processinginstruction nodes.
... nodefilter.show_text
4 shows text nodes.
PaymentCurrencyAmount.currency - Web APIs
the value is always specified using the 3-letter codes defined by the iso
4127 standard.
... syntax currency = paymentcurrencyamount.currency; value a domstring specifying the canonical, three-character currency identification code defined by the iso
4217 standard.
... example this example represents the price of $
42.95 in us dollars.
... let itemprice = { currency: "usd", value: "
42.95" }; specifications specification status comment payment request apithe definition of 'paymentcurrencyamount.currency' in that specification.
PerformanceLongTaskTiming - Web APIs
style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d
4dde
4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/performancelongtasktiming...
..." target="_top"><rect x="201" y="1" width="250" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
...r androidfirefox for androidopera for androidsafari on iossamsung internetperformancelongtasktiming experimentalchrome full support 58edge full support ≤79firefox no support nonotes no support nonotes notes see bug 13
48
405.ie ?
... webview android full support 58chrome android full support 58firefox android no support nonotes no support nonotes notes see bug 13
48
405.opera android full support yessafari ios ?
Using Pointer Events - Web APIs
function handlestart(evt) { log("pointerdown."); var el = document.getelementsbytagname("canvas")[0]; var ctx = el.getcontext("2d"); log("pointerdown: id = " + evt.pointerid); ongoingtouches.push(copytouch(evt)); var color = colorfortouch(evt); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey,
4, 0, 2 * math.pi, false); // a circle at the start ctx.arc(evt.clientx, evt.clienty,
4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle = color; ctx.fill(); } after storing some of the event's processing in the ongoingtouches for later processing, the start point is drawn as a small circle.
... we're using a
4-pixel wide line, so a
4 pixel radius circle will show up neatly.
...indexbyid(evt.pointerid); log("continuing touch: idx = " + idx); if (idx >= 0) { ctx.beginpath(); log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " + ongoingtouches[idx].pagey + ");"); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); log("ctx.lineto(" + evt.clientx + ", " + evt.clienty + ");"); ctx.lineto(evt.clientx, evt.clienty); ctx.linewidth =
4; ctx.strokestyle = color; ctx.stroke(); ongoingtouches.splice(idx, 1, copytouch(evt)); // swap in the new touch record log("."); } else { log("can't figure out which touch to continue: idx = " + idx); } } this function looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segm...
... function handleend(evt) { log("pointerup"); var el = document.getelementsbytagname("canvas")[0]; var ctx = el.getcontext("2d"); var color = colorfortouch(evt); var idx = ongoingtouchindexbyid(evt.pointerid); if (idx >= 0) { ctx.linewidth =
4; ctx.fillstyle = color; ctx.beginpath(); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); ctx.lineto(evt.clientx, evt.clienty); ctx.fillrect(evt.clientx -
4, evt.clienty -
4, 8, 8); // and a square at the end ongoingtouches.splice(idx, 1); // remove it; we're done } else { log("can't figure out which touch to end"); } } this is very similar to ...
RTCIceCandidate.candidate - Web APIs
the syntax of the candidate string is described in rfc 52
45, section 15.1.
... for an a-line (attribute line) that looks like this: a=candidate:
423
4997325 1 udp 20
43278322 192.168.0.56
44323 typ host the corresponding candidate string's value will be "candidate:
423
4997325 1 udp 20
43278322 192.168.0.56
44323 typ host".
...in the example above, the priority is 20
43278322.
...the complete list of attributes for this example candidate is: foundation =
423
4997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 20
43278322 ip = "192.168.0.56" port =
44323 type = "host" example in this example, we see a function which receives as input an sdp string containing an ice candidate received from the remote peer during the signaling process.
RTCIceCandidateInit.candidate - Web APIs
the syntax of the candidate string is described in rfc 52
45, section 15.1.
... for an a-line (attribute line) that looks like this: a=candidate:
423
4997325 1 udp 20
43278322 192.168.0.56
44323 typ host the corresponding candidate string's value will be "candidate:
423
4997325 1 udp 20
43278322 192.168.0.56
44323 typ host".
...in the example above, the priority is 20
43278322.
...the complete list of attributes for this example candidate is: foundation =
423
4997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 20
43278322 ip = "192.168.0.56" port =
44323 type = "host" example when a new ice candidate is received by your signaling code from the remote peer, you need to construct the rtcicecandidate object that encapsulates it.
SVGAnimateElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="...
...291" y="65" width="190" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="386" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,8
4 281,9
4 291,89" stroke="#d
4dde
4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="166" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></div> a:hover text { fill: #0095dd; poi...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line ...
...x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="mid...
...dle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svganimationelement" target="_to...
...p"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="386" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,8
4 281,9
4 291,89" stroke="#d
4dde
4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" width="230" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="136" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svganimatemotionelement</text></a></svg></div> a:hover t...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/>...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baselin...
...e="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svganimationelement" targe...
...t="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="386" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,8
4 281,9
4 291,89" stroke="#d
4dde
4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="121" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</text></a></svg></div> ...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4...
...e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:hre...
...f="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="386" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGClipPathElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,...
...30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e...
...53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href...
...="/docs/web/api/svgclippathelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgclippathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
...111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" ...
...text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/d...
...ocs/web/api/svgcursorelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
401" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgcursorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement, and implements properties from svgurireference.
SVGDefsElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y=...
..."65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgdefselement" target="_top"><rect x="121" y="65" width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="191" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgdefselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: ...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="3
41" y="65"...
... width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
411" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgdescelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="n...
...one"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-b...
...aseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfecomponenttransf...
...erelement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="336" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfecomponenttransferelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes.
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/>...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baselin...
...e="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement...
..." target="_top"><rect x="221" y="65" width="260" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="351" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEDiffuseLightingElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-basel...
...ine="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfediffuselightingelem...
...ent" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="3
46" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfediffuselightingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" targ...
...et="_top"><rect x="2
41" y="65" width="2
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="361" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfedistantlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEDropShadowElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="371" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfedropshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEFloodElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="31...
...1" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfefloodelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement, and implements properties from svgfilterprimitivestandardattributes.
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="306" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,8
4 121,9
4 131,89" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfefuncaelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncaelement</text></a></svg></div> a:h...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="306" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,8
4 121,9
4 131,89" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfefuncbelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncbelement</text></a></svg></div> a:h...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="306" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,8
4 121,9
4 131,89" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfefuncgelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncgelement</text></a></svg></div> a:h...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="306" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,8
4 121,9
4 131,89" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfefuncrelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="6" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</text></a></svg></div> a:h...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" targ...
...et="_top"><rect x="2
41" y="65" width="2
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="361" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblurelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEImageElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="31...
...1" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfeimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes and svgurireference.
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="31...
...1" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfemergeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="...
...121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" target="_top"...
...><rect x="271" y="65" width="210" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="376" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfemergenodeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEMorphologyElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="371" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfemorphologyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_morphology_operator_unknown 0 the type is not one of predefined types.
SVGFEOffsetElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x=...
..."301" y="65" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfeoffsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEPointLightElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfepointlightelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="371" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfepointlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFESpecularLightingElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="non...
...e"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-bas...
...eline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfespecularlightinge...
...lement" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="3
41" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfespecularlightingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="...
...121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfespotlightelement" target="_top"...
...><rect x="271" y="65" width="210" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="376" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfespotlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFETileElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="2...
...5" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfetileelement" target="_top"><rect x="321" ...
...y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
401" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfetileelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFETurbulenceElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="371" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfeturbulenceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants turbulence types name value description svg_turbulence_type_unknown 0 the type is not one of predefined types.
SVGFilterElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
...111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" ...
...text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/d...
...ocs/web/api/svgfilterelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
401" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgfilterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterelement.filterunits read only an svganimatedenumeration that corresponds to the filterunits attribute of the given <filter> element.
SVGForeignObjectElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4...
...e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:hre...
...f="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgforeignobjectelement" target="_top"><rect x="31" y="65" width="230" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="1
46" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgforeignobj...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151...
..." y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><...
...polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" w...
...idth="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggelement" target="_top"><rect x="151" y="65" width="110" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="206" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4...
...e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:hre...
...f="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="171" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#...
...d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="midd...
...le" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggr...
...adientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_spreadmethod_unknown 0 the type is not one of predefined types.
SVGGraphicsElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="3...
...91" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtransformable interfaces from svg 1.1.
SVGImageElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" ...
...y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="186" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-even...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggradientelement" target="_t...
...op"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="2
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="1
41" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svglineargradientelement</text></a></svg></div> a:hover...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgmpathelement" target="_top"><rect x="331" y="...
...65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgmpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGMaskElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,...
...25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/...
...web/api/svgmaskelement" target="_top"><rect x="3
41" y="65" width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
411" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgmaskelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGMetadataElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x=...
..."301" y="65" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgmetadataelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGPathSeg - Web APIs
properties unsigned 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_v...
...ertical_abs = 1
4 pathseg_lineto_vertical_rel = 15 pathseg_curveto_cubic_smooth_abs = 16 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_lineto_abs
4 corresponds to an "absolute lineto" (l) path data command.
... pathseg_lineto_vertical_abs 1
4 corresponds to an "absolute vertical lineto" (v) path data command.
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="31...
...1" y="65" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="396" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgpatternelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement and implements the ones from svgfittoviewbox and svgurireference.
SVGRadialGradientElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggradientelement" target="_t...
...op"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgradialgradientelement" target="_top"><rect x="21" y="65" width="2
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="1
41" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgradialgradientelement</text></a></svg></div> a:hover...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4...
...e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:hre...
...f="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgsvgelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="196" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgsvgelement</text></...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgscriptelement" target="_top"><rect x="3...
...21" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
401" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgscriptelement.type read only a domstring corresponding to the type attribute of the given <script> element.
SVGSetElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2=...
..."151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text><...
.../a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="...
...65" width="190" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="386" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,8
4 281,9
4 291,89" stroke="#d
4dde
4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="65" width="130" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="186" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: al...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="3
41" y="65"...
... width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
411" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgstopelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGStyleElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none...
..."/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-base...
...line="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgstyleelement" target...
...="_top"><rect x="331" y="65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgstyleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement and implements properties from linkstyle.
SVGSwitchElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="2...
...5" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301...
..." y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgswitchelement" target="_top"><rect x="101" y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="181" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgswitchelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="2...
...5" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgsymbolelement" target="_top"><rect x="321" ...
...y="65" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
401" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgsymbolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement, and implements properties from svgfittoviewbox.
SVGTextContentElement - Web APIs
="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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391"...
... y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgtextcontentelement" target="_top"><rect x="51" y="65" width="210" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="156" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants constant value description length...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgtitleelement" target="_top"><rect x="331" y="...
...65" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
406" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgtitleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGUseElement - Web APIs
<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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><li...
...ne x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="...
...middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="
481,25
491,20
491,30
481,25" stroke="#d
4dde
4" fill="none"/><line x1="
491" y1="25" x2="
499" y2="25" stroke="#d
4dde
4"/><line x1="
499" y1="25" x2="
499" y2="90" stroke="#d
4dde
4"/><line x1="
499" y1="90" x2="
482" y2="90" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_...
...top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="391" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,8
4 291,9
4 301,89" stroke="#d
4dde
4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svguseelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="196" y="9
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svguseelement</text></a></svg></div> a:hover text { fill: #0095d...
ScriptProcessorNode.onaudioprocess - Web APIs
note: as of the august 29 201
4 web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audio workers.
... syntax var audioctx = new audiocontext(); var scriptnode = audioctx.createscriptprocessor(
4096, 1, 1); scriptnode.onaudioprocess = function() { ...
...ample, 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
4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(
4096, 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...
...ontains 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
4096 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); ...
ServiceWorkerGlobalScope - Web APIs
this interface inherits from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase6
4, and windoweventhandlers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.1
428571
428571
42%; 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/wo...
...rkerglobalscope" target="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d
4dde
4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="361" y="1" width="2
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a...
...note that an http error response (e.g.,
40
4) will not trigger an exception.
ServiceWorkerRegistration.showNotification() - Web APIs
on android devices, the badge should accommodate devices up to
4x resolution, about 96 by 96 px, and the image will be automatically masked.
...this string must be a valid bcp
47 language tag.
...the values are times in milliseconds where the even indices (0, 2,
4, etc.) indicate how long to vibrate and the odd indices indicate how long to pause.
... for example, [300, 100,
400] would vibrate 300ms, pause 100ms, then vibrate
400ms.
Using Service Workers - Web APIs
note: as of firefox
44, when appcache is used to provide offline support for a page a warning message is now displayed in the console advising developers to use service workers instead (bug 120
4581.) service workers should finally fix these issues.
...the one bit we’ll call out here is the promise (see app.js lines 22-
47), which is a modified version of what you read about above, in the promises test demo.
... for() loop is being iterated through later on, it wouldn’t work, as the promise wouldn’t resolve at the same time as the iterations are being done (that is a synchronous process.) we actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits and alt text (see app.js lines 31-3
4).
... to access the resolved promise values, we then access this function as you’d then expect (see app.js lines 60-6
4).
Slottable - Web APIs
to change preferences in firefox, visit about:config.ie no 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 �...
...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 ...
...to change preferences in firefox, visit about:config.ie no 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 �...
...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.
TextEncoder.prototype.encodeInto() - Web APIs
u8array.subarray(position|0) : u8array); } var u8array = new uint8array(8); encodeintoatposition("hello", u8array, 2); console.log( "" + u8array.join() ); // 0,0,10
4,101,108,108,111,0 buffer sizing to convert a javascript string s, the output space needed for full conversion is never less than s.length bytes and never greater than s.length * 3 bytes.
...&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((0x6<<5)|(point>>>6), (0x2<<6)|(point&0x3f)); } else return fromcharcode( (0xe/*0b1110*/<<
4) | (point>>>12), (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/), (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/) ); } function textencoder(){}; textencoderprototype["encode"] = function(inputstring) { // 0xc0 => 0b11000000; 0xff => 0b11111111; 0xc0-0xff => 0b11xxxxxx // 0x80 => 0b10000000; 0xbf => 0b10111111; 0x80-0xbf => 0b10xxxxxx ...
... "" : ("" + inputstring).replace(/[\x80-\ud7ff\udc00-\uffff]|[\ud800-\udbff][\udc00-\udfff]?/g, encoderreplacer); var len=encodedstring.length|0, i=0, char=0, read=0, u8arrlen = u8arr.length|0, inputlength=inputstring.length|0; if (u8arrlen < len) len=u8arrlen; putchars: for (; i<len; i=i+1|0) { char = encodedstring.charcodeat(i) |0; switch(char >>>
4) { case 0: case 1: case 2: case 3: case
4: case 5: case 6: case 7: read = read + 1|0; // extension points: case 8: case 9: case 10: case 11: break;...
... case 12: case 13: if ((i+1|0) < u8arrlen) { read = read + 1|0; break; } case 1
4: if ((i+2|0) < u8arrlen) { read = read + 1|0; break; } case 15: if ((i+3|0) < u8arrlen) { read = read + 1|0; break; } default: break putchars; } //read = read + ((char >>> 6) !== 2) |0; u8arr[i] = char; } return {"written": i, "read": inputlength < read ?
Touch events - Web APIs
t(); console.log("touchstart."); var el = document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { console.log("touchstart:" + i + "..."); ongoingtouches.push(copytouch(touches[i])); var color = colorfortouch(touches[i]); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey,
4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle = color; ctx.fill(); console.log("touchstart:" + i + "."); } } this calls event.preventdefault() to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered).
... after that, we iterate over all the touch objects in the list, pushing them onto an array of active touchpoints and drawing the start point for the draw as a small circle; we're using a
4-pixel wide line, so a
4-pixel radius circle will show up neatly.
... console.log("continuing touch "+idx); ctx.beginpath(); console.log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " + ongoingtouches[idx].pagey + ");"); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); console.log("ctx.lineto(" + touches[i].pagex + ", " + touches[i].pagey + ");"); ctx.lineto(touches[i].pagex, touches[i].pagey); ctx.linewidth =
4; ctx.strokestyle = color; ctx.stroke(); ongoingtouches.splice(idx, 1, copytouch(touches[i])); // swap in the new touch record console.log("."); } else { console.log("can't figure out which touch to continue"); } } } this iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each ...
... function handleend(evt) { evt.preventdefault(); log("touchend"); var el = document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { var color = colorfortouch(touches[i]); var idx = ongoingtouchindexbyid(touches[i].identifier); if (idx >= 0) { ctx.linewidth =
4; ctx.fillstyle = color; ctx.beginpath(); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); ctx.lineto(touches[i].pagex, touches[i].pagey); ctx.fillrect(touches[i].pagex -
4, touches[i].pagey -
4, 8, 8); // and a square at the end ongoingtouches.splice(idx, 1); // remove it; we're done } else { console.log("can't figure out which touc...
TreeWalker.whatToShow - Web APIs
nodefilter.show_document_fragment 102
4 shows documentfragment nodes.
... nodefilter.show_notation 20
48 shows notation nodes.
... nodefilter.show_processing_instruction 6
4 shows processinginstruction nodes.
... nodefilter.show_text
4 shows text nodes.
TreeWalker - Web APIs
nodefilter.show_document_fragment 102
4 shows documentfragment nodes.
... nodefilter.show_notation 20
48 shows notation nodes.
... nodefilter.show_processing_instruction 6
4 shows processinginstruction nodes.
... nodefilter.show_text
4 shows text nodes.
WEBGL_compressed_texture_astc - Web APIs
constants blocks bits per pixel arraybuffer bytelength bytes if height and width are 512 ext.compressed_rgba_astc_
4x
4_khr ext.compressed_srgb8_alpha8_astc_
4x
4_khr
4x
4 8.00 floor((width + 3) /
4) * floor((height + 3) /
4) * 16 2621
44 ext.compressed_rgba_astc_5x
4_khr ext.compressed_srgb8_alpha8_astc_5x
4_khr 5x
4 6.
40 floor((width +
4) / 5) * floor((height + 3) /
4) * 16 2109
44 ext.compressed_rgba_astc_5x5_khr ext.compressed_srgb8_alpha8_astc_5x5_khr 5x5 ...
... 5.12 floor((width +
4) / 5) * floor((height +
4) / 5) * 16 1697
44 ext.compressed_rgba_astc_6x5_khr ext.compressed_srgb8_alpha8_astc_6x5_khr 6x5
4.27 floor((width + 5) / 6) * floor((height +
4) / 5) * 16 1
41728 ext.compressed_rgba_astc_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr 6x6 3.56 floor((width + 5) / 6) * floor((height + 5) / 6) * 16 118336 ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr 8x5 3.20 floor((width + 7) / 8) * floor((height +
4) / 5) * 16 105
472 ext.compressed_rgba_astc_8x6_khr ext.compressed_srgb8_alpha8_astc_8x6_khr 8x6 2.67 floor((width + 7) / 8) * floor((height + 5) / 6) * 16 8806
4 ext.compressed_rgba_astc_8x8_khr ext...
....compressed_srgb8_alpha8_astc_8x8_khr 8x8 2.00 floor((width + 7) / 8) * floor((height + 7) / 8) * 16 65536 ext.compressed_rgba_astc_10x5_khr ext.compressed_srgb8_alpha8_astc_10x5_khr 10x5 2.56 floor((width + 9) / 10) * floor((height +
4) / 5) * 16 85696 ext.compressed_rgba_astc_10x6_khr ext.compressed_srgb8_alpha8_astc_10x6_khr 10x6 2.13 floor((width + 9) / 10) * floor((height + 5) / 6) * 16 71552 ext.compressed_rgba_astc_10x8_khr ext.compressed_srgb8_alpha8_astc_10x8_khr 10x8 1.60 floor((width + 9) / 10) * floor((height + 7) / 8) * 16 532
48 ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr 10x10 1.28 floor((width + 9) / 10) * floor((height + 9) / 10) ...
...* 16
4326
4 ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr 12x10 1.07 floor((width + 11) / 12) * floor((height + 9) / 10) * 16 35776 ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr 12x12 0.89 floor((width + 11) / 12) * floor((height + 11) / 12) * 16 2958
4 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...
WEBGL_depth_texture - Web APIs
the constant in webgl2 is gl.unsigned_int_2
4_8.
... constants this extension adds a new constant: ext.unsigned_int_2
4_8_webgl unsigned integer type for 2
4-bit depth texture data.
... the type parameter now accepts gl.unsigned_short, gl.unsigned_int, and ext.unsigned_int_2
4_8_webgl.
... incorrectly stated as the target parameter in the specification, see https://www.khronos.org/bugzilla/show_bug.cgi?id=67
4.
WaveShaperNode.oversample - Web APIs
'
4x' multiply by
4 the amount of samples before applying the shaping curve.
... enumeratedvalue is one of 'none', '2x', or '
4x'.
...amount : 50, n_samples =
44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
... distortion.curve = makedistortioncurve(
400); distortion.oversample = '
4x'; specifications specification status comment web audio apithe definition of 'oversample' in that specification.
WebGL2RenderingContext.texSubImage3D() - Web APIs
gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rgui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb5_a1 gl.rgba
4444 gl.rgba16f gl.rgba32f gl.rgba8ui type a glenum specifying the data type of the texel data.
... gl.unsigned_short_
4_
4_
4_
4:
4 red bits,
4 green bits,
4 blue bits,
4 alpha bits.
... gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev gl.unsigned_int_2
4_8 gl.float_32_unsigned_int_2
4_8_rev (pixels must be null) pixels one of the following objects can be used as a pixel source for the texture: arraybufferview, a uint8array must be used if type is gl.unsigned_byte.
... a uint16array 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.
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
must be 1, 2, 3, or
4.
...bone weights, normalized to [0, 1] gl.vertexattribpointer(1,
4, gl.unsigned_byte, true, 20, 12); gl.enablevertexattribarray(1); //3.
... bone indices, interpreted as integer gl.vertexattribipointer(2,
4, gl.unsigned_byte, 20, 16); gl.enablevertexattribarray(2); //connect to attributes from the vertex shader gl.bindattriblocation(shaderprogram, 0, "position"); gl.bindattriblocation(shaderprogram, 1, "boneweights"); gl.bindattriblocation(shaderprogram, 2, "boneindices"); <script id="shader-vs" type="x-shader/x-vertex">#version 300 es uniform mat
4 mvmatrix; uniform mat
4 bones[120]; in vec3 position; in vec
4 boneweights; in uvec
4 boneindices;//read as
4-component unsigned integer void main() { vec
4 skinnedposition = bones[boneindices.s] * vec
4(position, 1.0) * boneweights.s + bones[boneindices.t] * vec
4(position, 1.0) * boneweights.t + bones[boneindices.p] * vec
4(position, 1.0) * boneweights.p ...
...+ bones[boneindices.q] * vec
4(position, 1.0) * boneweights.q; gl_position = mvmatrix * skinnedposition; } </script> specifications specification status comment webgl 2.0the definition of 'vertexattribipointer' in that specification.
WebGLRenderingContext.getUniformLocation() - Web APIs
uniform[123
4][fi][v]() sets the uniform's value to the specified value, which may be a single floating point or integer number, or a 2-
4 component vector specified either as a list of values or as a float32array or int32array.
... uniformmatrix[23
4][fv]() sets the uniform's value to the specified matrix, possibly with transposition.
... gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform
4fv(uglobalcolor, [0.1, 0.7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the resulting animation in action.
... finally, the uniform uglobalcolor is set to the color [0.1, 0.7, 0.2, 1.0], the components in this
4-component vector represent the values of red, green, blue, and alpha, respectively.
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.
... uint16array for gl.unsigned_short_5_6_5, gl.unsigned_short_
4_
4_
4_
4, or gl.unsigned_short_5_5_5_1.
... type is gl.unsigned_short_
4_
4_
4_
4 and format is not gl.rgba.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var pixels = new uint8array(gl.drawingbufferwidth * gl.drawingbufferheight *
4); gl.readpixels(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight, gl.rgba, gl.unsigned_byte, pixels); console.log(pixels); // uint8array specifications specification status comment webgl 1.0the definition of 'readpixels' in that specification.
Using shaders to apply color in WebGL - Web APIs
.0, // red 0.0, 1.0, 0.0, 1.0, // green 0.0, 0.0, 1.0, 1.0, // blue ]; const colorbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, colorbuffer); gl.bufferdata(gl.array_buffer, new float32array(colors), gl.static_draw); return { position: positionbuffer, color: colorbuffer, }; } this code starts by creating a javascript array containing four
4-value vectors, one for each vertex color.
... to use these colors, the vertex shader needs to be updated to pull the appropriate color from the color buffer: const vssource = ` attribute vec
4 avertexposition; attribute vec
4 avertexcolor; uniform mat
4 umodelviewmatrix; uniform mat
4 uprojectionmatrix; varying lowp vec
4 vcolor; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vcolor = avertexcolor; } `; the key difference here is that for each vertex, we pass its color using a varying to the fragment shader.
... coloring the fragments as a refresher, here's what our fragment shader looked like previously: const fssource = ` void main() { gl_fragcolor = vec
4(1.0, 1.0, 1.0, 1.0); } `; in order to pick up the interpolated color for each pixel, we need to change this to fetch the value from the vcolor varying: const fssource = ` varying lowp vec
4 vcolor; void main(void) { gl_fragcolor = vcolor; } `; each fragment receives the interpolated color based on its position relative to the vertex positions instead of a fixed value.
... { const numcomponents =
4; const type = gl.float; const normalize = false; const stride = 0; const offset = 0; gl.bindbuffer(gl.array_buffer, buffers.color); gl.vertexattribpointer( programinfo.attriblocations.vertexcolor, numcomponents, type, normalize, stride, offset); gl.enablevertexattribarray( programinfo.attriblocations.vertexcolor);...
WebGL types - Web APIs
type web idl type description glint6
4 long long signed 6
4-bit integer number.
... type web idl type description gluint6
4ext long long unsigned 6
4-bit integer number.
... ext_disjoint_timer_querythe definition of 'gluint6
4ext' in that specification.
... working draft adds gluint6
4ext ...
WebGL best practices - Web APIs
in practice, effectively all systems support at least the following: max_cube_map_texture_size:
4096 max_renderbuffer_size:
4096 max_texture_size:
4096 max_viewport_dims: [
4096,
4096] max_vertex_texture_image_units:
4 max_texture_image_units: 8 max_combined_texture_image_units: 8 max_vertex_attribs: 16 max_varying_vectors: 8 max_vertex_uniform_vectors: 128 max_fragment_uniform_vectors: 6
4 aliased_point_size_range: [1,100] your desktop may support 1...
... 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 float2
4* (-2^62, 2^62) 2^-62 2^-16 relative mediump ieee float16 (-2^1
4, 2^1
4) 2^-1
4 2^-10 relative lowp 10-bit signed fixed (-2, 2) 2^-8 2^-8 absolute int think range highp int17 (-2^16, 2^16) mediump int11 (-2^10, 2^10) lowp int9 (-2^8, 2^8) *float2
4: sign bit, 7-bit for expo...
...nent, 16-bit for mantissa essl300 minimum requirements (webgl 2) float think range min above zero precision highp ieee float32 (-2^126, 2^127) 2^-126 2^-2
4 relative mediump ieee float16 (-2^1
4, 2^1
4) 2^-1
4 2^-10 relative lowp 10-bit signed fixed (-2, 2) 2^-8 2^-8 absolute (u)int think int range unsigned int range highp (u)int32 [-2^31, 2^31] [0, 2^32] mediump (u)int16 [-2^15, 2^15] [0, 2^16] lowp (u)int9 [-2^8, 2^8] [0, 2^9] prefer builtins like dot, mix, and normalize instead of buiding your own at best, custom implementations of builtins might run as fast as the builtins they replace, but don't expect them to.
...you may ask for depth_component2
4 or stencil_index8, but you're often getting d2
4x8 and x2
4s8 32bpp formats behind the scenes.
Using DTMF with WebRTC - Web APIs
if you'd like to know more about how this works, read rfc 3550: rtp: a transport protocol for real-time applications and rfc
4733: rtp payload for dtmf digits, telephony tones, and telephony signals.
... let dialstring = "1202
4561111"; let callerpc = null; let receiverpc = null; let dtmfsender = null; let hasaddtrack = false; let mediaconstraints = { audio: true, video: false }; let offeroptions = { offertoreceiveaudio: 1, offertoreceivevideo: 0 }; let dialbutton = null; let logelement = null; these are, in order: dialstring the dtmf string the caller will send when the "dial" button is clicked.
... function handlecallericeconnectionstatechange() { log("caller's connection state changed to " + callerpc.iceconnectionstate); if (callerpc.iceconnectionstate === "connected") { log("sending dtmf: \"" + dialstring + "\""); dtmfsender.insertdtmf(dialstring,
400, 50); } } the iceconnectionstatechange event doesn't actually include within it the new state, so we get the connection process's current state from callerpc's rtcpeerconnection.iceconnectionstate property.
... our call to insertdtmf() specifies not only the dtmf to send (dialstring), but also the length of each tone in milliseconds (
400 ms) and the amount of time between tones (50 ms).
Rendering and the WebXR frame animation callback - Web APIs
the next frame drawn will be frame
4 instead.
... the typical human's pupillary distance—the distance between the centers of the pupils—is between 5
4 and 7
4 millimeters (0.05
4 to 0.07
4 meters).
...(32mm right of center) this way, we place the positions of the viewer's eyes at an average human pupillary distance of 6
4mm.
... you can similarly render every fourth frame using !(tick %
4), and so forth.
Visualizations with Web Audio API - Web APIs
the analyser node will then capture audio data using a fast fourier transform (fft) in a certain frequency domain, depending on what you specify as the analysernode.fftsize property value (if no value is specified, the default is 20
48.) note: you can also specify a minimum and maximum power value for the fft data scaling range, using analysernode.mindecibels and analysernode.maxdecibels, and different data averaging constants using analysernode.smoothingtimeconstant.
... so for example, say we are dealing with an fft size of 20
48.
... analyser.fftsize = 20
48; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); to actually retrieve the data and copy it into our array, we then call the data collection method we want, with the array passed as it's argument.
... creating a waveform/oscilloscope to create the oscilloscope visualisation (hat tip to soledad penadés for the original code in voice-change-o-matic), we first follow the standard pattern described in the previous section to set up the buffer: analyser.fftsize = 20
48; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display: canvasctx.clearrect(0, 0, width, height); we now define the draw() function: function draw() { in here, we use requestanimationframe() to keep looping the drawing function once it has been ...
XMLDocument - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="3
46,25 356,20 356,30 3
46,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="356" y1="25" x2="386" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
... dom
4the definition of 'xmldocument' in that specification.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
lederror'; break; default: errname = 'securityerror'; break; } } else { // calculating the difference let sslerr = math.abs(nsinsserrorsservice.nss_ssl_error_base) - (status & 0xffff); switch (sslerr) { case 3: // ssl_error_no_certificate, ssl(3) errname = 'securitynocertificateerror'; break; case
4: // ssl_error_bad_certificate, ssl(
4) errname = 'securitybadcertificateerror'; break; case 8: // ssl_error_unsupported_certificate_type, ssl(8) errname = 'securityunsupportedcertificatetypeerror'; break; case 9: // ssl_error_unsupported_version, ssl(9) errname = 'securityunsupportedtlsversionerror'; break; case 12...
...: // ssl_error_bad_cert_domain, ssl(12) errname = 'securitycertificatedomainmismatcherror'; break; default: errname = 'securityerror'; break; } } } else { errtype = 'network'; switch (status) { // connect to host:port failed case 0x80
4b000c: // ns_error_connection_refused, network(13) errname = 'connectionrefusederror'; break; // network timeout error case 0x80
4b000e: // ns_error_net_timeout, network(1
4) errname = 'networktimeouterror'; break; // hostname lookup failed case 0x80
4b001e: // ns_error_unknown_host, network(30) errname = 'domainnotfounderror'; break; case 0x80
4b00
47: // ns_error_net_interrupt, network(71) errname = ...
... sha1 fingerprint = f
4:99:6
4:18:6b:7d:c8:fa:c0:0c:2e:a9:61:77:28:67:13:c
4:97:7b valid from 7/1
4/2011 0:00:00 am valid until 8/20/2013 23:59:59 pm and here is the output of making an https request to a server that uses an expired certificate: test("https://www.appliancetherapy.com/"); note that the security state has become "insecure" now and there is an error name reported: connection status: ...
... sha1 fingerprint = f1:8c:38:96:0a:30:63:16:
47:fa:6e:cd:7d:58:cc:ab:82:fb:a9:d0 valid from 9/1/2010 0:00:00 am valid until 9/1/2012 23:59:59 pm ...
XRRigidTransform.matrix - Web APIs
syntax let matrix = xrrigidtransform.matrix; value a float32array containing 16 entries which represents the
4x
4 transform matrix which is described by the position and orientation properties.
... usage notes matrix format all
4x
4 transform matrices used in webgl are stored in 16-element float32arrays.
...thus, for an array [a0, a1, a2, ..., a13, a1
4, 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[1
4]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[1
4]\\ 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.
...it begins by allocating a new matrix and writing a
4x
4 identity matrix into it: [1000010000100001]\begin{bmatrix} 1 & 0 & 0 & 0\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix} this is a transform that will not change either the orientation or position of any point, vector, or object to which it's applied.
ARIA live regions - Accessibility
nvda added some basic support for live regions for mozilla firefox back in 2008 and was improved in 2010 and 201
4.
... the paciello group has some information about the state of the support of live regions (201
4).
...for instance, when the clock changes from "17:33" to "17:3
4", assistive technologies will only announce "
4", which won't be very useful to users.
..."time: 17:3
4").
ARIA Test Cases - Accessibility
tested ua/at combinations: dragon 10 with firefox 3 and ie 8 beta 2 jaws 9 & 10 with firefox 3 jaws 9 & 10 with ie beta 2 nvda 0.6p2 with firefox 3 orca with firefox 3 window-eyes 7 with ie 8 beta 2 and firefox 3 voiceover (leopard) with safari
4.0.2 zoom (leopard) with safari
4.0.2, firefox 3.x and opera 9.x zoomtext 9.1 with firefox 3 and ie 8 beta 2 test case structure test cases are organized as follows: test case links test details expected at behavior markup notes results table at firefox ie opera safari jaws 9 - - - - jaws 10 - ...
... results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 al: tested 2 and
4 with jaws 10.0.512u on nov 21, 2008 2.
...
4.
...also, jawskey+ctrl+semicolon keystroke displays only
4 of the landmarks (it seems to be missing search) exact same failures as with firefox - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - live regions thank you to charles chen for developing the live region examples.
ARIA: row role - Accessibility
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.
...for example, if a table has 1,500 rows, but only the header and rows
47 and 52 are in the dom, aria-rowindex="1" would be set on the header row, and aria-rowindex="
47" and aria-rowindex="52" would be set on the
47th and 52nd row, respectively.
...row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="row" aria-rowindex="16"> <span role="cell">header</span> <span role="cell">h6</span> </div> <div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </div> <div role="row" aria-rowindex="2
4"> <span role="cell">term</span> <span role="cell">dt</span> </div> </div> </div> the above is a non-semantic aria table with five of 81 rows present in the dom: one within a table header and four rows within the table body.
... <tr role="row" aria-rowindex="11"> <td role="cell">header</td> <td role="cell">h1</td> </tr> <tr role="row" aria-rowindex="16"> <td role="cell">header</td> <td role="cell">h6</td> </tr> <tr role="row" aria-rowindex="18"> <td role="cell">rowgroup</td> <td role="cell">thead</td> </tr> <tr role="row" aria-rowindex="2
4"> <td role="cell">term</td> <td role="cell">dt</td> </tr> </tbody> </table> above is the semantic way of writing a table.
Web applications and ARIA FAQ - Accessibility
browsers aria is supported in the following browsers: browser minimum version notes firefox 3.0+ works with nvda, jaws 10+, and orca chrome latest screen reader support still experimental as of chrome 15 safari
4+ safari 5 support is much improved.
...(tbd) voiceover osx 10.5, ios
4 os x 10.7 ios 5 jaws 8 10 window-eyes 7 no live region support currently zoomtext ?
...unfortunately, there isn't a more semantic tag available to developers in html
4, so we need to include aria roles and properties.
... the new attributes introduced in aria, such as role and those prefixed with aria-, aren't officially part of the html
4 or xhtml
4 specifications.
::placeholder - CSS: Cascading Style Sheets
in order to meet current web content accessibility guidelines (wcag), a ratio of
4.5:1 is required for text content and 3:1 for larger text such as headings.
... large text is defined as 18.66px and bold or larger, or 2
4px or larger.
... webaim: color contrast checker mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.3 | w3c understanding wcag 2.0 usability placeholder text with sufficient color contrast may be interpreted as entered input.
...norman group examples red text html <input placeholder="type something here!"> css input::placeholder { color: red; font-size: 1.2em; font-style: italic; } result green text html <input placeholder="type something here..."> css input::placeholder { color: green; } result specifications specification status comment css pseudo-elements level
4the definition of '::placeholder' in that specification.
:focus-visible - CSS: Cascading Style Sheets
ton>default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> input, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:focus-visible { outline:
4px dashed darkorange; } selectively showing the focus indicator a custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.
...t support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for browsers that do support :focus-visible */ background: transparent; } custom-button:focus-visible { /* draw a very noticeable focus style for keyboard-focus on browsers that do support :focus-visible */ outline:
4px dashed darkorange; background: transparent; } polyfill you can polyfill :focus-visible using focus-visible.js.
...wcag 2.1 sc 1.
4.11 non-text contrast requires that the visual focus indicator be at least 3 to 1.
... specifications specification status comment selectors level
4the definition of ':focus-visible' in that specification.
:has() - CSS: Cascading Style Sheets
in earlier revisions of the css selectors level
4 specification, :has had a limitation that it couldn't be used within stylesheets.
...elements that directly contain an <img> the following selector matches only <a> elements that directly contain an <img> child: a:has(> img) matching <h1> elements that are followed by a <p> the following selector matches <h1> elements only if they have a <p> element directly following them: h1:has(+ p) specifications specification status comment selectors level
4the definition of ':has()' in that specification.
... nonotes no support nonotes notes see bug 669058edge no support nonotes no support nonotes notes see bug 669058firefox no support nonotes no support nonotes notes see bug
418039ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android no support ...
... nonotes no support nonotes notes see bug
418039opera android no support nosafari ios no support nosamsung internet android no support nolegend no support no supportsee implementation notes.see implementation notes.
unicode-range - CSS: Cascading Style Sheets
syntax /* <unicode-range> values */ unicode-range: u+26; /* 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+26.
... wildcard range a range of unicode code points containing wildcard characters, that is using the '?' character, so for example u+
4??
... means include all characters in the range u+
400 to u+
4ff.
... html <div>me & you = us</div> css @font-face { font-family: 'ampersand'; src: local('times new roman'); unicode-range: u+26; } 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.
@supports - CSS: Cascading Style Sheets
tially applied in browsers which don't support the `of` argument of :nth-child(…) is supported */ :is(:nth-child(1n of ul, ol) a, details > summary) { … /* css applied when the :is(…) selector and the `of` argument of :nth-child(…) are both supported */ } } specifications specification status comment css conditional rules module level
4the definition of '@supports' in that specification.
...android full support 1.5selector()chrome full support 83edge full support 83firefox full support 69 full support 69 full support 6
4disabled disabled from version 6
4: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true).
... 69safari no support nonotes no support nonotes notes see bug 199237webview android full support 83chrome android full support 83firefox android full support 6
4disabled full support 6
4disabled disabled from version 6
4: 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.opera android no support nonotes no support nonotes notes see bug 9790
41.safari ios no support nonotes no support nonotes notes see bug 199237samsung internet android no support nonotes no support nonotes notes see bug 9790
41.legend full support full support no support no supportsee implementation notes.see implementation notes.user m...
Block and inline layout in normal flow - CSS: Cascading Style Sheets
in a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.
4.1 for elements with an inline formatting context: “in an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.
...the rectangular area that contains the boxes that form a line is called a line box.” - 9.
4.2 note that the css 2.1 specification describes documents as being in a horizontal, top to bottom writing mode.
... in the example below, the paragraphs have a top margin of 20px and a bottom margin of
40px.
... the size of the margin between the paragraphs is
40px as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first.
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 #f76707; border-radius: 5px; background-color: #fff
4e6; 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: end; } <div class="media"> <div class="image"><i...
...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 #f76707; border-radius: 5px; background-color: #fff
4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } <div class=...
...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 #f76707; border-radius: 5px; background-color: #fff
4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (di...
...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 #f76707; border-radius: 5px; background-color: #fff
4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .wrapper ul { margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; ...
Consistent list indentation - CSS: Cascading Style Sheets
since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in figure
4.
...in internet explorer and opera, the lists are indented by setting a left margin of
40 pixels on the <ul> element.
... 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.
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
the below code, in a horizontal writing mode, would give you a 2px green solid border on the top and bottom of the box, and a
4px dotted purple border on the left and right.
... .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.
...the below example, in a horizontal writing-mode, would set the top-right border radius to 1em, the bottom-right to 0, the bottom-left to 20px and the top-left to
40px.
... .box { border-end-start-radius: 1em; border-end-end-radius: 0; border-start-end-radius: 20px; border-start-start-radius:
40px; } indicating logical values for the
4-value shorthand syntax the specification makes a suggestion for the four-value shorthands such as the margin property, however the final decision on how this should be indicated is as yet unresolved, and is discussed in this issue.
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 6
4 full support 6
4 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 6
4 full support 6
4 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 6
4notes full support 6
4notes 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.
... no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android full support 6
4 full support 6
4 full support 63disabled disabled from version 63: this feature is behind the layout.css.scrollbar-color.enabled preference (needs to be set to true).
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: 160px; background: lightgray; } p { width: 50%; /* ==
400px * .5 = 200px */ height: 25%; /* == 160px * .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 disp...
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { position: absolute; left: 30px; top: 30px; width:
400px; height: 160px; padding: 30px 20px; background: lightgray; } p { position: absolute; width: 50%; /* == (
400px + 20px + 20px) * .5 = 220px */ height: 25%; /* == (160px + 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 par...
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { width:
400px; height:
480px; margin: 30px; padding: 15px; background: lightgray; } p { position: fixed; width: 50%; /* == (50vw - (width of vertical scrollbar)) */ height: 50%; /* == (50vh - (height of horizontal scrollbar)) */ margin: 5%; /* == (5vw - (width of vertical scrollbar)) */ padding: 5%; /* == (5vw - (width of vertical scrollbar)) */ background: cyan; } example 5 in this example, the paragraph's position is absolute, so its containing block ...
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { transform: rotate(0deg); width:
400px; height: 160px; background: lightgray; } p { position: absolute; left: 80px; top: 30px; width: 50%; /* == 200px */ height: 25%; /* ==
40px */ margin: 5%; /* == 20px */ padding: 5%; /* == 20px */ background: cyan; } ...
Shorthand properties - CSS: Cascading Style Sheets
handling of these cases are grouped in several categories: shorthands handling properties related to edges of a box, like border-style, margin or padding, always use a consistent 1-to-
4-value syntax representing those edges: the 1-value syntax: border-width: 1em — the unique value represents all edges the 2-value syntax: border-width: 1em 2em — the first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
... the 3-value syntax: border-width: 1em 2em 3em — the first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge the
4-value syntax: border-width: 1em 2em 3em
4em — the four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (the initial letter of top-right-bottom-left matches the order of the consonant of the word trouble: trbl) (you can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and
4em in the 9 o'clock position).
... similarly, shorthands handling properties related to corners of a box, like border-radius, always use a consistent 1-to-
4-value syntax representing those corners: the 1-value syntax: border-radius: 1em — the unique value represents all corners the 2-value syntax: border-radius: 1em 2em — the first value represents the top left and bottom right corner, the second the top right and bottom left ones.
... the 3-value syntax: border-radius: 1em 2em 3em — the first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner the
4-value syntax: border-radius: 1em 2em 3em
4em — the four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.
Cubic Bezier Generator - CSS: Cascading Style Sheets
> <label for="x1">x1 = </label><input onchange="updatecanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> <label for="y1">y1 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.1
4" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width:
40px; } function updatecanvas() { var x1 = document.getelementbyid('x1').value; var y1 = document.getelementbyid('y1').value;...
... var x2 = document.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius =
4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5; // size of 0.1 tick on the rulers var scaling; //limitation: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('...
....moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i * 10) / 10, -3 * basic_scale_size + cx(0), cy(i) +
4); // limitation the constant
4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.filltext("output (value ratio)", -cy(0), -3 * basic_scal...
... // draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "center"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.filltext(math.round(i * 10) / 10, cx(i),
4 * basic_scale_size + cy(0)); // limitation the constant
4 should be dependant of the font size } ctx.lineto(lx(i), cy(0)); } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0),
4 * basic_scale_size + cy(0)); // limitation the constant
4 should be dependant of the font s...
Viewport concepts - CSS: Cascading Style Sheets
when zoomed in, the iframe shrinks to
400px and 1vw becomes
4px.
... <svg height="300" width="
400"></svg> in this examples, the viewport has an aspect ratio of 3::
4, and is, but default,
400 by 300 units, with a unit generally being a css pixel.
... @media screen and (min-width:
400px) and (max-width: 500px) { /* css goes here */ } generally, when you write the above media query, the styles are applied if the viewport, generally the browser window, is between
400px and 500px, inclusive.
...with the above media query being in our svg file, the css is applied if the svg container is between
400 and 500px.
<angle> - CSS: Cascading Style Sheets
for example, 90deg equals -270deg, and 1turn equals
4turn.
...examples: 0deg, 90deg, 1
4.23deg.
...one full circle is
400grad.
... examples setting a clockwise right angle 90deg = 100grad = 0.25turn ≈ 1.5708rad setting a flat angle 180deg = 200grad = 0.5turn ≈ 3.1
416rad 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.
background-color - CSS: Cascading Style Sheets
in order to meet current web content accessibility guidelines (wcag), a ratio of
4.5:1 is required for text content and 3:1 for larger text such as headings.
... large text is defined as 18.66px and bold or larger, or 2
4px or larger.
... webaim: color contrast checker mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.3 | w3c understanding wcag 2.0 formal definition initial valuetransparentapplies toall elements.
...er> | <angle> examples html <div class="exampleone"> lorem ipsum dolor sit amet, consectetuer </div> <div class="exampletwo"> lorem ipsum dolor sit amet, consectetuer </div> <div class="examplethree"> lorem ipsum dolor sit amet, consectetuer </div> css .exampleone { background-color: teal; color: white; } .exampletwo { background-color: rgb(153,102,153); color: rgb(255,255,20
4); } .examplethree { background-color: #777799; color: #ffffff; } result specifications specification comment feedback css backgrounds and borders module level 3the definition of 'background-color' in that specification.
background-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/3b
4892b7e820122ac6dd7678891d
4507/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.
... desktopmobilechromeedgefirefoxinternet 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 support 18safari ios full support 1samsung internet android full support 1.0two-value syntax (support for offsets from any edge)chrome no support noedge no support 12 — 79firefox full support
49ie full support 9opera no support nosafari no support nowebview android no support nochrome android no support ...
... nofirefox android full support
49opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no support see also background-position background-position-y background-position-inline background-position-block using multiple backgrounds ...
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/3b
4892b7e820122ac6dd7678891d
4507/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.
... desktopmobilechromeedgefirefoxinternet 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 support 1
4safari ios full support 1samsung internet android full support 1.0two-value syntax (support for offsets from any edge)chrome no support noedge no support 12 — 79firefox full support
49ie full support 9opera no support nosafari no support nowebview android no support nochrome android no support ...
... nofirefox android full support
49opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no support see also background-position background-position-x background-position-inline background-position-block using multiple backgrounds ...
border-image-slice - CSS: Cascading Style Sheets
zones 1-
4 are corner regions.
... syntax /* all sides */ border-image-slice: 30%; /* vertical | horizontal */ border-image-slice: 10% 30%; /* top | horizontal | bottom */ border-image-slice: 30 30%
45; /* top | right | bottom | left */ border-image-slice: 7 12 1
4 5; /* using the `fill` keyword */ border-image-slice: 10% fill 7 12; /* global values */ border-image-slice: inherit; border-image-slice: initial; border-image-slice: unset; the border-image-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
...it also applies to ::first-letter.inheritednopercentagesrefer to the size of the border imagecomputed valueone to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedanimation typeby computed value type formal syntax <number-percentage>{1,
4} && fill?where <number-percentage> = <number> | <percentage> examples adjustable border width and slice the folowing example shows a simple <div> with a border image set on it.
... html <div class="wrapper"> <div></div> </div> <ul> <li> <label for="width">slide to adjust <code>border-width</code></label> <input type="range" min="10" max="
45" id="width"> <output id="width-output">30px</output> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <input type="range" min="10" max="
45" id="slice"> <output id="slice-output">30</output> </li> </ul> css .wrapper { width:
400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: s...
border-left-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed 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="b
4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">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 c...
...lasses */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b
4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {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.
...support 5.5opera full support 9.2safari full support 1webview android full support 2.3chrome android full support 18firefox android full support 1
4notes full support 1
4notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
... this has been fixed in firefox 50.opera android full support 1
4safari ios full support 1samsung internet android full support 1.0legend full support full supportsee implementation notes.see implementation notes.
border-right-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas 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="b
4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">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;} .b
4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {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.
...pport 5.5opera full support 9.2safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 1
4notes full support 1
4notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
... this has been fixed in firefox 50.opera android full support 1
4safari ios full support 1samsung internet android full support 1.0legend full support full supportsee implementation notes.see implementation notes.
box-direction - CSS: Cascading Style Sheets
12prefixed full support 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 1prefixed full support 1prefixed prefixed implemented with the vendor prefix: -moz- full support
49prefixed prefixed implemented with the vendor prefix: -webkit- full support
48prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version
48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true).
... full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support
4prefixed full support
4prefixed prefixed implemented with the vendor prefix: -moz- full support
49prefixed prefixed implemented with the vendor prefix: -webkit- full support
48prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from ver...
...sion
48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android full support 1
4prefixed full support 1
4prefixed prefixed implemented with the vendor prefix: -webkit-safari ios full support 1prefixed full support 1prefixed prefixed implemented with the vendor prefix: -webkit-samsung internet android full support 1.0prefixed full support 1.0prefixed prefixed implemented with the vendor prefix: -webkit-legend full support full support no ...
calc() - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.
4 | w3c understanding wcag 2.0 usage with integers when calc() is used where an <integer> is expected, the value will be rounded to the nearest integer.
...z-index: calc(
4 / 2); will not be accepted.
...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.
element() - CSS: Cascading Style Sheets
<div style="width:
400px; height:
400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="mybackground1" style="width:102
4px; height:102
4px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(
45deg); ...
... <div style="width:
400px; height:100px; background:-moz-element(#mybackground2);"> </div> <div style="overflow:hidden; height:0;"> <button id="mybackground2" type="button">evil button!</button> </div> specifications specification status comment css images module level
4the definition of 'using elements as images: the element() notation' in that specification.
... no support
4 — 29prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image and background.ie no support noopera no support nosafari no support nowebview android no support ...
... no support
4 — 29prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image and background.opera android no support nosafari ios no support nosamsung internet android no support nolegend ...
font-variant-caps - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations w3c understanding wcag 2.1 formal definition initial valuenormalapplies toall elements.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variant-capschrome full support 52edge full support 79firefox full support 3
4 full support 3
4 no support 2
4 — 3
4disabled disabled from version 2
4 until version 3
4 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... no support noopera full support 39safari no support nowebview android full support 52chrome android full support 52firefox android full support 3
4 full support 3
4 no support 2
4 — 3
4disabled disabled from version 2
4 until version 3
4 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android full support
41safari ios no support nosamsung 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.
<gradient> - CSS: Cascading Style Sheets
<div class="linear-gradient">linear gradient</div> div { width: 2
40px; height: 80px; } .linear-gradient { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } radial gradient example a simple radial gradient.
... <div class="radial-gradient">radial gradient</div> div { width: 2
40px; height: 80px; } .radial-gradient { background: radial-gradient(red, yellow, rgb(30, 1
44, 255)); } repeating gradient examples simple repeating linear and radial gradient examples.
... <div class="linear-repeat">repeating linear gradient</div> <br> <div class="radial-repeat">repeating radial gradient</div> div { width: 2
40px; height: 80px; } .linear-repeat { background: repeating-linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px); } .radial-repeat { background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); } conic gradient example a simple conic gradient example.
... <div class="conic-gradient">conic gradient</div> div { width: 200px; height: 200px; } .conic-gradient { background: conic-gradient(lightpink, white, powderblue); } specifications specification status comment css images module level
4the definition of '<gradient>' in that specification.
object-fit - CSS: Cascading Style Sheets
formal definition initial valuefillapplies toreplaced elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> <h2>object-fit: contain</h2> <img class="contain" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> <img class="contain narrow" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> <h2>object-fit: cov...
...er</h2> <img class="cover" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> <img class="cover narrow" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> <h2>object-fit: none</h2> <img class="none" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> <img class="none narrow" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> <h2>object-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/2
48a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.3em; }...
... div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 9
40px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification status comment css images module level
4the definition of 'object-fit' in that specification.
... 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 36opera android full support 19 full support 19 full support 12prefixed prefixed implemented with the vendor pre...
outline-color - CSS: Cascading Style Sheets
in order to meet current web content accessibility guidelines (wcag), a ratio of
4.5:1 is required for text content and 3:1 for larger text such as headings.
... large text is defined as 18.66px and bold or larger, or 2
4px or larger.
... webaim: color contrast checker mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.3 | w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritednocomputed valuefor the keyword invert, the computed value is invert.
...ull support 8opera full support 7safari full support 1.2webview android full support 37chrome android full support 18firefox android full support
4opera android full support 1
4safari ios full support 1samsung internet android full support 1.0invertchrome no support noedge no support 12 — 79firefox no support 1 �...
repeating-conic-gradient() - CSS: Cascading Style Sheets
repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 2
4%); conic-gradient(red 120deg, yellow 120deg 2
40deg, blue 2
40deg); radial-gradient(red 33%, yellow 33% 66%, blue 66%); for a repeating gradient to repeat we define the first and last color stops.
...there are 360 degrees,
400 gradians, 2π radians, and 1 turn in a circle.
...the following two gradients are equivalent repeating-conic-gradient(red, orange, yellow, green, blue 50%); repeating-conic-gradient(from -
45deg, red
45deg, orange, yellow, green, blue 225deg) by default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.
... specifications specification status comment css images module level
4the definition of 'repeating-conic-gradient()' in that specification.
repeating-linear-gradient() - CSS: Cascading Style Sheets
syntax /* a repeating gradient tilted
45 degrees, starting blue and finishing red, repeating 3 times */ repeating-linear-gradient(
45deg, blue, red 33.3%); /* a repeating gradient going from the bottom right to the top left, starting blue and finishing red, repeating every 20px */ repeating-linear-gradient(to left top, blue, red 20px); /* a gradient going from the bottom to top, starting blue, turning green after
40%, and ...
...this gradient doesn't repeat because the last color stop defaults to 100% */ repeating-linear-gradient(0deg, blue, green
40%, red); /* a gradient repeating five times, going from the left to right, starting red, turning green, and back to red */ repeating-linear-gradient(to right, red 0%, green 10%, red 20%); values <side-or-corner> the position of the gradient line's starting point.
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples zebra stripes body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(-
45deg, transparent, transparent 20px, black 20px, black
40px); /* with multiple color stop lengths */ background-image: repeating-linear-gradient(-
45deg, transparent 0 20px, black 20px
40px); } ten repeating horizontal bars body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(to bottom, rgb(26,198,20
4), ...
... rgb(26,198,20
4) 7%, rgb(100,100,100) 10%); } because the last color stop is 10% and the gradient is vertical, each gradient in the repeated gradient is 10% of the height, fitting 10 horizontal bars.
right - CSS: Cascading Style Sheets
syntax /* <length> values */ right: 3px; right: 2.
4em; /* <percentage>s of the width of the containing block */ right: 10%; /* keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block.
...gth; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { width: 100px; height: 100px; background-color: #ffc7e
4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constraints prevent it from doing so.
... html <div id="parent">parent <div id="nowidth">no width</div> <div id="width">width: 100px</div> </div> css div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px; background-color: #ffc7e
4; position: relative; } /* declare both a left and a right */ #width, #nowidth { background-color: #c2ffd7; position: absolute; left: 0; right: 0; } /* declare a width */ #width { width: 100px; top: 60px; } result specifications specification status comment css positioned layout module level 3the definition of 'right' in that specification.
...full support 5.5opera full support 5safari full support 1webview android full support 1chrome android full support 18firefox android full support
4opera android full support 1
4safari ios full support 1samsung internet android full support 1.0legend full support full support ...
text-combine-upright - CSS: Cascading Style Sheets
/* keyword values */ text-combine-upright: none; text-combine-upright: all; /* digits values */ text-combine-upright: digits; /* fits 2 consecutive digits horizontally inside vertical text */ text-combine-upright: digits
4; /* fits up to
4 consecutive digits horizontally inside vertical text */ /* global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset; syntax values none there is no special processing.
...integers outside the range of 2-
4 are invalid.
... html <p lang="ja" class="exampletext">平成20年
4月16日に</p> css .exampletext { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.
... html <p lang="zh-hant">民國<span class="num">105</span >年<span class="num">
4</span >月<span class="num">29</span>日</p> css html { writing-mode: vertical-rl; font: 2
4px serif } .num { text-combine-upright: all } results screenshotlive sample specifications specification status comment css writing modes level
4the definition of 'text-combine-upright' in that specification.
writing-mode - CSS: Cascading Style Sheets
cript</th> <th>horizontal (ltr) script</th> <th>horizontal (rtl) script</th> <th>mixed script</th> </tr> <tr> <td>horizontal-tb</td> <td class="example text1"><span>我家没有电脑。</span></td> <td class="example text1"><span>example text</span></td> <td class="example text1"><span>מלל ארוך לדוגמא</span></td> <td class="example text1"><span>199
4年に至っては</span></td> </tr> <tr> <td>vertical-lr</td> <td class="example text2"><span>我家没有电脑。</span></td> <td class="example text2"><span>example text</span></td> <td class="example text2"><span>מלל ארוך לדוגמא</span></td> <td class="example text2"><span>199
4年に至っては</span></td> </tr> <tr> <td>vertical-rl</td> <td cl...
...ass="example text3"><span>我家没有电脑。</span></td> <td class="example text3"><span>example text</span></td> <td class="example text3"><span>מלל ארוך לדוגמא</span></td> <td class="example text3"><span>199
4年に至っては</span></td> </tr> <tr> <td>sideways-lr</td> <td class="example text
4"><span>我家没有电脑。</span></td> <td class="example text
4"><span>example text</span></td> <td class="example text
4"><span>מלל ארוך לדוגמא</span></td> <td class="example text
4"><span>199
4年に至っては</span></td> </tr> <tr> <td>sideways-rl</td> <td class="example text5"><span>我家没有电脑。</span></td> <td class="example text5"><span>example text</span></td> <td class="example text5"><span>מלל...
... ארוך לדוגמא</span></td> <td class="example text5"><span>199
4年に至っては</span></td> </tr> </table> css some preparatory css just to make things look a little better: table { border-collapse:collapse; } td, th { border: 1px black solid; padding: 3px; } th { background-color: lightgray; } .example { height:75px; width:75px; } the css that adjusts the directionality of the content looks like this: .example.text1 span, .example.text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example.text2 span, .example.text2 { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; } .example.text3 span, .example.text3 { writing-mode: vertical-rl; -webki...
...t-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.text
4 span, .example.text
4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.text5 span, .example.text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; } result this image shows what the output should look like, in case your browser's support for writing-mode is incomplete: specifications specification status comment css writing modes level
4the definition of 'writing-mode' in that specification.
Challenge solutions - Developer guides
solution the following rule puts borders around only <td> elements that are inside the <tbody> element of the table with id=demo-table: #demo-table tbody td { border:1px solid #7a7; } media separate print style file challenge move the print-specific style rules to a separate css file and import them into your style
4.css stylesheet.
... solution cut and paste the lines between /* print only */ and /* end print only */ into a file named style
4_print.css.
... in style
4.css, add the following line at the beginning of the file: @import url("style
4_print.css") print; heading hover color challenge make the headings turn blue when the mouse pointer is over them.
...the following script achieves the desired result: // javascript demonstration function dodemo (button) { var square = document.getelementbyid("square"); square.style.backgroundcolor = "#fa
4"; square.style.marginleft = "20em"; button.setattribute("disabled", "true"); settimeout(cleardemo, 2000, button); } function cleardemo (button) { var square = document.getelementbyid("square"); square.style.backgroundcolor = "transparent"; square.style.marginleft = "0em"; button.removeattribute("disabled"); } svg and css change color of inner petals challenge change the ...
Constraint validation - Developer guides
therefore, like with html
4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.
...option> <option value="de">germany</option> <option value="nl">the netherlands</option> </select> <input type="submit" value="validate"> </form> this displays the following form: first, we write a function checking the constraint itself: function checkzip() { // for each country, defines the pattern that the zip has to follow var constraints = { ch : [ '^(ch-)?\\d{
4}$', "switzerland zips must have exactly
4 digits: e.g.
...d-123
45 or 123
45" ], nl : [ '^(nl-)?\\d{
4}\\s*([a-rt-z][a-z]|s[bce-rt-z])$', "nederland zips must have exactly
4 digits, followed by 2 letters except sa, sd and ss" ] }; // read the country id var country = document.getelementbyid("country").value; // get the npa field var zipfield = document.getelementbyid("zip"); // build the constraint checker var constraint = new regexp(constraints[country][0], ""); console.log(constraint); // check it!
...the javascript reads the file selected, uses the file.size() method to get its size, compares it to the (hard coded) limit, and calls the constraint api to inform the browser if there is a violation: function checkfilesize() { var fs = document.getelementbyid("fs"); var files = fs.files; // if there is (at least) one file selected if (files.length > 0) { if (files[0].size > 75 * 102
4) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event: window.onload = function () { document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint v...
HTML attribute: pattern - HTML: Hypertext Markup Language
examples given the following: <p> <label>enter your phone number in the format (123)
456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{
4}" placeholder="####" aria-label="
4-digit number" size="3"/> </label> </p> here we have 3 sections for a north ameri...
...can phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and
4-digits respectively, as defined by the pattern attribute set on each.
... the example below restricts the value to
4-8 characters and requires that it contain only lower-case letters.
... <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="
45" pattern="[a-z]{
4,8}" title="
4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and
4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size: 80%; color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used,...
<address>: The Contact Address element - HTML: Hypertext Markup Language
permitted content flow content, but with no nested <address> element, no heading content (<hgroup>, <h1>, <h2>, <h3>, <h
4>, <h5>, <h6>), no sectioning content (<article>, <aside>, <section>, <nav>), and no <header> or <footer> element.
... implicit aria role no corresponding role permitted aria roles any dom interface htmlelement prior to gecko 2.0 (firefox
4), gecko implemented this element using the htmlspanelement interface attributes this element only includes the global attributes.
... <address> you can contact author at <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>.<br> if you see any bugs, please <a href="mailto:webmaster@somedomain.com"> contact webmaster</a>.<br> you may also want to visit us:<br> mozilla foundation<br> 331 e evelyn ave<br> mountain view, ca 9
40
41<br> usa </address> result although it renders text with the same default styling as the <i> or <em> elements, it is more appropriate to use <address> when dealing with contact information, as it conveys additional semantic information.
... recommendation html
4.01 specificationthe definition of '<address>' in that specification.
<input type="image"> - HTML: Hypertext Markup Language
obsolete attributes the following attribute was defined by html
4 for image inputs, but was not implemented by all browsers and has since been deprecated: attribute description usemap the name of an image map (<map>) element to use with the image; this is obsolete.
... 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/62ac2ecddbec0e0b5
40098c28
451e57203e5cab
46dfed7ab0115d5a659fcfb7b.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/62ac2ecddbec0e0b5
40098c28
451e57203e5cab
46dfed7ab0115d5a659fcfb7b.png" alt="login" width="100"> </div> </form> css and now some simple css to make the basic elements sit more neatly: div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } adjusting the image position and scaling in this example, we adapt the previous example to set aside mo...
... 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/62ac2ecddbec0e0b5
40098c28
451e57203e5cab
46dfed7ab0115d5a659fcfb7b.png" alt="login" width="200" height="100"> </div> </form> css div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } #image { object-position: right top; object-fit: contain; background-color: #ddd; } here, object-position is configured to draw the image at the t...
<input type="password"> - HTML: Hypertext Markup Language
<label for="pin">pin:</label> <input id="pin" type="password" inputmode="numeric" minlength="
4" maxlength="8" size="8"> selecting text as with other textual entry controls, you can use the select() method to select all the text in the password field.
... <label for="hexid">hex id: </label> <input id="hexid" type="password" pattern="[0-9a-fa-f]{
4,8}" title="enter an id consisting of
4-8 hexadecimal digits" autocomplete="new-password"> disabled this boolean attribute indicates that the password field is not available for interaction.
...these numbers, used for tax and identification purposes in the us, are in the form "123-
45-6789".
... html <label for="ssn">ssn:</label> <input type="password" id="ssn" inputmode="numeric" minlength="9" maxlength="12" pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{
4}" required autocomplete="off"> <br> <label for="ssn">value:</label> <span id="current"></span> this uses a pattern which limits the entered value to strings representing legal socal security numbers.
<input type="range"> - HTML: Hypertext Markup Language
for example, if you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01: <input type="range" min="5" max="10" step="0.01"> if you want to accept any value regardless of how many decimal places it extends to, you can specify a value of any for the step attribute: <input type="range" min="0" max="3.1
4" step="any"> this example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.
... 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 <optio...
... html examples <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="
40"></option> <option value="50" label="50%"></option> <option value="60"></option> <option value="70"></option> <option value="80"></option> <option value="90"></option> <option value="100" label="100%"></option> </datalist> screenshot live note: currently, no browser fully supports these features.
...(see firefox bug 981916, chrome bug 3
41071).
<input type="search"> - HTML: Hypertext Markup Language
to see the status of the change being implemented in firefox, see bug 1
490661.
... the example below requires that the entered value be
4–8 characters in length.
... <form> <div> <label for="mysearch">search for user</label> <input type="search" id="mysearch" name="q" placeholder="user ids are
4–8 characters in length" required size="30" minlength="
4" maxlength="8"> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } this renders like so: if you try to submit the form with less than
4 characters, you'll be given an appropriate error message (which differs between browsers).
...the following example covers it: <form> <div> <label for="mysearch">search for product by id:</label> <input type="search" id="mysearch" name="q" placeholder="two letters followed by four numbers" required size="30" pattern="[a-z]{2}[0-9]{
4}"> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } this renders like so: examples you can see a good example of a search form used ...
<thead>: The Table Head element - HTML: Hypertext Markup Language
deprecated attributes align in html
4, in html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled.
... char in html
4, in html5 this attribute is used to set the character to align the cells in a column on.
... charoff in html
4, in html5 this attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.
... valign in html
4, in html5 this attribute specifies the vertical alignment of the text within each row of cells of the table header.
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 16, 195
4)</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 ../movies...
... names examples item itemprop name itemprop value itemprop country ireland itemprop option 2 itemprop https://www.flickr.com/photos/nlireland/699206511
4/ ring of kerry itemprop img https://www.flickr.com/photos/nlireland/699206511
4/ itemprop website flickr itemprop (token) (token) tokens are either strings or url's.
...<p itemprop="a">2</p> </div> as is the following <div itemscope> <p itemprop="a">1</p> <p itemprop="b">test</p> <p itemprop="a">2</p> </div> and the following <div id="x"> <p itemprop="a">1</p> </div> <div itemscope itemref="x"> <p itemprop="b">test</p> <p itemprop="a">2</p> </div> other examples html <dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-3
4032-8"> <dt>title <dd itemprop="title">the reality dysfunction <dt>author <dd itemprop="author">peter f.
... hamilton <dt>publication date <dd><time itemprop="pubdate" datetime="1996-01-26">26 january 1996</time> </dl> structured data itemscope itemtype: itemid http://vocab.example.net/book: urn:isbn:0-330-3
4032-8 itemprop title the reality dysfunction itemprop author peter f.
Configuring servers for Ogg media - HTTP
by default, ffmpeg2theora uses one key frame every 6
4 frames (or about every 2 seconds at 30 frames per second), which works pretty well.
... configuration for older firefox versions serve x-content-duration headers note: as of firefox
41, the x-content-duration header is no longer supported.
...the output from oggz-info looks like this: $ oggz-info /g/media/bruce_vs_ironman.ogv content-duration: 00:01:00.0
46 skeleton: serialno 1976223
438
4 packets in 3 pages, 1.3 packets/page, 27.508% ogg overhead presentation-time: 0.000 basetime: 0.000 theora: serialno 0170995062 1790 packets in 1068 pages, 1.7 packets/page, 1.0
49% ogg overhead video-framerate: 29.983 fps video-width: 6
40 video-height: 360 vorbis: serialno 0708996688
453...
...1 packets in 167 pages, 27.1 packets/page, 1.
408% ogg overhead audio-samplerate:
44100 hz audio-channels: 2 note that you can't simply serve up the reported content-duration line reported by oggz-info, because it's reported in hh:mm:ss format.
Content negotiation - HTTP
the 300 (multiple choices) or
406 (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
46 or later.
...this value is an approximation given by rounding to the nearest power of 2 and dividing that number by 102
4.
... a product token is a name followed by a '/' and a version number, like firefox/
4.0.1.
Cache-Control - HTTP
cache-control: immutable cache-control: stale-while-revalidate=<seconds> cache-control: stale-if-error=<seconds> directives cacheability a response is normally cached by the browser if: it has a status code of 301, 302, 307, 308, or
410 and cache-control does not have no-store, or if proxy, does not have private and authorization is unset either has a status code of 301, 302, 307, 308, or
410 or has public, max-age or s-maxage in cache-control or has expires set public the response may be stored by any cache, even if the response is normally non-cacheable.
...the cache should either respond using a stored response, or respond with a 50
4 status code.
... cache-control: public, max-age=60
4800, 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 82
46: http immutable responses ietf rfc rfc 723
4: hypertext transfer protocol (http/1.1): caching ietf rfc rfc 5861: http cache-control extensions for stale content ietf rfc initial definition ...
CSP: base-uri - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 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 base6
4-encoded hash of the script or style.
CSP: child-src - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 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 base6
4-encoded hash of the script or style.
CSP: connect-src - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 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 base6
4-encoded hash of the script or style.
CSP: default-src - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 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 base6
4-encoded hash of the script or style.
CSP: font-src - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 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 base6
4-encoded hash of the script or style.
CSP: form-action - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 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 base6
4-encoded hash of the script or style.
CSP: frame-src - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 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 base6
4-encoded hash of the script or style.
CSP: img-src - HTTP
mail.example.com:
443: matches all attempts to access port
443 on mail.example.com.
... 'nonce-<base6
4-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... '<hash-algorithm>-<base6
4-value>' a sha256, sha38
4 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 base6
4-encoded hash of the script or style.
Control flow and error handling - JavaScript
best practice in general, it's good practice to always use block statements—especially when nesting if statements: if (condition) { statement_1_runs_if_condition_is_true; statement_2_runs_if_condition_is_true; } else { statement_3_runs_if_condition_is_false; statement_
4_runs_if_condition_is_false; } it's unwise to use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code.
... 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.56 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 hand...
...the following code throws several exceptions of varying types: throw 'error2'; // string type throw
42; // number type throw true; // boolean type throw {tostring: function() { return "i'm an object!"; } }; note: you can specify an object when you throw an exception.
...urn statements in the try and catch blocks: function f() { try { console.log(0); throw 'bogus'; } catch(e) { console.log(1); return true; // this return statement is suspended // until finally block has completed console.log(2); // not reachable } finally { console.log(3); return false; // overwrites the previous "return" console.log(
4); // not reachable } // "return false" is executed now console.log(5); // not reachable } console.log(f()); // 0, 1, 3, false overwriting of return values by the finally block also applies to exceptions thrown or re-thrown inside of the catch block: function f() { try { throw 'bogus'; } catch(e) { console.log('caught inner "bogus"'); throw e; // this throw statement is ...
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 16 however, a name can be provided with a function expression.
...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 2
4 e = factorial(5); // e gets the value 120 there are other ways to call functions.
... the following example shows nested functions: function addsquares(a, b) { function square(x) { return x * x; } return square(a) + square(b); } a = addsquares(2, 3); // returns 13 b = addsquares(3,
4); // returns 25 c = addsquares(
4, 5); // returns
41 since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function: function outside(x) { function inside(y) { return x + y; } return inside; } fn_inside = outside(3); // think of it like: give me a function that adds 3 to whatever you give //...
... function multiply(multiplier, ...theargs) { return theargs.map(x => multiplier * x); } var arr = multiply(2, 1, 2, 3); console.log(arr); // [2,
4, 6] arrow functions an arrow function expression (previously, and now incorrectly known as fat arrow function) has a shorter syntax compared to function expressions and does not have its own this, arguments, super, or new.target.
arguments.callee - JavaScript
1 : factorial(n - 1) * n; } [1, 2, 3,
4, 5].map(factorial); but: [1, 2, 3,
4, 5].map(function(n) { return !(n > 1) ?
...to get around this arguments.callee was added so you could do [1, 2, 3,
4, 5].map(function(n) { return !(n > 1) ?
...for example: [1, 2, 3,
4, 5].map(function factorial(n) { return !(n > 1) ?
... function create() { return function(n) { if (n <= 1) return 1; return n * arguments.callee(n - 1); }; } var result = create()(5); // returns 120 (5 *
4 * 3 * 2 * 1) a use of arguments.callee with no good alternative however, in a case like the following, there are not alternatives to arguments.callee, so its deprecation could be a bug (see bug 725398): function createperson(sidentity) { var operson = new function('alert(arguments.callee.identity);'); operson.identity = sidentity; return operson; } var john = createperson('john sm...
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 ...
...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.re...
...verse(); } 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/2
4500 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 arr
4 = [1, 2, [3,
4, [5, 6, [7, 8, [9, 10]]]]]; arr
4.flat(infinity); // [1, 2, 3,
4, 5, 6, 7, 8, 9, 10] flattening and array holes the flat method removes empty slots in arrays: const arr5 = [1, 2, ,
4, 5]; arr5.flat(); // [1, 2,
4, 5] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.flat' in that specification.
Array.prototype.flatMap() - JavaScript
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 th...
...for reference, please check: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/2
4500 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, 16, 1, 18] a.flatmap( (n) => (n < 0) ?
...[n] : [n-1, 1] ) // expected output: [
4, 1,
4, 20, 16, 1, 18] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.flatmap' in that specification.
Array.prototype.toLocaleString() - JavaScript
syntax arr.tolocalestring([locales[, options]]); parameters locales optional a string with a bcp
47 language tag, or an array of such strings.
... polyfill // https://tc39.github.io/ecma
402/#sup-array.prototype.tolocalestring if (!array.prototype.tolocalestring) { object.defineproperty(array.prototype, 'tolocalestring', { value: function(locales, options) { // 1.
... // note: in this case, we will use a comma var separator = ','; //
4.
... ecmascript internationalization api (ecma-
402)the definition of 'array.prototype.tolocalestring' in that specification.
Date.prototype.toLocaleString() - JavaScript
ly some fallback languages) using the locales argument: let date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses month-day-year order and 12-hour time with am/pm console.log(date.tolocalestring('en-us')); // → "12/19/2012, 7:00:00 pm" // british english uses day-month-year order and 2
4-hour time without am/pm console.log(date.tolocalestring('en-gb')); // → "20/12/2012 03:00:00" // korean uses year-month-day order and 12-hour time with am/pm console.log(date.tolocalestring('ko-kr')); // → "2012.
...오후 12:00:00" // arabic in most arabic speaking countries uses real arabic digits console.log(date.tolocalestring('ar-eg')); // → "٢٠/١٢/٢٠١٢ ٥:٠٠:٠٠ ص" // for japanese, applications may want to use the japanese calendar, // where 2012 was the year 2
4 of the heisei era console.log(date.tolocalestring('ja-jp-u-ca-japanese')); // → "2
4/12/20 12:00:00" // when requesting a language that may not be supported, such as // balinese, include a fallback language (in this case, indonesian) console.log(date.tolocalestring(['ban', 'id'])); // → "20/12/2012 11.00.00" using options the results provided by tolocalestring() can be customized using the options argument: let date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // request a weekday along with a long ...
...dezember 2012" // an application may want to use utc and make that visible options.timezone = 'utc'; options.timezonename = 'short'; console.log(date.tolocalestring('en-us', options)); // → "thursday, december 20, 2012, gmt" // sometimes even the us needs 2
4-hour time console.log(date.tolocalestring('en-us', { hour12: false })); // → "12/19/2012, 19:00:00" avoid comparing formatted date values to static values most of the time, the formatting returned by tolocalestring() is consistent.
... ecmascript internationalization api (ecma-
402)the definition of 'date.prototype.tolocalestring' in that specification.
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-3166 two letters region code, or a three digits un m
49 geographic regions.
... if the type is "script", code should be an iso-1592
4 four letters script code.
... if the type is "currency", code should be a 3-letter iso
4217 currency code.
... examples using the of method let regionnames = new intl.displaynames(['en'], {type: 'region'}); regionnames.of('
419'); // "latin america" let languagenames = new intl.displaynames(['en'], {type: 'language'}); languagenames.of('fr'); // "french" let currencynames = new intl.displaynames(['en'], {type: 'currency'}); currencynames.of('eur'); // "euro" specifications specification intl.displaynamesthe definition of 'of()' in that specification.
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 = 123
456.789; // german uses comma as decimal separator and period for thousands console.log(new intl.numberformat('de-de').format(number)); // → 123.
456,789 // arabic in most arabic speaking countries uses real arabic digits console.log(new intl.numberformat('ar-eg').format(number)); // → ١٢٣٤٥٦٫٧٨٩ // india uses thousands/lakh/crore separators console.log(new intl.numberformat('en-in'...
...).format(number)); // → 1,23,
456.789 // the nu extension key requests a numbering system, e.g.
... chinese decimal console.log(new intl.numberformat('zh-hans-cn-u-nu-hanidec').format(number)); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(new intl.numberformat(['ban', 'id']).format(number)); // → 123.
456,789 using options the results can be customized using the options argument: var number = 123
456.789; // request a currency format console.log(new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }).format(number)); // → 123.
456,79 € // the japanese yen doesn't use a minor unit console.log(new intl.numberformat('ja-jp', { style: 'currency', currency: 'jpy' }).format(number)); // → ￥123,
457 // limit to three significant digi...
...mat(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((16).tolocalestring('en-gb', { style: "unit", unit: "liter", unitdisplay: "long" })); // → 16 litres specifications specification ecmascript internationalization api (ecma-
402)the definition of 'intl.numberformat' in that specification.
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp
47 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp
47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
...ples using the resolvedoptions method var de = new intl.relativetimeformat('de-de'); var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.style; // "long" usedoptions.numeric; // "always" usedoptions.numberingsystem; // "latn" specifications specification status comment ecmascript internationalization api (ecma-
402)the definition of 'relativetimeformat.resolvedoptions()' in that specification.
... stage
4 ...
Math - JavaScript
math.log2e base-2 logarithm of e; approximately 1.
443.
... math.log10e base-10 logarithm of e; approximately 0.
43
4.
... math.pi ratio of the a circle's circumference to its diameter; approximately 3.1
4159.
... math.sqrt2 square root of 2; approximately 1.
41
4.
Number.isSafeInteger() - JavaScript
a safe integer is an integer that can be exactly represented as an ieee-75
4 double precision number, and whose ieee-75
4 representation cannot be the result of rounding any other integer to fit the ieee-75
4 representation.
... for example, 253 - 1 is a safe integer: it can be exactly represented, and no other integer rounds to it under any ieee-75
4 rounding mode.
... in contrast, 253 is not a safe integer: it can be exactly represented in ieee-75
4, but the integer 253 + 1 can't be directly represented in ieee-75
4 but instead rounds to 253 under round-to-nearest and round-to-zero rounding.
... the safe integers consist of all integers from -(253 - 1) inclusive to 253 - 1 inclusive (± 900719925
47
40991 or ± 9,007,199,25
4,7
40,991).
Number.prototype.toLocaleString() - JavaScript
a check that works in all hosts, including those supporting ecma-262 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 that is a function.
...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 = 123
456.789; // german uses comma as decimal separator and period for thousands console.log(number.tolocalestring('de-de')); // → 123.
456,789 // arabic in most arabic speaking countries uses eastern arabic digits console.log(number.tolocalestring('ar-eg')); // → ١٢٣٤٥٦٫٧٨٩ // india uses thousands/lakh/crore separators console.log(number.tolocalestring('en-in')); // → 1,23,
456.789 // the 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.
456,789 using options the results provided by tolocalestring can be customized using the options argument: var number = 123
456.789; // request a currency format console.log(number.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.
456,79 € // the japanese yen doesn't use a minor unit console.log(number.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ￥123,
457 // limit to three significant digits console.log(number.tolocalestri...
... ecmascript internationalization api (ecma-
402)the definition of 'number.prototype.tolocalestring' in that specification.
Promise.all() - JavaScript
.log(values); // [3, 1337, "foo"] }); if the iterable contains non-promise values, they will be ignored, but still counted in the returned promise array value (if the promise is fulfilled): // this will be counted as if the iterable passed is empty, so it gets fulfilled var p = promise.all([1,2,3]); // this will be counted as if the iterable passed contains only the resolved promise with value "
444", so it gets fulfilled var p2 = promise.all([1,2,3, promise.resolve(
444)]); // this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected var p3 = promise.all([1,2,3, promise.reject(555)]); // using settimeout we can execute code after the stack is empty settimeout(function() { console.log(p); console.log(p2); console.log...
...(p3); }); // logs // promise { <state>: "fulfilled", <value>: array[3] } // promise { <state>: "fulfilled", <value>: array[
4] } // promise { <state>: "rejected", <reason>: 555 } asynchronicity or synchronicity of promise.all this following example demonstrates the asynchronicity (or synchronicity, if the iterable passed is empty) of promise.all: // we are passing as argument an array of promises that are already resolved, // to trigger promise.all as soon as possible var resolvedpromisesarray = [promise.resolve(33), promise.resolve(
44)]; var p = promise.all(resolvedpromisesarray); // immediately logging the value of p console.log(p); // using settimeout we can execute code after the stack is empty settimeout(function() { console.log('the stack is now empty'); console.log(p); }...
...); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: array[2] } the same thing happens if promise.all rejects: var mixedpromisesarray = [promise.resolve(33), promise.reject(
44)]; var p = promise.all(mixedpromisesarray); console.log(p); settimeout(function() { console.log('the stack is now empty'); console.log(p); }); // logs // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "rejected", <reason>:
44 } but, promise.all resolves synchronously if and only if the iterable passed is empty: var p = promise.all([]); // will be immediately resolved var p2 = promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously console.log(...
... var p1 = new promise((resolve, reject) => { settimeout(() => resolve('one'), 1000); }); var p2 = new promise((resolve, reject) => { settimeout(() => resolve('two'), 2000); }); var p3 = new promise((resolve, reject) => { settimeout(() => resolve('three'), 3000); }); var p
4 = new promise((resolve, reject) => { settimeout(() => resolve('four'),
4000); }); var p5 = new promise((resolve, reject) => { reject(new error('reject')); }); // using .catch: promise.all([p1, p2, p3, p
4, p5]) .then(values => { console.log(values); }) .catch(error => { console.error(error.message) }); //from console: //"reject" it is possible to change this behaviour by handling pos...
Set - JavaScript
is okay myset.has(1) // true myset.has(3) // false, since 3 has not been added to the set myset.has(5) // true myset.has(math.sqrt(25)) // true myset.has('some text'.tolowercase()) // true myset.has(o) // true myset.size // 5 myset.delete(5) // removes 5 from the set myset.has(5) // false, 5 has been removed myset.size //
4, since we just removed one value console.log(myset) // logs set(
4) [ 1, "some text", {…}, {…} ] in firefox // logs set(
4) { 1, "some text", {…}, {…} } in chrome iterating sets // iterate over items in set // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset) console.log(item) // logs the items in the order: 1, "some text", {"a": 1,...
... (let [key, value] of myset.entries()) console.log(key) // convert set object to an array object, with array.from let myarr = array.from(myset) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}] // the following will also work if run in an html document myset.add(document.body) myset.has(document.queryselector('body')) // true // converting between set and array myset2 = new set([1, 2, 3,
4]) myset2.size //
4 [...myset2] // [1, 2, 3,
4] // intersect can be simulated via let intersection = new set([...set1].filter(x => set2.has(x))) // difference can be simulated via let difference = new set([...set1].filter(x => !set2.has(x))) // iterate set entries with foreach() myset.foreach(function(value) { console.log(value) }) // 1 // 2 // 3 //
4 i...
... for (let elem of setb) { if (_difference.has(elem)) { _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'] /...
...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 ...
TypedArray - JavaScript
t8array 0 to 255 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 255 1 8-bit unsigned integer (clamped) octet uint8_t int16array -32768 to 32767 2 16-bit two's complement signed integer short int16_t uint16array 0 to 65535 2 16-bit unsigned integer unsigned short uint16_t int32array -21
47
4836
48 to 21
47
4836
47
4 32-bit two's complement signed integer long int32_t uint32array 0 to
429
4967295
4 32-bit unsigned integer unsigned long uint32_t float32array 1.2×10-38 to 3.
4×1038
4 32-bit ieee floating point number (7 significant digits e.g., 1.123
4567) unrestricted float float float6
4array 5.0×10-32
4 to 1.8×10308...
... 8 6
4-bit ieee floating point number (16 significant digits e.g., 1.123...15) unrestricted double double bigint6
4array -263 to 263-1 8 6
4-bit two's complement signed integer bigint int6
4_t (signed long long) biguint6
4array 0 to 26
4-1 8 6
4-bit unsigned integer bigint uint6
4_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 bigint6
4array.
... // setting and getting using standard array syntax var int16 = new int16array(2); int16[0] =
42; console.log(int16[0]); //
42 // indexed properties on prototypes are not consulted (fx 25) int8array.prototype[20] = 'foo'; (new int8array(32))[20]; // 0 // even when out of bound int8array.prototype[20] = 'foo'; (new int8array(8))[20]; // undefined // or with negative integers int8array.prototype[-1] = 'foo'; (new int8array(8))[-1]; // undefined // named properties are allowed, though (fx 30...
WebAssembly.Memory() constructor - JavaScript
note: a webassembly page has a constant size of 65,536 bytes, i.e., 6
4kib.
...the following example creates a new webassembly memory instance with an initial size of 10 pages (6
40kib), and a maximum size of 100 pages (6.
4mib).
... 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0shared flagchrome full support 7
4edge full support 79firefox full support 78ie no support noopera full support 62safari no support nowebview android no support ...
parseInt() - JavaScript
regular expressions can help: function filterint(value) { if (/^[-+]?(\d+|infinity)$/.test(value)) { return number(value) } else { return nan } } console.log(filterint('
421')) //
421 console.log(filterint('-
421')) // -
421 console.log(filterint('+
421')) //
421 console.log(filterint('infinity')) // infinity console.log(filterint('
421e+0')) // nan console.log(filterint('
421hop')) // nan console.log(filterint('hop1.61803398875')) // nan console.log(filterint('1.61803398875')) // nan ...
...nt('0xf', 16) parseint('f', 16) parseint('17', 8) parseint(021, 8) parseint('015', 10) // but `parseint(015, 10)` will return 13 parseint(15.99, 10) parseint('15,123', 10) parseint('fxx123', 16) parseint('1111', 2) parseint('15 * 3', 10) parseint('15e2', 10) parseint('15px', 10) parseint('12', 13) the following examples all return nan: parseint('hello', 8) // not a number at all parseint('5
46', 2) // digits other than 0 or 1 are invalid for binary radix the following examples all return -15: parseint('-f', 16) parseint('-0f', 16) parseint('-0xf', 16) parseint(-15.1, 10) parseint('-17', 8) parseint('-15', 10) parseint('-1111', 2) parseint('-15e1', 10) parseint('-12', 13) the following examples all return
4.
... parseint(
4.7, 10) parseint(
4.7 * 1e22, 10) // very large number becomes
4 parseint(0.00000000000
43
4, 10) // very small number becomes
4 if the number is greater than 1e+21 (including) or less than 1e-7 (including), it will return 1.
... parseint(0.0000001,10); parseint(0.000000123,10); parseint(1e-7,10); parseint(1000000000000000000000,10); parseint(123000000000000000000000,10); parseint(1e+21,10); the following example returns 22
4: parseint('0e0', 16) bigint values lose precision: parseint('900719925
47
4099267n') // 900719925
47
4099300 parseint doesn't work with numeric separators: parseint('123_
456') // 123 specifications specification ecmascript (ecma-262)the definition of 'parseint' in that specification.
Nullish coalescing operator (??) - JavaScript
see pr #1
482 regarding the addition of this example.
... const nullvalue = null; const emptytext = ""; // falsy const somenumber =
42; const vala = nullvalue ??
...0; console.log(vala); // "default for a" console.log(valb); // "" (as the empty string is not null or undefined) console.log(valc); //
42 assigning a default value to a variable earlier, when one wanted to assign a default value to a variable, a common pattern was to use the logical or operator (||): let foo; // foo is never assigned any value so it is still undefined let somedummytext = foo || 'hello!'; however, due to || being a boolean logical operator, the left hand-side operand was coerced to a boolean for the evaluation and any falsy value (0, '', nan, null, undefined) was not returned.
... let count = 0; let text = ""; let qty = count ||
42; let message = text || "hi!"; console.log(qty); //
42 and not 0 console.log(message); // "hi!" and not "" the nullish coalescing operator avoids this pitfall by only returning the second operand when the first one evaluates to either null or undefined (but no other falsy values): let mytext = ''; // an empty string (which is also a falsy value) let notfalsytext = mytext || 'hello world'; console.log(notfalsytext); // hello world let preservingfalsy = mytext ??
Operator precedence - JavaScript
ng the middle side evaluating the right side 512 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the parentheses around the left and middle exponentiation console.log((echo("left", 2) ** echo("middle", 3)) ** echo("right", 2)); evaluating the left side evaluating the middle side evaluating the right side 6
4 looking at the code snippets above, 6 / 3 / 2 is the same as (6 / 3) / 2 because division is left-associative.
...thus, doing (2 ** 3) ** 2 changes the order and results in the 6
4 seen in the table above.
...y negation - … prefix increment ++ … prefix decrement -- … typeof typeof … void void … delete delete … await await … 16 exponentiation right-to-left … ** … 15 multiplication left-to-right … * … division … / … remainder … % … 1
4 addition left-to-right … + … subtraction … - … 13 bitwise left shift left-to-right … << … bitwise right shift … >> … bitwise unsigned right shift … >>> … 12 less than left-to-right … < … less than or equal … <= … greater than … > … greater than or equal...
...…
4 conditional right-to-left … ?
for await...of - JavaScript
responsesize += chunk.length; } console.log(`response size: ${responsesize} bytes`); // expected output: "response size: 1071
472" return responsesize; } getresponsesize('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators.
... function* generator() { yield 0; yield 1; yield promise.resolve(2); yield promise.resolve(3); yield
4; } (async function() { for await (let num of generator()) { console.log(num); } })(); // 0 // 1 // 2 // 3 //
4 // compare with for-of loop: for (let numorpromise of generator()) { console.log(numorpromise); } // 0 // 1 // promise { 2 } // promise { 3 } //
4 note: be aware of yielding rejected promises from sync generator.
... function* generatorwithrejectedpromises() { try { yield 0; yield 1; yield promise.resolve(2); yield promise.reject(3); yield
4; throw 5; } finally { console.log('called finally') } } (async function() { try { for await (let num of generatorwithrejectedpromises()) { console.log(num); } } catch (e) { console.log('catched', e) } })(); // 0 // 1 // 2 // catched 3 // compare with for-of loop: try { for (let numorpromise of generatorwithrejectedpromises()) { console.log(numorpromise); } } catch (e) { console.log('catc...
...hed', e) } // 0 // 1 // promise { 2 } // promise { <rejected> 3 } //
4 // catched 5 // called finally to make finally blocks of a sync generator to be always called use appropriate form of the loop, for await...of for the async generator and for...of for the sync one and await yielded promises explicitly inside the loop.
throw - JavaScript
each of the following throws an exception: throw 'error2'; // generates an exception with a string value throw
42; // generates an exception with the value
42 throw true; // generates an exception with the value true throw new error('required'); // generates an error object with the message of required also note that the throw statement is affected by automatic semicolon insertion (asi) as no line terminator between the throw keyword and the expression is allowed.
... * * accepted formats for a zip code are: * 123
45 * 123
45-6789 * 123
456789 * 123
45 6789 * * if the argument passed to the zipcode constructor does not * conform to one of these patterns, an exception is thrown.
... */ function zipcode(zip) { zip = new string(zip); pattern = /[0-9]{5}([- ]?[0-9]{
4})?/; if (pattern.test(zip)) { // zip code value will be the first match in the string this.value = zip.match(pattern)[0]; this.valueof = function() { return this.value }; this.tostring = function() { return string(this.value) }; } else { throw new zipcodeformatexception(zip); } } function zipcodeformatexception(value) { this.value = value; this.message = 'does not conform to the expected format for a zip code'; this.tostring = function() { return this.value + this.message; }; } /* * this could be in a script that validates address data * for us addresses.
...ch (e) { if (e instanceof zipcodeformatexception) { return zipcode_invalid; } else { return zipcode_unknown_error; } } return z; } a = verifyzipcode(95060); // returns 95060 b = verifyzipcode(9560); // returns -1 c = verifyzipcode('a'); // returns -1 d = verifyzipcode('95060'); // returns 95060 e = verifyzipcode('95060 123
4'); // returns 95060 123
4 rethrow an exception you can use throw to rethrow an exception after you catch it.
Transitioning to strict mode - JavaScript
rgument name using one of the newly reserved keywords (in prevision for ecmascript 2015): implements, interface, let, package, private, protected, public, static, and yield declaring function in blocks if (a < b) { function f() {} } obvious errors declaring twice the same name for a property name in an object literal {a: 1, b: 3, a: 7} this is no longer the case in ecmascript 2015 (bug 10
41128).
...} f(
42); this used to change a value on the global object which is rarely the expected effect.
... if you really want to set a value to the global object, pass it as an argument and explicitly assign it as a property: var global = this; // in the top-level context, "this" always // refers to the global object function f(x) { 'use strict'; var a = 12; global.b = a + x * 35; } f(
42); trying to delete a non-configurable property 'use strict'; delete object.prototype; // error!
...the only legitimate use case would be to reuse a function as in: // example taken from vanillajs: http://vanilla-js.com/ var s = document.getelementbyid('thing').style; s.opacity = 1; (function() { if ((s.opacity-=.1) < 0) s.display = 'none'; else settimeout(arguments.callee,
40); })(); which can be rewritten as: 'use strict'; var s = document.getelementbyid('thing').style; s.opacity = 1; (function fadeout() { // name the function if((s.opacity-=.1) < 0) s.display = 'none'; else settimeout(fadeout,
40); // use the name of the function })(); semantic differences these differences are very subtle differences.
MathML: Deriving the Quadratic Formula - MathML
x 2 + b a x + b 2 a 2 = - c (
4 a ) a (
4 a ) + b 2
4 a 2 complete the square.
... ( x + b 2 a ) ( x + b 2 a ) = b 2 -
4 a c
4 a 2 discriminant revealed.
... ( x + b 2 a ) 2 = b 2 -
4 a c
4 a 2 x + b 2 a = b 2 -
4 a c
4 a 2 x = -b 2 a ±{c} b 2 -
4 a c
4 a 2 there's the vertex formula.
... x = - b ±{c} b 2 -
4 a c 2 a ...
Media - Progressive web apps (PWAs)
this is the 1
4th and last section of part i of the css getting started tutorial.
... make a new html document, doc
4.html.
... copy and paste the content from here: <!doctype html> <html> <head> <title>print sample</title> <link rel="stylesheet" href="style
4.css"> </head> <body> <h1>section a</h1> <p>this is the first section...</p> <h1>section b</h1> <p>this is the second section...</p> <div id="print-head"> heading for paged media </div> <div id="print-foot"> page: </div> </body> </html> make a new stylesheet, style
4.css.
... read the @import reference page to find details of how to import the new print-specific css file into your style
4.css stylesheet.
Mobile first - Progressive web apps (PWAs)
hite; top: 0.5em; } #bottom { bottom: 0.5em; } i also set their parents to be positioned relatively, so they would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned relative to the <body> element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about
480px.
... 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 #ad66d5; 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 bottom, #fff, #eee); } .main > p { background: rgba(255,255,255,0.3); ...
...the full uncompressed modernizr library is
42kb, but the version we are using in this demo is only 8kb.
...you could create a block to only load the library in the case of narrow screen devices: if(window.matchmedia("(min-width:
481px)").matches) { require('three'); } we can, therefore, save the bandwidth for browsers that don't need it.
stroke-linecap - SVG: Scalable Vector Graphics
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" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h
4 m1,3 h
4 m1,5 h
4" stroke="pink" stroke-width="0.025" /> </svg> usage notes value butt | round | square default value butt animatable yes butt the butt value indicates that the stroke for each subpath does not extend beyond its two endpoints.
... 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 h
4" 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 h
4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> round the round value indicates that at the end of each subpath the stroke will be exte...
... 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 h
4" 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 h
4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" />...
... 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 h
4" 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 h
4" s...
x - SVG: Scalable Vector Graphics
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="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <!-- x with a single value --> <text y="
40%" x="50%">svg</text> <!-- x with multiple values --> <text y="90%" x="25%, 50...
...%, 75%">svg</text> </svg> text { font:
40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
... 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="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <text> <!-- x with a single value --> <tspan y="
40%" x="50%">svg</tspan> <!-- x with multiple values --> <tspa...
...n y="90%" x="25%, 50%, 75%">svg</tspan> </text> </svg> text { font:
40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } use for <use>, x defines the x coordinate of the uper left corner of the referenced element.
y - SVG: Scalable Vector Graphics
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 sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
... 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 </svg> text { font:
40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } use for <use>, y defines the y coordinate of the uper left corner of the referenced element.
Basic shapes - SVG: Scalable Vector Graphics
ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/> <polyline points="60 110 65 120 70 115 75 130 80 125 85 1
40 90 135 95 150 100 1
45" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205
40 190 30 180
45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="m20,230 q
40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> </svg> note: the stroke, stroke-width, and fill attributes are explained la...
...since the list of points can get quite long, all the points are included in one attribute: <polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 1
40 90, 135 95, 150 100, 1
45"/> points a list of points.
... <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205
40, 190 30, 180
45, 180"/> points a list of points, each number separated by a space, comma, eol, or a line feed character.
... <path d="m20,230 q
40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> d a list of points and other information about how to draw the path.
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 payment request api (and basic card payment).
... 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 56 not supported not supported not supported web midi (see midiaccess, for example)
43 not supported not supported not supported web crypto api 60 79 not supported 75 secure context restrictions that vary by browser some browsers may decide to disable certain apis in non-secure ...
... api chrome edge safari firefox application cache restricted to secure contexts planned in chrome 70 deprecation planning started in february 2018 public interest on deprecation webkit bug 182
442 restricted to secure contexts in firefox 62 geolocation restricted to secure contexts in 50 restricted to secure contexts in 10 restricted to secure contexts in 55 device orientaion / device motion deprecation warning deprecation warnings since 60.
... getusermedia() restricted to secure contexts in chrome
47 temporary access available only (users cannot choose "remember this decision" in the permission request dialog).
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay length: 992 pages publisher: wrox; 2 edition (may 3, 2001) isbn: 076
45
4381
4 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/076
45
4381
4 xslt author: doug tidwell length:
473 pages publisher: o'reilly media; 1 edition (august 15, 2001) isbn: 0596000537 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
...ray length:
432 pages publisher: o'reilly media; 2 edition (september 22, 2003) isbn: 059600
4206 as the title indicates, this is an overview of xml generally.
... http://www.amazon.com/gp/product/059600
4206 digital websites world wide web consortium the w3c homepage: http://www.w3.org/ the main xsl page: http://www.w3.org/style/xsl/ the version 1.0 recommendation for xslt: http://www.w3.org/tr/xslt archive of public style (css and xslt) discussions: http://lists.w3.org/archives/public/www-style/ the version 1.0 recommendation for xpath: http://www.w3.org/tr/xpath the world wide web consortium is the body that publishes recommendations for a number of web-based technologies, many of which become the de-facto standard.
clipboard - Archive of obsolete content
the following types are supported: text (plain text) html (a string of html) image (a base-6
4 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;base6
4,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;base6
4,ivborw0kggoaaaansuheugaaacaaaaagcaya" + "aabzenr0aaaasuleqvryhe3o0qkaiawd0eyqe3q993aq3cbsukpygfsnty" + "n5ugbqpk0baadgp0brdwxwlweaaaaagpsa3rzdaaaaahgpcgrpganzq2fg" + "bwrr9aaaaabjru5erkjggg%3d%3d", "text"); globals functions set(data, datatype) replace the contents of the user's clipboard with the provided data.
page-mod - Archive of obsolete content
("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: data.url("my-script.js") }); var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: [data.url("jquery-1.7.min.js"), data.url("my-script.js")] }); from firefox 3
4, you can use "./my-script.js" as an alias for self.data.url("my-script.js").
... var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscriptfile: data.url("my-script.js") }); from firefox 3
4, you can use "./my-script.js" as an alias for the resource:// url pointing to the script in your "data" directory.
... var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstylefile: data.url("style.css") }); from firefox 3
4, you can use "./style.css" as an alias for the resource:// url pointing to the stylesheet in your "data" directory.
url - Archive of obsolete content
if base6
4 is true, the data property is encoded using base-6
4 encoding.
... base6
4 defines the encoding for the value in data property.
...if the uri given to the constructor contains base6
4 parameter, this string is decoded.
lang/type - Archive of obsolete content
let { isnumber } = require('sdk/lang/type'); isnumber(3.1
415); // true isnumber(100); // true isnumber('100'); // false parameters value : mixed the variable to check.
... let { isjson } = require('sdk/lang/type'); isjson({ value:
42 }); // true isjson({ fn: function () {} ); // false parameters value : mixed the variable to check.
...
4 spaces by default.
Creating Reusable Modules - Archive of obsolete content
e for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).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, 0
444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get binary data back var hash = ch.finish(false); // convert the binary ha...
...e for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).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, 0
444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get binary data back var hash = ch.finish(false); // convert the binary ha...
...e for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).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, 0
444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get binary data back var hash = ch.finish(false); // convert the binary ha...
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-16.png, icon-32.png, and icon-6
4.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: { "16": "./icon-16.png", "32": "./icon-32.png", "6
4": "./icon-6
4.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
...tml> <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-16.png icon-32.png icon-6
4.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-16.png icon-32.png icon-6
4.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: { "16": "./icon-16.png", "32": "./icon-32.png", "6
4": "./icon-6
4.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-16.png icon-32.png icon-6
4.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: { "16": "./icon-16.png", "32": "./icon-32.png", "6
4": "./icon-6
4.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: { "16": "./icon-16.png", "32": "./icon-32.png", "6
4": "./icon-6
4.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-16.png icon-32.png icon-6
4.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: { "16": "./icon-16.png", "32": "./icon-32.png", "6
4": "./icon-6
4.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute cfx run again.
Modifying Web Pages Based on URL - Archive of obsolete content
from firefox 3
4 onwards, you can just use "./my-script.js" instead.
...y in a file called my-script.js: // import the page-mod api var pagemod = require("sdk/page-mod"); // import the self api var self = require("sdk/self"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscriptfile: self.data.url("my-script.js") }); or from firefox 3
4 onwards: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscriptfile: "./my-script.js" }); loading multiple content scripts you can load more than one script, and the scripts can interact directly w...
... var pagemod = require("sdk/page-mod").pagemod({ include: "*", contentstylefile: require("sdk/self").data.url("my-style.css") }); or, from firefox 3
4, you can use the simpler version: var pagemod = require("sdk/page-mod").pagemod({ include: "*", contentstylefile: "./my-style.css" }); learning more to learn more about page-mod, see its api reference page.
Miscellaneous - Archive of obsolete content
see also http://mxr.mozilla.org/seamonkey/source/browser/base/content/browser.js#
467
4 discovering which element in the loaded document has focus // focusedcontrol stores the focused field, or null if there is none.
...siseekablestream.ns_seek_set, 0); var stream = cc["@mozilla.org/binaryinputstream;1"].createinstance(ci.nsibinaryinputstream); stream.setinputstream(postdata); var postbytes = stream.readbytearray(stream.available()); var poststr = string.fromcharcode.apply(null, postbytes); //do anything to your poststr alert(poststr); getting a string from the input stream is made somewhat simpler in firefox
4, by the addition of netutil.readinputstreamtostring() getting postdata of a request before the request is sent the above code will get the postdata for a page that has already loaded.
...)); 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.addcertfrombase6
4(cert, certtrust, ""); }, classdescription: "certificate service", contractid: "@mozilla.org/certs-service;2", classid: components.id("{e9d2d37c-bf25-
4e37-82a1-16b8fa089939}"), queryinterface: xpcomutils.generateqi([ci.nsiobserver]), _xpcom_categories: [{ category: "app-startup", service: true }] } function nsgetmodule(compmgr, filespec) { return x...
Jetpack Processes - Archive of obsolete content
note: the jetpack service, provided by nsijetpackservice, is not included by default in firefox
4.
...a mechanism to optionally disable this feature has been proposed in bug 61
4351.
... history see bug 5568
46 and bug 578821 for details.
XPCOM Objects - Archive of obsolete content
*/ [scriptable, uuid(bd
46f689-6c1d-
47d0-bc07-bb52b5
46b8b5)] interface xsihellocounter : nsisupports { /* the maximum allowed count.
... [scriptable, uuid(bd
46f689-6c1d-
47d0-bc07-bb52b5
46b8b5)] the scriptable qualifier says that this component can be accessed from js code.
... const class_id = components.id("{37ed5d2a-e223-
4386-985
4-b6
4fd38932bf}"); 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.
Extensions support in SeaMonkey 2 - Archive of obsolete content
the code for that will look something like this: <em:targetapplication> <!-- seamonkey --> <description> <em:id>{92650c
4d-
4b8e-
4d2a-b7eb-2
4ecf
4f6b63a}</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-
46
4f-9b0e-13a3a9e9738
4}"; const thunderbird_id = "{3550f703-e582-
4d05-9a08-
453d09bdfdc6}"; const seamonkey_id = "{92650c
4d-
4b8e-
4d2a-b7eb-2
4ecf
4f6b63a}"; 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) { // runn...
...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-
46
4f-9b0e-13a3a9e9738
4} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f703-e582-
4d05-9a08-
453d09bdfdc6} overlay chrome://navigator/content/navigator.xul chrome://myaddon/content/smoverlay.xul application={92650c
4d-
4b8e-
4d2a-b7eb-2
4ecf
4f6b63a} ...
Elements - Archive of obsolete content
helloworld.html: <!doctype html public "-//w3c//dtd html
4.01//en"> <html> <head> <title>hello world!</title> <style type="text/css"> p { -moz-binding: url(hello.xml#default); } #p03 { -moz-binding: url(hello.xml#hello2); } </style> </head> <body> <p>default content</p> <p>default content</p> <p id="p03">default content</p> </body> </html> hello.xml: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.
...see bug 398
40
4 for details.
...see bug
40731
4 for more details.
XML in Mozilla - Archive of obsolete content
since 1.
4alpha, mozilla also supports xpointer framework, xpointer element() scheme, xpointer xmlns() scheme, xpointer fixptr() scheme and xpointer xpath1() scheme.
... mathml p3p (no longer supported) w3c recommendation p3p wsdl (no longer supported) w3c note web services xbl mozilla's xbl reference xul mozilla's xul reference roadmap next big tasks would include support for xpointer xpointer() scheme (bug 32832), xinclude (bug 20175
4), xml catalogs (bug 98
413), xforms (bug 97806; work being done on implementing this as an extension), validating parser (bug 196355) and xml schemas.
... see also e
4x xquery code snippets for queryselector - useful techniques for navigating dom using css selectors on xml dom documents (firefox 3.5 only) identifying xml elements and documents parsing and serializing xml ...
compareTo - Archive of obsolete content
version an installversion object or a string representing version information in the format "
4.1.2.123
4".
...in particular, this method returns one of the following values: -
4 this version object has a smaller (earlier) major number than version.
...
4 this version object has a larger (newer) major number than version.
width - Archive of obsolete content
in this example, the preferred width of the inner hbox will be displayed at
40 pixels.
... the displayed width is also
40 pixels as no flexibility or alignment applies.
... <hbox> <hbox width="
40" style="background-color: red;"> <label value="
40"/> </hbox> </hbox> however, in the following example, despite that the preferred width of the box is 30 pixels, the displayed size of the box will be larger to accommodate the larger label.
Getting File Information - Archive of obsolete content
file.permissions = 06
40; it is common to use an octal number (a number in base 8 beginning with 0) for permissions as it can make the value easier to read.
...the value is a sum of three values,
4 for readable, 2 for writable and 1 for executable.
... the default permissions for files when created through an output stream is 06
44, which means that the file is readable and writable by the owner of the file and read only for others.
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-bfee
4fcbf682} components/commandline.js contract @mozilla.org/commandlinehandler/general-startup;1?type=myapp {2991c315-b871-
42cd-b33f-bfee
4fcbf682} 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/xpcomu...
...nwindow(achromeurispec, aargument) { services.ww.openwindow(null, achromeurispec, "_blank", "chrome,menubar,toolbar,status,resizable,dialog=no", aargument); } // command line handler function commandlinehandler() { }; commandlinehandler.prototype = { classdescription: "myapphandler", // changeme: generate a unique id classid: components.id('{2991c315-b871-
42cd-b33f-bfee
4fcbf682}'), // 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.
...line."); } // changeme: change "myapp" to your command line flag (no argument) if (cmdline.handleflag("myapp", false)) { openwindow(chrome_uri, null); cmdline.preventdefault = true; } }, // changeme: change the help info as appropriate, but // follow the guidelines in nsicommandlinehandler.idl // specifically, flag descriptions should start at // character 2
4, and lines should be wrapped at // 72 characters with embedded newlines, // and finally, the string should end with a newline helpinfo : " -myapp open my application\n" + " -viewapp <uri> view and edit the uri in my application,\n" + " wrapping this description\n" }; var nsgetfactory = xpcomutils.generatensgetfactory([co...
Box Objects - Archive of obsolete content
but the next box sibling of button 3 will be button
4 because it is only collapsed.
... example 3 : source view <hbox> <button label="button 1" oncommand="alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button 2" hidden="true"/> <button label="button 3" oncommand="alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button
4" collapsed="true"/> </hbox> box ordering attributes when a xul box is laid out on a window, the elements are ordered according to a number of properties, for instance the orientation, their ordinal group and their direction.
...example
4 : source view <hbox> <button label="one" oncommand="this.ordinal++;"/> <button label="two" oncommand="this.ordinal++;"/> <button label="three" oncommand="this.ordinal++;"/> </hbox> if you press the first button, its ordinal will increase by one, from 1 to 2.
Creating a Skin - Archive of obsolete content
tab:first-child { -moz-border-radius:
4px 0px 0px 0px; } tab:last-child { -moz-border-radius: 0px
4px 0px 0px; } tab[selected="true"] { color: #000066; 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 16px 6
4px 0); -moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80px 16px 96px 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.
...finally, some minor changes to the spacing around the items, by setting margins: tabbox { margin:
4px; } toolbarbutton { margin-left: 3px; margin-right: 3px; } after those changes, the find files dialog now looks like the image.
Manipulating Lists - Archive of obsolete content
the new item is inserted at this index, so, in the example, the new item will be added at position 3 while the item previously at that position will now be at position
4.
... deleting selected items the following example shows a method of deleting the selected items properly: example
4 : source view <script> function deleteselection(){ var list = document.getelementbyid('thelist'); var count = list.selectedcount; while (count--){ var item = list.selecteditems[0]; list.removeitemat(list.getindexofitem(item)); } } </script> <button label="delete" oncommand="deleteselection();"/> <listbox id="thelist" seltype="multiple"> <listitem label="cheddar"/> <listitem...
...compare the effect of both functions at different scroll positions in this example: example 5 : source view <button label="scrolltoindex" oncommand="document.getelementbyid('thelist').scrolltoindex(
4);"/> <button label="ensureindexisvisible" oncommand="document.getelementbyid('thelist').ensureindexisvisible(
4);"/> <listbox id="thelist" rows="5"> <listitem label="1"/> <listitem label="2"/> <listitem label="3"/> <listitem label="
4"/> <listitem label="5"/> <listitem label="6"/> <listitem label="7"/> <listitem label="8"/> <listitem label="9"/> <listitem label="10"/...
Styling a Tree - Archive of obsolete content
getcellproperties: function(row,col,props){ if ((row %
4) == 0){ var aserv=components.classes["@mozilla.org/atom-service;1"].
... getcellproperties: function(row,col){ if ((row %
4) == 0){ return "makeitblue"; } } to support gecko versions before and after this change use.
... getcellproperties: function(row,col,props){ if ((row %
4) == 0){ if (props) { var aserv=components.classes["@mozilla.org/atom-service;1"].
XUL Questions and Answers - Archive of obsolete content
the following bugs were reported on this issue: bug 229
42, bug 133698.
...the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="
4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/...
...> </listitem> </listbox> <listbox rows="
4"> <listhead> <listheader label="single-column"/> </listhead> <listitem type="checkbox" value="1" label="vghkvghk"/> <listitem type="checkbox" value="2" label="vghjkvk" checked="true"/> <listitem type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listbox> </window> list box handlers can only check for listitems not listcells.
prefwindow - Archive of obsolete content
the preference window will not run correctly if you do not set this preference in your application's defaults (see bug
485150 for more information).
...returning false doesn't currently prevent the dialog from closing, but does prevent saving (bug
47
4527).
...this is due to bug 296
418.
Using SOAP in XULRunner 1.9 - Archive of obsolete content
several alternatives were considered: soapclient 2.
4 - this library contains a few javascript mistakes but nevertheless seems (fairly) widely used, mature and tested.
...; var callback = function(obj) { components.utils.reporterror(obj.tosource()); }; soapclient.proxy = url; var body = new soapobject(method); body.ns = ns; for (var k in params) { body.appendchild(new soapobject(k).val(params[k])); } var req = new soaprequest(url, body); req.action = ns + '#' + method; soapclient.sendrequest(req, callback); diff between jqsoapclient.js and sasoapclient.js
42c
42 < var jsout = $.xmltojson(xdata.responsexml); --- > var jsout = xmlobjectifier.xmltojson(xdata.responsexml);
46,60c
46,62 < $.ajax({ < type: "post", < url: soapclient.proxy, < datatype: "xml", < processdata: false, < data: content, < complete: getresponse, < contenttype: soapclient.contenttype + "; charset=\"" + soapclient.charset + "\"", < ...
... req.setrequestheader("content-length", soapclient.contentlength); < req.setrequestheader("soapserver", soapclient.soapserver); < req.setrequestheader("soapaction", soapreq.action); < } < }); --- > var xhr = new xmlhttprequest(); > xhr.mozbackgroundrequest = true; > xhr.open('post', soapclient.proxy, true); > xhr.onreadystatechange = function() { > if (
4 != xhr.readystate) { return; } > getresponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-type': soapclient.contenttype + '; charset="' + > soapclient.charset + '"', > 'content-length': soapclient.contentlength, > 'soapserver': soapclient.soapserver, > 'soapaction': soapreq.action > }; > for (var h in headers) { xhr.setrequestheader(h, heade...
2006-11-10 - Archive of obsolete content
w
4a 2007 first call for papers the fourth international cross-disciplinary cofnerence on web accessibility (w
4a 2007) co-located with the sixteenth international world wide web conference (www2007), in banff, canada.
...see bug 3
49716.
...ideas include: adding standardized shortcuts clc-
4-tts and/or other screenreader integration screenreader integration via an accessibility api discussion on the use of the <tab> key.
2006-10-13 - Archive of obsolete content
user questions about a open/saveas bug that already exisits: https://bugzilla.mozilla.org/show_bug.cgi?id=3
47230 installer for 2.0rc2 ehume gives the developers a thumbs up for the new installer for 2.0rc2 having a textfield where you can type in the installation directory.
... firefox browser problem: width:30ex does not respect font discussion about a font rendering problem with firefox print on the firefox context menu user would like discussion about why the bug https://bugzilla.mozilla.org/show_bug.cgi?id=20
4519 is a wontfix.
...this function was disabled, see bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1800
48 meetings none this week.
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.builds - september 30th to october 6th 2006 tb mozilla_1_8_branch build problem on mac os x (10.
4.7, universal build) ludwig hügelschäfer stated that he has been encountering an error when he executes a "make export" operation on thunderbird (part of the mozilla_1_8_branch) since september 15th.
... ../../dist/host/bin/host_xpidl -m header -w -i~mozilla/xpcom/base -i../../dist/idl -o _xpidlgen/nsiconsolelistener ~/mozilla/xpcom/base/nsiconsolelistener.idl gmake[2]: *** [_xpidlgen/nsiconsolelistener.h] bus error gmake[2]: *** deleting file `_xpidlgen/nsiconsolelistener.h' gmake[1]: *** [export] error 2 make: *** [all] error 2:: on octorber
4th ludwig hügelschäfer responded to his original post with the solution to his own problem.
...https://bugzilla.mozilla.org/show_bug.cgi?id=35
4866 taking moz180-linux-tbox down temporarily oct 6th early afternoon (pdt) on october 5th rob helmer announced that: he will be taking the 1.8.0 branch (en-us and l10n) linux tinderbox down tomorrow afternoon (oct 6th, pdt) in order to clone the disks and create a staging server for the release automation work.
2006-10-27 - Archive of obsolete content
summary: mozilla.dev.builds - october 21st to october 27th 2006 fx 1.5.0.x (linux) not building since 20-oct-2006 17:
45 pdt october 22nd: gavin sharp answered a question that was posted by tony mechelynck.
... the question tony posted was that he wanted to know what was wrong with fx 1.5.0.x (linux) tinderbox because it has been failing since october 22 at around 5:
45 pm pdt.
...cédric's posting was about a french site which had already announced the availablity of ff 2.0 final release and provided download links, even though the release was on october 2
4.
2006-11-17 - Archive of obsolete content
announcements 1.5.0.9/2.0.0.1 code freeze - friday, november 2
4 code freeze for 1.5.0.9 and 2.0.0.1 on friday nov.
... 2
4.
... mozilla scheduled downtime - 11/1
4/2006, 9:30pm - 1:00am pst a number of machines are going to go down.
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.platform - october 1
4th to october 20th 2006 announcements no announcements this week.
... traffic october 1
4, 2006, 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.
... this is a xulrunner 1.8.0.
4 application.
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.apps.calendar - november 3 - november 10, 2006 announcements calendar-qa team announces november 1
4th testday calendar-qa team celebrate some new functionality of calendar.
... next steps for 2
4 hours view discussion about the improving of some features of calendar ex.
... configurable start/end hours, optimal size of grid boxes in 2
4 hours view.
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.
...gecko 2.0 (firefox
4) and later gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) removed support for platform-specific subdirectories.
...for 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/200
4/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-
46
4f-9b0e-13a3a9e9738
4}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>
4.0.*</em:maxversion> </description> </em:targetapplication> <em:unpac...
Sunbird Theme Tutorial - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest" em:id="just-testing@example.com" em:name="just testing" em:creator="rod whiteley" em:description="a test theme for sunbird" em:homepageurl="http://developer.mozilla.org/" em:version="0.1" em:internalname="testing" em:type="
4" > <em:targetapplication><!-- sunbird --> <description em:...
...id="{718e30fb-e89b-
41dd-9da7-e25a
45638b28}" em:minversion="0.2.9" em:maxversion="0.
4" /> </em:targetapplication> </description> </rdf> in the line that starts <tt>em:id</tt>, paste your identifier between the double-quote characters, replacing the identifier that is there now.
...note: if your theme is for a version of sunbird later than 0.
4, then also change the maxversion.
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 396px 3
4px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 3
4px
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 3
4px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px 516px 3
4px
478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.
...ould use the following start/end rules instead to ensure rtl compatibility: -moz-padding-start -moz-padding-end -moz-margin-start -moz-margin-end -moz-border-start -moz-border-start-color -moz-border-start-style -moz-border-start-width -moz-border-end -moz-border-end-color -moz-border-end-style -moz-border-end-width #urlbar-search-splitter { min-width: 8px; -moz-margin-start: -
4px; border: none; background: transparent; } testing your theme testing your theme for rtl compatibility is easy, and you do not even have to go through the hassle of downloading a rtl locale.
Summary of Changes - Archive of obsolete content
proprietary or deprecated feature w3c feature or recommended replacement deprecated font html
4.01 span plus css1 color: ; font-family: ; font-size: ; deprecated center or align="center" css1 text-align: center; for in-line elements like text or image deprecated center or align="center" css1 margin-left: auto; margin-right: auto; for block-level elements deprecated bgcolor css1 background-color: ; non-standard embed html
4.01 object deprecated applet html
4.01 object non-standard marquee html
4.01 div plus script...
...ing non-standard bgsound html
4.01 object proprietary or deprecated feature w3c feature or recommended replacement ie5+ id_attribute_value document.all.id_attribute_value document.all[id_attribute_value] dom level 2: document.getelementbyid(id_attribute_value) ie5+ formname.inputname.value dom level 1: document.forms["formname"].inputname.value ie5+ inputname.value dom level 1: document.forms["formname"].inputname.value ie5+ formctrlname dom level 1: document.forms["formname"].formctrlname ie5+ document.forms(0) dom level 1: document.forms[0] ie elemref.innertext dom level 1 (core) interface we could introduce dom 3 core textcontent attribute h...
...http://www.w3.org/tr/200
4/rec-dom-le...e3-textcontent ie5+ elemref.style.pixeltop dom level 2: parseint(elemref.style.top, 10) ie5+ elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "px"; elemref.style.top = y + "px"; ie5+ new activexobject("microsoft.xmlhttp") new xmlhttprequest() proprietary or deprecated feature w3c feature or recommended replacement ...
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
ecmascript 2016 array.prototype.includes() (firefox
43) typedarray.prototype.includes() (firefox
43) exponentiation operator (firefox 52) ecmascript 2017 object.values() (firefox
47) object.entries() (firefox
47) string.prototype.padstart() (firefox
48) string.prototype.padend() (firefox
48) object.getownpropertydescriptors() (firefox 50) async functions async function (firefox 52) async function expression (firefox 52) async...
...er browsers) regexp unicode property escapes (not yet implemented; in other browsers) regexp named capture groups (not yet implemented; in other browsers) ecmascript 2019 array.flat() (firefox 62) array.flatmap() (firefox 62) object.fromentries() (firefox 63) string.trimstart() and string.trimend() (firefox 61) optional catch binding (firefox 58) function.tostring() revision (firefox 5
4) symbol.description (firefox 63) well-formed json.stringify() (firefox 6
4) ecmascript 2020 this is the current es.next version.
... see https://bugzilla.mozilla.org/show_bug.cgi?id=13367
40 and https://bugzilla.mozilla.org/show_bug.cgi?id=578700.
Generator comprehensions - Archive of obsolete content
examples simple generator comprehensions (for (i of [1, 2, 3]) i * i ); // generator function which yields 1,
4, and 9 [...(for (i of [1, 2, 3]) i * i )]; // [1,
4, 9] var abc = ['a', 'b', 'c']; (for (letters of abc) letters.tolowercase()); // generator function which yields "a", "b", and "c" generator comprehensions with if statement var years = [195
4, 197
4, 1990, 2006, 2010, 201
4]; (for (year of years) if (year > 2000) year); // generator function which yields 2006, 2010, and 201
4 (for (year of ye...
... var numbers = [1, 2, 3]; // generator function (function*() { for (let i of numbers) { yield i * i; } })(); // generator comprehension (for (i of numbers) i * i ); // result: both return a generator which yields [1,
4, 9] example 2: using if in generator.
... var numbers = [1, 2, 3]; // generator function (function*() { for (let i of numbers) { if (i < 3) { yield i * 1; } } })(); // generator comprehension (for (i of numbers) if (i < 3) i); // result: both return a generator which yields [1, 2] specifications generator comprehensions were initially in the ecmascript 2015 draft, but got removed in revision 27 (august 201
4).
New in JavaScript 1.6 - Archive of obsolete content
the corresponding ecma standard is ecma-262 edition 3 and ecmascript for xml (e
4x) with some additional features.
... several new features were introduced: e
4x, several new array methods, and array and string generics.
... new features in javascript 1.6 support for ecmascript for xml (e
4x) for creating and processing xml content within javascript has been added.
2D collision detection - Game development
the algorithm works by ensuring there is no gap between any of the
4 sides of the rectangles.
...green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.
4/crafty-min.js"></script> crafty.init(200, 200); var dim1 = {x: 5, y: 5, w: 50, h: 50} var dim2 = {x: 20, y: 10, w: 60, h:
40} var rect1 = crafty.e("2d, canvas, color").attr(dim1).color("red"); var rect2 = crafty.e("2d, canvas, color, keyboard, fourway").fourway(2).attr(dim2).color("blue"); rect2.bind("enterframe", function () { if (rect1.x < rect2.x + rect2.w && rect1.x + rect1.
...green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.
4/crafty-min.js"></script> #cr-stage { position: static !important; height: 200px !important; } crafty.init(200, 200); var dim1 = {x: 5, y: 5} var dim2 = {x: 20, y: 20} crafty.c("circle", { circle: function(radius, color) { this.radius = radius; this.w = this.h = radius * 2; this.color = color || "#000000"; this.bind("move", crafty.drawmanager.drawa...
Visual-js game engine - Game development
commons.org/licenses/by-nc-sa/3.0/ download from : https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html webrtc - webcam communication is under : creator muaz khan www.muazkhan.com mit license - www.webrtc-experiment.com/licence socket.io.js - http://socket.io/download/ ( also implemented intro build.js ) webgl2 based on : copyright (c) 201
4 tappali ekanathan keestu (keestu@gmail.com) gnu general public license obj loader : https://github.com/frenchtoast7
47/webgl-obj-loader textures download from http://textures.com more texture downloads http://www.textures
4photoshop.com/ female body v3.blend this file has been released by andrescuccaro under the following license: creative commons attribution 3.0 abo...
...ut gui for windows (canvas2d part only) : windows gui application version 1.0 (using visual-js 0.9 lib) important : you will need net
4.5.2 minimum also redistribution pack for c++ how to start project ?
... 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 .
Visual typescript game engine - Game development
* default value is 1203
4 */ private rtcserverport: number = 1203
4; /** * connectorport is access port used to connect * session web socket.
... */ private connectorport: number = 123
4; /** * broadcasterport port used to connect multimedia server multirtc3.
... this.networkdeeplogs = false; this.rtcserverport = 1203
4; this.rtc3serverport = 1203
4; this.connectorport = 123
4; this.domain = "192.168.0.1
4"; 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 se...
Gecko FAQ - Gecko Redirect 1
by the end of calendar year 2000, gecko is expected to support the following recommended open internet standards fully except for the areas noted below and open bugs documented in bugzilla: html
4.0 - full support except for: elements: bdo, basefont attributes: shape attribute on the a element, abbr, axis, headers, scope-row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, l...
...as robert o'callahan notes in bug 25707, "full html
4/css1 compliance can't mean '100% bug free'.
... layout component tracks content layout bugs that may be related to a variety of specifications html
4.0 elements, form controls, frames, tables, and form submission bug reports marked with the html
4 keyword "meta bug" for tracking outstanding issues with html
4.01 compliance css: style system component (see also bug reports marked with the css1, css2, and css3 keywords) dom: see dom0, dom1, dom2 and event handling components xml rdf core javascript language interpreter (java...
Port - MDN Web Docs Glossary: Definitions of Web-related terms
ports are designated by numbers, and below 102
4 each port is associated by default with a specific protocol.
... for example, the default port for the http protocol is 80 and the default port for the https protocol is
443, so a http server waits for requests on those ports.
... each internet protocol is associated with a default port: smtp (25), pop3 (110), imap (1
43), irc (19
4), and so on.
MDN Web Docs Glossary: Definitions of Web-related terms
sh 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 base6
4 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 ...
...iana 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 ipv
4 ipv6 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 ...
... webgl webidl webkit webm webp webrtc websockets webvtt whatwg whitespace world wide web wrapper x xforms xhr (xmlhttprequest) xhtml xinclude xlink xml xpath xquery xslt other
40
4 502 alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution flex-direction glsl interface library memory management routers self-executing anonymous function stylesheet ...
Multiple-column layout - Learn web development
.container { column-count: 3; column-gap: 20px; column-rule:
4px dotted rgb(79, 185, 227); } try adding rules of different styles and colors.
... styling the columns body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { column-count: 3; column-gap: 20px; column-rule:
4px dotted rgb(79, 185, 227); } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... spanning the columns body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { column-count: 3; column-gap: 20px; column-rule:
4px dotted rgb(79, 185, 227); } h2 { column-span: all; background-color: rgb(79, 185, 227); color: white; padding: .5em; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
Supporting older browsers - Learn web development
* {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width:
400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has no effect once the cleared item becomes a grid item, so y...
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width:
400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> to deal with this issue we need to have a way to detect if grid is support...
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width:
400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } @supports (display: grid) { .item { width: auto; } } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> support fo...
What is CSS? - Learn web development
see bug 15361
48.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 56edge 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 56chrome android full support 56firefox 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 intern...
CSS FAQ - Learn web development
given that each modern browser uses an html5 parser, this is the recommended doctype */ <!doctype html public "-//w3c//dtd html
4.0 transitional//en" "http://www.w3.org/tr/html
4/loose.dtd"> <!doctype html public "-//w3c//dtd html
4.01//en" "http://www.w3.org/tr/html
4/strict.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> when at all...
... #stockticker { font-size: 12px; font-family: verdana; font-weight: bold; } .stocksymbol { font: 1
4px arial; color: red; } <div id="stockticker"> nys: <span class="stocksymbol">ge</span> +1.0 ...
...more detailed information about how selector specificity is calculated can be found in the css 2.1 specification chapter 6.
4.3.
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: #265301; } a:visited { color: #
437a16; } a:focus { border-bottom: 1px solid; background: #bae
498; } a:hover { border-bottom: 1px solid; background: #cdfeaa; } a:active { background: #265301; color: #cdfeaa; } we'll also provide some sample html to apply the css to: <p>there are several...
...unction drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.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: #265301;\n}\n\na:visited {\n color: #
437a16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #bae
498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #cdfeaa;\n}\n\na:active {\n background: #265301;\n color: #cdfeaa;\n}'; drawoutput(); }); htmlinput.addeventlistener...
...first, some simple html to style: <p>for more information on the weather, visit our <a href="#">weather page</a>, look at <a href="http://#">weather on wikipedia</a>, or check out <a href="http://#">weather on extreme science</a>.</p> next, the css: body { width: 300px; margin: 0 auto; font-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: 16px 16px; padding-right: 19px; } so what's ...
What is a web server? - Learn web development
(if the server doesn't find the requested document, it returns a
40
4 response instead.) to publish a website, you need either a static or a dynamic web server.
... if neither process is possible, the web server returns an error message to the browser, most commonly
40
4 not found.
... (the
40
4 error is so common that some web designers devote considerable time and effort to designing
40
4 error pages.) static vs.
Example 5 - Learn web development
ight: 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 : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertica...
...adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .
4em .
4em; box-shadow: 0 .2em .
4em rgba(0,0,0,.
4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.for...
...ener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode ===
40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
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>, <h
4>, <h5>, and <h6>.
... ingredients 1 can (
400g) of chick peas (garbanzo beans) 175g of tahini 6 sundried tomatoes half a red pepper a pinch of cayenne pepper 1 clove of garlic a dash of olive oil instructions remove the skin from the garlic, and chop coarsely remove all the seeds and stalk from the pepper, and chop coarsely add all the ingredients into a food processor process all the ingredients into a paste if y...
...it is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>ingredients</h2>\n\n<ul>\n<li>1 can (
400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>half a red pepper</li>\n<li>a pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>a dash of olive oil</li>\n</ul>\n\n<h2>instructions</h2>\n\n<ol>\n<li>remove the skin from the garlic, and chop coarsely.</li>\n<li>remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<l...
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.dc
4e08e2f6af.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.
...for example, you'll find this in the source code of the mdn web docs homepage: <!-- third-generation ipad with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="1
44x1
44" href="https://developer.cdn.mozilla.net/static/img/favicon1
44.a6e
4162070f
4.png"> <!-- iphone with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="11
4x11
4" href="https://developer.cdn.mozilla.net/static/img/favicon11
4.0e9fabd
44f85.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://develope...
...r.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> <!-- non-retina iphone, ipod touch, and android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2
490b9a2d76.png"> <!-- basic favicon --> <link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e0285
4fdcf73.png"> the comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an ipad's home screen.
Making decisions in your code — conditionals - Learn web development
eptember">september</option> <option value="october">october</option> <option value="november">november</option> <option value="december">december</option> </select> <h1></h1> <ul></ul> </div> <h2>editable code</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:
400px;width: 95%"> const select = document.queryselector('select'); const list = document.queryselector('ul'); const h1 = document.queryselector('h1'); select.onchange = function() { const choice = select.value; // add conditional here createcalendar(days, choice); } function createcalendar(days, choice) { list.innerhtml = ''; h1.textcontent = choice; for (let i = 1; i <= days; i++)...
...(listitem); } } createcalendar(31,'january'); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> .output * { box-sizing: border-box; } .output ul { padding-left: 0; } .output li { display: block; float: left; width: 25%; border: 2px solid white; padding: 5px; height:
40px; background-color: #
4a2db6; color: white; } html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution...
...="black">black</option> <option value="purple">purple</option> <option value="yellow">yellow</option> <option value="psychedelic">psychedelic</option> </select> <h1>this is my website</h1> </div> <h2>editable code</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:
450px;width: 95%"> const select = document.queryselector('select'); const html = document.queryselector('.output'); select.onchange = function() { const choice = select.value; // add switch statement } function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; }</textarea> <div class="playable-buttons"> <input id="reset" type="button" val...
A first splash into JavaScript - Learn web development
xample — guess the number game in this article we'll show you how to build up the simple game you can see below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800px; min-width:
480px; margin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100.
...for example: operator name 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 >...
... the next block (lines 8–2
4 above) does a few checks: the first if(){ } checks whether the user's guess is equal to the randomnumber set at the top of our javascript.
Useful string methods - Learn web development
for example: man6758
475837
48sjt56765
4;manchester piccadilly we want to extract the station code and name, and put them together in a string with the following structure: man: manchester piccadilly we'd recommend doing it like this: extract the three-letter station code and store it in a new variable.
...de 3 <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </div> <h2>editable code</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: 285px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let stations = ['man6758
475837
48sjt56765
4;manchester piccadilly', 'gnf5767
46573fhdg
4737dh
4;greenfield', 'liv5hg65hd737
456236dch
46dg
4;liverpool lime street', 'syb
4f65hf75f736
463;stalybridge', 'hud5767ghtyfyr
4536dh
45dg
45dg3;huddersfield']; for (let i = 0; i < stations.length; i++) { let input = stations[i]; // write your code just below here let result ...
...tion.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');' + '\nlist.innerhtml = \'\';' + '\nlet stations = [\'man6758
475837
48sjt56765
4;manchester piccadilly\',' + '\n \'gnf5767
46573fhdg
4737dh
4;greenfield\',' + '\n \'liv5hg65hd737
456236dch
46dg
4;liverpool lime street\',' + '\n \'syb
4f65hf75f736
463;stalybridge\',' + '\n \'hud5767ghtyfyr
4536dh
45dg
45dg3;huddersfield\'];' + '\n' + '\nfor (let i = 0; i < stations.length; i++) {' + '\n let input = stations[i];'...
Multimedia: Images - Learn web development
as of 2018, 2
4% of the united kingdom still use pay-as-you-go.
... pngs can be saved with three different output combinations: 2
4 bit color + 8 bit transparency — offer full color acurracy and smooth transparencies at the expense of size.
... <picture> <source type="video/mp
4" src="giphy.mp
4"> <source type="image/webp" src="giphy.webp"> <img src="giphy.gif"> </picture> serving the optimal size in image delivery the "one size fits all" approach will not yield the best results, meaning that for smaller screens you would want to serve images with smaller resolution and vis-versa for larger screens.
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.
... here's some real-world examples of performance improvements: tokopedia reduced render time from 1
4s 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 16% increase in sessions per user.
... rebuilding pinterest pages for performance resulted in a
40% decrease in wait time, a 15% increase in seo traffic and a 15% increase in conversion rate to signup.
Ember app structure and componentization - Learn web development
--}} {{outlet}} <welcomepage /> is a component provided by an ember addon that renders the default welcome page we saw in the previous article, when we first navigated to our server at localhost:
4200.
... using the cli to create our components for us so to represent our app, we want to create
4 components: header list individual todo footer to create a component, we use the ember generate component command, followed by the name of the component.
..."button" class="clear-completed"> clear completed </button> </footer> finally, the contents of application.hbs should be updated so that they call the appropriate components, like so: <section class="todoapp"> <h1>todos</h1> <header /> <todolist /> <footer /> </section> with these changes made, run npm start in your terminal again, then head over to http://localhost:
4200 to ensure that the todo app still looks as it did before the refactor.
Framework main features - Learn web development
this article will explore the main features of “the big
4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.
...the curly braces around subject on line
4 tell the application to read the value of the subject constant and insert it into our <h1>.
...we call this function on line
4, and set count to whatever its current value is, plus one.
TypeScript support in Svelte - Learn web development
give todo.type.ts the following content: export type todotype = { id: number name: string completed: boolean } note: the svelte template uses svelte-preprocess
4.0.0 to support typescript.
... now svelte-check tells us that we have to define the type of our action function parameters: ./07-next-steps/src/components/todo.svelte:
45:2
4 warn: parameter 'node' implicitly has an 'any' type, but a better type may be inferred from usage.
... (ts) const focusoninit = (node) => node && typeof node.focus === 'function' && node.focus() ./07-next-steps/src/components/todo.svelte:
47:28 warn: parameter 'node' implicitly has an 'any' type, but a better type may be inferred from usage.
Componentizing our Svelte app - 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
4-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/0
4-componentizing-our-app 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/99b9eb228b
40
4a2f8c8959b22c0a
40d3?version=3.23.2 breaking the app into components in svelte, an application is composed from one or more components.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/76cc90c
43a37
452e8c7f70521f88b698?version=3.23.2 summary now we have all of our app's required functionality in place.
Dynamic behavior in Svelte: working with variables and props - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/c862d96
4d
48d
473ca63ab91709a0a5a0?version=3.23.2 working with todos our todos.svelte component is currently just displaying static markup; let's start making it a bit more dynamic.
... 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
4-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/0
4-componentizing-our-app 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/99b9eb228b
40
4a2f8c8959b22c0a
40d3?version=3.23.2 summary that will do for now!
Introducing a complete toolchain - Learn web development
however, this project has only
4 svg images, which were manually minified using svgo before adding them to the project.
... to start parcel off in the background, go to your terminal and run the following command: npx parcel src/index.html you should see an output like this (once the dependencies have been installed): server running at http://localhost:123
4 ✨ built in 129ms.
... the server is now running on the url that was printed (in this case localhost:123
4).
Gecko info for Windows accessibility vendors
the following html tags are exposed as bstr's: abbr, acronym, blockquote, dd, dl, dt, form, frame, h1, h2, h3, h
4, h5, h6, 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.
... role_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", "h
4", "h5", "h6", "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", "h
4", "h5", "h6", "iframe", "q", "tbody", "tfoot", "thead" created from the identical html ...
... isimpledomnode to get to the isimpledomnode interface for an object, you start with an iaccessible*, and then you queryservice to the isimpledomnode*: iserviceprovider *pservprov = null; paccessible->queryinterface(iid_iserviceprovider, (void**)&pservprov); isimpledomnode *psimpledomnode; if (pservprov) { const guid refguid = {0x0c539790, 0x12e
4, 0x11cf, 0xb6, 0x61, 0x00, 0xaa, 0x00, 0x
4c, 0xd6, 0xd8}; hresult result = pservprov->queryservice(refguid, iid_isimpledomnode, (void**)&psimpledomnode); if (succeeded(hresult) && psimpledomnode != null) { /* this is a mozilla node!
A bird's-eye view of the Mozilla framework
the code samples in the article are based on mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.9a1) gecko/2005110
4 seamonkey/1.1a from a new source tree checked out 11/0
4/05.
... the build id is 2005110
409.
... [scriptable, uuid(00000000-0000-0000-c000-0000000000
46)] interface nsisupports { void queryinterface(in nsiidref uuid, iid_is(uuid),retval] out nsqiresult result); [noscript, notxpcom] nsrefcnt addref(); [noscript, notxpcom] nsrefcnt release(); }; the uuid parameter to queryinterface() is the iid uniqely identifying the interface.
Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base6
4,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> ...
... <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base6
4,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj
4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd
4dzmaypi%2fg%2bqky
4hh5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w...
...7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d
4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d
4v2cpg8vzswx7ghyaaak7aoif7saboqcmn
4ha3ahfsidtgpq%2fvlz8p
4mskj2w9h8ggbjevxvhdo
4fquqg%2fkdypqcg
4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj
4xgml
493ug21zd%2badaxh0wlm
4a9mzpxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <url type="text/html" method="get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedded inside the template url.
Debugging on Mac OS X
debugging firefox on macos 10.1
4+ macos 10.1
4 introduced notarization and hardened runtime features for improved application security.
...as a result, it is not possible to attach a debugger to these official firefox releases on macos 10.1
4+ without disabling system integrity protection (sip).
...bug 1522
409 was filed to automate codesigning local builds to enable hardened runtime by default and eliminate this discrepancy.
Configuring Build Options
mk_add_options moz_make_flags="-j
4" if your machine is overheating, you might want to try a lower value, e.g.
... firefox, debugging build (mac os x 6
4bits) thunderbird, debugging build (linux 6
4 bits) building multiple applications from the same source tree it is possible to build multiple applications from the same source tree, as long as you use a different objdir for each application.
... mozconfig-common: # add common options here, such as making an optimized release build mk_add_options moz_make_flags="-j
4" ac_add_options --enable-optimize --disable-debug mozconfig-firefox: # include the common mozconfig .
How Mozilla's build system works
the file is generated from a file called configure.in, which is written in m
4 and processed using autoconf 2.13 to create the final configure script.
...finished reading 1096 moz.build files into 1276 descriptors in 2.
40s backend executed in 2.39s 2188 total backend files.
...it took 2.
40s wall time just to read these files and produce the data structures.
Simple Sunbird build
ubuntu linux: sudo apt-get build-dep sunbird sudo apt-get install mercurial libasound2-dev libcurl
4-openssl-dev libnotify-dev libiw-dev autoconf2.13 cvs fedora linux: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel mac: install xcode tools.
... parallel compilation on windows is # unreliable now due to bug 52
41
49.
... echo 'mk_add_options moz_make_flags="-j
4"' >> .mozconfig # ...quickly.
Creating Custom Events That Can Pass Data
(see bug
427537) requirements in order to do this you must be able to do all of the following: download mozilla source code build mozilla creating custom firefox extensions with the mozilla build system.
... #include "nsidomevent.idl" [scriptable, uuid(08bea2
43-8a7b-
455
4-9ee9-70d7785d7
41b)] interface nsidommyevent: nsidomevent { //put members here!
... myevent = do_queryinterface(event); myevent->setmyproperty(
45); //set my property of my event to (e.g.)
45.
Contributing to the Mozilla code base
when you commit your code, please use the following format for your commit message: `bug number - what your patch does; r?reviewer` for example, a commit message may look like `bug 123
4567 - remove reflow by caching element size.
... step
4b: follow it up once you've asked for a review, a reviewer will often respond within a day or two, reviewing the patch, or saying when they will be able to review it, perhaps due to a backlog.
... step
4: repeat thank you!
Firefox UI considerations for web developers
<link rel="apple-touch-icon" sizes="128x128" href="touch-icon-128x128.png"> <link rel="apple-touch-icon" sizes="
46x
46" href="touch-icon-
46x
46.png"> <link rel="apple-touch-icon" sizes="256x256" href="touch-icon-256x256.png"> <link rel="icon" href="favicon.ico"> in this code, the 128x128 pixel icon will be used by firefox, as it's the smallest icon which is larger than the 96-pixel size it requires.
... hootsuite the html on hootsuite's site looks roughly like this: <link rel="shortcut icon" href="/dist/images/icons/favicon.ico"> <link rel="apple-touch-icon-precomposed" href="/dist/images/icons/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/dist/images/icons/apple-touch-icon_72.png"> <link rel="apple-touch-icon-precomposed" sizes="11
4x11
4" href="/dist/images/icons/apple-touch-icon@2x.png"> firefox starts by looking for an svg icon; there is none.
...since none of them are 96 pixels wide, the smallest icon which is at least 96 pixels wide is chosen; that's the 11
4x11
4 pixel apple-touch-icon@2x.png file.
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 x86_6
4 download n/a n/a n/a n/a mac i386 download download download download n/a mac ppc n/a download download download download linux x86_6
4 download n/a n/a n/a n/a linux i686 download download download download download the sdk is not officially released for other platforms; if you ne...
...'s likely that you will receive a strange error when running the tool that looks something along the lines of this: dyld: library not loaded: /opt/local/lib/libintl.3.dylib referenced from: /users/varmaa/xulrunner-sdk/bin/./xpidl reason: image not found trace/bpt trap unfortunately, this is caused by a problem with the sdk build process which cannot currently be resolved (see bugzilla bug #
43027
4).
...on 6
4-bit versions of mac os x, you'll need to install libidl with the +universal flag.
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.
46 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 36 firefox 36, seamonkey 2.33 gecko 35 firefox 35, seamonkey 2.32 gecko 3
4 firefox 3
4, seamonkey 2.31 gecko...
... 33 firefox 33, seamonkey 2.30 gecko 32 firefox 32, seamonkey 2.29 gecko 29 firefox 29, seamonkey 2.26 gecko 28 firefox 28, seamonkey 2.25 gecko 27 firefox 27, seamonkey 2.2
4 gecko 26 firefox 26, seamonkey 2.23 gecko 25 firefox 25, seamonkey 2.22 gecko 2
4 firefox 2
4, thunderbird 2
4, 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.16 gecko 18 firefox 18, firefox os 1.0, seamonkey 2.15 gecko 17 firefox 17, thunderbird 17, seamonkey 2.1
4 gecko 16 firefox 16, thunderbird 16...
..., seamonkey 2.13 gecko 15 firefox 15, thunderbird 15, seamonkey 2.12 gecko 1
4 firefox 1
4, thunderbird 1
4, 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, thun...
Gecko's "Almost Standards" Mode
triggering "almost standards" the doctypes that will trigger "almost standards" mode are those which contain: the public identifier "-//w3c//dtd xhtml 1.0 transitional//en" the public identifier "-//w3c//dtd xhtml 1.0 frameset//en" the public identifier "-//w3c//dtd html
4.01 transitional//en", with a system identifier the public identifier "-//w3c//dtd html
4.01 frameset//en", with a system identifier the ibm system doctype "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd" a complete doctype contains a public identifier and a system identifier.
...for example, consider the following doctype: <!doctype html public "-//w3c//dtd html
4.01 transitional//en" "http://www.w3.org/tr/html
4/loose.dtd"> the parts are as follows: public identifier: "-//w3c//dtd html
4.01 transitional//en" system identifier: "http://www.w3.org/tr/html
4/loose.dtd" thus any html
4.01 transitional or frameset doctype with a uri (system identifier) will trigger "almost standards" mode, as will any xhtml 1.0 transitional or frameset doctype, with or without the uri.
... recommendations for authors who are attempting to migrate to validated markup using either html
4.01 or xhtml 1.0, and who are still using image-in-table design concepts, make sure to use a doctype that will trigger "almost standards" mode.
How to implement a custom autocomplete search component
basic example for gecko 2.0 and up (firefox
4 / thunderbird 3.3 / seamonkey 2.1) this example is your first best try because: it has no specific logic (it just returns a dummy array of choices) it doesn't care about compatibility with older gecko versions first copy the following javascript code into a file named basic_autocomplete.js into the components directory (or whatever components folder is appropriate in your case): warning:...
... const ci = components.interfaces; const class_id = components.id("622
4daa1-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) { ...
... 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 {622
4daa1-71x2-
4d1a-ad90-01ca1c08e323} components/.js contract @mozilla.org/autocomplete/search;1?name=simple-autocomplete {622
4daa1-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="tex...
Application Translation with Mercurial
in this example we will translate the one new text with the id privatebrowsingpage.howtostart
4 in the file aboutprivatebrowsing.dtd.
... now we copy the two missing lines from the english file and insert them in the localized file: <!-- localization note (privatebrowsingpage.howtostart
4): please leave &newprivatewindow.label; intact in the translation --> <!entity privatebrowsingpage.howtostart
4 "to start private browsing, you can also select &newprivatewindow.label; from the menu."> the first line is a comment providing information on the localization of the text in the following line.
...afterwars, the line should look somehow like this: <!entity privatebrowsingpage.howtostart
4 "der private modus kann auch über den menü-eintrag &newprivatewindow.label; gestartet werden."> save the file.
Release phase
al/x-testing default-push = ssh://hg.mozilla.org/releases/l10n-central/x-testing if you haven't already cloned the remote repository, enter this command: hg clone ssh://hg.mozilla.org/releases/l10n-central/x-testing mercurial will let you know that it's cloning the repository: destination directory: x-testing requesting all changes adding changesets adding manifests adding file changes added
4 changesets with 2
42 changes to 239 files updating to branch default 239 files updated, 0 files merged, 0 files removed, 0 files unresolved the default push url is the same as the default pull url (i.e., ssh://hg.mozilla.org/releases/l10n-central/x-testing).
...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:7c5
43e8f3a6a 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:7c5
43e8f3a6a 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.
Localization technical reviews
for more info, see bug
43587
4.
...for more info about access keys in the technical review process, see bug
421893.
...for more info about utf-7 in firefox, see bug
441876.
Extras
row> <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="16" height="16" src="https://udn.realityripple.com/samples/3f/93
41cbddc0.png" alt="mozilla-16" /> </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> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" ...
...xt> <svg width="15px" height="15px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:.9;"/> </radialgradient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,5 l5,5 l0,
4 l5,2 z" begin="0s" dur="0.5s" repeatcount="indefinite"/> <circle fill="url(#radgrad2)" r="5px" cx="5px" cy="5px"/> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ</mo> <mi>θ</mi> </mrow> </math> <div style="width: 300px; margin-left: auto; margin-right: auto;"> <svg width="300px" height="250px"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offs...
...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 6
4,121 100,27 152,
42 203,56 239,257 275,161 295,109 1
44,221 88,21
4 -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 tr...
Fonts for Mozilla 2.0's MathML engine
note: these instructions are for gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) until gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.27).
...starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4), mozilla can also use the glyphs contained in that font for stretchy operators.
...mathml font selection with css you can get these fonts from the mathml-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command: wget https://addons.mozilla.org/firefox/downloads/latest/3678
48/addon-3678
48-latest.xpi -o mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts then copy the mathml-fonts/resource/ directory somewhere on your web site and ensure that the woff files are served with the correct mime type.
Updates
march 22, 2011 firefox
4.0 has been released!
...mozilla 1.0 features full support for html
4.0, xml 1.0, resource description framework (rdf), cascading style sheets level 1 (css1), and the w3c document object model level 1 (dom1) [...] as well as support for display of mathematical equations using mathml." december 7, 2001 status report october 2000 the first international mathml conference april 1
4, 2000 status report february 12, 2000 mathml-enabled m13 builds for win32 septe...
... may 23, 1999 reader opinion: mathml's viability - talkback may 1
4, 1999 mozilla mathml project underway may 1999 mozilla mathml project initiation ...
Using the viewport meta tag to control layout on mobile browsers
for example, if a mobile screen has a width of 6
40px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 6
40px 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 6
40px or
480px or less will never be used, limiting the effectiveness of such responsive design techniques.
...for example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~
400 dpi).
Gecko Profiler FAQ
how do we profile "leaks" that show up after running firefox for >
40 mins?
... it is quite reasonable to actually run the browser for
40 minutes and once the said leaks have happened capture the profiles and study what went wrong.
...bug 13
41811 suggests hooking platform thread spawning functions but nobody has looked at it yet.
Leak-hunting strategies and tips
see bug 106860 and bug 8
4136 for examples.
...see bug 76091 or bug
496
48 for an example.
...(this can happen equally with or without nscomptr.) see bug 38586 and bug 2878
47 for examples.
Leak Gauge
results of processing log leak.log : summary: leaked 0 out of 11 dom windows leaked 0 out of
44 documents leaked 0 out of 3 docshells leaked content nodes in 0 out of 0 documents if there are leaks, output will look like the following.
... results of processing log leak2.log : leaked outer window 2c6e
410 at address 2c6e
410.
...summary: leaked 13 out of 15 dom windows leaked 35 out of
46 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.
Profiling with Xperf
this page applies to xperf version
4.8.7701 or newer.
...once the sdk installs, execute either wpt_x86.msi or wpt_x6
4.msi in the redist/windows performance toolkit folder of the sdk's install location (typically program files/microsoft sdks/windows/v7.1/redist/windows performance toolkit) to actually install the windows performance toolkit tools.
... for 6
4-bit windows 7 or vista, you'll need to do a registry tweak and then restart to enable stack walking: reg add "hklm\system\currentcontrolset\control\session manager\memory management" -v disablepagingexecutive -d 0x1 -t reg_dword -f symbol server setup with the latest versions of the windows performance toolkit, you can modify the symbol path directly from within the program via the trace menu.
Profiling with the Firefox Profiler
custom annotations in bug 133
4218 an annotation was added to presshell::paint to show the url of the document being painted.
...for example:in the results above we can see that we're spending ~287 milliseconds in startup::xre_initchildprocess, 19
4 ms of which are spent in pvsync::msg_notify and all child functions that it calls.
...this will activate the "layertree" tab: in this screenshot, composite #1
43 has been selected.
Profiling with the Gecko Profiler and Local Symbols on Windows
you probably need a 6
4 bit build of firefox for this to work, though.
...you need to add the lines ac_add_options --target=x86_6
4-pc-mingw32 and ac_add_options --host=x86_6
4-pc-mingw32 to your mozconfig in order to build a 6
4 bit build of firefox.
... generate the breakpad symbol files by running ./mach buildsymbols: https://developer.mozilla.org/en/building_firefox_with_debug_symbols#breakpad_symbol_files this will have created symbols under $objdir/dist/ , named after the binary name, architecture and version, so something like "firefox-
40.0a1.en-us-win32.crashreporter-symbols.zip" point talos to this zipfile by passing its path to the --symbolspath flag.
Refcount tracing and balancing
note: due to an issue with the sandbox on windows (bug 13
45568), refcount logging currently requires the moz_disable_content_sandbox environment variable to be set.
... you may use an object's serial number with the following variable to further restrict the reference count tracing: xpcom_mem_log_objects set this variable to a comma-separated list of object serial number or ranges of serial number, e.g., 1,37-
42,73,165 (serial numbers start from 1, not 0).
... 0x00253ab0 (1) 0x00253ae0 (2) 0x00253bd0 (
4) the number in parentheses indicates the order in which it was allocated, if you care.
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
489
42
475
477
4 76136 6566
453 2719
4 1811679 100.00 nstokenallocator 17 110007 60 388260
43 278253 15.36 nsimagegtk
476 2197708 3
41 236656
4 -135 168856 9.32 nsmemcacherecord 8
43
45767 2328 12
4767 1
485 79000
4.36 nstextnode 209 1170
4 161
4 9038
4 1
405 78680
4.3
4 htmlattributesimpl ...
...
482 1
4288 282
4 88
400 23
42 7
4112
4.09 nsscanner 58 7682
4 9
4 1
46300 36 69
476 3.83 nsscripterror 253 25070 8
42 915
48 589 66
478 3.67 nshtmldocument.mreferrer 177 21550 691 85
460 51
4 63910 3.53 nshtmlvalue 139 78
46 1215 6873
4 1076 60888 3.36 htmlcontentsink 6
4816 12 57782 6 52966 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by size.
...leaks: 382739 bytes, 3
465 allocations maximum heap size: 7751799 bytes 62095212 bytes were allocated in 391091 allocations.
turbostat
at must be invoked as the super-user: sudo turbostat if you get an error saying "turbostat: no /dev/cpu/0/msr", you need to run the following command: sudo modprobe msr the output is as follows: core cpu avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt - - 799 21.63 369
4 3398 0 12.02 3.16 1.71 61.
48
49
49 0.00 0.00 0.00 0.00 22.68 15.13 1.13 0 0 821 22.
44 3657 3398 0 9.92 2.
43 2.25 62.96 39
49 0.00 0.00 0.00 0.00 22.68 15.13 1.13 0
4 708 19.1
4 3698 3398 0 13.22 1 1 7
43 20.26 3666 3398 ...
... 0 21.
40
4.01 1.
42 52.90
49 1 5 1206 31.98 3770 3398 0 9.69 2 2 78
4 21.29 3681 3398 0 11.78 3.10 1.13 62.70
40 2 6 782 21.15 3698 3398 0 11.92 3 3 702 19.1
4 3670 3398 0 8.39 3.09 2.03 67.36 39 3 7 6
48 17.67 3667 3398 0 9.85 the man page has good explanations of what each column measures.
... if you run with the -s option you get a smaller range of measurements that fit on a single line, like the following: avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt 361
4 97.83 369
4 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.
46 ...
Patches and pushes
<searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base6
4,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" />*** <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name=...
...for example: hg ci -m "bug 65
4321, copied the comment from the doc without reading, r=nobody" path-to-changed-files close the bug, copying the url to your change in the closing comment.
... write up something like this for your comment: landed this on aurora, http://hg.mozilla.org/releases/l10n/mozilla-aurora/ab-cd/rev/adfe123
4feac, marking fixed.
NSPR build instructions
--enable-6
4bit on a dual 32-bit/6
4-bit platform, nspr build generates a 32-bit build by default.
... to generate a 6
4-bit build, specify the --enable-6
4bit configure option.
... --target=x86_6
4-pc-mingw32 for 6
4-bit builds on windows, when using the mozillabuild environment.
Network Addresses
by using these functions with other network address functions, clients can support either version
4 or version 6 of the internet protocol transparently.
... all nspr functions that require prnetaddr as an argument accept either an ipv
4 or ipv6 version of the address.
... pr_initializenetaddr converting between a string and a network address pr_stringtonetaddr pr_netaddrtostring converting address formats pr_convertipv
4addrtoipv6 getting host names and addresses pr_gethostbyname pr_gethostbyaddr pr_enumeratehostent pr_getaddrinfobyname pr_enumerateaddrinfo pr_getcanonnamefromaddrinfo pr_freeaddrinfo getting protocol entries pr_getprotobyname pr_getprotobynumber ...
PRNetAddr
syntax #include <prio.h> union prnetaddr { struct { pruint16 family; char data[1
4]; } raw; struct { pruint16 family; pruint16 port; pruint32 ip; char pad[8]; } inet; #if defined(_pr_inet6) struct { pruint16 family; pruint16 port; pruint32 flowinfo; pripv6addr ip; } ipv6; #endif /* defined(_pr_inet6) */ }; typedef union prnetaddr prnetaddr; fields the structure has the following fields: family address family: pr_af_inet|pr_af_inet6 for raw.family, pr_af_inet for inet.family, pr_af_inet6 for ipv6.family.
...by default, nspr is built to support only ipv
4, but it's possible to build the nspr library to support both ipv
4 and ipv6.
...pr_inaddr_any and pr_inaddr_loopback are special ipv
4 addresses in host byte order, so they must be converted to network byte order before being assigned to the inet.ip field.
PR_MkDir
possible values include the following: 00
400.
... 000
40.
... 0000
4.
NSS 3.20.2 release notes
nss 3.20.2 requires nspr
4.10.10 or newer.
... nss 3.20.2 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_20_2_rtm/src/ security fixes in nss 3.20.2 bug 1158
489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
... acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1158
489.
NSS 3.21.1 release notes
nss 3.21.1 requires nspr
4.10.10 or newer.
... security fixes in nss 3.21.1 bug 12
45528 / cve-2016-1950 - fixed a heap-based buffer overflow related to the parsing of certain asn.1 structures.
... acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 12
45528.
NSS 3.21.3 release notes
nss 3.21.3 requires nspr
4.10.10 or newer.
... bug 12
4103
4 - fixed an out-of-bounds write when parsing invalid utf-16.
... bug 12
41037 - fixed bogus surrogate detection when parsing invalid utf-16.
NSS 3.28.3 release notes
nss 3.28.3 requires netscape portable runtime (nspr)
4.13.1 or newer.
...the change has been reverted to the original state in bug 133
4108.
...see bug 13
40103.
NSS 3.29.1 release notes
nss 3.29.1 requires netscape portable runtime (nspr)
4.13.1 or newer.
...the change has been reverted to the original state in bug 133
4108.
...see bug 13
40103.
NSS 3.36.2 release notes
nss 3.36.2 requires nspr
4.19 or newer.
... bugs fixed in nss 3.36.2 bug 1
462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error.
... bug 1
460673 - fix a rare bug with pkcs#12 files.
NSS 3.37.1 release notes
nss 3.37.1 requires nspr
4.19 or newer.
... bugs fixed in nss 3.37.1 bug 1
462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error.
... bug 1
460673 - fix a rare bug with pkcs#12 files.
NSS 3.37.3 release notes
nss 3.37.3 requires nspr
4.19 or newer.
... bugs fixed in nss 3.37.3 bug 1
459739 - fix build on armv6/armv7 and other platforms.
... bug 1
461731 - fix crash on macos related to authentication tokens, e.g.
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-102
4..." only the specified hashes and curves will be allowed: config="disallow=all allow=sha1:sha256:secp256r1:secp38
4r1" only the specified hashes and curves will be allowed, and rsa keys of 20
48 or more will be accepted, and dh key exchange with 102
4-bit primes or more: config="disallow=all allow=sha1:sha256:secp256r1:secp38
4r1:min-rsa=20
48:min-dh=102
4" a policy that enables the aes ciphersuites and the secp256/38
4 curves: config="allow=aes128-cbc:aes128-gcm::hmac-sha1:sha1:sha256:sha38
4:rsa:ecdhe-rsa:secp256r1:secp38
4r1" turn off md5 config="disallow=md5" turn off md5 and sha1 only for ssl c...
... ecc curves prime192v1 prime192v2 prime192v3 prime239v1 prime239v2 prime239v3 prime256v1 secp112r1 secp112r2 secp128r1 secp128r2 secp160k1 secp160r1 secp160r2 secp192k1 secp192r1 secp22
4k1 secp256k1 secp256r1 secp38
4r1 secp521r1 c2pnb163v1 c2pnb163v2 c2pnb163v3 c2pnb176v1 c2tnb191v1 c2tnb191v2 c2tnb191v3 c2onb191v
4 c2onb191v5 c2pnb208w1 c2tnb239v1 c2tnb239v2 c2tnb239v3 c2onb239v
4 c2onb239v5 c2pnb272w1 c2pnb30
4w1 c2tnb359v1 c2pnb368w1 c2tnb
431r1 sect113r1 sect131r1 sect131r1 sect131r2 sect163k1 sect163r1 sect163r2 sect193r1 sect193r2 sect233k1 se...
...ct233r1 sect239k1 sect283k1 sect283r1 sect
409k1 sect
409r1 sect571k1 sect571r1 hashes md2 md
4 md5 sha1 sha22
4 sha256 sha38
4 sha512 macs hmac-sha1 hmac-sha22
4 hmac-sha256 hmac-sha38
4 hmac-sha512 hmac-md5 ciphers aes128-cbc aes192-cbc aes256-cbc aes128-gcm aes192-gcm aes256-gcm camellia128-cbc camellia192-cbc camellia256-cbc seed-cbc des-ede3-cbc des-
40-cbc des-cbc null-cipher rc2 rc
4 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-version-max constraints on dtls protocols versions (integers) dtls-version-min dtls-version-max policy fl...
NSS Sample Code Sample_1_Hashing
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 }, { "sha256", sec_oid_sha256 }, { "sha38
4", sec_oid_sha38
4 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag.
... */ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[
4096]; unsigned char digest[6
4]; 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...
... contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, digest, &len, 6
4); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustration let's print it in hex.
Hashing - sample 1
ude <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 }, { "sha256", sec_oid_sha256 }, { "sha38
4", sec_oid_sha38
4 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag.
... */ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[
4096]; unsigned char digest[6
4]; 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, 6
4); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustration let's print it in hex.
sample1
e <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 }, { "sha256", sec_oid_sha256 }, { "sha38
4", sec_oid_sha38
4 }, { "sha512", sec_oid_sha512 } }; /* maps a hash name to a secoidtag.
... */ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[
4096]; unsigned char digest[6
4]; 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); /* incrementall...
...y hash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, digest, &len, 6
4); /* 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 tech note3
the oid for this extension is { 2 16 8
40 1 113730 1 1 } encoded in hex as 0x60, 0x86, 0x
48, 0x01, 0x86, 0xf8, 0x
42, 0x01, 0x01 in addition to netscape's own cert type extension, nss recognizes various x.509 extensions.
... /* x.509 v3 key usage extension flags */ #define ku_digital_signature (0x80) /* bit 0 */ #define ku_non_repudiation (0x
40) /* 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 (0x0
4) /* bit 5 */ #define ku_crl_sign (0x02) /* bit 6 */ #define ns_cert_type_ssl_client (0x80) /* bit 0 */ #define ns_cert_type_ss...
...l_server (0x
40) /* 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 (0x0
4) /* bit 5 */ #define ns_cert_type_email_ca (0x02) /* bit 6 */ #define ns_cert_type_object_signing_ca (0x01) /* bit 7 */ </x> ...
nss tech note7
at present 102
4 bit and 20
48 bit rsa keys are the most common and recommended.
...for example, 0x00123
456 is equal to 0x123
456.
... sample code sample code
4: pki encryption references rsa labs pkcs #1 web site rfc 3
447: rsa pkcs #1 v2.1 poupou's blog: common question: how to encrypt using rsa ...
NSS Tools sslstrength
however, the port number is an optional argument, and if not given, will default to the https port (
443).
... step-up step up is a mode where the connection starts out with
40-bit encryption, but due to a 'change-cipher-spec' handshake, changes to 128-bit encryption.
... other for references, here is a table of well-known ssl port numbers: https
443 imaps 993 nntps 563 ...
Overview of NSS
tls v1.3 (rfc 8
446), tls v1.2 (rfc 52
46), tls v1.1 (rfc
43
46), tls v1 (rfc 22
46).
... rsa, dsa, ecdsa, diffie-hellman, ec diffie-hellman, aes, triple des, des, rc2, rc
4, sha-1, sha-256, sha-38
4, sha-512, md2, md5, hmac: common cryptographic algorithms used in public-key and symmetric-key cryptography.
... fips 1
40 validation and niscc testing the nss software crypto module has been validated three times for conformance to fips 1
40 at security levels 1 and 2.
PKCS 7 functions
function name/documentation source code nss versions sec_pkcs7addcertificate mxr 3.3 and later sec_pkcs7addrecipient mxr 3.2 and later sec_pkcs7addsigningtime mxr 3.2 and later sec_pkcs7containscertsorcrls mxr 3.
4 and later sec_pkcs7contentisencrypted mxr 3.
4 and later sec_pkcs7contentissigned mxr 3.
4 and later sec_pkcs7contenttype mxr 3.2 and later sec_pkcs7copycontentinfo mxr 3.
4 and later sec_pkcs7createcertsonly mxr 3.3 and later sec_pkcs7createdata...
...c_pkcs7encoderstart mxr 3.2 and later sec_pkcs7encoderupdate mxr 3.2 and later sec_pkcs7getcertificatelist mxr 3.2 and later sec_pkcs7getcontent mxr 3.2 and later sec_pkcs7getencryptionalgorithm mxr 3.2 and later sec_pkcs7getsignercommonname mxr 3.
4 and later sec_pkcs7getsigneremailaddress mxr 3.
4 and later sec_pkcs7getsigningtime mxr 3.
4 and later sec_pkcs7includecertchain mxr 3.2 and later sec_pkcs7iscontentempty mxr 3.2 and later sec_pkcs7setcontent mxr 3.
4 and later sec_pkcs7verifydet...
...achedsignature mxr 3.
4 and later sec_pkcs7verifysignature mxr 3.2 and later secmime_decryptionallowed mxr 3.
4 and later ...
NSS tools : vfychain
modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 1
40-2 compliance, and assign default providers for cryptographic operations.
...options -a the following certfile is base6
4 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.
troubleshoot.html
building nss having /usr/ucb/bin in the path before /usr/ccs/bin breaks the build on 6
4-bit solaris.
... the 6
4-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 6
4-bit may fail with: /usr/include/features.h:32
4:26: fatal error: bits/predefs.h: no such file or directory in this case remember to set use_6
4=1 testing nss the ssl stress test opens 2,0
48 tcp connections in quick succession.
SSL functions
and later ssl_clearsessioncache mxr 3.2 and later ssl_configmpserversidcache mxr 3.2 and later ssl_configsecureserver mxr 3.2 and later ssl_configserversessionidcache mxr 3.2 and later ssl_datapending mxr 3.2 and later ssl_forcehandshake mxr 3.2 and later ssl_forcehandshakewithtimeout mxr 3.11.
4 and later ssl_getchannelinfo mxr 3.
4 and later ssl_getciphersuiteinfo mxr 3.
4 and later ssl_getclientauthdatahook mxr 3.2 and later ssl_getmaxservercachelocks mxr 3.
4 and later ssl_getsessionid mxr 3.2 and later ssl_getstatistics mxr 3.2 and later ssl_handshakecallback mxr 3.2 and later ...
... ssl_importfd mxr 3.2 and later ssl_inheritmpserversidcache mxr 3.2 and later ssl_invalidatesession mxr 3.2 and later ssl_localcertificate mxr 3.
4 and later ssl_optionget mxr 3.2 and later ssl_optiongetdefault mxr 3.2 and later ssl_optionset mxr 3.2 and later ssl_optionsetdefault mxr 3.2 and later ssl_peercertificate mxr 3.2 and later ssl_preencryptedfiletostream mxr 3.2 and later ssl_preencryptedstreamtofile mxr 3.2 and later ssl_rehandshake mxr 3.2 and later ssl_rehandshakewithtimeout mxr 3.11.
4 and later ssl_resethandshake mxr 3.2 and later ssl_restarthandshakeaftercertreq mxr...
... 3.2 and later ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelocks mxr 3.
4 and later ssl_setpkcs11pinarg mxr 3.2 and later ssl_setsockpeerid mxr 3.2 and later ssl_seturl mxr 3.2 and later ssl_shutdownserversessionidcache mxr 3.7.
4 and later ...
S/MIME functions
msmessage_create mxr 3.2 and later nss_cmsmessage_createfromder mxr 3.2 and later nss_cmsmessage_destroy mxr 3.2 and later nss_cmsmessage_getcontent mxr 3.2 and later nss_cmsmessage_getcontentinfo mxr 3.2 and later nss_cmsmessage_isencrypted mxr 3.
4.1 and later nss_cmsmessage_issigned mxr 3.
4 and later nss_cmsrecipientinfo_create mxr 3.2 and later nss_cmsrecipientinfo_createfromder mxr 3.8 and later nss_cmsrecipientinfo_createnew mxr 3.8 and later nss_cmsrecipientinfo_createwithsubjkeyid mxr 3.7 and late...
... mxr 3.2 and later nss_cmssigneddata_getsignerinfo mxr 3.2 and later nss_cmssigneddata_hasdigests mxr 3.2 and later nss_cmssigneddata_importcerts mxr 3.2 and later nss_cmssigneddata_setdigests mxr 3.2 and later nss_cmssigneddata_setdigestvalue mxr 3.
4 and later nss_cmssigneddata_signerinfocount mxr 3.2 and later nss_cmssigneddata_verifycertsonly mxr 3.2 and later nss_cmssigneddata_verifysignerinfo mxr 3.2 and later nss_cmssignerinfo_addmssmimeenckeyprefs mxr 3.6 and later nss_cmssignerinfo_addsmimecaps mxr ...
...later nss_cmssignerinfo_getverificationstatus mxr 3.2 and later nss_cmssignerinfo_getversion mxr 3.2 and later nss_cmssignerinfo_includecerts mxr 3.2 and later nss_cmsutil_verificationstatustostring mxr 3.2 and later nss_smimesignerinfo_savesmimeprofile mxr 3.
4 and later nss_smimeutil_findbulkalgforrecipients mxr 3.2 and later ...
NSS Tools sslstrength
however, the port number is an optional argument, and if not given, will default to the https port (
443).
... step-up step up is a mode where the connection starts out with
40-bit encryption, but due to a 'change-cipher-spec' handshake, changes to 128-bit encryption.
... other for references, here is a table of well-known ssl port numbers: https
443 imaps 993 nntps 563 ...
NSS tools : crlutil
list of possible algorithms: md2 | md
4 | md5 | sha1 | sha256 | sha38
4 | sha512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
...for example: 2005020
4153000z * add an extension to a crl or a crl certificate entry: addext extension-name critical/non-critical [arg1[arg2 ...]] where: extension-name: string value of a name of known extensions.
... 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 : signver
synopsis signtool -a | -v -d directory [-a] [-i input_file] [-o output_file] [-s signature_file] [-v] description the signature verification tool, signver, is a simple command-line utility that unpacks a base-6
4-encoded pkcs#7 signed object and verifies the digital signature using standard cryptographic techniques.
... signver supports two types of databases: the legacy security databases (cert8.db, key3.db, and secmod.db) and new sqlite databases (cert9.db, key
4.db, and pkcs11.txt).
...these new databases provide more accessibility and performance: o cert9.db for certificates o key
4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.
NSS tools : vfychain
modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 1
40-2 compliance, and assign default providers for cryptographic operations.
... options -a the following certfile is base6
4 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.
Tutorial: Embedding Rhino
this is the same as runscript, but with the addition of two extra lines of code: object wrappedout = context.javatojs(system.out, scope); scriptableobject.putproperty(scope, "out", wrappedout); these lines add a global variable out that is a javascript reflection of the system.out variable: $ java runscript2 "out.println(
42)"
42.0 undefined using javascript objects from java after evaluating a script it's possible to query the scope for variables and functions, extracting values and calling javascript functions.
... adding counter to runscript now take a look at the runscript
4 example.
...the method scriptableobject.defineclass uses a java class to define the counter "class" in the top-level scope: scriptableobject.defineclass(scope, counter.class); now we can reference the counter object from our script: $ java runscript
4 "c = new counter(3); c.count; c.count;" it also creates a new instance of the counter object from within our java code, constructing it with the value 7, and assigning it to the top-level variable mycounter: object[] arg = { new integer(7) }; scriptable mycounter = cx.newobject(scope, "counter", arg); scope.put("mycounter", scope, mycounter); now we can reference the mycounter object from our script: $ java runscript3 'runscript
4 'mycounter.count; mycounter.count' 8 ...
Rhino overview
rhino 1.6 and greater implement ecma-357 ecmascript for xml (e
4x).
...attempts to invoke these constructors with the language version 1.
4 will result in an error.
... string.prototype.split for version 1.2 only, split performs the perl
4 special case when given a single space character as an argument (skips leading whitespace, and splits on whitespace).
JIT Optimization Strategies
the jit coach feature was removed in bug 161
4622.
... consider the following constructor: function point(x, y) { this.x = x; this.y = y; } if only integers are ever stored in the x and y properties, then the instances of point will be represented in an "unboxed" mode - with the property values stored as raw
4-byte values within the object.
... consider the following constructor: function point(x, y) { this.x = x; this.y = y; } if only integers are ever stored in the x and y properties, then the instances of point will be represented in an "unboxed" mode - with the property values stored as raw
4-byte values within the object.
JSAPI Cookbook
ootedobject x(cx, js_newarrayobject(cx, 0)); if (!x) return false; creating an object // javascript var x = {}; // or "x = object()", or "x = new object" /* jsapi */ js::rootedobject x(cx, js_newplainobject(cx)); // or js_newobject(cx, js::nullptr(), js::nullptr(), js::nullptr()); if (!x) return false; constructing an object with new // javascript var person = new person("dave", 2
4); it looks so simple in javascript, but a jsapi application has to do three things here: look up the constructor, person prepare the arguments ("dave", 2
4) call js_new to simulate the new keyword (if your constructor doesn't take any arguments, you can skip the second step and call js_new(cx, constructor, 0, null) in step 3.) /* jsapi */ /* step 1 - get the value of |person| and check t...
...*/ js::rootedstring name_str(cx, js_newstringcopyz(cx, "dave")); if (!name_str) return false; js::autovaluearray<2> args(cx); args[0].setstring(name_str); args[1].setint32(2
4); /* step 3 - call |new person(...args)|, passing the arguments.
... */ js::callargs args = js::callargsfromvp(argc, vp); args.rval().setint32(23); return true; returning a floating-point number // javascript return 3.1
4159; /* jsapi */ js::callargs args = js::callargsfromvp(argc, vp); args.rval().setdouble(3.1
4159); exception handling throw the most common idiom is to create a new error object and throw that.
JSClass
jsclass { const char *name; uint32_t flags; /* optional since spidermonkey 37 */ jspropertyop addproperty; jsdeletepropertyop delproperty; jspropertyop getproperty; jsstrictpropertyop setproperty; jsenumerateop enumerate; jsresolveop resolve; jsconvertop convert; /* obsolete since spidermonkey
44 */ /* optional since spidermonkey 25 */ jsfinalizeop finalize; /* optional */ jsclassinternal reserved0; /* obsolete since spidermonkey 13 */ jscheckaccessop checkaccess; /* obsolete since spidermonkey 29 */ jsnative call; jshasinstanceop hasinstance; jsnative construct; jsxdrobjectop xdrobject; /* obsole...
...obsolete since jsapi
44 use null or js_convertstub (spidermonkey 31 or older) for default behavior, which is equivalent to that defined by ecmascript in §8.12.8.
...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 7269
44 - removed xdrobject, reserved0 and reserved1 bug 886829 - made finalize optional bug 957688 - removed checkaccess bug 1103368 - made most of members optional bug 1097267 - removed jsclass_new_enumerate bug 105
4756 - removed convert bug 1261723 - class ops are moved to a sub-structure jsclassops ...
JS_ClearNonGlobalObject
obsolete since jsapi 3
4this feature is obsolete.
... this article covers features introduced in spidermonkey 2
4 remove all properties associated with an object.
...see also js_deleteproperty js_deleteelement bug 10
43281 ...
JS_DefaultValue
obsolete since jsapi
44this feature is obsolete.
... renamed to js::toprimitive from jsapi
44.
... see also mxr id search for js_defaultvalue js::toprimitive bug 105
4756 - renamed to js::toprimitive ...
JS_GetGCParameter
jsgc_pretenure_threshold / "pretenurethreshold" if this percentage of the nursery is tenured and the nursery is at least
4mb, then process object groups to look for pretenuring candidates.
... see also mxr id search for js_getgcparameter mxr id search for js_setgcparameter bug
47
4801 jsgc_bytes jsgc_number bug
47
4497 jsgc_max_code_cache_bytes this option no-longer exists js_getgcparameterforthread js_setgcparameterforthread bug 62
4229 jsgc_mode bug 631733 jsgc_unused_chunks bug 67
4480 jsgc_total_chunks bug 6
41025 jsgc_slice_time_budget bug 673551 jsgc_mark_stack_limit bug 765
4...
...requency_time_limit jsgc_high_frequency_low_limit jsgc_high_frequency_high_limit jsgc_high_frequency_heap_growth_max jsgc_high_frequency_heap_growth_min jsgc_low_frequency_heap_growth jsgc_dynamic_heap_growth jsgc_dynamic_mark_slice bug 800063 jsgc_allocation_threshold bug 871005 jsgc_decommit_threshold this option is no-longer exists bug 10171
41 jsgc_min_empty_chunk_count jsgc_max_empty_chunk_count ...
JS_NewObject
syntax // added in spidermonkey
45 jsobject * js_newobject(jscontext *cx, const jsclass *clasp); bool js_newobjectwithgivenproto(jscontext *cx, const jsclass *clasp, js::handle<jsobject*> proto); // obsolete since spidermonkey 38 jsobject * js_newobject(jscontext *cx, const jsclass *clasp, js::handle<jsobject*> proto, js::handle<jsobject*> parent); jsobject * js_newobjectwithgivenproto(jscontext *cx, const jsclass *clasp, js::handle<jsobject*> proto, js::handle<jsobject*> parent); // added in spidermonkey 1.8 name type description cx jscontext * the context in which to create the new object.
... previous behaviour obsolete since jsapi
45 here's how the process works in detail: first, we must identify a global object.
... see also mxr id search for js_newobject mxr id search for js_newobjectwithgivenproto js_newglobalobject js_newarrayobject js_valuetoobject bug
408871 bug 1136906, bug 11363
45 -- remove parent parameter bug 1125567 -- change prototype lookup behaviour ...
JS_SetGCZeal
4 verify pre write barriers between instructions.
... 1
4 perform a shrinking collection every frequency allocations.
...(in a debug build of gecko, you can also set the current gc zeal level using the javascript.options.gczeal preference.) see also mxr id search for js_setgczeal mxr id search for js_gc_zeal js_schedulegc bug 308
429 bug 650978 ...
JS_SetOptions
mxr id search for jsoption_atline jsoption_xml obsolete since jsapi 15 ecmascript for xml (e
4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags.
... mxr id search for jsoption_xml jsoption_allow_xml added in spidermonkey 15 if this is off, e
4x syntax isn't supported no matter what version number is set.
... mxr id search for jsoption_allow_xml jsoption_moar_xml added in spidermonkey 15 ecmascript for xml (e
4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags.
JS_ValueToId
ool js_valuetoid(jscontext *cx, js::handlevalue v, js::mutablehandleid idp); bool js_stringtoid(jscontext *cx, js::handlestring s, js::mutablehandleid idp); // added in spidermonkey 38 bool js_indextoid(jscontext *cx, uint32_t index, js::mutablehandleid idp); // added in spidermonkey 17 bool js_charstoid(jscontext* cx, js::twobytechars chars, js::mutablehandleid idp); // added in spidermonkey 2
4 void js::protokeytoid(jscontext *cx, jsprotokey key, js::mutablehandleid idp); // added in spidermonkey 38 name type description cx jscontext * a context.
...otherwise, if e
4x support is enabled and v is an object, *idp receives an object jsid.
... mxr id search for js_valuetoid see also mxr id search for js_idtovalue mxr id search for js_stringtoid mxr id search for js_indextoid mxr id search for js_charstoid mxr id search for js::protokeytoid js_valuetoid bug 698
495 - added js_indextoid bug 830500 - added js_charstoid bug 959787 - added js_stringtoid bug 987669 - added js::protokeytoid ...
JS_ValueToInt32
description js_valuetoint32 converts a specified js value, v, to a 32-bit signed integer (-21
47
4836
48 to 21
47
4836
47).
...this routine was added for layers-based graphics programming in netscape
4, but unless you know you need its rounding behavior, it is best to avoid it in favour of js::toint32.
... see also js_convertarguments js::toint32 bug 9339
46 ...
jsint
int6
4; typedef ...
... uint6
4; description jsint and jsuint are 32-bit integer types.
...see also bug 71
4728 - removes jsword/jsuword bug 730511 - removes intn/uintn bug 732306 - removes jsint bug 733260 - removes jsuint bug 708735 - deprecates {u,}int{8,16,32,6
4} ...
SpiderMonkey 17
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5 checksum: 20b6f8f11
40ef6e
47daa3b16965c9202).
...it is supported on x86, x86_6
4, and arm architectures.
... obsolete typedef replacement type provided by uint8, int8, uint16, int16, uint32, int32, uint6
4, int6
4 uint8_t, int8_t, uint16_t, int16_t, uint32_t, int32_t, uint6
4_t, int6
4_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 n/a the fixed-size int...
Shell global objects
"2;
4" will activate both modes 2 and
4.
... values: 0: (none) normal amount of collection (resets all modes) 1: (poke) collect when roots are added or removed 2: (alloc) collect when every n allocations (default: 100) 3: (framegc) collect when the window paints (browser only)
4: (verifierpre) verify pre write barriers between instructions 5: (frameverifierpre) verify pre write barriers between paints 6: (stackrooting) verify stack rooting 7: (generationalgc) collect the nursery every n nursery allocations 8: (incrementalrootsthenfinish) incremental gc in two slices: 1) mark roots 2) finish collection 9: (incrementalmarkallthenfinish) incremental gc in two slices: 1) mark all 2) new marking and finish 10: (incrementalmultipleslices) incremental ...
...gc in multiple slices 11: (incrementalmarkingvalidator) verify incremental marking 12: (elementsbarrier) always use the individual element post-write barrier, regardless of elements size 13: (checkhashtablesonminorgc) check internal hashtables on minor gc 1
4: (compact) perform a shrinking collection every n allocations 15: (checkheapaftergc) walk the heap to check its integrity after every gc 16: (checknursery) check nursery integrity on minor gc schedulegc([num | obj]) if num is given, schedule a gc after num allocations.
Setting up an update server
for example, if you want the nightly mar from 2019-09-17 for a 6
4 bit windows machine, you probably want the mar located at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win6
4.complete.mar.
...here is an example of an appropriate mar file to use: https://archive.mozilla.org/pub/firefox/releases/69.0b9/update/win6
4/firefox-69.0b9.complete.mar.
...l have to search it for the file name of your mar, since it includes the sha512 for every file that's part of that release), and for a nightly build you'll find a file with a .checksums extension adjacent to your mar that contains that information (for instance, for the mar file at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win6
4.complete.mar, the file https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win6
4.checksums contains the sha512 for that file as well as for all the other win6
4 files that are part of that nightly release).
Mork
the grammar for mork is as follows: file = header ( dictionary | table | group | row )* header = '// <!-- <mdb:mork:z v="1.
4"/> -->' dictionary = '<' ( metadictionary | alias )* '>' table = '{' '-'?
...the header is: // <!-- <mdb:mork:z v="1.
4"/> --> this file is therefore version 1.
4 of the zany mork format for the message database.
...other serializations of mork have also never been used, so the zany mork version 1.
4 format has become the only official mork format.
Querying Places
const unsigned short group_by_day = 0 const unsigned short group_by_host = 1 const unsigned short 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 unsigned short sort_by_lastmodified_descending = 1
4 const unsigned short sort_by_annotation_ascending = 15 const unsigned short sort_by_annotation_descending = 16 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...
... // 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 2
4 hours and from mozilla.org var query2 = placesutils.history.getnewquery(); query2.begintimereference = query2.time_relative_now; query2.begintime = -2
4 * 60 * 60 * 1000000; // 2
4 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); no...
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_int6
4 — a 6
4 bit integer each of these types (except type_none) has a corresponding method to read the value data: readstringvalue() readbinaryvalue() readintvalue() readint6
4value() 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_int6
4: return wrk.readint6
4value(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_int6
4: return wrk.readint6
4value(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"] ...
Finishing the Component
similar problems occurred with gcc
4.0, which underwent similar abi changes.
...see the intro to the html
4 specification for more information about uris and urls.
...see the intro to the html
4 specification for more information about relative urls.
Using XPCOM Utilities to Make Things Easier
many cids take the following form: #define ns_ioservice_cid \ { /* 9ac9e770-18bc-11d3-9337-0010
4ba0fd
40 */ \ 0x9ac9e770, \ 0x18bc, \ 0x11d3, \ {0x93, 0x37, 0x00, 0x10, 0x
4b, 0xa0, 0xfd, 0x
40} \ } the next entry is the contract id string, which is also usually defined in a #define in a header file.
...interface must be generated by xpidl using the macros described here, the code for the weblock component has gone from around 3
40 lines of code to just under
40.
... weblock2.cpp the listing below shows the generic module code from weblock1.cpp using the macros described in this chapter: weblock2.cpp #include "nsigenericfactory.h" #include "nsisupportsutils.h" #define sample_cid \ { 0x777f7150, 0x
4a2b, 0x
4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} class sample: public nsisupports { public: sample(); virtual ~sample(); ns_decl_isupports }; sample::sample() { // note: in newer versions of gecko (1.3 or later) // you don't have to do this: ns_init_isupports(); } sample::~sample() { } ns_impl_isupports1(sample, nsisupports); ns_generic_factory_constructo...
Components.utils.evalInWindow
this function is no longer available as of firefox 3
4.
... see bug 10
428
40 for details.
...ntelement }; an add-on script or other privileged script can access the variable using evalinwindow(): // add-on-script.js var result = components.utils.evalinwindow("somelocalvariable", contentwindow); console.log(result); // {"name":"selection1","node":{}} the add-on code can modify the variable as well, of course: // add-on-script.js components.utils.evalinwindow("somelocalvariable.newprop =
42", contentwindow); // page-script.js console.log(window.somelocalvariable.newprop); //
42 but note that the add-on script must trust that the page script has not redefined the setter on somelocalvariable: unlike xraywrappers, evalinwindow() does not provide x-ray vision.
HOWTO
e.g., you use: components.utils.import("resource://app/modules/gloda/log
4moz.js"); however, you get (for that particular line, which is the first import): uncaught exception: [exception...
... "component returned failure code: 0x800
40111 (ns_error_not_available) [nsixpccomponents_utils.import]" nsresult: "0x800
40111 (ns_error_not_available)" location: "js frame :: file.js :: <top_level> :: line 12" data: no] solution 1 var loader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .getservice(components.interfaces.mozijssubscriptloader); loader.loadsubscript("chrome://myall/content/file.jsm"); see: http://mxr.mozilla.org/comm-central/...figutils.js#5
4 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=5
46628> let cc = components.classes; let ci = components.interfaces; // register resource://app/...
...olhandler); 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 5
46628 would make this unnecessary.
nsACString_internal
<map id="classes" name="classes"> <area alt="" coords="
456,5,605,53" href="http://developer.mozilla.org/en/nsacstring_internal" shape="rect" title="nsacstring_internal"> <area alt="" coords="
415,101,
497,1
49" href="http://developer.mozilla.org/en/nscstring" shape="rect" title="nscstring"> <area alt="" coords="521,101,689,1
49" href="http://developer.mozilla.org/en/nsdependentcsubstring" shape="rect" title="nsdependentcsubstring"> <area alt="" coords="172...
...,197,289,2
45" href="http://developer.mozilla.org/en/nsfixedcstring" shape="rect" title="nsfixedcstring"> <area alt="" coords="315,197,
437,2
45" href="http://developer.mozilla.org/en/nsxpidlcstring" shape="rect" title="nsxpidlcstring"> <area alt="" coords="
461,197,611,2
45" href="http://developer.mozilla.org/en/nsdependentcstring" shape="rect" title="nsdependentcstring"> <area alt="" coords="635,197,787,2
45" href="http://developer.mozilla.org/en/nspromiseflatcstring" shape="rect" title="nspromiseflatcstring"> <area alt="" coords="173,293,285,3
41" 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_lossyconvertutf16toascii" shape="rect" title="ns_lossyconvertutf16toascii"> <area alt...
...="" coords="251,389,
435,
437" href="http://developer.mozilla.org/en/ns_convertutf16toutf8" shape="rect" title="ns_convertutf16toutf8"> <area alt="" coords="309,293,
445,3
41" 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 rep...
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,1
49" href="http://developer.mozilla.org/en/nsstring" shape="rect" title="nsstring"> <area alt="" coords="
475,101,635,1
49" href="http://developer.mozilla.org/en/nsdependentsubstring" shape="rect" title="nsdependentsubstring"> <area alt="" coords="151,197,2...
...57,2
45" href="http://developer.mozilla.org/en/nsfixedstring" shape="rect" title="nsfixedstring"> <area alt="" coords="28
4,197,396,2
45" href="http://developer.mozilla.org/en/nsxpidlstring" shape="rect" title="nsxpidlstring"> <area alt="" coords="
420,197,559,2
45" href="http://developer.mozilla.org/en/nsdependentstring" shape="rect" title="nsdependentstring"> <area alt="" coords="583,197,727,2
45" href="http://developer.mozilla.org/en/nspromiseflatstring" shape="rect" title="nspromiseflatstring"> <area alt="" coords="152,293,253,3
41" 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_convertasciitoutf16" shape="rect" title="ns_convertasciitoutf16"> <area alt="" coords="216,389,
400,
43...
...7" href="http://developer.mozilla.org/en/ns_convertutf8toutf16" shape="rect" title="ns_convertutf8toutf16"> <area alt="" coords="277,293,
405,3
41" href="http://developer.mozilla.org/en/nsadoptingstring" shape="rect" title="nsadoptingstring"> </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 replaceascii append app...
RefPtr
refptr (formerly known as nsrefptr, see bug 12072
45) is a general class to implement reference counting pointers for objects.
...bug 7566
40 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 7566
40 comment 1).
mozIStorageError
cantopen 1
4 unable to open the database file.
... format 2
4 auxiliary database format error.
... abort
4 a callback routine requested an abort.
nsIAbCard
inherits from: nsisupports method overview astring getcardvalue(in string name) void setcardvalue(in string attrname, in astring value) void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) string converttobase6
4encodedxml() astring converttoxmlprintdata() string converttoescapedvcard() astring generatename(in long agenerateformat,[optional] in nsistringbundle abundle) astring generatephoneticname(in boolean alastnamefirst) attributes attribute type description firstname astring lastname astring phoneticf...
...ing category astring webpage1 astring used for the contact's work web page webpage2 astring used for the contact's home web page birthyear astring birthmonth astring birthday astring custom1 astring custom2 astring custom3 astring custom
4 astring notes astring lastmodifieddate unsigned long popularityindex unsigned long popularityindex is bumped every time e-mail is sent to this recipient .
... converttobase6
4encodedxml() string converttobase6
4encodedxml() return value converttoxmlprintdata() astring converttoxmlprintdata() return value converttoescapedvcard() string converttoescapedvcard() return value generatename() generate a name from the card for display purposes.
nsIAccessibleDocument
inherits from: nsisupports last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) you can queryinterface to nsiaccessibledocument from the nsiaccessible or nsiaccessnode for the root node of a document.
... methods getaccessibleinparentchain() obsolete since gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) returns the first accessible parent of a dom node.
... native code only!getcachedaccessnode obsolete since gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
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_implicit
4 this item was navigated to in a top level browsing context, and named this cache's group as its manifest.
... item_opportunistic 6
4 this item matched an opportunistic cache namespace and was cached for that reason.
nsIBinaryOutputStream
inherits from: nsioutputstream last changed in gecko 1.7 method overview void setoutputstream(in nsioutputstream aoutputstream); void write8(in pruint8 abyte); void write16(in pruint16 a16); void write32(in pruint32 a32); void write6
4(in pruint6
4 a6
4); 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); void writeutf8z(in wstring astring); void writewstringz(in wstr...
... write6
4() writes a 6
4-bit integer to the stream.
... void write6
4( in pruint6
4 a6
4 ); parameters a6
4 the 6
4-bit integer to write to the stream.
nsIChannel
contentlength int6
4_t the length of the data associated with the channel if available.
... note: as of gecko 19.0, this parameter changed from long to int6
4_t.
... in earlier versions callers could get the "content-length" property as 6
4-bit value by queryinterfacing the channel to nsipropertybag2, if that interface is exposed by the channel.
nsIClassInfo
inherits from: nsisupports last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) method overview nsisupports gethelperforlanguage(in pruint32 language); void getinterfaces(out pruint32 count, [array, size_is(count), retval] out nsiidptr array); attributes attribute type description classdescription string a human readable string naming the class, or null.
... implementationlanguage obsolete since gecko
40 pruint32 the language type in which this class is implemented.
... plugin_object 1 <<
4 the class is a plugin object.
nsICookie
last changed in gecko 1.7 inherits from: nsisupports attributes attribute type description expires pruint6
4 expiration time in seconds since midnight (00:00:00), january 1, 1970 utc.
... status_rejected
4 the cookie was rejected.
... policy_explicit_consent
4 the site does not collect identifiable information unless user opts in.
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 print6
4 the creation time of the cookie, in microseconds since midnight (00:00:00), january 1, 1970 utc.
... expiry print6
4 the actual expiry time of the cookie, in seconds since midnight (00:00:00), january 1, 1970 utc.
... lastaccessed print6
4 the last time the cookie was accessed, in microseconds since midnight (00:00:00) on january 1, 1970 utc.
nsICryptoHMAC
constant value description md2 1 message digest algorithm 2 md5 2 message-digest algorithm 5 sha1 3 secure hash algorithm 1 sha256
4 secure hash algorithm 256 sha38
4 5 secure hash algorithm 38
4 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-6
4 encoded string.
...this can be either binary data or base 6
4 encoded.
nsIDOMEvent
nseventptr getinternalnsevent(); violates the xpcom interface guidelines boolean getpreventdefault(); deprecated since gecko 16.0 void initevent(in domstring eventtypearg, in boolean canbubblearg, in boolean cancelablearg); boolean isdispatchstopped(); violates the xpcom interface guidelines void preventbubble(); obsolete since gecko 2
4 void preventcapture(); obsolete since gecko 2
4 void preventdefault(); void serialize(in ipcmessageptr amsg, in boolean aserializeinterfacetype); violates the xpcom interface guidelines void settarget(in nsidomeventtarget atarget); native code only!
... mousedown 0x00000001 mouseup 0x00000002 mouseover 0x0000000
4 mouseout 0x00000008 mousemove 0x00000010 mousedrag 0x00000020 click 0x000000
40 dblclick 0x00000080 keydown 0x00000100 keyup 0x00000200 keypress 0x00000
400 dragdrop 0x00000800 focus 0x00001000 blur 0x00002000 se...
...lect 0x0000
4000 change 0x00008000 reset 0x00010000 submit 0x00020000 scroll 0x000
40000 load 0x00080000 unload 0x00100000 xfer_done 0x00200000 abort 0x00
400000 error 0x00800000 locate 0x01000000 move 0x02000000 resize 0x0
4000000 forward 0x08000000 help 0x10000000 back 0x20000000 text 0x
40000000 alt_mask 0x00000001 control_mask 0x00000002 shift_mask 0x0000000
4 meta_mask 0x00000008 methods violates the xpcom interface guidelines deserialize() boolean deser...
nsIDOMHTMLAudioElement
last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) inherits from: nsidomhtmlmediaelement method overview unsigned long long mozcurrentsampleoffset(); void mozsetup(in pruint32 channels, in pruint32 rate); [implicit_jscontext] unsigned long mozwriteaudio(in jsval data); methods mozcurrentsampleoffset() non-standard this feature is non-standard and is not on a standards track.
...return value an unsigned 6
4-bit value indicating how many audio samples have been played since the stream began playing.
...for example, specify
44100 for
44.1khz.
nsIDOMWindowInternal
66 introduced gecko 1.0 deprecated gecko 8.0 inherits from: nsidomwindow last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4) in gecko 8.0 this interface was merged into the nsidomwindow interface.
... void updatecommands(in domstring action) boolean find([optional] in domstring str,[optional] in boolean casesensitive, [optional] in boolean backwards, [optional] in boolean wraparound, [optional] in boolean wholeword, [optional] in boolean searchinframes, [optional] in boolean showdialog) domstring atob(in domstring aasciistring) domstring btoa(in domstring abase6
4data) nsivariant showmodaldialog(in nsivariant aargs, [optional] in domstring aoptions) void postmessage(in domstring message, in domstring targetorigin) attributes attribute type description window nsidomwindowinternal readonly: the window object itself.
... note: prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4), this attribute was part of nsidomwindow_2_0_branch.
nsIEditor
enode(in nsidomnode child); void marknodedirty(in nsidomnode 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 = 16, outputwrap = 32, // outputformatflowed = 6
4, outputabsolutelinks = 258, // outputencodew3centities = 256, outputcrlinebreak = 512, // outputlflinebreak = 102
4, outputnoscriptcontent = 20
48, // outputnoframescontent =
4096, outputnoformattinginpre = 8192, // outputencodebasicentities=1638
4, outputencodel...
...atin1entities=32768, // outputencodehtmlentities=65536, outputpersistnbsp=131072 editorapi.outputtostring('text/html', 2); editorapi.outputtostring('text/plain',
4); // output the body tag, body children and the html end tag (</html>).
...ree(); void debugdumpcontent() ; void debugunittests(out 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.
nsIHTMLEditor
void indent( in astring aindent ); parameters aindent insertelementatselection() insert an element, which may have child nodes, at the selection used primarily to insert a new element for various insert element dialogs, but it enforces the html
4.0 dtd "cancontain" rules, so it should be useful for other elements.
...nchorelement isanonymouselement() boolean isanonymouselement( in nsidomelement aelement ); parameters aelement return value makeorchangelist() void makeorchangelist( in astring alisttype, in boolean entirelist, in astring abullettype ); parameters alisttype entirelist abullettype nodeisblock() tests if a node is a block element according the the html
4.0 dtd.
... the selection is set to parent-of-aelement with an offset 1 greater than aelement's offset but it enforces the html
4.0 dtd "cancontain" rules, so it should be useful for other elements.
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 pruint6
4 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_response_header 0x500
4 the http response header has arrived.
...void observeactivity( in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint6
4 aextrasizedata, in acstring aextrastringdata ); parameters ahttpchannel the nsihttpchannel on which the activity occurred.
nsIIOService
ioservice); method overview boolean allowport(in long aport, in string ascheme); acstring extractscheme(in autf8string urlstring); unsigned long getprotocolflags(in string ascheme); nsiprotocolhandler getprotocolhandler(in string ascheme); nsichannel newchannel(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); obsolete since gecko
48 nsichannel newchannel2(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri, in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicytype); nsichannel newchannelfromuri(in nsiuri auri); obsolete since gecko
48 nsichannel newchannelfromuri2(in nsiuri auri, i...
... newchannel() obsolete since gecko
48 a shortcut method to avoid repeated calls of newuri() and newchannelfromuri().
... newchannelfromuri() obsolete since gecko
48 creates a channel for a given uri.
nsIJSON
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4) note: this interface may only be used from javascript code, with the exception of the legacydecodetojsval() method.
...deprecated since gecko 2.0 methods decode() obsolete since gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4) decodes a json string, returning the javascript object it represents.
... encode() obsolete since gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4) encodes a javascript object into a json string.
nsILocalFile
in gecko 1
4 this interface was merged into the nsifile interface.
... 66 introduced gecko 1.0 deprecated gecko 1
4 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 print6
4 the number of bytes available to non-superuser on the disk volume containing the nsilocalfile.
nsILocalFileMac
inherits from: nsilocalfile last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) method overview cfurlref getcfurl(); native code only!
... filesizewithresfork print6
4 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!inittoappwithcreatorcode obsolete since gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
nsIMimeConverter
lean structured, in string mailcharset, in long fieldnamelen, in long encodedwordsize); string decodemimeheadertocharptr(in string header, in string default_charset, in boolean override_charset, in boolean eatcontinuations); astring decodemimeheader(in string header, in string default_charset, in boolean override_charset, in boolean eatcontinuations); mimeencoderdata *b6
4encoderinit(in mimeconverteroutputcallback output_fn, in void *closure); mimeencoderdata *qpencoderinit(in mimeconverteroutputcallback output_fn, in void *closure); void encoderdestroy(in mimeencoderdata *data, in boolean abort_p); long encoderwrite(in mimeencoderdata *data, in string buffer, in long size); methods encodemimepartiistr() an variant of encodemim...
... encodemimepartiistr_utf8() encodes a string into a mime-encoded form according to rfc 20
47.
... b6
4encoderinit() get an integer property.
nsINavHistoryQueryOptions
sort_by_date_descending
4 sort by the descending date order.
... sort_by_lastmodified_descending 1
4 sort by the descending last modified order.
... results_as_site_query
4 returns nsinavhistoryqueryresultnode nodes for each site where we have visits.
nsINetworkLinkService
android support was backed out due to perceived security concerns, see bug 69105
4.
... link_type_wimax
4 a connection via wimax (ieee802.16).
... link_type_
4g 7 a '
4g' mobile connection (for example, lte, umb).
nsIProtocolHandler
inherits from: nsisupports last changed in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean allowport(in long port, in string scheme); nsichannel newchannel(in nsiuri auri); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description defaultport long the default port is the port the protocol uses by default.
... uri_inherits_security_context 1<<
4 uris for this protocol have no inherent security context, so documents loaded using this protocol should inherit the security context of the document that loads them.
... uri_loadable_by_subsumers 1<<1
4 the uris for this protocol can be loaded only by callers with a principal that subsumes this uri.
nsITelemetry
1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.
4) implemented by: @mozilla.org/base/telemetry;1 as a service: let telemetry = components.classes["@mozilla.org/base/telemetry;1"] .getservice(components.interfaces.nsitelemetry); method overview jsval gethistogrambyid(in acstring id); jsval snapshothistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); jsval getkeyedhistogrambyid(in acstring id); void capturestack(in acstring name); jsv...
... histogram_count
4 for storing counter values without bucketing.
... see also bug 6
49502 - expose histograms to js bug 585196 - telemetry infrastructure bug 668312 - report only probes defined in histograms.json bug 106987
4 - add keyed histogram types bug 1
426
453 - documentation of nsitelemetry not up to date ...
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: rfc3
490: internationalizing domain names in applications (idna) rfc3986: uniform resource identifier (uri): generic syntax rfc3987: internationalized resource identifiers subclasses of nsiuri, such as nsiurl, impose further structure on the uri.
...it could be an ipv
4 (or ipv6) address literal.
... this is related to the web origin concept of rfc6
45
4.
nsIWebProgressListener2
last changed in gecko 1.9 (firefox 3) inherits from: nsiwebprogresslistener method overview void onprogresschange6
4(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 onprogresschange6
4() 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 6
4-bit values.
...void onprogresschange6
4( 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.
nsIWritablePropertyBag2
ring 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 setpropertyasint6
4(in astring prop, in print6
4 value); void setpropertyasinterface(in astring prop, in nsisupports value); void setpropertyasuint32(in astring prop, in pruint32 value); void setpropertyasuint6
4(in astring prop, in pruint6
4 value); methods setpropertyasacstring() void setpropertyasacstring( in astring prop, in acstring value ); parameters prop property t...
... setpropertyasint6
4() void setpropertyasint6
4( in astring prop, in print6
4 value ); parameters prop property to set the value of.
... setpropertyasuint6
4() void setpropertyasuint6
4( in astring prop, in pruint6
4 value ); parameters prop property to set the value of.
nsIXmlRpcClient
supported arguments are: nsisupportspruint8, nsisupportspruint16, nsisupportsprint16, nsisupportsprint32: i
4, nsisupportsprbool: boolean, nsisupportschar, nsisupportscstring: string, nsisupportsfloat, nsisupportsdouble: double, nsisupportsprtime: datetime.iso8601, nsiinputstream: base6
4, 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: i
4 or int: nsisupportsprint32 boolean: nsisupportsprbool string: nsisupportscstring double: nsisupportsdouble datetime.iso8601: nsisupportsprtime base6
4: nsisupportscstring array: nsisupportsarray struct: nsidictionary faults (server side errors) are indicated by returning ns_error_failure.
...'base6
4' isn't supported.
nsIZipWriter
(a forward slash is '/') detail: this azipentry is very important, this example demonstrates its usage: var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var myzipfile = fu.file('c:\\myzipfile.zip'); //this file will be creatd in c drive var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x0
4, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x
40, pr_excl: 0x80}; zw.open(xpi, pr.pr_wronly | pr.pr_create_file | pr.pr_truncate); //xpi file is created if not there, if it is there it is truncated/deleted var filetoaddtozip = fileutils.file('c:\\add this file.txt'); var saveinzipas = 'blah.txt'; zw.addentryfile(saveinzipas, ci.nsizipwriter.compression_none, filetoaddtozi...
... example adding a comment to a zip file var zipwriter = components.constructor("@mozilla.org/zipwriter;1", "nsizipwriter"); var zipw = new zipwriter(); zipw.open(myzipfilepath, pr_rdwr | pr_create_file | pr_truncate); zipw.comment = "this is a comment."; zipw.close(); pr_rdwr and friends are constants that are not in any interface (see bug
433295), so for the code above to work you need something like: const pr_rdonly = 0x01; const pr_wronly = 0x02; const pr_rdwr = 0x0
4; const pr_create_file = 0x08; const pr_append = 0x10; const pr_truncate = 0x20; const pr_sync = 0x
40; const pr_excl = 0x80; see pr_open documentation or file i/o snippets for details.
... var {cc: classes, ci: interfaces, cu: utils} = components; var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x0
4, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x
40, pr_excl: 0x80}; //https://developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.modegetfolder); fp.appendfilters(ci.nsifile...
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/rfc66
48 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.
...if you want to support gecko2 (firefox
4) you need to register your javascript component as described here: https://developer.mozilla.org/en/xpcom/xpcom_changes_in_gecko_2.0#javascript_components.
...components.classes["@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-909
4-c1631bd1be1c}"), 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; }, ...
Status, Recent Changes, and Plans
see bug 6566
4.
... bug 59
41
4: making operator& private may help prevent some leaks caused by casting move the factored nscomptr routines into their own library, to reduce nscomptr clients' dependency on the xpcom library.
... added an entire section to the getting started guide on nscomptrs in function signatures added references to recent bugs influencing the use of nscomptr machinery: bug 59212, and bug 59
41
4 fixed comparisons 1 and 3, as per comments by morten welinder updated examples to prefer direct initialization over copy initialization.
Working with Multiple Versions of Interfaces
unfortunately we compiled this in the latest sdk, and so this magic number happens to be: "2
44e
4c67-a1d3-
44f2-9cab-cdaa31b680
46" whereas, inside firefox 2, the iid it happens to know about is: "663ca
4a8-d219-
4000-925d-d8f66
406b626".
...we first dredge out the old interface identifiers from our yea olde firefox 1.5 sdk: static const nsiid iar_iid_old = { 0x663ca
4a8, 0xd219, 0x
4000, { 0x92, 0x5d, 0xd8, 0xf6, 0x6
4, 0x06, 0xb6, 0x26 }}; static const nsiid iad_iid_old = {0x8781fc88, 0x355f, 0x
4439, { 0x88, 0x1f, 0x65, 0x0
4, 0xa0, 0xa1, 0xce, 0xb6 }}; then follow the recipe.
...old #include "accessibility/nsiaccessibledocument_old.h" static const nsiid ns_iaccessibledocument_iid_old = ns_iaccessibledocument_iid; #undef nsiaccessibledocument #undef __gen_nsiaccessibledocument_h__ #include "accessibility/nsiaccessibledocument.h" i even silenced my friend the compiler by enclosing both incantations within a compiler pragma: #pragma warning(push) #pragma warning(disable :
4005) ...
XPIDL Syntax
simplifications, conventions and notation the syntax is specified according to abnf as defined by rfc 523
4, although a few productions use prose for clarity of understanding.
...ed"] ("short" / "long" / "long" "long") type_spec /= "char" / "wchar" / "boolean" / "octet" type_spec /= scoped_name prop_list = "[" *(property ",") property "]" property = ident [parens] raise_list = "raises" "(" *(scoped_name) ",") scoped_name ")" scoped_name = *(ident "::") ident / "::" ident ; in regex: [a-za-z_][a-za-z0-9_]*; identifiers beginning with _ cause warnings ident = (%x
41-5a / %x61-7a / "_") *(%x
41-5a / %x61-7a / %x30-39 / "_") parens = "(" 1*(any char except ")") ")" functionality not used in xpidl the libidl parser we use is more powerful than xpidl itself can understand.
... /= "(" number ")" number /= "-" number number /= number ("+" / "-" / "*") number number /= number ("<<" / >>") number number /= number "|" number ; lexical tokens, i'm going to specify these in regex form number = /-?\d+|0x[0-9a-fa-f]+/ cdata = /%{[ ]*c\+\+[ ]*\n(.*?\n?)%}[ ]*(c\+\+)?/s include = /\#include[ \t]+"[^"\n]+"/ nativeid = /[^()\n]+(?=\))/ iid = /[0-9a-fa-f]{8}-[0-9a-fa-f]{
4}-[0-9a-fa-f]{
4}-[0-9a-fa-f]{12}/ identifier = /unsigned long long|unsigned short|unsigned long|long long|[a-za-z][a-za-z_0-9]*/ ...
Xray vision
that the object will behave as its specification defines: // chrome code var sandboxscript = 'date.prototype.getfullyear = function() {return 1000};' + 'var date = new date(); '; var sandbox = components.utils.sandbox("https://example.org/"); components.utils.evalinsandbox(sandboxscript, sandbox); // date objects are xrayed console.log(sandbox.date.getfullyear()); // -> 201
4 // but you can waive xray vision console.log(components.utils.waivexrays(sandbox.date).getfullyear()); // -> 1000 to test out examples like this, you can use the scratchpad in browser context for the code snippet, and the browser console to see the expected output.
...roperties on the object that shadow properties // on the prototype will show the original 'native' version console.log("2) property that shadows the prototype:"); console.log(sandbox.me.constructor); // -> function() // 3) value properties defined by assignment to this are visible: console.log("3) value property defined by assignment to this:"); console.log(sandbox.me.firstname); // -> "joe" //
4) value properties defined using defineproperty are visible: console.log("
4) value property defined by defineproperty"); console.log(sandbox.me.lastname); // -> "smith" // 5) accessor properties are not visible console.log("5) accessor property"); console.log(sandbox.me.middlename); // -> undefined // 6) accessing a value property of a value-property object is fine console.log("6) value property...
...onsole.log(components.utils.waivexrays(sandbox.me).tosource()); // -> "not what you expected?" console.log("2) property that shadows the prototype:"); console.log(components.utils.waivexrays(sandbox.me).constructor); // -> "not a constructor" console.log("3) accessor property"); console.log(components.utils.waivexrays(sandbox.me).middlename); // -> "wait, is this really a getter?" console.log("
4) call a function defined on the object"); console.log(components.utils.waivexrays(sandbox.me).fullname()); // -> "joe smith" ...
Mail and RDF
msgaccounts:/ +-- http://home.netscape.com/nc-rdf#child --> | imap://alecf@imap.mywork.com | +-- http://home.netscape.com/nc-rdf#isserver --> "true" | +-- http://home.netscape.com/nc-rdf#child --> | imap://alecf@imap.mywork.com/inbox | +-- http://home.netscape.com/nc-rdf#totalmessages --> "
4" | +-- http://home.netscape.com/nc-rdf#isserver --> "false" | +-- http://home.netscape.com/nc-rdf#messagechild --> | | imap_message://alecf@imap.mywork.com/inbox#1 | +-- http://home.netscape.com/nc-rdf#messagechild --> | | imap_message://alecf@imap.mywork.com/inbox#2 | +-- http://home.netscape.com/nc-rdf#messagechild --> | ...
... | imap_message://alecf@imap.mywork.com/inbox#3 | +-- http://home.netscape.com/nc-rdf#messagechild --> | imap_message://alecf@imap.mywork.com/inbox#
4 | etc...
... alec flett last modified: thu oct 7 11:33:
42 pdt 1999 ...
Using the Multiple Accounts API
incoming server 1 (imap.mywork.com imap server, my work account) | +- identity 1 (alec flett <alecf@mywork.com>) +- account 2 | +- incoming server 2 (pop.myisp.com pop server, my isp account) | +- identity 2 (alec flett <alecf@myisp.com>) +- account 3 | +- incoming server 3 (news.myisp.com nntp server, my isp's server) | +- identity 3 (alec flett <alecfnospam@myisp.com>) +- account
4 +- incoming server
4 (news.mozilla.org nntp server, mozilla devel) +- identity 2 (alec flett <alecf@myisp.com>) +- identity 3 (alec flett <alecfnospam@myisp.com>) this is the internal structure that the mail client maintains, but it is presented to the user in a few different ways.
...er.accounts", "account1,account2,account3"); user_pref("mail.account.account1.server", "server1"); user_pref("mail.account.account1.identities", "id1"); user_pref("mail.account.account2.server", "server2"); user_pref("mail.account.account2.identities", "id3"); user_pref("mail.account.account3.server", "server3"); user_pref("mail.account.account3.identities", "id3"); user_pref("mail.account.account
4.server", "server
4"); user_pref("mail.account.account
4.identities", "id2,id3"); user_pref("mail.server.server1.hostname", "imap.mywork.com"); user_pref("mail.server.server2.hostname", "pop.myisp.com"); user_pref("mail.server.server3.hostname", "news.myisp.com"); user_pref("mail.server.server
4.hostname", "news.mozilla.org"); user_pref("mail.identity.id1.useremail", "alecf@mywork.com"); user_pref("m...
... preference: mail.identity.identity.bcc_other_list - comma-seperated list of other addresses to bcc preference: mail.identity.identity.draft_folder - uri of folder to use for drafts preference: mail.identity.identity.stationary_folder - uri of folder to use for stationary (called templates in
4.x) preference: mail.identity.identity.spam_folder - uri of folder to use for spam (i think this is cut) ...
Using the Mozilla symbol server
symbols are available for at least 30 previous days worth of nightly builds, and firefox releases from 2.0.0.
4.
... symchk: failed files =
4 symchk: passed + ignored files = 179 downloading symbols on linux / mac os x if you are on linux and running gdb 7.9 or newer, you can use this gdb python script to automatically fetch symbols.
...the rest of values are based on the contents of the application.ini file under the [app] heading: for example, the thunderbird 3.1b2 release with name=thunderbird, version=3.1b2, buildid=20100
430125
415 would have a filename of "thunderbird-3.1b2-linux-20100
430125
415-symbols.txt" under the thunderbird directory at symbols.mozilla.org.
Using js-ctypes
note: this example will not work on 6
4bit os x, see below for core foundation for 6
4bit 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", /* f...
... standard alert in 6
4bit os x carbon is not available in 6
4bit versions of os x, therefore core foundation must be used.
...cfindex // numchars ); // helper functions function makecfstr(jsstr) { // js str is just a string // returns a cfstr that must be released with cfrelease when done return cfstringcreatewithcharacters(null, jsstr, jsstr.length); } // main var mycfstrs = { head: makecfstr('core foundation says...'), body: makecfstr('we just called the equivalent of the "standardalert carbon function" for 6
4bit osx from javascript!') }; var rez = cfusernotificationdisplaynotice(0, kcfusernotificationcautionalertlevel, null, null, null, mycfstrs.head, mycfstrs.body, null); console.info('rez:', rez, rez.tostring(), uneval(rez)); // cfusernotificationdisplaynotice does not block till user clicks dialog, it will return immediately if (rez.tostring() == '0') { console.log('notification was succesful...
Plugin Roadmap for Firefox - Plugins
schedule june 2016 starting with firefox
47 in june 2016, all plugins other than adobe flash are click-to-activate.
...in addition, the 6
4-bit firefox for windows only supports the flash plugin.
... see also mozilla firefox october 2015 - npapi plugins in firefox july 2016 - reducing adobe flash usage in firefox july 2017 - firefox roadmap for flash end-of-life adobe flash november 2015 - flash, html5 and open web standards july 2017 - flash & the future of interactive content google chrome flash roadmap sep 2013 - saying goodbye to our old friend npapi may 201
4 - update on npapi deprecation november 201
4 - the final countdown for npapi august 2016 - flash and chrome december 2016 - roll-out plan for html5 by default july 2017 - saying goodbye to flash in chrome microsoft edge and internet explorer april 2016 - putting users in control of flash december 2016 - extending user control of flash with click-to-run july 2017 - flash on windows timel...
Examine and edit CSS - Firefox Developer Tools
if you enter var( into a property value and then type a dash (-), any variables you have declared in your css will then appear in an autocomplete list, which shows a color swatch so you can see exactly what color each variable choice is storing (bug 1
451211).
... in addition, hovering over a css variable name brings up a tooltip showing what color value is stored in that variable (bug 1
4319
49).
...for example, copying the changes in the preceding image, you get the following: .text-content p { box-sizing:border-box; max-width:2
4rem; text-decoration: underline; color: cadetblue; font-weight: bold; } add rules you can add new rules in the rules view.
Call Tree - Firefox Developer Tools
for example, we can expand the entry for bubblesort(): so we can see the call graph is like this: sortall() -> sort() -> bubblesort() note also that self cost for sort() here is 1.
45%, and note that this is the same as for the separate entry for sort() later in the list.
... with this kind of digging, we can figure out the whole call graph, with associated sample count: sortall() // 8 -> sort() // 37 -> bubblesort() // 13
45 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 103 -> partition() // 12 platform data you'll also see some rows labeled gecko, input & events, and so on.
...let's expand that: this result is telling us that 61
4 of those samples, or about 20% of the total cost, are coming from our sort() call.
Flame Chart - Firefox Developer Tools
the screenshot above covers the period from 1
435ms to a little past 1
465ms.
...in the call tree page, we figured out that the program call graph in that profile, and the associated sample count, looked like this: sortall() // 8 -> sort() // 37 -> bubblesort() // 13
45 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 103 -> partition() // 12 first, we'll just select the whole section in which the program was active: at the top, colored purple, is the sortall() call, running throughout the program from start to finish.
... let's zoom in: this slice is about 1
40 ms long, and shows us more details of the functions being called by sort().
The JavaScript input interpreter - Firefox Developer Tools
instant evaluation this feature is available in firefox nightly, in versions labeled 7
4 and later.
...for example, if you type "2+2 <enter>", then "$_ <enter>", the console will print
4.
... pprint() obsolete since gecko 7
4 formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
AesGcmParams - Web APIs
the bit length of additionaldata must be ≤ 26
4-1.
... according to the web crypto specification this must have one of the following values: 32, 6
4, 96, 10
4, 112, 120, or 128.
... the aes-gcm specification recommends that it should be 96, 10
4, 112, 120 or 128, although 32 or 6
4 bits may be acceptable in some applications: appendix c of the specification provides additional guidance here.
AnalyserNode.fftSize - Web APIs
must be a power of 2 between 252^5 and 2152^15, so one of: 32, 6
4, 128, 256, 512, 102
4, 20
48,
4096, 8192, 1638
4, and 32768.
... defaults to 20
48.
... analyser.fftsize = 20
48; var bufferlength = analyser.frequencybincount ; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationframe(draw); analyser.getbytetimedomaindata(dataarray); canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, ...
AnalyserNode - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect...
... x="151" y="1" width="90" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="2
41,25 251,20 251,30 2
41,25" stroke="#d
4dde
4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="3
41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;}...
... analyser.fftsize = 20
48; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // get a canvas defined with id "oscilloscope" var canvas = document.getelementbyid("oscilloscope"); var canvasctx = canvas.getcontext("2d"); // draw an oscilloscope of the current audio source function draw() { requestanimationframe(draw); analyser.ge...
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 1
40" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121...
...,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="2
41,25 251,20 251,30 2
41,25" stroke="#d
4dde
4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="2
40" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="
401" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...no,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d
4dde
4" fill="none"/><line x1="531" y1="25" x2="561" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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 indic...
AudioNode - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect...
... x="151" y="1" width="90" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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: 20
48, maxdecibels: -25, mindecibels: -60, smoothingtimeconstant: 0.5, }); // factory method const analysernode = audioctx.createanalyser(); analysernode.fftsize = 20
48; 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 const...
AudioProcessingEvent - Web APIs
note: as of the august 29 201
4 web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audioworklet.
...ample, 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
4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(
4096, 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...
...ontains 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
4096 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); ...
AuthenticatorResponse.clientDataJSON - Web APIs
challenge the base6
4url 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 base6
4url encoding of the token binding id which was used for the communication.
...rraybuffertostr(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); // base6
4 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.
BluetoothDevice - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"...
...><rect x="151" y="1" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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?
... non-standard chrome os properties these properties were only implemented on google’s chrome os
45 and removed from chrome 52.
characteristic - Web APIs
full support ≤79notes notes windows 10.firefox no support noie no support noopera full support
44notes full support
44notes notes macos only.
... full support
44notes disabled notes linux and versions of windows earlier than 10.disabled from version
44: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... 57notes notes windows 10.safari no support nowebview android no support nochrome android full support 57firefox android no support noopera android full support
44safari ios no support nosamsung internet android full support 7.0legend full support full support no support no supportexperimental.
readValue() - Web APIs
full support ≤79notes notes windows 10.firefox no support noie no support noopera full support
44notes full support
44notes notes macos only.
... full support
44notes disabled notes linux and versions of windows earlier than 10.disabled from version
44: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... 57notes notes windows 10.safari no support nowebview android no support nochrome android full support 57firefox android no support noopera android full support
44safari ios no support nosamsung internet android full support 7.0legend full support full support no support no supportexperimental.
value - Web APIs
full support ≤79notes notes windows 10.firefox no support noie no support noopera full support
44notes full support
44notes notes macos only.
... full support
44notes disabled notes linux and versions of windows earlier than 10.disabled from version
44: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... 57notes notes windows 10.safari no support nowebview android no support nochrome android full support 57firefox android no support noopera android full support
44safari ios no support nosamsung internet android full support 7.0legend full support full support no support no supportexperimental.
writeValue() - Web APIs
full support ≤79notes notes windows 10.firefox no support noie no support noopera full support
44notes full support
44notes notes macos only.
... full support
44notes disabled notes linux and versions of windows earlier than 10.disabled from version
44: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... 57notes notes windows 10.safari no support nowebview android no support nochrome android full support 57firefox android no support noopera android full support
44safari ios no support nosamsung internet android full support 7.0legend full support full support no support no supportexperimental.
Using the CSS Typed Object Model - Web APIs
it is a class that defines numbers with units of measurement like 20px,
40%, 200ms, or 7.
...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%, 16%); --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/16793/magicwand.png) var(--maincolor); border:
4px solid var(--maincolor); border-radius: 2px; fo...
... had we added translate(), skew(), and rotate() transform functions, the length would have been
4, each with their own x, y, z values, and each with an .is2d property.
CanvasRenderingContext2D.ellipse() - Web APIs
examples drawing a full ellipse this example draws an ellipse at an angle of π/
4 radians (
45°).
... html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi /
4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with varying properties.
...anvas"></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(2
40, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.lineDashOffset - Web APIs
the second has a dash offset of
4.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([
4, 16]); // 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 > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linedashoffset' in that specification.
CanvasRenderingContext2D.resetTransform() - Web APIs
html <canvas id="canvas"></canvas> javascript the rotate() method rotates the transformation matrix by
45°.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(
45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(
40,
40, 50, 20); ctx.fillrect(
40, 90, 50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(
40,
40, 50, 20); ctx.fillrect(
40, 90, 50, 20); result the skewed rectangles are gray, and the non-skewed rectangles are red.
Manipulating video using canvas - Web APIs
<!doctype html> <html> <head> <style> body { background: black; color:#cccccc; } #c2 { background-image: 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.mp
4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canvas> </div> <script type="text/javascript" src="...
... processor.computeframe = function computeframe() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getimagedata(0, 0, this.width, this.height); let l = frame.data.length /
4; for (let i = 0; i < l; i++) { let r = frame.data[i *
4 + 0]; let g = frame.data[i *
4 + 1]; let b = frame.data[i *
4 + 2]; if (g > 100 && r > 100 && b <
43) frame.data[i *
4 + 3] = 0; } this.ctx2.putimagedata(frame, 0, 0); return; } when this routine is called, the video element is displaying the most recent frame of video data, which looks li...
... line
4 computes the number of pixels in the image by dividing the total size of the frame's image data by four.
Drawing text - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '
48px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '
48px serif'; ctx.stroketext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size.
... a textbaseline example edit the code below and see your changes update live in the canvas: ctx.font = '
48px serif'; ctx.textbaseline = 'hanging'; ctx.stroketext('hello world', 0, 100); playable code <canvas id="canvas" width="
400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "
48px serif"; ctx.textbaseline...
Comment - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25
406,20
406,30 396,25" stroke="#d
4dde
4" fill="none...
..."/><line x1="
406" y1="25" x2="
436" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="
436" y="1" width="75" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
ConvolverNode() - Web APIs
options optional options are as follows: audiobuffer: a mono, stereo, or
4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the reverb effect.
...pera for androidsafari on iossamsung internetconvolvernode() constructorchrome full support 55edge full support ≤79firefox full support 53ie no support noopera full support
42safari ?
... webview android full support 55chrome android full support 55firefox android full support 53opera android full support
42safari ios ?
DOMException - Web APIs
(legacy code value:
4 and legacy constant name: wrong_document_err) invalidcharactererror the string contains invalid characters.
...(legacy code value: 1
4 and legacy constant name: namespace_err) invalidaccesserror the object does not support the operation or argument.
...(legacy code value: 2
4 and legacy constant name: invalid_node_type_err) datacloneerror the object can not be cloned.
DOMHighResTimeStamp - Web APIs
// reduced time precision (2ms) in firefox 60 event.timestamp // 151921180993
4 // 1519211810362 // 1519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled event.timestamp; // 1519129853500 // 1519129858900 // 151912986
4400 // ...
...t 15safari full support 8webview android full support yeschrome android full support 18firefox android full support 15opera android full support 1
4safari ios full support 9samsung internet android full support 1.0legend full support full support ...
Document.cookie - Web APIs
;max-age=max-age-in-seconds (e.g., 60*60*2
4*365 or 31536000 for a year) ;expires=date-in-gmtstring-format if neither expires nor max-age specified it will expire at the end of session.
... function doonce() { if (!document.cookie.split('; ').find(row => row.startswith('dosomethingonlyonce'))) { alert("do something here!"); document.cookie = "dosomethingonlyonce=true; expires=fri, 31 dec 9999 23:59:59 gmt"; } } <button onclick="doonce()">only do something once</button> example #
4: reset the previous cookie function resetonce() { document.cookie = "dosomethingonlyonce=; expires=thu, 01 jan 1970 00:00:00 gmt"; } <button onclick="resetonce()">reset only once cookie</button> example #5: check a cookie existence //es5 if (document.cookie.split(';').some(function(item) { return item.trim().indexof('reader=') == 0 })) { console.log('the cookie "reader" exists (e...
... reason for the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, localstorage): the server tells the client to store a cookie http/1.0 200 ok content-type: text/html set-cookie: cookie_name1=cookie_value1 set-cookie: cookie_name2=cookie_value2; expires=sun, 16 jul 3567 06:23:
41 gmt [content of the page here] the client sends back to the server its cookies previously stored get /sample_page.html http/1.1 host: www.example.org cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 accept: */* specifications specification status comment document object model (dom) level 2 html specificationthe definition of 'document.cookie' in th...
Document.execCommand() - Web APIs
the grabber is disabled by default since firefox 6
4 (bug 1
4906
41).
...the controls are disabled by default since firefox 6
4 (bug 1
4906
41).
...the handles are disabled by default since firefox 6
4 (bug 1
4906
41).
Examples of web and XML development using the DOM - Web APIs
", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba71
41ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba71
41ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba71
41ed1.gif" style="height: 50px; width: 500px;"> </p>...
...in the next example (see example
4), you can use stylesheets and their rules to change styles for whole documents.
...title>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example
4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document.
DynamicsCompressorNode.knee - Web APIs
the knee property's default value is 30 and it can be set between 0 and
40.
... syntax var audioctx = new audiocontext(); var compressor = audioctx.createdynamicscompressor(); compressor.knee.value =
40; value an audioparam.
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(
40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == '...
EffectTiming.easing - Web APIs
accepts several pre-defined domstring values, a steps() timing function like steps(5, end), or a custom cubic-bezier value like cubic-bezier(0.
42, 0, 0.58, 1).
...equivalent to cubic-bezier(0.
42, 0, 1, 1).
...equivalent to cubic-bezier(0.
42, 0, 0.58, 1).
Element.classList - Web APIs
see https://bugzilla.mozilla.org/show_bug.cgi?id=81
401
4 polyfill the legacy onpropertychange event can be used to create a living classlist mockup thanks to a element.prototype.classname property that fires the specified event once it is changed.
...string.prototype.trim polyfill if (!"".trim) string.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // prevent global namespace pollution if(!window.domexception) (domexception = function(reason){this.message = reason}).prototype = new error; var wsre = /[\11\12\1
4\15\
40]/, wsindex = 0, checkifvalidclasslistentry = function(o, v) { if (v === "") throw new domexception( "failed to execute '" + o + "' on 'domtokenlist': the token provided must not be empty." ); if((wsindex=v.search(wsre))!==-1) throw new domexception("failed to execute '"+o+"' on 'domtokenlist': " + "the token provided ('"+v[wsindex]+"') contains html space characters, which are n...
... living standard initial definition dom
4the definition of 'element.classlist' in that specification.
Element.scroll() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollchrome full support
45edge full support 79firefox full support 36ie no support noopera full support 32safari full support 10webview android full support ...
...
45chrome android full support
45firefox android full support 36opera android full support 32safari ios no support nosamsung internet android full support 5.0scrolltooptions parameterchrome full support
45edge full support 79firefox full support yesie no support noopera full support 32safari no support n...
...owebview android full support
45chrome android full support
45firefox android full support yesopera android full support 32safari ios no support nosamsung internet android full support 5.0legend full support full support no support no support ...
Element.scrollTo() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrolltochrome full support
45edge full support 79firefox full support 36ie no support noopera full support 32safari full support 10webview android full support ...
...
45chrome android full support
45firefox android full support 36opera android full support 32safari ios no support nosamsung internet android full support 5.0scrolltooptions parameterchrome full support
45edge full support 79firefox full support yesie no support noopera full support 32safari no support n...
...owebview android full support
45chrome android full support
45firefox android full support yesopera android full support 32safari ios no support nosamsung internet android full support 5.0legend full support full support no support no support ...
Event.eventPhase - Web APIs
example html <h
4>event propagation chain</h
4> <ul> <li>click 'd1'</li> <li>analyse event propagation chain</li> <li>click next div and repeat the experience</li> <li>change capturing mode</li> <li>repeat the experience</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d
4">d
4</div> ...
... </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding:
4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { d.removeeventlistener("click", ondivclick, true) d.removeeventlisten...
... living standard dom
4the definition of 'event.eventphase' in that specification.
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:
460px; } .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 = ...
... // for illustration only: note "mistake" of [j] for [i] thus causing desired events to all attach to same element // case 3 for(let i=0, j=0 ; i<els.length ; i++){ /* do lots of stuff with j */ els[j].addeventlistener("click", processevent = function(e){/*do something*/}, false); } // case
4 for(let i=0, j=0 ; i<els.length ; i++){ /* do lots of stuff with j */ function processevent(e){/*do something*/}; els[j].addeventlistener("click", processevent, false); } improving scrolling performance with passive listeners according to the specification, the default value for the passive option is always false.
... living standard dom
4the definition of 'eventtarget.addeventlistener()' in that specification.
ExtendableEvent - Web APIs
note: the behaviour described in the above paragraph was fixed in firefox
43 (see bug 118027
4.) this interface inherits from the event interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571
428571
428571%; 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/extendableevent" ta...
...rget="_top"><rect x="116" y="1" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
Using Fetch - Web APIs
the fetch specification differs from jquery.ajax() in three main ways: the promise returned from fetch() won’t reject on http error status even if the response is an http
40
4 or 500.
...errerpolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url body: json.stringify(data) // body data type must match "content-type" header }); return response.json(); // parses json response into native javascript objects } postdata('https://example.com/answer', { answer:
42 }) .then(data => { console.log(data); // json data parsed by `data.json()` call }); note that mode: "no-cors" only allows a limited set of headers in the request: accept accept-language content-language content-type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain sending a request with credentials included to cause browsers to send a reque...
... yield chunk.substr(startindex); } } async function run() { for await (let line of maketextfilelineiterator(urloffile)) { processline(line); } } run(); checking that the fetch was successful a fetch() promise will reject with a typeerror when a network error is encountered or cors is misconfigured on the server-side, although this usually means permission issues or similar — a
40
4 does not constitute a network error, for example.
Using files from web applications - Web APIs
size the size of the file in bytes as a read-only 6
4-bit integer.
...() { let nbytes = 0, ofiles = this.files, nfiles = ofiles.length; for (let nfileid = 0; nfileid < nfiles; nfileid++) { nbytes += ofiles[nfileid].size; } let soutput = nbytes + " bytes"; // optional code for multiples approximation const amultiples = ["kib", "mib", "gib", "tib", "pib", "eib", "zib", "yib"]; for (nmultiple = 0, napprox = nbytes / 102
4; napprox > 1; napprox /= 102
4, nmultiple++) { soutput = napprox.tofixed(3) + " " + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code document.getelementbyid("filenum").innerhtml = nfiles; document.getelementbyid("filesize").innerhtml = soutput; } document.getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script> ...
... <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="application/javascript"> function sendfile(file) { const uri = "/index.php"; const xhr = new xmlhttprequest(); const fd = new formdata(); xhr.open("post", uri, true); xhr.onreadystatechange = function() { if (xhr.readystate ==
4 && xhr.status == 200) { alert(xhr.responsetext); // handle response.
File.lastModified - Web APIs
const filewithdate = new file([], 'file.bin', { lastmodified: new date(2017, 1, 1), }); console.log(filewithdate.lastmodified); //returns 1
485903600000 const filewithoutdate = new file([], 'file.bin'); console.log(filewithoutdate.lastmodified); //returns current time reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodified might get rounded depending on browser settings.
... // reduced time precision (2ms) in firefox 60 somefile.lastmodified; // 151921180993
4 // 1519211810362 // 1519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled somefile.lastmodified; // 1519129853500 // 1519129858900 // 151912986
4400 // ...
FileSystem - Web APIs
-standard name: domfilesystemchrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: domfilesystemfirefox android full support 50opera android full support 1
4prefixed full support 1
4prefixed prefixed implemented with the vendor prefix: webkitsafari ios full support 11.3samsung internet android full support 1.0prefixed full support 1.0prefixed prefixed implemented with the v...
... 15safari full support 11.1webview android full support ≤37chrome android full support 18firefox android full support 50opera android full support 1
4safari ios full support 11.3samsung internet android full support 1.0rootchrome full support 7edge full support ≤18firefox full support 50ie no support ...
... 15safari full support 11.1webview android full support ≤37chrome android full support 18firefox android full support 50opera android full support 1
4safari ios full support 11.3samsung internet android full support 1.0legend full support full support no support no supportsee implementation notes.see implementation notes...
FileSystemSync - Web APIs
fixed implemented with the vendor prefix: webkitchrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webkitfirefox android no support noopera android full support 1
4prefixed full support 1
4prefixed 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 ...
...t 15safari full support 6webview android full support ≤37chrome android full support 18firefox android no support noopera android full support 1
4safari ios full support 6samsung internet android full support 1.0root non-standardchrome full support 13edge full support ≤79firefox no support noie no supp...
...t 15safari full support 6webview android full support ≤37chrome android full support 18firefox android no support noopera android full support 1
4safari ios full support 6samsung internet android full support 1.0legend full support full support no support no supportnon-standard.
Using the Gamepad API - Web APIs
this is not strictly specified, but in firefox it will contain three pieces of information separated by dashes (-): two
4-digit hexadecimal strings containing the usb vendor and product id of the controller, and the name of the controller as provided by the driver.
... in current versions of chrome (version 3
4 as of this writing) the button values are stored as an array of double values, instead of gamepadbutton objects.
... var pct = math.round(val * 100) + "%"; b.style.backgroundsize = pct + " " + pct; if (pressed) { b.classname = "button pressed"; } else { b.classname = "button"; } } var axes = d.getelementsbyclassname("axis"); for (i = 0; i < controller.axes.length; i++) { var a = axes[i]; a.innerhtml = i + ": " + controller.axes[i].tofixed(
4); a.setattribute("value", controller.axes[i] + 1); } } requestanimationframe(updatestatus); } function scangamepads() { var gamepads = navigator.getgamepads ?
HTMLDocument - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="3
46,25 356,20 356,30 3
46,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="356" y1="25" x2="386" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
HTMLImageElement.height - Web APIs
one is 200px wide and the other is
400px wide.
... html specifically, for viewports up to
400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px.
... <p>image height: <span class="size">?</span>px (resize to update)</p> <img src="/files/17373/clock-demo-200px.png" alt="clock" srcset="/files/17373/clock-demo-200px.png 200w, /files/1737
4/clock-demo-
400px.png
400w" sizes="(max-width:
400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn.
HTMLImageElement.width - Web APIs
one is 200px wide and the other is
400px wide.
... html specifically, for viewports up to
400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at
400px.
... <p>image width: <span class="size">?</span>px (resize to update)</p> <img src="/files/1686
4/clock-demo-200px.png" alt="clock" srcset="/files/1686
4/clock-demo-200px.png 200w, /files/16797/clock-demo-
400px.png
400w" sizes="(max-width:
400px) 200px,
400px"> javascript the javascript code looks at the width to determine the width of the image at the moment.
HTMLTimeElement.dateTime - Web APIs
the format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid month string yyyy-mm 2011-11, 2013-05 valid date string yyyy-mm-dd 1887-12-01 valid yearless date string mm-dd 11-12 valid time string hh:mm hh:mm:ss hh:mm:ss.mmm 23:59 12:15:
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 19
41-03-15 07:06:23.678 2013-12-25t11:12 1972-07-25t13:
43:07 19
41-03-15t07:06:23.678 valid time-zone offset string z +...
...hhmm +hh:mm -hhmm -hh:mm z +0200 +0
4: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+0
4:30 19
41-03-15 07:06:23.678z 2013-12-25t11:12-08:00 valid week string yyyy-www 2013-w
46 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.56s pt7h12m13.999s 7d 5h 2
4m 13s s...
...yntax 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 3
4m 5s"; specifications specification status comment html living standardthe definition of 'htmltimeelement' in that specification.
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 6
40k characters on the serialized representation of a state object.
... note: in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) through gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), the passed object is serialized using json.
... note: in gecko 2.0 (firefox
4 / thunderbird 3.3 / seamonkey 2.1) through gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), the passed object is serialized using json.
IDBCursor.delete() - Web APIs
mlist'], 'readwrite'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { if(cursor.value.albumtitle === 'grace under pressure') { var request = cursor.delete(); request.onsuccess = function() { console.log('deleted that mediocre album from 198
4.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBDatabase.close() - Web APIs
syntax idbdatabase.close(); example // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); // opening a database.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclosechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...t 15safari full support 7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBDatabase.name - Web APIs
// let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...t 15safari full support 7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBDatabase.objectStoreNames - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorenameschrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...t 15safari full support 7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBDatabaseException - Web APIs
constraint_err
4 a mutation operation in the transaction failed because a constraint was not satisfied.
... 12prefixed full support 12prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support
4 — 1
4ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android no support
4 �...
...�� 1
4opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportnon-standard.
IDBObjectStore.clear() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclearchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBObjectStore.delete() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletechrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBObjectStore.get() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBObjectStore.getKey() - Web APIs
quest.onsuccess = (event) => { let db = event.target.result; let store = db.transaction("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.target.result; alert("the 1st activity in last 2
4 hours was occurred at " + when); }; }; specifications specification status comment indexed database api draftthe definition of 'getkey()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkeychrome full support
48edge full support ≤79firefox full support 51ie ?
... opera full support
45safari full support 10.1webview android full support
48chrome android full support
48firefox android full support 58opera android full support
43safari ios full support 10.3samsung internet android full support 5.0legend full support full support compatibility unknown ...
IDBOpenDBRequest.onblocked - Web APIs
}; example var db; // let us open our database var request = indexeddb.open("todolist",
4); // these two event handlers act on the database being opened // successfully, or not request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonblockedchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...: webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support ...
IDBOpenDBRequest - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rec...
...t x="151" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d
4dde
4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-ev...
...for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); // these event handlers act on the database being opened.
IDBRequest - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rec...
...t x="151" y="1" width="100" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from eventtarget.
...for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist",
4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database.
IIRFilterNode() - Web APIs
examples let feedforward = [0.00020298, 0.000
4059599, 0.00020298]; let feedbackward = [1.012696
4558, -1.9991880801, 0.9873035
442]; 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 'ii...
... 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support
42safari ?
...9, the default values were not supported.chrome android full support 55notes full support 55notes notes before version 59, the default values were not supported.firefox android full support 53opera android full support
42safari ios ?
ImageData() - Web APIs
errors thrown indexsizeerror thrown if array is specified, but its length is not a multiple of (
4 * width) or (
4 * width * height).
... html <canvas id="canvas"></canvas> javascript the array (arr) has a length of
40000: it consists of 10,000 pixels, each of which is defined by
4 values.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const arr = new uint8clampedarray(
40000); // iterate through every pixel for (let i = 0; i < arr.length; i +=
4) { arr[i + 0] = 0; // r value arr[i + 1] = 190; // g value arr[i + 2] = 0; // b value arr[i + 3] = 255; // a value } // initialize a new imagedata object let imagedata = new imagedata(arr, 200); // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result specification specification status comment html living standardthe definition of 'imagedata()' in that specification.
ImageData.data - Web APIs
the data array stores four values for each pixel, making
4 x 10,000, or
40,000 values in all.
... let imagedata = new imagedata(100, 100); console.log(imagedata.data); // uint8clampedarray[
40000] console.log(imagedata.data.length); //
40000 filling a blank imagedata object this example creates and fills a new imagedata object with colorful pixels.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i +=
4) { // percentage in the x direction, times 255 let x = (i %
400) /
400 * 255; // percentage in the y direction, times 255 let y = math.ceil(i /
400) / 100 * 255; // modify pixel data imagedata.data[i + 0] = x; // r value imagedata.data[i + 1] = y; // g value imagedata.data[i + 2] = 255 - x; // b value imagedata.data[i + 3] = 255; // a value } // draw image ...
Basic concepts - Web APIs
<iframe> content) can access the indexeddb store for the origin it is embedded into, unless the browser is set to never accept third party cookies (see bug 11
47821.) definitions this section defines and explains terms used in the indexeddb api.
... as of firefox
40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers.
...note, however, that locale-aware sorting has been allowed with an experimental flag enabled (currently for firefox only) since firefox
43.
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571
428571
428571%; 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,a...
...ndale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d
4dde
4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="306" y="1" width="120" heig...
...ht="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">installevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor installevent.installevent() creates a new installevent object.
compareVersion - Web APIs
-
4 registryname has a smaller (earlier) major number than version.
...
4 registryname has a larger (newer) major number than version.
... the following constants can be used to check the value returned by compareversion: int major_diff =
4; int minor_diff = 3; int rel_diff = 2; int bld_diff = 1; int equal = 0; in communicator
4.5, the following constants are defined and available for checking the value returned by compareversion: <code>installtrigger.major_diff installtrigger.minor_diff installtrigger.rel_diff installtrigger.bld_diff installtrigger.equal </code> description the compareversion method compares the version of an installed file or package with a specified version.
MediaDevices.ondevicechange - Web APIs
to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" 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: 1
4px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; 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: 160, height: 120, framerate: 30 }, audio: { samplerate:
44100, samplesize: 16, 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...
MediaKeyMessageEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediakeymessageevent() constructor experimentalchrome full support
42edge full support ≤18firefox ?
... webview android no support nochrome android full support
42firefox android ?
... samsung internet android full support
4.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
MediaKeyStatusMap.entries() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetentries experimentalchrome full support
42edge full support 16firefox ?
... webview android full support
43chrome android full support
42firefox android ?
... samsung internet android full support
4.0legend full support full support compatibility unknown compatibility unknownexperimental.
MediaKeyStatusMap.forEach() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeach experimentalchrome full support
42edge full support 13firefox ?
... webview android full support
43chrome android full support
42firefox android ?
... samsung internet android full support
4.0legend full support full support compatibility unknown compatibility unknownexperimental.
MediaKeyStatusMap.get() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetget experimentalchrome full support
42edge full support 13firefox full support yesie ?
... webview android full support
43chrome android full support
42firefox android full support yesopera android full support 29safari ios ?
... samsung internet android full support
4.0legend full support full support compatibility unknown compatibility unknownexperimental.
MediaKeyStatusMap.has() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethas experimentalchrome full support
42edge full support 13firefox full support yesie ?
... webview android full support
43chrome android full support
42firefox android full support yesopera android full support 29safari ios ?
... samsung internet android full support
4.0legend full support full support compatibility unknown compatibility unknownexperimental.
MediaKeyStatusMap.keys() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeys experimentalchrome full support
42edge full support 16firefox ?
... webview android full support
43chrome android full support
42firefox android ?
... samsung internet android full support
4.0legend full support full support compatibility unknown compatibility unknownexperimental.
MediaKeyStatusMap.size - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsize experimentalchrome full support
42edge full support 13firefox full support yesie ?
... webview android full support
43chrome android full support
42firefox android full support yesopera android full support 29safari ios ?
... samsung internet android full support
4.0legend full support full support compatibility unknown compatibility unknownexperimental.
MediaKeyStatusMap.values() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvalues experimentalchrome full support
42edge full support 16firefox ?
... webview android full support
43chrome android full support
42firefox android ?
... samsung internet android full support
4.0legend full support full support compatibility unknown compatibility unknownexperimental.
MediaRecorder.ignoreMutedMedia - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetignoremutedmedia deprecatednon-standardchrome no support
49 — 57edge no support nofirefox ?
... ie no support noopera no support 36 —
44safari no support nowebview android no support
49 — 57chrome android no support
49 — 57firefox android ?
... opera android no support 36 —
44safari ios no support nosamsung internet android no support 5.0 — 7.0legend no support no support compatibility unknown compatibility unknownnon-standard.
MediaRecorder.mimeType - Web APIs
if (navigator.mediadevices) { console.log('getusermedia supported.'); var constraints = { audio: true, video: true }; var chunks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var options = { audiobitspersecond: 128000, videobitspersecond: 2500000, mimetype: 'video/mp
4' } var mediarecorder = new mediarecorder(stream,options); m = mediarecorder; m.mimetype; // would return 'video/mp
4' ...
... }) .catch(function(error) { console.log(error.message); }); changing line 1
4 to the following causes mediarecorder to try to use avc constrained baseline profile level
4 for video and aac-lc (low complexity) for audio, which is good for mobile and other possible resource-constrained situations.
... mimetype: 'video/mp
4; codecs="avc1.
42
4028, mp
4a.
40.2"' assuming this configuration is acceptable to the user agent, the value returned later by m.mimetype would then be video/mp
4; codecs="avc1.
42
4028, mp
4a.
40.2".
MediaSource - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><re...
...ct x="151" y="1" width="110" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
...this example was written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp
4'; // need to be specific for blink regarding codecs // ./mp
4info frag_bunny.mp
4 | grep codec var mimecodec = 'video/mp
4; codecs="avc1.
42e01e, mp
4a.
40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('...
Recording a media element - Web APIs
<div class="bottom"> <pre id="log"></pre> </div> css content body { font: 1
4px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; display: block; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom:
4px; color: white; background-color: darkgreen; text-decoration: none; } h2 { margin-bottom:
4px; } .left { margin-right: ...
... lines 1
4-16 creates a new promise, named recorded, which is resolved when the specified number of milliseconds have elapsed.
...new blob(recordedchunks, { type: "video/webm" }); recording.src = url.createobjecturl(recordedblob); downloadbutton.href = recording.src; downloadbutton.download = "recordedvideo.webm"; log("successfully recorded " + recordedblob.size + " bytes of " + recordedblob.type + " media."); }) .catch(log); }, false); when a click event occurs, here's what happens: lines 2-
4 navigator.mediadevices.getusermedia() is called to request a new mediastream that has both video and audio tracks.
MutationEvent - Web APIs
note: mutation events (w3c dom level 3 events) have been deprecated in favor of mutation observers (w3c dom
4).
... mutation observers are the proposed replacement for mutation events in dom
4.
... they are expected to be included in firefox 1
4 and chrome 18.
Web-based protocol handlers - Web APIs
example <!doctype html public "-//w3c//dtd html
4.01//en"> <html lang="en"> <head> <title>web protocol handler sample - register</title> <script type="text/javascript"> navigator.registerprotocolhandler("web+burger", "http://www.google.co.uk/?uri=%s", "burger handler"); </script> </head> <body> <h1>web protocol handler sample</h1> <p>this web page will install a we...
... example <!doctype html public "-//w3c//dtd html
4.01//en"> <html lang="en"> <head> <title>web protocol handler sample - test</title> </head> <body> <p>hey have you seen <a href="web+burger:cheeseburger">this</a> before?</p> </body> </html> handling the next phase is handling the action.
... example <?php $value = ""; if ( isset ( $_get["value"] ) ) { $value = $_get["value"]; } ?> <!doctype html public "-//w3c//dtd html
4.01//en"> <html lang="en"> <head> <title>web protocol handler sample</title> </head> <body> <h1>web protocol handler sample - handler</h1> <p>this web page is called when handling a <code>web+burger:</code> protocol action.
Navigator - Web APIs
20181001000000 in firefox 6
4 onwards.
...this value is an approximation given by rounding to the nearest power of 2 and dividing that number by 102
4.
...in netscape
4.7x, returns "us & ca domestic policy" or "export policy".
OVR_multiview2 - Web APIs
constants this extension exposes
4 constants that can be used in getparameter() or getframebufferattachmentparameter().
...most vr headsets have two views, but there are prototypes of headset with ultra-wide fov using
4 views which is currently the maximum number of views supported by multiview.
... shader code #version 300 es #extension gl_ovr_multiview2 : require precision mediump float; layout (num_views = 2) in; in vec
4 inpos; uniform mat
4 u_viewmatrices[2]; void main() { gl_position = u_viewmatrices[gl_viewid_ovr] * inpos; } specifications specification status ovr_multiview2 community approved ...
OfflineAudioContext.OfflineAudioContext() - Web APIs
for example, a 5-second buffer with a samplerate of
48000hz would have a length of 5 *
48000 = 2
40000 sample-frames.
...the most commonly-used rate is
44100hz, which is the sample rate used by cd audio.
... example const offlinectx = new offlineaudiocontext({ numberofchannels: 2, length:
44100 *
40, samplerate:
44100, }); const source = offlinectx.createbuffersource(); // etc...
OfflineAudioContext - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><r...
...ect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,25" stroke="#d
4dde
4" fill="none"/><line x1="281" y1="25" x2="311" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; ...
... note: for a working example, see our offline-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,
44100*
40,
44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodea...
PaymentCurrencyAmount.currencySystem - Web APIs
for example, the default is urn:iso:std:iso:
4217, which specifies that the standard used is iso
4217.
... warning: this property has been removed from the specification and should no longer be used; the currency is now always specified using iso
4127.
...the default, urn:iso:std:iso:
4217, indicates the iso
4217 standard.
PerformancePaintTiming - Web APIs
style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d
4dde
4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/performancepainttiming" t...
...arget="_top"><rect x="201" y="1" width="220" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".
...the time to first-contentful-paint was 2787.
460 milliseconds.
ProcessingInstruction - Web APIs
d="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25
406,20
406,30 396,25" stroke="#d
4dde
4" fill="none...
..."/><line x1="
406" y1="25" x2="
436" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="
436" y="1" width="210" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="5
41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
PushEvent.PushEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushevent() constructor experimentalchrome full support
42edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.
... full support 17firefox 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 37safari no support nowebview android no support nochrome android full support
42firefox android full support
44 full support
44 ...
... full support
48notes notes push enabled by default.opera android full support 37safari ios no support nosamsung internet android full support
4.0legend full support full support no support no supportexperimental.
PushEvent.data - Web APIs
var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/0
4/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'data' in that specification.
... full support 17firefox full support
44notes full support
44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support
44safari no support nowebview android ...
... no support nochrome android full support 57firefox android full support
44 full support
44 full support
48notes notes push enabled by default.opera android full support
43safari ios no support nosamsung internet android full support
4.0legend full support full support no support no supportexperimental.
PushManager.hasPermission() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethaspermission experimentalchrome full support
42edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.
... full support 17firefox full support
44notes full support
44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 29safari no support nowebview android no support nochrome android full support
42firefox android full support
48notes full support
48notes n...
...otes push enabled by default.opera android full support 29safari ios no support nosamsung internet android full support
4.0legend full support full support no support no supportexperimental.
RTCIceCandidate.usernameFragment - Web APIs
note that 2
4 bits of the username fragment are required to be randomized by the browser.
... randomization at least 2
4 bits of the text in the ufrag are required to be randomly selected by the ice layer at the beginning of the ice session.
...for example, a browser might choose to always use a 2
4-character ufrag in which bit
4 of each character is randomly selected between 0 and 1.
RTCRtpReceiver.getCapabilities() static function - Web APIs
example the function below returns a boolean indicating whether or not the device supports receiving h.26
4 video on a webrtc connection.
... since rtcrtpreceiver.getcapabilities() actually only indicates probable support, attempting to receive h.26
4 video might still fail even after getting a positive response from this function.
... function canreceiveh26
4() { let capabilities = rtcrtpreceiver.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mimetype === "video/h26
4") { 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.26
4 video on an rtcrtpsender.
... since rtcrtpsender.getcapabilities() actually only indicates probable support, h.26
4 support might still fail even after getting a positive response from this function.
... function cansendh26
4() { let capabilities = rtcrtpsender.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mimetype === "video/h26
4") { return true; } }); return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.getcapabilities()' in that specification.
Request.cache - Web APIs
if there is no match, the browser will respond with a 50
4 gateway timeout status.
... ({status: 50
4}) : // workaround for chrome; which simply fails with a typeerror promise.reject(e)) .then(res => { if (res.status === 50
4) { controller.abort() controller = new abortcontroller(); return fetch("some.json", {cache: "force-cache", mode: "same-origin", signal: controller.signal}) } const date = res.headers.get("date"), dt = date ?
... new date(date).gettime() : 0 if (dt < (date.now() - 86
400000)) { // if older than 2
4 hours controller.abort() controller = new abortcontroller(); return fetch("some.json", {cache: "reload", mode: "same-origin", signal: controller.signal}) } // other possible conditions if (dt < (date.now() - 300000)) // if it's older than 5 minutes fetch("some.json", {cache: "no-cache", mode: "same-origin"}) // no cancellation or return value.
RsaHashedKeyGenParams - Web APIs
this should be at least 20
48: see for example see nist sp 800-131a rev.
...some organizations are now recommending that it should be
4096.
...you can pass any of sha-256, sha-38
4, or sha-512 here.
SVGElement - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3
41,25 351,20 351,30 3
41,25" stroke="#d
4dde
4" fill="none"/><line x1...
...="351" y1="25" x2="381" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to th...
SVGLength - Web APIs
oid converttospecifiedunits(in unsigned short unittype) 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() ...
...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.7952766
418
457, valueinspecifiedunits: 6: 1, valueasstring: 1cm value: 26.66666603088379, valueinspecifiedunits 9: 20, valueasstring: 20pt value: 26.66666603088379, valueinspecifiedunits 8: 0.277777761220932, valueasstring: 0.277778in constants name value description svg_lengthtype_unknown 0 the unit type is not one of predefined unit types.
... svg_lengthtype_exs
4 a value was specified using the ex units defined in css2.
Using server-sent events - Web APIs
event: userconnect data: {"username": "bobby", "time": "02:33:
48"} event: usermessage data: {"username": "bobby", "time": "02:3
4:11", "text": "hi everyone."} event: userdisconnect data: {"username": "bobby", "time": "02:3
4:23"} event: usermessage data: {"username": "sean", "time": "02:3
4:36", "text": "bye, bobby."} mixing and matching you don't have to use just unnamed messages or typed events; you can mix them together in a single event stream.
... event: userconnect data: {"username": "bobby", "time": "02:33:
48"} data: here's a system message of some kind that will get used data: to accomplish some task.
... event: usermessage data: {"username": "bobby", "time": "02:3
4:11", "text": "hi everyone."} ...
SourceBuffer - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><r...
...ect x="151" y="1" width="120" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
...this example was written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp
4'; // need to be specific for blink regarding codecs // ./mp
4info frag_bunny.mp
4 | grep codec var mimecodec = 'video/mp
4; codecs="avc1.
42e01e, mp
4a.
40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('...
SubtleCrypto.sign() - Web APIs
rsassa-pkcs1-v1_5 the rsassa-pkcs1-v1_5 algorithm is specified in rfc 3
447.
... rsa-pss the rsa-pss algorithm is specified in rfc 3
447.
...*/ function getmessageencoding() { const messagebox = document.queryselector(".ecdsa #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( { name: "ecdsa", hash: {name: "sha-38
4"}, }, privatekey, encoded ); hmac this code fetches the contents of a text box, encodes it for signing, and signs it with a secret key.
SyncEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571
428571
428571%; 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text><...
.../a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d
4dde
4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="351" y="30" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">syncevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor syncevent.syncevent() creates a new syncevent object.
Text - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25
406,20
406,30 396,25" stroke="#d
4dde
4" fill="none...
..."/><line x1="
406" y1="25" x2="
436" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="
436" y="1" width="75" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
Multi-touch interaction - Web APIs
<style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } #target
4 { background: white; border: 1px solid black; } </style> global state tpcache is used to cache touch points for processing outside of the event where they were fired.
...lers(name) { // install event handlers for the given element var el=document.getelementbyid(name); el.ontouchstart = start_handler; el.ontouchmove = move_handler; // use same handler for touchcancel and touchend el.ontouchcancel = end_handler; el.ontouchend = end_handler; } function init() { set_handlers("target1"); set_handlers("target2"); set_handlers("target3"); set_handlers("target
4"); } move/pinch/zoom handler this function provides very basic support for 2-touch horizontal move/pinch/zoom handling.
... <div id="target1"> tap, hold or swipe me 1</div> <div id="target2"> tap, hold or swipe me 2</div> <div id="target3"> tap, hold or swipe me 3</div> <div id="target
4"> tap, hold or swipe me
4</div> <!-- ui for logging/bebugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <output></output> miscellaneous functions these functions support the application but aren't directly involved with the event flow.
URLSearchParams.set() - Web APIs
line #
41: comment out this line to stop dumping the search parameters to the console (debug).
... line #
43: dumps the generated object and it's string representation to the console (info).
... line #
44: tries to automatically open a new window/tab with the generated url (when uncommented).
WEBGL_draw_buffers - Web APIs
ext.color_attachment0_webgl ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment
4_webgl ext.color_attachment5_webgl ext.color_attachment6_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_attachment1
4_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_buffer
4_webgl ext.draw_buffer5_webgl ext.draw_buffer6_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_buffer1
4_webgl ext.draw_buffer15_webgl a glenum returning a draw buffer.
...rswebgl([ ext.color_attachment0_webgl, // gl_fragdata[0] ext.color_attachment1_webgl, // gl_fragdata[1] ext.color_attachment2_webgl, // gl_fragdata[2] ext.color_attachment3_webgl // gl_fragdata[3] ]); shader code that writes to multiple textures: <script type="x-shader/x-fragment"> #extension gl_ext_draw_buffers : require precision highp float; void main(void) { gl_fragdata[0] = vec
4(0.25); gl_fragdata[1] = vec
4(0.5); gl_fragdata[2] = vec
4(0.75); gl_fragdata[3] = vec
4(1.0); } </script> specifications specification status comment webgl_draw_buffersthe definition of 'webgl_draw_buffers' in that specification.
WaveShaperNode.WaveShaperNode() - Web APIs
valid values are 'none', '2x', or '
4x'.
... 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support
42safari ?
...59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support
42safari ios ?
WebGL2RenderingContext.texImage3D() - Web APIs
gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rgui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb5_a1 gl.rgba
4444 gl.rgba16f gl.rgba32f gl.rgba8ui width a glsizei specifying the width of the texture.
... gl.unsigned_short_
4_
4_
4_
4:
4 red bits,
4 green bits,
4 blue bits,
4 alpha bits.
... gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev gl.unsigned_int_2
4_8 gl.float_32_unsigned_int_2
4_8_rev (pixels must be null) source one of the following objects can be used as a pixel source for the texture: arraybufferview, imagebitmap, imagedata, htmlimageelement, htmlcanvaselement, htmlvideoelement.
WebGL2RenderingContext - Web APIs
uniforms and attributes webgl2renderingcontext.uniform[123
4][uif][v]() methods specifying values of uniform variables.
... webgl2renderingcontext.uniformmatrix[23
4]x[23
4]fv() methods specifying matrix values for uniform variables.
... webgl2renderingcontext.vertexattribi
4[u]i[v]() methods specifying integer values for generic vertex attributes.
WebGLRenderingContext.pixelStorei() - Web APIs
pixel storage parameters parameter name (for pname) description type default value allowed values (for param) specified in gl.pack_alignment packing of pixel data into memory glint
4 1, 2,
4, 8 opengl es 2.0 gl.unpack_alignment unpacking of pixel data from memory.
... glint
4 1, 2,
4, 8 opengl es 2.0 gl.unpack_flip_y_webgl flips the source data along its vertical axis if true.
... var tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); gl.pixelstorei(gl.pack_alignment,
4); to check the values for packing and unpacking of pixel data, you can query the same pixel storage parameters with webglrenderingcontext.getparameter().
WebGLRenderingContext.renderbufferStorage() - Web APIs
possible values: gl.rgba
4:
4 red bits,
4 green bits,
4 blue bits
4 alpha bits.
... gl.r8i gl.r16ui gl.r16i gl.r32ui gl.r32i gl.rg8 gl.rg8ui gl.rg8i gl.rg16ui gl.rg16i 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.rgba16ui gl.rgba16i gl.rgba32i gl.rgba32ui gl.depth_component2
4 gl.depth_component32f gl.depth2
4_stencil8 gl.depth32f_stencil8 when using the webgl_color_buffer_float extension: ext.rgba32f_ext: rgba 32-bit floating-point type.
... examples gl.renderbufferstorage(gl.renderbuffer, gl.rgba
4, 256, 256); specifications specification status comment webgl 1.0the definition of 'renderbufferstorage' in that specification.
WebGLRenderingContext.texSubImage2D() - Web APIs
gl.unsigned_short_
4_
4_
4_
4:
4 red bits,
4 green bits,
4 blue bits,
4 alpha bits.
...when using the oes_texture_half_float extension: gl.half_float_oes when using a webgl 2 context, the following values are available additionally: gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev gl.unsigned_int_2
4_8 gl.float_32_unsigned_int_2
4_8_rev (pixels must be null) pixels one of the following objects can be used as a pixel source for the texture: arraybufferview, a uint8array must be used if type is gl.unsigned_byte.
... a uint16array 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 - Web APIs
webglrenderingcontext.uniform[123
4][fi][v]() specifies a value for a uniform variable.
... webglrenderingcontext.uniformmatrix[23
4]fv() specifies a matrix value for a uniform variable.
... webglrenderingcontext.vertexattrib[123
4]f[v]() specifies a value for a generic vertex attribute.
Using WebRTC data channels - Web APIs
concerns with large messages currently, it's not practical to use rtcdatachannel for messages larger than 6
4kib (16kib if you want to support cross-browser exchange of data).
...this is implemented in firefox 57, but is not yet implemented in chrome (see chromium bug 777
4).
... firefox support for ndata is in the process of being implemented; see bug 13811
45 to track it becoming available for general use.
WebXR performance guide - Web APIs
let normalmatrix = mat
4.create(); let modelviewmatrix = mat
4.create(); let objectmatrix = mat
4.
... // apply rotation updates to the object if needed mat
4.rotate( } } this renders a scene.
...const normalmatrix = mat
4.create(); const modelviewmatrix = mat
4.create(); function drawscene(gl, view, programinfo, buffers, texture, deltatime) { ...
Using IIR filters - Web APIs
if you want to play with the iir filter node and need some values to help along the way, there's a table of already calculated values here; on pages
4 & 5 of the linked pdf the an values refer to the feedforward values and the bn values refer to the feedback.
...something like this is acceptable: let feedforward = [0.00020298, 0.000
4059599, 0.00020298]; our feedback values cannot start with zero, otherwise on the first pass nothing would be sent back: let feedbackward = [1.012696
4558, -1.9991880801, 0.9873035
442]; note: these values are calculated based on the lowpass filter specified in the filter characteristics of the web audio api specification.
... our frequency response const totalarrayitems = 30; let myfrequencyarray = new float32array(totalarrayitems); let magresponseoutput = new float32array(totalarrayitems); let phaseresponseoutput = new float32array(totalarrayitems); let's fill our first array with frequency values we want data to be returned on: myfrequencyarray = myfrequencyarray.map(function(item, index) { return math.pow(1.
4, index); }); we could go for a linear approach, but it's far better when working with frequencies to take a log approach, so let's fill our array with frequency values that get larger further on in the array items.
WheelEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y=...
..."1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d
4dde
4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="331,25 3
41,20 3
41,30 331,25" stroke="#d
4dde
4" fill="none"/><line ...
...x1="3
41" y1="25" x2="371" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="
421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor wheelevent() creates a wheelevent object.
Window.customElements - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcustomelementschrome full support 5
4edge 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 change preferences in firefox, visit about:config.ie no support noopera full support
41safari full support 10.1webview android full support 5
4chrome android full support 5
4firefox android full support 63 full support 63 no support 59 �...
...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 mu...
Window.navigator - Web APIs
if (susrag.indexof("firefox") > -1) { sbrowser = "mozilla firefox"; // "mozilla/5.0 (x11; ubuntu; linux x86_6
4; rv:61.0) gecko/20100101 firefox/61.0" } else if (susrag.indexof("samsungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.180610.011) applewebkit/537.36 (khtml, like gecko) samsungbrowser/9.
4 chrome/67.0.3396.87 mobile safari/537.36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; //...
... "mozilla/5.0 (macintosh; intel mac os x 10_1
4_0) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft internet explorer"; // "mozilla/5.0 (windows nt 10.0; wow6
4; trident/7.0; .net
4.0c; .net
4.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; win6
4; x6
4) applewebkit/537.36 (khtml, like gecko) chrome/58.0.3029.110 safari/537.36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_6
4) applewebkit/537.36 (khtml, like gecko) ubuntu chromium/66.0.3359.181 chrome/66.0.3359.181 safari/537.36" } else if ...
...(susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_
4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e1
48 safari/60
4.1 980x1306" } else { sbrowser = "unknown"; } alert("you are using: " + sbrowser); specifications specification status comment html living standardthe definition of 'window: navigator' in that specification.
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
46, 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
46, 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
46, 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 12
47609.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.legend ...
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
46, 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
46, 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
46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.firefox android ...
... full support
4opera 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.legend full support full suppo...
window.requestIdleCallback() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestidlecallback experimentalchrome full support
47edge full support 79firefox full support 55notes full support 55notes notes enabled by default.
... no support 53 — 55notes notes implemented but disabled by default.ie no support noopera full support 3
4safari no support nowebview android full support
47chrome android full support
47firefox android full support 55notes full support 55notes notes enabled by default.
... no support 53 — 55notes notes implemented but disabled by default.opera android full support 3
4safari ios no support nosamsung internet android full support 5.0legend full support full support no support no supportexperimental.
WorkerGlobalScope - Web APIs
methods implemented from elsewhere windoworworkerglobalscope.atob() decodes a string of data which has been encoded using base-6
4 encoding.
... windoworworkerglobalscope.btoa() creates a base-6
4 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 13360
43).
Synchronous and asynchronous requests - Web APIs
var xhr = new xmlhttprequest(); xhr.open("get", "/bar/foo.txt", true); xhr.onload = function (e) { if (xhr.readystate ===
4) { if (xhr.status === 200) { console.log(xhr.responsetext); } else { console.error(xhr.statustext); } } }; xhr.onerror = function (e) { console.error(xhr.statustext); }; xhr.send(null); line 2 specifies true for its third parameter to indicate that the request should be handled asynchronously.
...this handler looks at the request's readystate to see if the transaction is complete in line
4; if it is, and the http status is 200, the handler dumps the received content.
...ng the value of the timeout property on the xmlhttprequest object, as shown in the code below: function loadfile(url, timeout, callback) { var args = array.prototype.slice.call(arguments, 3); var xhr = new xmlhttprequest(); xhr.ontimeout = function () { console.error("the request for " + url + " timed out."); }; xhr.onload = function() { if (xhr.readystate ===
4) { if (xhr.status === 200) { callback.apply(xhr, args); } else { console.error(xhr.statustext); } } }; xhr.open("get", url, true); xhr.timeout = timeout; xhr.send(null); } notice the addition of code to handle the "timeout" event by setting the ontimeout handler.
XMLHttpRequest.readyState - Web APIs
4 done the operation is complete.
...instead of unsent, opened, headers_received, loading and done, the names readystate_uninitialized (0), readystate_loading (1), readystate_loaded (2), readystate_interactive (3) and readystate_complete (
4) are used.
... example var xhr = new xmlhttprequest(); console.log('unsent', xhr.readystate); // readystate will be 0 xhr.open('get', '/api', true); console.log('opened', xhr.readystate); // readystate will be 1 xhr.onprogress = function () { console.log('loading', xhr.readystate); // readystate will be 3 }; xhr.onload = function () { console.log('done', xhr.readystate); // readystate will be
4 }; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest - Web APIs
am" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" tar...
...get="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="
401,25
411,20
411,30
401,25" stroke="#d
4dde
4" fill="none"/><line x1="
411" y1="25" x2="
441" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x="
441" y="1" width="1
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequest</text></a></svg></div> a:hover text {...
... note: according to the http/2 specification (8.1.2.
4 response pseudo-header fields), http/2 does not define a way to carry the version or reason phrase that is included in an http/1.1 status line.
XRView - Web APIs
model view matrix the model view matrix is a matrix which defines the position of an object relative to the space in which it's located: if objectmatrix is a transform applied to the object to provide its basic position and rotation, then the model view matrix can be computed by multiplying the object's matrix by the inverse of the view transform matrix, like this: mat
4.multiply(modelviewmatrix, view.transform.inverse.matrix, objectmatrix); normal matrix the model view's normal matrix is used when lighting the scene, in order to transform each surface's normal vectors to ensure that the light is reflected in the correct direction given the orientation and position of the surface relative to the light source or sources.
... it's computed by inverting then transposing the model view matrix: mat
4.invert(normalmatrix, modelviewmatrix); mat
4.transpose(normalmatrix, normalmatrix); teleporting an object to programmatically move and/or rotate (often referred to as teleporting) an object, you need to create a new reference space for that object which applies a transform that encapsulates the desired changes.
... let newtransform = new xrrigidtransform({x: transversedistance, y: verticaldistance, z: axialdistance}, {x: inverseorientation[0], y: inverseorientation[1], z: inverseorientation[2], w: inverseorientation[3]}); mat
4.copy(mousematrix, newtransform.matrix); // create a new reference space that transforms the object to the new // position and orientation, returning the new reference space.
ARIA: cell role - Accessibility
for example, a cell in the first row of the first header would likely have aria-rowindex="1" set, and cells in row
47 would have aria-rowindex="
47", if aria-rowindex were needed due to not all rows being in the dom.
...le="cell" aria-rowindex="11">h1</span> </div> <div role="row"> <span role="cell" aria-rowindex="16">header</span> <span role="cell" aria-rowindex="16">h6</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="2
4">term</span> <span role="cell" aria-rowindex="2
4">dt</span> </div> </div> </div> the above is a non-semantic aria table with five of 81 rows present in the dom: one within a table header and four rows within the table body.
...> <td role="cell" aria-rowindex="11">h1</td> </tr> <tr role="row"> <td role="cell" aria-rowindex="16">header</td> <td role="cell" aria-rowindex="16">h6</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="2
4">term</td> <td role="cell" aria-rowindex="2
4">dt</td> </tr> </tbody> </table> above is the semantic way of writing a table.
ARIA: gridcell role - Accessibility
<div role="row"> <div role="gridcell">jane</div> <div role="gridcell">smith</div> <div role="gridcell">
496-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.
... <div role="columnheader" aria-colindex="5">city</div> <div role="columnheader" aria-colindex="6">zip</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell" aria-colindex="1">debra</div> <div role="gridcell" aria-colindex="2">burks</div> <div role="gridcell" aria-colindex="5">new york</div> <div role="gridcell" aria-colindex="6">1
4127</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.
...le="columnheader">name</div> <div role="columnheader">diameter (km)</div> <div role="columnheader">length of day (hours)</div> <div role="columnheader">distance from sun (10<sup>6</sup>km)</div> <div role="columnheader">number of moons</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell">jupiter</div> <div role="gridcell">1
42,98
4</div> <div role="gridcell">9.9</div> <div role="gridcell">778.6</div> <div role="gridcell">67</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell">saturn</div> <div role="gridcell">120,536</div> <div role="gridcell">10.7</div> <div role="gridcell">1
433.5</div> <div role="gridcell">62</div> </div> </d...
ARIA - Accessibility
for example, aria enables accessible navigation landmarks in html
4, javascript widgets, form hints and error messages, live content updates, and more.
...unfortunately, there isn't a more semantic tag available to developers in html
4, so we need to include aria roles and properties.
...function updateprogress(percentcomplete) { progressbar.setattribute("aria-valuenow", percentcomplete); } note that aria was invented after html
4, so does not validate in html
4 or its xhtml variants.
-moz-image-rect - CSS: Cascading Style Sheets
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:136px; position:absolute; } #box
4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); width:133px; height:136px; 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:0p...
...x;top:136px;">bottom left</div> <div id="box
4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box grid.
... function rotate() { var prevstyle = window.getcomputedstyle(document.getelementbyid("box
4"), null).getpropertyvalue("background-image"); // now that we've saved the last one, start rotating for (var i=1; i<=
4; i++) { var curid = "box" + i; // shift the background images var curstyle = window.getcomputedstyle(document.getelementbyid(curid), null).getpropertyvalue("background-image"); document.getelementbyid(curid).style.backgroundimage = prevstyle; prevstyle = curstyle; } } this uses window.getcomputedstyl...
-moz-outline-radius - CSS: Cascading Style Sheets
/* one value */ -moz-outline-radius: 25px; /* two values */ -moz-outline-radius: 25px 1em; /* three values */ -moz-outline-radius: 25px 1em 12%; /* four values */ -moz-outline-radius: 25px 1em 12%
4mm; /* global values */ -moz-outline-radius: inherit; -moz-outline-radius: initial; -moz-outline-radius: unset; constituent properties this property is a shorthand for the following css properties: -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright syntax values elliptical outlines and <percentage> values follow the syntax described in border-radius.
... if a single value is set, it applies to all
4 corners.
...t: as specified-moz-outline-radius-bottomleft: as specifiedanimation typeas each of the properties of the shorthand:-moz-outline-radius-topleft: a length, percentage or calc();-moz-outline-radius-topright: a length, percentage or calc();-moz-outline-radius-bottomright: a length, percentage or calc();-moz-outline-radius-bottomleft: a length, percentage or calc(); formal syntax <outline-radius>{1,
4} [ / <outline-radius>{1,
4} ]?where <outline-radius> = <length> | <percentage> examples rounding an outline note: this example will not display the desired effect if you are viewing this in a browser other than firefox.
::selection - CSS: Cascading Style Sheets
to meet current web content accessibility guidelines (wcag), text content must have a contrast ratio of
4.5:1, or 3:1 for larger text such as headings.
... (wcag defines large text as between 18.66px and 2
4px and bold, or 2
4px 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.
...it returned in pseudo-elements level
4.
:focus - CSS: Cascading Style Sheets
wcag 2.1 sc 1.
4.11 non-text contrast requires that the visual focus indicator be at least 3 to 1.
...tips for designing useful and usable focus indicators :focus { outline: none; } never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass wcag 2.1 sc 1.
4.11 non-text contrast.
... selectors level
4the definition of ':focus' in that specification.
:host() - CSS: Cascading Style Sheets
browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host()chrome full support 5
4edge 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 t...
...to change preferences in firefox, visit about:config.ie no support noopera full support
41safari full support 10notes full support 10notes notes certain css selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.webview android full support 5
4chrome android full support 5
4firefox android full support 63 full support 63 no support 61 — 63disabled disabled from versi...
...to change preferences in firefox, visit about:config.opera android 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 implementa...
:host - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:hostchrome full support 5
4edge 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 t...
...to change preferences in firefox, visit about:config.ie no support noopera full support
41safari full support 10webview android full support 5
4chrome android full support 5
4firefox 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-of-type() - CSS: Cascading Style Sheets
/* selects every fourth <p> element among any group of siblings */ p:nth-of-type(
4n) { color: lime; } syntax the nth-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements.
... formal syntax :nth-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples basic example html <div> <div>this element isn't counted.</div> <p>1st paragraph.</p> <p>2nd paragraph.</p> <div>this element isn't counted.</div> <p>3rd paragraph.</p> <p class="fancy">
4th paragraph.</p> </div> css /* odd paragraphs */ p:nth-of-type(2n+1) { color: red; } /* even paragraphs */ p:nth-of-type(2n) { color: blue; } /* first paragraph */ p:nth-of-type(1) { font-weight: bold; } /* this has no effect, as the .fancy class is only on the
4th p element, not the 1st */ p.fancy:nth-of-type(1) { text-decoration: underline; } result specifications specification status comment se...
...lectors level
4the definition of ':nth-of-type' in that specification.
system - CSS: Cascading Style Sheets
ur browser supports it, this example will render a list like this: ◉ one ◉ two ◉ three css <ul> <li>one</li> <li>two</li> <li>three</li> </ul> @counter-style fisheye { system: cyclic; symbols: ◉; suffix: " "; } ul { list-style: fisheye; } result fixed counter if your browser supports it, this example will render a list like this: ➀ one ➁ two ➂ three
4 four 5 five css <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> @counter-style circled-digits { system: fixed; symbols: ➀ ➁ ➂; suffix: ' '; } ul { list-style: circled-digits; } result symbolic counter if your browser supports it, this example will render a list like this: a.
... 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.
... html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style upper-roman { system: additive; range: 1 3999; additive-symbols: 1000 m, 900 cm, 500 d,
400 cd, 100 c, 90 xc, 50 l,
40 xl, 10 x, 9 ix, 5 v,
4 iv, 1 i; } ul { list-style: upper-roman; } result extends example this example will use the algorithm, symbols, and other properties of the lower-alpha counter style, but will remove the period ('.') after the counter representation, and enclose the characters in paranthesis; like (a), (b), etc.
font-stretch - CSS: Cascading Style Sheets
css fonts level
4 extends the syntax to accept a <percentage> value as well.
... mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.8 | w3c understanding wcag 2.0 formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax <font-stretch-absolute>{1,2}where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> e...
... @font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-stretch: 87.5% 112.5%; } specifications specification status comment css fonts module level
4the definition of 'font-stretch' in that specification.
At-rules - CSS: Cascading Style Sheets
they begin with an at sign, '@' (u+00
40 commercial at), followed by an identifier and includes everything up to the next semicolon, ';' (u+003b semicolon), or the next css block, whichever comes first.
...(deferred to level
4 of css spec) @page — describes the aspect of layout changes that will be applied when printing the document.
...(deferred to level
4 of css spec) since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.
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.9c5e9663
4f92.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.
... 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.9c5e9663
4f92.png); background-size: contain; width: 160px; height: 160px; 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.9c5e9663
4f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
Styling Columns - CSS: Cascading Style Sheets
in the example below, the column-gap is set to
40px.
... in this next example we have a very wide rule of
40px and a 10px gap.
...in order to make space on both sides of the rule, the gap would need to be increased to be larger than
40px.
Using multi-column layouts - CSS: Cascading Style Sheets
excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #col_short { columns: 12em; } the css declaration column-count:
4 can be replaced by columns:
4.
... example
4 html <div id="columns_
4"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
...excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #columns_
4 { columns:
4; } result the two css declarations column-width: 8em and column-count: 12 can be replaced by columns: 12 8em.
Stacking with floated blocks - CSS: Cascading Style Sheets
floating blocks are placed between non-positioned blocks and positioned blocks: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant positioned elements, in order of appearance in the html actually, as you can see in the example below, the background and border of the non-positioned block (div #
4) is completely unaffected by floating blocks, but the content is affected.
...this behavior can be shown with an added rule to the above list: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant non-positioned inline elements descendant positioned elements, in order of appearance in the html note: if an opacity value is applied to the non-positioned block (div #
4), then something strange happens: the background and border of that block pops up above the floating blocks and the positioned blocks.
... source code for the example html <div id="abs1"> <b>div #1</b><br />position: absolute;</div> <div id="flo1"> <b>div #2</b><br />float: left;</div> <div id="flo2"> <b>div #3</b><br />float: right;</div> <br /> <div id="sta1"> <b>div #
4</b><br />no positioning</div> <div id="abs2"> <b>div #5</b><br />position: absolute;</div> css div { padding: 10px; text-align: center; } b { font-family: sans-serif; } #abs1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 1
40px; border: 1px dashed #900; background-color: #fdd; } #sta1 { height: 100px; border: 1px dashed #996; background-col...
border-image-outset - CSS: Cascading Style Sheets
syntax /* <length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30px 2
45px; /* top | right | bottom | left */ border-image-outset: 7px 12px 1
4px 5px; /* global values */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: unset; the border-image-outset property may be specified as one, two, three, or four values.
...for example, if an element has border-width: 1em 2px 0 1.5rem, and border-image-outset: 2, the final border-image-outset would be calculated as 2em
4px 0 3rem.
...it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,
4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.
4rem solid; border-image: radial-gradient(#ff2, #55f)
40; border-image-outset: 1.5; /* 1.5 × 1.
4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-i...
border-left - CSS: Cascading Style Sheets
</div> css div { border-left:
4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left' in that specification.
...efoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-leftchrome full support 1edge full support 12firefox full support 1ie full support
4opera full support 3.5safari full support 1webview android full support 1chrome android full support 18firefox android full support
4opera android full support...
... 1
4safari ios full support 1samsung internet android full support 1.0legend full support full support ...
border-top - CSS: Cascading Style Sheets
</div> css div { border-top:
4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top' in that specification.
...refoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-topchrome full support 1edge full support 12firefox full support 1ie full support
4opera full support 3.5safari full support 1webview android full support 1chrome android full support 18firefox android full support
4opera android full support...
... 1
4safari ios full support 1samsung internet android full support 1.0legend full support full support ...
box-align - CSS: Cascading Style Sheets
er | end | baseline | stretch examples setting box alignment <!doctype html> <html> <head> <title>css box-align example</title> <style> div.example { display: box; /* as specified */ display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ height:
400px; /* make this box wider than the children so there is room for the box-align */ width: 300px; /* children should be oriented vertically */ box-orient: vertical; /* as specified */ -moz-box-orient: vertical; /* mozilla */ -webkit-box-orient: vertical; /* webkit */ /* align children to the horizontal center of this box */ box-align: center; ...
... 12prefixed full support 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 1prefixed full support 1prefixed prefixed implemented with the vendor prefix: -moz- full support
49prefixed prefixed implemented with the vendor prefix: -webkit-ie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: -webkit-safari full support 3prefixed ...
... full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support
4prefixed full support
4prefixed prefixed implemented with the vendor prefix: -moz- full support
49prefixed prefixed implemented with the vendor prefix: -webkit-opera android full support 1
4prefixed full support 1
4prefi...
box-shadow - CSS: Cascading Style Sheets
fset-y | color */ box-shadow: 60px -16px 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 */ box-shadow: inherit; box-shadow: initial; box-shadow: unset; specify a single box-shadow using: two, three, or four <length> values.
...&& <length>{2,
4} && <color>?where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
... html <div><p>hello world</p></div> css p { box-shadow: 0 0 0 2em #f
4aab9, 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.
caption-side - CSS: Cascading Style Sheets
irefox for androidopera for androidsafari on iossamsung internetcaption-sidechrome full support 1edge full support 12firefox full support 1ie full support 8opera full support
4safari full support 1webview android full support ≤37chrome android full support 18firefox android full support
4opera android full support 1
4safari ios full...
... no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android full support
4opera android no support nosafari ios no support nosamsung internet android no support notop and bottom are relative to the writing-mode valuechrome no support noedge no support ...
... nofirefox full support
42ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android full support
42opera android no support nosafari ios no support nosamsung internet android no support nolegend full support fu...
font-stretch - CSS: Cascading Style Sheets
css fonts level
4 extends the syntax to accept a <percentage> value as well.
...">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/1601
4/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 sp...
...ecification status comment css fonts module level
4the definition of 'font-stretch' in that specification.
font-variant-east-asian - CSS: Cascading Style Sheets
font-variant-east-asian: normal; font-variant-east-asian: ruby; font-variant-east-asian: jis78; /* <east-asian-variant-values> */ font-variant-east-asian: jis83; /* <east-asian-variant-values> */ font-variant-east-asian: jis90; /* <east-asian-variant-values> */ font-variant-east-asian: jis0
4; /* <east-asian-variant-values> */ font-variant-east-asian: simplified; /* <east-asian-variant-values> */ font-variant-east-asian: traditional; /* <east-asian-variant-values> */ font-variant-east-asian: full-width; /* <east-asian-width-values> */ font-variant-east-asian: proportional-width; /* <east-asian-width-values> */ font-variant-east-asian: ruby full-widt...
...possible values are: keyword standard defining the glyphs opentype equivalent jis78 jis x 0208:1978 jp78 jis83 jis x 0208:1983 jp83 jis90 jis x 0208:1990 jp90 jis0
4 jis x 0213:200
4 jp0
4 simplified none, use the simplified chinese glyphs smpl traditional none, use the traditional chinese glyphs trad <east-asian-width-values> these values control the sizing of figures used for east asian characters.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis0
4 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other fonts may not support opentype features.
font-variant-numeric - CSS: Cascading Style Sheets
ordinal this keyword forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd,
4th in english or a 1a in italian.
... oldstyle-nums activating the set of figures where some numbers, like 3,
4, 7, 9 have descenders.
...tax normal | [ <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero ]where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples setting ordinal numeric forms html <p class="ordinal">1st, 2nd, 3rd,
4th, 5th</p> css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight:
400; src: url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf") ...
font-variation-settings - CSS: Cascading Style Sheets
each setting is always one or more pairs consisting of a <string> of
4 ascii characters followed by a <number> indicating the axis value to set.
...any axis can be used as long as it is given a unique
4-character axis.
... specifications specification status comment css fonts module level
4the definition of 'font-variation-settings' in that specification.
grid-column-end - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-column-end: auto; /* <custom-ident> values */ grid-column-end: somegridarea; /* <integer> + <custom-ident> values */ grid-column-end: 2; grid-column-end: somegridarea
4; /* span + <integer> + <custom-ident> values */ grid-column-end: span 3; grid-column-end: span somegridarea; grid-column-end: 5 somegridarea span; /* global values */ grid-column-end: inherit; grid-column-end: initial; grid-column-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic sp...
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting column end for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box
4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end:
4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; ...
...border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-end' in that specification.
grid-column-start - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-column-start: auto; /* <custom-ident> value */ grid-column-start: somegridarea; /* <integer> + <custom-ident> values */ grid-column-start: 2; grid-column-start: somegridarea
4; /* span + <integer> + <custom-ident> values */ grid-column-start: span 3; grid-column-start: span somegridarea; grid-column-start: span somegridarea 5; /* global values */ grid-column-start: inherit; grid-column-start: initial; grid-column-start: unset; this property is specified as a single <grid-line> value.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting column start for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box
4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end:
4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; ...
...border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-start' in that specification.
grid-row-end - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-row-end: auto; /* <custom-ident> values */ grid-row-end: somegridarea; /* <integer> + <custom-ident> values */ grid-row-end: 2; grid-row-end: somegridarea
4; /* span + <integer> + <custom-ident> values */ grid-row-end: span 3; grid-row-end: span somegridarea; grid-row-end: 5 somegridarea span; /* global values */ grid-row-end: inherit; grid-row-end: initial; grid-row-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default s...
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting row end for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box
4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end:
4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; ...
...border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-end' in that specification.
grid-row-start - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-row-start: auto; /* <custom-ident> values */ grid-row-start: somegridarea; /* <integer> + <custom-ident> values */ grid-row-start: 2; grid-row-start: somegridarea
4; /* span + <integer> + <custom-ident> values */ grid-row-start: span 3; grid-row-start: span somegridarea; grid-row-start: 5 somegridarea span; /* global values */ grid-row-start: inherit; grid-row-start: initial; grid-row-start: unset; this property is specified as a single <grid-line> value.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting row start for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box
4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end:
4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; ...
...border-radius: 5px; background-color: #fff
4e6; } .wrapper > div { border: 2px solid #ffa9
4d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9
480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-start' in that specification.
grid - CSS: Cascading Style Sheets
y is a shorthand for the following css properties: grid-auto-columns grid-auto-flow grid-auto-rows grid-template-areas grid-template-columns grid-template-rows syntax /* <'grid-template'> values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(
400px, min-content) / repeat(auto-fill, 50px); /* <'grid-template-rows'> / [ auto-flow && dense?
...values */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense
40%; /* [ auto-flow && dense?
.../ <'grid-template-columns'> values */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense
40% / [line1] minmax(20em, max-content); /* global values */ grid: inherit; grid: initial; grid: unset; values <'grid-template'> defines the grid-template including grid-template-columns, grid-template-rows and grid-template-areas.
initial - CSS: Cascading Style Sheets
examples using initial to reset color for an element html <p> <span>this text is red.</span> <em>this text is in the initial color (typically black).</em> <span>this is red again.</span> </p> css p { color: red; } em { color: initial; } result specifications specification status comment css cascading and inheritance level
4the definition of 'initial' in that specification.
...bviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetinitialchrome full support 1edge full support 13firefox full support 19 full support 19 no support 1 — 2
4prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 15safari full support 1.2webview android full support 1chrome android full support ...
... 18firefox android full support 19 full support 19 no support
4 — 2
4prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 1
4safari ios full support 1samsung internet android full support 1.0legend full support full support no support no supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
left - CSS: Cascading Style Sheets
syntax /* <length> values */ left: 3px; left: 2.
4em; /* <percentage>s of the width of the containing block */ left: 10%; /* keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block.
...iv> <div id="example_2"> <pre> position: relative; top: 0; right: 0; </pre> <p>relative position in relation to its siblings.</p> </div> <div id="example_3"> <pre> float: right; position: relative; top: 20px; left: 20px; </pre> <p>relative to its sibling div above, but removed from flow of content.</p> <div id="example_
4"> <pre> position: absolute; bottom: 10px; right: 20px; </pre> <p>absolute position inside of a parent with relative position</p> </div> <div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>absolute position with both left and right declared</p> </div> </div> </...
...c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px; background-color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; background-color: #c1ffdb; } #example_3 { width: 600px; height:
400px; position: relative; top: 20px; left: 20px; background-color: #ffd7c2; } #example_
4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-color:#ffc7e
4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d7ffc2; } result specifications specification status comment cs...
letter-spacing - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.8 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies toall elements.
...bsolute length or the keyword normalanimation typea length formal syntax normal | <length> examples setting letter spacing html <p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p> css .normal { letter-spacing: normal; } .em-wide { letter-spacing: 0.
4em; } .em-wider { letter-spacing: 1em; } .em-tight { letter-spacing: -0.05em; } .px-wide { letter-spacing: 6px; } result specifications specification status comment css text module level 3the definition of 'letter-spacing' in that specification.
...xinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetletter-spacingchrome full support 1edge full support 12firefox full support 1ie full support
4opera full support 3.5safari full support 1webview android full support ≤37chrome android full support 18firefox android full support
4opera android full sup...
mask-border-slice - CSS: Cascading Style Sheets
syntax /* all sides */ mask-border-slice: 30%; /* vertical | horizontal */ mask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30%
45; /* top | right | bottom | left */ mask-border-slice: 7 12 1
4 5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
... zones 1-
4 are corner regions.
... formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of the mask border imagecomputed valueas specifiedanimation typediscrete formal syntax <number-percentage>{1,
4} fill?where <number-percentage> = <number> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
max() - CSS: Cascading Style Sheets
in the first above example, the width will be at least
400px, but will be wider if the the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be
400px).
... let's look at some css: h1 { font-size: 2rem; } h1.responsive { font-size: max(
4vw, 2em, 2rem); } the font-size will at minimum be 2rems, or twice the default size of font for the page.
... mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.
4 | w3c understanding wcag 2.0 specifications specification status comment css values and units module level
4the definition of 'max()' in that specification.
object-position - CSS: Cascading Style Sheets
<img id="object-position-1" src="https://udn.realityripple.com/samples/db/
4f9fbd7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/
4f9fbd7dfb.svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images.
... 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 36opera android full support 19 full support 19 full support 12prefixed prefixed implemented with the vendor pre...
...ie 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 36opera android no support 19 —
48 no support 19 —
48 full support 12prefixed prefixed implemented with the vendor prefix: -o-safari ios ...
place-items - CSS: Cascading Style Sheets
examples placing items in a flex container div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height:
40px; } #item
4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="...
...item
4">
4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">place-items: </label> <select id="values"> <option value="start">start</option> <option value="center">center</option> <option value="end">end</option> <option value="left">left</option> <option value="right">right</option> <option value="auto center">auto center</option> <option value="normal start">normal start</option> <option value="center normal">center normal</option> <option value="start auto">start auto</option> <option value="end normal">end normal</...
... values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; width: 2
40px; place-items: center; /* you can change this value by selecting another option in the list */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } result specifications specification status comment css box alignment module level 3the definition of 'place-it...
pointer-events - CSS: Cascading Style Sheets
recommendation initial definition its extension to html elements, though present in early drafts of css basic user interface module level 3, has been pushed to its level
4.
...-eventschrome full support 1edge full support 12firefox full support 1.5ie full support 11opera full support 9safari full support
4webview android full support 2chrome android full support 18firefox android full support
4opera android full support 1
4safari ios full support 3.2samsung internet android ...
...mentalchrome full support 2edge full support 12firefox full support 3.6ie full support 11opera full support 15safari full support
4webview android full support 37chrome android full support 18firefox android full support
4opera android full support 1
4safari ios full support 3.2samsung internet android ...
<ratio> - CSS: Cascading Style Sheets
in media queries level
4, the <ratio> date type is updated to consist of a strictly positive <number> followed by a forward slash ('/', unicode u+002f solidus) and a second strictly positive <number>.
...} common aspect ratios ratio usage
4/3 traditional tv format in the 20th century.
... specifications specification status comment media queries level
4the definition of '<ratio>' in that specification.
<resolution> - CSS: Cascading Style Sheets
as 1 inch is 2.5
4 cm, 1dpi ≈ 0.39dpcm.
...as 1 inch is 2.5
4 cm, 1dpcm ≈ 2.5
4dpi.
... specifications specification status comment css values and units module level
4the definition of '<resolution>' in that specification.
shape-outside - CSS: Cascading Style Sheets
; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(
45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the list below, which define the float area for float elements.
... for <basic-shape>, otherwise no formal syntax none | <shape-box> | <basic-shape> | <image>where <shape-box> = <box> | margin-box<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <box> = border-box | padding-box | content-box<inset()> = inset( <length-percentage>{1,
4} [ round <'border-radius'> ]?
... </p> </div> css .main { width: 530px; } .left, .right { width:
40%; height: 12ex; background-color: lightgray; } .left { -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); shape-outside: polygon(0 0, 100% 100%, 0 100%); float: left; -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); } .right { -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); shape-outside: polygon(100% 0, 100% 100%...
<shape> - CSS: Cascading Style Sheets
example img.clip0
4 { clip: rect(10px, 20px, 20px, 10px); } specifications specification status comment css level 2 (revision 1)the definition of '<shape>' in that specification.
...support 5.5opera full support 9.5safari full support 1.3webview android full support 37chrome android full support 18firefox android full support
4opera android full support 1
4safari ios full support 1samsung internet android full support 1.0rect() deprecatedchrome full support 1edge full support 12firefox ...
...ard comma-separated syntax is supported.opera full support 9.5safari full support 1.3webview android full support 37chrome android full support 18firefox android full support
4opera android full support 1
4safari ios full support 1samsung internet android full support 1.0legend full support full supportdeprecated.
<transform-function> - CSS: Cascading Style Sheets
matrix3d() describes a 3d transformation as a
4×
4 homogeneous matrix.
... 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(360deg)</option> <option>rotatex(360deg)</option> <option>rotatey(360deg)</option> <option>rotatez(360deg)</option> <opti...
...option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width:
400px; height: 200px; padding: 50px; 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; backfa...
transition-delay - CSS: Cascading Style Sheets
syntax /* <time> values */ transition-delay: 3s; transition-delay: 2s,
4ms; /* global values */ transition-delay: inherit; transition-delay: initial; transition-delay: unset; values <time> denotes the amount of time to wait between a property's value changing and the start of the transition effect.
... transition-duration:2s; transition-delay:2s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay:
4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-d...
...elay:
4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:
4s; transition-timing-function: ease-in-out; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:
4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:
4s; transition-timing-function: ease-in-out; } ...
transition-duration - CSS: Cascading Style Sheets
ansform color; transition-duration:2s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration:
4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:...
...
4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:
4s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:
4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transit...
...ion-duration:
4s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); specifications specification status comment css transitionsthe definition of 'transition-duration' in that specification.
vertical-align - CSS: Cascading Style Sheets
syntax /* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <length> values */ vertical-align: 10em; vertical-align:
4px; /* <percentage> values */ vertical-align: 20%; /* global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset; the vertical-align property is specified as one of the values listed below.
...ne.inheritednopercentagesrefer to the line-height of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <div>an <img src="https://udn.realityripple.com/samples/b
4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a default alignment.</div> <div>an <img class="top" src="https://udn.realityripple.com/samples/b
4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> <div>an <img class="bottom" src="https://udn.realityripple.com/samples/b
4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a text-...
...bottom alignment.</div> <div>an <img class="middle" src="https://udn.realityripple.com/samples/b
4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div> css img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } result specifications specification status comment css level 2 (revision 1)the definition of 'vertical-align' in that specification.
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/08625b
42
4a.m
4v" type='video/mp
4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.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 p = docu...
... browser support chrome 20+ ✔ firefox 20+ ✔ ie 9+ ✔ safari 6+ ✔ opera 15+ ✔ mobile chrome (android) ✖ mobile firefox 2
4+ ✔ 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.
... for most applications, it's recommended that you limit the range to between 0.5 and
4.
HTML attribute: min - HTML: Hypertext Markup Language
if omitted, <input type="number">, any integer is valid, but floats, like
4.2, are not valid, as step defaults to 1.
... for
4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2"> syntax for min values by input type input type example example date yyyy-mm-dd <input type="date" min="2019-12-25" step="1"> month yyyy-mm <input type="month" min="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" m...
... 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.
<area> - HTML: Hypertext Markup Language
allowed values are determined by bcp
47.
... many browsers, notably internet explorer
4 and higher, support circ, polygon, and rectangle as valid values for shape, but these values are non-standard.
... recommendation html
4.01 specificationthe definition of '<area>' in that specification.
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
here is a <a href="myaudio.mp
4">link to the audio</a> instead.</p> </audio> we offer a substantive and thorough guide to media file types and the audio codecs that can be used within them.
... 1 00:00:00 --> 00:00:
45 [energetic techno music] 2 00:00:
46 --> 00:00:51 welcome to the time keeper's podcast!
... here is a <a href="myaudio.mp
4">link to download the audio</a> instead.
<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 #3f87a6; 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 #3f87a6; 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 #3f87a6; 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.
<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox
4) inclusive, firefox implements the htmlspanelement interface for this element.
... examples <!-- switch text direction --> <p>this text will go left to right.</p> <p><bdo dir="rtl">this text will go right to left.</bdo></p> result notes the html
4 specification did not specify events for this element; they were added in xhtml.
... recommendation html
4.01 specificationthe definition of '<bdo>' in that specification.
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
example this example demonstrates the use of the <blockquote> element to quote a passage from rfc 11
49, a standard for the transmission of ip datagrams on avian carriers.
... <blockquote cite="https://tools.ietf.org/html/rfc11
49"> <p>avian carriers can provide high delay, low throughput, and low altitude service.
... recommendation html
4.01 specificationthe definition of '<blockquote>' in that specification.
<form> - HTML: Hypertext Markup Language
deprecated as of html
4 (use id instead).
...in html
4, this is the name/keyword for a frame.
... recommendation html
4.01 specificationthe definition of '<form>' in that specification.
<input type="file"> - HTML: Hypertext Markup Language
note: you can set as well as get the value of htmlinputelement.files in all modern browsers; this was most recently added to firefox, in version 57 (see bug 138
4030).
...bmit</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: 6
4px; 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; colo...
... function returnfilesize(number) { if(number < 102
4) { return number + 'bytes'; } else if(number >= 102
4 && number < 10
48576) { return (number/102
4).tofixed(1) + 'kb'; } else if(number >= 10
48576) { return (number/10
48576).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 ...
<input type="hidden"> - HTML: Hypertext Markup Language
<input id="prodid" name="prodid" type="hidden" value="xm23
4jq"> value a domstring representing the value of the hidden data you want to pass back to the server.
... </textarea> </div> <div> <button type="submit">update post</button> </div> <input type="hidden" id="postid" name="postid" value="3
4657"> </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...
... 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=3
4657 even though the hidden input cannot be seen at all, its data is still submitted.
<ol>: The Ordered List element - HTML: Hypertext Markup Language
for example, to start numbering elements from the letter "d" or the roman numeral "iv," use start="
4".
... examples simple example <ol> <li>fee</li> <li>fi</li> <li>fo</li> <li>fum</li> </ol> the above html will output: using roman numeral type <ol type="i"> <li>introduction</li> <li>list of greivances</li> <li>conclusion</li> </ol> the above html will output: using the start attribute <p>finishing places of contestants not in the winners’ circle:</p> <ol start="
4"> <li>speedwalk stu</li> <li>saunterin’ sam</li> <li>slowpoke rodriguez</li> </ol> the above html will output: nesting lists <ol> <li>first item</li> <li>second item <!-- closing </li> tag not here!
... recommendation added reversed and start attributed; un-deprecated type html
4.01 specificationthe definition of '<ol>' in that specification.
<select>: The HTML Select element - HTML: Hypertext Markup Language
-> <select name="choice"> <option value="first">first value</option> <option value="second" selected>second value</option> <option value="third">third value</option> </select> advanced select with multiple features the follow example is more complex, showing off more features you can use on a <select> element: <label>please choose one or more pets: <select name="pets" multiple size="
4"> <optgroup label="
4-legged pets"> <option value="dog">dog</option> <option value="cat">cat</option> <option value="hamster" disabled>hamster</option> </optgroup> <optgroup label="flying pets"> <option value="parrot">parrot</option> <option value="macaw">macaw</option> <option value="albatross">albatross</option> </optgroup> </select> </label>...
... the size attribute causes only
4 lines to display at a time; you can scroll to view all the options.
... recommendation html
4.01 specificationthe definition of '<select>' in that specification.
<table>: The Table element - HTML: Hypertext Markup Language
tfoot, and tbody</p> <table> <thead> <tr> <th>header content 1</th> <th>header content 2</th> </tr> </thead> <tbody> <tr> <td>body content 1</td> <td>body content 2</td> </tr> </tbody> <tfoot> <tr> <td>footer content 1</td> <td>footer content 2</td> </tr> </tfoot> </table> <p>table with colgroup</p> <table> <colgroup span="
4"></colgroup> <tr> <th>countries</th> <th>capitals</th> <th>population</th> <th>language</th> </tr> <tr> <td>usa</td> <td>washington, d.c.</td> <td>309 million</td> <td>english</td> </tr> <tr> <td>sweden</td> <td>stockholm</td> <td>9 million</td> <td>swedish</td> </tr> </table> <p>table with colgroup and col</p> <table> <colgroup> ...
... 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>#51f6f6</code></td> <td><code>hsla(180, 90%, 6
4%, 1)</code></td> <td><code>rgba(81, 2
46, 2
46, 1)</code></td> </tr> <tr> <th scope="row">goldenrod</th> <td><code>#f6bc57</code></td> <td><code>hsla(38, 90%, 65%, 1)</code></td> <td><code>rgba(2
46, 188, 87, 1)</code></td> </tr> </tbody> </table> providing a declaration of scope="col" on a <th> element will help describe that the cell is at the top of a...
... mdn tables for visually impaired users tables with multi-level headers • tables • w3c wai web accessibility tutorials h
43: using id and headers attributes to associate data cells with header cells in data tables | techniques for w3c wcag 2.0 specifications specification status comment html living standardthe definition of 'table element' in that specification.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
<table> <thead> <tr> <th>student id</th> <th>name</th> <th>major</th> </tr> </thead> <tbody> <tr> <td>37
41255</td> <td>jones, martha</td> <td>computer science</td> </tr> <tr> <td>39712
44</td> <td>nim, victor</td> <td>russian literature</td> </tr> <tr> <td>
4100332</td> <td>petrov, alexandra</td> <td>astrophysics</td> </tr> </tbody> </table> css the css to style our table is shown next.
... result first, the resulting table, so you know what we're building: html the revised html looks like this: <table> <thead> <tr> <th>student id</th> <th>name</th> </tr> </thead> <tbody> <tr> <th colspan="2">computer science</th> </tr> <tr> <td>37
41255</td> <td>jones, martha</td> </tr> <tr> <td>
4077830</td> <td>pierce, benjamin</td> </tr> <tr> <td>5151701</td> <td>kirk, james</td> </tr> </tbody> <tbody> <tr> <th colspan="2">russian literature</th> </tr> <tr> <td>39712
44</td> <td>nim, victor</td> </tr> </tbody> <tbody> <tr> <th colspan="2">a...
...strophysics</th> </tr> <tr> <td>
4100332</td> <td>petrov, alexandra</td> </tr> <tr> <td>8892377</td> <td>toyota, hiroko</td> </tr> </tbody> </table> notice that each major is placed in a separate <tbody> block, the first row of which contains a single <th> element with a colspan attribute that spans the entire width of the table.
<th> - HTML: Hypertext Markup Language
values higher than 6553
4 are clipped down to 6553
4.
... height deprecated since html
4, obsolete since html5 this attribute is used to define a recommended cell height.
... width deprecated since html
4, obsolete since html5 this attribute is used to define a recommended cell width.
accesskey - HTML: Hypertext Markup Language
the way to activate the accesskey depends on the browser and its platform: windows linux mac firefox alt + shift + key on firefox 57 or newer: control + option + key or control + alt + key on firefox 1
4 or newer: control + alt + key on firefox 13 or older: control + key internet explorer alt + key alt + shift + key n/a edge n/a control + option + key control + option + shift + key google chrome alt + shift + key safari n/a opera 15+ alt + key control + alt + key opera 12 shift + esc opens a...
... recommendation from html
4.01 specification, several characters can now be set as the accesskey.
... html
4.01 specificationthe definition of 'accesskey' in that specification.
id - HTML: Hypertext Markup Language
consider ticket-18659 versus r
45tgfe-freds&$@).
... note: using characters except ascii letters, digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in html
4.
... html
4.01 specificationthe definition of 'id' in that specification.
itemtype - HTML: Hypertext Markup Language
<br> </span> product #: <span itemprop="mpn">925872<br></span> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">
4.
4</span> stars, based on <span itemprop="reviewcount">89 </span> reviews </span><p> <span itemprop="offers" itemscope itemtype="http://schema.org/offer"> regular price: $179.99<br> <meta itemprop="pricecurrency" content="usd" /> <span itemprop="price">sale price: $119.99<br></span> (sale ends <time itemprop="pricevaliduntil" datetime="2020-11-05"> 5 november!</time>...
...</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-92
4605_960_720.png itemprop description sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
... itemprop mpn 925872 itemprop brand [thing] itemprop name acme itemscope itemprop[itemtype] aggregaterating[aggregaterating] itemprop ratingvalue
4.
4 itemprop reviewcount 89 itemprop offers [offer] http://schema.org/offer itemprop pricecurrency usd itemprop price 119.99 itemprop pricevaliduntil 2020-11-05 itemprop itemcondition http://schema.org/usedcondition itemprop availability http://schema.org/instock itemscope itemprop[itemtype] seller [organization] http://schema.org/organization itemprop name executive objects note: a handy tool for extracting microdata struc...
tabindex - HTML: Hypertext Markup Language
that is, tabindex="
4" is focused before tabindex="5" and tabindex="0", but after tabindex="3".
...from html
4.01 specification, the attribute is now supported on all elements (global attributes).
... html
4.01 specificationthe definition of 'tabindex' in that specification.
title - HTML: Hypertext Markup Language
semantics, structure, and apis of html documents using the html title attribute – updated | the paciello group tooltips & toggletips - inclusive components the trials and tribulations of the title attribute - 2
4 accessibility specifications specification status comment html living standardthe definition of 'title' in that specification.
...from html
4.01 specification, it is now a true global attribute.
... html
4.01 specificationthe definition of 'title' in that specification.
Global attributes - HTML: Hypertext Markup Language
the attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in tags for identifying languages (bcp
47).
...from html
4.01 specification, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes.
... html
4.01 specification recommendation there are no global attributes defined.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
you can see an example of this in our video example (see the full source code, and also the live version): <head> <meta charset="utf-8"> <title>video preload example</title> <link rel="preload" href="sintel-short.mp
4" as="video" type="video/mp
4"> <link rel="preload" href="sintel-short.webm" as="video" type="video/webm"> </head> <body> <video controls> <source src="sintel-short.mp
4" type="video/mp
4"> <source src="sintel-short.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... here is a <a href="sintel-short.mp
4">link to the video</a> instead.</p> </video> </body> so in this case, browsers that support mp
4s will preload and use the mp
4, making the video player hopefully smoother/more responsive for users.
... browsers that don't support mp
4 can still load the webm version, but don't get the advantages of preloading.
Identifying resources on the Web - HTTP
urn:isbn:97801
410361
44 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.
...it is usually omitted if the web server uses the standard ports of the http protocol (80 for http and
443 for https) to grant access to its resources.
... examples https://developer.mozilla.org/docs/learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git ftp://example.org/resource.txt urn:isbn:97801
410361
44 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 ...
HTTP caching - HTTP
error responses: a
40
4 (not found) result page.
...if so, the server returns a 30
4 (not modified) header without sending the body of the requested resource, saving some bandwidth.
... when a validation request is made, the server can either ignore the validation request and response with a normal 200 ok, or it can return 30
4 not modified (with an empty body) to instruct the browser to use its cached copy.
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 58
43, and include sha-256 and sha-512.
...the choice of digest algorithm also determines the encoding to use: for example sha-256 uses base6
4 encoding.
... examples digest: sha-256=x
48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= digest: sha-256=x
48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe=,unixsum=30637 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.
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,1
47,
483,6
48 (231) or the greatest positive integer it can represent.
... example the following example specifies enforcement of certificate transparency for 2
4 hours and reports violations to foo.example.
... expect-ct: max-age=86
400, enforce, report-uri="https://foo.example/report" notes root cas manually added to the trust store override and suppress expect-ct reports/enforcement.
Forwarded - HTTP
this can be either: an ip address (v
4 or v6, optionally with a port, and ipv6 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.
... x-forwarded-for: 123.3
4.567.89 forwarded: for=123.3
4.567.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 ...
Host - HTTP
if no port is included, the default port for the service requested (e.g.,
443 for an https url, and 80 for an http url) is implied.
...a
400 (bad request) status code may be sent to any http/1.1 request message that lacks a host header field or that contains more than one.
... examples host: developer.cdn.mozilla.net specifications specification title rfc 7230, section 5.
4: host hypertext transfer protocol (http/1.1): message syntax and routing ...
Warning - HTTP
113 heuristic expiration sent if a cache heuristically chose a freshness lifetime greater than 2
4 hours and the response's age is greater than 2
4 hours.
... 199 miscellaneous warning arbitrary, non-specific warning 21
4 transformation applied added by a proxy if it applies any transformation to the representation, such as changing the content-coding, media-type or the like.
... 299 miscellaneous persistent warning same as 199, but indicating a persistent warning examples warning: 110 anderson/1.3.37 "response is stale" date: wed, 21 oct 2015 07:28:00 gmt warning: 112 - "cache down" "wed, 21 oct 2015 07:28:00 gmt" specifications specification title rfc 723
4, section 5.5: warning hypertext transfer protocol (http/1.1): caching ...
HTTP Messages - HTTP
common status codes are 200,
40
4, or 302 a status text.
... a typical status line looks like: http/1.1
40
4 not found.
...not all responses have one: responses with a status code that sufficiently answers the request without the need for corresponding payload (like 201 created or 20
4 no content) usually don't.
OPTIONS - HTTP
allowed in html forms no syntax options /index.html 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 20
4 no content allow: options, get, head, post cache-control: max-age=60
4800 date: thu, 13 oct 2016 11:
45:00 gmt server: eos (lax00
4/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 86,
400 seconds (1 day).
... http/1.1 20
4 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: 86
400 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 ...
PATCH - HTTP
request has body yes successful response has body yes safe no idempotent no cacheable no allowed in html forms no syntax patch /file.txt http/1.1 example request patch /file.txt http/1.1 host: www.example.com content-type: application/example if-match: "e0023aa
4e" content-length: 100 [description of changes] response a successful response is indicated by any 2xx status code.
... in the example below a 20
4 response code is used, because the response does not carry a payload body.
... http/1.1 20
4 no content content-location: /file.txt etag: "e0023aa
4f" specifications specification title rfc 5789: patch patch method for http ...
Redirections in HTTP - HTTP
special redirections 30
4 (not modified) redirects a page to the locally cached copy (that was stale), and 300 (multiple choice) is a manual redirection: the body, presented by the browser as a web page, lists the possible redirections and the user clicks on one to select it.
... 30
4 not modified sent for revalidated conditional requests.
... the mod_alias module has redirect and redirectmatch directives that set up 302 redirects by default: <virtualhost *:
443> servername example.com redirect / https://www.example.com </virtualhost> the url https://example.com/ will be redirected to https://www.example.com/, as will any files or directories under it (https://example.com/some-page will be redirected to https://www.example.com/some-page) redirectmatch does the same, but takes a regular expression to define a collection of affected urls: redirectm...
206 Partial Content - HTTP
status 206 partial content examples a response containing one single range: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:2
4 gmt last-modified: wed, 15 nov 2015 0
4:58:08 gmt content-range: bytes 21010-
47021/
47022 content-length: 26012 content-type: image/gif ...
... a response containing several ranges: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:2
4 gmt last-modified: wed, 15 nov 2015 0
4:58:08 gmt content-length: 17
41 content-type: multipart/byteranges; boundary=string_separator --string_separator content-type: application/pdf content-range: bytes 23
4-639/8000 ...the first range...
... --string_separator content-type: application/pdf content-range: bytes
4590-7999/8000 ...the second range --string_separator-- specifications specification title rfc 7233, section
4.1: 206 partial content hypertext transfer protocol (http/1.1): range requests ...
Closures - JavaScript
here's the javascript: function makesizer(size) { return function() { document.body.style.fontsize = size + 'px'; }; } var size12 = makesizer(12); var size1
4 = makesizer(1
4); var size16 = makesizer(16); size12, size1
4, and size16 are now functions that resize the body text to 12, 1
4, and 16 pixels, respectively.
... document.getelementbyid('size-12').onclick = size12; document.getelementbyid('size-1
4').onclick = size1
4; document.getelementbyid('size-16').onclick = size16; <a href="#" id="size-12">12</a> <a href="#" id="size-1
4">1
4</a> <a href="#" id="size-16">16</a> run the code using jsfiddle.
... // global scope var e = 10; function sum(a){ return function(b){ return function(c){ // outer functions scope return function(d){ // local scope return a + b + c + d + e; } } } } console.log(sum(1)(2)(3)(
4)); // log 20 // you can also write without anonymous functions: // global scope var e = 10; function sum(a){ return function sum2(b){ return function sum3(c){ // outer functions scope return function sum
4(d){ // local scope return a + b + c + d + e; } } } } var s = sum(1); var s1 = s(2); var s2 = s1(3); var s3 = s2(
4); console.log(s3) //log 20 in...
Equality comparisons and sameness - JavaScript
briefly: double equals (==) will perform a type conversion when comparing two things, and will handle nan, -0, and +0 specially to conform to ieee 75
4 (so nan != nan, and -0 == +0); triple equals (===) will do the same comparison as double equals (including the special handling for nan, -0, and +0) but without type conversion; if the types differ, false is returned.
...it's largely the same as the strict equality algorithm, except that 11.9.6.
4 and 9.12.
4 differ in handling numbers.
...for example: var f2b = x => new uint8array(new float6
4array([x]).buffer); var b2f = x => new float6
4array(x.buffer)[0]; var n = f2b(nan); n[0] = 1; var nan2 = b2f(n); nan2; // > nan object.is(nan2, nan); // > true f2b(nan); // > uint8array(8) [0, 0, 0, 0, 0, 0, 2
48,127) f2b(nan2); // > uint8array(8) [1, 0, 0, 0, 0, 0, 2
48,127) ...
Meta programming - JavaScript
target[name] :
42 } } let p = new proxy({}, handler) p.a = 1 console.log(p.a, p.b) // 1,
42 the proxy object defines a target (an empty object here) and a handler object, in which a get trap is implemented.
... here, an object that is proxied will not return undefined when getting undefined properties, but will instead return the number
42.
... function.prototype.apply.call(math.floor, undefined, [1.75]) with reflect.apply this becomes less verbose and easier to understand: reflect.apply(math.floor, undefined, [1.75]) // 1 reflect.apply(string.fromcharcode, undefined, [10
4, 101, 108, 108, 111]) // "hello" reflect.apply(regexp.prototype.exec, /ab/, ['confabulation']).index //
4 reflect.apply(''.charat, 'ponies', [3]) // "i" checking if property definition has been successful with object.defineproperty, which returns an object if successful, or throws a typeerror otherwise, you would use a try...catch block to catch any error that occurred while defining a prope...
Regular expressions - JavaScript
var xarray; while(xarray = re.exec(str)) console.log(xarray); // produces: // ["fee ", index: 0, input: "fee fi fo fum"] // ["fi ", index:
4, input: "fee fi fo fum"] // ["fo ", index: 7, input: "fee fi fo fum"] the m flag is used to specify that a multiline input string should be treated as multiple lines.
...e numeric characters \d{3} or | a left parenthesis \( followed by three digits \d{3}, followed by a close parenthesis \), (end non-capturing parenthesis )), followed by one dash, forward slash, or decimal point and when found, remember the character ([-\/\.]), followed by three digits \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{
4}.
...</p> <form action="#"> <input id="phone"> <button onclick="testinfo(document.getelementbyid('phone'));">check</button> </form> javascript var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{
4}/; function testinfo(phoneinput) { var ok = re.exec(phoneinput.value); if (!ok) { console.error(phoneinput.value + ' isn\'t a phone number with area code!'); } else { console.log('thanks, your phone number is ' + ok[0]);} } result tools regexr an online tool to learn, build, & test regular expressions.
Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
märz 2017" alternative standard syntax using the ecmascript intl api the ecma-
402 (ecmascript intl api) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in chrome 2
4+, firefox 29+, ie11+, safari10+).
... var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; var dateformatter = new intl.datetimeformat('de-de', options) var dates = [date.utc(2012, 11, 20, 3, 0, 0), date.utc(201
4, 0
4, 12, 8, 0, 0)]; dates.foreach(date => console.log(dateformatter.format(date))); // "donnerstag, 20.
...mai 201
4" alternative standard syntax using date methods the date object offers several methods to build a custom date string.
RangeError: argument is not a valid code point - JavaScript
the javascript exception "invalid code point" occurs when nan values, negative integers (-1), non-integers (5.
4), or values larger than 0x10ffff (111
4111) are used with string.fromcodepoint().
... string.fromcodepoint() throws this error when passed nan values, negative integers (-1), non-integers (5.
4), or values larger than 0x10ffff (111
4111).
... examples invalid cases string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerror string.fromcodepoint(3.1
4); // rangeerror string.fromcodepoint(3e-2); // rangeerror string.fromcodepoint(nan); // rangeerror valid cases string.fromcodepoint(
42); // "*" string.fromcodepoint(65, 90); // "az" string.fromcodepoint(0x
40
4); // "\u0
40
4" string.fromcodepoint(0x2f80
4); // "\ud87e\udc0
4" string.fromcodepoint(19
456
4); // "\ud87e\udc0
4" string.fromcodepoint(0x1d306, 0x61, 0x1d307) // "\ud83
4\udf06a\ud83
4\udf07" ...
Array.prototype.copyWithin() - JavaScript
math.max(len + relativestart, 0) : math.min(relativestart, len); // steps 12-1
4.
... return o; }, configurable: true, writable: true }); } examples using copywithin [1, 2, 3,
4, 5].copywithin(-2) // [1, 2, 3, 1, 2] [1, 2, 3,
4, 5].copywithin(0, 3) // [
4, 5, 3,
4, 5] [1, 2, 3,
4, 5].copywithin(0, 3,
4) // [
4, 2, 3,
4, 5] [1, 2, 3,
4, 5].copywithin(-2, -3, -1) // [1, 2, 3, 3,
4] [].copywithin.call({length: 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) // int3...
...2array [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-262)the definition of 'array.prototype.copywithin' in that specification.
Array.prototype.find() - JavaScript
if (typeof predicate !== 'function') { throw typeerror('predicate must be a function'); } //
4.
... // { 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 arra...
...leting array[5] with value ', array[5]); delete array[5]; } // element 5 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-262)the definition of 'array.prototype.find' in that specification.
Array.prototype.indexOf() - JavaScript
// production steps of ecma-262, edition 5, 15.
4.
4.1
4 // reference: http://es5.github.io/#x15.
4.
4.1
4 if (!array.prototype.indexof) { array.prototype.indexof = function(searchelement, fromindex) { "use strict"; var k; // 1.
... var len = o.length >>> 0; //
4.
...(2); // 0 array.indexof(7); // -1 array.indexof(9, 2); // 2 array.indexof(2, -1); // -1 array.indexof(2, -3); // 0 finding all the occurrences of an element var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.indexof(element); while (idx != -1) { indices.push(idx); idx = array.indexof(element, idx + 1); } console.log(indices); // [0, 2,
4] finding if an element exists in the array or not and updating the array function updatevegetablescollection (veggies, veggie) { if (veggies.indexof(veggie) === -1) { veggies.push(veggie); console.log('new veggies collection is : ' + veggies); } else if (veggies.indexof(veggie) > -1) { console.log(veggie + ' already exists in the veggies collection.'); } } ...
Array.prototype.length - JavaScript
var namelista = new array(
429
4967296); //2 to the 32nd power =
429
4967296 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); //
429
4967295 you can set the ...
... 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-262)the definition of 'array.length' in that specification.
Array.prototype.slice() - JavaScript
for example, slice(1,
4) extracts the second element through the fourth element (elements indexed 1, 2, and 3).
...let myhonda = { color: 'red', wheels:
4, engine: { cylinders:
4, size: 2.2 } } let mycar = [myhonda, 2, 'cherry condition', 'purchased 1997'] let newcar = mycar.slice(0, 2) // display the values of mycar, newcar, and the color of myhonda // referenced from both arrays.
...console.log('mycar[0].color = ' + mycar[0].color) console.log('newcar[0].color = ' + newcar[0].color) this script writes: mycar = [{color: 'red', wheels:
4, engine: {cylinders:
4, size: 2.2}}, 2, 'cherry condition', 'purchased 1997'] newcar = [{color: 'red', wheels:
4, engine: {cylinders:
4, size: 2.2}}, 2] mycar[0].color = red newcar[0].color = red the new color of my honda is purple mycar[0].color = purple newcar[0].color = purple array-like objects slice method can also be called to convert array-like objects/collections to a new arra...
Array.prototype.some() - JavaScript
// production steps of ecma-262, 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 (...
... function isbiggerthan10(element, index, array) { return element > 10; } [2, 5, 8, 1,
4].some(isbiggerthan10); // false [12, 5, 8, 1,
4].some(isbiggerthan10); // true testing array elements using arrow functions arrow functions provide a shorter syntax for the same test.
... [2, 5, 8, 1,
4].some(x => x > 10); // false [12, 5, 8, 1,
4].some(x => x > 10); // true checking whether a value exists in an array to mimic the function of the includes() method, this custom function returns true if the element exists in the array: const fruits = ['apple', 'banana', 'mango', 'guava']; function checkavailability(arr, val) { return arr.some(function(arrval) { return val === arrval; }); } checkavailability(fruits, 'kela'); // false checkavailability(fruits, 'banana'); // true checking whether a value exists using an arrow function const fruits = ['apple', 'banana', 'mango', 'guava']; function checkavailability(arr, val) { return arr.some(arrval => val === arrval); } checkavailability(fruits, 'kela'); // false checkavailability(fruits, 'banana'); // t...
Atomics.xor() - JavaScript
one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint6
4array, or biguint6
4array.
...the truth table for the xor operation is: a b a ^ b 0 0 0 0 1 1 1 0 1 1 1 0 for example, a bitwise xor of 5 ^ 1 results in 0100 which is
4 in decimal.
... 5 0101 1 0001 ----
4 0100 examples using xor const sab = new sharedarraybuffer(102
4); 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-262)the definition of 'atomics.xor' in that specification.
Date.prototype.getTime() - JavaScript
// reduced time precision (2ms) in firefox 60 new date().gettime(); // 151921180993
4 // 1519211810362 // 1519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled new date().gettime(); // 1519129853500 // 1519129858900 // 151912986
4400 // ...
... // since month is zero based, birthday will be january 10, 1995 var birthday = new date(199
4, 12, 10); var copy = new date(); copy.settime(birthday.gettime()); measuring execution time subtracting two subsequent gettime() calls on newly generated date objects, give the time span between these two calls.
Date.prototype.toLocaleTimeString() - JavaScript
pplication, make sure to specify that language (and possibly some fallback languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses 12-hour time with am/pm console.log(date.tolocaletimestring('en-us')); // → "7:00:00 pm" // british english uses 2
4-hour time without am/pm console.log(date.tolocaletimestring('en-gb')); // → "03:00:00" // korean uses 12-hour time with am/pm console.log(date.tolocaletimestring('ko-kr')); // → "오후 12:00:00" // arabic in most arabic speaking countries uses real arabic digits console.log(date.tolocaletimestring('ar-eg')); // → "٧:٠٠:٠٠ م" // when requesting a language that may not be supported,...
....00" using options the results provided by tolocaletimestring() can be customized using the options argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // an application may want to use utc and make that visible var options = { timezone: 'utc', timezonename: 'short' }; console.log(date.tolocaletimestring('en-us', options)); // → "3:00:00 am gmt" // sometimes even the us needs 2
4-hour time console.log(date.tolocaletimestring('en-us', { hour12: false })); // → "19:00:00" // show only hours and minutes, use options with the default locale - use an empty array console.log(date.tolocaletimestring([], { hour: '2-digit', minute: '2-digit' })); // → "20:01" specifications specification ecmascript (ecma-262)the definition of 'date.prototype.tolocale...
... ecmascript internationalization api (ecma-
402)the definition of 'date.prototype.tolocaletimestring' in that specification.
Float32Array - JavaScript
4 in the case of an float32array.
... examples different ways to create a float32array // from a length var float32 = new float32array(2); float32[0] =
42; console.log(float32[0]); //
42 console.log(float32.length); // 2 console.log(float32.bytes_per_element); //
4 // from an array var arr = new float32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new float32array([21, 31]); var y = new float32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(16); var z = new float32array(buff...
...er, 0,
4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var float32 = new float32array(iterable); // float32array[1, 2, 3] specifications specification ecmascript (ecma-262)the definition of 'typedarray constructors' in that specification.
Intl.Collator.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp
47 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp
47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
...ensitivity: 'base' }) var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de" usedoptions.usage; // "sort" usedoptions.sensitivity; // "base" usedoptions.ignorepunctuation; // false usedoptions.collation; // "default" usedoptions.numeric; // false specifications specification ecmascript internationalization api (ecma-
402)the definition of 'intl.collator.prototype.resolvedoptions' in that specification.
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp
47 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp
47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
...new intl.datetimeformat('de-xx', { timezone: 'utc' }); var usedoptions = germanfakeregion.resolvedoptions(); usedoptions.locale; // "de" usedoptions.calendar; // "gregory" usedoptions.numberingsystem; // "latn" usedoptions.timezone; // "utc" usedoptions.month; // "numeric" specifications specification ecmascript internationalization api (ecma-
402)the definition of 'intl.datetimeformat.prototype.resolvedoptions' in that specification.
Intl.DateTimeFormat - JavaScript
19." // arabic in most arabic speaking countries uses real arabic digits console.log(new intl.datetimeformat('ar-eg').format(date)); // → "١٩/١٢/٢٠١٢" // for japanese, applications may want to use the japanese calendar, // where 2012 was the year 2
4 of the heisei era console.log(new intl.datetimeformat('ja-jp-u-ca-japanese').format(date)); // → "2
4/12/19" // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(new intl.datetimeformat(['ban', 'id']).format(date)); // → "19/12/2012" using options the date and time formats can be customized using the ...
...inute: 'numeric', second: 'numeric', timezone: 'australia/sydney', timezonename: 'short' }; console.log(new intl.datetimeformat('en-au', options).format(date)); // → "2:00:00 pm aedt" // sometimes you want to be very precise options.fractionalseconddigits = 3; console.log(new intl.datetimeformat('en-au', options).format(date)); // → "2:00:00.200 pm aedt" // sometimes even the us needs 2
4-hour time options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false, timezone: 'america/los_angeles' }; console.log(new intl.datetimeformat('en-us', options).format(date)); // → "12/19/2012, 19:00:00" // to specify options but use the browser's default locale, use 'default' console.log(new intl.datetimeformat('d...
...eformat = new intl.datetimeformat('default', options); var usedoptions = dateformat.resolvedoptions(); console.log(usedoptions.calendar); // → "chinese" console.log(usedoptions.numberingsystem); // → "arab" console.log(usedoptions.timezone); // → "america/new_york" (the users default timezone) specifications specification ecmascript internationalization api (ecma-
402)the definition of 'intl.datetimeformat' in that specification.
Intl.Locale.prototype.calendar - JavaScript
5
493 b.c.e) ethiopic ethiopic calendar, amete mihret (epoch approx, 8 c.e.) gregory gregorian calendar hebrew traditional hebrew calendar indian indian calendar islamic islamic calendar islamic-umalqura islamic calendar, umm al-qura islamic-tbla islamic calendar, tabular (intercalary years [2,5,7,10,13,16,18,21,2
4,26...
...,29] - astronomical epoch) islamic-civil islamic calendar, tabular (intercalary years [2,5,7,10,13,16,18,21,2
4,26,29] - civil epoch) islamic-rgsa islamic calendar, saudi arabia sighting iso8601 iso calendar (gregorian calendar using the iso 8601 calendar week rules) japanese japanese imperial calendar persian persian calendar roc republic of china calendar the islamicc calendar key has been deprecated.
... let frbuddhist = new intl.locale("fr-fr", {calendar: "buddhist"}); console.log(frbuddhist.calendar); // prints "buddhist" specifications specification ecmascript internationalization api (ecma-
402) ...
Intl.Locale.prototype.maximize() - JavaScript
examples using maximize let mylocale = new intl.locale("fr", {hourcycle: "h2
4", calendar: "gregory"}); console.log(mylocale.basename); // prints "fr" console.log(mylocale.tostring()); // prints "fr-u-ca-gregory-hc-h2
4" let mylocmaximized = mylocale.maximize(); // prints "fr-latn-fr".
...console.log(mylocmaximized.basename); // prints "fr-latn-fr-u-ca-gregory-hc-h2
4".
...console.log(mylocmaximized.tostring()); specifications specification ecmascript internationalization api (ecma-
402) ...
Intl.Locale.prototype.minimize() - JavaScript
examples using minimize let mylocale = new intl.locale("fr-latn-fr", {hourcycle: "h2
4", calendar: "gregory"}); console.log(mylocale.basename); // prints "fr-latn-fr" console.log(mylocale.tostring()); // prints "fr-latn-fr-u-ca-gregory-hc-h2
4" let mylocminimized = mylocale.minimize(); // prints "fr", since french is only written in the latin script // and is most likely to be spoken in france.
... console.log(mylocminimized.basename); // prints "fr-u-ca-gregory-hc-h2
4".
...console.log(mylocminimized.tostring()); specifications specification ecmascript internationalization api (ecma-
402) ...
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp
47 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp
47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
...n" usedoptions.notation; // "standard" usedoptions.signdisplay; // "auto" usedoption.style; // "decimal" usedoptions.minimumintegerdigits; // 1 usedoptions.minimumfractiondigits; // 0 usedoptions.maximumfractiondigits; // 3 usedoptions.usegrouping; // true specifications specification ecmascript internationalization api (ecma-
402)the definition of 'intl.numberformat.prototype.resolvedoptions' in that specification.
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp
47 language tag for the locale actually used.
... if any unicode extension values were requested in the input bcp
47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
...ions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.maximumfractiondigits; // 3 usedoptions.minimumfractiondigits; // 0 usedoptions.minimumintegerdigits; // 1 usedoptions.pluralcategories; // array [ "one", "other" ] usedoptions.type; // "cardinal" specifications specification ecmascript internationalization api (ecma-
402)the definition of 'intl.pluralrules.prototype.resolvedoptions' in that specification.
Intl.RelativeTimeFormat() constructor - JavaScript
a string with a bcp
47 language tag, or an array of such strings.
...rtf.format(1, "day"); // > "tomorrow" specifications specification status comment ecmascript internationalization api (ecma-
402)the definition of 'relativetimeformat()' in that specification.
... stage
4 ...
Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
syntax intl.relativetimeformat.supportedlocalesof(locales[, options]) parameters locales a string with a bcp
47 language tag, or an array of such strings.
... const locales = ['ban', 'id-u-co-pinyin', 'de-id']; const options = { localematcher: 'lookup' }; console.log(intl.relativetimeformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification status comment ecmascript internationalization api (ecma-
402)the definition of 'relativetimeformat.supportedlocalesof()' in that specification.
... stage
4 ...
Math.atan2() - JavaScript
examples using math.atan2() math.atan2(90, 15); // 1.
4056
476
493802699 math.atan2(15, 90); // 0.1651
48677
41
462683 math.atan2(±0, -0); // ±pi.
...math.atan2(±infinity, -infinity); // ±3*pi/
4.
... math.atan2(±infinity, +infinity); // ±pi/
4.
Math.clz32() - JavaScript
fill in all the higher bits after the first one integer |= integer << 16; integer |= integer << 8; integer |= integer <<
4; integer |= integer << 2; integer |= integer << 1; // 2.
...erase all the higher bits after the first zero integer &= (integer << 16) | 0xffff; integer &= (integer << 8 ) | 0x00ff; integer &= (integer <<
4 ) | 0x000f; integer &= (integer << 2 ) | 0x0003; integer &= (integer << 1 ) | 0x0001; // 2.
...fill in all the higher bits after the first one // asmjs for some reason does not allow ^=,&=, or |= integer = integer | (integer << 16); integer = integer | (integer << 8); integer = integer | (integer <<
4); integer = integer | (integer << 2); integer = integer | (integer << 1); // 2.
Number.MAX_SAFE_INTEGER - JavaScript
property attributes of number.max_safe_integer writable no enumerable no configurable no description the max_safe_integer constant has a value of 900719925
47
40991 (9,007,199,25
4,7
40,991 or ~9 quadrillion).
... the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 75
4 and can only safely represent numbers between -(253 - 1) and 253 - 1.
... polyfill if (!number.max_safe_integer) { number.max_safe_integer = 900719925
47
40991; // math.pow(2, 53) - 1; } examples return value of max_safe_integer number.max_safe_integer; // 900719925
47
40991 numbers higher than safe integer this returns 2 because in floating points, the value is actually the decimal trailing "1" except for in subnormal precision cases such as zero.
Number.MIN_SAFE_INTEGER - JavaScript
property attributes of number.min_safe_integer writable no enumerable no configurable no description the min_safe_integer constant has a value of -900719925
47
40991 (-9,007,199,25
4,7
40,991 or about -9 quadrillion).
... the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 75
4 and can only safely represent numbers between -(253 - 1) and 253 - 1.
... examples using min_safe_integer number.min_safe_integer // -900719925
47
40991 -(math.pow(2, 53) - 1) // -900719925
47
40991 specifications specification ecmascript (ecma-262)the definition of 'number.min_safe_integer' in that specification.
Number - JavaScript
the javascript number type is a double-precision 6
4-bit binary format ieee 75
4 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) => 900719925
47
40991 const smallestint = number.min_safe_integer // -(253 - 1) => -900719925
47
40991 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.
... using number to convert a date object the following example converts the date object to a numerical value using number as a function: let d = new date('december 17, 1995 03:2
4:00') console.log(number(d)) this logs 819199
440000.
Object.assign() - JavaScript
obj2.a = 2; console.log(json.stringify(obj1)); // { "a": 1, "b": { "c": 0}} console.log(json.stringify(obj2)); // { "a": 2, "b": { "c": 0}} obj2.b.c = 3; console.log(json.stringify(obj1)); // { "a": 1, "b": { "c": 3}} console.log(json.stringify(obj2)); // { "a": 2, "b": { "c": 3}} // deep clone obj1 = { a: 0 , b: { c: 0}}; let obj3 = json.parse(json.stringify(obj1)); obj1.a =
4; obj1.b.c =
4; console.log(json.stringify(obj3)); // { "a": 0, "b": { "c": 0}} } test(); merging objects const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.
... } }); const copy = object.assign({}, obj); console.log(copy); // { baz: 3 } primitives will be wrapped to objects const v1 = 'abc'; const v2 = true; const v3 = 10; const v
4 = symbol('foo'); const obj = object.assign({}, v1, null, v2, undefined, v3, v
4); // primitives will be wrapped, null and undefined will be ignored.
...console.log(obj); // { "0": "a", "1": "b", "2": "c" } exceptions will interrupt the ongoing copying task const target = object.defineproperty({}, 'foo', { value: 1, writable: false }); // target.foo is a read-only property object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz:
4 }); // typeerror: "foo" is read-only // the exception is thrown when assigning target.foo console.log(target.bar); // 2, the first source was copied successfully.
Object.entries() - JavaScript
examples const obj = { foo: 'bar', baz:
42 }; console.log(object.entries(obj)); // [ ['foo', 'bar'], ['baz',
42] ] // array like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] // array like object with random key ordering const anobj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(object.entries(anobj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] // getfoo is pro...
...with object.entries, you can easily convert from object to map: const obj = { foo: 'bar', baz:
42 }; const map = new map(object.entries(obj)); console.log(map); // map { foo: "bar", baz:
42 } iterating through an object using array destructuring, you can iterate through objects easily.
... const obj = { foo: 'bar', baz:
42 }; object.entries(obj).foreach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz:
42" specifications specification ecmascript (ecma-262)the definition of 'object.entries' in that specification.
Object.fromEntries() - JavaScript
examples converting a map to an object with object.fromentries, you can convert from map to object: const map = new map([ ['foo', 'bar'], ['baz',
42] ]); const obj = object.fromentries(map); console.log(obj); // { foo: "bar", baz:
42 } converting an array to an object with object.fromentries, you can convert from array to object: const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; const obj = object.fromentries(arr); console.log(obj); // { 0: "a", 1: "b", 2: "c" } object transformations with object.fromentries, its reverse method obje...
...ct.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/2
4500 specifications specification ecmascript (ecma-262)the definition of 'object.fromentries' in that specification.
Object.prototype.toLocaleString() - JavaScript
tolocalestring() date: date.prototype.tolocalestring() typedarray: typedarray.prototype.tolocalestring() bigint: bigint.prototype.tolocalestring() examples array tolocalestring() override on array objects, tolocalestring() can be used to print array values as a string, optionally with locale-specific identifiers (such as currency symbols) appended to them: for example: const testarray = [
4, 7, 10]; let europrices = testarray.tolocalestring('fr', { style: 'currency', currency: 'eur'}); // "
4,00 €,7,00 €,10,00 €" date tolocalestring() override on date objects, tolocalestring() is used to print out date displays more suitable for specific locales: for example: const testdate = new date(date.now()); // "date fri may 29 2020 18:0
4:2
4 gmt+0100 (british summer time)" let dedat...
...e = testdate.tolocalestring('de'); // "29.5.2020, 18:0
4:2
4" var frdate = testdate.tolocalestring('fr'); //"29/05/2020 à 18:0
4:2
4" number tolocalestring() override on number objects, tolocalestring() is used to print out number displays more suitable for specific locales, e.g.
... with the correct separators: for example: const testnumber = 290123
456
4; // "290123
456
4" let denumber = testnumber.tolocalestring('de'); // "2.901.23
4.56
4" let frnumber = testnumber.tolocalestring('fr'); // "2 901 23
4 56
4" specifications specification ecmascript (ecma-262)the definition of 'object.prototype.tolocalestring' in that specification.
RegExp.$1-$9 - JavaScript
the legacy regexp $1, $2, $3, $
4, $5, $6, $7, $8, $9 properties are static and read-only properties of regular expressions that contain parenthesized substring matches.
... var str = 'test 2
4'; var number = /(\d+)/.test(str) ?
... regexp.$1 : '0'; number; // "2
4" please note that any operation involving the usage of other regular expressions between a re.test(str) call and the regexp.$n property, might have side effects, so that accessing these special properties should be done instantly, otherwise the result might be unexpected.
Planned changes to shared memory - JavaScript
cross-origin-opener-policy: whatwg/html issue #37
40, draft specification.
... cross-origin-embedder-policy: whatwg/html issue #
4175, draft specification.
... postmessage() changes and self.crossoriginisolated: whatwg/html issue #
4732, whatwg/html issue #
4872, draft specification.
SharedArrayBuffer - JavaScript
var sab = new sharedarraybuffer(102
4); worker.postmessage(sab); updating and synchronizing shared memory with atomic operations shared memory can be created and updated simultaneously in workers or the main thread.
... var sab = sharedarraybuffer(102
4); // typeerror: calling a builtin sharedarraybuffer constructor // without new is forbidden var sab = new sharedarraybuffer(102
4); constructor sharedarraybuffer() creates a new sharedarraybuffer object.
... examples creating a new sharedarraybuffer var sab = new sharedarraybuffer(102
4); slicing the sharedarraybuffer sab.slice(); // sharedarraybuffer { bytelength: 102
4 } sab.slice(2); // sharedarraybuffer { bytelength: 1022 } sab.slice(-2); // sharedarraybuffer { bytelength: 2 } sab.slice(0, 1); // sharedarraybuffer { bytelength: 1 } using it in a webgl buffer const canvas = document.queryselector('canvas'); const gl = canvas.getcontext('webgl'); const buffer = gl.cre...
String.prototype.charAt() - JavaScript
"'"); // no index was provided, used 0 as default console.log("the character at index 0 is '" + anystring.charat(0) + "'"); console.log("the character at index 1 is '" + anystring.charat(1) + "'"); console.log("the character at index 2 is '" + anystring.charat(2) + "'"); console.log("the character at index 3 is '" + anystring.charat(3) + "'"); console.log("the character at index
4 is '" + anystring.charat(
4) + "'"); console.log("the character at index 999 is '" + anystring.charat(999) + "'"); these lines display the following: the character at index 0 is 'b' the character at index 0 is 'b' the character at index 1 is 'r' the character at index 2 is 'a' the character at index 3 is 'v' the character at index
4 is 'e' the character at index 999 is '' get...
... var str = 'a \ud87e\udc0
4 z'; // we could also use a non-bmp character directly for (var i = 0, chr; i < str.length; i++) { if ((chr = getwholechar(str, i)) === false) { continue; } // adapt this line at the top of each loop, passing in the whole string and // the current iteration and returning a variable to represent the // individual character console.log(chr); } function getwholechar(str, i) { var code = str.charcodeat(i); if (number.isnan(code)) { return ''; // position not found } if (code < 0xd800 || code > 0xdfff) { return str.char...
... let str = 'a\ud87e\udc0
4z' // we could also use a non-bmp character directly for (let i = 0, chr; i < str.length; i++) { [chr, i] = getwholecharandi(str, i) // adapt this line at the top of each loop, passing in the whole string and // the current iteration and returning an array with the individual character // and 'i' value (only changed if a surrogate pair) console.log(chr) } function getwholecharandi(st...
String.prototype.charCodeAt() - JavaScript
description unicode code points range from 0 to 111
4111 (0x10ffff).
...arcodeat(idx); var hi, low; // high surrogate (could change last hex to 0xdb7f // to treat high private surrogates // as single characters) if (0xd800 <= code && code <= 0xdbff) { hi = code; low = str.charcodeat(idx + 1); if (isnan(low)) { throw 'high surrogate not followed by ' + 'low surrogate in fixedcharcodeat()'; } return ( (hi - 0xd800) * 0x
400) + (low - 0xdc00) + 0x10000; } if (0xdc00 <= code && code <= 0xdfff) { // low surrogate // we return false to allow loops to skip // this iteration since should have already handled // high surrogate above in the previous iteration return false; // hi = str.charcodeat(idx - 1); // low = code; // return ((hi - 0xd800) * 0x
400) + // (low - 0xdc00) + 0x1...
...rs.lastindex; if (li - 2 < idx) { idx++; } else { break; } } if (idx >= end || idx < 0) { return nan; } code = str.charcodeat(idx); var hi, low; if (0xd800 <= code && code <= 0xdbff) { hi = code; low = str.charcodeat(idx + 1); // go one further, since one of the "characters" // is part of a surrogate pair return ((hi - 0xd800) * 0x
400) + (low - 0xdc00) + 0x10000; } return code; } specifications specification ecmascript (ecma-262)the definition of 'string.prototype.charcodeat' in that specification.
String.fromCharCode() - JavaScript
the remaining code points, in the range of 65536 (0x010000) to 111
4111 (0x10ffff) are known as supplementary characters.
... examples using fromcharcode() bmp characters, in utf-16, use a single code unit: string.fromcharcode(65, 66, 67); // returns "abc" string.fromcharcode(0x201
4); // returns "—" string.fromcharcode(0x1201
4); // also returns "—"; the digit 1 is truncated and ignored string.fromcharcode(8212); // also returns "—"; 8212 is the decimal form of 0x201
4 complete utf 16 table.
...a surrogate pair): string.fromcharcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(55356, 57091); // stars" == "\ud83c\udf03" string.fromcharcode(0xd83
4, 0xdf06, 0x61, 0xd83
4, 0xdf07); // "\ud83
4\udf06a\ud83
4\udf07" specifications specification ecmascript (ecma-262)the definition of 'string.fromcharcode' in that specification.
String.fromCodePoint() - JavaScript
if (codepoint <= 0xffff) { // bmp code point codelen = codeunits.push(codepoint); } else { // astral code point; split in surrogate halves // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae codepoint -= 0x10000; codelen = codeunits.push( (codepoint >> 10) + 0xd800, // highsurrogate (codepoint % 0x
400) + 0xdc00 // lowsurrogate ); } if (codelen >= 0x3fff) { result += stringfromcharcode.apply(null, codeunits); codeunits.length = 0; } } return result + stringfromcharcode.apply(null, codeunits); }; try { // 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(0x
40
4); // "\u0
40
4" == "Є" string.fromcodepoint(0x2f80
4); // "\ud87e\udc0
4" string.fromcodepoint(19
456
4); // "\ud87e\udc0
4" string.fromcodepoint(0x1d306, 0x61, 0x1d307); // "\ud83
4\udf06a\ud83
4\udf07" invalid input: string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerror string.fromcodepoint(3.1
4); // rangeerror string.fromcodepoint(3e-2); // rangeerror string.fromcodepoint(nan);...
...instead, it requires the utf-16 surrogate pair in order to return a supplementary character: string.fromcharcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(55356, 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 1277
47 in decimal specifications specification ecmascript (ecma-262)the definition of 'string.fromcodepoint' in that specification.
String.prototype.matchAll() - JavaScript
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=1
4." // expected output: "found foosball start=16 end=2
4." } with matchall available, you can avoid the while loop and exec with g.
...ou 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=1
4." // expected output: "found foosball start=16 end=2
4." // 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.
... capture groups are ignored when using match() with the global /g flag: let regexp = /t(e)(st(\d?))/g; let 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-262)the definition of 'string.prototype.matchall' in that specification.
String.prototype.normalize() - JavaScript
for example, the code point for "a" is given as u+00
41.
... the code point u+2
4b9 represents the symbol "Ⓓ".
... it is compatible with the u+00
44 code point ("d").
String - JavaScript
creating strings strings can be created as primitives, from string literals, or as objects, using the string() constructor: const string1 = "a string primitive"; const string2 = 'also a string primitive'; const string3 = `yet another string primitive`; const string
4 = new string("a string object"); string primitives and string objects can be used interchangeably in most situations.
...for example: let s1 = '2 + 2' // creates a string primitive let s2 = new string('2 + 2') // creates a string object console.log(eval(s1)) // returns the number
4 console.log(eval(s2)) // returns the string "2 + 2" for these reasons, the code may break when it encounters string objects when it expects a primitive string instead, although generally, authors need not worry about the distinction.
... console.log(eval(s2.valueof())) // returns the number
4 escape notation special characters can be encoded using escape notation: code output \xxx (where xxx is 1–3 octal digits; range 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-16 code unit / unicode code point between u+0000 and u+ffff \u{x} ...
Uint32Array - JavaScript
4 in the case of an uint32array.
... examples different ways to create a uint32array // from a length var uint32 = new uint32array(2); uint32[0] =
42; console.log(uint32[0]); //
42 console.log(uint32.length); // 2 console.log(uint32.bytes_per_element); //
4 // from an array var arr = new uint32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint32array([21, 31]); var y = new uint32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(16); var z = new uint32array(buffer, 0, ...
...
4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var uint32 = new uint32array(iterable); // uint32array[1, 2, 3] specifications specification ecmascript (ecma-262)the definition of 'typedarray constructors' in that specification.
WebAssembly.CompileError - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support ...
...
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full s...
WebAssembly.Global() constructor - JavaScript
this can be one of i32, i6
4, f32, and f6
4.
... the value of the global is then changed, first to
42 using the global.value property, and then to
43 using the incglobal() function exported out of the global.wasm module (this adds 1 to whatever value is given to it and then returns the new value).
...got: ${got}<br>`; } asserteq("webassembly.global exists", typeof webassembly.global, "function"); const global = new webassembly.global({value:'i32', mutable:true}, 0); webassembly.instantiatestreaming(fetch('global.wasm'), { js: { global } }) .then(({instance}) => { asserteq("getting initial value from wasm", instance.exports.getglobal(), 0); global.value =
42; asserteq("getting js-updated value from wasm", instance.exports.getglobal(),
42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value,
43); }); note: you can see the example running live on github; see also the source code.
WebAssembly.LinkError - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0linkerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support ...
...
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full supp...
WebAssembly.RuntimeError - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0runtimeerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support ...
...
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full s...
WebAssembly.Table() constructor - JavaScript
the table2.wasm module contains two functions (one that returns
42 and another that returns 83) and stores both into elements 0 and 1 of the imported table (see text representation).
... 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Table.prototype.get() - JavaScript
webassembly.instantiatestreaming(fetch('table.wasm')) .then(function(obj) { var tbl = obj.instance.exports.tbl; console.log(tbl.get(0)()); // 13 console.log(tbl.get(1)()); //
42 }); note how you've got to include a second function invocation operator at the end of the accessor to actually retrieve the value stored inside the reference (e.g.
... 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
Exponentiation (**) - JavaScript
-2 ** 2; //
4 in bash, -
4 in other languages.
... -(2 ** 2); // -
4 in javascript and the author's intention is unambiguous.
... examples basic exponentiation 2 ** 3 // 8 3 ** 2 // 9 3 ** 2.5 // 15.588
457268119896 10 ** -1 // 0.1 nan ** 2 // nan associativity 2 ** 3 ** 2 // 512 2 ** (3 ** 2) // 512 (2 ** 3) ** 2 // 6
4 usage with unary operators to invert the sign of the result of an exponentiation expression: -(2 ** 2) // -
4 to force the base of an exponentiation expression to be a negative number: (-2) ** 2 //
4 specifications specification ecmascript (ecma-262)the definition of 'exponentiation operator' in that specification.
delete operator - JavaScript
var empcount =
43; employeedetails = { name: 'xyz', age: 5, designation: 'developer' }; // adminname is a property of the global scope.
...delete employeedetails; // returns true function f() { var z =
44; // delete doesn't affect local variable names delete z; // returns false } delete and the prototype chain in the following example, we delete an own property of an object while a property with the same name is available on the prototype chain: function foo() { this.bar = 10; } foo.prototype.bar =
42; var foo = new foo(); // foo.bar is associated with the // own property.
...console.log(foo.bar); //
42 // delete the property on the prototype.
this - JavaScript
add(c, d) { return this.a + this.b + c + d; } var o = {a: 1, b: 3}; // the first parameter is the object to use as // 'this', subsequent parameters are passed as // arguments in the function call add.call(o, 5, 7); // 16 // the first parameter is the object to use as // 'this', the second is an array whose // members are used as the arguments in the function call add.apply(o, [10, 20]); // 3
4 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.
... o.b = {g: independent, prop:
42}; console.log(o.b.g()); //
42 this on the object's prototype chain the same notion holds true for methods defined somewhere on the object's prototype chain.
... var o = {f: function() { return this.a + this.b; }}; var p = object.create(o); p.a = 1; p.b =
4; console.log(p.f()); // 5 in this example, the object assigned to the variable p doesn't have its own f property, it inherits it from its prototype.
yield* - JavaScript
function* g1() { yield 2; yield 3; yield
4; } function* g2() { yield 1; yield* g1(); yield 5; } const iterator = g2(); 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());...
... function* g3() { yield* [1, 2]; yield* '3
4'; 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, done: true} the value of yield* expression itself yield* is an expression, not a statement—so it evalua...
... function* g
4() { yield* [1, 2, 3]; return 'foo'; } function* g5() { const g
4returnvalue = yield* g
4(); console.log(g
4returnvalue) // 'foo' return g
4returnvalue; } 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 g
4 console.log(iterator.next()); // {value: 'foo', done: true} specifications specification ecmascript (ecma-262)the definition of 'yield' in that specification.
return - JavaScript
starting with firefox
40, a warning is shown in the console if unreachable code is found after a return statement.
... function counter() { for (var count = 1; ; count++) { // infinite loop console.log(count + 'a'); // until 5 if (count === 5) { return; } console.log(count + 'b'); // until
4 } console.log(count + 'c'); // never appears } counter(); // output: // 1a // 1b // 2a // 2b // 3a // 3b //
4a //
4b // 5a returning a function see also the article about closures.
... function magic() { return function calc(x) { return x *
42; }; } var answer = magic(); answer(1337); // 5615
4 specifications specification ecmascript (ecma-262)the definition of 'return statement' in that specification.
switch - JavaScript
switch (expr) { 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': case 'papayas': console.log('mangoes and papayas are $2.79 a pound.'); break; default: console.log('sorry, we are out of ' + expr + '.'); } console.log("is there anything else you'd like?"); what happens if i forgot a break?
... var foo = 1; var output = 'output: '; switch (foo) { case 0: output += 'so '; case 1: output += 'what '; output += 'is '; case 2: output += 'your '; case 3: output += 'name'; case
4: output += '?'; console.log(output); break; case 5: output += '!'; console.log(output); break; default: console.log('please pick a number from 0 to 5!'); } the output from this example: value log text foo is nan or not 1, 2, 3,
4, 5, or 0 please pick a number from 0 to 5!
...
4 output: ?
Trailing commas - JavaScript
var arr = [1, 2, 3,,,]; arr.length; // 5 objects starting with ecmascript 5, trailing commas in object literals are legal as well: var object = { foo: "bar", baz: "qwerty", age:
42, }; trailing commas in functions ecmascript 2017 allows trailing commas in function parameter lists.
...t ',' function f(...p,) {} // syntaxerror: parameter after rest parameter (...p,) => {} // syntaxerror: expected closing parenthesis, got ',' trailing commas in destructuring a trailing comma is also allowed on the left-hand side when using destructuring assignment: // array destructuring with trailing comma [a, b,] = [1, 2]; // object destructuring with trailing comma var o = { p:
42, q: true, }; var {p, q,} = o; again, when using a rest element, a syntaxerror will be thrown: var [a, ...b,] = [1, 2, 3]; // syntaxerror: rest element may not have a trailing comma trailing commas in json trailing commas in objects were only introduced in ecmascript 5.
... both lines will throw a syntaxerror: json.parse('[1, 2, 3,
4, ]'); json.parse('{"foo" : 1, }'); // syntaxerror json.parse: unexpected character // at line 1 column 1
4 of the json data omit the trailing commas to parse the json correctly: json.parse('[1, 2, 3,
4 ]'); json.parse('{"foo" : 1 }'); specifications specification ecmascript (ecma-262) ...
Values - MathML
(the "x"-height of the element, 1ex ≈ 0.5em in many fonts) px pixels in inches (1 inch = 2.5
4 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value.
...hspace => 0.16666666666666666em 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 thickmathspace 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 negativ...
...emediummathspace -
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).
Autoplay guide for media and Web Audio APIs - Web media technologies
that means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy: <audio src="/music.mp
4" autoplay> and audioelement.play(); the following web features and apis may be affected by autoplay blocking: the html <audio> and <video> elements the web audio api from the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting.
... example: the autoplay attribute an <audio> element using the autoplay attribute might look like this: <audio id="musicplayer" autoplay> <source src="/music/chapter1.mp
4"> </audio> example 2: detecting autoplay failure if you rely on autoplay for anything important, or if autoplay failure will impact your app in any way, you will probably want to be able to tell when it autoplay didn't begin.
... consider this html for a media element: <video src="myvideo.mp
4" autoplay onplay=handlefirstplay(event)"> here we have a <video> element whose autoplay attribute is set, with an onplay event handler set up; the event is handled by a function called handlefirstplay(), which receives as input the play event.
OpenSearch description format
it must be 102
4 or fewer characters of plain text, with no html or other markup.
...when possible, include a 16×16 image of type image/x-icon (such as /favicon.ico) and a 6
4×6
4 image of type image/jpeg or image/png.
...(you can generate a data: uri from an icon file at the data: uri kitchen.) <image height="16" width="16" type="image/x-icon">https://example.com/favicon.ico</image> <!-- or --> <image height="16" width="16">data:image/x-icon;base6
4,aaabaaeaebaaa … daaa=</image> firefox caches the icon as a base6
4 data: uri (search plug-ins are stored in the profile's searchplugins/ folder).
Navigation and resource timings - Web Performance
we see a savings of over 7
4%.
... for comparison, we can look at the network tab and see that we transferred 22.0
4kb for an uncompressed file size of 87.2
4kb.
... if we do the math with these numbers, we get the same result: 1 - (22.0
4 / 87.2
4) = 0.7
47.
Understanding latency - Web Performance
on a first request, for the first 1
4kb bytes, latency is longer because it includes a dns lookup, a tcp handshake, the secure tls negotiation.
...the approximate values of some presets include: selection download speed upload speed minimum latency (ms) gprs 50 kbps 20 kbps 500 regular 2g 250 kbps 50 kbps 300 good 2g
450 kbps 150 kbps 150 regular 3g 750 kbps 250 kbps 100 good 3g 1.5 mbps 750 kbps
40 regular
4g/lte
4 mbps 3 mbps 20 dsl 2 mbps 1 mbps 5 wi-fi 30 mbps 15 mbps 2 network timings also, on the network tab, you can see how long each request took to complete.
...had we throttled, receiving could have been
43seconds!
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
for example, you can resize the circle in the clip path established above: function toggleradius() { var circle = document.getelementbyid("circle"); circle.r.baseval.value = 0.
40 - circle.r.baseval.value; } example: filtering this demonstrates applying a filter to html content using svg.
...x values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> and some more filters: <svg height="0"> <filter id="f3"> <feconvolvematrix filterres="100 100" style="color-interpolation-filters:srgb" order="3" kernelmatrix="0 -1 0 -1
4 -1 0 -1 0" preservealpha="true"/> </filter> <filter id="f
4"> <fespecularlighting surfacescale="5" specularconstant="1" specularexponent="10" lighting-color="white"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> </filter> <filter id="f5"> <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 ...
... 0 0 1 0 0 0 1 0 0 0" style="color-interpolation-filters:srgb"/> </filter> </svg> the five filters are applied using the following css: p.target { filter:url(#f3); } p.target:hover { filter:url(#f5); } b.target { filter:url(#f1); } b.target:hover { filter:url(#f
4); } pre.target { filter:url(#f2); } pre.target:hover { filter:url(#f3); } view this example live example: blurred text in order to blur text, webkit based browsers have a (prefixed) css filter called blur (see also css filter).
end - SVG: Scalable Vector Graphics
nd="8s" fill="freeze" /> </rect> <rect x="10" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" begin="0s" end="6s" fill="freeze" /> </rect> <rect x="10" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="0s" end="
4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" 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 x...
...anchor="middle" style="pointer-events:none;">click me.</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">
4s</text> <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" str...
...="middle" style="pointer-events:none;">hit the "s" key</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">
4s</text> <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" str...
fr - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0
480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100"...
... fill="url(#gradient2)" style="transform: translatex(2
40px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="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="6...
...0" 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> specifications specification status comment scalable vector graphics (svg) 2the definition of 'fr' in that specification.
fx - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0
480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100"...
... r="100" fill="url(#gradient2)" style="transform: translatex(2
40px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cx for the element whether the value for cx was inherited or not.
...lor="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> specifications specification status comment scalable vector graphics (svg) 2the definition of 'fx' in that specification.
fy - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0
480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100"...
... r="100" fill="url(#gradient2)" style="transform: translatex(2
40px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cy for the element whether the value for cy was inherited or not.
...lor="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> specifications specification status comment scalable vector graphics (svg) 2the definition of 'fy' in that specification.
in - SVG: Scalable Vector Graphics
html <div style="width:
420px; height: 220px;"> <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="backgroundmultiply"> <!-- this will not work.
... --> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6
457/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/6
457/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.
spreadMethod - SVG: Scalable Vector Graphics
stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="repeatgradient" spreadmethod="repeat" 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="3
40" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="radialpadgradient" cx="75%" cy="25%" r="33%" fx="6
4%" 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="6
4%" 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="6
4%" 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.
viewBox - SVG: Scalable Vector Graphics
ght:100% } svg:not(:root) { display: inline-block; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute:
4 resolved against 100 as set in the viewbox --> <circle cx="50%" cy="50%" r="
4" fill="white"/> </svg> <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large ...
... as it is using user units for the r attribute:
4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="
4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- the point of coordinate 0,0 is now in the center of the viewport, and 100% is still resolve to a width or height of 10 user units so the rectangle looks shifted to the bottom/right corner of the viewport --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with the point of coordinate 0,0 in the center of the viewport the value 50% is resolve to 5 which means the center of the circle is in the bottom/right corner of the viewport.
... --> <circle cx="50%" cy="50%" r="
4" fill="white"/> </svg> the exact effect of this attribute is influenced by the preserveaspectratio attribute.
Content type - SVG: Scalable Vector Graphics
the following are examples of legal 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.
467 = 12 seconds and
467 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) -21
47
4836
48 to 21
47
4836
47.
...[0-9]* "." [0-9]+ this syntax is the same as the definition in css (css2, section
4.3.1).
<feDiffuseLighting> - SVG: Scalable Vector Graphics
<svg width="
440" height="1
40" 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="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k
4="0"/> </filter> <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightme1)" /> <!-- the light source is a fedistantlight element --> <text text-anchor="middle" x="280" y="22">fedistantlight</text> <filter id="lightme2"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fedistantlight azimuth="2
40" elevation="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k
4="0"/> </filter> <circle cx="280" cy="80" r="50" fill="green" ...
...2">fespotlight</text> <filter id="lightme3"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fespotlight x="360" 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" k
4="0"/> </filter> <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightme3)" /> </svg> expected rendering: live rendering: specifications specification status comment filter effects module level 1the definition of '<fediffuselighting>' in that specification.
SVG animation with SMIL - SVG: Scalable Vector Graphics
although chrome
45 deprecated smil in favor of css animations and web animations, the chrome developers have since suspended that deprecation.
... firefox
4 introduced support for animating svg using synchronized multimedia integration language (smil).
... <svg width="300" height="100"> <title>svg smil animate with transform</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="3
4" fill="blue" stroke="black" stroke-width="1"> <animatetransform attributename="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 100 60" repeatcount="indefinite" /> </rect> </svg> animation following a path the <animatemotion> element lets you animate an element position and rotation according to a path.
Basic Transformations - SVG: Scalable Vector Graphics
<svg width="
40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,
40)" /> </svg> the example will render a rectangle, translated to the point (30,
40) instead of (0,0).
...use the rotate() transformation for this: <svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(
45)" /> </svg> this example shows a square that is rotated by
45 degrees.
... <svg width="
40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,
40) rotate(
45)" /> </svg> this example shows again the small square shown above that this time is also rotated by
45 degrees.
Patterns - SVG: Scalable Vector Graphics
since, in this case, we wanted the pattern to repeat
4 times horizontally and vertically, the height and width are set to 0.25.
... to make this work in the example above, we had to consider the size of our box (200 pixels) and the fact that we wanted the pattern to repeat itself
4 times horizontally and vertically.
...so while we would still have
4 repeating units inside the pattern, the objects composing that pattern would remain the same size, and you end up with large areas of nothing in between them.
XML Index - XML: Extensible Markup Language
found
4 pages: # page tags and summary 1 xml: extensible markup language draft, landing, web, xml the extensible markup language is a strict serialisation of the document object model.
... 2 xml index index, web, xml found
4 pages: 3 xml introduction beginner, introduction, xml xml is a markup language similar to html.
...
4 xml:base html baseelement, needsspectable, svg, xml:base xml:base is like the html baseelement but can specify the base uri per element as well as the entire document.
xml:base - XML: Extensible Markup Language
support was removed from blink (chrome and opera) in 2015: chromium bug 3
4185
4 blink-dev mailing list post and from firefox 66 in bug 903372.
... <svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/150668
45653629" width="909" height="1286" viewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"><![cdata[ .s9_999{ font-size: 9.17px; font-family: zapfdingbats_ghr; fill: #161615; } ]]></style> <text x="6
47" y="
412" dx="0" class="s9_999" >r</text> <style type="text/css"><![cdata[ @font-face { font-f...
... work-arounds xml:base support in old browsers https://gist.github.com/leonderijke/c5cf7c5b2e
42
4c0061d2 specifications specification status comment xml base (second edition) recommendation ...
Introduction to using XPath in JavaScript - XPath
in this case, that will evaluate to
4, an unordered_node_iterator_type.
... <?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="1600 pennsylvania avenue" city="washington" country="usa"/> <phonenumber>202-
456-1111</phonenumber> </person> <person> <name first="tony" last="blair" /> <address street="10 downing street" city="london" country="uk"/> <phonenumber>020 7925 0918</phonenumber> </person> </people> to make the contents of the xml document available within the extension, we create an xmlhttprequest object to load the document synchronously, the variable xmldoc will contain the docume...
... unordered_node_iterator_type
4 a result node-set containing all the nodes matching the expression.
Exported WebAssembly functions - WebAssembly
example to clear things up (you can find this on github as table-set.html; see it running live also, and check out the wasm text representation): var othertable = new webassembly.table({ element: "anyfunc", initial: 2 }); webassembly.instantiatestreaming(fetch('table.wasm')) .then(obj => { var tbl = obj.instance.exports.tbl; console.log(tbl.get(0)()); // 13 console.log(tbl.get(1)()); //
42 othertable.set(0,tbl.get(0)); othertable.set(1,tbl.get(1)); console.log(othertable.get(0)()); console.log(othertable.get(1)()); }); here we create a table (othertable) from javascript using the webassembly.table constructor, then we load table.wasm into our page using the webassembly.instantiatestreaming() method.
... if you try to call a exported wasm function that takes or returns an i6
4 type value, it currently throws an error because javascript currently has no precise way to represent an i6
4.
... this may well change in the future though — a new int6
4 type is being considered for future standards, which could then be used by wasm.
Builder - Archive of obsolete content
the add-on builder tool was retired on april 1, 201
4.
...it was retired on april 1, 201
4, and the "builder.addons.mozilla.org" domain now redirects to this page.
tabs - Archive of obsolete content
attaching stylesheets new in firefox 3
4.
... you can't attach style sheets to a tab using tab.attach(), but from firefox 3
4 onwards you can attach and detach them using the low-level stylesheet/style and content/mod apis.
content/mod - Archive of obsolete content
for example, the following code applies a style to a content window, adding a border to all divs in page: var attachto = require("sdk/content/mod").attachto; var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border:
4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); parameters modification : object the modification we want to apply to the target.
... for example, the following code applies and removes a style to a content window, adding a border to all divs in page: var { attachto, detachfrom } = require("sdk/content/mod"); var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border:
4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); // ...
core/heritage - Archive of obsolete content
d defining reusable, composable pieces of functionality does a better job: var hex = class({ hex: function hex() { return '#' + this.color; } }); var rgb = class({ red: function red() { return parseint(this.color.substr(0, 2), 16); }, green: function green() { return parseint(this.color.substr(2, 2), 16); }, blue: function blue() { return parseint(this.color.substr(
4, 2), 16); } }); var cmyk = class({ black: function black() { var color = math.max(math.max(this.red(), this.green()), this.blue()); return (1 - color / 255).tofixed(
4); }, magenta: function magenta() { var k = this.black(); return (((1 - this.green() / 255).tofixed(
4) - k) / (1 - k)).tofixed(
4); }, yellow: function yellow() { var k = this.black(); return (((1 ...
...- this.blue() / 255).tofixed(
4) - k) / (1 - k)).tofixed(
4); }, cyan: function cyan() { var k = this.black(); return (((1 - this.red() / 255).tofixed(
4) - k) / (1 - k)).tofixed(
4); } }); such composable pieces can be combined into a single class definition by passing special implements option to a class function: // composing `color` prototype out of reusable components: var color = class({ implements: [ hex, rgb, cmyk ], initialize: function initialize(color) { this.color = color; } }); var pink = color('ffc0cb'); // rgb pink.red() // => 255 pink.green() // => 192 pink.blue() // => 203 // cmyk pink.magenta() // => 0.2
471 pink.yellow() // => 0.2039 pink.cyan() // => 0.0000 ...
dev/panel - Archive of obsolete content
this module is new in firefox 3
4.
...debuggee = options.debuggee; }, dispose: function() { this.debuggee = null; }, onready: function() { this.postmessage("message from the add-on", [this.debuggee]); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); this is being tracked as bug 10795
40.
ui/sidebar - Archive of obsolete content
unlike modules such as panel, the content must be local, typically loaded from the add-on's data directory via a url constructed using self.data.url(): var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html") }); from firefox 3
4, you can use "./sidebar.html" as an alias for self.data.url("sidebar.html").
... from firefox 3
4, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
util/array - Archive of obsolete content
let { unique } = require('sdk/util/array'); let a = [1, 1, 1, 1, 3,
4, 7, 7, 10, 10, 10, 10]; let b = unique(a); console.log(a); // [1, 1, 1, 1, 3,
4, 7, 7, 10, 10, 10, 10]; console.log(b); // [1, 3,
4, 7, 10]; parameters array : array source array.
... let { find } = require('sdk/util/array'); let isodd = (x) => x % 2; find([2,
4, 5, 7, 8, 9], isodd); // => 5 find([2,
4, 6, 8], isodd); // => undefiend find([2,
4, 6, 8], isodd, null); // => null fromiterator(i) // ['otoro', 'unagi', 'keon'] parameters iterator : iterator the iterator object over which to iterate and place results into an array.
util/uuid - Archive of obsolete content
generate uuid to generate a new uuid, call uuid() with no arguments: let uuid = require('sdk/util/uuid').uuid(); parsing uuid to convert a string representation of a uuid to an nsid, pass the string representation to uuid(): let { uuid } = require('sdk/util/uuid'); let firefoxuuid = uuid('{ec8030f7-c20a-
46
4f-9b0e-13a3a9e9738
4}'); 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: "8cbc9bf
4-
4a16-11e2-aef7-c1a56188709b" optional.
cfx to jpm - Archive of obsolete content
there is a known bug in simple options handling which may require the workaround described in https://bug6350
44.bugzilla.mozilla.org/show_bug.cgi?id=12
43
467 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 icon6
4 package.json escaping where with cfx you might have had to escape with 2 upto 3 backslashes ( \ ), jpm only needs one now.
jpmignore - Archive of obsolete content
for example: .* * !/data/** !/lib/** !/locale/** !/node_modules/** !/package.json !/icon.png !/icon6
4.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 !/icon6
4.png !/copying !/bootstrap.js !/install.rdf *~ \#* ...
Displaying annotations - Archive of obsolete content
updating main.js first, initialize an array to hold workers associated with the matcher's content scripts: var matchers = []; in the main function, add the code to create the matcher: var matcher = pagemod.pagemod({ include: ['*'], contentscriptwhen: 'ready', contentscriptfile: [data.url('jquery-1.
4.2.min.js'), data.url('matcher.js')], onattach: function(worker) { if(simplestorage.storage.annotations) { worker.postmessage(simplestorage.storage.annotations); } worker.port.on('show', function(data) { annotation.content = data; annotation.show(); }); worker.port.on('hide', function() { annotation.content = null; annotatio...
... updating main.js finally, update main.js with the code to construct the annotation panel: var annotation = panels.panel({ width: 200, height: 180, contenturl: data.url('annotation/annotation.html'), contentscriptfile: [data.url('jquery-1.
4.2.min.js'), data.url('annotation/annotation.js')], onshow: function() { this.postmessage(this.content); } }); execute cfx run one last time.
Developing for Firefox Mobile - Archive of obsolete content
then type: adb devices you should see some output like: list of devices attached 51800f220f0156
4 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 base6
4 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 quer...
Localization - Archive of obsolete content
for example, english has two forms: a singular form for "one", and a plural form for "everything else, including zero": one tomato no tomatoes two tomatoes but russian has different forms for numbers ending in 1 (except 11), numbers ending in 2-
4 (except 12-1
4) and other numbers: один помидор // one tomato два помидора // two tomatoes пять помидоров // five tomatoes the sdk uses the unicode cldr data to describe the different plural forms used by different languages.
... english has two forms, which can be described by mapping "1" to "one" and "everything else" to "other": one → n is 1; other → everything else russian uses four forms, that can be described as follows: one → n mod 10 is 1 and n mod 100 is not 11; few → n mod 10 in 2..
4 and n mod 100 not in 12..1
4; many → n mod 10 is 0 or n mod 10 in 5..9 or n mod 100 in 11..1
4; other → everything else plural rules for all languages can be found in the cldr language plural rules page (although this table is out of date compared to the cldr xml source).
File I/O - Archive of obsolete content
createinstance(components.interfaces.nsifileinputstream); istream.init(file, 0x01, 0
444, 0); istream.queryinterface(components.interfaces.nsilineinputstream); // read lines into array var line = {}, lines = [], hasmore; do { hasmore = istream.readline(line); lines.push(line.value); } while(hasmore); istream.close(); // do something with read data alert(lines); reading a binary file for instance, to get the data in a png file: var ios = components.classes["@mozilla.org/n...
... createinstance(components.interfaces.nsifileoutputstream); stream.init(afile, 0x0
4 | 0x08 | 0x20, 0600, 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.
Preferences - Archive of obsolete content
as of firefox 5
4, you can pass a default value as the second argument to any get*pref method.
...so you could use, for instance: alert(prefs.getcharpref("mypref", "no value stored")); be careful with this technique because prior to firefox 5
4, the additional (default) value will be ignored and an exception would still be thrown in this case.
Installing Extensions and Themes From Web Pages - Archive of obsolete content
{ "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:28857e60d0
43
447c5f
4550853f2d
40770b326a13" 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:28857e60d0
43
447c5f
4550853f2d
40770b326a13.
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
use .setlength() instead: nsstring mystring = somestring; - mystring.truncate(
4); + mystring.setlength(
4); the frozen string api doesn't support the iterator or const_iterator classes, but you can use pointers the same way: nsstring mystring = somestring; - nsstring::const_iterator begin, end;- mystring.beginreading(begin); mystring.endreading(end); + const prunichar *begin, *end;+ mystring.beginreading(&begin, &end); the frozen string api uses comparator functions inste...
...use stringhead(), substring(), and stringtail() instead: nsstring buffer = somestring; - nscautostring prefix;- buffer.left(prefix,
4); + const nsdependentsubstring prefix = stringhead(buffer,
4); the frozen string api doesn't use nssubstringtuple objects and maintains all strings in a contiguous buffer.
Multiple item extension packaging - Archive of obsolete content
<rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem type for a multiple item package --> <em:type nc:parsetype="integer">32</em:type> ...
...<rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem type for a multiple item package --> <em:type>32</em:type> ...
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing
4 shows an example that deletes the second child element of the element with the "toolbar" id, adds a new button element as a substitute, and sets a label attribute.
... listing
4: an example manipulation using the dom var bar = document.getelementbyid('toolbar'); bar.removechild(bar.childnodes[1]); bar.appendchild(document.createelement('button')); bar.lastchild.setattribute('label', 'hello!'); « previousnext » ...
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.security - october 1
4, 2006 to october 20, 2006 return to mozilla-dev-security announcements none during this week.
... --------------01030606070808000803090
4 content-type: audio/mpeg; name="eternals - babalus's wedding dayfinal.mp3" content-transfer-encoding: base6
4 content-id: <part1.00030607.05030...@gmail.com> content-disposition: inline; filename="eternals - babalus's wedding dayfinal.mp3" he wonders why this is.
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.security - november
4, 2006 to november 10, 2006 return to mozilla-dev-security announcements none during this week.
...(was: extended validation certificates) a continuation of last week's discussion on extended validation certificates, the there post was getting unruly at 1
47 replies.
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
xmlns:content="http://purl.org/rss/1.0/modules/content/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>a link in here</title> <guid>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:2005/05/15/11
4</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/11
4</link> <content:encoded><![cdata[this is a <a href="http://example.com/">link</a>.]]></content:encoded> </item> <item> <title>some italics html</title> <g...
...uid>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</pubdate> <link>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <content:encoded><![cdata[this is <i>italics</i>.]]></content:encoded> </item> <item> <title>some bold html</title> <guid>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:1
4:11 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <content:encoded><![cdata[this is <b>bold</b>.]]></content:encoded> </item> </channel> </rss> the <content:encoded> element is the reason that the rss content module i...
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city</title> <guid>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:2005/05/15/11
4</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/11
4</link> <slash:comments>
43</slash:comments> </item> <item> <title>what is the 3571st prime number</title> <guid>d77d2e80-0
487-
4e8c-a35d-a93...
...f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</lastbuilddate></pubdate> <link>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <slash:comments>72</slash:comments> </item> <item> <title>first article!</title> <guid>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:1
4:11 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <slash:comments>118</slash:comments> </item> </channel> </rss> the <slash:comments> element is it reason that the rss slash module is popular.
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
ell-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:article:5
4321</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/article/5
4321</link> <wfw:commentrss>http://www.example.com/feed/rss/5
4321/comments</wfw:commentrss> </item> <item> <title>rain is wet</title> <guid>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:article:5
4320</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</p...
...ubdate> <link>http://www.example.com/article/5
4320</link> <wfw:commentrss>http://www.example.com/feed/rss/5
4320/comments</wfw:commentrss> </item> <item> <title>huh?!</title> <guid>d77d2e80-0
487-
4e8c-a35d-a93f12a0ff7d:article:5
4319</guid> <pubdate>sun, 15 may 2005 08:1
4:11 -0500</pubdate> <link>http://www.example.com/article/5
4319</link> <wfw:commentrss>http://www.example.com/feed/rss/5
4319/comments</wfw:commentrss> </item> </channel> </rss> the <wfw:commentrss> element is the reason that the well-formed web rss module is popular.
Version - Archive of obsolete content
note: rss 0.93 and rss 0.9
4 were only ever released as "drafts" and never became "final" and thus were not meant to actually be used.
... xml netscape netscape's rss 0.91 revision 3 july 10, 1999 xml netscape userland's rss 0.91 june
4, 2000 xml userland rss 1.0 standard december 9, 2000 rdf rss-dev working group rss 0.92 december 25, 2000 xml userland rss 0.93 april 20, 2001 xml userland rss 0.9
4 august 19, 2002 xml userland rss 2.0 september 2002 xml userland rss 2.0 (post 2002-11-11) november 11, 2002 xml userland rss 2.0 (post 2003-01-21) standard jan...
title - Archive of obsolete content
rsstitle element <title>...</title> - the rss title element has
4 uses.
... <tr> <th>name</td> <th>tag</td> <th>0.90</td> <th>n 0.91 r1</td> <th>n 0.91 r3</td> <th>u 0.91</td> <th>0.92</td> <th>0.93</td> <th>0.9
4</td> <th>1.0</td> <th>2.0</td> </tr> <tr> <td>rss channel element</td> <td><channel></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss image element</td> <td><image></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss item element</td> <td...
.htaccess ( hypertext access ) - Archive of obsolete content
deny from 1
46.0.7
4.205 # blocks all access from 1
46.0.7
4.205 to the directory ssi or server side include : include external files to each file requested by the user without the need to write include statements in the file; you can have them automatically attached to all the files, whether at top or bottom, automatically through your .htaccess file.
... errordocument
40
4 /notfound.html # redirects traffic to notfound.html in case of a
40
4 error errordocument 500 /serverr.html # redirects traffic to serverr.html in case of a 500 internal server error for further information see this external article: redirect your traffic for error handling.
Solaris 10 Build Prerequisites - Archive of obsolete content
--- env.sh.orig tue jul 1 02:38:35 2008 +++ env.sh tue jun 2
4 01:08:01 2008 @@ -95,7 +95,8 @@ echo setting ld=$ld export ld -path="$cbe_prefix/bin:/usr/ccs/bin:/usr/gnu/bin:/usr/bin:/usr/sbin:/bin:/usr /sfw/bin:$ccdir" +path="/opt/sfw/bin:$cbe_prefix/bin:/usr/ccs/bin:/usr/gnu/bin:/usr/bin:/usr/s bin:/bin:/usr/sfw/bin:$ccdir" test "x$jds_cbe_env_quiet" != x1 && \ echo setting path=$path export path +export pkg_config_path=/opt/sfw/li...
...% cd /opt/jdsbld/bin % mv make make.bak % ln -s /usr/sfw/bin/gmake make % mv ls ls.bak % ln -s /usr/bin/ls ls
4.
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 030176cc r=0 a=89
40,uc c=0,0 cnt=
429 tbl 030178c
4 r=0 a=89
40,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=
43
4 block 03017e08 d=870,300 me=
480 cell 03017da8 d=930,360 me=5
40 cell 0301a8cc r=0 a=uc,uc c=uc,uc cnt=
436 block 0301a9...
...2c r=0 a=uc,uc c=uc,uc cnt=
437 block 0301a92c d=1335,300 me=
465 cell 0301a8cc d=1395,360 me=525 row 03017c08 d=uc,360 rowg 03017a7c d=uc,360 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=1695,uc cnt=
444 block 03017e08 r=2 a=1695,uc c=1695,uc cnt=
445 block 03017e08 d=1695,300 cell 03017da8 d=1755,360 cell 0301a8cc r=2 a=2625,uc c=2565,uc cnt=
446 block 0301a92c r=2 a=2565,uc c=2565,uc cnt=
447 block 0301a92c d=2565,300 cell 0301a8cc d=2625,360 row 03017c08 d=
4470,360 rowg 03017a7c d=
4470,360 tbl 030178c
4 d=
4500,
450 tblo 030176cc d=
4500,
450 table reflow optimizations if the table is already balanced, pass 1 constrains the w...
Tamarin Tracing Build Documentation - Archive of obsolete content
for instructions on tamarin central, please see tamarin build documentation supported platforms operating system processor status windows xp x86 supported, acceptance and performance tests automated in buildbot mac os x 10.
4 x86 supported, acceptance and performance tests automated in buildbot linux - ubuntu 8.0.
4 x86 supported, acceptance and performance tests automated in buildbot windows mobile (pocket pc 5.0) armv
4t supported, acceptance and performance tests automated in buildbot raw image (no os) armv5 supported, acceptance and performance tests not done linux (nokia n810) armv5 supported, acceptance and performance tests not done current build s...
...additionally, you need python 2.
4 or later and gnu make 3.81 or later.
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/200
4/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{themes_uuid}</em:id> <em:version>themes_version</em:version> <!-- target application this extension can install into, with minimum and maximum supported versions.
... --> <em:targetapplication> <description> <!-- firefox's uuid --> <em:id>{ec8030f7-c20a-
46
4f-9b0e-13a3a9e9738
4}</em:id> <em:minversion>min_ff_version</em:minversion> <em:maxversion>max_ff_version</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <!-- my_theme --> <em:name>my_theme</em:name> <em:description>my_theme</em:description> <em:creator>your_name</em:creator> <em:contributor>contributors_names</em:contributor> <em:homepageurl>themes_homepage</em:homepageurl> <em:updateurl> url_of_update_location </em:updateurl> <em:abouturl> url_of_about_page </em:abouturl> <!-- front end integration hooks (used by theme manager)--> <em:internalname>my_theme</em:internalname> </description> </rdf> ...
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
this is done by adding new <targetapplication> tags to the install.rdf file, like this: <!-- describe the thunderbird versions we support --> <em:targetapplication> <description> <em:id>{3550f703-e582-
4d05-9a08-
453d09bdfdc6}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> <!-- describe the sunbird versions we support --> <em:targetapplication> <description> <em:id> {718e30fb-e89b-
41dd-9da7-e25a
45638b28}</em:id> <em:minversion>0.2</em:minversion> <em:maxversio...
...n>0.
4.*</em:maxversion> </description> </em:targetapplication> these two blocks indicate that the extension supports thunderbird versions 1.5 through 2.0.0.x, sunbird versions 0.2 through 0.
4.x.
Using the W3C DOM - Archive of obsolete content
conversely, if you want to set the element's inline style settings for left and top, make sure to construct a string that includes the unit (such as "1
40px") by appending the unit string to the integer value.
... the textcontent property was introduced in the w3c dom 3 core, innertext has been an ie method since ie
4 and has been standardised in html5.
Using workers in extensions - Archive of obsolete content
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).
... a note about chromeworkers requires gecko 2.0(firefox
4 / thunderbird 3.3 / seamonkey 2.1) gecko 2.0 added the new chromeworker object, which provides a special chrome-only worker that can be used by applications and extensions.
Organizing your CSS - Learn web development
you will typically have rules set up for: body p h1, h2, h3, h
4, h5 ul and ol the table properties links in this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.
...} h1, h2, h3, h
4 { ...
The box model - Learn web development
if we assume that the box has the following css defining width, height, margin, border, and padding: .box { width: 350px; height: 150px; margin: 10px; padding: 25px; border: 5px solid black; } the space taken up by our box using the standard box model will actually be
410px (350 + 25 + 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box.
...if you set it to -10px, you'll see that the overall margin becomes
40px — it subtracts from the 50px.
Grids - Learn web development
header { grid-column: 1 / 13; grid-row: 1; } article { grid-column:
4 / 13; grid-row: 2; } aside { grid-column: 1 /
4; grid-row: 2; } footer { grid-column: 1 / 13; grid-row: 3; } a css grid grid system body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-gap: 20px; } header { grid-column: 1 / 13; gri...
...d-row: 1; } article { grid-column:
4 / 13; grid-row: 2; } aside { grid-column: 1 /
4; grid-row: 2; } footer { grid-column: 1 / 13; grid-row: 3; } header, footer { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } aside { border-right: 1px solid #999; } <div class="container"> <header>this is my lovely blog</header> <article> <h1>my article</h1> <p>duis felis orci, pulvinar id metus ut, rutrum luctus orci.
CSS layout - Learn web development
beginner's guide to media queries the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than
480 pixels".
...
4, 6, or 12), and then fit your content columns inside these imaginary columns.
How does the Internet work? - Learn web development
if you're trying to connect, say, ten computers, you need
45 cables, with nine plugs per computer!
...for example (at the time of writing; ip addresses can change) google.com is the domain name used on top of the ip address 173.19
4.121.32.
Basic native form controls - Learn web development
<input type="hidden" id="timestamp" name="timestamp" value="1286705
410"> 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,
456) 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=
456 this is a very convenient way to build a "hot map".
Example 2 - Learn web development
ight: 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 : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertica...
...adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .
4em .
4em; box-shadow: 0 .2em .
4em rgba(0,0,0,.
4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document...
Example 3 - Learn web development
ight: 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 : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertica...
...adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .
4em .
4em; box-shadow: 0 .2em .
4em rgba(0,0,0,.
4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.for...
Example - Learn web development
="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width:
400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } in...
...put:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 12
4px; } label { position: relative; } label em { position: absolute; right: 5px; top: 20px; } result ...
Styling web forms - Learn web development
font-style: normal; } @font-face { font-family: 'typewriter'; src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), url('fonts/veteran_typewriter-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font : 1.3rem sans-serif; padding : 0.5em; margin : 0; background : #222; } form { position : relative; width : 7
40px; height :
498px; margin : 0 auto; padding: 1em; box-sizing: border-box; background : #fff url(background.jpg); /* we create our grid */ display : grid; grid-gap : 20px; grid-template-columns : repeat(2, 1fr); grid-template-rows : 10em 1em 1em 1em; } notice that we've used some css grid and flexbox to lay out the form.
...simply put, we remove their borders and backgrounds, and redefine their padding and margin: input, textarea { font : 1.
4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0 10px; margin : 0; width : 80%; background : none; } when one of these fields gains focus, we highlight them with a light grey, transparent, background (it is always important to have focus style, for usability and keyboard accessibility): input:focus, textarea:focus { background : rgba(0,0,0,.1); border-r...
Test your skills: Advanced styling - Learn web development
we've made one available in the same directory as our html files — see search-2
4px.png — plus a <div> element after the search input to help you attach it, should you need it.
...this can be anything you like, but you probably want to set a width and height (of somewhere between about 18 and 2
4 pixels), and a subtle border and/or background color.
JavaScript basics - Learn web development
=== let myvariable = 3; myvariable ===
4; not, does-not-equal this returns the logically opposite value of what it precedes.
...for example: multiply(
4, 7); multiply(20, 20); multiply(0.5, 3); note: the return statement tells the browser to return the result variable out of the function so it is available to use.
The web and web standards - Learn web development
one last significant data point to share is that in 199
4, timbl founded the world wide web consortium (w3c), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications.
... user
4 might be using a really old desktop machine that can't run modern browsers.
Document and website structure - Learn web development
note: colorblind people represent around
4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind.
... blind and visually impaired people represent roughly
4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).
Getting started with HTML - Learn web development
for example, the <img> element embeds an image file onto a page: <img src="https://udn.realityripple.com/samples/d5/2be21e0
477.png"> this would output the following: note: empty elements are sometimes called void elements.
...one of my favorite drummers is neal peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/rush_%28band%29" title="rush wikipedia article">rush</a>.\ my favourite rush album is currently <a href="http://www.deezer.com/album/9
42295">moving pictures</a>.</p>\ <img src="https://udn.realityripple.com/samples/
4b/9bb5edda5d.jpg">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preven...
Creating a Python XPCOM component
defining the interface make a file named "nsipysimple.idl" to define the interface: #include "nsisupports.idl" [scriptable, uuid(2b32
4e9d-a322-
44a7-bd6e-0d8c83d9
4883)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void change(in string avalue); }; this is the same as the nsisimple interface used here.
...make a file named "py_simple.py" for the actual code (again, in the 'components' directory): from xpcom import components, verbose class pysimple: #pythontestcomponent _com_interfaces_ = components.interfaces.nsipysimple _reg_clsid_ = "{c
456ceb5-f1
42-
40a8-becc-76
4911bc8ca5}" _reg_contractid_ = "@mozilla.org/pysimple;1" def __init__(self): self.yourname = "a default name" # or mname ?
Avoiding leaks in JavaScript XPCOM components
see one of the patches in bug 23138
4 for some examples.
... var private_data = 0; var result = new array(); result[0] = function() { return (private_data += 1); } result[1] = function() { return (private_data *= 2); } return result; } // this function returns the string "results: 1, 2,
4, 0, 5, 1, 10." function test() { var fns1 = function_array(); var fns2 = function_array(); return "results: " + fns1[0]() + ", " + // increments first private_data to 1 fns1[1]() + ", " + // doubles first private_data to 2 fns1[1]() + ", " + // doubles first private_data to
4 fns2[1]() + ", " + // doubles second private_data to 0...
Building the WebLock UI
the "shell" for the xul file, then, looks like this: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="weblock_ui" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" persist="screenx screeny" screenx="2
4" screeny="2
4"> </dialog> note that this part of the xul file also contains a stylesheet declaration, which imports css rules and applies them to particular parts of the interface.
... weblock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="weblock_mgg" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" style="width: 30em;" persist="screenx screeny" screenx="2
4" screeny="2
4"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox flex="1"> <separator class="thin"/> <hbox align="center"> <textbox id="dialog.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> <hbox align="center"> <radiogroup o...
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#6
4 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#6
4 this problem also appears in the c++ version above, and i've added |pr_false| as a fourth parameter there as well.
Receiving startup notifications
receiving startup notifications in gecko 2.0 (firefox
4) and later in order to improve startup times, changes were made to the xpcom startup process.
...receiving startup notifications prior to gecko 2.0 (firefox
4) to receive startup notifications, one needs to register with the "app-startup" category using nsicategorymanager; having done so, the component will receive these startup notifications, including: xpcom-startup sent when xpcom finishes starting up.
XPCOM Stream Guide
= components.constructor("@mozilla.org/io/string-input-stream;1", "nsistringinputstream", "setdata"); function buildstream(data) { return new stringstream(data, data.length); } function run_test() { var str1 = buildstream("we "); var str2 = buildstream("will "); var str3 = buildstream("rock "); var str
4 = buildstream("you!"); var check = "we will rock you!"; var multi = components.classes["@mozilla.org/io/multiplex-input-stream;1"] .createinstance(components.interfaces.nsimultiplexinputstream); multi.appendstream(str1); multi.appendstream(str2); multi.appendstream(str3); multi.appendstream(str
4); var instream = components.classes["@mozilla.org/scriptablei...
... */ store.init(6
4, 6
4, 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.utils
evalinwindow() removed in gecko 3
4.
... obsolete since gecko
45 the function was moved to threadsafechromeutils nukesandbox() recomputewrappers() to be called from js only.
Components object
utils.methodjit obsolete since gecko 2
4.0 provides access to the value of the methodjit property in the javascript environment.
... utils.methodjit_always obsolete since gecko 2
4.0 provides access to the value of the methodjit_always property in the javascript environment.
nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,5
4" 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,2
46" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,2
46" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,2
46" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcst...
...ring_(external)"> <area alt="" coords="11
47,198,1259,2
46" href="http://developer.mozilla.org/en/nscautostring_(external)" shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,29
4,208,3
42" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,29
4,
475,3
42" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="
499,29
4,779,3
42" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,29
4,925,3
42" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(ex...
nsAString (External)
<map id="classes" name="classes"> <area alt="" coords="963,6,10
45,5
4" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="5
48,198,676,2
46" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,2
46" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="93...
...7,198,1071,2
46" href="http://developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promiseflatstring_(external)"> <area alt="" coords="1095,198,1196,2
46" href="http://developer.mozilla.org/en/nsautostring_(external)" shape="rect" title="nsautostring_(external)"> <area alt="" coords="5,29
4,197,3
42" href="http://developer.mozilla.org/en/nsdependentstring_external" shape="rect" title="nsdependentstring_external"> <area alt="" coords="221,29
4,
467,3
42" href="http://developer.mozilla.org/en/ns_convertasciitoutf16_external" shape="rect" title="ns_convertasciitoutf16_external"> <area alt="" coords="
491,29
4,733,3
42" href="http://developer.mozilla.org/en/ns_convertutf8toutf16_external" shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="757,29
4,869,3
42" href...
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 6
4 characters.
...dwithconversion(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(print6
4, print32) - source parameters print6
4 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(nsreadingiterator...
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 6
4 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(print6
4, print32) - source parameters print6
4 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(nsrea...
amIInstallTrigger
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 boolean enabled(); boolean install(in nsivariant aargs, [optional] in amiinstallcallback acallback); boolean installchrome(in pruint32 atype, in astring aurl, in astring askin); deprecated since gecko 2.0 boolean startsoftwareupdate(in astring aurl, [optional] in print32 aflags); deprecated since gecko 2.0 boolean updateenabled(); deprecated since gecko 2.0 constants retained for backwards compatibility.
... constant value description skin 1 locale 2 content
4 package 7 methods enabled() tests if installation is enabled.
imgIEncoder
normally (width*3) or (width*
4), depending on your input format, but some data uses padding at the end of each row, which would be extra.
...normally (width*3) or (width*
4), depending on your input format, but some data uses padding at the end of each row, which would be extra.
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.1
4) 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 0x00a
400 see also mozirepresentativecolorcallback bug 63
4139 ...
AudioTrack - Web APIs
the language is specified as a bcp
47 (rfc 56
46) 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 56
46) format.
Background Tasks API - Web APIs
css content body { font-family: "open sans", "lucida grande", "arial", sans-serif; font-size: 16px; } .logbox { margin-top: 16px; 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; overflow-y: scroll; width: 388px; height:
460px; ...
...} .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
examples first, a couple of simple trivial examples, to help explain how the parameters are used: var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(2, 22050,
44100); if you use this call, you will get a stereo buffer (two channels), that, when played back on an audiocontext running at
44100hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames /
44100hz = 0.5 seconds.
... var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(1, 22050, 22050); if you use this call, you will get a mono buffer (one channel), that, when played back on an audiocontext running at
44100hz, will be automatically *resampled* to
44100hz (and therefore yield
44100 frames), and last for 1.0 second:
44100 frames /
44100hz = 1 second.
BaseAudioContext.createWaveShaper() - Web APIs
amount : 50, n_samples =
44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
... distortion.curve = makedistortioncurve(
400); distortion.oversample = '
4x'; specifications specification status comment web audio apithe definition of 'createwaveshaper()' in that specification.
BaseAudioContext.currentTime - Web APIs
// reduced time precision (2ms) in firefox 60 audioctx.currenttime; // 23.
40
4 // 2
4.192 // 25.51
4 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled audioctx.currenttime; //
49.8 // 50.6 // 51.7 // ...
BaseAudioContext - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top...
..."><rect x="151" y="1" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the background to process audio data.
BeforeInstallPromptEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571
428571
428571%; 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignme...
...nt-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="2
40" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect ...
...x="116" y="1" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box.
BiquadFilterNode() - Web APIs
55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support
42notes full support
42notes notes before opera
46, the default values were not supported.safari ?
...59, the default values were not supported.chrome android full support 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
46, the default values were not supported.safari ios ?
BlobEvent.timecode - Web APIs
ie no support noopera full support
44safari no support nowebview android full support 57chrome android full support 57firefox android ?
... opera android full support
43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
Bluetooth.requestDevice() - Web APIs
a proprietary 128-bit uuid service c
48e6067-5295-
48d3-8d5c-0395f61792b1.
...let options = { filters: [ {services: ['heart_rate']}, {services: [0x1802, 0x1803]}, {services: ['c
48e6067-5295-
48d3-8d5c-0395f61792b1']}, {name: 'examplename'}, {nameprefix: 'prefix'} ], optionalservices: ['battery_service'] } navigator.bluetooth.requestdevice(options).then(function(device) { console.log('name: ' + device.name); // do something with the device.
BroadcastChannel - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top...
..."><rect x="151" y="1" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">broadcastchannel</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor broadcastchannel() creates an object linking to the named channel.
CSSCounterStyleRule - Web APIs
ediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><r...
...ect x="116" y="1" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
CSSNumericValue.parse() - Web APIs
exceptions syntaxerror tbd examples the following returns a cssunitvalue object with a unit property equal to "px" and a value property equal to
42.
... let numvalue = cssnumericvalue.parse("
42.0px"); specifications specification status comment css typed om level 1the definition of 'parse' in that specification.
CSSPositionValue - Web APIs
let replacedel = document.getelementbyid( 'image' ); let position = new csspositionvalue( css.px(35), css.px(
40) ); replacedel.attributestylemap.set( 'object-position', position ); console.log( position.x.value, position.y.value ); console.log( replacedel.computedstylemap().get('object-position') ); we set the object-position property, then check the values returned.
... #image { width: 300px; height: 300px; border: 1px solid black; background-color: #dededf; object-fit: none; } <p>check the developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/
4f9fbd7dfb.svg" alt="mdn logo"/> ...
CSSPrimitiveValue - Web APIs
diagram" 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="#d
4dde
4" stroke-width="2px" /><text x="
41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d
4dde
4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect...
... x="121" y="1" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CSSValueList - Web APIs
diagram" 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="#d
4dde
4" stroke-width="2px" /><text x="
41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d
4dde
4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="1...
...21" y="1" width="120" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CSS Painting API - Web APIs
illed' ) { ctx.fillstyle = thecolor; ctx.strokestyle = thecolor; } else { ctx.fillstyle = 'none'; ctx.strokestyle = 'none'; } ctx.beginpath(); ctx.moveto( x, y ); ctx.lineto( blockwidth, y ); ctx.lineto( blockwidth + blockheight, blockheight ); ctx.lineto( x, blockheight ); ctx.lineto( x, y ); ctx.closepath(); ctx.fill(); ctx.stroke(); for (let i = 0; i <
4; i++) { let start = i * 2; ctx.beginpath(); ctx.moveto( blockwidth + (start * 10) + 10, y); ctx.lineto( blockwidth + (start * 10) + 20, y); ctx.lineto( blockwidth + (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.stro...
...ke(); } } }); 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 1
4</li> <li>item 15</li> <li>item 16</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/hilite.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...
Using the CSS properties and values API - Web APIs
.registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b
4d
455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b
4d
455; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registered...
...: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b
4d
455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b
4d
455; } button { height:
40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while not functionally accurate, a good way to think about the difference between the unregistered property in the above example and the registered property is t...
CanvasPattern.setTransform() - Web APIs
svg> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-
45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0,
400,
400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code ...
...<canvas id="canvas" width="
400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-
45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0,
400,
400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('res...
CanvasRenderingContext2D.addHitRegion() - Web APIs
(if you don't see the full smiley, check the browser compatibility table to see if your current browser supports hit regions already; you might need to activate a preference.) playable code <canvas id="canvas" width="
400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 ...
...see https://github.com/whatwg/html/issues/3
407 for more information.
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
the curve ends at (220, 1
40).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,1
40); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.closePath() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 1
40); // move pen to bottom-left corner ctx.lineto(120, 10); // line to top corner ctx.lineto(220, 1
40); // line to bottom-right corner ctx.closepath(); // line to bottom-left corner ctx.stroke(); result closing just one sub-path this example draws a smiley face consisting of three disconnected sub-paths.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(2
40, 20,
40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20,
40, 0, math.pi); ctx.moveto(215, 80); ctx.arc(150, 80, 65, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.closepath' in that specification.
CanvasRenderingContext2D.createImageData() - Web APIs
each pixel within an imagedata object consists of four array values, so the object's data property has a length of
4 × 5,000, or 20,000.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i +=
4) { // modify pixel data imagedata.data[i + 0] = 190; // r value imagedata.data[i + 1] = 0; // g value imagedata.data[i + 2] = 210; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result more examples for more examples using createimagedata() and the imagedata object, see pixel manipulation with canvas...
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.filter = 'blur(
4px)'; ctx.font = '
48px serif'; ctx.filltext('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a3
4a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.
4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
html <canvas id="canvas" width="
460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'center'; const img = new image(); img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.filltext('source', w * .5, ...
...20); ctx.drawimage(img, 0, 2
4, w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 2
4, w * 3, h * 3); ctx.filltext('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage(img, w *
4, 2
4, w * 3, h * 3); }; result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.imagesmoothingenabled' in that specification.
CanvasRenderingContext2D.putImageData() - Web APIs
dirtyheight: height; var limitbottom = dirtyy + dirtyheight; var limitright = dirtyx + dirtywidth; for (var y = dirtyy; y < limitbottom; y++) { for (var x = dirtyx; x < limitright; x++) { var pos = y * width + x; ctx.fillstyle = 'rgba(' + data[pos*
4+0] + ',' + data[pos*
4+1] + ',' + data[pos*
4+2] + ',' + (data[pos*
4+3]/255) + ')'; ctx.fillrect(x + dx, y + dy, 1, 1); } } } // draw content onto the canvas ctx.fillrect(0, 0, 100, 100); // create an imagedata object from it var imagedata = ctx.getimagedata(0, 0, 100, 100); // use the putimagedata function that il...
...anvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1] = 127; pixels[0 + 2] = 255; pixels[0 + 3] = 1; console.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels2 = imgdata2.data; console.log("after:", pixels2); the output might look like: before: uint8clampedarray(
4) [ 1, 127, 255, 1 ] after: uint8clampedarray(
4) [ 255, 255, 255, 1 ] specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.putimagedata' in that specification.
A basic ray-caster - Web APIs
with the blockiness factor cranked up to render slivers 8 pixels wide, i can run a 320 x 2
40 window at 2
4 fps on my apple mini.
... firefox 1.5 beta 1 is even faster; i can run 320 x 2
40 at 2
4 fps with
4 pixel slivers.
CharacterData - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
CompositionEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y=...
..."1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d
4dde
4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">compositionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
ConvolverNode - Web APIs
number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 1, 2, or
4 channel interpretation "speakers" constructor convolvernode() creates a new convolvernode object instance.
... convolvernode.buffer a mono, stereo, or
4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the reverb effect.
CustomEvent - Web APIs
(returns the value of event.defaultprevented.) event.preventbubble() obsolete since gecko 2
4 obsolete; use event.stoppropagation instead.
... (prevents the event from bubbling.) event.preventcapture() obsolete since gecko 2
4 obsolete; use event.stoppropagation instead.
DOMImplementation.createHTMLDocument() - Web APIs
; p.innerhtml = "this is a new paragraph."; try { doc.body.appendchild(p); } catch(e) { console.log(e); } // copy the new html document into the frame let destdocument = frame.contentdocument; let srcnode = doc.documentelement; let newnode = destdocument.importnode(srcnode, true); destdocument.replacechild(newnode, destdocument.documentelement); } the code in lines
4–12 handle creating the new html document and inserting some content into it.
... line
4 uses createhtmldocument() to construct a new html document whose <title> is "new document".
DOMMatrix() - Web APIs
the dommatrix constructor creates a new dommatrix object which represents
4x
4 matrices, suitable for 2d and 3d operations..
... var point = new dompoint(5,
4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status comment geometry interfaces module level 1the definition of 'domm...
DOMRect - Web APIs
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="#d
4dde
4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161,20 161,30 151,25" stroke="#d
4dde
4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/domrect" target="_top"><re...
...ct x="191" y="1" width="75" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
DOMTokenList.forEach() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeachchrome full support
45edge full support 16firefox full support 50ie no support noopera full support 32safari full support 10webview android full support ...
...
45chrome android full support
45firefox android full support 50opera android full support 32safari ios full support 10samsung internet android full support 5.0legend full support full support no support no support ...
DataTransferItem.webkitGetAsEntry() - Web APIs
#dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border:
4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 1
4px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitgetasentrychrome full support 13edge full support 1
4firefox full support 50ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support ...
DelayNode() - Web APIs
55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support
42safari ?
...9, the default values were not supported.chrome android full support 55notes full support 55notes notes before version 59, the default values were not supported.firefox android full support 53opera android full support
42safari ios ?
Document.evaluate() - Web APIs
unordered_node_iterator_type
4 a result set containing all the nodes matching the expression.
... no support noopera full support 9safari full support 5webview android full support 1chrome android full support 18firefox android full support
4opera android full support 10.1safari ios full support
4.2samsung internet android full support 1.0legend full support full support no support ...
Document.fonts - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontschrome full support 60edge full support 79firefox full support
41 full support
41 no support 35 —
41disabled disabled from version 35 until version
41 (exclusive): this feature is behind the layout.css.font-loading-api.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support
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 full ...
Document.lastModified - Web APIs
alert(document.lastmodified); // returns: tuesday, december 16, 2017 11:09:
42 transforming lastmodified into a date object this example transforms lastmodified into a date object.
...(see: bug
4363 – 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.requestStorageAccess() - Web APIs
assuming all of the requirements above are satisfied, firefox will automatically grant storage access to the requesting origin on up to a threshold number of first-party origins in the current session for the duration of user’s session, up to a maximum of 2
4 hours.
... reset after 2
4 hours in the case of a long-running browser session.
Document.xmlEncoding - Web APIs
warning: do not use this attribute; it has been removed from the dom level
4 specification and is no longer supported in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7).
... specification http://www.w3.org/tr/dom-level-3-cor...ment3-encoding this has been removed from dom core level
4wd ...
Document.xmlVersion - Web APIs
this attribute was never really useful, since it always returned 1.0, and has been removed in dom level
4.
...to detect this, you can create an element with its name in lower case, then check to see if it gets converted into all upper case (in which case the document is in the non-xml html mode): if (document.createelement("foo").tagname == "foo") { /* document is not xml */ } specifications http://www.w3.org/tr/dom-level-3-cor...ument3-version this has been removed from dom core level
4wd ...
DocumentFragment - Web APIs
ram" 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1...
...51" y="1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d
4dde
4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="3
46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">documentfragment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;}...
DocumentOrShadowRoot.activeElement - Web APIs
example html <p>select some text from one of the text areas below:</p> <form> <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="
40">this is text area one.
...donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea> <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="
40">this is text area two.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
body = document.getelementsbytagname("body")[0]; // creates <table> and <tbody> elements mytable = document.createelement("table"); mytablebody = document.createelement("tbody"); // creating all cells for(var j = 0; j < 3; j++) { // creates a <tr> element mycurrent_row = document.createelement("tr"); for(var i = 0; i <
4; i++) { // creates a <td> element mycurrent_cell = document.createelement("td"); // creates a text node currenttext = document.createtextnode("cell is row " + j + ", column " + i); // appends the text node we created into the cell <td> mycurrent_cell.appendchild(currenttext); // appends...
..."rgb(255,0,0)"; } else { mycurrent_cell.style.display = "none"; } } mytablebody.appendchild(mycurrent_row); } mytable.appendchild(mytablebody); mybody.appendchild(mytable); } </script> </html> original document information author(s) marcio galli migrated from http://web.archive.org/web/2000081505
4125/http://mozilla.org/docs/dom/technote/tn-dom-table/ ...
DynamicsCompressorNode.threshold - Web APIs
the threshold property's default value is -2
4 and it can be set between -100 and 0.
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(
40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == '...
EXT_disjoint_timer_query - Web APIs
types this extension exposes a new type: gluint6
4ext unsigned 6
4-bit integer number.
... ext.query_result_ext a gluint6
4ext containing the query result.
EXT_shader_texture_lod - Web APIs
glsl built-in functions the following new functions can be used in glsl shader code, if this extension is enabled: vec
4 texture2dlodext(sampler2d sampler, vec2 coord, float lod) vec
4 texture2dprojlodext(sampler2d sampler, vec3 coord, float lod) vec
4 texture2dprojlodext(sampler2d sampler, vec
4 coord, float lod) vec
4 texturecubelodext(samplercube sampler, vec3 coord, float lod) vec
4 texture2dgradext(sampler2d sampler, vec2 p, vec2 dpdx, vec2 dpdy) vec
4 texture2dprojgradext(sampler2d sampler, vec3 p, vec2 dpdx, vec2 ...
...dpdy) vec
4 texture2dprojgradext(sampler2d sampler, vec
4 p, vec2 dpdx, vec2 dpdy) vec
4 texturecubegradext(samplercube sampler, vec3 p, vec3 dpdx, vec3 dpdy) examples enabling the extensions: gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status comment ext_shader_texture_lodthe definition of 'ext_shader_texture_lod' in th...
Element: keydown event - Web APIs
since firefox 65, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 35
4358, also see keydown and keyup events are now fired during ime composition for more useful details).
... <input placeholder="click here, then press down a key." size="
40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent input.onkeydown = logkey; specifications specification status ui events working draft ...
Element: keyup event - Web APIs
since firefox 65, the keyup and keydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 35
4358, also see keydown and keyup events are now fired during ime composition for more useful details).
... <input placeholder="click here, then press and release a key." size="
40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specifications specification status ui events working draft ...
Element: overflow event - Web APIs
es yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width:
40px; height:
40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( ev...
...ent ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "
40px"; child.style.height = "
40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
Element: underflow event - Web APIs
es yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width:
40px; height:
40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( ev...
...ent ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "
40px"; child.style.height = "
40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="116"...
... y="1" width="100" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
IDBCursor.source - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsourcechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBCursor.update() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupdatechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBCursorWithValue.value - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvaluechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBDatabase: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false });...
...ort', () => { console.log('transaction aborted'); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false });...
IDBDatabase: close event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples this example opens a database and listens for the close event: // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false });...
...se }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false });...
IDBDatabase: error event - Web APIs
bles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false });...
.../ open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false });...
IDBDatabase.onabort - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonabortchrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...t 15safari full support 7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBDatabase.onerror - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerrorchrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...t 15safari full support 7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBDatabase.onversionchange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonversionchangechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...t 15safari full support 7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBDatabase: versionchange event - Web APIs
bubbles no cancelable no interface event event handler property onversionchange examples this example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent',
4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
...('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.result; db.addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent',
4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBEnvironment - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbenvironment deprecatednon-standardchrome full support 2
4 full support 2
4 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...t 15safari full support 7webview android full support yeschrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5available in workers deprecatednon-standardchrome full support yesedge full support ≤18firefox full support ...
IDBFactory.cmp() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcmpchrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...— ?prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
databases - Web APIs
id 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 93
46
40.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 93
46
40.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
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletedatabasechrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...— ?prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBIndex.count() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountchrome full support 2
4 full support 2
4 no support 23 — 2
4prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support ...
...— ?prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 25firefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBRequest.source - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsourcechrome full support 2
4 full support 2
4 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no suppor...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBRequest: success event - Web APIs
bubbles no cancelable no interface event event handler property onsuccess examples this example tries to open a database and listens for the success event using addeventlistener(): // open the database const openrequest = window.indexeddb.open('todolist',
4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('...
...{ unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist',
4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false })...
IDBRequest.transaction - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support 2
4 full support 2
4 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no suppor...
... 15safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 1
4safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name...
IDBTransaction.objectStoreNames - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorenameschrome full support
48edge full support ≤79firefox full support yesie ?
... opera full support 35safari full support yeswebview android full support
48chrome android full support
48firefox android full support yesopera android full support 35safari ios full support yessamsung internet android full support 5.0legend full support full support compatibility unknown ...
IDBTransaction: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false })...
...st transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `abort` transaction.addeventlistener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false })...
IDBTransaction.commit() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcommitchrome full support 76edge full support 79firefox full support 7
4ie no support noopera full support 63safari no support nowebview android full support 76chrome android full support 76firefox android no support ...
... noopera android full support 5
4safari ios no support nosamsung internet android full support 12.0legend full support full support no support no support ...
IDBTransaction: complete event - Web APIs
bubbles no cancelable no interface event event handler property oncomplete examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); object...
... event => { console.log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false })...
IDBTransaction: error event - Web APIs
bles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false });...
...sktitle}`); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist',
4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false });...
IIRFilterNode.getFrequencyResponse() - Web APIs
we first create the float32array objects we need, one containing the input frequencies, and two to receive the output magnitude and phase values: var myfrequencyarray = new float32array(5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] =
4000; myfrequencyarray[
4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our html to contain our results, and grab a reference to it in our javascript: <p>iir filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); f...
...inally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page: var feedforwardcoefficients = [0.1, 0.2, 0.3, 0.
4, 0.5]; var feedbackcoefficients = [0.5, 0.
4, 0.3, 0.2, 0.1]; var iirfilter = audioctx.createiirfilter(feedforwardcoefficients, feedbackcoefficients); ...
ImageCapture.takePhoto() - Web APIs
opera full support
47 full support
47 no support
46 —
47notes notes photosettings argument not supported.safari ?
... opera android full support
44 full support
44 no support
43 —
44notes notes photosettings argument not supported.safari ios ?
InputEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y=...
..."1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d
4dde
4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">inputevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} construc...
Timing element visibility with the Intersection Observer API - Web APIs
.ad { height: 96px; 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: 1
4px; bottom: 30px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.5); } there's nothing magic in here.
... function loadrandomad(replacebox) { let ads = [ { bgcolor: "#cec", title: "eat green beans", body: "make your mother proud—they're good for you!" }, { bgcolor: "aquamarine", title: "millionsoffreebooks.whatever", body: "read classic literature online free!" }, { bgcolor: "lightgrey", title: "3.1
4 shades of gray: a novel", body: "love really does make the world go round..." }, { bgcolor: "#fee", title: "flexbox florist", body: "when life's layout gets complicated, send flowers." } ]; let adbox, title, body, timerelem; let ad = ads[math.floor(math.random()*ads.length)]; if (replacebox) { adobserver.unobserve(replacebox); adbox = replaceb...
LocalFileSystem - Web APIs
so to request storage, you need to do something like the following: var requestedbytes = 102
4*102
4*10; // 10mb navigator.webkitpersistentstorage.requestquota ( requestedbytes, function(grantedbytes) { window.requestfilesystem(persistent, grantedbytes, oninitfs, errorhandler); }, function(e) { console.log('error', e); } ); your user must grant your app permission to store data locally before your app can use persistent storage.
... window.requestfilesystem(window.persistent, 102
4*102
4,oninitfs,errorhandler); method overview void requestfilesystem (in unsigned short type, in unsigned long long size, in filesystemcallback successcallback, in optional errorcallback errorcallback); void resolvelocalfilesystemurl (in domstring url, in entrycallback successcallback, in optional errorcallback errorcallback); constants constant value d...
MediaError.code - Web APIs
media_err_src_not_supported
4 the associated resource or media provider object (such as a mediastream) has been found to be unsuitable.
...the error handler simply outputs a message var obj = document.createelement('video'); obj.onerror = function() {console.log("error with media: " + obj.error.code);} obj.src="https://example.com/blahblah.mp
4"; specifications specification status comment html living standardthe definition of 'mediaerror.code' in that specification.
MediaKeyMessageEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><re...
...ct x="116" y="1" width="200" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.571
428571
428571%; 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono...
...,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.571
428571
428571%; 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="#d
4dde
4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53"...
... text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d
4dde
4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaRecorder() - Web APIs
the recorded media data will be stored in an mp
4 wrapper (so if you gather the chunks of media data and save them to disk, they will be in an mp
4 file).
...if (navigator.mediadevices.getusermedia) { var constraints = { audio: true, video: true }; var chunks = []; var onsuccess = function(stream) { var options = { audiobitspersecond : 128000, videobitspersecond : 2500000, mimetype : 'video/mp
4' } var mediarecorder = new mediarecorder(stream,options); m = mediarecorder; ...
MediaRecorder.audioBitsPerSecond - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobitspersecond experimentalchrome full support
49edge full support 79firefox full support 71ie no support noopera full support 36safari no support nowebview android full support ...
...
49chrome android full support
49firefox android ?
MediaStream.getTracks() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgettracks experimentalchrome full support
45edge full support 12firefox full support yesie no support noopera full support yessafari full support yeswebview android full support ...
...
45chrome android full support
45firefox android full support yesopera android no support nosafari ios full support yessamsung internet android full support 5.0legend full support full support no support no supportexperimental.
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: 1
4px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom:
4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let log...
... 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> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 1
4px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom:
4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let log...
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="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 1
4px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom:
4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = docume...
...sing 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="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 1
4px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom:
4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = docume...
MediaStreamTrack.applyConstraints() - Web APIs
it specifies that the page or web app needs a width between 6
40 and 1280 and a height between
480 and 720, with the later number in each pair being preferred.
... const constraints = { width: {min: 6
40, 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
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><r...
...ect x="116" y="1" width="210" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
other common sample sizes are 8 (for reduced bandwidth requirements) and 2
4 (for high-resolution professional audio).
...for example, 16-bit stereo audio requires (16/8)*2 or
4 bytes per sample.
MediaTrackSettings - Web APIs
standard cd-quality audio, for example, has a sample rate of
41,000 samples per second.
...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 16:9 high-definition widescreen aspect ratio), and 1.6 (for the 16:10 aspect ratio common among widescreen computers and tablets).
Using the Media Capabilities API - Web APIs
s live example css li { margin : 1em; } html <form> <p>select your video configuration and find out if this browser supports the codec, and whether decoding will be smooth and power efficient:</p> <ul> <li> <label for="codec">select a codec</label> <select id="codec"> <option>video/webm; codecs=vp8</option> <option>video/webm; codecs=vp9</option> <option>video/mp
4; codecs=avc1</option> <option>video/mp
4; codecs=avc1.
42003
4</option> <option>video/ogg; codecs=theora</option> <option>invalid</option> </select> </li> <li> <label for="size">select a size</label> <select id="size"> <option>7680x
4320</option> <option>38
40x2160</option> <option>2560x1
440</option> <option>1920x1080</option> <option>128...
...0x720</option> <option selected>800x600</option> <option>6
40x
480</option> <option>320x2
40</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>2
4</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(), ...
MessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.33333333333333
4%; 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,...
...monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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) 16 : 5th button (typically the "browser forward" button) example this example logs the buttons property when you trigger a mousedown event.
MouseEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y=...
..."1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d
4dde
4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} construc...
Navigator.deviceMemory - Web APIs
it’s approximated by rounding down to the nearest power of 2, then dividing that number by 102
4.
... syntax memoryamount = navigator.devicememory value a floating point number; one of 0.25, 0.5, 1, 2,
4, 8.
NavigatorID.appVersion - Web APIs
returns either "
4.0" or a string representing version information about the browser.
... syntax window.navigator.appversion value either "
4.0" or a string representing version information about the browser.
NavigatorID.platform - Web APIs
for example: "macintel", "win32", "freebsd i386", "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 6
4-bit version of windows.
... internet explorer and versions of firefox prior to version 63 still report "win6
4".
Online and offline events - Web APIs
firefox
41 updates this property when the os reports a change in network connectivity on windows, linux, and os x.
... firefox
41 fires these events when the os reports a change in network connectivity on windows, linux, and os x.
NetworkInformation.effectiveType - Web APIs
the effectivetype read-only property of the networkinformation interface returns the effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '
4g'.
... syntax var effectivetype = networkinformation.effectivetype value a string containing one of 'slow-2g', '2g', '3g', or '
4g'.
Node.localName - Web APIs
in dom
4 this api was moved from node to the element and attr interfaces.
...= "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </head> <body onload="test()"> <svg:svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> </svg:svg> <textarea id="text" rows="
4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon.
NonDocumentTypeChildNode.nextElementSibling - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnextelementsiblingchrome full support
4edge full support 12notes full support 12notes notes before edge 79, this property was only implemented for element, not for characterdata.firefox full support 3.5ie partial support 9notes partial support 9notes...
...see polyfill.opera full support 10safari full support
4webview android full support yeschrome android full support yesfirefox android full support
4opera android full support 10.1safari ios full support yessamsung internet android full support yeslegend full support full support ...
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment
4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment1
4 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_attachment
4_webgl ext.color_attachment5_webgl ext.color_attachment6_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_attachment1
4_webgl ext.color_attachment15_webgl when using the webgl_depth_texture extension: ext.depth_stencil_attachment: depth and stencil buffer data storage.
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
57notes full support 57notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support
42safari ?
...59, the default values were not supported.chrome android full support 57notes full support 57notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support
42safari ios ?
OfflineAudioCompletionEvent.renderedBuffer - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrenderedbufferchrome full support 1
4edge full support 12firefox full support 25ie no support noopera full support 15safari full support 6webview android full support ...
...yeschrome android full support 18firefox android full support 26opera android full support 1
4safari ios full support yessamsung internet android full support 1.0legend full support full support no support no support ...
OscillatorNode.frequency - Web APIs
syntax var oscillator = audioctx.createoscillator(); oscillator.frequency.setvalueattime(
440, audioctx.currenttime); // value in hertz note: though the audioparam returned is read-only, the value it represents is not.
... // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(
440, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web audio apithe definition of 'frequency' in that specification.
OscillatorNode - Web APIs
the default value is
440 hz (a standard middle-a note).
... // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(
440, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specification status comment web audio apithe definition of 'oscillatornode' in that specification.
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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><rec...
...t x="116" y="1" width="190" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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
ea in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle ==
45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (
45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle =
45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default...
...on: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.
4 degrees // since our coneouterangle is
45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.
4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.cu...
PannerNode.coneOuterAngle - Web APIs
ea in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle ==
45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (
45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle =
45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default...
...on: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.
4 degrees // since our coneouterangle is
45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.
4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.cu...
PannerNode.coneOuterGain - Web APIs
ea in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle ==
45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (
45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle =
45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default...
...on: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.
4 degrees // since our coneouterangle is
45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.
4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.cu...
PannerNode.orientationX - Web APIs
ea in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle ==
45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (
45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle =
45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default...
...on: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.
4 degrees // since our coneouterangle is
45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.
4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.cu...
PannerNode.orientationY - Web APIs
ea in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle ==
45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (
45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle =
45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default...
...on: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.
4 degrees // since our coneouterangle is
45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.
4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.cu...
PannerNode.orientationZ - Web APIs
ea in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle ==
45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (
45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle =
45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default...
...on: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.
4 degrees // since our coneouterangle is
45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.
4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.cu...
PaymentAddress.languageCode - Web APIs
the languagecode read-only property of the paymentaddress interface returns a string containing the bcp-
47 language code for the address.
... syntax var paymentlanguagecode = paymentaddress.languagecode; value a domstring providing the bcp-
47 format language code indicating the language the address was written in, such as "en-us", "pt-br", or "ja-jp".
PaymentCurrencyAmount - Web APIs
currency a string containing a valid 3-letter iso
4217 currency identifier (iso
4217) indicating the currency used for the payment value.
...this has been removed; instead of allowing sites to choose the standard to use, iso
4217 is always used for the currency identifier now.
performance.now() - Web APIs
// reduced time precision (1ms) in firefox 60 performance.now(); // 8781
416 // 8781815 // 8782206 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled performance.now(); // 8865
400 // 8866200 // 8866700 // ...
PerformanceMark - Web APIs
style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d
4dde
4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/performancemark" target="...
..._top"><rect x="201" y="1" width="150" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
PerformanceMeasure - Web APIs
style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d
4dde
4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/performancemeasure" targe...
...t="_top"><rect x="201" y="1" width="180" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
PerformanceNavigationTiming - Web APIs
style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d
4dde
4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/performancenavigationtimi...
...ng" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
PerformanceResourceTiming - Web APIs
style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d
4dde
4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/performanceresourcetiming...
..." target="_top"><rect x="201" y="1" width="250" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
PerformanceServerTiming - Web APIs
example given a server that sends the server-timing header, for example a node.js server like this: const http = require('http'); function requesthandler(request, response) { const headers = { 'server-timing': ` cache;desc="cache read";dur=23.2, db;dur=53, app;dur=
47.2 `.replace(/\n/g, '') }; response.writehead(200, headers); response.write(''); return settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.error); the performanceservertiming entries are now observable from javascript via the performanceresourcetiming.servertiming property: let entries = performance.getentriesbytype(...
...'resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration: 53, description: ""} // 2: performanceservertiming {name: "app", duration:
47.2, description: ""} specifications specification status comment server timingthe definition of 'performanceservertiming' in that specification.
Using the Permissions API - Web APIs
at the moment, implementation of the api is at an early stage, so support in browsers is pretty spotty: it can only be found in chrome
44 and later and firefox
43 and later.
... revoking permissions starting in firefox
47, you can now revoke existing permissions, using the permissions.revoke() method.
StaticRange - Web APIs
m" 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="#d
4dde
4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="131,25 1
41,20 1
41,30 131,25" stroke="#d
4dde
4" fill="none"/><line x1="1
41" y1="25" x2="171" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><...
...rect x="171" y="1" width="110" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the default values for its properties.
StereoPannerNode.StereoPannerNode() - Web APIs
55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support
42safari no support nowebview android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.chrome android full support 55notes full support ...
... 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support
42safari ios no support nosamsung internet android full support 6.0notes full support 6.0notes notes before samsung internet 7.0, the default values were not supported.legend full support full support no support no supportsee implementation notes.see implementation notes.
StorageEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="11...
...6" y="1" width="120" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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 represents the key changed.
StorageManager.persist() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpersistchrome full support 52 full support 52 no support
48 — 52alternate name alternate name uses the non-standard name: requestpersistentedge full support ≤79firefox full support 55ie ?
... webview android full support 52 full support 52 no support
48 — 52alternate name alternate name uses the non-standard name: requestpersistentchrome android full support 52 full support 52 no support
48 — 52alternate name alternate name uses the non-standard name: requestpersistentfirefox android full support 55opera android full support yessafari ios ...
SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-38
4", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${b...
...uffer}...[${sharedsecret.bytelength} bytes total]`; } // 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 const generatealiceskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-38
4" }, false, ["derivebits"] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-38
4" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; const bobskeypair = values[1]; const derivebitsbutton = document.queryselector(".ecdh .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { // alice...
SubtleCrypto.encrypt() - Web APIs
rsa-oaep the rsa-oaep public-key encryption system is specified in rfc 3
447.
...lector(".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(16)); return window.crypto.subtle.encrypt( { name: "aes-ctr", counter, length: 6
4 }, key, encoded ); } let iv = new uint8array(16); let key = new uint8array(16); let data = new uint8array(123
45); //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 a cryptokey object const key_encoded = await crypto.subtle.importkey( "raw", key.buffer, 'aes-ctr...
SubtleCrypto.generateKey() - Web APIs
let keypair = window.crypto.subtle.generatekey( { name: "rsa-oaep", moduluslength:
4096, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256" }, true, ["encrypt", "decrypt"] ); elliptic curve key pair generation this code generates an ecdsa signing key pair.
... let keypair = window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-38
4" }, true, ["sign", "verify"] ); hmac key generation this code generates an hmac signing key.
TaskAttributionTiming - Web APIs
style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d
4dde
4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/taskattributiontiming" ta...
...rget="_top"><rect x="201" y="1" width="210" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
TextDecoder - Web APIs
let utf8decoder = new textdecoder(); // default 'utf-8' or 'utf8' let u8arr = new uint8array([2
40, 160, 17
4, 183]); let i8arr = new int8array([-16, -96, -82, -73]); let u16arr = new uint16array([
41200,
47022]); let i16arr = new int16array([-2
4336, -1851
4]); let i32arr = new int32array([-121329230
4]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8arr)); console.log(utf8decoder.decode(u16arr)); console.log(utf8decoder.decode(i16arr)); console.log(utf8decoder.decode(...
... let win1251decoder = new textdecoder('windows-1251'); let bytes = new uint8array([207, 2
40, 232, 226, 229, 2
42,
44, 32, 236, 232, 2
40, 33]); console.log(win1251decoder.decode(bytes)); // Привет, мир!
TextEncoder() - Web APIs
syntax encoder = new textencoder(); parameters textencoder() takes no parameters since firefox
48 and chrome 53 note: prior to firefox
48 and chrome 53, an encoding type label was accepted as a paramer to the textencoder object, since then both browers have removed support for any encoder type other than utf-8, to match the spec.
... exceptions textencoder() throws no exceptions since firefox
48 and chrome 53 note: prior to firefox
48 and chrome 53 an exception would be thrown for an unknown encoding type.
TextEncoder - Web APIs
= 0xef/*0b11101111*/; resarr[respos += 1] = 0xbf/*0b10111111*/; resarr[respos += 1] = 0xbd/*0b10111101*/; break; } // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae nextcode = str.charcodeat(i); if (nextcode >= 0xdc00 && nextcode <= 0xdfff) { point = (point - 0xd800) * 0x
400 + 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*/); ...
... } } if (point <= 0x007f) { resarr[respos += 1] = (0x0/*0b0*/<<7) | point; } else if (point <= 0x07ff) { resarr[respos += 1] = (0x6/*0b110*/<<5) | (point>>>6); resarr[respos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); } else { resarr[respos += 1] = (0xe/*0b1110*/<<
4) | (point>>>12); resarr[respos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); resarr[respos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); } } if (typeof uint8array !== "undefined") return resarr.subarray(0, respos + 1); // else // ie 6-9 resarr.length = respos + 1; // trim off extra weight ...
TimeEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="116" ...
...y="1" width="90" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event.
TouchEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y=...
..."1" width="75" height="50" fill="#fff" stroke="#d
4dde
4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d
4dde
4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} construc...
UIEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y=...
..."1" width="75" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.
URL.origin - Web APIs
the exact structure varies depending on the type of url: for http or https urls, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and
443 respectively, if explicitely specified).
... examples const url = new url("blob:https://mozilla.org:
443/") console.log(url.origin); // logs 'https://mozilla.org' specifications specification status comment urlthe definition of 'url.origin' in that specification.
URLSearchParams - Web APIs
var paramsstring1 = "http://example.com/search?query=%
40"; var searchparams1 = new urlsearchparams(paramsstring1); searchparams1.has("query"); // false searchparams1.has("http://example.com/search?query"); // true searchparams1.get("query"); // null searchparams1.get("http://example.com/search?query"); // "@" (equivalent to decodeuricomponent('%
40')) var paramsstring2 = "?query=value"; var searchparams2 = new urlsearchparams(paramsstring2); searchp...
...arams2.has("query"); // true var url = new url("http://example.com/search?query=%
40"); var searchparams3 = new urlsearchparams(url.search); searchparams3.has("query") // true specifications specification status comment urlthe definition of 'urlsearchparams' in that specification.
URLUtilsReadOnly.origin - Web APIs
the urlutilsreadonly.origin read-only property is a domstring containing the unicode serialization of the origin of the represented url, that is, for http and https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and
443 respectively, if explicitely specified).
... syntax string = object.origin; examples // on this page, returns the origin var result = self.location.origin; // returns:'https://developer.mozilla.org:
443' specifications specification status comment urlthe definition of 'urlutilsreadonly.origin' in that specification.
VTTCue - Web APIs
example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3
489533.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 cueen = n...
...ew 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.
ValidityState.patternMismatch - Web APIs
examples given the following: <p> <label>enter your phone number in the format (123)
456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{
4}" placeholder="####" aria-label="
4-digit number" size="3"/> </label> </p> here we have 3 sections for a north ameri...
...can phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and
4-digits respectively, as defined by the pattern attribute set on each.
VideoTrack - Web APIs
the language is specified as a bcp
47 (rfc 56
46) 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 56
46) format.
WEBGL_compressed_texture_s3tc - Web APIs
compared to a 32-bit rgba texture, it offers
4:1 compression.
...it also provides a
4:1 compression, but differs to the dxt3 compression in how the alpha compression is done.
WaveShaperNode.curve - Web APIs
amount : 50, n_samples =
44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
... distortion.curve = makedistortioncurve(
400); distortion.oversample = '
4x'; specifications specification status comment web audio apithe definition of 'curve' in that specification.
WaveShaperNode - Web APIs
amount : 50, n_samples =
44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
... distortion.curve = makedistortioncurve(
400); distortion.oversample = '
4x'; specifications specification status comment web audio apithe definition of 'waveshapernode' in that specification.
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
possible values: gl.r8 gl.r8ui gl.r8i gl.r16ui gl.r16i gl.r32ui gl.r32i gl.rg8 gl.rg8ui gl.rg8i gl.rg16ui gl.rg16i gl.rg32ui gl.rg32i gl.rgb8 gl.rgba8 gl.srgb8_alpha8 gl.rgba
4 gl.rgb565 gl.rgb5_a1 gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a2ui gl.rgba16ui gl.rgba16i gl.rgba32i gl.rgba32ui gl.depth_component16 gl.depth_component2
4 gl.depth_component32f gl.depth_stencil gl.depth2
4_stencil8 gl.depth32f_stencil8 gl.stencil_index8 width a glsizei specifying the width of the renderbuffer in pixels.
... examples gl.renderbufferstoragemultisample(gl.renderbuffer,
4, gl.rbga
4, 256, 256); specifications specification status comment webgl 2.0the definition of 'glrenderbufferstoragemultisample' in that specification.
WebGLContextEvent - Web APIs
acediagram" 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="#d
4dde
4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d
4dde
4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d
4dde
4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect ...
...x="116" y="1" width="170" height="50" fill="#f
4f7f8" stroke="#d
4dde
4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#
4d
4e53" 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.bufferData() - Web APIs
examples using bufferdata var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, 102
4, gl.static_draw); getting buffer information to check the current buffer usage and buffer size, use the webglrenderingcontext.getbufferparameter() method.
... var dataarray = new float32array([1, 2, 3,
4]); var sizeinbytes = dataarray.length * dataarray.bytes_per_element; specifications specification status comment webgl 1.0the definition of 'bufferdata' in that specification.
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
_eac ext.compressed_rg11_eac ext.compressed_signed_rg11_eac ext.compressed_rgb8_etc2 ext.compressed_rgba8_etc2_eac ext.compressed_srgb8_etc2 ext.compressed_srgb8_alpha8_etc2_eac ext.compressed_rgb8_punchthrough_alpha1_etc2 ext.compressed_srgb8_punchthrough_alpha1_etc2 when using the webgl_compressed_texture_pvrtc extension: ext.compressed_rgb_pvrtc_
4bppv1_img ext.compressed_rgba_pvrtc_
4bppv1_img ext.compressed_rgb_pvrtc_2bppv1_img ext.compressed_rgba_pvrtc_2bppv1_img when using the webgl_compressed_texture_etc1 extension: ext.compressed_rgb_etc1_webgl when using the webgl_compressed_texture_atc extension: ext.compressed_rgb_atc_webgl ext.compressed_rgba_atc_explicit_alpha_webgl ext.compres...
...sed_rgba_atc_interpolated_alpha_webgl when using the webgl_compressed_texture_astc extension: ext.compressed_rgba_astc_
4x
4_khr ext.compressed_srgb8_alpha8_astc_
4x
4_khr ext.compressed_rgba_astc_5x
4_khr ext.compressed_srgb8_alpha8_astc_5x
4_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_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr ext.compressed_rgba_astc_8x6_khr ext.compressed_srgb8_alpha8_astc_8x6_khr ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr ext.compressed_rgba_astc_1...
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
_eac ext.compressed_rg11_eac ext.compressed_signed_rg11_eac ext.compressed_rgb8_etc2 ext.compressed_rgba8_etc2_eac ext.compressed_srgb8_etc2 ext.compressed_srgb8_alpha8_etc2_eac ext.compressed_rgb8_punchthrough_alpha1_etc2 ext.compressed_srgb8_punchthrough_alpha1_etc2 when using the webgl_compressed_texture_pvrtc extension: ext.compressed_rgb_pvrtc_
4bppv1_img ext.compressed_rgba_pvrtc_
4bppv1_img ext.compressed_rgb_pvrtc_2bppv1_img ext.compressed_rgba_pvrtc_2bppv1_img when using the webgl_compressed_texture_atc extension: ext.compressed_rgb_atc_webgl ext.compressed_rgba_atc_explicit_alpha_webgl ext.compressed_rgba_atc_interpolated_alpha_webgl when using the webgl_compressed_texture_astc extension: ...
... ext.compressed_rgba_astc_
4x
4_khr ext.compressed_srgb8_alpha8_astc_
4x
4_khr ext.compressed_rgba_astc_5x
4_khr ext.compressed_srgb8_alpha8_astc_5x
4_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_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr ext.compressed_rgba_astc_8x6_khr ext.compressed_srgb8_alpha8_astc_8x6_khr ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr ext.compressed_rgba_astc_10x5_khr ext.compressed_srgb8_alpha8_astc_10x5_khr ext.compressed_rgba_astc_10x6_khr ext.c...
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_attachment
4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment1
4 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_attachment
4_webgl ext.color_attachment5_webgl ext.color_attachment6_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_attachment1
4_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_attachment
4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment1
4 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_attachment
4_webgl ext.color_attachment5_webgl ext.color_attachment6_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_attachment1
4_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_attachment
4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment1
4 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_attachment
4_webgl ext.color_attachment5_webgl ext.color_attachment6_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_attachment1
4_webgl ext.color_attachment15_webgl pname a glenum specifying information to query.
WebGLRenderingContext.getUniform() - Web APIs
gl 1 only boolean glboolean int glint float glfloat vec2 float32array (with 2 elements) ivec2 int32array (with 2 elements) bvec2 array of glboolean (with 2 elements) vec3 float32array (with 3 elements) ivec3 int32array (with 3 elements) bvec3 array of glboolean (with 3 elements) vec
4 float32array (with
4 elements) ivec
4 int32array (with
4 elements) bvec
4 array of glboolean (with
4 elements) mat2 float32array (with
4 elements) mat3 float32array (with 9 elements) mat
4 float32array (with 16 elements) sampler2d glint samplercube glint additionally available in webgl 2 uint ...
...gluint uvec2 uint32array (with 2 elements) uvec3 uint32array (with 3 elements) uvec
4 uint32array (with
4 elements) mat2x3 float32array (with 6 elements) mat2x
4 float32array (with 8 elements) mat3x2 float32array (with 6 elements) mat3x
4 float32array (with 12 elements) mat
4x2 float32array (with 8 elements) mat
4x3 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.viewport() - Web APIs
int32array[1638
4, 1638
4] to get the current viewport, query the viewport constant.
...int32array[0, 0, 6
40,
480] specifications specification status comment webgl 1.0the definition of 'viewport' in that specification.
Compressed texture formats - Web APIs
no no webgl_compressed_texture_s3tc width and height must be multiples of
4.
... yes no webgl_compressed_texture_s3tc_srgb width and height must be multiples of
4.
Data in WebGL - Web APIs
//init colors var vertexcolors = [ vec
4( 0.0, 0.0, 0.0, 1.0 ), // black vec
4( 1.0, 0.0, 0.0, 1.0 ), // red vec
4( 1.0, 1.0, 0.0, 1.0 ), // yellow vec
4( 0.0, 1.0, 0.0, 1.0 ), // green vec
4( 0.0, 0.0, 0.0, 1.0 ), // black vec
4( 1.0, 0.0, 0.0, 1.0 ), // red vec
4( 1.0, 1.0, 0.0, 1.0 ), // yellow vec
4( 0.0, 1.0, 0.0, 1.0 ), // green ]; var cbuffer = gl.createbuffer(); ...
... //continued //create buffer to store colors and reference it to "vcolor" which is in glsl gl.bindbuffer( gl.array_buffer, cbuffer ); gl.bufferdata( gl.array_buffer, flatten(vertexcolors), gl.static_draw ); var vcolor = gl.getattriblocation( program, "vcolor" ); gl.vertexattribpointer( vcolor,
4, gl.float, false, 0, 0 ); gl.enablevertexattribarray( vcolor ); //glsl attribute vec
4 vcolor; void main() { fcolor = vcolor; } varyings varyings are variables that are declared by the vertex shader and used to pass data from the vertex shader to the fragment shader.
Animating textures in WebGL - Web APIs
« previous in this demonstration, we build upon the previous example by replacing our static textures with the frames of an mp
4 video file that's playing.
... const texture = inittexture(gl); const video = setupvideo('firefox.mp
4'); var then = 0; // draw the scene repeatedly function render(now) { now *= 0.001; // convert to seconds const deltatime = now - then; then = now; if (copyvideo) { updatetexture(gl, texture, video); } drawscene(gl, programinfo, buffers, texture, deltatime); requestanimationframe(render); } requestanimationframe(render); that's all there is to it...
Lifetime of a WebRTC session - Web APIs
it’s so big that years ago, smart people saw how big it was, how fast it was growing, and the limitations of the 32-bit ip addressing system, and realized that something had to be done before we ran out of addresses to use, so they started working on designing a new 6
4-bit addressing system.
... each peer tells the signaling server that they want to join the same webrtc session (identified by the token established in step
4).
Signaling and video calling - Web APIs
optionally, see rfc 8
445: interactive connectivity establishment, section 2.3 ("negotiating candidate pairs and concluding ice") if you want greater understanding of how this process is completed inside the ice layer.
... note: technically speaking, the string returned by createoffer() is an rfc 326
4 offer.
The WebSocket API (WebSockets) - Web APIs
cws: fast c++ websocket implementation for node.js (uwebsockets v0.1
4 fork) socket.io: a long polling/websocket based third party transfer protocol for node.js.
... living standard websockets candidate recommendation rfc 6
455: the websocket protocol ietf rfc ...
Controlling multiple parameters with ConstantSourceNode - Web APIs
playbutton" class="button"> ▶️ </div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width:
400px; position: relative; vertical-align: middle; height:
44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 1
4px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; verti...
... function startoscillators() { oscnode1 = context.createoscillator(); oscnode1.type = "sine"; oscnode1.frequency.value = 261.62556530059863
4; // middle c oscnode1.connect(gainnode1); oscnode2 = context.createoscillator(); oscnode2.type = "sine"; oscnode2.frequency.value = 329.627556912869929; // e oscnode2.connect(gainnode2); oscnode3 = context.createoscillator(); oscnode3.type = "sine"; oscnode3.frequency.value = 391.995
4359817
4929
4 // g oscnode3.connect(gainnode3); oscnode1.start(); oscnode2.start(); oscno...
Background audio processing using AudioWorklet - Web APIs
the second parameter is named frequency and defaults to
440.0, with a range from 275 to
4186.009, inclusively.
... static get parameterdescriptors() { return [ { name: "gain", defaultvalue: 0.5, minvalue: 0, maxvalue: 1 }, { name: "frequency", defaultvalue:
440.0; minvalue: 27.5, maxvalue:
4186.009 } ]; } accessing your processor node's parameters is as simple as looking them up in the parameters object passed into your implementation of process().
Using the Web Audio API - Web APIs
for example, there is no ceiling of 32 or 6
4 sound calls at one time.
...gain can be set to a minimum of about -3.
4 and a max of about 3.
4.
Web audio spatialization basics - Web APIs
} break; case 'down': if (transform.yaxis < bottombound) { transform.yaxis += 5; panner.positiony.value += 0.3; } break; } } it's a similar story for our move in and out values too: case 'back': if (transform.zaxis > innerbound) { transform.zaxis -= 0.01; panner.positionz.value +=
40; } break; case 'forward': if (transform.zaxis < outerbound) { transform.zaxis += 0.01; panner.positionz.value -=
40; } break; our rotation values are a little more involved, however, as we need to move the sound around.
... panner.positionx.value += 0.1; } break; case 'down': if (transform.yaxis < bottombound) { transform.yaxis += 5; panner.positiony.value += 0.3; } break; case 'back': if (transform.zaxis > innerbound) { transform.zaxis -= 0.01; panner.positionz.value +=
40; } break; case 'forward': if (transform.zaxis < outerbound) { transform.zaxis += 0.01; panner.positionz.value -=
40; } break; case 'rotate-left': transform.rotatey -= degreesy; // 'left' is rotation about y-axis with negative angle increment z = panner.orientat...
Using the Web Storage API - Web APIs
these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a
4509b'; localstorage['colorsetting'] = '#a
4509b'; localstorage.setitem('colorsetting', '#a
4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.
... function storageavailable(type) { var storage; try { storage = window[type]; var x = '__storage_test__'; storage.setitem(x, x); storage.removeitem(x); return true; } catch(e) { return e instanceof domexception && ( // everything except firefox e.code === 22 || // firefox e.code === 101
4 || // test name field too, because code might not be present // everything except firefox e.name === 'quotaexceedederror' || // firefox e.name === 'ns_error_dom_quota_reached') && // acknowledge quotaexceedederror only if there's something already stored (storage && storage.length !== 0); } } and here is how ...
Selector list - CSS: Cascading Style Sheets
h1, h2, h3, h
4, h5, h6 { font-family: helvetica; } multi line grouping grouping selectors in a multiple lines using a comma-separated lists.
... h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h3 { font-family: sans-serif } :is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif } specifications specification status comment selectors level
4the definition of 'selector lists' in that specification.
Specificity - CSS: Cascading Style Sheets
for more information, visit: https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css https://stackoverflow.com/questions/92
45353/what-does-important-in-css-mean https://stackoverflow.com/questions/57011
49/when-to-use-important-property-in-css https://stackoverflow.com/questions/11178673/how-to-override-important https://stackoverflow.com/questions/20
42
497/when-to-use-important-to-save-the-day-when-working-with-css the :is() and :not() exceptions the matches-any pseudo-class :is() and the negation pseudo-class :...
... specifications specification status comment selectors level
4the definition of 'calculating a selector's specificity' in that specification.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
; } .three { color: white; background-color: brown; margin: 10px; width: 75px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; } we'll apply it to this html: <div> <div class="one">1:</div> <div class="two">2: text <span class="five">5 - more text</span></div> <input class="three"> <textarea class="four">
4: lorem ipsum</textarea> </div> ...
... // get variable from inline style element.style.getpropertyvalue("--my-var"); // get variable from wherever getcomputedstyle(element).getpropertyvalue("--my-var"); // set variable on inline style element.style.setproperty("--my-var", jsvar +
4); ...
align-content - CSS: Cascading Style Sheets
baseline<content-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples css #container { height:200px; width: 2
40px; align-content: center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background...
...-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height:
40px; } #item
4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item
4">
4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select...
align-items - CSS: Cascading Style Sheets
baseline<overflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | flex-end examples css #container { height:200px; width: 2
40px; align-items: center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-c...
...olor: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height:
40px; } #item
4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item
4">
4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> <...
all - CSS: Cascading Style Sheets
syntax /* global values */ all: initial; all: inherit; all: unset; /* css cascading and inheritance level
4 */ all: revert; the all property is specified as one of the css global keyword values.
... specifications specification status comment css cascading and inheritance level
4the definition of 'all' in that specification.
backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(
40%); backdrop-filter: drop-shadow(
4px
4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(
4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter:...
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> 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/
457
4), linear-gradient(rgb(219, 166, 166), 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 ...
backface-visibility - CSS: Cascading Style Sheets
html <table> <tr> <th><code>backface-visibility: visible;</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.
background-clip - CSS: Cascading Style Sheets
="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p> css p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.
4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); } result specifications ...
... css backgrounds and borders module level
4the definition of 'background-clip' in that specification.
<basic-shape> - CSS: Cascading Style Sheets
inset() inset( <shape-arg>{1,
4} [round <border-radius>]?
... html <div></div> css div { width: 300px; height: 300px; background: repeating-linear-gradient(red, orange 50px); clip-path: polygon(50% 0%, 60%
40%, 100% 50%, 60% 60%, 50% 100%,
40% 60%, 0% 50%,
40%
40%); animation:
4s poly infinite alternate ease-in-out; margin: 10px auto; } @keyframes poly { from { clip-path: polygon(50% 0%, 60%
40%, 100% 50%, 60% 60%, 50% 100%,
40% 60%, 0% 50%,
40%
40%); } to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); } } result specifications ...
border-bottom-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation 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="b
4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">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: hidden;} .b3 {border-bottom-style: dotted;} .b
4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {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-color - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-bottom-color border-left-color border-right-color border-top-color syntax /* <color> values */ border-color: red; /* horizontal | vertical */ border-color: red #f015ca; /* top | vertical | bottom */ border-color: red rgb(2
40,30,50,.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* global values */ border-color: inherit; border-color: initial; border-color: unset; the border-color property may be specified using one, two, three, or four values.
...-letter.inheritednocomputed valueas each of the properties of the shorthand:border-bottom-color: computed colorborder-left-color: computed colorborder-right-color: computed colorborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a color formal syntax <color>{1,
4}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-image-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the width or height of the border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length-percentage> | <number> | auto ]{1,
4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, which is 90 by 90 pixels: thus, each circle in the source image is 30 by 30 pixels.
...stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> css p { border: 20px solid; border-image: url("/static/external/21/21
48
42819586a8dd293c17b38d0fd0e26
4301
46a86dd0
429
4a53ecaeeea7d0e2.png") 30 round; border-image-width: 16px; padding:
40px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-width' in that specification.
border-right - CSS: Cascading Style Sheets
</div> css div { border-right:
4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right' in that specification.
...pport 5.5opera full support 9.2safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 1
4opera android full support 1
4safari ios full support 1samsung internet android full support 1.0legend full support full support ...
border-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedanimation typediscrete formal syntax <line-style>{1,
4}where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples table with all property values here is an example of all the property values.
... html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b
4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">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: #52e396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b
4 {border-style:dashed;} .b5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {border-style:outset;}...
border-top-left-radius - CSS: Cascading Style Sheets
percentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of ellipse is used as the border div { border-top-left-radius:
40px
40px; } an arc of ellipse is used as the border div { border-top-left-radius:
40px 20px; } the box is a square: an arc of circle is used as the border div { border-top-left-radius:
40%; } the box is not a square: an arc of ellipse is used as the border div { border-top-left-radius:
40%; } ...
... the background color is clipped at the border div { border-top-left-radius:
40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-left-radius' in that specification.
border-top-right-radius - CSS: Cascading Style Sheets
percentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of circle is used as the border div { border-top-right-radius:
40px
40px; } an arc of ellipse is used as the border div { border-top-right-radius:
40px 20px; } the box is a square: an arc of circle is used as the border div { border-top-right-radius:
40%; } .
... the box is not a square: an arc of ellipse is used as the border div { border-top-right-radius:
40%; } the background color is clipped at the border div { border-top-right-radius:
40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-right-radius' in that specification.
border-top-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed 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="b
4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">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 cl...
...asses */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b
4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {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
constituent properties this property is a shorthand for the following css properties: border-bottom-width border-left-width border-right-width border-top-width syntax /* keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */ border-width:
4px; border-width: 1.2rem; /* vertical | horizontal */ border-width: 2px 1.5em; /* top | horizontal | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0
4rem; /* global keywords */ border-width: inherit; border-width: initial; border-width: unset; the border-width property may be specified using one, two, three, or four values.
...f border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-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...
border - CSS: Cascading Style Sheets
gefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborderchrome full support 1edge full support 12firefox full support 1ie full support
4opera full support 3.5safari full support 1webview android full support ≤37chrome android full support 18firefox android full support
4opera android full sup...
...port 1
4safari ios full support 1samsung internet android full support 1.0legend full support full support ...
bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ bottom: 3px; bottom: 2.
4em; /* <percentage>s of the height of the containing block */ bottom: 10%; /* keyword value */ bottom: auto; /* global values */ bottom: inherit; bottom: initial; bottom: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the bottom edge of the containing block.
... html <p>this<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>fixed</p></div> <div class="absolute"><p>absolute</p></div> css p { font-size: 30px; line-height: 2em; } div { width:
48%; text-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status comment css positioned layout module level 3the definition of 'bottom' in that specification.
break-after - CSS: Cascading Style Sheets
therefore the aliasing is to page, rather than the always value in the level
4 spec.
... full support 37safari no support nowebview android full support 50chrome android full support 50firefox android no support noopera android no support 11.1 — 1
4 no support 11.1 — 1
4 full support 37safari ios no support nosamsung internet android full support 5.0legend full support full support ...
break-before - CSS: Cascading Style Sheets
therefore the aliasing is to page, rather than the always value in the level
4 spec.
...upport 38safari no support nowebview android full support 51chrome android full support 51firefox android no support noopera android full support
41safari ios no support nosamsung internet android full support 5.0legend full support full support no support no supportexperimental.
break-inside - CSS: Cascading Style Sheets
fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p> <figure> <img src="https://udn.realityripple.com/samples/fe/
4508d88f78.png"> <figcaption>the firefox logo — fox wrapped around the world</figcaption> </figure> <p>praesent condimentum dui dui, sit amet rutrum diam tincidunt eu.
... no support 11.1 — 12.1safari no support nowebview android full support 51chrome android full support 51firefox android no support noopera android full support
41 full support
41 no support 11.1 — 12.1safari ios no support nosamsung internet android full support 5.0supported in css regions experimentalchrome no support noedge no suppor...
caret-color - CSS: Cascading Style Sheets
syntax /* keyword values */ caret-color: auto; caret-color: transparent; caret-color: currentcolor; /* <color> values */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0, 200, 0); caret-color: hsla(228,
4%, 2
4%, 0.8); values auto the user agent selects an appropriate color for the caret.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a custom caret color html <input value="this field uses a default caret." size="6
4"/> <input class="custom" value="i have a custom caret color!" size="6
4"/> <p contenteditable class="custom">this paragraph can be edited, and its caret has a custom color as well!</p> css input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom { caret-color: red; } p.custom { caret-color: green; } result specifications specification status...
clear - CSS: Cascading Style Sheets
suspendisse eget dolor.</p> <p class="both">this paragraph clears both.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width:
45%; } specifications specification status comment css logical properties and values level 1the definition of 'float and clear' in that specification.
...dgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclearchrome full support 1edge full support 12firefox full support 1ie full support
4opera full support 3.5safari full support 1webview android full support 1chrome android full support 18firefox android full support
4opera android full support...
clip - CSS: Cascading Style Sheets
ottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 3
45px 160px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/1517
4f3500.jpg" title="original graphic"> <img id="top-left" src="https://udn.realityripple.com/samples/8f/1517
4f3500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/1517
4f3500.jpg" title="graphic clipped towards middle"> <img id="bott...
...om-right" src="https://udn.realityripple.com/samples/8f/1517
4f3500.jpg" title="graphic clipped to bottom right"> </p> result specifications specification status comment css masking module level 1the definition of 'clip' in that specification.
column-count - CSS: Cascading Style Sheets
support 12 full support 12 full support 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 52 full support 52 no support 1.5 — 7
4prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display: table-caption elements.ie full support 10opera full support 11.1 full support 11.1 full support ...
... 50 full support 50 full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support 52 full support 52 full support
4prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display: table-caption elements.opera android full support 11.1 full support 11.1 full support 1
4prefixed prefixed implemented with the ven...
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
<div></div> <div></div> <div></div> </div> css #grid { grid-column-gap: 20px; } #grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; column-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a
40px column gap created with the css `column-gap` property.
...</p> css .content-box { column-count: 3; column-gap:
40px; } result specifications specification status comment css box alignment module level 3the definition of 'column-gap' in that specification.
cursor - CSS: Cascading Style Sheets
syntax /* keyword value */ cursor: pointer; cursor: auto; /* url, with a keyword fallback */ cursor: url(hand.cur), pointer; /* url and coordinates, with a keyword fallback */ cursor: url(cursor1.png)
4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* global values */ cursor: inherit; cursor: initial; cursor: unset; the cursor property is specified as zero or more <url> values, separated by commas, followed by a single mandatory keyword value.
... bug 27517
4: on windows, all-scroll is the same as move.
<custom-ident> - CSS: Cascading Style Sheets
a mix of alphanumeric characters and numbers ground-level a mix of alphanumeric characters and a dash -test a dash followed by alphanumeric characters _internal an underscore followed by alphanumeric characters \22 toto a unicode character followed by a sequence of alphanumeric characters bili\.bob a correctly escaped period invalid identifiers 3
4rem it must not start with a decimal digit.
... specifications specification status comment css values and units module level
4the definition of '<custom-ident>' in that specification.
<filter-function> - CSS: Cascading Style Sheets
/option> <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/3b
4892b7e820122ac6dd7678891d
4507/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 sli...
...r.addeventlistener('input', () => { setdiv(selectelem.value); }); function setslider(filter) { if(filter === 'blur') { slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { slider.value = 1; slider.min = 0; slider.max =
4; slider.step = 0.05; slider.setattribute('data-unit', ''); } else if(filter === 'drop-shadow') { slider.value = 0; slider.min = -20; slider.max =
40; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'opacity') { slider.value = 1; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', '')...
flex-basis - CSS: Cascading Style Sheets
valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal 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 flex
4">
4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">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: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e8...
...6bb; color: white; font-size: 1
4px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .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'; } .flex
4 { flex-basis: fit-content; } .flex
4:after { content: 'fit-content'; } .flex5 { flex-basis: content; } .flex5:after { content: 'content'; } .flex6 { flex-basis: fill; } .flex6:after { content: 'fill'; } results specifications specification status comment css flexible box lay...
flex-wrap - CSS: Cascading Style Sheets
formal definition initial valuenowrapapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax nowrap | wrap | wrap-reverse examples setting flex container wrap values html <h
4>this is an example for flex-wrap:wrap </h
4> <div class="content"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h
4>this is an example for flex-wrap:nowrap </h
4> <div class="content1"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h
4>this is an example for flex-wrap:wrap-reverse </h
4> <div class="content2">...
... <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> css /* common styles */ .content, .content1, .content2 { color: #fff; font: 100 2
4px/100px sans-serif; height: 150px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 300px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2 { display: flex; flex-wrap: wrap-reverse; } results specifications specification status comment css flexible box layout modulethe definition of 'flex-wrap' in that speci...
flex - CSS: Cascading Style Sheets
<div class="item initial">initial</div> </div> <div class="flex-container"> <div class="item auto">auto</div> <div class="item auto">auto</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item initial">initial</div> <div class="item none">none</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item four">
4</div> <div class="item two">2</div> <div class="item one">1</div> </div> * { box-sizing: border-box; } .flex-container { background-color: #f
4f7f8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1b5385; color: white; font-family: monospace; font-size: 13px; ...
...} .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex:
4; } .two { flex: 2; } .one { flex: 1; } by default flex items don't shrink below their minimum content size.
font-size - CSS: Cascading Style Sheets
if you set a font-size of 20px on the body element, then 1em = 20px and 2em =
40px.
...animation typea length formal syntax <absolute-size> | <relative-size> | <length-percentage>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large<relative-size> = larger | smaller<length-percentage> = <length> | <percentage> examples setting font sizes css .small { font-size: xx-small; } .larger { font-size: larger; } .point { font-size: 2
4pt; } .percent { font-size: 200%; } html <h1 class="small">small h1</h1> <h1 class="larger">larger h1</h1> <h1 class="point">2
4 point h1</h1> <h1 class="percent">200% h1</h1> result specifications specification status comment css fonts module level
4the definition of 'font-size' in that specification.
font-variant-position - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variant-positionchrome no support noedge no support nofirefox full support 3
4 full support 3
4 no support 2
4 — 3
4disabled disabled from version 2
4 until version 3
4 (exclusive): this feature is behind the layout.css.font-features.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 3
4 full support 3
4 no support 2
4 — 3
4disabled disabled from version 2
4 until version 3
4 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
<frequency-percentage> - CSS: Cascading Style Sheets
examples valid percentage values 90% positive percentage +90% positive percentage with leading + -90% negative percentage — not valid for all properties that use percentages invalid percentage values 90 % no space is allowed between the number and the unit valid frequency values 12hz positive integer
4.3hz non-integer 1
4khz the unit is case-insensitive, though non-si capitalization is not recommended.
... specifications specification status comment css values and units module level
4the definition of '<frequency-percentage>' in that specification.
gap (grid-gap) - CSS: Cascading Style Sheets
div></div> <div></div> <div></div> <div></div> <div></div> </div> css #grid { grid-gap: 20px 5px; } #grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid > div { border: 1px solid green; background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a
40px column gap created with the css <code>gap</code> property.
...</p> css .content-box { column-count: 3; gap:
40px; } result specifications specification status comment css box alignment module level 3the definition of 'gap' in that specification.
grid-area - CSS: Cascading Style Sheets
values */ grid-area:
4 some-grid-area; grid-area:
4 some-grid-area / 2 another-grid-area; /* span && [ <integer> || <custom-ident> ] values */ grid-area: span 3; grid-area: span 3 / span some-grid-area; grid-area: 2 span / another-grid-area span; /* global values */ grid-area: inherit; grid-area: initial; grid-area: unset; values auto is a keyword indicating that the property contributes nothing to the grid ite...
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid areas html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template: repeat(
4, 1fr) / 50px 100px; } #item1 { background-color: lime; grid-area: 2 / 2 / auto / span 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } result specifications specification status comment css grid layoutthe definition of 'grid-area' in that specification.
grid-auto-columns - CSS: Cascading Style Sheets
to-columns: 20cm; grid-auto-columns: 50vmax; /* <percentage> values */ grid-auto-columns: 10%; grid-auto-columns: 33.3%; /* <flex> values */ grid-auto-columns: 0.5fr; grid-auto-columns: 3fr; /* minmax() values */ grid-auto-columns: minmax(100px, auto); grid-auto-columns: minmax(max-content, 2fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-content() values */ grid-auto-columns: fit-content(
400px); grid-auto-columns: fit-content(5cm); grid-auto-columns: fit-content(20%); /* multiple track-size values */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 150px 390px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% ...
...0.5fr fit-content(
400px); /* global values */ grid-auto-columns: inherit; grid-auto-columns: initial; grid-auto-columns: unset; values <length> is a non-negative length.
grid-auto-flow - CSS: Cascading Style Sheets
formal definition initial valuerowapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ row | column ] | dense examples setting grid auto-placement html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item
4"></div> <div id="item5"></div> </div> <select id="direction" onchange="changegridautoflow()"> <option value="column">column</option> <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(
4, 1fr) / ...
...repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } #item
4 { grid-column-start: 2; background-color: red; } #item5 { background-color: aqua; } function changegridautoflow() { var grid = document.getelementbyid("grid"); var direction = document.getelementbyid("direction"); var dense = document.getelementbyid("dense"); var gridautoflow = direction.value === "row" ?
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...
... && [ <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.
height - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.
4 | w3c understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
... </div> </div> css div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; } result specifications specification status comment css box sizing module level
4the definition of 'height' in that specification.
ident - CSS: Cascading Style Sheets
umeric characters and numbers ground-level a mix of alphanumeric characters and a dash -test a dash followed by alphanumeric characters --toto a custom-property like identifier _internal an underscore followed by alphanumeric characters \22 toto a unicode character followed by a sequence of alphanumeric characters bili\.bob a correctly escaped period invalid identifiers 3
4rem it must not start with a decimal digit.
... specifications specification status comment css values and units module level
4the definition of '<ident>' in that specification.
inset - CSS: Cascading Style Sheets
/* <length> values */ inset: 10px; /* value applied to all edges */ inset:
4px 8px; /* top/bottom left/right */ inset: 5px 15px 10px; /* top left/right bottom */ inset: 2.
4em 3em 3em 3em; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset: 10% 5% 5% 5%; /* keyword value */ inset: auto; /* global values */ inset: inherit; inset: initial; inset: unset; syntax values the inset property takes...
...formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,
4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px
40px 30px 10px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1...
list-style-position - CSS: Cascading Style Sheets
for more information on this, see bug 3685
4.
... formal definition initial valueoutsideapplies tolist itemsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax inside | outside examples setting list item position html <ul class="inside">list 1 <li>list item 1-1</li> <li>list item 1-2</li> <li>list item 1-3</li> <li>list item 1-
4</li> </ul> <ul class="outside">list 2 <li>list item 2-1</li> <li>list item 2-2</li> <li>list item 2-3</li> <li>list item 2-
4</li> </ul> <ul class="inside-img">list 3 <li>list item 3-1</li> <li>list item 3-2</li> <li>list item 3-3</li> <li>list item 3-
4</li> </ul> css .inside { list-style-position: inside; list-style-type: square; } .outside { list-style-position: outside;...
mask-border-outset - CSS: Cascading Style Sheets
syntax /* <length> value */ mask-border-outset: 1rem; /* <number> value */ mask-border-outset: 1.5; /* vertical | horizontal */ mask-border-outset: 1 1.2; /* top | horizontal | bottom */ mask-border-outset: 30px 2
45px; /* top | right | bottom | left */ mask-border-outset: 7px 12px 1
4px 5px; /* global values */ mask-border-outset: inherit; mask-border-outset: initial; mask-border-outset: unset; the mask-border-outset property may be specified as one, two, three, or four values.
... formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length> | <number> ]{1,
4} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border - CSS: Cascading Style Sheets
div { width: 200px; background-color: lavender; border: 18px solid salmon; padding: 10px; /* prefixed longhand properties currently supported in chromium -webkit-mask-box-image-source: url(https://udn.realityripple.com/samples/2d/fd08a313
4c.png); -webkit-mask-box-image-slice: 30 fill; -webkit-mask-box-image-width: 20px; -webkit-mask-box-image-repeat: round; -webkit-mask-box-image-outset: 1px; */ /* prefixed shorthand property currently supported in chromium */ -webkit-mask-box-image: url("https://udn.realityripple.com/samples/2d/fd08a313
4c.png") /* source */ 30 fill / /* slice */ 20px / ...
... /* width */ 1px /* outset */ round; /* repeat */ /* updated standard shorthand property, not supported anywhere yet */ mask-border: url("https://udn.realityripple.com/samples/2d/fd08a313
4c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ } result specifications specification status comment css masking module level 1the definition of 'mask-border' in that specification.
max-block-size - CSS: Cascading Style Sheets
they may be restored in level
4.
... .standard-box { padding:
4px; background-color: #abcdef; color: #000; font: 16px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160px; min-block-size: 100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } result specifications specification status comment css logical properties and values level 1the definition of 'max...
<number> - CSS: Cascading Style Sheets
4.01 positive fraction -
456.8 negative fraction 0.0 zero +0.0 zero, with a leading + -0.0 zero, with a leading - .60 fractional number without a leading zero 10e3 scientific notation -3.
4e-2 complicated scientific notation invalid numbers 12.
... specifications specification status comment css values and units module level
4the definition of '<number>' in that specification.
offset-distance - CSS: Cascading Style Sheets
syntax /* default value */ offset-distance: 0; /* the middle of the offset-path */ offset-distance: 50%; /* a fixed length positioned along the path */ offset-distance:
40px; <length-percentage> a length that specifies how far the element is along the path (defined with offset-path).
... html <div id="motion-demo"></div> css #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width:
40px; height:
40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification status comment motion path module level 1the definition of 'offset-distance' in that specification.
offset-rotate - CSS: Cascading Style Sheets
syntax /* follow the path direction, with optional additional angle */ offset-rotate: auto; offset-rotate: auto
45deg; /* follow the path direction but facing the opposite direction of `auto` */ offset-rotate: reverse; /* keep a constant rotation regardless the position on the path */ offset-rotate: 90deg; offset-rotate: .5turn; auto the element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis.
... formal definition initial valueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width:
40px; height:
40px; background: #2bc
4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30deg; } @keyframes m...
outline - CSS: Cascading Style Sheets
how to design useful and usable focus indicators wcag 2.1: understanding success criterion 2.
4.7: focus visible formal definition initial valueas each of the properties of the shorthand:outline-color: invert, for browsers supporting it, currentcolor for the otheroutline-style: noneoutline-width: mediumapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:outline-color: for the keyword invert, the computed value is invert.
...e shorthand:outline-color: a coloroutline-width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline:
4px dotted #e73; outline-offset:
4px; background: #ffa; } result specifications specification status comment css basic user interface module level 3the definition of 'outline' in that specification.
overflow-block - CSS: Cascading Style Sheets
</div> </li> <li><code>overflow-block:auto</code> — on most browser, equivalent to <code>scroll</code> <div id="div
4"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </div> </li> </ul> css #div1, #div2, #div3, #div
4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-block: hidden; margin-bottom: 120px;} #div2 { overflow-block: scroll; margin-bottom: 120px;} #div3 { overflow-block: visible; margin-bottom: 120px;} #div
4 { overflow-block: auto; margin-bottom: 120px;} result specifications specification status comment css overflow module level 3the definition of 'overflow-block' in that specification.
overflow-y - CSS: Cascading Style Sheets
</div> </li> <li><code>overflow-y:auto</code> — on most browser, equivalent to <code>scroll</code> <div id="div
4"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </div> </li> </ul> css #div1, #div2, #div3, #div
4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-y: hidden; margin-bottom: 12px;} #div2 { overflow-y: scroll; margin-bottom: 12px;} #div3 { overflow-y: visible; margin-bottom: 120px;} #div
4 { overflow-y: auto; margin-bottom: 120px;} result specifications specification status comment css overflow module level 3the definition of 'overflow-y' in that specification.
page-break-after - CSS: Cascading Style Sheets
e-break-afterchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes the values avoid, left, and right are unsupported.ie full support
4opera full support 7safari full support 1.2webview android full support 37chrome android full support 18firefox android full support
4notes full support ...
...
4notes notes the values avoid, left, and right are unsupported.opera android full support 1
4safari ios full support 1samsung internet android full support 1.0legend full support full supportsee implementation notes.see implementation notes.
page-break-before - CSS: Cascading Style Sheets
-break-beforechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes the values avoid, left, and right are unsupported.ie full support
4opera full support 7safari full support 1.2webview android full support 37chrome android full support 18firefox android full support
4notes full support ...
...
4notes notes the values avoid, left, and right are unsupported.opera android full support 1
4safari ios full support 1samsung internet android full support 1.0legend full support full supportsee implementation notes.see implementation notes.
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 1
4</li> <li>item 15</li> <li>item 16</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/houd...
...upport 52safari no support nowebview android full support 65chrome 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 ...
perspective - CSS: Cascading Style Sheets
able> <tbody> <tr> <th><code>perspective: 250px;</code> </th> <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> ...
...</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 pers650"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">
4</div> ...
place-content - CSS: Cascading Style Sheets
telementbyid("writingmode"); writingm.addeventlistener("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:2
40px; width: 2
40px; flex-wrap: wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8ff; } .small { font-size: 12px; height:...
...
40px; } .large { font-size: 1
4px; height: 50px; } result specifications specification status comment css box alignment module level 3the definition of 'place content' in that specification.
<position> - CSS: Cascading Style Sheets
ults to 50% */ /* 2-value syntax */ keyword keyword /* a keyword for each direction (the order is irrelevant) */ keyword value /* a keyword for horizontal position, value for vertical position */ value keyword /* a value for horizontal position, keyword for vertical position */ value value /* a value for each direction (horizontal then vertical) */ /*
4-value syntax */ keyword value keyword value /* each value is an offset from the keyword that preceeds it */ formal syntax [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length> | <percentage> ] [ top | center | bottom | <length> | <percentage> ]?
... examples valid positions center left center top right 8.5% bottom 12vmin right -6px 10% 20% 8rem 1
4px invalid positions left right bottom top 10px 15px 20px 15px specifications specification status comment css values and units module level 3the definition of '<position>' in that specification.
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...
...ol-end]) /* <auto-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-margin - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,
4} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
... html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>
4</div> </div> css let's walk through the css.
tab-size - CSS: Cascading Style Sheets
syntax /* <integer> values */ tab-size:
4; tab-size: 0; /* <length> values */ tab-size: 10px; tab-size: 2em; /* global values */ tab-size: inherit; tab-size: initial; tab-size: unset; values <integer> a multiple of the advance width of the space character (u+0020) to be used as the width of tabs.
... formal definition initial value8applies toblock containersinheritedyescomputed valuethe specified integer or an absolute lengthanimation typea length formal syntax <integer> | <length> examples expanding by character count pre { tab-size:
4; /* set tab size to
4 characters wide */ } collapse tabs pre { tab-size: 0; /* remove indentation */ } comparing to the default size this example compares a default tab size with a custom tab size.
text-align - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.8 | understanding wcag 2.0 formal definition initial valuestart, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.applies toblock containersinheritedyescomputed valueas specified, except for the match-parent value which is calculated against its parent's direction valu...
... editor's draft no changes css text module level
4the definition of 'text-align' in that specification.
text-decoration - CSS: Cascading Style Sheets
ion-line'> | <'text-decoration-style'> | <'text-decoration-color'> | <'text-decoration-thickness'> examples .under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { text-decoration: solid underline purple
4px; } .blink { text-decoration: blink; } <p class="under">this text has a line underneath it.</p> <p class="over">this text has a line over it.</p> <p class="line">this text has a line going through it.</p> <p>this <a class="plain" href="#">link will not be underlined</a>, as links generally are by default.
...nderline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status comment css text decoration module level
4 working draft adds text-decoration-thickness; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
text-transform - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations w3c understanding wcag 2.1 formal definition initial valuenoneapplies toall elements.
... full-width (general) <p>initial string <strong>0123
456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</strong> </p> <p>text-transform: full-width <strong><span>0123
456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</span></strong> </p> span { text-transform: full-width; } strong { width: 100%; float: right; } some characters exists in two formats, normal width and a full-width,...
<time-percentage> - CSS: Cascading Style Sheets
valid percentages 50% +50% optional plus sign -50% negative percentages are not valid for all properties that accept percentages invalid percentages 50 % space not allowed between the space and the percentage sign valid times 12s positive integer -
456ms negative integer
4.3ms non-integer 1
4ms the unit is case-insensitive, although capital letters are not recommended.
... specifications specification status comment css values and units module level
4the definition of '<time-percentage>' in that specification.
<time> - CSS: Cascading Style Sheets
examples valid times 12s positive integer -
456ms negative integer
4.3ms non-integer 1
4ms the unit is case-insensitive, although capital letters are not recommended.
... specifications specification status comment css values and units module level
4the definition of '<time>' in that specification.
top - CSS: Cascading Style Sheets
syntax /* <length> values */ top: 3px; top: 2.
4em; /* <percentage>s of the height of the containing block */ top: 10%; /* keyword value */ top: auto; /* global values */ top: inherit; top: initial; top: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the top edge of the containing block.
...d elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples body { background: beige; } div { position: absolute; top: 10%; right:
40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; } <div>the size of this content is determined by the position of its edges.</div> specifications specification status comment css positioned layout module level 3the definition of 'top' in that specification.
touch-action - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.
4 | understanding wcag 2.0 formal definition initial valueautoapplies toall elements except: non-replaced inline elements, table rows, row groups, table columns, and column groupsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | none | [ [ pan-x | pan-left | pan-right ] | [ pan-y | pan-up | pan-down ] | pinch-zo...
... html <div id="map"></div> css #map { height:
400px; width:
400px; background: blue; touch-action: none; } result specifications specification status comment compatibility standardthe definition of 'touch-action' in that specification.
perspective() - CSS: Cascading Style Sheets
001000−1/d1 examples html <p>without perspective:</p> <div class="no-perspective-box"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (9cm):</p> <div class="perspective-box-far"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (
4cm):</p> <div class="perspective-box-closer"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspect...
...ive-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(
4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front { background-color: limegreen; transform: translate3d(0, 0, 50px); } result specifications specification status comment css transforms level 2the definition of 'perspective()' in that specification.
rotate() - CSS: Cascading Style Sheets
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(
45deg); /* equal to rotatez(
45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
... html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div> css div { position: absolute; left:
40px; top:
40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(
45deg); } .rotate-translate { background-color: pink; transform: rotate(
45deg) translatex(180px); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(
45deg); } result specifications specification status comment css transforms level 1th...
transform-origin - CSS: Cascading Style Sheets
this means, this definition transform-origin: -100% 50%; transform: rotate(
45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(
45deg) translate(100%, -50%); by default, the origin of a transform is center.
...in: 0 0; <div class="box3"> </div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 100% 100%; <div class="box
4"> </div> .box
4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5"> </div> .box5 { ...
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); transfo...
...ex()> = rotatex( [ <angle> | <zero> ] )<rotatey()> = rotatey( [ <angle> | <zero> ] )<rotatez()> = rotatez( [ <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: 1
40px; height: 60px; } result more examples please see using css transforms and <transform-function> for more examples.
url() - CSS: Cascading Style Sheets
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base6
4,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/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"); /...
...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/16761/star.gif); } result data-uri html <div class="background"></div> css .background { height: 100vh; } .background { background: yellow; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='90' height='
45'%3e%3cpath d='m10 10h60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m10 20h60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m10 30h60' stroke='red' stroke-width='5'/%3e%3c/svg%3e"); } specifications specification status comment css values and units module level
4the definition of 'url()' in that specification.
user-select - CSS: Cascading Style Sheets
note: css ui
4 renames user-select: element to contain.
...king once will select all of this text.</p> css .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .all { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; user-select: all; } result specifications specification status comment css basic user interface module level
4the definition of 'user-select' in that specification.
width - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.
4 explanations understanding success criterion 1.
4.
4 | understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> |...
...lla community produces a lot of great software.</p> min-content p.minblue { background: lightblue; width: -moz-min-content; /* firefox */ width: -webkit-min-content; /* chrome */ width: min-content; } <p class="minblue">the mozilla community produces a lot of great software.</p> specifications specification status comment css box sizing module level
4the definition of 'width' in that specification.
Adding captions and subtitles to HTML5 video - Developer guides
we actually have our subtitles in three different languages — english, german, and spanish — so we will reference all three of the relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp
4" type="video/mp
4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"> </video> as you can see, each <track> el...
...'none' : 'block'); } }); subtitle menu css we also added some rudimentary styling for the newly created subtitles menu: .subtitles-menu { display:none; position:absolute; bottom:1
4.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...
Live streaming web audio and video - Developer guides
streaming file format support browser dash hls opus (audio) firefox 32 ✓ [1] ✓ [2] ✓ 1
4+ safari 6+ ✓ chrome 2
4+ ✓ [1] ✓ opera 20+ ✓ [1] internet explorer 10+ ✓ 11 ✓ [2] firefox mobile ✓ ✓ ✓ safari ios6+ ✓ chrome mobile ✓ ✓ [2] opera mobile ✓ [1] ✓ internet explorer mobile ✓ 11 ...
...through its plugin system, gstreamer provides support for more than a hundred codecs (including mpeg-1, mpeg-2, mpeg-
4, h.261, h.263, h.26
4, realvideo, mp3, wmv, and flv.) gstreamer plugins such as souphttpclientsink and shout2send exist to stream media over http.
Block formatting context - Developer guides
ated 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(22
4, 206, 2
47); 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 impl...
... 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(22
4, 206, 2
47); 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: 10...
Mutation events - Developer guides
mutation observers are the proposed replacement for mutation events in dom
4.
... they are expected to be included in firefox 1
4 and chrome 18.
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>, <h
4>, <h5>, <h6>, <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>...
... elements belonging to this category are <h1>, <h2>, <h3>, <h
4>, <h5>, <h6> and <hgroup>.
HTML attribute: step - HTML: Hypertext Markup Language
if omitted, <input type="number">, any integer is valid, but floats, like
4.2, are not valid, as step defaults to 1.
... for
4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2"> min 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.
<br>: The Line Break element - HTML: Hypertext Markup Language
evelyn avenue<br> mountain view, ca<br> 9
40
41<br> usa<br> the result looks like so: accessibility concerns creating separate paragraphs of text using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology.
... recommendation html
4.01 specificationthe definition of '<br>' in that specification.
<cite>: The Citation element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox
4) inclusive, firefox implements the htmlspanelement interface for this element.
... recommendation html
4.01 specificationthe definition of '<cite>' in that specification.
<code>: The Inline Code element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox
4) inclusive, firefox implements the htmlspanelement interface for this element.
... recommendation html
4.01 specificationthe definition of '<code>' in that specification.
RangeError: precision is out of range - JavaScript
method firefox (spidermonkey) chrome, opera (v8) number.prototype.toexponential() 0 to 100 0 to 20 number.prototype.tofixed() -20 to 100 0 to 20 number.prototype.toprecision() 1 to 100 1 to 21 examples invalid cases 77.123
4.toexponential(-1); // rangeerror 77.123
4.toexponential(101); // rangeerror 2.3
4.tofixed(-100); // rangeerror 2.3
4.tofixed(1001); // rangeerror 123
4.5.toprecision(-1); // rangeerror 123
4.5.toprecision(101); // rangeerror valid cases 77.123
4.toexponential(
4); // 7.7123e+1 77.123
4.toexponential(2); // 7.71e+1 2.3
4.tofixed(1); // 2.3 2.35.tofixed(1); // 2.
4 (note that it...
... rounds up in this case) 5.123
456.toprecision(5); // 5.1235 5.123
456.toprecision(2); // 5.1 5.123
456.toprecision(1); // 5 ...
TypeError: Reduce of empty array with no initial value - JavaScript
var ints = [0, -1, -2, -3, -
4, -5]; ints.filter(x => x > 0) // removes all elements .reduce((x, y) => x + y) // no more elements to use for the initial value.
... var ints = [0, -1, -2, -3, -
4, -5]; ints.filter(x => x > 0) // removes all elements .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition another way would be two to handle the empty case, either before calling reduce, or in the callback after adding an unexpected dummy initial value.
Warning: unreachable code after return statement - JavaScript
warnings will not be shown for semicolon-less returns if these statements follow it: throw break var function examples invalid cases function f() { var x = 3; x +=
4; return x; // return exits the function immediately x -= 3; // so this line will never run; it is unreachable } function f() { return // this is treated like `return;` 3 +
4; // so the function returns, and this line is never reached } valid cases function f() { var x = 3; x +=
4; x -= 3; return x; // ok: return after all other statements } function f() { ret...
...urn 3 +
4 // ok: semicolon-less return with expression on the same line } ...
TypeError: invalid 'instanceof' operand 'x' - JavaScript
examples instanceof vs typeof "test" instanceof ""; // typeerror: invalid 'instanceof' operand ""
42 instanceof 0; // typeerror: invalid 'instanceof' operand 0 function foo() {} var f = foo(); // foo() is called and returns undefined var x = new foo(); x instanceof f; // typeerror: invalid 'instanceof' operand f x instanceof x; // typeerror: x is not a function to fix these errors, you will either need to replace the instanceof operator with the typeof operator, or t...
... typeof "test" == "string"; // true typeof
42 == "number" // true function foo() {} var f = foo; // do not call foo.
Arrow function expressions - JavaScript
arrow functions allow the creation of global variables in such situations (both for a concise body and for a normal function body): > f1 = x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; } x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; } > y vm51587:1 uncaught referenceerror: y is not defined at <anonymous>:1:1 (anonymous) @ vm51587:1 > f1(3) vm51533:1 x: 3, y: 3
4 > y 3 > f2 = x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; } x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; } > z vm51757:1 uncaught referenceerror: z is not defined at <anonymous>:1:1 (anonymous) @ vm51757:1 > f2(
4) vm51712:1 uncaught referenceerror: z is not defined at f2 (<anonymous>:1:29) at <anonymous>:1:1 f2 @ vm51712:...
... var arr = [5, 6, 13, 0, 1, 18, 23]; var sum = arr.reduce((a, b) => a + b); // 66 var even = arr.filter(v => v % 2 == 0); // [6, 0, 18] var double = arr.map(v => v * 2); // [10, 12, 26, 0, 2, 36,
46] // more concise promise chains promise.then(a => { // ...
Rest parameters - JavaScript
however, the third argument, manymoreargs, will be an array that contains the 3rd,
4th, 5th, 6th ...
...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(sortargume...
Functions - JavaScript
as the
4th example shows, the function name can be different from the variable the function is assigned to.
... var result; result = padzeros(
42,
4); // returns "00
42" result = padzeros(
42,2); // returns "
42" result = padzeros(5,
4); // returns "0005" determining whether a function exists you can determine whether a function exists by using the typeof operator.
Array.prototype.concat() - JavaScript
examples concatenating two arrays the following code concatenates two arrays: const letters = ['a', 'b', 'c']; const numbers = [1, 2, 3]; letters.concat(numbers); // result in ['a', 'b', 'c', 1, 2, 3] concatenating three arrays the following code concatenates three arrays: const num1 = [1, 2, 3]; const num2 = [
4, 5, 6]; const num3 = [7, 8, 9]; const numbers = num1.concat(num2, num3); console.log(numbers); // results in [1, 2, 3,
4, 5, 6, 7, 8, 9] concatenating values to an array the following code concatenates three values to an array: const letters = ['a', 'b', 'c']; const alphanumeric = letters.concat(1, [2, 3]); console.log(alphanumeric); // results in ['a', 'b', 'c', 1, 2, 3] concatenating ...
...nested arrays the 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-262)the definition of 'array.prototype.concat' in that specification.
Array.prototype.fill() - JavaScript
examples using fill [1, 2, 3].fill(
4) // [
4,
4,
4] [1, 2, 3].fill(
4, 1) // [1,
4,
4] [1, 2, 3].fill(
4, 1, 2) // [1,
4, 3] [1, 2, 3].fill(
4, 1, 1) // [1, 2, 3] [1, 2, 3].fill(
4, 3, 3) // [1, 2, 3] [1, 2, 3].fill(
4, -3, -2) // [
4, 2, 3] [1, 2, 3].fill(
4, nan, nan) // [1, 2, 3] [1, 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-262)the definition of 'array.prototype.fill' in that specification.
Array.prototype.findIndex() - JavaScript
if (typeof predicate !== 'function') { throw new typeerror('predicate must be a function'); } //
4.
... 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);...
Array.prototype.forEach() - JavaScript
example code let ratings = [5,
4, 5]; let sum = 0; let sumfunction = async function (a, b) { return a + b } ratings.foreach(async function(rating) { sum = await sumfunction(sum, rating) }) console.log(sum) // naively expected output: 1
4 // actual output: 0 examples no operation for uninitialized values (sparse arrays) const arraysparse = [1,3,,7] let numcallbackruns = 0 arraysparse.foreach((element) => { console.l...
... function flatten(arr) { const result = [] arr.foreach((i) => { if (array.isarray(i)) { result.push(...flatten(i)) } else { result.push(i) } }) return result } // usage const nested = [1, 2, 3, [
4, 5, [6, 7], 8, 9]] flatten(nested) // [1, 2, 3,
4, 5, 6, 7, 8, 9] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.foreach' in that specification.
Array.prototype.includes() - JavaScript
examples [1, 2, 3].includes(2) // true [1, 2, 3].includes(
4) // false [1, 2, 3].includes(3, 3) // false [1, 2, 3].includes(3, -1) // true [1, 2, nan].includes(nan) // true fromindex is greater than or equal to the array length if fromindex is greater than or equal to the length of the array, false is returned.
...for more details and discussion, see https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/2
4500 specifications specification ecmascript (ecma-262)the definition of 'array.prototype.includes' in that specification.
Array.prototype.lastIndexOf() - JavaScript
// production steps of ecma-262, 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 (ar...
...array.lastindexof(element, idx - 1) : -1); } console.log(indices); // [
4, 2, 0] note that we have to handle the case idx == 0 separately here because the element will always be found regardless of the fromindex parameter if it is the first element of the array.
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 lengt...
...h is 5 // arr is [-2, -1, 0, 1, 2] arr.unshift([-
4, -3]) // the new array length is 6 // arr is [[-
4, -3], -2, -1, 0, 1, 2] arr.unshift([-7, -6], [-5]) // the new array length is 8 // arr is [ [-7, -6], [-5], [-
4, -3], -2, -1, 0, 1, 2 ] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.unshift' in that specification.
Atomics.add() - JavaScript
one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint6
4array, or biguint6
4array.
... examples using add() const sab = new sharedarraybuffer(102
4); const ta = new uint8array(sab); atomics.add(ta, 0, 12); // returns 0, the old value atomics.load(ta, 0); // 12 specifications specification ecmascript (ecma-262)the definition of 'atomics.add' in that specification.
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
/ format relative time using the day unit rtf.formattoparts(-1, "day"); // > [{ type: "literal", value: "yesterday"}] rtf.formattoparts(100, "day"); // > [{ type: "literal", value: "in " }, // > { type: "integer", value: "100", unit: "day" }, // > { type: "literal", value: " days" }] specifications specification status comment ecmascript internationalization api (ecma-
402)the definition of 'relativetimeformat.formattoparts()' in that specification.
... stage
4 ...
Math.LOG10E - JavaScript
the math.log10e property represents the base 10 logarithm of e, approximately 0.
43
4: math.log10e=log10(e)≈0.
43
4\mathtt{\mi{math.log10e}} = \log_10(e) \approx 0.
43
4 the source for this interactive example is stored in a github repository.
... examples using math.log10e the following function returns the base 10 logarithm of e: function getlog10e() { return math.log10e; } getlog10e(); // 0.
43
429
44819032518 specifications specification ecmascript (ecma-262)the definition of 'math.log10e' in that specification.
Math.LOG2E - JavaScript
the math.log2e property represents the base 2 logarithm of e, approximately 1.
442: math.log2e=log2(e)≈1.
442\mathtt{\mi{math.log2e}} = \log_2(e) \approx 1.
442 the source for this interactive example is stored in a github repository.
... examples using math.log2e the following function returns the base 2 logarithm of e: function getlog2e() { return math.log2e; } getlog2e(); // 1.
4426950
40888963
4 specifications specification ecmascript (ecma-262)the definition of 'math.log2e' in that specification.
Math.SQRT2 - JavaScript
the math.sqrt2 property represents the square root of 2, approximately 1.
41
4: math.sqrt2=2≈1.
41
4\mathtt{\mi{math.sqrt2}} = \sqrt{2} \approx 1.
41
4 the source for this interactive example is stored in a github repository.
... examples using math.sqrt2 the following function returns the square root of 2: function getroot2() { return math.sqrt2; } getroot2(); // 1.
41
42135623730951 specifications specification ecmascript (ecma-262)the definition of 'math.sqrt2' 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.725290298
46191
4e-9) // |x| < 2^-28 return x if (absx > 268
435
456) // |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.8813735870195
43 math.asinh(0); // 0 specifications specification ecmascript (ecma-262)the definition of 'math.asinh' in that specification.
Math.ceil() - JavaScript
math.ceil(.95); // 1 math.ceil(
4); //
4 math.ceil(7.00
4); // 8 math.ceil(-0.95); // -0 math.ceil(-
4); // -
4 math.ceil(-7.00
4); // -7 decimal adjustment // closure (function() { /** * decimal adjustment of a number.
... 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.5
49, -1); // 55.5 math.round10(55, 1); // 60 math.round10(5
4.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 math.ceil10(55.51, -1)...
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); // -
46 math.floor(-
45.95); // -
46 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.5
49, -1); // 55.5 round10(55, 1); // 60 round10(5
4.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,...
Math.pow() - JavaScript
examples using math.pow() // simple math.pow(7, 2); //
49 math.pow(7, 3); // 3
43 math.pow(2, 10); // 102
4 // 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.
41
42135623730951 (square root of 2) math.pow(2, 1/3); // 1.2599210
4989
48732 (cube root of 2) // signed exponents math.pow(7, -2); // 0.020
40816326530612 (1/
49) math.pow(8, -1/3); // 0.5 // signed bases math.pow...
...(-7, 2); //
49 (squares are positive) math.pow(-7, 3); // -3
43 (cubes can be negative) math.pow(-7, 0.5); // nan (negative numbers don't have a real square root) // due to "even" and "odd" roots laying close to each other, // and limits in the floating number precision, // negative bases with fractional exponents always return nan math.pow(-7, 1/3); // nan specifications specification ecmascript (ecma-262)the definition of 'math.pow' in that specification.
Number.prototype.toFixed() - JavaScript
examples using tofixed let numobj = 123
45.6789 numobj.tofixed() // returns '123
46': note rounding, no fractional part numobj.tofixed(1) // returns '123
45.7': note rounding numobj.tofixed(6) // returns '123
45.678900': note added zeros (1.23e+20).tofixed(2) // returns '123000000000000000000.00' (1.23e-10).tofixed(2) // returns '0.00' 2.3
4.tofixed(1) // returns '2.3' 2.35.tofixed(1) // returns '2.
4'.
...note it rounds down - see warning above -2.3
4.tofixed(1) // returns -2.3 (due to operator precedence, negative number literals don't return a string...) (-2.3
4).tofixed(1) // returns '-2.3' specifications specification ecmascript (ecma-262)the definition of 'number.prototype.tofixed' in that specification.
Number.prototype.toPrecision() - JavaScript
examples using toprecision let numobj = 5.123
456 console.log(numobj.toprecision()) // logs '5.123
456' 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.0001...
...2' console.log(numobj.toprecision(1)) // logs '0.0001' // note that exponential notation might be returned in some circumstances console.log((123
4.5).toprecision(2)) // logs '1.2e+3' specifications specification ecmascript (ecma-262)the definition of 'number.prototype.toprecision' in that specification.
Object.create() - JavaScript
log('setting `o.bar` to', value); } */ } }); function constructor() {} o = new constructor(); // is equivalent to: o = object.create(constructor.prototype); // of course, if there is actual initialization code // in the constructor function, // the object.create() cannot reflect it // create a new object whose prototype is a new, empty // object and add a single property 'p', with value
42.
... o = object.create({}, { p: { value:
42 } }); // by default properties are not writable, // enumerable or configurable: o.p = 2
4; o.p; //
42 o.q = 12; for (var prop in o) { console.log(prop); } // 'q' delete o.p; // false // to specify an es3 property o2 = object.create({}, { p: { value:
42, writable: true, enumerable: true, configurable: true } }); /* is not equivalent to: this will create an object with prototype : {p:
42 } o2 = object.create({p:
42}) */ specifications specification ecmascript (ecma-262)the definition of 'object.create' in that specification.
Object.defineProperty() - JavaScript
var o = {}; object.defineproperty(o, 'a', { value: 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.prope...
...rtyisenumerable('b'); // false o.propertyisenumerable('c'); // false o.propertyisenumerable('d'); // true o.propertyisenumerable(symbol.for('e')); // true o.propertyisenumerable(symbol.for('f')); // false var p = { ...o } p.a // 1 p.b // undefined p.c // undefined p.d //
4 p[symbol.for('e')] // 5 p[symbol.for('f')] // undefined configurable attribute the configurable attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than value and writable) can be changed.
Promise.race() - JavaScript
examples asynchronicity of promise.race this following example demonstrates the asynchronicity of promise.race: // we are passing as argument an array of promises that are already resolved, // to trigger promise.race as soon as possible var resolvedpromisesarray = [promise.resolve(33), promise.resolve(
44)]; var p = promise.race(resolvedpromisesarray); // immediately logging the value of p console.log(p); // using settimeout we can execute code after the stack is empty settimeout(function(){ console.log('the stack is now empty'); console.log(p); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: 33 } an empty ...
...omise(function(resolve, reject) { settimeout(() => resolve('one'), 500); }); var p2 = new promise(function(resolve, reject) { settimeout(() => resolve('two'), 100); }); promise.race([p1, p2]) .then(function(value) { console.log(value); // "two" // both fulfill, but p2 is faster }); var p3 = new promise(function(resolve, reject) { settimeout(() => resolve('three'), 100); }); var p
4 = new promise(function(resolve, reject) { settimeout(() => reject(new error('four')), 500); }); promise.race([p3, p
4]) .then(function(value) { console.log(value); // "three" // p3 is faster, so it fulfills }, function(reason) { // not called }); var p5 = new promise(function(resolve, reject) { settimeout(() => resolve('five'), 500); }); var p6 = new promise(function(resolve, rejec...
Promise.prototype.then() - JavaScript
in the following example, the first then() will return
42 wrapped in a resolving promise even though the previous promise in the chain was rejected.
... promise.reject() .then(() => 99, () =>
42) // onrejected returns
42 which is wrapped in a resolving promise .then(solution => console.log('resolved with ' + solution)); // resolved with
42 in practice, it is often desirable to catch rejected promises rather than use then's two case syntax, as demonstrated below.
RegExp.prototype[@@replace]() - JavaScript
var result = str; for (var i = 0; i < this.count; i++) { result = regexp.prototype[symbol.replace].call(this, result, replacement); } return result; } } var re = new myregexp('\\d', '', 3); var str = '0123
4567'; var newstr = str.replace(re, '#'); // string.prototype.replace calls re[@@replace].
... console.log(newstr); // ###3
4567 specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@replace]' in that specification.
RegExp - JavaScript
regex.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
456")) console.log(r, "and re.lastindex", re.lastindex); // [ '1', index: 0, input: '123
456', groups: undefined ] and re.lastindex 1 // [ '2', index: 1, input: '123
456', groups: undefined ] and re.lastindex 2 // [ '3', index: 2, input: '123
456', groups: undefined ] and re.lastindex 3 // ...
... let text = 'Образец text на русском языке' let regex = /[\u0
400-\u0
4ff]+/g let match = regex.exec(text) console.log(match[0]) // logs 'Образец' console.log(regex.lastindex) // logs '7' let match2 = regex.exec(text) console.log(match2[0]) // logs 'на' [did not log 'text'] console.log(regex.lastindex) // logs '15' // and so on the unicode property escapes feature introduces a solution, by allowing for a statement as simple as \p{scx...
SharedArrayBuffer.prototype.slice() - JavaScript
for example, slice(1,
4) extracts the second element through the fourth element (elements indexed 1, 2, and 3).
... examples using slice var sab = new sharedarraybuffer(102
4); sab.slice(); // sharedarraybuffer { bytelength: 102
4 } sab.slice(2); // sharedarraybuffer { bytelength: 1022 } sab.slice(-2); // sharedarraybuffer { bytelength: 2 } sab.slice(0, 1); // sharedarraybuffer { bytelength: 1 } specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer.prototype.slice' in that specification.
String.prototype.codePointAt() - JavaScript
’s the start of a surrogate pair first >= 0xd800 && first <= 0xdbff && // high surrogate size > index + 1 // there is a next code unit ) { second = string.charcodeat(index + 1); if (second >= 0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae return (first - 0xd800) * 0x
400 + 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) // 65536 'xyz'.codepointat(
42) // undefined looping with codepointat() for (let codepoint of '\ud83d\udc0e\ud83d\udc71\u276
4') { console.log(codepoint.codepointat(0).tostring(16)) } // '1f
40e', '1f
471', '276
4' specifications specification ecmascript (ecma-262)the definition of 'string.prototype.codepointat' in that specification.
String.prototype.indexOf() - JavaScript
for example, 'hello world'.indexof('o', -5) will return
4, as it starts at position 0, and o is found at position
4.
...ddar')) // logs -1 using indexof() to count occurrences of a letter in a 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-262)the definition of 'string.prototype.indexof' in that specification.
String length - JavaScript
unicode since `length` counts code units instead of characters, if you want to get the number of characters you need something like this: function getcharacterlength (str) { // the string iterator that is used here iterates over characters, // not mere code units return [...str].length; } console.log(getcharacterlength('a\ud87e\udc0
4z')); // 3 // while not recommended, you could add this to each string as follows: object.defineproperty(string.prototype, 'charlength', { get () { return getcharacterlength(this); } }); console.log('a\ud87e\udc0
4z'.charlength); // 3 examples basic usage let x = 'mozilla'; let empty = ''; console.log(x + ' is ' + x.length + ' code units long'); /* "mozilla is 7 code units long" */ ...
...mystring.length =
4; console.log(mystring); // expected output: "bluebells" console.log(mystring.length); // expected output: 9 specifications specification ecmascript (ecma-262) ...
String.prototype.match() - JavaScript
const str = 'for more information, see chapter 3.
4.5.1'; const re = /see (chapter \d+(\.\d)*)/i; const found = str.match(re); console.log(found); // logs [ 'see chapter 3.
4.5.1', // 'chapter 3.
4.5.1', // '.1', // index: 22, // input: 'for more information, see chapter 3.
4.5.1' ] // 'see chapter 3.
4.5.1' is the whole match.
... // 'chapter 3.
4.5.1' was captured by '(chapter \d+(\.\d)*)'.
String.prototype.slice() - JavaScript
str.slice(1,
4) extracts the second character through the fourth character (characters indexed 1, 2, and 3).
... str2 = str1.slice(1, 8), str3 = str1.slice(
4, -2), str
4 = str1.slice(12), str5 = str1.slice(30); console.log(str2) // output: he morn console.log(str3) // output: morning is upon u console.log(str
4) // output: is upon us.
String.prototype.substring() - JavaScript
examples using substring() the following example uses substring() to display characters from the string 'mozilla': let anystring = 'mozilla' // displays 'm' console.log(anystring.substring(0, 1)) console.log(anystring.substring(1, 0)) // displays 'mozill' console.log(anystring.substring(0, 6)) // displays 'lla' console.log(anystring.substring(
4)) console.log(anystring.substring(
4, 7)) console.log(anystring.substring(7,
4)) // displays 'mozilla' console.log(anystring.substring(0, 7)) console.log(anystring.substring(0, 10)) using substring() with length property the following example uses the substring() method and length property to extract the last characters of a particular string.
... // displays 'illa' the last
4 characters let anystring = 'mozilla' let anystring
4 = anystring.substring(anystring.length -
4) console.log(anystring
4) // displays 'zilla' the last 5 characters let anystring = 'mozilla' let anystring5 = anystring.substring(anystring.length - 5) console.log(anystring5) the difference between substring() and substr() there's a subtle difference between the substring() and substr() methods, so you should be careful not to get them confused.
TypedArray.prototype.entries() - JavaScript
examples iteration using for...of loop var arr = new uint8array([10, 20, 30,
40, 50]); var earray = arr.entries(); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30,
40, 50]); var earr = arr.entries(); console.log(earr.next().value); // [0, 10] console.log(earr.next().value); // [1, 20] console.log(earr.next().value); // [2, 30] console.
...log(earr.next().value); // [3,
40] console.log(earr.next().value); // [
4, 50] specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.entries()' in that specification.
TypedArray.prototype.every() - JavaScript
function isbigenough(element, index, array) { return element >= 10; } new uint8array([12, 5, 8, 130,
44]).every(isbigenough); // false new uint8array([12, 5
4, 18, 130,
44]).every(isbigenough); // true testing typed array elements using arrow functions arrow functions provide a shorter syntax for the same test.
... new uint8array([12, 5, 8, 130,
44]).every(elem => elem >= 10); // false new uint8array([12, 5
4, 18, 130,
44]).every(elem => elem >= 10); // true specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.every' in that specification.
TypedArray.prototype.filter() - JavaScript
function isbigenough(element, index, array) { return element >= 10; } new uint8array([12, 5, 8, 130,
44]).filter(isbigenough); // uint8array [ 12, 130,
44 ] filtering typed array elements using arrow functions arrow functions provide a shorter syntax for the same test.
... new uint8array([12, 5, 8, 130,
44]).filter(elem => elem >= 10); // uint8array [ 12, 130,
44 ] specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.filter' in that specification.
TypedArray.from() - JavaScript
syntax typedarray.from(source[, mapfn[, thisarg]]) where typedarray is one of: int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float6
4array bigint6
4array biguint6
4array parameters source an array-like or iterable object to convert to a typed array.
... 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 int16array.from('123'); // int16array [ 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 (ecma-262)the definition of '%typedarray%.from' in that specification.
TypedArray.prototype.keys() - JavaScript
examples iteration using for...of loop var arr = new uint8array([10, 20, 30,
40, 50]); var earray = arr.keys(); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30,
40, 50]); var earr = arr.keys(); console.log(earr.next().value); // 0 console.log(earr.next().value); // 1 console.log(earr.next().value); // 2 console.log(earr.next().value); ...
...// 3 console.log(earr.next().value); //
4 specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.keys()' in that specification.
TypedArray.prototype.map() - JavaScript
const numbers = new uint8array([1,
4, 9]); const roots = numbers.map(math.sqrt); // roots is now: uint8array [1, 2, 3], // numbers is still uint8array [1,
4, 9] mapping a typed array of numbers using a function containing an argument the following code shows how map works when a function requiring one argument is used with it.
... const numbers = new uint8array([1,
4, 9]); const doubles = numbers.map(function(num) { return num * 2; }); // doubles is now uint8array [2, 8, 18] // numbers is still uint8array [1,
4, 9] specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.map' in that specification.
TypedArray.prototype.some() - JavaScript
function isbiggerthan10(element, index, array) { return element > 10; } new uint8array([2, 5, 8, 1,
4]).some(isbiggerthan10); // false new uint8array([12, 5, 8, 1,
4]).some(isbiggerthan10); // true testing typed array elements using arrow functions arrow functions provide a shorter syntax for the same test.
... 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-262)the definition of 'typedarray.prototype.some' in that specification.
TypedArray.prototype.sort() - JavaScript
let numbers = new uint8array([
40, 1, 5, 200]); numbers.sort(); // uint8array [ 1, 5,
40, 200 ] // unlike plain arrays, a compare function is not required // to sort the numbers numerically.
... // regular arrays require a compare function to sort numerically: numbers = [
40, 1, 5, 200]; numbers.sort(); // [1, 200,
40, 5] numbers.sort((a, b) => a - b); // compare numbers // [ 1, 5,
40, 200 ] specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.sort' in that specification.
TypedArray.prototype.toString() - JavaScript
var numbers = new uint8array([2, 5, 8, 1,
4]) numbers.tostring(); // "2,5,8,1,
4" javascript calls the tostring method automatically when a typed array is to be represented as a text value or when an array is referred to in a string concatenation.
... compatibility if a browser doesn't support the typedarray.prototype.tostring() method yet, javascript will call the tostring method of object: var numbers = new uint8array([2, 5, 8, 1,
4]) numbers.tostring(); // "[object uint8array]" specifications specification ecmascript (ecma-262)the definition of 'array.prototype.tostring' in that specification.
TypedArray.prototype.values() - JavaScript
examples iteration using for...of loop var arr = new uint8array([10, 20, 30,
40, 50]); var earray = arr.values(); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30,
40, 50]); var earr = arr.values(); console.log(earr.next().value); // 10 console.log(earr.next().value); // 20 console.log(earr.next().value); // 30 console.log(earr.next().v...
...alue); //
40 console.log(earr.next().value); // 50 specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.values()' in that specification.
Uint32Array() constructor - JavaScript
examples different ways to create a uint32array // from a length var uint32 = new uint32array(2); uint32[0] =
42; console.log(uint32[0]); //
42 console.log(uint32.length); // 2 console.log(uint32.bytes_per_element); //
4 // from an array var arr = new uint32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint32array([21, 31]); var y = new uint32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(16); var z = new uint32array(buffer, 0, ...
...
4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var uint32 = new uint32array(iterable); // uint32array[1, 2, 3] specifications specification ecmascript (ecma-262)the definition of 'typedarray constructors' in that specification.
Uint8ClampedArray() constructor - JavaScript
examples different ways to create a uint8clampedarray // from a length var uintc8 = new uint8clampedarray(2); uintc8[0] =
42; uintc8[1] = 1337; console.log(uintc8[0]); //
42 console.log(uintc8[1]); // 255 (clamped) console.log(uintc8.length); // 2 console.log(uintc8.bytes_per_element); // 1 // from an array var arr = new uint8clampedarray([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8clampedarray([21, 31]); var y = new uint8clampedarray(x); console.log(y[0]); // 21 // from an arra...
...ybuffer var buffer = new arraybuffer(8); var z = new uint8clampedarray(buffer, 1,
4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var uintc8 = new uint8clampedarray(iterable); // uint8clampedarray[1, 2, 3] specifications specification ecmascript (ecma-262)the definition of 'typedarray constructors' in that specification.
Uint8ClampedArray - JavaScript
examples different ways to create a uint8clampedarray // from a length var uintc8 = new uint8clampedarray(2); uintc8[0] =
42; uintc8[1] = 1337; console.log(uintc8[0]); //
42 console.log(uintc8[1]); // 255 (clamped) console.log(uintc8.length); // 2 console.log(uintc8.bytes_per_element); // 1 // from an array var arr = new uint8clampedarray([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8clampedarray([21, 31]); var y = new uint8clampedarray(x); console.log(y[0]); // 21 // from an arra...
...ybuffer var buffer = new arraybuffer(8); var z = new uint8clampedarray(buffer, 1,
4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var uintc8 = new uint8clampedarray(iterable); // uint8clampedarray[1, 2, 3] specifications specification ecmascript (ecma-262)the definition of 'typedarray constructors' in that specification.
WebAssembly.CompileError() constructor - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Global - JavaScript
the value of the global is then changed, first to
42 using the global.value property, and then to
43 using the incglobal() function exported out of the global.wasm module (this adds 1 to whatever value is given to it and then returns the new value).
...got: ${got}<br>`; } asserteq("webassembly.global exists", typeof webassembly.global, "function"); const global = new webassembly.global({value:'i32', mutable:true}, 0); webassembly.instantiatestreaming(fetch('global.wasm'), { js: { global } }) .then(({instance}) => { asserteq("getting initial value from wasm", instance.exports.getglobal(), 0); global.value =
42; asserteq("getting js-updated value from wasm", instance.exports.getglobal(),
42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value,
43); }); note: you can see the example running live on github; see also the source code.
WebAssembly.Instance() constructor - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Instance.prototype.exports - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.LinkError() constructor - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Memory.prototype.buffer - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Module() constructor - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Module.customSections() - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Module.exports() - JavaScript
57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support
44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52...
... extended support release (esr).opera android full support
43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
Comma operator (,) - JavaScript
in the following example, a is set to the value of b = 3 (which is 3), but the c =
4 expression still evaluates and its result returned to console (i.e.,
4).
... 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.
Logical NOT (!) - JavaScript
n1 = !true // !t returns false n2 = !false // !f returns true n3 = !'' // !f returns true n
4 = !'cat' // !t returns false double not (!!) it is possible to use a couple of not operators in series to explicitly force the conversion of any value to the corresponding boolean primitive.
...n
4 = !!false // !!falsy returns false n5 = !!"" // !!falsy returns false n6 = !!boolean(false) // !!falsy returns false converting between nots the following operation involving booleans: !!bcondition is always equal to: bcondition specifications specification ecmascript (ecma-262)the definition of 'logical not expression' in that specificat...
Unsigned right shift (>>>) - JavaScript
for example, -9 >>> 2 yields 10737
41821, which is different than -9 >> 2 (which yields -3): .
... -9 (base 10): 11111111111111111111111111110111 (base 2) -------------------------------- -9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 10737
41821 (base 10) examples using unsigned right shift 9 >>> 2; // 2 -9 >>> 2; // 10737
41821 specifications specification ecmascript (ecma-262)the definition of 'bitwise shift operators' in that specification.
typeof - JavaScript
examples basic usage // numbers typeof 37 === 'number'; typeof 3.1
4 === 'number'; typeof(
42) === 'number'; typeof math.ln2 === 'number'; typeof infinity === 'number'; typeof nan === 'number'; // despite being "not-a-number" typeof number('1') === 'number'; // number tries to parse things into numbers typeof number('shoe') === 'number'; // including values that cannot be type coerced to a number typeof
42n === 'bigint'; // strings typeof '' === 'string';...
...eof symbol() === 'symbol' typeof symbol('foo') === 'symbol' typeof symbol.iterator === 'symbol' // undefined typeof undefined === 'undefined'; typeof declaredbutundefinedvariable === 'undefined'; typeof undeclaredvariable === 'undefined'; // objects typeof {a: 1} === 'object'; // use array.isarray or object.prototype.tostring.call // to differentiate regular objects from arrays typeof [1, 2,
4] === 'object'; typeof new date() === 'object'; typeof /regex/ === 'object'; // see regular expressions section for historical results // the following are confusing, dangerous, and wasteful.
continue - JavaScript
var i = 0; var j = 8; checkiandj: while (i <
4) { console.log('i: ' + i); i += 1; checkj: while (j >
4) { console.log('j: ' + j); j -= 1; if ((j % 2) == 0) continue checkj; console.log(j + ' is odd.'); } console.log('i = ' + i); console.log('j = ' + j); } output: i: 0 // start checkj j: 8 7 is odd.
...j: 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-262)the definition of 'continue statement' in that specification.
var - JavaScript
y =
4; // assigns
4 to existing outer y.
... console.log(x, y, z); // 3
4 5 } a(); // also calls b.
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 es2016 behavior as of ecmascript 2016, 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{2f80
4} hexadecimal escapes started by "\x", for example \xa9 octal literal escapes 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 (es2016 a...
...the ecmascript proposal template literal revision (stage
4, to be integrated in the ecmascript 2018 standard) removes the syntax restriction of ecmascript escape sequences from tagged templates.
Web app manifests
ing_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen
48.png", "sizes": "
48x
48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen1
44.png", "sizes": "1
44x1
44", "type": "image/png" }, { "src": "images/touch/homescreen168.png", ...
... splash screens in chrome
47 and later, a splash screen is displayed for sites launched from a homescreen.
Authoring MathML - MathML
for example tex
4ht is often included in tex distributions and has an option to use mathml instead of png images.
... this command will generate an xhtml+mathml document foo.xml from a foo.tex latex source: mk
4ht mzlatex foo.tex # linux/mac platforms mzlatex foo.tex # windows platform note that tex
4ebook relies on tex
4ht to generate epub documents.
<mtable> - MathML
starting with gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the interpretation of negative values has been corrected (bug 601
436).
... in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.1
4) the parsing has been updated to treat whitespace correctly.
Progressive web app structure - Progressive web apps (PWAs)
ything outside the content section: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a3
4"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" hre...
.../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-6
4.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg')...
Structural overview of progressive web apps - Progressive web apps (PWAs)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a3
4"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" hre...
.../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-6
4.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg')...
clipPathUnits - SVG: Scalable Vector Graphics
ute: <clippath> html,body,svg { height:100% } <svg viewbox="0 0 100 100"> <clippath id="myclip1" clippathunits="userspaceonuse"> <circle cx="50" cy="50" r="35" /> </clippath> <clippath id="myclip2" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".35" /> </clippath> <!-- some reference rect to materialized to clip path --> <rect id="r1" x="0" y="0" width="
45" height="
45" /> <rect id="r2" x="0" y="55" width="
45" height="
45" /> <rect id="r3" x="55" y="55" width="
45" height="
45" /> <rect id="r
4" x="55" y="0" width="
45" height="
45" /> <!-- the first 3 rect are clipped with usespaceonuse units --> <use clip-path="url(#myclip1)" xlink:href="#r1" fill="red" /> <use clip-path="url(#myclip1)" xlink:href="#r2" fill="red" /> <use clip-path="ur...
...l(#myclip1)" xlink:href="#r3" fill="red" /> <!-- the last rect is clipped with objectboundingbox units --> <use clip-path="url(#myclip2)" xlink:href="#r
4" fill="red" /> </svg> clippath for <clippath>, clippathunits define the coordinate system in use for the content of the element.
color-rendering - SVG: Scalable Vector Graphics
ct on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0
480 200" xmlns="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="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="
45" y="50%" color-re...
...ndering="optimizequality">quality-optimized</text> <circle cx="100" cy="100" r="100" color-rendering="optimizespeed" fill="url(#gradient)" style="transform: translatex(2
40px);" /> <text x="290" y="50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.
cx - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="
45"/> <ellipse cx="150" cy="50" rx="
45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 3
4 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cx="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="gre...
cy - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="
45"/> <ellipse cy="150" cx="50" rx="
45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 3
4 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cy="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="gre...
divisor - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <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 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="//developer.mozilla.org/file...
...s/6
457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6
457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <number> default value sum of all values in kernelmatrix or 1 if sum is 0 animatable yes <number> this value defines the divisor.
dominant-baseline - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on the text content elements, including: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } text { font: bold 1
4px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"> <path d="m20,20 l180,20 m20,50 l180,50 m20,80 l180,80" stroke="grey" /> <text dominant-baseline="baseline" x="30" y="20">baseline</text> <text dominant-baseline="middle" x="30" y="50">middle</text> <text dominant-baseline="hanging" x="30" y="80">hanging</text> </svg> us...
... example svg <svg width="
400" height="300" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <!-- materialization of anchors --> <path d="m60,20 l60,270 m30,20 l
400,20 m30,70 l
400,70 m30,120 l
400,120 m30,170 l
400,170 m30,220 l
400,220 m30,270 l
400,270" stroke="grey" /> <!-- anchors in action --> <text dominant-baseline="auto" x="70" ...
fill - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="
40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <circle cx="150" cy="50" r="
40" fill="url(#mygradient)" /> <!-- keeping the final state of an animated circle which is a circle with a radius of
40.
... --> <circle cx="250" cy="50" r="20"> <animate attributetype="xml" attributename="r" from="0" to="
40" dur="5s" fill="freeze" /> </circle> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
kernelMatrix - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <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/6
457/mdn_logo_only_col...
...or.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6
457/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 <list of numbers> the list of <number>s that make up the kernel matrix for the convolution.
limitingConeAngle - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0
480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="spotlight1" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="10" /> </fediffuselighting> </filter> <filter id="spotlight2" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> ...
... <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="
40" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'limitingconeangle' in that specification.
maskContentUnits - SVG: Scalable Vector Graphics
fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskcontentunits="objectboundingbox"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx=".5" cy=".5" r=".35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="
45" height="
45" /> <rect id="r2" x="0" y="55" width="
45" height="
45" /> <rect id="r3" x="55" y="55" width="
45" height="
45" /> <rect id="r
4" x="55" y="0" width="
45" height="
45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xli...
...nk:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r
4" fill="red" /> </svg> mask for <mask>, maskcontentunits defines the coordinate system in use for the content of the element.
maskUnits - SVG: Scalable Vector Graphics
ght="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" y="0" width="
45" height="
45" /> <rect id="r2" x="0" y="55" width="
45" height="
45" /> <rect id="r3" x="55" y="55" width="
45" height="
45" /> <rect id="r
4" x="55" y="0" width="
45" height="
45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xli...
...nk:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r
4" fill="red" /> </svg> mask for <mask>, maskunits defines the coordinate system in use for the geometry attributes (x, y, width and height) of the element.
mode - SVG: Scalable Vector Graphics
only one element is using this attribute: <feblend> html, body, svg { height: 100%; } <svg viewbox="0 0
480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" 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="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="//develo...
...per.mozilla.org/files/6
457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/6
457/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 description of the values, see <blend-mode>.
opacity - SVG: Scalable Vector Graphics
ht: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="
40" fill="black" /> <circle cx="150" cy="50" r="
40" fill="black" opacity="0.3" /> </svg> usage notes default value 1 value <alpha-value> animatable yes <alpha-value> the uniform opacity setting to be applied across an entire object, as a <number>.
... specifications specification status comment css color module level
4the definition of 'opacity' in that specification.
operator - SVG: Scalable Vector Graphics
two elements are using this attribute: <fecomposite> and <femorphology> html, body, svg { height: 100%; font: 20px arial, helvetica, sans-serif; } <svg viewbox="0 0 120 70" xmlns="http://www.w3.org/2000/svg"> <filter id="erode"> <femorphology operator="erode" radius="0.
4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="
40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be performed.
... arithmetic this value indicates that the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k
4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively, and k1,k2,k3,and k
4 indicate the values of the attributes with the same name.
orient - SVG: Scalable Vector Graphics
0 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 ...
... note: for example, if a value of
45 is given, then the marker's positive x-axis would be pointing down and right in the shape's coordinate system.
pointer-events - SVG: Scalable Vector Graphics
to change the color of the rect underneath you have to click outside the circle --> <rect x="0" y="0" height="10" width="10" fill="black" /> <circle cx="5" cy="5" r="
4" fill="white" pointer-events="visiblepoint" /> <!-- the circle below will never catch a mouse event.
... the rect underneath will change color whether you are clicking on the circle or the rect itself --> <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(16).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>, <ellips...
preserveAspectRatio - SVG: Scalable Vector Graphics
example <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a
40,
40,1,1,1,50,90 a
40,
40,1,1,1,50,10 m30,
40 q36,35,
42,
40 m58,
40 q6
4,35,70,
40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xminymid meet" x="25" y="0" viewbox="0 0 100 100" width="20" height="10"><use h...
...="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="160" height="60"><use href="#smiley" /></svg> </svg> topexample html,body,svg { height:100% } <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a
40,
40,1,1,1,50,90 a
40,
40,1,1,1,50,10 m30,
40 q36,35,
42,
40 m58,
40 q6
4,35,70,
40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <rect x="0" y="0" width="20" height="10"> <title>xmidymid meet</title> </rect> <svg viewbox="0 0 100 100" width="20" height="10" preserveaspectratio="xmidymid meet" x="0" y="0"> <use href="#smiley" /> </svg> <rect x="25...
scale - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0
480 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="1
40%" height="1
40%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="1
40%" height="1
40%"> <feturbulence type="turbulence" basefrequency="0.05" numoctav...
...es="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter);""/> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter2); transform: translatex(2
40px);""/> </svg> usage notes value <number> default value none animatable yes <number> this value defines the scale factor for the displacement.
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 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
... </textpath> </text> <text> <textpath href="#path2" startoffset="
40"> quick brown fox jumps over the lazy dog.
stroke-dasharray - SVG: Scalable Vector Graphics
lipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="
4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="
4 1" /> <!-- dashes and gaps of various sizes with an odd number of values --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="
4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" ...
...y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="
4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none animatable yes <dasharray> a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps.
stroke-miterlimit - SVG: Scalable Vector Graphics
the ratio of miter length (distance between the outer tip and the inner corner of the miter) to stroke-width is directly related to the angle (theta) between the segments in user space by the formula: stroke-miterlimit = miterlength stroke-width = 1 sin ( θ 2 ) for example, a miter limit of 1.
41
4 converts miters to bevels for theta less than 90 degrees, a limit of
4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.
... usage context value <number> default value
4 animatable yes the value of stroke-miterlimit must be greater than or equal to 1.
stroke-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0
40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="
4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="
4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="
4" stroke="green" stroke-opacity="50%" /> <!-- stroke opacity as a css...
... property --> <circle cx="35" cy="5" r="
4" stroke="green" style="stroke-opacity: .3;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for stroke-opacity, however, it is not widely supported yet (see browser compatibility below) as a consequence, it is best practices to set opacity with a value in the range [0-1].
unicode-range - SVG: Scalable Vector Graphics
the unicode-range attribute defines the range of iso 106
46 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 106
46 characters possibly covered by the glyphs in the font.
values - SVG: Scalable Vector Graphics
if type="matrix", identity matrix, if type="saturate", 1, resulting in identity matrix, if type="huerotate", 0, resulting in identity matrix animatable yes <list-of-numbers> the value is a list of numbers, which is interpreted differently depending on the value of the type attribute: for type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a0
4 a10 a11 ...
... a3
4), separated by whitespace and/or a comma.
<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="1" stop-color="#800080"></stop> </lineargradient> <filter id="identity" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="identity"></fefuncr> <fefuncg type="identity"></fefuncg> ...
...ponenttransfer> <fefuncr type="linear" slope="0.5" intercept="0"></fefuncr> <fefuncg type="linear" slope="0.5" intercept="0.25"></fefuncg> <fefuncb type="linear" slope="0.5" intercept="0.5"></fefuncb> </fecomponenttransfer> </filter> <filter id="gamma" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" amplitude="
4" exponent="7" offset="0"></fefuncr> <fefuncg type="gamma" amplitude="
4" exponent="
4" offset="0"></fefuncg> <fefuncb type="gamma" amplitude="
4" exponent="1" offset="0"></fefuncb> </fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <text x="0" y="20">default</text> <rect x="0" y="30" width="100%" height="20"></rect> <text x="0" y="70">identity</...
<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 1
40 235 235 200 220 2
40 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*1
40 + 3*200 + 2*220 + 1*2
40) / (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.
<feDropShadow> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="shadow"> <fedropshadow dx="0.2" dy="0.
4" stddeviation="0.2"/> </filter> <filter id="shadow2"> <fedropshadow dx="0" dy="0" stddeviation="0.5" flood-color="cyan"/> </filter> <filter id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviation="0" flood-color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="
4" style="fill:pink; filter:url(#shadow);"/> ...
... <circle cx="15" cy="50%" r="
4" style="fill:pink; filter:url(#shadow2);"/> <circle cx="25" cy="50%" r="
4" style="fill:pink; filter:url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset of the drop shadow.
<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" style="stroke: #000000; fill: green;" /> </svg> result attributes global attributes core attributes » specific attributes in dom interface this element implements the svgfemergenodeelement interface.
<glyph> - SVG: Scalable Vector Graphics
example svg <svg width="
400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="
400" ascent="700" descent="300" alpha...
...betic="0" mathematical="350" ideographic="
400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l
400,100z"></glyph> </font> </defs> <text x="100" y="100" style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-style: normal">text using embe@dded font!</text> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<glyph>' in that specification.
<mpath> - SVG: Scalable Vector Graphics
example svg <svg width="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="
498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- draw the outline of the motion path in blue, along with three small circles at the start, middle and end.
... --> <path id="path1" d="m100,250 c 100,50
400,50
400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.6
4" fill="blue" /> <circle cx="250" cy="100" r="17.6
4" fill="blue" /> <circle cx="
400" cy="250" r="17.6
4" fill="blue" /> <!-- here is a triangle which will be moved about the motion path.
Fills and Strokes - SVG: Scalable Vector Graphics
<?xml version="1.0" standalone="no"?> <svg width="160" height="1
40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="
40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="
40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="
40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg> the stroke-width property defines the wi...
... <?xml version="1.0" standalone="no"?> <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="
40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> <polyline points="
40 1
40 80 100 120 1
40" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> <polyline points="
40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="be...
Texts - SVG: Scalable Vector Graphics
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.